uniform-ui 0.6 → 1.0

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

@@ -0,0 +1,69 @@
+.uniformDropdown{
+    cursor: pointer;
+}
+.uniformDropdown-dropdown{
+    position: absolute;
+    z-index: 9999;
+    background: white;
+    border-top: white;
+    button{
+        appearance: none;
+        outline: none;
+        border: none;
+        background: none;
+        width: 100%;
+        padding: 0.5em;
+        display: block;
+        &:hover{
+            background: lighten($blue, 45);
+        }
+    }
+    &.absolute{
+        box-shadow: 0 0 3px 2px rgba(black, 0.2);
+    }
+    .uniformDropdown-pointer{
+        @include media($md){
+            position:absolute;
+            bottom: 100%;
+            left: 50%;
+            margin-left: -1em;
+            width: 2em;
+            height: 2em;
+            overflow: hidden;
+            &:after{
+                content: "";
+                position: absolute;
+                width: 100%;
+                height: 100%;
+                background: white;
+                transform: rotate(-45deg);
+                top: 85%;
+                left: 0;
+                box-shadow: 0 1px 3px 2px rgba(black, 0.2);
+            }
+        }
+    }
+    &.has-pointer{
+        @include media($md){
+            margin-top:1em;
+        }
+    }
+}
+
+@include media($sm){
+    .uniformOverlay{
+        position: fixed;
+        top:0;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        background: white;
+        z-index: 9998;
+    }
+    .uniformDropdown-dropdown{
+        left: 0 !important;
+        top: 0 !important;
+        box-shadow: none !important;
+        width: 100%;
+    }
+}

data/vendor/assets/stylesheets/uniform/components/form.scss

