titon-toolkit 1.1.0 → 1.2.0

data/scss/toolkit/components/notice.scss

@@ -9,7 +9,6 @@
 .#{$vendor-prefix}notice {
     margin: $margin 0;
     padding: $padding;
-    background: $gray-light;
     text-align: left;
 
     hr {
@@ -21,7 +20,9 @@
         font-weight: bold;
     }
 
-    @include content-spacing;
+    p:first-child {
+        margin-top: 0;
+    }
 }
 
 .#{$vendor-prefix}notice-close {
@@ -29,6 +30,8 @@
     margin-left: $margin;
     line-height: 1rem;
     padding: 5px;
+    background: none;
+    border: 0;
 
     & ~ p { margin: 0; }
 }

data/scss/toolkit/components/pagination.scss

@@ -7,7 +7,6 @@
 @import "../common";
 
 .#{$vendor-prefix}pagination {
-    display: block;
     margin: $margin 0;
 
     ul, ol {

data/scss/toolkit/components/popover.scss

@@ -6,6 +6,9 @@
 
 @import "../common";
 
+$popover-arrow-width-double: ($popover-arrow-width * 2);
+$popover-arrow-width-shadow: ($popover-arrow-width - 2);
+
 .#{$vendor-prefix}popover {
     position: absolute;
     top: 0;
@@ -16,38 +19,37 @@
     z-index: 500;
     max-width: 300px;
     visibility: hidden;
-    background: $gray;
 
     &.center-left .#{$vendor-prefix}popover-arrow,
     &.center-right .#{$vendor-prefix}popover-arrow {
         top: 50%;
-        margin-top: -8px;
+        margin-top: -#{$popover-arrow-width}px;
     }
 
     &.center-left .#{$vendor-prefix}popover-arrow {
         border-left-color: $gray;
-        right: -16px;
+        right: -#{$popover-arrow-width-double}px;
     }
 
     &.center-right .#{$vendor-prefix}popover-arrow {
         border-right-color: $gray;
-        left: -16px;
+        left: -#{$popover-arrow-width-double}px;
     }
 
     &.top-center .#{$vendor-prefix}popover-arrow,
     &.bottom-center .#{$vendor-prefix}popover-arrow {
         left: 50%;
-        margin-left: -8px;
+        margin-left: -#{$popover-arrow-width}px;
     }
 
     &.top-center .#{$vendor-prefix}popover-arrow {
         border-top-color: $gray;
-        bottom: -16px;
+        bottom: -#{$popover-arrow-width-double}px;
     }
 
     &.bottom-center .#{$vendor-prefix}popover-arrow {
         border-bottom-color: $gray;
-        top: -16px;
+        top: -#{$popover-arrow-width-double}px;
     }
 }
 
@@ -57,16 +59,11 @@
 }
 
 .#{$vendor-prefix}popover-arrow {
-    width: 0;
-    height: 0;
-    border: 8px solid transparent;
-    position: absolute;
+    border: #{$popover-arrow-width}px solid transparent;
 
     &:after {
-        content: "";
-        border: 6px solid transparent;
-        position: absolute;
-        top: -6px;
-        left: -6px;
+        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

@@ -9,7 +9,6 @@
 .#{$vendor-prefix}progress {
     overflow: hidden;
     position: relative;
-    background: $gray;
 
     @include is-small {
         .#{$vendor-prefix}progress-bar {
@@ -19,14 +18,6 @@
         }
     }
 
-    @include is-medium {
-        .#{$vendor-prefix}progress-bar {
-            height: 1.5rem;
-            line-height: 1.5rem;
-            font-size: $medium-size;
-        }
-    }
-
     @include is-large {
         .#{$vendor-prefix}progress-bar {
             height: 2rem;
@@ -35,11 +26,6 @@
         }
     }
 
-    .#{$vendor-prefix}progress-bar + .#{$vendor-prefix}progress-bar {
-        border-top-left-radius: 0;
-        border-bottom-left-radius: 0;
-    }
-
     @include clear-fix;
 }
 
@@ -50,15 +36,14 @@
     position: relative;
     text-align: center;
     font-size: $medium-size;
-    background: $gray-darkest;
     float: left;
-    @include transition(width .6s, background $progress-transition);
+    @include transition(width $progress-transition, background $progress-transition);
 }
 
 .#{$vendor-prefix}progress.#{$shape-round-class} {
     border-radius: $round;
 
-    .#{$vendor-prefix}progress-bar {
+    .#{$vendor-prefix}progress-bar:first-child {
         border-top-left-radius: $round;
         border-bottom-left-radius: $round;
     }

data/scss/toolkit/components/showcase.scss

@@ -17,6 +17,7 @@
     z-index: 610; // higher than blackout
     opacity: 0;
     visibility: hidden;
+    -webkit-backface-visibility: hidden;
     backface-visibility: hidden;
     @include transform(translateX(-50%) translateY(-50%));
     @include transition(opacity $showcase-transition, visibility $showcase-transition);
