Skip to content

Commit 5c50575

Browse files
matuzalemstelesmatuzalemsteles
authored
Merge pull request liferay#4297 from pat270/clay-4295
fix(@clayui/css): Cards and Panels remove decision making if statements from border-radius and border-width
2 parents 24e0183 + 677e804 commit 5c50575

37 files changed

+220
-295
lines changed

‎packages/clay-css/src/scss/atlas/variables/_cards.scss

+2-4
Original file line numberDiff line numberDiff line change
@@ -7,10 +7,8 @@ $card-body-padding-left: 1rem !default;
77
$card-body-padding-right: 1rem !default;
88
$card-body-padding-top: 1rem !default;
99

10-
$card-inner-border-radius: if(
11-
$card-border-width > 0,
12-
calc(#{$card-border-radius} - #{$card-border-width}),
13-
$card-border-radius
10+
$card-inner-border-radius: calc(
11+
#{$card-border-radius} - #{$card-border-width}
1412
) !default;
1513

1614
// Card Title

‎packages/clay-css/src/scss/cadmin/components/_alerts.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -190,7 +190,7 @@
190190

191191
.alert-list {
192192
.alert-fluid:last-child {
193-
margin-bottom: -$cadmin-alert-fluid-border-bottom-width;
193+
margin-bottom: math-sign($cadmin-alert-fluid-border-bottom-width);
194194
}
195195
}
196196
}

‎packages/clay-css/src/scss/cadmin/components/_breadcrumbs.scss

+3-1
Original file line numberDiff line numberDiff line change
@@ -62,7 +62,9 @@
6262
content: '';
6363
height: $cadmin-breadcrumb-divider-svg-icon-height;
6464
left: 0;
65-
margin-top: -$cadmin-breadcrumb-divider-svg-icon-height / 2;
65+
margin-top: calc(
66+
#{math-sign($cadmin-breadcrumb-divider-svg-icon-height)} / 2
67+
);
6668
padding: 0;
6769
position: absolute;
6870
top: 50%;

‎packages/clay-css/src/scss/cadmin/components/_dropdowns.scss

+2-2
Original file line numberDiff line numberDiff line change
@@ -188,11 +188,11 @@
188188
margin-right: 0;
189189

190190
&:first-child {
191-
margin-top: -$cadmin-dropdown-padding-y;
191+
margin-top: math-sign($cadmin-dropdown-padding-y);
192192
}
193193

194194
&:last-child {
195-
margin-bottom: -$cadmin-dropdown-padding-y;
195+
margin-bottom: math-sign($cadmin-dropdown-padding-y);
196196
}
197197
}
198198

‎packages/clay-css/src/scss/cadmin/components/_input-groups.scss

+2-2
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@
1818
position: relative;
1919

2020
+ .form-control {
21-
margin-left: -$cadmin-input-border-width;
21+
margin-left: math-sign($cadmin-input-border-width);
2222
}
2323
}
2424

@@ -45,7 +45,7 @@
4545
> .btn + .input-group-text,
4646
> .input-group-text + .input-group-text,
4747
> .input-group-text + .btn {
48-
margin-left: -$cadmin-input-border-width;
48+
margin-left: math-sign($cadmin-input-border-width);
4949
}
5050
}
5151

‎packages/clay-css/src/scss/cadmin/components/_list-group.scss

+12-10
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,7 @@
5252
$cadmin-list-group-border-color;
5353
border-right: $cadmin-list-group-border-width solid
5454
$cadmin-list-group-border-color;
55-
margin-left: -$cadmin-list-group-border-width;
55+
margin-left: math-sign($cadmin-list-group-border-width);
5656
padding: $cadmin-list-group-item-padding-y
5757
$cadmin-list-group-item-padding-x;
5858

@@ -74,7 +74,7 @@
7474
$cadmin-list-group-border-color;
7575
display: flex;
7676
justify-content: space-between;
77-
margin-bottom: -$cadmin-list-group-border-width;
77+
margin-bottom: math-sign($cadmin-list-group-border-width);
7878
padding: $cadmin-list-group-header-padding-y
7979
$cadmin-list-group-header-padding-x;
8080

@@ -206,14 +206,14 @@
206206

207207
&.active {
208208
border-top-width: $cadmin-list-group-border-width;
209-
margin-top: -$cadmin-list-group-border-width;
209+
margin-top: math-sign($cadmin-list-group-border-width);
210210
}
211211
}
212212
}
213213

214214
.list-group-item-flex {
215215
display: flex;
216-
margin-bottom: -$cadmin-list-group-border-width;
216+
margin-bottom: math-sign($cadmin-list-group-border-width);
217217
padding-left: $cadmin-list-group-item-padding-x / 2;
218218
padding-right: $cadmin-list-group-item-padding-x / 2;
219219

@@ -420,8 +420,8 @@
420420
.quick-action-menu {
421421
align-items: $cadmin-list-group-item-flex-align-items;
422422
background-color: $cadmin-list-group-bg;
423-
margin-bottom: -$cadmin-list-group-item-padding-y;
424-
margin-top: -$cadmin-list-group-item-padding-y;
423+
margin-bottom: math-sign($cadmin-list-group-item-padding-y);
424+
margin-top: math-sign($cadmin-list-group-item-padding-y);
425425
padding-bottom: $cadmin-list-group-item-padding-y;
426426
padding-top: $cadmin-list-group-item-padding-y;
427427
}
@@ -475,10 +475,12 @@
475475
}
476476

