titon-toolkit 2.0.2 → 2.1.0

data/scss/toolkit/components/typography.scss

@@ -6,55 +6,57 @@
 
 @import "../common";
 
-html {
-    font-size: $base-size;
-    line-height: $base-line-height;
-}
-
-h1 { font-size: $h1-size; }
-h2 { font-size: $h2-size; }
-h3 { font-size: $h3-size; }
-h4 { font-size: $h4-size; }
-h5 { font-size: $h5-size; }
-h6 { font-size: $h6-size; }
-
-h1, h2, h3, h4, h5, h6 {
-    margin: 0;
-    padding: 0;
-    line-height: $base-line-height;
-    font-weight: normal;
-}
+@include export("typography") {
+    html {
+        font-size: $base-size;
+        line-height: $base-line-height;
+    }
 
-p, ul, ol {
-    margin: $margin 0 0 0;
+    h1 { font-size: $h1-size; }
+    h2 { font-size: $h2-size; }
+    h3 { font-size: $h3-size; }
+    h4 { font-size: $h4-size; }
+    h5 { font-size: $h5-size; }
+    h6 { font-size: $h6-size; }
 
-    ul, ol {
+    h1, h2, h3, h4, h5, h6 {
         margin: 0;
+        padding: 0;
+        line-height: $base-line-height;
+        font-weight: normal;
     }
-}
 
-hr {
-    margin: $margin 0;
-}
+    p, ul, ol {
+        margin: $margin 0 0 0;
 
-blockquote {
-    margin: $margin;
-    padding: 0 $padding;
-    border-left: 5px solid $gray;
+        ul, ol {
+            margin: 0;
+        }
+    }
 
-    cite { display: block; font-size: $small-size; }
-    cite::before { content: "\2014 \00A0"; /* em dash */ }
-}
+    hr {
+        margin: $margin 0;
+    }
 
-mark {
-    display: inline-block;
-    background: $gray-dark;
-    border-radius: $round;
-    padding: 0 .3em;
-}
+    blockquote {
+        margin: $margin;
+        padding: 0 $padding;
+        border-#{$align-direction}: 5px solid $gray;
+
+        cite { display: block; font-size: $small-size; }
+        cite::before { content: "\2014 \00A0"; /* em dash */ }
+    }
 
-.text-muted { color: $default; }
-.text-info { color: darken($info, 15%); }
-.text-error { color: darken($error, 15%); }
-.text-warning { color: darken($warning, 15%); }
-.text-success { color: darken($success, 15%); }
+    mark {
+        display: inline-block;
+        background: $gray-dark;
+        border-radius: $round;
+        padding: 0 .3em;
+    }
+
+    .text-muted { color: $default; }
+    .text-info { color: darken($info, 15%); }
+    .text-error { color: darken($error, 15%); }
+    .text-warning { color: darken($warning, 15%); }
+    .text-success { color: darken($success, 15%); }
+}

data/scss/toolkit/mixins/_flex.scss

@@ -0,0 +1,80 @@
+@import "layout";
+@import "helper";
+
+$flex-align-map: (
+    top: flex-start,
+    bottom: flex-end,
+    left: flex-start,
+    right: flex-end,
+    center: center,
+    between: space-between,
+    around: space-around,
+    stretch: stretch,
+    baseline: baseline
+);
+
+// justify-content - Align blocks/lines on main axis.
+// align-content - Align blocks/lines on cross axis. This is the opposite of justify-content.
+// align-items - Align blocks within a line on the cross axis when each block has a variable height.
+
+// Calculate the width of an individual flex block.
+// Take into account max widths and gutters.
+@function flex-span($n, $columns, $width: $flex-width, $gutter: $flex-gutter) {
+    @return span-width($n, $columns, $width, $gutter);
+}
+
+// Styles for the region that contains blocks.
+@mixin flex-region($width: $flex-width) {
+    display: flex;
+    max-width: $width;
+}
+
+// Align the blocks within a region horizontally or vertically.
+@mixin flex-region-align($align: left) {
+    justify-content: map-get($flex-align-map, $align);
+}
+
+// Set the orientation of blocks. Either display vertically or horizontally.
+@mixin flex-region-orientation($orientation: horizontal) {
+    @if $orientation == vertical {
+        flex-direction: column;
+    } @else {
+        flex-direction: row;
+    }
+}
+
+// Set the wrapping of blocks within a region.
+@mixin flex-region-wrap($wrap: true) {
+    @if $wrap {
+        flex-wrap: wrap;
+        align-items: flex-start;
+    } @else {
+        flex-wrap: nowrap;
+        align-items: stretch;
+    }
+}
+
+// Set the width, grow, and shrink settings for a block.
+@mixin flex-block($width: auto, $grow: 1, $shrink: 0) {
+    flex: $grow $shrink $width;
+}
+
+// Override the blocks alignment set by the parent.
+@mixin flex-block-align($align: left) {
+    align-self: map-get($flex-align-map, $align);
+}
+
+// Set the order of a block. Defaults to 100 so that custom blocks can be set higher.
+@mixin flex-block-order($order: 100) {
+    order: $order;
+}
+
+// Set a block to grow by default.
+@mixin flex-block-grow($width: auto) {
+    @include flex-block($width);
+}
+
+// Set a block to shrink by default.
+@mixin flex-block-shrink($width: auto) {
+    @include flex-block($width, 0, 1);
+}

data/scss/toolkit/mixins/_grid.scss

@@ -1,33 +1,10 @@
-
 @import "layout";
-
-// 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%);
-}
+@import "helper";
 
 // 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 $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 $gutter and $n > 1 {
