Skip to content

Commit

Permalink
feat(time-selector): add sizes for time-selector component
Browse files Browse the repository at this point in the history
  • Loading branch information
@joneff @Juveniel
joneff authored and Juveniel committed Jul 25, 2022
1 parent 0dc4981 commit 00195fe
Show file tree
Hide file tree
Showing 8 changed files with 188 additions and 6 deletions.
4 changes: 2 additions & 2 deletions packages/bootstrap/scss/list/_variables.scss
View file
Expand Up @@ -11,8 +11,8 @@ $kendo-list-font-size-lg: $font-size-md !default;
/// @group list
$kendo-list-line-height: null !default;
$kendo-list-line-height-sm: (20 / 14) !default;
$kendo-list-line-height-md: null !default;
$kendo-list-line-height-lg: null !default;
$kendo-list-line-height-md: $line-height-md !default;
$kendo-list-line-height-lg: $line-height-md !default;

/// Horizontal padding of list header, if no size is set.
/// @group list
Expand Down
38 changes: 38 additions & 0 deletions packages/bootstrap/scss/timeselector/_variables.scss
View file
Expand Up @@ -30,3 +30,41 @@ $time-list-highlight-bg: $component-bg !default;
$time-list-highlight-border: $component-border !default;

$time-list-focused-bg: rgba(0, 0, 0, .02) !default;


// Time selector sizes
$kendo-time-selector-sm-font-size: $kendo-list-font-size-sm !default;
$kendo-time-selector-sm-line-height: $kendo-list-line-height-sm !default;
$kendo-time-selector-sm-list-item-padding-x: $kendo-list-item-padding-x-sm !default;
$kendo-time-selector-sm-list-item-padding-y: $kendo-list-item-padding-y-sm !default;

$kendo-time-selector-md-font-size: $kendo-list-font-size-md !default;
$kendo-time-selector-md-line-height: $kendo-list-line-height-md !default;
$kendo-time-selector-md-list-item-padding-x: $kendo-list-item-padding-x-md !default;
$kendo-time-selector-md-list-item-padding-y: $kendo-list-item-padding-y-md !default;

$kendo-time-selector-lg-font-size: $kendo-list-font-size-lg !default;
$kendo-time-selector-lg-line-height: $kendo-list-line-height-lg !default;
$kendo-time-selector-lg-list-item-padding-x: $kendo-list-item-padding-x-lg !default;
$kendo-time-selector-lg-list-item-padding-y: $kendo-list-item-padding-y-lg !default;

$kendo-time-selector-sizes: (
sm: (
font-size: $kendo-time-selector-sm-font-size,
line-height: $kendo-time-selector-sm-line-height,
list-item-padding-x: $kendo-time-selector-sm-list-item-padding-x,
list-item-padding-y: $kendo-time-selector-sm-list-item-padding-y
),
md: (
font-size: $kendo-time-selector-md-font-size,
line-height: $kendo-time-selector-md-line-height,
list-item-padding-x: $kendo-time-selector-md-list-item-padding-x,
list-item-padding-y: $kendo-time-selector-md-list-item-padding-y
),
lg: (
font-size: $kendo-time-selector-lg-font-size,
line-height: $kendo-time-selector-lg-line-height,
list-item-padding-x: $kendo-time-selector-lg-list-item-padding-x,
list-item-padding-y: $kendo-time-selector-lg-list-item-padding-y
)
) !default;
4 changes: 2 additions & 2 deletions packages/classic/scss/list/_variables.scss
View file
Expand Up @@ -10,8 +10,8 @@ $kendo-list-font-size-lg: $font-size-lg !default;
/// Line height of the list component, if no size is set.
/// @group list
$kendo-list-line-height: null !default;
$kendo-list-line-height-sm: null !default;
$kendo-list-line-height-md: null !default;
$kendo-list-line-height-sm: $line-height-md !default;
$kendo-list-line-height-md: $line-height-md !default;
$kendo-list-line-height-lg: $line-height-lg !default;

/// Horizontal padding of list header, if no size is set.
Expand Down
38 changes: 38 additions & 0 deletions packages/classic/scss/timeselector/_variables.scss
View file
Expand Up @@ -30,3 +30,41 @@ $time-list-highlight-bg: $component-bg !default;
$time-list-highlight-border: $component-border !default;

