titon-toolkit 1.0.0.rc.2 → 1.0.0.rc.3

data/scss/toolkit/mixins/_unit.scss

@@ -0,0 +1,73 @@
+
+// Remove the unit and return the integer
+@function strip-unit($value) {
+    @return ($value / ($value * 0 + 1));
+}
+
+// Convert a unit value to a pixel while using $base-size as the reference
+@function to-pixel($from) {
+    $from-unit: unit($from);
+
+    @if $from-unit == 'px' {
+        @return $from;
+
+    } @else if $from-unit == '%' or $from-unit == 'em' or $from-unit == 'rem' {
+        @return (strip-unit($from) * $base-size);
+
+    } @else {
+        @warn 'Unknown pixel conversion unit type.';
+    }
+
+    @return $from;
+}
+
+// Convert a unit value to a percentage while using $base-size as the reference
+@function to-percent($from) {
+    $from-unit: unit($from);
+
+    @if $from-unit == '%' {
+        @return $from;
+
+    } @else if $from-unit == 'px' or $from-unit == 'em' or $from-unit == 'rem' {
+        @return percentage((to-pixel($from) / $base-size) / 100);
+
+    } @else {
+        @warn 'Unknown percentage conversion unit type.';
+    }
+
+    @return $from;
+}
+
+// Convert a unit value to a rem unit while using $base-size as the reference
+@function to-rem($from) {
+    $from-unit: unit($from);
+
+    @if $from-unit == 'rem' {
+        @return $from;
+
+    } @else if $from-unit == 'px' or $from-unit == '%' or $from-unit == 'em' {
+        @return (to-pixel($from) / $base-size) * 1rem;
+
+    } @else {
+        @warn 'Unknown rem conversion unit type.';
+    }
+
+    @return $from;
+}
+
+// Convert a unit value to an em unit while using $base-size as the reference
+@function to-em($from) {
+    $from-unit: unit($from);
+
+    @if $from-unit == 'em' {
+        @return $from;
+
+    } @else if $from-unit == 'px' or $from-unit == '%' or $from-unit == 'rem' {
+        @return (to-pixel($from) / $base-size) * 1em;
+
+    } @else {
+        @warn 'Unknown em conversion unit type.';
+    }
+
+    @return $from;
+}

data/scss/toolkit/themes/titon.scss

@@ -33,6 +33,8 @@ mark { background: lighten($warning-light, 25%); }
 //-------------------- Accordion --------------------//
 
 .accordion-head {
+    border: 1px solid $gray-dark;
+    margin: -1px;
     @include transition(all .15s);
 
     &:hover { background-color: $gray-light; }
@@ -46,6 +48,12 @@ mark { background: lighten($warning-light, 25%); }
     }
 }
 
+//-------------------- Breadcrumbs --------------------//
+
+.breadcrumbs {
+    border: 1px solid $gray-dark;
+}
+
 //-------------------- Button --------------------//
 
 @mixin button-style($base, $light, $dark) {
@@ -57,14 +65,14 @@ mark { background: lighten($warning-light, 25%); }
         background-color: lighten($base, 5%);
     }
 
