uniform-ui 0.5 → 0.5.1

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

@@ -0,0 +1,221 @@
+.uniformBigInput{
+    width:100%;
+    display:block;
+    padding: 10px 15px;
+    font-size:1.3em;
+    font-weight:300;
+    @include appearance(none);
+    outline: none;
+    box-shadow: none;
+    border:1px solid $gray-light;
+    &:focus{
+        border-color: $blue;
+    }
+}
+.uniform-form{
+    &.viking-dialog{
+        padding: 0;
+    }
+    .section{
+        background:white;
+        border:1px solid darken($background, 10);
+        display:block;
+        overflow:hidden; // prolly need to remove
+        margin-bottom:20px;
+    }
+    .section-head{
+        background:darken(white, 3);
+        overflow:hidden;
+        padding: 10px 15px;
+        border-bottom:1px solid darken($background, 10);
+        & > * {
+            margin: 0;
+        }
+        h1,h2,h3,h4,h5,h6{
+            margin: 0;
+            display:inline-block;
+        }
+        .nav-tabs{
+            border-bottom:none;
+            margin-bottom: -10px;
+        }
+        .action{
+            float:right;
+            color:$green;
+            text-decoration:none;
+            a{
+                text-decoration:none;
+            }
+            .fortycon{
+                font-size:1.2em;
+                vertical-align:middle;
+            }
+        }
+    }
+    .section-foot{
+        background:darken(white, 3);
+        border-top:1px solid darken($background, 10);
+        text-align:center;
+        padding: 10px 15px;
+    }
+    .row{
+        .form-group{
+            margin-top:10px;
+            margin-bottom:10px;
+        }
+    }
+    .checkbox-group{
+        label{
+            font-weight:normal;
+            display:block;
+        }
+        input{
+            margin-right:3px;
+        }
+    }
+    .show-more{
+        color:lighten($gray, 45);
+        font-size:0.8em;
+        margin-top:10px;
+        margin-bottom:10px;
+        padding:0 15px;
+        padding-top: 8px;
+        min-height:53px;
+        display:inline-block;
+        padding-left:25px;
+        cursor:pointer;
+        border:1px solid transparent;
+        text-decoration:none;
+        & > span{
+            font-size:1.2em;
+            display:block;
+            font-weight:bold;
+            margin-bottom:2px;
+            margin-left:-18px;
+            &:before{
+                font-family:$fortycons;
+                display:inline-block;
+                content: $fortycon-add;
+                margin-right:5px;
+            }
+        }
+        .indicator{
+            display:inline-block;
+            width:6px;
+            height:6px;
+            border-radius:50%;
+            margin:1px 3px;
+            border:1px solid lighten($gray, 45);
+            &.full{
+                background:lighten($gray, 45);
+            }
+        }
+        &:hover{
+            border-color:$blue;
+            color:$blue;
+            .indicator {
+                border-color:$blue;
+                &.full{
+                    background:$blue;
+                }
+            }
+        }
+    }
+    .form-group{
+        margin-bottom:0;
+        .has-error > label,
+        & > label{
+            display:block;
+        }
+        .has-error > #{$text-inputs}, textarea,
+        & > #{$text-inputs}, textarea{
+            @include appearance(none);
+            outline: none;
+            box-shadow: none;
+            width:100%;
+            padding:5px;
+            border:1px solid $gray-light;
+            &:focus{
+                border-color: $blue;
+            }
+        }
+        .has-error > select,
+        & > select{
+            position:relative;
+            z-index:1;
+            @include appearance(none);
+            outline: 1px;
+            cursor:pointer;
+            text-indent: 1px;
+            text-overflow: ellipsis;
+            font-family:$helvetica;
+            border:1px solid $gray-light;
+            margin:0;
+            padding: 5px;
+            padding-right: 20px;
+            line-height:1.2;
+            min-height: 30px;
+            background: white;
+            border-radius:0;
+            background: url(asset_path('arrow_down_large.svg')) no-repeat;
+            background-size: 10px 10px;
+            background-position:right 5px center;
+            width: 100%;
+            &:focus{
+                border-color: $blue;
+            }
+        }
+        .inline-input{
+            width:100%;
+            select{
+                background:none;
+            }
+            &.active{
+                box-shadow:none;
+                border-color: $blue;
+            }
+            .add-on{
+                width: 30px;
+                border-right:none;
+            }
+        }
+        select.select2{
+            max-height:30px;
+        }
+        .select2{
+            width:100%;
+            .select2-selection{
+                border-radius:0;
+                border-color:$gray-light;
+                min-height:30px;
+                .select2-selection__arrow{
+                    height: 30px;
+                }
+            }
+            .select2-selection--multiple{
+                line-height:1;
+            }
+            .select2-selection__choice{
+                margin-top:3px;
+                line-height:1.4;
+            }
+            .select2-selection--single{
+                height: 30px;
+                .select2-selection__rendered{
+                    line-height:30px;
+                }
+            }
+        }
+    }
+    .has-error {
+        label{
+            color: $red !important;
+        }
+        #{$text-inputs}, textarea{
+            border-color:$red !important;
+        }
+        .select2 .select2-selection{
+            border-color:$red !important;
+        }
+    }
+}

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

