From 39bb8146f863474eee6c7daa946ea07f6ce2aa04 Mon Sep 17 00:00:00 2001 From: Artur Kwiatkowski Date: Fri, 19 Apr 2013 21:31:55 +0200 Subject: more nested labels component --- less/labels.less | 100 ++++++++++++++++++++++++++++++++++++++++++------------- 1 file changed, 76 insertions(+), 24 deletions(-) (limited to 'less') diff --git a/less/labels.less b/less/labels.less index 436fd6ace..87e2cdf74 100644 --- a/less/labels.less +++ b/less/labels.less @@ -2,9 +2,10 @@ // Labels // -------------------------------------------------- +// LESS base -// Base classes -.label { +.label() { + display: inline; padding: .25em .6em; font-size: 75%; font-weight: 500; @@ -15,32 +16,83 @@ text-align: center; background-color: @grayLight; border-radius: .25em; -} -// Hover state, but only for links -a.label { - &:hover, - &:focus { - color: #fff; - text-decoration: none; - cursor: pointer; + //hover state, but only for links - as a mixin which will be accessible as LESS shorthand: .label > .a; + .a() { + &:hover, + &:focus { + color: #fff; + text-decoration: none; + cursor: pointer; + } + } + + // Colors + // Only give background-color difference to links (and to simplify, we don't qualifty with `a` but [href] attribute) + // Constructed as parametric mixin so it wont overproduce [href] by default - only for elements that will have arg link passed to local .is mixin + + .label-danger() { + background-color: @label-danger-bg; + .is(@arg) when (@arg = link) { + &[href] { + background-color: darken(@label-danger-bg, 10%); + } + } + } + + .label-warning() { + background-color: @label-warning-bg; + .is(@arg) when (@arg = link) { + &[href] { + background-color: darken(@label-warning-bg, 10%); + } + } + } + + .label-success() { + background-color: @label-success-bg; + .is(@arg) when (@arg = link) { + &[href] { + background-color: darken(@label-success-bg, 10%); + } + } + } + + .label-info() { + background-color: @label-info-bg; + .is(@arg) when (@arg = link) { + &[href] { + background-color: darken(@label-info-bg, 10%); + } + } } } -// Colors -// Only give background-color difference to links (and to simplify, we don't qualifty with `a` but [href] attribute) +// populate mixins for CSS .label { - // Danger (red) - &-danger { background-color: @label-danger-bg; } - &-danger[href] { background-color: darken(@label-danger-bg, 10%); } - // Warnings (orange) - &-warning { background-color: @label-warning-bg; } - &-warning[href] { background-color: darken(@label-warning-bg, 10%); } - // Success (green) - &-success { background-color: @label-success-bg; } - &-success[href] { background-color: darken(@label-success-bg, 10%); } - // Info (turquoise) - &-info { background-color: @label-info-bg; } - &-info[href] { background-color: darken(@label-info-bg, 10%); } + .label(); +} + +a.label { + .label > .a; +} + +.label-danger { + .label > .label-danger; + .label > .label-danger > .is(link); // will produce .label-danger[href] class for folks who like to use class in HTML +} + +.label-warning { + .label > .label-warning; + .label > .label-warning > .is(link); +} + +.label-success { + .label > .label-success; + .label > .label-success > .is(link); } +.label-info { + .label > .label-info; + .label > .label-info > .is(link); +} \ No newline at end of file -- cgit v1.2.3 From 3861e3f5d5c0a579b1a77dc0f45131dd2499ff8b Mon Sep 17 00:00:00 2001 From: Artur Kwiatkowski Date: Sat, 20 Apr 2013 15:54:48 +0200 Subject: replaced parametric .is() mixin with non-parametric .a() to simplify usage --- less/labels.less | 22 +++++++++++----------- 1 file changed, 11 insertions(+), 11 deletions(-) (limited to 'less') diff --git a/less/labels.less b/less/labels.less index 87e2cdf74..74018b1de 100644 --- a/less/labels.less +++ b/less/labels.less @@ -17,7 +17,7 @@ background-color: @grayLight; border-radius: .25em; - //hover state, but only for links - as a mixin which will be accessible as LESS shorthand: .label > .a; + // Hover state, but only for links - as a mixin which will be accessible as LESS shorthand: .label > .a; .a() { &:hover, &:focus { @@ -29,11 +29,11 @@ // Colors // Only give background-color difference to links (and to simplify, we don't qualifty with `a` but [href] attribute) - // Constructed as parametric mixin so it wont overproduce [href] by default - only for elements that will have arg link passed to local .is mixin - + // If there is a need for [href] then use local mixin a() via ex: .label-danger > .a; to attach additional CSS for [href] attr + .label-danger() { background-color: @label-danger-bg; - .is(@arg) when (@arg = link) { + .a() { &[href] { background-color: darken(@label-danger-bg, 10%); } @@ -42,7 +42,7 @@ .label-warning() { background-color: @label-warning-bg; - .is(@arg) when (@arg = link) { + .a() { &[href] { background-color: darken(@label-warning-bg, 10%); } @@ -51,7 +51,7 @@ .label-success() { background-color: @label-success-bg; - .is(@arg) when (@arg = link) { + .a() { &[href] { background-color: darken(@label-success-bg, 10%); } @@ -60,7 +60,7 @@ .label-info() { background-color: @label-info-bg; - .is(@arg) when (@arg = link) { + .a() { &[href] { background-color: darken(@label-info-bg, 10%); } @@ -79,20 +79,20 @@ a.label { .label-danger { .label > .label-danger; - .label > .label-danger > .is(link); // will produce .label-danger[href] class for folks who like to use class in HTML + .label > .label-danger > .a; // will produce .label-danger[href] class for folks who like to use class in HTML } .label-warning { .label > .label-warning; - .label > .label-warning > .is(link); + .label > .label-warning > .a; } .label-success { .label > .label-success; - .label > .label-success > .is(link); + .label > .label-success > .a; } .label-info { .label > .label-info; - .label > .label-info > .is(link); + .label > .label-info > .a; } \ No newline at end of file -- cgit v1.2.3 From 55bbb9ffd704353140cb1d42804ecd99f576f642 Mon Sep 17 00:00:00 2001 From: Artur Kwiatkowski Date: Mon, 22 Apr 2013 15:34:23 +0200 Subject: Nuked local .a() mixins and simplified the nesting --- less/labels.less | 89 +++++++++++++++----------------------------------------- 1 file changed, 24 insertions(+), 65 deletions(-) (limited to 'less') diff --git a/less/labels.less b/less/labels.less index dbaff8864..d6ffc8105 100644 --- a/less/labels.less +++ b/less/labels.less @@ -2,9 +2,7 @@ // Labels // -------------------------------------------------- -// LESS base - -.label() { +.label { display: inline; padding: .25em .6em; font-size: 75%; @@ -17,8 +15,8 @@ background-color: @gray-light; border-radius: .25em; - // Hover state, but only for links - as a mixin which will be accessible as LESS shorthand: .label > .a; - .a() { + // Nuke the hover effects for a.label and for label[href] - for anchors + &[href], a& { &:hover, &:focus { color: #fff; @@ -26,73 +24,34 @@ cursor: pointer; } } - - // Colors - // Only give background-color difference to links (and to simplify, we don't qualifty with `a` but [href] attribute) - // If there is a need for [href] then use local mixin a() via ex: .label-danger > .a; to attach additional CSS for [href] attr - - .label-danger() { - background-color: @label-danger-bg; - .a() { - &[href] { - background-color: darken(@label-danger-bg, 10%); - } - } - } - - .label-warning() { - background-color: @label-warning-bg; - .a() { - &[href] { - background-color: darken(@label-warning-bg, 10%); - } - } - } - - .label-success() { - background-color: @label-success-bg; - .a() { - &[href] { - background-color: darken(@label-success-bg, 10%); - } - } - } - - .label-info() { - background-color: @label-info-bg; - .a() { - &[href] { - background-color: darken(@label-info-bg, 10%); - } - } - } -} - -// populate mixins for CSS -.label { - .label(); -} - -a.label { - .label > .a; } +// Colors +// Varying the background-color - if the a has href, then deploy darker color .label-danger { - .label > .label-danger; - .label > .label-danger > .a; // will produce .label-danger[href] class for folks who like to use class in HTML + background-color: @label-danger-bg; + &[href] { + background-color: darken(@label-danger-bg, 10%); + } } -.label-warning { - .label > .label-warning; - .label > .label-warning > .a; +.label-success { + background-color: @label-success-bg; + &[href] { + background-color: darken(@label-success-bg, 10%); + } } -.label-success { - .label > .label-success; - .label > .label-success > .a; +.label-warning { + background-color: @label-warning-bg; + &[href] { + background-color: darken(@label-warning-bg, 10%); + } } .label-info { - .label > .label-info; - .label > .label-info > .a; -} + background-color: @label-info-bg; + &[href] { + background-color: darken(@label-info-bg, 10%); + } +} \ No newline at end of file -- cgit v1.2.3 From 159105dad3def1fafdccee77c11947dce3d6db09 Mon Sep 17 00:00:00 2001 From: Chris Rebert Date: Mon, 22 Apr 2013 16:11:11 -0700 Subject: Fixes #7661 --- less/mixins.less | 2 +- less/panels.less | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) (limited to 'less') diff --git a/less/mixins.less b/less/mixins.less index de054784d..f33b1ec6b 100644 --- a/less/mixins.less +++ b/less/mixins.less @@ -414,7 +414,7 @@ @media (min-width: @grid-float-breakpoint) { float: left; // Calculate width based on number of columns available - width: percentage(@columns / @grid-columns); + width: percentage((@columns / @grid-columns)); } // Prevent columns from collapsing when empty min-height: 1px; diff --git a/less/panels.less b/less/panels.less index fe13a278f..0d5a07ad4 100644 --- a/less/panels.less +++ b/less/panels.less @@ -17,7 +17,7 @@ .panel-heading { margin: -15px -15px 15px; padding: 10px 15px; - font-size: @font-size-base * 1.25; + font-size: (@font-size-base * 1.25); font-weight: 500; background-color: @panel-heading-bg; border-bottom: 1px solid @panel-border; -- cgit v1.2.3 From 22a1a7273a4de67eb3b167b764cd79a6f3bf8568 Mon Sep 17 00:00:00 2001 From: Stephen Edgar Date: Tue, 23 Apr 2013 17:30:22 +1000 Subject: 'less' folder .editorconfig code guide updates --- less/close.less | 2 +- less/responsive-utilities.less | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) (limited to 'less') diff --git a/less/close.less b/less/close.less index e63a3b2d7..6a4fece3a 100644 --- a/less/close.less +++ b/less/close.less @@ -30,4 +30,4 @@ button.close { background: transparent; border: 0; -webkit-appearance: none; -} \ No newline at end of file +} diff --git a/less/responsive-utilities.less b/less/responsive-utilities.less index 4275264d9..f6bfd9611 100644 --- a/less/responsive-utilities.less +++ b/less/responsive-utilities.less @@ -74,4 +74,4 @@ @media print { .visible-print { display: inherit !important; } .hidden-print { display: none !important; } -} \ No newline at end of file +} -- cgit v1.2.3 From 270db6f55e4c86b0375e32fa3d6eba4038aa15fb Mon Sep 17 00:00:00 2001 From: Artur Kwiatkowski Date: Wed, 24 Apr 2013 13:54:17 +0200 Subject: - changed comments - added hover and focus state for [href] color variations --- less/labels.less | 33 +++++++++++++++++++++++---------- 1 file changed, 23 insertions(+), 10 deletions(-) (limited to 'less') diff --git a/less/labels.less b/less/labels.less index d6ffc8105..92fe8f89e 100644 --- a/less/labels.less +++ b/less/labels.less @@ -7,51 +7,64 @@ padding: .25em .6em; font-size: 75%; font-weight: 500; - color: #fff; line-height: 1; - vertical-align: middle; - white-space: nowrap; + color: #fff; text-align: center; + white-space: nowrap; + vertical-align: middle; background-color: @gray-light; border-radius: .25em; - // Nuke the hover effects for a.label and for label[href] - for anchors - &[href], a& { + // Add hover effects, but only for links + &[href] { &:hover, &:focus { color: #fff; text-decoration: none; cursor: pointer; + background-color: darken(@gray-light, 10%); } } } // Colors -// Varying the background-color - if the a has href, then deploy darker color +// Contextual variations (linked labels get darker on :hover) .label-danger { background-color: @label-danger-bg; &[href] { - background-color: darken(@label-danger-bg, 10%); + &:hover, + &:focus { + background-color: darken(@label-danger-bg, 10%); + } } } .label-success { background-color: @label-success-bg; &[href] { - background-color: darken(@label-success-bg, 10%); + &:hover, + &:focus { + background-color: darken(@label-success-bg, 10%); + } } } .label-warning { background-color: @label-warning-bg; &[href] { - background-color: darken(@label-warning-bg, 10%); + &:hover, + &:focus { + background-color: darken(@label-warning-bg, 10%); + } } } .label-info { background-color: @label-info-bg; &[href] { - background-color: darken(@label-info-bg, 10%); + &:hover, + &:focus { + background-color: darken(@label-info-bg, 10%); + } } } \ No newline at end of file -- cgit v1.2.3