titon-toolkit 1.0.0.rc.2 → 1.0.0.rc.3

data/scss/toolkit/components/grid.scss

@@ -17,7 +17,7 @@
 }
 
 @for $i from 1 through 12 {
-    $span: grid-span(12, $i);
+    $span: grid-span($i, 12);
 
     .span-#{$i} { width: $span; }
     .push-#{$i} { left: $span; }
@@ -34,7 +34,7 @@
         }
 
         @for $i from 1 through $grid-columns-mobile {
-            $span: grid-span($grid-columns-mobile, $i);
+            $span: grid-span($i, $grid-columns-mobile);
 
             .col.mobile-#{$i} { width: $span; }
             .col.mobile-push-#{$i} { left: $span; }
@@ -49,7 +49,7 @@
         }
 
         @for $i from 1 through $grid-columns-tablet {
-            $span: grid-span($grid-columns-tablet, $i);
+            $span: grid-span($i, $grid-columns-tablet);
 
             .col.tablet-#{$i} { width: $span; }
             .col.tablet-push-#{$i} { left: $span; }
@@ -64,7 +64,7 @@
         }
 
         @for $i from 1 through $grid-columns-desktop {
-            $span: grid-span($grid-columns-desktop, $i);
+            $span: grid-span($i, $grid-columns-desktop);
 
             .col.desktop-#{$i} { width: $span; }
             .col.desktop-push-#{$i} { left: $span; }
@@ -83,7 +83,7 @@
         }
 
         @for $i from 1 through $grid-columns-small {
-            $span: grid-span($grid-columns-small, $i);
+            $span: grid-span($i, $grid-columns-small);
 
             .col.small-#{$i} { width: $span; }
             .col.small-push-#{$i} { left: $span; }
@@ -98,7 +98,7 @@
         }
 
         @for $i from 1 through $grid-columns-medium {
-            $span: grid-span($grid-columns-medium, $i);
+            $span: grid-span($i, $grid-columns-medium);
 
             .col.medium-#{$i} { width: $span; }
             .col.medium-push-#{$i} { left: $span; }
@@ -113,7 +113,7 @@
         }
 
         @for $i from 1 through $grid-columns-large {
-            $span: grid-span($grid-columns-large, $i);
+            $span: grid-span($i, $grid-columns-large);
 
             .col.large-#{$i} { width: $span; }
             .col.large-push-#{$i} { left: $span; }

data/scss/toolkit/components/icon.scss

@@ -10,7 +10,7 @@
     @include reset-inline-block;
     background-repeat: no-repeat;
 
-    @include disabled-state { opacity: $disabled-opacity; }
+    @include is-disabled { opacity: $disabled-opacity; }
 }
 
 [class*="icon-12"] { width: 12px; height: 12px; }

data/scss/toolkit/components/input.scss

@@ -22,7 +22,6 @@
         top: -3px;
         line-height: 1rem;
         border-radius: $round;
-        @include transition(all $default-transition);
 
         &:hover { border-color: $gray-darkest; }
     }
@@ -42,7 +41,6 @@
         &:checked + .checkbox,
         &:checked + .radio {
             border-color: $info;
-            box-shadow: 0 0 5px $info-light;
         }
 
         // Style when input is disabled
@@ -64,7 +62,6 @@
         border-radius: $round;
         white-space: nowrap;
         line-height: 1rem;
-        @include transition(all $default-transition);
     }
 
     .select-label,
@@ -72,8 +69,7 @@
         display: inline-block;
         vertical-align: middle;
         line-height: normal;
-        font-size: $medium-size;
-        padding: $medium-padding;
+        @include size-medium;
     }
 
     .select-arrow {
@@ -99,7 +95,6 @@
         // Style when the select is focused
         &:focus + .select {
             border-color: $info;
-            box-shadow: 0 0 5px $info-light;
         }
 
         // Style when select is disabled

data/scss/toolkit/components/label.scss

@@ -29,6 +29,7 @@
     }
 
     &:empty { display: none; }
