titon-toolkit 1.0.5 → 1.1.0.rc.1

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

@@ -17,9 +17,7 @@
     @include transition(opacity 0.3s);
 
     ul {
-        list-style: none;
-        margin: 0;
-        padding: 0;
+        @include reset-list;
         min-width: 200px;
     }
 
@@ -66,7 +64,7 @@
         left: 0;
     }
 
-    .#{$state-is-prefix}shadow {
+    .is-shadow {
         color: gray;
     }
 

data/scss/toolkit/effects/oval.scss

@@ -8,11 +8,11 @@
 
 //-------------------- Button --------------------//
 
-.#{$vendor-prefix}button.oval { border-radius: #{$oval-x} / #{$oval-y}; }
+.#{$vendor-prefix}button.#{$shape-oval-class} { border-radius: #{$oval-x} / #{$oval-y}; }
 
 //-------------------- Pagination --------------------//
 
-.#{$vendor-prefix}pagination--grouped.oval {
+.#{$vendor-prefix}pagination--grouped.#{$shape-oval-class} {
     ul {
         border-radius: #{$oval-x} / #{$oval-y};
     }
@@ -28,7 +28,7 @@
 
 //-------------------- Visual --------------------//
 
-.#{$vendor-prefix}visual-gloss.oval:after {
+.#{$vendor-prefix}visual-gloss.#{$shape-oval-class}:after {
     width: 90%;
     left: 5.5%;
     border-radius: 5rem 5rem 4rem 4rem / 1.5rem 1.5rem 1.5rem 1.5rem;

data/scss/toolkit/effects/pill.scss

@@ -8,11 +8,11 @@
 
 //-------------------- Button --------------------//
 
-.#{$vendor-prefix}button.pill { border-radius: $pill; }
+.#{$vendor-prefix}button.#{$shape-pill-class} { border-radius: $pill; }
 
 //-------------------- ButtonGroup --------------------//
 
-.#{$vendor-prefix}button-group.pill {
+.#{$vendor-prefix}button-group.#{$shape-pill-class} {
     border-radius: $pill;
 
     > li:first-child .#{$vendor-prefix}button,
@@ -30,7 +30,7 @@
     }
 }
 
-.#{$vendor-prefix}button-group--vertical.pill {
+.#{$vendor-prefix}button-group--vertical.#{$shape-pill-class} {
     border-radius: $pill;
 
     > li:first-child .#{$vendor-prefix}button,
@@ -52,7 +52,7 @@
 
 //-------------------- Pagination --------------------//
 
-.#{$vendor-prefix}pagination--grouped.pill {
+.#{$vendor-prefix}pagination--grouped.#{$shape-pill-class} {
     ul {
         border-radius: $pill;
     }
@@ -70,7 +70,7 @@
 
 //-------------------- Progress --------------------//
 
-.#{$vendor-prefix}progress.pill {
+.#{$vendor-prefix}progress.#{$shape-pill-class} {
     border-radius: $pill;
 
     .#{$vendor-prefix}progress-bar {
@@ -81,7 +81,7 @@
 
 //-------------------- Visual --------------------//
 
-.#{$vendor-prefix}visual-gloss.pill:after {
+.#{$vendor-prefix}visual-gloss.#{$shape-pill-class}:after {
     width: 90%;
     left: 5.5%;
     border-radius: 1rem 1rem 2rem 2rem / 1rem 1rem 1rem 1rem;

data/scss/toolkit/effects/skew.scss

@@ -8,11 +8,11 @@
 
 //-------------------- Button --------------------//
 
-.#{$vendor-prefix}button.skew { border-radius: #{$skew-x $skew-x} 0 0 / #{$skew-y $skew-y} 0 0; }
+.#{$vendor-prefix}button.#{$shape-skew-class} { border-radius: #{$skew-x $skew-x} 0 0 / #{$skew-y $skew-y} 0 0; }
 
 //-------------------- ButtonGroup --------------------//
 