@@ -43,13 +44,13 @@
     right: $padding;
     line-height: 1rem;
     padding: $padding;
+    background: none;
+    border: 0;
 }
 
 .#{$vendor-prefix}showcase-inner {
     position: relative;
     padding: $padding;
-    background: $gray;
-    border: 1px solid $gray-dark;
 }
 
 .#{$vendor-prefix}showcase-items {
@@ -107,6 +108,8 @@
     height: auto;
     z-index: 5;
     top: 50%;
+    background: none;
+    border: 0;
     @include transform(translateY(-50%)); // move up 50% of their height
 
     &:focus { outline: none; }

data/scss/toolkit/components/table.scss

@@ -8,7 +8,8 @@
 
 .#{$vendor-prefix}table {
     width: 100%;
-    background: $gray;
+    margin-top: $margin;
+    background: $gray-lightest;
     border-collapse: collapse;
 
     th, td {
@@ -39,13 +40,8 @@
         th { border-color: $gray-darkest; }
     }
 
-    // Zebra striping
-    tbody tr {
-        background: $gray;
-
-        &:nth-child(odd) { background: $gray-lightest; }
-        &.#{$vendor-prefix}table-divider { background: $gray-dark; }
-    }
+    // Divider
+    tbody tr.#{$vendor-prefix}table-divider { background: $gray-dark !important; }
 }
 
 .#{$vendor-prefix}table-responsive {
@@ -60,6 +56,12 @@
     tbody tr:not(.#{$vendor-prefix}table-divider):hover { background: #fff; }
 }
 
+.#{$vendor-prefix}table.#{$state-is-prefix}striped tbody tr {
+    background: $gray;
+
+    &:nth-child(odd) { background: $gray-lightest; }
+}
+
 .#{$vendor-prefix}table.#{$state-is-prefix}sortable {
     thead th {
         padding: 0;

data/scss/toolkit/components/tabs.scss

@@ -6,6 +6,7 @@
 
 @import "../common";
 
+// Need a property for @extend to work
 .#{$vendor-prefix}tabs {
     text-align: left;
 }

data/scss/toolkit/components/tooltip.scss

@@ -6,6 +6,8 @@
 
 @import "../common";
 
+$tooltip-arrow-width-double: ($tooltip-arrow-width * 2);
+
 .#{$vendor-prefix}tooltip {
     position: absolute;
     top: 0;
@@ -23,45 +25,46 @@
     &.center-left .#{$vendor-prefix}tooltip-arrow,
     &.center-right .#{$vendor-prefix}tooltip-arrow {
         top: 50%;
-        margin-top: -6px;
+        margin-top: -#{$tooltip-arrow-width}px;
     }
 
     &.center-left .#{$vendor-prefix}tooltip-arrow {
         border-left-color: #000;
-        right: -12px;
+        right: -#{$tooltip-arrow-width-double}px;
     }
 
     &.center-right .#{$vendor-prefix}tooltip-arrow {
         border-right-color: #000;
-        left: -12px;
+        left: -#{$tooltip-arrow-width-double}px;
     }
 
     &.top-center .#{$vendor-prefix}tooltip-arrow,
     &.bottom-center .#{$vendor-prefix}tooltip-arrow {
         left: 50%;
-        margin-left: -6px;
+        margin-left: -#{$tooltip-arrow-width}px;
     }
 
     &.top-center .#{$vendor-prefix}tooltip-arrow {
         border-top-color: #000;
-        bottom: -12px;
+        bottom: -#{$tooltip-arrow-width-double}px;
     }
 
     &.bottom-center .#{$vendor-prefix}tooltip-arrow {
         border-bottom-color: #000;
-        top: -12px;
+        top: -#{$tooltip-arrow-width-double}px;
     }
 }
 
-.#{$vendor-prefix}tooltip-arrow {
+.#{$vendor-prefix}tooltip-arrow,
+.#{$vendor-prefix}popover-arrow {
     width: 0;
     height: 0;
-    border: 6px solid transparent;
+    border: #{$tooltip-arrow-width}px solid transparent;
     position: absolute;
 
     &:after {
         content: "";
-        border: 4px solid transparent;
+        border: #{($tooltip-arrow-width - 2)}px solid transparent;
         position: absolute;
     }
 }
@@ -70,50 +73,43 @@
 
 .#{$vendor-prefix}tooltip,
 .#{$vendor-prefix}popover {
