uniform-ui 1.0 → 2.2.1

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

@@ -0,0 +1,143 @@
+//----------------------------------------------------------------
+//             UniformInput
+//----------------------------------------------------------------
+@mixin uniformInput(){
+    font-family: $system-font;
+    border:1px solid lighten(color('gray'), 40);
+    padding: 0.5em;
+    line-height: 1.3;
+    outline: none;
+    appearance: none;
+    transition: box-shadow 0.1s ease-in;
+    &:focus{
+        box-shadow: inset 0 -2px 0 color('green');
+    }
+    &.-block{
+        width: 100%;
+        max-width: 100%;
+    }
+    &.pad-2x{
+        padding: 1em;
+    }
+    &.-invert{
+        border-color: color('gray');
+        border-radius: 0.25em;
+    }
+}
+.uniformInput,
+.uniformForm #{$text-inputs},
+.uniformForm textarea{
+    @include uniformInput;
+}
+
+select.uniformInput{
+    color: 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;
+}
+
+
+//----------------------------------------------------------------
+//             UniformForm
+//----------------------------------------------------------------
+.uniformForm{
+    .form-group{
+        position: relative;
+        margin-bottom: 0.9em;
+        label{
+            font-weight:bold;
+            display:block;
+        }
+        &.collapse{
+            margin-bottom: 0;
+        }
+        &:last-of-type{
+            margin-bottom: 0;
+        }
+    }
+    
+    .uniformInput,
+    #{$text-inputs},
+    textarea{
+        display:block;
+        width: 100%;
+        max-width: 100%;
+    }
+    
+    &.-invert{
+        #{$text-inputs},
+        textarea,
+        .uniformFloatingLabel{
+            border-color: color('gray');
+            border-radius: 0.25em;
+        }
+        [data-uniform-error]{
+            color: color('red-bright');
+        }
+        .uniformInputGroup{
+            overflow: hidden;
+            border-color: color('gray');
+            border-radius: 0.25em;
+        }
+    }
+}
+
+[data-uniform-error]{
+    position: relative;
+    color: color('red');
+    .uniformInputGroup{
+        border-color: color('red') !important;
+    }
+    input{
+        border-color: color('red') !important;
+    }
+    &::after{
+        content: attr(data-uniform-error);
+        color: color('red');
+        position: absolute;
+        bottom: -7px;
+        left: 1em;
+        border: 1px solid color('red');
+        background: white;
+        font-size:11px;
+        line-height: 14px;
+        @include text-overflow;
+        padding: 0 0.5em;
+        max-width: 100%;
+    }
+}
+
+@include size-rules('.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;
+            }
+        }
+    }
+}
+
+
+@import './form/*';

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

@@ -0,0 +1,158 @@
+//----------------------------------------------------------------
+//             Grid
+//----------------------------------------------------------------
+
+@include size-rules('.grid'){
+    display: flex;
+    flex-wrap: wrap;
+    
+    & > *{
+        position: relative;
+        padding-left: $grid-gutter/2;
+        padding-right: $grid-gutter/2;
+    }
+
+    &.grid-nowrap       {flex-wrap:nowrap;}
+    &.grid-gutter-2x {
+        & > * {
+            padding-left: $grid-gutter;
+            padding-right: $grid-gutter;
+        }
+    }
+}
+@include size-rule('md'){
+    .grid,
+    .grid-md,
+    .grid-lg,
+    .grid-xl{
+        & > * {
+            padding-left:$grid-gutter;
+            padding-right: $grid-gutter;
+        }
+    }
+    
+    .grid.grid-gutter-2x {
+        & > * {
+            padding-left:$grid-gutter * 2;
+            padding-right: $grid-gutter * 2;
+        }
+    }
+}
+
+.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: stretch;}
+
+.grid-center       {align-items: center;}
+.grid-top          {align-items: flex-start;}
+.grid-bottom       {align-items: flex-end;}
+.grid-stretch      {align-items: stretch;}
+
+.grid-vertical{
+    flex-direction: column;
+    & > *{
+        padding-left: 0;
+        padding-right: 0;
+        padding-top: $grid-gutter;
+        padding-bottom: $grid-gutter;
+    }
+    &.grid-gutter-none{
+        & > * {
+            padding-top: 0;
+            padding-bottom: 0;
+        }
+    }
+}
+
+.grid-gutter-none{
+    & > * {
+        padding-left: 0 !important;
+        padding-right: 0 !important;
+    }
+}
+
+.grid-nest{
+    margin-left: -$grid-gutter;
+    margin-right: -$grid-gutter;
+    &.grid-gutter-2x{
+        margin-left: -$grid-gutter*2;
+        margin-right: -$grid-gutter*2;
+    }
+}
+.grid-nest-half{
+    margin-left: -0.5em;
+    margin-right: -0.5em;
+}
+@include size-rule('sm'){
+    .grid-nest{
+        margin-left: -$grid-gutter/2;
+        margin-right: -$grid-gutter/2;
+        &.grid-gutter-2x{
+            margin-left: -$grid-gutter;
+            margin-right: -$grid-gutter;
+        }
+    }
+}
+
+// fix for IE https://codepen.io/anon/pen/gxNraR
+.grid-min-height-fix{
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+    .grid{
+        width: 100%;
+    }
+}
+
+//----------------------------------------------------------------
+//             Columns
+//----------------------------------------------------------------
+.col-center       {align-self: center;}
+.col-top          {align-self: flex-start;}
+.col-bottom       {align-self: flex-end;}
+.col-stretch      {align-self: stretch;}
+@include size-rules(".col"){
+    flex: 0 1 auto;
+}
+@include size-rules(".col-fill"){
+    flex: 1 1 auto;
+}
+@include size-rules(".col-gutter-none"){
+    padding-left: 0 !important; // TODO remove !important
+    padding-right: 0 !important; // TODO remove !important
+}
+@for $i from 0 through $grid-columns {
+    @include size-rules(".col-#{$i}"){
+        flex: 0 0 #{($i / $grid-columns * 100) + "%"};
+        max-width: #{($i / $grid-columns * 100) + "%"};
+    }
+    @include size-rules(".col-offset-#{$i}"){
+        margin-left: #{($i / $grid-columns * 100) + "%"};
+    }
+    @include size-rules(".col-push-#{$i}"){
+        position:relative;
+        left: #{($i / $grid-columns * 100) + "%"};
+    }
+    @include size-rules(".col-pull-#{$i}"){
+        position:relative;
+        right: #{($i / $grid-columns * 100) + "%"};
+    }
+    @include size-rules(".col-fill-#{$i}"){
+        flex: #{$i}; 
+    }
+    @include size-rules(".col-grow-#{$i}"){
+        flex-grow: #{$i}; 
+    }
+    @include size-rules(".col-shrink-#{$i}"){
+        flex-shrink: #{$i}; 
+    }
+}

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

