Browse Source

#1807, make labels have segment padding by default

pull/1785/head
jlukic 9 years ago
parent
commit
68f740874c
2 changed files with 17 additions and 16 deletions
  1. 23
      src/definitions/elements/label.less
  2. 10
      src/themes/default/elements/label.variables

23
src/definitions/elements/label.less

@ -362,6 +362,7 @@ a.ui.label {
/* Positioning */ /* Positioning */
.ui.ribbon.label { .ui.ribbon.label {
left: @ribbonOffset; left: @ribbonOffset;
margin-right: -@ribbonTriangleSize;
padding-left: @ribbonDistance; padding-left: @ribbonDistance;
} }
.ui[class*="right ribbon"].label { .ui[class*="right ribbon"].label {
@ -370,23 +371,23 @@ a.ui.label {
} }
/* 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 */ /* Inside Image */
.ui.image > .ribbon.label, .ui.image > .ribbon.label,
.ui.card .image > .ribbon.label { .ui.card .image > .ribbon.label {
position: absolute; position: absolute;
top: @ribbonImageTopDistance; 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;
}
/*------------------- /*-------------------

10
src/themes/default/elements/label.variables

@ -94,15 +94,15 @@
@ribbonTriangleSize: 1.2em; @ribbonTriangleSize: 1.2em;
@ribbonShadowColor: rgba(0, 0, 0, 0.15); @ribbonShadowColor: rgba(0, 0, 0, 0.15);
@ribbonMargin: -0.05rem; /* Rounding Offset on Triangle */
@ribbonMargin: 1rem;
@ribbonOffset: ~"calc("-@ribbonMargin~" - "@ribbonTriangleSize~")"; @ribbonOffset: ~"calc("-@ribbonMargin~" - "@ribbonTriangleSize~")";
@ribbonDistance: ~"calc("@ribbonMargin~" + "@ribbonTriangleSize~")"; @ribbonDistance: ~"calc("@ribbonMargin~" + "@ribbonTriangleSize~")";
@rightRibbonOffset: ~"calc(100% + "@ribbonMargin~" + "@ribbonTriangleSize~")"; @rightRibbonOffset: ~"calc(100% + "@ribbonMargin~" + "@ribbonTriangleSize~")";
@ribbonSegmentMargin: 1rem;
@ribbonSegmentOffset: ~"calc("-@ribbonSegmentMargin~" - "@ribbonTriangleSize~")";
@ribbonSegmentDistance: ~"calc("@ribbonSegmentMargin~" + "@ribbonTriangleSize~")";
@rightRibbonSegmentOffset: ~"calc(100% + "@ribbonSegmentMargin~" + "@ribbonTriangleSize~")";
@ribbonImageMargin: -0.05rem; /* Rounding Offset on Triangle */
@ribbonImageOffset: ~"calc("-@ribbonImageMargin~" - "@ribbonTriangleSize~")";
@ribbonImageDistance: ~"calc("@ribbonImageMargin~" + "@ribbonTriangleSize~")";
@rightRibbonImageOffset: ~"calc(100% + "@ribbonImageMargin~" + "@ribbonTriangleSize~")";
@blackRibbonShadow: darken(@black, 10); @blackRibbonShadow: darken(@black, 10);
@blueRibbonShadow: darken(@blue, 10); @blueRibbonShadow: darken(@blue, 10);

Loading…
Cancel
Save