uniform-ui 3.0.0.beta2 → 3.0.0.beta10

data/lib/assets/javascripts/uniform/sticker.js

@@ -0,0 +1,26 @@
+export default class Sticker {
+    constructor (el) {
+        if (!window.uniformObserver) {
+            window.uniformObserver = new IntersectionObserver(
+                entries => entries.forEach(entry => {
+                    if (entry.intersectionRatio == 0) {
+                        this.stick(el)
+                    } else {
+                        this.unstick(el)
+                    }
+                }),
+                {threshold: [0.994, 0.00001]},
+            )
+        }
+        
+        window.uniformObserver.observe(el)
+    }
+    
+    stick (el) {
+        
+    }
+    
+    unstick (el) {
+        
+    }
+}

data/lib/assets/javascripts/uniform/tooltip.js

@@ -13,6 +13,7 @@ import Popover from './popover';
     disable
     hide
     show
+    timeout
 */
 export default class Tooltip extends Component {
     initialize (options) {
@@ -27,6 +28,7 @@ export default class Tooltip extends Component {
         this.enabled = true;
         this.content = options.content;
         this.el.tooltip = this;
+        this.timeout = options.timeout
 
         this.listenTo(this.el, 'mouseenter', this.show);
         this.listenTo(this.el, 'mouseleave', this.hide);
@@ -41,27 +43,38 @@ export default class Tooltip extends Component {
         clearTimeout(this.hide_timeout);
         this.el.classList.add('-active');
         if (this.popup) {
-          this.popup.show()
+            this.popup.show()
         } else {
-          this.popup = new Popover({
-              content: this.content,
-              class: 'uniformPointer -bottom bg-gray-70 bg-opacity-85 text-white rounded pad-1/2x text-sm max-width-300-px',
-              anchor: this.el,
-              align: this.options.align == "top" ? `center top` : 'center 100%',
-              offset: {
-                top: -7
-              },
-              container: this.options.container
-          }).render();
+            const pointerDirection = {
+                top: 'bottom',
+                bottom: 'top',
+                left: 'right',
+                right: 'left'
+            }[this.options.align]
+            const align = {
+                left: 'left center',
+                right: 'right center',
+                top: 'center top',
+                bottom: 'center bottom'
+            }[this.options.align]
+            const offset = { [this.options.align]: -7}
+            this.popup = new Popover({
+                content: this.content,
+                class: `uniformPointer -${pointerDirection} bg-gray-70 bg-opacity-85 text-white rounded pad-1/2x text-sm max-width-300-px `,
+                anchor: this.el,
+                align:  align || this.options.align || 'center 100%',
+                offset: offset,
+                container: this.options.container
+            }).render();
         }
     }
     
     hide () {
-      this.hide_timeout = setTimeout(() => {
-        this.popup.remove();
-        this.el.classList.remove('-active');
-        delete this.popup;
-      }, 300)
+        this.hide_timeout = setTimeout(() => {
+            this.popup.remove();
+            this.el.classList.remove('-active');
+            delete this.popup;
+        }, this.timeout)
     }
     
     disable () {

data/lib/assets/javascripts/uniform.js

@@ -1,8 +1,23 @@
-export Dropdown from './uniform/dropdown';
-export Modal from './uniform/modal';
-export Select from './uniform/select';
-export FloatingLabelInput from './uniform/floating-label-input';
-export Resizer from './uniform/resizer';
-export Tooltip from './uniform/tooltip';
-export Popover from './uniform/popover';
-export {Checkbox, Radio, Toggle} from './uniform/checkbox';
+import Dropdown from './uniform/dropdown';
+import Modal from './uniform/modal';
+import Select from './uniform/select';
+import FloatingLabelInput from './uniform/floating-label-input';
+import Resizer from './uniform/resizer';
+import Tooltip from './uniform/tooltip';
+import Popover from './uniform/popover';
+import Dropzone from './uniform/dropzone';
+import {Checkbox, Radio, Toggle} from './uniform/checkbox';
+
+export {
+    Dropdown,
+    Modal,
+    Select,
+    FloatingLabelInput,
+    Resizer,
+    Tooltip,
+    Popover,
+    Checkbox,
+    Radio,
+    Toggle,
+    Dropzone
+}

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

@@ -1,11 +1,7 @@
+@import 'uniform/config';
 @import 'uniform/functions';
-@import 'uniform/variables';
 @import 'uniform/mixins';
 *{
-    --bg-opacity: 1.0;
-    --shadow-opacity: 0.1;
-    --border-opacity: 1.0;
-    --border-color: #{red(color('gray'))}, #{green(color('gray'))}, #{blue(color('gray'))};
     border-width: 0;
     border-style: solid;
     border-color: rgba(var(--border-color), var(--border-opacity));
@@ -13,10 +9,29 @@
 
 .uniformInput,
 .uniformInputGroup,
-.uniformSelect{
+.uniformSelect {
     --focus-color: #{red(color('blue'))}, #{green(color('blue'))}, #{blue(color('blue'))};
 }
 
-body{
-    --breakpoints: #{mapToString($breakpoints)};
-}
+body {
+    --breakpoints: #{mapToString(map-get($uniform_configs, 'breakpoints'))};
+    --bg-opacity: 1.0;
+    --shadow-opacity: 0.1;
+    --border-opacity: 1.0;
+    --border-color: #{red(color('gray'))}, #{green(color('gray'))}, #{blue(color('gray'))};
+}
+
+@include responsive-rule('base') { 
+    --breakpoints: #{mapToString(map-get($uniform_configs, 'breakpoints'))};
+    --bg-opacity: 1.0;
+    --shadow-opacity: 0.1;
+    --border-opacity: 1.0;
+    --border-color: #{red(color('gray'))}, #{green(color('gray'))}, #{blue(color('gray'))};
+}
+
+/*
+The following is used to pass configs in scss
+UNIFORM CONFIGS
+#{mapToJSON($uniform_configs)}
+UNIFORM CONFIGS END
+*/

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

@@ -44,7 +44,7 @@
 //----------------------------------------------------------------
 //             Color
 //----------------------------------------------------------------
-@each $name, $color in $color_spectrum {
+@each $name, $color in map-get($uniform_configs, 'colors') {
     .uniformButton.-#{$name},
     .uniformButtonGroup.-#{$name} > *{
         background-color: rgba($color, var(--bg-opacity));
@@ -108,10 +108,6 @@
             linear-gradient(hsla(0,0%,50%, .5), hsla(0,0%,50%, .5));
         background-blend-mode: saturation, luminosity;
     }
-    
-    &:visited{
-        color: currentColor;
-    }
 }
 
 .uniformButton{
@@ -155,6 +151,9 @@
         --pad-h: 3em;
         --border-radius: 0.5em;
     }
+    &.-input {
+        --pad-v: 0.75em;
+    }
 }
 
 

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

@@ -1,3 +1,5 @@
+@import 'uniform/functions/icons';
+
 .uniformRadio,
 .uniformCheckbox{
     display:inline-block;

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/input-group.scss

@@ -17,6 +17,11 @@
             padding-right: 0.5em;
         }
     }
+    
+    *:focus {
+        box-shadow: none;
+    }
+    
     input,
     .input{
         flex: 1 1 auto;
@@ -27,4 +32,8 @@
         padding: 0.5em;
         box-shadow: none;
     }
+    
+    .uniformInput {
+        border: none !important;
+    }
 }

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

@@ -40,17 +40,14 @@
 
 @keyframes uniformLoader {
     0% {
-        -webkit-transform: scale(0);
         transform: scale(0);
         opacity: 0;
     }
     50%{
-        -webkit-transform: scale(1);
         transform: scale(1);
         opacity: 1;
     }
     100%{
-        -webkit-transform: scale(0);
         transform: scale(0);
         opacity: 0;
     }

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

@@ -12,46 +12,29 @@
     position: absolute;
     top: 0;
     width: 100%;
-    text-align:center;
     padding: 2em;
     z-index: 9999;
+    display: flex;
+    justify-content: center;
+    & > * {
+        z-index: 2;
+    }
 }
 
-.uniformModal-container{
-    display:inline-block;
-    text-align:left;
-    position:relative;
-    margin: auto;
-    background: white;
-    border-radius: 0.25em;
-    max-width: 90%;
-    z-index: 2;
-    &.-fill{
-        width: 90%;
-    }
-    &.-reset{
-        margin: -2em;
-        max-width: none;
-        border-radius: 0;
-        &.-fill{
-            width: 100%;
-        }
-    }
+.uniformModal-close-container {
+    position: relative;
+    width: 0;
 }
 
 .uniformModal-close{
     z-index: 2;
-    position: absolute;
-    padding: 0.3em;
-    top: 0;
-    right: 0;
-    font-size:1.5em;
     color: white;
-    opacity: 0.5;
-    line-height:1;
     cursor: pointer;
-    height: 2rem;
-    width: 2rem;
+    position: absolute;
+    bottom: 100%;
+    height: 2em;
+    width: 2em;
+    opacity: 0.5;
     &:hover{
         opacity: 1;
     }
@@ -59,19 +42,21 @@
     &:before{
         content: "";
         width: 1px;
-        height: 1.5rem;
-        transform-origin: 50% 50%;
-        transform: rotate(-45deg);
-        background: white;
+        height: 1.5em;
+        background: currentColor;
         position:absolute;
         left: 50%;
-        top: 15%;
+        top: 50%;
+        transform-origin: 50% 50%;
+        transform: translateY(-50%) rotate(-45deg);
     }
     &:before{
-        transform: rotate(45deg);
+        transform: translateY(-50%) rotate(45deg);
     }
 }
 
+// TODO replace with backdrop-filter: blur(4px);
+// when supported by Firefox https://caniuse.com/css-backdrop-filter
 .uniformModal-blur{
     top: 0;
     left: 0;

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

@@ -15,6 +15,12 @@
         box-shadow: 0 0 0 2px rgba(var(--focus-color), 1);
     }
 }
+
+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"><polyline points="6 9 12 15 18 9"></polyline></svg>') no-repeat center right;
+}
+
 @include color-rule('.focus') using ($color) {
     --focus-color: #{red($color)}, #{green($color)}, #{blue($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

@@ -16,9 +16,6 @@ a{
     &:hover{
         color: color('blue-60');
     }
-    &:visited{
-        color: #6738e4;
-    }
 }
 h1,
 h2,
@@ -34,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;
@@ -101,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,