@@ -0,0 +1,83 @@
+//
+// Grid system
+// --------------------------------------------------
+
+
+// Container widths
+//
+// Set the container width, and override it for fixed navbars in media queries.
+.container {
+  @include container-fixed;
+
+  @include media ($min-sm) {
+    width: $container-sm;
+  }
+  @include media ($min-md) {
+    width: $container-md;
+  }
+  @include media ($min-lg) {
+    width: $container-lg;
+  }
+}
+
+
+// Fluid container
+//
+// Utilizes the mixin meant for fixed width containers, but without any defined
+// width for fluid, full width layouts.
+
+.container-fluid {
+  @include container-fixed;
+}
+
+
+// Row
+//
+// Rows contain and clear the floats of your columns.
+
+.row {
+  @include make-row;
+}
+
+
+// Columns
+//
+// Common styles for small and large grid columns
+
+@include make-grid-columns;
+
+
+// Extra small grid
+//
+// Columns, offsets, pushes, and pulls for extra small devices like
+// smartphones.
+
+@include make-grid(xs);
+
+
+// Small grid
+//
+// Columns, offsets, pushes, and pulls for the small device range, from phones
+// to tablets.
+
+@include media ($min-sm) {
+  @include make-grid(sm);
+}
+
+
+// Medium grid
+//
+// Columns, offsets, pushes, and pulls for the desktop device range.
+
+@include media ($min-md) {
+  @include make-grid(md);
+}
+
+
+// Large grid
+//
+// Columns, offsets, pushes, and pulls for the large desktop device range.
+
+@include media ($min-lg) {
+  @include make-grid(lg);
+}

data/vendor/assets/stylesheets/uniform/components/{inputs.css.scss → inputs.scss}

