Prvi commit

This commit is contained in:
David Štaleker
2023-05-12 09:00:07 +02:00
parent d3ffe93e42
commit 03b92525d7
14757 changed files with 9251133 additions and 53 deletions

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View 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);
}
}
}