diff --git a/src/v2/scss/components/_forms.scss b/src/v2/scss/components/_forms.scss index 121a4d04..a6f2e74f 100644 --- a/src/v2/scss/components/_forms.scss +++ b/src/v2/scss/components/_forms.scss @@ -24,12 +24,12 @@ $input-plaintext-color: $body-color !default; $control-bg: $white; $control-bg-hover: $input-border-color-hover; -$control-checked-bg: $gray-dark; -$control-disabled-bg: $gray-light; +$control-checked-bg: $teal; +$control-disabled-bg: $gray-disabled; $control-color: $black; -$control-border-width: 2px; +$control-border-width: 1px; $control-border-color: $input-border-color; -$control-size: 24px; +$control-size: 20px; $input-height-border: $input-border-width * 2 !default; @@ -46,14 +46,10 @@ $form-feedback-invalid-color: $red; @import "_forms/inputs"; @import "_forms/select"; // FIXME: move to options? - - .ui.form { label { display: block; font-size: $font-size-content-base; - font-weight: $font-weight-normal; - vertical-align: top; } } @@ -147,7 +143,7 @@ fieldset { } .title-label { - font-size: $font-size-content-base; + font-size: $font-size-base; margin-bottom: spacer("4x"); } diff --git a/src/v2/scss/components/_forms/_checkbox.scss b/src/v2/scss/components/_forms/_checkbox.scss index eef49896..837e459e 100644 --- a/src/v2/scss/components/_forms/_checkbox.scss +++ b/src/v2/scss/components/_forms/_checkbox.scss @@ -1,18 +1,16 @@ -.ui.option { - &.checkbox { - .control__input { - &:checked ~ .control__indicator { - background: $control-checked-bg url("/static/v2/img/icons/checkmark.svg") no-repeat center; - background-size: 135%; - } - } +.ui.option.checkbox { + + .control__indicator::after { + transform: translateY(-4px); + top: 0; + } - &.disabled { - .control__input { - &:checked ~ .control__indicator { - background: $control-disabled-bg url("/static/v2/img/icons/checkmark.svg") no-repeat center; - } - } + .control__input { + &:checked ~ .control__indicator::after { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='%23FFF' d='M6.92501468,10.2334083 L4.80005885,7.40013385 C4.468688,6.95830605 3.84188665,6.868763 3.40005885,7.20013385 C2.95823105,7.5315047 2.868688,8.15830605 3.20005885,8.60013385 L6.20005885,12.6001339 C6.62151523,13.1620757 7.47577143,13.12579 7.84805716,12.5301328 L12.8480572,4.53013279 C13.1407675,4.06179626 12.9983943,3.44484588 12.5300578,3.15213555 C12.0617213,2.85942522 11.4447709,3.00179838 11.1520605,3.47013491 L6.92501468,10.2334083 Z'/%3E%3C/svg%3E%0A"); + background-position: 50% 50%; + background-repeat: no-repeat; + transform: translateY(0); } } } diff --git a/src/v2/scss/components/_forms/_inputs.scss b/src/v2/scss/components/_forms/_inputs.scss index 41fd9867..c96599e5 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, -.grouped.error .ui.option.radio:not(.disabled) > .control__indicator, -.grouped.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 535d895f..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-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; } - } - &:focus { - ~ .control__indicator { - border-color: $control-bg-hover; - opacity: .8; + &::after { + opacity: 1; + transition: opacity .075s ease-in-out, transform .125s ease-in-out; } } } - .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__input:focus { + ~ .control__indicator { + &::before { + border: none; + box-shadow: inset 0 0 2px 1px rgba($gray-darker, .5); + } + } } - .control__description { - margin: 0 0 0 spacer("8x"); - display: inline-block; - line-height: 1.375; - font-size: $font-size-content-base; - 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..203cf870 100644 --- a/src/v2/scss/components/_forms/_radio.scss +++ b/src/v2/scss/components/_forms/_radio.scss @@ -1,23 +1,24 @@ -.ui.option { - &.radio { - .control__input { - &:checked ~ .control__indicator::after { - content: ""; - position: absolute; - top: 0; - bottom: 0; - left: 0; - right: 0; - margin: auto; - width: 10px; - height: 10px; - border-radius: 50%; - background: $white; - } - } +.ui.option.radio { - .control__indicator { + .control__input { + &:checked ~ .control__indicator::after { + left: 6px; + top: 6px; + width: 8px; + height: 8px; + background-color: #fff; border-radius: 50%; + transform: scale(1); } } + + .control__indicator::before { + border-radius: 50%; + } + + .control__indicator::after { + transform: scale(.5); + background-image: none; + transition: opacity .075s ease-in-out, transform .125s ease-in-out; + } }