titon-toolkit 2.0.2 → 2.1.0

data/scss/toolkit/components/pin.scss

@@ -6,14 +6,16 @@
 
 @import "../common";
 
-#{$pin-class} {
-    position: absolute;
-}
+@include export("pin") {
+    #{$pin-class} {
+        position: absolute;
+    }
 
-#{$pin-class}.sticky {
-    transition: top .6s ease-in-out, right $pin-transition ease-in-out, left $pin-transition ease-in-out;
-}
+    #{$pin-class}.sticky {
+        transition: top .6s ease-in-out, right $pin-transition ease-in-out, left $pin-transition ease-in-out;
+    }
 
-#{$pin-class}.slide {
-    transition: top $pin-transition linear, right $pin-transition linear, left $pin-transition linear;
-}
+    #{$pin-class}.slide {
+        transition: top $pin-transition linear, right $pin-transition linear, left $pin-transition linear;
+    }
+}

data/scss/toolkit/components/popover.scss

@@ -6,64 +6,66 @@
 
 @import "../common";
 
-$popover-arrow-width-double: ($popover-arrow-width * 2);
-$popover-arrow-width-shadow: ($popover-arrow-width - 2);
+@include export("popover") {
+    $popover-arrow-width-double: ($popover-arrow-width * 2);
+    $popover-arrow-width-shadow: ($popover-arrow-width - 2);
 
-#{$popover-class} {
-    position: absolute;
-    top: 0;
-    left: 0;
-    margin: $margin;
-    padding: 0;
-    border: 0;
-    z-index: $popover-zindex;
-    max-width: 300px;
-    visibility: hidden;
+    #{$popover-class} {
+        position: absolute;
+        top: 0;
+        left: 0;
+        margin: $margin;
+        padding: 0;
+        border: 0;
+        z-index: $popover-zindex;
+        max-width: 300px;
+        visibility: hidden;
 
-    &.center-left #{$popover-class-arrow},
-    &.center-right #{$popover-class-arrow} {
-        top: 50%;
-        margin-top: -#{$popover-arrow-width}px;
-    }
+        &.center-left #{$popover-class-arrow},
+        &.center-right #{$popover-class-arrow} {
+            top: 50%;
+            margin-top: -#{$popover-arrow-width}px;
+        }
 
-    &.center-left #{$popover-class-arrow} {
-        border-left-color: $gray;
-        right: -#{$popover-arrow-width-double}px;
-    }
+        &.center-left #{$popover-class-arrow} {
+            border-left-color: $gray;
+            right: -#{$popover-arrow-width-double}px;
+        }
 
-    &.center-right #{$popover-class-arrow} {
-        border-right-color: $gray;
-        left: -#{$popover-arrow-width-double}px;
-    }
+        &.center-right #{$popover-class-arrow} {
+            border-right-color: $gray;
+            left: -#{$popover-arrow-width-double}px;
+        }
 
-    &.top-center #{$popover-class-arrow},
-    &.bottom-center #{$popover-class-arrow} {
-        left: 50%;
-        margin-left: -#{$popover-arrow-width}px;
-    }
+        &.top-center #{$popover-class-arrow},
+        &.bottom-center #{$popover-class-arrow} {
+            left: 50%;
+            margin-left: -#{$popover-arrow-width}px;
+        }
 
-    &.top-center #{$popover-class-arrow} {
-        border-top-color: $gray;
-        bottom: -#{$popover-arrow-width-double}px;
-    }
+        &.top-center #{$popover-class-arrow} {
+            border-top-color: $gray;
+            bottom: -#{$popover-arrow-width-double}px;
+        }
 
-    &.bottom-center #{$popover-class-arrow} {
-        border-bottom-color: $gray;
-        top: -#{$popover-arrow-width-double}px;
+        &.bottom-center #{$popover-class-arrow} {
+            border-bottom-color: $gray;
+            top: -#{$popover-arrow-width-double}px;
+        }
     }
-}
 
-#{$popover-class-head},
-#{$popover-class-body} {
-    padding: $small-padding;
-}
+    #{$popover-class-head},
+    #{$popover-class-body} {
+        padding: $small-padding;
+    }
 
-#{$popover-class-arrow} {
-    border: #{$popover-arrow-width}px solid transparent;
+    #{$popover-class-arrow} {
+        border: #{$popover-arrow-width}px solid transparent;
 
-    &::after {
-        border: #{$popover-arrow-width-shadow}px solid transparent;
-        top: -#{$popover-arrow-width-shadow}px;
-        left: -#{$popover-arrow-width-shadow}px;
+        &::after {
+            border: #{$popover-arrow-width-shadow}px solid transparent;
+            top: -#{$popover-arrow-width-shadow}px;
+            left: -#{$popover-arrow-width-shadow}px;
+        }
     }
 }