-.#{$vendor-prefix}button-group.skew {
+.#{$vendor-prefix}button-group.#{$shape-skew-class} {
     border-top-left-radius: $skew;
     border-top-right-radius: $skew;
     border-bottom-left-radius: 0;
@@ -34,7 +34,7 @@
 }
 
 .#{$vendor-prefix}button-group--vertical {
-    &.skew {
+    &.#{$shape-skew-class} {
         border-top-left-radius: $skew-y 1.5rem;
         border-bottom-left-radius: $skew-y 1.5rem;
 
@@ -50,7 +50,7 @@
         }
     }
 
-    &.skew-reverse {
+    &.#{$shape-skew-class}-reverse {
         border-top-right-radius: $skew-y 1.25rem;
         border-bottom-right-radius: $skew-y 1.25rem;
 
@@ -68,7 +68,7 @@
 
 //-------------------- Pagination --------------------//
 
-.#{$vendor-prefix}pagination--grouped.skew {
+.#{$vendor-prefix}pagination--grouped.#{$shape-skew-class} {
     ul {
         border-radius: #{$skew-x $skew-x} 0 0 / #{$skew-y $skew-y} 0 0;
     }
@@ -84,7 +84,7 @@
 
 //-------------------- Visual --------------------//
 
-.#{$vendor-prefix}visual-gloss.skew:after {
+.#{$vendor-prefix}visual-gloss.#{$shape-skew-class}:after {
     width: 90%;
     left: 5.5%;
     border-radius: 1rem 1rem 3rem 3rem / 1rem 1rem 2rem 2rem;

data/scss/toolkit/effects/visual.scss

@@ -20,7 +20,7 @@
         @include background-image(linear-gradient(left, white(.3) 0%, white(0) 50%, white(.3) 100%));
     }
 
-    &.round:after {
+    &.#{$shape-round-class}:after {
         border-radius: .2rem .2rem 2rem 2rem / .5rem .5rem 1rem 1rem;
         width: 98%;
         left: 1.5%;

data/scss/toolkit/layout/base.scss

@@ -51,7 +51,7 @@
 }
 
 // Styles
-.round { border-radius: $round; }
+.#{$shape-round-class} { border-radius: $round; }
 .#{$state-is-prefix}draggable { cursor: move; }
 .#{$state-is-prefix}dragging { cursor: grabbing; }
 .#{$state-is-prefix}disabled,
@@ -93,7 +93,7 @@
 .arrow-right:before {
     display: inline-block;
     position: relative;
-    content: "\025B3"; /* bigtriangleup */
+    content: "\025B4"; /* blacktriangle */
 }
 
 .arrow-right:before { @include transform(rotate(90deg)); }

data/scss/toolkit/layout/form.scss

@@ -114,7 +114,6 @@ select.#{$vendor-prefix}input {
 }
 
 select.#{$vendor-prefix}input[multiple] {
-    min-height: 150px;
     max-height: 500px;
 }
 

data/scss/toolkit/mixins/_grid.scss

