titon-toolkit 1.5.3 → 2.0.0.pre.rc.1

data/scss/toolkit/components/notice.scss

@@ -1,23 +1,19 @@
 /**
- * @copyright   2010-2014, The Titon Project
+ * @copyright   2010-2015, The Titon Project
  * @license     http://opensource.org/licenses/BSD-3-Clause
  * @link        http://titon.io
  */
 
 @import "../common";
 
-.#{$vendor-prefix}notice {
+#{$notice-class} {
     margin: $margin 0;
     padding: $padding;
     text-align: left;
 
     hr {
         border: 0;
-        border-top: 1px solid transparent;
-    }
-
-    a {
-        font-weight: bold;
+        border-top: 1px solid white(.15);
     }
 
     p:first-child {
@@ -25,7 +21,7 @@
     }
 }
 
-.#{$vendor-prefix}notice-close {
+#{$notice-class-close} {
     float: right;
     margin-left: $margin;
     line-height: 1rem;
@@ -36,6 +32,6 @@
     & ~ p { margin: 0; }
 }
 
-.#{$vendor-prefix}notice-title {
+#{$notice-class-title} {
     margin: 0 0 ($margin / 2) 0;
 }

data/scss/toolkit/components/off-canvas.scss

@@ -1,12 +1,12 @@
 /**
- * @copyright   2010-2014, The Titon Project
+ * @copyright   2010-2015, The Titon Project
  * @license     http://opensource.org/licenses/BSD-3-Clause
  * @link        http://titon.io
  */
 
 @import "../common";
 
-.#{$vendor-prefix}off-canvas {
+#{$offCanvas-class} {
     position: fixed;
     overflow: auto;
     top: 0;
@@ -18,7 +18,7 @@
     -webkit-overflow-scrolling: touch;
 }
 
-.#{$vendor-prefix}on-canvas {
+#{$offCanvas-class-content} {
     position: relative;
     width: 100%;
     max-width: 100%;
@@ -26,16 +26,14 @@
     transition: transform $offCanvas-transition, padding $offCanvas-transition;
 }
 
-.#{$vendor-prefix}canvas {
+#{$offCanvas-class-wrapper} {
     position: relative;
     overflow-x: hidden;
 }
 
 //-------------------- Modifiers --------------------//
 
-.#{$vendor-prefix}off-canvas--left {
-    @extend .#{$vendor-prefix}off-canvas;
-
+#{$offCanvas-class-modifier-left} {
     left: 0;
     width: $offCanvas-left-width;
     transform: translate3d(-100%, 0, 0);
@@ -43,9 +41,7 @@
     &.show { transform: translate3d(0, 0, 0) !important; }
 }
 
-.#{$vendor-prefix}off-canvas--right {
-    @extend .#{$vendor-prefix}off-canvas;
-
+#{$offCanvas-class-modifier-right} {
     right: 0;
     width: $offCanvas-right-width;
     transform: translate3d(100%, 0, 0);
@@ -55,59 +51,77 @@
 
 //-------------------- Animations --------------------//
 
