uniform-ui 1.0 → 2.2.1

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

@@ -0,0 +1,122 @@
+select.uniformSelect{
+    display:none;
+}
+
+.uniformSelect-edit{
+    @include text-overflow;
+    position:relative;
+    text-align: left;
+    padding-right: 1.8em;
+    &.active{
+        z-index: 10000;
+        .uniformSelect-edit-icon{
+            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');
+            transition: transform 0.2s;
+        }
+    }
+    &.-invert{
+        background: color('gray');
+        color: white;
+        border-color: color('gray-dark');
+        .uniformSelect-edit-icon{
+            svg {
+                fill: white;
+            }
+        }
+    }
+}
+
+.uniformSelect-options{
+    @include text-overflow;
+    position: absolute;
+    background: white;
+    z-index: 9999;
+    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;
+        &:hover{
+            background: lighten(color('blue'), 45);
+        }
+    }
+    
+    .uniformSelect-options-actions{
+        border-top: 1px solid color('gray-light');
+        border-bottom: 1px solid color('gray-light');
+        background: color('background');
+        padding: 0.5em;
+        &:empty{
+            display:none;
+        }
+    }
+    .uniformSelect-show-all {
+        color: color('blue');
+        background: none;
+        &:hover{
+            background: none;
+        }
+    }
+    .uniformSelect-done{
+        border-radius: 0.25em;
+        border: 1px solid color('gray-light');
+        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;
+    }
+}
+
+@include size-rule('sm'){
+    .uniformSelect-options{
+        top: 0 !important;
+        left: 0 !important;
+        min-height: 100vh;
+        width: 100vw;
+        padding: 1em;
+        button{
+            margin-bottom: 0.5em;
+            border: 1px solid lighten(color('gray'), 40);
+            &.uniformSelect-done{
+                margin-bottom: 0;
+            }
+        }
+        .uniformSelect-options-actions{
+            margin: 0 -1em;
+        }
+    }
+    body.uniformModal-hideBody{
+        & > *:not(.uniformSelect-options):not(.uniformDropdown-dropdown) {
+            position: fixed;
+        }
+    }
+}

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

@@ -0,0 +1,127 @@
+@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;
+    }
+}
+
+.uniformTable{
+    width:100%;
+    .row > *,
+    tr td,
+    th {
+        padding: 0.5em;
+        border-bottom: 1px solid color('gray-light');
+    }
+    
+    &.tight{
+        .row > *,
+        tr td,
+        th {
+            padding: 0.2em 0.5em;
+        }
+    }
+    
+    &.tight-more{
+        .row > *,
+        tr td,
+        th {
+            padding: 0 0.5em;
+        }
+    }
+    
+    &.no-pad{
+        .row > *,
+        tr td,
+        th {
+            padding-left: 0;
+            padding-right: 0;
+        }
+    }
+    
+    .head > *,
+    thead th{
+        color: lighten(color('gray'), 20);
+        border-bottom: 1px solid darken(color('gray-light'), 20) !important;
+    }
+    
+    .head.dark > *,
+    thead.dark th{
+        background: lighten(color('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(color('blue'), 50);
+        }
+    }
+    
+    .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, th{
+        padding: 0.3em 0;
+    }
+    td{
+        vertical-align:bottom;
+        padding-left:0.5em;
+    }
+    th{
+        background: url("data:image/svg+xml; utf8,#{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;
+        }
+    }
+    &.bg-background{
+        th{
+            background-image:radial-gradient(black 1px, color('background') 0px);
+            span{
+                background-color: color('background');
+            }
+        }
+    }
+}

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

@@ -0,0 +1,41 @@
+.uniformThumb{
+    display:inline-block;
+    background: darken(color('gray-light'), 10);
+    position:relative;
+    color: white;
+    .aspect-4x3{
+        padding-top: 75%;
+    }
+    .aspect-2x1{
+        padding-top: 50%;
+    }
+    .aspect-square{
+        padding-top:100%;
+    }
+    img{
+        position:absolute;
+        top:0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+    }
+    .text{
+        display:block;
+        @include position-v-center;
+        left: 0;
+        width: 100%;
+        text-align:center;
+    }
+}
+
+@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
+    .uniformThumb {
+        overflow: hidden;
+        img {
+            @include position-center;
+            width: auto;
+            height: 100%;
+        }
+    }
+}

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