@@ -32,7 +32,6 @@
 
 // Styles for the grid row containing the columns.
 @mixin grid-row($width: $grid-width) {
-    text-align: left;
     width: $width;
     max-width: $width;
 

data/scss/toolkit/mixins/_layout.scss

@@ -3,25 +3,33 @@
 @mixin clear-fix {
     &:after {
         content: "";
-        display: block;
-        height: 0;
-        line-height: 0;
+        display: table;
         clear: both;
-        visibility: hidden;
     }
 }
 
 // Reset an inline-block element to defaults
 @mixin reset-inline-block {
     display: inline-block;
-    border: 0;
-    margin: 0;
-    padding: 0;
     position: relative;
-    text-decoration: none;
     vertical-align: middle;
 }
 
+// Reset a list and remove default styles
+@mixin reset-list {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+}
+
+// Align an element in the center of another element
+@mixin position-center {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    @include transform(translate(-50%, -50%));
+}
+
 // Remove the top and bottom margin from content elements
 // Allows for perfect spacing within content blocks
 @mixin content-spacing {

data/scss/toolkit/themes/titon.scss

@@ -137,21 +137,32 @@ mark { background: lighten($warning-light, 25%); }
     &:hover { opacity: 1; }
 }
 
-//-------------------- Dropdown --------------------//
+//-------------------- Drop --------------------//
 
-.dropdown {
+.drop--down,
+.drop--up,
+.drop--right,
+.drop--left {
     border: 1px solid $gray-dark;
     box-shadow: 5px 5px black(.25);
 
     li {
-        a .caret-right {
-            top: 2px;
+        > a {
+            color: darken($info, 15%);
+
+            .caret-right { top: 2px; }
         }
 
         &:hover > a {
-            background: $info;
+            color: darken($info, 15%);
+            background: $info-light;
+        }
+
+        &.is-active > a {
             color: #fff;
+            background: $info;
 
+            .drop-desc { color: #fff; }
             .caret-right { border-left-color: #fff; }
         }
 
@@ -161,20 +172,26 @@ mark { background: lighten($warning-light, 25%); }
     }
 }
 
-.dropdown-heading {
+.drop-heading {
     color: $default;
     font-size: .8rem;
     background-color: $gray-dark !important;
 }
 
-.dropdown.on-top {
+.drop--up {
     box-shadow: 5px -5px black(.25);
 }
 
-.dropdown.on-left {
+.drop--left {
     box-shadow: -5px 5px black(.25);
 }
 
+.drop-desc {
+    display: block;
+    color: $gray-darkest;
+    font-size: .7rem;
+}
+
 //-------------------- Flyout, TypeAhead --------------------//
 
 .flyout,
@@ -226,9 +243,15 @@ mark { background: lighten($warning-light, 25%); }
         }
     }
 
-    select {
-        &:focus + .select {
-            box-shadow: 0 0 5px $info-light;
+    select:focus + .select,
+    .select.is-active {
+        box-shadow: 0 0 5px $info-light;
+    }
+
+    .select.is-active {
+        .caret-down {
+            top: -5px;
+            @include transform(rotate(-180deg));
         }
     }
 }

data/version.md

@@ -1 +1 @@
-1.0.5
+1.1.0-rc.1

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: titon-toolkit
 version: !ruby/object:Gem::Version
-  version: 1.0.5
+  version: 1.1.0.rc.1
 platform: ruby
 authors:
 - Titon
@@ -9,7 +9,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2014-01-07 00:00:00.000000000 Z
+date: 2014-02-11 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: sass
@@ -39,6 +39,20 @@ dependencies:
     - - ">="
       - !ruby/object:Gem::Version
         version: '0.11'
+- !ruby/object:Gem::Dependency
+  name: animation
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: 0.1.alpha.0
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: 0.1.alpha.0
 description: A collection of extensible front-end UI components for the responsive
   web.
 email: 
@@ -55,7 +69,7 @@ files:
 - scss/toolkit/components/button-group.scss
 - scss/toolkit/components/button.scss
 - scss/toolkit/components/carousel.scss
-- scss/toolkit/components/dropdown.scss
+- scss/toolkit/components/drop.scss
 - scss/toolkit/components/flyout.scss
 - scss/toolkit/components/grid.scss
 - scss/toolkit/components/icon.scss
@@ -63,6 +77,8 @@ files:
 - scss/toolkit/components/input.scss
 - scss/toolkit/components/label.scss
 - scss/toolkit/components/lazy-load.scss
+- scss/toolkit/components/loader.scss
+- scss/toolkit/components/mask.scss
 - scss/toolkit/components/matrix.scss
 - scss/toolkit/components/modal.scss
 - scss/toolkit/components/notice.scss
@@ -112,9 +128,9 @@ required_ruby_version: !ruby/object:Gem::Requirement
       version: '0'
 required_rubygems_version: !ruby/object:Gem::Requirement
   requirements:
-  - - ">="
+  - - ">"
     - !ruby/object:Gem::Version
-      version: '0'
+      version: 1.3.1
 requirements: []
 rubyforge_project: 
 rubygems_version: 2.1.11