uniform-ui 0.6 → 1.0

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

@@ -1,123 +1,91 @@
-.uniform-row{
-    line-height:1.3;
-    font-size: 13px;
-    border:1px solid $gray-light;
-    border-bottom:none;
-    min-height: 49px; // two text lines with padding
-    position:relative;
-    overflow:hidden;
-    display:block;
-    color: $gray;
+.uniformRow{
+    background: white;
+    padding: 0.5em;
+    padding-bottom: 1em;
+    border: 1px solid $gray-light;
+    margin: 0.5em 0;
+    text-decoration: none;
+    &.nest{
+        border-left: none;
+        border-right: none;
+    }
+    &[data-href]{
+        cursor: pointer;
+    }
     &:hover{
-        background-color: lighten($blue-light, 15);
+        background: lighten($blue, 50);
     }
-    a:visited{
-        color:#6738e4;
+    a{
+        text-decoration: none;
     }
-    &:last-of-type{
-        border-bottom:1px solid $gray-light;
+    .title{
+        font-weight:bold;
     }
-    .uniform-row-container{
-        overflow:hidden;
-        display: block;
-        & > *{
-            display:block;
-            padding: 8px 12px;
-            overflow:hidden;
-            & > .pad {
-                display:block;
-                padding:8px 0;
-            }
-        }
+    .subtle{
+        font-size: 0.9em;
+        color: lighten($gray, 20);
+        @include text-overflow;
     }
-    .uniform-row-secondary{
-        font-weight:normal;
+    img{
+        height: auto;
+        width: 100%;
         display:block;
-        font-size:0.9em;
-        color:lighten($gray, 30);
-        display: block;
     }
-    .uniform-row-avatar{
-        vertical-align:top;
-        text-align:center;
+    .avatar{
+        align-self: stretch;
+        background: darken($gray-light, 10);
         position:relative;
-        color:darken($background, 30);
-        background-color:darken($background, 30);
-        float:left;
         img{
-            min-width:70px;
-            background-color: $gray;
-            display: block;
+            position:absolute;
+            top:0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
         }
-    }
-    @include media($xs){
-        .uniform-row-container{
-            & > div > a {
-                padding-top:0;
-                padding-bottom:8px;
-            }
+        .fortycon{
+            font-size: 100px;
+            color: white;
+            opacity: 0.7;
         }
-        .uniform-row-avatar{
-            width:33%;
-            img {
-                width: 100%;
-                height: auto;
-            }
+        .avatar-text{
+            display:block;
+            @include vertical-middle;
+            left: 0;
+            width: 100%;
+            text-align:center;
         }
     }
-}
-
-.uniform-row-header{
-    position:relative;
-    overflow:visible !important;
-    line-height:1em;
-    font-size:0.85em;
-    padding:3px !important;
-    font-weight:normal;
-    border-bottom:2px solid $gray-light;
-    .sort-label{
-        text-align:right;
-        padding:7px 10px;
-        padding-bottom:3px;
-        text-transform:uppercase;
-        color:lighten($gray, 30);
-        vertical-align:bottom;
-        white-space:nowrap;
-    }
-    .col-label {
-        font-weight:bold;
-        text-transform:uppercase;
-        color:$gray;
-    }
-    .fortycon {
-        margin-top:-2px;
-        margin-right:2px;
-        color:darken($background, 20);
-        font-size:1.2em;
-    }
-    .details {
-        overflow:hidden;
-        & > div{
-            padding:0;
-            & > * {
-                text-decoration:none;
+    @include media($sm){
+        .avatar{
+            margin-bottom: 0.5em;
+            .avatar-container{
+                padding-top: 50%;
                 display:block;
-                padding:7px 6px;
-                white-space:nowrap;
-                border-radius:3px;
             }
-            & > a:hover {
-                background:lighten($blue-light, 10);
+        }
+        .name{
+            margin-bottom: 0.5em;
+        }
+    }
+    @include media($md){
+        margin: 0;
+        margin-bottom: -1px;
+        padding: 0;
+        & > * {
+            padding-top: 0.5em;
+            padding-bottom: 0.5em;
+            &.no-gutter{
+                padding: 0;
             }
         }
-        & > .active {
-            background:none !important;
+        .avatar{
             .fortycon{
-                color:black;
+                padding: 0;
+                font-size: 36px;
             }
-            & > * {
-                color:black;
-                background:darken(white, 10);
+            .avatar-text{
+                padding: 0;
             }
         }
     }

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

@@ -0,0 +1,98 @@
+select.uniformSelect{
+    display:none;
+}
+
+.uniformSelect-edit{
+    @include text-overflow;
+    position:relative;
+    &:after{
+        color:$gray;
+        font-size:1.3em;
+        content:\25bc;
+        @include vertical-middle();
+        right:0.3em;
+        z-index:0;
+    }
+}
+
+.uniformSelect-options{
+    @include text-overflow;
+    position: absolute;
+    background: white;
+    z-index: 9999;
+    box-shadow: 0 0 3px 2px rgba(black, 0.2);
+    clip-path: inset(0px -10px -10px -10px);
+    button{
+        appearance: none;
+        outline: none;
+        border: none;
+        background: none;
+        width: 100%;
+        padding: 0.5em;
+        &:hover{
+            background: lighten($blue, 45);
+        }
+    }
+    
+    .uniformSelect-options-actions{
+        border-top: 1px solid $gray-light;
+        border-bottom: 1px solid $gray-light;
+        background: $background;
+        padding: 0.5em;
+    }
+    .uniformSelect-show-all {
+        color: $blue;
+        background: none;
+        &:hover{
+            background: none;
+        }
+    }
+    .uniformSelect-done{
+        border-radius: 0.25em;
+        border: 1px solid $gray-light;
+        background: white;
+    }
+}
+.uniformSelect-option{
+    position:relative;
+    padding-right: 2.5em !important;
+    cursor: pointer;
+    &.active{
+        box-shadow:none;
+        color: $green-dark;
+        &:after{
+            color: $green;
+            position: absolute;
+            content: \2714;
+            top: 0.2em;
+            right: 0.2em;
+            font-size: 1.5em;
+            
+        }
+    }
+}
+
+@include media($sm){
+    .uniformSelect-options{
+        top: 0 !important;
+        left: 0 !important;
+        min-height: 100vh;
+        width: 100%;
+        padding: 1em;
+        button{
+            margin-bottom: 0.5em;
+            border: 1px solid lighten($gray, 40);
+            &.uniformSelect-done{
+                margin-bottom: 0;
+            }
+        }
+        .uniformSelect-options-actions{
+            margin: 0 -1em;
+        }
+    }
+    body.uniformModal-hideBody{
+        & > *:not(.uniformSelect-options) {
+            position: fixed;
+        }
+    }
+}

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

@@ -0,0 +1,83 @@
+.table{
+    display:table;
+    width:100%;
+    & > *,
+    .row > *{
+        display:table-cell;
+        float:none;
+        &.top{
+            vertical-align:top;
+        }
+        &.middle > *{
+            vertical-align:middle;
+        }
+    }
+    .row{
+        display:table-row;
+    }
+    
+    @include apply-media-sizes('&.break'){
+        & > *,
+        .row > *{
+            display:block;
+            float:inherit;
+        }
+        .row{
+            display:block;
+        }
+    }
+}
+
+.uniformTable{
+    width:100%;
+    .row > *,
+    tr td,
+    th {
+        padding: 0.5em;
+        border-bottom: 1px solid $gray-light;
+    }
+    
+    .head > *,
+    thead th{
+        color: lighten($gray, 20);
+        border-bottom: 1px solid darken($gray-light, 20) !important;
+    }
+    
+    .head.dark > *,
+    thead.dark th{
+        background: lighten($background, 2);
+    }
+    
+    tr.middle > td,
+    td.middle,
+    &.middle > *,
+    .middle{
+        vertical-align:middle;
+    }
+
+    tr.top > td,
+    td.top,
+    &.top > *,
+    .top{
+        vertical-align:top;
+    }
+    
+    &.hover{
+        tr:hover td{
+            background: lighten($blue, 50);
+        }
+    }
+    
+    .row:last-of-type,
+    tr:last-of-type{
+        td, th{
+            border-bottom: none;
+        }
+    }
+    &.invert{
+        .row > *,
+        td, th{
+            border-bottom-color: lighten($gray, 10);
+        }
+    }
+}

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

@@ -1,32 +1,45 @@
-// override for .nav-tab
-.uniform-tabs{
-    border:none;
-    & > li {
-        margin-left:10px;
-        margin-right:10px;
-        & > a{
-            border:none;
-            padding-left:0;
-            padding-right:0;
-            border-bottom: 3px solid transparent;
-            color: lighten($gray, 20);
-            &:hover{
-                background:none;
+.uniformTabs{
+    border-bottom: 1px solid darken($background, 10);
+    white-space: nowrap;
+    a{
+        display:inline-block;
+        margin-bottom: -1px;
+        padding: 0.5em 1em;
+        border-bottom: 2px solid transparent;
+        color: $gray;
+        text-decoration: none;
+        cursor: pointer;
+        &:hover{
+            color: $blue;
+            .uniformLabel.fill{
+                background: $blue ;
             }
         }
-        &:first-of-type{
-            margin-left:0;
-        }
-        &:last-of-type{
-            margin-right:0;
+        &.active{
+            border-color: $green-dark;
+            color: $green-dark;
+            .uniformLabel.fill{
+                background: $green-dark ;
+            }
         }
-        &.active > a,
-        &.active > a:hover,
-        &.active > a:focus{
-            color:$green-dark;
-            border:none;
-            background:none;
-            border-bottom: 3px solid $green;
+    }
+    &.center{
+        text-align:center;
+    }
+    &.border-fix{
+        margin-bottom: -1px;
+    }
+    &.invert{
+        border-bottom-color: rgba($background, 0.4);
+        a{
+            color: white;
+            &:hover{
+                color: $blue-light;
+            }
+            &.active{
+                color: $green-light;
+                border-color: $green-light;
+            }
         }
     }
 }

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

@@ -1,32 +1,20 @@
-.uniform-tile{
-    border:1px solid darken($background, 15);
-    border-radius:3px;
-    margin-top:20px;
-    margin-bottom:20px;
-    overflow:hidden;
+.uniformTile{
+//  TODO remove extension of row
+    @extend .uniformRow;
+    margin: 0;
+    margin-bottom: -1px;
+    margin-right: -1px;
+    
+    padding: 1em !important;
+    
     .avatar{
-        img{
-            width:100%;
-            height:auto;
-        }
+        padding: 0;
     }
-    a{
-        color:$gray;
-        text-decoration:none;
+    .avatar-container{
+        display:block;
+        padding-top: 66%;
     }
-    .title{
-        vertical-align:middle;
-        font-size:12px;
-        padding-top:10px;
-        padding-bottom:10px;
-        .name{
-            font-size:16px;
-            margin-bottom:5px;
-        }
-        .company{
-            font-weight:bold;
-        }
-        .category{
-        }
+    &.pad-more{
+        padding: 2em !important;
     }
 }