{"version":3,"sources":["../../src/scss/examples.scss","dist/css/examples.css","../../node_modules/@coreui/coreui/scss/mixins/_breakpoints.scss"],"names":[],"mappings":"AAME,2BACE,WAAA,OAGF,sBACE,iBAAA,kBAES,kCACP,iBAAA,+BAIJ,WACE,WAAA,OAKA,oBACE,WAAA,KAIA,8CACE,WAAA,MCTR,gCDaI,4BCZJ,kCACA,sCDeM,WAAA,KAGF,iCACE,SAAA,OACA,QAAA,MAGF,8BACE,cAAA,ECbN,0BDiBI,0BAEE,YAAA,MAIF,uBCnBJ,6BDqBM,OAAA,OAAA,QAEF,4CACE,WAAA,MAIF,8BACE,UAAA,MAGF,iDACE,UAAA,KAIF,6BCxBJ,8BD0BM,SAAA,OACA,OAAA,MAAA,MAAA,KAGF,gCACE,SAAA,OACA,OAAA,KAAA,MAAA,MEPF,yBFWE,6BC1BJ,8BD4BM,OAAA,QAAA,QAAA,KAEF,gCACE,OAAA,KAAA,QAAA,SAKJ,8BACE,WAAA,MACA,cAAA","sourcesContent":["/* stylelint-disable declaration-no-important, scss/selector-no-redundant-nesting-selector */\n@import \"@coreui/coreui/scss/functions\";\n@import \"@coreui/coreui/scss/variables\";\n@import \"@coreui/coreui/scss/mixins\";\n\n.example {\n &:not(:first-child) {\n margin-top: 1.5rem;\n }\n\n .tab-content {\n background-color: $light-50 !important;\n\n @at-root .dark-theme & {\n background-color: rgba(255, 255, 255, .1) !important;\n }\n }\n\n & + p {\n margin-top: 1.5rem;\n }\n\n // Components examples\n .preview {\n + p {\n margin-top: 2rem;\n }\n\n > .form-control {\n + .form-control {\n margin-top: .5rem;\n }\n }\n\n > .nav + .nav,\n > .alert + .alert,\n > .navbar + .navbar,\n > .progress + .progress {\n margin-top: 1rem;\n }\n\n > .dropdown-menu {\n position: static;\n display: block;\n }\n\n > :last-child {\n margin-bottom: 0;\n }\n\n // Images\n > svg + svg,\n > img + img {\n margin-left: .5rem;\n }\n\n // Buttons\n > .btn,\n > .btn-group {\n margin: .25rem .125rem;\n }\n > .btn-toolbar + .btn-toolbar {\n margin-top: .5rem;\n }\n\n // List groups\n > .list-group {\n max-width: 400px;\n }\n\n > [class*=\"list-group-horizontal\"] {\n max-width: 100%;\n }\n\n // Navbars\n .fixed-top,\n .sticky-top {\n position: static;\n margin: -1rem -1rem 1rem;\n }\n\n .fixed-bottom {\n position: static;\n margin: 1rem -1rem -1rem;\n }\n\n @include media-breakpoint-up(sm) {\n .fixed-top,\n .sticky-top {\n margin: -1.5rem -1.5rem 1rem;\n }\n .fixed-bottom {\n margin: 1rem -1.5rem -1.5rem;\n }\n }\n\n // Pagination\n .pagination {\n margin-top: .5rem;\n margin-bottom: .5rem;\n }\n }\n}\n","/* stylelint-disable declaration-no-important, scss/selector-no-redundant-nesting-selector */\n.example:not(:first-child) {\n margin-top: 1.5rem;\n}\n.example .tab-content {\n background-color: #f9fafa !important;\n}\n.dark-theme .example .tab-content {\n background-color: rgba(255, 255, 255, 0.1) !important;\n}\n\n.example + p {\n margin-top: 1.5rem;\n}\n.example .preview + p {\n margin-top: 2rem;\n}\n.example .preview > .form-control + .form-control {\n margin-top: 0.5rem;\n}\n.example .preview > .nav + .nav,\n.example .preview > .alert + .alert,\n.example .preview > .navbar + .navbar,\n.example .preview > .progress + .progress {\n margin-top: 1rem;\n}\n.example .preview > .dropdown-menu {\n position: static;\n display: block;\n}\n.example .preview > :last-child {\n margin-bottom: 0;\n}\n.example .preview > svg + svg,\n.example .preview > img + img {\n margin-left: 0.5rem;\n}\n.example .preview > .btn,\n.example .preview > .btn-group {\n margin: 0.25rem 0.125rem;\n}\n.example .preview > .btn-toolbar + .btn-toolbar {\n margin-top: 0.5rem;\n}\n.example .preview > .list-group {\n max-width: 400px;\n}\n.example .preview > [class*=list-group-horizontal] {\n max-width: 100%;\n}\n.example .preview .fixed-top,\n.example .preview .sticky-top {\n position: static;\n margin: -1rem -1rem 1rem;\n}\n.example .preview .fixed-bottom {\n position: static;\n margin: 1rem -1rem -1rem;\n}\n@media (min-width: 576px) {\n .example .preview .fixed-top,\n .example .preview .sticky-top {\n margin: -1.5rem -1.5rem 1rem;\n }\n .example .preview .fixed-bottom {\n margin: 1rem -1.5rem -1.5rem;\n }\n}\n.example .preview .pagination {\n margin-top: 0.5rem;\n margin-bottom: 0.5rem;\n}\n\n/*# sourceMappingURL=examples.css.map */","// Breakpoint viewport sizes and media queries.\n//\n// Breakpoints are defined as a map of (name: minimum width), order from small to large:\n//\n// (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px)\n//\n// The map defined in the `$grid-breakpoints` global variable is used as the `$breakpoints` argument by default.\n\n// Name of the next breakpoint, or null for the last breakpoint.\n//\n// >> breakpoint-next(sm)\n// md\n// >> breakpoint-next(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px))\n// md\n// >> breakpoint-next(sm, $breakpoint-names: (xs sm md lg xl xxl))\n// md\n@function breakpoint-next($name, $breakpoints: $grid-breakpoints, $breakpoint-names: map-keys($breakpoints)) {\n $n: index($breakpoint-names, $name);\n @if not $n {\n @error \"breakpoint `#{$name}` not found in `#{$breakpoints}`\";\n }\n @return if($n < length($breakpoint-names), nth($breakpoint-names, $n + 1), null);\n}\n\n// Name of the previous breakpoint, or null for the first breakpoint.\n//\n// >> breakpoint-before(lg)\n// md\n// >> breakpoint-next(lg, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n// md\n// >> breakpoint-next(lg, $breakpoint-names: (xs sm md lg xl))\n// md\n@function breakpoint-before($name, $breakpoints: $grid-breakpoints, $breakpoint-names: map-keys($breakpoints)) {\n $n: index($breakpoint-names, $name);\n @return if($n != null and $n < length($breakpoint-names), nth($breakpoint-names, $n - 1), null);\n}\n\n// Minimum breakpoint width. Null for the smallest (first) breakpoint.\n//\n// >> breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px))\n// 576px\n@function breakpoint-min($name, $breakpoints: $grid-breakpoints) {\n $min: map-get($breakpoints, $name);\n @return if($min != 0, $min, null);\n}\n\n// Maximum breakpoint width.\n// The maximum value is reduced by 0.02px to work around the limitations of\n// `min-` and `max-` prefixes and viewports with fractional widths.\n// See https://www.w3.org/TR/mediaqueries-4/#mq-min-max\n// Uses 0.02px rather than 0.01px to work around a current rounding bug in Safari.\n// See https://bugs.webkit.org/show_bug.cgi?id=178261\n//\n// >> breakpoint-max(md, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px))\n// 767.98px\n@function breakpoint-max($name, $breakpoints: $grid-breakpoints) {\n $max: map-get($breakpoints, $name);\n @return if($max and $max > 0, $max - .02, null);\n}\n\n// Returns a blank string if smallest breakpoint, otherwise returns the name with a dash in front.\n// Useful for making responsive utilities.\n//\n// >> breakpoint-infix(xs, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px))\n// \"\" (Returns a blank string)\n// >> breakpoint-infix(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px))\n// \"-sm\"\n@function breakpoint-infix($name, $breakpoints: $grid-breakpoints) {\n @return if(breakpoint-min($name, $breakpoints) == null, \"\", \"-#{$name}\");\n}\n\n// Media of at least the minimum breakpoint width. No query for the smallest breakpoint.\n// Makes the @content apply to the given breakpoint and wider.\n@mixin media-breakpoint-up($name, $breakpoints: $grid-breakpoints) {\n $min: breakpoint-min($name, $breakpoints);\n @if $min {\n @media (min-width: $min) {\n @content;\n }\n } @else {\n @content;\n }\n}\n\n// Media of at most the maximum breakpoint width. No query for the largest breakpoint.\n// Makes the @content apply to the given breakpoint and narrower.\n@mixin media-breakpoint-down($name, $breakpoints: $grid-breakpoints) {\n $max: breakpoint-max($name, $breakpoints);\n @if $max {\n @media (max-width: $max) {\n @content;\n }\n } @else {\n @content;\n }\n}\n\n// Media that spans multiple breakpoint widths.\n// Makes the @content apply between the min and max breakpoints\n@mixin media-breakpoint-between($lower, $upper, $breakpoints: $grid-breakpoints) {\n $min: breakpoint-min($lower, $breakpoints);\n $max: breakpoint-max($upper, $breakpoints);\n\n @if $min != null and $max != null {\n @media (min-width: $min) and (max-width: $max) {\n @content;\n }\n } @else if $max == null {\n @include media-breakpoint-up($lower, $breakpoints) {\n @content;\n }\n } @else if $min == null {\n @include media-breakpoint-down($upper, $breakpoints) {\n @content;\n }\n }\n}\n\n// Media between the breakpoint's minimum and maximum widths.\n// No minimum for the smallest breakpoint, and no maximum for the largest one.\n// Makes the @content apply only to the given breakpoint, not viewports any wider or narrower.\n@mixin media-breakpoint-only($name, $breakpoints: $grid-breakpoints) {\n $min: breakpoint-min($name, $breakpoints);\n $next: breakpoint-next($name, $breakpoints);\n $max: breakpoint-max($next, $breakpoints);\n\n @if $min != null and $max != null {\n @media (min-width: $min) and (max-width: $max) {\n @content;\n }\n } @else if $max == null {\n @include media-breakpoint-up($name, $breakpoints) {\n @content;\n }\n } @else if $min == null {\n @include media-breakpoint-down($next, $breakpoints) {\n @content;\n }\n }\n}\n"]} |