Skip to content

Commit

Permalink
fix: add checkbox / radio styles for IE 11 / Edge
Browse files Browse the repository at this point in the history
  • Loading branch information
@joneff
joneff committed Dec 20, 2019
1 parent f478617 commit d4680c4
Show file tree
Hide file tree
Showing 13 changed files with 72 additions and 649 deletions.
2 changes: 0 additions & 2 deletions packages/bootstrap/scss/_variables.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -701,8 +701,6 @@ $checkbox-line-height: $checkbox-size + $checkbox-border-width !default;
$checkbox-indeterminate-style: square !default;
$checkbox-dash-height: $checkbox-size / 10 !default;
$checkbox-dash-width: $checkbox-size - ( $checkbox-border-width * 4 ) !default;
$checkbox-dash-offset-x: $checkbox-border-width * 2 !default;
$checkbox-dash-offset-y: ( $checkbox-size - $checkbox-dash-height ) / 2 !default;

$checkbox-bg: $input-bg !default;
$checkbox-text: transparent !default;
Expand Down
2 changes: 0 additions & 2 deletions packages/default/scss/_variables.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -671,8 +671,6 @@ $checkbox-line-height: $checkbox-size + $checkbox-border-width !default;
$checkbox-indeterminate-style: square !default;
$checkbox-dash-height: $checkbox-size / 10 !default;
$checkbox-dash-width: $checkbox-size - ( $checkbox-border-width * 4 ) !default;
$checkbox-dash-offset-x: $checkbox-border-width * 2 !default;
$checkbox-dash-offset-y: ( $checkbox-size - $checkbox-dash-height ) / 2 !default;

$checkbox-bg: $input-bg !default;
$checkbox-text: $input-text !default;
Expand Down
158 changes: 13 additions & 145 deletions packages/default/scss/checkbox/_layout.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,9 +12,7 @@
border-style: solid;
outline: 0;
box-sizing: border-box;
display: inline-flex;
align-items: center;
justify-content: center;
display: inline-block;
vertical-align: top;
position: relative;
-webkit-appearance: none;
Expand Down Expand Up @@ -51,19 +49,15 @@
.k-checkbox:indeterminate::before,
.k-checkbox.k-state-indeterminate::before {
content: "";
position: initial;
transform: scale(1);
background-color: currentColor;
transform: scale(1) translate(-50%, -50%);

@if $checkbox-indeterminate-style == "dash" {
width: $checkbox-dash-width;
height: $checkbox-dash-height;
top: $checkbox-dash-offset-y;
left: $checkbox-dash-offset-x;
} @else {
width: $checkbox-size / 2;
height: $checkbox-size / 2;
top: $checkbox-size / 4;
left: $checkbox-size / 4;
}
}

Expand Down Expand Up @@ -135,149 +129,23 @@

}

@include exports( "checkbox/layout/legacy" ) {

// Checkbox legacy styles
.k-checkbox-legacy {
margin: 0;
padding: 0;
clip: rect(0, 0, 0, 0);
overflow: hidden;
position: absolute;
opacity: 0;
-webkit-appearance: none;
pointer-events: none;
}

.k-checkbox-legacy:disabled + .k-checkbox-legacy-label {
@include disabled;
}


.k-checkbox-legacy-label {
margin: 0;
padding-left: calc( #{$checkbox-size} + #{$icon-spacing} );
min-height: $icon-size;
line-height: $checkbox-line-height;
vertical-align: text-top;
display: inline-flex;
align-items: flex-start;
position: relative;
cursor: pointer;
@include exports( "checkbox/layout/edge" ) {

// With no text
&.k-no-text {
padding: 0;
width: $icon-size;
height: $icon-size;
display: inline-block;
font-size: 0;

.k-ie &,
.k-edge & {
width: 0;
}
}

.k-rtl &,
[dir="rtl"] & {
padding-left: 0;
padding-right: calc( #{$checkbox-size} + #{$icon-spacing} );
}
.k-checkbox::-ms-check {
border-width: 0;
border-color: inherit;
color: inherit;
background-color: inherit;
}

.k-checkbox-legacy-label::before,
.k-checkbox-legacy-label::after {
font-size: $checkbox-icon-size;
font-family: "WebComponentsIcons", monospace;
box-sizing: border-box;
text-align: center;
display: inline-flex;
align-items: center;
justify-content: center;
overflow: hidden;
position: absolute;
top: 0;
left: 0;

.k-rtl &,
[dir="rtl"] & {
left: auto;
right: 0;
// IE 11 hack
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
.k-checkbox::-ms-check {
border-width: 1px;
}
}


// Container box
.k-checkbox-legacy-label::before {
content: "";
width: $checkbox-size;
height: $checkbox-size;
border-width: $checkbox-border-width;
border-style: solid;
@include border-radius( $checkbox-radius );
}

// Checkbox
.k-checkbox-legacy-label::after {
content: "\e118";
width: $checkbox-size;
height: $checkbox-size;
transform: scale(0);
}
.k-checkbox-legacy:checked + .k-checkbox-legacy-label::after {
@include border-radius( $checkbox-radius );
transform: scale(1);
}
.k-checkbox-legacy:indeterminate + .k-checkbox-legacy-label::after {
content: "";
transform: scale(1);

@if $checkbox-indeterminate-style == "dash" {
width: $checkbox-dash-width;
height: $checkbox-dash-height;
top: $checkbox-dash-offset-y;
left: $checkbox-dash-offset-x;
} @else {
width: $checkbox-size / 2;
height: $checkbox-size / 2;
top: $checkbox-size / 4;
left: $checkbox-size / 4;
}

.k-rtl &,
[dir="rtl"] & {
right: $checkbox-size / 4;
}
}

// Form styles
.k-form,
.k-form-inline {
.k-checkbox-legacy-label {
margin-right: $padding-x * 2;
align-self: center;
}
}

.k-form-inline {
.k-form-field {
> label:not(.k-checkbox-legacy-label) {
width: $inline-form-element-width;
text-align: right;
line-height: $line-height;
padding: calc( #{$padding-y} + #{$input-border-width} ) 0;
padding-right: $padding-x-lg;
align-self: center;
}
}
}

.k-treeview,
.k-grid {
.k-checkbox-legacy-label {
cursor: default;
outline: 0;
}
}
}
Loading

0 comments on commit d4680c4

Please sign in to comment.