477477
.quick-action-menu {
478-
margin-bottom: -$cadmin-list-group-item-padding-y +
479-
$cadmin-list-group-notification-item-border-bottom-width;
480-
margin-top: -$cadmin-list-group-item-padding-y +
481-
$cadmin-list-group-notification-item-border-top-width;
478+
margin-bottom: calc(
479+
#{math-sign($cadmin-list-group-item-padding-y)} + #{$cadmin-list-group-notification-item-border-bottom-width}
480+
);
481+
margin-top: calc(
482+
#{math-sign($cadmin-list-group-item-padding-y)} + #{$cadmin-list-group-notification-item-border-top-width}
483+
);
482484
}
483485

484486
.autofit-col .quick-action-item {

‎packages/clay-css/src/scss/cadmin/components/_modals.scss

+7-7
Original file line numberDiff line numberDiff line change
@@ -326,11 +326,11 @@
326326
.modal {
327327
.close {
328328
&:first-child {
329-
margin-left: -$cadmin-modal-close-spacer-x;
329+
margin-left: math-sign($cadmin-modal-close-spacer-x);
330330
}
331331

332332
&:last-child {
333-
margin-right: -$cadmin-modal-close-spacer-x;
333+
margin-right: math-sign($cadmin-modal-close-spacer-x);
334334
}
335335
}
336336
}
@@ -463,31 +463,31 @@
463463
height: 100%;
464464
left: 50%;
465465
margin-bottom: 0;
466-
margin-left: -$cadmin-modal-md / 2;
466+
margin-left: calc(#{math-sign($cadmin-modal-md)} / 2);
467467
margin-right: 0;
468468
margin-top: 0;
469469
top: 0;
470470
}
471471

472472
&.modal-sm {
473473
@include media-breakpoint-up(sm, $cadmin-grid-breakpoints) {
474-
margin-left: -$cadmin-modal-sm / 2;
474+
margin-left: calc(#{math-sign($cadmin-modal-sm)} / 2);
475475
}
476476
}
477477

478478
&.modal-lg {
479479
@include media-breakpoint-up(lg, $cadmin-grid-breakpoints) {
480-
margin-left: -$cadmin-modal-lg / 2;
480+
margin-left: calc(#{math-sign($cadmin-modal-lg)} / 2);
481481
}
482482
}
483483

484484
&.modal-xl {
485485
@include media-breakpoint-up(lg, $cadmin-grid-breakpoints) {
486-
margin-left: -$cadmin-modal-lg / 2;
486+
margin-left: calc(#{math-sign($cadmin-modal-lg)} / 2);
487487
}
488488

489489
@include media-breakpoint-up(xl, $cadmin-grid-breakpoints) {
490-
margin-left: -$cadmin-modal-xl / 2;
490+
margin-left: calc(#{math-sign($cadmin-modal-xl)} / 2);
491491
}
492492
}
493493
}

‎packages/clay-css/src/scss/cadmin/components/_multi-step-nav.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -171,7 +171,7 @@
171171
background-color: $cadmin-multi-step-divider-bg;
172172
height: $cadmin-multi-step-divider-height;
173173
margin-left: $cadmin-multi-step-icon-size;
174-
margin-top: -$cadmin-multi-step-divider-height;
174+
margin-top: math-sign($cadmin-multi-step-divider-height);
175175
position: relative;
176176
top: $cadmin-multi-step-divider-top;
177177
}

‎packages/clay-css/src/scss/cadmin/components/_navbar.scss

+8-4
Original file line numberDiff line numberDiff line change
@@ -317,8 +317,12 @@
317317
}
318318

319319
.dropdown-divider {
320-
margin-left: -$cadmin-navbar-padding-x;
321-
margin-right: -$cadmin-navbar-padding-x;
320+
margin-left: math-sign(
321+
$cadmin-navbar-padding-x
322+
);
323+
margin-right: math-sign(
324+
$cadmin-navbar-padding-x
325+
);
322326
}
323327

324328
.dropdown-item {
@@ -585,7 +589,7 @@
585589
.navbar-toggler-link {
586590
&:after {
587591
background-color: $cadmin-navbar-underline-active-bg;
588-
bottom: -$cadmin-navbar-padding-y;
592+
bottom: math-sign($cadmin-navbar-padding-y);
589593
content: '';
590594
display: block;
591595
height: $cadmin-nav-underline-link-active-highlight-height;
@@ -612,7 +616,7 @@
612616
.navbar-nav .nav-link {
613617
&.active:after {
614618
background-color: $cadmin-navbar-underline-active-bg;
615-
bottom: -$cadmin-navbar-padding-y;
619+
bottom: math-sign($cadmin-navbar-padding-y);
616620
content: '';
617621
display: block;
618622
height: $cadmin-nav-underline-link-active-highlight-height;

‎packages/clay-css/src/scss/cadmin/components/_navs.scss

+2-2
Original file line numberDiff line numberDiff line change
@@ -159,7 +159,7 @@
159159
font-size: $cadmin-nav-tabs-font-size;
160160

161161
.nav-item {
162-
margin-bottom: -$cadmin-nav-tabs-border-width;
162+
margin-bottom: math-sign($cadmin-nav-tabs-border-width);
163163
}
164164

165165
.nav-link {
@@ -173,7 +173,7 @@
173173
.dropdown-menu {
174174
@include border-top-radius(0);
175175

176-
margin-top: -$cadmin-nav-tabs-border-width;
176+
margin-top: math-sign($cadmin-nav-tabs-border-width);
177177
}
178178

179179
+ .tab-content {

0 commit comments

Comments
 (0)