Skip to content

Commit

Permalink
fix(label): adjust basic ribbon label size and position
Browse files Browse the repository at this point in the history
"ui basic ribbon" has a 1px border, but "ui ribbon" does not, so "ui basic ribbon" is 1 pixel wider than "ui ribbon" in all directions:
- subtract 1px from padding on all sides of "ui ribbon basic", so it is same size as "ui ribbon"
- adjust position of "ui.basic.ribbon.label:after"

Closes #708
  • Loading branch information
globophobe authored and Sean committed May 2, 2019
1 parent 566b363 commit 9e9cb62
Show file tree
Hide file tree
Showing 2 changed files with 27 additions and 1 deletion.
23 changes: 22 additions & 1 deletion src/definitions/elements/label.less
Original file line number Diff line number Diff line change
Expand Up @@ -255,7 +255,7 @@ a.ui.label {
border-color: inherit;
border-width: @basicBorderWidth 0 0 @basicBorderWidth;
border-style: inherit;
right: e(%("calc(100%% + %d)", @basicBorderWidth));
right: @basicBorderFullWidthOffset;
}
.ui.basic.tag.labels .label:after,
.ui.basic.tag.label:after {
Expand Down Expand Up @@ -385,6 +385,27 @@ a.ui.label {
padding-left: @ribbonTriangleSize;
padding-right: @ribbonDistance;
}
.ui.basic.ribbon.label {
padding-top: @basicRibbonOffset;
padding-bottom: @basicRibbonOffset;
}
.ui.basic.ribbon.label:not([class*="right ribbon"]) {
padding-left: @basicRibbonTriangleSizeOffset;
padding-right: @basicRibbonTriangleSize;
}
.ui.basic[class*="right ribbon"].label {
padding-left: @basicRibbonTriangleSize;
padding-right: @basicRibbonTriangleSizeOffset;
}
.ui.basic.ribbon.label::after {
top: @basicBorderFullWidthOffset;
}
.ui.basic.ribbon.label:not([class*="right ribbon"])::after {
left: @basicBorderWidthOffset;
}
.ui.basic[class*="right ribbon"].label::after {
right: @basicBorderWidthOffset;
}

/* Right Ribbon */
.ui[class*="right ribbon"].label {
Expand Down
5 changes: 5 additions & 0 deletions src/themes/default/elements/label.variables
Original file line number Diff line number Diff line change
Expand Up @@ -105,6 +105,8 @@
/* Basic */
@basicBackground: none @white;
@basicBorderWidth: 1px;
@basicBorderWidthOffset: -@basicBorderWidth;
@basicBorderFullWidthOffset: e(%("calc(100%% + %d)", @basicBorderWidth));
@basicBorder: @basicBorderWidth solid @borderColor;
@basicColor: @textColor;
@basicBoxShadow: none;
Expand All @@ -128,10 +130,13 @@

/* Ribbon */
@ribbonTriangleSize: 1.2em;
@basicRibbonTriangleSize: e(%("calc(%d - %d)", @ribbonTriangleSize, @basicBorderWidth));
@basicRibbonTriangleSizeOffset: e(%("calc(1rem + %d - %d)", @ribbonTriangleSize, @basicBorderWidth));
@ribbonShadowColor: rgba(0, 0, 0, 0.15);

@ribbonMargin: 1rem;
@ribbonOffset: e(%("calc(%d - %d)", -@ribbonMargin, @ribbonTriangleSize));
@basicRibbonOffset: e(%("calc(%d - %d)", @verticalPadding, @basicBorderWidth));
@ribbonDistance: e(%("calc(%d + %d)", @ribbonMargin, @ribbonTriangleSize));
@rightRibbonOffset: e(%("calc(100%% + %d + %d)", @ribbonMargin, @ribbonTriangleSize));

Expand Down

0 comments on commit 9e9cb62

Please sign in to comment.