ant-design-vue/components/spin/style/index.less

213 lines
4.1 KiB
Plaintext
Raw Normal View History

2019-01-02 13:01:56 +00:00
@import '../../style/themes/default';
@import '../../style/mixins/index';
2018-02-09 09:09:50 +00:00
2019-01-02 13:01:56 +00:00
@spin-prefix-cls: ~'@{ant-prefix}-spin';
2018-02-09 09:09:50 +00:00
@spin-dot-default: @text-color-secondary;
.@{spin-prefix-cls} {
.reset-component;
2019-03-30 08:06:06 +00:00
position: absolute;
display: none;
2018-02-09 09:09:50 +00:00
color: @primary-color;
text-align: center;
2019-03-30 08:06:06 +00:00
vertical-align: middle;
2018-02-09 09:09:50 +00:00
opacity: 0;
transition: transform 0.3s @ease-in-out-circ;
&-spinning {
position: static;
display: inline-block;
2019-03-30 08:06:06 +00:00
opacity: 1;
2018-02-09 09:09:50 +00:00
}
&-nested-loading {
position: relative;
> div > .@{spin-prefix-cls} {
position: absolute;
2019-03-30 08:06:06 +00:00
z-index: 4;
display: block;
width: 100%;
2018-02-09 09:09:50 +00:00
height: 100%;
2019-01-02 13:01:56 +00:00
max-height: 400px;
2018-02-09 09:09:50 +00:00
.@{spin-prefix-cls}-dot {
position: absolute;
top: 50%;
left: 50%;
margin: -@spin-dot-size / 2;
}
.@{spin-prefix-cls}-text {
position: absolute;
top: 50%;
width: 100%;
padding-top: (@spin-dot-size - @font-size-base) / 2 + 2px;
2019-03-30 08:06:06 +00:00
text-shadow: 0 1px 2px @shadow-color-inverse;
2018-02-09 09:09:50 +00:00
}
&.@{spin-prefix-cls}-show-text .@{spin-prefix-cls}-dot {
margin-top: -@spin-dot-size / 2 - 10px;
}
}
> div > .@{spin-prefix-cls}-sm {
.@{spin-prefix-cls}-dot {
margin: -@spin-dot-size-sm / 2;
}
.@{spin-prefix-cls}-text {
padding-top: (@spin-dot-size-sm - @font-size-base) / 2 + 2px;
}
&.@{spin-prefix-cls}-show-text .@{spin-prefix-cls}-dot {
margin-top: -@spin-dot-size-sm / 2 - 10px;
}
}
> div > .@{spin-prefix-cls}-lg {
.@{spin-prefix-cls}-dot {
margin: -@spin-dot-size-lg / 2;
}
.@{spin-prefix-cls}-text {
padding-top: (@spin-dot-size-lg - @font-size-base) / 2 + 2px;
}
&.@{spin-prefix-cls}-show-text .@{spin-prefix-cls}-dot {
margin-top: -@spin-dot-size-lg / 2 - 10px;
}
}
}
&-container {
position: relative;
2019-01-02 13:01:56 +00:00
transition: opacity 0.3s;
2018-06-17 02:49:56 +00:00
2019-03-30 08:06:06 +00:00
&::after {
2018-02-09 09:09:50 +00:00
position: absolute;
top: 0;
2019-03-30 08:06:06 +00:00
right: 0;
2018-02-09 09:09:50 +00:00
bottom: 0;
2019-03-30 08:06:06 +00:00
left: 0;
z-index: 10;
display: ~'none \9';
width: 100%;
height: 100%;
background: @component-background;
2019-01-02 13:01:56 +00:00
opacity: 0;
transition: all 0.3s;
2019-03-30 08:06:06 +00:00
pointer-events: none;
content: '';
2018-02-09 09:09:50 +00:00
}
}
2019-01-02 13:01:56 +00:00
&-blur {
2019-03-30 08:06:06 +00:00
clear: both;
2019-01-02 13:01:56 +00:00
overflow: hidden;
opacity: 0.5;
2019-03-30 08:06:06 +00:00
user-select: none;
pointer-events: none;
2019-01-02 13:01:56 +00:00
2019-03-30 08:06:06 +00:00
&::after {
2019-01-02 13:01:56 +00:00
opacity: 0.4;
pointer-events: auto;
}
}
2018-02-09 09:09:50 +00:00
// tip
// ------------------------------
&-tip {
color: @spin-dot-default;
}
// dots
// ------------------------------
&-dot {
position: relative;
display: inline-block;
2018-06-17 02:49:56 +00:00
font-size: @spin-dot-size;
2018-02-09 09:09:50 +00:00
.square(@spin-dot-size);
2018-06-17 02:49:56 +00:00
2018-02-09 09:09:50 +00:00
i {
2019-03-30 08:06:06 +00:00
position: absolute;
display: block;
2018-02-09 09:09:50 +00:00
width: 9px;
height: 9px;
background-color: @primary-color;
2019-03-30 08:06:06 +00:00
border-radius: 100%;
2018-02-09 09:09:50 +00:00
transform: scale(0.75);
2019-03-30 08:06:06 +00:00
transform-origin: 50% 50%;
2018-02-09 09:09:50 +00:00
opacity: 0.3;
animation: antSpinMove 1s infinite linear alternate;
&:nth-child(1) {
top: 0;
2019-03-30 08:06:06 +00:00
left: 0;
2018-02-09 09:09:50 +00:00
}
&:nth-child(2) {
top: 0;
2019-03-30 08:06:06 +00:00
right: 0;
2018-02-09 09:09:50 +00:00
animation-delay: 0.4s;
}
&:nth-child(3) {
right: 0;
bottom: 0;
animation-delay: 0.8s;
}
&:nth-child(4) {
bottom: 0;
2019-03-30 08:06:06 +00:00
left: 0;
2018-02-09 09:09:50 +00:00
animation-delay: 1.2s;
}
}
2018-06-17 02:49:56 +00:00
&-spin {
transform: rotate(45deg);
animation: antRotate 1.2s infinite linear;
}
2018-02-09 09:09:50 +00:00
}
// Sizes
// ------------------------------
2018-06-17 02:49:56 +00:00
2018-02-09 09:09:50 +00:00
// small
&-sm &-dot {
2018-06-17 02:49:56 +00:00
font-size: @spin-dot-size-sm;
2018-02-09 09:09:50 +00:00
.square(@spin-dot-size-sm);
i {
width: 6px;
height: 6px;
}
}
// large
&-lg &-dot {
2018-06-17 02:49:56 +00:00
font-size: @spin-dot-size-lg;
2018-02-09 09:09:50 +00:00
.square(@spin-dot-size-lg);
i {
width: 14px;
height: 14px;
}
}
&&-show-text &-text {
display: block;
}
}
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
/* IE10+ */
.@{spin-prefix-cls}-blur {
background: @component-background;
opacity: 0.5;
}
}
@keyframes antSpinMove {
to {
opacity: 1;
}
}
@keyframes antRotate {
to {
transform: rotate(405deg);
}
update to antd3.8.3 (#159) * refactor: align * feat: update align to 2.4.3 * feat: update trigger 2.5.4 * feat: update tooltip 3.7.2 * fix: align * feat: update vc-calendar to 9.6.2 * feat: update vc-checkbox to 2.1.5 * feat: update vc-dialog to 7.1.8 * feat: update vc-from to 2.2.1 * feat: update vc-notification to 3.1.1 * test: update snapshots * feat: update vc-tree to 1.12.6 * feat: update vc-table to 6.2.8 * feat: update vc-upload to 2.5.1 * feat: update vc-input-number to 4.0.12 * feat: update vc-tabs to 9.2.6 * refactor: vc-menu * refactor: update vc-menu to 7.0.5 * style: remove unused * feat: update pagination to 1.16.5 * feat: add vc-progress 2.2.5 tag * feat: add vc-rate 2.4.0 tag * feat: update vc-slider to 8.6.1 * fix: tooltip error * style: delete conosle * feat: update vc-steps to 3.1.1 * add vc-switch tag 1.6.0 * feat: update upload to 2.5.1 * fix: update vc-menu * fix: update store * fix: add ref dir * fix: trigger mock shouldComponentUpdate * fix: update vc-select * revert: trigger lazyrenderbox * fix: update vc-select * fix: update vc-select * fix: update vc-select * fix: update vc-menu * fix: update vc-slick ref * update style to 3.8.2 * test: update snapshots * update vc-select * update util & affix * feat: add drawer * fix: support title add slot mode * test: update affix test * update alert * update anchor * update snapshots * fix: doc and vc-drawer * update select & auto-complete * update back-top & grid * feractor: avatar * test: add drawer test * update badge * update button * update card * update divider * feat: update vc-tabs to 9.3.6 and tabs * add afterEnter callback * update form * fix: update drawer * test: update snapshots * update modal & notification * test: update snapshots * update message * update locale-provider * update dropdown * update layout popconfirm popover * update time-picker * update menu * update date-picker * docs: update input docs * update input * update snapshots * update table * update test snapshots * feat: update progress * update checkbox * feat: update spin * update radio * docs: slider steps timeline * update list * update transfer * update collapse * update cascader * update upload
2018-09-05 13:28:54 +00:00
}