uniform-ui 2.4.1 → 3.0.0.beta2

data/lib/assets/stylesheets/uniform/utilities/sizing.scss

@@ -0,0 +1,54 @@
+@import 'uniform/mixins';
+
+//----------------------------------------------------------------
+//             Fractionals
+//----------------------------------------------------------------
+@for $denominator from 1 through 12 {
+    @for $numerator from 1 through $denominator {
+        @include responsive-rule(".width-#{$numerator}\\\/#{$denominator}"){ width: $numerator/$denominator * 100% };
+        @include responsive-rule(".min-width-#{$numerator}\\\/#{$denominator}"){ min-width: $numerator/$denominator * 100% };
+        @include responsive-rule(".max-width-#{$numerator}\\\/#{$denominator}"){ max-width: $numerator/$denominator * 100% };
+    }
+}
+
+//----------------------------------------------------------------
+//             Pixels
+//----------------------------------------------------------------
+@for $i from 0 through 100 {
+    @include responsive-rule(".width-#{$i * 5}-px"){ width: $i * 5px };
+    @include responsive-rule(".max-width-#{$i * 5}-px"){ max-width: $i * 5px };
+    @include responsive-rule(".min-width-#{$i * 5}-px"){ min-width: $i * 5px };
+    
+    @include responsive-rule(".height-#{$i * 5}-px"){ height: $i * 5px };
+    @include responsive-rule(".min-height-#{$i * 5}-px"){ min-height: $i * 5px };
+    @include responsive-rule(".max-height-#{$i * 5}-px"){ max-height: $i * 5px };
+}
+
+//----------------------------------------------------------------
+//             Viewport
+//----------------------------------------------------------------
+@for $i from 0 through 20 {
+    @include responsive-rule(".width-#{$i * 5}-vw"){ width: $i * 5vw };
+    @include responsive-rule(".min-width-#{$i * 5}-vw"){ min-width: $i * 5vw };
+    @include responsive-rule(".max-width-#{$i * 5}-vw"){ max-width: $i * 5vw };
+}
+@include responsive-rule(".height-100-vh"){ height: 100vh; };
+@include responsive-rule(".min-height-100-vh"){ min-height: 100vh; };
+@include responsive-rule(".max-height-100-vh"){ max-height: 100vh; };
+
+//----------------------------------------------------------------
+//             Full
+//----------------------------------------------------------------
+@include responsive-rule(".height-auto"){ height: auto; };
+@include responsive-rule(".height-full"){ height: 100%; };
+@include responsive-rule(".max-height-auto"){ height: auto; };
+@include responsive-rule(".max-height-full"){ height: 100%; };
+@include responsive-rule(".min-height-auto"){ height: auto; };
+@include responsive-rule(".min-height-full"){ height: 100%; };
+
+@include responsive-rule(".width-auto"){ width: auto; };
+@include responsive-rule(".width-full"){ width: 100%; };
+@include responsive-rule(".max-width-auto"){ width: auto; };
+@include responsive-rule(".max-width-full"){ width: 100%; };
+@include responsive-rule(".min-width-auto"){ width: auto; };
+@include responsive-rule(".min-width-full"){ width: 100%; };

data/lib/assets/stylesheets/uniform/utilities/spacing.scss