@@ -1,107 +1,290 @@
-@import "inputs";
-.uniform-form{
-    .uniform-form-section{
-        background:white;
-        border:1px solid darken($background, 10);
+div.uniformInputGroup{
+    background: white;
+    border: 1px solid lighten($gray, 40);
+    display: flex;
+    align-items: center;
+    transition: box-shadow 0.2s ease-in;
+    &>*{
+        flex: 0 1 auto;
+    }
+    input{
+        border: none !important;
+        background:none;
+        appearance: none;
+        outline: none;
         display:block;
-        overflow:hidden; // prolly need to remove
-        margin-bottom:20px;
-    }
-    .uniform-form-section-head{
-        background:darken(white, 3);
-        overflow:hidden;
-        padding: 10px 15px;
-        border-bottom:1px solid darken($background, 10);
-        & > * {
-            margin: 0;
+        width: 100%;
+        border-radius: 0 !important;
+        &:focus{
+            box-shadow: none;
         }
-        h1,h2,h3,h4,h5,h6{
-            margin: 0;
-            display:inline-block;
+    }
+    .input{
+        padding: 0;
+        flex: 1 1 auto;
+    }
+    &>*:not(input){
+        padding: 0 0.5em;
+        &.pad-tiny{
+            padding: 0 0.25em;
         }
     }
-    .uniform-form-section-foot{
-        background:darken(white, 3);
-        border-top:1px solid darken($background, 10);
-        text-align:center;
-        padding: 10px 15px;
+    &.focus{
+        box-shadow: inset 0 -2px 0 $green;
     }
-    .row{
-        .uniform-form-group{
-            margin-top:10px;
-            margin-bottom:10px;
+    .label{
+        color: lighten($gray, 20);
+    }
+    @include media($sm){
+        input{
+            padding-top: 0.5em;
+            padding-bottom: 0.5em;
         }
     }
-    .uniform-form-group{
-        margin-bottom:0;
-        .has-error > label,
-        & > label{
-            display:block;
-            &:not(:first-of-type) {
-                margin-top: 20px;
+    &.border-none{
+        border: none;
+    }
+}
+
+select.uniformInput,
+textarea.uniformInput,
+input.uniformInput,
+button.uniformInput,
+.uniformInput input,
+.uniformForm #{$text-inputs},
+.uniformForm textarea{
+    font-family: $system-font;
+    border:1px solid lighten($gray, 40);
+    padding: 0.5em;
+    line-height: 1.3;
+    outline: none;
+    appearance: none;
+    transition: box-shadow 0.2s ease-in;
+    &:focus{
+        box-shadow: inset 0 -2px 0 $green;
+    }
+    &.block{
+        width: 100%;
+        max-width: 100%;
+    }
+    @include media($sm){
+        font-size: 1.142em;
+    }
+    &.pad-more{
+        padding: 1em;
+    }
+    &.large{
+        font-size:1.2em;
+    }
+}
+select.uniformInput{
+    color: $gray;
+    background: white url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSIyNy4xNjdweCIgaGVpZ2h0PSIyOHB4IiB2aWV3Qm94PSIwIDAgMjcuMTY3IDI4IiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAyNy4xNjcgMjgiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxnIGlkPSJpY29tb29uLWlnbm9yZSI+PC9nPjxwYXRoIGZpbGw9IiM1MDUxNTMiIGQ9Ik0xNiwxMWMwLDAuMjcxLTAuMSwwLjUwNS0wLjI5NywwLjcwM2wtNyw3QzguNTA1LDE4LjksOC4yNzEsMTksOCwxOXMtMC41MDUtMC4xLTAuNzAzLTAuMjk3bC03LTdDMC4wOTksMTEuNTA1LDAsMTEuMjcxLDAsMTFzMC4wOTktMC41MDUsMC4yOTctMC43MDNDMC40OTUsMTAuMDk5LDAuNzI5LDEwLDEsMTBoMTRjMC4yNzEsMCwwLjUwNSwwLjA5OSwwLjcwMywwLjI5N0MxNS45LDEwLjQ5NSwxNiwxMC43MjksMTYsMTF6Ii8+PC9zdmc+);
+    background-position: center right;
+    background-repeat: no-repeat;
+    background-size: auto 40%;
+    position: relative;
+    border-radius: 0;
+    padding-right: 1.5em !important;
+}
+button.uniformInput{
+    background: white;
+    @include text-overflow;
+}
+
+.uniformError{
+    position:relative;
+    border-color: $red;
+    color: $red;
+    input{
+        border-color: $red !important;
+    }
+}
+
+.uniformErrorMessage{
+    color: $red;
+    font-size:11px;
+    line-height: 1.1;
+}
+
+@mixin uniformForm-table{
+    display: table;
+    width: 100%;
+    .form-group{
+        display: table-row;
+        & > * {
+            display: table-cell;
+            &.fill{
+                width: 100%;
             }
         }
-        .has-error > #{$text-inputs},
-        & > #{$text-inputs},
-        textarea {
-            @include uniform-input;
-            width:100%;
-        }
-        .has-error > #{$text-inputs}{
-            &:focus{
-                box-shadow:inset 0 -3px 0 $red;
+        & > label,
+        & > div,
+        & > span {
+            padding-bottom: 1em;
+            padding-right: 0.5em;
+            &:last-child{
+                padding-right: 0;
             }
         }
-        .has-error > select,
-        & > select{
-            position:relative;
-            z-index:1;
-            @include appearance(none);
-            outline: 1px;
-            cursor:pointer;
-            text-indent: 1px;
-            text-overflow: ellipsis;
-            font-family:$helvetica;
-            border:1px solid $gray-light;
-            margin:0;
-            padding: 5px;
-            padding-right: 20px;
-            line-height:1.2;
-            min-height: 30px;
+    }
+}
+
+.uniformForm{
+    .form-group{
+        position: relative;
+        margin-bottom: 0.9em;
+        label{
+            font-weight:bold;
+            display:block;
+        }
+        &.collapse{
+            margin-bottom: 0;
+        }
+    }
+    [data-error-message]{
+        position: relative;
+        color: $red;
+        input{
+            border-color: $red !important;
+        }
+        &::after{
+            content: attr(data-error-message);
+            color: $red;
+            position: absolute;
+            bottom: -7px;
+            left: 1em;
+            border: 1px solid $red;
             background: white;
-            border-radius:0;
-            background: url(asset_path('arrow_down_large.svg')) no-repeat;
-            background-size: 10px 10px;
-            background-position:right 5px center;
-            width: 100%;
-            &:focus{
-                border-color: $blue;
-            }
+            font-size:11px;
+            line-height: 14px;
+            @include text-overflow;
+            padding: 0 0.5em;
+            max-width: 100%;
         }
-        .inline-input{
-            width:100%;
-            select{
-                background:none;
-            }
-            &.active{
-                box-shadow:none;
-                border-color: $blue;
-            }
-            .add-on{
-                width: 30px;
-                border-right:none;
+    }
+    select.uniformInput,
+    #{$text-inputs},
+    textarea{
+        display:block;
+        width: 100%;
+        max-width: 100%;
+    }
+    
+    .uniformForm-table,
+    &.uniformForm-table{
+        @include uniformForm-table;
+    }
+    
+    &.invert{
+        #{$text-inputs},
+        textarea,
+        .uniformCheckboxCollection.inline,
+        .uniformCheckboxCollection.inline-md{
+            border-color: $gray;
+            border-radius: 0.25em;
+        }
+        .has-error{
+            color: $red-bright;
+        }
+        .uniformInputGroup{
+            overflow: hidden;
+            border-color: $gray;
+            border-radius: 0.25em;
+        }
+    }
+}
+@include apply-media-sizes('.uniformCheckboxCollection'){
+    label{
+        display:block;
+        margin-right: 1em;
+        font-weight: normal;
+        input{
+            margin-right: 0.25em;
+        }
+    }
+    &.inline{
+        color: $gray;
+        border:1px solid lighten($gray, 40);
+        background: white;
+        display: flex;
+        align-items: center;
+        label{
+            margin-right: 0;
+            padding: 0.5em;
+            line-height: 1.3;
+            flex: 1 1 auto;
+            border-left: 1px solid lighten($gray, 40);
+            text-align: center;
+            &:first-of-type{
+                border-left:none;
             }
         }
     }
-    .has-error {
+}
+@include apply-media-sizes('.uniformForm-table'){
+    @include uniformForm-table;
+}
+
+.uniformFloatingLabel{
+    display: flex;
+    align-items: center;
+    border: 1px solid lighten($gray, 40);
+    position:relative;
+    background:white;
+    &>*{
+        flex: 0 1 auto;
+    }
+    label{
+        z-index: 1;
+        padding: 0 1em;
+        font-weight:normal !important;
+    }
+    & > input,
+    & > textarea,
+    & > select,
+    & > .uniformInputGroup{
+        position:relative;
+        display:block;
+        width: 100%;
+        border:none !important;
+        background:none;
+    }
+    & > select {
+        z-index: 2;
+    }
+    & > .uniformInputGroup{
+        display: flex;
+    }
+    
+    &.enabled{
         label{
-            color: $red !important;
+            transition: font-size 0.1s, line-height 0.1s, opacity 0.1s;
+        }
+    }
+    
+    &.inactive{
+        input,
+        textarea,
+        select{
+            &::placeholder{
+                color: transparent;
+            }
         }
-        #{$text-inputs}, textarea{
-            border-color:$red !important;
+    }
+    &.float{
+        label{
+            font-size: 80%;
+            opacity: 0.8;
         }
-        .select2 .select2-selection{
-            border-color:$red !important;
+    }
+    &.active{
+        label{
+            color: $green-dark;
+            opacity: 1;
         }
     }
+    input.pad-more{
+        padding: 1em;
+    }
 }

data/vendor/assets/stylesheets/uniform/components/grid.scss

@@ -1,83 +1,225 @@
-//
-// Grid system
-// --------------------------------------------------
-
-
-// Container widths
-//
-// Set the container width, and override it for fixed navbars in media queries.
-.container {
-  @include container-fixed;
-
-  @include media ($min-sm) {
-    width: $container-sm;
-  }
-  @include media ($min-md) {
-    width: $container-md;
-  }
-  @include media ($min-lg) {
-    width: $container-lg;
-  }
+$grid-columns: 12;
+$grid-gutter: 1em;
+
+.container{
+    max-width: 100%;
+    width: 100%;
+    margin-left: auto;
+    margin-right: auto;
+    padding-left: 0.5em;
+    padding-right: 0.5em;
+//    @include media($md) {
+//        padding: 0;
+//        max-width: 720px;
+//    }
+    @include media($lg) {
+        max-width: 1080px;
+    }
+    @include media($xl) {
+        max-width: 1440px;
+    }
 }
 
-
-// Fluid container
-//
-// Utilizes the mixin meant for fixed width containers, but without any defined
-// width for fluid, full width layouts.
-
-.container-fluid {
-  @include container-fixed;
+@mixin grid{
+    display: flex;
+    flex-wrap: wrap;
+    
+    &.grid-h-left      {justify-content: flex-start;}
+    &.grid-h-center     {justify-content: center;}
+    &.grid-h-right      {justify-content: flex-end;}
+    &.grid-h-around     {justify-content: space-around;}
+    &.grid-h-between    {justify-content: space-between;}
+
+    &.grid-v-top        {align-content: flex-start;}
+    &.grid-v-center     {align-content: center;}
+    &.grid-v-bottom     {align-content: flex-end;}
+    &.grid-v-around     {align-content: space-around;}
+    &.grid-v-between    {align-content: space-between;}
+    &.grid-v-stretch    {align-content: space-stretch;}
+    
+    &.grid-center       {align-items: center;}
+    &.grid-top          {align-items: flex-start;}
+    &.grid-bottom       {align-items: flex-end;}
+    &.grid-stretch      {align-items: stretch;}
+    &.grid-nowrap       {flex-wrap:nowrap;}
+    
+    &.grid-vertical{
+        flex-direction: column;
+        .col,
+        [class*="col-"]{
+            padding-left: 0;
+            padding-right: 0;
+            padding-top: $grid-gutter;
+            padding-bottom: $grid-gutter;
+            &:first-child{
+                padding-top: 0;
+            }
+            &:last-child{
+                padding-bottom: 0;
+            }
+        }
+    }
+    
+    &.no-wrap{
+        flex-wrap:nowrap;
+    }
+    
+    &.no-gutter{
+        .col,
+        [class*="col-"]{
+            padding-left: 0;
+            padding-right: 0;
+        }
+    }
+    
+    &.nest{
+        margin-left: -$grid-gutter;
+        margin-right: -$grid-gutter;
+        @include media($sm) {
+            margin-left: -$grid-gutter/2;
+            margin-right: -$grid-gutter/2;
+        }
+        .col,
+        [class*="col-"]{
+            &:first-child{
+                padding-left: $grid-gutter/2;
+            }
+            &:last-child{
+                padding-right: $grid-gutter/2;
+            }
+            @include media($md){
+                &:first-child{
+                    padding-left:$grid-gutter;
+                }
+                &:last-child{
+                    padding-right: $grid-gutter;
+                }
+            }
+        }
+    }
+    
+    .col,
+    [class*="col-"]{
+        position: relative;
+        padding-left: $grid-gutter/2;
+        padding-right: $grid-gutter/2;
+        &:first-child{
+            padding-left: 0;
+        }
+        &:last-child{
+            padding-right: 0;
+            &.pad{
+                padding-right: $grid-gutter/2;
+            }
+        }
+        &.no-gutter{
+            padding-left: 0;
+            padding-right: 0;
+        }
+        @include media($md){
+            padding-left:$grid-gutter;
+            padding-right: $grid-gutter;
+            &:last-child{
+                &.pad{
+                    padding-right: $grid-gutter;
+                }
+            }
+        }
+
+        &.col-center       {align-self: center;}
+        &.col-top          {align-self: flex-start;}
+        &.col-bottom       {align-self: flex-end;}
+        &.col-stretch      {align-self: stretch;}
+    }
 }
 
-
-// Row
-//
-// Rows contain and clear the floats of your columns.
-
-.row {
-  @include make-row;
+.grid{
+    @include grid;
 }
 
-
-// Columns
-//
-// Common styles for small and large grid columns
-
-@include make-grid-columns;
-
-
-// Extra small grid
-//
-// Columns, offsets, pushes, and pulls for extra small devices like
-// smartphones.
-
-@include make-grid(xs);
-
-
-// Small grid
-//
-// Columns, offsets, pushes, and pulls for the small device range, from phones
-// to tablets.
-
-@include media ($min-sm) {
-  @include make-grid(sm);
+// fix for IE https://codepen.io/anon/pen/gxNraR
+.grid-min-height-fix{
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+    .grid{
+        width: 100%;
+    }
 }
 
-
-// Medium grid
-//
-// Columns, offsets, pushes, and pulls for the desktop device range.
-
-@include media ($min-md) {
-  @include make-grid(md);
+.col{
+    flex: 0 1 auto;
+    max-width: 100%;
+}
+.col-fill{
+    flex: 1 1 auto;
+    max-width: 100%;
+}
+@for $i from 1 through $grid-columns {
+    .col-#{$i} {
+        flex: 0 0 #{($i / $grid-columns * 100) + "%"};
+        max-width: #{($i / $grid-columns * 100) + "%"};
+    }
+    .col-offset-#{$i} {
+        margin-left: #{($i / $grid-columns * 100) + "%"};
+    }
+    .col-push-#{$i} {
+        position:relative;
+        left: #{($i / $grid-columns * 100) + "%"};
+    }
+    .col-pull-#{$i} {
+        position:relative;
+        right: #{($i / $grid-columns * -100) + "%"};
+    }
+    .col-fill-#{$i}{
+        flex: #{$i};
+    }
 }
 
+@each $name, $size in ('sm', $sm) ('md', $md) ('lg', $lg) ('xl', $xl) {
+    .show-#{$name}{
+        display:none !important;
+    }
+    @include media($size){
+        .grid-#{$name}{
+            @include grid;
+        }
+        .text-col-2-#{$name}{
+            column-count: 2;
+            column-gap: 5em;
+        }
+        .show-#{$name}{
+            display:inherit !important;
+            &.block{
+                display:block !important;
+            }
+        }
+        .hide-#{$name}{
+            display:none !important;
+        }
+        .col-#{$name}{
+            flex: 0 1 auto;
+            max-width: 100%;
+        }
+        .col-fill-#{$name}{
+            flex: 1 1 auto;
+        }
+        
+        @for $i from 1 through $grid-columns {
+            .col-#{$i}-#{$name} {
+                flex: 0 0 #{($i / $grid-columns * 100) + "%"};
+                max-width: #{($i / $grid-columns * 100) + "%"};
+            }
+            .col-offset-#{$i}-#{$name} {
+                margin-left: #{($i / $grid-columns * 100) + "%"};
+            }
+            .col-push-#{$i}-#{$name} {
+                left: #{($i / $grid-columns * 100) + "%"};
+            }
+            .col-pull-#{$i}-#{$name} {
+                right: #{($i / $grid-columns * 100) + "%"};
+            }
+        }
+    }
+}
 
-// Large grid
-//
-// Columns, offsets, pushes, and pulls for the large desktop device range.
-
-@include media ($min-lg) {
-  @include make-grid(lg);
-}