@@ -0,0 +1,63 @@
+.uniformTooltip{
+    position:relative;
+    cursor: pointer;
+    &.active{
+        z-index:2;
+    }
+}
+.uniformTooltip-popup{
+    display:none;
+    position: absolute;
+    background: white;
+    border: 1px solid color('gray-light');
+    padding: 0.5em;
+    opacity: 0;
+    bottom: 200%;
+    left: -1.5em;
+    margin: 0.5em;
+    z-index: 1;
+    color: color('gray');
+    font-size:0.9em;
+    border-radius: 0.25em;
+    max-width: 30vw;
+    transition: left 0.2s ease-in, top 0.2s ease-in, bottom 0.2s ease-in, opacity 0.2s ease-in;
+    &.-reveal{
+        bottom: 100%;
+        opacity: 1;
+        &.-align-bottom{
+            top: 100%;
+        }
+    }
+    &.-align-bottom{
+        top: 200%;
+        bottom: auto;
+        .uniformTooltip-pointer{
+            top: -1em;
+            &:after{
+                top: 85%;
+            }
+        }
+    }
+    p:last-child{
+        margin-bottom: 0;
+    }
+    .uniformTooltip-pointer{
+        position:absolute;
+        top: 100%;
+        left: 1em;
+        width: 1em;
+        height: 1em;
+        overflow: hidden;
+        &:after{
+            content: "";
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            background: white;
+            transform: rotate(-45deg);
+            top: -85%;
+            left: 0;
+            border: 1px solid color('gray-light');
+        }
+    }
+}

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

@@ -0,0 +1,11 @@
+.square-icon{
+    display: inline-block;
+    height: 1em;
+    width: 1em;
+    border: 1px solid color('gray');
+    border-radius: 0.1em;
+    vertical-align:middle;
+    &.gray-light{
+        border-color: lighten(color('gray'), 40);
+    }
+}

data/{vendor → lib}/assets/stylesheets/uniform/defaults.scss

