uniform-ui 2.4.1 → 3.0.0.beta2

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,20 @@
+//----------------------------------------------------------------
+// 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);
+    }
+}
+@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,7 +14,7 @@ body{
 a{
     color: color('blue');
     &:hover{
-        color: color('blue-dark');
+        color: color('blue-60');
     }
     &:visited{
         color: #6738e4;
@@ -28,15 +32,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 +78,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 +96,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
             }
         }
     }
 }
-

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

@@ -0,0 +1,53 @@
+//----------------------------------------------------------------
+//             Overflow
+//----------------------------------------------------------------
+.overflow-hidden{
+    overflow: hidden;
+}
+.overflow-y{
+    overflow-y: auto;
+}
+.overflow-y-scroll{
+    overflow-y: scroll;
+}
+.overflow-x{
+    overflow-x: auto;
+}
+
+//----------------------------------------------------------------
+//             Element Reset
+//----------------------------------------------------------------
+.reset{
+    outline: none;
+    appearance: none;
+    border: none;
+    background:none;
+    padding: 0;
+    margin: 0;
+    list-style:none;
+}
+
+//----------------------------------------------------------------
+//             Cursor
+//----------------------------------------------------------------
+@each $type in (
+auto
+default
+pointer
+wait
+text
+move
+not-allowed
+help
+grab
+) {
+    .cursor-#{$type}{
+        cursor: $type;
+    }
+}
+
+//----------------------------------------------------------------
+//             SVG
+//----------------------------------------------------------------
+@include responsive-rule('fill-current'){ fill: currentColor;}
+@include responsive-rule('stroke-current'){ stroke: currentColor;}