uniform-ui 0.6 → 1.0

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

@@ -0,0 +1,46 @@
+.uniformTooltip{
+    position:relative;
+    .uniformTooltip-popup{
+        position: absolute;
+        background: white;
+        transition: opacity 0.2s, bottom 0.2s;
+        border: 1px solid $gray-light;
+        padding: 0.5em;
+        opacity: 0;
+        bottom: 0;
+        left: -1.5em;
+        margin: 0.5em;
+        z-index: -1;
+        color: $gray;
+        font-size:0.8em;
+        border-radius: 0.25em;
+        max-width: 30vw;
+        p:last-child{
+            margin-bottom: 0;
+        }
+        &.active{
+            z-index: 2;
+            bottom: 100%;
+            opacity: 1;
+        }
+        .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 $gray-light;
+            }
+        }
+    }
+}

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

@@ -1,30 +1,96 @@
+html{
+    font-size: 14px;
+}
+body{
+    font-size: 1rem;
+}
+*{
+    box-sizing: border-box;
+}
 a{
     color:$blue;
     &:hover{
         color:$blue-dark;
     }
+    &:visited{
+        color: #6738e4;
+    }
 }
-blockquote{
-    border-left-color:lighten($green, 20);
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+ul,
+ol,
+dl,
+pre{
+    margin: 0;
+    margin-bottom: 1em; // might want to do rem
+}
+
+ul,
+ol,
+dl{
+    ul,
+    ol,
+    dl{
+        margin-bottom: 0;
+    }
 }
-mark{
-    background:lighten($green-light, 30);
+
+dd{
+    margin-left: 0;
+    margin-bottom: 0.5em;
 }
-code{
-    border-radius: 4px;
-    padding: 2px 4px;
-    font-size:90%;
-    background:lighten($green-light, 35);
-    color:$green-dark;
-    font-weight:normal;
+dt{
+    font-weight: bold;
 }
-pre{
-    display:block;
-    background: darken(white, 10);
-    border:1px solid darken(white, 13);
-    padding: 15px 10px;
-    overflow:auto;
-    xmp{
-        margin: 0;
+
+table{
+    background-color: transparent;
+    border-collapse: collapse;
+    td, th{
+        display: table-cell;
+        text-align: left;
     }
+}
+
+fieldset{
+    margin: 0;
+    padding: 0;
+    border: none;
+}
+
+textarea{
+    resize: vertical;
+}
+
+input,
+select,
+textarea,
+button{
+    margin: 0;
+    line-height: inherit;
+}
+
+#{$text-inputs},
+textarea{
+    border:1px solid lighten($gray, 40);
+}
+
+[hidden] {
+    display: none !important;
+}
+
+time{
+    @include text-overflow;
+}
+
+button{
+    font-family: $system-font;
+    color: $gray;
+    cursor: pointer;
 }

data/vendor/assets/stylesheets/uniform/helpers.scss

@@ -1,18 +1,31 @@
-// Vertical Rule
-vr {
-    height:30px;
-    border-left:1px solid $gray-light;
-    margin:0 10px;
+.square-icon{
     display: inline-block;
+    height: 1em;
+    width: 1em;
+    border: 1px solid $gray;
+    border-radius: 0.1em;
     vertical-align:middle;
+    &.gray-light{
+        border-color: lighten($gray, 40);
+    }
+}
+.hidden{
+    display:none !important;
 }
-.rounded,
 .round{
     border-radius:50%;
 }
+.rounded{
+    border-radius: 0.25em;
+}
+[data-href],
 .pointer{
     cursor: pointer !important;
 }
+.cursor-help{
+    cursor: help;
+}
+
 .handle{
     cursor: hand;
 }
@@ -22,102 +35,90 @@ vr {
     width:1px !important;
     display:block !important;
 }
+@include apply-media-sizes('.border'){
+    border: 1px solid $gray-light;
+}
+@each $direction in 'top' 'right' 'bottom' 'left' {
+    @include apply-media-sizes('.border-#{$direction}'){
+        border-#{$direction}: 1px solid $gray-light;
+    }
+    @include apply-media-sizes('.border-dark-#{$direction}'){
+        border-#{$direction}: 1px solid darken($gray-light, 20);
+    }
+}
+img.disabled{
+    @include grayscale(1, 0.3)
+}
+table.fixed{
+    table-layout: fixed;
+}
 
 //----------------------------------------------------------------
 //             Layout
 //----------------------------------------------------------------
-.hide,
-.hidden{
-    display:none;
-}
-.right{
+@include apply-media-sizes('.float-right'){
     float:right;
+    &.margin{
+        margin: 0 0 1rem 1rem;
+    }
 }
-.text-right{
-    text-align: right;
-}
-.text-center{
-    text-align: center;
-}
-.clear{
-    clear:both;
+.float-left{
+    float: left;
+    &.margin{
+        margin: 0 1rem 1rem 0;
+    }
 }
 .bleed-fix{
     position:static;
     overflow:hidden;
 }
-.no-gutter{
-    padding-left:0;
-    padding-right:0;
+.clear{
+    clear:both;
 }
-.no-pad{
-    padding-left:0;
-    padding-right:0;
+@include apply-media-sizes('.block') {
+    display: block;
 }
-.less-pad{
-    padding-left:5px;
-    padding-right:5px;
+@include apply-media-sizes('.inline-block') {
+    display:inline-block !important;
 }
-.pad{
-    padding:10px;
+.align-middle{
+    @include align-middle;
 }
 
-//----------------------------------------------------------------
-//             Text
-//----------------------------------------------------------------
-.text-overflow{
-    @include text-overflow;
-}
-.strong,
-strong,
-.bold{      font-weight: 700;}
-.light,
-.text-light{    font-weight: 300;}
-.text-normal{    font-weight: normal;}
-.italic{    font-style:italic;}
-.required{  color:$red;}
-.warn{
-    color:lighten($gray, 20);
-    &:hover{
-        color:$red;
-    }
+
+.relative{
+    position:relative;
 }
-h1, h2, h3, h4, h5, h6{
-    &.no-margin{
-        margin: 0;
-        margin-top:10px;
-    }
-    &.no-margin-top{
-        margin-top:0;
-    }
+
+
+ul.raw{
+    margin: 0;
+    padding: 0;
+    list-style:none;
 }
 
-p.large{
-    font-size:1.5em;
-    font-weight:300;
-    margin-bottom:20px;
+
+.text-col-2{
+    column-count: 2;
+    column-gap: 5em;
+}
+button.raw{
+    outline: none;
+    appearance: none;
+    border: none;
+    background:none;
 }
-.nowrap{
-    white-space: nowrap;
+.overflow-hidden{
     overflow:hidden;
 }
-
-//----------------------------------------------------------------
-//             Colors
-//----------------------------------------------------------------
-@mixin generate-color($class){
-.#{$class} {            color: global-variable($class);}
-.#{$class}-light {      color: global-variable("#{$class}-light");}
-.#{$class}-dark {       color: global-variable("#{$class}-light");}
-.#{$class}-bg {         background-color: global-variable($class);}
-.#{$class}-light-bg {   background-color: global-variable("#{$class}-light");}
-.#{$class}-dark-bg {    background-color: global-variable("#{$class}-dark");}
+.overflow-y{
+    overflow-y: auto;
 }
 
-@include generate-color('green');
-@include generate-color('blue');
-@include generate-color('red');
-@include generate-color('gray');
-@include generate-color('yellow');
-
-
+img.block{
+    display:block;
+    width: 100%;
+}
+.height-auto{
+    height: auto;
+}

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

@@ -0,0 +1,37 @@
+@mixin generate-color($class, $color){
+.text-#{$class} {               color: $color !important;}
+.a-hover-#{$class} a:hover {    color: $color !important;}
+.bg-#{$class} {                 background-color: $color !important;}
+.uniformLabel-#{$class}{        border-color: $color !important;}
+.a-#{$class} a {
+    color: $color;
+    &:hover{
+        color: lighten($color, 20);
+    }
+    &:visited{
+        color: $color;
+    }
+}
+}
+
+@include generate-color('green', $green);
+@include generate-color('green-light', $green-light);
+@include generate-color('green-dark', $green-dark);
+@include generate-color('blue', $blue);
+@include generate-color('blue-light', $blue-light);
+@include generate-color('blue-dark', $blue-dark);
+@include generate-color('red', $red);
+@include generate-color('red-light', $red-light);
+@include generate-color('red-dark', $red-dark);
+@include generate-color('gray', $gray);
+@include generate-color('gray-light', $gray-light);
+@include generate-color('gray-dark', $gray-dark);
+@include generate-color('yellow', $yellow);
+@include generate-color('yellow-light', $yellow-light);
+@include generate-color('yellow-dark', $yellow-dark);
+@include generate-color('background', $background);
+@include generate-color('background-light', lighten($background, 2));
+@include generate-color('background-dark', darken($background, 5));
+
+@include generate-color('white', #FFFFFF);
+@include generate-color('muted', lighten($gray, 30));

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

@@ -0,0 +1,44 @@
+.margin{
+    margin-top: 1em;
+    margin-bottom: 1em;
+}
+.margin-h{
+    margin-left: 1em;
+    margin-right: 1em;
+}
+.margin-more{
+    margin-top: 2em !important;
+    margin-bottom: 2em !important;
+}
+.margin-super{
+    margin-top: 4em !important;
+    margin-bottom: 4em !important;
+}
+@include apply-media-sizes('.margin-less'){
+    margin-top: 0.5em;
+    margin-bottom: 0.5em;
+}
+.margin-tiny{
+    margin-top: 0.25em;
+    margin-bottom: 0.25em;
+}
+.margin-none{
+    margin: 0 !important;
+}
+@each $direction in 'top' 'right' 'bottom' 'left' {
+    .margin-#{$direction}-none{
+        margin-#{$direction}: 0 !important;
+    }
+    .margin-#{$direction}-tiny{
+        margin-#{$direction}: 0.25em !important;
+    }
+    .margin-#{$direction}-less{
+        margin-#{$direction}: 0.5em !important;
+    }
+    @include apply-media-sizes('.margin-#{$direction}'){
+        margin-#{$direction}: 1em !important;
+    }
+    @include apply-media-sizes('.margin-#{$direction}-more'){
+        margin-#{$direction}: 2em !important;
+    }
+}