titon-toolkit 1.1.0 → 1.2.0

data/scss/toolkit/effects/skew.scss

@@ -8,7 +8,9 @@
 
 //-------------------- Button --------------------//
 
-.#{$vendor-prefix}button.#{$shape-skew-class} { 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 --------------------//
 
@@ -18,16 +20,12 @@
     border-bottom-left-radius: 0;
     border-bottom-right-radius: 0;
 
-    > li:first-child .#{$vendor-prefix}button,
-    > .#{$vendor-prefix}button:first-child,
-    > .#{$vendor-prefix}button.first {
+    @include button-group-first-child {
         border-top-left-radius: $skew;
         border-bottom-left-radius: 0;
     }
 
-    > li:last-child .#{$vendor-prefix}button,
-    > .#{$vendor-prefix}button:last-child,
-    > .#{$vendor-prefix}button.last {
+    @include button-group-last-child {
         border-top-right-radius: $skew;
         border-bottom-right-radius: 0;
     }
@@ -38,13 +36,11 @@
         border-top-left-radius: $skew-y 1.5rem;
         border-bottom-left-radius: $skew-y 1.5rem;
 
-        > li:first-child .#{$vendor-prefix}button,
-        > .#{$vendor-prefix}button:first-child {
+        @include button-group-first-child {
             border-top-left-radius: $skew-reverse;
         }
 
-        > li:last-child .#{$vendor-prefix}button,
-        > .#{$vendor-prefix}button:last-child {
+        @include button-group-last-child {
             border-bottom-left-radius: $skew-reverse;
             border-top-right-radius: 0;
         }
@@ -54,13 +50,11 @@
         border-top-right-radius: $skew-y 1.25rem;
         border-bottom-right-radius: $skew-y 1.25rem;
 
-        > li:first-child .#{$vendor-prefix}button,
-        > .#{$vendor-prefix}button:first-child {
+        @include button-group-first-child {
             border-top-right-radius: $skew-reverse;
         }
 
-        > li:last-child .#{$vendor-prefix}button,
-        > .#{$vendor-prefix}button:last-child {
+        @include button-group-last-child {
             border-bottom-right-radius: $skew-reverse;
         }
     }

data/scss/toolkit/layout/base.scss

@@ -25,24 +25,10 @@
 
 // Display
 .shown { display: block; }
-.inline { display: inline; }
-.inline-block { display: inline-block; }
 .hidden { display: none; }
-
-// Positioning
-.relative { position: relative; }
-.absolute { position: absolute; }
-.static { position: static; }
+.no-scroll { overflow: hidden; }
 
 // Layout
-.clear-fix { @include clear-fix; }
-.clear {
-    clear: both;
-    display: block;
-    margin: 0;
-    padding: 0;
-}
-
 .vertical-center {
     position: absolute;
     left: 50%;
@@ -50,6 +36,8 @@
     @include transform(translate(-50%, -50%));
 }
 
+.clear-fix { @include clear-fix; }
+
 // Styles
 .#{$shape-round-class} { border-radius: $round; }
 .#{$state-is-prefix}draggable { cursor: move; }
@@ -102,10 +90,8 @@
 
 // Bullets
 .bullets {
-    list-style: none;
+    @include reset-list();
     line-height: 100%;
-    margin: 0;
-    padding: 0;
 
     li {
         display: inline-block;

data/scss/toolkit/layout/code.scss

@@ -24,7 +24,7 @@ kbd {
 
 pre {
     padding: $padding;
-    margin: $margin 0;
+    margin: $margin 0 0 0;
     background: $gray-light;
     border: 1px solid $gray-dark;
     text-align: left;

data/scss/toolkit/layout/form.scss

@@ -6,15 +6,13 @@
 
 @import "../common";
 
-form { text-align: left; }
-
 fieldset {
     padding: $padding 0;
     margin: 0;
     border: 0;
     border-top: 1px solid $gray-dark;
 
-    &.#{$state-is-prefix}legendless {
+    &.no-legend {
         border: 0;
         padding: 0;
     }
@@ -53,11 +51,12 @@ label,
 .#{$vendor-prefix}input-radio,
 .#{$vendor-prefix}input-checkbox {
     @include reset-inline-block;
+    line-height: normal;
     border: 1px solid $gray-dark;
     @include size-medium;
 
-    &.#{$size-small-class} { @include size-small; }
-    &.#{$size-large-class} { @include size-large; }
+    @include is-small(true, true) { @include size-small; }
+    @include is-large(true, true) { @include size-large; }
 }
 
 .#{$vendor-prefix}input {
@@ -86,9 +85,7 @@ label,
     }
 }
 
-.#{$vendor-prefix}input-static,
-.#{$vendor-prefix}input-radio,
-.#{$vendor-prefix}input-checkbox {
+.#{$vendor-prefix}input-static {
     background: transparent;
     border-color: transparent;
     padding-left: 0 !important;
@@ -98,19 +95,21 @@ label,
 .#{$vendor-prefix}input-radio,
 .#{$vendor-prefix}input-checkbox {
     padding: 0;
+    border: 0;
 
     input[type="checkbox"],
     input[type="radio"] {
         vertical-align: middle;
         position: relative;
-        top: -1px;
+        top: -2px;
         margin-right: 5px;
     }
 }
 
 select.#{$vendor-prefix}input {
     -webkit-appearance: none;
-    padding: $medium-padding - .05rem; // fixes vertical alignment
+    -moz-appearance: none;
+    appearance: none;
 }
 
 select.#{$vendor-prefix}input[multiple] {