-    &.fade {
-        opacity: 0;
-        @include transition(opacity 0.5s);
-    }
-
-    &.from-above {
-        @include transition(transform $tooltip-transition);
-        @include transform(scale(1.2));
-
-        &.show {
-            @include transform(scale(1));
+    @if index($popover-tooltip-animation, "fade") {
+        &.fade {
+            opacity: 0;
+            @include transition(opacity 0.5s);
         }
     }
 
-    &.from-below {
-        @include transition(transform $tooltip-transition);
-        @include transform(scale(0.8));
+    @if index($popover-tooltip-animation, "from-above") {
+        &.from-above {
+            @include transition(transform $tooltip-transition);
+            @include transform(scale(1.2));
 
-        &.show {
-            @include transform(scale(1));
+            &.show {
+                @include transform(scale(1));
+            }
         }
     }
 
-    &.flip-rotate {
-        @include transition(transform $tooltip-transition);
-        @include transform(rotate(-15deg));
+    @if index($popover-tooltip-animation, "from-below") {
+        &.from-below {
+            @include transition(transform $tooltip-transition);
+            @include transform(scale(0.8));
 
-        &.show {
-            @include transform(rotate(0deg));
+            &.show {
+                @include transform(scale(1));
+            }
         }
     }
 
-    &.slide-in {
-        @include transition(transform $tooltip-transition);
-
-        &.top-left { @include transform(translate(-25%, -25%)); }
-        &.top-center { @include transform(translateY(-50%)); }
-        &.top-right { @include transform(translate(25%, -25%)); }
-        &.center-left { @include transform(translateX(-25%)); }
-        &.center-right { @include transform(translateX(25%)); }
-        &.bottom-left { @include transform(translate(-25%, 25%)); }
-        &.bottom-center { @include transform(translateY(50%)); }
-        &.bottom-right { @include transform(translate(25%, 25%)); }
+    @if index($popover-tooltip-animation, "flip-rotate") {
+        &.flip-rotate {
+            @include transition(transform $tooltip-transition);
+            @include transform(rotate(-15deg));
 
-        &.show { @include transform(translate(0)); }
+            &.show {
+                @include transform(rotate(0deg));
+            }
+        }
     }
 }

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

@@ -13,7 +13,6 @@
     z-index: 500;
     opacity: 0;
     visibility: hidden;
-    background: $gray;
     @include transition(opacity 0.3s);
 
     ul {
@@ -30,9 +29,7 @@
         }
 
         > a:hover,
-        &.#{$state-is-prefix}active a {
-            background: $gray-lightest;
-        }
+        &.#{$state-is-prefix}active a {}
     }
 }
 
@@ -41,16 +38,15 @@
     line-height: 100%;
     display: block;
     text-decoration: none;
-    background: $gray-dark;
 }
 
 .#{$vendor-prefix}type-ahead-highlight {
     background: #fff;
+    padding: 0;
 }
 
 .#{$vendor-prefix}type-ahead-desc {
     display: block;
-    color: $gray-darkest;
     font-size: .7rem;
 }
 

data/scss/toolkit/effects/oval.scss

@@ -8,7 +8,9 @@
 
 //-------------------- Button --------------------//
 
-.#{$vendor-prefix}button.#{$shape-oval-class} { border-radius: #{$oval-x} / #{$oval-y}; }
+.#{$vendor-prefix}button.#{$shape-oval-class} {
+    border-radius: #{$oval-x} / #{$oval-y};
+}
 
 //-------------------- Pagination --------------------//
 

data/scss/toolkit/effects/pill.scss

@@ -8,23 +8,21 @@
 
 //-------------------- Button --------------------//
 
-.#{$vendor-prefix}button.#{$shape-pill-class} { border-radius: $pill; }
+.#{$vendor-prefix}button.#{$shape-pill-class} {
+    border-radius: $pill;
+}
 
 //-------------------- ButtonGroup --------------------//
 
 .#{$vendor-prefix}button-group.#{$shape-pill-class} {
     border-radius: $pill;
 
-    > li:first-child .#{$vendor-prefix}button,
-    > .#{$vendor-prefix}button:first-child,
-    > .#{$vendor-prefix}button.first {
+    @include button-group-first-child {
         border-top-left-radius: $pill;
         border-bottom-left-radius: $pill;
     }
 
-    > li:last-child .#{$vendor-prefix}button,
-    > .#{$vendor-prefix}button:last-child,
-    > .#{$vendor-prefix}button.last {
+    @include button-group-last-child {
         border-top-right-radius: $pill;
         border-bottom-right-radius: $pill;
     }
@@ -33,16 +31,14 @@
 .#{$vendor-prefix}button-group--vertical.#{$shape-pill-class} {
     border-radius: $pill;
 
-    > li:first-child .#{$vendor-prefix}button,
-    > .#{$vendor-prefix}button:first-child {
+    @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;
     }
 
-    > li:last-child .#{$vendor-prefix}button,
-    > .#{$vendor-prefix}button:last-child {
+    @include button-group-last-child {
         border-top-left-radius: 0;
         border-top-right-radius: 0;
         border-bottom-left-radius: $pill;
@@ -73,7 +69,7 @@
 .#{$vendor-prefix}progress.#{$shape-pill-class} {
     border-radius: $pill;
 
-    .#{$vendor-prefix}progress-bar {
+    .#{$vendor-prefix}progress-bar:first-child {
         border-top-left-radius: $pill;
         border-bottom-left-radius: $pill;
     }