1026 lines
23 KiB
SCSS
1026 lines
23 KiB
SCSS
* {
|
|
-webkit-text-size-adjust:none;
|
|
-moz-text-size-adjust:none;
|
|
-ms-text-size-adjust:none;
|
|
text-size-adjust: none;
|
|
box-sizing: content-box
|
|
}
|
|
*, ::after, ::before {
|
|
box-sizing: border-box;
|
|
}
|
|
html, body{
|
|
font-size: 16px;
|
|
}
|
|
html, body, div, span, applet, object, iframe,
|
|
h1, h2, h3, h4, h5, 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;
|
|
padding: 0;
|
|
border: 0;
|
|
font: inherit;
|
|
vertical-align: baseline;
|
|
font-family: 'Noto Sans JP', sans-serif;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
font-smooth: never;
|
|
}
|
|
/* HTML5 display-role reset for older browsers */
|
|
article, aside, details, figcaption, figure,
|
|
footer, header, hgroup, menu, nav, section {
|
|
display: block;
|
|
}
|
|
body {
|
|
line-height: 1.4;
|
|
}
|
|
body:first-of-type caption { display:none;}
|
|
|
|
ol, ul {
|
|
list-style: none;
|
|
}
|
|
blockquote, q {
|
|
quotes: none;
|
|
}
|
|
blockquote:before, blockquote:after,
|
|
q:before, q:after {
|
|
content: '';
|
|
content: none;
|
|
}
|
|
table {
|
|
width: 100%;
|
|
border-collapse: separate;
|
|
border-spacing:0;
|
|
border:0 none;
|
|
}
|
|
caption, th, td {
|
|
text-align:left;
|
|
font-weight: normal;
|
|
border:0;
|
|
}
|
|
|
|
a {
|
|
cursor:pointer;
|
|
color:#000;
|
|
}
|
|
a, a:hover, a:active {
|
|
text-decoration:none;
|
|
-webkit-tap-highlight-color: transparent;
|
|
}
|
|
/*form_style*/
|
|
input, select, textarea, button, a, label {
|
|
-webkit-tap-highlight-color:rgba(0,0,0,0);
|
|
}
|
|
button,input[type=text], input[type=button] {
|
|
-webkit-appearance: none;
|
|
-webkit-border-radius: 0;
|
|
-webkit-appearance:none;
|
|
appearance: none;
|
|
border-radius: 0
|
|
}
|
|
input[type=checkbox], input[type=radio] {
|
|
box-sizing: border-box;
|
|
padding: 0;
|
|
}
|
|
input, select, button {
|
|
border:0 none;
|
|
outline:none;
|
|
margin:0;
|
|
}
|
|
select {
|
|
-webkit-appearance: none;
|
|
-moz-appearance: none;
|
|
appearance: none;
|
|
}
|
|
select::-ms-expand {
|
|
display: none;
|
|
}
|
|
::-webkit-input-placeholder {
|
|
line-height:1;
|
|
font-weight:300;
|
|
font-size:0.938rem;
|
|
letter-spacing:-0.6px;
|
|
color:#8b8b8b;
|
|
}
|
|
.log-box ::-webkit-input-placeholder{
|
|
color:#8b8b8b;
|
|
}
|
|
button{
|
|
background: transparent;
|
|
font-family: 'Noto Sans JP', sans-serif;
|
|
border: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
line-height: 1.4;
|
|
color: inherit;
|
|
outline: none;
|
|
cursor: pointer;
|
|
}
|
|
.pre{
|
|
font-family: 'Pretendard', sans-serif !important;
|
|
}
|
|
|
|
.no-click{
|
|
cursor: no-drop !important;
|
|
}
|
|
|
|
// margin
|
|
.mt5{margin-top: 5px !important;}
|
|
.mt10{margin-top: 10px !important;}
|
|
.mt15{margin-top: 15px !important;}
|
|
.mb5{margin-bottom: 5px !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
|
|
.al-l{text-align: left !important;}
|
|
.al-r{text-align: right !important;}
|
|
.al-c{text-align: center !important;}
|
|
|
|
|
|
// button
|
|
.btn-frame{
|
|
display: inline-block;
|
|
padding: 0 7px;
|
|
height: 34px;
|
|
line-height: 34px;
|
|
border-radius: 2px;
|
|
color: #fff;
|
|
font-size: 12px;
|
|
font-weight: 400;
|
|
border: 1px solid #000;
|
|
text-align: center;
|
|
font-family: 'Pretendard', sans-serif;
|
|
transition: all .17s ease-in-out;
|
|
cursor: pointer;
|
|
&.block{
|
|
width: 100%;
|
|
}
|
|
&.small{
|
|
font-family: 'Noto Sans JP', sans-serif;
|
|
height: 30px;
|
|
line-height: 30px;
|
|
font-size: 13px;
|
|
}
|
|
|
|
&.deepgray{
|
|
background-color: #2C2C2C;
|
|
border: 1px solid #484848;
|
|
}
|
|
&.gray{
|
|
background-color: #3C3C3C;
|
|
border: 1px solid #545454;
|
|
}
|
|
&.dark{
|
|
background-color: #1C1C1C;
|
|
border: 1px solid #484848;
|
|
}
|
|
&.modal{
|
|
font-family: 'Noto Sans JP', sans-serif;
|
|
background-color: #272727;
|
|
border: 1px solid #484848;
|
|
color: #aaa;
|
|
&:hover{
|
|
background-color: #1083E3;
|
|
border: 1px solid #1083E3;
|
|
color: #fff;
|
|
font-weight: 500;
|
|
}
|
|
}
|
|
&.sub-tab{
|
|
height: 30px;
|
|
padding: 0 10px;
|
|
line-height: 28px;
|
|
font-family: 'Noto Sans JP', sans-serif;
|
|
background-color: #2D2D2D;
|
|
border: 1px solid #393939;
|
|
color: #aaa;
|
|
&.act,
|
|
&:hover{
|
|
background-color: #414E6C;
|
|
border: 1px solid #414E6C;
|
|
color: #fff;
|
|
font-weight: 500;
|
|
}
|
|
}
|
|
&.roof{
|
|
height: 30px;
|
|
padding: 0 10px;
|
|
line-height: 28px;
|
|
font-family: 'Noto Sans JP', sans-serif;
|
|
background-color: #353535;
|
|
border: 1px solid #484848;
|
|
color: #fff;
|
|
&.blue{
|
|
background-color: #4C6FBF;
|
|
border: 1px solid #4C6FBF;
|
|
&:hover{
|
|
background-color: #4C6FBF;
|
|
border: 1px solid #4C6FBF;
|
|
font-weight: normal;
|
|
}
|
|
}
|
|
&.white{
|
|
background-color: #fff;
|
|
border: 1px solid #fff;
|
|
color: #101010;
|
|
&:hover{
|
|
background-color: #fff;
|
|
border: 1px solid #fff;
|
|
color: #101010;
|
|
font-weight: normal;
|
|
}
|
|
}
|
|
&:hover{
|
|
background-color: #353535;
|
|
border: 1px solid #484848;
|
|
color: #fff;
|
|
font-weight: normal;
|
|
}
|
|
}
|
|
&.self{
|
|
height: 30px;
|
|
padding: 0 10px;
|
|
line-height: 28px;
|
|
font-family: 'Noto Sans JP', sans-serif;
|
|
background-color: transparent;
|
|
border: 1px solid #676767;
|
|
color: #AAAAAA;
|
|
&:hover{
|
|
background-color: #272727;
|
|
border-color: #676767;
|
|
font-weight: 400;
|
|
}
|
|
}
|
|
&:hover,
|
|
&.act{
|
|
background-color: #1083E3;
|
|
border: 1px solid #1083E3;
|
|
color: #fff;
|
|
font-weight: 500;
|
|
}
|
|
&.block{
|
|
display: block;
|
|
width: 100%;
|
|
}
|
|
&.ico-flx{
|
|
display: flex;
|
|
align-items: center;
|
|
.ico{
|
|
margin-right: 10px;
|
|
}
|
|
&:hover,
|
|
&.act{
|
|
font-weight: 400;
|
|
}
|
|
}
|
|
}
|
|
|
|
.btn-origin{
|
|
display: inline-block;
|
|
height: 30px;
|
|
padding: 0 10px;
|
|
border-radius: 2px;
|
|
background-color: #101010;
|
|
color: #fff;
|
|
font-size: 13px;
|
|
font-weight: 400;
|
|
transition: all .15s ease-in-out;
|
|
&.navy{
|
|
background-color: #304961;
|
|
&:hover{
|
|
background-color: #233546;
|
|
}
|
|
}
|
|
&.grey{
|
|
background-color: #94A0AD;
|
|
&:hover{
|
|
background-color: #607F9A;
|
|
}
|
|
}
|
|
&.green{
|
|
background-color: #A6BBA8;
|
|
&:hover{
|
|
background-color: #98af9b;
|
|
}
|
|
}
|
|
&.white{
|
|
border: 1px solid #94A0AD;
|
|
background-color: #fff;
|
|
color: #94A0AD;
|
|
&:hover{
|
|
background-color: #fff;
|
|
}
|
|
}
|
|
}
|
|
|
|
// select
|
|
.sort-select{
|
|
position: relative;
|
|
display: inline-block;
|
|
min-width: 100px;
|
|
height: 30px;
|
|
line-height: 30px;
|
|
padding: 0 25px 0 10px;
|
|
background-color: #373737;
|
|
border: 1px solid #3F3F3F;
|
|
border-radius: 2px;
|
|
border-top-left-radius: 2px;
|
|
color: #fff;
|
|
cursor: pointer;
|
|
p{
|
|
font-size: 13px;
|
|
color: #fff;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 1;
|
|
-webkit-box-orient: vertical;
|
|
}
|
|
.select-item-wrap{
|
|
position: absolute;
|
|
top: 100%;
|
|
left: -1px;
|
|
clip-path:inset(0 0 100% 0);
|
|
width: calc(100% + 2px);
|
|
padding: 8px 0;
|
|
max-height: 116px;
|
|
overflow-y: auto;
|
|
background-color: #373737;
|
|
border: 1px solid #3F3F3F;
|
|
border-radius: 2px;
|
|
transition: all 0.17s ease-in-out;
|
|
visibility: hidden;
|
|
z-index: 999;
|
|
.select-item{
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 8px 20px;
|
|
line-height: 1.4;
|
|
transition: all .17s ease-in-out;
|
|
button{
|
|
font-size: 12px;
|
|
color: #fff;
|
|
line-height: 1.4;
|
|
}
|
|
&:hover{
|
|
background-color: #2C2C2C;
|
|
}
|
|
}
|
|
&::-webkit-scrollbar {
|
|
width: 5px;
|
|
background-color: transparent;
|
|
|
|
}
|
|
&::-webkit-scrollbar-thumb {
|
|
background-color: #5a5a5a;
|
|
border-radius: 10px;
|
|
}
|
|
&::-webkit-scrollbar-track {
|
|
background-color: transparent;
|
|
}
|
|
}
|
|
&::after{
|
|
content: '';
|
|
position: absolute;
|
|
top: 50%;
|
|
right: 7px;
|
|
transform: translateY(-50%);
|
|
width: 10px;
|
|
height: 6px;
|
|
background: url(/static/images/common/select-arr.svg) no-repeat center;
|
|
background-size: cover;
|
|
transition: all .17s ease-in-out;
|
|
}
|
|
&.active{
|
|
.select-item-wrap{
|
|
clip-path: inset(0 0 0 0);
|
|
visibility: visible;
|
|
}
|
|
&:after{
|
|
transform: translateY(-50%) rotate(-180deg);
|
|
}
|
|
}
|
|
&.disabled{
|
|
cursor: default;
|
|
p{
|
|
color: #aaa;
|
|
}
|
|
&::after{
|
|
opacity: 0.7;
|
|
}
|
|
}
|
|
}
|
|
|
|
.select-light{
|
|
position: relative;
|
|
display: block;
|
|
width: 100%;
|
|
height: 30px;
|
|
background: #FFF url(../../public/static/images/common/select_light_arr.svg) calc(100% - 11px) center no-repeat;
|
|
background-size: 10px 6px;
|
|
border: 1px solid #eee;
|
|
padding: 0 30px 0 10px;
|
|
font-size: 13px;
|
|
color: #45576F;
|
|
font-family: 'Noto Sans JP', sans-serif;
|
|
cursor: pointer;
|
|
&:disabled{
|
|
opacity: 1;
|
|
background-color: #FAFAFA;
|
|
color: #999;
|
|
cursor: default;
|
|
}
|
|
&.black{
|
|
color: #101010;
|
|
}
|
|
&.dark{
|
|
background: #323234 url(../../public/static/images/common/select_dark_arr.svg) calc(100% - 11px) center no-repeat;
|
|
color: #898989;
|
|
font-size: 12px;
|
|
border-radius: 2px;
|
|
border: none;
|
|
}
|
|
}
|
|
|
|
|
|
// input
|
|
.form-input{
|
|
label{
|
|
display: block;
|
|
color: #aaa;
|
|
font-size: 12px;
|
|
font-weight: 500;
|
|
margin-bottom: 10px;
|
|
}
|
|
}
|
|
input[type=password],
|
|
input[type=number],
|
|
input[type=text]{
|
|
&.input-origin{
|
|
display: inline-block;
|
|
height: 30px;
|
|
line-height: 30px;
|
|
border-radius: 2px;
|
|
background-color: #323234;
|
|
border: 1px solid #323234;
|
|
color: #fff;
|
|
font-size: 12px;
|
|
font-weight: 500;
|
|
font-family: 'Pretendard', sans-serif;
|
|
padding: 0 10px;
|
|
letter-spacing: 0px;
|
|
text-align: right;
|
|
transition: border .15s ease-in-out;
|
|
&:focus{
|
|
border: 1px solid #1083E3;
|
|
}
|
|
&::placeholder{
|
|
font-family: 'Noto Sans JP', sans-serif;
|
|
opacity: 1;
|
|
font-size: 12px;
|
|
letter-spacing: 0px;
|
|
}
|
|
&.block{
|
|
width: 100%;
|
|
}
|
|
&:read-only{
|
|
color: #AAA;
|
|
&:focus{
|
|
border: 1px solid #323234;
|
|
}
|
|
}
|
|
&.plane{
|
|
font-family: 'Noto Sans JP', sans-serif;
|
|
border: 1px solid #525252;
|
|
background-color: transparent;
|
|
}
|
|
}
|
|
&.input-light{
|
|
display: block;
|
|
width: 100%;
|
|
height: 30px;
|
|
padding: 0 10px;
|
|
border: 1px solid #eee;
|
|
border-radius: 2px;
|
|
background-color: #fff;
|
|
font-family: 'Noto Sans JP', sans-serif;
|
|
font-size: 13px;
|
|
color: #45576F;
|
|
font-weight: normal;
|
|
transition: border-color .17s ease-in-out;
|
|
text-align: left;
|
|
&:focus{
|
|
border-color: #94A0AD;
|
|
}
|
|
&:read-only{
|
|
background-color: #FAFAFA;
|
|
color: #999999;
|
|
&:focus{
|
|
border-color: #eee;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
input::-webkit-outer-spin-button,
|
|
input::-webkit-inner-spin-button {
|
|
-webkit-appearance: none;
|
|
margin: 0;
|
|
}
|
|
|
|
input[type=number] {
|
|
-moz-appearance: textfield;
|
|
}
|
|
|
|
|
|
// check-btn
|
|
.check-btn{
|
|
display: flex;
|
|
align-items: center;
|
|
height: 30px;
|
|
background-color: #3A3A3A;
|
|
border-radius: 3px;
|
|
transition: all .17s ease-in-out;
|
|
.check-area{
|
|
flex: none;
|
|
width: 30px;
|
|
height: 100%;
|
|
border-right: 1px solid #272727;
|
|
background: url(../../public/static/images/canvas/check-grey.svg)no-repeat center;
|
|
background-size: 11px 9px;
|
|
}
|
|
.title-area{
|
|
padding: 0 10px;
|
|
font-size: 12px;
|
|
color: #898989;
|
|
font-weight: 400;
|
|
}
|
|
&.block{
|
|
width: 100%;
|
|
}
|
|
&:hover,
|
|
&.act{
|
|
background-color: #fff;
|
|
.check-area{
|
|
border-right: 1px solid #101010;
|
|
background: url(../../public/static/images/canvas/check-black.svg)no-repeat center;
|
|
}
|
|
.title-area{
|
|
color: #101010;
|
|
font-weight: 600;
|
|
}
|
|
}
|
|
}
|
|
|
|
// arr-btn
|
|
.arr-btn{
|
|
display: block;
|
|
height: 30px;
|
|
border-radius: 3px;
|
|
background-color: #3A3A3A;
|
|
padding: 0 11px;
|
|
text-align: left;
|
|
transition: all .17s ease-in-out;
|
|
span{
|
|
position: relative;
|
|
font-size: 12px;
|
|
color: #898989;
|
|
font-weight: 400;
|
|
padding-right: 15px;
|
|
&:after{
|
|
content: '';
|
|
position: absolute;
|
|
top: 50%;
|
|
right: 0;
|
|
transform: translateY(-50%);
|
|
width: 5px;
|
|
height: 8px;
|
|
background: url(../../public/static/images/canvas/arr_btn_ico.svg)no-repeat center;
|
|
}
|
|
}
|
|
&:hover,
|
|
&.act{
|
|
background-color: #fff;
|
|
span{
|
|
color: #101010;
|
|
font-weight: 500;
|
|
&:after{
|
|
background: url(../../public/static/images/canvas/arr_btn_ico_black.svg)no-repeat center;
|
|
}
|
|
}
|
|
}
|
|
&.dark{
|
|
text-align: center;
|
|
background-color: #272727;
|
|
border: 1px solid #484848;
|
|
span{
|
|
color: #Fff;
|
|
&:after{
|
|
background: url(../../public/static/images/canvas/arr_btn_ico_white.svg)no-repeat center;
|
|
}
|
|
}
|
|
&:hover,
|
|
&.act{
|
|
background-color: #1083E3;
|
|
border: 1px solid #1083E3;
|
|
}
|
|
}
|
|
}
|
|
|
|
// radio
|
|
.d-check-radio,
|
|
.d-check-box{
|
|
line-height: 1.1;
|
|
cursor: pointer;
|
|
input[type=checkbox],
|
|
input[type=radio]{
|
|
position: static;
|
|
margin-left: 0;
|
|
cursor: pointer;
|
|
opacity: 0;
|
|
z-index: 1;
|
|
flex: 0 0 auto;
|
|
}
|
|
label{
|
|
position: relative;
|
|
padding-left: 10px;
|
|
margin-bottom: 0;
|
|
word-break: break-all;
|
|
line-height: 1.4;
|
|
display: inline;
|
|
vertical-align: top;
|
|
color: #fff;
|
|
font-size: 13px;
|
|
font-weight: 400;
|
|
cursor: pointer;
|
|
}
|
|
&.light{
|
|
label{
|
|
color: #45576F;
|
|
}
|
|
}
|
|
&.no-text{
|
|
label{
|
|
padding-left: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
.d-check-radio {
|
|
label{
|
|
&::before{
|
|
cursor: pointer;
|
|
content: "";
|
|
display: inline-block;
|
|
position: absolute;
|
|
width: 17px;
|
|
height: 17px;
|
|
top:2px;
|
|
left: 0;
|
|
margin-left: -12px;
|
|
border: 1px solid #999999;
|
|
border-radius: 100%;
|
|
background-color: transparent;
|
|
text-align:center;
|
|
font-size:13px;
|
|
line-height:1.4;
|
|
transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
|
|
}
|
|
&::after{
|
|
cursor: pointer;
|
|
content: "";
|
|
display: inline-block;
|
|
position: absolute;
|
|
width: 9px;
|
|
height: 9px;
|
|
top:6px;
|
|
left: 4px;
|
|
margin-left: -12px;
|
|
border: none;
|
|
border-radius: 100%;
|
|
background-color: #fff;
|
|
text-align:center;
|
|
font-size:13px;
|
|
line-height:1.4;
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
transition: opacity 0.15s ease-in-out, color 0.15s ease-in-out;
|
|
}
|
|
}
|
|
&.light{
|
|
label{
|
|
&:before{
|
|
border-color: #D6D6D7;
|
|
}
|
|
&:after{
|
|
background-color: #697C8F;
|
|
}
|
|
}
|
|
}
|
|
input[type=radio]:checked + label::after{
|
|
opacity: 1;
|
|
visibility: visible;
|
|
}
|
|
&.pop{
|
|
label{
|
|
font-size: 12px;
|
|
&:before{
|
|
width: 16px;
|
|
height: 16px;
|
|
border-color: #fff;
|
|
}
|
|
&:after{
|
|
width: 8px;
|
|
height: 8px;
|
|
background-color: #fff;
|
|
}
|
|
}
|
|
input[type=radio]:disabled + label{
|
|
color: #999;
|
|
}
|
|
input[type=radio]:disabled + label::before{
|
|
border-color: #999;
|
|
}
|
|
input[type=radio]:disabled + label::after{
|
|
background-color: #999;
|
|
}
|
|
}
|
|
}
|
|
|
|
// check-box
|
|
.d-check-box{
|
|
label{
|
|
&.red{color: #FFCACA;}
|
|
&::before{
|
|
cursor: pointer;
|
|
content: "";
|
|
display: inline-block;
|
|
position: absolute;
|
|
width: 17px;
|
|
height: 17px;
|
|
top: 2px;
|
|
left: 0;
|
|
margin-left: -12px;
|
|
border: 1px solid #D6D6D7;
|
|
background-color: #fff;
|
|
transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
|
|
}
|
|
&:after{
|
|
cursor: pointer;
|
|
content: "";
|
|
display: inline-block;
|
|
position: absolute;
|
|
width: 16px;
|
|
height: 16px;
|
|
top:0;
|
|
left: 0;
|
|
margin-left: -.8rem;
|
|
transition: border 0.05s ease-in-out, color 0.05s ease-in-out;
|
|
}
|
|
}
|
|
input[type=checkbox]:checked + label::after{
|
|
content: "";
|
|
display: inline-block;
|
|
position: absolute;
|
|
top: 1px;
|
|
left: -1px;
|
|
width: 5px;
|
|
height: 8px;
|
|
border: 2px solid #697C8F;
|
|
border-left: none;
|
|
border-top: none;
|
|
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{
|
|
label{
|
|
&:before{
|
|
background-color: transparent;
|
|
}
|
|
}
|
|
input[type=checkbox]:checked + label::after{
|
|
border-color: #fff;
|
|
}
|
|
&.no-text{
|
|
label{
|
|
padding-left: 0;
|
|
}
|
|
}
|
|
}
|
|
&.sel{
|
|
input[type=checkbox]:checked + label{
|
|
color: #D7C863;
|
|
}
|
|
input[type=checkbox]:checked + label::before,
|
|
input[type=checkbox]:checked + label::after{
|
|
border-color: #D7C863;
|
|
}
|
|
}
|
|
}
|
|
|
|
// date-picker
|
|
.date-picker{
|
|
svg{display: none;}
|
|
.react-datepicker-wrapper{
|
|
width: 100%;
|
|
}
|
|
input[type=text]{
|
|
display: block;
|
|
width: 100%;
|
|
height: 30px;
|
|
padding: 0 34px 0 10px;
|
|
border-radius: 2px;
|
|
border: 1px solid #eee;
|
|
font-size: 13px;
|
|
color: #45576F;
|
|
font-weight: normal;
|
|
font-family: 'Noto Sans JP', sans-serif;
|
|
background: #fff url(../../public/static/images/common/datepicker.svg) calc(100% - 11px) center no-repeat;
|
|
background-size: 14px 15px;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
|
|
// react select
|
|
.react-select-custom{
|
|
width: 100%;
|
|
.custom__control{
|
|
height: 30px;
|
|
min-height: unset;
|
|
border-radius: 2px;
|
|
border-color: #EEE;
|
|
background-color: #fff;
|
|
&:hover{
|
|
border-color: #EEE;
|
|
}
|
|
}
|
|
.custom__control--is-focused{
|
|
border-color: #EEE;
|
|
box-shadow: unset;
|
|
&:hover{
|
|
border-color: #EEE;
|
|
|
|
}
|
|
}
|
|
.custom__value-container {
|
|
height: 100%;
|
|
padding: 0 10px;
|
|
}
|
|
.custom__placeholder,
|
|
.custom__single-value{
|
|
margin: 0;
|
|
}
|
|
.custom__single-value{
|
|
font-size: 13px;
|
|
color: #45576F;
|
|
font-weight: 400;
|
|
}
|
|
.custom__placeholder{
|
|
font-size: 13px;
|
|
color: #bbbbbb;
|
|
font-weight: 400;
|
|
}
|
|
.custom__indicator{
|
|
padding: 0;
|
|
svg{
|
|
display: none;
|
|
}
|
|
}
|
|
.custom__clear-indicator{
|
|
width: 30px;
|
|
height: 100%;
|
|
background: url(../../public/static/images/common/select_del.svg) no-repeat center;
|
|
background-size: 8px 8px;
|
|
}
|
|
.custom__dropdown-indicator{
|
|
width: 30px;
|
|
height: 100%;
|
|
background: url(../../public/static/images/common/select_light_arr.svg) no-repeat center;
|
|
}
|
|
|
|
.custom__menu {
|
|
margin: 1px 0;
|
|
border-radius: 2px;
|
|
overflow: hidden;
|
|
}
|
|
.custom__menu-list {
|
|
padding: 0;
|
|
}
|
|
.custom__option{
|
|
font-size: 13px;
|
|
padding: 7px 10px;
|
|
color: #45576F;
|
|
|
|
}
|
|
.custom__option--is-selected{
|
|
background-color: #2684FF;
|
|
color: #fff !important;
|
|
&.custom__option--is-focused{
|
|
background-color: #2684FF;
|
|
color: #fff;
|
|
}
|
|
}
|
|
.custom__option--is-focused{
|
|
background-color: #DEEBFF;
|
|
color: #45576F;
|
|
}
|
|
.special-option{
|
|
color: #2684FF;
|
|
}
|
|
// disable
|
|
&.custom--is-disabled{
|
|
.custom__control{
|
|
background-color: #FAFAFA ;
|
|
}
|
|
.custom__single-value{
|
|
color: #999999;
|
|
}
|
|
}
|
|
.css-tfygzr{
|
|
visibility: visible !important;
|
|
color: #999 !important;
|
|
}
|
|
}
|
|
|
|
// toggle
|
|
.toggle-btn {
|
|
position: relative;
|
|
display: inline-block;
|
|
width: 55px;
|
|
height: 20px;
|
|
input {
|
|
display: none;
|
|
}
|
|
}
|
|
.slider {
|
|
position: absolute;
|
|
cursor: pointer;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background-color: #454545;
|
|
transition: .4s;
|
|
border-radius: 10px;
|
|
text-align: center;
|
|
line-height: 20px;
|
|
color: white;
|
|
font-size: 12px;
|
|
font-weight: 400;
|
|
&:after {
|
|
content: 'OFF';
|
|
position: absolute;
|
|
right: 7px;
|
|
color: white;
|
|
font-size: 12px;
|
|
font-weight: 400;
|
|
}
|
|
&:before {
|
|
position: absolute;
|
|
content: "";
|
|
height: 16px;
|
|
width: 16px;
|
|
left: 2px;
|
|
bottom: 2px;
|
|
background-color: white;
|
|
transition: .4s;
|
|
border-radius: 50%;
|
|
}
|
|
}
|
|
input:checked + .slider {
|
|
background-color: #2563EB;
|
|
&:after {
|
|
content: 'ON';
|
|
left: 10px;
|
|
right: auto;
|
|
}
|
|
&:before {
|
|
transform: translateX(35px);
|
|
}
|
|
}
|
|
|
|
// alert z-index
|
|
.swal2-container{
|
|
z-index: 120000;
|
|
} |