Skip to content

Commit

Permalink
feat(radiobutton): add radio button styles
Browse files Browse the repository at this point in the history
  • Loading branch information
@PaskalevStoyan @Juveniel
PaskalevStoyan authored and Juveniel committed Aug 12, 2022
1 parent 3c7c2fa commit fd0a868
Show file tree
Hide file tree
Showing 5 changed files with 619 additions and 2 deletions.
4 changes: 2 additions & 2 deletions packages/fluent/scss/index.scss
View file
Expand Up @@ -51,7 +51,7 @@
@use "checkbox";
@use "listbox";
// @use "progressbar";
// @use "radio";
@use "radio";
@use "slider";


Expand Down Expand Up @@ -213,7 +213,7 @@
@include checkbox.styles();
@include listbox.styles();
// @include progressbar.styles();
// @include radio.styles();
@include radio.styles();
@include slider.styles();


Expand Down
277 changes: 277 additions & 0 deletions packages/fluent/scss/radio/_layout.scss
View file
@@ -0,0 +1,277 @@
@use "_variables.scss" as *;
@use "../core/_variables.scss" as *;
@use "../core/mixins/border-radius" as *;
@use "../core/mixins/disabled" as *;

@mixin kendo-radio--layout() {

.k-radio {
@include border-radius( $kendo-radio-border-radius );
width: var( --INTERNAL-kendo-radio-width, #{ $kendo-radio-width } );
height: var( --INTERNAL-kendo-radio-height, #{ $kendo-radio-height } );
margin: 0;
padding: 0;
line-height: initial;
border-width: var( --kendo-radio-border-width, #{ $kendo-radio-border-width });
border-style: solid;
outline: 0;
box-sizing: border-box;
background-position: center;
background-repeat: no-repeat;
background-size: contain;
display: inline-block;
flex: none;
vertical-align: middle;
position: relative;
cursor: pointer;
-webkit-appearance: none;

&::before {
font-size: var( --INTERNAL-kendo-radio-font-size, #{ $kendo-radio-font-size } )
}
}


// Radio indicator
.k-radio::before {
@if $kendo-radio-indicator-type == "glyph" {
content: var( --kendo-radio-checked-glyph, #{ $kendo-radio-checked-glyph } );
width: 1em;
height: 1em;
font-family: var( --kendo-radio-glyph-font-family, #{ $kendo-radio-glyph-font-family } );
line-height: 1;
transform: scale(0) translate(-50%, -50%);
overflow: hidden;
position: absolute;
top: 50%;
left: 50%;
}
}

// Focus state
.k-radio:focus,
.k-radio.k-focus {
&::before {
content: '';
display: block;
position: absolute;
margin: -4px;
top: 0;
bottom: 0;
left: 0;
right: 0;
border: 1px solid;
}
}


.k-radio:hover,
.k-radio.k-hover {
&:not(
.k-radio.k-disabled, .k-radio:disabled,
.k-radio.k-invalid, .k-radio:invalid
)::after {
content: "";
width: var( --INTERNAL-kendo-radio-checked-width, #{ $kendo-radio-checked-width } );
height: var( --INTERNAL-kendo-radio-checked-height, #{ $kendo-radio-checked-height } );
border-width: var( --INTERNAL-kendo-radio-checked-border-width, #{ $kendo-radio-checked-border-width } );
border-style: solid;
border-radius: var( --kendo-radio-border-radius, #{ $kendo-radio-border-radius } );
box-sizing: border-box;
position: absolute;
top: var(--INTERNAL-kendo-radio-checked-top, #{ $kendo-radio-checked-top } );
left: var(--INTERNAL-kendo-radio-checked-left, #{ $kendo-radio-checked-left } );
}
}

// Checked and Hover state
.k-radio:checked,
.k-radio.k-checked {
&::after {
content: "";
width: var( --INTERNAL-kendo-radio-checked-width, #{ $kendo-radio-checked-width } );
height: var( --INTERNAL-kendo-radio-checked-height, #{ $kendo-radio-checked-height } );
border-width: var( --INTERNAL-kendo-radio-checked-border-width, #{ $kendo-radio-checked-border-width } );
border-style: solid;
border-radius: var( --kendo-radio-border-radius, #{ $kendo-radio-border-radius } );
box-sizing: border-box;
position: absolute;
top: var(--INTERNAL-kendo-radio-checked-top, #{ $kendo-radio-checked-top } );
left: var(--INTERNAL-kendo-radio-checked-left, #{ $kendo-radio-checked-left } );
}

@if $kendo-radio-indicator-type == "glyph" {
&::before {
transform: scale(1) translate(-50%, -50%);
}
}
}


.k-radio:disabled:checked,
.k-radio.k-disabled.k-checked {
@if $kendo-radio-indicator-type == "image" {
background-image: var( --kendo-radio-disabled-checked-image, #{ $kendo-radio-disabled-checked-image } );
}
}


// Radio wrap
.k-radio-wrap {
flex: none;
display: inline-flex;
flex-flow: row nowrap;
gap: 0;
align-items: center;
align-self: start;
vertical-align: middle;
position: relative;

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


// Radio label
.k-radio-label {
margin: 0;
padding: 0;
display: inline-flex;
align-items: flex-start;
gap: var( --kendo-radio-label-spacing, #{ $kendo-radio-label-spacing } );
vertical-align: middle;
position: relative;
cursor: pointer;

.k-ripple {
// Hide ripple temporarily
visibility: hidden !important; // sass-lint:disable-line no-important
}
}
.k-radio + .k-label,
.k-radio-wrap + .k-label,
.k-radio + .k-radio-label,
.k-radio-wrap + .k-radio-label {
display: inline;
margin-inline-start: var( --kendo-radio-label-spacing, #{ $kendo-radio-label-spacing } );
}


// Empty label
.k-radio-label:empty {
display: none !important; // sass-lint:disable-line no-important
}
.k-radio-label.k-no-text {
min-width: 1px;
}


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


.k-radio-item,
.k-radio-list-item {
padding-inline: var( --kendo-radio-list-item-padding-x, #{ $kendo-radio-list-item-padding-x } );
padding-block: var( --kendo-radio-list-item-padding-y, #{ $kendo-radio-list-item-padding-y } );
display: flex;
flex-flow: row nowrap;
align-items: center;
align-content: center;
gap: var( --kendo-radio-list-item-gap, #{ $kendo-radio-list-item-gap } );

.k-radio-label {
margin: 0;
}
}


.k-radio-list-horizontal,
.k-radio-list.k-list-horizontal {
display: flex;
flex-flow: row wrap;
gap: var( --kendo-radio-list-spacing, #{ $kendo-radio-list-spacing } );
}


// Ripple
.k-ripple-container {
.k-radio::after {
content: "";
width: var( --INTERNAL-kendo-radio-ripple-width, #{ $kendo-radio-ripple-width } );
height: var( --INTERNAL-kendo-radio-ripple-height, #{ $kendo-radio-ripple-height } );
display: block;
position: absolute;
left: 50%;
top: 50%;
border-radius: 100%;
z-index: -1;
transition: opacity 100ms linear, transform 150ms cubic-bezier(.4, 0, .2, 1);
transform: translate(-50%, -50%) scale(0);
transform-origin: center center;
}

.k-radio:disabled::after,
.k-radio.k-disabled::after {
display: none;
}

.k-radio:disabled::after,
.k-radio.k-disabled::after {
display: none;
}
}


// Radio size
@each $size, $size-props in $kendo-radio-sizes {
$_size: map-get( $size-props, size );
$_glyph-size: map-get( $size-props, glyph-size );
$_ripple-size: map-get( $size-props, ripple-size );
$_checked-border-width: map-get( $size-props, checked-border-width);
$_checked-position: map-get( $size-props, checked-position);

.k-radio-#{$size} {
--INTERNAL-kendo-radio-width: #{ $_size };
--INTERNAL-kendo-radio-height: #{ $_size };

&::before {
--INTERNAL-kendo-radio-font-size: #{ $_glyph-size };
}
}

.k-radio-#{$size}.k-checked,
.k-radio-#{$size}:checked,
.k-radio-#{$size}.k-hover,
.k-radio-#{$size}:hover {
&::after {
--INTERNAL-kendo-radio-checked-width: calc( #{ $_size } / 2 );
--INTERNAL-kendo-radio-checked-height: calc( #{ $_size } / 2 );
--INTERNAL-kendo-radio-checked-border-width: #{ $_checked-border-width };
--INTERNAL-kendo-radio-checked-top: #{ $_checked-position };
--INTERNAL-kendo-radio-checked-left: #{ $_checked-position };
}
}

.k-ripple-container {
.k-radio-#{$size}::after {
--INTERNAL-kendo-radio-ripple-width: #{ $_ripple-size };
--INTERNAL-kendo-radio-ripple-height: #{ $_ripple-size };
}
}
}

}

0 comments on commit fd0a868

Please sign in to comment.