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

data/scss/toolkit/components/blackout.scss

@@ -1,29 +1,31 @@
 /**
- * @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}blackout {
-    position: fixed;
-    top: 0;
-    left: 0;
-    height: 100%;
-    width: 100%;
+#{$blackout-class} {
+    @include full-screen();
     z-index: $blackout-zindex;
     opacity: 0;
     visibility: hidden;
     background: black($blackout-opacity);
-    transition: all $blackout-transition;
 
-    .#{$vendor-prefix}loader {
+    // Using visibility transition also causes weirdness
+    transition: opacity $blackout-transition;
+
+    // This fixes issues in Chrome where the blackout properties are visible/block
+    // But the blackout is still not visible by the client IRL
+    -webkit-backface-visibility: hidden;
+
+    #{$loader-class} {
+        @include position-center;
         opacity: 1;
         color: #fff;
-        @include position-center;
 
         > span,
-        .spinner > span { background: #fff !important; }
+        #{$loader-class-spinner} > span { background: #fff !important; }
     }
 }

data/scss/toolkit/components/breadcrumb.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}breadcrumb {
+#{$breadcrumb-class} {
     text-align: left;
     margin: $margin 0;
 

data/scss/toolkit/components/button-group.scss

@@ -1,24 +1,22 @@
 /**
- * @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}button-group {
+#{$buttonGroup-class} {
     @include reset-inline-block;
     @include reset-list;
+    @include clear-fix;
     white-space: nowrap;
 
     > li,
-    > .#{$vendor-prefix}button {
+    > #{$button-class} {
         float: left;
-        margin-left: -1px;
         border-radius: 0;
 
-        &:first-child { margin-left: 0; }
-
         &:hover,
         &.is-active { z-index: 1; }
     }
@@ -27,15 +25,15 @@
         position: relative;
         list-style: none;
 
-        .#{$vendor-prefix}button {
+        #{$button-class} {
             display: block;
             border-radius: 0;
         }
     }
 
-    &.#{$shape-round-class} {
-        border-radius: $round;
+    //----- Effects -----//
 
+    &#{$shape-round-class} {
         @include button-group-first-child {
             border-top-left-radius: $round;
             border-bottom-left-radius: $round;
@@ -47,66 +45,147 @@
         }
     }
 
-    @include clear-fix;
+    @if index($buttonGroup-effects, "pill") {
+        &#{$shape-pill-class} {
+            border-radius: $pill;
+
+            @include button-group-first-child {
+                border-top-left-radius: $pill;
+                border-bottom-left-radius: $pill;
+            }
+
+            @include button-group-last-child {
+                border-top-right-radius: $pill;
+                border-bottom-right-radius: $pill;
+            }
+        }
+    }
+
+    @if index($buttonGroup-effects, "skew") {
+        &#{$shape-skew-class} {
+            border-top-left-radius: $skew;
+            border-top-right-radius: $skew;
+            border-bottom-left-radius: 0;
+            border-bottom-right-radius: 0;
+
+            @include button-group-first-child {
+                border-top-left-radius: $skew;
+                border-bottom-left-radius: 0;
+            }
+
+            @include button-group-last-child {
+                border-top-right-radius: $skew;
+                border-bottom-right-radius: 0;
+            }
+        }
+    }
 }
 
 // Space out groups
-.#{$vendor-prefix}button-group + .#{$vendor-prefix}button-group {
+#{$buttonGroup-class} + #{$buttonGroup-class} {
     margin-left: $margin;
 }
 
 //-------------------- Modifiers --------------------//
 
-.#{$vendor-prefix}button-group--vertical {
-    @extend .#{$vendor-prefix}button-group;
-    vertical-align: top;
+@if index($buttonGroup-modifiers, "vertical") {
+    #{$buttonGroup-class-modifier-vertical} {
+        vertical-align: top;
 
-    > li,
-    > .#{$vendor-prefix}button {
-        float: none;
-        display: block;
-        margin: -1px 0 0 0;
-        width: 100%;
-        max-width: 100%;
+        > li,
+        > #{$button-class} {
+            float: none;
+            display: block;
+            width: 100%;
+            max-width: 100%;
 
-        &:first-child { margin-top: 0; }
-        &:hover { z-index: 1; }
-    }
+            &:hover { z-index: 1; }
+        }
 
-    &.#{$shape-round-class},
-    &.#{$shape-pill-class},
-    &.#{$shape-skew-class},
-    &.#{$shape-skew-class}-reverse {
-        .#{$vendor-prefix}button { border-radius: 0; }
-    }
+        &#{$shape-round-class},
+        &#{$shape-pill-class},
+        &#{$shape-skew-class},
+        &#{$shape-skew-class}-reverse {
+            #{$button-class} { border-radius: 0; }
+        }
 
-    &.#{$shape-round-class} {
-        @include button-group-first-child {
-            border-top-left-radius: $round;
-            border-top-right-radius: $round;
+        //----- Effects -----//
+
+        &#{$shape-round-class} {
+            #{$button-class}:first-child,
+            #{$button-class}:last-child { border-radius: 0; }
+
+            @include button-group-first-child {
+                border-top-left-radius: $round;
+                border-top-right-radius: $round;
+            }
+
+            @include button-group-last-child {
+                border-bottom-left-radius: $round;
+                border-bottom-right-radius: $round;
+            }
         }
 
-        @include button-group-last-child {
-            border-bottom-left-radius: $round;
-            border-bottom-right-radius: $round;
+        @if index($buttonGroup-effects, "pill") {
+            &#{$shape-pill-class} {
+                border-radius: $pill;
+
+                @include button-group-first-child {
+                    border-top-left-radius: $pill;
+                    border-top-right-radius: $pill;
+                    border-bottom-left-radius: 0;
+                    border-bottom-right-radius: 0;
+                }
+
+                @include button-group-last-child {
+                    border-top-left-radius: 0;
+                    border-top-right-radius: 0;
+                    border-bottom-left-radius: $pill;
+                    border-bottom-right-radius: $pill;
+                }
+            }
+        }
+
+        @if index($buttonGroup-effects, "skew") {
+            &#{$shape-skew-class} {
+                border-top-left-radius: $skew-y 1.5rem;
+                border-bottom-left-radius: $skew-y 1.5rem;
+
+                @include button-group-first-child {
+                    border-top-left-radius: $skew-reverse;
+                }
+
+                @include button-group-last-child {
+                    border-bottom-left-radius: $skew-reverse;
+                    border-top-right-radius: 0;
+                }
+            }
+
+            &#{$shape-skew-class}-reverse {
+                border-top-right-radius: $skew-y 1.25rem;
+                border-bottom-right-radius: $skew-y 1.25rem;
+
+                @include button-group-first-child {
+                    border-top-right-radius: $skew-reverse;
+                }
+
+                @include button-group-last-child {
+                    border-bottom-right-radius: $skew-reverse;
+                }
+            }
         }
     }
 }
 
-.#{$vendor-prefix}button-group--justified {
-    @extend .#{$vendor-prefix}button-group;
-    display: table;
-    width: 100%;
+@if index($buttonGroup-modifiers, "justified") {
+    #{$buttonGroup-class-modifier-justified} {
+        display: table;
+        width: 100%;
 
-    > li,
-    > .#{$vendor-prefix}button {
-        float: none;
-        display: table-cell;
-        margin: 0 !important;
+        > li,
+        > #{$button-class} {
+            float: none;
+            display: table-cell;
+        }
     }
-
-    > li .#{$vendor-prefix}button { display: block; }
-
-    > li:not(:first-child) .#{$vendor-prefix}button,
-    > .#{$vendor-prefix}button:not(:first-child) { border-left: 0; }
 }

data/scss/toolkit/components/button.scss

@@ -1,17 +1,15 @@
 /**
- * @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}button {
+#{$button-class} {
     @include reset-inline-block;
     border: 0;
     margin: 0;
-    padding: 0;
-    border-radius: 0;
     cursor: pointer;
     text-align: center;
     font-weight: normal;
@@ -19,15 +17,118 @@
     white-space: nowrap;
     text-decoration: none;
     @include size-medium;
+    @include is-small(true, true) { @include size-small; }
+    @include is-large(true, true) { @include size-large; }
+
+    &.is-disabled,
+    &[disabled] {
+        cursor: not-allowed;
+    }
 
     &:focus { outline: none; }
 
-    @include is-small(true, true) { @include size-small; }
-    @include is-large(true, true) { @include size-large; }
+    //----- Effects -----//
 
-    &.#{$shape-round-class} { border-radius: $round; }
+    @if index($button-effects, "oval") {
+        &#{$shape-oval-class} {
+            border-radius: #{$oval-x} / #{$oval-y};
+        }
+    }
 
-    @include is-disabled {
-        cursor: not-allowed;
+    @if index($button-effects, "pill") {
+        &#{$shape-pill-class} {
+            border-radius: $pill;
+        }
+    }
+
+    @if index($button-effects, "skew") {
+        &#{$shape-skew-class} {
+            border-radius: #{$skew-x $skew-x} 0 0 / #{$skew-y $skew-y} 0 0;
+        }
+    }
+}
+
+//-------------------- Modifiers --------------------//
+
+@if index($button-modifiers, "gloss") {
+    #{$button-class-modifier-gloss} {
+        &::after {
+            content: "";
+            position: absolute;
+            width: 100%;
+            height: 60%;
+            top: 1%;
+            left: 0;
+            border-radius: 0 0 2rem 2rem / 0 0 1rem 1rem;
+            background: linear-gradient(to left, white(.3) 0%, white(0) 50%, white(.3) 100%);
+        }
+
+        //----- Effects -----//
+
+        &#{$shape-round-class}::after {
+            border-radius: .2rem .2rem 2rem 2rem / .5rem .5rem 1rem 1rem;
+            width: 98%;
+            left: 1.5%;
+        }
+
+        @if index($button-effects, "oval") {
+            &#{$shape-oval-class}::after {
+                width: 90%;
+                left: 5.5%;
+                border-radius: 5rem 5rem 4rem 4rem / 1.5rem 1.5rem 1.5rem 1.5rem;
+            }
+        }
+
+        @if index($button-effects, "pill") {
+            &#{$shape-pill-class}::after {
+                width: 90%;
+                left: 5.5%;
+                border-radius: 1rem 1rem 2rem 2rem / 1rem 1rem 1rem 1rem;
+            }
+        }
+
+        @if index($button-effects, "skew") {
+            &#{$shape-skew-class}::after {
+                width: 90%;
+                left: 5.5%;
+                border-radius: 1rem 1rem 3rem 3rem / 1rem 1rem 2rem 2rem;
+            }
+        }
+    }
+}
+
+@if index($button-modifiers, "reflect") {
+    #{$button-class-modifier-reflect}::after {
+        content: "";
+        position: absolute;
+        width: 100%;
+        height: 50%;
+        top: 0;
+        left: 0;
+        background: linear-gradient(180deg, white(0), white(.3));
+    }
+}
+
+@if index($button-modifiers, "glare") {
+    #{$button-class-modifier-glare}::after {
+        content: "";
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        top: 0;
+        left: 0;
+        background: linear-gradient(160deg, white(.5) 0%, white(.1) 50%, white(0) 50%, white(.3) 100%);
+    }
+}
+
+@if index($button-modifiers, "popout") {
+    #{$button-class-modifier-popout} {
+        box-shadow: 0 6px 0 0 black(.25) !important;
+        top: -3px;
+
+        &:active {
+            box-shadow: 0 3px 0 0 black(.5) !important;
+            top: 0;
+        }
     }
 }

data/scss/toolkit/components/carousel.scss

@@ -1,21 +1,22 @@
 /**
- * @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}carousel {
+#{$carousel-class} {
     margin: 0 auto;
     text-align: left;
     position: relative;
+    max-width: 100%;
 
-    &.no-next .#{$vendor-prefix}carousel-next { display: none; }
-    &.no-prev .#{$vendor-prefix}carousel-prev { display: none; }
+    &.no-next #{$carousel-class-next} { display: none; }
+    &.no-prev #{$carousel-class-prev} { display: none; }
 }
 
-.#{$vendor-prefix}carousel-items {
+#{$carousel-class-items} {
     /* 4:3 ratio */
     padding-bottom: 75%;
     width: 100%;
