Skip to content

Commit

Permalink
fix(checkbox-radio): add styles for checkbox radio wrap for better al…
Browse files Browse the repository at this point in the history 
…ignment
  • Loading branch information
@joneff
joneff committed Jan 4, 2022
1 parent d2ae815 commit 3f2e22f
Show file tree
Hide file tree
Showing 11 changed files with 92 additions and 78 deletions.
4 changes: 1 addition & 3 deletions packages/bootstrap/scss/checkbox/_variables.scss
View file
Expand Up @@ -60,11 +60,9 @@ $checkbox-label-margin-x: map-get( $spacing, 1 ) !default;


// Checkbox list
$checkbox-list-margin: 0px !default;
$checkbox-list-padding: 0px !default;
$checkbox-list-spacing: map-get( $spacing, 4 ) !default;
$checkbox-list-item-padding-x: 0px !default;
$checkbox-list-item-padding-y: $list-item-padding-y !default;
$checkbox-list-horizontal-item-margin-x: 32px !default;


// Checkbox ripple
Expand Down
4 changes: 1 addition & 3 deletions packages/bootstrap/scss/radio/_variables.scss
View file
Expand Up @@ -56,11 +56,9 @@ $radio-label-margin-x: map-get( $spacing, 1 ) !default;


// Radio list
$radio-list-margin: 0px !default;
$radio-list-padding: 0px !default;
$radio-list-spacing: map-get( $spacing, 4 ) !default;
$radio-list-item-padding-x: 0px !default;
$radio-list-item-padding-y: $list-item-padding-y !default;
$radio-list-horizontal-item-margin-x: 32px !default;


// Radio ripple
Expand Down
4 changes: 1 addition & 3 deletions packages/classic/scss/checkbox/_variables.scss
View file
Expand Up @@ -60,11 +60,9 @@ $checkbox-label-margin-x: map-get( $spacing, 1 ) !default;


// Checkbox list
$checkbox-list-margin: 0px !default;
$checkbox-list-padding: 0px !default;
$checkbox-list-spacing: map-get( $spacing, 4 ) !default;
$checkbox-list-item-padding-x: 0px !default;
$checkbox-list-item-padding-y: $list-item-padding-y !default;
$checkbox-list-horizontal-item-margin-x: 32px !default;


// Checkbox ripple
Expand Down
4 changes: 1 addition & 3 deletions packages/classic/scss/radio/_variables.scss
View file
Expand Up @@ -56,11 +56,9 @@ $radio-label-margin-x: map-get( $spacing, 1 ) !default;


// Radio list
$radio-list-margin: 0px !default;
$radio-list-padding: 0px !default;
$radio-list-spacing: map-get( $spacing, 4 ) !default;
$radio-list-item-padding-x: 0px !default;
$radio-list-item-padding-y: $list-item-padding-y !default;
$radio-list-horizontal-item-margin-x: 32px !default;


// Radio ripple
Expand Down
69 changes: 43 additions & 26 deletions packages/default/scss/checkbox/_layout.scss
View file
Expand Up @@ -23,6 +23,7 @@
-webkit-appearance: none;
}


