polestar-ui-kit
Version:
## Install
98 lines (95 loc) • 2.1 kB
text/less
@btn-prefix-cls: ~'@{ant-prefix}-btn';
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.@{ps-grid-prefix-cls} {
&-container {
box-sizing: border-box;
display: flex;
flex-direction: column;
flex-grow: 1;
.@{ps-grid-prefix-cls}-header {
display: flex;
background: @white;
padding: 0 0 5px 0;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
&-title {
display: flex;
align-items: center;
flex-wrap: wrap;
font-size: @font-size-lg;
i {
margin: 2px 0 0 0;
}
span {
margin: 0 0 0 5px;
color: @gray-9;
line-height: 27px;
}
.total-count {
background: @primary-1;
color: @primary-6;
font-size: @breadcrumb-font-size;
border-radius: @border-radius-base;
padding: 0 5px;
}
}
&-check-count {
margin-left: 5px;
}
&-buttons {
display: flex;
align-items: center;
flex-wrap: wrap;
.@{btn-prefix-cls} {
margin: 0 0 0 3px ;
}
}
}
.@{ps-grid-prefix-cls}-content {
flex: 1 1 auto;
display: flex;
position: relative;
}
.@{ps-grid-prefix-cls}-footer {
.@{ps-pagination-prefix-cls} {
margin: 5px 0 0 0;
}
}
.ag-row-drag {
cursor: grab;
}
}
&-loading {
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
color: @primary-6;
font-size: @font-size-base;
&:before {
font-family: "polestar";
content: '\E263';
margin: 0 5px 0 0;
animation-name: spin;
animation-duration: 2000ms;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
}
}
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
.@{ps-grid-prefix-cls} {
&-container {
height : calc(100vh ~'-' 198px);
}
}
}