uniform-ui 0.6 → 1.0

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

@@ -0,0 +1,63 @@
+.uniformLabel{
+    display:inline-block;
+    vertical-align:baseline;
+    font-size: 0.8em;
+    padding: 0.0714em 0.357em 0.0714em;
+    border: 0.1em solid $gray;
+    color: $gray;
+    border-radius: 0.3em;
+    &.fill{
+        border: none;
+        background: lighten($gray, 20);
+        color: white;
+    }
+    &.pad-more{
+        padding: 0.0714em 0.5em;
+    }
+    // TODO remove spire specific statuses
+    &.deleted,
+    &.red{
+        border-color: $red;
+        color: $red;
+        &.fill{
+            background: $red;
+        }
+    }
+    
+    &.approved,
+    &.accepted,
+    &.active,
+    &.green{
+        border-color: $green-dark;
+        color: $green-dark;
+        &.fill{
+            background: $green-dark;
+        }
+    }
+    
+    &.missed,
+    &.expired,
+    &.leased,
+    &.yellow,
+    &.initiated,
+    &.nurturing{
+        border-color: $yellow-dark;
+        color: $yellow-dark;
+        &.fill{
+            background: $yellow-dark;
+        }
+    }
+    &.muted,
+    &.closed{
+        border-color: lighten($gray, 30);
+        color: lighten($gray, 30);
+    }
+    
+    &.blue{
+        border-color: $blue;
+        color: $blue;
+        &.fill{
+            background: $blue;
+        }
+    }
+}

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

@@ -1,34 +1,36 @@
 .uniform-loader{
+    font-size:2em;
+    line-height:1em;
     display:inline-block;
     .uniform-loader-container{
         letter-spacing:-.05em;
         white-space:nowrap;
         span{
-            font-size:2em;
-            line-height:1em;
             color:rgba(black, 1);
-            @include animation(uniform-loader 1s infinite linear);
-            @include animation-delay(.4s);
+            text-shadow:-1px -1px 0 rgba(#FFFFFF, .2);
+            animation: uniform-loader-light 1s infinite linear;
+            animation-delay: 0.2s;
         }
         span:first-of-type{
-            @include animation-delay(.2s);
+            animation-delay: 0s;
         }
         span:last-of-type{
-            @include animation-delay(.6s);
+            animation-delay: 0.4s;
         }
     }
     &.light{
         .uniform-loader-container{
             span{
                 color:rgba(white, 1);
-                @include animation(uniform-loader-light 1s infinite linear);
-                @include animation-delay(.4s);
+                text-shadow:-1px -1px 0 rgba(black, .2);
+                animation: uniform-loader 1s infinite linear;
+                animation-delay: 0.2s;
             }
             span:first-of-type{
-                @include animation-delay(.2s);
+                animation-delay: 0s;
             }
             span:last-of-type{
-                @include animation-delay(.6s);
+                animation-delay: 0.4s;
             }
         }
     }
@@ -49,14 +51,32 @@
             background:rgba(black, .5);
         }
     }
+    &.top{
+        .uniform-loader-container{
+            top: 20px;
+        }
+    }
 }
