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

data/scss/toolkit/components/tabs.scss

@@ -14,7 +14,7 @@
     display: block;
     margin-bottom: $margin;
 
-    ul, li {
+    ul, ol, li {
         @include reset-inline-block;
         list-style: none;
     }
@@ -29,9 +29,11 @@
 
 //-------------------- Modifiers --------------------//
 
-.tabs.tabs--horizontal {
+.tabs--horizontal {
+    @extend .tabs;
+
     .tabs-nav {
-        ul, li, a, button {
+        ul, ol, li, a, button {
             display: block;
             float: none;
             text-align: left;

data/scss/toolkit/components/tooltip.scss

@@ -10,7 +10,8 @@
     position: absolute;
     top: 0;
     left: 0;
-    margin: 0;
+    border: none;
+    margin: $margin;
     padding: $small-padding;
     z-index: 500;
     max-width: 200px;

data/scss/toolkit/components/type-ahead.scss

@@ -14,7 +14,6 @@
     opacity: 0;
     visibility: hidden;
     background: $gray;
-    border: 1px solid $gray-dark;
     @include transition(opacity 0.3s);
 
     ul {
@@ -22,21 +21,35 @@
         margin: 0;
         padding: 0;
         min-width: 200px;
+    }
 
-        a,
-        li.heading {
+    li {
+        > a {
             padding: $small-padding;
             line-height: 100%;
             display: block;
             text-decoration: none;
         }
 
-        li.heading {
-            font-weight: bold;
+        > a:hover,
+        &.is-active a {
+            background: $gray-lightest;
         }
     }
 }
 
+.type-ahead-heading {
+    padding: $small-padding;
+    line-height: 100%;
+    display: block;
+    text-decoration: none;
+    background: $gray-dark;
+}
+
+.type-ahead-highlight {
+    background: #fff;
+}
+
 .type-ahead-desc {
     display: block;
     color: $gray-darkest;

data/scss/toolkit/effects/oval.scss

@@ -12,16 +12,16 @@
 
 //-------------------- Pagination --------------------//
 
-.pagination.pagination--grouped.oval {
+.pagination--grouped.oval {
     ul {
         border-radius: #{$oval-x} / #{$oval-y};
     }
 
-    li:first-child .button {
+    li:first-child a {
         border-radius: #{$oval-x} 0 0 #{$oval-x} / #{$oval-y} 0 0 #{$oval-y};
     }
 
-    li:last-child .button {
+    li:last-child a {
         border-radius: 0 #{$oval-x} #{$oval-x} 0 / 0 #{$oval-y} #{$oval-y} 0;
     }
 }

data/scss/toolkit/effects/pill.scss

@@ -30,7 +30,7 @@
     }
 }
 
-.button-group.button-group--vertical.pill {
+.button-group--vertical.pill {
     border-radius: $pill;
 
     > li:first-child .button,
@@ -52,22 +52,33 @@
 
 //-------------------- Pagination --------------------//
 
-.pagination.pagination--grouped.pill {
+.pagination--grouped.pill {
     ul {
         border-radius: $pill;
     }
 
-    li:first-child .button {
+    li:first-child a {
         border-top-left-radius: $pill;
         border-bottom-left-radius: $pill;
     }
 
-    li:last-child .button {
+    li:last-child a {
         border-top-right-radius: $pill;
         border-bottom-right-radius: $pill;
     }
 }
 
+//-------------------- Progress --------------------//
+
+.progress.pill {
+    border-radius: $pill;
+
+    .progress-bar {
+        border-top-left-radius: $pill;
+        border-bottom-left-radius: $pill;
+    }
+}
+
 //-------------------- Visual --------------------//
 
 .visual-gloss.pill:after {

data/scss/toolkit/effects/skew.scss

@@ -33,7 +33,7 @@
     }
 }
 
-.button-group.button-group--vertical {
+.button-group--vertical {
     &.skew {
         border-top-left-radius: $skew-y 1.5rem;
         border-bottom-left-radius: $skew-y 1.5rem;
@@ -68,16 +68,16 @@
 
 //-------------------- Pagination --------------------//
 
-.pagination.pagination--grouped.skew {
+.pagination--grouped.skew {
     ul {
         border-radius: #{$skew-x $skew-x} 0 0 / #{$skew-y $skew-y} 0 0;
     }
 
-    li:first-child .button {
+    li:first-child a {
         border-radius: #{$skew-x} 0 0 0 / #{$skew-y} 0 0 0;
     }
 
-    li:last-child .button {
+    li:last-child a {
         border-radius: 0 #{$skew-x} 0 0 / 0 #{$skew-y} 0 0;
     }
 }

data/scss/toolkit/layout/base.scss

@@ -124,8 +124,23 @@
         background: black(0);
 
         &:hover { opacity: 1; border-width: 2px; }
-        @include active-state { background: #fff; }
+        @include is-active { background: #fff; }
     }
 
     &:empty { display: none; }
+}
+
+// Sorter
+.sorter {
+    @include reset-inline-block;
+    max-width: 10px;
+    line-height: 5px;
+    top: -1px;
+    margin: 0 .25rem;
+
+    .caret-up,
+    .caret-down { opacity: .25; }
+
+    &.desc .caret-up,
+    &.asc .caret-down { opacity: 1; }
 }

data/scss/toolkit/layout/code.scss

@@ -44,7 +44,7 @@ pre {
         border: none;
     }
 
-    &.code--scrollable {
+    &.is-scrollable {
         max-height: 350px;
         overflow-y: auto;
     }

data/scss/toolkit/layout/form.scss

@@ -76,7 +76,7 @@ label,
         box-shadow: none;
     }
 
-    @include disabled-state {
+    @include is-disabled {
         cursor: not-allowed;
         color: $gray-darkest;
         border-color: $gray;

data/scss/toolkit/mixins/_grid.scss

@@ -1,46 +1,53 @@
 
-//$gutter-width: if($grid-gutter, to-percent($grid-gutter), 0);
+@import "layout";
 
-// Calculate a width using a grid cell
-@function grid-span($columns, $n) {
+// Calculate the gutter spacing as a percentage.
+// Use the max width of the grid to calculate against.
+@function grid-gutter($width, $gutter) {
+    @return if($gutter, ((to-pixel($gutter) / to-pixel($width)) * 100 * 1%), 0%);
+}
+
+// Calculate the width of an individual grid column.
+// Take into account max widths and gutters.
+@function grid-span($n, $columns, $width: $grid-width, $gutter: $grid-gutter) {
     $row-width: 100%;
+    $gutter-width: 0%;
 
     // If a gutter is set, remove width based on the sum of the gutter columns
-    /*@if $grid-gutter {
+    @if $gutter {
+        $gutter-width: grid-gutter($width, $gutter);
         $row-width: $row-width - ($gutter-width * ($columns - 1));
-    }*/
+    }
 
     // The column width should span a division of the total width
     $span-width: ($row-width / $columns) * $n;
 
     // If a gutter is set, increase the column width to fill in the missing gaps
-    /*@if $grid-gutter and $n > 1 {
+    @if $gutter and $n > 1 {
         $span-width: $span-width + (($n - 1) * $gutter-width);
-    }*/
+    }
 
     @return $span-width;
 }
 
-// Styles for the row containing the columns
-@mixin grid-row() {
+// Styles for the grid row containing the columns.
+@mixin grid-row($width: $grid-width) {
     text-align: left;
-    width: $grid-width;
-    max-width: $grid-width;
+    width: $width;
+    max-width: $width;
 
     @include clear-fix;
 }
 
-// Styles for the column
-@mixin grid-column() {
+// Styles for the individual grid column.
+@mixin grid-column($width: $grid-width, $gutter: $grid-gutter) {
     position: relative;
     min-height: 1px;
     float: left;
 
-    /*@if $grid-gutter {
-        margin-right: $gutter-width;
+    @if $gutter {
+        margin-right: grid-gutter($width, $gutter);
 
-        &:last-child {
-            margin-right: 0;
-        }
-    }*/
+        &:last-child { margin-right: 0; }
+    }
 }

data/scss/toolkit/mixins/_helper.scss

@@ -0,0 +1,10 @@
+
+// Black transparent background
+@function black($opacity){
+    @return rgba(0, 0, 0, $opacity);
+}
+
+// White transparent background
+@function white($opacity){
+    @return rgba(255, 255, 255, $opacity);
+}

data/scss/toolkit/mixins/_layout.scss

@@ -31,8 +31,6 @@
     }
 }
 
-//-------------------- Sizes --------------------//
-
 @mixin size-small {
     font-size: $small-size;
     padding: $small-padding;
@@ -46,62 +44,4 @@
 @mixin size-large {
     font-size: $large-size;
     padding: $large-padding;
-}
-
-//-------------------- States --------------------//
-
-// Contains active styles (on self or inherited from parent)
-@mixin active-state {
-    .is-active > &,
-    .is-active > li > &,
-    &.is-active,
-    &.is-active:hover { @content; }
-}
-
-// Contains disabled styles (on self or inherited from parent)
-@mixin disabled-state {
-    .is-disabled > &,
-    .is-disabled > li > &,
-    &.is-disabled,
-    &.is-disabled:hover,
-    &[disabled],
-    &[disabled]:hover { @content; }
-}
-
-//-------------------- Helpers --------------------//
-
-@function black($opacity){
-    @return rgba(0, 0, 0, $opacity);
-}
-
-@function white($opacity){
-    @return rgba(255, 255, 255, $opacity);
-}
-
-//-------------------- Conversions --------------------//
-
-// Remove the unit and return the integer
-@function strip-unit($value) {
-    @return ($value / ($value * 0 + 1));
-}
-
-// Convert a unit value to a percentage while using $base-size as the reference
-@function to-percent($from) {
-    $from-unit: unit($from);
-    $value: $from;
-
-    @if $from-unit == '%' {
-        @return $from;
-
-    } @else if $from-unit == 'px' {
-        // Do nothing
-
-    } @else if $from-unit == 'em' or $from-unit == 'rem' {
-        $value: (strip-unit($from) * strip-unit($base-size)) * 1px;
-
-    } @else {
-        @warn 'Unknown conversion unit type.';
-    }
-
-    @return percentage(($value / $base-size) / 100);
 }

data/scss/toolkit/mixins/_responsive.scss

@@ -1,34 +1,40 @@
 
+// Media query for minimum resolution
 @mixin if-min($min) {
     @media only screen and (min-width: $min) {
         @content;
     }
 }
 
+// Media query for maximum resolution
 @mixin if-max($max) {
     @media only screen and (max-width: $max) {
         @content;
     }
 }
 
+// Media query for between minimum and maximum resolution
 @mixin if-min-max($min, $max) {
     @media only screen and (min-width: $min) and (max-width: $max) {
         @content;
     }
 }
 
+// Media query for landscape orientation detection
 @mixin if-landscape {
     @media only screen and (orientation: landscape) {
         @content;
     }
 }
 
+// Media query for portrait orientation detection
 @mixin if-portrait {
     @media only screen and (orientation: portrait) {
         @content;
     }
 }
 
+// Media query for retina / HD displays
 @mixin if-retina {
     @media
         only screen and (-webkit-min-device-pixel-ratio: 2),

data/scss/toolkit/mixins/_state.scss

@@ -0,0 +1,32 @@
+
+@mixin is-active {
+    .is-active > &,
+    .is-active > li > &,
+    &.is-active,
+    &.is-active:hover { @content; }
+}
+
+@mixin is-disabled {
+    .is-disabled > &,
+    .is-disabled > li > &,
+    &.is-disabled,
+    &.is-disabled:hover,
+    &[disabled],
+    &[disabled]:hover { @content; }
+}
+
+@mixin is-info {
+    &.is-info { @content; }
+}
+
+@mixin is-error {
+    &.is-error { @content; }
+}
+
+@mixin is-warning {
+    &.is-warning { @content; }
+}
+
+@mixin is-success {
+    &.is-success { @content; }
+}