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

📌fix: swal z-index 조정

Browse Source
This commit is contained in:
yoosangwook 2025-01-23 15:44:07 +09:00
parent 17cec8b4fc
commit b75b155646
1 changed files with 1017 additions and 878 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

435
src/styles/_reset.scss
View File

@ -3,27 +3,98 @@
-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, body{ html,
body {
font-size: 16px; font-size: 16px;
} }
html, body, div, span, applet, object, iframe, html,
h1, h2, h3, h4, h5, h6, p, blockquote, pre, body,
a, abbr, acronym, address, big, cite, code, div,
del, dfn, em, img, ins, kbd, q, s, samp, span,
small, strike, strong, sub, sup, tt, var, applet,
b, u, i, center, object,
dl, dt, dd, ol, ul, li, iframe,
fieldset, form, label, legend, h1,
table, caption, tbody, tfoot, thead, tr, th, td, h2,
article, aside, canvas, details, embed, h3,
figure, figcaption, footer, header, hgroup, h4,
menu, nav, output, ruby, section, summary, h5,
time, mark, audio, video { h6,
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;
@ -35,23 +106,38 @@ time, mark, audio, video {
font-smooth: never; font-smooth: never;
} }
/* HTML5 display-role reset for older browsers */ /* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, article,
footer, header, hgroup, menu, nav, section { aside,
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 { display:none;} body:first-of-type caption {
display: none;
}
ol, ul { ol,
ul {
list-style: none; list-style: none;
} }
blockquote, q { blockquote,
q {
quotes: none; quotes: none;
} }
blockquote:before, blockquote:after, blockquote:before,
q:before, q:after { blockquote:after,
q:before,
q:after {
content: ''; content: '';
content: none; content: none;
} }
@ -61,7 +147,9 @@ table {
border-spacing: 0; border-spacing: 0;
border: 0 none; border: 0 none;
} }
caption, th, td { caption,
th,
td {
text-align: left; text-align: left;
font-weight: normal; font-weight: normal;
border: 0; border: 0;
@ -71,26 +159,38 @@ a {
cursor: pointer; cursor: pointer;
color: #000; color: #000;
} }
a, a:hover, a:active { a,
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, select, textarea, button, a, label { input,
select,
textarea,
button,
a,
label {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
} }
button,input[type=text], input[type=button] { 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=radio] { input[type='checkbox'],
input[type='radio'] {
box-sizing: border-box; box-sizing: border-box;
padding: 0; padding: 0;
} }
input, select, button { input,
select,
button {
border: 0 none; border: 0 none;
outline: none; outline: none;
margin: 0; margin: 0;
@ -133,24 +233,53 @@ button{
} }
// margin // margin
.mt5{margin-top: 5px !important;} .mt5 {
.mt10{margin-top: 10px !important;} margin-top: 5px !important;
.mt15{margin-top: 15px !important;} }
.mb5{margin-bottom: 5px !important;} .mt10 {
.mb10{margin-bottom: 10px !important;} margin-top: 10px !important;
.mb15{margin-bottom: 15px !important;} }
.mr5{margin-right: 5px !important;} .mt15 {
.mr10{margin-right: 10px !important;} margin-top: 15px !important;
.mr15{margin-right: 15px !important;} }
.ml5{margin-left: 5px !important;} .mb5 {
.ml10{margin-left: 10px !important;} margin-bottom: 5px !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{text-align: left !important;} .al-l {
.al-r{text-align: right !important;} text-align: left !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 {
@ -165,7 +294,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 .17s ease-in-out; transition: all 0.17s ease-in-out;
cursor: pointer; cursor: pointer;
&.block { &.block {
width: 100%; width: 100%;
@ -178,15 +307,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 {
@ -195,8 +324,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;
} }
@ -206,13 +335,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;
} }
@ -226,11 +355,11 @@ button{
border: 1px solid #484848; border: 1px solid #484848;
color: #fff; color: #fff;
&.blue { &.blue {
background-color: #4C6FBF; background-color: #4c6fbf;
border: 1px solid #4C6FBF; border: 1px solid #4c6fbf;
&:hover { &:hover {
background-color: #414E6C; background-color: #414e6c;
border: 1px solid #414E6C; border: 1px solid #414e6c;
} }
} }
&.white { &.white {
@ -257,7 +386,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;
@ -266,8 +395,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;
} }
@ -297,7 +426,7 @@ button{
color: #fff; color: #fff;
font-size: 13px; font-size: 13px;
font-weight: 400; font-weight: 400;
transition: all .15s ease-in-out; transition: all 0.15s ease-in-out;
&.navy { &.navy {
background-color: #304961; background-color: #304961;
&:hover { &:hover {
@ -305,21 +434,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;
} }
@ -335,7 +464,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;
@ -360,7 +489,7 @@ button{
max-height: 116px; max-height: 116px;
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;
@ -370,20 +499,19 @@ button{
align-items: center; align-items: center;
padding: 8px 20px; padding: 8px 20px;
line-height: 1.4; line-height: 1.4;
transition: all .17s ease-in-out; transition: all 0.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;
@ -403,7 +531,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 .17s ease-in-out; transition: all 0.17s ease-in-out;
} }
&.active { &.active {
.select-item-wrap { .select-item-wrap {
@ -430,17 +558,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;
} }
@ -456,7 +584,6 @@ button{
} }
} }
// input // input
.form-input { .form-input {
label { label {
@ -467,9 +594,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;
@ -484,9 +611,9 @@ input[type=text]{
padding: 0 10px; padding: 0 10px;
letter-spacing: 0px; letter-spacing: 0px;
text-align: right; text-align: right;
transition: border .15s ease-in-out; transition: border 0.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;
@ -498,7 +625,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;
} }
@ -519,15 +646,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 .17s ease-in-out; transition: border-color 0.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;
@ -536,16 +663,14 @@ 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 .17s ease-in-out; transition: all 0.17s ease-in-out;
.check-area { .check-area {
flex: none; flex: none;
width: 30px; width: 30px;
@ -582,10 +707,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 .17s ease-in-out; transition: all 0.17s ease-in-out;
span { span {
position: relative; position: relative;
font-size: 12px; font-size: 12px;
@ -619,15 +744,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;
} }
} }
} }
@ -637,8 +762,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;
@ -661,7 +786,7 @@ input[type=text]{
} }
&.light { &.light {
label { label {
color: #45576F; color: #45576f;
} }
} }
&.no-text { &.no-text {
@ -675,7 +800,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;
@ -689,11 +814,13 @@ input[type=text]{
text-align: center; text-align: center;
font-size: 13px; font-size: 13px;
line-height: 1.4; line-height: 1.4;
transition: border 0.15s ease-in-out, color 0.15s ease-in-out; transition:
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;
@ -709,20 +836,22 @@ input[type=text]{
line-height: 1.4; line-height: 1.4;
opacity: 0; opacity: 0;
visibility: hidden; visibility: hidden;
transition: opacity 0.15s ease-in-out, color 0.15s ease-in-out; transition:
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;
} }
@ -746,10 +875,12 @@ input[type=text]{
// check-box // check-box
.d-check-box { .d-check-box {
label { label {
&.red{color: #FFCACA;} &.red {
color: #ffcaca;
}
&::before { &::before {
cursor: pointer; cursor: pointer;
content: ""; content: '';
display: inline-block; display: inline-block;
position: absolute; position: absolute;
width: 17px; width: 17px;
@ -757,41 +888,45 @@ 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: border 0.15s ease-in-out, color 0.15s ease-in-out; transition:
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: -.8rem; margin-left: -0.8rem;
transition: border 0.05s ease-in-out, color 0.05s ease-in-out; transition:
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{ input[type='checkbox']:disabled + label::before {
background-color: #FAFAFA; background-color: #fafafa;
} }
input[type=checkbox]:disabled + label::after{ input[type='checkbox']:disabled + label::after {
border-color: #999; border-color: #999;
} }
&.pop { &.pop {
@ -800,7 +935,7 @@ input[type=text]{
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 {
@ -810,23 +945,25 @@ 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{display: none;} svg {
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;
@ -834,7 +971,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;
@ -850,18 +987,17 @@ 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 {
@ -874,7 +1010,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 {
@ -911,34 +1047,32 @@ 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 {
background-color: #2684FF; background-color: #2684ff;
color: #fff !important; color: #fff !important;
&.custom__option--is-focused { &.custom__option--is-focused {
background-color: #2684FF; background-color: #2684ff;
color: #fff; color: #fff;
} }
} }
.custom__option--is-focused { .custom__option--is-focused {
background-color: #DEEBFF; background-color: #deebff;
color: #45576F; color: #45576f;
} }
.special-option { .special-option {
color: red; color: #2684ff;
} }
// 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;
} }
} }
} }
// toggle // toggle
@ -959,7 +1093,7 @@ input[type=text]{
right: 0; right: 0;
bottom: 0; bottom: 0;
background-color: #454545; background-color: #454545;
transition: .4s; transition: 0.4s;
border-radius: 10px; border-radius: 10px;
text-align: center; text-align: center;
line-height: 20px; line-height: 20px;
@ -976,18 +1110,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: .4s; transition: 0.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;
@ -997,3 +1131,8 @@ input:checked + .slider {
transform: translateX(35px); transform: translateX(35px);
} }
} }
// alert z-index
.swal2-container {
z-index: 100000;
}