diff --git a/src/definitions/elements/button.less b/src/definitions/elements/button.less index 1eca620da..8e5f24879 100755 --- a/src/definitions/elements/button.less +++ b/src/definitions/elements/button.less @@ -395,13 +395,19 @@ .ui.labeled.button > .label { display: flex; align-items: @labeledLabelAlign; - margin: 0px 0px 0px @labeledLabelBorderOffset; + margin: 0px 0px 0px @labeledLabelBorderOffset !important; font-size: @labeledLabelFontSize; padding: @labeledLabelPadding; font-size: @labeledLabelFontSize; border-color: @labeledLabelBorderColor; } +/* Tag */ +.ui.labeled.button > .tag.label:before { + width: @labeledTagLabelSize; + height: @labeledTagLabelSize; +} + /* Right */ .ui.labeled.button:not([class*="left labeled"]) > .button { border-top-right-radius: 0px; diff --git a/src/definitions/elements/label.less b/src/definitions/elements/label.less index 5d4de15bd..5302704b0 100755 --- a/src/definitions/elements/label.less +++ b/src/definitions/elements/label.less @@ -1132,8 +1132,8 @@ a.ui.basic.label:hover { .ui.pointing.label:before, .ui.pointing.above.label:before { border-width: @borderWidth 0px 0px @borderWidth; - margin-left: @pointingTriangleOffset; - top: @pointingTriangleOffset; + transform: translateX(-50%) translateY(-50%) rotate(45deg); + top: 0%; left: 50%; } /*--- Below ---*/ @@ -1145,10 +1145,10 @@ a.ui.basic.label:hover { .ui.pointing.bottom.label:before, .ui.pointing.below.label:before { border-width: 0px @borderWidth @borderWidth 0px; - margin-left: @pointingTriangleOffset; top: auto; right: auto; - bottom: @pointingTriangleOffset; + transform: translateX(-50%) translateY(-50%) rotate(45deg); + top: 100%; left: 50%; } /*--- Left ---*/ @@ -1158,7 +1158,7 @@ a.ui.basic.label:hover { } .ui.pointing.left.label:before { border-width: 0px 0px @borderWidth @borderWidth; - margin-top: @pointingTriangleOffset; + transform: translateX(-50%) translateY(-50%) rotate(45deg); bottom: auto; right: auto; top: 50%; @@ -1171,9 +1171,9 @@ a.ui.basic.label:hover { } .ui.pointing.right.label:before { border-width: @borderWidth @borderWidth 0px 0px; - margin-top: @pointingTriangleOffset; - right: @pointingTriangleOffset; + transform: translateX(50%) translateY(-50%) rotate(45deg); top: 50%; + right: 0%; bottom: auto; left: auto; } @@ -1184,24 +1184,23 @@ a.ui.basic.label:hover { .ui.basic.pointing.label:before, .ui.basic.pointing.above.label:before { - top: @basicPointingTriangleOffset; + margin-top: @basicPointingTriangleOffset; } /*--- Below ---*/ .ui.basic.pointing.bottom.label:before, .ui.basic.pointing.below.label:before { - top: auto; - margin-left: @basicPointingTriangleOffset; - bottom: @basicPointingTriangleOffset; + bottom: auto; + top: 100%; + margin-top: -@basicPointingTriangleOffset; } /*--- Left ---*/ .ui.basic.pointing.left.label:before { top: 50%; - margin-top: @basicPointingTriangleOffset; + left: @basicPointingTriangleOffset; } /*--- Right ---*/ .ui.basic.pointing.right.label:before { top: 50%; - margin-top: @basicPointingTriangleOffset; right: @basicPointingTriangleOffset; } diff --git a/src/themes/default/elements/button.variables b/src/themes/default/elements/button.variables index f759f9299..8e6b8b051 100644 --- a/src/themes/default/elements/button.variables +++ b/src/themes/default/elements/button.variables @@ -166,6 +166,7 @@ @labeledLabelFontSize: @relativeMedium; @labeledLabelBorderColor: @borderColor; @labeledLabelBorderOffset: -@borderBoxShadowWidth; +@labeledTagLabelSize: 1.85em; /* hypotenuse of triangle */ /* Labeled Icon */ @labeledIconWidth: 1em + (@verticalPadding * 2); diff --git a/src/themes/default/elements/label.variables b/src/themes/default/elements/label.variables index 133777ad7..34f97e16c 100644 --- a/src/themes/default/elements/label.variables +++ b/src/themes/default/elements/label.variables @@ -228,12 +228,11 @@ @pointingTriangleSize: 0.6666em; @pointingHorizontalDistance: @pointingTriangleSize; -@pointingTriangleOffset: -@pointingTriangleSize / 2; @pointingTriangleTransition: background @labelTransitionDuration @labelTransitionEasing; @pointingTriangleZIndex: 2; /* Basic Pointing */ -@basicPointingTriangleOffset: ~"calc("(-@pointingTriangleSize / 2)~" - "@pointingBorderWidth~")"; +@basicPointingTriangleOffset: -@pointingBorderWidth; /* Floating */ @floatingTopOffset: -1em;