Skip to content
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.

Sign up for GitHub

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

Jump to bottom

feat(pagination): Add CSS vars for $pagination #1268

Merged
merged 6 commits into from
Jul 22, 2022
Merged

feat(pagination): Add CSS vars for $pagination #1268

Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
6409653
feat(pagination): Add CSS vars for $pagination
isabellechanclou May 19, 2022
d199d74
Fixes after 1st review
isabellechanclou May 30, 2022
47e21f8
Delete extra Boosted mod comments
isabellechanclou May 31, 2022
5cbc68c
Change CSS variable order to match Boostrap's one
isabellechanclou Jun 23, 2022
b57ed04
Merge branch 'main' into main-ic-css-variables-pagination
julien-deramond Jul 22, 2022
8a28336
Rename a CSS var and reorder them
julien-deramond Jul 22, 2022
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
41 changes: 26 additions & 15 deletions scss/_pagination.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,11 @@
// scss-docs-start pagination-css-vars
julien-deramond marked this conversation as resolved.
Show resolved Hide resolved
--#{$prefix}pagination-padding-x: #{$pagination-padding-x};
--#{$prefix}pagination-padding-y: #{$pagination-padding-y};
--#{$prefix}pagination-margin-y: #{$pagination-margin-y}; // Boosted mod
--#{$prefix}pagination-margin-start: #{$pagination-margin-start}; // Boosted mod
--#{$prefix}pagination-margin-x-first-last: #{$pagination-margin-x-first-last}; // Boosted mod
@include rfs($pagination-font-size, --#{$prefix}pagination-font-size);
--#{$prefix}pagination-font-weight: #{$font-weight-bold}; // Boosted mod
--#{$prefix}pagination-color: #{$pagination-color};
--#{$prefix}pagination-bg: #{$pagination-bg};
--#{$prefix}pagination-border-width: #{$pagination-border-width};
Expand All @@ -14,17 +18,24 @@
--#{$prefix}pagination-focus-color: #{$pagination-focus-color};
--#{$prefix}pagination-focus-bg: #{$pagination-focus-bg};
--#{$prefix}pagination-focus-box-shadow: #{$pagination-focus-box-shadow};
--#{$prefix}pagination-focus-outline: #{$pagination-focus-outline}; // Boosted mod
--#{$prefix}pagination-active-color: #{$pagination-active-color};
--#{$prefix}pagination-active-bg: #{$pagination-active-bg};
--#{$prefix}pagination-active-border-color: #{$pagination-active-border-color};
--#{$prefix}pagination-active-item-bg: #{$pagination-active-item-bg}; // Boosted mod
--#{$prefix}pagination-active-item-border-color: #{$pagination-active-item-border}; // Boosted mod
--#{$prefix}pagination-disabled-color: #{$pagination-disabled-color};
--#{$prefix}pagination-disabled-bg: #{$pagination-disabled-bg};
--#{$prefix}pagination-disabled-border-color: #{$pagination-disabled-border-color};
--#{$prefix}pagination-icon: #{$pagination-icon}; // Boosted mod
--#{$prefix}pagination-icon-size: #{$pagination-icon-size}; // Boosted mod
--#{$prefix}pagination-icon-width: #{$pagination-icon-width}; // Boosted mod
--#{$prefix}pagination-icon-height: #{$pagination-icon-height}; // Boosted mod
// scss-docs-end pagination-css-vars

display: flex;
flex-wrap: if($pagination-margin-start == (-$pagination-border-width), null, wrap); // Boosted mod
margin: $pagination-margin-y 0; // Boosted mod
margin: var(--#{$prefix}pagination-margin-y) 0; // Boosted mod
@include list-unstyled();
}

Expand All @@ -36,17 +47,17 @@
justify-content: center; // Boosted mod
padding: var(--#{$prefix}pagination-padding-y) var(--#{$prefix}pagination-padding-x);
@include font-size(var(--#{$prefix}pagination-font-size));
font-weight: $font-weight-bold; // Boosted mod
font-weight: var(--#{$prefix}pagination-font-weight); // Boosted mod
color: var(--#{$prefix}pagination-color);
text-decoration: if($link-decoration == none, null, none);
background-color: var(--#{$prefix}pagination-bg);
border: var(--#{$prefix}pagination-border-width) solid var(--#{$prefix}pagination-border-color);
@include transition($pagination-transition);
// Boosted mod: embed icon as mask-image
@include button-icon(
$pagination-icon,
$pagination-icon-size,
$size: $pagination-icon-width $pagination-icon-height,
var(--#{$prefix}pagination-icon),
var(--#{$prefix}pagination-icon-size),
$size: var(--#{$prefix}pagination-icon-width) var(--#{$prefix}pagination-icon-height) ,
$selector: ".page-item:first-child .page-link, .page-item:last-child .page-link",
$position: calc(50% - 1px)
);
Expand All @@ -65,17 +76,17 @@
color: var(--#{$prefix}pagination-focus-color);
background-color: var(--#{$prefix}pagination-focus-bg);
border-color: var(--#{$prefix}pagination-hover-border-color); // Boosted mod
outline: $pagination-focus-outline;
outline: var(--#{$prefix}pagination-focus-outline); // Boosted mod
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should be changed on Bs side too ?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Haven't looked at it but for this one and https:/Orange-OpenSource/Orange-Boosted-Bootstrap/pull/1268/files#r881440526, @isabellechanclou you could create a PR for Bootstrap to propose those modifications.

box-shadow: var(--#{$prefix}pagination-focus-box-shadow);
}

// Boosted mod
&:active,
&:active > & {
color: color-contrast($pagination-active-item-bg);
background-color: $pagination-active-item-bg;
border-color: $pagination-active-item-border;
outline-color: $pagination-active-item-border;
background-color: var(--#{$prefix}pagination-active-item-bg);
border-color: var(--#{$prefix}pagination-active-item-border-color);
outline-color: var(--#{$prefix}pagination-active-item-border-color);
}
// End mod

Expand All @@ -99,7 +110,7 @@

.page-item {
&:not(:first-child) .page-link {
margin-left: $pagination-margin-start;
margin-left: var(--#{$prefix}pagination-margin-start); // Boosted mod
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Bs side too ?

}

@if $pagination-margin-start == (calc($pagination-border-width * -1)) {
Expand Down Expand Up @@ -139,14 +150,14 @@

&:active {
color: color-contrast($pagination-active-item-bg);
background-color: $pagination-active-item-bg;
border-color: $pagination-active-item-border;
outline-color: $pagination-active-item-border;
background-color: var(--#{$prefix}pagination-active-item-bg);
border-color: var(--#{$prefix}pagination-active-item-border-color);
outline-color: var(--#{$prefix}pagination-active-item-border-color);
}
}

&:first-child .page-link {
margin-right: $pagination-margin-x-first-last;
margin-right: var(--#{$prefix}pagination-margin-x-first-last);

&:not(:empty) {
padding-right: $pagination-padding-end;
Expand All @@ -173,7 +184,7 @@
}

&:last-child:not(:nth-child(2)) .page-link {
margin-left: $pagination-margin-x-first-last;
margin-left: var(--#{$prefix}pagination-margin-x-first-last);
}

@include media-breakpoint-down(sm) {
Expand Down