@@ -45,35 +46,10 @@
     }
 }
 
-.#{$vendor-prefix}carousel-prev,
-.#{$vendor-prefix}carousel-next {
-    display: block;
-    position: absolute;
-    padding: $padding;
-    width: auto;
-    height: auto;
-    z-index: 5;
-    top: 50%;
-    transform: translateY(-50%); // move up 50% of their height
-
-    &:focus { outline: none; }
-}
-
-.#{$vendor-prefix}carousel-prev { left: 0; }
-.#{$vendor-prefix}carousel-next { right: 0; }
-
-.#{$vendor-prefix}carousel-tabs {
-    position: absolute;
-    top: $padding;
-    left: 50%;
-    z-index: 5;
-    transform: translateX(-50%); // move left 50% of their width
-}
-
 //-------------------- Animations --------------------//
 
-.#{$vendor-prefix}carousel.slide {
-    .#{$vendor-prefix}carousel-items > ul {
+#{$carousel-class}.slide {
+    #{$carousel-class-items} > ul {
         > li {
             float: left;
         }
@@ -82,8 +58,8 @@
     }
 }
 
-.#{$vendor-prefix}carousel.fade {
-    .#{$vendor-prefix}carousel-items > ul {
+#{$carousel-class}.fade {
+    #{$carousel-class-items} > ul {
         position: relative;
 
         > li {
@@ -101,20 +77,18 @@
 
 //-------------------- Modifiers --------------------//
 
-.#{$vendor-prefix}carousel--wide {
-    @extend .#{$vendor-prefix}carousel;
-
-    .#{$vendor-prefix}carousel-items {
-        /* 16:9 ratio */
-        padding-bottom: 56.25%;
+@if index($carousel-modifiers, "wide") {
+    #{$carousel-class-modifier-wide} {
+        #{$carousel-class-items} {
+            padding-bottom: 56.25%; // 16:9 ratio
+        }
     }
 }
 
