Skip to content

Commit

Permalink
fix(@clayui/css): Pagination update hover and active borders
Browse files Browse the repository at this point in the history
  • Loading branch information
@pat270
pat270 committed May 31, 2023
1 parent 297a214 commit abdce0e
Show file tree
Hide file tree
Showing 2 changed files with 104 additions and 8 deletions.
60 changes: 56 additions & 4 deletions packages/clay-css/src/scss/atlas/variables/_pagination.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,12 +53,15 @@ $pagination-link-hover: map-deep-merge(
(
background-color: $pagination-hover-bg,
border-color: $pagination-hover-border-color,
box-shadow: inset 0 -0.125rem 0 0 $secondary-l0,
color: $pagination-hover-color,
font-weight: $font-weight-semi-bold,
letter-spacing: 0,
text-decoration: none,
z-index: 2,
before: (
background-color: $secondary-l0,
height: 0.1875rem,
),
),
$pagination-link-hover
);
Expand Down Expand Up @@ -92,7 +95,6 @@ $pagination-link-active: map-deep-merge(
background-color: $pagination-active-bg,
border-color: $pagination-active-border-color,
color: $pagination-active-color,
box-shadow: inset 0 -0.125rem 0 0 $primary-l0,
font-weight: $font-weight-semi-bold,
letter-spacing: 0,
),
Expand All @@ -102,6 +104,9 @@ $pagination-link-active: map-deep-merge(
$pagination-link-disabled: () !default;
$pagination-link-disabled: map-deep-merge(
(
before: (
content: none,
),
focus: (
after: (
content: none,
Expand All @@ -115,19 +120,39 @@ $pagination-link: () !default;
$pagination-link: map-deep-merge(
(
letter-spacing: 0.033em,
before: (
border-radius: 0 0 $border-radius $border-radius,
bottom: 0,
content: '',
display: block,
left: 0,
position: absolute,
right: 0,
),
active: $pagination-link-active,
active-class: (
background-color: $pagination-active-bg,
border-color: $pagination-active-border-color,
color: $pagination-active-color,
box-shadow: inset 0 -0.25rem 0 0 $primary-l0,
font-weight: $font-weight-semi-bold,
letter-spacing: 0,
before: (
background-color: $primary-l0,
height: 0.25rem,
),
),
show: (
box-shadow: inset 0 -0.25rem 0 0 $primary-l0,
font-weight: $font-weight-semi-bold,
letter-spacing: 0,
before: (
background-color: transparent,
),
hover: (
before: (
background-color: $secondary-l0,
height: 0.1875rem,
),
),
),
),
$pagination-link
Expand Down Expand Up @@ -155,13 +180,40 @@ $pagination-items-per-page-link-focus: map-deep-merge(
$pagination-items-per-page-link-focus
);

$pagination-items-per-page-link-disabled: () !default;
$pagination-items-per-page-link-disabled: map-deep-merge(
(
font-weight: $font-weight-normal,
letter-spacing: 0.033em,
before: (
content: none,
),
focus: (
after: (
content: none,
),
),
),
$pagination-items-per-page-link-disabled
);

// .pagination-items-per-page > a, .pagination-items-per-page > button

$pagination-items-per-page-link: () !default;
$pagination-items-per-page-link: map-deep-merge(
(
letter-spacing: 0.025em,
before: (
border-radius: 0 0 $border-radius $border-radius,
bottom: 0,
content: '',
display: block,
left: 0,
position: absolute,
right: 0,
),
hover: $pagination-link-hover,
disabled: $pagination-items-per-page-link-disabled,
show: map-get($pagination-link, show),
),
$pagination-items-per-page-link
Expand Down
52 changes: 48 additions & 4 deletions packages/clay-css/src/scss/cadmin/variables/_pagination.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -86,12 +86,15 @@ $cadmin-pagination-link-hover: map-deep-merge(
(
background-color: $cadmin-pagination-hover-bg,
border-color: $cadmin-pagination-hover-border-color,
box-shadow: inset 0 -0.125rem 0 0 $cadmin-secondary-l0,
color: $cadmin-pagination-hover-color,
font-weight: $cadmin-font-weight-semi-bold,
letter-spacing: 0,
text-decoration: none,
z-index: 2,
before: (
background-color: $cadmin-secondary-l0,
height: 3px,
),
),
$cadmin-pagination-link-hover
);
Expand Down Expand Up @@ -125,7 +128,6 @@ $cadmin-pagination-link-active: map-deep-merge(
(
background-color: $cadmin-pagination-active-bg,
border-color: $cadmin-pagination-active-border-color,
box-shadow: inset 0 -0.125rem 0 0 $cadmin-primary-l0,
color: $cadmin-pagination-active-color,
font-weight: $cadmin-font-weight-semi-bold,
letter-spacing: 0,
Expand All @@ -145,6 +147,9 @@ $cadmin-pagination-link-disabled: map-deep-merge(
opacity: $cadmin-pagination-disabled-opacity,
pointer-events: $cadmin-pagination-disabled-pointer-events,
z-index: $cadmin-zindex-pagination-link-disabled,
before: (
content: none,
),
focus: (
after: (
content: none,
Expand Down Expand Up @@ -177,22 +182,42 @@ $cadmin-pagination-link: map-deep-merge(
padding-top: $cadmin-pagination-padding-y,
position: relative,
transition: $cadmin-pagination-link-transition,
before: (
border-radius: 0 0 $cadmin-border-radius $cadmin-border-radius,
bottom: 0,
content: '',
display: block,
left: 0,
position: absolute,
right: 0,
),
hover: $cadmin-pagination-link-hover,
focus: $cadmin-pagination-link-focus,
active: $cadmin-pagination-link-active,
active-class: (
background-color: $cadmin-pagination-active-bg,
border-color: $cadmin-pagination-active-border-color,
color: $cadmin-pagination-active-color,
box-shadow: inset 0 -0.25rem 0 0 $cadmin-primary-l0,
font-weight: $cadmin-font-weight-semi-bold,
letter-spacing: 0,
before: (
background-color: $cadmin-primary-l0,
height: 4px,
),
),
disabled: $cadmin-pagination-link-disabled,
show: (
box-shadow: inset 0 -0.25rem 0 0 $cadmin-primary-l0,
font-weight: $cadmin-font-weight-semi-bold,
letter-spacing: 0,
before: (
background-color: transparent,
),
hover: (
before: (
background-color: $cadmin-secondary-l0,
height: 3px,
),
),
),
lexicon-icon: (
margin-top: 0,
Expand Down Expand Up @@ -359,8 +384,18 @@ $cadmin-pagination-items-per-page-link-disabled: map-deep-merge(
box-shadow: none,
color: $cadmin-pagination-disabled-color,
cursor: $cadmin-pagination-disabled-cursor,
font-weight: $cadmin-font-weight-normal,
opacity: $cadmin-pagination-disabled-opacity,
pointer-events: $cadmin-pagination-disabled-pointer-events,
letter-spacing: 0.033em,
before: (
content: none,
),
focus: (
after: (
content: none,
),
),
),
$cadmin-pagination-items-per-page-link-disabled
);
Expand All @@ -386,6 +421,15 @@ $cadmin-pagination-items-per-page-link: map-deep-merge(
padding-top: $cadmin-pagination-padding-y,
text-decoration: none,
transition: $cadmin-pagination-items-per-page-transition,
before: (
border-radius: 0 0 $cadmin-border-radius $cadmin-border-radius,
bottom: 0,
content: '',
display: block,
left: 0,
position: absolute,
right: 0,
),
hover: $cadmin-pagination-items-per-page-link-hover,
focus: $cadmin-pagination-items-per-page-link-focus,
active: $cadmin-pagination-items-per-page-link-active,
Expand Down

0 comments on commit abdce0e

Please sign in to comment.