titon-toolkit 1.0.0 → 1.0.1

data/scss/toolkit/layout/form.scss

@@ -14,7 +14,7 @@ fieldset {
     border: 0;
     border-top: 1px solid $gray-dark;
 
-    &.is-legendless {
+    &.#{$state-is-prefix}legendless {
         border: 0;
         padding: 0;
     }
@@ -41,26 +41,26 @@ input[type="search"] {
 
 // Required values to match browser restrictions
 label,
-.input-static {
+.#{$vendor-prefix}input-static {
     font-size: inherit;
     line-height: normal;
 }
 
 //-------------------- Inputs --------------------//
 
-.input,
-.input-static,
-.input-radio,
-.input-checkbox {
+.#{$vendor-prefix}input,
+.#{$vendor-prefix}input-static,
+.#{$vendor-prefix}input-radio,
+.#{$vendor-prefix}input-checkbox {
     @include reset-inline-block;
     border: 1px solid $gray-dark;
     @include size-medium;
 
-    &.small { @include size-small; }
-    &.large { @include size-large; }
+    &.#{$size-small-class} { @include size-small; }
+    &.#{$size-large-class} { @include size-large; }
 }
 
-.input {
+.#{$vendor-prefix}input {
     background: $gray-lightest;
     border-radius: $round;
     @include transition(all $default-transition);
@@ -86,17 +86,17 @@ label,
     }
 }
 
-.input-static,
-.input-radio,
-.input-checkbox {
+.#{$vendor-prefix}input-static,
+.#{$vendor-prefix}input-radio,
+.#{$vendor-prefix}input-checkbox {
     background: transparent;
     border-color: transparent;
     padding-left: 0 !important;
     padding-right: 0 !important;
 }
 
-.input-radio,
-.input-checkbox {
+.#{$vendor-prefix}input-radio,
+.#{$vendor-prefix}input-checkbox {
     padding: 0;
 
     input[type="checkbox"],
@@ -108,92 +108,92 @@ label,
     }
 }
 
-select.input {
+select.#{$vendor-prefix}input {
     -webkit-appearance: none;
     padding: $medium-padding - .05rem; // fixes vertical alignment
 }
 
-select.input[multiple] {
+select.#{$vendor-prefix}input[multiple] {
     min-height: 150px;
     max-height: 500px;
 }
 
-textarea.input {
+textarea.#{$vendor-prefix}input {
     line-height: 135%;
     min-height: 150px;
 }
 
 //-------------------- Fields, Labels --------------------//
 
-.field {
+.#{$vendor-prefix}field {
     margin-bottom: $margin;
 
-    &.is-required {
-        .field-label { font-weight: bold; }
+    &.#{$state-is-prefix}required {
+        .#{$vendor-prefix}field-label { font-weight: bold; }
     }
 }
 
-.field:not(.is-disabled) {
-    &.is-error {
-        .input {
+.#{$vendor-prefix}field:not(.#{$state-is-prefix}disabled) {
+    &.#{$state-is-prefix}error {
+        .#{$vendor-prefix}input {
             border-color: $error;
 
             &:focus { box-shadow: 0 0 5px $error-light; }
         }
 
-        .input-radio,
-        .input-checkbox {
+        .#{$vendor-prefix}input-radio,
+        .#{$vendor-prefix}input-checkbox {
             color: $error-dark;
         }
     }
 
-    &.is-success {
-        .input {
+    &.#{$state-is-prefix}success {
+        .#{$vendor-prefix}input {
             border-color: $success;
 
             &:focus { box-shadow: 0 0 5px $success-light; }
         }
 
-        .input-radio,
-        .input-checkbox {
+        .#{$vendor-prefix}input-radio,
+        .#{$vendor-prefix}input-checkbox {
             color: $success-dark;
         }
     }
 }
 
-.field-label {
+.#{$vendor-prefix}field-label {
     display: block;
     vertical-align: middle;
     margin-bottom: .5em;
 }
 
-.field-help {
+.#{$vendor-prefix}field-help {
     margin-top: .5em;
     font-size: $small-size;
 }
 
-.form-actions {
+.#{$vendor-prefix}form-actions {
     text-align: center;
 }
 
 //-------------------- Modifiers --------------------//
 
-.form--horizontal {
-    .field { @include grid-row; }
+.#{$vendor-prefix}form--horizontal {
+    .#{$vendor-prefix}field { @include grid-row; }
 
-    .field-label {
+    .#{$vendor-prefix}field-label {
         text-align: right;
         border: 1px solid transparent; // matches input sizes
         padding-top: $medium-padding;
     }
 
-    .field-col { padding-left: $margin; }
+    .#{$vendor-prefix}field-col { padding-left: $margin; }
 }
 