-.#{$vendor-prefix}canvas {
-    &.on-top,
-    &.squish {
-        .#{$vendor-prefix}off-canvas { z-index: 3; }
+#{$offCanvas-class-wrapper} {
+    @if index($offCanvas-animations, "on-top") or index($offCanvas-animations, "squish") {
+        &.on-top,
+        &.squish {
+            #{$offCanvas-class} { z-index: 3; }
+        }
     }
 
-    &.push-reveal {
-        .#{$vendor-prefix}off-canvas--left { transform: translate3d(-50%, 0, 0); }
-        .#{$vendor-prefix}off-canvas--right { transform: translate3d(50%, 0, 0); }
+    @if index($offCanvas-animations, "push-reveal") {
+        &.push-reveal {
+            #{$offCanvas-class-modifier-left} { transform: translate3d(-50%, 0, 0); }
+            #{$offCanvas-class-modifier-right} { transform: translate3d(50%, 0, 0); }
+        }
     }
 
-    &.reverse-push {
-        .#{$vendor-prefix}off-canvas--left { transform: translate3d(100%, 0, 0); }
-        .#{$vendor-prefix}off-canvas--right { transform: translate3d(-100%, 0, 0); }
+    @if index($offCanvas-animations, "reverse-push") {
+        &.reverse-push {
+            #{$offCanvas-class-modifier-left} { transform: translate3d(50%, 0, 0); }
+            #{$offCanvas-class-modifier-right} { transform: translate3d(-50%, 0, 0); }
+        }
     }
 
-    &.reveal {
-        .#{$vendor-prefix}off-canvas { transform: translate3d(0, 0, 0); }
+    @if index($offCanvas-animations, "reveal") {
+        &.reveal {
+            #{$offCanvas-class} { transform: translate3d(0, 0, 0); }
+        }
     }
 
-    &.push-down {
-        .#{$vendor-prefix}off-canvas--left,
-        .#{$vendor-prefix}off-canvas--right { transform: translate3d(0, -100%, 0); }
+    @if index($offCanvas-animations, "push-down") {
+        &.push-down {
+            #{$offCanvas-class-modifier-left},
+            #{$offCanvas-class-modifier-right} { transform: translate3d(0, -100%, 0); }
+        }
     }
 
-    &.push,
-    &.push-reveal,
-    &.push-down,
-    &.reverse-push,
-    &.reveal {
-        &.move-left {
-            .#{$vendor-prefix}on-canvas {
-                transform: translate3d(-$offCanvas-right-width, 0, 0);
+    @if index($offCanvas-animations, "push") or
+        index($offCanvas-animations, "push-reveal") or
+        index($offCanvas-animations, "push-down") or
+        index($offCanvas-animations, "reverse-push") or
+        index($offCanvas-animations, "reveal") {
+        &.push,
+        &.push-reveal,
+        &.push-down,
+        &.reverse-push,
+        &.reveal {
+            &.move-left {
+                #{$offCanvas-class-content} {
+                    transform: translate3d(-$offCanvas-right-width, 0, 0);
+                }
             }
-        }
 
-        &.move-right {
-            .#{$vendor-prefix}on-canvas {
-                transform: translate3d($offCanvas-left-width, 0, 0);
+            &.move-right {
+                #{$offCanvas-class-content} {
+                    transform: translate3d($offCanvas-left-width, 0, 0);
+                }
             }
         }
     }
 
-    &.squish {
-        &.move-left {
-            .#{$vendor-prefix}on-canvas {
-                padding-right: $offCanvas-right-width;
+    @if index($offCanvas-animations, "squish") {
+        &.squish {
+            &.move-left {
+                #{$offCanvas-class-content} {
+                    padding-right: $offCanvas-right-width;
+                }
             }
-        }
 
-        &.move-right {
-            .#{$vendor-prefix}on-canvas {
-                padding-left: $offCanvas-left-width;
+            &.move-right {
+                #{$offCanvas-class-content} {
+                    padding-left: $offCanvas-left-width;
+                }
             }
         }
     }
@@ -116,29 +130,35 @@
 //-------------------- Responsive --------------------//
 
 @include if-max($offCanvas-mobile-breakpoint) {
-    .#{$vendor-prefix}off-canvas--left {
+    #{$offCanvas-class-modifier-left} {
         width: $offCanvas-left-width-mobile;
     }
 
-    .#{$vendor-prefix}off-canvas--right {
+    #{$offCanvas-class-modifier-right} {
         width: $offCanvas-right-width-mobile;
     }
 
-    .#{$vendor-prefix}canvas {
-        &.push,
-        &.push-reveal,
-        &.push-down,
-        &.reverse-push,
-        &.reveal {
-            &.move-left {
-                .#{$vendor-prefix}on-canvas {
-                    transform: translate3d(-$offCanvas-right-width-mobile, 0, 0);
+    @if index($offCanvas-animations, "push") or
+        index($offCanvas-animations, "push-reveal") or
+        index($offCanvas-animations, "push-down") or
+        index($offCanvas-animations, "reverse-push") or
+        index($offCanvas-animations, "reveal") {
+        #{$offCanvas-class-wrapper} {
+            &.push,
+            &.push-reveal,
+            &.push-down,
+            &.reverse-push,
+            &.reveal {
+                &.move-left {
+                    #{$offCanvas-class-content} {
+                        transform: translate3d(-$offCanvas-right-width-mobile, 0, 0);
+                    }
                 }
-            }
 
-            &.move-right {
-                .#{$vendor-prefix}on-canvas {
-                    transform: translate3d($offCanvas-left-width-mobile, 0, 0);
+                &.move-right {
+                    #{$offCanvas-class-content} {
+                        transform: translate3d($offCanvas-left-width-mobile, 0, 0);
+                    }
                 }
             }
         }

data/scss/toolkit/components/pagination.scss

@@ -1,67 +1,108 @@
 /**
- * @copyright   2010-2014, The Titon Project
+ * @copyright   2010-2015, The Titon Project
  * @license     http://opensource.org/licenses/BSD-3-Clause
  * @link        http://titon.io
  */
 
 @import "../common";
 
-.#{$vendor-prefix}pagination {
+#{$pagination-class} {
     margin: $margin 0;
 
-    ul, ol {
+    ol {
         @include reset-list;
         @include clear-fix;
-    }
 
-    li {
-        position: relative;
-        float: left;
-        margin-right: $padding / 2;
+        > li {
+            position: relative;
+            float: left;
+            margin-right: $padding / 2;
 
-        > a {
-            display: block;
-        }
+            > a {
+                display: block;
+            }
 
-        &.is-active {
-            z-index: 1;
+            &.is-active {
+                z-index: 1;
+            }
         }
     }
 }
 
 //-------------------- Modifiers --------------------//
 
-.#{$vendor-prefix}pagination--grouped {
-    @extend .#{$vendor-prefix}pagination;
+@if index($pagination-modifiers, "grouped") {
+    #{$pagination-class-modifier-grouped} {
+        ol > li {
+            margin: 0;
+
+            &:hover,
+            > a:hover { z-index: 1; }
 
-    li {
-        margin-left: -1px;
-        margin-right: 0;
+            > a {
+                margin: 0;
+                border-radius: 0;
+            }
+        }
+
+        //----- Effects -----//
 
-        &:first-child { margin-left: 0; }
+        &#{$shape-round-class} ol {
+            border-radius: $round;
 
-        &:hover,
-        > a:hover { z-index: 1; }
+            > li:first-child > a {
+                border-top-left-radius: $round;
+                border-bottom-left-radius: $round;
+            }
 
-        > a {
-            margin: 0;
-            border-radius: 0;
+            > li:last-child > a {
+                border-top-right-radius: $round;
+                border-bottom-right-radius: $round;
+            }
         }
-    }
 
-    &.#{$shape-round-class} {
-        ul, ol {
-            border-radius: $round;
+        @if index($pagination-effects, "oval") {
+            &#{$shape-oval-class} ol {
+                border-radius: #{$oval-x} / #{$oval-y};
+
+                > li:first-child a {
+                    border-radius: #{$oval-x} 0 0 #{$oval-x} / #{$oval-y} 0 0 #{$oval-y};
+                }
+
+                > li:last-child a {
+                    border-radius: 0 #{$oval-x} #{$oval-x} 0 / 0 #{$oval-y} #{$oval-y} 0;
+                }
+            }
         }
 
-        li:first-child > a {
-            border-top-left-radius: $round;
-            border-bottom-left-radius: $round;
+        @if index($pagination-effects, "pill") {
+            &#{$shape-pill-class} ol {
+                border-radius: $pill;
+
+                > li:first-child a {
+                    border-top-left-radius: $pill;
+                    border-bottom-left-radius: $pill;
+                }
+
+                > li:last-child a {
+                    border-top-right-radius: $pill;
+                    border-bottom-right-radius: $pill;
+                }
+            }
         }
 
-        li:last-child > a {
-            border-top-right-radius: $round;
-            border-bottom-right-radius: $round;
+        @if index($pagination-effects, "skew") {
+            &#{$shape-skew-class} ol {
+                border-radius: #{$skew-x $skew-x} 0 0 / #{$skew-y $skew-y} 0 0;
+
+                > li:first-child a {
+                    border-radius: #{$skew-x} 0 0 0 / #{$skew-y} 0 0 0;
+                }
+
+                > li:last-child a {
+                    border-radius: 0 #{$skew-x} 0 0 / 0 #{$skew-y} 0 0;
+                }
+            }
         }
     }
 }

data/scss/toolkit/components/pin.scss

@@ -1,15 +1,19 @@
 /**
- * @copyright   2010-2014, The Titon Project
+ * @copyright   2010-2015, The Titon Project
  * @license     http://opensource.org/licenses/BSD-3-Clause
  * @link        http://titon.io
  */
 
 @import "../common";
 
-.#{$vendor-prefix}pin.sticky {
+#{$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;
 }
 
-.#{$vendor-prefix}pin.slide {
+#{$pin-class}.slide {
     transition: top $pin-transition linear, right $pin-transition linear, left $pin-transition linear;
 }

data/scss/toolkit/components/popover.scss

@@ -1,5 +1,5 @@
 /**
- * @copyright   2010-2014, The Titon Project
+ * @copyright   2010-2015, The Titon Project
  * @license     http://opensource.org/licenses/BSD-3-Clause
  * @link        http://titon.io
  */
@@ -9,7 +9,7 @@
 $popover-arrow-width-double: ($popover-arrow-width * 2);
 $popover-arrow-width-shadow: ($popover-arrow-width - 2);
 
-.#{$vendor-prefix}popover {
+#{$popover-class} {
     position: absolute;
     top: 0;
     left: 0;
@@ -20,48 +20,48 @@ $popover-arrow-width-shadow: ($popover-arrow-width - 2);
     max-width: 300px;
     visibility: hidden;
 
-    &.center-left .#{$vendor-prefix}popover-arrow,
-    &.center-right .#{$vendor-prefix}popover-arrow {
+    &.center-left #{$popover-class-arrow},
+    &.center-right #{$popover-class-arrow} {
         top: 50%;
         margin-top: -#{$popover-arrow-width}px;
     }
 
-    &.center-left .#{$vendor-prefix}popover-arrow {
+    &.center-left #{$popover-class-arrow} {
         border-left-color: $gray;
         right: -#{$popover-arrow-width-double}px;
     }
 