-.#{$vendor-prefix}carousel--square {
-    @extend .#{$vendor-prefix}carousel;
-
-    .#{$vendor-prefix}carousel-items {
-        /* 1:1 ratio */
-        padding-bottom: 100%;
+@if index($carousel-modifiers, "square") {
+    #{$carousel-class-modifier-square} {
+        #{$carousel-class-items} {
+            padding-bottom: 100%; // 1:1 ratio
+        }
     }
 }

data/scss/toolkit/{layout → components}/code.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
  */

data/scss/toolkit/components/divider.scss

@@ -1,46 +1,47 @@
 /**
- * @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}divider {
-    position: relative;
+#{$divider-class} {
     text-align: center;
-    margin: $margin 0;
-    user-select: none;
     overflow: hidden;
-    clear: both;
-    min-height: 2px;
 
-    &:after,
-    &:before {
-        position: absolute;
-        content: " ";
-        width: 50%;
-        top: 50%;
-        margin-top: -1px;
+    &::after,
+    &::before {
+        content: "";
+        display: inline-block;
+        vertical-align: middle;
+        position: relative;
+        width: 100%;
         border-top: 1px solid black(.1);
         border-bottom: 1px solid white(.75);
     }
 
-    &:before {
-        left: 0;
-        margin-left: -1.5rem;
+    &::before {
+        margin-left: -100%;
+        left: -$margin;
     }
 
-    &:after {
-        right: 0;
-        margin-right: -1.5rem;
+    &::after {
+        margin-right: -100%;
+        right: -$margin;
     }
 
     // Collapse the middle when there is no content
     &:empty {
-        &:before,
-        &:after {
-            margin: -1px 0 0 0 !important;
+        &::before,
+        &::after {
+            right: 0;
+            left: 0;
         }
     }
+
+    > span {
+        display: inline-block;
+        vertical-align: middle;
+    }
 }