<fieldset class="field-group m-form-control">
<legend class="label-legend">Radio buttons</legend>
<div class="radio">
<input type="radio" id="radiobutton-2" name="Radio button default" value="2" class="a-radio u-visuallyhidden" disabled>
<label for="radiobutton-2">Radio button disabled</label>
</div>
</fieldset>
<fieldset class="field-group m-form-control">
<legend class="label-legend">Radio buttons</legend>
<div class="radio{{#if is_inline}} radio--inline row no-gutters{{/if}}{{#if is_invalid}} is-invalid{{/if}}">
{{#if is_inline}}
<div class="grid-auto">
{{/if}}
<input type="radio" id="{{id}}" name="{{name}}" value="{{value}}" class="a-radio u-visuallyhidden" {{#if is_disabled}}disabled{{/if}} {{#if is_required}}required{{/if}} {{#if is_invalid}}aria-invalid="true"{{/if}}>
<label for="{{id}}">{{label}}</label>
{{#if is_inline}}
</div>
{{/if}}
</div>
</fieldset>
{
"name": "Radio button default",
"id": "radiobutton-2",
"label": "Radio button disabled",
"value": "2",
"is_inline": false,
"is_disabled": true
}
@charset 'UTF-8';
@use "sass:color";
@include atom(radio) {
&[type='radio'] {
+ label {
display: inline-flex;
position: relative;
align-items: flex-start;
padding-top: rhythm(0.5);
padding-right: rhythm(2);
padding-bottom: rhythm(0.5);
font-family: $font-family-base;
&::before {
content: '';
display: block;
flex-shrink: 0;
width: rem(15px);
height: rem(15px);
margin-top: rem(3px);
margin-right: rhythm(1);
transform: translateX(rem(1px));
border: 2px solid transparent;
border-radius: 50%;
background-color: $color-snow;
box-shadow: 0 0 0 1px $color-cyberspace;
}
}
&:focus,
&:hover {
+ label {
&::before {
background-color: color.adjust($color-snow, $lightness: -5%);
}
}
}
&:checked {
+ label {
&::before {
border: 2px solid $color-ash;
background-color: $color-cyberspace;
}
}
}
&[disabled] {
+ label {
@extend %disabled;
&::before {
background-color: color.adjust($color-concrete, $lightness: -5%);
}
}
&:checked {
+ label {
&::before {
background-color: $color-cyberspace;
}
}
}
}
&:invalid {
+ label {
&::before {
background-color: $color-ruby-light;
box-shadow: 0 0 0 1px $color-ruby-dark;
}
}
}
}
}
@include b(radio) {
&.is-invalid {
[type='radio'] {
+ label {
&::before {
background-color: $color-ruby-light;
box-shadow: 0 0 0 1px $color-ruby-dark;
}
}
}
}
@include m(inline) {
padding-top: 0;
padding-bottom: 0;
input[type='radio'] {
+ label {
margin-top: rhythm(1);
margin-bottom: rhythm(1);
}
}
}
}
No notes defined.