@@ -190,6 +189,8 @@ textarea.#{$vendor-prefix}input {
 }
 
 .#{$vendor-prefix}form--inline {
+    margin-bottom: -($margin / 2);
+
     .#{$vendor-prefix}field,
     .#{$vendor-prefix}field-label,
     .#{$vendor-prefix}form-actions {

data/scss/toolkit/layout/responsive.scss

@@ -6,10 +6,12 @@
 
 @import "../common";
 
-img, video, canvas {
+.fluid {
+    display: block;
+    width: 100%;
+    height: auto;
     max-width: 100%;
     max-height: auto;
-    height: auto;
 }
 
 .show-retina,

data/scss/toolkit/layout/typography.scss

@@ -25,7 +25,15 @@ h1, h2, h3, h4, h5, h6 {
     font-weight: normal;
 }
 
-p, ul, ol, hr {
+p, ul, ol {
+    margin: $margin 0 0 0;
+
+    ul, ol {
+        margin: 0;
+    }
+}
+
+hr {
     margin: $margin 0;
 }
 
@@ -36,8 +44,6 @@ blockquote {
 
     cite { display: block; font-size: $small-size; }
     cite:before { content: "\2014 \00A0"; /* em dash */ }
-
-    @include content-spacing;
 }
 
 mark {

data/scss/toolkit/mixins/_components.scss

@@ -0,0 +1,16 @@
+
+@mixin button-group-first-child {
+    > li:first-child .#{$vendor-prefix}button,
+    > .#{$vendor-prefix}button:first-child,
+    > .#{$vendor-prefix}button.first {
+        @content;
+    }
+}
+
+@mixin button-group-last-child {
+    > li:last-child .#{$vendor-prefix}button,
+    > .#{$vendor-prefix}button:last-child,
+    > .#{$vendor-prefix}button.last {
+        @content;
+    }
+}

data/scss/toolkit/mixins/_helper.scss

@@ -7,4 +7,19 @@
 // White transparent background
 @function white($opacity){
     @return rgba(255, 255, 255, $opacity);
+}
+
+// Take a list of classes (without .) and generate a selector list
+@function join-classes($classes, $inherit: true) {
+    $selectors: ();
+
+    @each $class in $classes {
+        @if $inherit {
+            $selectors: $selectors, unquote("&." + $class);
+        } @else {
+            $selectors: $selectors, unquote("." + $class);
+        }
+    }
+
+    @return $selectors;
 }

data/scss/toolkit/mixins/_layout.scss

@@ -30,15 +30,6 @@
     @include transform(translate(-50%, -50%));
 }
 
