qcast3/qcast-front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge remote-tracking branch 'origin/qcast-pub' into dev

Browse Source
This commit is contained in:
minsik 2024-11-18 17:54:41 +09:00
commit 9eb61b3753
1 changed files with 844 additions and 974 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

418
src/styles/_reset.scss
View File

@ -3,98 +3,27 @@
-moz-text-size-adjust:none; -moz-text-size-adjust:none;
-ms-text-size-adjust:none; -ms-text-size-adjust:none;
text-size-adjust: none; text-size-adjust: none;
box-sizing: content-box; box-sizing: content-box
} }
*, *, ::after, ::before {
::after,
::before {
box-sizing: border-box; box-sizing: border-box;
} }
html, html, body{
body {
font-size: 16px; font-size: 16px;
} }
html, html, body, div, span, applet, object, iframe,
body, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
div, a, abbr, acronym, address, big, cite, code,
span, del, dfn, em, img, ins, kbd, q, s, samp,
applet, small, strike, strong, sub, sup, tt, var,
object, b, u, i, center,
iframe, dl, dt, dd, ol, ul, li,
h1, fieldset, form, label, legend,
h2, table, caption, tbody, tfoot, thead, tr, th, td,
h3, article, aside, canvas, details, embed,
h4, figure, figcaption, footer, header, hgroup,
h5, menu, nav, output, ruby, section, summary,
h6, time, mark, audio, video {
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
margin: 0; margin: 0;
padding: 0; padding: 0;
border: 0; border: 0;
@ -106,38 +35,23 @@ video {
font-smooth: never; font-smooth: never;
} }
/* HTML5 display-role reset for older browsers */ /* HTML5 display-role reset for older browsers */
article, article, aside, details, figcaption, figure,
aside, footer, header, hgroup, menu, nav, section {
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
display: block; display: block;
} }
body { body {
line-height: 1.4; line-height: 1.4;
} }
body:first-of-type caption { body:first-of-type caption { display:none;}
display: none;
}
ol, ol, ul {
ul {
list-style: none; list-style: none;
} }
blockquote, blockquote, q {
q {
quotes: none; quotes: none;
} }
blockquote:before, blockquote:before, blockquote:after,
blockquote:after, q:before, q:after {
q:before,
q:after {
content: ''; content: '';
content: none; content: none;
} }
@ -147,9 +61,7 @@ table {
border-spacing:0; border-spacing:0;
border:0 none; border:0 none;
} }
caption, caption, th, td {
th,
td {
text-align:left; text-align:left;
font-weight: normal; font-weight: normal;
border:0; border:0;
@ -159,38 +71,26 @@ a {
cursor:pointer; cursor:pointer;
color:#000; color:#000;
} }
a, a, a:hover, a:active {
a:hover,
a:active {
text-decoration:none; text-decoration:none;
-webkit-tap-highlight-color: transparent; -webkit-tap-highlight-color: transparent;
} }
/*form_style*/ /*form_style*/
input, input, select, textarea, button, a, label {
select,
textarea,
button,
a,
label {
-webkit-tap-highlight-color:rgba(0,0,0,0); -webkit-tap-highlight-color:rgba(0,0,0,0);
} }
button, button,input[type=text], input[type=button] {
input[type='text'],
input[type='button'] {
-webkit-appearance: none; -webkit-appearance: none;
-webkit-border-radius: 0; -webkit-border-radius: 0;
-webkit-appearance:none; -webkit-appearance:none;
appearance: none; appearance: none;
border-radius: 0; border-radius: 0
} }
input[type='checkbox'], input[type=checkbox], input[type=radio] {
input[type='radio'] {
box-sizing: border-box; box-sizing: border-box;
padding: 0; padding: 0;
} }
input, input, select, button {
select,
button {
border:0 none; border:0 none;
outline:none; outline:none;
margin:0; margin:0;
@ -233,53 +133,24 @@ button {
} }
// margin // margin
.mt5 { .mt5{margin-top: 5px !important;}
margin-top: 5px !important; .mt10{margin-top: 10px !important;}
} .mt15{margin-top: 15px !important;}
.mt10 { .mb5{margin-bottom: 5px !important;}
margin-top: 10px !important; .mb10{margin-bottom: 10px !important;}
} .mb15{margin-bottom: 15px !important;}
.mt15 { .mr5{margin-right: 5px !important;}
margin-top: 15px !important; .mr10{margin-right: 10px !important;}
} .mr15{margin-right: 15px !important;}
.mb5 { .ml5{margin-left: 5px !important;}
margin-bottom: 5px !important; .ml10{margin-left: 10px !important;}
} .ml15{margin-left: 15px !important;}
.mb10 {
margin-bottom: 10px !important;
}
.mb15 {
margin-bottom: 15px !important;
}
.mr5 {
margin-right: 5px !important;
}
.mr10 {
margin-right: 10px !important;
}
.mr15 {
margin-right: 15px !important;
}
.ml5 {
margin-left: 5px !important;
}
.ml10 {
margin-left: 10px !important;
}
.ml15 {
margin-left: 15px !important;
}
// align // align
.al-l { .al-l{text-align: left !important;}
text-align: left !important; .al-r{text-align: right !important;}
} .al-c{text-align: center !important;}
.al-r {
text-align: right !important;
}
.al-c {
text-align: center !important;
}
// button // button
.btn-frame{ .btn-frame{
@ -294,7 +165,7 @@ button {
border: 1px solid #000; border: 1px solid #000;
text-align: center; text-align: center;
font-family: 'Pretendard', sans-serif; font-family: 'Pretendard', sans-serif;
transition: all 0.17s ease-in-out; transition: all .17s ease-in-out;
cursor: pointer; cursor: pointer;
&.block{ &.block{
width: 100%; width: 100%;
@ -307,15 +178,15 @@ button {
} }
&.deepgray{ &.deepgray{
background-color: #2c2c2c; background-color: #2C2C2C;
border: 1px solid #484848; border: 1px solid #484848;
} }
&.gray{ &.gray{
background-color: #3c3c3c; background-color: #3C3C3C;
border: 1px solid #545454; border: 1px solid #545454;
} }
&.dark{ &.dark{
background-color: #1c1c1c; background-color: #1C1C1C;
border: 1px solid #484848; border: 1px solid #484848;
} }
&.modal{ &.modal{
@ -324,8 +195,8 @@ button {
border: 1px solid #484848; border: 1px solid #484848;
color: #aaa; color: #aaa;
&:hover{ &:hover{
background-color: #1083e3; background-color: #1083E3;
border: 1px solid #1083e3; border: 1px solid #1083E3;
color: #fff; color: #fff;
font-weight: 500; font-weight: 500;
} }
@ -335,13 +206,13 @@ button {
padding: 0 10px; padding: 0 10px;
line-height: 28px; line-height: 28px;
font-family: 'Noto Sans JP', sans-serif; font-family: 'Noto Sans JP', sans-serif;
background-color: #2d2d2d; background-color: #2D2D2D;
border: 1px solid #393939; border: 1px solid #393939;
color: #aaa; color: #aaa;
&.act, &.act,
&:hover{ &:hover{
background-color: #414e6c; background-color: #414E6C;
border: 1px solid #414e6c; border: 1px solid #414E6C;
color: #fff; color: #fff;
font-weight: 500; font-weight: 500;
} }
@ -355,11 +226,11 @@ button {
border: 1px solid #484848; border: 1px solid #484848;
color: #fff; color: #fff;
&.blue{ &.blue{
background-color: #414e6c; background-color: #414E6C;
border: 1px solid #414e6c; border: 1px solid #414E6C;
&:hover{ &:hover{
background-color: #414e6c; background-color: #414E6C;
border: 1px solid #414e6c; border: 1px solid #414E6C;
} }
} }
&.white{ &.white{
@ -386,7 +257,7 @@ button {
font-family: 'Noto Sans JP', sans-serif; font-family: 'Noto Sans JP', sans-serif;
background-color: transparent; background-color: transparent;
border: 1px solid #676767; border: 1px solid #676767;
color: #aaaaaa; color: #AAAAAA;
&:hover{ &:hover{
background-color: #272727; background-color: #272727;
border-color: #676767; border-color: #676767;
@ -395,8 +266,8 @@ button {
} }
&:hover, &:hover,
&.act{ &.act{
background-color: #1083e3; background-color: #1083E3;
border: 1px solid #1083e3; border: 1px solid #1083E3;
color: #fff; color: #fff;
font-weight: 500; font-weight: 500;
} }
@ -426,7 +297,7 @@ button {
color: #fff; color: #fff;
font-size: 13px; font-size: 13px;
font-weight: 400; font-weight: 400;
transition: all 0.15s ease-in-out; transition: all .15s ease-in-out;
&.navy{ &.navy{
background-color: #304961; background-color: #304961;
&:hover{ &:hover{
@ -434,21 +305,21 @@ button {
} }
} }
&.grey{ &.grey{
background-color: #94a0ad; background-color: #94A0AD;
&:hover{ &:hover{
background-color: #607f9a; background-color: #607F9A;
} }
} }
&.green{ &.green{
background-color: #a6bba8; background-color: #A6BBA8;
&:hover{ &:hover{
background-color: #98af9b; background-color: #98af9b;
} }
} }
&.white{ &.white{
border: 1px solid #94a0ad; border: 1px solid #94A0AD;
background-color: #fff; background-color: #fff;
color: #94a0ad; color: #94A0AD;
&:hover{ &:hover{
background-color: #fff; background-color: #fff;
} }
@ -464,7 +335,7 @@ button {
line-height: 30px; line-height: 30px;
padding: 0 25px 0 10px; padding: 0 25px 0 10px;
background-color: #373737; background-color: #373737;
border: 1px solid #3f3f3f; border: 1px solid #3F3F3F;
border-radius: 2px; border-radius: 2px;
border-top-left-radius: 2px; border-top-left-radius: 2px;
color: #fff; color: #fff;
@ -489,7 +360,7 @@ button {
max-height: 100px; max-height: 100px;
overflow-y: auto; overflow-y: auto;
background-color: #373737; background-color: #373737;
border: 1px solid #3f3f3f; border: 1px solid #3F3F3F;
border-radius: 2px; border-radius: 2px;
transition: all 0.17s ease-in-out; transition: all 0.17s ease-in-out;
visibility: hidden; visibility: hidden;
@ -499,19 +370,20 @@ button {
align-items: center; align-items: center;
padding: 8px 20px; padding: 8px 20px;
line-height: 1.4; line-height: 1.4;
transition: all 0.17s ease-in-out; transition: all .17s ease-in-out;
button{ button{
font-size: 12px; font-size: 12px;
color: #fff; color: #fff;
line-height: 1.4; line-height: 1.4;
} }
&:hover{ &:hover{
background-color: #2c2c2c; background-color: #2C2C2C;
} }
} }
&::-webkit-scrollbar { &::-webkit-scrollbar {
width: 2px; width: 2px;
background-color: transparent; background-color: transparent;
} }
&::-webkit-scrollbar-thumb { &::-webkit-scrollbar-thumb {
background-color: #5a5a5a; background-color: #5a5a5a;
@ -531,7 +403,7 @@ button {
height: 6px; height: 6px;
background: url(/static/images/common/select-arr.svg) no-repeat center; background: url(/static/images/common/select-arr.svg) no-repeat center;
background-size: cover; background-size: cover;
transition: all 0.17s ease-in-out; transition: all .17s ease-in-out;
} }
&.active{ &.active{
.select-item-wrap{ .select-item-wrap{
@ -549,17 +421,17 @@ button {
display: block; display: block;
width: 100%; width: 100%;
height: 30px; height: 30px;
background: #fff url(../../public/static/images/common/select_light_arr.svg) calc(100% - 11px) center no-repeat; background: #FFF url(../../public/static/images/common/select_light_arr.svg) calc(100% - 11px) center no-repeat;
background-size: 10px 6px; background-size: 10px 6px;
border: 1px solid #eee; border: 1px solid #eee;
padding: 0 30px 0 10px; padding: 0 30px 0 10px;
font-size: 13px; font-size: 13px;
color: #45576f; color: #45576F;
font-family: 'Noto Sans JP', sans-serif; font-family: 'Noto Sans JP', sans-serif;
cursor: pointer; cursor: pointer;
&:disabled{ &:disabled{
opacity: 1; opacity: 1;
background-color: #fafafa; background-color: #FAFAFA;
color: #999; color: #999;
cursor: default; cursor: default;
} }
@ -575,6 +447,7 @@ button {
} }
} }
// input // input
.form-input{ .form-input{
label{ label{
@ -585,9 +458,9 @@ button {
margin-bottom: 10px; margin-bottom: 10px;
} }
} }
input[type='password'], input[type=password],
input[type='number'], input[type=number],
input[type='text'] { input[type=text]{
&.input-origin{ &.input-origin{
display: inline-block; display: inline-block;
height: 30px; height: 30px;
@ -602,9 +475,9 @@ input[type='text'] {
padding: 0 10px; padding: 0 10px;
letter-spacing: 0px; letter-spacing: 0px;
text-align: right; text-align: right;
transition: border 0.15s ease-in-out; transition: border .15s ease-in-out;
&:focus{ &:focus{
border: 1px solid #1083e3; border: 1px solid #1083E3;
} }
&::placeholder{ &::placeholder{
font-family: 'Noto Sans JP', sans-serif; font-family: 'Noto Sans JP', sans-serif;
@ -616,7 +489,7 @@ input[type='text'] {
width: 100%; width: 100%;
} }
&:read-only{ &:read-only{
color: #aaa; color: #AAA;
&:focus{ &:focus{
border: 1px solid #323234; border: 1px solid #323234;
} }
@ -637,15 +510,15 @@ input[type='text'] {
background-color: #fff; background-color: #fff;
font-family: 'Noto Sans JP', sans-serif; font-family: 'Noto Sans JP', sans-serif;
font-size: 13px; font-size: 13px;
color: #45576f; color: #45576F;
font-weight: normal; font-weight: normal;
transition: border-color 0.17s ease-in-out; transition: border-color .17s ease-in-out;
text-align: left; text-align: left;
&:focus{ &:focus{
border-color: #94a0ad; border-color: #94A0AD;
} }
&:read-only{ &:read-only{
background-color: #fafafa; background-color: #FAFAFA;
color: #999999; color: #999999;
&:focus{ &:focus{
border-color: #eee; border-color: #eee;
@ -654,14 +527,16 @@ input[type='text'] {
} }
} }
// check-btn // check-btn
.check-btn{ .check-btn{
display: flex; display: flex;
align-items: center; align-items: center;
height: 30px; height: 30px;
background-color: #3a3a3a; background-color: #3A3A3A;
border-radius: 3px; border-radius: 3px;
transition: all 0.17s ease-in-out; transition: all .17s ease-in-out;
.check-area{ .check-area{
flex: none; flex: none;
width: 30px; width: 30px;
@ -698,10 +573,10 @@ input[type='text'] {
display: block; display: block;
height: 30px; height: 30px;
border-radius: 3px; border-radius: 3px;
background-color: #3a3a3a; background-color: #3A3A3A;
padding: 0 11px; padding: 0 11px;
text-align: left; text-align: left;
transition: all 0.17s ease-in-out; transition: all .17s ease-in-out;
span{ span{
position: relative; position: relative;
font-size: 12px; font-size: 12px;
@ -735,15 +610,15 @@ input[type='text'] {
background-color: #272727; background-color: #272727;
border: 1px solid #484848; border: 1px solid #484848;
span{ span{
color: #fff; color: #Fff;
&:after{ &:after{
background: url(../../public/static/images/canvas/arr_btn_ico_white.svg)no-repeat center; background: url(../../public/static/images/canvas/arr_btn_ico_white.svg)no-repeat center;
} }
} }
&:hover, &:hover,
&.act{ &.act{
background-color: #1083e3; background-color: #1083E3;
border: 1px solid #1083e3; border: 1px solid #1083E3;
} }
} }
} }
@ -753,8 +628,8 @@ input[type='text'] {
.d-check-box{ .d-check-box{
line-height: 1.1; line-height: 1.1;
cursor: pointer; cursor: pointer;
input[type='checkbox'], input[type=checkbox],
input[type='radio'] { input[type=radio]{
position: static; position: static;
margin-left: 0; margin-left: 0;
cursor: pointer; cursor: pointer;
@ -777,7 +652,7 @@ input[type='text'] {
} }
&.light{ &.light{
label{ label{
color: #45576f; color: #45576F;
} }
} }
&.no-text{ &.no-text{
@ -791,7 +666,7 @@ input[type='text'] {
label{ label{
&::before{ &::before{
cursor: pointer; cursor: pointer;
content: ''; content: "";
display: inline-block; display: inline-block;
position: absolute; position: absolute;
width: 17px; width: 17px;
@ -805,13 +680,11 @@ input[type='text'] {
text-align:center; text-align:center;
font-size:13px; font-size:13px;
line-height:1.4; line-height:1.4;
transition: transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
border 0.15s ease-in-out,
color 0.15s ease-in-out;
} }
&::after{ &::after{
cursor: pointer; cursor: pointer;
content: ''; content: "";
display: inline-block; display: inline-block;
position: absolute; position: absolute;
width: 9px; width: 9px;
@ -827,22 +700,20 @@ input[type='text'] {
line-height:1.4; line-height:1.4;
opacity: 0; opacity: 0;
visibility: hidden; visibility: hidden;
transition: transition: opacity 0.15s ease-in-out, color 0.15s ease-in-out;
opacity 0.15s ease-in-out,
color 0.15s ease-in-out;
} }
} }
&.light{ &.light{
label{ label{
&:before{ &:before{
border-color: #d6d6d7; border-color: #D6D6D7;
} }
&:after{ &:after{
background-color: #697c8f; background-color: #697C8F;
} }
} }
} }
input[type='radio']:checked + label::after { input[type=radio]:checked + label::after{
opacity: 1; opacity: 1;
visibility: visible; visibility: visible;
} }
@ -866,12 +737,10 @@ input[type='text'] {
// check-box // check-box
.d-check-box{ .d-check-box{
label{ label{
&.red { &.red{color: #FFCACA;}
color: #ffcaca;
}
&::before{ &::before{
cursor: pointer; cursor: pointer;
content: ''; content: "";
display: inline-block; display: inline-block;
position: absolute; position: absolute;
width: 17px; width: 17px;
@ -879,48 +748,50 @@ input[type='text'] {
top: 2px; top: 2px;
left: 0; left: 0;
margin-left: -12px; margin-left: -12px;
border: 1px solid #d6d6d7; border: 1px solid #D6D6D7;
background-color: #fff; background-color: #fff;
transition: transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
border 0.15s ease-in-out,
color 0.15s ease-in-out;
} }
&:after{ &:after{
cursor: pointer; cursor: pointer;
content: ''; content: "";
display: inline-block; display: inline-block;
position: absolute; position: absolute;
width: 16px; width: 16px;
height: 16px; height: 16px;
top:0; top:0;
left: 0; left: 0;
margin-left: -0.8rem; margin-left: -.8rem;
transition: transition: border 0.05s ease-in-out, color 0.05s ease-in-out;
border 0.05s ease-in-out,
color 0.05s ease-in-out;
} }
} }
input[type='checkbox']:checked + label::after { input[type=checkbox]:checked + label::after{
content: ''; content: "";
display: inline-block; display: inline-block;
position: absolute; position: absolute;
top: 1px; top: 1px;
left: -1px; left: -1px;
width: 5px; width: 5px;
height: 8px; height: 8px;
border: 2px solid #697c8f; border: 2px solid #697C8F;
border-left: none; border-left: none;
border-top: none; border-top: none;
transform: translate(7.75px,4.5px) rotate(45deg); transform: translate(7.75px,4.5px) rotate(45deg);
-ms-transform: translate(7.75px,4.5px) rotate(45deg); -ms-transform: translate(7.75px,4.5px) rotate(45deg);
} }
input[type=checkbox]:disabled + label::before{
background-color: #FAFAFA;
}
input[type=checkbox]:disabled + label::after{
border-color: #999;
}
&.pop{ &.pop{
label{ label{
&:before{ &:before{
background-color: transparent; background-color: transparent;
} }
} }
input[type='checkbox']:checked + label::after { input[type=checkbox]:checked + label::after{
border-color: #fff; border-color: #fff;
} }
&.no-text{ &.no-text{
@ -930,25 +801,23 @@ input[type='text'] {
} }
} }
&.sel{ &.sel{
input[type='checkbox']:checked + label { input[type=checkbox]:checked + label{
color: #d7c863; color: #D7C863;
} }
input[type='checkbox']:checked + label::before, input[type=checkbox]:checked + label::before,
input[type='checkbox']:checked + label::after { input[type=checkbox]:checked + label::after{
border-color: #d7c863; border-color: #D7C863;
} }
} }
} }
// date-picker // date-picker
.date-picker{ .date-picker{
svg { svg{display: none;}
display: none;
}
.react-datepicker-wrapper{ .react-datepicker-wrapper{
width: 100%; width: 100%;
} }
input[type='text'] { input[type=text]{
display: block; display: block;
width: 100%; width: 100%;
height: 30px; height: 30px;
@ -956,7 +825,7 @@ input[type='text'] {
border-radius: 2px; border-radius: 2px;
border: 1px solid #eee; border: 1px solid #eee;
font-size: 13px; font-size: 13px;
color: #45576f; color: #45576F;
font-weight: normal; font-weight: normal;
font-family: 'Noto Sans JP', sans-serif; font-family: 'Noto Sans JP', sans-serif;
background: #fff url(../../public/static/images/common/datepicker.svg) calc(100% - 11px) center no-repeat; background: #fff url(../../public/static/images/common/datepicker.svg) calc(100% - 11px) center no-repeat;
@ -972,17 +841,18 @@ input[type='text'] {
height: 30px; height: 30px;
min-height: unset; min-height: unset;
border-radius: 2px; border-radius: 2px;
border-color: #eee; border-color: #EEE;
background-color: #fff; background-color: #fff;
&:hover{ &:hover{
border-color: #eee; border-color: #EEE;
} }
} }
.custom__control--is-focused{ .custom__control--is-focused{
border-color: #eee; border-color: #EEE;
box-shadow: unset; box-shadow: unset;
&:hover{ &:hover{
border-color: #eee; border-color: #EEE;
} }
} }
.custom__value-container { .custom__value-container {
@ -995,7 +865,7 @@ input[type='text'] {
} }
.custom__single-value{ .custom__single-value{
font-size: 13px; font-size: 13px;
color: #45576f; color: #45576F;
font-weight: 400; font-weight: 400;
} }
.custom__placeholder{ .custom__placeholder{
@ -1032,7 +902,7 @@ input[type='text'] {
.custom__option{ .custom__option{
font-size: 13px; font-size: 13px;
padding: 7px 10px; padding: 7px 10px;
color: #45576f; color: #45576F;
} }
.custom__option--is-selected{ .custom__option--is-selected{
color: #fff; color: #fff;
@ -1040,7 +910,7 @@ input[type='text'] {
// disable // disable
&.custom--is-disabled{ &.custom--is-disabled{
.custom__control{ .custom__control{
background-color: #fafafa; background-color: #FAFAFA ;
} }
.custom__single-value{ .custom__single-value{
color: #999999; color: #999999;
@ -1066,7 +936,7 @@ input[type='text'] {
right: 0; right: 0;
bottom: 0; bottom: 0;
background-color: #454545; background-color: #454545;
transition: 0.4s; transition: .4s;
border-radius: 10px; border-radius: 10px;
text-align: center; text-align: center;
line-height: 20px; line-height: 20px;
@ -1083,18 +953,18 @@ input[type='text'] {
} }
&:before { &:before {
position: absolute; position: absolute;
content: ''; content: "";
height: 16px; height: 16px;
width: 16px; width: 16px;
left: 2px; left: 2px;
bottom: 2px; bottom: 2px;
background-color: white; background-color: white;
transition: 0.4s; transition: .4s;
border-radius: 50%; border-radius: 50%;
} }
} }
input:checked + .slider { input:checked + .slider {
background-color: #2563eb; background-color: #2563EB;
&:after { &:after {
content: 'ON'; content: 'ON';
left: 10px; left: 10px;