@qrsln/lootstrap 22.2.2-beta.0 → 22.2.7-beta.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (23) hide show
  1. package/Readme.md +11 -0
  2. package/dist/css/lootstrap.css +449 -183
  3. package/dist/css/lootstrap.css.map +1 -1
  4. package/dist/css/lootstrap.min.css +3 -3
  5. package/dist/css/test.css.map +1 -1
  6. package/package.json +1 -1
  7. package/scss/Abstracts/_variables.scss +1 -1
  8. package/scss/Architecture/Components/_alert.scss +86 -10
  9. package/scss/Architecture/Components/_badge.scss +40 -0
  10. package/scss/Architecture/Components/_caret.scss +17 -17
  11. package/scss/Architecture/Components/_pagination.scss +7 -2
  12. package/scss/Architecture/Components/_themed.scss +36 -24
  13. package/scss/Architecture/Components/_toasts.scss +63 -4
  14. package/scss/Architecture/Components/_tooltip.scss +135 -0
  15. package/scss/Architecture/Utils/_filters.scss +3 -1
  16. package/scss/Architecture/Utils/_position.scss +43 -0
  17. package/scss/Architecture/Utils/_utilities.scss +1 -7
  18. package/scss/Architecture/__dir-components.scss +2 -2
  19. package/scss/Architecture/__dir-utils.scss +2 -1
  20. package/scss/Architecture/_anim.scss +17 -7
  21. package/scss/_header.scss +2 -2
  22. package/scss/Architecture/Components/TODO/_badge.scss +0 -7
  23. package/scss/Architecture/Components/TODO/_tooltip.scss +0 -7
