Internetstiftelsen Styleguide

Radiobutton: Radio Button Inline 

<fieldset class="field-group m-form-control">
    <legend class="label-legend">Radio buttons</legend>
    <div class="radio radio--inline row no-gutters">
        <div class="grid-auto">
            <input type="radio" id="radiobutton-1" name="Radio button default" value="1" class="a-radio u-visuallyhidden">
            <label for="radiobutton-1">Radio button inline</label>
        </div>
    </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-1",
  "label": "Radio button inline",
  "value": "1",
  "is_inline": true,
  "is_disabled": false
}
  • Content: 
    @charset "UTF-8";
@use "sass:color";
@use '../../configurations/mixins' as mixin;
@use '../../configurations/extends';
@use '../../configurations/bem' as bem;
@use '../../configurations/variables' as var;
@use '../../configurations/functions' as func;
@use '../../configurations/colors/colors' as colors;
@use '../../configurations/colors/colors-functions' as colorFunc;

@include mixin.atom(radio) {
	&[type='radio'] {
		+ label {
			display: inline-flex;
			position: relative;
			align-items: flex-start;
			padding-top: func.rhythm(0.5);
			padding-right: func.rhythm(2);
			padding-bottom: func.rhythm(0.5);
			font-family: var.$font-family-base;

			&::before {
				content: '';
				display: block;
				flex-shrink: 0;
				width: func.to_rem(15px);
				height: func.to_rem(15px);
				margin-top: func.to_rem(3px);
				margin-right: func.rhythm(1);
				transform: translateX(func.to_rem(1px));
				border: 2px solid transparent;
				border-radius: 50%;
				background-color: colors.$color-snow;
				box-shadow: 0 0 0 1px colors.$color-cyberspace;
			}
		}

		&:focus,
		&:hover {
			+ label {
				&::before {
					background-color: color.adjust(colors.$color-snow, $lightness: -5%);
				}
			}
		}

		&:checked {
			+ label {
				&::before {
					border: 2px solid colors.$color-ash;
					background-color: colors.$color-cyberspace;
				}
			}
		}

		&[disabled] {
			+ label {
				@extend %disabled;

				&::before {
					background-color: color.adjust(colors.$color-concrete, $lightness: -5%);
				}
			}

			&:checked {
				+ label {
					&::before {
						background-color: colors.$color-cyberspace;
					}
				}
			}
		}

		&:invalid {
			+ label {
				&::before {
					background-color: colors.$color-ruby-light;
					box-shadow: 0 0 0 1px colors.$color-ruby-dark;
				}
			}
		}
	}
}

@include bem.b(radio) {
	&.is-invalid {
		[type='radio'] {
			+ label {
				&::before {
					background-color: colors.$color-ruby-light;
					box-shadow: 0 0 0 1px colors.$color-ruby-dark;
				}
			}
		}
	}

	@include bem.m(inline) {
		padding-top: 0;
		padding-bottom: 0;

		input[type='radio'] {
			+ label {
				margin-top: func.rhythm(1);
				margin-bottom: func.rhythm(1);
			}
		}
	}
}
  • URL: /components/raw/radiobutton/_radiobutton.scss
  • Filesystem Path: src/atoms/radiobutton/_radiobutton.scss
  • Size: 2.2 KB

No notes defined.