feat(label): center and bottom ribbon

Added center and bottom ribbon label
fomantic · Mar 17, 2023 · 3a3d6aa · 3a3d6aa
1 parent 28fb68c
commit 3a3d6aa
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 1 deletion.
diff --git a/src/definitions/elements/label.less b/src/definitions/elements/label.less
@@ -440,7 +440,22 @@ a.ui.label {
         border-top-color: inherit;
     }
 
-    /* Inside Table */
+    .ui.ui.center.ribbon.label {
+        top: @ribbonCenterOffset;
+        z-index: @ribbonZIndex;
+    }
+    .ui.bottom.ribbon.label::after {
+        bottom: 100%;
+        top: auto;
+        border-width: @ribbonTriangleSize @ribbonTriangleSize 0 0;
+    }
+    .ui.bottom[class*="right ribbon"].label::after {
+        border-width: @ribbonTriangleSize 0 0 @ribbonTriangleSize;
+        border-color: transparent;
+        border-left-color: inherit;
+    }
+
+    /* Inside Image */
     .ui.image > .ribbon.label,
     .ui.card .image > .ribbon.label {
         position: absolute;
@@ -455,6 +470,11 @@ a.ui.label {
         left: @rightRibbonImageOffset;
         padding-left: @horizontalPadding;
     }
+    .ui.card .image > .ui.bottom.ribbon.label,
+    .ui.image > .ui.bottom.ribbon.label {
+        bottom: @ribbonImageBottomDistance;
+        top: auto;
+    }
 
     /* Inside Table */
     .ui.table td > .ui.ribbon.label {

diff --git a/src/themes/default/elements/label.variables b/src/themes/default/elements/label.variables
@@ -139,11 +139,14 @@
 
 @ribbonMargin: 1rem;
 @ribbonOffset: e(%("calc(%d - %d)", -@ribbonMargin, @ribbonTriangleSize));
+@ribbonCenterSize: 1em;
+@ribbonCenterOffset: e(%("calc(50% - %d)", @ribbonCenterSize));
 @basicRibbonOffset: e(%("calc(%d - %d)", @verticalPadding, @basicBorderWidth));
 @ribbonDistance: e(%("calc(%d + %d)", @ribbonMargin, @ribbonTriangleSize));
 @rightRibbonOffset: e(%("calc(100%% + %d + %d)", @ribbonMargin, @ribbonTriangleSize));
 
 @ribbonImageTopDistance: 1rem;
+@ribbonImageBottomDistance: @ribbonImageTopDistance;
 @ribbonImageMargin: -0.05rem; /* Rounding Offset on Triangle */
 @ribbonImageOffset: e(%("calc(%d - %d)", -@ribbonImageMargin, @ribbonTriangleSize));
 @rightRibbonImageOffset: e(%("calc(100%% + %d + %d)", @ribbonImageMargin, @ribbonTriangleSize));
@@ -152,6 +155,8 @@
 @ribbonTableOffset: e(%("calc(%d - %d)", -@ribbonTableMargin, @ribbonTriangleSize));
 @rightRibbonTableOffset: e(%("calc(100%% + %d + %d)", @ribbonTableMargin, @ribbonTriangleSize));
 
+@ribbonZIndex: 1;
+
 /* Inverted */
 @invertedBackgroundColor: darken(@backgroundColor, 20);
 @invertedBackground: @black;