1028 lines
18 KiB
SCSS
1028 lines
18 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 {
|
|
width: 100%;
|
|
height: 100%;
|
|
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;
|
|
}
|
|
|
|
// 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 0.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: transparent;
|
|
border: 1px solid #484848;
|
|
color: #fff;
|
|
&.blue {
|
|
background-color: #414e6c;
|
|
border: 1px solid #414e6c;
|
|
&:hover {
|
|
background-color: #414e6c;
|
|
border: 1px solid #414e6c;
|
|
}
|
|
}
|
|
&.white {
|
|
background-color: #fff;
|
|
border: 1px solid #fff;
|
|
color: #101010;
|
|
&:hover {
|
|
background-color: #fff;
|
|
border: 1px solid #fff;
|
|
color: #101010;
|
|
}
|
|
}
|
|
&:hover {
|
|
font-weight: 400;
|
|
background-color: transparent;
|
|
border: 1px solid #484848;
|
|
color: #fff;
|
|
}
|
|
}
|
|
&.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 0.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%;
|
|
}
|
|
.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: 100px;
|
|
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 0.17s ease-in-out;
|
|
button {
|
|
font-size: 12px;
|
|
color: #fff;
|
|
line-height: 1.4;
|
|
}
|
|
&:hover {
|
|
background-color: #2c2c2c;
|
|
}
|
|
}
|
|
&::-webkit-scrollbar {
|
|
width: 2px;
|
|
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 0.17s ease-in-out;
|
|
}
|
|
&.active {
|
|
.select-item-wrap {
|
|
clip-path: inset(0 0 0 0);
|
|
visibility: visible;
|
|
}
|
|
&:after {
|
|
transform: translateY(-50%) rotate(-180deg);
|
|
}
|
|
}
|
|
}
|
|
|
|
.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;
|
|
color: #fff;
|
|
font-size: 12px;
|
|
font-weight: 500;
|
|
font-family: 'Pretendard', sans-serif;
|
|
padding: 0 10px;
|
|
letter-spacing: 0px;
|
|
text-align: right;
|
|
&::placeholder {
|
|
opacity: 1;
|
|
font-size: 12px;
|
|
letter-spacing: 0px;
|
|
}
|
|
&.block {
|
|
width: 100%;
|
|
}
|
|
&:read-only {
|
|
color: #aaa;
|
|
}
|
|
&.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 0.17s ease-in-out;
|
|
text-align: left;
|
|
&:read-only {
|
|
background-color: #fafafa;
|
|
color: #999999;
|
|
}
|
|
}
|
|
}
|
|
|
|
// check-btn
|
|
.check-btn {
|
|
display: flex;
|
|
align-items: center;
|
|
height: 30px;
|
|
background-color: #3a3a3a;
|
|
border-radius: 3px;
|
|
transition: all 0.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 0.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.2;
|
|
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;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// 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: -0.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);
|
|
}
|
|
&.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 {
|
|
color: #fff;
|
|
}
|
|
// disable
|
|
&.custom--is-disabled {
|
|
.custom__control {
|
|
background-color: #fafafa;
|
|
}
|
|
.custom__single-value {
|
|
color: #999999;
|
|
}
|
|
}
|
|
}
|