Skip to content

Commit

Permalink
feat(radio): style native radio through k-radio class
Browse files Browse the repository at this point in the history
  • Loading branch information
@silviyaboteva @joneff
silviyaboteva authored and joneff committed Nov 21, 2019
1 parent 066d5ca commit f7d9906
Show file tree
Hide file tree
Showing 10 changed files with 180 additions and 178 deletions.
4 changes: 4 additions & 0 deletions packages/bootstrap/scss/_variables.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -687,7 +687,11 @@ $checkbox-disabled-checked-border: null !default;


//Radio Buttons
$radio-icon-size: 10px !default;
$radio-size: $icon-size !default;
$radio-radius: 50% !default;
$radio-border-width: 1px !default;
$radio-line-height: $radio-size + $radio-border-width !default;

$radio-bg: $checkbox-bg !default;
$radio-text: $checkbox-text !default;
Expand Down
4 changes: 4 additions & 0 deletions packages/default/scss/_variables.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -658,7 +658,11 @@ $checkbox-disabled-checked-border: null !default;


//Radio Buttons
$radio-icon-size: 12px !default;
$radio-size: $icon-size !default;
$radio-radius: 50% !default;
$radio-border-width: 1px !default;
$radio-line-height: $radio-size + $radio-border-width !default;

$radio-bg: $checkbox-bg !default;
$radio-text: $checkbox-text !default;
Expand Down
6 changes: 6 additions & 0 deletions packages/default/scss/checkbox/_layout.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,11 @@
left: 50%;
}

// Hover state
.k-checkbox:hover {
cursor: pointer;
}


// Checked state
.k-checkbox:checked::before {
Expand Down Expand Up @@ -64,6 +69,7 @@
.k-checkbox:disabled,
.k-checkbox:disabled + .k-checkbox-label {
@include disabled;
cursor: default;
}


Expand Down
183 changes: 70 additions & 113 deletions packages/default/scss/radio/_layout.scss
View file
Original file line number Diff line number Diff line change
@@ -1,37 +1,73 @@
@include exports( "radio/layout" ) {

// Container box
.k-radio {
@include border-radius( $radio-radius );
margin: 0;
padding: 0;
clip: rect(0, 0, 0, 0);
width: $radio-size;
height: $radio-size;
border-width: $radio-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;
}

.k-radio::before {
content: "";
width: $radio-size / 2;
height: $radio-size / 2;
border-radius: 50%;
transform: scale(0) translate(-50%, -50%);
overflow: hidden;
position: absolute;
opacity: 0;
-webkit-appearance: none;
pointer-events: none;
top: 50%;
left: 50%;
}

// Hover state
.k-radio:hover {
cursor: pointer;
}

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

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

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

.k-ripple {
top: $checkbox-size / 2;
left: $checkbox-size / 2;
top: $radio-size / 2;
left: $radio-size / 2;
right: auto;
bottom: auto;
width: $checkbox-size * 5 / 2;
height: $checkbox-size * 5 / 2;
width: $radio-size * 5 / 2;
height: $radio-size * 5 / 2;
transform: translate(-50%, -50%);
border-radius: 50%;
}
Expand All @@ -44,104 +80,25 @@
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-radio-label::before,
.k-radio-label::after {
box-sizing: border-box;
text-align: center;
display: inline-flex;
align-items: center;
justify-content: center;
overflow: hidden;
position: absolute;
.k-radio + .k-radio-label {
margin-left: $icon-spacing;
}

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


// Radio
.k-radio-label::after {
content: "";
width: $checkbox-size / 2;
height: $checkbox-size / 2;
border-radius: 50%;
position: absolute;
top: $checkbox-size / 4;
left: $checkbox-size / 4;
transform: scale(0);
.k-radio-label > .k-radio {
margin-right: $icon-spacing;
}
.k-radio:checked + .k-radio-label::after {
transform: scale(1);
}


// RTL
.k-rtl,
[dir="rtl"] {
.k-radio-label {
padding-left: 0;
padding-right: calc( #{$checkbox-size} + #{$icon-spacing} );
}
.k-radio + .k-radio-label::before {
left: auto;
right: 0;
}
.k-radio + .k-radio-label::after {
right: $checkbox-size / 4;
.k-radio + .k-radio-label {
margin-left: 0;
margin-right: $icon-spacing;
}
}

// Radio list
.k-radio-list {
.k-radio-label {
line-height: $checkbox-size * 1.25;
}
}

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

.k-form-inline {
.k-form-field {
> label:not(.k-radio-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-radio-label > .k-radio {
margin-right: 0;
margin-left: $icon-spacing;
}
}
}
Expand All @@ -168,9 +125,9 @@

.k-radio-legacy-label {
margin: 0;
padding-left: calc( #{$checkbox-size} + #{$icon-spacing} );
padding-left: calc( #{$radio-size} + #{$icon-spacing} );
min-height: $icon-size;
line-height: $checkbox-line-height;
line-height: $radio-line-height;
vertical-align: text-top;
display: inline-flex;
align-items: flex-start;
Expand Down Expand Up @@ -208,9 +165,9 @@
.k-radio-legacy-label::before {
@include border-radius( $radio-radius );
content: "";
width: $checkbox-size;
height: $checkbox-size;
border-width: $checkbox-border-width;
width: $radio-size;
height: $radio-size;
border-width: $radio-border-width;
border-style: solid;
top: 0;
left: 0;
Expand All @@ -220,12 +177,12 @@
// Radio
.k-radio-legacy-label::after {
content: "";
width: $checkbox-size / 2;
height: $checkbox-size / 2;
width: $radio-size / 2;
height: $radio-size / 2;
border-radius: 50%;
position: absolute;
top: $checkbox-size / 4;
left: $checkbox-size / 4;
top: $radio-size / 4;
left: $radio-size / 4;
transform: scale(0);
}
.k-radio-legacy:checked + .k-radio-legacy-label::after {
Expand All @@ -238,22 +195,22 @@
[dir="rtl"] {
.k-radio-legacy-label {
padding-left: 0;
padding-right: calc( #{$checkbox-size} + #{$icon-spacing} );
padding-right: calc( #{$radio-size} + #{$icon-spacing} );
}
.k-radio-legacy + .k-radio-legacy-label::before {
left: auto;
right: 0;
}
.k-radio-legacy + .k-radio-legacy-label::after {
right: $checkbox-size / 4;
right: $radio-size / 4;
}
}


// Radio list
.k-radio-list {
.k-radio-legacy-label {
line-height: $checkbox-size * 1.25;
line-height: $radio-size * 1.25;
}
}

Expand Down
Loading

0 comments on commit f7d9906

Please sign in to comment.