package/dist/css/test.css.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../scss/test.scss","../../scss/Abstracts/Functions/_shadow.scss","../../scss/Abstracts/Mixins/_utilities.scss","../../scss/Abstracts/_variables.scss","test.css"],"names":[],"mappings":"AAAA;;CAAA;ACIA;;;;CAAA;ACJA;;;;CAAA;AAgEA;;;EAAA;AC7DA,iBAAA;AAiCA,gBAAA;AAmDA;;CAAA;AAgBA;;;;CAAA;AAcA;;CAAA;AASA;;CAAA;AAOA;;CAAA;AAsBA;;;CAAA;AAeA;;;;;CAAA;AAuBA;;;CAAA;AHtKE;EACE,kFAAA;AIwBJ;;AJzBE;EACE,mFAAA;AI4BJ;;AJ7BE;EACE,kFAAA;AIgCJ;;AJjCE;EACE,kFAAA;AIoCJ;;AJrCE;EACE,mFAAA;AIwCJ;;AJzCE;EACE,mFAAA;AI4CJ;;AJ7CE;EACE,kFAAA;AIgDJ;;AJjDE;EACE,kFAAA;AIoDJ;;AJrDE;EACE,kFAAA;AIwDJ;;AJzDE;EACE,mFAAA;AI4DJ;;AJ7DE;EACE,kFAAA;AIgEJ;;AJjEE;EACE,kFAAA;AIoEJ;;AJrEE;EACE,iFAAA;AIwEJ;;AJzEE;EACE,kFAAA;AI4EJ;;AJ7EE;EACE,gFAAA;AIgFJ;;AJjFE;EACE,mFAAA;AIoFJ;;AJrFE;EACE,gFAAA;AIwFJ;;AJzFE;EACE,+EAAA;AI4FJ;;AJ7FE;EACE,iFAAA;AIgGJ;;AJjGE;EACE,kFAAA;AIoGJ;;AJrGE;EACE,iFAAA;AIwGJ;;AJzGE;EACE,kFAAA;AI4GJ;;AJ7GE;EACE,kFAAA;AIgHJ;;AJjHE;EACE,kFAAA;AIoHJ;;AJrHE;EACE,kFAAA;AIwHJ;;AJzHE;EACE,kFAAA;AI4HJ;;AJ7HE;EACE,kFAAA;AIgIJ;;AJjIE;EACE,8EAAA;AIoIJ;;AJ/HE;EACE,0DAAA;AIkIJ;;AJnIE;EACE,2DAAA;AIsIJ;;AJvIE;EACE,0DAAA;AI0IJ;;AJ3IE;EACE,0DAAA;AI8IJ;;AJ/IE;EACE,2DAAA;AIkJJ;;AJnJE;EACE,2DAAA;AIsJJ;;AJvJE;EACE,0DAAA;AI0JJ;;AJ3JE;EACE,0DAAA;AI8JJ;;AJ/JE;EACE,0DAAA;AIkKJ;;AJnKE;EACE,2DAAA;AIsKJ;;AJvKE;EACE,0DAAA;AI0KJ;;AJ3KE;EACE,0DAAA;AI8KJ;;AJ/KE;EACE,yDAAA;AIkLJ;;AJnLE;EACE,0DAAA;AIsLJ;;AJvLE;EACE,wDAAA;AI0LJ;;AJ3LE;EACE,2DAAA;AI8LJ;;AJ/LE;EACE,uDAAA;AIkMJ;;AJnME;EACE,uDAAA;AIsMJ;;AJvME;EACE,yDAAA;AI0MJ;;AJ3ME;EACE,0DAAA;AI8MJ;;AJ/ME;EACE,yDAAA;AIkNJ;;AJnNE;EACE,0DAAA;AIsNJ;;AJvNE;EACE,0DAAA;AI0NJ;;AJ3NE;EACE,0DAAA;AI8NJ;;AJ/NE;EACE,0DAAA;AIkOJ;;AJnOE;EACE,0DAAA;AIsOJ;;AJvOE;EACE,0DAAA;AI0OJ;;AJ3OE;EACE,uDAAA;AI8OJ","file":"test.css","sourcesContent":["/*\r\n// Configuration\r\n*/\r\n\r\n@import \"Abstracts/_dir-functions\";\r\n@import \"Abstracts/_dir-mixins\";\r\n@import \"Abstracts/variables\";\r\n\r\n//.strip-unit {\r\n// $length: 42px;\r\n// width: #{$length};\r\n// --length: #{strip-unit($length)};\r\n//}\r\n\r\n//@each $breakpointKey, $breakpointValue in $responsive-Breakpoints {\r\n// .Col-#{$breakpointKey} {\r\n// --value: #{$breakpointValue};\r\n// }\r\n//}\r\n\r\n//@each $colorKey, $colorValue in $colors-Background-hsla {\r\n// .Bg-#{$colorKey} {\r\n// --value: #{$colorValue};\r\n// }\r\n//}\r\n\r\n@each $colorKey, $colorValue in $colors-Text-hsla {\r\n .Text-#{$colorKey} {\r\n --value: #{$colorValue};\r\n }\r\n}\r\n\r\n@each $colorKey, $colorValue in $colors-Border-hsla {\r\n .Border-#{$colorKey} {\r\n --value: #{$colorValue};\r\n }\r\n}\r\n","// ===========================================================================\r\n// Functions - Shadow\r\n// ===========================================================================\r\n\r\n/*\r\n https://brumm.af/shadows\r\n https://tobiasahlin.com/blog/layered-smooth-box-shadows/\r\n https://css-tricks.com/getting-deep-into-shadows/\r\n*/\r\n\r\n@function Shadow-Builder($suffix, $layers, $horizontal-map, $vertical-map, $blur-map, $spread-map, $color-map) {\r\n $result: (); // left + right + main bottom\r\n $result-inner: (); // inset\r\n $result-both: (); // inner + outer\r\n $result-br: (); // bottom + right\r\n\r\n $result-t: (); // top\r\n $result-r: (); // right\r\n $result-l: (); // left\r\n $result-b: (); // bottom\r\n\r\n $result-x: (); // left + right\r\n $result-y: (); // top + bottom\r\n\r\n @for $index from 1 through $layers {\r\n $left: if(length($horizontal-map)==0, 0, nth($horizontal-map, $index));\r\n $spread: if(length($spread-map)==0, 0, nth($spread-map, $index));\r\n\r\n $top: nth($vertical-map, $index);\r\n $blur: nth($blur-map, $index);\r\n $color: nth($color-map, $index);\r\n\r\n $result: append($result, #{$left} #{$top} #{$blur} #{$spread} #{$color}, \"comma\");\r\n $result-both: append($result-both, #{$left} #{$top} #{$blur} #{$spread} #{$color}, \"comma\");\r\n\r\n $result-inner: append($result-inner, #{0} #{0} #{$blur} #{0} #{$color} inset, \"comma\");\r\n $result-both: append($result-both, #{0} #{0} #{$blur} #{0} #{$color} inset, \"comma\");\r\n $result-br: append($result-br, #{$top} #{$top} #{$blur} #{$spread} #{$color}, \"comma\");\r\n\r\n $result-t: append($result-t, #{0} #{-$top} #{$blur} #{-$top} #{$color}, \"comma\");\r\n $result-r: append($result-r, #{$top} #{0} #{$blur} #{-$top} #{$color}, \"comma\");\r\n $result-l: append($result-l, #{-$top} #{0} #{$blur} #{-$top} #{$color}, \"comma\");\r\n $result-b: append($result-b, #{0} #{$top} #{$blur} #{-$top} #{$color}, \"comma\");\r\n\r\n $result-x: append($result-x, #{$top} #{0} #{$blur} #{-$top} #{$color}, \"comma\");\r\n $result-x: append($result-x, #{-$top} #{0} #{$blur} #{-$top} #{$color}, \"comma\");\r\n\r\n $result-y: append($result-y, #{0} #{-$top} #{$blur} #{-$top} #{$color}, \"comma\");\r\n $result-y: append($result-y, #{0} #{$top} #{$blur} #{-$top} #{$color}, \"comma\");\r\n }\r\n $suffix: if($suffix==null, \"\", \"-#{$suffix}\");\r\n\r\n $return-map: ();\r\n @if (length($result) > 0) {\r\n $return-map: (\r\n inset#{$suffix} : $result-inner,\r\n both#{$suffix} : $result-both,\r\n br#{$suffix} : $result-br,\r\n t#{$suffix} : $result-t,\r\n r#{$suffix} : $result-r,\r\n l#{$suffix} : $result-l,\r\n b#{$suffix} : $result-b,\r\n x#{$suffix} : $result-x,\r\n y#{$suffix} : $result-y,\r\n );\r\n }\r\n @return $return-map;\r\n}\r\n\r\n// box-shadow: [horizontal offset] [vertical offset] [blur radius] [optional spread radius] [color];\r\n// $Shadow: 0px 1px 1px -1px rgba(0, 0, 0, 0.18),\r\n// 0px 2px 2px 0px rgba(0, 0, 0, 0.12),\r\n// 0px 4px 6px 0px rgba(0, 0, 0, 0.06);\r\n@function Shadow-Separator($suffix, $Shadow) {\r\n // lists\r\n $horizontal-map: ();\r\n $vertical-map: ();\r\n $blur-map: ();\r\n $spread-map: ();\r\n $color-map: ();\r\n\r\n @each $value in $Shadow {\r\n @for $index from 1 through length($value) {\r\n $layer: nth($value, $index);\r\n @if ($index==1) {\r\n $horizontal-map: append($horizontal-map, $layer, \"comma\");\r\n } @else if ($index==2) {\r\n $vertical-map: append($vertical-map, $layer, \"comma\");\r\n } @else if ($index==3) {\r\n $blur-map: append($blur-map, $layer, \"comma\");\r\n } @else if ($index==4) {\r\n $spread-map: append($spread-map, $layer, \"comma\");\r\n } @else if ($index==5) {\r\n $color-map: append($color-map, $layer, \"comma\");\r\n }\r\n }\r\n }\r\n\r\n @return Shadow-Builder($suffix, length($Shadow), $horizontal-map, $vertical-map, $blur-map, $spread-map, $color-map);\r\n}\r\n\r\n/// Based on $Shadow: 0px 1px 1px -1px rgba($Black, 0.18), 0px 2px 2px 0px rgba($Black, 0.12), 0px 4px 6px 0px rgba($Black, 0.06);\r\n@function Colored-shadow($color: black) {\r\n // using best result of shadow set\r\n @return 0 1px 1px -1px rgba($color, 0.18), 0px 2px 2px 0px rgba($color, 0.12), 0px 4px 6px 0px rgba($color, 0.06);\r\n}\r\n\r\n@function Colored-shadow-inner($color: black) {\r\n // using best result of shadow set\r\n @return 0 0 1px 0 rgba($color, 0.18) inset, 0 0 2px 0 rgba($color, 0.12) inset, 0 0 6px 0 rgba($color, 0.06) inset;\r\n}\r\n\r\n// box-shadow: Shadow-mixer($Shadow, $Shadow-inner);\r\n@function Shadow-mixer($shadow...) {\r\n $result: ();\r\n\r\n @each $value in $shadow {\r\n @if $value != null {\r\n $result: append($result, $value, \"comma\");\r\n }\r\n @if $value == none and length($shadow) > 1 {\r\n @warn \"The keyword 'none' must be used as a single argument.\";\r\n }\r\n }\r\n\r\n @if (length($result) > 0) {\r\n @return $result;\r\n }\r\n\r\n @return none;\r\n}","/*\r\n// ===========================================================================\r\n// Mixins - Utilities\r\n// ===========================================================================\r\n*/\r\n@mixin Utility-applier($important, $class-prefix, $properties, $values, $pseudo:null ) {\r\n @each $key, $value in $values {\r\n // Don't prefix if value key is null (eg. with shadow class)\r\n $class-suffix: if($key, if($class-prefix == \"\" , \"\", \"-\") + $key, \"\");\r\n\r\n @if $value != null {\r\n .#{$class-prefix + $class-suffix} {\r\n\r\n @if $pseudo != null {\r\n &:#{$pseudo} {\r\n @each $property in $properties {\r\n #{$property}: $value if($important, !important, null);\r\n }\r\n }\r\n } @else {\r\n @each $property in $properties {\r\n #{$property}: $value if($important, !important, null);\r\n }\r\n }\r\n }\r\n }\r\n }\r\n}\r\n\r\n@mixin Utility-value-separator($utility, $breakpoints: $responsive-Breakpoints) {\r\n $values: map-get($utility, Values);\r\n\r\n // If the values are a list or string, convert it into a map\r\n @if type-of($values) == \"string\" or type-of(nth($values, 1)) != \"list\" {\r\n $values: zip($values, $values);\r\n }\r\n\r\n $properties: map-get($utility, Properties);\r\n // Multiple properties are possible, for example with vertical or horizontal margins or paddings\r\n @if type-of($properties) == \"string\" {\r\n $properties: append((), $properties);\r\n }\r\n\r\n $important: map-get($utility, Important);\r\n $responsive: map-get($utility, Responsive);\r\n $pseudo: map-get($utility, Pseudo); // null before after\r\n $print: map-get($utility, Print); // TODO: media print..\r\n\r\n // Use custom class if present\r\n $class-prefix: if(map-has-key($utility, Prefix), map-get($utility, Prefix), nth($properties, 1));\r\n $class-prefix: if($class-prefix == null, \"\", $class-prefix);\r\n\r\n @if $responsive {\r\n @each $breakpointKey, $breakpointValue in $breakpoints {\r\n $responsive-Infix: if($breakpointValue == 0, \"\", \"-#{$breakpointKey}\");\r\n @include media-min-W($breakpointValue) {\r\n @include Utility-applier($important, $class-prefix + $responsive-Infix, $properties, $values, $pseudo);\r\n }\r\n }\r\n } @else {\r\n @include Utility-applier($important, $class-prefix, $properties, $values, $pseudo);\r\n }\r\n}\r\n\r\n/*\r\n * KEY : VALUES\r\n * \"Opacity\": (Prefix: Opacity, Properties: opacity, Important: true, Responsive: false, Values: $opacity-map,),\r\n */\r\n@mixin Utilities($utilities) {\r\n @each $keyUtil, $valueUtil in $utilities {\r\n @include Utility-value-separator($valueUtil);\r\n }\r\n}","// ===========================================================================\r\n// Color System\r\n// ===========================================================================\r\n/*@formatter:off*/\r\n$White : hsl(0, 0%, 100%) !default;\r\n$Black : hsl(0,0%,0%) !default;\r\n$Silver : hsl(0, 0%, 75%) !default;\r\n$Gray\t :\thsl(213,8%,45%) !default;\r\n\r\n$Red : hsl(354,66%,54%) !default;\r\n$Lime : hsl(120, 100%, 50%) !default;\r\n$Blue : hsl(212,97%,43%) !default;\r\n$Yellow : hsl(45,100%,51%) !default;\r\n$Cyan : hsl(180,100%,50%) !default;\r\n$Magenta : hsl(300,100%, 50%) !default;\r\n\r\n$Purple : hsl(261,51%,51%) !default;\r\n$Green : hsl(134,61%,41%) !default;\r\n$Maroon : hsl(331, 74%, 30%) !default;\r\n$Navy : hsl(210, 100%, 12%) !default;\r\n$Teal : hsl(162,73%,46%) !default;\r\n$Olive : hsl(60,100%, 25%) !default;\r\n$Orange : hsl(24,93%,50%) !default;\r\n$Pink : hsl(324,79%,60%) !default;\r\n$Brown : hsl(0, 33%, 38%) !default;\r\n$Indigo : hsl(270, 100%, 25%) !default;\r\n\r\n$Success : $Green !default;\r\n$Info : $Blue !default;\r\n$Warning : $Yellow !default;\r\n$Danger : $Red !default;\r\n\r\n$Primary : hsl(260,81%,38%) !default;\r\n$Secondary : hsl(208,7%,46%) !default;\r\n$Light : hsl(210,20%,98%) !default;\r\n$Dark : hsl(210,10%,23%) !default;\r\n/*@formatter:on*/\r\n\r\n// 'red', 'lime', 'blue', 'yellow', 'cyan', 'magenta', 'purple', 'green', 'maroon', 'navy', 'teal', 'olive', 'orange', 'pink', 'brown', 'indigo', 'white', 'silver', 'gray'\r\n$colors: (\r\n \"red\" : $Red,\r\n \"lime\" : $Lime,\r\n \"blue\" : $Blue,\r\n \"yellow\" : $Yellow,\r\n \"cyan\" : $Cyan,\r\n \"magenta\" : $Magenta,\r\n \"purple\" : $Purple,\r\n \"green\" : $Green,\r\n \"maroon\" : $Maroon,\r\n \"navy\" : $Navy,\r\n \"teal\" : $Teal,\r\n \"olive\" : $Olive,\r\n \"orange\" : $Orange,\r\n \"pink\" : $Pink,\r\n \"brown\" : $Brown,\r\n \"indigo\" : $Indigo,\r\n \"white\" : $White,\r\n \"silver\" : $Silver,\r\n \"gray\" : $Gray,\r\n) !default;\r\n\r\n$colors-Theme: (\r\n \"primary\" : $Primary,\r\n \"secondary\" : $Secondary,\r\n \"success\" : $Success,\r\n \"info\" : $Info,\r\n \"warning\" : $Warning,\r\n \"danger\" : $Danger,\r\n \"light\" : $Light,\r\n \"dark\" : $Dark,\r\n \"night\" : $Black\r\n) !default;\r\n\r\n$theme-Components: (\r\n 'Theme': null,\r\n 'Alert':'alert',\r\n 'Calendar':'calendar',\r\n 'Card':'card',\r\n 'Caret':'caret',\r\n 'Toast':'toast',\r\n 'Btn':'btn',\r\n 'Btn-outline':'btn',\r\n 'List-item':'lst',\r\n) !default;\r\n\r\n$var-Prefix: ls-;\r\n\r\n/*\r\n// Colors\r\n*/\r\n\r\n$colors-all: map-merge($colors, $colors-Theme);\r\n\r\n$colors-Background-hsla: ();\r\n$colors-Background-hsla: Color-hsla($colors-all, --ls-bg-alpha, --ls-bg-lightness);\r\n\r\n$colors-Text-hsla: ();\r\n$colors-Text-hsla: Color-hsla($colors-all, --ls-text-alpha, --ls-text-lightness);\r\n\r\n$colors-Border-hsla: ();\r\n$colors-Border-hsla: Color-hsla($colors-all, --ls-border-alpha, --ls-border-lightness);\r\n\r\n\r\n/*\r\n// ===========================================================================\r\n// Utils\r\n// ===========================================================================\r\n*/\r\n\r\n$color-Alpha-map: (0: 0, 5: .05, 10: .1, 20: .2, 30: .3, 40: .4, 50: .5, 60: .6, 70: .7, 80: .8, 90: .9, 100: 1) !default;\r\n$color-Lightness-map: (0:0%, 5: 5%, 10:10%, 20:20%, 30:30%, 40:40%, 50:50%, 60:60%, 70:70%, 80:80%, 90:90%, 100:100%) !default;\r\n$opacity-map: (0: 0, 10: .1, 20: .2, 30: .3, 40: .4, 50: .5, 60: .6, 70: .7, 80: .8, 90: .9, 100: 1) !default;\r\n$sizes-percents: (\r\n 10:10%, 20:20%, 30:30%, 40:40%, 50:50%, 60:60%, 70:70%, 80:80%, 90:90%, 100:100%,\r\n 25:25%, 75:75%, 33:33.333%, 66:66.666%, auto:auto\r\n) !default;\r\n\r\n/*\r\n// Border radius\r\n*/\r\n\r\n$Rounded: .25rem !default;\r\n$Rounded-2x: .5rem !default;\r\n$Rounded-3x: .75rem !default;\r\n$Rounded-pill: 50rem !default;\r\n\r\n/*\r\n// Border\r\n*/\r\n\r\n$Border-width: 1px !default;\r\n$Border-widths: (0: 0, 1: 1px, 2: 2px, 3: 3px, 4: 4px, 5: 5px) !default;\r\n\r\n/*\r\n// Spacing\r\n*/\r\n\r\n$spacer: 1rem !default; // 16px\r\n$spacers-map: (\r\n 0: 0,\r\n 1: ($spacer * 0.25),\r\n 2: ($spacer * 0.5),\r\n 3: ($spacer * 1.00),\r\n 4: ($spacer * 1.50),\r\n 5: ($spacer * 3.00),\r\n);\r\n$negative-spacers: (\r\n N1: ($spacer * -0.25),\r\n N2: ($spacer * -0.5),\r\n N3: ($spacer * -1.00),\r\n N4: ($spacer * -1.50),\r\n N5: ($spacer * -3.00),\r\n);\r\n\r\n\r\n/*\r\n// Grid System\r\n// Set the number of columns and specify the width of the gutters.\r\n*/\r\n\r\n$breakpoints-Grid: (none: 0, sm : 480px, md : 768px, lg : 1024px, xl : 1280px, xxl : 1440px);\r\n$breakpoints-Container: (sm : 480px, md : 768px, lg : 976px, xl : 1232px, xxl : 1376px);\r\n$responsive-Breakpoints: $breakpoints-Grid;\r\n\r\n$grid-Columns: 12 !default;\r\n$grid-Gutter-width: 1.5rem; // 1rem\r\n$grid-Row-Columns: 6 !default;\r\n\r\n$gutters-map: $spacers-map !default;\r\n\r\n/*\r\n// Shadow\r\n// Box-shadow with rgba variable\r\n// --component-shadow-color: 0, 0, 0; // Has to be like this :p\r\n// https://stackoverflow.com/questions/59250927/box-shadow-with-rgba-variable\r\n*/\r\n$Shadow-color: var(--#{$var-Prefix}shadow-color-rgb);\r\n\r\n$Shadow: 0px 1px 1px -1px rgba($Shadow-color, 0.18), 0px 2px 2px 0px rgba($Shadow-color, 0.12), 0px 4px 6px 0px rgba($Shadow-color, 0.06);\r\n$Shadow-2x: 0px 1px 1px 0px rgba($Shadow-color, 0.18), 0px 2px 3px 0px rgba($Shadow-color, 0.12), 0px 6px 9px 0px rgba($Shadow-color, 0.06);\r\n$Shadow-3x: 0px 2px 2px 0px rgba($Shadow-color, 0.18), 0px 3px 4px 0px rgba($Shadow-color, 0.12), 0px 9px 12px 0px rgba($Shadow-color, 0.06);\r\n\r\n$Shadow-map: (null: $Shadow, 2x: $Shadow-2x, 3x: $Shadow-3x,);\r\n$Shadow-map: map-merge($Shadow-map, Shadow-Separator(null, $Shadow));\r\n$Shadow-map: map-merge($Shadow-map, Shadow-Separator(2x, $Shadow-2x));\r\n$Shadow-map: map-merge($Shadow-map, Shadow-Separator(3x, $Shadow-3x));\r\n\r\n$Drop-shadow: drop-shadow(0px 1px 1px rgba($Shadow-color, 0.72)) drop-shadow(0px 2px 2px rgba($Shadow-color, 0.48)) drop-shadow(0px 4px 6px rgba($Shadow-color, 0.24));\r\n$Drop-shadow-2x: drop-shadow(0px 1px 1px rgba($Shadow-color, 0.72)) drop-shadow(0px 2px 3px rgba($Shadow-color, 0.48)) drop-shadow(0px 6px 9px rgba($Shadow-color, 0.24));\r\n$Drop-shadow-3x: drop-shadow(0px 2px 2px rgba($Shadow-color, 0.72)) drop-shadow(0px 3px 4px rgba($Shadow-color, 0.48)) drop-shadow(0px 9px 12px rgba($Shadow-color, 0.24));\r\n\r\n$Drop-shadow-map: (0: drop-shadow(0 0 #0000), null: $Drop-shadow, 2x: $Drop-shadow-2x, 3x: $Drop-shadow-3x,);\r\n\r\n/*\r\n// Typography\r\n// Font, line-height, and color for body text, headings, and more.\r\n*/\r\n// TODO: font\r\n$font-size-base: 1rem !default; // Assumes the browser default, typically `16px`\r\n$font-family-sans-serif: system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, \"Noto Sans\", \"Liberation Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\" !default;\r\n$font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace !default;\r\n\r\n$font-weight-lighter: lighter !default;\r\n$font-weight-light: 300 !default;\r\n$font-weight-normal: 400 !default;\r\n$font-weight-bold: 700 !default;\r\n$font-weight-bolder: bolder !default;\r\n","/*\n// Configuration\n*/\n/*\n https://brumm.af/shadows\n https://tobiasahlin.com/blog/layered-smooth-box-shadows/\n https://css-tricks.com/getting-deep-into-shadows/\n*/\n/*\n// ===========================================================================\n// Mixins - Utilities\n// ===========================================================================\n*/\n/*\n * KEY : VALUES\n * \"Opacity\": (Prefix: Opacity, Properties: opacity, Important: true, Responsive: false, Values: $opacity-map,),\n */\n/*@formatter:off*/\n/*@formatter:on*/\n/*\n// Colors\n*/\n/*\n// ===========================================================================\n// Utils\n// ===========================================================================\n*/\n/*\n// Border radius\n*/\n/*\n// Border\n*/\n/*\n// Spacing\n*/\n/*\n// Grid System\n// Set the number of columns and specify the width of the gutters.\n*/\n/*\n// Shadow\n// Box-shadow with rgba variable\n// --component-shadow-color: 0, 0, 0; // Has to be like this :p\n// https://stackoverflow.com/questions/59250927/box-shadow-with-rgba-variable\n*/\n/*\n// Typography\n// Font, line-height, and color for body text, headings, and more.\n*/\n.Text-red {\n --value: hsla(354deg, 66%, var(--ls-text-lightness, 54%), var(--ls-text-alpha, 1));\n}\n\n.Text-lime {\n --value: hsla(120deg, 100%, var(--ls-text-lightness, 50%), var(--ls-text-alpha, 1));\n}\n\n.Text-blue {\n --value: hsla(212deg, 97%, var(--ls-text-lightness, 43%), var(--ls-text-alpha, 1));\n}\n\n.Text-yellow {\n --value: hsla(45deg, 100%, var(--ls-text-lightness, 51%), var(--ls-text-alpha, 1));\n}\n\n.Text-cyan {\n --value: hsla(180deg, 100%, var(--ls-text-lightness, 50%), var(--ls-text-alpha, 1));\n}\n\n.Text-magenta {\n --value: hsla(300deg, 100%, var(--ls-text-lightness, 50%), var(--ls-text-alpha, 1));\n}\n\n.Text-purple {\n --value: hsla(261deg, 51%, var(--ls-text-lightness, 51%), var(--ls-text-alpha, 1));\n}\n\n.Text-green {\n --value: hsla(134deg, 61%, var(--ls-text-lightness, 41%), var(--ls-text-alpha, 1));\n}\n\n.Text-maroon {\n --value: hsla(331deg, 74%, var(--ls-text-lightness, 30%), var(--ls-text-alpha, 1));\n}\n\n.Text-navy {\n --value: hsla(210deg, 100%, var(--ls-text-lightness, 12%), var(--ls-text-alpha, 1));\n}\n\n.Text-teal {\n --value: hsla(162deg, 73%, var(--ls-text-lightness, 46%), var(--ls-text-alpha, 1));\n}\n\n.Text-olive {\n --value: hsla(60deg, 100%, var(--ls-text-lightness, 25%), var(--ls-text-alpha, 1));\n}\n\n.Text-orange {\n --value: hsla(24deg, 93%, var(--ls-text-lightness, 50%), var(--ls-text-alpha, 1));\n}\n\n.Text-pink {\n --value: hsla(324deg, 79%, var(--ls-text-lightness, 60%), var(--ls-text-alpha, 1));\n}\n\n.Text-brown {\n --value: hsla(0deg, 33%, var(--ls-text-lightness, 38%), var(--ls-text-alpha, 1));\n}\n\n.Text-indigo {\n --value: hsla(270deg, 100%, var(--ls-text-lightness, 25%), var(--ls-text-alpha, 1));\n}\n\n.Text-white {\n --value: hsla(0deg, 0%, var(--ls-text-lightness, 100%), var(--ls-text-alpha, 1));\n}\n\n.Text-silver {\n --value: hsla(0deg, 0%, var(--ls-text-lightness, 75%), var(--ls-text-alpha, 1));\n}\n\n.Text-gray {\n --value: hsla(213deg, 8%, var(--ls-text-lightness, 45%), var(--ls-text-alpha, 1));\n}\n\n.Text-primary {\n --value: hsla(260deg, 81%, var(--ls-text-lightness, 38%), var(--ls-text-alpha, 1));\n}\n\n.Text-secondary {\n --value: hsla(208deg, 7%, var(--ls-text-lightness, 46%), var(--ls-text-alpha, 1));\n}\n\n.Text-success {\n --value: hsla(134deg, 61%, var(--ls-text-lightness, 41%), var(--ls-text-alpha, 1));\n}\n\n.Text-info {\n --value: hsla(212deg, 97%, var(--ls-text-lightness, 43%), var(--ls-text-alpha, 1));\n}\n\n.Text-warning {\n --value: hsla(45deg, 100%, var(--ls-text-lightness, 51%), var(--ls-text-alpha, 1));\n}\n\n.Text-danger {\n --value: hsla(354deg, 66%, var(--ls-text-lightness, 54%), var(--ls-text-alpha, 1));\n}\n\n.Text-light {\n --value: hsla(210deg, 20%, var(--ls-text-lightness, 98%), var(--ls-text-alpha, 1));\n}\n\n.Text-dark {\n --value: hsla(210deg, 10%, var(--ls-text-lightness, 23%), var(--ls-text-alpha, 1));\n}\n\n.Text-night {\n --value: hsla(0deg, 0%, var(--ls-text-lightness, 0%), var(--ls-text-alpha, 1));\n}\n\n.Border-red {\n --value: hsla(354deg, 66%, 70%, var(--ls-border-alpha, 1));\n}\n\n.Border-lime {\n --value: hsla(120deg, 100%, 70%, var(--ls-border-alpha, 1));\n}\n\n.Border-blue {\n --value: hsla(212deg, 97%, 70%, var(--ls-border-alpha, 1));\n}\n\n.Border-yellow {\n --value: hsla(45deg, 100%, 70%, var(--ls-border-alpha, 1));\n}\n\n.Border-cyan {\n --value: hsla(180deg, 100%, 70%, var(--ls-border-alpha, 1));\n}\n\n.Border-magenta {\n --value: hsla(300deg, 100%, 70%, var(--ls-border-alpha, 1));\n}\n\n.Border-purple {\n --value: hsla(261deg, 51%, 70%, var(--ls-border-alpha, 1));\n}\n\n.Border-green {\n --value: hsla(134deg, 61%, 70%, var(--ls-border-alpha, 1));\n}\n\n.Border-maroon {\n --value: hsla(331deg, 74%, 70%, var(--ls-border-alpha, 1));\n}\n\n.Border-navy {\n --value: hsla(210deg, 100%, 70%, var(--ls-border-alpha, 1));\n}\n\n.Border-teal {\n --value: hsla(162deg, 73%, 70%, var(--ls-border-alpha, 1));\n}\n\n.Border-olive {\n --value: hsla(60deg, 100%, 70%, var(--ls-border-alpha, 1));\n}\n\n.Border-orange {\n --value: hsla(24deg, 93%, 70%, var(--ls-border-alpha, 1));\n}\n\n.Border-pink {\n --value: hsla(324deg, 79%, 70%, var(--ls-border-alpha, 1));\n}\n\n.Border-brown {\n --value: hsla(0deg, 33%, 70%, var(--ls-border-alpha, 1));\n}\n\n.Border-indigo {\n --value: hsla(270deg, 100%, 70%, var(--ls-border-alpha, 1));\n}\n\n.Border-white {\n --value: hsla(0deg, 0%, 90%, var(--ls-border-alpha, 1));\n}\n\n.Border-silver {\n --value: hsla(0deg, 0%, 70%, var(--ls-border-alpha, 1));\n}\n\n.Border-gray {\n --value: hsla(213deg, 8%, 70%, var(--ls-border-alpha, 1));\n}\n\n.Border-primary {\n --value: hsla(260deg, 81%, 70%, var(--ls-border-alpha, 1));\n}\n\n.Border-secondary {\n --value: hsla(208deg, 7%, 70%, var(--ls-border-alpha, 1));\n}\n\n.Border-success {\n --value: hsla(134deg, 61%, 70%, var(--ls-border-alpha, 1));\n}\n\n.Border-info {\n --value: hsla(212deg, 97%, 70%, var(--ls-border-alpha, 1));\n}\n\n.Border-warning {\n --value: hsla(45deg, 100%, 70%, var(--ls-border-alpha, 1));\n}\n\n.Border-danger {\n --value: hsla(354deg, 66%, 70%, var(--ls-border-alpha, 1));\n}\n\n.Border-light {\n --value: hsla(210deg, 20%, 90%, var(--ls-border-alpha, 1));\n}\n\n.Border-dark {\n --value: hsla(210deg, 10%, 45%, var(--ls-border-alpha, 1));\n}\n\n.Border-night {\n --value: hsla(0deg, 0%, 35%, var(--ls-border-alpha, 1));\n}\n\n/*# sourceMappingURL=test.css.map */\n"]}
1
+ {"version":3,"sources":["../../scss/test.scss","../../scss/Abstracts/Functions/_shadow.scss","../../scss/Abstracts/Mixins/_utilities.scss","../../scss/Abstracts/_variables.scss","test.css"],"names":[],"mappings":"AAAA;;CAAA;ACIA;;;;CAAA;ACJA;;;;CAAA;AAgEA;;;EAAA;AC7DA,iBAAA;AAiCA,gBAAA;AAmDA;;CAAA;AAgBA;;;;CAAA;AAcA;;CAAA;AASA;;CAAA;AAOA;;CAAA;AAsBA;;;CAAA;AAeA;;;;;CAAA;AAuBA;;;CAAA;AHtKE;EACE,kFAAA;AIwBJ;;AJzBE;EACE,mFAAA;AI4BJ;;AJ7BE;EACE,kFAAA;AIgCJ;;AJjCE;EACE,kFAAA;AIoCJ;;AJrCE;EACE,mFAAA;AIwCJ;;AJzCE;EACE,mFAAA;AI4CJ;;AJ7CE;EACE,kFAAA;AIgDJ;;AJjDE;EACE,kFAAA;AIoDJ;;AJrDE;EACE,kFAAA;AIwDJ;;AJzDE;EACE,mFAAA;AI4DJ;;AJ7DE;EACE,kFAAA;AIgEJ;;AJjEE;EACE,kFAAA;AIoEJ;;AJrEE;EACE,iFAAA;AIwEJ;;AJzEE;EACE,kFAAA;AI4EJ;;AJ7EE;EACE,gFAAA;AIgFJ;;AJjFE;EACE,mFAAA;AIoFJ;;AJrFE;EACE,gFAAA;AIwFJ;;AJzFE;EACE,+EAAA;AI4FJ;;AJ7FE;EACE,iFAAA;AIgGJ;;AJjGE;EACE,kFAAA;AIoGJ;;AJrGE;EACE,iFAAA;AIwGJ;;AJzGE;EACE,kFAAA;AI4GJ;;AJ7GE;EACE,kFAAA;AIgHJ;;AJjHE;EACE,kFAAA;AIoHJ;;AJrHE;EACE,kFAAA;AIwHJ;;AJzHE;EACE,kFAAA;AI4HJ;;AJ7HE;EACE,kFAAA;AIgIJ;;AJjIE;EACE,8EAAA;AIoIJ;;AJ/HE;EACE,0DAAA;AIkIJ;;AJnIE;EACE,2DAAA;AIsIJ;;AJvIE;EACE,0DAAA;AI0IJ;;AJ3IE;EACE,0DAAA;AI8IJ;;AJ/IE;EACE,2DAAA;AIkJJ;;AJnJE;EACE,2DAAA;AIsJJ;;AJvJE;EACE,0DAAA;AI0JJ;;AJ3JE;EACE,0DAAA;AI8JJ;;AJ/JE;EACE,0DAAA;AIkKJ;;AJnKE;EACE,2DAAA;AIsKJ;;AJvKE;EACE,0DAAA;AI0KJ;;AJ3KE;EACE,0DAAA;AI8KJ;;AJ/KE;EACE,yDAAA;AIkLJ;;AJnLE;EACE,0DAAA;AIsLJ;;AJvLE;EACE,wDAAA;AI0LJ;;AJ3LE;EACE,2DAAA;AI8LJ;;AJ/LE;EACE,uDAAA;AIkMJ;;AJnME;EACE,uDAAA;AIsMJ;;AJvME;EACE,yDAAA;AI0MJ;;AJ3ME;EACE,0DAAA;AI8MJ;;AJ/ME;EACE,yDAAA;AIkNJ;;AJnNE;EACE,0DAAA;AIsNJ;;AJvNE;EACE,0DAAA;AI0NJ;;AJ3NE;EACE,0DAAA;AI8NJ;;AJ/NE;EACE,0DAAA;AIkOJ;;AJnOE;EACE,0DAAA;AIsOJ;;AJvOE;EACE,0DAAA;AI0OJ;;AJ3OE;EACE,uDAAA;AI8OJ","file":"test.css","sourcesContent":["/*\r\n// Configuration\r\n*/\r\n\r\n@import \"Abstracts/_dir-functions\";\r\n@import \"Abstracts/_dir-mixins\";\r\n@import \"Abstracts/variables\";\r\n\r\n//.strip-unit {\r\n// $length: 42px;\r\n// width: #{$length};\r\n// --length: #{strip-unit($length)};\r\n//}\r\n\r\n//@each $breakpointKey, $breakpointValue in $responsive-Breakpoints {\r\n// .Col-#{$breakpointKey} {\r\n// --value: #{$breakpointValue};\r\n// }\r\n//}\r\n\r\n//@each $colorKey, $colorValue in $colors-Background-hsla {\r\n// .Bg-#{$colorKey} {\r\n// --value: #{$colorValue};\r\n// }\r\n//}\r\n\r\n@each $colorKey, $colorValue in $colors-Text-hsla {\r\n .Text-#{$colorKey} {\r\n --value: #{$colorValue};\r\n }\r\n}\r\n\r\n@each $colorKey, $colorValue in $colors-Border-hsla {\r\n .Border-#{$colorKey} {\r\n --value: #{$colorValue};\r\n }\r\n}\r\n","// ===========================================================================\r\n// Functions - Shadow\r\n// ===========================================================================\r\n\r\n/*\r\n https://brumm.af/shadows\r\n https://tobiasahlin.com/blog/layered-smooth-box-shadows/\r\n https://css-tricks.com/getting-deep-into-shadows/\r\n*/\r\n\r\n@function Shadow-Builder($suffix, $layers, $horizontal-map, $vertical-map, $blur-map, $spread-map, $color-map) {\r\n $result: (); // left + right + main bottom\r\n $result-inner: (); // inset\r\n $result-both: (); // inner + outer\r\n $result-br: (); // bottom + right\r\n\r\n $result-t: (); // top\r\n $result-r: (); // right\r\n $result-l: (); // left\r\n $result-b: (); // bottom\r\n\r\n $result-x: (); // left + right\r\n $result-y: (); // top + bottom\r\n\r\n @for $index from 1 through $layers {\r\n $left: if(length($horizontal-map)==0, 0, nth($horizontal-map, $index));\r\n $spread: if(length($spread-map)==0, 0, nth($spread-map, $index));\r\n\r\n $top: nth($vertical-map, $index);\r\n $blur: nth($blur-map, $index);\r\n $color: nth($color-map, $index);\r\n\r\n $result: append($result, #{$left} #{$top} #{$blur} #{$spread} #{$color}, \"comma\");\r\n $result-both: append($result-both, #{$left} #{$top} #{$blur} #{$spread} #{$color}, \"comma\");\r\n\r\n $result-inner: append($result-inner, #{0} #{0} #{$blur} #{0} #{$color} inset, \"comma\");\r\n $result-both: append($result-both, #{0} #{0} #{$blur} #{0} #{$color} inset, \"comma\");\r\n $result-br: append($result-br, #{$top} #{$top} #{$blur} #{$spread} #{$color}, \"comma\");\r\n\r\n $result-t: append($result-t, #{0} #{-$top} #{$blur} #{-$top} #{$color}, \"comma\");\r\n $result-r: append($result-r, #{$top} #{0} #{$blur} #{-$top} #{$color}, \"comma\");\r\n $result-l: append($result-l, #{-$top} #{0} #{$blur} #{-$top} #{$color}, \"comma\");\r\n $result-b: append($result-b, #{0} #{$top} #{$blur} #{-$top} #{$color}, \"comma\");\r\n\r\n $result-x: append($result-x, #{$top} #{0} #{$blur} #{-$top} #{$color}, \"comma\");\r\n $result-x: append($result-x, #{-$top} #{0} #{$blur} #{-$top} #{$color}, \"comma\");\r\n\r\n $result-y: append($result-y, #{0} #{-$top} #{$blur} #{-$top} #{$color}, \"comma\");\r\n $result-y: append($result-y, #{0} #{$top} #{$blur} #{-$top} #{$color}, \"comma\");\r\n }\r\n $suffix: if($suffix==null, \"\", \"-#{$suffix}\");\r\n\r\n $return-map: ();\r\n @if (length($result) > 0) {\r\n $return-map: (\r\n inset#{$suffix} : $result-inner,\r\n both#{$suffix} : $result-both,\r\n br#{$suffix} : $result-br,\r\n t#{$suffix} : $result-t,\r\n r#{$suffix} : $result-r,\r\n l#{$suffix} : $result-l,\r\n b#{$suffix} : $result-b,\r\n x#{$suffix} : $result-x,\r\n y#{$suffix} : $result-y,\r\n );\r\n }\r\n @return $return-map;\r\n}\r\n\r\n// box-shadow: [horizontal offset] [vertical offset] [blur radius] [optional spread radius] [color];\r\n// $Shadow: 0px 1px 1px -1px rgba(0, 0, 0, 0.18),\r\n// 0px 2px 2px 0px rgba(0, 0, 0, 0.12),\r\n// 0px 4px 6px 0px rgba(0, 0, 0, 0.06);\r\n@function Shadow-Separator($suffix, $Shadow) {\r\n // lists\r\n $horizontal-map: ();\r\n $vertical-map: ();\r\n $blur-map: ();\r\n $spread-map: ();\r\n $color-map: ();\r\n\r\n @each $value in $Shadow {\r\n @for $index from 1 through length($value) {\r\n $layer: nth($value, $index);\r\n @if ($index==1) {\r\n $horizontal-map: append($horizontal-map, $layer, \"comma\");\r\n } @else if ($index==2) {\r\n $vertical-map: append($vertical-map, $layer, \"comma\");\r\n } @else if ($index==3) {\r\n $blur-map: append($blur-map, $layer, \"comma\");\r\n } @else if ($index==4) {\r\n $spread-map: append($spread-map, $layer, \"comma\");\r\n } @else if ($index==5) {\r\n $color-map: append($color-map, $layer, \"comma\");\r\n }\r\n }\r\n }\r\n\r\n @return Shadow-Builder($suffix, length($Shadow), $horizontal-map, $vertical-map, $blur-map, $spread-map, $color-map);\r\n}\r\n\r\n/// Based on $Shadow: 0px 1px 1px -1px rgba($Black, 0.18), 0px 2px 2px 0px rgba($Black, 0.12), 0px 4px 6px 0px rgba($Black, 0.06);\r\n@function Colored-shadow($color: black) {\r\n // using best result of shadow set\r\n @return 0 1px 1px -1px rgba($color, 0.18), 0px 2px 2px 0px rgba($color, 0.12), 0px 4px 6px 0px rgba($color, 0.06);\r\n}\r\n\r\n@function Colored-shadow-inner($color: black) {\r\n // using best result of shadow set\r\n @return 0 0 1px 0 rgba($color, 0.18) inset, 0 0 2px 0 rgba($color, 0.12) inset, 0 0 6px 0 rgba($color, 0.06) inset;\r\n}\r\n\r\n// box-shadow: Shadow-mixer($Shadow, $Shadow-inner);\r\n@function Shadow-mixer($shadow...) {\r\n $result: ();\r\n\r\n @each $value in $shadow {\r\n @if $value != null {\r\n $result: append($result, $value, \"comma\");\r\n }\r\n @if $value == none and length($shadow) > 1 {\r\n @warn \"The keyword 'none' must be used as a single argument.\";\r\n }\r\n }\r\n\r\n @if (length($result) > 0) {\r\n @return $result;\r\n }\r\n\r\n @return none;\r\n}","/*\r\n// ===========================================================================\r\n// Mixins - Utilities\r\n// ===========================================================================\r\n*/\r\n@mixin Utility-applier($important, $class-prefix, $properties, $values, $pseudo:null ) {\r\n @each $key, $value in $values {\r\n // Don't prefix if value key is null (eg. with shadow class)\r\n $class-suffix: if($key, if($class-prefix == \"\" , \"\", \"-\") + $key, \"\");\r\n\r\n @if $value != null {\r\n .#{$class-prefix + $class-suffix} {\r\n\r\n @if $pseudo != null {\r\n &:#{$pseudo} {\r\n @each $property in $properties {\r\n #{$property}: $value if($important, !important, null);\r\n }\r\n }\r\n } @else {\r\n @each $property in $properties {\r\n #{$property}: $value if($important, !important, null);\r\n }\r\n }\r\n }\r\n }\r\n }\r\n}\r\n\r\n@mixin Utility-value-separator($utility, $breakpoints: $responsive-Breakpoints) {\r\n $values: map-get($utility, Values);\r\n\r\n // If the values are a list or string, convert it into a map\r\n @if type-of($values) == \"string\" or type-of(nth($values, 1)) != \"list\" {\r\n $values: zip($values, $values);\r\n }\r\n\r\n $properties: map-get($utility, Properties);\r\n // Multiple properties are possible, for example with vertical or horizontal margins or paddings\r\n @if type-of($properties) == \"string\" {\r\n $properties: append((), $properties);\r\n }\r\n\r\n $important: map-get($utility, Important);\r\n $responsive: map-get($utility, Responsive);\r\n $pseudo: map-get($utility, Pseudo); // null before after\r\n $print: map-get($utility, Print); // TODO: media print..\r\n\r\n // Use custom class if present\r\n $class-prefix: if(map-has-key($utility, Prefix), map-get($utility, Prefix), nth($properties, 1));\r\n $class-prefix: if($class-prefix == null, \"\", $class-prefix);\r\n\r\n @if $responsive {\r\n @each $breakpointKey, $breakpointValue in $breakpoints {\r\n $responsive-Infix: if($breakpointValue == 0, \"\", \"-#{$breakpointKey}\");\r\n @include media-min-W($breakpointValue) {\r\n @include Utility-applier($important, $class-prefix + $responsive-Infix, $properties, $values, $pseudo);\r\n }\r\n }\r\n } @else {\r\n @include Utility-applier($important, $class-prefix, $properties, $values, $pseudo);\r\n }\r\n}\r\n\r\n/*\r\n * KEY : VALUES\r\n * \"Opacity\": (Prefix: Opacity, Properties: opacity, Important: true, Responsive: false, Values: $opacity-map,),\r\n */\r\n@mixin Utilities($utilities) {\r\n @each $keyUtil, $valueUtil in $utilities {\r\n @include Utility-value-separator($valueUtil);\r\n }\r\n}","// ===========================================================================\r\n// Color System\r\n// ===========================================================================\r\n/*@formatter:off*/\r\n$White : hsl(0, 0%, 100%) !default;\r\n$Black : hsl(0,0%,0%) !default;\r\n$Silver : hsl(0, 0%, 75%) !default;\r\n$Gray\t :\thsl(213,8%,45%) !default;\r\n\r\n$Red : hsl(354,66%,54%) !default;\r\n$Lime : hsl(120, 100%, 50%) !default;\r\n$Blue : hsl(212,97%,43%) !default;\r\n$Yellow : hsl(45,100%,51%) !default;\r\n$Cyan : hsl(180,100%,50%) !default;\r\n$Magenta : hsl(300,100%, 50%) !default;\r\n\r\n$Purple : hsl(261,51%,51%) !default;\r\n$Green : hsl(134,61%,41%) !default;\r\n$Maroon : hsl(331, 74%, 30%) !default;\r\n$Navy : hsl(210, 100%, 12%) !default;\r\n$Teal : hsl(162,73%,46%) !default;\r\n$Olive : hsl(60,100%, 25%) !default;\r\n$Orange : hsl(24,93%,50%) !default;\r\n$Pink : hsl(324,79%,60%) !default;\r\n$Brown : hsl(0, 33%, 38%) !default;\r\n$Indigo : hsl(270, 100%, 25%) !default;\r\n\r\n$Success : $Green !default;\r\n$Info : $Blue !default;\r\n$Warning : $Yellow !default;\r\n$Danger : $Red !default;\r\n\r\n$Primary : hsl(260,81%,38%) !default;\r\n$Secondary : hsl(208,7%,46%) !default;\r\n$Light : hsl(210,20%,98%) !default;\r\n$Dark : hsl(210,10%,23%) !default;\r\n/*@formatter:on*/\r\n\r\n// 'red', 'lime', 'blue', 'yellow', 'cyan', 'magenta', 'purple', 'green', 'maroon', 'navy', 'teal', 'olive', 'orange', 'pink', 'brown', 'indigo', 'white', 'silver', 'gray'\r\n$colors: (\r\n \"red\" : $Red,\r\n \"lime\" : $Lime,\r\n \"blue\" : $Blue,\r\n \"yellow\" : $Yellow,\r\n \"cyan\" : $Cyan,\r\n \"magenta\" : $Magenta,\r\n \"purple\" : $Purple,\r\n \"green\" : $Green,\r\n \"maroon\" : $Maroon,\r\n \"navy\" : $Navy,\r\n \"teal\" : $Teal,\r\n \"olive\" : $Olive,\r\n \"orange\" : $Orange,\r\n \"pink\" : $Pink,\r\n \"brown\" : $Brown,\r\n \"indigo\" : $Indigo,\r\n \"white\" : $White,\r\n \"silver\" : $Silver,\r\n \"gray\" : $Gray,\r\n) !default;\r\n\r\n$colors-Theme: (\r\n \"primary\" : $Primary,\r\n \"secondary\" : $Secondary,\r\n \"success\" : $Success,\r\n \"info\" : $Info,\r\n \"warning\" : $Warning,\r\n \"danger\" : $Danger, //\"error\" : $Danger,\r\n \"light\" : $Light,\r\n \"dark\" : $Dark,\r\n \"night\" : $Black\r\n) !default;\r\n\r\n$theme-Components: (\r\n 'Theme': null,\r\n 'Alert':'alert',\r\n 'Calendar':'calendar',\r\n 'Card':'card',\r\n 'Caret':'caret',\r\n 'Toast':'toast',\r\n 'Btn':'btn',\r\n 'Btn-outline':'btn',\r\n 'List-item':'lst',\r\n) !default;\r\n\r\n$var-Prefix: ls-;\r\n\r\n/*\r\n// Colors\r\n*/\r\n\r\n$colors-all: map-merge($colors, $colors-Theme);\r\n\r\n$colors-Background-hsla: ();\r\n$colors-Background-hsla: Color-hsla($colors-all, --ls-bg-alpha, --ls-bg-lightness);\r\n\r\n$colors-Text-hsla: ();\r\n$colors-Text-hsla: Color-hsla($colors-all, --ls-text-alpha, --ls-text-lightness);\r\n\r\n$colors-Border-hsla: ();\r\n$colors-Border-hsla: Color-hsla($colors-all, --ls-border-alpha, --ls-border-lightness);\r\n\r\n\r\n/*\r\n// ===========================================================================\r\n// Utils\r\n// ===========================================================================\r\n*/\r\n\r\n$color-Alpha-map: (0: 0, 5: .05, 10: .1, 20: .2, 30: .3, 40: .4, 50: .5, 60: .6, 70: .7, 80: .8, 90: .9, 100: 1) !default;\r\n$color-Lightness-map: (0:0%, 5: 5%, 10:10%, 20:20%, 30:30%, 40:40%, 50:50%, 60:60%, 70:70%, 80:80%, 90:90%, 100:100%) !default;\r\n$opacity-map: (0: 0, 10: .1, 20: .2, 30: .3, 40: .4, 50: .5, 60: .6, 70: .7, 80: .8, 90: .9, 100: 1) !default;\r\n$sizes-percents: (\r\n 10:10%, 20:20%, 30:30%, 40:40%, 50:50%, 60:60%, 70:70%, 80:80%, 90:90%, 100:100%,\r\n 25:25%, 75:75%, 33:33.333%, 66:66.666%, auto:auto\r\n) !default;\r\n\r\n/*\r\n// Border radius\r\n*/\r\n\r\n$Rounded: .25rem !default;\r\n$Rounded-2x: .5rem !default;\r\n$Rounded-3x: .75rem !default;\r\n$Rounded-pill: 50rem !default;\r\n\r\n/*\r\n// Border\r\n*/\r\n\r\n$Border-width: 1px !default;\r\n$Border-widths: (0: 0, 1: 1px, 2: 2px, 3: 3px, 4: 4px, 5: 5px) !default;\r\n\r\n/*\r\n// Spacing\r\n*/\r\n\r\n$spacer: 1rem !default; // 16px\r\n$spacers-map: (\r\n 0: 0,\r\n 1: ($spacer * 0.25),\r\n 2: ($spacer * 0.5),\r\n 3: ($spacer * 1.00),\r\n 4: ($spacer * 1.50),\r\n 5: ($spacer * 3.00),\r\n);\r\n$negative-spacers: (\r\n N1: ($spacer * -0.25),\r\n N2: ($spacer * -0.5),\r\n N3: ($spacer * -1.00),\r\n N4: ($spacer * -1.50),\r\n N5: ($spacer * -3.00),\r\n);\r\n\r\n\r\n/*\r\n// Grid System\r\n// Set the number of columns and specify the width of the gutters.\r\n*/\r\n\r\n$breakpoints-Grid: (none: 0, sm : 480px, md : 768px, lg : 1024px, xl : 1280px, xxl : 1440px);\r\n$breakpoints-Container: (sm : 480px, md : 768px, lg : 976px, xl : 1232px, xxl : 1376px);\r\n$responsive-Breakpoints: $breakpoints-Grid;\r\n\r\n$grid-Columns: 12 !default;\r\n$grid-Gutter-width: 1.5rem; // 1rem\r\n$grid-Row-Columns: 6 !default;\r\n\r\n$gutters-map: $spacers-map !default;\r\n\r\n/*\r\n// Shadow\r\n// Box-shadow with rgba variable\r\n// --component-shadow-color: 0, 0, 0; // Has to be like this :p\r\n// https://stackoverflow.com/questions/59250927/box-shadow-with-rgba-variable\r\n*/\r\n$Shadow-color: var(--#{$var-Prefix}shadow-color-rgb);\r\n\r\n$Shadow: 0px 1px 1px -1px rgba($Shadow-color, 0.18), 0px 2px 2px 0px rgba($Shadow-color, 0.12), 0px 4px 6px 0px rgba($Shadow-color, 0.06);\r\n$Shadow-2x: 0px 1px 1px 0px rgba($Shadow-color, 0.18), 0px 2px 3px 0px rgba($Shadow-color, 0.12), 0px 6px 9px 0px rgba($Shadow-color, 0.06);\r\n$Shadow-3x: 0px 2px 2px 0px rgba($Shadow-color, 0.18), 0px 3px 4px 0px rgba($Shadow-color, 0.12), 0px 9px 12px 0px rgba($Shadow-color, 0.06);\r\n\r\n$Shadow-map: (null: $Shadow, 2x: $Shadow-2x, 3x: $Shadow-3x,);\r\n$Shadow-map: map-merge($Shadow-map, Shadow-Separator(null, $Shadow));\r\n$Shadow-map: map-merge($Shadow-map, Shadow-Separator(2x, $Shadow-2x));\r\n$Shadow-map: map-merge($Shadow-map, Shadow-Separator(3x, $Shadow-3x));\r\n\r\n$Drop-shadow: drop-shadow(0px 1px 1px rgba($Shadow-color, 0.72)) drop-shadow(0px 2px 2px rgba($Shadow-color, 0.48)) drop-shadow(0px 4px 6px rgba($Shadow-color, 0.24));\r\n$Drop-shadow-2x: drop-shadow(0px 1px 1px rgba($Shadow-color, 0.72)) drop-shadow(0px 2px 3px rgba($Shadow-color, 0.48)) drop-shadow(0px 6px 9px rgba($Shadow-color, 0.24));\r\n$Drop-shadow-3x: drop-shadow(0px 2px 2px rgba($Shadow-color, 0.72)) drop-shadow(0px 3px 4px rgba($Shadow-color, 0.48)) drop-shadow(0px 9px 12px rgba($Shadow-color, 0.24));\r\n\r\n$Drop-shadow-map: (0: drop-shadow(0 0 #0000), null: $Drop-shadow, 2x: $Drop-shadow-2x, 3x: $Drop-shadow-3x,);\r\n\r\n/*\r\n// Typography\r\n// Font, line-height, and color for body text, headings, and more.\r\n*/\r\n// TODO: font\r\n$font-size-base: 1rem !default; // Assumes the browser default, typically `16px`\r\n$font-family-sans-serif: system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, \"Noto Sans\", \"Liberation Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\" !default;\r\n$font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace !default;\r\n\r\n$font-weight-lighter: lighter !default;\r\n$font-weight-light: 300 !default;\r\n$font-weight-normal: 400 !default;\r\n$font-weight-bold: 700 !default;\r\n$font-weight-bolder: bolder !default;\r\n","/*\n// Configuration\n*/\n/*\n https://brumm.af/shadows\n https://tobiasahlin.com/blog/layered-smooth-box-shadows/\n https://css-tricks.com/getting-deep-into-shadows/\n*/\n/*\n// ===========================================================================\n// Mixins - Utilities\n// ===========================================================================\n*/\n/*\n * KEY : VALUES\n * \"Opacity\": (Prefix: Opacity, Properties: opacity, Important: true, Responsive: false, Values: $opacity-map,),\n */\n/*@formatter:off*/\n/*@formatter:on*/\n/*\n// Colors\n*/\n/*\n// ===========================================================================\n// Utils\n// ===========================================================================\n*/\n/*\n// Border radius\n*/\n/*\n// Border\n*/\n/*\n// Spacing\n*/\n/*\n// Grid System\n// Set the number of columns and specify the width of the gutters.\n*/\n/*\n// Shadow\n// Box-shadow with rgba variable\n// --component-shadow-color: 0, 0, 0; // Has to be like this :p\n// https://stackoverflow.com/questions/59250927/box-shadow-with-rgba-variable\n*/\n/*\n// Typography\n// Font, line-height, and color for body text, headings, and more.\n*/\n.Text-red {\n --value: hsla(354deg, 66%, var(--ls-text-lightness, 54%), var(--ls-text-alpha, 1));\n}\n\n.Text-lime {\n --value: hsla(120deg, 100%, var(--ls-text-lightness, 50%), var(--ls-text-alpha, 1));\n}\n\n.Text-blue {\n --value: hsla(212deg, 97%, var(--ls-text-lightness, 43%), var(--ls-text-alpha, 1));\n}\n\n.Text-yellow {\n --value: hsla(45deg, 100%, var(--ls-text-lightness, 51%), var(--ls-text-alpha, 1));\n}\n\n.Text-cyan {\n --value: hsla(180deg, 100%, var(--ls-text-lightness, 50%), var(--ls-text-alpha, 1));\n}\n\n.Text-magenta {\n --value: hsla(300deg, 100%, var(--ls-text-lightness, 50%), var(--ls-text-alpha, 1));\n}\n\n.Text-purple {\n --value: hsla(261deg, 51%, var(--ls-text-lightness, 51%), var(--ls-text-alpha, 1));\n}\n\n.Text-green {\n --value: hsla(134deg, 61%, var(--ls-text-lightness, 41%), var(--ls-text-alpha, 1));\n}\n\n.Text-maroon {\n --value: hsla(331deg, 74%, var(--ls-text-lightness, 30%), var(--ls-text-alpha, 1));\n}\n\n.Text-navy {\n --value: hsla(210deg, 100%, var(--ls-text-lightness, 12%), var(--ls-text-alpha, 1));\n}\n\n.Text-teal {\n --value: hsla(162deg, 73%, var(--ls-text-lightness, 46%), var(--ls-text-alpha, 1));\n}\n\n.Text-olive {\n --value: hsla(60deg, 100%, var(--ls-text-lightness, 25%), var(--ls-text-alpha, 1));\n}\n\n.Text-orange {\n --value: hsla(24deg, 93%, var(--ls-text-lightness, 50%), var(--ls-text-alpha, 1));\n}\n\n.Text-pink {\n --value: hsla(324deg, 79%, var(--ls-text-lightness, 60%), var(--ls-text-alpha, 1));\n}\n\n.Text-brown {\n --value: hsla(0deg, 33%, var(--ls-text-lightness, 38%), var(--ls-text-alpha, 1));\n}\n\n.Text-indigo {\n --value: hsla(270deg, 100%, var(--ls-text-lightness, 25%), var(--ls-text-alpha, 1));\n}\n\n.Text-white {\n --value: hsla(0deg, 0%, var(--ls-text-lightness, 100%), var(--ls-text-alpha, 1));\n}\n\n.Text-silver {\n --value: hsla(0deg, 0%, var(--ls-text-lightness, 75%), var(--ls-text-alpha, 1));\n}\n\n.Text-gray {\n --value: hsla(213deg, 8%, var(--ls-text-lightness, 45%), var(--ls-text-alpha, 1));\n}\n\n.Text-primary {\n --value: hsla(260deg, 81%, var(--ls-text-lightness, 38%), var(--ls-text-alpha, 1));\n}\n\n.Text-secondary {\n --value: hsla(208deg, 7%, var(--ls-text-lightness, 46%), var(--ls-text-alpha, 1));\n}\n\n.Text-success {\n --value: hsla(134deg, 61%, var(--ls-text-lightness, 41%), var(--ls-text-alpha, 1));\n}\n\n.Text-info {\n --value: hsla(212deg, 97%, var(--ls-text-lightness, 43%), var(--ls-text-alpha, 1));\n}\n\n.Text-warning {\n --value: hsla(45deg, 100%, var(--ls-text-lightness, 51%), var(--ls-text-alpha, 1));\n}\n\n.Text-danger {\n --value: hsla(354deg, 66%, var(--ls-text-lightness, 54%), var(--ls-text-alpha, 1));\n}\n\n.Text-light {\n --value: hsla(210deg, 20%, var(--ls-text-lightness, 98%), var(--ls-text-alpha, 1));\n}\n\n.Text-dark {\n --value: hsla(210deg, 10%, var(--ls-text-lightness, 23%), var(--ls-text-alpha, 1));\n}\n\n.Text-night {\n --value: hsla(0deg, 0%, var(--ls-text-lightness, 0%), var(--ls-text-alpha, 1));\n}\n\n.Border-red {\n --value: hsla(354deg, 66%, 70%, var(--ls-border-alpha, 1));\n}\n\n.Border-lime {\n --value: hsla(120deg, 100%, 70%, var(--ls-border-alpha, 1));\n}\n\n.Border-blue {\n --value: hsla(212deg, 97%, 70%, var(--ls-border-alpha, 1));\n}\n\n.Border-yellow {\n --value: hsla(45deg, 100%, 70%, var(--ls-border-alpha, 1));\n}\n\n.Border-cyan {\n --value: hsla(180deg, 100%, 70%, var(--ls-border-alpha, 1));\n}\n\n.Border-magenta {\n --value: hsla(300deg, 100%, 70%, var(--ls-border-alpha, 1));\n}\n\n.Border-purple {\n --value: hsla(261deg, 51%, 70%, var(--ls-border-alpha, 1));\n}\n\n.Border-green {\n --value: hsla(134deg, 61%, 70%, var(--ls-border-alpha, 1));\n}\n\n.Border-maroon {\n --value: hsla(331deg, 74%, 70%, var(--ls-border-alpha, 1));\n}\n\n.Border-navy {\n --value: hsla(210deg, 100%, 70%, var(--ls-border-alpha, 1));\n}\n\n.Border-teal {\n --value: hsla(162deg, 73%, 70%, var(--ls-border-alpha, 1));\n}\n\n.Border-olive {\n --value: hsla(60deg, 100%, 70%, var(--ls-border-alpha, 1));\n}\n\n.Border-orange {\n --value: hsla(24deg, 93%, 70%, var(--ls-border-alpha, 1));\n}\n\n.Border-pink {\n --value: hsla(324deg, 79%, 70%, var(--ls-border-alpha, 1));\n}\n\n.Border-brown {\n --value: hsla(0deg, 33%, 70%, var(--ls-border-alpha, 1));\n}\n\n.Border-indigo {\n --value: hsla(270deg, 100%, 70%, var(--ls-border-alpha, 1));\n}\n\n.Border-white {\n --value: hsla(0deg, 0%, 90%, var(--ls-border-alpha, 1));\n}\n\n.Border-silver {\n --value: hsla(0deg, 0%, 70%, var(--ls-border-alpha, 1));\n}\n\n.Border-gray {\n --value: hsla(213deg, 8%, 70%, var(--ls-border-alpha, 1));\n}\n\n.Border-primary {\n --value: hsla(260deg, 81%, 70%, var(--ls-border-alpha, 1));\n}\n\n.Border-secondary {\n --value: hsla(208deg, 7%, 70%, var(--ls-border-alpha, 1));\n}\n\n.Border-success {\n --value: hsla(134deg, 61%, 70%, var(--ls-border-alpha, 1));\n}\n\n.Border-info {\n --value: hsla(212deg, 97%, 70%, var(--ls-border-alpha, 1));\n}\n\n.Border-warning {\n --value: hsla(45deg, 100%, 70%, var(--ls-border-alpha, 1));\n}\n\n.Border-danger {\n --value: hsla(354deg, 66%, 70%, var(--ls-border-alpha, 1));\n}\n\n.Border-light {\n --value: hsla(210deg, 20%, 90%, var(--ls-border-alpha, 1));\n}\n\n.Border-dark {\n --value: hsla(210deg, 10%, 45%, var(--ls-border-alpha, 1));\n}\n\n.Border-night {\n --value: hsla(0deg, 0%, 35%, var(--ls-border-alpha, 1));\n}\n\n/*# sourceMappingURL=test.css.map */\n"]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@qrsln/lootstrap",
3
- "version": "22.2.2-beta.0",
3
+ "version": "22.2.7-beta.0",
4
4
  "description": "LootStrap is a scss library and is still in beta! There is much to improve!",
5
5
  "style": "dist/css/lootstrap.css",
6
6
  "sass": "scss/lootstrap.scss",
package/scss/Abstracts/_variables.scss CHANGED
@@ -65,7 +65,7 @@ $colors-Theme: (
65
65
  "success" : $Success,
66
66
  "info" : $Info,
67
67
  "warning" : $Warning,
68
- "danger" : $Danger,
68
+ "danger" : $Danger, //"error" : $Danger,
69
69
  "light" : $Light,
70
70
  "dark" : $Dark,
71
71
  "night" : $Black
package/scss/Architecture/Components/_alert.scss CHANGED
@@ -6,6 +6,38 @@
6
6
  $component-Name: $var-Prefix + 'alert-';
7
7
  @import "../_theme-customized";
8
8
 
9
+ /* BRANDS */
10
+ .Alert {
11
+ &.Brand-facebook {
12
+ background: linear-gradient(to bottom right, #3B5998, #6d84b4)
13
+ }
14
+
15
+ &.Brand-github {
16
+ background: linear-gradient(to bottom right, #333, #373737)
17
+ }
18
+
19
+ &.Brand-instagram {
20
+ background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%)
21
+ }
22
+
23
+ &.Brand-linkedin {
24
+ background: linear-gradient(to bottom right, #0077B5, #00a0dc)
25
+ }
26
+
27
+ &.Brand-twitter {
28
+ background: linear-gradient(to bottom right, #1DA1F2, #0084b4)
29
+ }
30
+
31
+ &.Brand-wikipedia {
32
+ background: linear-gradient(to bottom right, #636466, #000)
33
+ }
34
+
35
+ &.Brand-youtube {
36
+ background: linear-gradient(to bottom right, #f00, #e62117)
37
+ }
38
+ }
39
+
40
+
9
41
  .Alert {
10
42
  display: flex;
11
43
  position: relative;
@@ -17,45 +49,89 @@ $component-Name: $var-Prefix + 'alert-';
17
49
  border: $Border;
18
50
  box-shadow: $Shadow;
19
51
 
20
- min-width: 200px;
21
52
  margin-bottom: .5rem;
22
53
  padding: .5rem;
54
+
55
+ min-width: 200px;
56
+ //min-height: 70px;
57
+ //max-width: 600px;
58
+
23
59
  align-items: center;
24
60
 
61
+ margin-right: auto !important;
62
+ margin-left: auto !important;
63
+
64
+ &.Alert-gradient {
65
+ background: linear-gradient(180deg, $bg-Light 0%, $bg-Dark 35%, $bg-Darkest 100%); // vertical
66
+ &.Alert-outline {
67
+ background: linear-gradient(180deg, $bg-Surface 0%, $bg-Light 35%, $bg-Lightest 100%); // vertical
68
+ }
69
+ }
25
70
 
26
71
  &.Alert-outline {
27
72
  color: $fg-Lightest;
28
73
  background-color: $bg-Lightest;
29
74
 
30
75
  //border: .125rem solid $bg-Darkest;
31
- border: 1px solid $bg-Darkest;
76
+ border: 1px solid hsla($bg-Active-hsl, .5);
77
+
78
+ .Alert-icon {
79
+ color: $bg-Active;
80
+ }
81
+
82
+ .Alert-right {
83
+ .Countdown {
84
+ color: $bg-Active;
85
+ background-color: $fg-Active;
86
+
87
+ border-color: hsla($bg-Active-hsl, .5);
88
+ }
89
+ }
32
90
  }
33
91
 
34
92
  .Alert-icon {
35
93
  display: flex;
36
94
  font-size: medium;
95
+
96
+ color: $White;
37
97
  }
38
98
 
39
99
  .Alert-right {
40
100
  margin-left: auto;
41
101
  order: 2;
42
102
 
43
- span:first-child, small:first-child {
103
+ .Countdown {
44
104
  position: absolute;
45
- font-size: 12px;
46
- top: .7rem;
47
- right: 2rem;
105
+ padding: 0 0.25rem;
106
+ font-size: 0.65em;
107
+
108
+ top: 0.00rem;
109
+ right: 0.00rem;
110
+
111
+ color: $fg-Dark;
112
+ background-color: $bg-Dark;
113
+
114
+ border-left: 1px solid $Border-color;
115
+ border-bottom: 1px solid $Border-color;
48
116
  }
49
117
 
50
118
  .Btn-close {
51
- position: absolute;
52
- top: .5rem;
53
- right: .5rem;
119
+ z-index: auto;
120
+ //margin-top: 5px;
121
+ //width: 15px !important;
122
+ //height: 15px !important;
123
+ //position: absolute;
124
+ //top: .5rem;
125
+ //right: .5rem;
54
126
  }
55
127
  }
56
128
 
57
129
  .Alert-body {
58
- padding: .4rem;
130
+ padding: .25rem;
131
+ margin-left: 5px;
132
+ margin-right: 5px;
133
+
134
+ //border: $Border;
59
135
 
60
136
  .Alert-heading {
61
137
  display: block;
package/scss/Architecture/Components/_badge.scss ADDED
@@ -0,0 +1,40 @@
1
+ // ===========================================================================
2
+ // Components - Badge
3
+ // ===========================================================================
4
+
5
+ // Base class
6
+ // Requires one of the contextual, color modifier classes for `color` and `background-color`.
7
+
8
+ $badge-font-size: .75em !default;
9
+ $badge-font-weight: $font-weight-bold !default;
10
+ $badge-color: $White !default;
11
+ $badge-padding-y: .35em !default;
12
+ $badge-padding-x: .65em !default;
13
+ $badge-border-radius: $Border-radius !default;
14
+
15
+ .Badge {
16
+ display: inline-block;
17
+ padding: $badge-padding-y $badge-padding-x;
18
+ //@include font-size($badge-font-size);
19
+ font-size: $badge-font-size;
20
+ font-weight: $badge-font-weight;
21
+ line-height: 1;
22
+ color: $badge-color;
23
+ text-align: center;
24
+ white-space: nowrap;
25
+ vertical-align: baseline;
26
+
27
+ border-radius: $badge-border-radius;
28
+ //@include gradient-bg();
29
+
30
+ // Empty badges collapse automatically
31
+ &:empty {
32
+ display: none;
33
+ }
34
+ }
35
+
36
+ // Quick fix for badges in buttons
37
+ .Btn .Badge {
38
+ position: relative;
39
+ top: -1px;
40
+ }
package/scss/Architecture/Components/_caret.scss CHANGED
@@ -27,7 +27,7 @@ $component-Name: $var-Prefix + 'caret-';
27
27
  }
28
28
  }
29
29
 
30
- .Caret-t, .Caret-b, .Caret-darker-t, .Caret-darker-b {
30
+ .Caret-t, .Caret-b, .Caret-filled-t, .Caret-filled-b {
31
31
  $caret-size: var(--caret-size, 10px);
32
32
 
33
33
  &:after {
@@ -39,7 +39,7 @@ $component-Name: $var-Prefix + 'caret-';
39
39
  }
40
40
  }
41
41
 
42
- .Caret-r, .Caret-l, .Caret-darker-r, .Caret-darker-l {
42
+ .Caret-r, .Caret-l, .Caret-filled-r, .Caret-filled-l {
43
43
  $caret-size: var(--caret-size, 10px);
44
44
 
45
45
  &:after {
@@ -109,58 +109,58 @@ $caret-after-color: $bg-Surface;
109
109
  }
110
110
 
111
111
  /*
112
- // Caret-darker
112
+ // Caret filled
113
113
  */
114
114
 
115
115
  // &:after is bg, &:before is border
116
- $caret-darker-before-color: $Border-color;
117
- $caret-darker-after-color: $bg-Active;
116
+ $caret-before-color-fill: $Border-color;
117
+ $caret-after-color-fill: $bg-Active;
118
118
 
119
- .Caret-darker-t {
119
+ .Caret-filled-t {
120
120
  &:after {
121
121
  bottom: 100%;
122
- border-color: transparent transparent $caret-darker-after-color transparent;
122
+ border-color: transparent transparent $caret-after-color-fill transparent;
123
123
  }
124
124
 
125
125
  &:before {
126
126
  bottom: calc(100% + 1px);
127
- border-color: transparent transparent $caret-darker-before-color transparent;
127
+ border-color: transparent transparent $caret-before-color-fill transparent;
128
128
  }
129
129
  }
130
130
 
131
- .Caret-darker-r {
131
+ .Caret-filled-r {
132
132
  &:after {
133
133
  left: 100%;
134
- border-color: transparent transparent transparent $caret-darker-after-color;
134
+ border-color: transparent transparent transparent $caret-after-color-fill;
135
135
  }
136
136
 
137
137
  &:before {
138
138
  left: calc(100% + 1px);
139
- border-color: transparent transparent transparent $caret-darker-before-color;
139
+ border-color: transparent transparent transparent $caret-before-color-fill;
140
140
  }
141
141
  }
142
142
 
143
- .Caret-darker-b {
143
+ .Caret-filled-b {
144
144
  &:after {
145
145
  top: 100%;
146
- border-color: $caret-darker-after-color transparent transparent transparent;
146
+ border-color: $caret-after-color-fill transparent transparent transparent;
147
147
  }
148
148
 
149
149
  &:before {
150
150
  top: calc(100% + 1px);
151
- border-color: $caret-darker-before-color transparent transparent transparent;
151
+ border-color: $caret-before-color-fill transparent transparent transparent;
152
152
  }
153
153
  }
154
154
 
155
- .Caret-darker-l {
155
+ .Caret-filled-l {
156
156
  &:after {
157
157
  right: 100%;
158
- border-color: transparent $caret-darker-after-color transparent transparent;
158
+ border-color: transparent $caret-after-color-fill transparent transparent;
159
159
  }
160
160
 
161
161
  &:before {
162
162
  right: calc(100% + 1px);
163
- border-color: transparent $caret-darker-before-color transparent transparent;
163
+ border-color: transparent $caret-before-color-fill transparent transparent;
164
164
  }
165
165
  }
166
166
 
package/scss/Architecture/Components/_pagination.scss CHANGED
@@ -10,12 +10,17 @@
10
10
  position: relative;
11
11
  overflow: hidden;
12
12
 
13
+ align-items: center;
14
+ justify-content: center;
15
+
13
16
  color: $fg-Surface;
14
17
  background-color: $bg-Surface;
15
18
 
16
19
  .Square {
17
20
  user-select: none; /* Standard */
18
21
 
22
+ max-width: 42px;
23
+ max-height: 42px;
19
24
  //color: $Component-fg-secondary;
20
25
  //background-color: $Component-bg-secondary;
21
26
 
@@ -28,11 +33,11 @@
28
33
  font-size: 1.3em;
29
34
  }
30
35
 
31
- &:not(.disabled):not(.active) {
36
+ &:not(.Disabled):not(.Active) {
32
37
  cursor: pointer;
33
38
  }
34
39
 
35
- &:hover:not(.active):not(.disabled) {
40
+ &:hover:not(.Active):not(.Disabled) {
36
41
  text-decoration: none;
37
42
  border-color: $Border-color;
38
43
 
package/scss/Architecture/Components/_themed.scss CHANGED
@@ -6,40 +6,52 @@
6
6
  $component-Name: $var-Prefix + '';
7
7
  @import "../_theme-customized";
8
8
 
9
- .Themed-body {
10
- color: $fg-Body;
11
- background-color: $bg-Body;
12
-
13
- padding: 1rem;
14
- }
15
9
 
16
10
  .Themed {
17
- color: $fg-Surface;
18
- background-color: $bg-Surface;
19
-
20
11
  border: $Border;
21
12
  box-shadow: $Shadow;
22
13
 
23
14
  padding: .5rem;
15
+ }
24
16
 
25
- &.Themed-outline {
26
- color: $fg-Lightest;
27
- background-color: $bg-Lightest;
17
+ .Themed-body {
18
+ color: $fg-Body;
19
+ background-color: $bg-Body;
20
+ }
28
21
 
29
- border-color: $bg-Darkest;
30
- }
22
+ .Themed-outline {
23
+ color: $fg-Lightest;
24
+ background-color: $bg-Lightest;
31
25
 
32
- .Themed-title {
33
- color: $fg-Dark;
34
- background-color: $bg-Dark;
26
+ border-color: $bg-Darkest;
27
+ }
35
28
 
36
- padding: .5rem;
37
- }
29
+ .Themed-active {
30
+ color: $fg-Active;
31
+ background-color: $bg-Active;
32
+ }
38
33
 
39
- .Themed-footer {
40
- color: $fg-Lightest;
41
- background-color: $bg-Lightest;
34
+ .Themed-surface {
35
+ color: $fg-Surface;
36
+ background-color: $bg-Surface;
37
+ }
42
38
 
43
- padding: .5rem;
44
- }
39
+ .Themed-dark {
40
+ color: $fg-Dark;
41
+ background-color: $bg-Dark;
45
42
  }
43
+
44
+ .Themed-darkest {
45
+ color: $fg-Darkest;
46
+ background-color: $bg-Darkest;
47
+ }
48
+
49
+ .Themed-light {
50
+ color: $fg-Light;
51
+ background-color: $bg-Light;
52
+ }
53
+
54
+ .Themed-lightest {
55
+ color: $fg-Lightest;
56
+ background-color: $bg-Lightest;
57
+ }
package/scss/Architecture/Components/_toasts.scss CHANGED
@@ -18,12 +18,57 @@ $component-Name: $var-Prefix + 'toast-';
18
18
  box-shadow: $Shadow;
19
19
 
20
20
  min-width: 200px;
21
+ //max-width: 600px;
21
22
  margin-bottom: .5rem;
22
23
 
24
+ align-items: center;
25
+
26
+ margin-right: auto !important;
27
+ margin-left: auto !important;
28
+
29
+ &.Toast-gradient {
30
+ .Toast-header{
31
+ background: linear-gradient(180deg, $bg-Light 0%, $bg-Dark 35%, $bg-Darkest 100%); // vertical
32
+ }
33
+ &.Toast-outline {
34
+ .Toast-header{
35
+ background: linear-gradient(180deg, $bg-Surface 0%, $bg-Light 35%, $bg-Lightest 100%); // vertical
36
+ }
37
+ }
38
+ }
39
+
40
+ &.Toast-outline {
41
+ border: 1px solid hsla($bg-Active-hsl, .5);
42
+
43
+ .Toast-header {
44
+ color: $fg-Surface;
45
+ background-color: $bg-Surface;
46
+
47
+ .Toast-icon {
48
+ color: $bg-Active;
49
+ }
50
+
51
+ .Toast-right {
52
+ .Countdown {
53
+ color: $bg-Active;
54
+ background-color: $fg-Active;
55
+
56
+ border-color: hsla($bg-Active-hsl, .5);
57
+ }
58
+ }
59
+ }
60
+
61
+ .Toast-body {
62
+ color: black;
63
+ background-color: white;
64
+ }
65
+
66
+ }
67
+
23
68
  .Toast-header {
24
69
  display: flex;
25
70
  border-bottom: $Border;
26
- padding: .4rem;
71
+ padding: .3rem;
27
72
  align-items: center;
28
73
 
29
74
  color: $fg-Darkest;
@@ -35,15 +80,29 @@ $component-Name: $var-Prefix + 'toast-';
35
80
  display: flex;
36
81
  font-size: medium;
37
82
  padding-right: .4rem;
83
+
84
+ color: $White;
38
85
  }
39
86
 
40
87
  .Toast-right {
41
88
  margin-left: auto;
42
89
  order: 2;
43
90
 
44
- span:first-child, small:first-child {
91
+ .Countdown {
92
+ position: relative;
93
+ display: inline;
94
+
45
95
  vertical-align: top;
46
- padding-right: .2rem;
96
+ font-size: 0.65em;
97
+
98
+ padding: 0 0.25rem;
99
+ margin-right: 3px;
100
+ top: 6px;
101
+
102
+ color: $fg-Dark;
103
+ background-color: $bg-Dark;
104
+ border: 1px solid $Border-color;
105
+
47
106
  }
48
107
  }
49
108
  }
@@ -52,7 +111,7 @@ $component-Name: $var-Prefix + 'toast-';
52
111
  color: $fg-Surface;
53
112
  background-color: $bg-Surface;
54
113
 
55
- padding: 1rem;
114
+ padding: .75rem;
56
115
  }
57
116
 
58
117
  .Progress {