uniform-ui 1.0 → 2.2.1

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

@@ -1,52 +1,24 @@
-.text-caps{
-    text-transform: uppercase;
-}
-.text-small-less{
-    font-size: 0.9em;
-}
-@include apply-media-sizes('.text-small'){
-    font-size: 0.8em;
-}
-@include apply-media-sizes('.text-large'){
-    font-size: 1.2em;
+//----------------------------------------------------------------
+//             Size
+//----------------------------------------------------------------
+
+@include sizes('.text', 'font-size');
+@for $i from 1 through 20 {
+    .text-#{str-replace(str-replace('' + $i * 0.2, '.', '_'), '_0', '')}-em { font-size: #{$i * 0.2 +"em"}; }
 }
 .text-1rem{
     font-size: 1rem;
 }
-.text-larger{
-    font-size: 1.4em;
-}
-.text-super{
-    font-size: 3em;
-}
-.text-subtle{
-    font-size: 90%;
-    opacity: 0.8;
-}
-.text-subtle-more{
-    font-size: 80%;
-    opacity: 0.6;
-}
-.text-muted{
-    opacity: 0.8;
-}
-.text-muted-more{
-    opacity: 0.6;
-}
-@include apply-media-sizes('.text-left'){
-    text-align: left !important;
-}
-@include apply-media-sizes('.text-right'){
-    text-align: right;
-}
-@include apply-media-sizes('.text-center'){
-    text-align: center;
-}
-.text-justify{
-    text-align: justify;
+
+//----------------------------------------------------------------
+//             Modifiers
+//----------------------------------------------------------------
+
+.text-mono{
+    font-family: monospace, monospace;
 }
-.text-overflow{
-    @include text-overflow;
+.text-caps{
+    text-transform: uppercase;
 }
 .text-bold{
     font-weight: 700;
@@ -60,47 +32,42 @@
 .text-normal{
     font-weight: normal !important;
 }
-.text-middle{
-    vertical-align:middle;
-}
-.text-top{
-    vertical-align:top;
-}
-.text-tight{
-    line-height:1.3;
-}
-.required{
-    color:$red;
-}
-.warn:hover{
-    color:$red;
-}
-p.large{
-    font-size:1.5em;
-    font-weight:300;
-}
 .text-italic{
     font-style: italic;
 }
-.text-no-wrap{
-    white-space: nowrap;
-    overflow:hidden;
-}
 .text-no-decoration{
     text-decoration: none;
     a{
         text-decoration: none;
     }
 }
-.text-height-1{
-    line-height: 1;
+
+//----------------------------------------------------------------
+//             Styles
+//----------------------------------------------------------------
+.text-subtle{
+    font-size: 90%;
+    opacity: 0.8;
+}
+.text-subtle-more{
+    font-size: 80%;
+    opacity: 0.6;
 }
 
-.text-warn{
-    &:hover{
-        color:$red !important;
-    }
+.text-muted{
+    opacity: 0.8;
+}
+.text-muted-less{
+    opacity: 0.85;
 }
+.text-muted-more{
+    opacity: 0.6;
+}
+p.large{
+    font-size:1.5em;
+    font-weight:300;
+}
+
 blockquote.quote{
     font-style: italic;
     border:none;
@@ -118,4 +85,50 @@ blockquote.quote{
         color: rgba(black, 0.1);
         content: "“";
     }
+}
+
+//----------------------------------------------------------------
+//             Positioning
+//----------------------------------------------------------------
+
+@include size-rules('.text-left'){
+    text-align: left !important;
+}
+@include size-rules('.text-right'){
+    text-align: right;
+}
+@include size-rules('.text-center'){
+    text-align: center;
+}
+.text-middle{
+    vertical-align:middle;
+}
+.text-top{
+    vertical-align:top;
+}
+.text-tight{
+    line-height:1.3;
+}
+.text-height-1{
+    line-height: 1;
+}
+@include size-rules('.text-col-2'){
+    column-count: 2;
+    column-gap: 5em;
+}
+
+//----------------------------------------------------------------
+//             Breaking
+//----------------------------------------------------------------
+.text-break{
+    word-break: break-all;
+}
+.text-justify{
+    text-align: justify;
+}
+.text-overflow{
+    @include text-overflow;
+}
+.text-nowrap{
+    white-space: nowrap;
 }

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

@@ -0,0 +1,127 @@
+//----------------------------------------------------------------
+//             Overflow
+//----------------------------------------------------------------
+.overflow-hidden{
+    overflow: hidden;
+}
+.overflow-hidden{
+    overflow:hidden;
+}
+.overflow-y{
+    overflow-y: auto;
+}
+
+
+//----------------------------------------------------------------
+//             Rounded
+//----------------------------------------------------------------
+.round{
+    border-radius:50%;
+}
+.rounded{
+    border-radius: 0.25em;
+    &.clip{
+        overflow:hidden;
+    }
+}
+
+.rounded-top{
+    border-top-right-radius: 0.25em;
+    border-top-left-radius: 0.25em;
+}
+.rounded-bottom{
+    border-bottom-right-radius: 0.25em;
+    border-bottom-left-radius: 0.25em;
+}
+
+
+//----------------------------------------------------------------
+//             Raw
+//----------------------------------------------------------------
+ul.raw{
+    margin: 0;
+    padding: 0;
+    list-style:none;
+}
+button.raw{
+    outline: none;
+    appearance: none;
+    border: none;
+    background:none;
+    padding: 0;
+}
+
+//----------------------------------------------------------------
+//             Cursors
+//----------------------------------------------------------------
+[data-href],
+.cursor-pointer{
+    cursor: pointer !important;
+}
+.cursor-help{
+    cursor: help;
+}
+.cursor-handle{
+    cursor: grab;
+}
+
+//----------------------------------------------------------------
+//             Layout
+//----------------------------------------------------------------
+@include size-rules('.float-right'){
+    float:right;
+    &.margin{
+        margin: 0 0 1rem 1rem;
+    }
+}
+@include size-rules('.float-left'){
+    float: left;
+    &.margin{
+        margin: 0 1rem 1rem 0;
+    }
+}
+@include size-rules('.show'){
+    display:inherit !important;
+    &.block{
+        display:block !important;
+    }
+}
+@include size-rules('.block') {
+    display: block !important;
+}
+@include size-rules('.inline-block') {
+    display:inline-block !important;
+}
+@include size-rules('.hide'){
+    display:none !important;
+}
+.bleed-fix{
+    position:static;
+    overflow:hidden;
+}
+.clear{
+    clear:both;
+}
+
+//----------------------------------------------------------------
+//             Transitions
+//----------------------------------------------------------------
+.transition-all{
+    transition: all 0.2s;
+}
+
+//----------------------------------------------------------------
+//             Misc
+//----------------------------------------------------------------
+.honeypot{
+    position:absolute !important;
+    left:-999999px !important;
+    width:1px !important;
+    display:block !important;
+}
+img.disabled{
+    @include grayscale(1, 0.3)
+}
+table.fixed{
+    table-layout: fixed;
+}

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

@@ -0,0 +1,116 @@
+
+@mixin text-overflow($inherit:false){
+    @if $inherit {
+        text-overflow: inherit;
+        white-space: inherit;
+        overflow: inherit;
+    } @else {
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        overflow: hidden;
+    }
+}
+@mixin grayscale($gray: 0.7, $opacity: 1){
+    opacity: $opacity;
+    -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(grayscale=$gray)";
+    filter:url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cfilter%20id%3D%22desaturate%22%3E%3CfeColorMatrix%20type%3D%22saturate%22%20values%3D%220%22/%3E%3C/filter%3E%3C/svg%3E#desaturate);
+    filter: gray($gray);
+    -webkit-filter: grayscale($gray * 100%);
+    @if $gray == 0 {
+        filter: none;
+        -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(grayscale=0)";
+        -webkit-filter: grayscale(0);
+    }
+}
+
+//----------------------------------------------------------------
+//             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
+//----------------------------------------------------------------
+@mixin media($query) {
+    @media only screen and (#{$query}){
+        @content;
+    }
+}
+
+@mixin size-rule($breakpoint) {
+    @include media(map-get($breakpoints, $breakpoint)){
+        @content
+    }
+    .#{$breakpoint}-size{
+        @content
+    }
+}
+
+@mixin size-rules($selector){
+    #{$selector}{
+        @content
+    }
+    @each $key, $value in $breakpoints {
+        @include media($value){
+            #{$selector}-#{$key}{
+                @content
+            }
+        }
+        .#{$key}-size #{$selector}-#{$key}{
+            @content
+        }
+    }
+}
+
+@mixin sizes($selector, $attributes){
+    @each $attribute in $attributes {
+        @include size-rules("#{$selector}"){
+            #{$attribute}: map-get($sizes, 'base');
+        }
+        @each $key, $value in $sizes {
+            @include size-rules("#{$selector}-#{$key}"){
+                #{$attribute}: $value;
+                @content
+            }
+        }
+        @include size-rules("#{$selector}-none"){
+            #{$attribute}: 0 !important;
+            @content
+        }
+    }
+}
+
+@mixin colors($selector, $attributes){
+    @each $attribute in $attributes {
+        @each $key, $value in $colors {
+            @include size-rules("#{$selector}-#{$key}"){
+                #{$attribute}: $value;
+                @content
+            }
+        }
+    }
+}
+

data/lib/assets/stylesheets/uniform/print/grid.scss

@@ -0,0 +1,50 @@
+.grid{
+    display: table;
+    width :100%;
+    
+    &.grid-center {
+        .col,
+        [class*="col-"]{
+            vertical-align:center;
+        }
+    }
+    &.grid-top{
+        .col,
+        [class*="col-"]{
+            vertical-align:top;
+        }
+    }
+    &.grid-bottom {
+        .col,
+        [class*="col-"]{
+            vertical-align:bottom;
+        }
+    }
+    
+    .row{
+        display: table-row;
+    }
+    .col,
+    [class*="col-"]{
+        display: table-cell;
+        position: static;
+        vertical-align:top;
+        &.col-center       {vertical-align: center;}
+        &.col-top          {vertical-align: top;}
+        &.col-bottom       {vertical-align: bottom;}
+    }
+}
+
+.col-fill{
+}
+@for $i from 1 through $grid-columns {
+    .col-#{$i} {
+        width: #{($i / $grid-columns * 100) + "%"};
+    }
+}
+
+@for $i from 1 through 100 {
+    .col-#{$i * 5}-px               { width: #{$i * 5 + "px"}; }
+    .col-#{$i}-p                { width: #{$i + "%"}; }
+}
+

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

@@ -0,0 +1,72 @@
+//----------------------------------------------------------------
+//             Text
+//----------------------------------------------------------------
+$text-inputs: "input:not([type=search]):not([type=submit]):not([type=checkbox]):not([type=radio])";
+$system-font: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
+
+
+//----------------------------------------------------------------
+//             Colors
+//----------------------------------------------------------------
+$colors: (
+    'background':         #f2f2f2,
+    'gray':               #505153,
+    'gray-light':         #cccccc,
+    'gray-dark':          #373839,
+    'gray-background':    rgb(238, 238, 238),
+    'green':              #97C848,
+    'green-light':        #BBFF00,
+    'green-dark':         #709239,
+    'blue':               #0994E2,
+    'blue-bright':        #1fa9ff,
+    'blue-light':         #A7CDF2,
+    'blue-dark':          #167DBA,
+    'red':                #E1563E,
+    'red-light':          #E5766C,
+    'red-dark':           #971710,
+    'red-bright':         #ffab9b,
+    'yellow':             #D7E542,
+    'yellow-dark':        #BBC02C,
+    'yellow-light':       #E9F75A,
+    'black':              #000000,
+    'white':              #FFFFFF,
+    'muted':              #969696
+);
+
+
+//----------------------------------------------------------------
+//             Breakpoints
+//----------------------------------------------------------------
+// 720, 1080, 1440
+$breakpoints: (
+    sm: "max-width: 719px",
+    md: "min-width: 720px",
+    lg: "min-width: 1080px",
+    xl: "min-width: 1440px"
+);
+
+
+//----------------------------------------------------------------
+//             Sizes
+//----------------------------------------------------------------
+$sizes: (
+    quarter:   0.25em,
+    half:      0.5em,
+    smaller:   0.8em,
+    small:     0.9em,
+    base:      1em,
+    large:     1.2em,
+    larger:    1.4em,
+    2x:        2em,
+    4x:        4em,
+    8x:        8em
+);
+
+
+//----------------------------------------------------------------
+//             Grid
+//----------------------------------------------------------------
+$grid-columns: 12;
+$grid-gutter: 1em;
+
+

data/lib/assets/stylesheets/uniform-print.scss

@@ -0,0 +1 @@
+@import 'uniform/print/*';

data/lib/assets/stylesheets/uniform.scss

@@ -0,0 +1,11 @@
+@import 'uniform/functions';
+@import 'uniform/variables';
+
+@import 'uniform/mixins';
+@import 'uniform/defaults';
+
+@import 'uniform/components';
+@import 'uniform/components/*';
+
+@import 'uniform/helpers';
+@import 'uniform/helpers/*';

data/lib/uniform/version.rb

@@ -0,0 +1,3 @@
+module Uniform
+  VERSION = "2.2.1"
+end

data/lib/uniform.rb

@@ -0,0 +1,15 @@
+if defined?(::Rails)
+  class UniformUi
+    class Engine < ::Rails::Engine
+
+      if Sprockets::VERSION.start_with?('4')
+        Engine.config.assets.precompile += %w(uniform/manifest.js)
+      end
+      
+    end
+  end
+else
+  module UniformUi
+    ASSET_PATH = File.expand_path("../lib/assets", __dir__)
+  end
+end