178 lines
2.6 KiB
SCSS
178 lines
2.6 KiB
SCSS
@import "bulma/sass/utilities/initial-variables";
|
|
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,500;1,300;1,400&family=Lobster&family=Comfortaa:wght@400;500;600;700&display=swap');
|
|
@import url('https://use.fontawesome.com/releases/v5.12.0/css/all.css');
|
|
|
|
$family-sans-serif: 'Roboto',
|
|
sans-serif;
|
|
$family-secondary: 'Comfortaa',
|
|
cursive;
|
|
// // https://coolors.co/06aed5-086788-f0c808-fff1d0-dd1c1a
|
|
// $blue: #083d77;
|
|
// $red: #dd1c1a;
|
|
// $orange: #ee964b;
|
|
// $yellow: #f4d35e;
|
|
// $light: #f5fafe; // #ebebd3;
|
|
// $primary: $blue;
|
|
// $green: #007932; // hsl(141, 53%, 53%);
|
|
// $footer-background-color: $light;
|
|
|
|
$blue: #4c82fc;
|
|
$primary: $blue;
|
|
|
|
$text: $grey-dark;
|
|
$body-background-color: #FAFCFE;
|
|
$light: #fff;
|
|
|
|
@import 'bulma/bulma';
|
|
|
|
@import './demo';
|
|
|
|
.is-font-logo {
|
|
font-family: 'Lobster', cursive;
|
|
}
|
|
|
|
.card {
|
|
height: 100%;
|
|
}
|
|
|
|
.is-vcentered {
|
|
height: 100vh;
|
|
}
|
|
|
|
.content {
|
|
padding: 30px 60px 50px;
|
|
|
|
&>h1 {
|
|
margin-bottom: 40px;
|
|
}
|
|
}
|
|
|
|
body {
|
|
min-height: 100vh;
|
|
}
|
|
|
|
.button.google {
|
|
background: rgb(225, 98, 89);
|
|
color: white;
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.animation-ctn {
|
|
text-align: center;
|
|
margin-top: 5em;
|
|
}
|
|
|
|
@-webkit-keyframes checkmark {
|
|
0% {
|
|
stroke-dashoffset: 100px
|
|
}
|
|
|
|
100% {
|
|
stroke-dashoffset: 200px
|
|
}
|
|
}
|
|
|
|
@-ms-keyframes checkmark {
|
|
0% {
|
|
stroke-dashoffset: 100px
|
|
}
|
|
|
|
100% {
|
|
stroke-dashoffset: 200px
|
|
}
|
|
}
|
|
|
|
@keyframes checkmark {
|
|
0% {
|
|
stroke-dashoffset: 100px
|
|
}
|
|
|
|
100% {
|
|
stroke-dashoffset: 0px
|
|
}
|
|
}
|
|
|
|
@-webkit-keyframes checkmark-circle {
|
|
0% {
|
|
stroke-dashoffset: 480px
|
|
}
|
|
|
|
100% {
|
|
stroke-dashoffset: 960px;
|
|
|
|
}
|
|
}
|
|
|
|
@-ms-keyframes checkmark-circle {
|
|
0% {
|
|
stroke-dashoffset: 240px
|
|
}
|
|
|
|
100% {
|
|
stroke-dashoffset: 480px
|
|
}
|
|
}
|
|
|
|
@keyframes checkmark-circle {
|
|
0% {
|
|
stroke-dashoffset: 480px
|
|
}
|
|
|
|
100% {
|
|
stroke-dashoffset: 960px
|
|
}
|
|
}
|
|
|
|
@keyframes colored-circle {
|
|
0% {
|
|
opacity: 0
|
|
}
|
|
|
|
100% {
|
|
opacity: 100
|
|
}
|
|
}
|
|
|
|
/* other styles */
|
|
/* .svg svg {
|
|
display: none
|
|
}
|
|
*/
|
|
.inlinesvg .svg svg {
|
|
display: inline
|
|
}
|
|
|
|
.svg-icon {
|
|
align-items: center;
|
|
display: inline-flex;
|
|
justify-content: center;
|
|
height: 154px;
|
|
width: 154px;
|
|
}
|
|
|
|
/* .svg img {
|
|
display: none
|
|
} */
|
|
|
|
.svg-icon--order-success svg polyline {
|
|
-webkit-animation: checkmark 0.30s ease-in-out 0.9s backwards;
|
|
animation: checkmark 0.30s ease-in-out 0.9s backwards
|
|
}
|
|
|
|
.svg-icon--order-success svg circle {
|
|
-webkit-animation: checkmark-circle 0.8s ease-in-out backwards;
|
|
animation: checkmark-circle 0.8s ease-in-out backwards;
|
|
}
|
|
|
|
.svg-icon--order-success svg circle#colored {
|
|
-webkit-animation: colored-circle 0.8s ease-in-out 0.9s backwards;
|
|
animation: colored-circle 0.8s ease-in-out 0.9s backwards;
|
|
} |