uniform-ui 1.0 → 2.2.1

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

@@ -1,212 +0,0 @@
-//----------------------------------------------------------------
-//             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:$gray;
-    background-color: white;
-    background-image: linear-gradient(white 33%, darken(white, 7));
-    border-radius: 0.25em;
-    border:1px solid lighten($gray, 40);
-    
-    .fortycon{
-        line-height:0;
-        vertical-align:-1px;
-        font-size:1.2em;
-        margin-right:3px;
-        &.end{
-            margin-right: 0;
-            margin-left: 3px;
-        }
-    }
-
-    &:visited{
-        color:$gray;
-    }
-
-    &:hover,
-    &:focus,
-    &.hover{
-        box-shadow: inset 0 0 10px rgba(black, 0.1);
-    }
-    &:active,
-    &.active{
-    }
-    
-    &.green,
-    &.blue,
-    &.red {
-        color: white;
-    }
-    &.green { background: $green;}
-    &.blue  { background: $blue;}
-    &.red   { background: $red;}
-    &.green { background: $green;}
-    &.blue  { background: $blue;}
-    &.red   { background: $red;}
-    
-    
-    //----------------------------------------------------------------
-    //             styles
-    //----------------------------------------------------------------
-    &.clear{
-        background: none;
-        border-color: transparent;
-    }
-    &.outline{
-        border-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;
-        .fortycon{
-            line-height:0.5em;
-            vertical-align:-6px;
-            font-size:2em;
-            margin-right:7px;
-            font-weight:normal;
-        }
-    }
-    
-    &.warn:hover{
-        border-color:$red;
-        background: $red;
-        color: white;
-        &.clear{
-            color: $red;
-            background: none;
-        }
-        &.outline{
-            color: $red;
-            border-color: lighten($gray, 30);
-        }
-    }
-    
-    &.block{
-        padding-left:0.5em !important;
-        padding-right:0.5em !important;
-        display:block;
-        width:100%;
-    }
-    
-    
-    //----------------------------------------------------------------
-    //             colors
-    //----------------------------------------------------------------
-    
-    &.green{
-        background-color: darken($green, 3);
-        background-image: linear-gradient(lighten($green, 5), darken($green, 3));
-        border-color: darken($green, 3);
-        
-        &.outline{
-            border-color: $green-dark;
-            color:$green-dark;
-        }
-    }
-    
-    &.green,
-    &.red,
-    &.blue{
-        color:white;
-        text-shadow:0 1px 2px rgba(black, 0.1);
-    }
-    
-    &.red{
-        background-color: darken($red, 3);
-        background-image: linear-gradient($red, darken($red, 3));
-        border-color: darken($red, 3);
-        &.outline{
-            color:$red-dark;
-            border-color:$red-dark;
-        }
-    }
-    
-    &.blue{
-        background-color: darken($blue, 3);
-        background-image: linear-gradient($blue, darken($blue, 3));
-        border-color:darken($blue, 3);
-        
-        &.outline{
-            color:$blue;
-            border-color: $blue;
-        }
-    }
-    &.white{
-        &.outline{
-            color:white;
-            border-color:white;
-        }
-    }
-    
-    &.gray{
-        color: lighten($gray, 20);
-        &.outline{
-            color: lighten($gray, 20);
-            border-color: lighten($gray, 30);
-        }
-    }
-    
-    &:disabled,
-    &.disabled,
-    &:disabled:hover,
-    &.disabled:hover{
-        cursor: not-allowed;
-        color:lighten($gray, 40);
-        background-image:none !important;
-        background-color: darken($background, 10);
-        border-color: lighten($gray, 40);
-        text-shadow: none;
-    }
-}
-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($green, 3);
-            background-image: linear-gradient(lighten($green, 5), darken($green, 3));
-            border-color: darken($green, 3);
-            color: white;
-        }
-    }
-}

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

@@ -1,290 +0,0 @@
-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;
-        width: 100%;
-        border-radius: 0 !important;
-        &:focus{
-            box-shadow: none;
-        }
-    }
-    .input{
-        padding: 0;
-        flex: 1 1 auto;
-    }
-    &>*:not(input){
-        padding: 0 0.5em;
-        &.pad-tiny{
-            padding: 0 0.25em;
-        }
-    }
-    &.focus{
-        box-shadow: inset 0 -2px 0 $green;
-    }
-    .label{
-        color: lighten($gray, 20);
-    }
-    @include media($sm){
-        input{
-            padding-top: 0.5em;
-            padding-bottom: 0.5em;
-        }
-    }
-    &.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%;
-            }
-        }
-        & > label,
-        & > div,
-        & > span {
-            padding-bottom: 1em;
-            padding-right: 0.5em;
-            &:last-child{
-                padding-right: 0;
-            }
-        }
-    }
-}
-
-.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;
-            font-size:11px;
-            line-height: 14px;
-            @include text-overflow;
-            padding: 0 0.5em;
-            max-width: 100%;
-        }
-    }
-    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;
-            }
-        }
-    }
-}
-@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{
-            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: $green-dark;
-            opacity: 1;
-        }
-    }
-    input.pad-more{
-        padding: 1em;
-    }
-}

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

@@ -1,225 +0,0 @@
-$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;
-    }
-}
-
-@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;}
-    }
-}
-
-.grid{
-    @include grid;
-}
-
-// fix for IE https://codepen.io/anon/pen/gxNraR
-.grid-min-height-fix{
-    width: 100%;
-    display: flex;
-    flex-direction: row;
-    .grid{
-        width: 100%;
-    }
-}
-
-.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) + "%"};
-            }
-        }
-    }
-}
-