@@ -1,82 +1,110 @@
-@mixin select-custom(){
-    display:inline-block;
-    border-radius: 2px;
-    border: 1px solid #bababa;
+@mixin uniform-select {
     position:relative;
     select{
+        @include appearance(none);
         position:relative;
         z-index:1;
-        @include appearance(none);
         outline: 1px;
         cursor:pointer;
         text-indent: 1px;
         text-overflow: ellipsis;
         font-family:$helvetica;
-        border:none;
-        margin:0;
-        padding: 0.3em 1em;
-        padding-right:2em;
+        border:1px solid lighten($gray, 20);
+        padding: 0.3em 0.5em;
+        padding-right:1.7em;
+        background: white;
+        border-radius:0;
         background:none;
     }
     &:after{
-        color:$gray;
-        font-size:1.3em;
-//        TODO setup arrow icon
-//        font-family:$fortycons;
-//        content:$fortycon-arrow-down;
+        color:lighten($gray, 20);
+        font-size:1em;
+        font-family: $fortycons;
+        content:$fortycon-arrow-down-large;
         @include vertical-middle();
         right:0.3em;
         z-index:0;
     }
     &:focus{
-        color: #000;
-        box-shadow: 0 0 5px 1px $green-light;
-        border-color: $green-dark;
+        border-color: $blue;
     }
 }
+.uniform-select{
+    @include uniform-select;
+}
+
 //----------------------------------------------------------------
 //             inline-input
 //----------------------------------------------------------------
 .inline-input{
     display:table;
     background:white;
+    overflow:hidden;
     border:1px solid darken(white, 15);
     border-top-color:darken(white, 20);
+    &.block{
+        &>*{
+            width: 100%;
+        }
+    }
     &>*{
         display:table-cell;
         vertical-align:middle;
+        float:none;
+        &.top{
+            vertical-align:top;
+        }
     }
-    input{
+
+    #{$text-inputs},
+    .textbox,
+    textarea {
+        @include appearance(none);
+        outline: none;
+        padding:10px;
         box-shadow: none;
         border:none;
-        display:block;
+        width:100%;
+    }
+    #{$text-inputs},
+    textarea,
+    .textbox,
+    select{
+        &:disabled{
+            color:lighten($gray, 20);
+            font-style:italic;
+        }
     }
     select{
-        @include select-custom;
-        display:block;
+        width:100%;
         border:none;
         margin:0;
+        margin-top:1px;
+        height:37px;
+        line-height:37px;
+        background:none;
     }
     label{
         margin:0;
+        font-weight:bold;
         padding:5px;
+        width:100%;
+        font-size:0.8em;
     }
-    .label, .add-on, .units{
+    .label,
+    .add-on,
+    .units{
         white-space:nowrap;
         width:auto;
         padding-left: 7px;
         padding-right: 7px;
-        border-left:1px solid darken(white, 15);
-        background:darken(white, 5);
         color:lighten(black, 50);
-        font-weight:300;
-        &.pre, &:first-child{
-            border-left:none;
-            border-right:1px solid darken(white, 15);
-        }
     }
     &.active{
         box-shadow: 0 0 3px 1px $green;
         border-color:$green;
     }
+    &.error{
+        border-color:$red;
+    }
 }

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

@@ -0,0 +1,62 @@
+li[data-step]{
+    list-style:none;
+    margin:0.5em 0;
+    position:relative;
+    &:before{
+        content: attr(data-step);
+        color:$green;
+        font-size:1em;
+        vertical-align:-2px;
+        border-radius:50%;
+        border:2px solid $green;
+        width:1.3em;
+        height:1.3em;
+        font-weight:normal;
+        line-height:1.1;
+        text-align:center;
+        position:absolute;
+        left:-1.5em;
+    }
+}
+li[data-number]{
+    list-style:none;
+    margin:0.5em 0;
+    position:relative;
+    &:before{
+        content: attr(data-number);
+        font-size:1em;
+        width:1.5em;
+        height:1.3em;
+        font-weight:bold;
+        line-height:1.3;
+        text-align:center;
+        position:absolute;
+        left:-1.5em;
+    }
+}
+
+
+ul.custom li,
+ul.checks li,
+li[data-fortycon],
+li[data-icon]{
+    position:relative;
+    &:before{
+        content: "c";
+        font-size:1.2em;
+        position:absolute;
+        left:-1.5em;
+        line-height:1;
+    }
+}
+li[data-fortycon],
+li[data-icon] {
+    &:before{
+        content: attr(data-fortycon);
+    }
+}
+ul.checks li {
+    &:before{
+        color: $green;
+    }
+}

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

@@ -0,0 +1,62 @@
+.uniform-loader{
+    display:inline-block;
+    .uniform-loader-container{
+        letter-spacing:-.05em;
+        white-space:nowrap;
+        span{
+            font-size:2em;
+            line-height:1em;
+            color:rgba(black, 1);
+            @include animation(uniform-loader 1s infinite linear);
+            @include animation-delay(.4s);
+        }
+        span:first-of-type{
+            @include animation-delay(.2s);
+        }
+        span:last-of-type{
+            @include animation-delay(.6s);
+        }
+    }
+    &.light{
+        .uniform-loader-container{
+            span{
+                color:rgba(white, 1);
+                @include animation(uniform-loader-light 1s infinite linear);
+                @include animation-delay(.4s);
+            }
+            span:first-of-type{
+                @include animation-delay(.2s);
+            }
+            span:last-of-type{
+                @include animation-delay(.6s);
+            }
+        }
+    }
+    &.cover{
+        display:block;
+        background:rgba(white, 0.5);
+        position:absolute;
+        top:0;
+        left:0;
+        width:100%;
+        height:100%;
+        z-index:999999999;
+        .uniform-loader-container{
+            position:absolute;
+            @include align-middle;
+        }
+        &.light{
+            background:rgba(black, .5);
+        }
+    }
+}
+@include keyframes (uniform-loader) {
+    0%{ color:rgba(black, 1); }
+    25%{ color:rgba(black, 0.2); }
+    100%{ color:rgba(black, 0.2); }
+}
+@include keyframes (uniform-loader-light) {
+    0%{ color:rgba(white, 1); }
+    25%{ color:rgba(white, 0.2); }
+    100%{ color:rgba(white, 0.2); }
+}

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

@@ -0,0 +1,44 @@
+.uniform-nav{
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    ul {
+        list-style: none;
+        margin: 0;
+        padding: 0;
+    }
+    li{
+        display:block;
+        & > *{
+            display:block;
+            padding: 10px 20px;
+            text-decoration:none;
+            &:hover{
+                color: black;
+                background:rgba($green-light, 0.3);
+            }
+        }
+    }
+    
+    &.horizontal{
+        
+        .uniform-nav-container{
+            display:table;
+            & > * {
+                display:table-cell;
+                vertical-align:middle;
+            }
+        }
+        .right{
+            text-align:right;
+            float:none;
+        }
+    }
+    
+    &.main{
+        border-bottom: 1px solid $gray-light;
+        .uniform-nav-container{
+            width: 100%;
+        }
+    }
+}