uniform-ui 2.4.1 → 3.0.0.beta8

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;
     }
 }

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

@@ -1,41 +1,56 @@
 .uniformThumb{
     display:inline-block;
-    background: color('gray-darker');
+    background: color('gray-80');
     position:relative;
     color: white;
-    img{
+    text-align:center;
+    & > * {
+        display: block;
         position:absolute;
-        top:0;
-        left: 0;
         width: 100%;
+        position:absolute;
+        top:50%;
+        transform: translateY(-50%);
+    }
+    & > img {
         height: 100%;
         object-fit: cover;
     }
-    .text{
-        display:block;
-        @include position-v-center;
-        left: 0;
-        width: 100%;
-        text-align:center;
+    &.-contain {
+        & > img {
+            object-fit: contain;
+        }
     }
 }
-@include size-rules(".aspect-4x3"){
-    padding-top: 75%;
+@include responsive-rule(".aspect-4x3"){
+    &::before{
+        content: "";
+        display: block;
+        padding-top: 75%;
+        padding-left: 75%;
+    }
 }
-@include size-rules(".aspect-2x1"){
-    padding-top: 50%;
+@include responsive-rule(".aspect-2x1"){
+    &::before{
+        content: "";
+        display: block;
+        padding-top: 50%;
+        padding-left: 50%;
+    }
 }
-@include size-rules(".aspect-square"){
-    padding-top:100%;
+@include responsive-rule(".aspect-16x9"){
+    &::before{
+        content: "";
+        display: block;
+        padding-top: 56.25%;
+        padding-left: 56.25%;
+    }
 }
-
-@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
-    .uniformThumb {
-        overflow: hidden;
-        img {
-            @include position-center;
-            width: auto;
-            height: 100%;
-        }
+@include responsive-rule(".aspect-square"){
+    &::before{
+        content: "";
+        display: block;
+        padding-top:100%;
+        padding-left:100%;
     }
 }

data/lib/assets/stylesheets/uniform/components/z-input.scss

@@ -0,0 +1,26 @@
+//----------------------------------------------------------------
+// filename is prepended with "z" so that it is imported after
+// uniformSelect so that it modifies uniformSelect
+//----------------------------------------------------------------
+
+.uniformInput{
+    border-width: 1px;
+    padding: 0.5em;
+    outline: none;
+    appearance: none;
+    transition: box-shadow 100ms ease-in;
+    &:focus,
+    &[focus]{
+        border-color: rgba(var(--focus-color), 1);
+        box-shadow: 0 0 0 2px rgba(var(--focus-color), 1);
+    }
+}
+
+select.uniformInput {
+    padding-right: 1em;
+    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-down"><polyline points="6 9 12 15 18 9"></polyline></svg>') no-repeat center right;
+}
+
+@include color-rule('.focus') using ($color) {
+    --focus-color: #{red($color)}, #{green($color)}, #{blue($color)};
+}

data/lib/assets/stylesheets/uniform/defaults.scss

@@ -1,3 +1,7 @@
+html, body{
+    margin: 0;
+    padding: 0;
+}
 html{
     font-size: 14px;
 }
@@ -10,10 +14,7 @@ body{
 a{
     color: color('blue');
     &:hover{
-        color: color('blue-dark');
-    }
-    &:visited{
-        color: #6738e4;
+        color: color('blue-60');
     }
 }
 h1,
@@ -28,15 +29,14 @@ ol,
 dl,
 pre{
     margin: 0;
-    margin-bottom: 1em; // might want to do rem
-    &:last-child{
-        margin-bottom: 0;
-    }
 }
 
 ul,
 ol,
 dl{
+    list-style: none;
+    margin: 0;
+    padding: 0;
     ul,
     ol,
     dl{
@@ -75,8 +75,14 @@ input,
 select,
 textarea,
 button{
+    border-width: 1px;
     margin: 0;
     line-height: inherit;
+    font: inherit;
+    text-align: inherit;
+    text-transform: inherit;
+    letter-spacing: inherit;
+    line-height: inherit;
 }
 
 [hidden] {
@@ -87,8 +93,23 @@ time{
     @include text-overflow;
 }
 
+a,
 button{
-    font-family: $system-font;
-    color: color('gray-darkest');
     cursor: pointer;
+}
+button{
+    font-family: $base-font;
+    font-size: 1rem;
+}
+
+img,
+svg,
+video,
+canvas,
+audio,
+iframe,
+embed,
+object {
+  display: block;
+  vertical-align: middle;
 }

data/lib/assets/stylesheets/uniform/functions.scss

@@ -1,3 +1,34 @@
+@function toRGB($color){
+    @return red($color), green($color), blue($color);
+}
+@function color($key) {
+    @return map-get($color_spectrum, $key);
+}
+@function size($key) {
+    @return map-get($sizes, $key);
+}
+
+@function mapToString($map) {
+    $string: '"';
+    
+    @each $key, $value in $map {
+        $string: str-insert($string, $key, -1);
+        $string: str-insert($string, "/", -1);
+        $string: str-insert($string, $value, -1);
+        $string: str-insert($string, ",", -1);
+    }
+    $string: str-slice($string, 1, -2);
+    $string: str-insert($string, '"', -1);
+    
+    @return $string;
+}
+
+//----------------------------------------------------------------
+//             Icons
+//----------------------------------------------------------------
+
+
+
 /// Replace `$search` with `$replace` in `$string`
 /// @author Hugo Giraudel
 /// @param {String} $string - Initial string
@@ -38,8 +69,6 @@
     @return url("data:image/svg+xml;charset=utf8,#{uri-encode($svg)}");
 }
 
-
-
 @function icon-check($color: #000000){
     @return svg-encode('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32" viewBox="0 0 32 32"><path d="M28.998 8.531l-2.134-2.134c-0.394-0.393-1.030-0.393-1.423 0l-12.795 12.795-6.086-6.13c-0.393-0.393-1.029-0.393-1.423 0l-2.134 2.134c-0.393 0.394-0.393 1.030 0 1.423l8.924 8.984c0.393 0.393 1.030 0.393 1.423 0l15.648-15.649c0.393-0.392 0.393-1.030 0-1.423z" fill="#{$color}"></path></svg>');
 }
@@ -52,10 +81,6 @@
     @return svg-encode('<svg version="1.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="#{$width}px" height="#{$height}px" viewBox="0 0 #{$width} #{$height}" enable-background="new 0 0 #{$width} #{$height}" xml:space="preserve"><circle cx="#{$width / 2}" cy="#{$height / 2}" r="#{$radius}" fill="#{$color}"/></svg>');
 }
 
-@function color($key) {
-    @return map-get($colors, $key);
-}
-
 @function icon-x-block($size: 32, $color: #000000){
     @return svg-encode('<svg width="#{$size}px" height="#{$size}px"  fill="#{$color}" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"	 viewBox="0 0 10.5 10.5" style="enable-background:new 0 0 10.5 10.5;" xml:space="preserve"><path d="M8.1,1.3C8.4,1,8.9,1,9.2,1.3c0,0,0,0,0,0c0.3,0.3,0.3,0.8,0,1.1L2.4,9.3c-0.3,0.3-0.8,0.3-1.1,0S1,8.4,1.3,8.1L8.1,1.3z"/><path d="M9.2,8.1c0.3,0.3,0.4,0.8,0.1,1.1c0,0,0,0,0,0l0,0c-0.3,0.3-0.8,0.3-1.1,0L1.3,2.4C1,2.1,0.9,1.6,1.3,1.3c0,0,0,0,0,0l0,0	C1.6,1,2.1,1,2.4,1.3L9.2,8.1z"/></svg>');
-}
+}

data/lib/assets/stylesheets/uniform/mixins.scss

@@ -1,3 +1,4 @@
+@import 'uniform/variables';
 
 @mixin text-overflow($inherit:false){
     @if $inherit {
@@ -23,94 +24,146 @@
     }
 }
 
-//----------------------------------------------------------------
-//             Position
-//----------------------------------------------------------------
-@mixin position-v-center(){
-    position:absolute;
-    top:50%;
-    transform: translateY(-50%);
-}
-@mixin position-h-center(){
-    position:absolute;
-    left:50%;
-    transform: translateX(-50%);
-}
-@mixin position-center(){
-    position:absolute;
-    left:50%;
-    top:50%;
-    transform: translate(-50%, -50%);
-}
-@mixin position-fill() {
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-}
-
 
 //----------------------------------------------------------------
-//             Sizes Media Queries
+//             Responsive
 //----------------------------------------------------------------
+
 @mixin media($query) {
     @media only screen and (#{$query}){
         @content;
     }
 }
 
-@mixin size-rule($breakpoint) {
-    @include media(map-get($breakpoints, $breakpoint)){
-        @content
-    }
-    .#{$breakpoint}-size{
-        @content
+@mixin breakpoint($breakpoint){
+    @media only screen and (map-get($breakpoints, $breakpoint)){
+        @content;
     }
 }
 
-@mixin size-rules($selector){
-    #{$selector}{
+@mixin responsive-rule($selector) {
+    @if str-index($selector, '.') == 1 {
+        $selector: str-slice($selector, 2, -1);
+    }
+    
+    .#{$selector}{
         @content
     }
-    @each $key, $value in $breakpoints {
-        @include media($value){
-            #{$selector}-#{$key}{
+    @if $include_child_utilities {
+        @include child-rule($selector) {
+            @content
+        }
+    }
+    
+    @each $breakpoint, $breakpoint_query in $breakpoints {
+        @include media($breakpoint_query){
+            .#{$breakpoint}\:#{$selector}{
                 @content
             }
         }
-        .#{$key}-size #{$selector}-#{$key}{
+        @if $include_breakpoint_container {
+            .#{$breakpoint}-container{
+                .#{$breakpoint}\:#{$selector}{
+                    @content
+                }
+            }
+        }
+    }
+}
+
+@mixin child-rule ($selector) {
+    .#{$selector}-\>{
+        & > * {
             @content
         }
     }
 }
 
-@mixin sizes($selector, $attributes){
-    @each $attribute in $attributes {
-        @include size-rules("#{$selector}"){
-            #{$attribute}: map-get($sizes, 'base');
+//----------------------------------------------------------------
+//             Color
+//----------------------------------------------------------------
+@mixin color-rule($selector) {
+    @if str-index($selector, '.') == 1 {
+        $selector: str-slice($selector, 2, -1);
+    }
+    
+    @each $name, $value in $color_spectrum {
+        .#{$selector}-#{$name}{
+            @content($value)
         }
-        @each $key, $value in $sizes {
-            @include size-rules("#{$selector}-#{$key}"){
-                #{$attribute}: $value;
-                @content
+        
+        @include pseudo-class-rule("#{$selector}-#{$name}", false){
+            @content($value)
+        }
+        
+        @if $include_child_utilities {
+            @include child-rule($selector) {
+                @content($value)
             }
         }
-        @include size-rules("#{$selector}-none"){
-            #{$attribute}: 0 !important;
-            @content
+    }
+}
+
+
+//----------------------------------------------------------------
+//             Size
+//----------------------------------------------------------------
+
+@mixin size-rule($selector){
+    @if str-index($selector, '.') == 1 {
+        $selector: str-slice($selector, 2, -1);
+    }
+    
+    $key: $selector;
+    @if str-index($key, '-') {
+        $key: str-slice($key, 1, str-index($key, '-') - 1);
+    }
+    
+    @each $size, $value in map-get($sizes, $key) {
+        $class: "#{$selector}-#{$size}";
+        @if $size == '' {
+            $class: $selector;
+        }
+        @include responsive-rule($class){
+            @content($value)
         }
     }
 }
 
-@mixin colors($selector, $attributes){
-    @each $attribute in $attributes {
-        @each $key, $value in $colors {
-            @include size-rules("#{$selector}-#{$key}"){
-                #{$attribute}: $value;
+//----------------------------------------------------------------
+//             Pseudo Classes
+//----------------------------------------------------------------
+
+@mixin pseudo-class-rule($selector, $declare_self: true){
+    @if str-index($selector, '.') == 1 {
+        $selector: str-slice($selector, 2, -1);
+    }
+    @if $declare_self {
+       .#{$selector} {
+           @content
+       } 
+    }
+
+    @each $pseudo-selector, $pseudo-class in (
+        active: active,
+        focus: focus,
+        hover: hover,
+        checked: checked,
+        focus-within: focus-within,
+        first: first-child,
+        last: last-child
+    ) {
+        @if index($include_pseudo_utilities, $pseudo-class) {
+            .#{$pseudo-selector}\:#{$selector}:#{$pseudo-class} {
+                @content
+            }
+        }
+    }
+    @if index($include_pseudo_utilities, group-hover) {
+        .group:hover{
+            .group-hover\:#{$selector} {
                 @content
             }
         }
     }
 }
-