UNPKG

@shopware-ag/meteor-component-library

Version:

The meteor component library is a Vue component library developed by Shopware. It is based on the [Meteor Design System](https://shopware.design/).

79 lines (76 loc) 2.3 kB
.mt-pagination { &[data-v-96226e69] { display: flex; align-items: baseline; gap: var(--scale-size-12); } &[data-v-96226e69] :last-child { border-top-right-radius: var(--border-radius-xs); border-bottom-right-radius: var(--border-radius-xs); } &[data-v-96226e69] :first-child { border-top-left-radius: var(--border-radius-xs); border-bottom-left-radius: var(--border-radius-xs); } } .mt-pagination__controls[data-v-96226e69] { display: inline-flex; border-radius: var(--border-radius-xs); border: 1px solid var(--color-border-primary-default); } .mt-pagination__info-text[data-v-96226e69] { color: var(--color-text-secondary-default); font-size: var(--font-size-xs); line-height: var(--font-line-height-xs); font-family: var(--font-family-body); } .mt-pagination__button { &[data-v-96226e69] { border-right: 1px solid var(--color-border-primary-default); color: var(--color-icon-primary-default); height: var(--scale-size-32); width: var(--scale-size-40); display: grid; place-items: center; transition-property: background-color, color, border-color; transition-duration: 0.15s; transition-timing-function: ease-out; } &[data-v-96226e69]:focus-visible { outline: var(--scale-size-2) solid var(--color-border-brand-default); outline-offset: var(--scale-size-2); background-color: var(--color-interaction-secondary-hover); } &[data-v-96226e69]:hover:not(:disabled) { background-color: var(--color-interaction-secondary-hover); } &[data-v-96226e69]:last-of-type { border-right: none; } &[data-v-96226e69]:disabled { background-color: var(--color-interaction-secondary-disabled); cursor: not-allowed; } } .mt-pagination__current-page-input { &[data-v-96226e69] { all: unset; width: auto; border-right: 1px solid var(--color-border-primary-default); padding: 0 var(--scale-size-12); color: var(--color-text-primary-default); font-size: var(--font-size-xs); line-height: var(--font-line-height-xs); font-family: var(--font-family-body); font-feature-settings: "tnum"; /* Firefox */ } &[data-v-96226e69]::-webkit-outer-spin-button, &[data-v-96226e69]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } &[type="number"][data-v-96226e69] { -moz-appearance: textfield; } }