diff --git a/RELEASE-NOTES.md b/RELEASE-NOTES.md index 3cc859df00..40b9239389 100644 --- a/RELEASE-NOTES.md +++ b/RELEASE-NOTES.md @@ -67,6 +67,7 @@ - **Popup** - Fixes issue where variation would not be added to a pre-existing popup even if specified in javascript #26011 - **Transition** - Transition callbacks now all have the correct `this` set. #2758 - **Search** - Calling `show results` programmatically no longer fails when input is not focused #2842 +- **Table/Label** - `ribbon labels` will now automatically position themselves when used inside a table #1930 **[Community Bug Fixes](https://github.com/Semantic-Org/Semantic-UI/issues?q=is%3Aissue+milestone%3A2.1.0+is%3Aclosed)** - **API** - API debug is now `false` by default, like other modules. #2817 diff --git a/src/definitions/elements/label.less b/src/definitions/elements/label.less index 0ee3fc264d..5d4de15bd1 100755 --- a/src/definitions/elements/label.less +++ b/src/definitions/elements/label.less @@ -370,9 +370,7 @@ a.ui.label { border-top-color: inherit; } - - -/* Inside Image */ +/* Inside Table */ .ui.image > .ribbon.label, .ui.card .image > .ribbon.label { position: absolute; @@ -388,6 +386,15 @@ a.ui.label { padding-left: @horizontalPadding; } +/* Inside Table */ +.ui.table td > .ui.ribbon.label { + left: @ribbonTableOffset; +} +.ui.table td > .ui[class*="right ribbon"].label { + left: @rightRibbonTableOffset; + padding-left: @horizontalPadding; +} + /*------------------- Attached diff --git a/src/themes/default/elements/label.variables b/src/themes/default/elements/label.variables index ea5dac7540..133777ad78 100644 --- a/src/themes/default/elements/label.variables +++ b/src/themes/default/elements/label.variables @@ -126,7 +126,6 @@ @tagTransition: background @labelTransitionDuration @labelTransitionEasing; /* Ribbon */ -@ribbonImageTopDistance: 1rem; @ribbonTriangleSize: 1.2em; @ribbonShadowColor: rgba(0, 0, 0, 0.15); @@ -135,10 +134,16 @@ @ribbonDistance: ~"calc("@ribbonMargin~" + "@ribbonTriangleSize~")"; @rightRibbonOffset: ~"calc(100% + "@ribbonMargin~" + "@ribbonTriangleSize~")"; +@ribbonImageTopDistance: 1rem; @ribbonImageMargin: -0.05rem; /* Rounding Offset on Triangle */ @ribbonImageOffset: ~"calc("-@ribbonImageMargin~" - "@ribbonTriangleSize~")"; @rightRibbonImageOffset: ~"calc(100% + "@ribbonImageMargin~" + "@ribbonTriangleSize~")"; +@ribbonTableMargin: @relativeMini; /* Rounding Offset on Triangle */ +@ribbonTableOffset: ~"calc("-@ribbonTableMargin~" - "@ribbonTriangleSize~")"; +@rightRibbonTableOffset: ~"calc(100% + "@ribbonTableMargin~" + "@ribbonTriangleSize~")"; + + /* Colors */ @redTextColor: @white; @orangeTextColor: @white;