uniform-ui 1.0 → 2.2.1

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

@@ -0,0 +1,219 @@
+//----------------------------------------------------------------
+//             Buttons
+//----------------------------------------------------------------
+.uniformButtonGroup a,
+.uniformButton{
+    outline: none;
+    appearance: none;
+    cursor: pointer;
+    display: inline-block;
+    text-decoration: none;
+
+    padding: 0.5em 0.75em;
+    vertical-align: middle;
+    text-align: center;
+    line-height:1;
+    position:relative; // for adding loaders to buttons which have position:absolute
+    transition: all 0.2s;
+
+    color:color('gray');
+    background-color: white;
+    background-image: linear-gradient(white 33%, darken(white, 7));
+    border-radius: 0.25em;
+    border:1px solid lighten(color('gray'), 40);
+    
+    &.input-height{
+        line-height: 1.4;
+    }
+
+    &:visited{
+        color:color('gray');
+    }
+
+    &:hover,
+    &:focus,
+    &.hover{
+        box-shadow: inset 0 0 10px rgba(black, 0.1);
+    }
+    &:active,
+    &.active{
+    }
+    
+    &.-green,
+    &.-blue,
+    &.-red {
+        color: white;
+    }
+    &.-green { background: color('green');}
+    &.-blue  { background: color('blue');}
+    &.-red   { background: color('red');}
+    &.-green { background: color('green');}
+    &.-blue  { background: color('blue');}
+    &.-red   { background: color('red');}
+    
+    
+    //----------------------------------------------------------------
+    //             styles
+    //----------------------------------------------------------------
+    &.-clear{
+        background: none;
+        border-color: transparent;
+    }
+    &.-outline{
+        border-color: color('gray');
+        background:none !important;
+        text-shadow:none !important;
+        &.-dashed{
+            border-style:dashed;
+        }
+    }
+    &.-small{
+        padding: 0.3em 0.5em;
+        font-size: 0.8em;
+    }
+    &.-large{
+        padding: 1em 2em;
+        font-weight:bold;
+    }
+    &.-input {
+        padding-top: 0.65em;
+        padding-bottom: 0.65em;
+    }
+    
+    &.-warn:hover{
+        border-color:color('red');
+        background: color('red');
+        color: white;
+        &.clear{
+            color: color('red');
+            background: none;
+        }
+        &.-outline{
+            color: color('red');
+            border-color: lighten(color('gray'), 30);
+        }
+    }
+    
+    &.-block{
+        padding-left:0.5em !important;
+        padding-right:0.5em !important;
+        display:block;
+        width:100%;
+    }
+    
+    
+    //----------------------------------------------------------------
+    //             colors
+    //----------------------------------------------------------------
+    
+    &.-green{
+        background-color: darken(color('green'), 3);
+        background-image: linear-gradient(lighten(color('green'), 5), darken(color('green'), 3));
+        border-color: darken(color('green'), 3);
+        
+        &.-outline{
+            border-color: color('green-dark');
+            color:color('green-dark');
+        }
+    }
+    
+    &.-green,
+    &.-red,
+    &.-blue{
+        color:white;
+        text-shadow:0 1px 2px rgba(black, 0.1);
+    }
+    
+    &.-red{
+        background-color: darken(color('red'), 3);
+        background-image: linear-gradient(color('red'), darken(color('red'), 3));
+        border-color: darken(color('red'), 3);
+        &.-outline{
+            color:color('red-dark');
+            border-color:color('red-dark');
+        }
+    }
+    
+    &.-blue{
+        background-color: darken(color('blue'), 3);
+        background-image: linear-gradient(color('blue'), darken(color('blue'), 3));
+        border-color:darken(color('blue'), 3);
+        
+        &.-outline{
+            color:color('blue');
+            border-color: color('blue');
+        }
+    }
+    &.-white{
+        &.-outline{
+            color:white;
+            border-color:white;
+        }
+    }
+    
+    &.-gray{
+        color: lighten(color('gray'), 20);
+        &.-outline{
+            color: lighten(color('gray'), 20);
+            border-color: lighten(color('gray'), 30);
+        }
+    }
+    
+    &.-gray-dark{
+        color: white;
+        background-color: darken(color('gray-dark'), 3);
+        background-image: linear-gradient(color('gray-dark'), darken(color('gray-dark'), 3));
+        border-color: darken(color('gray-dark'), 3);
+        &.-outline{
+            color: lighten(color('gray'), 20);
+            border-color: lighten(color('gray'), 30);
+        }
+    }
+    
+    &:disabled,
+    &.disabled,
+    &:disabled:hover,
+    &.disabled:hover{
+        cursor: not-allowed;
+        color:lighten(color('gray'), 40);
+        background-image:none !important;
+        background-color: darken(color('background'), 10);
+        border-color: lighten(color('gray'), 40);
+        text-shadow: none;
+        &.disabled-dark{
+            background-color: color('gray-dark');
+            color: lighten(color('gray-dark'), 30);
+            border-color: darken(color('gray-dark'), 5);
+            opacity: 0.75;
+        }
+    }
+}
+span.uniformButton{
+    cursor: auto;
+}
+a.uniformButton{
+    user-select: none;
+}
+
+.uniformButtonGroup {
+    font-size: 0;
+    a{
+        font-size: 1rem;
+        position:relative;
+        z-index: 1;
+        margin-right: -1px;
+        border-radius: 0;
+        &:last-of-type{
+            border-radius: 0 0.25em 0.25em 0;
+        }
+        &:first-of-type{
+            border-radius: 0.25em 0 0 0.25em;
+        }
+        &.active{
+            background-color: darken(color('green'), 3);
+            background-image: linear-gradient(lighten(color('green'), 5), darken(color('green'), 3));
+            border-color: darken(color('green'), 3);
+            color: white;
+        }
+    }
+}

