Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 6 additions & 6 deletions packages/mercury/src/components/paginator/_paginator-styles.scss
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@
color: var(--mer-icon__neutral);
padding: var(--mer-spacing--2xs) var(--mer-spacing--xs);

&--active {
&--selected {
background: var(--mer-accent__primary);
color: var(--mer-text__on-primary);
}
Expand Down Expand Up @@ -70,7 +70,7 @@
// [".paginator::part(items-per-page-info)"] -
/// @param {String} $paginator__navigation-page-selector: [".paginator::part(page)"] -
/// @param {String} $paginator__navigation-page-not-selected-selector: [".paginator::part(page page-not-selected)"] -
/// @param {String} $paginator__navigation-page-active-selector: [".paginator::part(page page-active)"] -
/// @param {String} $paginator__navigation-page-selected-selector: [".paginator::part(page selected)"] -
/// @param {String} $paginator__navigation-pages-selector: [".paginator::part(pages)"] -
/// @param {String} $paginator__first-button-selector [".paginator::part(first__button)"] -
/// @param {String} $paginator__last-button-selector [".paginator::part(last__button)"] -
Expand Down Expand Up @@ -107,8 +107,8 @@
$paginator__navigation-page-selector: ".paginator::part(page)",
$paginator__navigation-page-not-selected-selector:
".paginator::part(page page-not-selected)",
$paginator__navigation-page-active-selector:
".paginator::part(page page-active)",
$paginator__navigation-page-selected-selector:
".paginator::part(page selected)",
$paginator__navigation-pages-selector: ".paginator::part(pages)",
$paginator__first-button-selector: ".paginator::part(first__button)",
$paginator__last-button-selector: ".paginator::part(last__button)",
Expand Down Expand Up @@ -202,9 +202,9 @@
}
}

#{$paginator__navigation-page-active-selector} {
#{$paginator__navigation-page-selected-selector} {
@extend %body-semi-bold-s;
@extend %paginator__pages__button--active;
@extend %paginator__pages__button--selected;
}

