<div class="radio--light">
<div class="radio__wrapper">
<input class="radio__input" id="choice" type="radio" name="choice" value="1" />
<label class="radio__label" for="choice">Some long long condition condition condition condition condition condition condition condition condition condition condition condition condition condition condition condition</label>
</div>
<!-- NOTE: This div is reserved for field-specific error messages by a backend -->
<div class="radio__error">Please provide a value for this field</div>
</div>
<div class="radio--{{splitDashLast _self.name}}">
<div class="radio__wrapper">
<input class="radio__input" id="{{id}}" type="radio" name="{{name}}" {{#if value}}value="{{value}}"{{/if}} {{#if disabled}}disabled{{/if}} {{#if required}}required="true"{{/if}} {{#if checked}}checked{{/if}} />
<label class="radio__label" for="{{id}}">{{{label}}}</label>
</div>
{{#if helper}}
<div class="radio__helper">{{helper}}</div>
{{/if}}
<!-- NOTE: This div is reserved for field-specific error messages by a backend -->
{{#if error}}
<div class="radio__error">{{error}}</div>
{{else}}
<!--<div class="radio__error">Put in the error message here...</div>-->
{{/if}}
</div>
{
"id": "choice",
"name": "choice",
"label": "Some long long condition condition condition condition condition condition condition condition condition condition condition condition condition condition condition condition",
"value": "1",
"required": false,
"disabled": false,
"checked": false,
"error": "Please provide a value for this field",
"helper": ""
}
import './radio-material-like.scss';
export * from './radio-material-like';
import FormComponent from '../../form-component';
export class Radio extends FormComponent {
constructor(context, options) {
super(
context,
context.querySelector('.radio__input'),
context.querySelector('.radio__error'),
'Radio',
options
);
this.relocateOuterError();
super.init();
}
relocateOuterError() {
// Some CMS (D8) are handling multiple radios as one element, as you can
// only choose one option. In this case the error message is generated
// after the radios (not inside a radio div). Make sure to relocate such
// error elements into the actual radio.
const error = this.context.nextElementSibling;
if (error && error.classList.contains('radio__error')) {
// move the outside generated error message into the component
this.context.appendChild(error);
this.errorField = error;
}
}
}
export const selector = '[class^="radio--"]';
@import "~shared/base";
/*******************************************************************************
* Contextual classes:
* - is-disabled: When input is disabled
* - is-tabbed: When the input is focused by tabbing (a11y)
* - is-focused: When the input is focused
* - is-initialized: When the JS for the component is initialized
* - has-no-label: If there is no label available
******************************************************************************/
// font settings
$radioFontSize: 1.125rem;
$radioLineHeight: 1.35rem;
$radioIconFontSize: 1.25rem;
$radioFontFamily: inherit;
$radioErrorFontSize: 1rem;
$radioHelperFontSize: 1rem;
// Need to use string here due to:
// https://github.com/webpack-contrib/sass-loader/issues/487
$variants: "dark", "light";
@each $color in $variants {
@if $color == "light" {
// color settings
$radioBackgroundColor: transparent !global;
$radioErrorBackgroundColor: $red-light !global;
$radioColor: $black !global;
$radioInnerColor: $black !global;
$radioBorderColor: $radioInnerColor !global;
$radioBorderErrorColor: $red !global;
$radioLinkColor: $radioColor !global;
$radioLinkColorHover: $clouds !global;
$radioErrorColor: $red !global;
$radioHelperColor: $black !global;
$radioHelperInvalidColor: $black !global;
$radioFocusBorderColor: #95a5a6 !global;
} @else {
// color settings
$radioBackgroundColor: transparent !global;
$radioErrorBackgroundColor: $red-light !global;
$radioColor: $white !global;
$radioInnerColor: $white !global;
$radioBorderColor: $radioInnerColor !global;
$radioBorderErrorColor: $red !global;
$radioLinkColor: $radioColor !global;
$radioLinkColorHover: $clouds !global;
$radioErrorColor: $red !global;
$radioHelperColor: $white !global;
$radioHelperInvalidColor: $white !global;
$radioFocusBorderColor: #95a5a6 !global;
}
/*****************************************************************************
* General
****************************************************************************/
.radio {
$block: &;
&--#{unquote($color)} {
&, * {
user-select: none;
}
&.is-disabled {
&, * {
cursor: not-allowed !important;
}
}
&.is-tabbed {
outline: 1px solid $radioFocusBorderColor;
outline-offset: 3px;
}
#{$block}__wrapper {
position: relative;
width: 100%;
overflow: hidden; // necessary for outline
}
/*************************************************************************
* Hide native radio
************************************************************************/
#{$block}__input {
@include visually-hidden;
}
/*************************************************************************
* Label
************************************************************************/
#{$block}__label {
$border: 1px;
position: relative;
color: $radioColor;
font-size: $radioFontSize;
line-height: $radioLineHeight;
font-family: $radioFontFamily;
// subtract -2px as checkbox is 2px smaller (Material Design sizes)
padding: 0 0 0 calc(#{$radioIconFontSize} + #{$border * 2} + 10px + 2px);
box-sizing: border-box;
cursor: pointer;
width: 100%;
display: block; // use padding for a second line too
// after contains the rounded border, before the inner color.
// this is necessary due to animation purposes
&:after,
&:before {
position: absolute;
top: ($radioLineHeight - $radioIconFontSize) / 2;
left: 0;
content: "";
display: inline-block;
border-radius: 50%;
box-sizing: border-box;
width: #{$radioIconFontSize};
height: #{$radioIconFontSize};
}
&:after {
border: $border solid $radioBorderColor;
z-index: 2;
background: $radioBackgroundColor;
@include transition("background .3s");
}
&:before {
font-size: $radioIconFontSize;
line-height: $radioIconFontSize;
color: $radioInnerColor;
width: calc(#{$radioIconFontSize} - #{$border * 10});
height: calc(#{$radioIconFontSize} - #{$border * 10});
border: #{$border} solid transparent;
left: #{$border * 5};
top: calc(#{($radioLineHeight - $radioIconFontSize) / 2} + #{$border * 5});
z-index: 1;
transform-origin: center center;
transform: scale(0);
transition: transform 0.1s ease-in-out;
background: $radioInnerColor;
@media screen and (-ms-high-contrast: white-on-black) {
border-color: transparent;
background: $a11yNonTextColorWhiteOnBlack;
}
@media screen and (-ms-high-contrast: black-on-white) {
border-color: transparent;
background: $a11yNonTextColorBlackOnWhite;
}
}
a {
@include link-underline-medium($radioLinkColor, $radioLinkColorHover);
}
}
#{$block}__input:checked + #{$block}__label:before {
transform: scale(1);
}
&.is-invalid #{$block}__input:not(:checked) + #{$block}__label {
&:after {
background: $radioErrorBackgroundColor;
border-color: $radioBorderErrorColor;
}
}
/*************************************************************************
* Error message
************************************************************************/
#{$block}__error {
font-size: $radioErrorFontSize;
color: $radioErrorColor;
margin: 5px 0;
a {
color: $radioErrorColor;
}
}
/*************************************************************************
* Helper
************************************************************************/
#{$block}__helper {
font-size: $radioHelperFontSize;
color: $radioHelperColor;
margin: 5px 0;
}
&.is-invalid #{$block}__helper {
color: $radioHelperInvalidColor;
}
}
}
}
No notes defined.