-.form--inline {
-    .field,
-    .field-label,
-    .form-actions {
+.#{$vendor-prefix}form--inline {
+    .#{$vendor-prefix}field,
+    .#{$vendor-prefix}field-label,
+    .#{$vendor-prefix}form-actions {
         display: inline-block;
         vertical-align: middle;
         line-height: normal;
@@ -201,11 +201,11 @@ textarea.input {
         margin-bottom: $margin / 2;
     }
 
-    .field-label { margin: 0 ($margin / 2) 0 0; }
-    .field-help { display: none; }
+    .#{$vendor-prefix}field-label { margin: 0 ($margin / 2) 0 0; }
+    .#{$vendor-prefix}field-help { display: none; }
 
-    .input-radio,
-    .input-checkbox {
+    .#{$vendor-prefix}input-radio,
+    .#{$vendor-prefix}input-checkbox {
         padding: $medium-padding 0;
     }
 }

data/scss/toolkit/mixins/_layout.scss

@@ -44,4 +44,39 @@
 @mixin size-large {
     font-size: $large-size;
     padding: $large-padding;
+}
+
+// Generate a self selector or parent selector for assigning size classes
+@mixin is-size($size, $self: true, $parent: false) {
+    $selectors: ();
+
+    @if $self {
+        $selectors: $selectors, unquote("&." + $size);
+    }
+
+    @if $parent {
+        $selectors: $selectors, unquote("." + $size + " &");
+    }
+
+    #{$selectors} {
+        @content;
+    }
+}
+
+@mixin is-small($self: true, $parent: false) {
+    @include is-size($size-small-class, $self, $parent) {
+        @content;
+    }
+}
+
+@mixin is-medium($self: true, $parent: false) {
+    @include is-size($size-medium-class, $self, $parent) {
+        @content;
+    }
+}
+
+@mixin is-large($self: true, $parent: false) {
+    @include is-size($size-large-class, $self, $parent) {
+        @content;
+    }
 }

data/scss/toolkit/mixins/_state.scss

@@ -1,32 +1,36 @@
 
 @mixin is-active {
-    .is-active > &,
-    .is-active > li > &,
-    &.is-active,
-    &.is-active:hover { @content; }
+    .#{$state-is-prefix}active > &,
+    .#{$state-is-prefix}active > li > &,
+    &.#{$state-is-prefix}active,
+    &.#{$state-is-prefix}active:hover { @content; }
+}
+
+@mixin is-active-parent {
+    .#{$state-is-prefix}active & { @content; }
 }
 
 @mixin is-disabled {
-    .is-disabled > &,
-    .is-disabled > li > &,
-    &.is-disabled,
-    &.is-disabled:hover,
+    .#{$state-is-prefix}disabled > &,
+    .#{$state-is-prefix}disabled > li > &,
+    &.#{$state-is-prefix}disabled,
+    &.#{$state-is-prefix}disabled:hover,
     &[disabled],
     &[disabled]:hover { @content; }
 }
 
 @mixin is-info {
-    &.is-info { @content; }
+    &.#{$state-is-prefix}info { @content; }
 }
 
 @mixin is-error {
-    &.is-error { @content; }
+    &.#{$state-is-prefix}error { @content; }
 }
 
 @mixin is-warning {
-    &.is-warning { @content; }
+    &.#{$state-is-prefix}warning { @content; }
 }
 
 @mixin is-success {
-    &.is-success { @content; }
+    &.#{$state-is-prefix}success { @content; }
 }

data/scss/toolkit/themes/titon.scss

@@ -251,7 +251,8 @@ mark { background: lighten($warning-light, 25%); }
     @content;
 }
 
-.label {
+.label,
+.label--badge {
     @include label-style($default-light, $default-dark);
 
     &.is-info { @include label-style($info-light, $info-dark); }

data/version.md

@@ -1 +1 @@
-1.0.0
+1.0.1

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: titon-toolkit
 version: !ruby/object:Gem::Version
-  version: 1.0.0
+  version: 1.0.1
 platform: ruby
 authors:
 - Titon
@@ -9,34 +9,34 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2013-12-04 00:00:00.000000000 Z
+date: 2013-12-13 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: sass
   requirement: !ruby/object:Gem::Requirement
     requirements:
-    - - '>='
+    - - ">="
       - !ruby/object:Gem::Version
         version: 3.2.0
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
-    - - '>='
+    - - ">="
       - !ruby/object:Gem::Version
         version: 3.2.0
 - !ruby/object:Gem::Dependency
   name: compass
   requirement: !ruby/object:Gem::Requirement
     requirements:
-    - - '>='
+    - - ">="
       - !ruby/object:Gem::Version
         version: '0.11'
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
-    - - '>='
+    - - ">="
       - !ruby/object:Gem::Version
         version: '0.11'
 description: A collection of extensible front-end UI components for the responsive
@@ -106,17 +106,17 @@ require_paths:
 - lib
 required_ruby_version: !ruby/object:Gem::Requirement
   requirements:
-  - - '>='
+  - - ">="
     - !ruby/object:Gem::Version
       version: '0'
 required_rubygems_version: !ruby/object:Gem::Requirement
   requirements:
-  - - '>='
+  - - ">="
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
 rubyforge_project: 
-rubygems_version: 2.0.3
+rubygems_version: 2.1.11
 signing_key: 
 specification_version: 4
 summary: Provides Titon Toolkit Sass files for use in projects.