From 353ff81157ae9106a88e8e3773679ec5f8b43290 Mon Sep 17 00:00:00 2001 From: Yury Korolev Date: Sat, 4 Feb 2012 01:07:59 +0400 Subject: [PATCH] Convert to SCSS. Pass 1 --- less/{accordion.less => accordion.scss} | 4 +- less/{alerts.less => alerts.scss} | 28 +- less/bootstrap.less | 62 -- less/bootstrap.scss | 62 ++ less/breadcrumbs.less | 22 - less/breadcrumbs.scss | 22 + ...{button-groups.less => button-groups.scss} | 30 +- less/{buttons.less => buttons.scss} | 58 +- less/{carousel.less => carousel.scss} | 22 +- less/{close.less => close.scss} | 10 +- less/{code.less => code.scss} | 18 +- ...mations.less => component-animations.scss} | 4 +- less/{dropdowns.less => dropdowns.scss} | 28 +- less/{forms.less => forms.scss} | 125 ++-- less/grid.less | 8 - less/grid.scss | 8 + less/{hero-unit.less => hero-unit.scss} | 4 +- less/labels.less | 16 - less/labels.scss | 16 + less/{layouts.less => layouts.scss} | 8 +- less/mixins.less | 537 ------------------ less/mixins.scss | 492 ++++++++++++++++ less/{modals.less => modals.scss} | 32 +- less/{navbar.less => navbar.scss} | 80 +-- less/{navs.less => navs.scss} | 72 +-- less/{pager.less => pager.scss} | 6 +- less/{pagination.less => pagination.scss} | 20 +- ...{progress-bars.less => progress-bars.scss} | 32 +- less/{reset.less => reset.scss} | 0 less/{scaffolding.less => scaffolding.scss} | 14 +- less/{sprites.less => sprites.scss} | 6 +- less/{tables.less => tables.scss} | 33 +- less/{thumbnails.less => thumbnails.scss} | 12 +- less/{tooltip.less => tooltip.scss} | 20 +- less/{type.less => type.scss} | 68 +-- less/{utilities.less => utilities.scss} | 0 less/variables.less | 99 ---- less/variables.scss | 99 ++++ less/{wells.less => wells.scss} | 4 +- 39 files changed, 1064 insertions(+), 1117 deletions(-) rename less/{accordion.less => accordion.scss} (87%) rename less/{alerts.less => alerts.scss} (64%) delete mode 100644 less/bootstrap.less create mode 100644 less/bootstrap.scss delete mode 100644 less/breadcrumbs.less create mode 100644 less/breadcrumbs.scss rename less/{button-groups.less => button-groups.scss} (84%) rename less/{buttons.less => buttons.scss} (64%) rename less/{carousel.less => carousel.scss} (83%) rename less/{close.less => close.scss} (63%) rename less/{code.less => code.scss} (72%) rename less/{component-animations.less => component-animations.scss} (69%) rename less/{dropdowns.less => dropdowns.scss} (86%) rename less/{forms.less => forms.scss} (76%) delete mode 100644 less/grid.less create mode 100644 less/grid.scss rename less/{hero-unit.less => hero-unit.scss} (78%) delete mode 100644 less/labels.less create mode 100644 less/labels.scss rename less/{layouts.less => layouts.scss} (68%) delete mode 100644 less/mixins.less create mode 100644 less/mixins.scss rename less/{modals.less => modals.scss} (58%) rename less/{navbar.less => navbar.scss} (76%) rename less/{navs.less => navs.scss} (82%) rename less/{pager.less => pager.scss} (81%) rename less/{pagination.less => pagination.scss} (68%) rename less/{progress-bars.less => progress-bars.scss} (66%) rename less/{reset.less => reset.scss} (100%) rename less/{scaffolding.less => scaffolding.scss} (66%) rename less/{sprites.less => sprites.scss} (98%) rename less/{tables.less => tables.scss} (74%) rename less/{thumbnails.less => thumbnails.scss} (66%) rename less/{tooltip.less => tooltip.scss} (52%) rename less/{type.less => type.scss} (65%) rename less/{utilities.less => utilities.scss} (100%) delete mode 100644 less/variables.less create mode 100644 less/variables.scss rename less/{wells.less => wells.scss} (74%) diff --git a/less/accordion.less b/less/accordion.scss similarity index 87% rename from less/accordion.less rename to less/accordion.scss index 11a36b54..311fa850 100644 --- a/less/accordion.less +++ b/less/accordion.scss @@ -4,14 +4,14 @@ // Parent container .accordion { - margin-bottom: @baseLineHeight; + margin-bottom: $baseLineHeight; } // Group == heading + body .accordion-group { margin-bottom: 2px; border: 1px solid #e5e5e5; - .border-radius(4px); + @include border-radius(4px); } .accordion-heading { border-bottom: 0; diff --git a/less/alerts.less b/less/alerts.scss similarity index 64% rename from less/alerts.less rename to less/alerts.scss index 562826fd..4c4b9e72 100644 --- a/less/alerts.less +++ b/less/alerts.scss @@ -4,15 +4,15 @@ // Base alert styles .alert { padding: 8px 35px 8px 14px; - margin-bottom: @baseLineHeight; + margin-bottom: $baseLineHeight; text-shadow: 0 1px 0 rgba(255,255,255,.5); - background-color: @warningBackground; - border: 1px solid @warningBorder; - .border-radius(4px); + background-color: $warningBackground; + border: 1px solid $warningBorder; + @include border-radius(4px); } .alert, .alert-heading { - color: @warningText; + color: $warningText; } // Adjust close link position @@ -27,31 +27,31 @@ // ---------------- .alert-success { - background-color: @successBackground; - border-color: @successBorder; + background-color: $successBackground; + border-color: $successBorder; } .alert-success, .alert-success .alert-heading { - color: @successText; + color: $successText; } .alert-danger, .alert-error { - background-color: @errorBackground; - border-color: @errorBorder; + background-color: $errorBackground; + border-color: $errorBorder; } .alert-danger, .alert-error, .alert-danger .alert-heading, .alert-error .alert-heading { - color: @errorText; + color: $errorText; } .alert-info { - background-color: @infoBackground; - border-color: @infoBorder; + background-color: $infoBackground; + border-color: $infoBorder; } .alert-info, .alert-info .alert-heading { - color: @infoText; + color: $infoText; } diff --git a/less/bootstrap.less b/less/bootstrap.less deleted file mode 100644 index ea84f489..00000000 --- a/less/bootstrap.less +++ /dev/null @@ -1,62 +0,0 @@ -/*! - * Bootstrap v2.0.0 - * - * Copyright 2012 Twitter, Inc - * Licensed under the Apache License v2.0 - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Designed and built with all the love in the world @twitter by @mdo and @fat. - */ - -// CSS Reset -@import "reset.less"; - -// Core variables and mixins -@import "variables.less"; // Modify this for custom colors, font-sizes, etc -@import "mixins.less"; - -// Grid system and page structure -@import "scaffolding.less"; -@import "grid.less"; -@import "layouts.less"; - -// Base CSS -@import "type.less"; -@import "code.less"; -@import "forms.less"; -@import "tables.less"; - -// Components: common -@import "sprites.less"; -@import "dropdowns.less"; -@import "wells.less"; -@import "component-animations.less"; -@import "close.less"; - -// Components: Buttons & Alerts -@import "buttons.less"; -@import "button-groups.less"; -@import "alerts.less"; // Note: alerts share common CSS with buttons and thus have styles in buttons.less - -// Components: Nav -@import "navs.less"; -@import "navbar.less"; -@import "breadcrumbs.less"; -@import "pagination.less"; -@import "pager.less"; - -// Components: Popovers -@import "modals.less"; -@import "tooltip.less"; -@import "popovers.less"; - -// Components: Misc -@import "thumbnails.less"; -@import "labels.less"; -@import "progress-bars.less"; -@import "accordion.less"; -@import "carousel.less"; -@import "hero-unit.less"; - -// Utility classes -@import "utilities.less"; // Has to be last to override when necessary diff --git a/less/bootstrap.scss b/less/bootstrap.scss new file mode 100644 index 00000000..46e57640 --- /dev/null +++ b/less/bootstrap.scss @@ -0,0 +1,62 @@ +/*! + * Bootstrap v2.0.0 + * + * Copyright 2012 Twitter, Inc + * Licensed under the Apache License v2.0 + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Designed and built with all the love in the world @twitter by @mdo and @fat. + */ + +// CSS Reset +@import "reset.scss"; + +// Core variables and mixins +@import "variables.scss"; // Modify this for custom colors, font-sizes, etc +@import "mixins.scss"; + +// Grid system and page structure +@import "scaffolding.scss"; +@import "grid.scss"; +@import "layouts.scss"; + +// Base CSS +@import "type.scss"; +@import "code.scss"; +@import "forms.scss"; +@import "tables.scss"; + +// Components: common +@import "sprites.scss"; +@import "dropdowns.scss"; +@import "wells.scss"; +@import "component-animations.scss"; +@import "close.scss"; + +// Components: Buttons & Alerts +@import "buttons.scss"; +@import "button-groups.scss"; +@import "alerts.scss"; // Note: alerts share common CSS with buttons and thus have styles in buttons.scss + +// Components: Nav +@import "navs.scss"; +@import "navbar.scss"; +@import "breadcrumbs.scss"; +@import "pagination.scss"; +@import "pager.scss"; + +// Components: Popovers +@import "modals.scss"; +@import "tooltip.scss"; +@import "popovers.scss"; + +// Components: Misc +@import "thumbnails.scss"; +@import "labels.scss"; +@import "progress-bars.scss"; +@import "accordion.scss"; +@import "carousel.scss"; +@import "hero-unit.scss"; + +// Utility classes +@import "utilities.scss"; // Has to be last to override when necessary diff --git a/less/breadcrumbs.less b/less/breadcrumbs.less deleted file mode 100644 index 19b8081e..00000000 --- a/less/breadcrumbs.less +++ /dev/null @@ -1,22 +0,0 @@ -// BREADCRUMBS -// ----------- - -.breadcrumb { - padding: 7px 14px; - margin: 0 0 @baseLineHeight; - #gradient > .vertical(@white, #f5f5f5); - border: 1px solid #ddd; - .border-radius(3px); - .box-shadow(inset 0 1px 0 @white); - li { - display: inline; - text-shadow: 0 1px 0 @white; - } - .divider { - padding: 0 5px; - color: @grayLight; - } - .active a { - color: @grayDark; - } -} diff --git a/less/breadcrumbs.scss b/less/breadcrumbs.scss new file mode 100644 index 00000000..0a3b6290 --- /dev/null +++ b/less/breadcrumbs.scss @@ -0,0 +1,22 @@ +// BREADCRUMBS +// ----------- + +.breadcrumb { + padding: 7px 14px; + margin: 0 0 $baseLineHeight; + @include gradient-vertical($white, #f5f5f5); + border: 1px solid #ddd; + @include border-radius(3px); + @include box-shadow(inset 0 1px 0 $white); + li { + display: inline; + text-shadow: 0 1px 0 $white; + } + .divider { + padding: 0 5px; + color: $grayLight; + } + .active a { + color: $grayDark; + } +} diff --git a/less/button-groups.less b/less/button-groups.scss similarity index 84% rename from less/button-groups.less rename to less/button-groups.scss index 4b0523df..f257a9ff 100644 --- a/less/button-groups.less +++ b/less/button-groups.scss @@ -5,8 +5,8 @@ // Make the div behave like a button .btn-group { position: relative; - .clearfix(); // clears the floated buttons - .ie7-restore-left-whitespace(); + @include clearfix(); // clears the floated buttons + @include ie7-restore-left-whitespace(); } // Space out series of button groups @@ -16,11 +16,11 @@ // Optional: Group multiple button groups together for a toolbar .btn-toolbar { - margin-top: @baseLineHeight / 2; - margin-bottom: @baseLineHeight / 2; + margin-top: $baseLineHeight / 2; + margin-bottom: $baseLineHeight / 2; .btn-group { display: inline-block; - .ie7-inline-block(); + @include ie7-inline-block(); } } @@ -29,7 +29,7 @@ position: relative; float: left; margin-left: -1px; - .border-radius(0); + @include border-radius(0); } // Set corners individual because sometimes a single button can be in a .btn-group and we need :first-child and :last-child to both match .btn-group .btn:first-child { @@ -93,8 +93,8 @@ .btn-group .dropdown-toggle { padding-left: 8px; padding-right: 8px; - @shadow: inset 1px 0 0 rgba(255,255,255,.125), inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05); - .box-shadow(@shadow); + $shadow: inset 1px 0 0 rgba(255,255,255,.125), inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05); + @include box-shadow($shadow); *padding-top: 5px; *padding-bottom: 5px; } @@ -102,19 +102,19 @@ .btn-group.open { // IE7's z-index only goes to the nearest positioned ancestor, which would // make the menu appear below buttons that appeared later on the page - *z-index: @zindexDropdown; + *z-index: $zindexDropdown; // Reposition menu on open and round all corners .dropdown-menu { display: block; margin-top: 1px; - .border-radius(5px); + @include border-radius(5px); } .dropdown-toggle { background-image: none; - @shadow: inset 0 1px 6px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05); - .box-shadow(@shadow); + $shadow: inset 0 1px 6px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05); + @include box-shadow($shadow); } } @@ -125,7 +125,7 @@ } .btn:hover .caret, .open.btn-group .caret { - .opacity(100); + @include opacity(100); } @@ -135,8 +135,8 @@ .btn-info, .btn-success { .caret { - border-top-color: @white; - .opacity(75); + border-top-color: $white; + @include opacity(75); } } diff --git a/less/buttons.less b/less/buttons.scss similarity index 64% rename from less/buttons.less rename to less/buttons.scss index 58235038..949ee528 100644 --- a/less/buttons.less +++ b/less/buttons.scss @@ -9,48 +9,48 @@ .btn { display: inline-block; padding: 4px 10px 4px; - font-size: @baseFontSize; - line-height: @baseLineHeight; - color: @grayDark; + font-size: $baseFontSize; + line-height: $baseLineHeight; + color: $grayDark; text-align: center; text-shadow: 0 1px 1px rgba(255,255,255,.75); - #gradient > .vertical-three-colors(@white, @white, 25%, darken(@white, 10%)); // Don't use .gradientbar() here since it does a three-color gradient + @include gradient-vertical-three-colors($white, $white, 25%, darken($white, 10%)); // Don't use .gradientbar() here since it does a three-color gradient border: 1px solid #ccc; border-bottom-color: #bbb; - .border-radius(4px); - @shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05); - .box-shadow(@shadow); + @include border-radius(4px); + $shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05); + @include box-shadow($shadow); cursor: pointer; // Give IE7 some love - .ie7-restore-left-whitespace(); + @include ie7-restore-left-whitespace(); } // Hover state .btn:hover { - color: @grayDark; + color: $grayDark; text-decoration: none; - background-color: darken(@white, 10%); + background-color: darken($white, 10%); background-position: 0 -15px; // transition is only when going to hover, otherwise the background // behind the gradient (there for IE<=9 fallback) gets mismatched - .transition(background-position .1s linear); + @include transition(background-position .1s linear); } // Focus state for keyboard and accessibility .btn:focus { - .tab-focus(); + @include tab-focus(); } // Active state .btn.active, .btn:active { background-image: none; - @shadow: inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05); - .box-shadow(@shadow); - background-color: darken(@white, 10%); - background-color: darken(@white, 15%) e("\9"); + $shadow: inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05); + @include box-shadow($shadow); + background-color: darken($white, 10%); + background-color: darken($white, 15%) \9; color: rgba(0,0,0,.5); outline: 0; } @@ -60,9 +60,9 @@ .btn[disabled] { cursor: default; background-image: none; - background-color: darken(@white, 10%); - .opacity(65); - .box-shadow(none); + background-color: darken($white, 10%); + @include opacity(65); + @include box-shadow(none); } @@ -72,9 +72,9 @@ // Large .btn-large { padding: 9px 14px; - font-size: @baseFontSize + 2px; + font-size: $baseFontSize + 2px; line-height: normal; - .border-radius(5px); + @include border-radius(5px); } .btn-large .icon { margin-top: 1px; @@ -83,8 +83,8 @@ // Small .btn-small { padding: 5px 9px; - font-size: @baseFontSize - 2px; - line-height: @baseLineHeight - 2px; + font-size: baseFontSize - 2px; + line-height: baseLineHeight - 2px; } .btn-small .icon { margin-top: -1px; @@ -107,7 +107,7 @@ .btn-info, .btn-info:hover { text-shadow: 0 -1px 0 rgba(0,0,0,.25); - color: @white; + color: $white; } // Provide *some* extra contrast for those who can get it .btn-primary.active, @@ -121,23 +121,23 @@ // Set the backgrounds // ------------------------- .btn-primary { - .buttonBackground(@primaryButtonBackground, spin(@primaryButtonBackground, 20)); + @include button-background($primaryButtonBackground, adjust-hue($primaryButtonBackground, 20)); } // Warning appears are orange .btn-warning { - .buttonBackground(lighten(@orange, 15%), @orange); + @include button-background(lighten($orange, 15%), $orange); } // Danger and error appear as red .btn-danger { - .buttonBackground(#ee5f5b, #bd362f); + @include button-background(#ee5f5b, #bd362f); } // Success appears as green .btn-success { - .buttonBackground(#62c462, #51a351); + @include button-background(#62c462, #51a351); } // Info appears as a neutral blue .btn-info { - .buttonBackground(#5bc0de, #2f96b4); + @include button-background(#5bc0de, #2f96b4); } diff --git a/less/carousel.less b/less/carousel.scss similarity index 83% rename from less/carousel.less rename to less/carousel.scss index 8fbd3031..ffba3d00 100644 --- a/less/carousel.less +++ b/less/carousel.scss @@ -3,7 +3,7 @@ .carousel { position: relative; - margin-bottom: @baseLineHeight; + margin-bottom: $baseLineHeight; line-height: 1; } @@ -18,7 +18,7 @@ .item { display: none; position: relative; - .transition(.6s ease-in-out left); + @include transition(.6s ease-in-out left); } // Account for jankitude on images @@ -75,12 +75,12 @@ font-size: 60px; font-weight: 100; line-height: 30px; - color: @white; + color: $white; text-align: center; - background: @grayDarker; - border: 3px solid @white; - .border-radius(23px); - .opacity(50); + background: $grayDarker; + border: 3px solid $white; + @include border-radius(23px); + @include opacity(50); // we can't have this transition here // because webkit cancels the carousel @@ -97,9 +97,9 @@ // Hover state &:hover { - color: @white; + color: $white; text-decoration: none; - .opacity(90); + @include opacity(90); } } @@ -112,10 +112,10 @@ right: 0; bottom: 0; padding: 10px 15px 5px; - background: @grayDark; + background: $grayDark; background: rgba(0,0,0,.75); } .carousel-caption h4, .carousel-caption p { - color: @white; + color: $white; } diff --git a/less/close.less b/less/close.scss similarity index 63% rename from less/close.less rename to less/close.scss index a0e5edba..5d318360 100644 --- a/less/close.less +++ b/less/close.scss @@ -5,14 +5,14 @@ float: right; font-size: 20px; font-weight: bold; - line-height: @baseLineHeight; - color: @black; + line-height: $baseLineHeight; + color: $black; text-shadow: 0 1px 0 rgba(255,255,255,1); - .opacity(20); + @include opacity(20); &:hover { - color: @black; + color: $black; text-decoration: none; - .opacity(40); + @include opacity(40); cursor: pointer; } } diff --git a/less/code.less b/less/code.scss similarity index 72% rename from less/code.less rename to less/code.scss index 0cc3db85..d9833ab2 100644 --- a/less/code.less +++ b/less/code.scss @@ -6,10 +6,10 @@ code, pre { padding: 0 3px 2px; - #font > #family > .monospace; - font-size: @baseFontSize - 1; - color: @grayDark; - .border-radius(3px); + @include font-family-monospace; + font-size: $baseFontSize - 1; + color: $grayDark; + @include border-radius(3px); } code { padding: 3px 4px; @@ -19,21 +19,21 @@ code { } pre { display: block; - padding: (@baseLineHeight - 1) / 2; - margin: 0 0 @baseLineHeight / 2; + padding: ($baseLineHeight - 1) / 2; + margin: 0 0 $baseLineHeight / 2; font-size: 12px; - line-height: @baseLineHeight; + line-height: $baseLineHeight; background-color: #f5f5f5; border: 1px solid #ccc; // fallback for IE7-8 border: 1px solid rgba(0,0,0,.15); - .border-radius(4px); + @include border-radius(4px); white-space: pre; white-space: pre-wrap; word-break: break-all; // Make prettyprint styles more spaced out for readability &.prettyprint { - margin-bottom: @baseLineHeight; + margin-bottom: $baseLineHeight; } // Account for some code outputs that place code tags in pre tags diff --git a/less/component-animations.less b/less/component-animations.scss similarity index 69% rename from less/component-animations.less rename to less/component-animations.scss index 4f2a4fd1..d985b6a8 100644 --- a/less/component-animations.less +++ b/less/component-animations.scss @@ -2,7 +2,7 @@ // -------------------- .fade { - .transition(opacity .15s linear); + @include transition(opacity .15s linear); opacity: 0; &.in { opacity: 1; @@ -10,7 +10,7 @@ } .collapse { - .transition(height .35s ease); + @include transition(height .35s ease); position:relative; overflow:hidden; height: 0; diff --git a/less/dropdowns.less b/less/dropdowns.scss similarity index 86% rename from less/dropdowns.less rename to less/dropdowns.scss index 83f535ae..1b5b7b94 100644 --- a/less/dropdowns.less +++ b/less/dropdowns.scss @@ -25,8 +25,8 @@ vertical-align: top; border-left: 4px solid transparent; border-right: 4px solid transparent; - border-top: 4px solid @black; - .opacity(30); + border-top: 4px solid $black; + @include .opacity(30); content: "\2193"; } .dropdown .caret { @@ -35,14 +35,14 @@ } .dropdown:hover .caret, .open.dropdown .caret { - .opacity(100); + @include opacity(100); } // The dropdown menu (ul) .dropdown-menu { position: absolute; top: 100%; left: 0; - z-index: @zindexDropdown; + z-index: $zindexDropdown; float: left; display: none; // none by default, but block on "open" of the menu min-width: 160px; @@ -51,13 +51,13 @@ padding: 4px 0; margin: 0; // override default ul list-style: none; - background-color: @white; + background-color: $white; border-color: #ccc; border-color: rgba(0,0,0,.2); border-style: solid; border-width: 1px; - .border-radius(0 0 5px 5px); - .box-shadow(0 5px 10px rgba(0,0,0,.2)); + @include border-radius(0 0 5px 5px); + @include box-shadow(0 5px 10px rgba(0,0,0,.2)); -webkit-background-clip: padding-box; -moz-background-clip: padding; background-clip: padding-box; @@ -77,7 +77,7 @@ margin: 5px 1px; overflow: hidden; background-color: #e5e5e5; - border-bottom: 1px solid @white; + border-bottom: 1px solid $white; // IE7 needs a set width since we gave a height. Restricting just // to IE7 to keep the 1px left/right space in other browsers. @@ -94,7 +94,7 @@ clear: both; font-weight: normal; line-height: 18px; - color: @gray; + color: $gray; white-space: nowrap; } } @@ -103,19 +103,19 @@ .dropdown-menu li > a:hover, .dropdown-menu .active > a, .dropdown-menu .active > a:hover { - color: @white; + color: $white; text-decoration: none; - background-color: @linkColor; + background-color: $linkColor; } // Open state for the dropdown .dropdown.open { // IE7's z-index only goes to the nearest positioned ancestor, which would // make the menu appear below buttons that appeared later on the page - *z-index: @zindexDropdown; + *z-index: $zindexDropdown; .dropdown-toggle { - color: @white; + color: $white; background: #ccc; background: rgba(0,0,0,.3); } @@ -127,5 +127,5 @@ // Typeahead .typeahead { margin-top: 2px; // give it some space to breathe - .border-radius(4px); + @include border-radius(4px); } diff --git a/less/forms.less b/less/forms.scss similarity index 76% rename from less/forms.less rename to less/forms.scss index 9c9a9b8a..4fca5abc 100644 --- a/less/forms.less +++ b/less/forms.scss @@ -8,7 +8,7 @@ // Make all forms have space below them form { - margin: 0 0 @baseLineHeight; + margin: 0 0 $baseLineHeight; } fieldset { @@ -22,10 +22,10 @@ legend { display: block; width: 100%; padding: 0; - margin-bottom: @baseLineHeight * 1.5; - font-size: @baseFontSize * 1.5; - line-height: @baseLineHeight * 2; - color: @grayDark; + margin-bottom: $baseLineHeight * 1.5; + font-size: $baseFontSize * 1.5; + line-height: $baseLineHeight * 2; + color: $grayDark; border: 0; border-bottom: 1px solid #eee; } @@ -36,14 +36,14 @@ input, button, select, textarea { - #font > .sans-serif(@baseFontSize,normal,@baseLineHeight); + @include font-sans-serif($baseFontSize,normal,$baseLineHeight); } // Identify controls by their labels label { display: block; margin-bottom: 5px; - color: @grayDark; + color: $grayDark; } // Inputs, Textareas, Selects @@ -53,14 +53,14 @@ select, .uneditable-input { display: inline-block; width: 210px; - height: @baseLineHeight; + height: $baseLineHeight; padding: 4px; margin-bottom: 9px; - font-size: @baseFontSize; - line-height: @baseLineHeight; - color: @gray; + font-size: $baseFontSize; + line-height: $baseLineHeight; + color: $gray; border: 1px solid #ccc; - .border-radius(3px); + @include border-radius(3px); } .uneditable-textarea { width: auto; @@ -86,7 +86,7 @@ input[type="radio"] { line-height: normal; border: 0; cursor: pointer; - .border-radius(0); + @include border-radius(0); } // Reset the file input to browser defaults @@ -94,9 +94,9 @@ input[type="file"] { padding: initial; line-height: initial; border: initial; - background-color: @white; + background-color: $white; background-color: initial; - .box-shadow(none); + @include box-shadow(none); } // Help out input buttons @@ -118,7 +118,7 @@ input[type="file"] { // Chrome on Linux and Mobile Safari need background-color select { width: 220px; // default input width + 10px of padding that doesn't get applied - background-color: @white; + background-color: $white; } // Make multiple select elements height not fixed @@ -129,7 +129,7 @@ select[size] { // Remove shadow from image inputs input[type="image"] { - .box-shadow(none); + @include box-shadow(none); } // Make textarea height behave @@ -188,23 +188,23 @@ input[type="hidden"] { input, textarea { - .box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); - @transition: border linear .2s, box-shadow linear .2s; - .transition(@transition); + @include box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); + $transition: border linear .2s, box-shadow linear .2s; + @include transition($transition); } input:focus, textarea:focus { border-color: rgba(82,168,236,.8); - @shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6); - .box-shadow(@shadow); + $shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6); + @include box-shadow($shadow); outline: 0; outline: thin dotted \9; /* IE6-8 */ } input[type="file"]:focus, input[type="checkbox"]:focus, select:focus { - .box-shadow(none); // override for file inputs - .tab-focus(); + @include box-shadow(none); // override for file inputs + @include tab-focus(); } @@ -234,7 +234,8 @@ textarea[class*="span"], // GRID SIZING FOR INPUTS // ---------------------- -#inputGridSystem > .generate(@gridColumns, @gridColumnWidth, @gridGutterWidth); +@include input-grid-system-generate($gridColumns, $gridColumnWidth, $gridGutterWidth); + @@ -261,43 +262,43 @@ textarea[readonly] { // -------------------------- // Mixin for form field states -.formFieldState(@textColor: #555, @borderColor: #ccc, @backgroundColor: #f5f5f5) { +@mixin form-field-state($textColor: #555, $borderColor: #ccc, $backgroundColor: #f5f5f5) { // Set the text color > label, .help-block, .help-inline { - color: @textColor; + color: $textColor; } // Style inputs accordingly input, select, textarea { - color: @textColor; - border-color: @borderColor; + color: $textColor; + border-color: $borderColor; &:focus { - border-color: darken(@borderColor, 10%); - .box-shadow(0 0 6px lighten(@borderColor, 20%)); + border-color: darken($borderColor, 10%); + @include box-shadow(0 0 6px lighten($borderColor, 20%)); } } // Give a small background color for input-prepend/-append .input-prepend .add-on, .input-append .add-on { - color: @textColor; - background-color: @backgroundColor; - border-color: @textColor; + color: $textColor; + background-color: $backgroundColor; + border-color: $textColor; } } // Warning .control-group.warning { - .formFieldState(@warningText, @warningText, @warningBackground); + @include form-field-state($warningText, $warningText, $warningBackground); } // Error .control-group.error { - .formFieldState(@errorText, @errorText, @errorBackground); + @include form-field-state($errorText, $errorText, $errorBackground); } // Success .control-group.success { - .formFieldState(@successText, @successText, @successBackground); + @include form-field-state($successText, $successText, $successBackground); } // HTML5 invalid states @@ -309,7 +310,7 @@ select:focus:required:invalid { border-color: #ee5f5b; &:focus { border-color: darken(#ee5f5b, 10%); - .box-shadow(0 0 6px lighten(#ee5f5b, 20%)); + @include box-shadow(0 0 6px lighten(#ee5f5b, 20%)); } } @@ -319,9 +320,9 @@ select:focus:required:invalid { // ------------ .form-actions { - padding: (@baseLineHeight - 1) 20px @baseLineHeight; - margin-top: @baseLineHeight; - margin-bottom: @baseLineHeight; + padding: ($baseLineHeight - 1) 20px $baseLineHeight; + margin-top: $baseLineHeight; + margin-bottom: $baseLineHeight; background-color: #f5f5f5; border-top: 1px solid #ddd; } @@ -329,14 +330,14 @@ select:focus:required:invalid { // For text that needs to appear as an input but should not be an input .uneditable-input { display: block; - background-color: @white; + background-color: $white; border-color: #eee; - .box-shadow(inset 0 1px 2px rgba(0,0,0,.025)); + @include box-shadow(inset 0 1px 2px rgba(0,0,0,.025)); cursor: not-allowed; } // Placeholder text gets special styles; can't be bundled together though for some reason -.placeholder(@grayLight); +@include placeholder($grayLight); @@ -346,12 +347,12 @@ select:focus:required:invalid { .help-block { margin-top: 5px; margin-bottom: 0; - color: @grayLight; + color: $grayLight; } .help-inline { display: inline-block; - .ie7-inline-block(); + @include ie7-inline-block(); margin-bottom: 9px; vertical-align: middle; padding-left: 5px; @@ -366,10 +367,10 @@ select:focus:required:invalid { .input-prepend, .input-append { margin-bottom: 5px; - .clearfix(); // Clear the float to prevent wrapping + @include clearfix(); // Clear the float to prevent wrapping input, .uneditable-input { - .border-radius(0 3px 3px 0); + @include border-radius(0 3px 3px 0); &:focus { position: relative; z-index: 2; @@ -383,21 +384,21 @@ select:focus:required:invalid { display: block; width: auto; min-width: 16px; - height: @baseLineHeight; + height: $baseLineHeight; margin-right: -1px; padding: 4px 5px; font-weight: normal; - line-height: @baseLineHeight; - color: @grayLight; + line-height: $baseLineHeight; + color: $grayLight; text-align: center; - text-shadow: 0 1px 0 @white; + text-shadow: 0 1px 0 $white; background-color: #f5f5f5; border: 1px solid #ccc; - .border-radius(3px 0 0 3px); + @include border-radius(3px 0 0 3px); } .active { - background-color: lighten(@green, 30); - border-color: @green; + background-color: lighten($green, 30); + border-color: $green; } } .input-prepend { @@ -409,7 +410,7 @@ select:focus:required:invalid { input, .uneditable-input { float: left; - .border-radius(3px 0 0 3px); + @include border-radius(3px 0 0 3px); } .uneditable-input { border-right-color: #ccc; @@ -417,7 +418,7 @@ select:focus:required:invalid { .add-on { margin-right: 0; margin-left: -1px; - .border-radius(0 3px 3px 0); + @include border-radius(0 3px 3px 0); } input:first-child { // In IE7, having a hasLayout container (from clearfix's zoom:1) can make the first input @@ -439,7 +440,7 @@ select:focus:required:invalid { padding-left: 14px; padding-right: 14px; margin-bottom: 0; // remove the default margin on all inputs - .border-radius(14px); + @include border-radius(14px); } @@ -480,7 +481,7 @@ select:focus:required:invalid { // Margin to space out fieldsets .control-group { - margin-bottom: @baseLineHeight / 2; + margin-bottom: $baseLineHeight / 2; } // Horizontal-specific styles @@ -489,13 +490,13 @@ select:focus:required:invalid { .form-horizontal { // Legend collapses margin, so we're relegated to padding legend + .control-group { - margin-top: @baseLineHeight; + margin-top: $baseLineHeight; -webkit-margin-top-collapse: separate; } // Increase spacing between groups .control-group { - margin-bottom: @baseLineHeight; - .clearfix(); + margin-bottom: $baseLineHeight; + @include clearfix(); } // Float the labels left .control-group > label { diff --git a/less/grid.less b/less/grid.less deleted file mode 100644 index 4acb0a44..00000000 --- a/less/grid.less +++ /dev/null @@ -1,8 +0,0 @@ -// GRID SYSTEM -// ----------- - -// Fixed (940px) -#gridSystem > .generate(@gridColumns, @gridColumnWidth, @gridGutterWidth); - -// Fluid (940px) -#fluidGridSystem > .generate(@gridColumns, @fluidGridColumnWidth, @fluidGridGutterWidth); diff --git a/less/grid.scss b/less/grid.scss new file mode 100644 index 00000000..75b3fff9 --- /dev/null +++ b/less/grid.scss @@ -0,0 +1,8 @@ +// GRID SYSTEM +// ----------- + +// Fixed (940px) +@include grid-system-generate($gridColumns, $gridColumnWidth, $gridGutterWidth); + +// Fluid (940px) +@include fluid-grid-system-generate($gridColumns, $fluidGridColumnWidth, $fluidGridGutterWidth); diff --git a/less/hero-unit.less b/less/hero-unit.scss similarity index 78% rename from less/hero-unit.less rename to less/hero-unit.scss index cba1cc46..ef219b22 100644 --- a/less/hero-unit.less +++ b/less/hero-unit.scss @@ -5,7 +5,7 @@ padding: 60px; margin-bottom: 30px; background-color: #f5f5f5; - .border-radius(6px); + @include border-radius(6px); h1 { margin-bottom: 0; font-size: 60px; @@ -15,6 +15,6 @@ p { font-size: 18px; font-weight: 200; - line-height: @baseLineHeight * 1.5; + line-height: $baseLineHeight * 1.5; } } diff --git a/less/labels.less b/less/labels.less deleted file mode 100644 index c0f42775..00000000 --- a/less/labels.less +++ /dev/null @@ -1,16 +0,0 @@ -// LABELS -// ------ - -.label { - padding: 1px 3px 2px; - font-size: @baseFontSize * .75; - font-weight: bold; - color: @white; - text-transform: uppercase; - background-color: @grayLight; - .border-radius(3px); -} -.label-important { background-color: @errorText; } -.label-warning { background-color: @orange; } -.label-success { background-color: @successText; } -.label-info { background-color: @infoText; } diff --git a/less/labels.scss b/less/labels.scss new file mode 100644 index 00000000..2a025a9b --- /dev/null +++ b/less/labels.scss @@ -0,0 +1,16 @@ +// LABELS +// ------ + +.label { + padding: 1px 3px 2px; + font-size: $baseFontSize * .75; + font-weight: bold; + color: $white; + text-transform: uppercase; + background-color: $grayLight; + @include border-radius(3px); +} +.label-important { background-color: $errorText; } +.label-warning { background-color: $orange; } +.label-success { background-color: $successText; } +.label-info { background-color: $infoText; } diff --git a/less/layouts.less b/less/layouts.scss similarity index 68% rename from less/layouts.less rename to less/layouts.scss index c8d358b2..c600522d 100644 --- a/less/layouts.less +++ b/less/layouts.scss @@ -6,12 +6,12 @@ // Container (centered, fixed-width layouts) .container { - .container-fixed(); + @include container-fixed(); } // Fluid layouts (left aligned, with sidebar, min- & max-width content) .container-fluid { - padding-left: @gridGutterWidth; - padding-right: @gridGutterWidth; - .clearfix(); + padding-left: $gridGutterWidth; + padding-right: $gridGutterWidth; + @include clearfix(); } \ No newline at end of file diff --git a/less/mixins.less b/less/mixins.less deleted file mode 100644 index 545ccb9b..00000000 --- a/less/mixins.less +++ /dev/null @@ -1,537 +0,0 @@ -// Mixins.less -// Snippets of reusable CSS to develop faster and keep code readable -// ----------------------------------------------------------------- - - -// UTILITY MIXINS -// -------------------------------------------------- - -// Clearfix -// -------- -// For clearing floats like a boss h5bp.com/q -.clearfix() { - *zoom: 1; - &:before, - &:after { - display: table; - content: ""; - } - &:after { - clear: both; - } -} - -// Webkit-style focus -// ------------------ -.tab-focus() { - // Default - outline: thin dotted; - // Webkit - outline: 5px auto -webkit-focus-ring-color; - outline-offset: -2px; -} - -// Center-align a block level element -// ---------------------------------- -.center-block() { - display: block; - margin-left: auto; - margin-right: auto; -} - -// IE7 inline-block -// ---------------- -.ie7-inline-block() { - *display: inline; /* IE7 inline-block hack */ - *zoom: 1; -} - -// IE7 likes to collapse whitespace on either side of the inline-block elements. -// Ems because we're attempting to match the width of a space character. Left -// version is for form buttons, which typically come after other elements, and -// right version is for icons, which come before. Applying both is ok, but it will -// mean that space between those elements will be .6em (~2 space characters) in IE7, -// instead of the 1 space in other browsers. -.ie7-restore-left-whitespace() { - *margin-left: .3em; - - &:first-child { - *margin-left: 0; - } -} - -.ie7-restore-right-whitespace() { - *margin-right: .3em; - - &:last-child { - *margin-left: 0; - } -} - -// Sizing shortcuts -// ------------------------- -.size(@height: 5px, @width: 5px) { - width: @width; - height: @height; -} -.square(@size: 5px) { - .size(@size, @size); -} - -// Placeholder text -// ------------------------- -.placeholder(@color: @placeholderText) { - :-moz-placeholder { - color: @color; - } - ::-webkit-input-placeholder { - color: @color; - } -} - - - -// FONTS -// -------------------------------------------------- - -#font { - #family { - .serif() { - font-family: Georgia, "Times New Roman", Times, serif; - } - .sans-serif() { - font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; - } - .monospace() { - font-family: Menlo, Monaco, "Courier New", monospace; - } - } - .shorthand(@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight) { - font-size: @size; - font-weight: @weight; - line-height: @lineHeight; - } - .serif(@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight) { - #font > #family > .serif; - #font > .shorthand(@size, @weight, @lineHeight); - } - .sans-serif(@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight) { - #font > #family > .sans-serif; - #font > .shorthand(@size, @weight, @lineHeight); - } - .monospace(@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight) { - #font > #family > .monospace; - #font > .shorthand(@size, @weight, @lineHeight); - } -} - - - -// GRID SYSTEM -// -------------------------------------------------- - -// Site container -// ------------------------- -.container-fixed() { - width: @gridRowWidth; - margin-left: auto; - margin-right: auto; - .clearfix(); -} - -// Le grid system -// ------------------------- -#gridSystem { - // Setup the mixins to be used - .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, @columns) { - width: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1)); - } - .offset(@gridColumnWidth, @gridGutterWidth, @columns) { - margin-left: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1)) + (@gridGutterWidth * 2); - } - .gridColumn(@gridGutterWidth) { - float: left; - margin-left: @gridGutterWidth; - } - // Take these values and mixins, and make 'em do their thang - .generate(@gridColumns, @gridColumnWidth, @gridGutterWidth) { - // Row surrounds the columns - .row { - margin-left: @gridGutterWidth * -1; - .clearfix(); - } - // Find all .span# classes within .row and give them the necessary properties for grid columns (supported by all browsers back to IE7, thanks @dhg) - [class*="span"] { - #gridSystem > .gridColumn(@gridGutterWidth); - } - // Default columns - .span1 { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 1); } - .span2 { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 2); } - .span3 { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 3); } - .span4 { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 4); } - .span5 { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 5); } - .span6 { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 6); } - .span7 { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 7); } - .span8 { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 8); } - .span9 { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 9); } - .span10 { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 10); } - .span11 { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 11); } - .span12, - .container { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 12); } - // Offset column options - .offset1 { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 1); } - .offset2 { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 2); } - .offset3 { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 3); } - .offset4 { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 4); } - .offset5 { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 5); } - .offset6 { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 6); } - .offset7 { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 7); } - .offset8 { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 8); } - .offset9 { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 9); } - .offset10 { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 10); } - .offset11 { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 11); } - } -} - -// Fluid grid system -// ------------------------- -#fluidGridSystem { - // Setup the mixins to be used - .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, @columns) { - width: 1% * (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)); - } - .gridColumn(@fluidGridGutterWidth) { - float: left; - margin-left: @fluidGridGutterWidth; - } - // Take these values and mixins, and make 'em do their thang - .generate(@gridColumns, @fluidGridColumnWidth, @fluidGridGutterWidth) { - // Row surrounds the columns - .row-fluid { - width: 100%; - .clearfix(); - - // Find all .span# classes within .row and give them the necessary properties for grid columns (supported by all browsers back to IE7, thanks @dhg) - > [class*="span"] { - #fluidGridSystem > .gridColumn(@fluidGridGutterWidth); - } - > [class*="span"]:first-child { - margin-left: 0; - } - // Default columns - .span1 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 1); } - .span2 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 2); } - .span3 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 3); } - .span4 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 4); } - .span5 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 5); } - .span6 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 6); } - .span7 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 7); } - .span8 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 8); } - .span9 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 9); } - .span10 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 10); } - .span11 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 11); } - .span12 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 12); } - } - } -} - - - -// Input grid system -// ------------------------- -#inputGridSystem { - .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, @columns) { - width: ((@gridColumnWidth) * @columns) + (@gridGutterWidth * (@columns - 1)) - 10; - } - .generate(@gridColumns, @gridColumnWidth, @gridGutterWidth) { - input, - textarea, - .uneditable-input { - &.span1 { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 1); } - &.span2 { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 2); } - &.span3 { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 3); } - &.span4 { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 4); } - &.span5 { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 5); } - &.span6 { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 6); } - &.span7 { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 7); } - &.span8 { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 8); } - &.span9 { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 9); } - &.span10 { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 10); } - &.span11 { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 11); } - &.span12 { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 12); } - } - } -} - - - -// CSS3 PROPERTIES -// -------------------------------------------------- - -// Border Radius -.border-radius(@radius: 5px) { - -webkit-border-radius: @radius; - -moz-border-radius: @radius; - border-radius: @radius; -} - -// Drop shadows -.box-shadow(@shadow: 0 1px 3px rgba(0,0,0,.25)) { - -webkit-box-shadow: @shadow; - -moz-box-shadow: @shadow; - box-shadow: @shadow; -} - -// Transitions -.transition(@transition) { - -webkit-transition: @transition; - -moz-transition: @transition; - -ms-transition: @transition; - -o-transition: @transition; - transition: @transition; -} - -// Transformations -.rotate(@degrees) { - -webkit-transform: rotate(@degrees); - -moz-transform: rotate(@degrees); - -ms-transform: rotate(@degrees); - -o-transform: rotate(@degrees); - transform: rotate(@degrees); -} -.scale(@ratio) { - -webkit-transform: scale(@ratio); - -moz-transform: scale(@ratio); - -ms-transform: scale(@ratio); - -o-transform: scale(@ratio); - transform: scale(@ratio); -} -.translate(@x: 0, @y: 0) { - -webkit-transform: translate(@x, @y); - -moz-transform: translate(@x, @y); - -ms-transform: translate(@x, @y); - -o-transform: translate(@x, @y); - transform: translate(@x, @y); -} -.skew(@x: 0, @y: 0) { - -webkit-transform: translate(@x, @y); - -moz-transform: translate(@x, @y); - -ms-transform: translate(@x, @y); - -o-transform: translate(@x, @y); - transform: translate(@x, @y); -} -.skew(@x: 0, @y: 0) { - -webkit-transform: skew(@x, @y); - -moz-transform: skew(@x, @y); - -ms-transform: skew(@x, @y); - -o-transform: skew(@x, @y); - transform: skew(@x, @y); -} - -// Background clipping -// Heads up: FF 3.6 and under need "padding" instead of "padding-box" -.background-clip(@clip) { - -webkit-background-clip: @clip; - -moz-background-clip: @clip; - background-clip: @clip; -} - -// Background sizing -.background-size(@size){ - -webkit-background-size: @size; - -moz-background-size: @size; - -o-background-size: @size; - background-size: @size; -} - - -// Box sizing -.box-sizing(@boxmodel) { - -webkit-box-sizing: @boxmodel; - -moz-box-sizing: @boxmodel; - box-sizing: @boxmodel; -} - -// User select -// For selecting text on the page -.user-select(@select) { - -webkit-user-select: @select; - -moz-user-select: @select; - -o-user-select: @select; - user-select: @select; -} - -// Resize anything -.resizable(@direction: both) { - resize: @direction; // Options: horizontal, vertical, both - overflow: auto; // Safari fix -} - -// CSS3 Content Columns -.content-columns(@columnCount, @columnGap: @gridColumnGutter) { - -webkit-column-count: @columnCount; - -moz-column-count: @columnCount; - column-count: @columnCount; - -webkit-column-gap: @columnGap; - -moz-column-gap: @columnGap; - column-gap: @columnGap; -} - -// Opacity -.opacity(@opacity: 100) { - opacity: @opacity / 100; - filter: e(%("alpha(opacity=%d)", @opacity)); -} - - - -// BACKGROUNDS -// -------------------------------------------------- - -// Add an alphatransparency value to any background or border color (via Elyse Holladay) -#translucent { - .background(@color: @white, @alpha: 1) { - background-color: hsla(hue(@color), saturation(@color), lightness(@color), @alpha); - } - .border(@color: @white, @alpha: 1) { - border-color: hsla(hue(@color), saturation(@color), lightness(@color), @alpha); - .background-clip(padding-box); - } -} - -// Gradient Bar Colors for buttons and alerts -.gradientBar(@primaryColor, @secondaryColor) { - #gradient > .vertical(@primaryColor, @secondaryColor); - border-color: @secondaryColor @secondaryColor darken(@secondaryColor, 15%); - border-color: rgba(0,0,0,.1) rgba(0,0,0,.1) fadein(rgba(0,0,0,.1), 15%); -} - -// Gradients -#gradient { - .horizontal(@startColor: #555, @endColor: #333) { - background-color: @endColor; - background-image: -moz-linear-gradient(left, @startColor, @endColor); // FF 3.6+ - background-image: -ms-linear-gradient(left, @startColor, @endColor); // IE10 - background-image: -webkit-gradient(linear, 0 0, 100% 0, from(@startColor), to(@endColor)); // Safari 4+, Chrome 2+ - background-image: -webkit-linear-gradient(left, @startColor, @endColor); // Safari 5.1+, Chrome 10+ - background-image: -o-linear-gradient(left, @startColor, @endColor); // Opera 11.10 - background-image: linear-gradient(left, @startColor, @endColor); // Le standard - background-repeat: repeat-x; - filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",@startColor,@endColor)); // IE9 and down - } - .vertical(@startColor: #555, @endColor: #333) { - background-color: mix(@startColor, @endColor, 60%); - background-image: -moz-linear-gradient(top, @startColor, @endColor); // FF 3.6+ - background-image: -ms-linear-gradient(top, @startColor, @endColor); // IE10 - background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@startColor), to(@endColor)); // Safari 4+, Chrome 2+ - background-image: -webkit-linear-gradient(top, @startColor, @endColor); // Safari 5.1+, Chrome 10+ - background-image: -o-linear-gradient(top, @startColor, @endColor); // Opera 11.10 - background-image: linear-gradient(top, @startColor, @endColor); // The standard - background-repeat: repeat-x; - filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",@startColor,@endColor)); // IE9 and down - } - .directional(@startColor: #555, @endColor: #333, @deg: 45deg) { - background-color: @endColor; - background-repeat: repeat-x; - background-image: -moz-linear-gradient(@deg, @startColor, @endColor); // FF 3.6+ - background-image: -ms-linear-gradient(@deg, @startColor, @endColor); // IE10 - background-image: -webkit-linear-gradient(@deg, @startColor, @endColor); // Safari 5.1+, Chrome 10+ - background-image: -o-linear-gradient(@deg, @startColor, @endColor); // Opera 11.10 - background-image: linear-gradient(@deg, @startColor, @endColor); // The standard - } - .vertical-three-colors(@startColor: #00b3ee, @midColor: #7a43b6, @colorStop: 50%, @endColor: #c3325f) { - background-color: mix(@midColor, @endColor, 80%); - background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@startColor), color-stop(@colorStop, @midColor), to(@endColor)); - background-image: -webkit-linear-gradient(@startColor, @midColor @colorStop, @endColor); - background-image: -moz-linear-gradient(top, @startColor, @midColor @colorStop, @endColor); - background-image: -ms-linear-gradient(@startColor, @midColor @colorStop, @endColor); - background-image: -o-linear-gradient(@startColor, @midColor @colorStop, @endColor); - background-image: linear-gradient(@startColor, @midColor @colorStop, @endColor); - background-repeat: no-repeat; - filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",@startColor,@endColor)); // IE9 and down, gets no color-stop at all for proper fallback - } - .radial(@innerColor: #555, @outerColor: #333) { - background-color: @outerColor; - background-image: -webkit-gradient(radial, center center, 0, center center, 460, from(@innerColor), to(@outerColor)); - background-image: -webkit-radial-gradient(circle, @innerColor, @outerColor); - background-image: -moz-radial-gradient(circle, @innerColor, @outerColor); - background-image: -ms-radial-gradient(circle, @innerColor, @outerColor); - background-repeat: no-repeat; - // Opera cannot do radial gradients yet - } - .striped(@color, @angle: -45deg) { - background-color: @color; - background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, rgba(255,255,255,.15)), color-stop(.25, transparent), color-stop(.5, transparent), color-stop(.5, rgba(255,255,255,.15)), color-stop(.75, rgba(255,255,255,.15)), color-stop(.75, transparent), to(transparent)); - background-image: -webkit-linear-gradient(@angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent); - background-image: -moz-linear-gradient(@angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent); - background-image: -ms-linear-gradient(@angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent); - background-image: -o-linear-gradient(@angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent); - background-image: linear-gradient(@angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent); - } -} -// Reset filters for IE -.reset-filter() { - filter: e(%("progid:DXImageTransform.Microsoft.gradient(enabled = false)")); -} - - -// Mixin for generating button backgrounds -// --------------------------------------- -.buttonBackground(@startColor, @endColor) { - // gradientBar will set the background to a pleasing blend of these, to support IE<=9 - .gradientBar(@startColor, @endColor); - .reset-filter(); - - // in these cases the gradient won't cover the background, so we override - &:hover, &:active, &.active, &.disabled, &[disabled] { - background-color: @endColor; - } - - // IE 7 + 8 can't handle box-shadow to show active, so we darken a bit ourselves - &:active, - &.active { - background-color: darken(@endColor, 10%) e("\9"); - } -} - - -// COMPONENT MIXINS -// -------------------------------------------------- - -// POPOVER ARROWS -// ------------------------- -// For tipsies and popovers -#popoverArrow { - .top(@arrowWidth: 5px) { - bottom: 0; - left: 50%; - margin-left: -@arrowWidth; - border-left: @arrowWidth solid transparent; - border-right: @arrowWidth solid transparent; - border-top: @arrowWidth solid @black; - } - .left(@arrowWidth: 5px) { - top: 50%; - right: 0; - margin-top: -@arrowWidth; - border-top: @arrowWidth solid transparent; - border-bottom: @arrowWidth solid transparent; - border-left: @arrowWidth solid @black; - } - .bottom(@arrowWidth: 5px) { - top: 0; - left: 50%; - margin-left: -@arrowWidth; - border-left: @arrowWidth solid transparent; - border-right: @arrowWidth solid transparent; - border-bottom: @arrowWidth solid @black; - } - .right(@arrowWidth: 5px) { - top: 50%; - left: 0; - margin-top: -@arrowWidth; - border-top: @arrowWidth solid transparent; - border-bottom: @arrowWidth solid transparent; - border-right: @arrowWidth solid @black; - } -} diff --git a/less/mixins.scss b/less/mixins.scss new file mode 100644 index 00000000..479dfcb4 --- /dev/null +++ b/less/mixins.scss @@ -0,0 +1,492 @@ +// Mixins.less +// Snippets of reusable CSS to develop faster and keep code readable +// ----------------------------------------------------------------- + + +// UTILITY MIXINS +// -------------------------------------------------- + +// Clearfix +// -------- +// For clearing floats like a boss h5bp.com/q +@mixin clearfix() { + *zoom: 1; + &:before, + &:after { + display: table; + content: ""; + } + &:after { + clear: both; + } +} + +// Webkit-style focus +// ------------------ +@mixin tab-focus() { + // Default + outline: thin dotted; + // Webkit + outline: 5px auto -webkit-focus-ring-color; + outline-offset: -2px; +} + +// Center-align a block level element +// ---------------------------------- +@mixin center-block() { + display: block; + margin-left: auto; + margin-right: auto; +} + +// IE7 inline-block +// ---------------- +@mixin ie7-inline-block() { + *display: inline; /* IE7 inline-block hack */ + *zoom: 1; +} + +// IE7 likes to collapse whitespace on either side of the inline-block elements. +// Ems because we're attempting to match the width of a space character. Left +// version is for form buttons, which typically come after other elements, and +// right version is for icons, which come before. Applying both is ok, but it will +// mean that space between those elements will be .6em (~2 space characters) in IE7, +// instead of the 1 space in other browsers. +@mixin ie7-restore-left-whitespace() { + *margin-left: .3em; + + &:first-child { + *margin-left: 0; + } +} + +@mixin ie7-restore-right-whitespace() { + *margin-right: .3em; + + &:last-child { + *margin-left: 0; + } +} + +// Sizing shortcuts +// ------------------------- +@mixin size($height: 5px, $width: 5px) { + width: $width; + height: $height; +} +@mixin square($size: 5px) { + @include size($size, $size); +} + +// Placeholder text +// ------------------------- +@mixin placeholder($color: $placeholderText) { + :-moz-placeholder { + color: $color; + } + ::-webkit-input-placeholder { + color: $color; + } +} + + + +// FONTS +// -------------------------------------------------- + +@mixin font-family-serif() { + font-family: Georgia, "Times New Roman", Times, serif; +} + +@mixin font-family-sans-serif() { + font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; +} + +@mixin font-family-monospace() { + font-family: Menlo, Monaco, "Courier New", monospace; +} + +@mixin font-shorthand($size: $baseFontSize, $weight: normal, $lineHeight: $baseLineHeight) { + font-size: $size; + font-weight: $weight; + line-height: $lineHeight; +} + +@mixin font-serif($size: $baseFontSize, $weight: normal, $lineHeight: $baseLineHeight) { + @include font-family-serif; + @include font-shorthand($size, $weight, $lineHeight); +} + +@mixin font-sans-serif($size: $baseFontSize, $weight: normal, $lineHeight: $baseLineHeight) { + @include font-family-sans-serif; + @include font-shorthand($size, $weight, $lineHeight); +} + +@mixin font-monospace($size: $baseFontSize, $weight: normal, $lineHeight: $baseLineHeight) { + @include font-family-monospace; + @include font-shorthand($size, $weight, $lineHeight); +} + + + + +// GRID SYSTEM +// -------------------------------------------------- + +// Site container +// ------------------------- +.container-fixed() { + width: $gridRowWidth; + margin-left: auto; + margin-right: auto; + @include clearfix(); +} + +// Le grid system +// ------------------------- + +// Setup the mixins to be used +@mixin grid-system-columns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, $columns) { + width: ($gridColumnWidth * $columns) + ($gridGutterWidth * ($columns - 1)); +} + +@mixin grid-system-offset($gridColumnWidth, $gridGutterWidth, $columns) { + margin-left: ($gridColumnWidth * $columns) + ($gridGutterWidth * ($columns - 1)) + (@gridGutterWidth * 2); +} + +@mixin grid-system-grid-column($gridGutterWidth) { + float: left; + margin-left: $gridGutterWidth; +} + +// Take these values and mixins, and make 'em do their thang +@mixin grid-system-generate($gridColumns, $gridColumnWidth, $gridGutterWidth) { + // Row surrounds the columns + .row { + margin-left: $gridGutterWidth * -1; + @include clearfix(); + } + // Find all .span# classes within .row and give them the necessary properties for grid columns (supported by all browsers back to IE7, thanks @dhg) + [class*="span"] { + @include grid-system-grid-column($gridGutterWidth); + } + // Default columns + @for $i from 1 through 12 { + .span#{$i} { @include grid-system-columns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, $i); } + } + .container { @include grid-system-columns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 12); } + // Offset column options + @for $i from 1 through 11 { + .offset{$i} { @include grid-system-offset($gridColumnWidth, $gridGutterWidth, $i); } + } +} + +// Fluid grid system +// ------------------------- + +// Setup the mixins to be used +@mixin fluid-grid-system-columns($fluidGridGutterWidth, $fluidGridColumnWidth, $columns) { + width: 1% * ($fluidGridColumnWidth * $columns) + ($fluidGridGutterWidth * ($columns - 1)); +} +@mixin fluid-grid-system-grid-column($fluidGridGutterWidth) { + float: left; + margin-left: $fluidGridGutterWidth; +} +// Take these values and mixins, and make 'em do their thang +@mixin fluid-grid-system-generate($gridColumns, $fluidGridColumnWidth, $fluidGridGutterWidth) { + // Row surrounds the columns + .row-fluid { + width: 100%; + @include clearfix(); + + // Find all .span# classes within .row and give them the necessary properties for grid columns (supported by all browsers back to IE7, thanks @dhg) + > [class*="span"] { + @include fluid-grid-system-grid-column($fluidGridGutterWidth); + } + > [class*="span"]:first-child { + margin-left: 0; + } + // Default columns + @for $i from 1 through 12 { + .span#{$i} { @include fluid-grid-system-columns($fluidGridGutterWidth, $fluidGridColumnWidth, $i); } + } + } +} + + + +// Input grid system +// ------------------------- +@mixin input-grid-system-input-columns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, $columns) { + width: (($gridColumnWidth) * $columns) + ($gridGutterWidth * ($columns - 1)) - 10; +} +@mixin input-grid-system-generate($gridColumns, $gridColumnWidth, $gridGutterWidth) { + input, + textarea, + .uneditable-input { + @for $i from 1 through 12 { + &.span#{$i} { @include input-grid-system-input-columns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, $i); } + } + } +} + + + +// CSS3 PROPERTIES +// -------------------------------------------------- + +// Border Radius +@mixin border-radius($radius: 5px) { + -webkit-border-radius: $radius; + -moz-border-radius: $radius; + border-radius: $radius; +} + +// Drop shadows +@mixin box-shadow($shadow: 0 1px 3px rgba(0,0,0,.25)) { + -webkit-box-shadow: $shadow; + -moz-box-shadow: $shadow; + box-shadow: $shadow; +} + +// Transitions +@mixin transition($transition) { + -webkit-transition: $transition; + -moz-transition: $transition; + -ms-transition: $transition; + -o-transition: $transition; + transition: $transition; +} + +// Transformations +@mixin rotate($degrees) { + -webkit-transform: rotate($degrees); + -moz-transform: rotate($degrees); + -ms-transform: rotate($degrees); + -o-transform: rotate($degrees); + transform: rotate($degrees); +} +@mixin scale($ratio) { + -webkit-transform: scale($ratio); + -moz-transform: scale($ratio); + -ms-transform: scale($ratio); + -o-transform: scale($ratio); + transform: scale($ratio); +} +@mixin translate($x: 0, $y: 0) { + -webkit-transform: translate($x, $y); + -moz-transform: translate($x, $y); + -ms-transform: translate($x, $y); + -o-transform: translate($x, $y); + transform: translate($x, $y); +} +@mixin skew($x: 0, $y: 0) { + -webkit-transform: skew($x, $y); + -moz-transform: skew($x, $y); + -ms-transform: skew($x, $y); + -o-transform: skew($x, $y); + transform: skew($x, $y); +} + +// Background clipping +// Heads up: FF 3.6 and under need "padding" instead of "padding-box" +@mixin background-clip($clip) { + -webkit-background-clip: $clip; + -moz-background-clip: $clip; + background-clip: $clip; +} + +// Background sizing +@mixin background-size($size){ + -webkit-background-size: $size; + -moz-background-size: $size; + -o-background-size: $size; + background-size: $size; +} + + +// Box sizing +@mixin box-sizing($boxmodel) { + -webkit-box-sizing: $boxmodel; + -moz-box-sizing: $boxmodel; + box-sizing: $boxmodel; +} + +// User select +// For selecting text on the page +@mixin user-select($select) { + -webkit-user-select: $select; + -moz-user-select: $select; + -o-user-select: $select; + user-select: $select; +} + +// Resize anything +@mixin resizable($direction: both) { + resize: $direction; // Options: horizontal, vertical, both + overflow: auto; // Safari fix +} + +// CSS3 Content Columns +@mixin content-columns($columnCount, $columnGap: $gridColumnGutter) { + -webkit-column-count: $columnCount; + -moz-column-count: $columnCount; + column-count: $columnCount; + -webkit-column-gap: $columnGap; + -moz-column-gap: $columnGap; + column-gap: $columnGap; +} + +// Opacity +@mixin opacity($opacity: 100) { + opacity: $opacity / 100; + filter: alpha(opacity=#{$opacity}); +} + + + +// BACKGROUNDS +// -------------------------------------------------- + +// Add an alphatransparency value to any background or border color (via Elyse Holladay) +@mixin translucent-background($color: $white, $alpha: 1) { + background-color: hsla(hue($color), saturation($color), lightness($color), $alpha); +} +@mixin translucent-border($color: $white, $alpha: 1) { + border-color: hsla(hue($color), saturation($color), lightness($color), $alpha); + @include background-clip(padding-box); +} + +// Gradients +@mixin gradient-horizontal($startColor: #555, $endColor: #333) { + background-color: $endColor; + background-image: -moz-linear-gradient(left, $startColor, $endColor); // FF 3.6+ + background-image: -ms-linear-gradient(left, $startColor, $endColor); // IE10 + background-image: -webkit-gradient(linear, 0 0, 100% 0, from($startColor), to($endColor)); // Safari 4+, Chrome 2+ + background-image: -webkit-linear-gradient(left, $startColor, $endColor); // Safari 5.1+, Chrome 10+ + background-image: -o-linear-gradient(left, $startColor, $endColor); // Opera 11.10 + background-image: linear-gradient(left, $startColor, $endColor); // Le standard + background-repeat: repeat-x; + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{$startColor}', endColorstr='#{$endColor}', GradientType=1); // IE9 and down +} +@mixin gradient-vertical($startColor: #555, $endColor: #333) { + background-color: mix($startColor, $endColor, 60%); + background-image: -moz-linear-gradient(top, $startColor, $endColor); // FF 3.6+ + background-image: -ms-linear-gradient(top, $startColor, $endColor); // IE10 + background-image: -webkit-gradient(linear, 0 0, 0 100%, from($startColor), to($endColor)); // Safari 4+, Chrome 2+ + background-image: -webkit-linear-gradient(top, $startColor, $endColor); // Safari 5.1+, Chrome 10+ + background-image: -o-linear-gradient(top, $startColor, $endColor); // Opera 11.10 + background-image: linear-gradient(top, $startColor, $endColor); // The standard + background-repeat: repeat-x; + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{$startColor}', endColorstr='#{$endColor}', GradientType=0); // IE9 and down +} +@mixin gradient-directional($startColor: #555, $endColor: #333, $deg: 45deg) { + background-color: $endColor; + background-repeat: repeat-x; + background-image: -moz-linear-gradient($deg, $startColor, $endColor); // FF 3.6+ + background-image: -ms-linear-gradient($deg, $startColor, $endColor); // IE10 + background-image: -webkit-linear-gradient($deg, $startColor, $endColor); // Safari 5.1+, Chrome 10+ + background-image: -o-linear-gradient($deg, $startColor, $endColor); // Opera 11.10 + background-image: linear-gradient($deg, $startColor, $endColor); // The standard +} +@mixin gradient-vertical-three-colors($startColor: #00b3ee, $midColor: #7a43b6, $colorStop: 50%, $endColor: #c3325f) { + background-color: mix($midColor, $endColor, 80%); + background-image: -webkit-gradient(linear, 0 0, 0 100%, from($startColor), color-stop($colorStop, $midColor), to($endColor)); + background-image: -webkit-linear-gradient($startColor, $midColor $colorStop, $endColor); + background-image: -moz-linear-gradient(top, $startColor, $midColor $colorStop, $endColor); + background-image: -ms-linear-gradient($startColor, $midColor $colorStop, $endColor); + background-image: -o-linear-gradient($startColor, $midColor $colorStop, $endColor); + background-image: linear-gradient($startColor, $midColor $colorStop, $endColor); + background-repeat: no-repeat; + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{$startColor}', endColorstr='#{$endColor}', GradientType=0); // IE9 and down, gets no color-stop at all for proper fallback +} +@mixin gradient-radial($innerColor: #555, $outerColor: #333) { + background-color: $outerColor; + background-image: -webkit-gradient(radial, center center, 0, center center, 460, from($innerColor), to($outerColor)); + background-image: -webkit-radial-gradient(circle, $innerColor, $outerColor); + background-image: -moz-radial-gradient(circle, $innerColor, $outerColor); + background-image: -ms-radial-gradient(circle, $innerColor, $outerColor); + background-repeat: no-repeat; + // Opera cannot do radial gradients yet +} +@mixin gradient-striped($color, $angle: -45deg) { + background-color: $color; + background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, rgba(255,255,255,.15)), color-stop(.25, transparent), color-stop(.5, transparent), color-stop(.5, rgba(255,255,255,.15)), color-stop(.75, rgba(255,255,255,.15)), color-stop(.75, transparent), to(transparent)); + background-image: -webkit-linear-gradient($angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent); + background-image: -moz-linear-gradient($angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent); + background-image: -ms-linear-gradient($angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent); + background-image: -o-linear-gradient($angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent); + background-image: linear-gradient($angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent); +} + +// Gradient Bar Colors for buttons and alerts +@mixin gradient-bar($primaryColor, $secondaryColor) { + @include gradient-vertical($primaryColor, $secondaryColor); + border-color: $secondaryColor $secondaryColor darken($secondaryColor, 15%); + border-color: rgba(0,0,0,.1) rgba(0,0,0,.1) fadein(rgba(0,0,0,.1), 15%); +} + +// Reset filters for IE +@mixin reset-filter() { + filter: e(%("progid:DXImageTransform.Microsoft.gradient(enabled = false)")); +} + + +// Mixin for generating button backgrounds +// --------------------------------------- +@mixin button-background($startColor, $endColor) { + // gradientBar will set the background to a pleasing blend of these, to support IE<=9 + @include gradient-bar($startColor, $endColor); + @include reset-filter(); + + // in these cases the gradient won't cover the background, so we override + &:hover, &:active, &.active, &.disabled, &[disabled] { + background-color: $endColor; + } + + // IE 7 + 8 can't handle box-shadow to show active, so we darken a bit ourselves + &:active, + &.active { + background-color: darken($endColor, 10%) \9; + } +} + + +// COMPONENT MIXINS +// -------------------------------------------------- + +// POPOVER ARROWS +// ------------------------- +// For tipsies and popovers +@mixin popover-arrow-top($arrowWidth: 5px) { + bottom: 0; + left: 50%; + margin-left: -$arrowWidth; + border-left: $arrowWidth solid transparent; + border-right: $arrowWidth solid transparent; + border-top: $arrowWidth solid $black; +} +@mixin popover-left($arrowWidth: 5px) { + top: 50%; + right: 0; + margin-top: -$arrowWidth; + border-top: $arrowWidth solid transparent; + border-bottom: $arrowWidth solid transparent; + border-left: $arrowWidth solid $black; +} +@mixin popover-bottom($arrowWidth: 5px) { + top: 0; + left: 50%; + margin-left: -$arrowWidth; + border-left: $arrowWidth solid transparent; + border-right: $arrowWidth solid transparent; + border-bottom: $arrowWidth solid $black; +} +@mixin popover-right($arrowWidth: 5px) { + top: 50%; + left: 0; + margin-top: -$arrowWidth; + border-top: $arrowWidth solid transparent; + border-bottom: $arrowWidth solid transparent; + border-right: $arrowWidth solid $black; +} diff --git a/less/modals.less b/less/modals.scss similarity index 58% rename from less/modals.less rename to less/modals.scss index aa14675e..317a926e 100644 --- a/less/modals.less +++ b/less/modals.scss @@ -2,10 +2,10 @@ // ------ .modal-open { - .dropdown-menu { z-index: @zindexDropdown + @zindexModal; } - .dropdown.open { *z-index: @zindexDropdown + @zindexModal; } - .popover { z-index: @zindexPopover + @zindexModal; } - .tooltip { z-index: @zindexTooltip + @zindexModal; } + .dropdown-menu { z-index: $zindexDropdown + $zindexModal; } + .dropdown.open { *z-index: $zindexDropdown + $zindexModal; } + .popover { z-index: $zindexPopover + $zindexModal; } + .tooltip { z-index: $zindexTooltip + $zindexModal; } } .modal-backdrop { @@ -14,35 +14,35 @@ right: 0; bottom: 0; left: 0; - z-index: @zindexModalBackdrop; - background-color: @black; + z-index: $zindexModalBackdrop; + background-color: $black; // Fade for backdrop &.fade { opacity: 0; } } .modal-backdrop, .modal-backdrop.fade.in { - .opacity(80); + @include opacity(80); } .modal { position: fixed; top: 50%; left: 50%; - z-index: @zindexModal; + z-index: $zindexModal; max-height: 500px; overflow: auto; width: 560px; margin: -250px 0 0 -280px; - background-color: @white; + background-color: $white; border: 1px solid #999; border: 1px solid rgba(0,0,0,.3); *border: 1px solid #999; /* IE6-7 */ - .border-radius(6px); - .box-shadow(0 3px 7px rgba(0,0,0,0.3)); - .background-clip(padding-box); + @include border-radius(6px); + @include box-shadow(0 3px 7px rgba(0,0,0,0.3)); + @include background-clip(padding-box); &.fade { - .transition(e('opacity .3s linear, top .3s ease-out')); + @include transition(opacity .3s linear, top .3s ease-out); top: -25%; } &.fade.in { top: 50%; } @@ -61,9 +61,9 @@ margin-bottom: 0; background-color: #f5f5f5; border-top: 1px solid #ddd; - .border-radius(0 0 6px 6px); - .box-shadow(inset 0 1px 0 @white); - .clearfix(); + @include .border-radius(0 0 6px 6px); + @include .box-shadow(inset 0 1px 0 $white); + @include clearfix(); .btn { float: right; margin-left: 5px; diff --git a/less/navbar.less b/less/navbar.scss similarity index 76% rename from less/navbar.less rename to less/navbar.scss index 93c0400b..c9066712 100644 --- a/less/navbar.less +++ b/less/navbar.scss @@ -7,17 +7,17 @@ .navbar { overflow: visible; - margin-bottom: @baseLineHeight; + margin-bottom: $baseLineHeight; } // Gradient is applied to it's own element because overflow visible is not honored by IE when filter is present .navbar-inner { padding-left: 20px; padding-right: 20px; - #gradient > .vertical(@navbarBackgroundHighlight, @navbarBackground); - .border-radius(4px); - @shadow: 0 1px 3px rgba(0,0,0,.25), inset 0 -1px 0 rgba(0,0,0,.1); - .box-shadow(@shadow); + @include gradient-vertical($navbarBackgroundHighlight, $navbarBackground); + @include border-radius(4px); + $shadow: 0 1px 3px rgba(0,0,0,.25), inset 0 -1px 0 rgba(0,0,0,.1); + @include box-shadow($shadow); } // Navbar button for toggling navbar items in responsive layouts @@ -27,17 +27,17 @@ padding: 7px 10px; margin-left: 5px; margin-right: 5px; - .buttonBackground(@navbarBackgroundHighlight, @navbarBackground); - @shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.075); - .box-shadow(@shadow); + @include button-background($navbarBackgroundHighlight, $navbarBackground); + $shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.075); + @include box-shadow($shadow); } .btn-navbar .icon-bar { display: block; width: 18px; height: 2px; background-color: #f5f5f5; - .border-radius(1px); - .box-shadow(0 1px 0 rgba(0,0,0,.25)); + @include border-radius(1px); + @include box-shadow(0 1px 0 rgba(0,0,0,.25)); } .btn-navbar .icon-bar + .icon-bar { margin-top: 3px; @@ -63,15 +63,15 @@ font-size: 20px; font-weight: 200; line-height: 1; - color: @white; + color: $white; } // Plain text in topbar .navbar-text { margin-bottom: 0; line-height: 40px; - color: @navbarText; + color: $navbarText; a:hover { - color: @white; + color: $white; background-color: transparent; } } @@ -88,7 +88,7 @@ // Navbar forms .navbar-form { margin-bottom: 0; // remove default bottom margin - .clearfix(); + @include clearfix(); input, select { display: inline-block; @@ -114,34 +114,34 @@ margin-bottom: 0; .search-query { padding: 4px 9px; - #font > .sans-serif(13px, normal, 1); - color: @white; + @include font-sans-serif(13px, normal, 1); + color: $white; color: rgba(255,255,255,.75); background: #666; background: rgba(255,255,255,.3); border: 1px solid #111; - @shadow: inset 0 1px 2px rgba(0,0,0,.1), 0 1px 0px rgba(255,255,255,.15); - .box-shadow(@shadow); - .transition(none); + $shadow: inset 0 1px 2px rgba(0,0,0,.1), 0 1px 0px rgba(255,255,255,.15); + @include box-shadow($shadow); + @include transition(none); // Placeholder text gets special styles; can't be bundled together though for some reason - .placeholder(@grayLighter); + @include placeholder($grayLighter); // Hover states &:hover { - color: @white; - background-color: @grayLight; + color: $white; + background-color: $grayLight; background-color: rgba(255,255,255,.5); } // Focus states (we use .focused since IE8 and down doesn't support :focus) &:focus, &.focused { padding: 5px 10px; - color: @grayDark; - text-shadow: 0 1px 0 @white; - background-color: @white; + color: $grayDark; + text-shadow: 0 1px 0 $white; + background-color: $white; border: 0; - .box-shadow(0 0 3px rgba(0,0,0,.15)); + @include box-shadow(0 0 3px rgba(0,0,0,.15)); outline: 0; } } @@ -156,12 +156,12 @@ top: 0; right: 0; left: 0; - z-index: @zindexFixedNavbar; + z-index: $zindexFixedNavbar; } .navbar-fixed-top .navbar-inner { padding-left: 0; padding-right: 0; - .border-radius(0); + @include border-radius(0); } @@ -188,34 +188,34 @@ float: none; padding: 10px 10px 11px; line-height: 19px; - color: @navbarLinkColor; + color: $navbarLinkColor; text-decoration: none; text-shadow: 0 -1px 0 rgba(0,0,0,.25); } // Hover .navbar .nav > li > a:hover { background-color: transparent; - color: @navbarLinkColorHover; + color: $navbarLinkColorHover; text-decoration: none; } // Active nav items .navbar .nav .active > a, .navbar .nav .active > a:hover { - color: @navbarLinkColorHover; + color: $navbarLinkColorHover; text-decoration: none; - background-color: @navbarBackground; + background-color: $navbarBackground; background-color: rgba(0,0,0,.5); } // Dividers (basically a vertical hr) .navbar .divider-vertical { - height: @navbarHeight; + height: $navbarHeight; width: 1px; margin: 0 9px; overflow: hidden; - background-color: @navbarBackground; - border-right: 1px solid @navbarBackgroundHighlight; + background-color: $navbarBackground; + border-right: 1px solid $navbarBackgroundHighlight; } // Secondary (floated right) nav in topbar @@ -232,7 +232,7 @@ // Menu position and menu carets .navbar .dropdown-menu { margin-top: 1px; - .border-radius(4px); + @include .border-radius(4px); &:before { content: ''; display: inline-block; @@ -249,7 +249,7 @@ display: inline-block; border-left: 6px solid transparent; border-right: 6px solid transparent; - border-bottom: 6px solid @white; + border-bottom: 6px solid $white; position: absolute; top: -6px; left: 10px; @@ -259,10 +259,10 @@ // Dropdown toggle caret .navbar .nav .dropdown-toggle .caret, .navbar .nav .open.dropdown .caret { - border-top-color: @white; + border-top-color: $white; } .navbar .nav .active .caret { - .opacity(100); + @include opacity(100); } // Remove background color from open dropdown @@ -274,7 +274,7 @@ // Dropdown link on hover .navbar .nav .active > .dropdown-toggle:hover { - color: @white; + color: $white; } // Right aligned menus need alt position diff --git a/less/navs.less b/less/navs.scss similarity index 82% rename from less/navs.less rename to less/navs.scss index a29cb712..27497f77 100644 --- a/less/navs.less +++ b/less/navs.scss @@ -8,7 +8,7 @@ .nav { margin-left: 0; - margin-bottom: @baseLineHeight; + margin-bottom: $baseLineHeight; list-style: none; } @@ -18,7 +18,7 @@ } .nav > li > a:hover { text-decoration: none; - background-color: @grayLighter; + background-color: $grayLighter; } @@ -42,8 +42,8 @@ .nav-list .nav-header { font-size: 11px; font-weight: bold; - line-height: @baseLineHeight; - color: @grayLight; + line-height: $baseLineHeight; + color: $grayLight; text-transform: uppercase; } .nav-list > li + .nav-header { @@ -51,9 +51,9 @@ } .nav-list .active > a, .nav-list .active > a:hover { - color: @white; + color: $white; text-shadow: 0 -1px 0 rgba(0,0,0,.2); - background-color: @linkColor; + background-color: $linkColor; } .nav-list [class^="icon-"] { margin-right: 2px; @@ -67,7 +67,7 @@ // Common styles .nav-tabs, .nav-pills { - .clearfix(); + @include clearfix(); } .nav-tabs > li, .nav-pills > li { @@ -99,16 +99,16 @@ padding-top: 9px; padding-bottom: 9px; border: 1px solid transparent; - .border-radius(4px 4px 0 0); + @include border-radius(4px 4px 0 0); &:hover { - border-color: @grayLighter @grayLighter #ddd; + border-color: $grayLighter $grayLighter #ddd; } } // Active state, and it's :hover to override normal :hover .nav-tabs > .active > a, .nav-tabs > .active > a:hover { - color: @gray; - background-color: @white; + color: $gray; + background-color: $white; border: 1px solid #ddd; border-bottom-color: transparent; cursor: default; @@ -123,14 +123,14 @@ padding-bottom: 8px; margin-top: 2px; margin-bottom: 2px; - .border-radius(5px); + @include border-radius(5px); } // Active state .nav-pills .active > a, .nav-pills .active > a:hover { - color: @white; - background-color: @linkColor; + color: $white; + background-color: $linkColor; } @@ -152,13 +152,13 @@ } .nav-tabs.nav-stacked > li > a { border: 1px solid #ddd; - .border-radius(0); + @include border-radius(0); } .nav-tabs.nav-stacked > li:first-child > a { - .border-radius(4px 4px 0 0); + @include border-radius(4px 4px 0 0); } .nav-tabs.nav-stacked > li:last-child > a { - .border-radius(0 0 4px 4px); + @include border-radius(0 0 4px 4px); } .nav-tabs.nav-stacked > li > a:hover { border-color: #ddd; @@ -185,7 +185,7 @@ border-width: 1px; } .nav-pills .dropdown-menu { - .border-radius(4px); + @include border-radius(4px); } // Default dropdown links @@ -193,25 +193,25 @@ // Make carets use linkColor to start .nav-tabs .dropdown-toggle .caret, .nav-pills .dropdown-toggle .caret { - border-top-color: @linkColor; + border-top-color: $linkColor; margin-top: 6px; } .nav-tabs .dropdown-toggle:hover .caret, .nav-pills .dropdown-toggle:hover .caret { - border-top-color: @linkColorHover; + border-top-color: $linkColorHover; } // Active dropdown links // ------------------------- .nav-tabs .active .dropdown-toggle .caret, .nav-pills .active .dropdown-toggle .caret { - border-top-color: @grayDark; + border-top-color: $grayDark; } // Active:hover dropdown links // ------------------------- .nav > .dropdown.active > a:hover { - color: @black; + color: $black; cursor: pointer; } @@ -220,20 +220,20 @@ .nav-tabs .open .dropdown-toggle, .nav-pills .open .dropdown-toggle, .nav > .open.active > a:hover { - color: @white; - background-color: @grayLight; - border-color: @grayLight; + color: $white; + background-color: $grayLight; + border-color: $grayLight; } .nav .open .caret, .nav .open.active .caret, .nav .open a:hover .caret { - border-top-color: @white; - .opacity(100); + border-top-color: $white; + @include opacity(100); } // Dropdowns in stacked tabs .tabs-stacked .open > a:hover { - border-color: @grayLight; + border-color: $grayLight; } @@ -247,7 +247,7 @@ // Clear any floats .tabbable { - .clearfix(); + @include clearfix(); } // Remove border on bottom, left, right @@ -279,7 +279,7 @@ margin-bottom: 0; } .tabs-below .nav-tabs > li > a { - .border-radius(0 0 4px 4px); + @include border-radius(0 0 4px 4px); &:hover { border-bottom-color: transparent; border-top-color: #ddd; @@ -313,15 +313,15 @@ } .tabs-left .nav-tabs > li > a { margin-right: -1px; - .border-radius(4px 0 0 4px); + @include border-radius(4px 0 0 4px); } .tabs-left .nav-tabs > li > a:hover { - border-color: @grayLighter #ddd @grayLighter @grayLighter; + border-color: $grayLighter #ddd $grayLighter $grayLighter; } .tabs-left .nav-tabs .active > a, .tabs-left .nav-tabs .active > a:hover { border-color: #ddd transparent #ddd #ddd; - *border-right-color: @white; + *border-right-color: $white; } // Tabs on the right @@ -332,13 +332,13 @@ } .tabs-right .nav-tabs > li > a { margin-left: -1px; - .border-radius(0 4px 4px 0); + @include border-radius(0 4px 4px 0); } .tabs-right .nav-tabs > li > a:hover { - border-color: @grayLighter @grayLighter @grayLighter #ddd; + border-color: $grayLighter $grayLighter $grayLighter #ddd; } .tabs-right .nav-tabs .active > a, .tabs-right .nav-tabs .active > a:hover { border-color: #ddd #ddd #ddd transparent; - *border-left-color: @white; + *border-left-color: $white; } diff --git a/less/pager.less b/less/pager.scss similarity index 81% rename from less/pager.less rename to less/pager.scss index 104e41ca..12f4da20 100644 --- a/less/pager.less +++ b/less/pager.scss @@ -3,10 +3,10 @@ .pager { margin-left: 0; - margin-bottom: @baseLineHeight; + margin-bottom: $baseLineHeight; list-style: none; text-align: center; - .clearfix(); + @include clearfix(); } .pager li { display: inline; @@ -16,7 +16,7 @@ padding: 5px 14px; background-color: #fff; border: 1px solid #ddd; - .border-radius(15px); + @include border-radius(15px); } .pager a:hover { text-decoration: none; diff --git a/less/pagination.less b/less/pagination.scss similarity index 68% rename from less/pagination.less rename to less/pagination.scss index de578075..69571280 100644 --- a/less/pagination.less +++ b/less/pagination.scss @@ -2,16 +2,16 @@ // ---------- .pagination { - height: @baseLineHeight * 2; - margin: @baseLineHeight 0; + height: $baseLineHeight * 2; + margin: $baseLineHeight 0; } .pagination ul { display: inline-block; - .ie7-inline-block(); + @include ie7-inline-block(); margin-left: 0; margin-bottom: 0; - .border-radius(3px); - .box-shadow(0 1px 2px rgba(0,0,0,.05)); + @include border-radius(3px); + @include box-shadow(0 1px 2px rgba(0,0,0,.05)); } .pagination li { display: inline; @@ -19,7 +19,7 @@ .pagination a { float: left; padding: 0 14px; - line-height: (@baseLineHeight * 2) - 2; + line-height: ($baseLineHeight * 2) - 2; text-decoration: none; border: 1px solid #ddd; border-left-width: 0; @@ -29,21 +29,21 @@ background-color: #f5f5f5; } .pagination .active a { - color: @grayLight; + color: $grayLight; cursor: default; } .pagination .disabled a, .pagination .disabled a:hover { - color: @grayLight; + color: $grayLight; background-color: transparent; cursor: default; } .pagination li:first-child a { border-left-width: 1px; - .border-radius(3px 0 0 3px); + @include border-radius(3px 0 0 3px); } .pagination li:last-child a { - .border-radius(0 3px 3px 0); + @include border-radius(0 3px 3px 0); } // Centered diff --git a/less/progress-bars.less b/less/progress-bars.scss similarity index 66% rename from less/progress-bars.less rename to less/progress-bars.scss index c3144e1b..5301c333 100644 --- a/less/progress-bars.less +++ b/less/progress-bars.scss @@ -33,29 +33,29 @@ overflow: hidden; height: 18px; margin-bottom: 18px; - #gradient > .vertical(#f5f5f5, #f9f9f9); - .box-shadow(inset 0 1px 2px rgba(0,0,0,.1)); - .border-radius(4px); + @include gradient-vertical(#f5f5f5, #f9f9f9); + @include box-shadow(inset 0 1px 2px rgba(0,0,0,.1)); + @include border-radius(4px); } // Bar of progress .progress .bar { width: 0%; height: 18px; - color: @white; + color: $white; font-size: 12px; text-align: center; text-shadow: 0 -1px 0 rgba(0,0,0,.25); - #gradient > .vertical(#149bdf, #0480be); - .box-shadow(inset 0 -1px 0 rgba(0,0,0,.15)); - .box-sizing(border-box); - .transition(width .6s ease); + @include gradient-vertical(#149bdf, #0480be); + @include box-shadow(inset 0 -1px 0 rgba(0,0,0,.15)); + @include box-sizing(border-box); + @include transition(width .6s ease); } // Striped bars .progress-striped .bar { - #gradient > .striped(#62c462); - .background-size(40px 40px); + @include gradient-striped(#62c462); + @include background-size(40px 40px); } // Call animation for the active one @@ -72,24 +72,24 @@ // Danger (red) .progress-danger .bar { - #gradient > .vertical(#ee5f5b, #c43c35); + @include gradient-vertical(#ee5f5b, #c43c35); } .progress-danger.progress-striped .bar { - #gradient > .striped(#ee5f5b); + @include gradient-striped(#ee5f5b); } // Success (green) .progress-success .bar { - #gradient > .vertical(#62c462, #57a957); + @include gradient-vertical(#62c462, #57a957); } .progress-success.progress-striped .bar { - #gradient > .striped(#62c462); + @include gradient-striped(#62c462); } // Info (teal) .progress-info .bar { - #gradient > .vertical(#5bc0de, #339bb9); + @include gradient-vertical(#5bc0de, #339bb9); } .progress-info.progress-striped .bar { - #gradient > .striped(#5bc0de); + @include gradient-striped(#5bc0de); } diff --git a/less/reset.less b/less/reset.scss similarity index 100% rename from less/reset.less rename to less/reset.scss diff --git a/less/scaffolding.less b/less/scaffolding.scss similarity index 66% rename from less/scaffolding.less rename to less/scaffolding.scss index 47ce5381..289df974 100644 --- a/less/scaffolding.less +++ b/less/scaffolding.scss @@ -8,11 +8,11 @@ body { margin: 0; - font-family: @baseFontFamily; - font-size: @baseFontSize; - line-height: @baseLineHeight; - color: @textColor; - background-color: @white; + font-family: $baseFontFamily; + font-size: $baseFontSize; + line-height: $baseLineHeight; + color: $textColor; + background-color: $white; } @@ -20,10 +20,10 @@ body { // ----- a { - color: @linkColor; + color: $linkColor; text-decoration: none; } a:hover { - color: @linkColorHover; + color: $linkColorHover; text-decoration: underline; } diff --git a/less/sprites.less b/less/sprites.scss similarity index 98% rename from less/sprites.less rename to less/sprites.scss index a56216c7..501d0978 100644 --- a/less/sprites.less +++ b/less/sprites.scss @@ -19,14 +19,14 @@ width: 14px; height: 14px; vertical-align: text-top; - background-image: url(../img/glyphicons-halflings.png); +-- background-image: url(../img/glyphicons-halflings.png); background-position: 14px 14px; background-repeat: no-repeat; - .ie7-restore-right-whitespace(); + @include ie7-restore-right-whitespace(); } .icon-white { - background-image: url(../img/glyphicons-halflings-white.png); + -- background-image: url(../img/glyphicons-halflings-white.png); } .icon-glass { background-position: 0 0; } diff --git a/less/tables.less b/less/tables.scss similarity index 74% rename from less/tables.less rename to less/tables.scss index c069ed58..1cf8fa4a 100644 --- a/less/tables.less +++ b/less/tables.scss @@ -18,12 +18,12 @@ table { .table { width: 100%; - margin-bottom: @baseLineHeight; + margin-bottom: $baseLineHeight; // Cells th, td { padding: 8px; - line-height: @baseLineHeight; + line-height: $baseLineHeight; text-align: left; border-top: 1px solid #ddd; } @@ -65,7 +65,7 @@ table { border: 1px solid #ddd; border-collapse: separate; // Done so we can round those corners! *border-collapse: collapsed; // IE7 can't round corners anyway - .border-radius(4px); + @include border-radius(4px); th + th, td + td, th + td, @@ -81,20 +81,20 @@ table { // For first th or td in the first row in the first thead or tbody thead:first-child tr:first-child th:first-child, tbody:first-child tr:first-child td:first-child { - .border-radius(4px 0 0 0); + @include border-radius(4px 0 0 0); } thead:first-child tr:first-child th:last-child, tbody:first-child tr:first-child td:last-child { - .border-radius(0 4px 0 0); + @include border-radius(0 4px 0 0); } // For first th or td in the first row in the first thead or tbody thead:last-child tr:last-child th:first-child, tbody:last-child tr:last-child td:first-child { - .border-radius(0 0 0 4px); + @include border-radius(0 0 0 4px); } thead:last-child tr:last-child th:last-child, tbody:last-child tr:last-child td:last-child { - .border-radius(0 0 4px 0); + @include border-radius(0 0 4px 0); } } @@ -118,22 +118,13 @@ table { // ----------------- // Change the columns -.tableColumns(@columnSpan: 1) { +@mixin table-columns($columnSpan: 1) { float: none; - width: ((@gridColumnWidth) * @columnSpan) + (@gridGutterWidth * (@columnSpan - 1)) - 16; + width: (($gridColumnWidth) * $columnSpan) + ($gridGutterWidth * ($columnSpan - 1)) - 16; margin-left: 0; } table { - .span1 { .tableColumns(1); } - .span2 { .tableColumns(2); } - .span3 { .tableColumns(3); } - .span4 { .tableColumns(4); } - .span5 { .tableColumns(5); } - .span6 { .tableColumns(6); } - .span7 { .tableColumns(7); } - .span8 { .tableColumns(8); } - .span9 { .tableColumns(9); } - .span10 { .tableColumns(10); } - .span11 { .tableColumns(11); } - .span12 { .tableColumns(12); } + @for $i from 1 through 12 { + .span#{$i} { @include table-columns($i); } + } } diff --git a/less/thumbnails.less b/less/thumbnails.scss similarity index 66% rename from less/thumbnails.less rename to less/thumbnails.scss index 541fbd6a..630c644b 100644 --- a/less/thumbnails.less +++ b/less/thumbnails.scss @@ -4,24 +4,24 @@ .thumbnails { margin-left: -20px; list-style: none; - .clearfix(); + @include clearfix(); } .thumbnails > li { float: left; - margin: 0 0 @baseLineHeight 20px; + margin: 0 0 $baseLineHeight 20px; } .thumbnail { display: block; padding: 4px; line-height: 1; border: 1px solid #ddd; - .border-radius(4px); - .box-shadow(0 1px 1px rgba(0,0,0,.075)); + @include border-radius(4px); + @include box-shadow(0 1px 1px rgba(0,0,0,.075)); } // Add a hover state for linked versions only a.thumbnail:hover { - border-color: @linkColor; - .box-shadow(0 1px 4px rgba(0,105,214,.25)); + border-color: $linkColor; + @include box-shadow(0 1px 4px rgba(0,105,214,.25)); } // Images and captions .thumbnail > img { diff --git a/less/tooltip.less b/less/tooltip.scss similarity index 52% rename from less/tooltip.less rename to less/tooltip.scss index 5111a193..310d90b4 100644 --- a/less/tooltip.less +++ b/less/tooltip.scss @@ -3,30 +3,30 @@ .tooltip { position: absolute; - z-index: @zindexTooltip; + z-index: $zindexTooltip; display: block; visibility: visible; padding: 5px; font-size: 11px; - .opacity(0); - &.in { .opacity(80); } + @include opacity(0); + &.in { @include opacity(80); } &.top { margin-top: -2px; } &.right { margin-left: 2px; } &.bottom { margin-top: 2px; } &.left { margin-left: -2px; } - &.top .tooltip-arrow { #popoverArrow > .top(); } - &.left .tooltip-arrow { #popoverArrow > .left(); } - &.bottom .tooltip-arrow { #popoverArrow > .bottom(); } - &.right .tooltip-arrow { #popoverArrow > .right(); } + &.top .tooltip-arrow { @include popover-arrow-top(); } + &.left .tooltip-arrow { @include popover-arrow-left(); } + &.bottom .tooltip-arrow { @include popover-arrow-bottom } + &.right .tooltip-arrow { @include popover-arrow-right } } .tooltip-inner { max-width: 200px; padding: 3px 8px; - color: @white; + color: $white; text-align: center; text-decoration: none; - background-color: @black; - .border-radius(4px); + background-color: $black; + @include border-radius(4px); } .tooltip-arrow { position: absolute; diff --git a/less/type.less b/less/type.scss similarity index 65% rename from less/type.less rename to less/type.scss index 7841bb09..275d71a8 100644 --- a/less/type.less +++ b/less/type.scss @@ -7,20 +7,20 @@ // --------- p { - margin: 0 0 @baseLineHeight / 2; - font-family: @baseFontFamily; - font-size: @baseFontSize; - line-height: @baseLineHeight; + margin: 0 0 $baseLineHeight / 2; + font-family: $baseFontFamily; + font-size: $baseFontSize; + line-height: $baseLineHeight; small { - font-size: @baseFontSize - 2; - color: @grayLight; + font-size: $baseFontSize - 2; + color: $grayLight; } } .lead { - margin-bottom: @baseLineHeight; + margin-bottom: $baseLineHeight; font-size: 20px; font-weight: 200; - line-height: @baseLineHeight * 1.5; + line-height: $baseLineHeight * 1.5; } // HEADINGS @@ -29,36 +29,36 @@ p { h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: bold; - color: @grayDark; + color: $grayDark; text-rendering: optimizelegibility; // Fix the character spacing for headings small { font-weight: normal; - color: @grayLight; + color: $grayLight; } } h1 { font-size: 30px; - line-height: @baseLineHeight * 2; + line-height: $baseLineHeight * 2; small { font-size: 18px; } } h2 { font-size: 24px; - line-height: @baseLineHeight * 2; + line-height: $baseLineHeight * 2; small { font-size: 18px; } } h3 { - line-height: @baseLineHeight * 1.5; + line-height: $baseLineHeight * 1.5; font-size: 18px; small { font-size: 14px; } } h4, h5, h6 { - line-height: @baseLineHeight; + line-height: $baseLineHeight; } h4 { font-size: 14px; @@ -71,15 +71,15 @@ h5 { } h6 { font-size: 11px; - color: @grayLight; + color: $grayLight; text-transform: uppercase; } // Page header .page-header { - padding-bottom: @baseLineHeight - 1; - margin: @baseLineHeight 0; - border-bottom: 1px solid @grayLighter; + padding-bottom: $baseLineHeight - 1; + margin: $baseLineHeight 0; + border-bottom: 1px solid $grayLighter; } .page-header h1 { line-height: 1; @@ -93,7 +93,7 @@ h6 { // Unordered and Ordered lists ul, ol { padding: 0; - margin: 0 0 @baseLineHeight / 2 25px; + margin: 0 0 $baseLineHeight / 2 25px; } ul ul, ul ol, @@ -108,7 +108,7 @@ ol { list-style: decimal; } li { - line-height: @baseLineHeight; + line-height: $baseLineHeight; } ul.unstyled { margin-left: 0; @@ -117,17 +117,17 @@ ul.unstyled { // Description Lists dl { - margin-bottom: @baseLineHeight; + margin-bottom: $baseLineHeight; } dt, dd { - line-height: @baseLineHeight; + line-height: $baseLineHeight; } dt { font-weight: bold; } dd { - margin-left: @baseLineHeight / 2; + margin-left: $baseLineHeight / 2; } // MISC @@ -135,10 +135,10 @@ dd { // Horizontal rules hr { - margin: @baseLineHeight 0; + margin: $baseLineHeight 0; border: 0; border-top: 1px solid #e5e5e5; - border-bottom: 1px solid @white; + border-bottom: 1px solid $white; } // Emphasis @@ -149,7 +149,7 @@ em { font-style: italic; } .muted { - color: @grayLight; + color: $grayLight; } // Abbreviations and acronyms @@ -163,16 +163,16 @@ abbr { // Blockquotes blockquote { padding: 0 0 0 15px; - margin: 0 0 @baseLineHeight; - border-left: 5px solid @grayLighter; + margin: 0 0 $baseLineHeight; + border-left: 5px solid $grayLighter; p { margin-bottom: 0; - #font > .shorthand(16px,300,@baseLineHeight * 1.25); + @include font-shorthand(16px,300,$baseLineHeight * 1.25); } small { display: block; - line-height: @baseLineHeight; - color: @grayLight; + line-height: $baseLineHeight; + color: $grayLight; &:before { content: '\2014 \00A0'; } @@ -184,7 +184,7 @@ blockquote { padding-left: 0; padding-right: 15px; border-left: 0; - border-right: 5px solid @grayLighter; + border-right: 5px solid $grayLighter; p, small { text-align: right; @@ -203,8 +203,8 @@ blockquote:after { // Addresses address { display: block; - margin-bottom: @baseLineHeight; - line-height: @baseLineHeight; + margin-bottom: $baseLineHeight; + line-height: $baseLineHeight; font-style: normal; } diff --git a/less/utilities.less b/less/utilities.scss similarity index 100% rename from less/utilities.less rename to less/utilities.scss diff --git a/less/variables.less b/less/variables.less deleted file mode 100644 index f01c232e..00000000 --- a/less/variables.less +++ /dev/null @@ -1,99 +0,0 @@ -// Variables.less -// Variables to customize the look and feel of Bootstrap -// ----------------------------------------------------- - - - -// GLOBAL VALUES -// -------------------------------------------------- - -// Links -@linkColor: #08c; -@linkColorHover: darken(@linkColor, 15%); - -// Grays -@black: #000; -@grayDarker: #222; -@grayDark: #333; -@gray: #555; -@grayLight: #999; -@grayLighter: #eee; -@white: #fff; - -// Accent colors -@blue: #049cdb; -@blueDark: #0064cd; -@green: #46a546; -@red: #9d261d; -@yellow: #ffc40d; -@orange: #f89406; -@pink: #c3325f; -@purple: #7a43b6; - -// Typography -@baseFontSize: 13px; -@baseFontFamily: "Helvetica Neue", Helvetica, Arial, sans-serif; -@baseLineHeight: 18px; -@textColor: @grayDark; - -// Buttons -@primaryButtonBackground: @linkColor; - - - -// COMPONENT VARIABLES -// -------------------------------------------------- - -// Z-index master list -// Used for a bird's eye view of components dependent on the z-axis -// Try to avoid customizing these :) -@zindexDropdown: 1000; -@zindexPopover: 1010; -@zindexTooltip: 1020; -@zindexFixedNavbar: 1030; -@zindexModalBackdrop: 1040; -@zindexModal: 1050; - -// Input placeholder text color -@placeholderText: @grayLight; - -// Navbar -@navbarHeight: 40px; -@navbarBackground: @grayDarker; -@navbarBackgroundHighlight: @grayDark; - -@navbarText: @grayLight; -@navbarLinkColor: @grayLight; -@navbarLinkColorHover: @white; - -// Form states and alerts -@warningText: #c09853; -@warningBackground: #fcf8e3; -@warningBorder: darken(spin(@warningBackground, -10), 3%); - -@errorText: #b94a48; -@errorBackground: #f2dede; -@errorBorder: darken(spin(@errorBackground, -10), 3%); - -@successText: #468847; -@successBackground: #dff0d8; -@successBorder: darken(spin(@successBackground, -10), 5%); - -@infoText: #3a87ad; -@infoBackground: #d9edf7; -@infoBorder: darken(spin(@infoBackground, -10), 7%); - - - -// GRID -// -------------------------------------------------- - -// Default 940px grid -@gridColumns: 12; -@gridColumnWidth: 60px; -@gridGutterWidth: 20px; -@gridRowWidth: (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1)); - -// Fluid grid -@fluidGridColumnWidth: 6.382978723%; -@fluidGridGutterWidth: 2.127659574%; diff --git a/less/variables.scss b/less/variables.scss new file mode 100644 index 00000000..39f62b8e --- /dev/null +++ b/less/variables.scss @@ -0,0 +1,99 @@ +// Variables.less +// Variables to customize the look and feel of Bootstrap +// ----------------------------------------------------- + + + +// GLOBAL VALUES +// -------------------------------------------------- + +// Links +$linkColor: #08c; +$linkColorHover: darken($linkColor, 15%); + +// Grays +$black: #000; +$grayDarker: #222; +$grayDark: #333; +$gray: #555; +$grayLight: #999; +$grayLighter: #eee; +$white: #fff; + +// Accent colors +$blue: #049cdb; +$blueDark: #0064cd; +$green: #46a546; +$red: #9d261d; +$yellow: #ffc40d; +$orange: #f89406; +$pink: #c3325f; +$purple: #7a43b6; + +// Typography +$baseFontSize: 13px; +$baseFontFamily: "Helvetica Neue", Helvetica, Arial, sans-serif; +$baseLineHeight: 18px; +$textColor: $grayDark; + +// Buttons +$primaryButtonBackground: $linkColor; + + + +// COMPONENT VARIABLES +// -------------------------------------------------- + +// Z-index master list +// Used for a bird's eye view of components dependent on the z-axis +// Try to avoid customizing these :) +$zindexDropdown: 1000; +$zindexPopover: 1010; +$zindexTooltip: 1020; +$zindexFixedNavbar: 1030; +$zindexModalBackdrop: 1040; +$zindexModal: 1050; + +// Input placeholder text color +$placeholderText: $grayLight; + +// Navbar +$navbarHeight: 40px; +$navbarBackground: $grayDarker; +$navbarBackgroundHighlight: $grayDark; + +$navbarText: $grayLight; +$navbarLinkColor: $grayLight; +$navbarLinkColorHover: $white; + +// Form states and alerts +$warningText: #c09853; +$warningBackground: #fcf8e3; +$warningBorder: darken(adjust-hue($warningBackground, -10), 3%); + +$errorText: #b94a48; +$errorBackground: #f2dede; +$errorBorder: darken(adjust-hue($errorBackground, -10), 3%); + +$successText: #468847; +$successBackground: #dff0d8; +$successBorder: darken(adjust-hue($successBackground, -10), 5%); + +$infoText: #3a87ad; +$infoBackground: #d9edf7; +$infoBorder: darken(adjust-hue($infoBackground, -10), 7%); + + + +// GRID +// -------------------------------------------------- + +// Default 940px grid +$gridColumns: 12; +$gridColumnWidth: 60px; +$gridGutterWidth: 20px; +$gridRowWidth: ($gridColumns * $gridColumnWidth) + ($gridGutterWidth * ($gridColumns - 1)); + +// Fluid grid +$fluidGridColumnWidth: 6.382978723%; +$fluidGridGutterWidth: 2.127659574%; diff --git a/less/wells.less b/less/wells.scss similarity index 74% rename from less/wells.less rename to less/wells.scss index 244b8ca1..7ad2d171 100644 --- a/less/wells.less +++ b/less/wells.scss @@ -8,8 +8,8 @@ background-color: #f5f5f5; border: 1px solid #eee; border: 1px solid rgba(0,0,0,.05); - .border-radius(4px); - .box-shadow(inset 0 1px 1px rgba(0,0,0,.05)); + @include border-radius(4px); + @include box-shadow(inset 0 1px 1px rgba(0,0,0,.05)); blockquote { border-color: #ddd; border-color: rgba(0,0,0,.15);