uniform-ui 2.4.1 → 3.0.0.beta2

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

@@ -0,0 +1,104 @@
+.uniformRadio,
+.uniformCheckbox{
+    display:inline-block;
+    width: 1em;
+    height: 1em;
+    border: 0.0714em solid color('gray-50');
+    vertical-align:middle;
+    margin-top: -0.15em;
+    border-radius: 0.2856em;
+    position:relative;
+    transition: border-color 0.05s ease-in;
+    box-shadow: inset 0.0714em 0.0714em 0 0 white, inset 0.1428em 0.1428em 0.1428em rgba(black, 0.2);
+    color: color('blue');
+    outline: 0;
+    &::before{
+        position:absolute;
+        left:50%;
+        top:50%;
+        transform: translate(-50%, -50%);
+        border-radius: 0.25em;
+        content:"";
+        width: 0em;
+        height: 0em;
+        transition: width 0.05s ease-in, height 0.05s ease-in;
+        background: currentColor;
+    }
+    &.checked{
+        border-color: currentColor;
+        &::before{
+            width: 1em;
+            height: 1em;
+        }
+    }
+    &.-toggle {
+        width: 2em;
+        height: 1em;
+        border-radius: 50%;
+        background: color('gray-10');
+        box-shadow: inset 1px 1px 2px rgba(black, 0.2);
+    }
+    &:focus {
+        box-shadow: inset 0.0714em 0.0714em 0.0714em rgba(black, 0.2), 0 0 0 0.1428em rgba(color('blue'), 0.7);
+    }
+}
+.uniformCheckbox{
+    &::before{
+        background-image: icon-check(#FFFFFF);
+        background-position: center center;
+        background-repeat: no-repeat;
+        background-size: 80%;
+    }
+}
+
+.uniformRadio{
+    border-radius: 50%;
+    &::before{
+        border-radius: 50%;
+    }
+    
+    &.checked{
+        &::before{
+            width: 0.5712em;
+            height: 0.5712em;
+        }
+    }
+}
+
+.uniformToggle {
+    width: 1.4284em;
+    height: 0.8572em;
+    vertical-align:middle;
+    margin-top: -0.1428em;
+    background: color('gray-20');
+    border-radius: 1em;
+    box-shadow: inset 0.0714em 0.0714em 0.0714em rgba(black, 0.2);
+    display: inline-block;
+    position: relative;
+    transition: background 50ms ease-in-out;
+    color: color('blue');
+    outline: 0;
+    &::before{
+        content: "";
+        transition: right 50ms ease-in-out;
+        width: 0.5716em; // 12/14
+        height: 0.5716em;
+        margin: 0.1428em;
+        background: white;
+        border-radius: 50%;
+        position: absolute;
+        right: calc(100% - 0.8398em);
+        top: 0;
+        box-shadow: 0.0714em 0.0714em 0.0714em rgba(black, 0.2);
+    }
+    &.checked{
+        justify-content: end;
+        background: currentColor;
+        &::before{
+            right: 0;
+        }
+    }
+    &:focus {
+        box-shadow: inset 0.0714em 0.0714em 0.0714em rgba(black, 0.2), 0 0 0 0.1428em rgba(color('blue'), 0.7);
+    }
+}

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

@@ -7,12 +7,13 @@
     padding-right: 1em;
 }
 