+
     &:after {
         content: "";
         height: 0;
@@ -39,11 +40,15 @@
 
 //-------------------- Modifiers --------------------//
 
-.label.label--badge {
+.label--badge {
+    @extend .label;
+
     border-radius: 1rem;
 }
 
-.label.label--arrow-left {
+.label--arrow-left {
+    @extend .label;
+
     border-top-left-radius: 1px;
     border-bottom-left-radius: 1px;
     padding-left: 2px;
@@ -60,7 +65,9 @@
     &.large:after { border-width: .75rem; }
 }
 
-.label.label--arrow-right {
+.label--arrow-right {
+    @extend .label;
+
     border-top-right-radius: 1px;
     border-bottom-right-radius: 1px;
     padding-right: 2px;
@@ -77,7 +84,9 @@
     &.large:after { border-width: .75rem; }
 }
 
-.label.label--ribbon-left {
+.label--ribbon-left {
+    @extend .label;
+
     border-top-left-radius: 0;
     border-bottom-left-radius: 0;
 
@@ -91,16 +100,18 @@
     }
 }
 
-.label.label--ribbon-right {
-     border-top-right-radius: 0;
-     border-bottom-right-radius: 0;
-
-     &:after {
-         top: 100%;
-         right: 0;
-         border: 1em solid transparent;
-         border-top-width: 0 !important;
-         border-right-width: 0 !important;
-         border-left-color: $gray-darkest;
-     }
+.label--ribbon-right {
+    @extend .label;
+
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+
+    &:after {
+        top: 100%;
+        right: 0;
+        border: 1em solid transparent;
+        border-top-width: 0 !important;
+        border-right-width: 0 !important;
+        border-left-color: $gray-darkest;
+    }
  }

data/scss/toolkit/components/modal.scss

@@ -23,7 +23,11 @@
 
     &.is-loading {
         .modal-close { display: none; }
-        .modal-handle { background: $gray; }
+    }
+
+    &.is-draggable {
+        .modal-inner { cursor: default; }
+        .modal-head { cursor: move; }
     }
 }
 
@@ -38,21 +42,12 @@
     &:hover { opacity: 1; }
 }
 
-// Used for animations, should also contain the styles
-.modal-handle {
+.modal-inner {
     position: relative;
     margin: 0 auto;
     background: $gray;
-    border: 1px solid $gray-dark;
-}
-
-// Reset draggable cursor
-.modal.is-draggable {
-    .modal-inner { cursor: default; }
-    .modal-head { cursor: move; }
 }
 
-// Apply block padding
 .modal-head,
 .modal-body,
 .modal-foot,
@@ -68,7 +63,7 @@
 
 //-------------------- Modifiers --------------------//
 
-.modal.modal--fullscreen {
+.modal.is-fullscreen {
     width: 100%;
     top: 0;
     left: 0;

data/scss/toolkit/components/notice.scss

@@ -10,7 +10,6 @@
     margin: $margin 0;
     padding: $padding;
     background: $gray-light;
-    border: 1px solid $gray-dark;
     text-align: left;
 
     hr {
@@ -29,11 +28,9 @@
     float: right;
     margin-left: $margin;
     line-height: 1rem;
-    opacity: $default-opacity;
     padding: 5px;
 
     & ~ p { margin: 0; }
-    &:hover { opacity: 1; }
 }
 
 .notice-title {

data/scss/toolkit/components/pagination.scss

@@ -35,7 +35,9 @@
 
 //-------------------- Modifiers --------------------//
 
-.pagination.pagination--grouped {
+.pagination--grouped {
+    @extend .pagination;
+
     li {
         margin-left: -1px;
         margin-right: 0;

data/scss/toolkit/components/popover.scss

@@ -10,13 +10,13 @@
     position: absolute;
     top: 0;
     left: 0;
-    margin: 0;
+    margin: $margin;
     padding: 0;
+    border: 0;
     z-index: 500;
     max-width: 300px;
     visibility: hidden;
     background: $gray;
-    border: 1px solid $gray-dark;
 
     &.center-left .popover-arrow,
     &.center-right .popover-arrow {
@@ -25,12 +25,12 @@
     }
 
     &.center-left .popover-arrow {
-        border-left-color: $gray-dark;
+        border-left-color: $gray;
         right: -16px;
     }
 
     &.center-right .popover-arrow {
-        border-right-color: $gray-dark;
+        border-right-color: $gray;
         left: -16px;
     }
 
@@ -41,12 +41,12 @@
     }
 
     &.top-center .popover-arrow {
-        border-top-color: $gray-dark;
+        border-top-color: $gray;
         bottom: -16px;
     }
 
     &.bottom-center .popover-arrow {
-        border-bottom-color: $gray-dark;
+        border-bottom-color: $gray;
         top: -16px;
     }
 }

data/scss/toolkit/components/progress.scss

@@ -13,22 +13,27 @@
 
     &.small .progress-bar {
         height: 1rem;
-        line-height: .75rem;
+        line-height: 1rem;
         font-size: $small-size;
     }
 
     &.large .progress-bar {
         height: 2rem;
-        line-height: 1.75rem;
+        line-height: 2rem;
         font-size: $large-size;
     }
 
+    .progress-bar + .progress-bar {
+        border-top-left-radius: 0;
+        border-bottom-left-radius: 0;
+    }
+
     @include clear-fix;
 }
 
 .progress-bar {
     height: 1.5rem;
-    line-height: 1.25rem;
+    line-height: 1.5rem;
     overflow: hidden;
     position: relative;
     text-align: center;
@@ -36,4 +41,13 @@
     background: $gray-darkest;
     float: left;
     @include transition(width .6s, background $progress-transition);
+}
+
+.progress.round {
+    border-radius: $round;
+
+    .progress-bar {
+        border-top-left-radius: $round;
+        border-bottom-left-radius: $round;
+    }
 }

data/scss/toolkit/components/showcase.scss

@@ -40,11 +40,7 @@
     top: $padding;
     right: $padding;
     line-height: 1rem;
-    opacity: $showcase-opacity;
     padding: $padding;
-
-    .x { color: #fff; }
-    &:hover { opacity: 1; }
 }
 
 .showcase-inner {
@@ -98,8 +94,7 @@
     display: none;
 
     @include in-small {
-        font-size: $small-size;
-        padding: $small-padding;
+        @include size-small;
     }
 }
 
@@ -111,26 +106,10 @@
     width: auto;
     height: auto;
     z-index: 5;
-    opacity: $showcase-opacity;
     top: 50%;
     @include transform(translateY(-50%)); // move up 50% of their height
 
-    .arrow-left,
-    .arrow-right {
-        color: #fff;
-        font-size: 2rem;
-    }
-
-    &:hover { opacity: 1; }
     &:focus { outline: none; }
-
-    // Large icons for large resolutions
-    @include if-tablet-landscape {
-        .arrow-left,
-        .arrow-right {
-            font-size: 3rem;
-        }
-    }
 }
 
 .showcase-prev { left: $padding; }

data/scss/toolkit/components/table.scss

@@ -32,15 +32,15 @@
     tfoot tr {
         background: $gray-dark;
 
-        th { border-color: shade($gray-dark, 10%); }
+        th { border-color: $gray-darkest; }
     }
 
     // Zebra striping
     tbody tr {
         background: $gray;
 
-        &:nth-child(odd) { background: $gray-light; }
-        &.divider { background: shade($gray, 2%); }
+        &:nth-child(odd) { background: $gray-lightest; }
+        &.table-divider { background: $gray-dark; }
     }
 }
 
@@ -52,37 +52,54 @@
 
 //-------------------- Modifiers --------------------//
 
-.table.table--hover {
-    tbody tr:not(.divider):hover { background: #fff; }
+.table.has-hover {
+    tbody tr:not(.table-divider):hover { background: #fff; }
 }
 
-.table.table--sortable {
+.table.is-sortable {
     thead th {
         padding: 0;
 
-        a, span {
+        > a,
+        > span {
             padding: $padding;
             display: block;
         }
 
-        a {
+        > a {
             background: $gray-dark;
-            color: #000;
 
-            &:hover { background: shade($gray-dark, 5%); }
+            &:hover { background: $gray-darkest; }
         }
     }
 }
 
-.table.table--compact {
+//-------------------- Sizes --------------------//
+
+.table.small {
     thead th,
     tbody td { padding: $small-padding; }
 
-    &.table--sortable {
+    &.is-sortable {
+        thead th {
+            padding: 0;
+
+            > a,
+            > span { padding: $small-padding; }
+        }
+    }
+}
+
+.table.large {
+    thead th,
+    tbody td { padding: $large-padding; }
+
+    &.is-sortable {
         thead th {
             padding: 0;
 
-            a, span { padding: $small-padding; }
+            > a,
+            > span { padding: $large-padding; }
         }
     }
 }