$time-list-focused-bg: rgba(0, 0, 0, .04) !default;


// Time selector sizes
$kendo-time-selector-sm-font-size: $kendo-list-font-size-sm !default;
$kendo-time-selector-sm-line-height: $kendo-list-line-height-sm !default;
$kendo-time-selector-sm-list-item-padding-x: $kendo-list-item-padding-x-sm !default;
$kendo-time-selector-sm-list-item-padding-y: $kendo-list-item-padding-y-sm !default;

$kendo-time-selector-md-font-size: $kendo-list-font-size-md !default;
$kendo-time-selector-md-line-height: $kendo-list-line-height-md !default;
$kendo-time-selector-md-list-item-padding-x: $kendo-list-item-padding-x-md !default;
$kendo-time-selector-md-list-item-padding-y: $kendo-list-item-padding-y-md !default;

$kendo-time-selector-lg-font-size: $kendo-list-font-size-lg !default;
$kendo-time-selector-lg-line-height: $kendo-list-line-height-lg !default;
$kendo-time-selector-lg-list-item-padding-x: $kendo-list-item-padding-x-lg !default;
$kendo-time-selector-lg-list-item-padding-y: $kendo-list-item-padding-y-lg !default;

$kendo-time-selector-sizes: (
sm: (
font-size: $kendo-time-selector-sm-font-size,
line-height: $kendo-time-selector-sm-line-height,
list-item-padding-x: $kendo-time-selector-sm-list-item-padding-x,
list-item-padding-y: $kendo-time-selector-sm-list-item-padding-y
),
md: (
font-size: $kendo-time-selector-md-font-size,
line-height: $kendo-time-selector-md-line-height,
list-item-padding-x: $kendo-time-selector-md-list-item-padding-x,
list-item-padding-y: $kendo-time-selector-md-list-item-padding-y
),
lg: (
font-size: $kendo-time-selector-lg-font-size,
line-height: $kendo-time-selector-lg-line-height,
list-item-padding-x: $kendo-time-selector-lg-list-item-padding-x,
list-item-padding-y: $kendo-time-selector-lg-list-item-padding-y
)
) !default;
4 changes: 2 additions & 2 deletions packages/default/scss/list/_variables.scss
View file
Expand Up @@ -10,8 +10,8 @@ $kendo-list-font-size-lg: $font-size-lg !default;
/// Line height of the list component, if no size is set.
/// @group list
$kendo-list-line-height: null !default;
$kendo-list-line-height-sm: null !default;
$kendo-list-line-height-md: null !default;
$kendo-list-line-height-sm: $line-height-md !default;
$kendo-list-line-height-md: $line-height-md !default;
$kendo-list-line-height-lg: $line-height-lg !default;

/// Horizontal padding of list header, if no size is set.
Expand Down
30 changes: 30 additions & 0 deletions packages/default/scss/timeselector/_layout.scss
View file
Expand Up @@ -206,4 +206,34 @@
top: calc( #{$time-list-title-height / 2} );
}


// Time selector sizes
@each $size, $size-props in $kendo-time-selector-sizes {
$_font-size: map-get( $size-props, font-size );
$_line-height: map-get( $size-props, line-height );
$_list-item-padding-x: map-get( $size-props, list-item-padding-x );
$_list-item-padding-y: map-get( $size-props, list-item-padding-y );
$_highlight-height: calc( #{$_font-size * $_line-height} + #{ $_list-item-padding-y * 2} );


.k-timeselector-#{$size} {
font-size: $_font-size;
line-height: $_line-height;

.k-time-highlight,
.k-time-list-highlight {
height: $_highlight-height;
}

.k-time-separator {
height: $_highlight-height;
}

.k-time-list-item,
.k-time-list .k-item {
padding: $_list-item-padding-y $_list-item-padding-x;
}
}
}

}
38 changes: 38 additions & 0 deletions packages/default/scss/timeselector/_variables.scss
View file
Expand Up @@ -30,3 +30,41 @@ $time-list-highlight-bg: $component-bg !default;
$time-list-highlight-border: $component-border !default;

$time-list-focused-bg: rgba(0, 0, 0, .04) !default;


