polestar-ui-kit
Version:
## Install
213 lines (204 loc) • 9.35 kB
text/less
@import '../../index';
@import '../../../../mixins/index';
// form, 버튼 less import 테스트 해보자
@form-prefix-cls: ~"@{ant-prefix}-form";
@select-prefix-cls: ~"@{ant-prefix}-select";
@calendar-prefix-cls: ~"@{ant-prefix}-calendar";
.@{search-prefix-cls}-container {
.@{search-prefix-cls}-display {
.@{search-prefix-cls} {
display: flex;
flex-flow: wrap;
flex-direction: row;
background-color: @search-form-background-color;
&-wrapper {
flex-grow: 1;
flex-shrink: 1;
flex-basis: 500px;
i {
margin: 4px 2px 0 0;
padding: 5px 0 0 0;
color: @gray-4 ;
&:hover {
color: @primary-5 ;
cursor: pointer;
}
}
.@{search-prefix-cls} {
&-item {
float: left;
margin: 0;
padding: 1px 1px 4px 3px;
border-radius: @border-radius-base;
max-width: 400px;
&:hover {
padding: 0 0 3px 2px;
background: @primary-1;
border: @border-width-base @border-style-base2 @primary-3;
}
.@{form-prefix-cls}-item {
&-label {
line-height: @line-height-base;
i:hover {
color: @gray-4 ;
cursor: unset;
}
}
&-control-wrapper {
.@{form-prefix-cls}-item-control {
.@{form-prefix-cls}-item-children {
.@{search-prefix-cls}-item-domain {
display: flex;
flex-direction: row;
&-input,
.@{select-prefix-cls} {
flex: 1 1 auto;
min-width: 150px;
&-arrow {
margin-top: -10px;
}
}
.@{calendar-prefix-cls}-picker,
.ps-base-date-calendar-picker {
width: 100%;
min-width: 200px;
i {
margin: 0;
padding: 0;
height: 16px;
line-height: 16px;
top: 7px ;
&:hover {
background-color: #FFF;
}
}
}
i {
flex: 0 0 auto;
}
}
&.added-form-item {
padding: 0 0 3px 5px;
background: @primary-1;
border: @border-width-base @border-style-base2 @primary-3;
}
}
}
}
}
}
}
}
&-action {
// 검색버튼
.@{search-prefix-cls} {
&-extra {
display: flex;
flex: 0 0 auto;
margin: 23px 0 0 10px;
button {
margin: 0 3px 0 0;
height: 32px;
}
.@{form-prefix-cls}-item {
&-control-wrapper {
display: flex;
margin: 0 0 6px 0;
.@{form-prefix-cls}-item {
&-control {
.@{form-prefix-cls}-item-children {
display: flex;
padding: 0 0 0 10px;
border-left: @border-width-base @border-style-base @border-color-split;
height: 34px;
.@{ps-button-prefix-cls}-container {
&:first-child {
margin: 1px 0 0 0 ;
}
&:nth-child(2) {
margin: 1px 0 0 0;
.@{ps-button-prefix-cls} {
&-inner-container {
i {
margin: 1px 0 0 0;
}
}
}
}
&:nth-child(3) {
margin: 1px 5px 0 0;
.@{ps-button-prefix-cls} {
margin: 0;
&-inner-container {
i {
margin: 2px 0 0 0;
&:before {
// content: '\E2A7';
content: '\E161';
}
}
}
}
}
}
}
}
}
}
}
}
}
// custom dom
&-extra {
float: right;
margin-right: 5px;
}
}
.has-error {
// .form-control-validation(@primary-color; @primary-5;);
.@{ant-prefix}-form-explain,
.@{ant-prefix}-form-split {
font-size: @font-size-sm;
margin: 0;
}
}
}
}
.@{ps-button-prefix-cls}-container {
width: 100%;
text-align: center;
.@{search-prefix-cls} {
&-display-button {
padding: 0;
height: 10px;
border: unset;
.@{ps-button-prefix-cls} {
&-inner {
&-container {
height: 15px;
span {
font-size: @font-size-base - 3px;
}
}
}
}
}
}
.@{search-prefix-cls} {
&-collapse-button {
.@{ps-button-prefix-cls}-inner-container {
&:before {
.ps-iconfont("\E012");
}
}
}
&-expand-button {
.@{ps-button-prefix-cls}-inner-container {
&:before {
.ps-iconfont("\E00F");
}
}
}
}
}
}