-    @include active-state {
+    @include is-active {
         color: #fff;
         background-color: darken($base, 20%);
         text-shadow: 1px 1px $dark;
         border-color: darken($base, 30%);
     }
 
-    @include disabled-state {
+    @include is-disabled {
         background: $base;
         border-color: $base;
     }
@@ -83,7 +91,7 @@ mark { background: lighten($warning-light, 25%); }
         top: 1px;
     }
 
-    @include disabled-state {
+    @include is-disabled {
         box-shadow: none;
         text-shadow: none;
         top: 0;
@@ -96,9 +104,43 @@ mark { background: lighten($warning-light, 25%); }
     &.is-success { @include button-style($success, $success-light, $success-dark); }
 }
 
+//-------------------- Carousel, Showcase --------------------//
+
+.carousel-prev,
+.carousel-next,
+.showcase-prev,
+.showcase-next {
+    opacity: $carousel-opacity;
+
+    .arrow-left,
+    .arrow-right {
+        color: #fff;
+        font-size: 2rem;
+    }
+
+    &:hover { opacity: 1; }
+
+    // Large icons for large resolutions
+    @include if-tablet-landscape {
+        .arrow-left,
+        .arrow-right {
+            font-size: 3rem;
+        }
+    }
+}
+
+.showcase-close {
+    opacity: $showcase-opacity;
+
+    .x { color: #fff; }
+
+    &:hover { opacity: 1; }
+}
+
 //-------------------- Dropdown --------------------//
 
 .dropdown {
+    border: 1px solid $gray-dark;
     box-shadow: 5px 5px black(.25);
 
     li {
@@ -125,11 +167,11 @@ mark { background: lighten($warning-light, 25%); }
     background-color: $gray-dark !important;
 }
 
-.dropdown.dropdown--top {
+.dropdown.on-top {
     box-shadow: 5px -5px black(.25);
 }
 
-.dropdown.dropdown--left {
+.dropdown.on-left {
     box-shadow: -5px 5px black(.25);
 }
 
@@ -144,7 +186,6 @@ mark { background: lighten($warning-light, 25%); }
 
     li {
         &:nth-child(odd) > a { background: $gray-lightest; }
-        &.heading { background: $gray-dark; }
 
         > a:hover,
         &.is-open > a,
@@ -160,10 +201,35 @@ mark { background: lighten($warning-light, 25%); }
 .type-ahead-highlight { background: $warning-light; }
 
 .type-ahead {
-    li a:hover,
-    li.is-active a {
-        .type-ahead-desc { color: $gray-lightest; }
-        .type-ahead-highlight{ background: $info-light; color: $info-dark; }
+    li {
+        > a:hover,
+        &.is-active a {
+            .type-ahead-desc { color: $gray-lightest; }
+            .type-ahead-highlight{ background: $info-light; color: $info-dark; }
+        }
+    }
+}
+
+//-------------------- Input --------------------//
+
+.custom-input {
+    .checkbox,
+    .radio,
+    .select {
+        @include transition(all $default-transition);
+    }
+
+    input {
+        &:checked + .checkbox,
+        &:checked + .radio {
+            box-shadow: 0 0 5px $info-light;
+        }
+    }
+
+    select {
+        &:focus + .select {
+            box-shadow: 0 0 5px $info-light;
+        }
     }
 }
 
@@ -194,7 +260,9 @@ mark { background: lighten($warning-light, 25%); }
     &.is-success { @include label-style($success-light, $success-dark); }
 }
 
-.label.label--arrow-left {
+.label--arrow-left {
+    @extend .label;
+
     &:after { border-right-color: $default-light; }
     &.is-info:after { border-right-color: $info-light; }
     &.is-error:after { border-right-color: $error-light; }
@@ -202,7 +270,9 @@ mark { background: lighten($warning-light, 25%); }
     &.is-success:after { border-right-color: $success-light; }
 }
 
-.label.label--arrow-right {
+.label--arrow-right {
+    @extend .label;
+
     &:after { border-left-color: $default-light; }
     &.is-info:after { border-left-color: $info-light; }
     &.is-error:after { border-left-color: $error-light; }
@@ -210,7 +280,9 @@ mark { background: lighten($warning-light, 25%); }
     &.is-success:after { border-left-color: $success-light; }
 }
 
-.label.label--ribbon-left {
+.label--ribbon-left {
+    @extend .label;
+
     &: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%); }
@@ -218,7 +290,9 @@ mark { background: lighten($warning-light, 25%); }
     &.is-success:after { border-right-color: darken($success-light, 15%); }
 }
 
-.label.label--ribbon-right {
+.label--ribbon-right {
+    @extend .label;
+
     &: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%); }
@@ -228,8 +302,11 @@ mark { background: lighten($warning-light, 25%); }
 
 //-------------------- Modal --------------------//
 
-.modal-outer {
+.modal {
     margin: $margin;
+}
+
+.modal-inner {
     background: $gray;
     border: 1px solid $gray-dark;
     box-shadow: 5px 5px black(.25);
@@ -337,14 +414,13 @@ mark { background: lighten($warning-light, 25%); }
 @mixin progress-style($bg, $border) {
     background: $bg;
     text-shadow: 1px 1px $border;
-    border: 1px solid lighten($border, 35%);
+    border: 1px solid darken($bg, 12%);
 
     @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); }
@@ -355,16 +431,9 @@ mark { background: lighten($warning-light, 25%); }
 .progress-bar {
     color: #fff;
     font-weight: bold;
-    border-top-left-radius: $round;
-    border-bottom-left-radius: $round;
     @include progress-style($default, $default-dark);
 }
 
-.progress-bar + .progress-bar {
-    border-top-left-radius: 0;
-    border-bottom-left-radius: 0;
-}
-
 //-------------------- Tooltip --------------------//
 
 .tooltip {

data/version.md

@@ -1 +1 @@
-1.0.0-rc.2
+1.0.0-rc.3

metadata

@@ -1,7 +1,8 @@
 --- !ruby/object:Gem::Specification
 name: titon-toolkit
 version: !ruby/object:Gem::Version
-  version: 1.0.0.rc.2
+  version: 1.0.0.rc.3
+  prerelease: 6
 platform: ruby
 authors:
 - Titon
@@ -9,47 +10,49 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2013-11-16 00:00:00.000000000 Z
+date: 2013-11-26 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: sass
   requirement: !ruby/object:Gem::Requirement
+    none: false
     requirements:
-    - - '>='
+    - - ! '>='
       - !ruby/object:Gem::Version
         version: 3.2.0
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
+    none: false
     requirements:
-    - - '>='
+    - - ! '>='
       - !ruby/object:Gem::Version
         version: 3.2.0
 - !ruby/object:Gem::Dependency
   name: compass
   requirement: !ruby/object:Gem::Requirement
+    none: false
     requirements:
-    - - '>='
+    - - ! '>='
       - !ruby/object:Gem::Version
         version: '0.11'
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
+    none: false
     requirements:
-    - - '>='
+    - - ! '>='
       - !ruby/object:Gem::Version
         version: '0.11'
-description: A powerful front-end UI and component toolkit. Provides Sass files for
-  use in projects.
+description: A collection of extensible front-end UI components for the responsive
+  web.
 email: 
 executables: []
 extensions: []
 extra_rdoc_files: []
 files:
 - lib/titon-toolkit.rb
-- scss/ie8.scss
 - scss/normalize.scss
-- scss/toolkit/_common.scss
 - scss/toolkit/components/accordion.scss
 - scss/toolkit/components/blackout.scss
 - scss/toolkit/components/breadcrumbs.scss
@@ -86,9 +89,13 @@ files:
 - scss/toolkit/layout/responsive.scss
 - scss/toolkit/layout/typography.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/_common.scss
 - scss/toolkit.scss
 - license.md
 - readme.md
@@ -97,25 +104,26 @@ files:
 homepage: http://titon.io
 licenses:
 - BSD-2
-metadata: {}
 post_install_message: 
 rdoc_options: []
 require_paths:
 - lib
 required_ruby_version: !ruby/object:Gem::Requirement
+  none: false
   requirements:
-  - - '>='
+  - - ! '>='
     - !ruby/object:Gem::Version
       version: '0'
 required_rubygems_version: !ruby/object:Gem::Requirement
+  none: false
   requirements:
-  - - '>'
+  - - ! '>'
     - !ruby/object:Gem::Version
       version: 1.3.1
 requirements: []
 rubyforge_project: 
-rubygems_version: 2.0.3
+rubygems_version: 1.8.23
 signing_key: 
-specification_version: 4
+specification_version: 3
 summary: Provides Titon Toolkit Sass files for use in projects.
 test_files: []

checksums.yaml

@@ -1,7 +0,0 @@
----
-SHA1:
-  metadata.gz: fc30641f32e37d76624fe6ad5b150e5813da1286
-  data.tar.gz: 2611239a2d146aa078fee9fd5f9c1f4c581a1c07
-SHA512:
-  metadata.gz: 21871c29c0afb5e6f976fefa941547429220db7ab65ce79ed5f74504aca057dbb7012c6d1075026f3865d25f40ec24a49a044808797e44ad8356860336e19ab0
-  data.tar.gz: 1f7851607db03b0070ef94f2c91566377e37df6915f8ad205235d8fdbe0aa6fa387cbf3519c7d37cc495573e7d436f1cfe25dcca23e503c5be209aa74f35048c

data/scss/ie8.scss

@@ -1,184 +0,0 @@
-/**
- * @copyright   2010-2013, The Titon Project
- * @license     http://opensource.org/licenses/bsd-license.php
- * @link        http://titon.io
- */
-
-$padding-small: 8px;
-$padding: 12px;
-$padding-large: 16px;
-$margin: 20px;
-
-$font-small: 12px;
-$font: 16px;
-$font-large: 20px;
-
-// IE8 does not support em/rem
-// So update padding, margin and font-size
-
-html, body { font-size: 14px; line-height: 150%; }
-
-h1 { font-size: 48px; }
-h2 { font-size: 40px; }
-h3 { font-size: 34px; }
-h4 { font-size: 28px; }
-h5 { font-size: 24px; }
-h6 { font-size: 18px; }
-
-.x,
-.arrow-up,
-.arrow-down,
-.arrow-left,
-.arrow-right { font-size: 24px; }
-
-.input,
-.input-static,
-.breadcrumbs a,
-.button {
-    font-size: $font;
-}
-
-code,
-var,
-kbd,
-pre,
-blockquote cite,
-.field-help,
-.breadcrumbs.small a,
-.button.small,
-.small .button {
-    font-size: $font-small;
-}
-
-legend,
-.breadcrumbs.large a,
-.button.large,
-.large .button {
-    font-size: $font-large;
-}
-
-.type-ahead-desc,
-.progress-bar {
-    font-size: 9px;
-}
-
-pre,
-.input,
-.input-static,
-.form--horizontal .field-label,
-.input-addon,
-.table td,
-.table th,
-.table.table--sortable thead th a,
-.table.table--sortable thead th span,
-.accordion-head,
-.accordion-body,
-.carousel-caption,
-.carousel-prev,
-.carousel-next,
-.carousel-tabs,
-.modal-head,
-.modal-body,
-.modal-foot,
-.modal-loading,
-.modal-error,
-.showcase-inner,
-.showcase-caption,
-.showcase-prev,
-.showcase-next,
-.showcase-tabs,
-.notice,
-.breadcrumbs a,
-.button {
-    padding: $padding;
-}
-
-.table.table--compact thead th,
-.table.table--compact thead td,
-.table.table--compact.table--sortable thead th a,
-.table.table--compact.table--sortable thead th span,
-.flyout ul li > a,
-.flyout-divider,
-.popover-head,
-.popover-body,
-.tooltip,
-.type-ahead ul li a
-.type-ahead-heading,
-.breadcrumbs.small a,
-.button.small,
-.small .button,
-.dropdown li > a,
-.dropdown-heading,
-.type-ahead ul a {
-    padding: $padding-small;
-}
-
-.breadcrumbs.large a,
-.button.large,
-.large .button {
-    padding: $padding-large;
-}
-
-fieldset { padding: $padding 0; }
-blockquote { padding: 0 $padding; }
-legend { padding-right: $padding; }
-
-pre, p, ul, ol, hr,
-.notice,
-.breadcrumbs,
-.pagination {
-    margin: $margin 0;
-}
-
-blockquote { margin: $margin; }
-
-.notice-close,
-.button-group + .button-group,
-.breadcrumbs a .divider {
-    margin-left: $margin;
-}
-
-.field,
-.tabs-nav {
-    margin-bottom: $margin;
-}
-
-.form--inline .field,
-.form--inline .field-label,
-.form--inline .form-actions {
-    margin-right: $margin;
-    margin-bottom: $margin / 2;
-}
-
-.form--inline  .field-label { margin: 0 ($margin / 2) 0 0; }
-.form--horizontal .field-col { padding-left: $margin; }
-.notice { margin: 0 0 ($margin / 2) 0; }
-.dropdown-divider { margin: ($margin / 2) 0; }
-.pagination li { margin-right: $padding / 2; }
-
-.showcase-tabs { top: $padding; }
-.showcase-prev { left: $padding; }
-.showcase-next { right: $padding; }
-
-.label { padding: 5px; font-size: 10px; }
-.label.small { padding: 3px; font-size: 9px; }
-.label.large { padding: 8px; font-size: 12px; }
-
-.modal-close,
-.showcase-close { top: $padding; right: $padding; }
-
-// IE8 does not support rgba
-// So use solid colors instead
-
-.blackout { background: #000; filter: alpha(opacity=50); }
-
-.carousel-caption,
-.showcase-caption { background: #000; filter: alpha(opacity=70); }
-
-.carousel-tabs,
-.showcase-tabs { left: auto; right: auto; top: $padding; }
-
-.showcase-next,
-.showcase-prev,
-.carousel-next,
-.carousel-prev { margin-top: -20px; }