diff --git a/src/v2/scss/components/_forms/_checkbox.scss b/src/v2/scss/components/_forms/_checkbox.scss index 79c02663..02ddf780 100644 --- a/src/v2/scss/components/_forms/_checkbox.scss +++ b/src/v2/scss/components/_forms/_checkbox.scss @@ -1,17 +1,18 @@ .ui.option { + + .control__indicator::after { + top: 0; + transform: translateY(-4px); + } + &.checkbox { .control__input { - &:checked ~ .control__indicator { - background: $control-checked-bg url("/static/v2/img/icons/checkmark.svg") no-repeat center; - } - } - - &.disabled { - .control__input { - &:checked ~ .control__indicator { - background: $control-disabled-bg url("/static/v2/img/icons/checkmark.svg") no-repeat center; - } + &:checked ~ .control__indicator::after { + background-image: url("/static/v2/img/icons/checkmark.svg"); + background-repeat: no-repeat; + background-position: 50% 50%; + transform: translateY(0); } } } -} +} \ No newline at end of file diff --git a/src/v2/scss/components/_forms/_inputs.scss b/src/v2/scss/components/_forms/_inputs.scss index a6a03583..885a4ad9 100644 --- a/src/v2/scss/components/_forms/_inputs.scss +++ b/src/v2/scss/components/_forms/_inputs.scss @@ -103,9 +103,8 @@ //Error .ui.input.error > input, -.ui.input.error > textarea, -.error .ui.option.radio:not(.disabled) > .control__indicator, -.error .ui.option.checkbox:not(.disabled) > .control__indicator { +.ui.input.error > textarea + { background-color: $form-feedback-color; border:$control-border-width solid $form-feedback-invalid-color; &:hover { diff --git a/src/v2/scss/components/_forms/_options.scss b/src/v2/scss/components/_forms/_options.scss index 68d8e95c..2d57e071 100644 --- a/src/v2/scss/components/_forms/_options.scss +++ b/src/v2/scss/components/_forms/_options.scss @@ -4,82 +4,97 @@ // Default styles for checkbox and radio .ui.option { - display: flex; - align-items: flex-start; - margin: 0 0 spacer("4x") 0; - cursor: pointer; + display: block; position: relative; + margin-bottom: 1rem; + padding-left: 26px; + cursor: pointer; line-height: 1.2; - font-size: $font-size-base; + font-size: $font-size-content-base; - &:hover { - .control__indicator { - border-color: $control-bg-hover; + .control__input { + position: absolute; + width: 1px; + height: 1px; + margin: -1px; + padding: 0; + overflow: hidden; + border: 0; + clip: rect(0 0 0 0); + } + + .control__indicator { + line-height: 1.2; + + &::after { + content: ""; + position: absolute; + z-index: 201; + left: 0; + width: $control-size; + height: $control-size; + opacity: 0; } - .control__description { - color: $input-color; + &::before { + content: ""; + display: block; + position: absolute; + z-index: 200; + width: $control-size; + height: $control-size; + top: 0; + left: 0; + border-radius: $border-radius; + border: $control-border-width solid $control-border-color; + background-color: $control-bg; + transition: .075s ease-out; + transition-property: transform, border-color, background-color; } } - .control__input { - position: absolute; - top: 50%; - left: 12px; - transform: translate(-50%, -50%); - opacity: 0; - margin: 0; - padding: 0; - - &:checked { - ~ .control__indicator { + .control__input:checked { + ~ .control__indicator { + &::before { border: none; - background: $control-checked-bg; + background-color: $control-checked-bg; + } + + &::after { + opacity: 1; + transition: opacity .075s ease-in-out, transform .125s ease-in-out; } } + } - &:focus { - ~ .control__indicator { + .control__input:focus { + ~ .control__indicator { + &::before { border: none; box-shadow: inset 0 0 2px 1px rgba($gray-darker, .5); } } } - .control__indicator { - display: block; - position: absolute; - width: $control-size; - height: $control-size; - border: $control-border-width solid $control-border-color; - border-radius: $border-radius; - background-color: $control-bg; - background-size: 135%; - } - - .control__description { - margin: 0 0 0 26px; - display: inline-block; - color: $control-color; + &:hover { + .control__indicator::before { + border: $control-border-width solid $gray-dark; + } } &.disabled { cursor: default; + opacity: .5; - &:hover .control__indicator { - border-color: $control-border-color; + .control__indicator::before { + border-color: $control-disabled-bg; } - .control__input { - &:checked ~ .control__indicator { - background: $control-disabled-bg; - + &:hover { + .control__indicator::before { + border-color: $control-disabled-bg; } } - - .control__description { - color: $control-disabled-bg; - } } } @@ -89,7 +104,7 @@ display: block; .option:last-child { - margin-bottom: 0!important; + margin-bottom: 0 !important; } &.inline { @@ -115,3 +130,10 @@ } } } + +//Error + +.grouped.error .ui.option.radio:not(.disabled) > .control__indicator::before, +.grouped.error .ui.option.checkbox:not(.disabled) > .control__indicator::before { + border-color: $red; +} \ No newline at end of file diff --git a/src/v2/scss/components/_forms/_radio.scss b/src/v2/scss/components/_forms/_radio.scss index 1e7b712f..9fa8c5dd 100644 --- a/src/v2/scss/components/_forms/_radio.scss +++ b/src/v2/scss/components/_forms/_radio.scss @@ -2,22 +2,24 @@ &.radio { .control__input { &:checked ~ .control__indicator::after { - content: ""; - position: absolute; - top: 0; - bottom: 0; - left: 0; - right: 0; - margin: auto; - width: 10px; - height: 10px; + left: 6px; + top: 6px; + width: 8px; + height: 8px; + background-color: #fff; border-radius: 50%; - background: $white; + transform: scale(1); } } - .control__indicator { + .control__indicator::before { border-radius: 50%; } + + .control__indicator::after { + background-image: none; + transform: scale(.5); + transition: opacity .075s ease-in-out, transform .125s ease-in-out; + } } -} +} \ No newline at end of file