Ark/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma synced 2026-03-22 05:04:28 -07:00
Code Issues Packages Projects Releases Wiki Activity

Fix components tests

Browse Source
This commit is contained in:
Jeremy Thomas
2022-12-06 00:47:43 +00:00
parent a03da2b801
commit 8508af010a
16 changed files with 2353 additions and 1361 deletions
Download Patch File Download Diff File Expand all files Collapse all files

118
sass/components/pagination.scss
View File

@@ -1,10 +1,10 @@
@import "../utilities/controls";
@import "../utilities/mixins";
$pagination-color: $text-strong !default;
$pagination-border-color: $border !default;
$pagination-color: getVar("text-strong") !default;
$pagination-border-color: getVar("border") !default;
$pagination-margin: -0.25rem !default;
$pagination-min-width: $control-height !default;
$pagination-min-width: $control-height !default; // TODO
$pagination-item-font-size: 1em !default;
$pagination-item-margin: 0.25rem !default;
@@ -14,44 +14,75 @@ $pagination-item-padding-right: 0.5em !default;
$pagination-nav-padding-left: 0.75em !default;
$pagination-nav-padding-right: 0.75em !default;
$pagination-hover-color: $link-hover !default;
$pagination-hover-border-color: $link-hover-border !default;
$pagination-hover-color: getVar("link-hover") !default;
$pagination-hover-border-color: getVar("link-hover-border") !default;
$pagination-focus-color: $link-focus !default;
$pagination-focus-border-color: $link-focus-border !default;
$pagination-focus-color: getVar("link-focus") !default;
$pagination-focus-border-color: getVar("link-focus-border") !default;
$pagination-active-color: $link-active !default;
$pagination-active-border-color: $link-active-border !default;
$pagination-active-color: getVar("link-active") !default;
$pagination-active-border-color: getVar("link-active-border") !default;
$pagination-disabled-color: $text-light !default;
$pagination-disabled-background-color: $border !default;
$pagination-disabled-border-color: $border !default;
$pagination-disabled-color: getVar("text-light") !default;
$pagination-disabled-background-color: getVar("border") !default;
$pagination-disabled-border-color: getVar("border") !default;
$pagination-current-color: $link-invert !default;
$pagination-current-background-color: $link !default;
$pagination-current-border-color: $link !default;
$pagination-current-color: getVar("link-invert") !default;
$pagination-current-background-color: getVar("link") !default;
$pagination-current-border-color: getVar("link") !default;
$pagination-ellipsis-color: $grey-light !default;
$pagination-ellipsis-color: getVar("grey-light") !default;
$pagination-shadow-inset: inset 0 1px 2px rgba($scheme-invert, 0.2) !default;
:root {
@include register-vars(
(
pagination-color: #{$pagination-color},
pagination-border-color: #{$pagination-border-color},
pagination-margin: #{$pagination-margin},
pagination-min-width: #{$pagination-min-width},
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-nav-padding-left: #{$pagination-nav-padding-left},
pagination-nav-padding-right: #{$pagination-nav-padding-right},
pagination-hover-color: #{$pagination-hover-color},
pagination-hover-border-color: #{$pagination-hover-border-color},
pagination-focus-color: #{$pagination-focus-color},
pagination-focus-border-color: #{$pagination-focus-border-color},
pagination-active-color: #{$pagination-active-color},
pagination-active-border-color: #{$pagination-active-border-color},
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},
)
);
}
.#{$class-prefix}pagination {
@extend %block;
font-size: $size-normal;
margin: $pagination-margin;
font-size: getVar("size-normal");
margin: getVar("pagination-margin");
// Sizes
&.is-small {
font-size: $size-small;
font-size: getVar("size-small");
}
&.is-medium {
font-size: $size-medium;
font-size: getVar("size-medium");
}
&.is-large {
font-size: $size-large;
font-size: getVar("size-large");
}
&.is-rounded {
@@ -59,11 +90,11 @@ $pagination-shadow-inset: inset 0 1px 2px rgba($scheme-invert, 0.2) !default;
.#{$class-prefix}pagination-next {
padding-left: 1em;
padding-right: 1em;
border-radius: $radius-rounded;
border-radius: getVar("radius-rounded");
}
.#{$class-prefix}pagination-link {
border-radius: $radius-rounded;
border-radius: getVar("radius-rounded");
}
}
}
@@ -81,64 +112,63 @@ $pagination-shadow-inset: inset 0 1px 2px rgba($scheme-invert, 0.2) !default;
.#{$class-prefix}pagination-link,
.#{$class-prefix}pagination-ellipsis {
@extend %control;
@extend %unselectable;
font-size: $pagination-item-font-size;
font-size: getVar("pagination-item-font-size");
justify-content: center;
margin: $pagination-item-margin;
padding-left: $pagination-item-padding-left;
padding-right: $pagination-item-padding-right;
margin: getVar("pagination-item-margin");
padding-left: getVar("pagination-item-padding-left");
padding-right: getVar("pagination-item-padding-right");
text-align: center;
}
.#{$class-prefix}pagination-previous,
.#{$class-prefix}pagination-next,
.#{$class-prefix}pagination-link {
border-color: $pagination-border-color;
color: $pagination-color;
min-width: $pagination-min-width;
border-color: getVar("pagination-border-color");
color: getVar("pagination-color");
min-width: getVar("pagination-min-width");
&:hover {
border-color: $pagination-hover-border-color;
color: $pagination-hover-color;
border-color: getVar("pagination-hover-border-color");
color: getVar("pagination-hover-color");
}
&:focus {
border-color: $pagination-focus-border-color;
border-color: getVar("pagination-focus-border-color");
}
&:active {
box-shadow: $pagination-shadow-inset;
box-shadow: getVar("pagination-shadow-inset");
}
&[disabled],
&.is-disabled {
background-color: $pagination-disabled-background-color;
border-color: $pagination-disabled-border-color;
background-color: getVar("pagination-disabled-background-color");
border-color: getVar("pagination-disabled-border-color");
box-shadow: none;
color: $pagination-disabled-color;
color: getVar("pagination-disabled-color");
opacity: 0.5;
}
}
.#{$class-prefix}pagination-previous,
.#{$class-prefix}pagination-next {
padding-left: $pagination-nav-padding-left;
padding-right: $pagination-nav-padding-right;
padding-left: getVar("pagination-nav-padding-left");
padding-right: getVar("pagination-nav-padding-right");
white-space: nowrap;
}
.#{$class-prefix}pagination-link {
&.is-current {
background-color: $pagination-current-background-color;
border-color: $pagination-current-border-color;
color: $pagination-current-color;
background-color: getVar("pagination-current-background-color");
border-color: getVar("pagination-current-border-color");
color: getVar("pagination-current-color");
}
}
.#{$class-prefix}pagination-ellipsis {
color: $pagination-ellipsis-color;
color: getVar("pagination-ellipsis-color");
pointer-events: none;
}