Skip to content

Commit

Permalink
refactor(stylings): fix pagination icons alignment with BS4
Browse files Browse the repository at this point in the history
  • Loading branch information
ghiscoding committed Dec 13, 2020
1 parent 0050f6b commit e4696db
Show file tree
Hide file tree
Showing 4 changed files with 13 additions and 4 deletions.
1 change: 1 addition & 0 deletions packages/common/src/styles/_variables-theme-material.scss
Original file line number Diff line number Diff line change
Expand Up @@ -138,6 +138,7 @@ $detail-view-icon-expand-color: $primary-color !default;
$detail-view-icon-collapse: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="#{encodecolor($detail-view-icon-collapse-color)}" viewBox="0 0 24 24"><path d="M17,13H7V11H17M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z"></path></svg>') !default;
$detail-view-icon-expand: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="#{encodecolor($detail-view-icon-expand-color)}" viewBox="0 0 24 24"><path d="M17,13H13V17H11V13H7V11H11V7H13V11H17M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z"></path></svg>') !default;
$pagination-icon-color: $primary-color !default;
$pagination-icon-height: $icon-width !default;
$pagination-icon-seek-first: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="#{encodecolor($pagination-icon-color)}" viewBox="0 0 24 24"><path d="M18.41 16.59L13.82 12l4.59-4.59L17 6l-6 6 6 6zM6 6h2v12H6z"/><path d="M24 24H0V0h24v24z" fill="none"/></svg>') !default;
$pagination-icon-seek-end: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="#{encodecolor($pagination-icon-color)}" viewBox="0 0 24 24"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M5.59 7.41L10.18 12l-4.59 4.59L7 18l6-6-6-6zM16 6h2v12h-2z"/></svg>') !default;
$pagination-icon-seek-next: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="#{encodecolor($pagination-icon-color)}" viewBox="0 0 24 24"><path d="M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z"></path></svg>') !default;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -183,6 +183,7 @@ $detail-view-icon-expand-color: $primary-color !default;
$detail-view-icon-collapse: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="#{encodecolor($detail-view-icon-collapse-color)}" viewBox="0 0 24 24"><path d="M17,13H7V11H17M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z"></path></svg>') !default;
$detail-view-icon-expand: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="#{encodecolor($detail-view-icon-expand-color)}" viewBox="0 0 24 24"><path d="M17,13H13V17H11V13H7V11H11V7H13V11H17M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z"></path></svg>') !default;
$pagination-icon-color: $primary-color !default;
$pagination-icon-height: $icon-width !default;
$pagination-icon-seek-first: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="#{encodecolor($pagination-icon-color)}" viewBox="0 0 24 24"><path d="M18.41 16.59L13.82 12l4.59-4.59L17 6l-6 6 6 6zM6 6h2v12H6z"/><path d="M24 24H0V0h24v24z" fill="none"/></svg>') !default;
$pagination-icon-seek-end: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="#{encodecolor($pagination-icon-color)}" viewBox="0 0 24 24"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M5.59 7.41L10.18 12l-4.59 4.59L7 18l6-6-6-6zM16 6h2v12h-2z"/></svg>') !default;
$pagination-icon-seek-next: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="#{encodecolor($pagination-icon-color)}" viewBox="0 0 24 24"><path d="M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z"></path></svg>') !default;
Expand Down
9 changes: 5 additions & 4 deletions packages/common/src/styles/_variables.scss
Original file line number Diff line number Diff line change
Expand Up @@ -805,14 +805,15 @@ $pagination-count-margin-left: 2px !default;
$pagination-font-size: calc(#{$font-size-base} - 1px) !default;
$pagination-icon-color: $primary-color !default;
$pagination-icon-font-size: calc(#{$icon-font-size} - 1px) !default;
$pagination-icon-height: initial !default;
$pagination-icon-seek-first: "\f100" !default;
$pagination-icon-seek-end: "\f101" !default;
$pagination-icon-seek-next: "\f105" !default;
$pagination-icon-seek-prev: "\f104" !default;
$pagination-icon-seek-first-width: inherit !default;
$pagination-icon-seek-end-width: inherit !default;
$pagination-icon-seek-next-width: inherit !default;
$pagination-icon-seek-prev-width: inherit !default;
$pagination-icon-seek-first-width: initial !default;
$pagination-icon-seek-end-width: initial !default;
$pagination-icon-seek-next-width: initial !default;
$pagination-icon-seek-prev-width: initial !default;
$pagination-icon-seek-text-stroke: 0.4px !default;
$pagination-button-border: 1px solid #acacac !default;
$pagination-border-top: 0 none !default;
Expand Down
6 changes: 6 additions & 0 deletions packages/common/src/styles/slick-component.scss
Original file line number Diff line number Diff line change
Expand Up @@ -115,6 +115,8 @@
display: inline-flex;

.page-link {
display: flex;
align-items: center;
font-size: $pagination-icon-font-size;
border: $pagination-button-border;
height: $pagination-button-height;
Expand Down Expand Up @@ -152,27 +154,31 @@
&:before {
content: $pagination-icon-seek-first;
display: block;
height: $pagination-icon-height;
width: $pagination-icon-seek-first-width;
}
}
.icon-seek-prev {
&:before {
content: $pagination-icon-seek-prev;
display: block;
height: $pagination-icon-height;
width: $pagination-icon-seek-prev-width;
}
}
.icon-seek-next {
&:before {
content: $pagination-icon-seek-next;
display: block;
height: $pagination-icon-height;
width: $pagination-icon-seek-next-width;
}
}
.icon-seek-end {
&:before {
content: $pagination-icon-seek-end;
display: block;
height: $pagination-icon-height;
width: $pagination-icon-seek-end-width;
}
}
Expand Down

0 comments on commit e4696db

Please sign in to comment.