From c2e37414d88180f2f7affe7655eddbb9468103c3 Mon Sep 17 00:00:00 2001 From: syed Date: Sat, 20 Jul 2013 12:56:20 +0500 Subject: [PATCH 1/3] Move inline properties to variables.less moved buttons.less, carousel.less & close.less in this commit --- less/buttons.less | 2 +- less/carousel.less | 14 +++++++------- less/close.less | 6 +++--- less/variables.less | 19 +++++++++++++++++++ 4 files changed, 30 insertions(+), 11 deletions(-) diff --git a/less/buttons.less b/less/buttons.less index 3cc7da00d1..ad3c7ac613 100644 --- a/less/buttons.less +++ b/less/buttons.less @@ -27,7 +27,7 @@ &:hover, &:focus { - color: #fff; + color: @btn-hover-color; text-decoration: none; } diff --git a/less/carousel.less b/less/carousel.less index 7d134ca629..d7dfdf9f66 100644 --- a/less/carousel.less +++ b/less/carousel.less @@ -72,9 +72,9 @@ width: 15%; .opacity(.5); font-size: 20px; - color: #fff; + color: @carousel-control-color; text-align: center; - text-shadow: 0 1px 2px rgba(0,0,0,.6); + text-shadow: @carousel-control-text-shadow; // We can't have this transition here because webkit cancels the carousel // animation if you trip this while in the middle of another animation. @@ -93,7 +93,7 @@ // Hover/focus state &:hover, &:focus { - color: #fff; + color: @carousel-control-hover-color; text-decoration: none; .opacity(.9); } @@ -144,7 +144,7 @@ height: 10px; margin: 1px; text-indent: -999px; - border: 1px solid #fff; + border: 1px solid @carousel-indicators-li-border-color; border-radius: 10px; cursor: pointer; } @@ -152,7 +152,7 @@ margin: 0; width: 12px; height: 12px; - background-color: #fff; + background-color: @carousel-indicators-active-bg; } } @@ -167,9 +167,9 @@ z-index: 10; padding-top: 20px; padding-bottom: 20px; - color: #fff; + color: @carousel-caption-color; text-align: center; - text-shadow: 0 1px 2px rgba(0,0,0,.6); + text-shadow: @carousel-caption-text-shadow; & .btn { text-shadow: none; // No shadow for button elements in carousel-caption } diff --git a/less/close.less b/less/close.less index 5fe23b3dc8..454a73fdcb 100644 --- a/less/close.less +++ b/less/close.less @@ -8,13 +8,13 @@ font-size: (@font-size-base * 1.5); font-weight: bold; line-height: 1; - color: #000; - text-shadow: 0 1px 0 rgba(255,255,255,1); + color: @close-color; + text-shadow: @close-text-shadow; .opacity(.2); &:hover, &:focus { - color: #000; + color: @close-hover-color; text-decoration: none; cursor: pointer; .opacity(.5); diff --git a/less/variables.less b/less/variables.less index 321590f538..ed5051df7f 100644 --- a/less/variables.less +++ b/less/variables.less @@ -117,6 +117,8 @@ @btn-info-bg: @brand-info; @btn-info-border: @btn-info-bg; +@btn-hover-color: #fff; + // Forms @@ -390,6 +392,23 @@ @breadcrumb-color: #ccc; @breadcrumb-active-color: @gray-light; +// Carousel +// ------------------------ +@carousel-control-color: #fff; +@carousel-control-hover-color: #fff; +@carousel-control-text-shadow: 0 1px 2px rgba(0,0,0,.6); + +@carousel-indicators-active-bg: #fff; +@carousel-indicators-li-border-color: #fff; + +@carousel-caption-color: #fff; +@carousel-caption-text-shadow: 0 1px 2px rgba(0,0,0,.6); + +// Close +// ------------------------ +@close-color: #000; +@close-hover-color: #000; +@close-text-shadow: 0 1px 0 rgba(255,255,255,1); // Miscellaneous // ------------------------- From 1683e6767a3e13585e67fb1d7e93aced83e8f8b2 Mon Sep 17 00:00:00 2001 From: syed Date: Sat, 20 Jul 2013 13:17:56 +0500 Subject: [PATCH 2/3] moving code and dropdowns to variables.less --- less/code.less | 10 +++++----- less/dropdowns.less | 6 +++--- less/variables.less | 19 ++++++++++++++++++- 3 files changed, 26 insertions(+), 9 deletions(-) diff --git a/less/code.less b/less/code.less index 8dd34670a8..d2aa39cc33 100644 --- a/less/code.less +++ b/less/code.less @@ -13,8 +13,8 @@ pre { code { padding: 2px 4px; font-size: 90%; - color: #c7254e; - background-color: #f9f2f4; + color: @code-color:; + background-color: @code-bg; white-space: nowrap; border-radius: 4px; } @@ -29,9 +29,9 @@ pre { word-break: break-all; word-wrap: break-word; color: @gray-dark; - background-color: #f5f5f5; - border: 1px solid #ccc; // IE8 fallback - border: 1px solid rgba(0,0,0,.15); + background-color: @pre-bg; + border: 1px solid @pre-fallback-border-color; // IE8 fallback + border: 1px solid @pre-border-color; border-radius: @border-radius-base; // Make prettyprint styles more spaced out for readability diff --git a/less/dropdowns.less b/less/dropdowns.less index 7e35d42871..1430435e4e 100644 --- a/less/dropdowns.less +++ b/less/dropdowns.less @@ -11,7 +11,7 @@ height: 0; margin-left: 2px; vertical-align: middle; - border-top: 4px solid #000; + border-top: 4px solid @caret-border-top-color; border-right: 4px solid transparent; border-left: 4px solid transparent; content: ""; @@ -31,7 +31,7 @@ margin: 2px 0 0; // override default ul list-style: none; background-color: @dropdown-bg; - border: 1px solid #ccc; // IE8 fallback + border: 1px solid @dropdown-fallback-border; // IE8 fallback border: 1px solid @dropdown-border; border-radius: @border-radius-base; .box-shadow(0 6px 12px rgba(0,0,0,.175)); @@ -159,7 +159,7 @@ // Reverse the caret .caret { border-top: 0; - border-bottom: 4px solid #000; + border-bottom: 4px solid @dropup-caret-border-color; content: ""; } // Different positioning for bottom up menu diff --git a/less/variables.less b/less/variables.less index ed5051df7f..c30c0232cc 100644 --- a/less/variables.less +++ b/less/variables.less @@ -120,7 +120,6 @@ @btn-hover-color: #fff; - // Forms // ------------------------- @@ -142,6 +141,7 @@ @dropdown-bg: #fff; @dropdown-border: rgba(0,0,0,.15); +@dropdown-fallback-border: #ccc; @dropdown-divider-top: #e5e5e5; @dropdown-divider-bottom: #fff; @@ -152,6 +152,10 @@ @dropdown-link-hover-color: #fff; @dropdown-link-hover-bg: @dropdown-link-active-bg; +@caret-border-top-color: #000; + +@dropup-caret-border-color: #000; + // COMPONENT VARIABLES // -------------------------------------------------- @@ -404,12 +408,25 @@ @carousel-caption-color: #fff; @carousel-caption-text-shadow: 0 1px 2px rgba(0,0,0,.6); + // Close // ------------------------ @close-color: #000; @close-hover-color: #000; @close-text-shadow: 0 1px 0 rgba(255,255,255,1); + +// Code +// ------------------------ +@code-bg: #f9f2f4; +@code-color: #c7254e; + + +@pre-bg: #f5f5f5; +@pre-border-color: rgba(0,0,0,.15); +@pre-fallback-border-color: #ccc; + + // Miscellaneous // ------------------------- From 330f40c8641a3f9bc4b4295c0d5d958108518d2e Mon Sep 17 00:00:00 2001 From: syed Date: Sat, 20 Jul 2013 13:38:27 +0500 Subject: [PATCH 3/3] moving forms, labels and list-group to variables.less --- less/forms.less | 6 +++--- less/labels.less | 4 ++-- less/list-group.less | 4 ++-- less/variables.less | 12 +++++++++++- 4 files changed, 18 insertions(+), 8 deletions(-) diff --git a/less/forms.less b/less/forms.less index bafe1cac6e..d5d4115710 100644 --- a/less/forms.less +++ b/less/forms.less @@ -25,7 +25,7 @@ legend { line-height: inherit; color: @gray-dark; border: 0; - border-bottom: 1px solid #e5e5e5; + border-bottom: 1px solid @legend-border-color; } label { @@ -354,9 +354,9 @@ select { font-weight: normal; line-height: @line-height-base; text-align: center; - text-shadow: 0 1px 0 #fff; + text-shadow: @input-group-addon-text-shadow; background-color: @gray-lighter; - border: 1px solid #ccc; + border: 1px solid @input-group-addon-border-color; border-radius: @border-radius-base; &.input-small { diff --git a/less/labels.less b/less/labels.less index d7852d1077..7ee7ee68a4 100644 --- a/less/labels.less +++ b/less/labels.less @@ -8,7 +8,7 @@ font-size: 75%; font-weight: 500; line-height: 1; - color: #fff; + color: @label-color; text-align: center; white-space: nowrap; vertical-align: middle; @@ -19,7 +19,7 @@ &[href] { &:hover, &:focus { - color: #fff; + color: @label-link-hover-color; text-decoration: none; cursor: pointer; background-color: darken(@gray-light, 10%); diff --git a/less/list-group.less b/less/list-group.less index 34718633ac..abfb957e11 100644 --- a/less/list-group.less +++ b/less/list-group.less @@ -58,10 +58,10 @@ a.list-group-item { // Colorize content accordingly .list-group-item-heading { - color: #333; + color: @link-list-group-heading-color; } .list-group-item-text { - color: #555; + color: @link-list-group-color; } // Hover state diff --git a/less/variables.less b/less/variables.less index c30c0232cc..438a276f91 100644 --- a/less/variables.less +++ b/less/variables.less @@ -135,6 +135,11 @@ @input-height-large: (ceil(@font-size-large * @line-height-base) + (@padding-large-vertical * 2) + 2); @input-height-small: (ceil(@font-size-small * @line-height-base) + (@padding-small-vertical * 2) + 2); +@legend-border-color: #e5e5e5; + +@input-group-addon-text-shadow: 0 1px 0 #fff; +@input-group-addon-border-color: #ccc; + // Dropdowns // ------------------------- @@ -284,6 +289,9 @@ @label-warning-bg: @brand-warning; @label-danger-bg: @brand-danger; +@label-color: #fff; +@label-link-hover-color: #fff; + // Modals // ------------------------- @@ -333,6 +341,9 @@ @list-group-active-bg: @component-active-bg; @list-group-active-border: @list-group-active-bg; +@link-list-group-color: #555; +@link-list-group-heading-color:#333; + // Panels // ------------------------- @panel-bg: #fff; @@ -421,7 +432,6 @@ @code-bg: #f9f2f4; @code-color: #c7254e; - @pre-bg: #f5f5f5; @pre-border-color: rgba(0,0,0,.15); @pre-fallback-border-color: #ccc;