591 lines
15 KiB
Text
591 lines
15 KiB
Text
|
/*!
|
||
|
|
* # Fomantic-UI - Toast
|
||
|
|
* http://github.com/fomantic/Fomantic-UI/
|
||
|
|
*
|
||
|
|
*
|
||
|
|
* Released under the MIT license
|
||
|
|
* http://opensource.org/licenses/MIT
|
||
|
|
*
|
||
|
|
*/
|
||
|
|
|
||
|
|
|
||
|
|
/*******************************
|
||
|
|
Theme
|
||
|
|
*******************************/
|
||
|
|
|
||
|
|
@type : 'module';
|
||
|
|
@element : 'toast';
|
||
|
|
|
||
|
|
@import (multiple) '../../theme.config';
|
||
|
|
|
||
|
|
/*******************************
|
||
|
|
Toast container
|
||
|
|
*******************************/
|
||
|
|
|
||
|
|
.ui.toast-container {
|
||
|
|
position: fixed;
|
||
|
|
z-index: 9999;
|
||
|
|
&.top when (@variationToastTop) {
|
||
|
|
&.right when (@variationToastRight) {
|
||
|
|
top: @toastContainerDistance;
|
||
|
|
right: @toastContainerDistance;
|
||
|
|
margin-left: @toastContainerDistance;
|
||
|
|
}
|
||
|
|
&.left when (@variationToastLeft) {
|
||
|
|
top: @toastContainerDistance;
|
||
|
|
left: @toastContainerDistance;
|
||
|
|
margin-right: @toastContainerDistance;
|
||
|
|
}
|
||
|
|
&.center when (@variationToastCenter) {
|
||
|
|
left: 50%;
|
||
|
|
transform: translate(-50%, 0);
|
||
|
|
top: @toastContainerDistance;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
&.bottom when (@variationToastBottom) {
|
||
|
|
&.right when (@variationToastRight) {
|
||
|
|
bottom: @toastContainerDistance;
|
||
|
|
right: @toastContainerDistance;
|
||
|
|
margin-left: @toastContainerDistance;
|
||
|
|
}
|
||
|
|
&.left when (@variationToastLeft) {
|
||
|
|
bottom: @toastContainerDistance;
|
||
|
|
left: @toastContainerDistance;
|
||
|
|
margin-right: @toastContainerDistance;
|
||
|
|
}
|
||
|
|
&.center when (@variationToastCenter) {
|
||
|
|
left: 50%;
|
||
|
|
transform: translate(-50%, 0);
|
||
|
|
bottom: @toastContainerDistance;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
& .visible.toast-box,
|
||
|
|
.animating.toast-box,
|
||
|
|
.toast-box {
|
||
|
|
display: table !important;
|
||
|
|
}
|
||
|
|
& .toast-box {
|
||
|
|
margin-bottom: @toastBoxMarginBottom;
|
||
|
|
border-radius: @defaultBorderRadius;
|
||
|
|
cursor: default;
|
||
|
|
&:hover {
|
||
|
|
opacity: @toastOpacityOnHover;
|
||
|
|
}
|
||
|
|
&:not(.unclickable):hover {
|
||
|
|
cursor: @toastCursorOnHover;
|
||
|
|
}
|
||
|
|
& when (@variationToastFloating) {
|
||
|
|
&.floating,
|
||
|
|
&.hoverfloating:hover {
|
||
|
|
box-shadow: @floatingShadow;
|
||
|
|
border: @toastBoxBorder;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
&.compact,
|
||
|
|
> .compact {
|
||
|
|
width: @toastWidth;
|
||
|
|
}
|
||
|
|
& > .ui.toast,
|
||
|
|
> .ui.message {
|
||
|
|
margin: @toastMargin;
|
||
|
|
position: relative;
|
||
|
|
}
|
||
|
|
& > .attached.progress when (@variationToastProgress) {
|
||
|
|
z-index:1;
|
||
|
|
&.bottom {
|
||
|
|
margin: @toastMarginProgress -@toastLeftRightMargin @toastMarginBottom;
|
||
|
|
}
|
||
|
|
&.top {
|
||
|
|
margin: @toastMarginBottom -@toastLeftRightMargin @toastMarginProgress;
|
||
|
|
}
|
||
|
|
& .bar {
|
||
|
|
min-width: 0;
|
||
|
|
}
|
||
|
|
&.info .bar.bar.bar {
|
||
|
|
background: @toastInfoProgressColor;
|
||
|
|
}
|
||
|
|
&.warning .bar.bar.bar {
|
||
|
|
background: @toastWarningProgressColor;
|
||
|
|
}
|
||
|
|
&.success .bar.bar.bar {
|
||
|
|
background: @toastSuccessProgressColor;
|
||
|
|
}
|
||
|
|
.error .bar.bar.bar {
|
||
|
|
background: @toastErrorProgressColor;
|
||
|
|
}
|
||
|
|
&.neutral .bar.bar.bar {
|
||
|
|
background: @toastNeutralProgressColor;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
& > .ui.message when (@variationToastMessage) {
|
||
|
|
& > .close.icon when (@variationToastClose){
|
||
|
|
top: @toastCloseTopDistance;
|
||
|
|
right: @toastCloseRightDistance;
|
||
|
|
}
|
||
|
|
& > .actions:last-child when (@variationToastActions) {
|
||
|
|
margin-bottom: @toastActionMargin;
|
||
|
|
}
|
||
|
|
&.icon when (@variationToastIcon) {
|
||
|
|
align-items: inherit;
|
||
|
|
& > :not(.icon):not(.actions) {
|
||
|
|
padding-left: @toastIconMessageContentPadding;
|
||
|
|
}
|
||
|
|
& > .icon:not(.close) when (@variationToastIcon) {
|
||
|
|
display: inline-block;
|
||
|
|
position: absolute;
|
||
|
|
width: @toastIconMessageWidth;
|
||
|
|
top: 50%;
|
||
|
|
transform: translateY(-50%);
|
||
|
|
}
|
||
|
|
&:not(.vertical) {
|
||
|
|
&.actions > .icon:not(.close) when (@variationToastActions) and (@variationToastIcon) {
|
||
|
|
top: e(%("calc(50%% - %d)", @toastIconCenteredAdjustment));
|
||
|
|
transform: none;
|
||
|
|
}
|
||
|
|
&.icon.icon.icon when (@variationToastIcon){
|
||
|
|
display: block;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
& .ui.toast {
|
||
|
|
& > .close.icon when (@variationToastClose){
|
||
|
|
cursor: pointer;
|
||
|
|
margin: 0;
|
||
|
|
opacity: @toastCloseOpacity;
|
||
|
|
transition: @toastCloseTransition;
|
||
|
|
&:hover {
|
||
|
|
opacity: 1;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
&.vertical > .close.icon when (@variationToastVertical) and (@variationToastClose) {
|
||
|
|
margin-top: -@toastCloseTopDistance;
|
||
|
|
margin-right: -@toastCloseTopDistance;
|
||
|
|
}
|
||
|
|
&:not(.vertical) > .close.icon when (@variationToastClose) {
|
||
|
|
position: absolute;
|
||
|
|
top: @toastCloseTopDistance;
|
||
|
|
&:not(.left) {
|
||
|
|
right: @toastCloseRightDistance;
|
||
|
|
}
|
||
|
|
&.left {
|
||
|
|
margin-left: -@toastCloseRightDistance;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
& .ui.card when (@variationToastCard) {
|
||
|
|
margin:0;
|
||
|
|
&.attached:not(.vertical) when (@variationToastAttached) {
|
||
|
|
&.bottom {
|
||
|
|
border-top-left-radius: 0;
|
||
|
|
border-top-right-radius: 0;
|
||
|
|
&.horizontal {
|
||
|
|
& > .image > img {
|
||
|
|
border-top-left-radius: 0;
|
||
|
|
}
|
||
|
|
& > .image:last-child > img {
|
||
|
|
border-top-right-radius: 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
&.top {
|
||
|
|
border-bottom-left-radius: 0;
|
||
|
|
border-bottom-right-radius: 0;
|
||
|
|
&.horizontal {
|
||
|
|
& > .image > img {
|
||
|
|
border-bottom-left-radius: 0;
|
||
|
|
}
|
||
|
|
& > .image:last-child > img {
|
||
|
|
border-bottom-right-radius: 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
&.horizontal.actions when (@variationToastActions) {
|
||
|
|
& > .image > img {
|
||
|
|
border-bottom-left-radius: 0;
|
||
|
|
}
|
||
|
|
& > .image:last-child > img {
|
||
|
|
border-bottom-right-radius: 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
& .progressing {
|
||
|
|
animation-iteration-count: 1;
|
||
|
|
animation-timing-function: linear;
|
||
|
|
& when (@variationToastProgress) {
|
||
|
|
&.up {
|
||
|
|
animation-name: progressUp;
|
||
|
|
}
|
||
|
|
&.down {
|
||
|
|
animation-name: progressDown;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
&.wait {
|
||
|
|
animation-name: progressWait;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
&:hover .pausable.progressing {
|
||
|
|
animation-play-state: paused;
|
||
|
|
}
|
||
|
|
& .ui.toast:not(.vertical) {
|
||
|
|
display:block;
|
||
|
|
}
|
||
|
|
& :not(.comment) {
|
||
|
|
&:not(.card) .actions when (@variationToastActions) {
|
||
|
|
margin: @toastActionMarginTop @toastActionMargin @toastActionMargin @toastActionMargin;
|
||
|
|
}
|
||
|
|
& .actions when (@variationToastActions) {
|
||
|
|
padding: @toastActionPadding @toastActionPadding @toastActionPaddingBottom @toastActionPadding;
|
||
|
|
text-align: right;
|
||
|
|
&.attached:not(.vertical) when (@variationToastAttached) {
|
||
|
|
margin-right: @toastLeftRightMargin;
|
||
|
|
}
|
||
|
|
&:not(.basic):not(.attached) {
|
||
|
|
background: @toastActionBackground;
|
||
|
|
border-top: @toastActionBorder;
|
||
|
|
}
|
||
|
|
&.left {
|
||
|
|
text-align: left;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
& when (@variationToastVertical) {
|
||
|
|
& .vertical.actions > .button,
|
||
|
|
& > .vertical > .vertical.vertical,
|
||
|
|
& > .vertical.vertical.vertical {
|
||
|
|
display: flex;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
& :not(.comment) .vertical.actions when (@variationToastVertical) and (@variationToastActions) {
|
||
|
|
flex-direction: column;
|
||
|
|
& > .button {
|
||
|
|
justify-content: center;
|
||
|
|
}
|
||
|
|
&.attached > .button when (@variationToastAttached) {
|
||
|
|
align-items: center;
|
||
|
|
}
|
||
|
|
&:not(.attached) {
|
||
|
|
border-top: 0;
|
||
|
|
margin-top: -@toastActionPaddingBottom;
|
||
|
|
margin-bottom: -@toastActionPaddingBottom;
|
||
|
|
margin-left: @toastActionMarginLeft;
|
||
|
|
justify-content: space-around;
|
||
|
|
&:not(.basic) {
|
||
|
|
border-left: @toastActionBorder;
|
||
|
|
}
|
||
|
|
& > .button:not(:last-child) {
|
||
|
|
margin-bottom: @toastActionMarginBottom;
|
||
|
|
}
|
||
|
|
&.top {
|
||
|
|
justify-content: flex-start;
|
||
|
|
}
|
||
|
|
&.bottom {
|
||
|
|
justify-content: flex-end;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.ui.vertical.attached when (@variationToastVertical) and (@variationToastAttached) {
|
||
|
|
&:not(.left) {
|
||
|
|
&.card when (@variationToastCard) {
|
||
|
|
& > .image > img {
|
||
|
|
border-top-right-radius: 0;
|
||
|
|
}
|
||
|
|
&.horizontal > .image:last-child > img {
|
||
|
|
border-top-right-radius: 0;
|
||
|
|
border-bottom-right-radius: 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
&.card,
|
||
|
|
&.toast {
|
||
|
|
border-top-right-radius: 0;
|
||
|
|
border-bottom-right-radius: 0;
|
||
|
|
}
|
||
|
|
&.actions when (@variationToastActions) {
|
||
|
|
border-top-right-radius: @toastBorderRadius;
|
||
|
|
border-bottom-right-radius: @toastBorderRadius;
|
||
|
|
& .button:first-child,
|
||
|
|
.button:last-child {
|
||
|
|
border-top-left-radius: 0;
|
||
|
|
border-bottom-left-radius: 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
&.message when (@variationToastMessage) {
|
||
|
|
border-top-right-radius: 0;
|
||
|
|
border-bottom-left-radius: @toastBorderRadius;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
&.left {
|
||
|
|
&.card when (@variationToastCard) {
|
||
|
|
& > .image > img {
|
||
|
|
border-top-left-radius: 0;
|
||
|
|
}
|
||
|
|
&.horizontal > .image > img {
|
||
|
|
border-top-left-radius: 0;
|
||
|
|
border-bottom-left-radius: 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
&.card,
|
||
|
|
&.toast {
|
||
|
|
border-top-left-radius: 0;
|
||
|
|
border-bottom-left-radius: 0;
|
||
|
|
}
|
||
|
|
&.actions when (@variationToastActions) {
|
||
|
|
border-top-left-radius: @toastBorderRadius;
|
||
|
|
border-bottom-left-radius: @toastBorderRadius;
|
||
|
|
& .button:first-child,
|
||
|
|
.button:last-child {
|
||
|
|
border-top-right-radius: 0;
|
||
|
|
border-bottom-right-radius: 0;
|
||
|
|
}
|
||
|
|
& .button:not(:first-child):not(:last-child) {
|
||
|
|
margin-left: -@toastLeftRightMargin;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
&.message.message.message when (@variationToastMessage) {
|
||
|
|
border-top-right-radius: @toastBorderRadius;
|
||
|
|
border-bottom-right-radius: @toastBorderRadius;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.ui.attached:not(.vertical) when (@variationToastAttached) {
|
||
|
|
&:not(.top) {
|
||
|
|
&.actions when (@variationToastActions) {
|
||
|
|
border-bottom-left-radius: @toastBorderRadius;
|
||
|
|
border-bottom-right-radius: @toastBorderRadius;
|
||
|
|
& .button:first-child {
|
||
|
|
border-bottom-left-radius: @toastBorderRadius;
|
||
|
|
}
|
||
|
|
& .button:last-child {
|
||
|
|
border-bottom-right-radius: @toastBorderRadius;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
&.top {
|
||
|
|
&.actions when (@variationToastActions) {
|
||
|
|
border-top-left-radius: @toastBorderRadius;
|
||
|
|
border-top-right-radius: @toastBorderRadius;
|
||
|
|
& .button:first-child {
|
||
|
|
border-top-left-radius: @toastBorderRadius;
|
||
|
|
}
|
||
|
|
& .button:last-child {
|
||
|
|
border-top-right-radius: @toastBorderRadius;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/*******************************
|
||
|
|
Toast
|
||
|
|
*******************************/
|
||
|
|
|
||
|
|
.ui.toast {
|
||
|
|
display: none;
|
||
|
|
border-radius: @defaultBorderRadius;
|
||
|
|
padding: @toastPadding;
|
||
|
|
margin: @toastMargin;
|
||
|
|
color: @toastInvertedTextColor;
|
||
|
|
background-color: @toastNeutralColor;
|
||
|
|
& > .content > .header {
|
||
|
|
font-weight: bold;
|
||
|
|
color: inherit;
|
||
|
|
margin:0;
|
||
|
|
}
|
||
|
|
&.info when (@variationToastInfo) {
|
||
|
|
background-color: @toastInfoColor;
|
||
|
|
color: @toastTextColor;
|
||
|
|
}
|
||
|
|
&.warning when (@variationToastWarning) {
|
||
|
|
background-color: @toastWarningColor;
|
||
|
|
color: @toastTextColor;
|
||
|
|
}
|
||
|
|
&.success when (@variationToastSuccess) {
|
||
|
|
background-color: @toastSuccessColor;
|
||
|
|
color: @toastTextColor;
|
||
|
|
}
|
||
|
|
&.error when (@variationToastError) {
|
||
|
|
background-color: @toastErrorColor;
|
||
|
|
color: @toastTextColor;
|
||
|
|
}
|
||
|
|
&.neutral {
|
||
|
|
background-color: @toastNeutralColor;
|
||
|
|
color: @toastNeutralTextColor;
|
||
|
|
}
|
||
|
|
& > .icon:not(.close) when (@variationToastIcon) {
|
||
|
|
font-size: @toastIconFontSize;
|
||
|
|
}
|
||
|
|
&:not(.vertical) {
|
||
|
|
& > .icon:not(.close) when (@variationToastIcon) {
|
||
|
|
position: absolute;
|
||
|
|
& + .content {
|
||
|
|
padding-left: @toastIconContentPadding;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
& > .close.icon + .content when (@variationToastClose){
|
||
|
|
padding-left: @toastCloseDistance;
|
||
|
|
}
|
||
|
|
& > .ui.image when (@variationToastImage) {
|
||
|
|
position: absolute;
|
||
|
|
&.avatar + .content {
|
||
|
|
padding-left: @toastAvatarImageContentPadding;
|
||
|
|
min-height: @toastAvatarImageHeight;
|
||
|
|
}
|
||
|
|
&.mini + .content {
|
||
|
|
padding-left: @toastMiniImageContentPadding;
|
||
|
|
min-height: @toastMiniImageHeight;
|
||
|
|
}
|
||
|
|
&.tiny + .content {
|
||
|
|
padding-left: @toastTinyImageContentPadding;
|
||
|
|
min-height: @toastTinyImageHeight;
|
||
|
|
}
|
||
|
|
&.small + .content {
|
||
|
|
padding-left: @toastSmallImageContentPadding;
|
||
|
|
min-height: @toastSmallImageHeight;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
& when (@variationToastImage) or (@variationToastIcon) {
|
||
|
|
& > .centered.image,
|
||
|
|
> .centered.icon {
|
||
|
|
transform: translateY(-50%);
|
||
|
|
top: 50%;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
&.actions > .centered.image when (@variationToastActions) and (@variationToastImage) {
|
||
|
|
top: e(%("calc(50%% - %d)", @toastImageCenteredAdjustment));
|
||
|
|
}
|
||
|
|
&.actions > .centered.icon when (@variationToastActions) and (@variationToastIcon) {
|
||
|
|
top: e(%("calc(50%% - %d)", @toastIconCenteredAdjustment));
|
||
|
|
}
|
||
|
|
}
|
||
|
|
&.vertical when (@variationToastVertical) {
|
||
|
|
& > .close.icon + .content when (@variationToastClose){
|
||
|
|
padding-left: @toastCloseDistanceVertical;
|
||
|
|
}
|
||
|
|
& when (@variationToastImage) or (@variationToastIcon) {
|
||
|
|
& > .ui.image + .content,
|
||
|
|
> .icon:not(.close) + .content {
|
||
|
|
padding-left: @toastImageContentPadding;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
& > .ui.image when (@variationToastImage){
|
||
|
|
align-self: flex-start;
|
||
|
|
flex-shrink:0; /* IE11 fix */
|
||
|
|
}
|
||
|
|
& when (@variationToastImage) or (@variationToastIcon) {
|
||
|
|
& > .centered.image,
|
||
|
|
> .centered.icon {
|
||
|
|
align-self: center;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
&.attached when (@variationToastAttached) {
|
||
|
|
&.bottom {
|
||
|
|
border-top-left-radius: 0;
|
||
|
|
border-top-right-radius: 0;
|
||
|
|
}
|
||
|
|
&.top {
|
||
|
|
border-bottom-left-radius: 0;
|
||
|
|
border-bottom-right-radius: 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
.ui.hoverfloating.message:hover when (@variationToastMessage) and (@variationToastFloating) {
|
||
|
|
box-shadow: 0 0 0 1px inset, @floatingShadow;
|
||
|
|
}
|
||
|
|
|
||
|
|
.ui.center.toast-container .toast-box,
|
||
|
|
.ui.right.toast-container .toast-box {
|
||
|
|
margin-left: auto;
|
||
|
|
}
|
||
|
|
|
||
|
|
.ui.center.toast-container .toast-box {
|
||
|
|
margin-right: auto;
|
||
|
|
}
|
||
|
|
|
||
|
|
/*--------------
|
||
|
|
Colors
|
||
|
|
-------------- */
|
||
|
|
|
||
|
|
each(@colors, {
|
||
|
|
@color: replace(@key, '@', '');
|
||
|
|
@c: @colors[@@color][color];
|
||
|
|
@l: @colors[@@color][light];
|
||
|
|
|
||
|
|
.ui.@{color}.toast {
|
||
|
|
background-color: @c;
|
||
|
|
color: @toastTextColor;
|
||
|
|
}
|
||
|
|
& when (@variationToastInverted) {
|
||
|
|
.ui.inverted.@{color}.toast,
|
||
|
|
.ui.toast-container .toast-box > .inverted.@{color}.attached.progress .bar {
|
||
|
|
background-color: @l;
|
||
|
|
color: @toastInvertedTextColor;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
})
|
||
|
|
|
||
|
|
& when (@variationToastInverted) {
|
||
|
|
.ui.inverted.toast {
|
||
|
|
color: @toastTextColor;
|
||
|
|
background-color: @toastInvertedColor;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@media only screen and (max-width: @mobileToastBreakpoint) {
|
||
|
|
.ui.toast-container .toast-box {
|
||
|
|
&.toast-box,
|
||
|
|
& > .compact,
|
||
|
|
& > .vertical > *,
|
||
|
|
& > * {
|
||
|
|
width: auto;
|
||
|
|
max-width: 100%;
|
||
|
|
}
|
||
|
|
& > *:not(.vertical) {
|
||
|
|
min-width: @mobileWidth;
|
||
|
|
}
|
||
|
|
& when (@variationToastCard) {
|
||
|
|
& > .ui.card.horizontal,
|
||
|
|
> .vertical > .ui.horizontal.card {
|
||
|
|
min-width: initial;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/*---------------
|
||
|
|
Progress Bar
|
||
|
|
----------------*/
|
||
|
|
& when (@variationToastProgress) {
|
||
|
|
@keyframes progressDown {
|
||
|
|
0% {
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
100% {
|
||
|
|
width: 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
@keyframes progressUp {
|
||
|
|
0% {
|
||
|
|
width: 0;
|
||
|
|
}
|
||
|
|
100% {
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
@keyframes progressWait {
|
||
|
|
0% {
|
||
|
|
opacity: 1;
|
||
|
|
}
|
||
|
|
100% {
|
||
|
|
opacity: 0;
|
||
|
|
}
|
||
|
|
}
|