-@include size-rule('lg'){
+@include breakpoint('lg'){
     .container{
         max-width: 1080px;
     }
 }
-@include size-rule('xl'){
+
+@include breakpoint('xl'){
     .container{
         max-width: 1440px;
     }

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

@@ -25,15 +25,18 @@
     &.square{
         border-radius: 0;
     }
-    &.has-pointer{
-        @include size-rule('md'){
+}
+
+@include breakpoint('md'){
+    .uniformDropdown-dropdown{
+        &.has-pointer{
             margin-top:1em;
         }
     }
 }
 
-.uniformDropdown-pointer{
-    @include size-rule('md'){
+@include breakpoint('md'){
+    .uniformDropdown-pointer{
         position:absolute;
         bottom: 100%;
         left: 50%;
@@ -55,7 +58,7 @@
     }
 }
 
-@include size-rule('sm'){
+@include breakpoint('sm'){
     .uniformOverlay{
         position: fixed;
         top:0;

data/lib/assets/stylesheets/uniform/components/floating-label-input.scss

@@ -0,0 +1,29 @@
+.uniformFloatingLabelInput{
+    position:relative;
+    
+    label {
+        --font-size: 1em;
+        font-size: var(--font-size);
+        display: block;
+        position: absolute;
+        top: 50%;
+        left: 0;
+        transform: translateY(-50%);
+        transition: font-size 100ms, top 100ms, transform 100ms;
+    }
+    &.present {
+        label {
+            opacity: 0.8;
+            font-size: calc(var(--font-size) * 0.7);
+            top: 0;
+            transform: none;
+        }
+    }
+    
+    &:focus-within{
+        color: color('green-60');
+        label {
+            opacity: 1;
+        }
+    }
+}

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

@@ -0,0 +1,30 @@
+.uniformInputGroup{
+    background: white;
+    border-width: 1px;
+    display: flex;
+    align-items: center;
+    transition: box-shadow 100ms ease-in;
+    
+    &:focus-within{
+        border-color: rgba(var(--focus-color), 1);
+        box-shadow: 0 0 0 2px rgba(var(--focus-color), 1);
+    }
+    
+    & > * {
+        flex: 0 1 auto;
+        padding-left: 0.5em;
+        &:last-child{
+            padding-right: 0.5em;
+        }
+    }
+    input,
+    .input{
+        flex: 1 1 auto;
+        border: none !important;
+        background:none;
+        appearance: none;
+        outline: none;
+        padding: 0.5em;
+        box-shadow: none;
+    }
+}

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

@@ -1,28 +1,33 @@
+@include color-rule('.uniformLabel.') using ($color) {
+    color: $color;
+    background-color: rgba($color, 0.2);
+}
+
 .uniformLabel{
+    --pad-v: 0.1428em;
+    --pad-h: 0.357em;
     display:inline-block;
     vertical-align:baseline;
-    padding: 0.0714em 0.357em 0.0714em;
-    border: 0.1em solid color('gray-darker');
-    color: color('gray-darker');
+    padding: var(--pad-v) var(--pad-h);
     border-radius: 0.3em;
     line-height: 1.2;
-    &.-fill{
-        border: none;
-        background: rgba(color('gray-darker'), 0.15);
-        color: color('gray-darker');
-        padding: 0.1714em 0.457em 0.1714em;
+    background: rgba(color('gray-80'), 0.15);
+    &.-outline{
+        border: 0.1em solid currentColor;
+        background: transparent;
     }
     &.-round{
         border-radius: 1em;
+        padding-left: calc(var(--pad-h) * 1.5);
+        padding-right: calc(var(--pad-h) * 1.5);
     }
-    &.pad-more{
-        padding: 0.0714em 0.5em;
+    &.-lg{
+        --pad-v: 0.215em;
+        --pad-h: 0.54em;
+    }
+    &.-xl{
+        --pad-v: 0.43em;
+        --pad-h: 1.071em;
     }
 }
 
-@include colors('.uniformLabel.', ('border-color' 'color'));
-@each $key, $value in $colors {
-    @include size-rules(".uniformLabel.-fill.-#{$key}"){
-        background-color: rgba($value, 0.15);
-    }
-}

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

@@ -2,62 +2,39 @@
     line-height:1em;
     display:inline-block;
     white-space:nowrap;
-    letter-spacing:-.05em;
-    span{
-        width: 1em;
+    &:before,
+    &:after{
+        margin: 0 0.2em;
+        width: 0.8em;
+        height: 0.8em;
+        border-radius: 50%;
+        background-color: currentColor;
         display: inline-block;
         vertical-align: middle;
-        text-align: center;
-        &:before{
-            animation: uniformLoader 1.4s infinite ease both;
-            animation-delay: 0.3s;
-            line-height: 0;
-            vertical-align: middle;
-            display: inline-block;
-            width: 80%;
-            content: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 104 104'><circle cx='52' cy='52' r='52' fill='white'/><circle cx='50' cy='50' r='50' fill='black'/></svg>")
-        }
-    }
-    span:first-of-type:before{
-        animation-delay: 0s;
-    }
-    span:last-of-type:before{
-        animation-delay: 0.6s;
+        line-height: 0;
+        animation: uniformLoader 1.4s infinite cubic-bezier(0.65,0,0.35,1);
+        content: "";
     }
-    .uniformLoader-container{
-        white-space:nowrap;
-    }
-    &.-light{
-        span{
-            &:before{
-                content: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 104 104'><circle cx='52' cy='52' r='52' fill='black'/><circle cx='54' cy='54' r='50' fill='white'/></svg>")
-            }
-        }
+    &:after{
+        animation-delay: 0.7s;
     }
+    
     &.-cover{
-        display:block;
-        background:rgba(white, 0.5);
         position:absolute;
-        top:0;
-        left:0;
-        width:100%;
-        height:100%;
-        z-index:999999999;
-        .uniformLoader-container{
-            position:absolute;
-            @include position-center;
-        }
-        &.-light{
-            background:rgba(black, .5);
-        }
-        &.transparent{
-            background: none;
-        }
-    }
-    &.-top{
-        .uniformLoader-container{
-            top: 20px;
+        top: 0;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        &:before,
+        &:after{
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            margin-top: -0.4em;
+            margin-left: -0.4em;
         }
+        &:before {margin-right: 1.2em;}
+        &:after { margin-left: 0.8em;}
     }
 }
 
@@ -67,10 +44,10 @@
         transform: scale(0);
         opacity: 0;
     }
-    35%{
+    50%{
         -webkit-transform: scale(1);
         transform: scale(1);
-        opacity: 0.8;
+        opacity: 1;
     }
     100%{
         -webkit-transform: scale(0);

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

@@ -1,24 +1,11 @@
-@mixin uniformNav-vertical(){
-    flex-direction: column;
-    align-items: stretch;
-    & > * {
-        padding: 0.5em 0.5em;
-    }
-    & > a{
-        border: none !important; // TODO remove !important
-        padding-bottom: 0.5em !important; // TODO remove !important
-        &:hover{
-            color: color('blue');
-            background: rgba(black, 0.05);
-        }
-        &.active{
-            color: white;
-            background: color('green');
-        }
-    }
-}
-
 .uniformNav{
+    --border-opacity: 1;
+    --text-opacity: 1;
+    --bg-opacity: 0;
+    
+    --hover-color: #{toRGB(color('blue'))};
+    --active-color: #{toRGB(color('green-60'))};
+    --color: #{toRGB(color('blue'))};
     display: flex;
     flex-wrap: wrap;
     align-items: stretch;
@@ -29,100 +16,76 @@
     }
     
     & > * {
+        --text-opacity: 1;
         flex: 0 0 auto;
         display: flex;
         align-items: center;
         padding: 0 1em;
-        border-style: solid none;
         border-color: transparent;
         border-top-width: 2px;
         border-bottom-width: 2px;
-        &.col-fill{
+        &.flex-fill{
             flex: 1 1 auto;
         }
     }
     & > a{
         text-decoration: none;
+        color: rgba(var(--color), var(--text-opacity));
         &:hover{
-            color: color('blue');
-            border-bottom-color: color('blue');
+            color: rgba(var(--hover-color), 1);
+            border-left-color: rgba(var(--hover-color), var(--border-opacity));
+            border-bottom-color: rgba(var(--hover-color), var(--border-opacity));
         }
         &.active{
-            color: color('green-dark');
-            border-bottom-color: color('green-dark');
+            color: rgba(var(--active-color), 1);
+            border-left-color: rgba(var(--active-color), 1);
+            border-bottom-color: rgba(var(--active-color), 1);
         }
     }
-    &.-pad{
+    
+    &.-pills{
         & > * {
-            padding-top: 0.25em;
-            padding-bottom: 0.25em;
+            border: none;
+            border-radius: 0.25em;
+            padding: 0.25em 0.5em;
         }
-    }
-    &.-pad-more{
-        & > * {
-            padding-top: 0.5em;
-            padding-bottom: 0.5em;
+        & > * + * {
+            margin-left: 0.25em;
         }
-    }
-    
-    &.-vertical{
-        @include uniformNav-vertical();
-    }
-}
-
-.uniformMainNav{
-    position: relative;
-    background: white;
-    box-shadow:inset 0 -1px 0 0 rgba(black, 0.10);
-    color: color('gray');
-    .uniformNav{
-        & > * {
-            padding-top: 0.25em;
-            padding-bottom: 0.25em;
-            color: color('gray-dark');
+        & > a {
+            &:hover,
+            &.active{
+                --bg-opacity: 0.15;
+                background-color: rgba(var(--hover-color), var(--bg-opacity));
+            }
             &.active{
-                color: color('gray-darkest');
+                background-color: rgba(var(--active-color), var(--bg-opacity));
             }
         }
     }
-    
-    &.bg-none{
-        background: none;
-    }
-    
-    &.border-bottom-none,
-    &.border-none{
-        box-shadow: none;
-    }
-    
+
     &.-vertical{
-        box-shadow: none;
-        .uniformNav{
-            @include uniformNav-vertical();
+        flex-direction: column;
+        align-items: stretch;
+        & > * {
+            padding: 0.5em;
+            border-top-width: 0;
+            border-bottom-width: 0;
+            border-left-width: 2px;
+            border-right-width: 2px;
         }
-    }
-    
-    &.-invert{
-        box-shadow:inset 0 -1px 0 0 rgba(white, 0.10);
-        background: none;
-        color: rgba(white, 0.7);
-        .uniformNav{
-            & > a {
-                color: rgba(white, 0.6);
-                &:hover{
-                    color: white;
-                    border-bottom-color: color('blue-bright');
-                }
-                &.active{
-                    color: white;
-                    background: rgba(black, 0.15);
-                    border-bottom-color: color('green-light');
-                }
+        &.-pills{
+            & > * + * {
+                margin-left: 0;
+                margin-top: 0.1em;
             }
         }
-        &.border-bottom-none,
-        &.border-none{
-            box-shadow: none;
-        }
     }
+}
+
+@include color-rule('.uniformNav.-active') using ($color) {
+    --active-color: #{toRGB($color)};
+}
+@include color-rule('.uniformNav.') using ($color) {
+    --color: #{toRGB($color)};
 }