From 5c1a156811f857fd01a52e2eb391b33dd21c9a22 Mon Sep 17 00:00:00 2001 From: Stephen James Date: Tue, 7 Jul 2015 17:10:17 -0400 Subject: [PATCH 1/5] Use variables for colors --- less/checkbox.less | 26 +++--- less/datepicker.less | 72 +++++++-------- less/forms.less | 14 +-- less/icons.less | 4 +- less/loader.less | 4 +- less/mixins.less | 169 +++++++++++++++++------------------ less/pillbox.less | 14 +-- less/placard.less | 32 +++---- less/preloader.less | 2 +- less/radio-no-js.less | 16 ++-- less/radio.less | 23 +++-- less/repeater-list.less | 58 ++++++------ less/repeater-thumbnail.less | 4 +- less/repeater.less | 12 +-- less/scheduler.less | 2 +- less/selectlist.less | 2 +- less/tree.less | 4 +- less/utility.less | 6 +- less/variables.less | 130 +++++++++++++++++---------- less/wizard.less | 39 ++++---- 20 files changed, 334 insertions(+), 299 deletions(-) diff --git a/less/checkbox.less b/less/checkbox.less index 024d2798a..ba4e68bcf 100644 --- a/less/checkbox.less +++ b/less/checkbox.less @@ -16,7 +16,7 @@ } &.checked label.checkbox-custom, label.checked.checkbox-custom { - background: #e9e9e9; + background: @gray90; border-radius: @baseBorderRadius; } } @@ -26,7 +26,7 @@ input[type="checkbox"]:hover + .checkbox-label, .checkbox-label:hover { - color: @grayLight; + color: @gray60; } input[type="checkbox"]:disabled:focus + .checkbox-label, @@ -51,10 +51,10 @@ position: relative; &:before { - #fuelux > .icon-base-styles("Glyphicons Halflings"); - border: 1px solid #adadad; + .iconBaseStyles("Glyphicons Halflings"); + border: 1px solid @gray67; border-radius: @baseBorderRadius; - color: #fff; + color: @true-white; content: " "; font-size: 9px; height: 14px; @@ -67,10 +67,9 @@ /* for keyboard tabbing */ &:active:before, &:focus:before { - color: @text-color; - color: rgb(91, 157, 217); + color: @focusColor; cursor: pointer; - box-shadow: inset 0px 0px 2px 1px rgb(91, 157, 217), 0px 0px 5px 0px rgb(91, 157, 217); + box-shadow: inset 0px 0px 2px 1px @focusColor, 0px 0px 5px 0px @focusColor; } &.highlight { @@ -82,20 +81,19 @@ &.checked { &:before { - background: #39b3d7; - border-color: #39b3d7; + background: @checkboxPrimaryColor; + border-color: @checkboxPrimaryColor; content: "\e013"; } } &.disabled { cursor: not-allowed; - opacity: .65; &:before { cursor: not-allowed; - opacity: .65; + opacity: .5; } } @@ -115,7 +113,7 @@ } &.checked { - background: #e9e9e9; + background: @gray90; border-radius: @baseBorderRadius; } } @@ -124,7 +122,7 @@ /* for keyboard tabbing */ input[type="checkbox"]:focus + .checkbox-label { - color: @grayLight; + color: @gray60; } } diff --git a/less/datepicker.less b/less/datepicker.less index d897896db..389b53955 100644 --- a/less/datepicker.less +++ b/less/datepicker.less @@ -18,7 +18,7 @@ width: 100%; thead { - border-bottom: 1px solid #cccaca; + border-bottom: 1px solid @gray80; } /* for spacing */ @@ -40,7 +40,7 @@ td { b, button { - color: #333; + color: @gray20; display: inline-block; font-weight: normal; height: 30px; @@ -65,7 +65,7 @@ &.current-day { span { - border: 1px solid #333; + border: 1px solid @gray20; } } @@ -85,7 +85,7 @@ &.past { b, button { - color: lighten(#333, 40%); + color: lighten(@gray20, 40%); } } @@ -95,7 +95,7 @@ position: relative; &:before { - border-top: 1px solid #a94442; + border-top: 1px solid darken(@btnDangerBackground, 10%); bottom: 0; content: " "; display: block; @@ -121,19 +121,19 @@ } b, button { - color: #8d8787; + color: @gray53; } &.current-day { - box-shadow: 0 0 0 1px #fff offset; + box-shadow: 0 0 0 1px @true-white offset; b, button { - color: #222; + color: @gray13; } span { &:hover { b, button { - border-color: #0f5f9f; + border-color: @datepickerHover; } } } @@ -162,14 +162,14 @@ text-align: center; display: block; width: 174px; - color: #222; + color: @gray13; font-size: 20px; line-height: 30px; text-decoration: underline; vertical-align: middle; &:hover { - color: #1d75bb; + color: @datepickerHover; text-decoration: underline; } @@ -195,7 +195,7 @@ } .next, .prev { - background: #666669; + background: @gray40; background-clip: padding-box; border-radius: 30px; cursor: pointer; @@ -205,13 +205,13 @@ width: 30px; span.glyphicon { - color: #fff; + color: @true-white; font-size: 16px; line-height: 30px; } &:hover { - background: #1d75bb; + background: @datepickerHover; } } @@ -225,31 +225,31 @@ } &-footer { - background: #e3e2e1; + background: @gray90; background-clip: padding-box; border-radius: 0 0 4px 4px; - border-top: 1px solid #cccaca; + border-top: 1px solid @gray80; height: 30px; margin: 0 -16px; padding: 4px 14px; .datepicker-today { - color: #333; + color: @gray20; font-size: 14px; text-decoration: underline; &:hover { - color: #1b75bb; + color: @datepickerHoverAlt; text-decoration: underline; } &.disabled { - color: #8b8c8e; + color: @gray53; cursor: default; pointer-events: none; &:hover { - color: #8b8c8e + color: @gray53; } } } @@ -257,7 +257,7 @@ } &-calendar-wrapper { - border: 1px solid #6e6f71; + border: 1px solid @gray46; min-height: 20px; padding: 0; width: 300px; @@ -273,31 +273,31 @@ } &-footer { - background: #e3e2e1; + background: @gray90; border-radius: 0 0 4px 4px; - border-top: 1px solid #cccaca; + border-top: 1px solid @gray80; clear: both; .datepicker-wheels-back { display: block; - color: #222; + color: @gray13; float: left; line-height: 22px; border: 0; background-color: transparent; &:hover { - color: #1d75bb; + color: @datepickerHoverAlt; } } .datepicker-wheels-select { float: right; background-color: transparent; - color: @blue; + color: @focusColor; &:hover { - color: #1d75bb; + color: @datepickerHoverAlt; } } } @@ -321,25 +321,25 @@ display: block; width: 100%; text-align: center; - color: #414041; + color: @gray27; display: block; font-size: 16px; line-height: 24px; text-decoration: none; &:hover { - background: #aee0f8; + background: @infoBackground; text-decoration: none; } } &.selected { button { - background: #1d75bb; - color: #fff; + background: @datepickerHoverAlt; + color: @true-white; &:hover { - background: #0f5f9f; + background: @datepickerHover; } } } @@ -347,11 +347,11 @@ } .header { - background: #e3e2e1; + background: @gray90; background-clip: padding-box; - border-bottom: 1px solid #cccaca; + border-bottom: 1px solid @gray80; border-radius: 4px 0 0 0; - color: #222; + color: @gray13; font-size: 20px; font-weight: bold; line-height: 30px; @@ -371,7 +371,7 @@ } &-year { - border-left: 1px solid #cccaca; + border-left: 1px solid @gray80; float: right; .header { diff --git a/less/forms.less b/less/forms.less index f74b62c64..f7faf0ceb 100644 --- a/less/forms.less +++ b/less/forms.less @@ -48,7 +48,7 @@ border-radius: @baseBorderRadius; } &:checked ~ label { - background-color: #e9e9e9; + background-color: @gray90; opacity: 1; z-index: 0; } @@ -76,8 +76,8 @@ text-transform: none; line-height: 1; speak: none; - border: 1px solid #adadad; - color: #fff; + border: 1px solid @gray67; + color: @true-white; font-size: 9px; width: 14px; height: 14px; @@ -98,7 +98,7 @@ /* for keyboard tabbing */ &:active ~ label, &:focus ~ label { color: @text-color; - color: rgb(91, 157, 217); + color: @checkboxPrimaryColor; cursor: pointer; &:before { @@ -124,7 +124,7 @@ &[disabled="disabled"], &[disabled], &:disabled { & ~ label, & ~ label:before { color: @text-color; - opacity: .65; + opacity: 0.5 !important; cursor: not-allowed !important; outline: none; box-shadow: none; @@ -133,8 +133,8 @@ &:checked ~ label { &:before { - background: #39b3d7; - border-color: #39b3d7; + background: @checkboxPrimaryColor; + border-color: @checkboxPrimaryColor; } } diff --git a/less/icons.less b/less/icons.less index 88ddc96d9..05f3016a9 100644 --- a/less/icons.less +++ b/less/icons.less @@ -11,7 +11,7 @@ //This could be an interesting addition... //[data-icon]:before { -// #fuelux > .icon-base-styles(); +// .iconBaseStyles(); // content: attr(data-icon); //} @@ -19,7 +19,7 @@ [class^="fueluxicon-"]:before, [class*=" fueluxicon-"]:before { - #fuelux > .icon-base-styles(); + .iconBaseStyles(); } .fueluxicon-loader-full:before { diff --git a/less/loader.less b/less/loader.less index 93698230c..156eabf2c 100644 --- a/less/loader.less +++ b/less/loader.less @@ -7,7 +7,7 @@ width: 64px; &:after, &:before { - #fuelux > .icon-base-styles(); + .iconBaseStyles(); bottom: 0; display: block; @@ -23,7 +23,7 @@ } &.iefix:before{ - color: #bcbcbc; + color: @gray74; opacity: 1; } diff --git a/less/mixins.less b/less/mixins.less index 5d853311b..9f7456965 100644 --- a/less/mixins.less +++ b/less/mixins.less @@ -14,36 +14,36 @@ } } -#fuelux { - // Single side border-radius - .border-top-radius(@radius) { - border-top-right-radius: @radius; - border-top-left-radius: @radius; - } - .border-right-radius(@radius) { - border-bottom-right-radius: @radius; - border-top-right-radius: @radius; - } - .border-bottom-radius(@radius) { - border-bottom-right-radius: @radius; - border-bottom-left-radius: @radius; - } - .border-left-radius(@radius) { - border-bottom-left-radius: @radius; - border-top-left-radius: @radius; - } +// Single side border-radius +.border-top-radius(@radius) { + border-top-right-radius: @radius; + border-top-left-radius: @radius; +} +.border-right-radius(@radius) { + border-bottom-right-radius: @radius; + border-top-right-radius: @radius; +} +.border-bottom-radius(@radius) { + border-bottom-right-radius: @radius; + border-bottom-left-radius: @radius; +} +.border-left-radius(@radius) { + border-bottom-left-radius: @radius; + border-top-left-radius: @radius; +} - // Gradient Bar Colors for buttons and alerts - .gradient-bar(@primaryColor, @secondaryColor, @textColor: #fff, @textShadow: 0 -1px 0 rgba(0,0,0,.25)) { - color: @textColor; - text-shadow: @textShadow; - #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%); - } +// Gradient Bar Colors for buttons and alerts +.gradientBar(@primaryColor, @secondaryColor, @textColor: #fff, @textShadow: 0 -1px 0 rgba(0,0,0,.25)) { + color: @textColor; + text-shadow: @textShadow; + #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 - .vertical(@startColor: #555, @endColor: #333) { +// Gradients +#gradient { + .vertical(@startColor: @gray33, @endColor: @gray20) { background-color: mix(@startColor, @endColor, 60%); background-image: -moz-linear-gradient(top, @startColor, @endColor); // FF 3.6+ background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@startColor), to(@endColor)); // Safari 4+, Chrome 2+ @@ -53,69 +53,68 @@ background-repeat: repeat-x; filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(@startColor),argb(@endColor))); // IE9 and down } +} - // Icon Base Styles - .icon-base-styles(@fontFamily: "fuelux"){ - font-family: @fontFamily !important; - font-style: normal !important; - font-weight: normal !important; - font-variant: normal !important; - text-transform: none !important; - line-height: 1; - speak: none; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - } - - // Disables selection of text - .no-selection-allowed(){ - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - -o-user-select: none; - user-select: none; - } +// Icon Base Styles +.iconBaseStyles(@fontFamily: "fuelux"){ + font-family: @fontFamily !important; + font-style: normal !important; + font-weight: normal !important; + font-variant: normal !important; + text-transform: none !important; + line-height: 1; + speak: none; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} - // Opacity - .opacity(@opacity) { - opacity: @opacity / 100; - filter: ~"alpha(opacity=@{opacity})"; - } +// Disables selection of text +.noSelectionAllowed(){ + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + -o-user-select: none; + user-select: none; +} - // Helpers - // ------------------------- - .data-label() { - text-transform: uppercase; - font-size: 10px; - margin-bottom: 2px; - text-shadow: 0 1px #fff; - color: #666; - } +// Opacity +.opacity(@opacity) { + opacity: @opacity / 100; + filter: ~"alpha(opacity=@{opacity})"; +} - .data-value() { - font-size: 14px; - } +// Helpers +// ------------------------- +.data-label() { + text-transform: uppercase; + font-size: 10px; + margin-bottom: 2px; + text-shadow: 0 1px @true-white; + color: @gray40; +} - .section-heading() { - font-size: 16px; - color: #333; - margin: 0 0 10px; - padding: 0; - text-shadow: 0 1px #fff; - } +.data-value() { + font-size: 14px; +} - .text-emphasis-variant(@color) { - color: @color; - a&:hover { - color: darken(@color, 10%); - } - } +.section-heading() { + font-size: 16px; + color: @gray20; + margin: 0 0 10px; + padding: 0; + text-shadow: 0 1px @true-white; +} - .vertical-align() { - margin: auto; - position: absolute; - top: 0; - bottom: 0; +.text-emphasis-variant(@color) { + color: @color; + a&:hover { + color: darken(@color, 10%); } - } + +.vertical-align() { + margin: auto; + position: absolute; + top: 0; + bottom: 0; +} \ No newline at end of file diff --git a/less/pillbox.less b/less/pillbox.less index 18fa59e09..1557c5f44 100644 --- a/less/pillbox.less +++ b/less/pillbox.less @@ -1,7 +1,7 @@ .fuelux { .pillbox { - border: 1px solid #BBBBBB; + border: 1px solid @gray74; border-radius: 4px; cursor: text; padding: 3px; @@ -68,7 +68,7 @@ word-break: break-all; &.pillbox-highlight { - outline: 1px dotted @grayLight; + outline: 1px dotted @gray60; } &.truncated { @@ -77,7 +77,7 @@ .pillbox-list-edit { border: none; - color: @grayDark; + color: @gray20; font-weight: normal; border-radius: 2px; @@ -110,13 +110,13 @@ float: left; &.editing { - border: 1px solid #ccc; + border: 1px solid @gray80; border-radius: 4px; margin: 2px 0 3px 3px; input.pillbox-add-item { border-radius: 4px; - color: #333; + color: @gray20; height: 32px; } } @@ -148,11 +148,11 @@ padding: 3px 20px; &.pillbox-suggest-sel { - background-color: @grayLighter; + background-color: @gray93; } &:hover { - background-color: @grayLighter; + background-color: @gray93; } } } diff --git a/less/placard.less b/less/placard.less index a5a7f5afc..b045f9770 100644 --- a/less/placard.less +++ b/less/placard.less @@ -39,8 +39,8 @@ } input.placard-field, textarea.placard-field { - background: #fff; - border: 1px solid #CCCCCC; + background: @true-white; + border: 1px solid @gray80; box-shadow: none; position: relative; z-index: 1; @@ -51,21 +51,21 @@ resize: none; &[readonly] { - background: #fff; + background: @true-white; cursor: auto; &.glass { background: none; &:hover { - background: #d9edf7; + background: @infoBackground; cursor: pointer; } } } &:focus { - border: 1px solid #CCCCCC; + border: 1px solid @gray80; box-shadow: none; } } @@ -101,12 +101,12 @@ } &-popup { - background: #d9edf7; + background: @infoBackground; background-clip: padding-box; - border: 1px solid #ccc; + border: 1px solid @gray80; border-radius: 4px; bottom: -8px; - box-shadow: 0 0 0 1px #fff inset; + box-shadow: 0 0 0 1px @true-white inset; display: none; left: -8px; position: absolute; @@ -116,30 +116,30 @@ .glass { background: transparent; - border: 1px solid #fff; + border: 1px solid @true-white; box-shadow: none; &:hover { - background: #d9edf7; - border-color: #66afe9; + background: @infoBackground; + border-color: @focusColor; cursor: pointer; &[disabled] { background: transparent; - border-color: #fff; + border-color: @true-white; cursor: not-allowed; } } &:focus { - background: #fff; - border-color: #66afe9; - box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102,175,233,.6); + background: @true-white; + border-color: @focusColor; + box-shadow: inset 0 1px 1px fade(@true-black, 75%), 0 0 8px fade(@focusColor, 60%); cursor: auto; &[disabled] { background: transparent; - border-color: #fff; + border-color: @true-white; cursor: not-allowed; } } diff --git a/less/preloader.less b/less/preloader.less index 745d97770..4b014e379 100644 --- a/less/preloader.less +++ b/less/preloader.less @@ -163,7 +163,7 @@ width: 64px; &.iefix span, &:before, b, i { - #fuelux > .icon-base-styles(); + .iconBaseStyles(); } &:before { diff --git a/less/radio-no-js.less b/less/radio-no-js.less index 6be7b37eb..7f791bb06 100644 --- a/less/radio-no-js.less +++ b/less/radio-no-js.less @@ -16,14 +16,14 @@ & ~ label { &:before { - background: #39b3d7; /* Old browsers */ - background: -moz-radial-gradient(center, ellipse cover, #ffffff 0%, #ffffff 40%, #39b3d7 41%, #39b3d7 100%); /* FF3.6+ */ - background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#ffffff), color-stop(40%,#ffffff), color-stop(41%,#39b3d7), color-stop(100%,#39b3d7)); /* Chrome,Safari4+ */ - background: -webkit-radial-gradient(center, ellipse cover, #ffffff 0%,#ffffff 40%,#39b3d7 41%,#39b3d7 100%); /* Chrome10+,Safari5.1+ */ - background: -o-radial-gradient(center, ellipse cover, #ffffff 0%,#ffffff 40%,#39b3d7 41%,#39b3d7 100%); /* Opera 12+ */ - background: -ms-radial-gradient(center, ellipse cover, #ffffff 0%,#ffffff 40%,#39b3d7 41%,#39b3d7 100%); /* IE10+ */ - background: radial-gradient(ellipse at center, #ffffff 0%,#ffffff 40%,#39b3d7 41%,#39b3d7 100%); /* W3C */ - filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#39b3d7',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */ + background: @checkboxPrimaryColor; /* Old browsers */ + background: -moz-radial-gradient(center, ellipse cover, @true-white 0%, @true-white 40%, @checkboxPrimaryColor 41%, @checkboxPrimaryColor 100%); /* FF3.6+ */ + background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,@true-white), color-stop(40%,@true-white), color-stop(41%,@checkboxPrimaryColor), color-stop(100%,@checkboxPrimaryColor)); /* Chrome,Safari4+ */ + background: -webkit-radial-gradient(center, ellipse cover, @true-white 0%, @true-white 40%, @checkboxPrimaryColor 41%, @checkboxPrimaryColor 100%); /* Chrome10+,Safari5.1+ */ + background: -o-radial-gradient(center, ellipse cover, @true-white 0%, @true-white 40%, @checkboxPrimaryColor 41%, @checkboxPrimaryColor 100%); /* Opera 12+ */ + background: -ms-radial-gradient(center, ellipse cover, @true-white 0%, @true-white 40%, @checkboxPrimaryColor 41%, @checkboxPrimaryColor 100%); /* IE10+ */ + background: radial-gradient(ellipse at center, @true-white 0%, @true-white 40%, @checkboxPrimaryColor 41%, @checkboxPrimaryColor 100%); /* W3C */ + filter: ~"progid:DXImageTransform.Microsoft.gradient(startColorstr='@{true-white}', endColorstr='@{checkboxPrimaryColor}', GradientType=1)"; /* IE6-9 fallback on horizontal gradient */ } } } diff --git a/less/radio.less b/less/radio.less index 1b11642cd..198e4c18f 100644 --- a/less/radio.less +++ b/less/radio.less @@ -4,7 +4,7 @@ input[type="radio"]:focus + .radio-label, input[type="radio"]:hover + .radio-label, .radio-label:hover { - color: @grayLight; + color: @gray60; } } @@ -32,7 +32,7 @@ } &.checked label.radio-custom, & label.radio-custom.checked { - background: #e9e9e9; + background: @gray90; border-radius: @baseBorderRadius; } } @@ -41,7 +41,7 @@ input[type="radio"]:focus + .radio-label, input[type="radio"]:hover + .radio-label, .radio-label:hover { - color: @grayLight; + color: @gray60; } } .form-horizontal .radio-inline { @@ -65,7 +65,7 @@ margin: 0 0 5px 0; &.checked { - background: #e9e9e9; + background: @gray90; border-radius: @baseBorderRadius; } } @@ -80,7 +80,7 @@ width: 6px; } &:before { - border: 1px solid #adadad; + border: 1px solid @gray67; border-radius: 14px; content: " "; height: 14px; @@ -91,23 +91,22 @@ } &.checked { &:after { - background: #fff; + background: @true-white; } &:before { - background: #39b3d7; - border-color: #39b3d7; + background: @checkboxPrimaryColor; + border-color: @checkboxPrimaryColor; } } &.disabled { cursor: not-allowed; - opacity: .65; &:after { cursor: not-allowed; } &:before { cursor: not-allowed; - opacity: .65; + opacity: .5; } } &.radio-inline { @@ -133,7 +132,7 @@ top: 7px; } &.checked { - background: #e9e9e9; + background: @gray90; border-radius: @baseBorderRadius; } } @@ -141,7 +140,7 @@ /* for keyboard tabbing */ input[type="radio"]:focus + .radio-label { - color: @grayLight; + color: @gray60; } } diff --git a/less/repeater-list.less b/less/repeater-list.less index ef612ef20..e95a623a7 100755 --- a/less/repeater-list.less +++ b/less/repeater-list.less @@ -27,8 +27,8 @@ tbody { td { - border-bottom: 1px solid #ddd; - border-left: 1px solid #ddd; + border-bottom: 1px solid @gray87; + border-left: 1px solid @gray87; border-top: none; &:first-child { @@ -36,13 +36,13 @@ } &.sorted { - background: #f9f9f9; + background: @gray98; } } tr { &:focus { - outline: 1px dotted #d7d7d7; + outline: 1px dotted @gray87; } &.empty { @@ -70,7 +70,7 @@ td { background: @selected; - color: #333; + color: @gray20; &:first-child { padding-left: 30px; @@ -81,15 +81,15 @@ } thead > tr > th { - background: #F9F9F9; - border-bottom: 1px solid #ddd; + background: @gray98; + border-bottom: 1px solid @gray87; border-left: 1px solid transparent; border-top: none; - color: rgba(0, 0, 0, 0); + color: @true-black; line-height: 1.42857; padding: 8px; - #fuelux > .no-selection-allowed(); + .noSelectionAllowed(); &:first-child { border-left: none; @@ -97,9 +97,9 @@ &.sortable { &:hover, &.sorted { - background: #F1F1F1; + background: @selectableHover; cursor: pointer; - #fuelux > .vertical(@startColor: #F9F9F9; @endColor: #E5E5E5); + #gradient > .vertical(@startColor: @gray98; @endColor: @gray90); } } @@ -138,11 +138,11 @@ } &-heading { - background: #F9F9F9; - border-bottom: 1px solid #ddd; - border-left: 1px solid #ddd; + background: @gray98; + border-bottom: 1px solid @gray87; + border-left: 1px solid @gray87; border-top: none; - color: #333; + color: @gray20; line-height: 1.42857; margin-left: -9px; padding: 8px; @@ -150,7 +150,7 @@ top: 0; z-index: 1; - #fuelux > .no-selection-allowed(); + .noSelectionAllowed(); &.shifted { margin-left: -1px; @@ -163,9 +163,9 @@ &.sortable { &:hover, &.sorted { - background: #F1F1F1; + background: @gray96; cursor: pointer; - #fuelux > .vertical(@startColor: #F9F9F9; @endColor: #E5E5E5); + #gradient > .vertical(@startColor: @gray98; @endColor: @gray90); } &.sorted { @@ -209,10 +209,10 @@ table-layout: fixed; word-wrap: break-word; - &.table-frozen { - border-right: 1px solid #ddd; + &.table-frozen{ + border-right: 1px solid @gray87; z-index: 2; - background: #ffffff; + background: @true-white; border-collapse: collapse; table-layout: fixed; float: left; @@ -221,7 +221,7 @@ word-wrap: break-word; } .repeater-frozen-heading { - background: #F9F9F9; + background: @gray98; &.shifted { left: -1px; } @@ -246,14 +246,14 @@ word-wrap: break-word; &.table-actions { - border-left: 1px solid #ddd; + border-left: 1px solid @gray87; z-index: 2; border-collapse: collapse; table-layout: fixed; float: right; tr { - border-left: 1px solid #ddd; - background: #ffffff; + border-left: 1px solid @gray87; + background: @true-white; &.empty-heading { background: transparent; border-left: 1px solid transparent; @@ -269,11 +269,11 @@ padding-bottom: 6px; } th { - border-bottom: 1px solid #ddd; + border-bottom: 1px solid @gray87; padding-bottom: 8px; .repeater-list-heading { padding: 8px 0 7px; - border-left: 1px solid #F9F9F9; + border-left: 1px solid @gray98; margin-left: -1px; width: 100%; } @@ -326,11 +326,11 @@ .actions-column-wrapper { table { &.table-actions { - background-color: #ffffff; + background-color: @true-white; tr { background-color: transparent; &.empty-heading { - border-left: 1px solid #F9F9F9; + border-left: 1px solid @gray98; } th { padding-bottom: 8px; diff --git a/less/repeater-thumbnail.less b/less/repeater-thumbnail.less index df20dfadb..dce6e3fac 100755 --- a/less/repeater-thumbnail.less +++ b/less/repeater-thumbnail.less @@ -1,8 +1,8 @@ .fuelux { .repeater-thumbnail { - border: 1px solid #ddd; - color: #666; + border: 1px solid @gray87; + color: @gray40; float: left; font-size: 14px; min-height: 110px; diff --git a/less/repeater.less b/less/repeater.less index 1410a2e43..52576ac18 100755 --- a/less/repeater.less +++ b/less/repeater.less @@ -1,7 +1,7 @@ .fuelux { .repeater { - border: 1px solid #ddd; + border: 1px solid @gray87; border-radius: 4px; &-canvas { @@ -18,7 +18,7 @@ &-header, &-footer { - background: #f9f9f9; + background: @gray98; min-height: 50px; padding: 8px; .clearfix; @@ -45,13 +45,13 @@ } &-header { - border-bottom: 1px solid #ddd; - #fuelux.border-top-radius(4px); + border-bottom: 1px solid @gray87; + .border-top-radius(4px); } &-footer { - border-top: 1px solid #ddd; - #fuelux.border-bottom-radius(4px); + border-top: 1px solid @gray87; + .border-bottom-radius(4px); } &-loader { diff --git a/less/scheduler.less b/less/scheduler.less index c01167465..4eac408f0 100644 --- a/less/scheduler.less +++ b/less/scheduler.less @@ -187,7 +187,7 @@ .repeat-weekly { button:not(.active) { - background-color: #fff; + background-color: @true-white; } .btn-group { diff --git a/less/selectlist.less b/less/selectlist.less index 6d9c89643..c18c7ee97 100644 --- a/less/selectlist.less +++ b/less/selectlist.less @@ -24,7 +24,7 @@ padding-right: unit((2 * @selectlist-horizontal-padding + @selectlist-caret-width), px); .caret { - #fuelux > .vertical-align(); + .vertical-align(); right: @selectlist-horizontal-padding; } diff --git a/less/tree.less b/less/tree.less index 64b95f59d..bad01a18e 100644 --- a/less/tree.less +++ b/less/tree.less @@ -1,7 +1,7 @@ .fuelux { .tree { - border: 1px solid @grayLight; + border: 1px solid @gray60; border-radius: 4px 4px 4px 4px; padding: 10px 15px 0 15px; overflow-x: auto; @@ -116,7 +116,7 @@ &.tree-selected .tree-item-name { background-color: @treeSelectBackground; - color: #333; + color: @gray20; } label { diff --git a/less/utility.less b/less/utility.less index a87fd6557..c6890f9b2 100644 --- a/less/utility.less +++ b/less/utility.less @@ -198,13 +198,13 @@ // Helpers // ------------------------- .data-label { - #fuelux > .data-label(); + .data-label(); } .data-value { - #fuelux > .data-value(); + .data-value(); } .section-heading { - #fuelux > .section-heading(); + .section-heading(); } } \ No newline at end of file diff --git a/less/variables.less b/less/variables.less index 8136fad29..8049a0fc2 100644 --- a/less/variables.less +++ b/less/variables.less @@ -6,15 +6,40 @@ // Global values // -------------------------------------------------- +@true-black: #000; +@true-white: #FFF; + // Grays // ------------------------- -@black: #000; -@grayDarker: #222; -@grayDark: #333; -@gray: #555; -@grayLight: #999; -@grayLighter: #eee; -@white: #fff; +@gray07: lighten(@true-black, 7%); // #111 +@gray13: lighten(@true-black, 13.5%); // #222 +@gray15: lighten(@true-black, 15%); // #252525 +@gray20: lighten(@true-black, 20%); // #333 +@gray27: lighten(@true-black, 27%); // #444 +@gray33: lighten(@true-black, 33.5%); // #555 +@gray40: lighten(@true-black, 40%); // #666 +@gray46: lighten(@true-black, 46%); // #757575 +//@gray47: lighten(@true-black, 46.7%); // #777 +@gray53: lighten(@true-black, 53%); // #888 +@gray60: lighten(@true-black, 60%); // #999 +@gray67: lighten(@true-black, 66.5%); // #AAA +@gray74: lighten(@true-black, 73.5%); // #BBB +//@gray75: lighten(@true-black, 75%); // #4b4b4b +@gray80: lighten(@true-black, 80%); // #CCC +@gray87: lighten(@true-black, 86.5%); // #DDD +@gray90: lighten(@true-black, 90%); // #E5E5E5 +@gray93: lighten(@true-black, 93.5%); // #EEE +@gray96: lighten(@true-black, 96%); // #F5F5F5 +@gray98: lighten(@true-black, 98%); // #f9f9f9 +@gray99: lighten(@true-black, 99%); // #FCFCFC + +@black: @true-black; +@grayDarker: @gray13; +@grayDark: @gray20; +@gray: @gray33; +@grayLight: @gray60; +@grayLighter: @gray93; +@white: @true-white; // Accent colors @@ -35,19 +60,19 @@ @text-info: #31708f; @text-warning: #8a6d3b; @text-danger: #a94442; -@text-dimmed: #666666; -@text-muted: #999999; +@text-dimmed: @gray40; +@text-muted: @gray60; // Scaffolding // ------------------------- @bodyBackground: @white; @textColor: @grayDark; -@text-color: @textColor; - +@text-color: @textColor; +@focusColor: #5B9DD9; // Links // ------------------------- -@linkColor: #08c; +@linkColor: #0088cc; @linkColorHover: darken(@linkColor, 15%); @@ -94,15 +119,15 @@ // Tables // ------------------------- @tableBackground: transparent; // overall background-color -@tableBackgroundAccent: #f9f9f9; // for striping -@tableBackgroundHover: #f5f5f5; // for hover -@tableBorder: #ddd; // table and cell border +@tableBackgroundAccent: @gray98; // for striping +@tableBackgroundHover: @gray96; // for hover +@tableBorder: @gray87; // table and cell border // Buttons // ------------------------- @btnBackground: @white; @btnBackgroundHighlight: darken(@white, 10%); -@btnBorder: #ccc; +@btnBorder: @gray80; @btnPrimaryBackground: @linkColor; @btnPrimaryBackgroundHighlight: spin(@btnPrimaryBackground, 20%); @@ -119,7 +144,7 @@ @btnDangerBackground: #ee5f5b; @btnDangerBackgroundHighlight: #bd362f; -@btnInverseBackground: #444; +@btnInverseBackground: @gray27; @btnInverseBackgroundHighlight: @grayDarker; @btnPaddingVertical: 6px; @@ -129,10 +154,10 @@ // Forms // ------------------------- @inputBackground: @white; -@inputBorder: #ccc; +@inputBorder: @gray80; @inputBorderRadius: @baseBorderRadius; -@inputDisabledBackground: @grayLighter; -@formActionsBackground: #f5f5f5; +@inputDisabledBackground: @gray93; +@formActionsBackground: @gray96; @inputHeight: @baseLineHeight + 10px; // base line-height + 8px vertical padding + 2px top/bottom border @@ -140,7 +165,7 @@ // ------------------------- @dropdownBackground: @white; @dropdownBorder: rgba(0,0,0,.2); -@dropdownDividerTop: #e5e5e5; +@dropdownDividerTop: @gray90; @dropdownDividerBottom: @white; @dropdownLinkColor: @grayDark; @@ -171,7 +196,7 @@ // ------------------------- @selectableHover: #f1f1f1; @selected: #efefef; -@selectedHover: #d7d7d7; +@selectedHover: @gray87; @@ -183,12 +208,12 @@ // Input placeholder text color // ------------------------- -@placeholderText: @grayLight; +@placeholderText: @gray60; // Hr border color // ------------------------- -@hrBorder: @grayLighter; +@hrBorder: @gray93; // Horizontal forms & lists @@ -198,7 +223,7 @@ // Wells // ------------------------- -@wellBackground: #f5f5f5; +@wellBackground: @gray96; // Navbar @@ -207,12 +232,12 @@ @navbarCollapseDesktopWidth: @navbarCollapseWidth + 1; @navbarHeight: 40px; -@navbarBackgroundHighlight: #ffffff; +@navbarBackgroundHighlight: @true-white; @navbarBackground: darken(@navbarBackgroundHighlight, 5%); @navbarBorder: darken(@navbarBackground, 12%); -@navbarText: #777; -@navbarLinkColor: #777; +@navbarText: @gray40;; +@navbarLinkColor: @gray40;; @navbarLinkColorHover: @grayDark; @navbarLinkColorActive: @gray; @navbarLinkBackgroundHover: transparent; @@ -221,12 +246,12 @@ @navbarBrandColor: @navbarLinkColor; // Inverted navbar -@navbarInverseBackground: #111111; -@navbarInverseBackgroundHighlight: #222222; -@navbarInverseBorder: #252525; +@navbarInverseBackground: @gray07; +@navbarInverseBackgroundHighlight: @gray13; +@navbarInverseBorder: @gray15; -@navbarInverseText: @grayLight; -@navbarInverseLinkColor: @grayLight; +@navbarInverseText: @gray60; +@navbarInverseLinkColor: @gray60; @navbarInverseLinkColorHover: @white; @navbarInverseLinkColorActive: @navbarInverseLinkColorHover; @navbarInverseLinkBackgroundHover: transparent; @@ -235,21 +260,21 @@ @navbarInverseSearchBackground: lighten(@navbarInverseBackground, 25%); @navbarInverseSearchBackgroundFocus: @white; @navbarInverseSearchBorder: @navbarInverseBackground; -@navbarInverseSearchPlaceholderColor: #ccc; +@navbarInverseSearchPlaceholderColor: @gray80; @navbarInverseBrandColor: @navbarInverseLinkColor; // Pagination // ------------------------- -@paginationBackground: #fff; -@paginationBorder: #ddd; -@paginationActiveBackground: #f5f5f5; +@paginationBackground: @true-white; +@paginationBorder: @gray87; +@paginationActiveBackground: @gray96; // Hero unit // ------------------------- -@heroUnitBackground: @grayLighter; +@heroUnitBackground: @gray93; @heroUnitHeadingColor: inherit; @heroUnitLeadColor: inherit; @@ -275,14 +300,14 @@ // Tooltips and popovers // ------------------------- -@tooltipColor: #fff; -@tooltipBackground: #000; +@tooltipColor: @true-white; +@tooltipBackground: @true-black; @tooltipArrowWidth: 5px; @tooltipArrowColor: @tooltipBackground; -@popoverBackground: #fff; +@popoverBackground: @true-white; @popoverArrowWidth: 10px; -@popoverArrowColor: #fff; +@popoverArrowColor: @true-white; @popoverTitleBackground: darken(@popoverBackground, 3%); // Special enhancement for popovers @@ -327,16 +352,31 @@ @fluidGridGutterWidth768: percentage(@gridGutterWidth768/@gridRowWidth768); -// Tree +// Controls // -------------------------------------------------- -@treeHoverText: @grayLight; + +// Checkbox +// ------------------------- +@checkboxPrimaryColor: #39b3d7; + +// Datepicker +// ------------------------- +@datepickerHover: #0f5f9f; +@datepickerHoverAlt: #1b75bb; + +// Tree +// ------------------------- +@treeHoverText: @gray60; @treeSelectBackground: @selected; // Icons -// -------------------------------------------------- +// ------------------------- @fueluxFontPath: "../fonts/"; + + +// -------------------------------------------------- // Padding / Margin // -------------------------------------------------- @padding-xs: 5px; diff --git a/less/wizard.less b/less/wizard.less index e6643eb7e..4d3be571d 100644 --- a/less/wizard.less +++ b/less/wizard.less @@ -6,7 +6,6 @@ border: 1px solid @navbarBorder; border-radius: @baseBorderRadius; - box-shadow: 0 1px 4px rgba(0,0,0,.065); background-color: @tableBackgroundAccent; position: relative; min-height: 48px; @@ -33,12 +32,12 @@ cursor: default; &:hover { - background: #f3f4f5; + background: @gray96; color: @successText; cursor: default; .chevron:before { - border-left-color: #f3f4f5; + border-left-color: @gray96; } } } @@ -52,8 +51,8 @@ height: 46px; line-height: 46px; position: relative; - background: #ededed; - color: @grayLight; + background: @gray93; + color: @gray60; font-size: 16px; cursor: not-allowed; @@ -70,7 +69,7 @@ .chevron:before { border: 24px solid transparent; - border-left: 14px solid #ededed; + border-left: 14px solid @gray93; border-right: 0; content: ""; display: block; @@ -80,30 +79,30 @@ } &.complete { - background: #f3f4f5; + background: @gray96; color: @successText; &:hover { - background: #e7eff8; + background: desaturate(@infoBackground, 40%); cursor: pointer; .chevron:before { - border-left: 14px solid #e7eff8; + border-left: 14px solid desaturate(@infoBackground, 40%); } } .chevron:before { - border-left: 14px solid #f3f4f5; + border-left: 14px solid @gray96; } } &.active { - background: #f1f6fc; + background: lighten(@infoBackground, 5%); color: @infoText; cursor: default; .chevron:before { - border-left: 14px solid #f1f6fc; + border-left: 14px solid lighten(@infoBackground, 5%); } .badge { @@ -139,7 +138,7 @@ &.complete { &:hover { .chevron:before { - border-right-color: #f3f4f5; + border-right-color: @gray96; } } } @@ -152,14 +151,14 @@ .chevron { right: auto; left: -14px; - border-right: 14px solid #d4d4d4; + border-right: 14px solid @gray80; border-left: 0; &:before { right: auto; left: 1px; - border-right: 14px solid #ededed; + border-right: 14px solid @gray93; border-left: 0; } } @@ -167,7 +166,7 @@ &.active { .chevron { &:before { - border-right: 14px solid #f1f6fc; + border-right: 14px solid lighten(@infoBackground, 5%); } } } @@ -175,14 +174,14 @@ &.complete { .chevron { &:before { - border-right: 14px solid #f3f4f5; + border-right: 14px solid @gray96; } } &:hover { .chevron { &:before { - border-right: 14px solid #e7eff8; + border-right: 14px solid desaturate(@infoBackground, 40%); border-left: none; } } @@ -229,7 +228,7 @@ padding-left: 15px; padding-right: 15px; vertical-align: middle; - background-color: #e5e5e5; + background-color: @gray90; border-left: 1px solid @navbarBorder; border-radius: 0 @baseBorderRadius 0 0; @@ -261,7 +260,7 @@ } .step-content { - border-top: 1px solid #D4D4D4; + border-top: 1px solid @gray80; padding: 10px; float: left; width: 100%; From 8e23c04c6137f110a6f7b480e98060aeec1dcb03 Mon Sep 17 00:00:00 2001 From: Stephen James Date: Fri, 19 Jun 2015 14:28:56 -0400 Subject: [PATCH 2/5] REAPPLY: Namespace LESS mixins in order to play nice with others .vertical() becomes #fuelux > .vertical() Conflicts: less/checkbox.less less/mixins.less less/repeater-list.less --- less/checkbox.less | 4 +- less/icons.less | 4 +- less/loader.less | 2 +- less/mixins.less | 167 ++++++++++++++++++++-------------------- less/preloader.less | 2 +- less/repeater-list.less | 8 +- less/selectlist.less | 2 +- less/utility.less | 6 +- 8 files changed, 98 insertions(+), 97 deletions(-) diff --git a/less/checkbox.less b/less/checkbox.less index ba4e68bcf..686f759d7 100644 --- a/less/checkbox.less +++ b/less/checkbox.less @@ -51,7 +51,7 @@ position: relative; &:before { - .iconBaseStyles("Glyphicons Halflings"); + #fuelux > .iconBaseStyles("Glyphicons Halflings"); border: 1px solid @gray67; border-radius: @baseBorderRadius; color: @true-white; @@ -131,4 +131,4 @@ padding-left: 20px; } -} \ No newline at end of file +} diff --git a/less/icons.less b/less/icons.less index 05f3016a9..836a28644 100644 --- a/less/icons.less +++ b/less/icons.less @@ -11,7 +11,7 @@ //This could be an interesting addition... //[data-icon]:before { -// .iconBaseStyles(); +// #fuelux > .iconBaseStyles(); // content: attr(data-icon); //} @@ -19,7 +19,7 @@ [class^="fueluxicon-"]:before, [class*=" fueluxicon-"]:before { - .iconBaseStyles(); + #fuelux > .iconBaseStyles(); } .fueluxicon-loader-full:before { diff --git a/less/loader.less b/less/loader.less index 156eabf2c..840398bd3 100644 --- a/less/loader.less +++ b/less/loader.less @@ -7,7 +7,7 @@ width: 64px; &:after, &:before { - .iconBaseStyles(); + #fuelux > .iconBaseStyles(); bottom: 0; display: block; diff --git a/less/mixins.less b/less/mixins.less index 9f7456965..74217d9ab 100644 --- a/less/mixins.less +++ b/less/mixins.less @@ -14,35 +14,35 @@ } } -// Single side border-radius -.border-top-radius(@radius) { - border-top-right-radius: @radius; - border-top-left-radius: @radius; -} -.border-right-radius(@radius) { - border-bottom-right-radius: @radius; - border-top-right-radius: @radius; -} -.border-bottom-radius(@radius) { - border-bottom-right-radius: @radius; - border-bottom-left-radius: @radius; -} -.border-left-radius(@radius) { - border-bottom-left-radius: @radius; - border-top-left-radius: @radius; -} +#fuelux { + // Single side border-radius + .border-top-radius(@radius) { + border-top-right-radius: @radius; + border-top-left-radius: @radius; + } + .border-right-radius(@radius) { + border-bottom-right-radius: @radius; + border-top-right-radius: @radius; + } + .border-bottom-radius(@radius) { + border-bottom-right-radius: @radius; + border-bottom-left-radius: @radius; + } + .border-left-radius(@radius) { + border-bottom-left-radius: @radius; + border-top-left-radius: @radius; + } -// Gradient Bar Colors for buttons and alerts -.gradientBar(@primaryColor, @secondaryColor, @textColor: #fff, @textShadow: 0 -1px 0 rgba(0,0,0,.25)) { - color: @textColor; - text-shadow: @textShadow; - #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%); -} + // Gradient Bar Colors for buttons and alerts + .gradientBar(@primaryColor, @secondaryColor, @textColor: #fff, @textShadow: 0 -1px 0 rgba(0,0,0,.25)) { + color: @textColor; + text-shadow: @textShadow; + #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 { + // Gradients .vertical(@startColor: @gray33, @endColor: @gray20) { background-color: mix(@startColor, @endColor, 60%); background-image: -moz-linear-gradient(top, @startColor, @endColor); // FF 3.6+ @@ -53,68 +53,69 @@ background-repeat: repeat-x; filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(@startColor),argb(@endColor))); // IE9 and down } -} -// Icon Base Styles -.iconBaseStyles(@fontFamily: "fuelux"){ - font-family: @fontFamily !important; - font-style: normal !important; - font-weight: normal !important; - font-variant: normal !important; - text-transform: none !important; - line-height: 1; - speak: none; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} + // Icon Base Styles + .iconBaseStyles(@fontFamily: "fuelux"){ + font-family: @fontFamily !important; + font-style: normal !important; + font-weight: normal !important; + font-variant: normal !important; + text-transform: none !important; + line-height: 1; + speak: none; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + } -// Disables selection of text -.noSelectionAllowed(){ - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - -o-user-select: none; - user-select: none; -} + // Disables selection of text + .noSelectionAllowed(){ + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + -o-user-select: none; + user-select: none; + } -// Opacity -.opacity(@opacity) { - opacity: @opacity / 100; - filter: ~"alpha(opacity=@{opacity})"; -} + // Opacity + .opacity(@opacity) { + opacity: @opacity / 100; + filter: ~"alpha(opacity=@{opacity})"; + } -// Helpers -// ------------------------- -.data-label() { - text-transform: uppercase; - font-size: 10px; - margin-bottom: 2px; - text-shadow: 0 1px @true-white; - color: @gray40; -} + // Helpers + // ------------------------- + .data-label() { + text-transform: uppercase; + font-size: 10px; + margin-bottom: 2px; + text-shadow: 0 1px @true-white; + color: @gray40; + } -.data-value() { - font-size: 14px; -} + .data-value() { + font-size: 14px; + } -.section-heading() { - font-size: 16px; - color: @gray20; - margin: 0 0 10px; - padding: 0; - text-shadow: 0 1px @true-white; -} + .section-heading() { + font-size: 16px; + color: @gray20; + margin: 0 0 10px; + padding: 0; + text-shadow: 0 1px @true-white; + } -.text-emphasis-variant(@color) { - color: @color; - a&:hover { - color: darken(@color, 10%); + .text-emphasis-variant(@color) { + color: @color; + &:hover { + color: darken(@color, 10%); + } } -} -.vertical-align() { - margin: auto; - position: absolute; - top: 0; - bottom: 0; -} \ No newline at end of file + .vertical-align() { + margin: auto; + position: absolute; + top: 0; + bottom: 0; + } + +} diff --git a/less/preloader.less b/less/preloader.less index 4b014e379..877e1589d 100644 --- a/less/preloader.less +++ b/less/preloader.less @@ -163,7 +163,7 @@ width: 64px; &.iefix span, &:before, b, i { - .iconBaseStyles(); + #fuelux > .iconBaseStyles(); } &:before { diff --git a/less/repeater-list.less b/less/repeater-list.less index e95a623a7..b54cd3eb4 100755 --- a/less/repeater-list.less +++ b/less/repeater-list.less @@ -89,7 +89,7 @@ line-height: 1.42857; padding: 8px; - .noSelectionAllowed(); + #fuelux > .noSelectionAllowed(); &:first-child { border-left: none; @@ -99,7 +99,7 @@ &:hover, &.sorted { background: @selectableHover; cursor: pointer; - #gradient > .vertical(@startColor: @gray98; @endColor: @gray90); + #fuelux > #gradient > .vertical(@startColor: @gray98; @endColor: @gray90); } } @@ -150,7 +150,7 @@ top: 0; z-index: 1; - .noSelectionAllowed(); + #fuelux > .noSelectionAllowed(); &.shifted { margin-left: -1px; @@ -165,7 +165,7 @@ &:hover, &.sorted { background: @gray96; cursor: pointer; - #gradient > .vertical(@startColor: @gray98; @endColor: @gray90); + #fuelux > #gradient > .vertical(@startColor: @gray98; @endColor: @gray90); } &.sorted { diff --git a/less/selectlist.less b/less/selectlist.less index c18c7ee97..6d9c89643 100644 --- a/less/selectlist.less +++ b/less/selectlist.less @@ -24,7 +24,7 @@ padding-right: unit((2 * @selectlist-horizontal-padding + @selectlist-caret-width), px); .caret { - .vertical-align(); + #fuelux > .vertical-align(); right: @selectlist-horizontal-padding; } diff --git a/less/utility.less b/less/utility.less index c6890f9b2..a87fd6557 100644 --- a/less/utility.less +++ b/less/utility.less @@ -198,13 +198,13 @@ // Helpers // ------------------------- .data-label { - .data-label(); + #fuelux > .data-label(); } .data-value { - .data-value(); + #fuelux > .data-value(); } .section-heading { - .section-heading(); + #fuelux > .section-heading(); } } \ No newline at end of file From ef95e7626e1d20f97c5ea94f978dbd4dced4d27f Mon Sep 17 00:00:00 2001 From: Stephen James Date: Thu, 9 Jul 2015 14:53:38 -0400 Subject: [PATCH 3/5] Adding in name space to color variables rework --- less/checkbox.less | 2 +- less/icons.less | 2 +- less/loader.less | 2 +- less/mixins.less | 6 +++--- less/preloader.less | 2 +- less/repeater-list.less | 8 ++++---- less/repeater.less | 4 ++-- 7 files changed, 13 insertions(+), 13 deletions(-) diff --git a/less/checkbox.less b/less/checkbox.less index 686f759d7..484019bf2 100644 --- a/less/checkbox.less +++ b/less/checkbox.less @@ -51,7 +51,7 @@ position: relative; &:before { - #fuelux > .iconBaseStyles("Glyphicons Halflings"); + #fuelux > .icon-base-styles("Glyphicons Halflings"); border: 1px solid @gray67; border-radius: @baseBorderRadius; color: @true-white; diff --git a/less/icons.less b/less/icons.less index 836a28644..066adaa8c 100644 --- a/less/icons.less +++ b/less/icons.less @@ -19,7 +19,7 @@ [class^="fueluxicon-"]:before, [class*=" fueluxicon-"]:before { - #fuelux > .iconBaseStyles(); + #fuelux > .icon-base-styles(); } .fueluxicon-loader-full:before { diff --git a/less/loader.less b/less/loader.less index 840398bd3..dae9b16ef 100644 --- a/less/loader.less +++ b/less/loader.less @@ -7,7 +7,7 @@ width: 64px; &:after, &:before { - #fuelux > .iconBaseStyles(); + #fuelux > .icon-base-styles(); bottom: 0; display: block; diff --git a/less/mixins.less b/less/mixins.less index 74217d9ab..95d8c0275 100644 --- a/less/mixins.less +++ b/less/mixins.less @@ -34,7 +34,7 @@ } // Gradient Bar Colors for buttons and alerts - .gradientBar(@primaryColor, @secondaryColor, @textColor: #fff, @textShadow: 0 -1px 0 rgba(0,0,0,.25)) { + .gradient-bar(@primaryColor, @secondaryColor, @textColor: #fff, @textShadow: 0 -1px 0 rgba(0,0,0,.25)) { color: @textColor; text-shadow: @textShadow; #gradient > .vertical(@primaryColor, @secondaryColor); @@ -55,7 +55,7 @@ } // Icon Base Styles - .iconBaseStyles(@fontFamily: "fuelux"){ + .icon-base-styles(@fontFamily: "fuelux"){ font-family: @fontFamily !important; font-style: normal !important; font-weight: normal !important; @@ -68,7 +68,7 @@ } // Disables selection of text - .noSelectionAllowed(){ + .no-selection-allowed(){ -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; diff --git a/less/preloader.less b/less/preloader.less index 877e1589d..745d97770 100644 --- a/less/preloader.less +++ b/less/preloader.less @@ -163,7 +163,7 @@ width: 64px; &.iefix span, &:before, b, i { - #fuelux > .iconBaseStyles(); + #fuelux > .icon-base-styles(); } &:before { diff --git a/less/repeater-list.less b/less/repeater-list.less index b54cd3eb4..3ef5f9419 100755 --- a/less/repeater-list.less +++ b/less/repeater-list.less @@ -89,7 +89,7 @@ line-height: 1.42857; padding: 8px; - #fuelux > .noSelectionAllowed(); + #fuelux > .no-selection-allowed(); &:first-child { border-left: none; @@ -99,7 +99,7 @@ &:hover, &.sorted { background: @selectableHover; cursor: pointer; - #fuelux > #gradient > .vertical(@startColor: @gray98; @endColor: @gray90); + #fuelux > .vertical(@startColor: @gray98; @endColor: @gray90); } } @@ -150,7 +150,7 @@ top: 0; z-index: 1; - #fuelux > .noSelectionAllowed(); + #fuelux > .no-selection-allowed(); &.shifted { margin-left: -1px; @@ -165,7 +165,7 @@ &:hover, &.sorted { background: @gray96; cursor: pointer; - #fuelux > #gradient > .vertical(@startColor: @gray98; @endColor: @gray90); + #fuelux > .vertical(@startColor: @gray98; @endColor: @gray90); } &.sorted { diff --git a/less/repeater.less b/less/repeater.less index 52576ac18..624b641ea 100755 --- a/less/repeater.less +++ b/less/repeater.less @@ -46,12 +46,12 @@ &-header { border-bottom: 1px solid @gray87; - .border-top-radius(4px); + #fuelux > .border-top-radius(4px); } &-footer { border-top: 1px solid @gray87; - .border-bottom-radius(4px); + #fuelux > .border-bottom-radius(4px); } &-loader { From 6696715fa0d5e132a704b6be744977f6d979558d Mon Sep 17 00:00:00 2001 From: Stephen James Date: Fri, 10 Jul 2015 13:57:04 -0400 Subject: [PATCH 4/5] Bring in LESS updates from previous opacity PR #1360 --- less/checkbox.less | 3 ++- less/forms.less | 2 +- less/icons.less | 2 +- less/radio.less | 3 ++- less/repeater-list.less | 2 +- 5 files changed, 7 insertions(+), 5 deletions(-) diff --git a/less/checkbox.less b/less/checkbox.less index 484019bf2..5032d2691 100644 --- a/less/checkbox.less +++ b/less/checkbox.less @@ -89,11 +89,12 @@ &.disabled { cursor: not-allowed; + opacity: .65; &:before { cursor: not-allowed; - opacity: .5; + opacity: .65; } } diff --git a/less/forms.less b/less/forms.less index f7faf0ceb..a1d47f27e 100644 --- a/less/forms.less +++ b/less/forms.less @@ -124,7 +124,7 @@ &[disabled="disabled"], &[disabled], &:disabled { & ~ label, & ~ label:before { color: @text-color; - opacity: 0.5 !important; + opacity: .65; cursor: not-allowed !important; outline: none; box-shadow: none; diff --git a/less/icons.less b/less/icons.less index 066adaa8c..88ddc96d9 100644 --- a/less/icons.less +++ b/less/icons.less @@ -11,7 +11,7 @@ //This could be an interesting addition... //[data-icon]:before { -// #fuelux > .iconBaseStyles(); +// #fuelux > .icon-base-styles(); // content: attr(data-icon); //} diff --git a/less/radio.less b/less/radio.less index 198e4c18f..c266168db 100644 --- a/less/radio.less +++ b/less/radio.less @@ -100,13 +100,14 @@ } &.disabled { cursor: not-allowed; + opacity: .65; &:after { cursor: not-allowed; } &:before { cursor: not-allowed; - opacity: .5; + opacity: .65; } } &.radio-inline { diff --git a/less/repeater-list.less b/less/repeater-list.less index 3ef5f9419..5575776b9 100755 --- a/less/repeater-list.less +++ b/less/repeater-list.less @@ -85,7 +85,7 @@ border-bottom: 1px solid @gray87; border-left: 1px solid transparent; border-top: none; - color: @true-black; + color: fade(@true-black, 0); // transparent line-height: 1.42857; padding: 8px; From 6714e420b9c9e32a7b3b4d1772252b37b5587078 Mon Sep 17 00:00:00 2001 From: Stephen James Date: Fri, 10 Jul 2015 19:02:25 -0400 Subject: [PATCH 5/5] Add browserify:commonjs build to grunt releasetest --- Gruntfile.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/Gruntfile.js b/Gruntfile.js index 30603faf5..ca912641d 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -817,7 +817,7 @@ module.exports = function (grunt) { // multiple jQuery versions, then run SauceLabs VMs grunt.registerTask('releasetest', 'run jshint, build dist, all source tests, validation, and qunit on SauceLabs', - ['test', 'dist', 'qunit:dist', 'saucelabs-qunit:defaultBrowsers']); + ['test', 'dist', 'browserify:commonjs', 'qunit:dist', 'saucelabs-qunit:defaultBrowsers']); // can be run locally instead of through TravisCI, but requires the Fuel UX Saucelabs API key file which is not public at this time. grunt.registerTask('saucelabs', 'run jshint, and qunit on saucelabs', @@ -951,7 +951,7 @@ module.exports = function (grunt) { grunt.task.run(['connect:testServer']); if (grunt.option('test')) { - grunt.task.run(['qunit:dist', 'watch:full']); + grunt.task.run(['browserify:commonjs','qunit:dist', 'watch:full']); } else { grunt.task.run(['watch:dist']); }