diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css index 3a6866785a..c7e2b4eb19 100644 --- a/docs/assets/css/bootstrap.css +++ b/docs/assets/css/bootstrap.css @@ -4795,7 +4795,9 @@ a.thumbnail:focus { border-radius: .25em; } +.label[href]:hover, a.label:hover, +.label[href]:focus, a.label:focus { color: #fff; text-decoration: none; @@ -4810,14 +4812,6 @@ a.label:focus { background-color: #c9302c; } -.label-warning { - background-color: #f0ad4e; -} - -.label-warning[href] { - background-color: #ec971f; -} - .label-success { background-color: #5cb85c; } @@ -4826,6 +4820,14 @@ a.label:focus { background-color: #449d44; } +.label-warning { + background-color: #f0ad4e; +} + +.label-warning[href] { + background-color: #ec971f; +} + .label-info { background-color: #5bc0de; } diff --git a/less/labels.less b/less/labels.less index dbaff88642..d6ffc81056 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 -} - -.label-warning { - .label > .label-warning; - .label > .label-warning > .a; + background-color: @label-danger-bg; + &[href] { + background-color: darken(@label-danger-bg, 10%); + } } .label-success { - .label > .label-success; - .label > .label-success > .a; + background-color: @label-success-bg; + &[href] { + background-color: darken(@label-success-bg, 10%); + } +} + +.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