// Time selector sizes
$kendo-time-selector-sm-font-size: $kendo-list-font-size-sm !default;
$kendo-time-selector-sm-line-height: $kendo-list-line-height-sm !default;
$kendo-time-selector-sm-list-item-padding-x: $kendo-list-item-padding-x-sm !default;
$kendo-time-selector-sm-list-item-padding-y: $kendo-list-item-padding-y-sm !default;

$kendo-time-selector-md-font-size: $kendo-list-font-size-md !default;
$kendo-time-selector-md-line-height: $kendo-list-line-height-md !default;
$kendo-time-selector-md-list-item-padding-x: $kendo-list-item-padding-x-md !default;
$kendo-time-selector-md-list-item-padding-y: $kendo-list-item-padding-y-md !default;

$kendo-time-selector-lg-font-size: $kendo-list-font-size-lg !default;
$kendo-time-selector-lg-line-height: $kendo-list-line-height-lg !default;
$kendo-time-selector-lg-list-item-padding-x: $kendo-list-item-padding-x-lg !default;
$kendo-time-selector-lg-list-item-padding-y: $kendo-list-item-padding-y-lg !default;

$kendo-time-selector-sizes: (
sm: (
font-size: $kendo-time-selector-sm-font-size,
line-height: $kendo-time-selector-sm-line-height,
list-item-padding-x: $kendo-time-selector-sm-list-item-padding-x,
list-item-padding-y: $kendo-time-selector-sm-list-item-padding-y
),
md: (
font-size: $kendo-time-selector-md-font-size,
line-height: $kendo-time-selector-md-line-height,
list-item-padding-x: $kendo-time-selector-md-list-item-padding-x,
list-item-padding-y: $kendo-time-selector-md-list-item-padding-y
),
lg: (
font-size: $kendo-time-selector-lg-font-size,
line-height: $kendo-time-selector-lg-line-height,
list-item-padding-x: $kendo-time-selector-lg-list-item-padding-x,
list-item-padding-y: $kendo-time-selector-lg-list-item-padding-y
)
) !default;
38 changes: 38 additions & 0 deletions packages/material/scss/timeselector/_variables.scss
View file
Expand Up @@ -30,3 +30,41 @@ $time-list-highlight-bg: $component-bg !default;
$time-list-highlight-border: $component-border !default;

$time-list-focused-bg: null !default;


// Time selector sizes
$kendo-time-selector-sm-font-size: $kendo-list-font-size-sm !default;
$kendo-time-selector-sm-line-height: $kendo-list-line-height-sm !default;
$kendo-time-selector-sm-list-item-padding-x: $kendo-list-item-padding-x-sm !default;
$kendo-time-selector-sm-list-item-padding-y: $kendo-list-item-padding-y-sm !default;

$kendo-time-selector-md-font-size: $kendo-list-font-size-md !default;
$kendo-time-selector-md-line-height: $kendo-list-line-height-md !default;
$kendo-time-selector-md-list-item-padding-x: $kendo-list-item-padding-x-md !default;
$kendo-time-selector-md-list-item-padding-y: $kendo-list-item-padding-y-md !default;

$kendo-time-selector-lg-font-size: $kendo-list-font-size-lg !default;
$kendo-time-selector-lg-line-height: $kendo-list-line-height-lg !default;
$kendo-time-selector-lg-list-item-padding-x: $kendo-list-item-padding-x-lg !default;
$kendo-time-selector-lg-list-item-padding-y: $kendo-list-item-padding-y-lg !default;

$kendo-time-selector-sizes: (
sm: (
font-size: $kendo-time-selector-sm-font-size,
line-height: $kendo-time-selector-sm-line-height,
list-item-padding-x: $kendo-time-selector-sm-list-item-padding-x,
list-item-padding-y: $kendo-time-selector-sm-list-item-padding-y
),
md: (
font-size: $kendo-time-selector-md-font-size,
line-height: $kendo-time-selector-md-line-height,
list-item-padding-x: $kendo-time-selector-md-list-item-padding-x,
list-item-padding-y: $kendo-time-selector-md-list-item-padding-y
),
lg: (
font-size: $kendo-time-selector-lg-font-size,
line-height: $kendo-time-selector-lg-line-height,
list-item-padding-x: $kendo-time-selector-lg-list-item-padding-x,
list-item-padding-y: $kendo-time-selector-lg-list-item-padding-y
)
) !default;

0 comments on commit 00195fe

Please sign in to comment.