titon-toolkit 0.14.0 → 1.0.0.rc1

data/scss/toolkit/layout/typography.scss

@@ -16,7 +16,7 @@ h6 { font-size: 1.2rem; }
 h1, h2, h3, h4, h5, h6 {
     margin: 0;
     padding: 0;
-    line-height: 100%;
+    line-height: 1.25em;
     font-weight: normal;
 }
 
@@ -29,7 +29,7 @@ blockquote {
     padding: 0 $padding;
     border-left: 5px solid $gray;
 
-    cite { display: block; font-size: .8rem; }
+    cite { display: block; font-size: $small-size; }
     cite:before { content: "\2014 \00A0"; /* em dash */ }
 
     @include content-spacing;
@@ -38,12 +38,12 @@ blockquote {
 mark {
     display: inline-block;
     background: $gray-dark;
-    border-radius: 2px;
-    padding: 0 5px;
+    border-radius: $round;
+    padding: 0 .3em;
 }
 
 .text-muted { color: $default; }
-.text-info { color: shade($info, 15%); }
-.text-error { color: shade($error, 15%); }
-.text-warning { color: shade($warning, 15%); }
-.text-success { color: shade($success, 15%); }
+.text-info { color: darken($info, 15%); }
+.text-error { color: darken($error, 15%); }
+.text-warning { color: darken($warning, 15%); }
+.text-success { color: darken($success, 15%); }

data/scss/toolkit/mixins/_grid.scss

@@ -1,12 +1,4 @@
 
-$grid-columns-large: 12 !default;
-$grid-columns-medium: 8 !default;
-$grid-columns-small: 6 !default;
-
-$grid-columns-desktop: 12 !default;
-$grid-columns-tablet: 6 !default;
-$grid-columns-mobile: 3 !default;
-
 // Calculate a width using a grid cell
 @function grid-span($columns, $n) {
     @return (100% / $columns) * $n;

data/scss/toolkit/mixins/_layout.scss

@@ -1,16 +1,4 @@
 
-$padding: .75rem !default;
-$margin: 1.25rem !default;
-
-$small-size: .7rem !default;
-$small-padding: .5rem !default;
-
-$medium-size: inherit !default;
-$medium-padding: $padding !default;
-
-$large-size: 1.3rem !default;
-$large-padding: 1rem !default;
-
 // Container clear fix for floats
 @mixin clear-fix {
     &:after {
@@ -62,10 +50,10 @@ $large-padding: 1rem !default;
 
 //-------------------- States --------------------//
 
-// Contains hover and active styles (on self or inherited from parent)
+// Contains active styles (on self or inherited from parent)
 @mixin active-state {
     .is-active > &,
-    &:hover,
+    .is-active > li > &,
     &.is-active,
     &.is-active:hover { @content; }
 }
@@ -73,6 +61,7 @@ $large-padding: 1rem !default;
 // Contains disabled styles (on self or inherited from parent)
 @mixin disabled-state {
     .is-disabled > &,
+    .is-disabled > li > &,
     &.is-disabled,
     &.is-disabled:hover,
     &[disabled],

data/scss/toolkit/mixins/_responsive.scss

@@ -1,18 +1,4 @@
 
-$responsive-design: "mobile" !default;
-$responsive-size: "both" !default;
-
-$breakpoint-desktop: 1440px !default;
-$breakpoint-laptop: 1280px !default;
-$breakpoint-tablet-landscape: 1024px !default;
-$breakpoint-tablet-portrait: 768px !default;
-$breakpoint-mobile-landscape: 480px !default;
-$breakpoint-mobile-portrait: 320px !default;
-
-$breakpoint-small: 768px !default;
-$breakpoint-medium: 1280px !default;
-$breakpoint-large: 1440px !default;
-
 @mixin if-min($min) {
     @media only screen and (min-width: $min) {
         @content;

data/scss/toolkit/themes/titon.scss

@@ -18,7 +18,7 @@ body {
 //-------------------- Layout --------------------//
 
 a {
-    color: shade($info, 15%);
+    color: darken($info, 15%);
     text-decoration: none;
 
     &:hover { color: $info-dark; }
@@ -28,102 +28,54 @@ blockquote cite { color: $default; }
 
 code { background: $info-light; color: $info-dark; }
 var { background: $error-light; color: $error-dark; }
-mark { background: tint($warning-light, 25%); }
-
-.input-group {
-    > .input,
-    > .input-addon,
-    > .button,
-    > .button-group .button { height: 46px; }
-}
+mark { background: lighten($warning-light, 25%); }
 
 //-------------------- Accordion --------------------//
 
 .accordion-head {
     @include transition(all .15s);
 
+    &:hover { background-color: $gray-light; }
+
     .is-active & {
         background: $info;
         border-color: $info-dark;
         color: #fff;
-    }
-}
-
-//-------------------- Alert --------------------//
 
-.alert {
-    @include alert-style($default-light, $default-dark);
-
-    &.is-info { @include alert-style($info-light, $info-dark); }
-    &.is-error { @include alert-style($error-light, $error-dark); }
-    &.is-warning { @include alert-style($warning-light, $warning-dark); }
-    &.is-success { @include alert-style($success-light, $success-dark); }
+        &:hover { background-color: lighten($info, 5%); }
+    }
 }
 
-//-------------------- Breadcrumbs --------------------//
-
-.breadcrumbs {
-    overflow: hidden;
-
-    a {
-        height: 45px;
-        line-height: 45px;
-        padding: 0 30px 0 20px;
-        border-right: 0;
-        outline: none;
-
-        &:before,
-        &:after {
-            content: "";
-            position: absolute;
-            height: 32px;
-            width: 32px;
-            border-right: 1px solid $gray-lightest;
-            border-bottom: 1px solid $gray-lightest;
-            top: 6px;
-            right: 2px;
-            z-index: 1;
-            @include transform(rotate(-45deg));
-        }
-
-        &:before {
-            height: 32px;
-            width: 32px;
-            border-right: 1px solid $gray-dark;
-            border-bottom: 1px solid $gray-dark;
-            right: 4px;
-        }
+//-------------------- Button --------------------//
 
-        &:hover {
-            &:before {
-                border-color: $gray-darkest;
-            }
-        }
+@mixin button-style($base, $light, $dark) {
+    background: darken($base, 5%);
+    border: 1px solid darken($base, 12%);
 
-        .caret-right { display: none; }
+    &:hover {
+        color: #fff;
+        background-color: lighten($base, 5%);
     }
 
-    li:last-child a {
-        color: $default;
+    @include active-state {
+        color: #fff;
+        background-color: darken($base, 20%);
+        text-shadow: 1px 1px $dark;
+        border-color: darken($base, 30%);
     }
 
-    &.small {
-        a { height: 30px; line-height: 30px; padding: 0 25px 0 15px; }
-        a:before { height: 22px; width: 22px; top: 4px; }
-        a:after { height: 22px; width: 22px; top: 4px; }
+    @include disabled-state {
+        background: $base;
+        border-color: $base;
     }
 
-    &.large {
-        a { height: 50px; line-height: 50px; padding: 0 30px 0 20px; }
-        a:before { height: 40px; width: 40px; top: 4px; }
-        a:after { height: 40px; width: 40px; top: 4px; }
-    }
+    @content;
 }
 
-//-------------------- Button --------------------//
-
 .button {
     color: #fff;
+    font-weight: bold;
+    text-shadow: 1px 1px black(.2);
     @include transition(all .2s);
     @include button-style($default, $default-light, $default-dark);
 
@@ -131,6 +83,13 @@ mark { background: tint($warning-light, 25%); }
         top: 1px;
     }
 
+    @include disabled-state {
+        box-shadow: none;
+        text-shadow: none;
+        top: 0;
+        opacity: $disabled-opacity;
+    }
+
     &.is-info { @include button-style($info, $info-light, $info-dark); }
     &.is-error { @include button-style($error, $error-light, $error-dark); }
     &.is-warning { @include button-style($warning, $warning-light, $warning-dark); }
@@ -143,17 +102,8 @@ mark { background: tint($warning-light, 25%); }
     box-shadow: 5px 5px black(.25);
 
     li {
-        a {
-            @include transition(background .15s);
-
-            .caret-right {
-                top: 2px;
-            }
-        }
-
-        &.heading {
-            color: $default;
-            font-size: .8rem;
+        a .caret-right {
+            top: 2px;
         }
 
         &:hover > a {
@@ -169,10 +119,20 @@ mark { background: tint($warning-light, 25%); }
     }
 }
 
+.dropdown-heading {
+    color: $default;
+    font-size: .8rem;
+    background-color: $gray-dark !important;
+}
+
 .dropdown.dropdown--top {
     box-shadow: 5px -5px black(.25);
 }
 
+.dropdown.dropdown--left {
+    box-shadow: -5px 5px black(.25);
+}
+
 //-------------------- Flyout, TypeAhead --------------------//
 
 .flyout,
@@ -186,10 +146,6 @@ mark { background: tint($warning-light, 25%); }
         &:nth-child(odd) > a { background: $gray-lightest; }
         &.heading { background: $gray-dark; }
 
-        > a {
-            @include transition(all .15s);
-        }
-
         > a:hover,
         &.is-open > a,
         &.is-active > a {
@@ -211,10 +167,25 @@ mark { background: tint($warning-light, 25%); }
     }
 }
 
-//-------------------- Label, Badge --------------------//
+//-------------------- InputGroup --------------------//
 
-.label,
-.badge {
+.input-group {
+    > .input,
+    > .input-addon,
+    > .button,
+    > .button-group .button { height: 46px; }
+}
+
+//-------------------- Label --------------------//
+
+@mixin label-style($bg, $text) {
+    background: $bg;
+    color: $text;
+
+    @content;
+}
+
+.label {
     @include label-style($default-light, $default-dark);
 
     &.is-info { @include label-style($info-light, $info-dark); }
@@ -223,7 +194,7 @@ mark { background: tint($warning-light, 25%); }
     &.is-success { @include label-style($success-light, $success-dark); }
 }
 
-.label.label--left {
+.label.label--arrow-left {
     &:after { border-right-color: $default-light; }
     &.is-info:after { border-right-color: $info-light; }
     &.is-error:after { border-right-color: $error-light; }
@@ -231,7 +202,7 @@ mark { background: tint($warning-light, 25%); }
     &.is-success:after { border-right-color: $success-light; }
 }
 
-.label.label--right {
+.label.label--arrow-right {
     &:after { border-left-color: $default-light; }
     &.is-info:after { border-left-color: $info-light; }
     &.is-error:after { border-left-color: $error-light; }
@@ -239,6 +210,22 @@ mark { background: tint($warning-light, 25%); }
     &.is-success:after { border-left-color: $success-light; }
 }
 
+.label.label--ribbon-left {
+    &:after { border-right-color: darken($default, 15%); }
+    &.is-info:after { border-right-color: darken($info-light, 15%); }
+    &.is-error:after { border-right-color: darken($error-light, 15%); }
+    &.is-warning:after { border-right-color: darken($warning-light, 15%); }
+    &.is-success:after { border-right-color: darken($success-light, 15%); }
+}
+
+.label.label--ribbon-right {
+    &:after { border-left-color: darken($default, 15%); }
+    &.is-info:after { border-left-color: darken($info-light, 15%); }
+    &.is-error:after { border-left-color: darken($error-light, 15%); }
+    &.is-warning:after { border-left-color: darken($warning-light, 15%); }
+    &.is-success:after { border-left-color: darken($success-light, 15%); }
+}
+
 //-------------------- Modal --------------------//
 
 .modal-outer {
@@ -257,7 +244,30 @@ mark { background: tint($warning-light, 25%); }
 .modal-foot {
     background: $gray-lightest;
     text-align: center;
-    margin-bottom: -1px;
+}
+
+//-------------------- Notice --------------------//
+
+@mixin notice-style($bg, $text) {
+    color: $text;
+    background: lighten($bg, 5%);
+    border: 1px solid $bg;
+
+    hr { border-color: darken($bg, 10%); }
+
+    a { color: darken($text, 10%); }
+    a:hover { color: lighten($text, 25%); }
+
+    @content;
+}
+
+.notice {
+    @include notice-style($default-light, $default-dark);
+
+    &.is-info { @include notice-style($info-light, $info-dark); }
+    &.is-error { @include notice-style($error-light, $error-dark); }
+    &.is-warning { @include notice-style($warning-light, $warning-dark); }
+    &.is-success { @include notice-style($success-light, $success-dark); }
 }
 
 //-------------------- Popover --------------------//
@@ -324,9 +334,22 @@ mark { background: tint($warning-light, 25%); }
 
 //-------------------- Progress --------------------//
 
+@mixin progress-style($bg, $border) {
+    background: $bg;
+    text-shadow: 1px 1px $border;
+    border: 1px solid lighten($border, 35%);
+
+    @content;
+}
+
 .progress {
     box-shadow: inset 1px 1px 2px $gray-darkest;
     border-radius: $round;
+
+    &.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 {
@@ -335,11 +358,6 @@ mark { background: tint($warning-light, 25%); }
     border-top-left-radius: $round;
     border-bottom-left-radius: $round;
     @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); }
 }
 
 .progress-bar + .progress-bar {

data/scss/toolkit.scss

@@ -10,37 +10,38 @@
 // Basic layout styles should come first
 @import "toolkit/layout/base";
 @import "toolkit/layout/typography";
-@import "toolkit/layout/grid";
 @import "toolkit/layout/form";
-@import "toolkit/layout/input-group";
 @import "toolkit/layout/code";
-@import "toolkit/layout/table";
 
 // Then basic UI styles
-@import "toolkit/ui/alert";
-@import "toolkit/ui/breadcrumbs";
-@import "toolkit/ui/button";
-@import "toolkit/ui/button-group";
-@import "toolkit/ui/dropdown";
-@import "toolkit/ui/icon";
-@import "toolkit/ui/label-badge";
-@import "toolkit/ui/lazy-load";
-@import "toolkit/ui/matrix";
-@import "toolkit/ui/pagination";
-@import "toolkit/ui/pin";
-@import "toolkit/ui/progress";
+@import "toolkit/components/grid";
+@import "toolkit/components/breadcrumbs";
+@import "toolkit/components/button";
+@import "toolkit/components/button-group";
+@import "toolkit/components/dropdown";
+@import "toolkit/components/icon";
+@import "toolkit/components/input";
+@import "toolkit/components/input-group";
+@import "toolkit/components/label";
+@import "toolkit/components/lazy-load";
+@import "toolkit/components/matrix";
+@import "toolkit/components/notice";
+@import "toolkit/components/pagination";
+@import "toolkit/components/pin";
+@import "toolkit/components/progress";
+@import "toolkit/components/table";
 
 // And more advanced UI styles last
-@import "toolkit/modules/accordion";
-@import "toolkit/modules/blackout";
-@import "toolkit/modules/carousel";
-@import "toolkit/modules/flyout";
-@import "toolkit/modules/modal";
-@import "toolkit/modules/popover";
-@import "toolkit/modules/showcase";
-@import "toolkit/modules/tabs";
-@import "toolkit/modules/tooltip";
-@import "toolkit/modules/type-ahead";
+@import "toolkit/components/accordion";
+@import "toolkit/components/blackout";
+@import "toolkit/components/carousel";
+@import "toolkit/components/flyout";
+@import "toolkit/components/modal";
+@import "toolkit/components/popover";
+@import "toolkit/components/showcase";
+@import "toolkit/components/tabs";
+@import "toolkit/components/tooltip";
+@import "toolkit/components/type-ahead";
 
 // And visual effects very last
 @import "toolkit/effects/visual";

data/version.md

@@ -1 +1 @@
-0.14.0
+1.0.0-rc1

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: titon-toolkit
 version: !ruby/object:Gem::Version
-  version: 0.14.0
+  version: 1.0.0.rc1
 platform: ruby
 authors:
 - Titon
@@ -9,7 +9,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2013-10-23 00:00:00.000000000 Z
+date: 2013-11-05 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: sass
@@ -50,7 +50,32 @@ files:
 - scss/ie8.scss
 - scss/normalize.scss
 - scss/toolkit/_common.scss
-- scss/toolkit/_variables.scss
+- scss/toolkit/components/accordion.scss
+- scss/toolkit/components/blackout.scss
+- scss/toolkit/components/breadcrumbs.scss
+- scss/toolkit/components/button-group.scss
+- scss/toolkit/components/button.scss
+- scss/toolkit/components/carousel.scss
+- scss/toolkit/components/dropdown.scss
+- scss/toolkit/components/flyout.scss
+- scss/toolkit/components/grid.scss
+- scss/toolkit/components/icon.scss
+- scss/toolkit/components/input-group.scss
+- scss/toolkit/components/input.scss
+- scss/toolkit/components/label.scss
+- scss/toolkit/components/lazy-load.scss
+- scss/toolkit/components/matrix.scss
+- scss/toolkit/components/modal.scss
+- scss/toolkit/components/notice.scss
+- scss/toolkit/components/pagination.scss
+- scss/toolkit/components/pin.scss
+- scss/toolkit/components/popover.scss
+- scss/toolkit/components/progress.scss
+- scss/toolkit/components/showcase.scss
+- scss/toolkit/components/table.scss
+- scss/toolkit/components/tabs.scss
+- scss/toolkit/components/tooltip.scss
+- scss/toolkit/components/type-ahead.scss
 - scss/toolkit/effects/oval.scss
 - scss/toolkit/effects/pill.scss
 - scss/toolkit/effects/skew.scss
@@ -58,39 +83,12 @@ files:
 - scss/toolkit/layout/base.scss
 - scss/toolkit/layout/code.scss
 - scss/toolkit/layout/form.scss
-- scss/toolkit/layout/grid.scss
-- scss/toolkit/layout/input-group.scss
 - scss/toolkit/layout/responsive.scss
-- scss/toolkit/layout/table.scss
 - scss/toolkit/layout/typography.scss
 - scss/toolkit/mixins/_grid.scss
 - scss/toolkit/mixins/_layout.scss
 - scss/toolkit/mixins/_responsive.scss
-- scss/toolkit/mixins/_themes.scss
-- scss/toolkit/modules/accordion.scss
-- scss/toolkit/modules/blackout.scss
-- scss/toolkit/modules/carousel.scss
-- scss/toolkit/modules/flyout.scss
-- scss/toolkit/modules/modal.scss
-- scss/toolkit/modules/popover.scss
-- scss/toolkit/modules/showcase.scss
-- scss/toolkit/modules/tabs.scss
-- scss/toolkit/modules/tooltip.scss
-- scss/toolkit/modules/type-ahead.scss
 - scss/toolkit/themes/titon.scss
-- scss/toolkit/themes/tomorrow-night.scss
-- scss/toolkit/ui/alert.scss
-- scss/toolkit/ui/breadcrumbs.scss
-- scss/toolkit/ui/button-group.scss
-- scss/toolkit/ui/button.scss
-- scss/toolkit/ui/dropdown.scss
-- scss/toolkit/ui/icon.scss
-- scss/toolkit/ui/label-badge.scss
-- scss/toolkit/ui/lazy-load.scss
-- scss/toolkit/ui/matrix.scss
-- scss/toolkit/ui/pagination.scss
-- scss/toolkit/ui/pin.scss
-- scss/toolkit/ui/progress.scss
 - scss/toolkit.scss
 - license.md
 - readme.md
@@ -110,9 +108,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.0.3

data/scss/toolkit/_variables.scss

@@ -1,63 +0,0 @@
-
-//-------------------- Compass --------------------//
-
-$experimental-support-for-mozilla: true !default;
-$experimental-support-for-webkit: true !default;
-$experimental-support-for-opera: false !default;
-$experimental-support-for-microsoft: false !default;
-$experimental-support-for-khtml: false !default;
-
-$support-for-original-webkit-gradients: false !default;
-
-//-------------------- Colors --------------------//
-
-$gray-lightest: #fbfbfb !default;
-$gray-light: #f8f8f8 !default;
-$gray: #f5f5f5 !default;
-$gray-dark: #e5e5e5 !default;
-$gray-darkest: #c2c2c2 !default;
-
-$background-color: #fff !default;
-$foreground-color: #2d2d2d !default;
-
-//-------------------- States --------------------//
-
-$default: #929497 !default;
-$default-light: #d0d2d3 !default;
-$default-dark: #404041 !default;
-
-$info: #45c5eb !default;
-$info-light: #dbf1fa !default;
-$info-dark: #4067ab !default;
-
-$warning: #fcd04b !default;
-$warning-light: #ffebb5 !default;
-$warning-dark: #c87e00 !default;
-
-$success: #97cb6f !default;
-$success-light: #e7f2dd !default;
-$success-dark: #226b36 !default;
-
-$error: #f06060 !default;
-$error-light: #fdc5c1 !default;
-$error-dark: #b10e0e !default;
-
-$disabled-opacity: .75 !default;
-
-//-------------------- Border Styles --------------------//
-
-$round: .2rem !default;
-
-$pill: 2rem !default;
-
-$oval-x: 7rem !default;
-$oval-y: 2.75rem !default;
-
-$skew-x: 1rem !default;
-$skew-y: 3rem !default;
-$skew: $skew-x $skew-y;
-$skew-reverse: $skew-y $skew-x;
-
-//-------------------- Misc --------------------//
-
-$default-transition: .3s !default;