mirror of
https://github.com/tabler/tabler.git
synced 2025-12-26 11:16:12 +04:00
1 line
20 KiB
Plaintext
1 line
20 KiB
Plaintext
{"version":3,"sources":["../../scss/_banner.scss","dist/css/demo.rtl.css","../../scss/demo/_highlight.scss","../../scss/mixins/_mixins.scss","../../node_modules/bootstrap/scss/mixins/_transition.scss","../../scss/demo/_examples.scss","../../scss/demo.scss","../../node_modules/bootstrap/scss/mixins/_breakpoints.scss"],"names":[],"mappings":"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","sourcesContent":["@mixin banner($file) {\n /*!\n * Tabler #{$file} v1.0.0 (https://tabler.io/)\n * Copyright 2018-2024 The Tabler Authors\n * Licensed under MIT (https://github.com/tabler/tabler/blob/main/LICENSE)\n */\n}","/*!\n * Tabler Demo v1.0.0 (https://tabler.io/)\n * Copyright 2018-2024 The Tabler Authors\n * Licensed under MIT (https://github.com/tabler/tabler/blob/main/LICENSE)\n */\n/* prettier-ignore */\n/* prettier-ignore */\npre.highlight,\n.highlight pre {\n max-height: 30rem;\n margin: 1.5rem 0;\n overflow: auto;\n border-radius: var(--tblr-border-radius);\n}\npre.highlight,\n.highlight pre {\n scrollbar-color: rgba(var(--tblr-scrollbar-color, var(--tblr-body-color-rgb)), 0.16) transparent;\n}\npre.highlight::-webkit-scrollbar,\n.highlight pre::-webkit-scrollbar {\n width: 1rem;\n height: 1rem;\n -webkit-transition: background 0.3s;\n transition: background 0.3s;\n}\n@media (prefers-reduced-motion: reduce) {\n pre.highlight::-webkit-scrollbar,\n .highlight pre::-webkit-scrollbar {\n -webkit-transition: none;\n transition: none;\n }\n}\npre.highlight::-webkit-scrollbar-thumb,\n.highlight pre::-webkit-scrollbar-thumb {\n border-radius: 1rem;\n border: 5px solid transparent;\n box-shadow: inset 0 0 0 1rem rgba(var(--tblr-scrollbar-color, var(--tblr-body-color-rgb)), 0.16);\n}\npre.highlight::-webkit-scrollbar-track,\n.highlight pre::-webkit-scrollbar-track {\n background: transparent;\n}\npre.highlight:hover::-webkit-scrollbar-thumb,\n.highlight pre:hover::-webkit-scrollbar-thumb {\n box-shadow: inset 0 0 0 1rem rgba(var(--tblr-scrollbar-color, var(--tblr-body-color-rgb)), 0.32);\n}\npre.highlight::-webkit-scrollbar-corner,\n.highlight pre::-webkit-scrollbar-corner {\n background: transparent;\n}\n\n.highlight {\n margin: 0;\n}\n.highlight code > * {\n margin: 0 !important;\n padding: 0 !important;\n}\n.highlight .c, .highlight .c1 {\n color: #a0aec0;\n}\n.highlight .nt, .highlight .nc, .highlight .nx {\n color: #ff8383;\n}\n.highlight .na, .highlight .p {\n color: #ffe484;\n}\n.highlight .s, .highlight .dl, .highlight .s2 {\n color: #b5f4a5;\n}\n.highlight .k {\n color: #93ddfd;\n}\n.highlight .s1, .highlight .mi {\n color: #d9a9ff;\n}\n\n.example {\n padding: 2rem;\n margin: 1rem 0 2rem;\n border: var(--tblr-border-width) var(--tblr-border-style) var(--tblr-border-color);\n border-radius: 3px 3px 0 0;\n position: relative;\n min-height: 12rem;\n display: flex;\n align-items: center;\n overflow-x: auto;\n}\n\n.example-centered {\n justify-content: center;\n}\n.example-centered .example-content {\n flex: 0 auto;\n}\n\n.example-content {\n font-size: 0.875rem;\n line-height: 1.4285714286;\n color: var(--tblr-body-color);\n flex: 1;\n max-width: 100%;\n}\n.example-content .page-header {\n margin-bottom: 0;\n}\n\n.example-bg {\n background: #f6f8fb;\n}\n\n.example-code {\n margin: 2rem 0;\n border: var(--tblr-border-width) var(--tblr-border-style) var(--tblr-border-color);\n border-top: none;\n}\n.example-code pre {\n margin: 0;\n border: 0;\n border-radius: 0 0 3px 3px;\n}\n.example + .example-code {\n margin-top: -2rem;\n}\n\n.example-column {\n margin: 0 auto;\n}\n.example-column > .card:last-of-type {\n margin-bottom: 0;\n}\n\n.example-column-1 {\n max-width: 26rem;\n}\n\n.example-column-2 {\n max-width: 52rem;\n}\n\n.example-modal-backdrop {\n background: #182433;\n opacity: 0.24;\n position: absolute;\n width: 100%;\n right: 0;\n top: 0;\n height: 100%;\n border-radius: 2px 2px 0 0;\n}\n\n.card-sponsor {\n background: var(--tblr-primary-lt) no-repeat center/100% 100%;\n border-color: var(--tblr-primary);\n min-height: 316px;\n}\n\n.dropdown-menu-demo {\n display: inline-block;\n width: 100%;\n position: relative;\n top: 0;\n margin-bottom: 1rem !important;\n}\n\n.demo-icon-preview {\n position: -webkit-sticky;\n position: sticky;\n top: 0;\n}\n.demo-icon-preview svg,\n.demo-icon-preview i {\n width: 15rem;\n height: 15rem;\n font-size: 15rem;\n stroke-width: 1.5;\n margin: 0 auto;\n display: block;\n}\n@media (max-width: 575.98px) {\n .demo-icon-preview svg,\n .demo-icon-preview i {\n width: 10rem;\n height: 10rem;\n font-size: 10rem;\n }\n}\n\n.demo-icon-preview-icon pre {\n margin: 0;\n -webkit-user-select: all;\n -moz-user-select: all;\n user-select: all;\n}\n\n.demo-dividers > p {\n opacity: 0.2;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n}\n\n.demo-icons-list {\n display: flex;\n flex-wrap: wrap;\n padding: 0;\n margin: 0 0 -1px -2px;\n list-style: none;\n}\n.demo-icons-list > * {\n flex: 1 0 4rem;\n}\n\n.demo-icons-list-wrap {\n overflow: hidden;\n}\n\n.demo-icons-list-item {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n aspect-ratio: 1;\n text-align: center;\n padding: 0.5rem;\n border-left: var(--tblr-border-width) var(--tblr-border-style) var(--tblr-border-color);\n border-bottom: var(--tblr-border-width) var(--tblr-border-style) var(--tblr-border-color);\n color: inherit;\n cursor: pointer;\n}\n.demo-icons-list-item .icon {\n width: 1.5rem;\n height: 1.5rem;\n font-size: 1.5rem;\n}\n.demo-icons-list-item:hover {\n text-decoration: none;\n}\n\n.settings-btn {\n position: fixed;\n left: -1px;\n top: 10rem;\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n box-shadow: rgba(var(--tblr-body-color-rgb), 0.04) 0 2px 4px 0;\n}\n\n.settings-scheme {\n display: inline-block;\n border-radius: 50%;\n height: 3rem;\n width: 3rem;\n position: relative;\n border: var(--tblr-border-width) var(--tblr-border-style) var(--tblr-border-color);\n box-shadow: rgba(var(--tblr-body-color-rgb), 0.04) 0 2px 4px 0;\n}\n.settings-scheme-light {\n background: linear-gradient(-135deg, #ffffff 50%, #f6f8fb 50%);\n}\n.settings-scheme-mixed {\n background-image: linear-gradient(-135deg, #182433 50%, #fff 50%);\n}\n.settings-scheme-transparent {\n background: #f6f8fb;\n}\n.settings-scheme-dark {\n background: #182433;\n}\n.settings-scheme-colored {\n background-image: linear-gradient(-135deg, var(--tblr-primary) 50%, #f6f8fb 50%);\n}\n\n/*# sourceMappingURL=demo.rtl.css.map */","$color-highlight-green: #b5f4a5;\n$color-highlight-yellow: #ffe484;\n$color-highlight-purple: #d9a9ff;\n$color-highlight-red: #ff8383;\n$color-highlight-blue: #93ddfd;\n$color-highlight-gray: #a0aec0;\n\npre.highlight,\n.highlight pre {\n max-height: 30rem;\n margin: 1.5rem 0;\n overflow: auto;\n border-radius: var(--#{$prefix}border-radius);\n @include scrollbar(var(--#{$prefix}light-rgb));\n}\n\n.highlight {\n margin: 0;\n\n code > * {\n margin: 0 !important;\n padding: 0 !important;\n }\n\n .c, .c1 { color: $color-highlight-gray; }\n .nt, .nc, .nx { color: $color-highlight-red; }\n .na, .p { color: $color-highlight-yellow; }\n .s, .dl, .s2 { color: $color-highlight-green; }\n .k { color: $color-highlight-blue; }\n .s1, .mi { color: $color-highlight-purple; }\n}\n","@mixin subheader($include-color: true, $include-line-height: true) {\n font-size: $h6-font-size;\n font-weight: var(--#{$prefix}font-weight-bold);\n text-transform: uppercase;\n letter-spacing: .04em;\n\n @if $include-line-height {\n line-height: $h6-line-height;\n }\n\n @if ($include-color) {\n color: var(--#{$prefix}secondary);\n }\n}\n\n@mixin scrollbar($color: var(--#{$prefix}body-color-rgb)) {\n #{if(&, \"&\", \"*\")} {\n scrollbar-color: rgba(var(--#{$prefix}scrollbar-color, var(--#{$prefix}body-color-rgb)), .16) transparent;\n }\n\n #{if(&, \"&\", \"*\")}::-webkit-scrollbar {\n width: 1rem;\n height: 1rem;\n @include transition(background $transition-time);\n }\n\n #{if(&, \"&\", \"*\")}::-webkit-scrollbar-thumb {\n border-radius: 1rem;\n border: 5px solid transparent;\n box-shadow: inset 0 0 0 1rem rgba(var(--#{$prefix}scrollbar-color, var(--#{$prefix}body-color-rgb)), .16);\n }\n\n #{if(&, \"&\", \"*\")}::-webkit-scrollbar-track {\n background: transparent;\n }\n\n #{if(&, \"&\", \"*\")}:hover::-webkit-scrollbar-thumb {\n box-shadow: inset 0 0 0 1rem rgba(var(--#{$prefix}scrollbar-color, var(--#{$prefix}body-color-rgb)), .32);\n }\n\n #{if(&, \"&\", \"*\")}::-webkit-scrollbar-corner {\n background: transparent;\n }\n}\n\n\n@mixin autodark-image {\n filter: brightness(0) invert(1);\n}\n\n//\n// Elements list\n//\n@mixin elements-list($gap: .5rem) {\n --#{$prefix}list-gap: #{$gap};\n display: flex;\n flex-wrap: wrap;\n gap: var(--#{$prefix}list-gap);\n}\n\n@mixin focus-ring($show-border: false) {\n outline: 0;\n box-shadow: 0 0 $focus-ring-blur $focus-ring-width rgba(var(--#{$prefix}primary-rgb), 0.25);\n\n @if($show-border) {\n border-color: rgba(var(--#{$prefix}primary-rgb), 0.25);\n }\n}\n","// stylelint-disable property-disallowed-list\n@mixin transition($transition...) {\n @if length($transition) == 0 {\n $transition: $transition-base;\n }\n\n @if length($transition) > 1 {\n @each $value in $transition {\n @if $value == null or $value == none {\n @warn \"The keyword 'none' or 'null' must be used as a single argument.\";\n }\n }\n }\n\n @if $enable-transitions {\n @if nth($transition, 1) != null {\n transition: $transition;\n }\n\n @if $enable-reduced-motion and nth($transition, 1) != null and nth($transition, 1) != none {\n @media (prefers-reduced-motion: reduce) {\n transition: none;\n }\n }\n }\n}\n",".example {\n padding: 2rem;\n margin: 1rem 0 2rem;\n border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color);\n border-radius: 3px 3px 0 0;\n position: relative;\n\n min-height: 12rem;\n display: flex;\n align-items: center;\n overflow-x: auto;\n}\n\n.example-centered {\n justify-content: center;\n\n .example-content {\n flex: 0 auto;\n }\n}\n\n.example-content {\n font-size: $font-size-base;\n line-height: $line-height-base;\n color: var(--#{$prefix}body-color);\n flex: 1;\n max-width: 100%;\n\n .page-header {\n margin-bottom: 0;\n }\n}\n\n.example-bg {\n background: $body-bg;\n}\n\n.example-code {\n margin: 2rem 0;\n border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color);\n border-top: none;\n\n pre {\n margin: 0;\n border: 0;\n border-radius: 0 0 3px 3px;\n }\n\n .example + & {\n margin-top: -2rem;\n }\n}\n\n.example-column {\n margin: 0 auto;\n\n > .card:last-of-type {\n margin-bottom: 0;\n }\n}\n\n.example-column-1 {\n max-width: 26rem;\n}\n\n.example-column-2 {\n max-width: 52rem;\n}\n\n.example-modal-backdrop {\n background: $modal-backdrop-bg;\n opacity: $modal-backdrop-opacity;\n position: absolute;\n width: 100%;\n left: 0;\n top: 0;\n height: 100%;\n border-radius: 2px 2px 0 0;\n}","@import \"banner\";\n@include banner(\"Demo\");\n\n@import \"config\";\n@import \"demo/highlight\";\n@import \"demo/examples\";\n\n.card-sponsor {\n background: var(--#{$prefix}primary-lt) no-repeat center/100% 100%;\n border-color: var(--#{$prefix}primary);\n min-height: 316px;\n}\n\n.dropdown-menu-demo {\n display: inline-block;\n width: 100%;\n position: relative;\n top: 0;\n margin-bottom: 1rem !important;\n}\n\n.demo-icon-preview {\n position: sticky;\n top: 0;\n\n svg,\n i {\n width: 15rem;\n height: 15rem;\n font-size: 15rem;\n stroke-width: 1.5;\n margin: 0 auto;\n display: block;\n\n @include media-breakpoint-down(sm) {\n width: 10rem;\n height: 10rem;\n font-size: 10rem;\n }\n }\n}\n\n.demo-icon-preview-icon {\n pre {\n margin: 0;\n user-select: all;\n }\n}\n\n.demo-dividers {\n > p {\n opacity: 0.2;\n user-select: none;\n }\n}\n\n$demo-icon-size: 4rem;\n.demo-icons-list {\n display: flex;\n flex-wrap: wrap;\n padding: 0;\n margin: 0 -2px -1px 0;\n list-style: none;\n\n > * {\n flex: 1 0 $demo-icon-size;\n }\n}\n\n.demo-icons-list-wrap {\n overflow: hidden;\n}\n\n.demo-icons-list-item {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n aspect-ratio: 1;\n text-align: center;\n padding: 0.5rem;\n border-right: var(--#{$prefix}border-width) var(--#{$prefix}border-style)\n var(--#{$prefix}border-color);\n border-bottom: var(--#{$prefix}border-width) var(--#{$prefix}border-style)\n var(--#{$prefix}border-color);\n color: inherit;\n cursor: pointer;\n\n .icon {\n width: 1.5rem;\n height: 1.5rem;\n font-size: 1.5rem;\n }\n\n &:hover {\n text-decoration: none;\n }\n}\n\n//\n// Settings\n//\n.settings-btn {\n position: fixed;\n right: -1px;\n top: 10rem;\n\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n box-shadow: $box-shadow;\n}\n\n.settings-scheme {\n display: inline-block;\n border-radius: 50%;\n height: 3rem;\n width: 3rem;\n position: relative;\n border: var(--#{$prefix}border-width) var(--#{$prefix}border-style)\n var(--#{$prefix}border-color);\n box-shadow: $box-shadow;\n\n &-light {\n background: linear-gradient(135deg, $white 50%, $light 50%);\n }\n\n &-mixed {\n background-image: linear-gradient(135deg, $dark 50%, #fff 50%);\n }\n\n &-transparent {\n background: $light;\n }\n\n &-dark {\n background: $dark;\n }\n \n &-colored {\n background-image: linear-gradient(\n 135deg,\n var(--#{$prefix}primary) 50%,\n $light 50%\n );\n }\n}\n","// 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// 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"]} |