249 lines
8.9 KiB
CSS
249 lines
8.9 KiB
CSS
.search-section {
|
|
--tab-img-active: url("data:image/svg+xml,%3Csvg width='174' height='48' viewBox='0 0 174 48' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M174 48C166.082 48 158.997 43.3747 155.871 36.1799L145.244 11.8201C142.118 4.62527 135.033 0 127.114 0H14.5866C6.56398 0 0 6.47538 0 14.3897V48H174Z' fill='%23212B36'/%3E%3C/svg%3E");
|
|
--tab-img-inactive: url("data:image/svg+xml,%3Csvg width='175' height='50' viewBox='0 0 175 50' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M175 49C167.031 49 159.9 44.3747 156.754 37.1799L146.058 12.8201C142.912 5.62527 135.782 1 127.812 1H15.6806C7.60627 1 1 7.47538 1 15.3897V49H175Z' fill='%23F0F0F0' stroke='white' stroke-width='2' stroke-miterlimit='10'/%3E%3C/svg%3E%0A");
|
|
|
|
.tabs {
|
|
position: relative;
|
|
margin-top: 48px;
|
|
|
|
&.none {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.tab {
|
|
position: absolute;
|
|
width: 100%;
|
|
|
|
.tab-head {
|
|
position: absolute;
|
|
top: -48px;
|
|
width: 174px;
|
|
height: 48px;
|
|
background-image: var(--tab-img-inactive);
|
|
background-repeat: no-repeat;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
cursor: pointer;
|
|
|
|
p {
|
|
transform: translateX(-10px);
|
|
color: #666666;
|
|
font-size: 1.25em;
|
|
font-weight: 500;
|
|
}
|
|
}
|
|
|
|
.tab-content {
|
|
display: none;
|
|
}
|
|
|
|
.tab-content {
|
|
height: calc(133px);
|
|
border-radius: 0px 16px 16px 16px;
|
|
background-color: #212B36;
|
|
|
|
&.col2 {
|
|
height: calc(210px);
|
|
}
|
|
|
|
&.all-radius {
|
|
border-radius: 16px;
|
|
}
|
|
}
|
|
|
|
&[active] {
|
|
.tab-head {
|
|
background-image: var(--tab-img-active);
|
|
z-index: 5;
|
|
|
|
p {
|
|
color: #fff;
|
|
font-size: 1.25em;
|
|
font-weight: 700;
|
|
}
|
|
}
|
|
|
|
.tab-content {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
width: 100%;
|
|
|
|
form {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
flex-grow: 1;
|
|
padding: 0 40px;
|
|
|
|
&.flex-start {
|
|
justify-content: flex-start;
|
|
}
|
|
|
|
span {
|
|
height: 1em;
|
|
}
|
|
|
|
select {
|
|
width: 180px;
|
|
height: 52px;
|
|
padding: 12px 16px 12px 16px;
|
|
border-radius: 8px;
|
|
|
|
&.black {
|
|
background-color: transparent;
|
|
color: #fff;
|
|
border: 0;
|
|
box-shadow: inset 0 0 0 1px #FFFFFF;
|
|
}
|
|
|
|
&.search-section-select {
|
|
appearance: none;
|
|
-webkit-appearance: none;
|
|
font-size: 18px;
|
|
background-color: #FFFFFF;
|
|
border: 0;
|
|
border-radius: 8px;
|
|
padding: 0 16px;
|
|
width: 107px;
|
|
color: #444;
|
|
cursor: pointer;
|
|
outline: none;
|
|
height: 41px;
|
|
background-image: var(--select-icon);
|
|
background-repeat: no-repeat;
|
|
background-position-y: center;
|
|
background-position-x: calc(100% - 16px);
|
|
}
|
|
}
|
|
|
|
.tab-search-field {
|
|
display: inline-block;
|
|
position: relative;
|
|
--search-icon: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20.5605 18.4394L16.7527 14.6317C17.5395 13.4459 18 12.0262 18 10.4999C18 6.36444 14.6355 2.99994 10.5 2.99994C6.36447 2.99994 2.99997 6.36444 2.99997 10.4999C2.99997 14.6354 6.36447 17.9999 10.5 17.9999C12.0262 17.9999 13.446 17.5394 14.6317 16.7527L18.4395 20.5604C19.0245 21.1462 19.9755 21.1462 20.5605 20.5604C21.1462 19.9747 21.1462 19.0252 20.5605 18.4394ZM5.24997 10.4999C5.24997 7.60494 7.60497 5.24994 10.5 5.24994C13.395 5.24994 15.75 7.60494 15.75 10.4999C15.75 13.3949 13.395 15.7499 10.5 15.7499C7.60497 15.7499 5.24997 13.3949 5.24997 10.4999Z' fill='%23212B36'/%3E%3C/svg%3E%0A");
|
|
|
|
button {
|
|
background-image: var(--search-icon);
|
|
background-color: #fff;
|
|
position: absolute;
|
|
right: 20px;
|
|
top: calc(52px / 2);
|
|
transform: translateY(-50%);
|
|
height: 24px;
|
|
width: 24px;
|
|
border: 0;
|
|
}
|
|
|
|
input {
|
|
&[type="search"] {
|
|
width: 480px;
|
|
height: 52px;
|
|
padding: 0 16px;
|
|
border-radius: 8px;
|
|
|
|
&::placeholder {
|
|
font-size: 1.125em;
|
|
font-weight: 400;
|
|
line-height: 1.534em;
|
|
color: #999999;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
input {
|
|
&[type="date"] {
|
|
width: 148px;
|
|
height: 41px;
|
|
padding: 0 16px;
|
|
gap: 0px;
|
|
border-radius: 8px;
|
|
justify-content: space-between;
|
|
opacity: 0px;
|
|
border: initial;
|
|
|
|
&[height] {
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
|
|
}
|
|
}
|
|
}
|
|
|
|
&:nth-of-type(1) {
|
|
.tab-head {
|
|
left: calc(140px * 0);
|
|
z-index: 9;
|
|
}
|
|
}
|
|
|
|
&:nth-of-type(2) {
|
|
.tab-head {
|
|
left: calc(140px * 1);
|
|
z-index: 9;
|
|
}
|
|
}
|
|
|
|
&:nth-of-type(3) {
|
|
.tab-head {
|
|
left: calc(140px * 2);
|
|
z-index: 9;
|
|
}
|
|
}
|
|
|
|
&:nth-of-type(4) {
|
|
.tab-head {
|
|
left: calc(140px * 3);
|
|
z-index: 9;
|
|
}
|
|
}
|
|
|
|
&:nth-of-type(5) {
|
|
.tab-head {
|
|
left: calc(140px * 4);
|
|
z-index: 9;
|
|
}
|
|
}
|
|
|
|
|
|
}
|
|
|
|
&:nth-of-type(1) {
|
|
.tab-head {
|
|
left: calc(140px * 0);
|
|
z-index: 5;
|
|
}
|
|
}
|
|
|
|
&:nth-of-type(2) {
|
|
.tab-head {
|
|
left: calc(140px * 1);
|
|
z-index: 4;
|
|
}
|
|
}
|
|
|
|
&:nth-of-type(3) {
|
|
.tab-head {
|
|
left: calc(140px * 2);
|
|
z-index: 3;
|
|
}
|
|
}
|
|
|
|
&:nth-of-type(4) {
|
|
.tab-head {
|
|
left: calc(140px * 3);
|
|
z-index: 2;
|
|
}
|
|
}
|
|
|
|
&:nth-of-type(5) {
|
|
.tab-head {
|
|
left: calc(140px * 4);
|
|
z-index: 1;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
} |