polestar-ui-kit
Version:
## Install
203 lines (193 loc) • 8.82 kB
text/less
@import '../../themes/default/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 !important;
// &:hover {
// color: @primary-5 !important;
// cursor: pointer;
// }
// }
.@{search-prefix-cls} {
&-item {
float: left;
margin: 0;
padding: 1px 3px 4px 3px;
border-radius: @border-radius-base;
border: 1px solid transparent;
max-width: 400px;
&:hover {
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 !important;
// &:hover {
// background-color: #fff;
// }
// }
// }
> i[class~="polestar-icon"] {
cursor: pointer;
align-self: center;
padding: 0 5px;
color: @primary-color;
transition: all ease-out .3s;
&:hover {
color: @primary-5;
}
}
// TODO 안형로 추가
.ps-datetimerange-picker {
.ps-datetimerange-date-picker {
.ant-calendar-picker {
width: 150px;
min-width: 150px;
}
}
.ps-datetimerange-time-picker {
.ant-time-picker {
// .ant-time-picker-icon {
// top: 25%;
// }
i {
margin: 0;
padding: 0;
height: 16px;
line-height: 16px;
top: 7px ;
}
}
}
}
}
&.added-form-item {
padding: 0 0 3px 5px;
background: @primary-1;
border: @border-width-base
@border-style-base2 @primary-3;
}
}
}
}
}
}
}
}
&-action {
display: flex;
flex-direction: column;
align-self: flex-start;
padding-left: 10px;
border-left: @border-width-base @border-style-base
@border-color-split;
// 검색버튼
.@{search-prefix-cls} {
&-extra {
display: flex;
margin: 5px 0;
}
}
// custom dom
&-extra {
.ps-button-container {
display: flex;
justify-content: flex-end;
margin-bottom: 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;
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');
}
}
}
}
}
}