uniform-ui 2.4.1 → 3.0.0.beta8

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,39 @@
+.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;
+        }
+    }
+    
+    *:focus {
+        box-shadow: none;
+    }
+    
+    input,
+    .input{
+        flex: 1 1 auto;
+        border: none !important;
+        background:none;
+        appearance: none;
+        outline: none;
+        padding: 0.5em;
+        box-shadow: none;
+    }
+    
+    .uniformInput {
+        border: none !important;
+    }
+}

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,78 +2,52 @@
     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;}
     }
 }
 
 @keyframes uniformLoader {
     0% {
-        -webkit-transform: scale(0);
         transform: scale(0);
         opacity: 0;
     }
-    35%{
-        -webkit-transform: scale(1);
+    50%{
         transform: scale(1);
-        opacity: 0.8;
+        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;