@@ -0,0 +1,26 @@
+.uniformLabel{
+    display:inline-block;
+    vertical-align:baseline;
+    padding: 0.0714em 0.357em 0.0714em;
+    border: 0.1em solid color('gray');
+    color: color('gray');
+    border-radius: 0.3em;
+    line-height: 1.2;
+    &.-fill{
+        border: none;
+        background: lighten(color('gray'), 20);
+        color: white;
+        padding: 0.1714em 0.457em 0.1714em;
+    }
+    &.-round{
+        border-radius: 1em;
+    }
+    &.pad-more{
+        padding: 0.0714em 0.5em;
+    }
+}
+
+@include colors('.uniformLabel.', ('border-color' 'color'));
+@include colors('.uniformLabel.-fill.', 'background-color'){
+    color: white;
+};

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

@@ -0,0 +1,80 @@
+.uniformLoader{
+    line-height:1em;
+    display:inline-block;
+    white-space:nowrap;
+    letter-spacing:-.05em;
+    span{
+        color:rgba(black, 1);
+        text-shadow:-1px -1px 0 rgba(#FFFFFF, .2);
+        animation: uniformLoader-light 1s infinite linear;
+        animation-delay: 0.2s;
+    }
+    span:first-of-type{
+        animation-delay: 0s;
+    }
+    span:last-of-type{
+        animation-delay: 0.4s;
+    }
+    .uniformLoader-container{
+        white-space:nowrap;
+    }
+    &.-light{
+        span{
+            color:rgba(white, 1);
+            text-shadow:-1px -1px 0 rgba(black, .2);
+            animation: uniformLoader 1s infinite linear;
+            animation-delay: 0.2s;
+        }
+        span:first-of-type{
+            animation-delay: 0s;
+        }
+        span:last-of-type{
+            animation-delay: 0.4s;
+        }
+    }
+    &.-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);
+        }
+    }
+    &.-top{
+        .uniformLoader-container{
+            top: 20px;
+        }
+    }
+}
+@keyframes uniformLoader {
+  0% {
+    color: rgba(255, 255, 255, 0);
+  }
+  25% {
+    color: white;
+  }
+  100% {
+    color: white;
+  }
+}
+
+@keyframes uniformLoader-light {
+  0% {
+    color: black;
+  }
+  25% {
+    color: rgba(0, 0, 0, 0.2);
+  }
+  100% {
+    color: rgba(0, 0, 0, 0.2);
+  }
+}

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

@@ -6,6 +6,7 @@
     right: 0;
     opacity: 0.6;
     background: black;