-    &.center-right .#{$vendor-prefix}popover-arrow {
+    &.center-right #{$popover-class-arrow} {
         border-right-color: $gray;
         left: -#{$popover-arrow-width-double}px;
     }
 
-    &.top-center .#{$vendor-prefix}popover-arrow,
-    &.bottom-center .#{$vendor-prefix}popover-arrow {
+    &.top-center #{$popover-class-arrow},
+    &.bottom-center #{$popover-class-arrow} {
         left: 50%;
         margin-left: -#{$popover-arrow-width}px;
     }
 
-    &.top-center .#{$vendor-prefix}popover-arrow {
+    &.top-center #{$popover-class-arrow} {
         border-top-color: $gray;
         bottom: -#{$popover-arrow-width-double}px;
     }
 
-    &.bottom-center .#{$vendor-prefix}popover-arrow {
+    &.bottom-center #{$popover-class-arrow} {
         border-bottom-color: $gray;
         top: -#{$popover-arrow-width-double}px;
     }
 }
 
-.#{$vendor-prefix}popover-head,
-.#{$vendor-prefix}popover-body {
+#{$popover-class-head},
+#{$popover-class-body} {
     padding: $small-padding;
 }
 
-.#{$vendor-prefix}popover-arrow {
+#{$popover-class-arrow} {
     border: #{$popover-arrow-width}px solid transparent;
 