data/{vendor → lib}/assets/stylesheets/uniform/components/card.scss

@@ -1,55 +1,63 @@
-$padding: 0.5em;
 .uniformCard{
     background: white;
-    border: 1px solid $gray-light;
+    border-width: 1px;
+    border-style: solid;
+    border-color: color('gray-light');
     border-radius: 0.25em;
     margin-bottom: 1em;
-    &.width-auto{
-        display:inline-block;
+    
+    &.-nest{
+        margin-left: -0.5em;
+        margin-right: -0.5em;
     }
-    &.clip{
+    &.-clip{
         overflow:hidden;
     }
-    .un-pad{
-        margin-left: -0.5em;
-        margin-right: -0.5em;
+    
+    &.-tile{
+        border-radius: 0;
+        margin: 0;
+        margin-bottom: -1px;
+        margin-right: -1px;
     }
+    
     .uniformCard-header,
-    .uniformCard-footer{
-        padding: $padding;
+    .uniformCard-footer,
+    .uniformCard-body{
+        padding: 1em;
+        clear: both;
     }
     .uniformCard-header{
-        border-bottom: 1px solid $gray-light;
-        .fortycon.arrow_down_large{
-            transition: all 0.2s;
-        }
+        border-bottom: 1px solid color('gray-light');
     }
     .uniformCard-footer{
-        border-top: 1px solid $gray-light;
-        clear: both;
-    }
-    .uniformCard-body{
-        padding: $padding;
+        border-top: 1px solid color('gray-light');
     }
+    
     .uniformCard-collapse{
-        max-height: 0;
-        overflow: hidden;
-        transition: max-height 0.2s;
+        display:none;
+    }
+    
+    .uniformCard-icon{
+        transition: transform 0.2s;
     }
+    
     &.expanded{
         .uniformCard-header {
-            .fortycon.arrow_down_large{
+            .uniformCard-icon{
                 transform: rotate(180deg);
             }
         }
         .uniformCard-collapse{
-            max-height: 9999px;
+            display:block;
         }
     }
+    
     &.uniformCard-accordion{
         margin: 0;
         margin-bottom:-1px;
         border-radius: 0;
+        transition: margin 0.5s;
         &:first-of-type{
             border-top-left-radius: 0.25em;
             border-top-right-radius: 0.25em;
@@ -62,7 +70,7 @@ $padding: 0.5em;
             cursor: pointer;
             border-bottom-style: none;
             &:hover{
-                background: lighten($blue, 50);
+                background: lighten(color('blue'), 50);
             }
         }
         &.expanded{

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

@@ -0,0 +1,19 @@
+.container{
+    max-width: 100%;
+    width: 100%;
+    margin-left: auto;
+    margin-right: auto;
+    padding-left: 1em;
+    padding-right: 1em;
+}
+
+@include size-rule('lg'){
+    .container{
+        max-width: 1080px;
+    }
+}
+@include size-rule('xl'){
+    .container{
+        max-width: 1440px;
+    }
+}

data/{vendor → lib}/assets/stylesheets/uniform/components/dropdown.scss

@@ -6,6 +6,7 @@
     z-index: 9999;
     background: white;
     border-top: white;
+    border-radius: 0.25em;
     button{
         appearance: none;
         outline: none;
@@ -15,14 +16,17 @@
         padding: 0.5em;
         display: block;
         &:hover{
-            background: lighten($blue, 45);
+            background: lighten(color('blue'), 45);
         }
     }
     &.absolute{
         box-shadow: 0 0 3px 2px rgba(black, 0.2);
     }
+    &.square{
+        border-radius: 0;
+    }
     .uniformDropdown-pointer{
-        @include media($md){
+        @include size-rule('md'){
             position:absolute;
             bottom: 100%;
             left: 50%;
@@ -44,13 +48,13 @@
         }
     }
     &.has-pointer{
-        @include media($md){
+        @include size-rule('md'){
             margin-top:1em;
         }
     }
 }
 
-@include media($sm){
+@include size-rule('sm'){
     .uniformOverlay{
         position: fixed;
         top:0;

data/lib/assets/stylesheets/uniform/components/form/checkbox-collection.scss

@@ -0,0 +1,103 @@
+@include size-rules('.uniformCheckboxCollection'){
+    label{
+        display:block;
+        margin-right: 1em;
+        font-weight: normal !important;
+        line-height: 1;
+        margin: 0;
+        margin-bottom: 0.5em;
+        input{
+            margin-right: 0.25em;
+        }
+    }
+    &.-inline{
+        display: flex;
+        align-items: center;
+        label{
+            margin: 0;
+            margin-right: 0.3em;
+            padding: 0.5em 0.2em;
+            line-height: 1.3;
+            flex: 1 1 auto;
+            text-align: center;
+            border-radius: 0.25em;
+            border: 1px solid color('gray-light');
+            &.active{
+                background: color('gray-light');
+                box-shadow: inset 0 -1px 0 0 color('blue');
+            }
+            &:last-of-type{
+                margin-right: 0;
+            }
+        }
+    }
+    &.-buttons{
+        label{
+            padding: 0.5em;
+            line-height: 1.3;
+            border-radius: 0.25em;
+            border: 1px solid color('gray-light');
+            cursor: pointer;
+            &.active{
+                background: color('gray-light');
+            }
+        }
+    }
+    &.-invert{
+        &.inline,
+        &.buttons{
+            label{
+                border-color: lighten(color('gray'), 20);
+                &.active{
+                    border-color: color('gray-dark');
+                    background: color('gray-dark');
+                }
+            }
+        }
+    }
+    &.hide-check{
+        label{
+            cursor: pointer;
+        }
+        input{
+            display:none;
+        }
+    }
+    &.custom-check{
+        input{
+            display:none;
+        }
+        label{
+            &::before{
+                content: "";
+                display:inline-block;
+                width: 0.7em;
+                height: 0.7em;
+                border: 1px solid white;
+                border-radius: 2px;
+                vertical-align: -1px;
+                line-height: 0.7em;
+            }
+            &.active{
+                &::before{
+                    border-color: color('green');
+                    content: '\2714';
+                    color: color('green');
+                }
+            }
+        }
+        &.invert{
+            label{
+                &::before{
+                    border-color: darken(color('gray-dark'), 5);
+                }
+                &.active{
+                    &::before{
+                        border-color: black;
+                        color: color('green-light');
+                    }
+                }
+            }
+        }
+    }
+}

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

@@ -0,0 +1,58 @@
+.uniformCheckbox,
+.uniformRadio{
+    display:none;
+}
+.uniformRadio-indicator,
+.uniformCheckbox-indicator{
+    display:inline-block;
+    width: 1em;
+    height: 1em;
+    border: 0.1em solid rgba(black, 0.35);
+    vertical-align:middle;
+    margin-top: -0.15em;
+    border-radius: 0.25em;
+    position:relative;
+    transition: border-color 0.05s ease-in;
+    &::before{
+        @include position-center;
+        border-radius: 0.25em;
+        content:"";
+        width: 0em;
+        height: 0em;
+        transition: width 0.05s ease-in, height 0.05s ease-in;
+        background: color('green');
+    }
+    &.checked{
+        border-color: color('green');
+        &::before{
+            width: 1em;
+            height: 1em;
+        }
+    }
+}
+.uniformCheckbox-indicator{
+    &::before{
+        background-image: url("data:image/svg+xml; utf8,#{icon-check(#FFFFFF)}");
+        background-position: center center;
+        background-repeat: no-repeat;
+        background-size: 80%;
+    } 
+}
+.uniformRadio-indicator{
+    border-radius: 50%;
+    box-shadow: inset 0 0 0 0.1em white;
+    &::before{
+        border-radius: 50%;
+    }
+    &::after{
+        border-radius: 50%;
+        font-size:0;
+        content: "";
+    box-shadow: inset 0 0 0 1px white;
+        position:absolute;
+        left: 0;
+        top: 0;
+        width: 100%;
+        height: 100%;
+    }
+}

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

@@ -0,0 +1,64 @@
+.uniformFloatingLabel{
+    display: flex;
+    align-items: center;
+    border: 1px solid lighten(color('gray'), 40);
+    position:relative;
+    background:white;
+    &>*{
+        flex: 0 1 auto;
+    }
+    label{
+        z-index: 1;
+        padding: 0 1em;
+        font-weight:normal !important;
+        cursor: text;
+    }
+    & > input,
+    & > textarea,
+    & > select,
+    & > .uniformInputGroup{
+        @include uniformInput;
+        position:relative;
+        display:block;
+        width: 100%;
+        border:none !important;
+        background:none;
+    }
+    & > select {
+        z-index: 2;
+    }
+    & > .uniformInputGroup{
+        display: flex;
+    }
+    
+    &.enabled{
+        label{
+            transition: font-size 0.1s, line-height 0.1s, opacity 0.1s;
+        }
+    }
+    
+    &.inactive{
+        input,
+        textarea,
+        select{
+            &::placeholder{
+                color: transparent;
+            }
+        }
+    }
+    &.float{
+        label{
+            font-size: 80%;
+            opacity: 0.8;
+        }
+    }
+    &.active{
+        label{
+            color: color('green-dark');
+            opacity: 1;
+        }
+    }
+    input.pad-2x{
+        padding: 1em;
+    }
+}

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

@@ -0,0 +1,56 @@
+.uniformInputGroup{
+    background: white;
+    border: 1px solid lighten(color('gray'), 40);
+    display: flex;
+    align-items: center;
+    transition: box-shadow 0.1s ease-in;
+    &>*{
+        flex: 0 1 auto;
+        line-height: 1;
+    }
+    input{
+        border: none !important;
+        background:none;
+        appearance: none;
+        outline: none;
+        display:block;
+        outline: none;
+        width: 100%;
+        font-family: $system-font;
+        padding: 0.5em;
+        line-height: 1.3;
+    }
+    .input{
+        padding: 0;
+        flex: 1 1 auto;
+    }
+    &>*:not(input){
+        padding: 0 0.5em;
+        &.pad-quarter{
+            padding: 0 0.25em;
+        }
+    }
+    &.focus{
+        box-shadow: inset 0 -2px 0 color('green');
+        input{
+            box-shadow: none !important;
+        }
+    }
+    &.invert{
+        border-color: color('gray');
+        border-radius: 0.25em;
+        overflow:hidden;
+    }
+    .label{
+        color: lighten(color('gray'), 20);
+    }
+    @include size-rule('sm'){
+        input{
+            padding-top: 0.5em;
+            padding-bottom: 0.5em;
+        }
+    }
+    &.border-none{
+        border: none;
+    }
+}