uniform-ui 2.4.1 → 3.0.0.beta2

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

@@ -0,0 +1,83 @@
+.uniformPointer{
+    position:relative;
+    margin: 7px 0 0 0;
+    &:after{
+        clip-path: polygon(-45% -45%, 145% -45%, 145% 145%);
+        z-index: 1;
+        position:absolute;
+        top: 0;
+        left: 50%;
+        margin: -6px 0 0 -7px;
+        transform: rotate(-45deg);
+        width: 14px;
+        height: 14px;
+        overflow: hidden;
+        content: "";
+        border-style: solid;
+        border-width: inherit;
+        box-shadow: inherit;
+        background: inherit;
+        border: inherit;
+    }
+    // covers overlap with container
+    &:before {
+        content: '';
+        position: absolute;
+        background: inherit;
+        z-index: 2;
+        height: 2px;
+        width: 40px;
+        margin-left: -20px;
+        top: 0;
+        left: 50%;
+    }
+    &.-right{
+        margin: 0 7px 0 0;
+        &:after{
+            left: auto;
+            top: 50%;
+            right: 0;
+            margin: -7px -6px 0 0;
+            transform: rotate(45deg);
+        }
+        &:before {
+            margin-left: 0;
+            margin-top: -20px;
+            height: 40px;
+            width: 2px;
+            top: 50%;
+            right: 0;
+            left: auto;
+        }
+    }
+    &.-left{
+        margin: 0 0 0 7px;
+        &:after{
+            left: 0;
+            top: 50%;
+            margin: -7px 0 0 -6px;
+            transform: rotate(-135deg);
+        }
+        &:before {
+            margin-left: 0;
+            margin-top: -20px;
+            height: 40px;
+            width: 2px;
+            left: 0;
+            top: 50%;
+        }
+    }
+    &.-bottom{
+        margin: 0 0 7px 0;
+        &:after{
+            top: auto;
+            bottom: 0;
+            margin: 0 0 -6px -7px;
+            transform: rotate(-225deg);
+        }
+        &:before{
+            top: auto;
+            bottom: 0;
+        }
+    }
+}

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