@include combo-box(
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -241,9 +241,9 @@
".icon-sm { --ch-image-size: var(--mer-icon__box--sm); --ch-image-background-size: var(--mer-icon__size--sm); }",
".input-error { --control__border-color: var(--control__border-color--error); }",
".input:disabled { --control__bg-color: var(--control__background-color--disabled); --control__border-color: var(--control__border-color--disabled); --control__color: var(--control__color--disabled); --ch-placeholder-color: var(--control-placeholder__color--disabled); }",
".label, .paginator::part(items-per-page__label), .radio-group::part(radio__label), .pill, .checkbox::part(label), .body-semi-bold-xs, .body-semi-bold-s, .paginator::part(page page-active), .tabular-grid-column, .body-semi-bold-m, .button-primary, .button-primary-destructive, .button-primary-success, .dropdown.button-primary::part(expandable-button), .segmented-control-filled .segmented-control-item::part(action), .button-secondary, .button-secondary-destructive, .chat-live-audio-button, .dropdown.button-secondary::part(expandable-button), .chat::part(send-button), .chat::part(stop-response-button), .body-semi-bold-l, .body-semi-bold-xl { font-weight: var(--font-weight-semi-bold); }",
".label, .paginator::part(items-per-page__label), .radio-group::part(radio__label), .pill, .checkbox::part(label), .body-semi-bold-xs, .body-semi-bold-s, .paginator::part(page selected), .tabular-grid-column, .body-semi-bold-m, .button-primary, .button-primary-destructive, .button-primary-success, .dropdown.button-primary::part(expandable-button), .segmented-control-filled .segmented-control-item::part(action), .button-secondary, .button-secondary-destructive, .chat-live-audio-button, .dropdown.button-secondary::part(expandable-button), .chat::part(send-button), .chat::part(stop-response-button), .body-semi-bold-l, .body-semi-bold-xl { font-weight: var(--font-weight-semi-bold); }",
".label, .paginator::part(items-per-page__label), .switch-large, .radio-group::part(radio__label), .pill, .navigation-list::part(item__caption tooltip), .list-box::part(item__action), .list-box::part(group__action), .combo-box, .paginator::part(items-per-page__combo-box), .checkbox::part(label), .chat::part(send-input), .input, .paginator::part(go-to__input), .dropdown::part(action), .body-italic-m, .combo-box[part=\"ch-combo-box-render--placeholder\"], .input[part*=\"ch-edit--empty-value\"], .body-semi-bold-m, .button-primary, .button-primary-destructive, .button-primary-success, .dropdown.button-primary::part(expandable-button), .segmented-control-filled .segmented-control-item::part(action), .button-secondary, .button-secondary-destructive, .chat-live-audio-button, .dropdown.button-secondary::part(expandable-button), .chat::part(send-button), .chat::part(stop-response-button) { font-size: var(--font-size-body-m); }",
".label, .paginator::part(items-per-page__label), .tree-view, .tooltip::part(window), .switch-small, .switch-large, .tabular-grid, .property-grid, .tabular-grid-cell .combo-box, .property-grid-cell .combo-box, .tabular-grid-cell .input, .property-grid-cell .input, .radio-group::part(radio__label), .pill, .navigation-list::part(item__caption tooltip), .list-box::part(item__action), .list-box::part(group__action), .combo-box, .paginator::part(items-per-page__combo-box), .checkbox::part(label), .chat::part(header__time), .chat::part(send-input), .input, .paginator::part(go-to__input), .dropdown::part(action), .body-italic-xs, .body-italic-s, .body-italic-m, .combo-box[part=\"ch-combo-box-render--placeholder\"], .input[part*=\"ch-edit--empty-value\"], .body-italic-l, .body-italic-xl, .body-semi-bold-xs, .body-semi-bold-s, .paginator::part(page page-active), .tabular-grid-column, .body-semi-bold-m, .button-primary, .button-primary-destructive, .button-primary-success, .dropdown.button-primary::part(expandable-button), .segmented-control-filled .segmented-control-item::part(action), .button-secondary, .button-secondary-destructive, .chat-live-audio-button, .dropdown.button-secondary::part(expandable-button), .chat::part(send-button), .chat::part(stop-response-button), .body-semi-bold-l, .body-semi-bold-xl, .body-regular-xs, .chat::part(file-footer), .body-regular-s, .paginator, .flexible-layout::part(tab block closable), .flexible-layout::part(tab block not-closable), .flexible-layout::part(tab inline-start), .flexible-layout::part(tab inline-end), .tab::part(tab block closable), .tab::part(tab block not-closable), .tab::part(tab inline-start), .tab::part(tab inline-end), .body-regular-l, .body-regular-xl { line-height: var(--line-height-tight); }",
".label, .paginator::part(items-per-page__label), .tree-view, .tooltip::part(window), .switch-small, .switch-large, .tabular-grid, .property-grid, .tabular-grid-cell .combo-box, .property-grid-cell .combo-box, .tabular-grid-cell .input, .property-grid-cell .input, .radio-group::part(radio__label), .pill, .navigation-list::part(item__caption tooltip), .list-box::part(item__action), .list-box::part(group__action), .combo-box, .paginator::part(items-per-page__combo-box), .checkbox::part(label), .chat::part(header__time), .chat::part(send-input), .input, .paginator::part(go-to__input), .dropdown::part(action), .body-italic-xs, .body-italic-s, .body-italic-m, .combo-box[part=\"ch-combo-box-render--placeholder\"], .input[part*=\"ch-edit--empty-value\"], .body-italic-l, .body-italic-xl, .body-semi-bold-xs, .body-semi-bold-s, .paginator::part(page selected), .tabular-grid-column, .body-semi-bold-m, .button-primary, .button-primary-destructive, .button-primary-success, .dropdown.button-primary::part(expandable-button), .segmented-control-filled .segmented-control-item::part(action), .button-secondary, .button-secondary-destructive, .chat-live-audio-button, .dropdown.button-secondary::part(expandable-button), .chat::part(send-button), .chat::part(stop-response-button), .body-semi-bold-l, .body-semi-bold-xl, .body-regular-xs, .chat::part(file-footer), .body-regular-s, .paginator, .flexible-layout::part(tab block closable), .flexible-layout::part(tab block not-closable), .flexible-layout::part(tab inline-start), .flexible-layout::part(tab inline-end), .tab::part(tab block closable), .tab::part(tab block not-closable), .tab::part(tab inline-start), .tab::part(tab inline-end), .body-regular-l, .body-regular-xl { line-height: var(--line-height-tight); }",
".label--disabled { --label__color: var(--label__color--disabled); }",
".label--disabled { --label__color: var(--label__color--disabled); }",
".layout { --spacing-body-block-start: var(--mer-spacing--md); --spacing-body-block-end: var(--mer-spacing--md); --spacing-body-inline-start: var(--mer-spacing--lg); --spacing-body-inline-end: var(--mer-spacing--lg); display: grid; gap: var(--mer-spacing--md); }",
Expand Down Expand Up @@ -289,7 +289,7 @@
".paginator::part(items-per-page__combo-box) { inline-size: 80px; }",
".paginator::part(last__button)::before { --button-arrow-icon: var(--icon__system_chevron-pag-right_primary--enabled); }",
".paginator::part(next__button)::before { --button-arrow-icon: var(--icon__system_chevron-right_primary--enabled); }",
".paginator::part(page page-active) { background: var(--mer-accent__primary); color: var(--mer-text__on-primary); }",
".paginator::part(page selected) { background: var(--mer-accent__primary); color: var(--mer-text__on-primary); }",
".paginator::part(page) { border-radius: var(--mer-border__radius--sm); color: var(--mer-icon__neutral); padding: var(--mer-spacing--2xs) var(--mer-spacing--xs); }",
".paginator::part(page):hover { color: var(--mer-icon__on-primary--hover); background-color: var(--item__bg-color--selected-hover); }",
".paginator::part(pages) { gap: var(--mer-spacing--xs); }",
Expand Down Expand Up @@ -477,7 +477,7 @@
".tree-view { --ch-tree-view-item-custom-padding-inline-start: var(--mer-spacing--xs); --ch-tree-view-item-gap: var(--mer-spacing--xs); --ch-tree-view-item__checkbox-size: var(--mer-spacing--md); --ch-tree-view-item__expandable-button-size: var(--mer-spacing--md); --ch-tree-view-item__image-size: var(--mer-spacing--md); --ch-tree-view-item__background-image-size: var(--mer-icon__box--md); --ch-tree-view-item__line--inset-inline-end: 4px; --tree-view__min-inline-size: max-content; --tree-view-item-custom__padding-inline-end: var(--mer-spacing--2xs); --tree-view-item-dashed-line__border-color: var(--mer-text__on-surface); --tree-view-item-dashed-line__opacity: 0.3; --tree-view-item-header__padding-block: calc(var(--mer-spacing--3xs)); --tree-view-item-downloading__inline-size: var(--mer-spacing--sm); --tree-view-item-downloading__block-size: var(--mer-spacing--sm); --tree-view-item-downloading__border: var(--mer-border__width--md) solid var(--mer-accent__primary--active); line-height: var(--tree-view-item__line-height); min-inline-size: var(--tree-view__min-inline-size); }",
".tree-view { scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb__bg-color) var(--scrollbar-track__bg-color); }",
".tree-view, .tooltip::part(window), .switch-small, .switch-large, .tabular-grid, .property-grid, .tabular-grid-cell .combo-box, .property-grid-cell .combo-box, .tabular-grid-cell .input, .property-grid-cell .input, .navigation-list::part(item__caption tooltip), .list-box::part(item__action), .list-box::part(group__action), .combo-box, .paginator::part(items-per-page__combo-box), .chat::part(send-input), .input, .paginator::part(go-to__input), .dropdown::part(action), .body-regular-xs, .chat::part(file-footer), .body-regular-s, .paginator, .flexible-layout::part(tab block closable), .flexible-layout::part(tab block not-closable), .flexible-layout::part(tab inline-start), .flexible-layout::part(tab inline-end), .tab::part(tab block closable), .tab::part(tab block not-closable), .tab::part(tab inline-start), .tab::part(tab inline-end), .body-regular-l, .body-regular-xl { font-weight: var(--font-weight-regular); }",
".tree-view, .tooltip::part(window), .switch-small, .tabular-grid, .property-grid, .tabular-grid-cell .combo-box, .property-grid-cell .combo-box, .tabular-grid-cell .input, .property-grid-cell .input, .chat::part(header__time), .body-italic-s, .body-semi-bold-s, .paginator::part(page page-active), .tabular-grid-column, .body-regular-s, .paginator, .flexible-layout::part(tab block closable), .flexible-layout::part(tab block not-closable), .flexible-layout::part(tab inline-start), .flexible-layout::part(tab inline-end), .tab::part(tab block closable), .tab::part(tab block not-closable), .tab::part(tab inline-start), .tab::part(tab inline-end) { font-size: var(--font-size-body-s); }",
".tree-view, .tooltip::part(window), .switch-small, .tabular-grid, .property-grid, .tabular-grid-cell .combo-box, .property-grid-cell .combo-box, .tabular-grid-cell .input, .property-grid-cell .input, .chat::part(header__time), .body-italic-s, .body-semi-bold-s, .paginator::part(page selected), .tabular-grid-column, .body-regular-s, .paginator, .flexible-layout::part(tab block closable), .flexible-layout::part(tab block not-closable), .flexible-layout::part(tab inline-start), .flexible-layout::part(tab inline-end), .tab::part(tab block closable), .tab::part(tab block not-closable), .tab::part(tab inline-start), .tab::part(tab inline-end) { font-size: var(--font-size-body-s); }",
".tree-view::-webkit-scrollbar { width: var(--scrollbar__size); height: var(--scrollbar__size); }",
".tree-view::-webkit-scrollbar-corner { background: var(--scrollbar-corner__bg); }",
".tree-view::-webkit-scrollbar-thumb { background-color: var(--scrollbar-thumb__bg-color); border-radius: var(--scrollbar-thumb__border-radius); }",
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -24,12 +24,12 @@
".paginator::part(items-per-page__combo-box):focus { border-color: var(--borders-un-border-color__focused); }",
".paginator::part(items-per-page__combo-box):hover { --control__border-color: var(--control__border-color--hover); }",
".paginator::part(items-per-page__label) { font-size: var(--font-size-body-m); }",
".paginator::part(items-per-page__label), .paginator::part(page page-active) { font-weight: var(--font-weight-semi-bold); }",
".paginator::part(items-per-page__label), .paginator::part(page page-active), .paginator { line-height: var(--line-height-tight); }",
".paginator::part(items-per-page__label), .paginator::part(page selected) { font-weight: var(--font-weight-semi-bold); }",
".paginator::part(items-per-page__label), .paginator::part(page selected), .paginator { line-height: var(--line-height-tight); }",
".paginator::part(last__button)::before { --button-arrow-icon: var(--icon__system_chevron-pag-right_primary--enabled); }",
".paginator::part(next__button)::before { --button-arrow-icon: var(--icon__system_chevron-right_primary--enabled); }",
".paginator::part(page page-active) { background: var(--mer-accent__primary); color: var(--mer-text__on-primary); }",
".paginator::part(page page-active), .paginator { font-size: var(--font-size-body-s); }",
".paginator::part(page selected) { background: var(--mer-accent__primary); color: var(--mer-text__on-primary); }",
".paginator::part(page selected), .paginator { font-size: var(--font-size-body-s); }",
".paginator::part(page) { border-radius: var(--mer-border__radius--sm); color: var(--mer-icon__neutral); padding: var(--mer-spacing--2xs) var(--mer-spacing--xs); }",
".paginator::part(page):hover { color: var(--mer-icon__on-primary--hover); background-color: var(--item__bg-color--selected-hover); }",
".paginator::part(pages) { gap: var(--mer-spacing--xs); }",
Expand All @@ -43,4 +43,4 @@
".paginator::part(window) { border-style: var(--items-container__border-style); border-width: var(--items-container__border-width); border-radius: var(--items-container__border-radius); background-color: var(--elevation-background-color, var(--items-container__bg-color)); border-color: var(--elevation-border-color, var(--items-container__border-color)); padding-block: var(--items-container__padding-block); padding-inline: var(--items-container__padding-inline); gap: var(--items-container__gap); box-shadow: var(--items-container__box-shadow); font-style: normal; }",
"@keyframes spin { \n 0% { transform: rotate(0deg); }\n 100% { transform: rotate(360deg); }\n}",
"paginator__previous-button-selector, paginator__next-button-selector, paginator__last-button-selector, paginator__first-button-selector { padding: calc((var(--control__block-size) - 2*var(--control__border-width) - var(--mer-icon__box--md))/2); border-width: var(--control__border-width); border-style: var(--control__border-style); border-color: var(--control__border-color); border-radius: var(--control__border-radius); }"
]
]
Loading