data/scss/toolkit/components/progress.scss

@@ -6,56 +6,58 @@
 
 @import "../common";
 
-#{$progress-class} {
-    overflow: hidden;
-    position: relative;
-
-    @include is-small {
-        #{$progress-class-bar} {
-            height: 1rem;
-            line-height: 1rem;
-            font-size: $small-size;
+@include export("progress") {
+    #{$progress-class} {
+        overflow: hidden;
+        position: relative;
+
+        @include is-small {
+            #{$progress-class-bar} {
+                height: 1rem;
+                line-height: 1rem;
+                font-size: $small-size;
+            }
         }
-    }
 
-    @include is-large {
-        #{$progress-class-bar} {
-            height: 2rem;
-            line-height: 2rem;
-            font-size: $large-size;
+        @include is-large {
+            #{$progress-class-bar} {
+                height: 2rem;
+                line-height: 2rem;
+                font-size: $large-size;
+            }
         }
-    }
 
-    @include clear-fix;
+        @include clear-fix;
 
-    //----- Effects ------//
+        //----- Effects ------//
 
-    &#{$shape-round-class} {
-        #{$progress-class-bar}:first-child {
-            border-top-left-radius: $round;
-            border-bottom-left-radius: $round;
+        &#{$shape-round-class} {
+            #{$progress-class-bar}:first-child {
+                border-top-#{$align-direction}-radius: $round;
+                border-bottom-#{$align-direction}-radius: $round;
+            }
         }
-    }
 
-    @if index($progress-effects, "pill") {
-        &#{$shape-pill-class} {
-            border-radius: $pill;
+        @if index($progress-effects, "pill") {
+            &#{$shape-pill-class} {
+                border-radius: $pill;
 
-            #{$progress-class-bar}:first-child {
-                border-top-left-radius: $pill;
-                border-bottom-left-radius: $pill;
+                #{$progress-class-bar}:first-child {
+                    border-top-#{$align-direction}-radius: $pill;
+                    border-bottom-#{$align-direction}-radius: $pill;
+                }
             }
         }
     }
-}
 
-#{$progress-class-bar} {
-    height: 1.5rem;
-    line-height: 1.5rem;
-    overflow: hidden;
-    position: relative;
-    text-align: center;
-    font-size: $medium-size;
-    float: left;
-    transition: width $progress-transition, background $progress-transition;
-}
+    #{$progress-class-bar} {
+        height: 1.5rem;
+        line-height: 1.5rem;
+        overflow: hidden;
+        position: relative;
+        text-align: center;
+        font-size: $medium-size;
+        float: $align-direction;
+        transition: width $progress-transition, background $progress-transition;
+    }
+}

data/scss/toolkit/components/responsive.scss

@@ -6,79 +6,74 @@
 
 @import "../common";
 
