-
Notifications
You must be signed in to change notification settings - Fork 77
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
feat(pagination): add component tokens #11157
base: dev
Are you sure you want to change the base?
Changes from 2 commits
fb989c7
3e9a05f
51156ff
019c5c5
757d588
bbf4f2c
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,11 +1,26 @@ | ||
/** | ||
* CSS Custom Properties | ||
* | ||
* These properties can be overridden using the component's tag as selector. | ||
* | ||
* @prop --calcite-pagination-spacing: Specifies the amount of left and right margin spacing between each item. | ||
* @prop --calcite-pagination-width: Specifies the width of each item. | ||
* @prop --calcite-pagination-color: Specifies the component's item color. | ||
* @prop --calcite-pagination-selected-color-hover: Specifies the component's item color when hovered or selected. | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. This can be simplified down to |
||
* @prop --calcite-pagination-hover-bottom-border-color: Specifies the component's item bottom border color when hovered. | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. This should be |
||
* @prop --calcite-pagination-selected-bottom-border-color: Specifies the component's item bottom border color when selected. | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. this should be |
||
* @prop --calcite-pagination-active-background-color: Specifies the component's item background color when active. | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
|
||
* @prop --calcite-pagination-hover-chevron-background-color: Specifies the component's chevron item background color when hovered. | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
|
||
*/ | ||
|
||
:host { | ||
@apply flex; | ||
writing-mode: horizontal-tb; | ||
} | ||
|
||
.list { | ||
@apply flex list-none m-0 p-0; | ||
column-gap: var(--calcite-spacing-base); | ||
column-gap: var(--calcite-pagination-spacing, var(--calcite-spacing-base)); | ||
} | ||
|
||
.list-item { | ||
|
@@ -21,7 +36,7 @@ | |
& .page, | ||
& .ellipsis { | ||
@apply text-n2h h-6 px-1; | ||
min-inline-size: theme("width.6"); | ||
--width: theme("width.6"); | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. you should not assign tokens inside components unless they are |
||
} | ||
} | ||
|
||
|
@@ -30,7 +45,7 @@ | |
& .page, | ||
& .ellipsis { | ||
@apply text-n1h h-8 px-2; | ||
min-inline-size: theme("width.8"); | ||
--width: theme("width.8"); | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. you should not assign tokens inside components unless they are |
||
} | ||
} | ||
|
||
|
@@ -39,7 +54,7 @@ | |
& .page, | ||
& .ellipsis { | ||
@apply text-0h h-11; | ||
min-inline-size: theme("width.11"); | ||
--width: theme("width.11"); | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. you should not assign tokens inside components unless they are |
||
} | ||
|
||
& .chevron { | ||
|
@@ -66,7 +81,6 @@ | |
@apply p-0 | ||
m-0 | ||
text-0h | ||
text-color-3 | ||
font-inherit | ||
box-border | ||
flex | ||
|
@@ -76,6 +90,9 @@ | |
justify-center | ||
align-baseline | ||
bg-transparent; | ||
|
||
min-inline-size: var(--calcite-pagination-width, var(--width)); | ||
color: var(--calcite-pagination-color, var(--calcite-color-text-3)); | ||
} | ||
|
||
.chevron, | ||
|
@@ -84,19 +101,27 @@ | |
border-block: 2px solid transparent; | ||
|
||
&:hover { | ||
@apply text-color-1 transition-default; | ||
@apply transition-default; | ||
|
||
color: var(--calcite-pagination-selected-color-hover, var(--calcite-color-text-1)); | ||
} | ||
&:active { | ||
color: var(--calcite-pagination-selected-color-hover, var(--calcite-color-text-1)); | ||
} | ||
} | ||
|
||
.page { | ||
&:hover { | ||
@apply border-b-color-2; | ||
border-block-end-color: var(--calcite-pagination-hover-bottom-border-color, var(--calcite-color-border-2)); | ||
} | ||
&:active { | ||
@apply bg-foreground-3 text-color-1; | ||
background-color: var(--calcite-pagination-active-background-color, var(--calcite-color-foreground-3)); | ||
} | ||
&.selected { | ||
@apply text-color-1 border-b-color-brand font-medium; | ||
@apply font-medium; | ||
|
||
color: var(--calcite-pagination-selected-color-hover, var(--calcite-color-text-1)); | ||
border-block-end-color: var(--calcite-pagination-selected-bottom-border-color, var(--calcite-color-brand)); | ||
|
||
&:focus { | ||
border-block-end-width: var(--calcite-spacing-xxs); | ||
|
@@ -107,10 +132,10 @@ | |
|
||
.chevron { | ||
&:hover { | ||
@apply bg-foreground-2 text-color-1; | ||
background-color: var(--calcite-pagination-hover-chevron-background-color, var(--calcite-color-foreground-2)); | ||
} | ||
&:active { | ||
@apply bg-foreground-3 text-color-1; | ||
background-color: var(--calcite-pagination-active-background-color, var(--calcite-color-foreground-3)); | ||
} | ||
&.disabled { | ||
@apply pointer-events-none bg-transparent; | ||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This should be
pagination-size