+    z-index: 1;
 }
 .uniformModal{
     position: absolute;
@@ -13,6 +14,7 @@
     width: 100%;
     text-align:center;
     padding: 2em;
+    z-index: 9999;
 }
 
 .uniformModal-container{
@@ -23,7 +25,8 @@
     background: white;
     border-radius: 0.25em;
     max-width: 90%;
-    &.fill{
+    z-index: 2;
+    &.-fill{
         width: 90%;
     }
 }
@@ -38,14 +41,33 @@
     opacity: 0.5;
     line-height:1;
     cursor: pointer;
+    height: 2rem;
+    width: 2rem;
     &:hover{
         opacity: 1;
     }
+    &:after,
+    &:before{
+        content: "";
+        width: 1px;
+        height: 1.5rem;
+        transform-origin: 50% 50%;
+        transform: rotate(-45deg);
+        background: white;
+        position:absolute;
+        left: 50%;
+        top: 15%;
+    }
+    &:before{
+        transform: rotate(45deg);
+    }
 }
 
 .uniformModal-blur{
+    top: 0;
+    left: 0;
+    height: 100vh;
+    width: 100vw;
+    position:fixed;
     filter: blur(4px);
-}
-body.uniformModal-active{
-    background: $gray-dark;
 }

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

@@ -0,0 +1,124 @@
+@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{
+    display: flex;
+    flex-wrap: wrap;
+    align-items: stretch;
+    align-content: space-stretch;
+    
+    &.-nowrap{
+        flex-wrap: nowrap;
+    }
+    
+    & > * {
+        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: 1 1 auto;
+        }
+    }
+    & > a{
+        text-decoration: none;
+        &:hover{
+            color: color('blue');
+            border-bottom-color: color('blue');
+        }
+        &.active{
+            color: color('green-dark');
+            border-bottom-color: color('green-dark');
+        }
+    }
+    &.-pad{
+        & > * {
+            padding-top: 0.25em;
+            padding-bottom: 0.25em;
+        }
+    }
+    &.-pad-more{
+        & > * {
+            padding-top: 0.5em;
+            padding-bottom: 0.5em;
+        }
+    }
+    
+    &.-vertical{
+        @include uniformNav-vertical();
+    }
+}
+
+.uniformMainNav{
+    position: relative;
+    background: white;
+    box-shadow:0 1px 0 0 rgba(black, 0.15);
+    color: color('gray');
+    .uniformNav{
+        & > * {
+            padding-top: 0.25em;
+            padding-bottom: 0.25em;
+        }
+    }
+    
+    &.bg-none{
+        background: none;
+    }
+    
+    &.border-bottom-none,
+    &.border-none{
+        box-shadow: none;
+    }
+    
+    &.-vertical{
+        box-shadow: none;
+        .uniformNav{
+            @include uniformNav-vertical();
+        }
+    }
+    
+    &.-invert{
+        box-shadow:0 1px 0 0 rgba(white, 0.15);
+        background: none;
+        color: rgba(white, 0.7);
+        .uniformNav{
+            & > a {
+                color: rgba(white, 0.7);
+                &:hover{
+                    color: white;
+                    border-bottom-color: color('blue-bright');
+                }
+                &.active{
+                    color: white;
+                    background: rgba(black, 0.1);
+                    border-bottom-color: color('green-light');
+                }
+            }
+        }
+        &.border-bottom-none,
+        &.border-none{
+            box-shadow: none;
+        }
+    }
+}

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

@@ -0,0 +1,69 @@
+.uniformRow{
+    background: white;
+    margin: 0.5em 0;
+    text-decoration:none;
+    color: color('gray');
+    border: 1px solid color('gray-light');
+    &.border-none{
+        margin-bottom: 0;
+        border: none;
+        border-top: 1px solid color('gray-light');
+        &:first-of-type{
+            border-top:none;
+        }
+    }
+    &:hover{
+        background: lighten(color('blue'), 50);
+    }
+    a{
+        color: color('gray');
+        text-decoration: none;
+    }
+    .uniformRow-body{
+        display: flex;
+        min-width: 0;
+        & > * {
+            padding: 0 1em;
+        }
+    }
+}
+
+
+@include size-rule('sm') {
+    .uniformRow{
+        display: block;
+        margin: 0.5em 0;
+        .uniformThumb{
+            padding-top:50%;
+            width: 100%;
+            max-width: 100%;
+        }
+        .uniformRow-body{
+            flex-wrap: wrap;
+            & > * {
+                width: 100%;
+            }
+        }
+    }
+}
+@include size-rule('md') {
+    .uniformRow{
+        margin: 0;
+        margin-bottom: -1px;
+        flex-wrap: nowrap;
+        display: flex;
+        align-self: center;
+        .uniformThumb{
+            align-self: stretch;
+        }
+
+        .uniformRow-body{
+            flex-wrap: nowrap;
+            align-self: center;
+            padding: 0.5em 0;
+            & > * {
+                padding: 0 1em;
+            }
+        }
+    }
+}