@@ -1,147 +1,137 @@
-select.uniformSelect{
-    display:none;
-}
-
-.uniformSelect-edit{
-    @include text-overflow;
-    position:relative;
-    text-align: left;
-    padding-right: 1.8em;
+.uniformSelect{
+    --border-color: #{red(color('gray-40'))}, #{green(color('gray-40'))}, #{blue(color('gray-40'))};
+    appearance: none;
+    outline: none;
+    vertical-align: middle;
+    display: inline-grid;
+    grid-template-columns: auto auto;
+    grid-template-rows: auto;
+    grid-template-areas: "value indicator";
+    align-items: center;
+    padding: 0 0.25em;
+    background: white;
+    select{
+        display: none;
+    }
     &.active{
-        .uniformSelect-edit-icon{
+        box-shadow: 0 0 0 2px rgba(var(--focus-color), 1), inset 2px 2px 3px rgba(black, 0.2);
+        .uniformSelect-indicator{
             svg{
                 transform: rotate(180deg);
             }
         }
     }
-    .uniformSelect-edit-icon{
-        font-size:2em;
-        @include position-v-center();
-        right:0;
-        z-index:0;
-        line-height: 0;
-        svg{
-            fill: color('gray-darker');
-            transition: transform 0.2s;
-        }
-    }
-    &.-invert{
-        background: color('gray');
-        color: white;
-        border-color: color('gray-dark');
-        .uniformSelect-edit-icon{
-            svg {
-                fill: white;
-            }
-        }
-    }
-    .uniformSelect-selection{
-        font-size: 0.8em;
-        padding: 0.1em;
-        padding-left: 0.2em;
-        border: 1px solid color('gray');
-        background: color('gray-lighter');
-        display:inline-block;
-        border-radius: 0.25em;
-    }
-    .uniformSelect-remove{
-        display: inline-block;
-        width: 1em;
-        height: 0.8em;
-        margin-left: 0.25em;
-        position: relative;
-        &:after,
-        &:before{
-            content: "";
-            width: 1px;
-            height: 1em;
-            transform-origin: 50% 50%;
-            transform: rotate(-45deg);
-            background: color('gray');
-            position:absolute;
-            left: 50%;
-            top: 0;
-        }
-        &:before{
-            transform: rotate(45deg);
-        }
-        &:hover{
-            &:after,
-            &:before{
-                background: color('red');
-            }
-        }
+    &:focus{
+        box-shadow: 0 0 0 2px rgba(var(--focus-color), 1);
     }
 }
 
+.uniformSelect-placeholder,
+.uniformSelect-value {
+    grid-area: value;
+    white-space: nowrap;
+}
+.uniformSelect-placeholder{
+    opacity: 0;
+    user-select: none;
+}
+.uniformSelect-value{
+    z-index: 2;
+    text-align: left;
+}
+.uniformSelect-indicator{
+    padding-left: 0.25em;
+    grid-area: indicator;
+    svg{
+        width: 1.4em;
+        transition: transform 0.2s;
+    }
+}
 .uniformSelect-options{
-
-    box-shadow: 0 0 15px 1px rgba(black, 0.2), 0 0 2px 1px rgba(black, 0.1) ;
     background: white;
+    box-shadow: 0 0 15px 1px rgba(black, 0.2), 0 0 2px 1px rgba(black, 0.1);
     button{
         appearance: none;
         outline: none;
         border: none;
         background: none;
-        width: 100%;
-        padding: 0.5em;
+        display: block;
+        min-width: 100%;
+        padding: 0.5em 1.5em;
+        text-align: left;
+        position: relative;
+        &.hide{
+            display: none;
+        }
         &:hover{
             background: lighten(color('blue'), 45);
         }
+        &.active{
+            color: color('blue-60');
+            font-weight: bold;
+            &:after{
+                position: absolute;
+                left: 0.25em;
+                top: 50%;
+                transform: translateY(-50%);
+                background-image: icon-check(#{color('blue-40')});
+                background-size: contain;
+                content: '';
+                width: 1em;
+                height: 1em;
+            }
+        }
     }
-    
-    .uniformSelect-options-actions{
-        border-top: 1px solid color('gray');
-        border-bottom: 1px solid color('gray');
-        background: color('background');
+    .uniformSelect-actions{
+        border-top: 1px solid color('gray-20');
+        border-bottom: 1px solid color('gray-20');
+        background: darken(white, 5);
         padding: 0.5em;
         &:empty{
-            display:none;
+            display: none;
         }
     }
     .uniformSelect-show-all {
         color: color('blue');
         background: none;
+        text-align:center;
         &:hover{
             background: none;
         }
     }
     .uniformSelect-done{
         border-radius: 0.25em;
-        border: 1px solid color('gray');
+        border: 1px solid color('gray-20');
+        background: white;
+        text-align:center;
         background: white;
-    }
-}
-.uniformSelect-option{
-    position:relative;
-    cursor: pointer;
-    &.active{
-        box-shadow:none;
-        color: color('green-dark');
-        padding-left: 2.5em !important;
-        font-weight: bold;
-    }
-    .uniformSelect-option-icon{
-        fill: color('green');
-        position: absolute;
-        top: 0.2em;
-        left: 0.2em;
-        font-size: 1.5em;
     }
 }
 
-.uniformSelect-modal{
-    width: 100vw;
-    min-height: 100vh;
-    padding: 1em;
-    button{
-        margin-bottom: 0.5em;
-        border: 1px solid color('gray');
-        &.uniformSelect-done{
-            margin-bottom: 0;
-        }
+
+
+.uniformSelect-selection{
+    display: inline-flex;
+    align-items: center;
+    font-size: 0.8em;
+    margin: 0.2em 0;
+    padding: 0;
+    line-height: 1;
+    padding-left:0.5em;
+    background: darken(color('gray-10'), 5);
+    border-radius: 0.25em;
+    span{
+        flex: 1 1 auto;
     }
-    .uniformSelect-options-actions{
-        margin: 0 -1em;
+    .uniformSelect-remove{
+        padding: 0.2em;
+        flex: 0 1 auto;
+        svg {
+            width: 0.8em;
+            height: auto;
+        }
+        &:hover{
+            fill: color('red');
+        }
     }
 }

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

@@ -1,161 +1,54 @@
-@include size-rules('.table'){
-    display:table;
-    width:100%;
-    & > *,
-    .row > *{
-        display:table-cell;
-        float:none;
-        &.-top{
-            vertical-align:top;
-        }
-        &.-middle > *{
-            vertical-align:middle;
-        }
-    }
-    .row{
-        display:table-row;
-    }
-}
-.cell-top{
-    vertical-align: top;
-    td, th{
-        vertical-align: top;
-    }
-}
-
-.cell-middle{
-    vertical-align: middle;
-    td, th{
-        vertical-align: middle;
-    }
-}
+@include responsive-rule('.layout-fixed'){ table-layout: fixed;}
 
 .uniformTable{
     width:100%;
-    .row > *,
-    tr td,
+    
+    td,
     th {
         padding: 0.5em;
-        border-bottom: 1px solid color('gray-light');
     }
     
-    &.tight{
-        .row > *,
-        tr td,
-        th {
-            padding: 0.2em 0.5em;
+    tr + tr {
+        td,
+        th{
+            border-top-width: 1px;
         }
     }
     
-    &.tight-more{
-        .row > *,
-        tr td,
-        th {
-            padding: 0 0.5em;
+    &.-snug{
+        td,
+        th,
+        .table-cell {
+            padding: 0.2em 0.5em;
         }
     }
     
-    &.no-pad{
-        .row > *,
-        tr td,
-        th {
-            padding-left: 0;
-            padding-right: 0;
+    &.-tight{
+        td,
+        th,
+        .table-cell {
+            padding: 0 0.5em;
         }
     }
     
-    .head > *,
-    thead th{
-        color: color('gray-dark');
-        border-bottom: 1px solid color('gray');
-    }
-    
-    .head.dark > *,
-    thead.dark th{
-        background: lighten(color('background'), 2);
-    }
-    
-    tr.middle > td,
-    td.middle,
-    &.middle > *,
-    .middle{
-        vertical-align:middle;
-    }
-    
-    tr.bottom > td,
-    td.bottom,
-    &.bottom > *,
-    .bottom{
-        vertical-align:bottom;
-    }
-
-    tr.top > td,
-    td.top,
-    &.top > *,
-    .top{
-        vertical-align:top;
-    }
-    
-    &.hover{
-        tr:hover td{
-            background: lighten(color('blue'), 50);
+    &.-striped{
+        tr:nth-child(2n+1){
+            background-color: transparent;
         }
     }
     
-    .row:last-of-type,
-    tr:last-of-type{
-        td, th{
-            border-bottom: none;
-        }
-    }
-    &.invert{
-        .row > *,
-        td, th{
-            border-bottom-color: color('gray-dark');
-        }
-    }
-}
-
-.uniformTableDotLeaders{
-    line-height: 1;
-    table-layout: fixed;
-    & > * > td,
-    & > * > * > td,
-    & > * > th,
-    & > * > * > th{
-        padding-top:0.3em;
-        padding-bottom: 0.3em;
-        vertical-align:bottom;
-    }
-
-    & > * > td,
-    & > * > * > td{
-        padding-left:0.5em;
-    }
-
-    & > * > th,
-    & > * > * > th{
-        background: icon-circle(6, 8, 1, color('gray'));
-        background-repeat: repeat-x;
-        background-position: left bottom;
-        span{
-            background-color: white;
-            padding-right: 0.5em;
-            position: relative;
-        }
-    }
-    & > thead{
-        & > * > th{
-            background:none;
+    //----------------------------------------------------------------
+    //             Head
+    //----------------------------------------------------------------
+    thead{
+        tr:last-child{
+            border-bottom-width: 1px;
         }
     }
-    &.bg-background{
-        & > * > th,
-        & > * > * > th{
-            background-image:radial-gradient(black 1px, color('background') 0px);
-            span{
-                background-color: color('background');
-            }
-        }
+    
+    th{
+        font-weight: bold;
+        text-transform: uppercase;
+        font-size: 0.8em;
     }
 }