-        $span-width: $span-width + (($n - 1) * $gutter-width);
-    }
-
-    @return $span-width;
+    @return span-width($n, $columns, $width, $gutter);
 }
 
 // Styles for the grid row containing the columns.
@@ -42,11 +19,11 @@
 @mixin grid-column($width: $grid-width, $gutter: $grid-gutter) {
     position: relative;
     min-height: 1px;
-    float: left;
+    float: $align-direction;
 
     @if $gutter {
-        margin-right: grid-gutter($width, $gutter);
+        margin-#{$align-opposite-direction}: gutter($width, $gutter);
 
-        &:last-child { margin-right: 0; }
+        &:last-child { margin-#{$align-opposite-direction}: 0; }
     }
-}
+}

data/scss/toolkit/mixins/_helper.scss

@@ -29,16 +29,16 @@
 }
 
 // Remove the first selector character (#, ., etc) from the class name or ID
-@function remove-selector-char($selector) {
+@function remove-selector($selector) {
     @return str-slice($selector, 2, str-length($selector));
 }
 
 // Generate a class name and apply an optional prefix
-@function class-name($class, $prefix: $vendor-prefix, $selector: ".") {
+@function class-name($class, $prefix: $namespace, $selector: ".") {
     $name: $class;
 
     @if str_slice($class, 1, 1) == $selector {
-        $name: remove-selector-char($name);
+        $name: remove-selector($name);
     }
 
     @if $prefix != "" {
@@ -61,4 +61,33 @@
     }
 
     @return $name;
-}
+}
+
+// Calculate the gutter spacing as a percentage.
+// Use the max width of the grid to calculate against.
+@function gutter($width, $gutter) {
+    @return if($gutter, ((to-pixel($gutter) / to-pixel($width)) * 100 * 1%), 0%);
+}
+
+// Calculate the width of an individual element within a row.
+// Take into account max widths and gutters.
+@function span-width($n, $columns, $width, $gutter) {
+    $row-width: 100%;
+    $gutter-width: 0%;
+
+    // If a gutter is set, remove width based on the sum of the gutter columns
+    @if $gutter {
+        $gutter-width: 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 $gutter and $n > 1 {
+        $span-width: $span-width + (($n - 1) * $gutter-width);
+    }
+
+    @return $span-width;
+}

data/scss/toolkit/mixins/_layout.scss

@@ -1,4 +1,18 @@
 
+// Export a component into the compiled output only once
+// Also check to see if it has been excluded from the output all together
+@mixin export($module) {
+    // Module is excluded, so do nothing
+    @if (index($modules-excluded, $module) != null) {
+
+        // Module hasn't been exported yet, so export it and log usage
+    } @else if (index($modules-exported, $module) == null) {
+        $modules-exported: append($modules-exported, $module) !global;
+
+        @content;
+    }
+}
+
 // Container clear fix for floats
 @mixin clear-fix {
     &::after {
@@ -87,4 +101,17 @@
             @content;
         }
     }
-}
+}
+
+// Generate code blocks for LTR and RTL styles.
+@mixin ltr() {
+    &[dir="ltr"] {
+        @content;
+    }
+}
+
+@mixin rtl() {
+    &[dir="rtl"] {
+        @content;
+    }
+}

data/version.md

@@ -1 +1 @@
-2.0.2
+2.1.0

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: titon-toolkit
 version: !ruby/object:Gem::Version
-  version: 2.0.2
+  version: 2.1.0
 platform: ruby
 authors:
 - Project Titon
@@ -9,7 +9,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2014-12-17 00:00:00.000000000 Z
+date: 2015-02-26 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: sass
@@ -64,6 +64,7 @@ files:
 - scss/toolkit/components/code.scss
 - scss/toolkit/components/divider.scss
 - scss/toolkit/components/drop.scss
+- scss/toolkit/components/flex.scss
 - scss/toolkit/components/flyout.scss
 - scss/toolkit/components/form.scss
 - scss/toolkit/components/grid.scss
@@ -93,6 +94,7 @@ files:
 - scss/toolkit/components/type-ahead.scss
 - scss/toolkit/components/typography.scss
 - scss/toolkit/mixins/_components.scss
+- scss/toolkit/mixins/_flex.scss
 - scss/toolkit/mixins/_grid.scss
 - scss/toolkit/mixins/_helper.scss
 - scss/toolkit/mixins/_layout.scss