801 lines
13 KiB
SCSS
801 lines
13 KiB
SCSS
@mixin keyframes($name) {
|
|
@-webkit-keyframes #{$name} {
|
|
@content;
|
|
}
|
|
@-moz-keyframes #{$name} {
|
|
@content;
|
|
}
|
|
@keyframes #{$name} {
|
|
@content;
|
|
}
|
|
}
|
|
|
|
// *******************************************************************************
|
|
// * Loader
|
|
|
|
.la-ball-fall,
|
|
.la-ball-fall > div {
|
|
position: relative;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.la-ball-fall {
|
|
display: block;
|
|
color: #fff;
|
|
font-size: 0;
|
|
}
|
|
|
|
.la-ball-fall.la-dark {
|
|
color: #333;
|
|
}
|
|
|
|
.la-ball-fall > div {
|
|
display: inline-block;
|
|
float: none;
|
|
border: 0 solid currentColor;
|
|
background-color: currentColor;
|
|
}
|
|
|
|
.la-ball-fall {
|
|
width: 3.375rem;
|
|
height: 1.125rem;
|
|
}
|
|
|
|
.la-ball-fall > div {
|
|
margin: .25rem;
|
|
width: .625rem;
|
|
height: .625rem;
|
|
border-radius: 100%;
|
|
opacity: 0;
|
|
animation: ball-fall 1s ease-in-out infinite;
|
|
}
|
|
|
|
.la-ball-fall > div:nth-child(1) {
|
|
animation-delay: -200ms;
|
|
}
|
|
|
|
.la-ball-fall > div:nth-child(2) {
|
|
animation-delay: -100ms;
|
|
}
|
|
|
|
.la-ball-fall > div:nth-child(3) {
|
|
animation-delay: 0ms;
|
|
}
|
|
|
|
.la-ball-fall.la-sm {
|
|
width: 1.625rem;
|
|
height: .5rem;
|
|
}
|
|
|
|
.la-ball-fall.la-sm > div {
|
|
margin: .125rem;
|
|
width: .25rem;
|
|
height: .25rem;
|
|
}
|
|
|
|
.la-ball-fall.la-2x {
|
|
width: 6.75rem;
|
|
height: 2.25rem;
|
|
}
|
|
|
|
.la-ball-fall.la-2x > div {
|
|
margin: .5rem;
|
|
width: 1.25rem;
|
|
height: 1.25rem;
|
|
}
|
|
|
|
.la-ball-fall.la-3x {
|
|
width: 10.125rem;
|
|
height: 3.375rem;
|
|
}
|
|
|
|
.la-ball-fall.la-3x > div {
|
|
margin: .75rem;
|
|
width: 1.875rem;
|
|
height: 1.875rem;
|
|
}
|
|
|
|
// *******************************************************************************
|
|
// * Keyframes
|
|
|
|
@include keyframes(ball-fall) {
|
|
0% {
|
|
opacity: 0;
|
|
transform: translateY(-145%);
|
|
}
|
|
10% {
|
|
opacity: .5;
|
|
}
|
|
20% {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
80% {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
90% {
|
|
opacity: .5;
|
|
}
|
|
100% {
|
|
opacity: 0;
|
|
transform: translateY(145%);
|
|
}
|
|
}
|
|
|
|
@include keyframes(showSweetAlert) {
|
|
0% {
|
|
transform: scale(.7);
|
|
}
|
|
45% {
|
|
transform: scale(1.05);
|
|
}
|
|
80% {
|
|
transform: scale(.95);
|
|
}
|
|
100% {
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
|
|
@include keyframes(hideSweetAlert) {
|
|
0% {
|
|
transform: scale(1);
|
|
}
|
|
100% {
|
|
transform: scale(.5);
|
|
}
|
|
};
|
|
|
|
@include keyframes(slideFromTop) {
|
|
0% {
|
|
top: 0;
|
|
}
|
|
100% {
|
|
top: 50%;
|
|
}
|
|
};
|
|
|
|
@include keyframes(slideToTop) {
|
|
0% {
|
|
top: 50%;
|
|
}
|
|
100% {
|
|
top: 0;
|
|
}
|
|
};
|
|
|
|
@include keyframes(slideFromBottom) {
|
|
0% {
|
|
top: 70%;
|
|
}
|
|
100% {
|
|
top: 50%;
|
|
}
|
|
}
|
|
|
|
@include keyframes(slideToBottom) {
|
|
0% {
|
|
top: 50%;
|
|
}
|
|
100% {
|
|
top: 70%;
|
|
}
|
|
}
|
|
|
|
@include keyframes(animateSuccessTip) {
|
|
0% {
|
|
top: 1.1875rem;
|
|
left: .0625rem;
|
|
width: 0;
|
|
}
|
|
54% {
|
|
top: 1.1875rem;
|
|
left: .0625rem;
|
|
width: 0;
|
|
}
|
|
70% {
|
|
top: 2.3125rem;
|
|
left: -.5rem;
|
|
width: 3.125rem;
|
|
}
|
|
84% {
|
|
top: 3rem;
|
|
left: 1.3125rem;
|
|
width: 1.0625rem;
|
|
}
|
|
100% {
|
|
top: 2.8125rem;
|
|
left: .875rem;
|
|
width: 1.5625rem;
|
|
}
|
|
}
|
|
|
|
@include keyframes(animateSuccessLong) {
|
|
0% {
|
|
top: 3.375rem;
|
|
right: 2.875rem;
|
|
width: 0;
|
|
}
|
|
65% {
|
|
top: 3.375rem;
|
|
right: 2.875rem;
|
|
width: 0;
|
|
}
|
|
84% {
|
|
top: 2.1875rem;
|
|
right: 0;
|
|
width: 3.4375rem;
|
|
}
|
|
100% {
|
|
top: 2.375rem;
|
|
right: .5rem;
|
|
width: 2.9375rem;
|
|
}
|
|
}
|
|
|
|
@include keyframes(rotatePlaceholder) {
|
|
0% {
|
|
transform: rotate(-45deg);
|
|
}
|
|
5% {
|
|
transform: rotate(-45deg);
|
|
}
|
|
12% {
|
|
transform: rotate(-405deg);
|
|
}
|
|
100% {
|
|
transform: rotate(-405deg);
|
|
}
|
|
}
|
|
|
|
@include keyframes(animateErrorIcon) {
|
|
0% {
|
|
opacity: 0;
|
|
transform: rotateX(100deg);
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
transform: rotateX(0deg);
|
|
}
|
|
}
|
|
|
|
@include keyframes(animateXMark) {
|
|
0% {
|
|
margin-top: 1.625rem;
|
|
opacity: 0;
|
|
transform: scale(.4);
|
|
}
|
|
50% {
|
|
margin-top: 1.625rem;
|
|
opacity: 0;
|
|
transform: scale(.4);
|
|
}
|
|
80% {
|
|
margin-top: -.375rem;
|
|
transform: scale(1.15);
|
|
}
|
|
100% {
|
|
margin-top: 0;
|
|
opacity: 1;
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
|
|
@include keyframes(pulseWarning) {
|
|
0% {
|
|
border-color: #f8d486;
|
|
}
|
|
100% {
|
|
border-color: #f8bb86;
|
|
}
|
|
}
|
|
|
|
@include keyframes(pulseWarningIns) {
|
|
0% {
|
|
background-color: #f8d486;
|
|
}
|
|
100% {
|
|
background-color: #f8bb86;
|
|
}
|
|
}
|
|
|
|
@include keyframes(rotate-loading) {
|
|
0% {
|
|
transform: rotate(0deg);
|
|
}
|
|
100% {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
// *******************************************************************************
|
|
// * Animations
|
|
|
|
.showSweetAlert {
|
|
animation: showSweetAlert .3s;
|
|
|
|
&[data-animation=none] {
|
|
animation: none;
|
|
}
|
|
|
|
&[data-animation=slide-from-top] {
|
|
animation: slideFromTop .3s;
|
|
}
|
|
|
|
&[data-animation=slide-from-bottom] {
|
|
animation: slideFromBottom .3s;
|
|
}
|
|
}
|
|
|
|
.hideSweetAlert {
|
|
animation: hideSweetAlert .3s;
|
|
|
|
&[data-animation=none] {
|
|
animation: none;
|
|
}
|
|
|
|
&[data-animation=slide-from-top] {
|
|
animation: slideToTop .3s;
|
|
}
|
|
|
|
&[data-animation=slide-from-bottom] {
|
|
animation: slideToBottom .3s;
|
|
}
|
|
}
|
|
|
|
.animateSuccessTip {
|
|
animation: animateSuccessTip .75s;
|
|
}
|
|
|
|
.animateSuccessLong {
|
|
animation: animateSuccessLong .75s;
|
|
}
|
|
|
|
.sa-icon.sa-success.animate::after {
|
|
animation: rotatePlaceholder 4.25s ease-in;
|
|
}
|
|
|
|
.animateErrorIcon {
|
|
animation: animateErrorIcon .5s;
|
|
}
|
|
|
|
.animateXMark {
|
|
animation: animateXMark .5s;
|
|
}
|
|
|
|
.pulseWarning {
|
|
animation: pulseWarning .75s infinite alternate;
|
|
}
|
|
|
|
.pulseWarningIns {
|
|
animation: pulseWarningIns .75s infinite alternate;
|
|
}
|
|
|
|
// *******************************************************************************
|
|
// * Styles
|
|
|
|
body.stop-scrolling {
|
|
overflow: hidden;
|
|
height: 100%;
|
|
}
|
|
|
|
.sweet-overlay {
|
|
position: fixed;
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
display: none;
|
|
}
|
|
|
|
.sweet-alert {
|
|
$width: 29.875rem;
|
|
$padding: 1.0625rem;
|
|
|
|
background-color: #fff;
|
|
width: $width;
|
|
padding: $padding;
|
|
text-align: center;
|
|
margin-left: -$width / 2;
|
|
position: fixed;
|
|
left: 50%;
|
|
top: 50%;
|
|
margin-top: -12.5rem;
|
|
overflow: hidden;
|
|
display: none;
|
|
outline: 0 !important;
|
|
}
|
|
|
|
.sweet-alert h2,
|
|
.sweet-alert .sa-button-container {
|
|
margin-top: 1.875rem;
|
|
}
|
|
|
|
.sweet-alert .form-group {
|
|
display: none;
|
|
|
|
.sa-input-error {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.sweet-alert.show-input .form-group {
|
|
display: block;
|
|
}
|
|
|
|
.sweet-alert .sa-confirm-button-container {
|
|
position: relative;
|
|
display: inline-block;
|
|
}
|
|
|
|
.sweet-alert .la-ball-fall {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
visibility: hidden;
|
|
margin-top: -.5625rem;
|
|
margin-left: -1.6875rem;
|
|
opacity: 0;
|
|
}
|
|
|
|
.sweet-alert button {
|
|
&[disabled] {
|
|
opacity: .6;
|
|
cursor: default;
|
|
}
|
|
|
|
&.confirm[disabled] {
|
|
color: transparent;
|
|
}
|
|
|
|
&.confirm[disabled] ~ .la-ball-fall {
|
|
visibility: visible;
|
|
opacity: 1;
|
|
transition-delay: 0s;
|
|
}
|
|
}
|
|
|
|
// *******************************************************************************
|
|
// * Icons
|
|
|
|
.sweet-alert .sa-icon {
|
|
position: relative;
|
|
box-sizing: content-box;
|
|
margin: 1.25rem auto;
|
|
width: 5rem;
|
|
height: 5rem;
|
|
border: 4px solid gray;
|
|
border-radius: 50%;
|
|
|
|
[dir=rtl] & {
|
|
transform: scaleX(-1);
|
|
}
|
|
}
|
|
|
|
// Error icon
|
|
.sweet-alert .sa-icon.sa-error {
|
|
.sa-x-mark {
|
|
position: relative;
|
|
display: block;
|
|
}
|
|
|
|
.sa-line {
|
|
position: absolute;
|
|
top: 2.3125rem;
|
|
display: block;
|
|
width: 2.9375rem;
|
|
height: .3125rem;
|
|
border-radius: .125rem;
|
|
|
|
&.sa-left {
|
|
left: 1.0625rem;
|
|
transform: rotate(45deg);
|
|
}
|
|
|
|
&.sa-right {
|
|
right: 1rem;
|
|
transform: rotate(-45deg);
|
|
}
|
|
}
|
|
}
|
|
|
|
// Warning icon
|
|
.sweet-alert .sa-icon.sa-warning {
|
|
.sa-body {
|
|
// Exclamation mark body
|
|
position: absolute;
|
|
top: .625rem;
|
|
left: 50%;
|
|
margin-left: -.125rem;
|
|
width: .3125rem;
|
|
height: 2.9375rem;
|
|
border-radius: .125rem;
|
|
}
|
|
|
|
.sa-dot {
|
|
// Exclamation mark dot
|
|
position: absolute;
|
|
bottom: .625rem;
|
|
left: 50%;
|
|
margin-left: -.1875rem;
|
|
width: .4375rem;
|
|
height: .4375rem;
|
|
border-radius: 50%;
|
|
}
|
|
}
|
|
|
|
// Info icon
|
|
.sweet-alert .sa-icon.sa-info {
|
|
&::before {
|
|
// i-letter body
|
|
content: "";
|
|
position: absolute;
|
|
bottom: 1.0625rem;
|
|
left: 50%;
|
|
margin-left: -.125rem;
|
|
width: .3125rem;
|
|
height: 1.8125rem;
|
|
border-radius: .125rem;
|
|
}
|
|
|
|
&::after {
|
|
// i-letter dot
|
|
content: "";
|
|
position: absolute;
|
|
top: 1.1875rem;
|
|
left: 50%;
|
|
margin-left: -.1875rem;
|
|
width: .4375rem;
|
|
height: .4375rem;
|
|
border-radius: 50%;
|
|
}
|
|
}
|
|
|
|
// Success icon
|
|
.sweet-alert .sa-icon.sa-success {
|
|
&::before,
|
|
&::after {
|
|
// Emulate moving circular line
|
|
content: '';
|
|
position: absolute;
|
|
width: 3.75rem;
|
|
height: 7.5rem;
|
|
border-radius: 50%;
|
|
background: #fff;
|
|
transform: rotate(45deg);
|
|
}
|
|
|
|
&::before {
|
|
top: -.4375rem;
|
|
left: -2.0625rem;
|
|
border-radius: 7.5rem 0 0 7.5rem;
|
|
transform: rotate(-45deg);
|
|
transform-origin: 3.75rem 3.75rem;
|
|
}
|
|
|
|
&::after {
|
|
top: -.6875rem;
|
|
left: 1.875rem;
|
|
border-radius: 0 7.5rem 7.5rem 0;
|
|
transform: rotate(-45deg);
|
|
transform-origin: 0 3.75rem;
|
|
}
|
|
|
|
.sa-placeholder {
|
|
// Ring
|
|
position: absolute;
|
|
top: -.25rem;
|
|
left: -.25rem;
|
|
z-index: 2;
|
|
box-sizing: content-box;
|
|
width: 5rem;
|
|
height: 5rem;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.sa-fix {
|
|
position: absolute;
|
|
top: .5rem;
|
|
left: 1.75rem;
|
|
z-index: 1;
|
|
width: .3125rem;
|
|
height: 5.625rem;
|
|
background-color: #fff;
|
|
transform: rotate(-45deg);
|
|
}
|
|
|
|
.sa-line {
|
|
position: absolute;
|
|
z-index: 2;
|
|
display: block;
|
|
height: .3125rem;
|
|
border-radius: .125rem;
|
|
|
|
&.sa-tip {
|
|
top: 2.875rem;
|
|
left: .875rem;
|
|
width: 1.5625rem;
|
|
transform: rotate(45deg);
|
|
}
|
|
|
|
&.sa-long {
|
|
top: 2.375rem;
|
|
right: .5rem;
|
|
width: 2.9375rem;
|
|
transform: rotate(-45deg);
|
|
}
|
|
}
|
|
}
|
|
|
|
// Custom icon
|
|
.sweet-alert .sa-icon.sa-custom {
|
|
border: none;
|
|
border-radius: 0;
|
|
background-position: center center;
|
|
background-size: contain;
|
|
background-repeat: no-repeat;
|
|
}
|
|
|
|
.default-style {
|
|
@import "../../css/_appwork/include";
|
|
|
|
.sweet-alert {
|
|
z-index: $zindex-modal-top;
|
|
}
|
|
|
|
.sweet-alert .popover {
|
|
z-index: $zindex-modal-top + 1;
|
|
}
|
|
|
|
.sweet-alert .tooltip {
|
|
z-index: $zindex-modal-top + 2;
|
|
}
|
|
|
|
.sweet-overlay {
|
|
z-index: $zindex-modal-top - 1;
|
|
background-color: rgba($modal-backdrop-bg, $modal-backdrop-opacity);
|
|
}
|
|
|
|
.sweet-alert {
|
|
border-radius: $border-radius;
|
|
box-shadow: $modal-content-box-shadow-xs;
|
|
|
|
@media all and (max-width: (map-get($grid-breakpoints, sm) - 1px)) {
|
|
right: ($grid-gutter-width / 2);
|
|
left: ($grid-gutter-width / 2);
|
|
margin-right: 0;
|
|
margin-left: 0;
|
|
width: auto;
|
|
}
|
|
}
|
|
|
|
.sweet-alert .sa-icon.sa-error {
|
|
border-color: map-get($theme-colors, danger);
|
|
|
|
.sa-line {
|
|
background-color: map-get($theme-colors, danger);
|
|
}
|
|
}
|
|
|
|
.sweet-alert .sa-icon.sa-warning {
|
|
border-color: map-get($theme-colors, warning);
|
|
|
|
.sa-body {
|
|
// Exclamation mark body
|
|
background-color: map-get($theme-colors, warning);
|
|
}
|
|
|
|
.sa-dot {
|
|
// Exclamation mark dot
|
|
background-color: map-get($theme-colors, warning);
|
|
}
|
|
}
|
|
|
|
.sweet-alert .sa-icon.sa-info {
|
|
border-color: map-get($theme-colors, info);
|
|
|
|
&::before {
|
|
// i-letter body
|
|
background-color: map-get($theme-colors, info);
|
|
}
|
|
|
|
&::after {
|
|
// i-letter dot
|
|
background-color: map-get($theme-colors, info);
|
|
}
|
|
}
|
|
|
|
.sweet-alert .sa-icon.sa-success {
|
|
border-color: map-get($theme-colors, success);
|
|
|
|
.sa-placeholder {
|
|
// Ring
|
|
border: 4px solid rgba(map-get($theme-colors, success), .2);
|
|
}
|
|
|
|
.sa-line {
|
|
background-color: map-get($theme-colors, success);
|
|
}
|
|
}
|
|
}
|
|
|
|
.material-style {
|
|
@import "../../css/_appwork/include-material";
|
|
|
|
.sweet-alert {
|
|
z-index: $zindex-modal-top;
|
|
}
|
|
|
|
.sweet-alert .popover {
|
|
z-index: $zindex-modal-top + 1;
|
|
}
|
|
|
|
.sweet-alert .tooltip {
|
|
z-index: $zindex-modal-top + 2;
|
|
}
|
|
|
|
.sweet-overlay {
|
|
z-index: $zindex-modal-top - 1;
|
|
background-color: rgba($modal-backdrop-bg, $modal-backdrop-opacity);
|
|
}
|
|
|
|
.sweet-alert {
|
|
box-shadow: $modal-content-box-shadow-xs;
|
|
|
|
@media all and (max-width: (map-get($grid-breakpoints, sm) - 1px)) {
|
|
right: ($grid-gutter-width / 2);
|
|
left: ($grid-gutter-width / 2);
|
|
margin-right: 0;
|
|
margin-left: 0;
|
|
width: auto;
|
|
}
|
|
}
|
|
|
|
.sweet-alert .sa-icon.sa-error {
|
|
border-color: map-get($theme-colors, danger);
|
|
|
|
.sa-line {
|
|
background-color: map-get($theme-colors, danger);
|
|
}
|
|
}
|
|
.sweet-alert .sa-icon.sa-warning {
|
|
border-color: map-get($theme-colors, warning);
|
|
|
|
.sa-body {
|
|
// Exclamation mark body
|
|
background-color: map-get($theme-colors, warning);
|
|
}
|
|
|
|
.sa-dot {
|
|
// Exclamation mark dot
|
|
background-color: map-get($theme-colors, warning);
|
|
}
|
|
}
|
|
.sweet-alert .sa-icon.sa-info {
|
|
border-color: map-get($theme-colors, info);
|
|
|
|
&::before {
|
|
// i-letter body
|
|
background-color: map-get($theme-colors, info);
|
|
}
|
|
|
|
&::after {
|
|
// i-letter dot
|
|
background-color: map-get($theme-colors, info);
|
|
}
|
|
}
|
|
.sweet-alert .sa-icon.sa-success {
|
|
border-color: map-get($theme-colors, success);
|
|
|
|
.sa-placeholder {
|
|
// Ring
|
|
border: 4px solid rgba(map-get($theme-colors, success), .2);
|
|
}
|
|
|
|
.sa-line {
|
|
background-color: map-get($theme-colors, success);
|
|
}
|
|
}
|
|
}
|