// Checkbox indicator
.k-checkbox::before {
@if $checkbox-icon-type == "glyph" {
Expand Down Expand Up @@ -107,6 +108,26 @@
@include disabled( $disabled-styling );
}


// Checkbox wrap
.k-checkbox-wrap {
flex: none;
display: inline-flex;
flex-flow: row nowrap;
gap: 0;
align-items: center;

&::before {
content: "\200b";
width: 0px;
overflow: hidden;
flex: none;
display: inline-block;
vertical-align: top;
}
}


// Checkbox label
.k-checkbox-label {
margin: 0;
Expand Down Expand Up @@ -181,25 +202,32 @@

// Checkbox list
.k-checkbox-list {
margin: $checkbox-list-margin;
padding: $checkbox-list-padding;
margin: 0;
padding: 0;
display: flex;
flex-flow: column nowrap;
gap: 0;
list-style: none;

.k-checkbox-item {
padding: $checkbox-list-item-padding-y $checkbox-list-item-padding-x;
}
}

.k-list-horizontal {
.k-checkbox-item {
display: inline-block;
margin: 0 $checkbox-list-horizontal-item-margin-x 0 0;

&:last-child {
margin-right: 0;
}
.k-checkbox-item,
.k-checkbox-list-item {
padding: $checkbox-list-item-padding-y $checkbox-list-item-padding-x;
display: flex;
flex-flow: row nowrap;
align-items: center;
align-content: center;
gap: map-get( $spacing, 1 );

.k-radio-label {
line-height: inherit;
}
}
.k-checkbox-list-horizontal,
.k-checkbox-list.k-list-horizontal {
display: flex;
flex-flow: row wrap;
gap: $checkbox-list-spacing;
}


// RTL
Expand All @@ -221,17 +249,6 @@
margin-right: 0;
margin-left: $checkbox-label-margin-x;
}

.k-list-horizontal {
.k-checkbox-item {
margin-right: 0;
margin-left: $checkbox-list-horizontal-item-margin-x;

&:last-child {
margin-left: 0;
}
}
}
}

.k-ripple-container {
Expand Down
4 changes: 1 addition & 3 deletions packages/default/scss/checkbox/_variables.scss
View file
Expand Up @@ -60,11 +60,9 @@ $checkbox-label-margin-x: map-get( $spacing, 1 ) !default;


// Checkbox list
$checkbox-list-margin: 0px !default;
$checkbox-list-padding: 0px !default;
$checkbox-list-spacing: map-get( $spacing, 4 ) !default;
$checkbox-list-item-padding-x: 0px !default;
$checkbox-list-item-padding-y: $list-item-padding-y !default;
$checkbox-list-horizontal-item-margin-x: 32px !default;


// Checkbox ripple
Expand Down
4 changes: 1 addition & 3 deletions packages/default/scss/list/_layout.scss
View file
Expand Up @@ -76,9 +76,7 @@
transition-timing-function: ease;
outline: none;

.k-checkbox {
margin-top: calc( ( #{$list-line-height-em} - #{$checkbox-size} ) / 2 );
font-size: inherit;
.k-checkbox-wrap {
align-self: flex-start;
}

Expand Down
65 changes: 40 additions & 25 deletions packages/default/scss/radio/_layout.scss
View file
Expand Up @@ -81,6 +81,25 @@
@include disabled( $disabled-styling );
}


// Radio wrap
.k-radio-wrap {
flex: none;
display: inline-flex;
flex-flow: row nowrap;
gap: 0;
align-items: center;

&::before {
content: "\200b";
width: 0px;
overflow: hidden;
flex: none;
display: inline-block;
vertical-align: top;
}
}

.k-radio + .k-radio-label {
display: inline;
}
Expand Down Expand Up @@ -144,25 +163,32 @@

// Radio list
.k-radio-list {
margin: $radio-list-margin;
padding: $radio-list-padding;
margin: 0;
padding: 0;
display: flex;
flex-flow: column nowrap;
gap: 0;
list-style: none;

.k-radio-item {
padding: $radio-list-item-padding-y $radio-list-item-padding-x;
}
}
.k-radio-item,
.k-radio-list-item {
padding: $radio-list-item-padding-y $radio-list-item-padding-x;
display: flex;
flex-flow: row nowrap;
align-items: center;
align-content: center;
gap: map-get( $spacing, 1 );

.k-list-horizontal {
.k-radio-item {
display: inline-block;
margin: 0 $radio-list-horizontal-item-margin-x 0 0;

&:last-child {
margin-right: 0;
}
.k-radio-label {
line-height: inherit;
}
}
.k-radio-list-horizontal,
.k-radio-list.k-list-horizontal {
display: flex;
flex-flow: row wrap;
gap: $radio-list-spacing;
}

// RTL
.k-rtl,
Expand All @@ -184,17 +210,6 @@
margin-right: 0;
margin-left: $radio-label-margin-x;
}

.k-list-horizontal {
.k-radio-item {
margin-right: 0;
margin-left: $radio-list-horizontal-item-margin-x;

&:last-child {
margin-left: 0;
}
}
}
}

.k-ripple-container {
Expand Down
4 changes: 1 addition & 3 deletions packages/default/scss/radio/_variables.scss
View file
Expand Up @@ -56,11 +56,9 @@ $radio-label-margin-x: map-get( $spacing, 1 ) !default;


// Radio list
$radio-list-margin: 0px !default;
$radio-list-padding: 0px !default;
$radio-list-spacing: map-get( $spacing, 4 ) !default;
$radio-list-item-padding-x: 0px !default;
$radio-list-item-padding-y: $list-item-padding-y !default;
$radio-list-horizontal-item-margin-x: 32px !default;


// Radio ripple
Expand Down
4 changes: 1 addition & 3 deletions packages/material/scss/checkbox/_variables.scss
View file
Expand Up @@ -60,11 +60,9 @@ $checkbox-label-margin-x: map-get( $spacing, 1 ) !default;


// Checkbox list
$checkbox-list-margin: 0px !default;
$checkbox-list-padding: 0px !default;
$checkbox-list-spacing: map-get( $spacing, 4 ) !default;
$checkbox-list-item-padding-x: 0px !default;
$checkbox-list-item-padding-y: $list-item-padding-y !default;
$checkbox-list-horizontal-item-margin-x: 32px !default;


// Checkbox ripple
Expand Down
4 changes: 1 addition & 3 deletions packages/material/scss/radio/_variables.scss
View file
Expand Up @@ -56,11 +56,9 @@ $radio-label-margin-x: map-get( $spacing, 1 ) !default;


// Radio list
$radio-list-margin: 0px !default;
$radio-list-padding: 0px !default;
$radio-list-spacing: map-get( $spacing, 4 ) !default;
$radio-list-item-padding-x: 0px !default;
$radio-list-item-padding-y: $list-item-padding-y !default;
$radio-list-horizontal-item-margin-x: 32px !default;


// Radio ripple
Expand Down

0 comments on commit 3f2e22f

Please sign in to comment.