@@ -0,0 +1,62 @@
+@import 'uniform/mixins';
+
+//----------------------------------------------------------------
+//             Margin
+//----------------------------------------------------------------
+
+@include size-rule('.margin') using ($size) {
+    margin: $size;
+}
+@include size-rule('.margin-v') using ($size) {
+    margin-top: $size;
+    margin-bottom: $size;
+}
+@include size-rule('.margin-h') using ($size) {
+    margin-left: $size;
+    margin-right: $size;
+}
+@include size-rule('.margin-nest') using ($size) {
+    margin: -$size;
+}
+@include size-rule('.margin-v-nest') using ($size) {
+    margin-top: -$size;
+    margin-bottom: -$size;
+}
+@include size-rule('.margin-h-nest') using ($size) {
+    margin-left: -$size;
+    margin-right: -$size;
+}
+@each $direction in 'top' 'right' 'bottom' 'left' {
+    @include size-rule('.margin-#{$direction}') using ($size) {
+        margin-#{$direction}: $size;
+    };
+    @include size-rule('.margin-#{$direction}-nest') using ($size) {
+        margin-#{$direction}: -$size;
+    };
+}
+
+
+//----------------------------------------------------------------
+//             Spacing
+//----------------------------------------------------------------
+@include size-rule('.space-h') using ($size) {
+    &  > * + * {
+        margin-left: $size;
+    }
+}
+@include size-rule('.space-v') using ($size) {
+    &  > * + * {
+        margin-top: $size
+    }
+}
+
+
+//----------------------------------------------------------------
+//             Pad
+//----------------------------------------------------------------
+@include size-rule('.pad') using ($size) { padding: $size;}
+@include size-rule('.pad-v') using ($size) { padding-top: $size; padding-bottom: $size;}
+@include size-rule('.pad-h') using ($size) { padding-left: $size; padding-right: $size;}
+@each $direction in 'top' 'right' 'bottom' 'left' {
+    @include size-rule('.pad-#{$direction}') using ($size) {padding-#{$direction}: $size;};
+}

data/lib/assets/stylesheets/uniform/utilities/text.scss

@@ -0,0 +1,158 @@
+@import 'uniform/mixins';
+
+//----------------------------------------------------------------
+//             Color
+//----------------------------------------------------------------
+
+@include color-rule('.text') using ($color){
+    --text-opacity: 1.0;
+    color: rgba($color, var(--text-opacity));
+}
+@include responsive-rule('.text-md') { font-size: 1rem; }
+@include color-rule('.placeholder') using ($color){
+    &::placeholder{
+        --placeholder-opacity: 1.0;
+        color: rgba($color, var(--placeholder-opacity));
+    }
+}
+
+
+
+//----------------------------------------------------------------
+//             Size
+//----------------------------------------------------------------
+@include size-rule('.text') using ($size) {font-size: $size;}
+
+
+//----------------------------------------------------------------
+//             Style
+//----------------------------------------------------------------
+@include responsive-rule('.text-mono') { font-family: monospace, monospace; }
+@include responsive-rule('.text-uppercase') { text-transform: uppercase; }
+@include responsive-rule('.text-lowercase') { text-transform: lowercase; }
+@include responsive-rule('.text-capitalize') { text-transform: capitalize; }
+@include responsive-rule('.text-normal-case') { text-transform: none; }
+@include responsive-rule('.text-italic') { font-style: italic; }
+@include pseudo-class-rule('text-underline') { text-decoration: underline; }
+@include responsive-rule('.text-no-underline') { text-decoration: none; }
+@include responsive-rule('.text-line-through') { text-decoration: line-through; }
+
+@each $class, $weight in (
+hairline: 100,
+thin: 200,
+light: 300,
+normal: 400,
+medium: 500,
+semibold: 600,
+bold: 700,
+extrabold: 800,
+black: 900
+) {
+    @include responsive-rule('.text-#{$weight}') { font-weight: $weight; }
+    @include responsive-rule('.text-#{$class}') { font-weight: $weight; }
+}
+
+//----------------------------------------------------------------
+//             Positioning
+//----------------------------------------------------------------
+@include responsive-rule('.text-left'){
+    text-align: left;
+}
+@include responsive-rule('.text-right'){
+    text-align: right;
+}
+@include responsive-rule('.text-center'){
+    text-align: center;
+}
+@include responsive-rule('.text-justify'){
+    text-align: justify;
+}
+
+
+//----------------------------------------------------------------
+//             Leading
+//----------------------------------------------------------------
+@each $style, $height in (
+none: 1,
+tight: 1.25,
+snug: 1.375,
+normal: 1.5,
+relaxed: 1.625,
+loose: 2
+) {
+    @include responsive-rule('leading-#{$style}') {
+        line-height: $height;
+    }
+}
+
+//----------------------------------------------------------------
+//             Tracking
+//----------------------------------------------------------------
+@each $style, $height in (
+tighter: -0.05em,
+tight: -0.025em,
+normal: 0,
+wide: 0.025em,
+wider: 0.05em,
+widest: 0.1em
+) {
+    @include responsive-rule('tracking-#{$style}') {
+        letter-spacing: $height;
+    }
+}
+
+//----------------------------------------------------------------
+//             Columns
+//----------------------------------------------------------------
+
+@include responsive-rule('.text-col-2'){
+    column-count: 2;
+    column-gap: 5em;
+}
+@include responsive-rule('.text-col-3'){
+    column-count: 3;
+    column-gap: 5em;
+}
+
+
+//----------------------------------------------------------------
+//             Breaking
+//----------------------------------------------------------------
+.text-no-break{
+    break-inside: avoid-column;
+}
+.text-break{
+    word-break: break-all;
+}
+.text-nowrap,
+.text-no-wrap{
+    white-space: nowrap;
+}
+.text-overflow-hidden{
+    text-overflow: ellipsis;
+    overflow: hidden;
+}
+
+//----------------------------------------------------------------
+//             Lists
+//----------------------------------------------------------------
+@include responsive-rule('text-list-none'){ list-style-type: none; }
+@include responsive-rule('text-list-disc'){ list-style-type: disc; }
+@include responsive-rule('text-list-decimal'){ list-style-type: decimal; }
+@include responsive-rule('text-list-inside'){ list-style-position: inside; }
+@include responsive-rule('text-list-outside'){ list-style-position: outside; }
+
+
+//----------------------------------------------------------------
+//             Select
+//----------------------------------------------------------------
+@each $type in (
+none
+text
+all
+auto
+) {
+    .select-#{$type}{
+        user-select: $type;
+    }
+}

