uniform-ui 3.0.0.beta8 → 3.0.0.beta10

data/lib/assets/stylesheets/uniform/components/container.scss

@@ -7,14 +7,15 @@
     padding-right: 1em;
 }
 
-@include breakpoint('lg'){
-    .container{
+// TODO match this with breakpoints variable, so that breakpoints can change and adjust this
+.container{
+    @include breakpoint('md'){
+        max-width: 720px;
+    }
+    @include breakpoint('lg'){
         max-width: 1080px;
     }
-}
-
-@include breakpoint('xl'){
-    .container{
-        max-width: 1440px;
+    @include breakpoint('xl'){
+        max-width: 1400px;
     }
 }

data/lib/assets/stylesheets/uniform/components/dropzone.scss

@@ -0,0 +1,40 @@
+.uniformDropzone {
+    &:before {
+        display: none;
+        content: '';
+        position:absolute;
+        top: 0;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        text-align:center;
+        border: 2px dashed color('blue-50');
+        background: rgba(white, 0.5);
+        color: color('blue-50');
+        z-index:98;
+        backdrop-filter: blur(2px);
+    }
+    &:after {
+        display: none;
+        position:absolute;
+        left:50%;
+        top:50%;
+        transform: translate(-50%, -50%);
+        content: 'Drag Here';
+        z-index:99;
+        font-weight: bold;
+        font-size: 1.2em;
+    }
+    &.-show {
+        &:before {display: block;}
+        &:after {display: block;}
+    }
+    &.-active {
+        &:before {
+            background: rgba(color('blue'), 0.3);
+        }
+        &:after {
+            color: color('blue-70');
+        }
+    }
+}

data/lib/assets/stylesheets/uniform/components/pointer.scss

@@ -42,8 +42,8 @@
         }
         &:before {
             margin-left: 0;
-            margin-top: -20px;
-            height: 40px;
+            margin-top: -10px;
+            height: 20px;
             width: 2px;
             top: 50%;
             right: 0;
@@ -60,8 +60,8 @@
         }
         &:before {
             margin-left: 0;
-            margin-top: -20px;
-            height: 40px;
+            margin-top: -10px;
+            height: 20px;
             width: 2px;
             left: 0;
             top: 50%;

data/lib/assets/stylesheets/uniform/components/select.scss

@@ -1,3 +1,5 @@
+@import 'uniform/functions/icons';
+
 .uniformSelect{
     --border-color: #{red(color('gray-40'))}, #{green(color('gray-40'))}, #{blue(color('gray-40'))};
     appearance: none;
@@ -38,6 +40,7 @@
 .uniformSelect-value{
     z-index: 2;
     text-align: left;
+    display:flex;
 }
 .uniformSelect-indicator{
     padding-left: 0.25em;
@@ -108,7 +111,9 @@
     }
 }
 
-
+.uniformSelect-selection + .uniformSelect-selection {
+    margin-left: 0.5em;
+}
 
 .uniformSelect-selection{
     display: inline-flex;
@@ -118,7 +123,7 @@
     padding: 0;
     line-height: 1;
     padding-left:0.5em;
-    background: darken(color('gray-10'), 5);
+    background: color('gray-10');
     border-radius: 0.25em;
     span{
         flex: 1 1 auto;

data/lib/assets/stylesheets/uniform/components/thumb.scss

@@ -8,7 +8,6 @@
         display: block;
         position:absolute;
         width: 100%;
-        position:absolute;
         top:50%;
         transform: translateY(-50%);
     }

data/lib/assets/stylesheets/uniform/components/z-input.scss

@@ -18,7 +18,7 @@
 
 select.uniformInput {
     padding-right: 1em;
-    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-down"><polyline points="6 9 12 15 18 9"></polyline></svg>') no-repeat center right;
+    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg>') no-repeat center right;
 }
 
 @include color-rule('.focus') using ($color) {

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

@@ -0,0 +1,156 @@
+@import 'uniform/functions/map';
+
+$system-font: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
+
+$uniform_configs: if(variable-exists('uniform_configs'), $uniform_configs, ());
+$uniform_configs: purge(merge((
+    "base-font": $system-font,
+    "combinators": (),
+    "pseudo_classes": (
+        "hover": hover,
+    ),
+    "breakpoints": (
+        'include_containers': false,
+        'sm': "max-width: 719px",
+        'md': "min-width: 720px",
+        'lg': "min-width: 1080px",
+        'xl': "min-width: 1440px"
+    ),
+    "colors": (
+        'white': #FFFFFF,
+        'gray':  (
+            'spectrum': true,
+            'color': #505152
+        ),
+        'green':  (
+            'spectrum': true,
+            'color': #97C848
+        ),
+        'blue':   (
+            'spectrum': true,
+            'color': #0994E2
+        ),
+        'red':    (
+            'spectrum': true,
+            'color': #E1563E
+        ),
+        'yellow': (
+            'spectrum': true,
+            'color': #D7E542
+        ),
+        'purple': (
+            'spectrum': true,
+            'color': #9461b9
+        )
+    ),
+    "sizes":      (
+        'border': (
+          '':     1px,
+          'none': 0,
+          '2px':  2px,
+          '3px':  3px,
+          '4px':  4px
+        ),
+        'divide': (
+          '':       1px,
+          'none':   0,
+          '2px':    2px,
+          '3px':    3px,
+          '4px':    4px
+        ),
+        'rounded':  (
+          '':       0.25rem,
+          'none':   0,
+          "xs":     0.1rem,
+          "sm":     0.2rem,
+          "lg":     0.5rem,
+          "xl":     1rem,
+        ),
+        '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,
+          "2x":     2rem,
+          "4x":     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
+
+        ),
+        'stroke':   (
+            "sm" : 0.5px,
+            "md" : 1px,
+            "lg" : 1.5px,
+            "2x" : 2px,
+            "3x" : 3px
+        )
+    )
+), $uniform_configs));
+
+//----------------------------------------------------------------
+//             Color Variations (ex. gray-30 from gray)
+//----------------------------------------------------------------
+$uniform_colors: map-get($uniform_configs, 'colors');
+@each $name, $color_options in $uniform_colors {
+    @if type-of($color_options) == 'map' {
+        $color: map-get($color_options, 'color');
+        $uniform_colors: map-merge($uniform_colors, ("#{$name}": $color));
+        
+        @if map-get($color_options, 'spectrum') {
+            @for $index from 1 through 9 {
+                $saturation_adjustment: 0;
+                @if saturation($color) > 20% {
+                    $saturation_adjustment: ((100 - saturation($color)) / 4) * abs(5 - $index);
+                }
+                $uniform_colors: map-merge($uniform_colors, ("#{$name}-#{(10 - $index) * 10}": change-color($color, $lightness: $index * 10, $saturation: saturation($color) + $saturation_adjustment)));
+            }
+        }
+    } @else if (type-of($color_options) == 'color') {
+        $uniform_colors: map-merge($uniform_colors, ("#{$name}": $color_options));
+    } @else {
+        $uniform_colors: map-remove($uniform_colors, $name);
+    }
+}
+$uniform_configs: map-merge($uniform_configs, (colors: $uniform_colors));

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

@@ -31,27 +31,6 @@ pre{
     margin: 0;
 }
 
-ul,
-ol,
-dl{
-    list-style: none;
-    margin: 0;
-    padding: 0;
-    ul,
-    ol,
-    dl{
-        margin-bottom: 0;
-    }
-}
-
-dd{
-    margin-left: 0;
-    margin-bottom: 0.5em;
-}
-dt{
-    font-weight: bold;
-}
-
 table{
     background-color: transparent;
     border-collapse: collapse;
@@ -98,8 +77,8 @@ button{
     cursor: pointer;
 }
 button{
-    font-family: $base-font;
-    font-size: 1rem;
+    font-family: map-get($uniform_configs, 'base-font');
+    font-size: 1em;
 }
 
 img,

data/lib/assets/stylesheets/uniform/functions/icons.scss

@@ -0,0 +1,29 @@
+@import 'uniform/functions/string';
+
+@function uri-encode($svg) {
+    $encoded: '';
+    $slice: 2000;
+    $index: 0;
+    $loops: ceil(str-length($svg) / $slice);
+
+    @for $i from 1 through $loops {
+        $chunk: str-slice($svg, $index, $index + $slice - 1);
+        $chunk: str-replace($chunk, '"', "'");
+        $chunk: str-replace($chunk, '<', '%3C');
+        $chunk: str-replace($chunk, '>', '%3E');
+        $chunk: str-replace($chunk, '&', '%26');
+        $chunk: str-replace($chunk, '#', '%23');
+        $encoded: #{$encoded}#{$chunk};
+        $index: $index + $slice;
+    }
+
+    @return $encoded;
+}
+
+@function svg-encode ($svg) {
+    @return url("data:image/svg+xml;charset=utf8,#{uri-encode($svg)}");
+}
+
+@function icon-check($color: #000000){
+    @return svg-encode('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32" viewBox="0 0 32 32"><path d="M28.998 8.531l-2.134-2.134c-0.394-0.393-1.030-0.393-1.423 0l-12.795 12.795-6.086-6.13c-0.393-0.393-1.029-0.393-1.423 0l-2.134 2.134c-0.393 0.394-0.393 1.030 0 1.423l8.924 8.984c0.393 0.393 1.030 0.393 1.423 0l15.648-15.649c0.393-0.392 0.393-1.030 0-1.423z" fill="#{$color}"></path></svg>');
+}

data/lib/assets/stylesheets/uniform/functions/map.scss

@@ -0,0 +1,95 @@
+@function get($map, $keys...) {
+    @each $key in $keys {
+        $map: map-get($map, $key);
+    }
+    @return $map;
+}
+
+@function set($map, $keys...) {
+    $maps: ($map,);
+    $result: null;
+    
+    @if length($keys) == 1 {
+        @error "Not enought key arguments";
+    } @else if length($keys) == 2 {
+        @return map-merge($map, (nth($keys, 1): nth($keys, 2)));
+    }
+    
+    @for $i from 1 through length($keys) - 2 {
+        $key: nth($keys, $i);
+        $map: nth($maps, -1);
+        @debug $map;
+        $value: get($map, $key);
+        @if type-of($value) != 'map' {
+            $value: ();
+        }
+        $maps: append($maps, $value);
+    }
+    
+    @for $i from length($maps) through 1 {
+        $map: nth($maps, $i);
+        $key: nth($keys, $i);
+        $value: if($i == length($maps), nth($keys, -1), $result);
+        $result: map-merge($map, ($key: $value));
+    }
+    
+    @return $result;
+}
+
+@function merge($maps...) {
+    $target: ();
+    @each $map in $maps {
+        @each $key, $value in $map {
+            $current: get($target, $key);
+            @if type-of($value) == 'map' and type-of($current) == "map" {
+                $target: set($target, $key, merge($current, $value))
+            } @else {
+                $target: set($target, $key, $value);
+            }
+        }
+    }
+    @return $target;
+}
+
+@function purge($map) {
+    $target: $map;
+    @each $key, $value in $map {
+        @if type-of($value) == "map" {
+            $target: set($map, $key, purge($value))
+        } @else if $value == false OR $value == "false" {
+            $target: map-remove($map, $key);
+        }
+    }
+    @return $target;
+}
+
+@function mapToString($map) {
+    $string: '"';
+    
+    @each $key, $value in $map {
+        @if type-of($value) == "string" {
+            $string: str-insert($string, $key, -1);
+            $string: str-insert($string, "/", -1);
+            $string: str-insert($string, $value, -1);
+            $string: str-insert($string, ",", -1);
+        }
+    }
+    $string: str-slice($string, 1, -2);
+    $string: str-insert($string, '"', -1);
+    
+    @return $string;
+}
+
+@function mapToJSON($map) {
+    $string: '';
+    
+    @each $key, $value in $map {
+        @if type-of($value) == "map" {
+            $string: str-insert($string, "\"#{$key}\": #{mapToJSON($value)},", -1);
+        } @else {
+            $string: str-insert($string, "\"#{$key}\": \"#{$value}\",", -1);
+        }
+    }
+    
+    @return "{#{str-slice($string, 0, -2)}}";
+}

data/lib/assets/stylesheets/uniform/functions/string.scss

@@ -0,0 +1,15 @@
+/// Replace `$search` with `$replace` in `$string`
+/// @author Hugo Giraudel
+/// @param {String} $string - Initial string
+/// @param {String} $search - Substring to replace
+/// @param {String} $replace ('') - New value
+/// @return {String} - Updated string
+@function str-replace($string, $search, $replace: '') {
+    $index: str-index($string, $search);
+  
+    @if $index {
+        @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
+    }
+  
+    @return $string;
+}

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

@@ -1,86 +1,11 @@
+@import 'uniform/functions/map';
+
 @function toRGB($color){
     @return red($color), green($color), blue($color);
 }
 @function color($key) {
-    @return map-get($color_spectrum, $key);
+    @return get($uniform_configs, 'colors', $key);
 }
 @function size($key) {
-    @return map-get($sizes, $key);
-}
-
-@function mapToString($map) {
-    $string: '"';
-    
-    @each $key, $value in $map {
-        $string: str-insert($string, $key, -1);
-        $string: str-insert($string, "/", -1);
-        $string: str-insert($string, $value, -1);
-        $string: str-insert($string, ",", -1);
-    }
-    $string: str-slice($string, 1, -2);
-    $string: str-insert($string, '"', -1);
-    
-    @return $string;
-}
-
-//----------------------------------------------------------------
-//             Icons
-//----------------------------------------------------------------
-
-
-
-/// Replace `$search` with `$replace` in `$string`
-/// @author Hugo Giraudel
-/// @param {String} $string - Initial string
-/// @param {String} $search - Substring to replace
-/// @param {String} $replace ('') - New value
-/// @return {String} - Updated string
-@function str-replace($string, $search, $replace: '') {
-    $index: str-index($string, $search);
-  
-    @if $index {
-        @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
-    }
-  
-    @return $string;
-}
-
-@function uri-encode($svg) {
-    $encoded: '';
-    $slice: 2000;
-    $index: 0;
-    $loops: ceil(str-length($svg) / $slice);
-
-    @for $i from 1 through $loops {
-        $chunk: str-slice($svg, $index, $index + $slice - 1);
-        $chunk: str-replace($chunk, '"', "'");
-        $chunk: str-replace($chunk, '<', '%3C');
-        $chunk: str-replace($chunk, '>', '%3E');
-        $chunk: str-replace($chunk, '&', '%26');
-        $chunk: str-replace($chunk, '#', '%23');
-        $encoded: #{$encoded}#{$chunk};
-        $index: $index + $slice;
-    }
-
-    @return $encoded;
-}
-
-@function svg-encode ($svg) {
-    @return url("data:image/svg+xml;charset=utf8,#{uri-encode($svg)}");
-}
-
-@function icon-check($color: #000000){
-    @return svg-encode('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32" viewBox="0 0 32 32"><path d="M28.998 8.531l-2.134-2.134c-0.394-0.393-1.030-0.393-1.423 0l-12.795 12.795-6.086-6.13c-0.393-0.393-1.029-0.393-1.423 0l-2.134 2.134c-0.393 0.394-0.393 1.030 0 1.423l8.924 8.984c0.393 0.393 1.030 0.393 1.423 0l15.648-15.649c0.393-0.392 0.393-1.030 0-1.423z" fill="#{$color}"></path></svg>');
-}
-
-@function icon-x($size: 32, $color: #000000){
-    @return svg-encode('<svg version="1.2" baseProfile="tiny" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="#{$size}px" height="#{$size}px" viewBox="0 0 64 64" xml:space="preserve" fill="#{$color}"><g><rect x="-2.352" y="29.385" transform="matrix(0.7071 0.7071 -0.7071 0.7071 32.3545 -14.3899)" width="71.799" height="4.95"/></g><g><rect x="-2.374" y="29.376" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -12.7023 33.0352)" width="71.799" height="4.95"/></g></svg>');
-}
-
-@function icon-circle($width: 2, $height: 2, $radius: 1, $color: #000000){
-    @return svg-encode('<svg version="1.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="#{$width}px" height="#{$height}px" viewBox="0 0 #{$width} #{$height}" enable-background="new 0 0 #{$width} #{$height}" xml:space="preserve"><circle cx="#{$width / 2}" cy="#{$height / 2}" r="#{$radius}" fill="#{$color}"/></svg>');
-}
-
-@function icon-x-block($size: 32, $color: #000000){
-    @return svg-encode('<svg width="#{$size}px" height="#{$size}px"  fill="#{$color}" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"	 viewBox="0 0 10.5 10.5" style="enable-background:new 0 0 10.5 10.5;" xml:space="preserve"><path d="M8.1,1.3C8.4,1,8.9,1,9.2,1.3c0,0,0,0,0,0c0.3,0.3,0.3,0.8,0,1.1L2.4,9.3c-0.3,0.3-0.8,0.3-1.1,0S1,8.4,1.3,8.1L8.1,1.3z"/><path d="M9.2,8.1c0.3,0.3,0.4,0.8,0.1,1.1c0,0,0,0,0,0l0,0c-0.3,0.3-0.8,0.3-1.1,0L1.3,2.4C1,2.1,0.9,1.6,1.3,1.3c0,0,0,0,0,0l0,0	C1.6,1,2.1,1,2.4,1.3L9.2,8.1z"/></svg>');
+    @return get($uniform_configs, 'sizes', $key);
 }

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

@@ -1,4 +1,5 @@
-@import 'uniform/variables';
+@import 'uniform/config';
+@import 'uniform/functions/map';
 
 @mixin text-overflow($inherit:false){
     @if $inherit {
@@ -36,7 +37,7 @@
 }
 
 @mixin breakpoint($breakpoint){
-    @media only screen and (map-get($breakpoints, $breakpoint)){
+    @media only screen and (get($uniform_configs, 'breakpoints', $breakpoint)){
         @content;
     }
 }
@@ -49,19 +50,19 @@
     .#{$selector}{
         @content
     }
-    @if $include_child_utilities {
+    @if get($uniform_configs, 'breakpoints', 'include_containers') {
         @include child-rule($selector) {
             @content
         }
     }
     
-    @each $breakpoint, $breakpoint_query in $breakpoints {
+    @each $breakpoint, $breakpoint_query in map-get($uniform_configs, 'breakpoints') {
         @include media($breakpoint_query){
             .#{$breakpoint}\:#{$selector}{
                 @content
             }
         }
-        @if $include_breakpoint_container {
+        @if get($uniform_configs, 'breakpoints', 'include_containers') {
             .#{$breakpoint}-container{
                 .#{$breakpoint}\:#{$selector}{
                     @content
@@ -87,7 +88,7 @@
         $selector: str-slice($selector, 2, -1);
     }
     
-    @each $name, $value in $color_spectrum {
+    @each $name, $value in map-get($uniform_configs, 'colors') {
         .#{$selector}-#{$name}{
             @content($value)
         }
@@ -96,10 +97,8 @@
             @content($value)
         }
         
-        @if $include_child_utilities {
-            @include child-rule($selector) {
-                @content($value)
-            }
+        @include combinator-rule("#{$selector}-#{$name}", false){
+            @content($value)
         }
     }
 }
@@ -119,7 +118,7 @@
         $key: str-slice($key, 1, str-index($key, '-') - 1);
     }
     
-    @each $size, $value in map-get($sizes, $key) {
+    @each $size, $value in get($uniform_configs, 'sizes', $key) {
         $class: "#{$selector}-#{$size}";
         @if $size == '' {
             $class: $selector;
@@ -144,26 +143,35 @@
        } 
     }
 
-    @each $pseudo-selector, $pseudo-class in (
-        active: active,
-        focus: focus,
-        hover: hover,
-        checked: checked,
-        focus-within: focus-within,
-        first: first-child,
-        last: last-child
-    ) {
-        @if index($include_pseudo_utilities, $pseudo-class) {
+    @each $pseudo-selector, $pseudo-class in map-get($uniform_configs, 'pseudo_classes') {
+        @if $pseudo-selector == "group-hover" {
+            .group:hover{
+                .group-hover\:#{$selector} {
+                    @content
+                }
+            }
+        } @else {
             .#{$pseudo-selector}\:#{$selector}:#{$pseudo-class} {
                 @content
             }
         }
+        
     }
-    @if index($include_pseudo_utilities, group-hover) {
-        .group:hover{
-            .group-hover\:#{$selector} {
-                @content
-            }
+}
+
+@mixin combinator-rule($selector, $declare_self: true){
+    @if str-index($selector, '.') == 1 {
+        $selector: str-slice($selector, 2, -1);
+    }
+    @if $declare_self {
+       .#{$selector} {
+           @content
+       } 
+    }
+
+    @each $cominator_selector, $combinator in map-get($uniform_configs, 'combinators') {
+        .#{$selector}-#{$cominator_selector} #{$combinator} * {
+            @content
         }
     }
 }