mirror of
https://github.com/jgthms/bulma.git
synced 2024-12-12 13:28:30 +00:00
380 lines
12 KiB
SCSS
380 lines
12 KiB
SCSS
@use "../utilities/css-variables" as cv;
|
|
@use "../utilities/initial-variables" as iv;
|
|
@use "../utilities/derived-variables" as dv;
|
|
@use "../utilities/extends";
|
|
@use "../utilities/mixins" as mx;
|
|
|
|
$pagination-margin: -0.25rem !default;
|
|
$pagination-min-width: cv.getVar("control-height") !default;
|
|
|
|
$pagination-item-h: cv.getVar("scheme-h");
|
|
$pagination-item-s: cv.getVar("scheme-s");
|
|
$pagination-item-l: cv.getVar("scheme-main-l");
|
|
$pagination-item-background-l-delta: 0%;
|
|
$pagination-item-hover-background-l-delta: cv.getVar(
|
|
"hover-background-l-delta"
|
|
);
|
|
$pagination-item-active-background-l-delta: cv.getVar(
|
|
"active-background-l-delta"
|
|
);
|
|
$pagination-item-border-l: cv.getVar("border-l");
|
|
$pagination-item-border-l-delta: 0%;
|
|
$pagination-item-border-style: solid !default;
|
|
$pagination-item-border-width: cv.getVar("control-border-width") !default;
|
|
$pagination-item-hover-border-l-delta: cv.getVar("hover-border-l-delta");
|
|
$pagination-item-active-border-l-delta: cv.getVar("active-border-l-delta");
|
|
$pagination-item-focus-border-l-delta: cv.getVar("focus-border-l-delta");
|
|
$pagination-item-color-l: cv.getVar("text-strong-l");
|
|
$pagination-item-font-size: 1em !default;
|
|
$pagination-item-margin: 0.25rem !default;
|
|
$pagination-item-padding-left: 0.5em !default;
|
|
$pagination-item-padding-right: 0.5em !default;
|
|
$pagination-item-outer-shadow-h: 0;
|
|
$pagination-item-outer-shadow-s: 0%;
|
|
$pagination-item-outer-shadow-l: 20%;
|
|
$pagination-item-outer-shadow-a: 0.05;
|
|
|
|
$pagination-selected-item-h: cv.getVar("link-h");
|
|
$pagination-selected-item-s: cv.getVar("link-s");
|
|
$pagination-selected-item-l: cv.getVar("link-l");
|
|
$pagination-selected-item-background-l: cv.getVar("link-l");
|
|
$pagination-selected-item-border-l: cv.getVar("link-l");
|
|
$pagination-selected-item-color-l: cv.getVar("link-invert-l");
|
|
|
|
$pagination-nav-padding-left: 0.75em !default;
|
|
$pagination-nav-padding-right: 0.75em !default;
|
|
|
|
$pagination-disabled-color: cv.getVar("text-weak") !default;
|
|
$pagination-disabled-background-color: cv.getVar("border") !default;
|
|
$pagination-disabled-border-color: cv.getVar("border") !default;
|
|
|
|
$pagination-current-color: cv.getVar("link-invert") !default;
|
|
$pagination-current-background-color: cv.getVar("link") !default;
|
|
$pagination-current-border-color: cv.getVar("link") !default;
|
|
|
|
$pagination-ellipsis-color: cv.getVar("text-weak") !default;
|
|
|
|
$pagination-shadow-inset: inset 0 0.0625em 0.125em
|
|
hsla(
|
|
#{cv.getVar("scheme-h")},
|
|
#{cv.getVar("scheme-s")},
|
|
#{cv.getVar("scheme-invert-l")},
|
|
0.2
|
|
) !default;
|
|
|
|
.#{iv.$class-prefix}pagination {
|
|
@include cv.register-vars(
|
|
(
|
|
"pagination-margin": #{$pagination-margin},
|
|
"pagination-min-width": #{$pagination-min-width},
|
|
"pagination-item-h": #{$pagination-item-h},
|
|
"pagination-item-s": #{$pagination-item-s},
|
|
"pagination-item-l": #{$pagination-item-l},
|
|
"pagination-item-background-l-delta": #{$pagination-item-background-l-delta},
|
|
"pagination-item-hover-background-l-delta": #{$pagination-item-hover-background-l-delta},
|
|
"pagination-item-active-background-l-delta": #{$pagination-item-active-background-l-delta},
|
|
"pagination-item-border-style": #{$pagination-item-border-style},
|
|
"pagination-item-border-width": #{$pagination-item-border-width},
|
|
"pagination-item-border-l": #{$pagination-item-border-l},
|
|
"pagination-item-border-l-delta": #{$pagination-item-border-l-delta},
|
|
"pagination-item-hover-border-l-delta": #{$pagination-item-hover-border-l-delta},
|
|
"pagination-item-active-border-l-delta": #{$pagination-item-active-border-l-delta},
|
|
"pagination-item-focus-border-l-delta": #{$pagination-item-focus-border-l-delta},
|
|
"pagination-item-color-l": #{$pagination-item-color-l},
|
|
"pagination-item-font-size": #{$pagination-item-font-size},
|
|
"pagination-item-margin": #{$pagination-item-margin},
|
|
"pagination-item-padding-left": #{$pagination-item-padding-left},
|
|
"pagination-item-padding-right": #{$pagination-item-padding-right},
|
|
"pagination-item-outer-shadow-h": #{$pagination-item-outer-shadow-h},
|
|
"pagination-item-outer-shadow-s": #{$pagination-item-outer-shadow-s},
|
|
"pagination-item-outer-shadow-l": #{$pagination-item-outer-shadow-l},
|
|
"pagination-item-outer-shadow-a": #{$pagination-item-outer-shadow-a},
|
|
"pagination-nav-padding-left": #{$pagination-nav-padding-left},
|
|
"pagination-nav-padding-right": #{$pagination-nav-padding-right},
|
|
"pagination-disabled-color": #{$pagination-disabled-color},
|
|
"pagination-disabled-background-color": #{$pagination-disabled-background-color},
|
|
"pagination-disabled-border-color": #{$pagination-disabled-border-color},
|
|
"pagination-current-color": #{$pagination-current-color},
|
|
"pagination-current-background-color": #{$pagination-current-background-color},
|
|
"pagination-current-border-color": #{$pagination-current-border-color},
|
|
"pagination-ellipsis-color": #{$pagination-ellipsis-color},
|
|
"pagination-shadow-inset": #{$pagination-shadow-inset},
|
|
"pagination-selected-item-h": #{$pagination-selected-item-h},
|
|
"pagination-selected-item-s": #{$pagination-selected-item-s},
|
|
"pagination-selected-item-l": #{$pagination-selected-item-l},
|
|
"pagination-selected-item-background-l": #{$pagination-selected-item-background-l},
|
|
"pagination-selected-item-border-l": #{$pagination-selected-item-border-l},
|
|
"pagination-selected-item-color-l": #{$pagination-selected-item-color-l},
|
|
)
|
|
);
|
|
}
|
|
|
|
.#{iv.$class-prefix}pagination {
|
|
@extend %block;
|
|
|
|
font-size: cv.getVar("size-normal");
|
|
margin: cv.getVar("pagination-margin");
|
|
|
|
// Sizes
|
|
&.#{iv.$class-prefix}is-small {
|
|
font-size: cv.getVar("size-small");
|
|
}
|
|
|
|
&.#{iv.$class-prefix}is-medium {
|
|
font-size: cv.getVar("size-medium");
|
|
}
|
|
|
|
&.#{iv.$class-prefix}is-large {
|
|
font-size: cv.getVar("size-large");
|
|
}
|
|
|
|
&.#{iv.$class-prefix}is-rounded {
|
|
.#{iv.$class-prefix}pagination-previous,
|
|
.#{iv.$class-prefix}pagination-next {
|
|
padding-left: 1em;
|
|
padding-right: 1em;
|
|
border-radius: cv.getVar("radius-rounded");
|
|
}
|
|
|
|
.#{iv.$class-prefix}pagination-link {
|
|
border-radius: cv.getVar("radius-rounded");
|
|
}
|
|
}
|
|
}
|
|
|
|
.#{iv.$class-prefix}pagination,
|
|
.#{iv.$class-prefix}pagination-list {
|
|
align-items: center;
|
|
display: flex;
|
|
justify-content: center;
|
|
text-align: center;
|
|
}
|
|
|
|
.#{iv.$class-prefix}pagination-previous,
|
|
.#{iv.$class-prefix}pagination-next,
|
|
.#{iv.$class-prefix}pagination-link,
|
|
.#{iv.$class-prefix}pagination-ellipsis {
|
|
@extend %control;
|
|
@extend %unselectable;
|
|
color: hsl(
|
|
#{cv.getVar("pagination-item-h")},
|
|
#{cv.getVar("pagination-item-s")},
|
|
#{cv.getVar("pagination-item-color-l")}
|
|
);
|
|
font-size: cv.getVar("pagination-item-font-size");
|
|
justify-content: center;
|
|
margin: cv.getVar("pagination-item-margin");
|
|
padding-left: cv.getVar("pagination-item-padding-left");
|
|
padding-right: cv.getVar("pagination-item-padding-right");
|
|
text-align: center;
|
|
}
|
|
|
|
.#{iv.$class-prefix}pagination-previous,
|
|
.#{iv.$class-prefix}pagination-next,
|
|
.#{iv.$class-prefix}pagination-link {
|
|
background-color: hsl(
|
|
#{cv.getVar("pagination-item-h")},
|
|
#{cv.getVar("pagination-item-s")},
|
|
calc(
|
|
#{cv.getVar("pagination-item-background-l")} + #{cv.getVar(
|
|
"pagination-item-background-l-delta"
|
|
)}
|
|
)
|
|
);
|
|
border-color: hsl(
|
|
#{cv.getVar("pagination-item-h")},
|
|
#{cv.getVar("pagination-item-s")},
|
|
calc(
|
|
#{cv.getVar("pagination-item-border-l")} + #{cv.getVar(
|
|
"pagination-item-border-l-delta"
|
|
)}
|
|
)
|
|
);
|
|
border-style: cv.getVar("pagination-item-border-style");
|
|
border-width: cv.getVar("pagination-item-border-width");
|
|
box-shadow:
|
|
0px 0.0625em 0.125em
|
|
hsla(
|
|
cv.getVar("pagination-item-outer-shadow-h"),
|
|
cv.getVar("pagination-item-outer-shadow-s"),
|
|
cv.getVar("pagination-item-outer-shadow-l"),
|
|
cv.getVar("pagination-item-outer-shadow-a")
|
|
),
|
|
0px 0.125em 0.25em
|
|
hsla(
|
|
cv.getVar("pagination-item-outer-shadow-h"),
|
|
cv.getVar("pagination-item-outer-shadow-s"),
|
|
cv.getVar("pagination-item-outer-shadow-l"),
|
|
cv.getVar("pagination-item-outer-shadow-a")
|
|
);
|
|
color: hsl(
|
|
#{cv.getVar("pagination-item-h")},
|
|
#{cv.getVar("pagination-item-s")},
|
|
#{cv.getVar("pagination-item-color-l")}
|
|
);
|
|
min-width: cv.getVar("pagination-min-width");
|
|
transition-duration: cv.getVar("duration");
|
|
transition-property: background-color, border-color, box-shadow, color;
|
|
|
|
&:hover {
|
|
@include cv.register-vars(
|
|
(
|
|
"pagination-item-background-l-delta": #{cv.getVar(
|
|
"pagination-item-hover-background-l-delta"
|
|
)},
|
|
"pagination-item-border-l-delta": #{cv.getVar(
|
|
"pagination-item-hover-border-l-delta"
|
|
)},
|
|
)
|
|
);
|
|
}
|
|
|
|
&:focus {
|
|
@include cv.register-vars(
|
|
(
|
|
"pagination-item-background-l-delta": #{cv.getVar(
|
|
"pagination-item-hover-background-l-delta"
|
|
)},
|
|
"pagination-item-border-l-delta": #{cv.getVar(
|
|
"pagination-item-hover-border-l-delta"
|
|
)},
|
|
)
|
|
);
|
|
}
|
|
|
|
&:active {
|
|
box-shadow: cv.getVar("pagination-shadow-inset");
|
|
}
|
|
|
|
&[disabled],
|
|
&.#{iv.$class-prefix}is-disabled {
|
|
background-color: cv.getVar("pagination-disabled-background-color");
|
|
border-color: cv.getVar("pagination-disabled-border-color");
|
|
box-shadow: none;
|
|
color: cv.getVar("pagination-disabled-color");
|
|
opacity: 0.5;
|
|
}
|
|
}
|
|
|
|
.#{iv.$class-prefix}pagination-previous,
|
|
.#{iv.$class-prefix}pagination-next {
|
|
padding-left: cv.getVar("pagination-nav-padding-left");
|
|
padding-right: cv.getVar("pagination-nav-padding-right");
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.#{iv.$class-prefix}pagination-link {
|
|
&.#{iv.$class-prefix}is-current,
|
|
&.#{iv.$class-prefix}is-selected {
|
|
@include cv.register-vars(
|
|
(
|
|
"pagination-item-h": #{cv.getVar("pagination-selected-item-h")},
|
|
"pagination-item-s": #{cv.getVar("pagination-selected-item-s")},
|
|
"pagination-item-l": #{cv.getVar("pagination-selected-item-l")},
|
|
"pagination-item-background-l": #{cv.getVar(
|
|
"pagination-selected-item-background-l"
|
|
)},
|
|
"pagination-item-border-l": #{cv.getVar(
|
|
"pagination-selected-item-border-l"
|
|
)},
|
|
"pagination-item-color-l": #{cv.getVar(
|
|
"pagination-selected-item-color-l"
|
|
)},
|
|
)
|
|
);
|
|
}
|
|
}
|
|
|
|
.#{iv.$class-prefix}pagination-ellipsis {
|
|
color: cv.getVar("pagination-ellipsis-color");
|
|
pointer-events: none;
|
|
}
|
|
|
|
.#{iv.$class-prefix}pagination-list {
|
|
flex-wrap: wrap;
|
|
|
|
li {
|
|
list-style: none;
|
|
}
|
|
}
|
|
|
|
@include mx.mobile {
|
|
.#{iv.$class-prefix}pagination {
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.#{iv.$class-prefix}pagination-previous,
|
|
.#{iv.$class-prefix}pagination-next {
|
|
flex-grow: 1;
|
|
flex-shrink: 1;
|
|
}
|
|
|
|
.#{iv.$class-prefix}pagination-list {
|
|
li {
|
|
flex-grow: 1;
|
|
flex-shrink: 1;
|
|
}
|
|
}
|
|
}
|
|
|
|
@include mx.tablet {
|
|
.#{iv.$class-prefix}pagination-list {
|
|
flex-grow: 1;
|
|
flex-shrink: 1;
|
|
justify-content: flex-start;
|
|
order: 1;
|
|
}
|
|
|
|
.#{iv.$class-prefix}pagination-previous,
|
|
.#{iv.$class-prefix}pagination-next,
|
|
.#{iv.$class-prefix}pagination-link,
|
|
.#{iv.$class-prefix}pagination-ellipsis {
|
|
margin-bottom: 0;
|
|
margin-top: 0;
|
|
}
|
|
|
|
.#{iv.$class-prefix}pagination-previous {
|
|
order: 2;
|
|
}
|
|
|
|
.#{iv.$class-prefix}pagination-next {
|
|
order: 3;
|
|
}
|
|
|
|
.#{iv.$class-prefix}pagination {
|
|
justify-content: space-between;
|
|
margin-bottom: 0;
|
|
margin-top: 0;
|
|
|
|
&.#{iv.$class-prefix}is-centered {
|
|
.#{iv.$class-prefix}pagination-previous {
|
|
order: 1;
|
|
}
|
|
|
|
.#{iv.$class-prefix}pagination-list {
|
|
justify-content: center;
|
|
order: 2;
|
|
}
|
|
|
|
.#{iv.$class-prefix}pagination-next {
|
|
order: 3;
|
|
}
|
|
}
|
|
|
|
&.#{iv.$class-prefix}is-right {
|
|
.#{iv.$class-prefix}pagination-previous {
|
|
order: 1;
|
|
}
|
|
|
|
.#{iv.$class-prefix}pagination-next {
|
|
order: 2;
|
|
}
|
|
|
|
.#{iv.$class-prefix}pagination-list {
|
|
justify-content: flex-end;
|
|
order: 3;
|
|
}
|
|
}
|
|
}
|
|
}
|