-    &:after {
+    &::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

@@ -1,17 +1,17 @@
 /**
- * @copyright   2010-2014, The Titon Project
+ * @copyright   2010-2015, The Titon Project
  * @license     http://opensource.org/licenses/BSD-3-Clause
  * @link        http://titon.io
  */
 
 @import "../common";
 
-.#{$vendor-prefix}progress {
+#{$progress-class} {
     overflow: hidden;
     position: relative;
 
     @include is-small {
-        .#{$vendor-prefix}progress-bar {
+        #{$progress-class-bar} {
             height: 1rem;
             line-height: 1rem;
             font-size: $small-size;
@@ -19,7 +19,7 @@
     }
 
     @include is-large {
-        .#{$vendor-prefix}progress-bar {
+        #{$progress-class-bar} {
             height: 2rem;
             line-height: 2rem;
             font-size: $large-size;
@@ -27,9 +27,29 @@
     }
 
     @include clear-fix;
+
+    //----- Effects ------//
+
+    &#{$shape-round-class} {
+        #{$progress-class-bar}:first-child {
+            border-top-left-radius: $round;
+            border-bottom-left-radius: $round;
+        }
+    }
+
+    @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;
+            }
+        }
+    }
 }
 
-.#{$vendor-prefix}progress-bar {
+#{$progress-class-bar} {
     height: 1.5rem;
     line-height: 1.5rem;
     overflow: hidden;
@@ -38,13 +58,4 @@
     font-size: $medium-size;
     float: left;
     transition: width $progress-transition, background $progress-transition;
-}
-
-.#{$vendor-prefix}progress.#{$shape-round-class} {
-    border-radius: $round;
-
-    .#{$vendor-prefix}progress-bar:first-child {
-        border-top-left-radius: $round;
-        border-bottom-left-radius: $round;
-    }
 }