@@ -8,9 +8,9 @@ body{
     box-sizing: border-box;
 }
 a{
-    color:$blue;
+    color: color('blue');
     &:hover{
-        color:$blue-dark;
+        color: color('blue-dark');
     }
     &:visited{
         color: #6738e4;
@@ -29,6 +29,9 @@ dl,
 pre{
     margin: 0;
     margin-bottom: 1em; // might want to do rem
+    &:last-child{
+        margin-bottom: 0;
+    }
 }
 
 ul,
@@ -78,7 +81,7 @@ button{
 
 #{$text-inputs},
 textarea{
-    border:1px solid lighten($gray, 40);
+    border:1px solid lighten(color('gray'), 40);
 }
 
 [hidden] {
@@ -91,6 +94,6 @@ time{
 
 button{
     font-family: $system-font;
-    color: $gray;
+    color: color('gray');
     cursor: pointer;
 }

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

@@ -0,0 +1,31 @@
+/// Replace `$search` with `$replace` in `$string`
+/// @author Hugo Giraudel
+/// @param {String} $string - Initial string
+/// @param {String} $search - Substring to replace
+/// @param {String} $replace ('') - New value
+/// @return {String} - Updated string
+@function str-replace($string, $search, $replace: '') {
+    $index: str-index($string, $search);
+  
+    @if $index {
+        @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
+    }
+  
+    @return $string;
+}
+
+@function icon-check($color: #000000){
+    @return '<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>';
+}
+
+@function icon-x($size: 32, $color: #000000){
+    @return url("data:image/svg+xml; utf8,<svg version='1.2' baseProfile='tiny' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='#{$size}px' height='#{$size}px' viewBox='0 0 64 64' xml:space='preserve' fill='#{$color}'><g><rect x='-2.352' y='29.385' transform='matrix(0.7071 0.7071 -0.7071 0.7071 32.3545 -14.3899)' width='71.799' height='4.95'/></g><g><rect x='-2.374' y='29.376' transform='matrix(0.7071 -0.7071 0.7071 0.7071 -12.7023 33.0352)' width='71.799' height='4.95'/></g></svg>");
+}
+
+@function icon-circle($width: 2, $height: 2, $radius: 1, $color: #000000){
+    @return '<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);
+}

data/lib/assets/stylesheets/uniform/helpers/border.scss

@@ -0,0 +1,19 @@
+.border{
+    border: 1px solid color('gray-light');
+}
+@include colors('.border', 'border-color'){
+    border-width: 1px;
+    border-style: solid;
+}
+
+@each $direction in 'top' 'right' 'bottom' 'left' {
+    @include size-rules('.border-#{$direction}'){
+        border-#{$direction}-color: color('gray-light') !important;
+        border-#{$direction}-style: solid;
+        border-#{$direction}-width: 1px;
+    }
+    @include colors('.border-#{$direction}', 'border-#{$direction}-color'){
+        border-#{$direction}-width: 1px;
+        border-#{$direction}-style: solid;
+    }
+}

data/lib/assets/stylesheets/uniform/helpers/colors.scss

@@ -0,0 +1,23 @@
+@each $key, $value in $colors {
+    .text-#{$key} {               color: $value !important;}
+    .a-hover-#{$key} a:hover {    color: $value !important;}
+    .hover-#{$key} :hover {       color: $value !important;}
+    .bg-#{$key} {                 background-color: $value !important;}
+    .a-#{$key} a {
+        color: $value;
+        &:hover{
+            color: lighten($value, 20);
+        }
+        &:visited{
+            color: $value;
+        }
+    }
+}
+
+@for $i from 1 through 20 {
+    .opacity-#{$i * 5}     { opacity: #{$i * 5 / 100.0}; }
+}
+
+.bg-none{
+    background: transparent;
+}

data/lib/assets/stylesheets/uniform/helpers/margin.scss

@@ -0,0 +1,27 @@
+//----------------------------------------------------------------
+//             Margin
+//----------------------------------------------------------------
+
+@include sizes('.margin', 'margin');
+@include sizes('.margin-v', ('margin-top' 'margin-bottom'));
+@include sizes('.margin-h', ('margin-left' 'margin-right'));
+@each $direction in 'top' 'right' 'bottom' 'left' {
+    @include sizes('.margin-#{$direction}', 'margin-#{$direction}');
+    .margin-#{$direction}-nest{
+        margin-#{$direction}: -1em;
+    }
+}
+@include size-rules('.margin-nest'){
+    margin: -1em;
+}
+@include size-rules('.margin-v-nest'){
+    margin-top: -1em;
+    margin-bottom: -1em;
+}
+@include size-rules('.margin-h-nest'){
+    margin-left: -1em;
+    margin-right: -1em;
+}
+@include size-rules('.margin-nest-half'){
+    margin: -0.5em;
+}

data/lib/assets/stylesheets/uniform/helpers/padding.scss

@@ -0,0 +1,9 @@
+//----------------------------------------------------------------
+//             Pad
+//----------------------------------------------------------------
+@include sizes('.pad', 'padding');
+@include sizes('.pad-v', ('padding-top' 'padding-bottom'));
+@include sizes('.pad-h', ('padding-left' 'padding-right'));
+@each $direction in 'top' 'right' 'bottom' 'left' {
+    @include sizes('.pad-#{$direction}', 'padding-#{$direction}');
+}

data/lib/assets/stylesheets/uniform/helpers/position.scss

@@ -0,0 +1,13 @@
+.relative{          position:relative;}
+.absolute{          position:absolute;}
+.fixed{          position:fixed;}
+.position-top{      top: 0;}
+.position-left{     left: 0;}
+.position-right{    right: 0;}
+.position-bottom{   bottom: 0;}
+.position-center{   @include position-center;}
+.position-v-center{ @include position-v-center;}
+.position-h-center{ @include position-h-center;}
+@for $i from 1 through 100 {
+    .z-#{$i}     { z-index: #{$i}; }
+}

data/lib/assets/stylesheets/uniform/helpers/sizes.scss

@@ -0,0 +1,38 @@
+@for $i from 0 through 100 {
+    @include size-rules(".width-#{$i * 5}-px"){
+        width: #{$i * 5 + "px"};
+    }
+    .min-width-#{$i * 5}-px     { min-width: #{$i * 5 + "px"}; }
+    .max-width-#{$i * 5}-px     { max-width: #{$i * 5 + "px"}; }
+    
+    .height-#{$i * 5}-px        { height: #{$i * 5 + "px"}; }
+    .max-height-#{$i * 5}-px    { max-height: #{$i * 5 + "px"}; }
+    .min-height-#{$i * 5}-px    { min-height: #{$i * 5 + "px"}; }
+}
+@for $i from 0 through 20 {
+    @include size-rules(".width-#{$i * 5}-p"){
+        width: #{$i * 5 + "%"};
+    }
+    .width-#{$i * 5}-vw         { width: #{$i * 5 +"vw"}; }
+    
+    .min-width-#{$i * 5}-vh     { min-width: #{$i * 5 +"vh"}; }
+    .min-width-#{$i * 5}-p      { min-width: #{$i * 5 +"%"}; }
+    
+    .max-width-#{$i * 5}-vh     { max-width: #{$i * 5 +"vh"}; }
+    .max-width-#{$i * 5}-p      { max-width: #{$i * 5 +"%"}; }
+    
+    @include size-rules(".height-#{$i * 5}-vh"){
+        height: #{$i * 5 + "vh"};
+    }
+    .height-#{$i * 5}-p         { height: #{$i * 5 +"%"}; }
+    
+    .min-height-#{$i * 5}-vh    { min-height: #{$i * 5 +"vh"}; }
+    .min-height-#{$i * 5}-p     { min-height: #{$i * 5 +"%"}; }
+}
+
+.height-auto{
+    height: auto;
+}
+.width-auto{
+    width:auto;
+}