Adds coupling for ribbon label with image/card #1807

src/definitions/elements/label.less

@@ -320,16 +320,14 @@ a.ui.label {
 .ui.ribbon.label {
   position: relative;
   margin: 0em;
-
-  left: @ribbonOffset;
-  padding-left: @ribbonDistance;
+  min-width: max-content;
   border-radius: 0em @borderRadius @borderRadius 0em;
   border-color: @ribbonShadowColor;
 }
 
 .ui.ribbon.label:after {
   position: absolute;
-  content: "";
+  content: '';
 
   top: 100%;
   left: 0%;
@@ -344,13 +342,12 @@ a.ui.label {
   height: 0em;
 }
 
+/* Right Ribbon */
 .ui[class*="right ribbon"].label {
   text-align: left;
   transform: translateX(-100%);
-  left: @rightRibbonOffset;
   border-radius: @borderRadius 0em 0em @borderRadius;
   padding-left: @horizontalPadding;
-  padding-right: @ribbonDistance;
 }
 .ui[class*="right ribbon"].label:after {
   left: auto;
@@ -362,6 +359,36 @@ a.ui.label {
   border-top-color: inherit;
 }
 
+/* Positioning */
+.ui.ribbon.label {
+  left: @ribbonOffset;
+  padding-left: @ribbonDistance;
+}
+.ui[class*="right ribbon"].label {
+  left: @rightRibbonOffset;
+  padding-right: @ribbonDistance;
+}
+
+
+/* Inside Segment */
+.ui.segment > .ui.ribbon.label {
+  left: @ribbonSegmentOffset;
+  padding-left: @ribbonSegmentDistance;
+}
+.ui.segment > .ui[class*="right ribbon"].label {
+  left: @rightRibbonSegmentOffset;
+  padding-left: @horizontalPadding;
+  padding-right: @ribbonSegmentDistance;
+}
+
+/* Inside Image */
+.ui.image > .ribbon.label,
+.ui.card .image > .ribbon.label {
+  position: absolute;
+  top: @ribbonImageTopDistance;
+}
+
+
 /*-------------------
       Attached
 --------------------*/

src/themes/default/elements/label.variables

@@ -90,12 +90,19 @@
 @tagTransition: background @labelTransitionDuration @labelTransitionEasing;
 
 /* Ribbon */
+@ribbonImageTopDistance: 1rem;
 @ribbonTriangleSize: 1.2em;
-@ribbonMargin: 1rem;
+@ribbonShadowColor: rgba(0, 0, 0, 0.15);
+
+@ribbonMargin: -0.05rem; /* Rounding Offset on Triangle */
 @ribbonOffset: ~"calc("-@ribbonMargin~" - "@ribbonTriangleSize~")";
 @ribbonDistance: ~"calc("@ribbonMargin~" + "@ribbonTriangleSize~")";
 @rightRibbonOffset:  ~"calc(100% + "@ribbonMargin~" + "@ribbonTriangleSize~")";
-@ribbonShadowColor: rgba(0, 0, 0, 0.15);
+
+@ribbonSegmentMargin: 1rem;
+@ribbonSegmentOffset: ~"calc("-@ribbonSegmentMargin~" - "@ribbonTriangleSize~")";
+@ribbonSegmentDistance: ~"calc("@ribbonSegmentMargin~" + "@ribbonTriangleSize~")";
+@rightRibbonSegmentOffset:  ~"calc(100% + "@ribbonSegmentMargin~" + "@ribbonTriangleSize~")";
 
 @blackRibbonShadow: darken(@black, 10);
 @blueRibbonShadow: darken(@blue, 10);