From 68f97d1b4340218446f2362888270724e8db53f0 Mon Sep 17 00:00:00 2001 From: Svyatoslav Mikhaylov Date: Fri, 27 Sep 2019 17:31:55 +0300 Subject: [PATCH] Redefine options --- src/v2/scss/components/_forms/_checkbox.scss | 21 ++-- src/v2/scss/components/_forms/_inputs.scss | 5 +- src/v2/scss/components/_forms/_options.scss | 119 +++++++++++-------- src/v2/scss/components/_forms/_radio.scss | 23 ++-- 4 files changed, 92 insertions(+), 76 deletions(-) diff --git a/src/v2/scss/components/_forms/_checkbox.scss b/src/v2/scss/components/_forms/_checkbox.scss index 79c02663..872207a9 100644 --- a/src/v2/scss/components/_forms/_checkbox.scss +++ b/src/v2/scss/components/_forms/_checkbox.scss @@ -1,17 +1,16 @@ .ui.option { + + .control__indicator::after { + top: 0; + } + &.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%; } } } -} +} \ 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..9fce35b3 100644 --- a/src/v2/scss/components/_forms/_options.scss +++ b/src/v2/scss/components/_forms/_options.scss @@ -4,82 +4,94 @@ // 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; } } - .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; } } + } - &: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 +101,7 @@ display: block; .option:last-child { - margin-bottom: 0!important; + margin-bottom: 0 !important; } &.inline { @@ -115,3 +127,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..720abdb0 100644 --- a/src/v2/scss/components/_forms/_radio.scss +++ b/src/v2/scss/components/_forms/_radio.scss @@ -2,22 +2,21 @@ &.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; } } - .control__indicator { + .control__indicator::before { border-radius: 50%; } + + .control__indicator::after { + background-image: none; + } } -} +} \ No newline at end of file