Skip to content

Commit

Permalink
fix(@clayui/css): Table List move inner border-radius styles to Sass …
Browse files Browse the repository at this point in the history 
…variables
  • Loading branch information
@pat270
pat270 committed Mar 16, 2022
1 parent 9c1d5f4 commit 47922c7
Show file tree
Hide file tree
Showing 2 changed files with 70 additions and 69 deletions.
86 changes: 26 additions & 60 deletions packages/clay-css/src/scss/components/_tables.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,21 +37,6 @@ caption {
thead {
// Chrome 87 rendering issue. See https://github.com/liferay/clay/issues/3847.

border-top-left-radius: clay-enable-rounded(
clay-border-radius-inner(
$table-list-border-radius,
$table-list-border-x-width,
$table-list-border-y-width
)
);
border-top-right-radius: clay-enable-rounded(
clay-border-radius-inner(
$table-list-border-radius,
$table-list-border-x-width,
$table-list-border-y-width
)
);

@include clay-css($c-table-thead);

td,
Expand Down Expand Up @@ -111,21 +96,6 @@ caption {
tbody {
// Chrome 87 rendering issue. See https://github.com/liferay/clay/issues/3847.

border-bottom-left-radius: clay-enable-rounded(
clay-border-radius-inner(
$table-list-border-radius,
$table-list-border-x-width,
$table-list-border-y-width
)
);
border-bottom-right-radius: clay-enable-rounded(
clay-border-radius-inner(
$table-list-border-radius,
$table-list-border-x-width,
$table-list-border-y-width
)
);

@include clay-css($c-table-tbody);

td,
Expand Down Expand Up @@ -453,24 +423,20 @@ caption {
th:first-child,
td:first-child,
.table-cell-start {
border-top-left-radius: clay-enable-rounded(
clay-border-radius-inner(
$table-list-border-radius,
$table-list-border-x-width,
$table-list-border-y-width
@include clay-css(
map-deep-get(
$c-table-list,
table-row-start,
table-cell-start
)
);
}

th:last-child,
td:last-child,
.table-cell-start {
border-top-right-radius: clay-enable-rounded(
clay-border-radius-inner(
$table-list-border-radius,
$table-list-border-x-width,
$table-list-border-y-width
)
.table-cell-end {
@include clay-css(
map-deep-get($c-table-list, table-row-start, table-cell-end)
);
}
}
Expand All @@ -493,23 +459,23 @@ caption {
th:first-child,
td:first-child,
.table-cell-start {
border-bottom-left-radius: clay-enable-rounded(
clay-border-radius-inner(
$table-list-border-radius,
$table-list-border-x-width,
$table-list-border-y-width
@include clay-css(
map-deep-get(
$c-table-list,
table-row-end,
table-cell-start
)
);
}

th:last-child,
td:last-child,
.table-cell-end {
border-bottom-right-radius: clay-enable-rounded(
clay-border-radius-inner(
$table-list-border-radius,
$table-list-border-x-width,
$table-list-border-y-width
@include clay-css(
map-deep-get(
$c-table-list,
table-row-end,
table-cell-end
)
);
}
Expand Down Expand Up @@ -566,28 +532,28 @@ caption {

.table-row-start {
.table-cell-start {
border-top-left-radius: clay-enable-rounded(
$table-list-border-radius
@include clay-css(
map-deep-get($c-table-list, table-row-start, table-cell-start)
);
}

.table-cell-end {
border-top-right-radius: clay-enable-rounded(
$table-list-border-radius
@include clay-css(
map-deep-get($c-table-list, table-row-start, table-cell-end)
);
}
}

.table-row-end {
.table-cell-start {
border-bottom-left-radius: clay-enable-rounded(
$table-list-border-radius
@include clay-css(
map-deep-get($c-table-list, table-row-end, table-cell-start)
);
}

.table-cell-end {
border-bottom-right-radius: clay-enable-rounded(
$table-list-border-radius
@include clay-css(
map-deep-get($c-table-list, table-row-end, table-cell-end)
);
}
}
Expand Down
53 changes: 44 additions & 9 deletions packages/clay-css/src/scss/variables/_tables.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -241,17 +241,16 @@ $table-border-level: -6 !default;

$table-list-bg: $white !default;
$table-list-border-color: $table-border-color !default;
$table-list-color: null !default;
$table-list-font-size: null !default;
$table-list-margin-top: null !default;
$table-list-border-radius: $border-radius !default;

$table-list-border-x-width: 0.0625rem !default;
$table-list-border-y-width: 0.0625rem !default;

$table-list-border-width: $table-list-border-y-width $table-list-border-x-width !default;
$table-list-color: null !default;
$table-list-font-size: null !default;
$table-list-margin-bottom: $table-list-border-y-width !default;

$table-list-border-radius: $border-radius !default;
$table-list-margin-top: null !default;

$c-table-list: () !default;
$c-table-list: map-merge(
Expand All @@ -265,6 +264,46 @@ $c-table-list: map-merge(
font-size: $table-list-font-size,
margin-bottom: $table-list-margin-bottom,
margin-top: $table-list-margin-top,
table-row-start: (
table-cell-start: (
border-top-left-radius:
clay-enable-rounded(
clay-border-radius-inner(
$table-list-border-radius,
$table-list-border-y-width
)
),
),
table-cell-end: (
border-top-right-radius:
clay-enable-rounded(
clay-border-radius-inner(
$table-list-border-radius,
$table-list-border-y-width
)
),
),
),
table-row-end: (
table-cell-start: (
border-bottom-left-radius:
clay-enable-rounded(
clay-border-radius-inner(
$table-list-border-radius,
$table-list-border-y-width
)
),
),
table-cell-end: (
border-bottom-right-radius:
clay-enable-rounded(
clay-border-radius-inner(
$table-list-border-radius,
$table-list-border-y-width
)
),
),
),
),
$c-table-list
);
Expand Down Expand Up @@ -321,13 +360,11 @@ $c-table-list-thead: map-merge(
border-top-left-radius:
clay-border-radius-inner(
$table-list-border-radius,
$table-list-border-x-width,
$table-list-border-y-width
),
border-top-right-radius:
clay-border-radius-inner(
$table-list-border-radius,
$table-list-border-x-width,
$table-list-border-y-width
),
),
Expand All @@ -343,13 +380,11 @@ $c-table-list-tbody: map-merge(
border-bottom-left-radius:
clay-border-radius-inner(
$table-list-border-radius,
$table-list-border-x-width,
$table-list-border-y-width
),
border-bottom-right-radius:
clay-border-radius-inner(
$table-list-border-radius,
$table-list-border-x-width,
$table-list-border-y-width
),
),
Expand Down

0 comments on commit 47922c7

Please sign in to comment.