-.fluid {
-    display: block;
-    width: 100%;
-    height: auto;
-    max-width: 100%;
-}
+@include export("responsive") {
+    .show-retina,
+    .show-print { display: none !important; }
 
-.show-retina,
-.show-print { display: none !important; }
+    // Extra small states
+    @include in-xsmall  {
+        .show-xlarge,
+        .show-large,
+        .show-medium,
+        .show-small,
+        .hide-xsmall { display: none !important; }
+    }
 
-// Extra small states
-@include in-xsmall  {
-    .show-xlarge,
-    .show-large,
-    .show-medium,
-    .show-small,
-    .hide-xsmall { display: none !important; }
-}
+    // Small states
+    @include in-small  {
+        .show-xlarge,
+        .show-large,
+        .show-medium,
+        .show-xsmall,
+        .hide-small { display: none !important; }
+    }
 
-// Small states
-@include in-small  {
-    .show-xlarge,
-    .show-large,
-    .show-medium,
-    .show-xsmall,
-    .hide-small { display: none !important; }
-}
+    // Medium states
+    @include in-medium {
+        .show-xlarge,
+        .show-large,
+        .show-small,
+        .show-xsmall,
+        .hide-medium { display: none !important; }
+    }
 
-// Medium states
-@include in-medium {
-    .show-xlarge,
-    .show-large,
-    .show-small,
-    .show-xsmall,
-    .hide-medium { display: none !important; }
-}
+    // Large states
+    @include in-large {
+        .show-xlarge,
+        .show-medium,
+        .show-small,
+        .show-xsmall,
+        .hide-large { display: none !important; }
+    }
 
-// Large states
-@include in-large {
-    .show-xlarge,
-    .show-medium,
-    .show-small,
-    .show-xsmall,
-    .hide-large { display: none !important; }
-}
+    // Extra large states
+    @include in-xlarge {
+        .show-large,
+        .show-medium,
+        .show-small,
+        .show-xsmall,
+        .hide-xlarge { display: none !important; }
+    }
 
-// Extra large states
-@include in-xlarge {
-    .show-large,
-    .show-medium,
-    .show-small,
-    .show-xsmall,
-    .hide-xlarge { display: none !important; }
-}
+    // Orientation states
+    @include if-portrait {
+        .show-landscape,
+        .hide-portrait { display: none !important; }
+    }
 
-// Orientation states
-@include if-portrait {
-    .show-landscape,
-    .hide-portrait { display: none !important; }
-}
+    @include if-landscape {
+        .show-portrait,
+        .hide-landscape { display: none !important; }
+    }
 
-@include if-landscape {
-    .show-portrait,
-    .hide-landscape { display: none !important; }
-}
+    // Type states
+    @include if-retina {
+        .hide-retina { display: none !important; }
+        @include responsive-display-block(".show-retina");
+    }
 
-// Type states
-@include if-retina {
-    .hide-retina { display: none !important; }
-    @include responsive-display-block(".show-retina");
+    @media print {
+        .hide-print { display: none !important; }
+        @include responsive-display-block(".show-print");
+    }
 }
-
-@media print {
-    .hide-print { display: none !important; }
-    @include responsive-display-block(".show-print");
-}

data/scss/toolkit/components/showcase.scss

@@ -6,76 +6,78 @@
 
 @import "../common";
 
-#{$showcase-class} {
-    position: fixed;
-    top: 50%;
-    left: 50%;
-    width: auto;
-    height: auto;
-    margin: 0;
-    padding: 0;
-    opacity: 0;
-    z-index: $showcase-zindex;
-    visibility: hidden;
-    backface-visibility: hidden;
-    transform: translate(-50%, -50%);
-    transition: opacity $showcase-transition, visibility $showcase-transition;
+@include export("showcase") {
+    #{$showcase-class} {
+        position: fixed;
+        top: 50%;
+        left: 50%;
+        width: auto;
+        height: auto;
+        margin: 0;
+        padding: 0;
+        opacity: 0;
+        z-index: $showcase-zindex;
+        visibility: hidden;
+        backface-visibility: hidden;
+        transform: translate(-50%, -50%);
+        transition: opacity $showcase-transition, visibility $showcase-transition;
 
-    &.is-loading,
-    &.is-single {
-        #{$showcase-class-prev},
-        #{$showcase-class-next},
-        #{$showcase-class-tabs} {
-            display: none !important;
+        &.is-loading,
+        &.is-single {
+            #{$showcase-class-prev},
+            #{$showcase-class-next},
+            #{$showcase-class-tabs} {
+                display: none !important;
+            }
         }
-    }
 
-    &.is-loading {
-        #{$showcase-class-close} {
-            display: none !important;
+        &.is-loading {
+            #{$showcase-class-close} {
+                display: none !important;
+            }
         }
     }
-}
 
-#{$showcase-class-close} {
-    float: right;
-    line-height: 1rem;
-    background: none;
-    border: 0;
-    padding: 0;
-    margin-left: 1rem;
-}
+    #{$showcase-class-close} {
+        float: $align-opposite-direction;
+        line-height: 1rem;
+        background: none;
+        border: 0;
+        padding: 0;
+        margin-#{$align-direction}: 1rem;
+    }
 
-#{$showcase-class-caption} {
-    opacity: 0;
-    transition: opacity $showcase-transition, visibility $showcase-transition;
-}
+    #{$showcase-class-caption} {
+        opacity: 0;
+        transition: opacity $showcase-transition, visibility $showcase-transition;
+    }
 
-#{$showcase-class-inner} {
-    position: relative;
-    margin-bottom: $padding;
-}
+    #{$showcase-class-inner} {
+        position: relative;
+        margin-bottom: $padding;
+    }
 
-#{$showcase-class-items} {
-    @include reset-list;
-    width: 100px;
-    height: 100px;
-    position: relative;
-    overflow: hidden;
-    transition: width $showcase-transition, height $showcase-transition;
+    #{$showcase-class-items} {
+        @include reset-list;
+        width: 100px;
+        height: 100px;
+        position: relative;
+        overflow: hidden;
+        transition: width $showcase-transition, height $showcase-transition;
 
-    > li {
-        position: absolute;
-        top: 0;
-        left: 0;
-        opacity: 0;
-        transition: opacity $showcase-transition, visibility $showcase-transition;
+        > li {
+            position: absolute;
+            top: 0;
+            #{$align-direction}: 0;
+            opacity: 0;
+            transition: opacity $showcase-transition, visibility $showcase-transition;
 
-        > img {
-            max-width: 100%;
-            width: 100%;
-            height: auto;
-            display: block;
+            > img {
+                max-width: 100%;
+                width: 100%;
+                height: auto;
+                display: block;
+            }
         }
     }
-}
+}