-// Remove the top and bottom margin from content elements
-// Allows for perfect spacing within content blocks
-@mixin content-spacing {
-    p, ul, ol, hr, blockquote {
-        &:first-child { margin-top: 0; }
-        &:last-child { margin-bottom: 0; }
-    }
-}
-
 @mixin size-small {
     font-size: $small-size;
     padding: $small-padding;

data/scss/toolkit/themes/{titon.scss → demo.scss}

@@ -33,6 +33,7 @@ mark { background: lighten($warning-light, 25%); }
 //-------------------- Accordion --------------------//
 
 .accordion-header {
+    background: $gray;
     border: 1px solid $gray-dark;
     margin: -1px;
     @include transition(all .15s);
@@ -52,6 +53,11 @@ mark { background: lighten($warning-light, 25%); }
 
 .breadcrumb {
     border: 1px solid $gray-dark;
+    background: $gray;
+
+    ul, ol {
+        .caret { color: $gray-darkest; }
+    }
 }
 
 //-------------------- Button --------------------//
@@ -82,6 +88,7 @@ mark { background: lighten($warning-light, 25%); }
 
 .button {
     color: #fff;
+    background: $gray;
     font-weight: bold;
     text-shadow: 1px 1px black(.2);
     @include transition(all .2s);
@@ -143,8 +150,13 @@ mark { background: lighten($warning-light, 25%); }
 .drop--up,
 .drop--right,
 .drop--left {
+    background: $gray;
     border: 1px solid $gray-dark;
     box-shadow: 5px 5px black(.25);
+    padding: $small-padding;
+
+    ul { padding: $small-padding; }
+    > ul { padding: 0; }
 
     li {
         > a {
@@ -215,6 +227,11 @@ mark { background: lighten($warning-light, 25%); }
     }
 }
 
+.flyout-heading,
+.type-ahead-heading {
+    background: $gray-dark;
+}
+
 .type-ahead-highlight { background: $warning-light; }
 
 .type-ahead {
@@ -256,13 +273,16 @@ mark { background: lighten($warning-light, 25%); }
     }
 }
 
-//-------------------- InputGroup --------------------//
-
 .input-group {
-    > .input,
-    > .input-addon,
-    > .button,
-    > .button-group .button { height: 46px; }
+    > .button { height: 44px; }
+
+    &.small > .button { height: 30px; }
+    &.large > .button { height: 59px; }
+}
+
+.input-addon {
+    background: $gray;
+    border: 1px solid $gray-dark;
 }
 
 //-------------------- Label --------------------//
@@ -326,10 +346,6 @@ mark { background: lighten($warning-light, 25%); }
 
 //-------------------- Modal --------------------//
 
-.modal {
-    margin: $margin;
-}
-
 .modal-inner {
     background: $gray;
     border: 1px solid $gray-dark;
@@ -447,18 +463,26 @@ mark { background: lighten($warning-light, 25%); }
 }
 
 .progress {
+    background: $gray;
     box-shadow: inset 1px 1px 2px $gray-darkest;
-
-    &.is-info .progress-bar { @include progress-style($info, $info-dark); }
-    &.is-error .progress-bar { @include progress-style($error, $error-dark); }
-    &.is-warning .progress-bar { @include progress-style($warning, $warning-dark); }
-    &.is-success .progress-bar { @include progress-style($success, $success-dark); }
 }
 
 .progress-bar {
     color: #fff;
     font-weight: bold;
     @include progress-style($default, $default-dark);
+
+    &.is-info { @include progress-style($info, $info-dark); }
+    &.is-error { @include progress-style($error, $error-dark); }
+    &.is-warning { @include progress-style($warning, $warning-dark); }
+    &.is-success { @include progress-style($success, $success-dark); }
+}
+
+//-------------------- Showcase --------------------//
+
+.showcase-inner {
+    background: $gray;
+    border: 1px solid $gray-dark;
 }
 
 //-------------------- Tooltip --------------------//

data/version.md

@@ -1 +1 @@
-1.1.0
+1.2.0

metadata

@@ -1,15 +1,15 @@
 --- !ruby/object:Gem::Specification
 name: titon-toolkit
 version: !ruby/object:Gem::Version
-  version: 1.1.0
+  version: 1.2.0
 platform: ruby
 authors:
-- Titon
+- Project Titon
 - Miles Johnson
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2014-02-14 00:00:00.000000000 Z
+date: 2014-03-14 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: sass
@@ -54,7 +54,7 @@ dependencies:
       - !ruby/object:Gem::Version
         version: 0.1.alpha.0
 description: A collection of extensible front-end UI components for the responsive
-  web.
+  and mobile web.
 email: 
 executables: []
 extensions: []
@@ -100,13 +100,14 @@ files:
 - scss/toolkit/layout/form.scss
 - scss/toolkit/layout/responsive.scss
 - scss/toolkit/layout/typography.scss
+- scss/toolkit/mixins/_components.scss
 - scss/toolkit/mixins/_grid.scss
 - scss/toolkit/mixins/_helper.scss
 - scss/toolkit/mixins/_layout.scss
 - scss/toolkit/mixins/_responsive.scss
 - scss/toolkit/mixins/_state.scss
 - scss/toolkit/mixins/_unit.scss
-- scss/toolkit/themes/titon.scss
+- scss/toolkit/themes/demo.scss
 - scss/toolkit.scss
 - changelog.md
 - license.md