data/lib/assets/stylesheets/uniform/variables.scss

@@ -3,72 +3,132 @@
 //----------------------------------------------------------------
 $text-inputs: "input:not([type=search]):not([type=submit]):not([type=checkbox]):not([type=radio])";
 $system-font: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
+$base-font: $system-font;
 
+$base-font: if(variable-exists('base-font'), $base-font, $system-font);
+
+
+//----------------------------------------------------------------
+//             Includes
+//----------------------------------------------------------------
+$include_child_utilities: if(variable-exists('include_child_utilities'), $include_child_utilities, false);
+$include_breakpoint_container: if(variable-exists('include_breakpoint_container'), $include_breakpoint_container, false);
+$include_pseudo_utilities: if(variable-exists('include_pseudo_utilities'), $include_pseudo_utilities, [hover]);
 
 //----------------------------------------------------------------
 //             Colors
 //----------------------------------------------------------------
-$colors: (
-    'background':         #f2f2f2,
-    'gray-lightest':      #F8FAFC,
-    'gray-lighter':       #F1F5F8,
-    'gray-light':         #DAE1E7,
-    'gray':               #B8C2CC,
-    'gray-dark':          #8795A1,
-    'gray-darker':        #606F7B,
-    'gray-darkest':       #3D4852,
+
+$colors: if(variable-exists('colors'), $colors, (
+    'gray':               #505152,
     'green':              #97C848,
-    'green-light':        #BBFF00,
-    'green-dark':         #709239,
     'blue':               #0994E2,
-    'blue-bright':        #1fa9ff,
-    'blue-light':         #A7CDF2,
-    'blue-dark':          #167DBA,
     'red':                #E1563E,
-    'red-light':          #E5766C,
-    'red-dark':           #971710,
-    'red-bright':         #ffab9b,
     'yellow':             #D7E542,
-    'yellow-dark':        #BBC02C,
-    'yellow-light':       #E9F75A,
-    'black':              #000000,
-    'white':              #FFFFFF
+    'purple':             #9461b9
+));
+$color_spectrum: (
+    'white':              #FFFFFF,
 );
+@each $name, $color in $colors {
+    $color_spectrum: map-merge($color_spectrum, ("#{$name}": $color));
+    @for $index from 1 through 9 {
+        $saturation_adjustment: 0;
+        @if saturation($color) > 20% {
+            $saturation_adjustment: ((100 - saturation($color)) / 4) * abs(5 - $index);
+        }
+        $color_spectrum: map-merge($color_spectrum, ("#{$name}-#{(10 - $index) * 10}": change-color($color, $lightness: $index * 10, $saturation: saturation($color) + $saturation_adjustment)));
+    }
+}
 
 
 //----------------------------------------------------------------
 //             Breakpoints
 //----------------------------------------------------------------
 // 720, 1080, 1440
-$breakpoints: (
+$include_breakpoint_container: if(variable-exists('include_breakpoint_container'), $include_breakpoint_container, false);
+$breakpoints: if(variable-exists('breakpoints'), $breakpoints, (
     sm: "max-width: 719px",
     md: "min-width: 720px",
     lg: "min-width: 1080px",
     xl: "min-width: 1440px"
-);
+));
 
 
 //----------------------------------------------------------------
 //             Sizes
 //----------------------------------------------------------------
-$sizes: (
-    quarter:   0.25em,
-    half:      0.5em,
-    smaller:   0.8em,
-    small:     0.9em,
-    base:      1em,
-    large:     1.2em,
-    larger:    1.4em,
-    2x:        2em,
-    4x:        4em,
-    8x:        8em
-);
-
-
-//----------------------------------------------------------------
-//             Grid
-//----------------------------------------------------------------
-$grid-columns: 12;
-$grid-gutter: 1em;
-
-
+$sizes: map-merge((
+  border: (
+    '': 1px,
+    'none': 0,
+    '2px': 2px,
+    '3px': 3px,
+    '4px': 4px
+  ),
+  divide: (
+    '': 1px,
+    'none': 0,
+    '2px': 2px,
+    '3px': 3px,
+    '4px': 4px
+  ),
+  rounded: (
+    '':  1rem,
+    'none': 0,
+    "xs":        0.8rem,
+    "sm":        0.9rem,
+    "lg":        1.2rem,
+    "xl":        1.4rem,
+  ),
+  margin: (
+    '':  1rem,
+    'none': 0,
+    "1\\/4x":      0.25rem,
+    "1\\/2x":      0.5rem,
+    "3\\/4x":      0.75rem,
+    "xs":        0.8rem,
+    "sm":        0.9rem,
+    "lg":        1.2rem,
+    "xl":        1.4rem,
+    "2x":        2rem,
+  ),
+  gap: (
+    '':  1rem,
+    'none': 0,
+    "xs":        0.8rem,
+    "sm":        0.9rem,
+    "lg":        1.2rem,
+    "xl":        1.4rem,
+  ),
+  space: (
+    '':  1rem,
+    'none': 0,
+    "xs":        0.8rem,
+    "sm":        0.9rem,
+    "lg":        1.2rem,
+    "xl":        1.4rem,
+  ),
+  pad: (
+    '':  1rem,
+    'none': 0,
+    "1\\/4x":      0.25rem,
+    "1\\/2x":      0.5rem,
+    "3\\/4x":      0.75rem,
+    "xs":        0.8rem,
+    "sm":        0.9rem,
+    "lg":        1.2rem,
+    "xl":        1.4rem,
+    "2x":        2rem,
+  ),
+  text: (
+    '':  1rem,
+    "xs":        0.8rem,
+    "sm":        0.9rem,
+    "lg":        1.2rem,
+    "xl":        1.4rem,
+    "2x":        2rem,
+    "4x":        4rem,
+    "8x":        8rem
+  )
+), if(variable-exists('sizes'), $sizes, ()));