Skip to content

Commit

Permalink
feat(checkbox): style native checkbox trough k-checkbox class
Browse files Browse the repository at this point in the history
  • Loading branch information
@joneff
joneff committed Nov 21, 2019
1 parent 05ad547 commit 066d5ca
Show file tree
Hide file tree
Showing 5 changed files with 201 additions and 211 deletions.
2 changes: 1 addition & 1 deletion packages/default/scss/_variables.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -622,7 +622,7 @@ $textbox-icon-width: calc( #{$icon-size} + #{$input-padding-x * 2} ) !default;
$textarea-default-width: 18em !default;

//Checkboxes
$checkbox-icon-size: $icon-size !default;
$checkbox-icon-size: 12px !default;
$checkbox-size: $icon-size !default;
$checkbox-radius: $border-radius !default;
$checkbox-border-width: 1px !default;
Expand Down
183 changes: 74 additions & 109 deletions packages/default/scss/checkbox/_layout.scss
View file
Original file line number Diff line number Diff line change
@@ -1,27 +1,81 @@
@include exports( "checkbox/layout" ) {

// Container box
.k-checkbox {
@include border-radius( $checkbox-radius );
margin: 0;
padding: 0;
clip: rect(0, 0, 0, 0);
width: $checkbox-size;
height: $checkbox-size;
border-width: $checkbox-border-width;
border-style: solid;
outline: 0;
box-sizing: border-box;
display: inline-flex;
align-items: center;
justify-content: center;
vertical-align: middle;
position: relative;
-webkit-appearance: none;
}

// Checkmark
.k-checkbox::before {
content: "\e118";
width: $checkbox-icon-size;
height: $checkbox-icon-size;
font-size: $checkbox-icon-size;
font-family: "WebComponentsIcons", monospace;
transform: scale(0) translate(-50%, -50%);
overflow: hidden;
position: absolute;
opacity: 0;
-webkit-appearance: none;
pointer-events: none;
top: 50%;
left: 50%;
}


// Checked state
.k-checkbox:checked::before {
@include border-radius( $checkbox-radius );
transform: scale(1) translate(-50%, -50%);
}


// Indeterminate state
.k-checkbox:indeterminate::before {
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;
}
}


// Disabled state
.k-checkbox:disabled,
.k-checkbox:disabled + .k-checkbox-label {
@include disabled;
}


// Checkbox label
.k-checkbox-label {
margin: 0;
padding-left: calc( #{$checkbox-size} + #{$icon-spacing} );
min-height: $icon-size;
padding: 0;
line-height: $checkbox-line-height;
vertical-align: text-top;
display: inline-flex;
flex-direction: column;
align-items: flex-start;
vertical-align: middle;
position: relative;
cursor: pointer;

Expand All @@ -44,117 +98,28 @@
width: 200% !important;
height: 200% !important;
}

// 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-label::before,
.k-checkbox-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;
}
.k-checkbox + .k-checkbox-label {
margin-left: $icon-spacing;
}

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

.k-checkbox-label::after {
content: "\e118";
width: $checkbox-size;
height: $checkbox-size;
transform: scale(0);
}
.k-checkbox:checked + .k-checkbox-label::after {
@include border-radius( $checkbox-radius );
transform: scale(1);
}
.k-checkbox:indeterminate + .k-checkbox-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;
}
}

// Form styles
.k-form,
.k-form-inline {
.k-checkbox-label {
margin-right: $padding-x * 2;
align-self: center;
// RTL
.k-rtl,
[dir="rtl"] {
.k-checkbox + .k-checkbox-label {
margin-left: 0;
margin-right: $icon-spacing;
}
}

.k-form-inline {
.k-form-field {
> label:not(.k-checkbox-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-checkbox-label > .k-checkbox {
margin-right: 0;
margin-left: $icon-spacing;
}
}

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

@include exports( "checkbox/layout/legacy" ) {
Expand Down
134 changes: 71 additions & 63 deletions packages/default/scss/checkbox/_theme.scss
View file
Original file line number Diff line number Diff line change
@@ -1,82 +1,90 @@
@include exports("checkbox/theme") {

// Checkbox
.k-checkbox-label {
.k-checkbox {
@include fill(
$bg: $checkbox-bg,
$border: $checkbox-border
);

// Normal state
&::before {
@include fill(
$bg: $checkbox-bg,
$border: $checkbox-border
);
@include fill( $checkbox-text );
}
}

// Hover state

// Focus state
.k-checkbox:focus + & {
&::before {
@include fill( $border: $checkbox-focused-border );
@include box-shadow( $checkbox-focused-shadow );
}
}
// Hover state
.k-checkbox:hover {
@include fill(
$bg: $checkbox-hovered-bg,
$border: $checkbox-hovered-border
);

// Indeterminate
.k-checkbox-legacy:indeterminate + & {
&::before {
@include fill(
$bg: $checkbox-indeterminate-bg,
$border: $checkbox-indeterminate-border
);
}
&::after {
@include fill( $checkbox-indeterminate-text );
}
&::before {
@include fill( $checkbox-hovered-text );
}
}

// Checked
.k-checkbox:checked + & {
&::before {
@include fill(
$bg: $checkbox-checked-bg,
$border: $checkbox-checked-border
);
}
&::after {
@include fill( $checkbox-checked-text );
}

// Focus state
.k-checkbox:focus {
@include fill( $border: $checkbox-focused-border );
@include box-shadow( $checkbox-focused-shadow );
}


// Indeterminate
.k-checkbox:indeterminate {
@include fill(
$bg: $checkbox-indeterminate-bg,
$border: $checkbox-indeterminate-border
);

&::before {
@include fill( $checkbox-indeterminate-text );
}
.k-checkbox:checked:focus + & {
&::before {
@include fill( $border: $checkbox-focused-checked-border );
@include box-shadow( $checkbox-focused-checked-shadow );
}
}


// Checked
.k-checkbox:checked {
@include fill(
$bg: $checkbox-checked-bg,
$border: $checkbox-checked-border
);

&::before {
@include fill( $checkbox-checked-text );
}
}
.k-checkbox:checked:focus {
@include fill( $border: $checkbox-focused-checked-border );
@include box-shadow( $checkbox-focused-checked-shadow );

&::before {}
}

// Disabled
.k-checkbox:disabled + & {
&::before {
@include fill(
$bg: $checkbox-disabled-bg,
$border: $checkbox-disabled-border
);
}
&::after {
@include fill( $checkbox-disabled-text );
}

// Disabled
.k-checkbox:disabled {
@include fill(
$bg: $checkbox-disabled-bg,
$border: $checkbox-disabled-border
);

&::before {
@include fill( $checkbox-disabled-text );
}
.k-checkbox:checked:disabled + &,
.k-checkbox:indeterminate:disabled + & {
&::before {
@include fill(
$bg: $checkbox-disabled-checked-bg,
$border: $checkbox-disabled-checked-border
);
}
&::after {
@include fill( $checkbox-disabled-checked-text );
}
}
.k-checkbox:checked:disabled,
.k-checkbox:indeterminate:disabled {
@include fill(
$bg: $checkbox-disabled-checked-bg,
$border: $checkbox-disabled-checked-border
);

&::before {
@include fill( $checkbox-disabled-checked-text );
}
}

Expand Down
Loading

0 comments on commit 066d5ca

Please sign in to comment.