assets/stylesheets/semantic_ui/definitions/elements/label.less in less-rails-semantic_ui-1.12.3.0 vs assets/stylesheets/semantic_ui/definitions/elements/label.less in less-rails-semantic_ui-2.0.0.0

- old
+ new

@@ -11,11 +11,11 @@ /*! * # Semantic UI - Label * http://github.com/semantic-org/semantic-ui/ * * - * Copyright 2014 Contributors + * Copyright 2015 Contributors * Released under the MIT license * http://opensource.org/licenses/MIT * */ @@ -33,12 +33,13 @@ Label *******************************/ .ui.label { display: inline-block; - vertical-align: @verticalAlign; + white-space: nowrap; line-height: 1; + vertical-align: @verticalAlign; margin: @verticalMargin @horizontalMargin; background-color: @backgroundColor; border-color: @backgroundColor; @@ -50,82 +51,93 @@ text-transform: @textTransform; font-weight: @fontWeight; border-radius: @borderRadius; - box-sizing: border-box; transition: @transition; } .ui.label:first-child { margin-left: 0em; } .ui.label:last-child { margin-right: 0em; } - /* Link */ a.ui.label { cursor: pointer; } /* Inside Link */ -.ui.label a { +.ui.label > a { cursor: pointer; color: inherit; opacity: @linkOpacity; transition: @linkTransition; } -.ui.label a:hover { +.ui.label > a:hover { opacity: 1; } +/* Image */ +.ui.label > img { + width: auto !important; + vertical-align: middle; + height: @imageHeight !important; +} + /* Icon */ -.ui.label .icon { +.ui.label > .icon { width: auto; margin: 0em @iconDistance 0em 0em; } + /* Detail */ -.ui.label .detail { +.ui.label > .detail { display: inline-block; vertical-align: top; font-weight: @detailFontWeight; margin-left: @detailMargin; opacity: @detailOpacity; } -.ui.label .detail .icon { +.ui.label > .detail .icon { margin: 0em @detailIconDistance 0em 0em; } /* Removable label */ -.ui.label .close.icon, -.ui.label .delete.icon { +.ui.label > .close.icon, +.ui.label > .delete.icon { cursor: pointer; margin-right: 0em; margin-left: @deleteMargin; - opacity: @linkOpacity; + font-size: @deleteSize; + opacity: @deleteOpacity; transition: @deleteTransition; } -.ui.label .delete.icon:hover { +.ui.label > .delete.icon:hover { opacity: 1; } /*------------------- Group --------------------*/ -.ui.labels .label { +.ui.labels > .label { margin: 0em @groupHorizontalMargin @groupVerticalMargin 0em; } /*------------------- Coupling --------------------*/ +.ui.header > .ui.label { + margin-top: @lineHeightOffset; +} + /* Remove border radius on attached segment */ .ui.attached.segment > .ui.top.left.attached.label, .ui.bottom.attached.segment > .ui.top.left.attached.label { border-top-left-radius: 0; } @@ -172,11 +184,11 @@ display: inline-block; vertical-align: top; height: @imageLabelImageHeight; margin: @imageLabelImageMargin; - border-radius: @imageLabelBorderRadius; + border-radius: @imageLabelImageBorderRadius; } .ui.image.label .detail { background: @imageLabelDetailBackground; margin: @imageLabelDetailMargin; @@ -273,10 +285,11 @@ border-right-color: inherit; transition: @cornerTriangleTransition; } .ui.corner.label .icon { + cursor: default; position: relative; top: @cornerIconTopOffset; left: @cornerIconLeftOffset; font-size: @cornerIconSize; margin: 0em; @@ -308,21 +321,10 @@ .ui.segment > .ui.left.corner.label { right: auto; left: -1px; } -/* Input */ -.ui.input > .ui.corner.label { - top: 1px; - right: 1px; -} -.ui.input > .ui.right.corner.label { - right: auto; - left: 1px; -} - - /*------------------- Ribbon --------------------*/ .ui.ribbon.label { @@ -347,17 +349,28 @@ border-right-color: inherit; width: 0em; height: 0em; } +/* Positioning */ +.ui.ribbon.label { + left: @ribbonOffset; + margin-right: -@ribbonTriangleSize; + padding-left: @ribbonDistance; + padding-right: @ribbonTriangleSize; +} +.ui[class*="right ribbon"].label { + left: @rightRibbonOffset; + padding-left: @ribbonTriangleSize; + padding-right: @ribbonDistance; +} /* Right Ribbon */ .ui[class*="right ribbon"].label { text-align: left; transform: translateX(-100%); border-radius: @borderRadius 0em 0em @borderRadius; - padding-left: @horizontalPadding; } .ui[class*="right ribbon"].label:after { left: auto; right: 0%; @@ -365,20 +378,10 @@ border-width: @ribbonTriangleSize @ribbonTriangleSize 0em 0em; border-color: transparent; border-top-color: inherit; } -/* Positioning */ -.ui.ribbon.label { - left: @ribbonOffset; - margin-right: -@ribbonTriangleSize; - padding-left: @ribbonDistance; -} -.ui[class*="right ribbon"].label { - left: @rightRibbonOffset; - padding-right: @ribbonDistance; -} /* Inside Image */ .ui.image > .ribbon.label, .ui.card .image > .ribbon.label { @@ -386,17 +389,15 @@ top: @ribbonImageTopDistance; } .ui.card .image > .ui.ribbon.label, .ui.image > .ui.ribbon.label { left: @ribbonImageOffset; - padding-left: @ribbonImageDistance; } .ui.card .image > .ui[class*="right ribbon"].label, .ui.image > .ui[class*="right ribbon"].label { left: @rightRibbonImageOffset; padding-left: @horizontalPadding; - padding-right: @ribbonImageDistance; } /*------------------- Attached @@ -478,10 +479,47 @@ background-image: @labelHoverBackgroundImage; color: @labelHoverTextColor; } /*------------------- + Active +--------------------*/ + +.ui.active.label { + background-color: @labelActiveBackgroundColor; + border-color: @labelActiveBackgroundColor; + + background-image: @labelActiveBackgroundImage; + color: @labelActiveTextColor; +} +.ui.active.label:before { + background-color: @labelActiveBackgroundColor; + background-image: @labelActiveBackgroundImage; + color: @labelActiveTextColor; +} + +/*------------------- + Active Hover +--------------------*/ + +a.ui.labels .active.label:hover, +a.ui.active.label:hover { + background-color: @labelActiveHoverBackgroundColor; + border-color: @labelActiveHoverBackgroundColor; + + background-image: @labelActiveHoverBackgroundImage; + color: @labelActiveHoverTextColor; +} +.ui.labels a.active.label:ActiveHover:before, +a.ui.active.label:ActiveHover:before { + background-color: @labelActiveHoverBackgroundColor; + background-image: @labelActiveHoverBackgroundImage; + color: @labelActiveHoverTextColor; +} + + +/*------------------- Visible --------------------*/ .ui.labels.visible .label, .ui.label.visible { @@ -505,294 +543,426 @@ /*------------------- Colors --------------------*/ -/*--- Black ---*/ -.ui.black.labels .label, -.ui.black.label { - background-color: @black !important; - border-color: @black !important; - color: @invertedTextColor !important; +/*--- Red ---*/ +.ui.red.labels .label, +.ui.red.label { + background-color: @red !important; + border-color: @red !important; + color: @redTextColor !important; } -.ui.labels .black.label:before, -.ui.black.labels .label:before, -.ui.black.label:before { - background-color: @black !important; +.ui.labels .red.label:before, +.ui.red.labels .label:before, +.ui.red.label:before { + background-color: @red !important; } -a.ui.black.labels .label:hover, -a.ui.black.label:hover { - background-color: @blackHover !important; - border-color: @blackHover !important; +.ui.red.corner.label, +.ui.red.corner.label:hover { + background-color: transparent !important; } -.ui.labels a.black.label:hover:before, -.ui.black.labels a.label:hover:before, -a.ui.black.label:hover:before { - background-color: @blackHover !important; + +a.ui.red.labels .label:hover, +a.ui.red.label:hover{ + background-color: @redHover !important; + border-color: @redHover !important; + color: @redHoverTextColor !important; } -.ui.black.corner.label, -.ui.black.corner.label:hover { +.ui.labels a.red.label:hover:before, +.ui.red.labels a.label:hover:before, +a.ui.red.label:hover:before { + background-color: @redHover !important; +} +.ui.red.ribbon.label { + border-color: @redRibbonShadow !important; +} + +/*--- Orange ---*/ +.ui.orange.labels .label, +.ui.orange.label { + background-color: @orange !important; + border-color: @orange !important; + color: @orangeTextColor !important; +} +.ui.labels .orange.label:before, +.ui.orange.labels .label:before, +.ui.orange.label:before { + background-color: @orange !important; +} +.ui.orange.corner.label, +.ui.orange.corner.label:hover { background-color: transparent !important; } -.ui.black.ribbon.label { - border-color: @blackRibbonShadow !important; + +a.ui.orange.labels .label:hover, +a.ui.orange.label:hover{ + background-color: @orangeHover !important; + border-color: @orangeHover !important; + color: @orangeHoverTextColor !important; } +.ui.labels a.orange.label:hover:before, +.ui.orange.labels a.label:hover:before, +a.ui.orange.label:hover:before { + background-color: @orangeHover !important; +} +.ui.orange.ribbon.label { + border-color: @orangeRibbonShadow !important; +} -/*--- Blue ---*/ -.ui.blue.labels .label, -.ui.blue.label { - background-color: @blue !important; - border-color: @blue !important; - color: @invertedTextColor !important; +/*--- Yellow ---*/ +.ui.yellow.labels .label, +.ui.yellow.label { + background-color: @yellow !important; + border-color: @yellow !important; + color: @yellowTextColor !important; } -.ui.labels .blue.label:before, -.ui.blue.labels .label:before, -.ui.blue.label:before { - background-color: @blue !important; +.ui.labels .yellow.label:before, +.ui.yellow.labels .label:before, +.ui.yellow.label:before { + background-color: @yellow !important; } -a.ui.blue.labels .label:hover, -.ui.blue.labels a.label:hover, -a.ui.blue.label:hover { - background-color: @blueHover !important; - border-color: @blueHover !important; - color: @invertedTextColor !important; +.ui.yellow.corner.label, +.ui.yellow.corner.label:hover { + background-color: transparent !important; } -.ui.labels a.blue.label:hover:before, -.ui.blue.labels a.label:hover:before, -a.ui.blue.label:hover:before { - background-color: @blueHover !important; + +a.ui.yellow.labels .label:hover, +a.ui.yellow.label:hover{ + background-color: @yellowHover !important; + border-color: @yellowHover !important; + color: @yellowHoverTextColor !important; } -.ui.blue.corner.label, -.ui.blue.corner.label:hover { +.ui.labels a.yellow.label:hover:before, +.ui.yellow.labels a.label:hover:before, +a.ui.yellow.label:hover:before { + background-color: @yellowHover !important; +} +.ui.yellow.ribbon.label { + border-color: @yellowRibbonShadow !important; +} + +/*--- Olive ---*/ +.ui.olive.labels .label, +.ui.olive.label { + background-color: @olive !important; + border-color: @olive !important; + color: @oliveTextColor !important; +} +.ui.labels .olive.label:before, +.ui.olive.labels .label:before, +.ui.olive.label:before { + background-color: @olive !important; +} +.ui.olive.corner.label, +.ui.olive.corner.label:hover { background-color: transparent !important; } -.ui.blue.ribbon.label { - border-color: @blueRibbonShadow !important; + +a.ui.olive.labels .label:hover, +a.ui.olive.label:hover{ + background-color: @oliveHover !important; + border-color: @oliveHover !important; + color: @oliveHoverTextColor !important; } +.ui.labels a.olive.label:hover:before, +.ui.olive.labels a.label:hover:before, +a.ui.olive.label:hover:before { + background-color: @oliveHover !important; +} +.ui.olive.ribbon.label { + border-color: @greenRibbonShadow !important; +} /*--- Green ---*/ .ui.green.labels .label, .ui.green.label { background-color: @green !important; border-color: @green !important; - color: @invertedTextColor !important; + color: @greenTextColor !important; } .ui.labels .green.label:before, .ui.green.labels .label:before, .ui.green.label:before { background-color: @green !important; } +.ui.green.corner.label, +.ui.green.corner.label:hover { + background-color: transparent !important; +} a.ui.green.labels .label:hover, -a.ui.green.label:hover { +a.ui.green.label:hover{ background-color: @greenHover !important; border-color: @greenHover !important; + color: @greenHoverTextColor !important; } .ui.labels a.green.label:hover:before, .ui.green.labels a.label:hover:before, a.ui.green.label:hover:before { background-color: @greenHover !important; } - -.ui.green.corner.label, -.ui.green.corner.label:hover { - background-color: transparent !important; -} .ui.green.ribbon.label { border-color: @greenRibbonShadow !important; } -/*--- Orange ---*/ -.ui.orange.labels .label, -.ui.orange.label { - background-color: @orange !important; - border-color: @orange !important; - color: @invertedTextColor !important; +/*--- Teal ---*/ +.ui.teal.labels .label, +.ui.teal.label { + background-color: @teal !important; + border-color: @teal !important; + color: @tealTextColor !important; } -.ui.labels .orange.label:before, -.ui.orange.labels .label:before, -.ui.orange.label:before { - background-color: @orange !important; +.ui.labels .teal.label:before, +.ui.teal.labels .label:before, +.ui.teal.label:before { + background-color: @teal !important; } -a.ui.orange.labels .label:hover, -.ui.orange.labels a.label:hover, -a.ui.orange.label:hover { - background-color: @orangeHover !important; - border-color: @orangeHover !important; - color: @invertedTextColor !important; +.ui.teal.corner.label, +.ui.teal.corner.label:hover { + background-color: transparent !important; } -.ui.labels a.orange.label:hover:before, -.ui.orange.labels a.label:hover:before, -a.ui.orange.label:hover:before { - background-color: @orangeHover !important; + +a.ui.teal.labels .label:hover, +a.ui.teal.label:hover{ + background-color: @tealHover !important; + border-color: @tealHover !important; + color: @tealHoverTextColor !important; } -.ui.orange.corner.label, -.ui.orange.corner.label:hover { - background-color: transparent !important; +.ui.labels a.teal.label:hover:before, +.ui.teal.labels a.label:hover:before, +a.ui.teal.label:hover:before { + background-color: @tealHover !important; } -.ui.orange.ribbon.label { - border-color: @orangeRibbonShadow !important; +.ui.teal.ribbon.label { + border-color: @tealRibbonShadow !important; } -/*--- Pink ---*/ -.ui.pink.labels .label, -.ui.pink.label { - background-color: @pink !important; - border-color: @pink !important; - color: @invertedTextColor !important; +/*--- Blue ---*/ +.ui.blue.labels .label, +.ui.blue.label { + background-color: @blue !important; + border-color: @blue !important; + color: @blueTextColor !important; } -.ui.labels .pink.label:before, -.ui.pink.labels .label:before, -.ui.pink.label:before { - background-color: @pink !important; +.ui.labels .blue.label:before, +.ui.blue.labels .label:before, +.ui.blue.label:before { + background-color: @blue !important; } -a.ui.pink.labels .label:hover, -.ui.pink.labels a.label:hover, -a.ui.pink.label:hover { - background-color: @pinkHover !important; - border-color: @pinkHover !important; - color: @invertedTextColor !important; +.ui.blue.corner.label, +.ui.blue.corner.label:hover { + background-color: transparent !important; } -.ui.labels a.pink.label:hover:before, -.ui.pink.labels a.label:hover:before, -a.ui.pink.label:hover:before { - background-color: @pinkHover !important; + +a.ui.blue.labels .label:hover, +a.ui.blue.label:hover{ + background-color: @blueHover !important; + border-color: @blueHover !important; + color: @blueHoverTextColor !important; } -.ui.pink.corner.label, -.ui.pink.corner.label:hover { +.ui.labels a.blue.label:hover:before, +.ui.blue.labels a.label:hover:before, +a.ui.blue.label:hover:before { + background-color: @blueHover !important; +} +.ui.blue.ribbon.label { + border-color: @blueRibbonShadow !important; +} + +/*--- Violet ---*/ +.ui.violet.labels .label, +.ui.violet.label { + background-color: @violet !important; + border-color: @violet !important; + color: @violetTextColor !important; +} +.ui.labels .violet.label:before, +.ui.violet.labels .label:before, +.ui.violet.label:before { + background-color: @violet !important; +} +.ui.violet.corner.label, +.ui.violet.corner.label:hover { background-color: transparent !important; } -.ui.pink.ribbon.label { - border-color: @pinkRibbonShadow !important; + +a.ui.violet.labels .label:hover, +a.ui.violet.label:hover{ + background-color: @violetHover !important; + border-color: @violetHover !important; + color: @violetHoverTextColor !important; } +.ui.labels a.violet.label:hover:before, +.ui.violet.labels a.label:hover:before, +a.ui.violet.label:hover:before { + background-color: @violetHover !important; +} +.ui.violet.ribbon.label { + border-color: @violetRibbonShadow !important; +} /*--- Purple ---*/ .ui.purple.labels .label, .ui.purple.label { background-color: @purple !important; border-color: @purple !important; - color: @invertedTextColor !important; + color: @purpleTextColor !important; } .ui.labels .purple.label:before, .ui.purple.labels .label:before, .ui.purple.label:before { background-color: @purple !important; } +.ui.purple.corner.label, +.ui.purple.corner.label:hover { + background-color: transparent !important; +} + a.ui.purple.labels .label:hover, -.ui.purple.labels a.label:hover, -a.ui.purple.label:hover { +a.ui.purple.label:hover{ background-color: @purpleHover !important; border-color: @purpleHover !important; - color: @invertedTextColor !important; + color: @purpleHoverTextColor !important; } .ui.labels a.purple.label:hover:before, .ui.purple.labels a.label:hover:before, a.ui.purple.label:hover:before { background-color: @purpleHover !important; } -.ui.purple.corner.label, -.ui.purple.corner.label:hover { - background-color: transparent !important; -} .ui.purple.ribbon.label { border-color: @purpleRibbonShadow !important; } -/*--- Red ---*/ -.ui.red.labels .label, -.ui.red.label { - background-color: @red !important; - border-color: @red !important; - color: @invertedTextColor !important; +/*--- Pink ---*/ +.ui.pink.labels .label, +.ui.pink.label { + background-color: @pink !important; + border-color: @pink !important; + color: @pinkTextColor !important; } -.ui.labels .red.label:before, -.ui.red.labels .label:before, -.ui.red.label:before { - background-color: @red !important; +.ui.labels .pink.label:before, +.ui.pink.labels .label:before, +.ui.pink.label:before { + background-color: @pink !important; } -.ui.red.corner.label, -.ui.red.corner.label:hover { +.ui.pink.corner.label, +.ui.pink.corner.label:hover { background-color: transparent !important; } -a.ui.red.labels .label:hover, -a.ui.red.label:hover{ - background-color: @redHover !important; - border-color: @redHover !important; - color: @invertedTextColor !important; +a.ui.pink.labels .label:hover, +a.ui.pink.label:hover{ + background-color: @pinkHover !important; + border-color: @pinkHover !important; + color: @pinkHoverTextColor !important; } -.ui.labels a.red.label:hover:before, -.ui.red.labels a.label:hover:before, -a.ui.red.label:hover:before { - background-color: @redHover !important; +.ui.labels a.pink.label:hover:before, +.ui.pink.labels a.label:hover:before, +a.ui.pink.label:hover:before { + background-color: @pinkHover !important; } -.ui.red.ribbon.label { - border-color: @redRibbonShadow !important; +.ui.pink.ribbon.label { + border-color: @pinkRibbonShadow !important; } -/*--- Teal ---*/ -.ui.teal.labels .label, -.ui.teal.label { - background-color: @teal !important; - border-color: @teal !important; - color: @invertedTextColor !important; +/*--- Brown ---*/ +.ui.brown.labels .label, +.ui.brown.label { + background-color: @brown !important; + border-color: @brown !important; + color: @brownTextColor !important; } -.ui.labels .teal.label:before, -.ui.teal.labels .label:before, -.ui.teal.label:before { - background-color: @teal !important; +.ui.labels .brown.label:before, +.ui.brown.labels .label:before, +.ui.brown.label:before { + background-color: @brown !important; } -a.ui.teal.labels .label:hover, -.ui.teal.labels a.label:hover, -a.ui.teal.label:hover { - background-color: @tealHover !important; - border-color: @tealHover !important; - color: @invertedTextColor !important; +.ui.brown.corner.label, +.ui.brown.corner.label:hover { + background-color: transparent !important; } -.ui.labels a.teal.label:hover:before, -.ui.teal.labels a.label:hover:before, -a.ui.teal.label:hover:before { - background-color: @tealHover !important; + +a.ui.brown.labels .label:hover, +a.ui.brown.label:hover{ + background-color: @brownHover !important; + border-color: @brownHover !important; + color: @brownHoverTextColor !important; } -.ui.teal.corner.label, -.ui.teal.corner.label:hover { - background-color: transparent !important; +.ui.labels a.brown.label:hover:before, +.ui.brown.labels a.label:hover:before, +a.ui.brown.label:hover:before { + background-color: @brownHover !important; } -.ui.teal.ribbon.label { - border-color: @tealRibbonShadow !important; +.ui.brown.ribbon.label { + border-color: @brownRibbonShadow !important; } -/*--- Yellow ---*/ -.ui.yellow.labels .label, -.ui.yellow.label { - background-color: @yellow !important; - border-color: @yellow !important; - color: @invertedTextColor !important; +/*--- Grey ---*/ +.ui.grey.labels .label, +.ui.grey.label { + background-color: @grey !important; + border-color: @grey !important; + color: @greyTextColor !important; } -.ui.labels .yellow.label:before, -.ui.yellow.labels .label:before, -.ui.yellow.label:before { - background-color: @yellow !important; +.ui.labels .grey.label:before, +.ui.grey.labels .label:before, +.ui.grey.label:before { + background-color: @grey !important; } -a.ui.yellow.labels .label:hover, -.ui.yellow.labels a.label:hover, -a.ui.yellow.label:hover { - background-color: @yellowHover !important; - border-color: @yellowHover !important; - color: @invertedTextColor !important; +.ui.grey.corner.label, +.ui.grey.corner.label:hover { + background-color: transparent !important; } -.ui.labels a.yellow.label:hover:before, -.ui.yellow.labels a.label:hover:before, -a.ui.yellow.label:hover:before { - background-color: @yellowHover !important; + +a.ui.grey.labels .label:hover, +a.ui.grey.label:hover{ + background-color: @greyHover !important; + border-color: @greyHover !important; + color: @greyHoverTextColor !important; } -.ui.yellow.corner.label, -.ui.yellow.corner.label:hover { +.ui.labels a.grey.label:hover:before, +.ui.grey.labels a.label:hover:before, +a.ui.grey.label:hover:before { + background-color: @greyHover !important; +} +.ui.grey.ribbon.label { + border-color: @greyRibbonShadow !important; +} + +/*--- Black ---*/ +.ui.black.labels .label, +.ui.black.label { + background-color: @black !important; + border-color: @black !important; + color: @blackTextColor !important; +} +.ui.labels .black.label:before, +.ui.black.labels .label:before, +.ui.black.label:before { + background-color: @black !important; +} +.ui.black.corner.label, +.ui.black.corner.label:hover { background-color: transparent !important; } -.ui.yellow.ribbon.label { - border-color: @yellowRibbonShadow !important; + +a.ui.black.labels .label:hover, +a.ui.black.label:hover{ + background-color: @blackHover !important; + border-color: @blackHover !important; + color: @blackHoverTextColor !important; } +.ui.labels a.black.label:hover:before, +.ui.black.labels a.label:hover:before, +a.ui.black.label:hover:before { + background-color: @blackHover !important; +} +.ui.black.ribbon.label { + border-color: @greyRibbonShadow !important; +} + + /*------------------- Fluid --------------------*/ \ No newline at end of file