From 68f97d1b4340218446f2362888270724e8db53f0 Mon Sep 17 00:00:00 2001 From: Svyatoslav Mikhaylov Date: Fri, 27 Sep 2019 17:31:55 +0300 Subject: [PATCH 1/2] 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 From f1d372071f39290f99d3fd0a93880f7cb9e46f27 Mon Sep 17 00:00:00 2001 From: Svyatoslav Mikhaylov Date: Fri, 27 Sep 2019 17:33:43 +0300 Subject: [PATCH 2/2] Add animation --- src/v2/scss/components/_forms/_checkbox.scss | 2 ++ src/v2/scss/components/_forms/_options.scss | 3 +++ src/v2/scss/components/_forms/_radio.scss | 3 +++ 3 files changed, 8 insertions(+) diff --git a/src/v2/scss/components/_forms/_checkbox.scss b/src/v2/scss/components/_forms/_checkbox.scss index 872207a9..02ddf780 100644 --- a/src/v2/scss/components/_forms/_checkbox.scss +++ b/src/v2/scss/components/_forms/_checkbox.scss @@ -2,6 +2,7 @@ .control__indicator::after { top: 0; + transform: translateY(-4px); } &.checkbox { @@ -10,6 +11,7 @@ background-image: url("/static/v2/img/icons/checkmark.svg"); background-repeat: no-repeat; background-position: 50% 50%; + transform: translateY(0); } } } diff --git a/src/v2/scss/components/_forms/_options.scss b/src/v2/scss/components/_forms/_options.scss index 9fce35b3..2d57e071 100644 --- a/src/v2/scss/components/_forms/_options.scss +++ b/src/v2/scss/components/_forms/_options.scss @@ -48,6 +48,8 @@ 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; } } @@ -60,6 +62,7 @@ &::after { opacity: 1; + transition: opacity .075s ease-in-out, transform .125s ease-in-out; } } } diff --git a/src/v2/scss/components/_forms/_radio.scss b/src/v2/scss/components/_forms/_radio.scss index 720abdb0..9fa8c5dd 100644 --- a/src/v2/scss/components/_forms/_radio.scss +++ b/src/v2/scss/components/_forms/_radio.scss @@ -8,6 +8,7 @@ height: 8px; background-color: #fff; border-radius: 50%; + transform: scale(1); } } @@ -17,6 +18,8 @@ .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