-@include keyframes (uniform-loader) {
-    0%{ color:rgba(black, 1); }
-    25%{ color:rgba(black, 0.2); }
-    100%{ color:rgba(black, 0.2); }
+@keyframes uniform-loader {
+  0% {
+    color: rgba(255, 255, 255, 0);
+  }
+  25% {
+    color: white;
+  }
+  100% {
+    color: white;
+  }
 }
-@include keyframes (uniform-loader-light) {
-    0%{ color:rgba(white, 1); }
-    25%{ color:rgba(white, 0.2); }
-    100%{ color:rgba(white, 0.2); }
+
+@keyframes uniform-loader-light {
+  0% {
+    color: black;
+  }
+  25% {
+    color: rgba(0, 0, 0, 0.2);
+  }
+  100% {
+    color: rgba(0, 0, 0, 0.2);
+  }
 }

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

@@ -0,0 +1,51 @@
+.uniformModal-overlay{
+    position:fixed;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    opacity: 0.6;
+    background: black;
+}
+.uniformModal{
+    position: absolute;
+    top: 0;
+    width: 100%;
+    text-align:center;
+    padding: 2em;
+}
+
+.uniformModal-container{
+    display:inline-block;
+    text-align:left;
+    position:relative;
+    margin: auto;
+    background: white;
+    border-radius: 0.25em;
+    max-width: 90%;
+    &.fill{
+        width: 90%;
+    }
+}
+
+.uniformModal-close{
+    position: absolute;
+    padding: 0.3em;
+    top: -2rem;
+    right: -2rem;
+    font-size:1.5em;
+    color: white;
+    opacity: 0.5;
+    line-height:1;
+    cursor: pointer;
+    &:hover{
+        opacity: 1;
+    }
+}
+
+.uniformModal-blur{
+    filter: blur(4px);
+}
+body.uniformModal-active{
+    background: $gray-dark;
+}

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

@@ -1,80 +1,197 @@
-.uniform-nav{
-    position:relative;
+.uniformNav{
+    z-index: 3;
+    position: relative;
     background: white;
     box-shadow:0 1px 0 0 rgba(black, 0.15);
+    line-height: 1;
     color: $gray;
-    z-index: 2;
-    position: relative;
-    .brand{
-        padding:7px 0;
-        margin-right:10px;
+    &.transparent{
+        background: none;
+        box-shadow: none;
     }
-    .container {
-        & > * {
+    .col{
+        a{
+            &:first-child:last-child{
+                display:block;
+            }
+        }
+    }
+    .nav{
+        & > a,
+        & > * > a,
+        .text{
             display:inline-block;
-            vertical-align:bottom;
+            vertical-align:middle;
+            padding: 1.3em 1em;
+            color: $gray;
+            text-decoration:none;
+            .un-pad{
+                margin: -0.7em 0;
+            }
+            &:hover{
+                color: $blue;
+            }
+            &.uniformDropdown{
+                .fortycon.arrow_down_large{
+                    transition: all 0.2s;
+                }
+            }
+            &.active.uniformDropdown{
+                .fortycon.arrow_down_large{
+                    transform: rotate(180deg);
+                }
+            }
+            &.active{
+                color: $green-dark;
+                border-bottom: 2px solid $green-dark;
+                padding-bottom: calc(1.3em - 2px);
+            }
         }
         
     }
-    & > * {
-        display:inline-block;
-        vertical-align:bottom;
+    img{
+        display: block;
     }
-    a{
-        color: $gray;
+    
+    .uniformNav-subnav,
+    &.uniformNav-subnav{
+        .nav{
+            & > a,
+            & > * > a,
+            .text{
+                padding: 0.5em 0.5em;
+            }
+        }
     }
-    img{
-        display: inline-block;
+    .uniformInputGroup{
+        color: $gray;
     }
-    ul {
-        margin: 0;
-        padding: 0;
-        list-style: none;
-        & > li {
-            display:inline-block;
-            & > *{
-                display:inline-block;
-                text-decoration:none;
-                padding: 16px 10px;
-                padding-top:17px;
-                background:none;
+    &.invert{
+        box-shadow:none;
+        background: none;
+        color: $gray-light;
+        .nav{
+            & > a,
+            & > div > a,
+            .text{
+                background: none;
+                color: $gray-light;
                 &:hover{
-                    color: $blue;
+                    color: $green-light;
+                }
+                &.active{
+                    color: white;
+                    background: darken($gray, 10);
                 }
             }
         }
     }
-    .uniform-nav-right {
-        float: right;
+    .mobile-nav{
+        display:none;
+        button{
+            outline:none;
+            border:none;
+            background:none;
+            padding: 0.5em 0.5em;
+        }
+        img{
+            display: inline-block;
+            vertical-align:middle;
+        }
+        .fortycon{
+            vertical-align:middle;
+        }
     }
-    
-    &.uniform-nav-subnav{
-        z-index:1;
-        ul {
-            & > li {
-                vertical-align:middle;
-                & > *{
-                    padding-top: 6px;
-                    padding-bottom: 5px;
+    @include media($sm){
+        font-size: 1.2rem;
+        .nav{
+            & > a,
+            & > * > a,
+            .text{
+                padding-top:0.6em;
+                padding-bottom: 0.6em;
+                
+                &.active{
+                    color: $green;
+                    box-shadow: inset 2px 0 0 $green;
                 }
             }
         }
-    }
-}
-
-.uniform-nav.vertical{
-    ul {
-        width: 100%;
-        li {
+        .mobile-nav{
+            position:relative;
             display:block;
-            & > * {
-                display:block;
-                padding: 10px 20px;
-                &:hover{
-                    color: black;
-                    background:rgba($green-light, 0.3);
+            z-index: 2;
+        }
+        .non-mobile-nav{
+            z-index: 1;
+            position:fixed;
+            top: -100vh;
+            left: 0;
+            padding-top: 60px;
+            width: 100%;
+            height: 100vh;
+            background: white;
+            transition: top 0.2s;
+            overflow-y: auto;
+            .nav{
+                margin-bottom: 1em;
+            }
+            .uniformNav-subnav{
+                padding-top: 1em;
+            }
+            &.non-mobile-nav-left{
+                left: -100vw;
+                transition: left 0.2s;
+                width: auto;
+            }
+        }
+        button .fortycon{
+            transition: all 0.2s;
+        }
+        &.active{
+            .non-mobile-nav{
+                top: 0;
+                &.non-mobile-nav-left{
+                    left: 0;
+                    box-shadow: 0 0 10px rgba(black, 0.2);
                 }
             }
+            
+            button .fortycon{
+                transform: rotate(180deg);
+            }
+        }
+    }
+    .uniformNav-subnav{
+        font-size:1rem;
+        box-shadow:0 -1px 0 0 rgba(black, 0.15);
+    }
+}
+
+.uniformNav.vertical{
+    box-shadow: none;
+    .title{
+        font-weight: bold;
+    }
+    a{
+        display:block;
+        padding: 0.9em 1em;
+        margin: 0.1em 0;
+        &:hover{
+            color: black;
+            background:rgba($gray, 0.1);
+        }
+        &.active{
+            background: $green;
+            color: white;
+            border:none;
+            padding: 0.9em 1em;
+        }
+        &:first-of-type{
+            margin-top:0;
+        }
+        &:last-of-type{
+            margin-bottom: 0;
         }
     }
 }