prvi
This commit is contained in:
David Štaleker
800
EveryThing/wwwroot/vendor/libs/bootstrap-sweetalert/bootstrap-sweetalert.scss
vendored
Normal file
800
EveryThing/wwwroot/vendor/libs/bootstrap-sweetalert/bootstrap-sweetalert.scss
vendored
Normal file
@@ -0,0 +1,800 @@
|
||||
@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);
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user