Skip to content

Commit

Permalink
feat(pager): use native select for responsive pager page selection
Browse files Browse the repository at this point in the history
  • Loading branch information
@joneff
joneff committed Feb 27, 2020
1 parent 61e53c3 commit 59cf508
Show file tree
Hide file tree
Showing 5 changed files with 106 additions and 104 deletions.
5 changes: 3 additions & 2 deletions packages/bootstrap/scss/pager/_theme.scss
View file
Expand Up @@ -3,9 +3,10 @@
@include exports( "pager/theme/bootstrap" ) {


// Pager sizes
.k-pager-sizes {
// Pager
.k-pager-wrap {

select.k-dropdown,
.k-dropdown .k-dropdown-wrap {
@include fill(
$pager-text,
Expand Down
69 changes: 41 additions & 28 deletions packages/default/scss/dropdownlist/_layout.scss
View file
Expand Up @@ -31,6 +31,7 @@
.k-input {
padding: $input-padding-y $input-padding-x;
width: 100%;
min-width: 0;
height: calc( #{$input-padding-y * 2} + #{$input-line-height * 1em} );
box-sizing: border-box;
border: 0;
Expand Down Expand Up @@ -90,45 +91,57 @@
}
}

&.k-dropdown-operator {
width: auto;
}

.k-dropdown-wrap {
.k-input {
display: none;
}

.k-select {
width: $button-inner-calc-size;
height: $button-inner-calc-size;
}
}
}
// RTL

&[dir="rtl"],
.k-rtl & {
text-align: right;
.k-dropdown.k-rtl,
.k-dropdown[dir="rtl"],
.k-rtl .k-dropdown,
[dir="rtl"] .k-dropdown {
text-align: right;

.k-select {
@include border-left-radius-only();
}
.k-select {
@include border-left-radius-only();
}

.k-dropdown-wrap .k-clear-value {
right: auto;
left: $picker-icon-offset;
}
.k-dropdown-wrap .k-clear-value {
right: auto;
left: $picker-icon-offset;
}
}


::-ms-clear {
display: none;

// Dropdown operator
.k-dropdown-operator {
width: auto;

.k-dropdown-wrap {
.k-input {
display: none;
}
.k-select {
width: $button-inner-calc-size;
height: $button-inner-calc-size;
}
}

}

.k-edge {
.k-dropdown-wrap > .k-input {
min-width: 0;
}

// Native select
select.k-dropdown {
@include border-radius( $input-border-radius );
padding: $input-padding-y $input-padding-x;
border-width: 1px;
border-style: solid;
outline: 0;
overflow: hidden;
text-overflow: ellipsis;
transition: all .1s ease; // sass-lint:disable-block no-transition-all
cursor: pointer;
}

}
33 changes: 33 additions & 0 deletions packages/default/scss/dropdownlist/_theme.scss
View file
Expand Up @@ -60,4 +60,37 @@
border-color: $invalid-border;
}
}


// Native select
select.k-dropdown {
@include fill(
$dropdownlist-text,
$dropdownlist-bg,
$dropdownlist-border,
$dropdownlist-gradient
);

// Hover state
&:hover {
@include fill(
$dropdownlist-hovered-text,
$dropdownlist-hovered-bg,
$dropdownlist-hovered-border,
$dropdownlist-hovered-gradient
);
}

// Focused state
&:focus {
@include fill(
$dropdownlist-focused-text,
$dropdownlist-focused-bg,
$dropdownlist-focused-border,
$dropdownlist-focused-gradient
);
@include box-shadow($dropdownlist-focused-shadow);
}
}

}
96 changes: 22 additions & 74 deletions packages/default/scss/pager/_layout.scss
View file
Expand Up @@ -18,7 +18,8 @@
outline: 0;
}

.k-widget {
.k-widget,
select.k-dropdown {
font-size: inherit;
}

Expand Down Expand Up @@ -88,6 +89,11 @@
display: flex;
flex-direction: row;
position: relative;

select.k-dropdown {
cursor: pointer;
display: none;
}
}
.k-pager-numbers {
margin: 0;
Expand All @@ -100,28 +106,13 @@
display: inline-flex;
}

.k-current-page {
cursor: pointer;
display: none;

// TODO: replace with native select element to simplify styling
.k-link {
@include border-radius( $input-border-radius );
border-width: $input-border-width;
border-style: solid;
}
}
.k-current-page + li {
margin-left: 0;
}


// Links
.k-link {
@extend %base-pager-item;
@include border-radius( $pager-number-border-radius );
padding: $pager-item-padding-y $pager-item-padding-x;
border-width: $pager-item-border-width;
padding: $pager-number-padding-y $pager-number-padding-x;
border-width: $pager-number-border-width;
border-style: solid;
}

Expand All @@ -136,11 +127,9 @@

// Spacing between items
.k-pager-nav + .k-pager-nav,
.k-pager-nav + .k-pager-numbers,
.k-pager-nav + .k-pager-numbers-wrap,
.k-pager-numbers + .k-pager-nav,
.k-pager-numbers .k-current-page ~ li + li,
.k-pager-numbers-wrap + .k-pager-nav {
.k-pager-numbers-wrap + .k-pager-nav,
.k-pager-numbers > li + li {
@if ($pager-item-spacing) {
margin-left: $pager-item-spacing;
}
Expand Down Expand Up @@ -224,10 +213,16 @@
margin-left: $pager-section-spacing;
margin-right: $pager-section-spacing;
}
width: calc( #{$button-calc-size} * 2 );
width: 5em;
height: $button-calc-size;
box-sizing: border-box;
border-color: inherit;

// Show native select
select.k-dropdown {
width: 100%;
display: flex;
}
}

.k-rtl &,
Expand All @@ -241,63 +236,16 @@
}
}

.k-pager-numbers {
width: 100%;
border-style: solid;
border-width: 0;
box-sizing: border-box;
flex-direction: column-reverse;
position: absolute;
bottom: 0;
z-index: 3;
overflow: hidden;

li {
@if ($pager-number-spacing) {
margin: 0;
}
display: none;
}
.k-current-page {
display: inline-flex;
}

.k-link {
margin: 0;
width: 100%;
height: auto;
}
}


// Expanded state
.k-state-expanded {
@include border-radius( 0 );
border-width: $popup-border-width;

li {
display: inline-flex;
}
.k-current-page {
display: none;
}

.k-link {
@include border-radius( 0 );
height: auto;
padding: $list-item-padding-y $list-item-padding-x;
border-width: 0;
color: inherit;
background-color: transparent;
}
}
}


// Hide components
.k-pager-md .k-pager-info,
.k-pager-sm .k-pager-info,
.k-pager-sm .k-pager-sizes {
.k-pager-sm .k-pager-sizes,
.k-pager-lg .k-pager-numbers,
.k-pager-md .k-pager-numbers,
.k-pager-sm .k-pager-numbers {
display: none;
}

Expand Down
7 changes: 7 additions & 0 deletions packages/material/scss/dropdownlist/_layout.scss
View file
Expand Up @@ -42,4 +42,11 @@
.k-state-border-down > .k-select .k-i-arrow-60-down {
transform: rotate(180deg);
}


// Native select
select.k-dropdown {
border-width: 0 0 $input-border-width;
}

}

0 comments on commit 59cf508

Please sign in to comment.