<fieldset class="field-group m-form-control">
    <legend class="label-legend">Radio buttons</legend>
    <div class="radio is-invalid">
        <input type="radio" id="radiobutton-3" name="Radio button default" value="3" class="a-radio u-visuallyhidden" required aria-invalid="true">
        <label for="radiobutton-3">Radio button invalid</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-3",
  "label": "Radio button invalid",
  "value": "3",
  "is_inline": false,
  "is_disabled": false,
  "is_invalid": true,
  "is_required": true
}
  • Content:
    @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);
    			}
    		}
    	}
    }
    
  • URL: /components/raw/radiobutton/_radiobutton.scss
  • Filesystem Path: src/atoms/radiobutton/_radiobutton.scss
  • Size: 1.7 KB

No notes defined.