From 509ebb88079e437a25c2064c8ab44e521c7f7532 Mon Sep 17 00:00:00 2001 From: mahdi Date: Sun, 15 May 2022 09:57:26 +0430 Subject: [PATCH] update src/index.scss --- src/index.scss | 63 ++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 63 insertions(+) diff --git a/src/index.scss b/src/index.scss index e401128..247e066 100644 --- a/src/index.scss +++ b/src/index.scss @@ -1197,3 +1197,66 @@ $success: #23c933; } // * end Switch2 Component + +// TODO Start Radio1 Component + +$radioColor1: #f4f4f4; +$radkoColor2: #3197ee; + +.radio { + input[type="radio"] { + position: absolute; + opacity: 0; + + .radio-label { + &:before { + content: ""; + background: $radioColor1; + border-radius: 100%; + border: 1px solid darken($radioColor1, 25%); + display: inline-block; + width: 1.4em; + height: 1.4em; + position: relative; + vertical-align: top; + margin-left: 0.5em; + cursor: pointer; + text-align: center; + transition: all 250ms ease; + } + } + &:checked { + + .radio-label { + &:before { + background-color: $radkoColor2; + box-shadow: inset 0 0 0 4px $radioColor1; + } + } + } + &:focus { + + .radio-label { + &:before { + outline: none; + border-color: $radkoColor2; + } + } + } + &:disabled { + + .radio-label { + &:before { + box-shadow: inset 0 0 0 4px $radioColor1; + border-color: darken($radioColor1, 25%); + background: darken($radioColor1, 25%); + } + } + } + + .radio-label { + &:empty { + &:before { + margin-right: 0; + } + } + } + } +} + +// * end Radio1 Component