You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
217 lines
4.0 KiB
Plaintext
217 lines
4.0 KiB
Plaintext
@root-entry-name: 'default';
|
|
@import (reference) 'ant-design-vue/es/style/themes/index.less';
|
|
|
|
@pro-card-prefix-cls: ~'@{ant-prefix}-pro-card';
|
|
@card-hoverable-hover-border: transparent;
|
|
@pro-card-default-border: @border-width-base @border-style-base @border-color-split;
|
|
|
|
// == when focus or actived
|
|
.pro-card-active() {
|
|
background-color: @item-active-bg;
|
|
border-color: @outline-color;
|
|
}
|
|
|
|
.@{pro-card-prefix-cls} {
|
|
position: relative;
|
|
display: flex;
|
|
flex-direction: column;
|
|
box-sizing: border-box;
|
|
width: 100%;
|
|
margin: 0;
|
|
padding: 0;
|
|
background-color: @component-background;
|
|
border-radius: @card-radius;
|
|
|
|
&-col {
|
|
width: 100%;
|
|
}
|
|
|
|
&-border {
|
|
border: @pro-card-default-border;
|
|
}
|
|
|
|
&-hoverable {
|
|
cursor: pointer;
|
|
transition: box-shadow 0.3s, border-color 0.3s;
|
|
|
|
&:hover {
|
|
border-color: @card-hoverable-hover-border;
|
|
box-shadow: @card-shadow;
|
|
}
|
|
|
|
&.@{pro-card-prefix-cls}-checked:hover {
|
|
border-color: @outline-color;
|
|
}
|
|
}
|
|
|
|
&-checked {
|
|
.pro-card-active();
|
|
&::after {
|
|
position: absolute;
|
|
top: 2px;
|
|
right: 2px;
|
|
width: 0;
|
|
height: 0;
|
|
border: 6px solid @primary-color;
|
|
border-bottom: 6px solid transparent;
|
|
border-left: 6px solid transparent;
|
|
border-top-right-radius: 2px;
|
|
content: '';
|
|
}
|
|
}
|
|
|
|
&:focus {
|
|
.pro-card-active();
|
|
}
|
|
|
|
&-size-small {
|
|
.@{pro-card-prefix-cls} {
|
|
&-header {
|
|
padding: @card-head-padding-sm @card-padding-base-sm;
|
|
padding-bottom: 0;
|
|
|
|
&-border {
|
|
& {
|
|
padding-bottom: @card-head-padding-sm;
|
|
}
|
|
}
|
|
}
|
|
|
|
&-title {
|
|
font-size: @card-head-font-size-sm;
|
|
}
|
|
|
|
&-body {
|
|
padding: @card-padding-base-sm;
|
|
}
|
|
}
|
|
}
|
|
|
|
&-ghost {
|
|
background-color: transparent;
|
|
|
|
> .@{pro-card-prefix-cls} {
|
|
&-header {
|
|
padding-right: 0;
|
|
padding-bottom: @card-head-padding;
|
|
padding-left: 0;
|
|
}
|
|
|
|
&-body {
|
|
padding: 0;
|
|
background-color: transparent;
|
|
}
|
|
}
|
|
}
|
|
|
|
&-split > &-body {
|
|
padding: 0;
|
|
}
|
|
|
|
&-split-vertical {
|
|
border-right: @border-width-base @border-style-base @border-color-split;
|
|
}
|
|
|
|
&-split-horizontal {
|
|
border-bottom: @border-width-base @border-style-base @border-color-split;
|
|
}
|
|
|
|
&-contain-card > &-body {
|
|
display: flex;
|
|
}
|
|
|
|
&-body-direction-column {
|
|
flex-direction: column;
|
|
}
|
|
|
|
&-body-wrap {
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
&-collapse {
|
|
> .@{pro-card-prefix-cls} {
|
|
&-header {
|
|
padding-bottom: @card-head-padding;
|
|
border-bottom: 0;
|
|
}
|
|
|
|
&-body {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
&-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: @card-head-padding @card-padding-base;
|
|
padding-bottom: 0;
|
|
&-border {
|
|
& {
|
|
padding-bottom: @card-head-padding;
|
|
}
|
|
border-bottom: @border-width-base @border-style-base @border-color-split;
|
|
}
|
|
|
|
&-collapsible {
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
|
|
&-title {
|
|
color: @card-head-color;
|
|
font-weight: 500;
|
|
font-size: @card-head-font-size;
|
|
}
|
|
|
|
&-extra {
|
|
color: @card-head-extra-color;
|
|
}
|
|
|
|
&-type-inner {
|
|
.@{pro-card-prefix-cls}-header {
|
|
background-color: @background-color-light;
|
|
}
|
|
}
|
|
|
|
&-collapsible-icon {
|
|
margin-right: 8px;
|
|
color: @icon-color-hover;
|
|
:hover {
|
|
color: @primary-color-hover;
|
|
}
|
|
|
|
& svg {
|
|
transition: transform @animation-duration-base;
|
|
}
|
|
}
|
|
|
|
&-body {
|
|
display: block;
|
|
box-sizing: border-box;
|
|
height: 100%;
|
|
padding: @card-padding-base;
|
|
|
|
&-center {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
}
|
|
}
|
|
|
|
.loop-grid-columns(@index) when (@index > 0) {
|
|
.@{pro-card-prefix-cls}-col-@{index} {
|
|
flex-shrink: 0;
|
|
width: percentage((@index / @grid-columns));
|
|
}
|
|
.loop-grid-columns((@index - 1));
|
|
}
|
|
|
|
.@{pro-card-prefix-cls}-col-0 {
|
|
display: none;
|
|
}
|
|
|
|
.loop-grid-columns(@grid-columns);
|