uniform-ui 2.4.1 → 3.0.0.beta8

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

@@ -1,24 +1,11 @@
-@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{
+    --border-opacity: 1;
+    --text-opacity: 1;
+    --bg-opacity: 0;
+    
+    --hover-color: #{toRGB(color('blue'))};
+    --active-color: #{toRGB(color('green-60'))};
+    --color: #{toRGB(color('blue'))};
     display: flex;
     flex-wrap: wrap;
     align-items: stretch;
@@ -29,100 +16,76 @@
     }
     
     & > * {
+        --text-opacity: 1;
         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-fill{
             flex: 1 1 auto;
         }
     }
     & > a{
         text-decoration: none;
+        color: rgba(var(--color), var(--text-opacity));
         &:hover{
-            color: color('blue');
-            border-bottom-color: color('blue');
+            color: rgba(var(--hover-color), 1);
+            border-left-color: rgba(var(--hover-color), var(--border-opacity));
+            border-bottom-color: rgba(var(--hover-color), var(--border-opacity));
         }
         &.active{
-            color: color('green-dark');
-            border-bottom-color: color('green-dark');
+            color: rgba(var(--active-color), 1);
+            border-left-color: rgba(var(--active-color), 1);
+            border-bottom-color: rgba(var(--active-color), 1);
         }
     }
-    &.-pad{
+    
+    &.-pills{
         & > * {
-            padding-top: 0.25em;
-            padding-bottom: 0.25em;
+            border: none;
+            border-radius: 0.25em;
+            padding: 0.25em 0.5em;
         }
-    }
-    &.-pad-more{
-        & > * {
-            padding-top: 0.5em;
-            padding-bottom: 0.5em;
+        & > * + * {
+            margin-left: 0.25em;
         }
-    }
-    
-    &.-vertical{
-        @include uniformNav-vertical();
-    }
-}
-
-.uniformMainNav{
-    position: relative;
-    background: white;
-    box-shadow:inset 0 -1px 0 0 rgba(black, 0.10);
-    color: color('gray');
-    .uniformNav{
-        & > * {
-            padding-top: 0.25em;
-            padding-bottom: 0.25em;
-            color: color('gray-dark');
+        & > a {
+            &:hover,
+            &.active{
+                --bg-opacity: 0.15;
+                background-color: rgba(var(--hover-color), var(--bg-opacity));
+            }
             &.active{
-                color: color('gray-darkest');
+                background-color: rgba(var(--active-color), var(--bg-opacity));
             }
         }
     }
-    
-    &.bg-none{
-        background: none;
-    }
-    
-    &.border-bottom-none,
-    &.border-none{
-        box-shadow: none;
-    }
-    
+
     &.-vertical{
-        box-shadow: none;
-        .uniformNav{
-            @include uniformNav-vertical();
+        flex-direction: column;
+        align-items: stretch;
+        & > * {
+            padding: 0.5em;
+            border-top-width: 0;
+            border-bottom-width: 0;
+            border-left-width: 2px;
+            border-right-width: 2px;
         }
-    }
-    
-    &.-invert{
-        box-shadow:inset 0 -1px 0 0 rgba(white, 0.10);
-        background: none;
-        color: rgba(white, 0.7);
-        .uniformNav{
-            & > a {
-                color: rgba(white, 0.6);
-                &:hover{
-                    color: white;
-                    border-bottom-color: color('blue-bright');
-                }
-                &.active{
-                    color: white;
-                    background: rgba(black, 0.15);
-                    border-bottom-color: color('green-light');
-                }
+        &.-pills{
+            & > * + * {
+                margin-left: 0;
+                margin-top: 0.1em;
             }
         }
-        &.border-bottom-none,
-        &.border-none{
-            box-shadow: none;
-        }
     }
+}
+
+@include color-rule('.uniformNav.-active') using ($color) {
+    --active-color: #{toRGB($color)};
+}
+@include color-rule('.uniformNav.') using ($color) {
+    --color: #{toRGB($color)};
 }

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');
+        }
     }
 }