Luis Suarez / autoservicio-axion

Download as
Browse Code ยป

Commit b18d24ac926506cf8c4af220a761d4cffd7aa479

Authored by Marcelo Puebla
1 parent edb176eff0
Exists in master and in 2 other branches 20200117-axion-responsive, develop

iniciada splash screen

Showing 18 changed files with 516 additions and 6 deletions   Show diff stats
src/app/app-routing.module.ts
Diff comments   View file @ b18d24a
1 import { NgModule } from '@angular/core'; 1 import { NgModule } from '@angular/core';
2 import { Routes, RouterModule } from '@angular/router'; 2 import { Routes, RouterModule } from '@angular/router';
3 import { SplashScreenComponent } from './modules/splash-screen/splash-screen.component';
3 4
4 5 const routes: Routes = [
5 const routes: Routes = []; 6 { path: '', component: SplashScreenComponent },
7 ];
6 8
7 @NgModule({ 9 @NgModule({
8 imports: [RouterModule.forRoot(routes)], 10 imports: [RouterModule.forRoot(routes)],
9 exports: [RouterModule] 11 exports: [RouterModule]
10 }) 12 })
11 export class AppRoutingModule { } 13 export class AppRoutingModule { }
12 14
src/app/app.component.html
Diff comments   View file @ b18d24a
1 <router-outlet></router-outlet>
2
src/app/app.module.ts
Diff comments   View file @ b18d24a
1 import { BrowserModule } from '@angular/platform-browser'; 1 import { BrowserModule } from '@angular/platform-browser';
2 import { NgModule } from '@angular/core'; 2 import { NgModule } from '@angular/core';
3 3
4 import { AppRoutingModule } from './app-routing.module'; 4 import { AppRoutingModule } from './app-routing.module';
5 import { AppComponent } from './app.component'; 5 import { AppComponent } from './app.component';
6 import { SplashScreenComponent } from './modules/splash-screen/splash-screen.component';
7 import { SplitPipe } from './pipes/split.pipe';
6 8
7 @NgModule({ 9 @NgModule({
8 declarations: [ 10 declarations: [
9 AppComponent 11 AppComponent,
12 SplashScreenComponent,
13 SplitPipe
10 ], 14 ],
11 imports: [ 15 imports: [
12 BrowserModule, 16 BrowserModule,
13 AppRoutingModule 17 AppRoutingModule
14 ], 18 ],
15 providers: [], 19 providers: [],
16 bootstrap: [AppComponent] 20 bootstrap: [AppComponent]
17 }) 21 })
18 export class AppModule { } 22 export class AppModule { }
19 23
src/app/modules/splash-screen/splash-screen.component.html
Diff comments   View file @ b18d24a
File was created 1 <div *ngIf="showSplashScreen" class="vh-100">
2 <div class="row mx-0 h-100">
3 <div class="col-12 px-0 h-30 my-auto">
4 <img class="d-block mx-auto h-100 focus-in-blur" src="assets/img/logo-spot.svg">
5 </div>
6 </div>
7 </div>
8
9 <div *ngIf="!showSplashScreen" class="vh-100 bg-primary fade-in">
10 <div class="row mx-0 h-100">
11 <div class="col-12 px-0 h-100 my-auto">
12 <div class="row mx-0 h-15">
13 <div class="col-12 px-0 h-80 my-auto">
14 <img class="d-block mx-auto h-100 focus-in-blur" src="assets/img/negativo-spot.svg">
15 </div>
16 </div>
17 <div class="row mx-0 h-75 justify-content-center text-white text-center">
18 <div class="col-7 h-auto px-0 py-5 mb-5 align-self-end box">
19 <div class="h6 m-0 welcome-text text-info">
20 <span *ngFor="let letter of textWelcome | split textWelcome">{{letter}}</span>
21 </div>
22 <div class="h1 m-0 como-estas-text">
23 <span *ngFor="let letter of textComoEstas | split textComoEstas">{{letter}}</span>
24 </div>
25 </div>
26 <div class="col-7 h-auto px-0 py-5 mt-5 align-self-start box2">
27 <div class="h6 m-0 invitamos-text text-info">
28 <span *ngFor="let letter of textInvitamos | split textInvitamos">{{letter}}</span>
29 </div>
30 <div class="h1 m-0 tu-pedido-text">
31 <span *ngFor="let letter of textTuPedido | split textTuPedido">{{letter}}</span>
32 </div>
33 </div>
34 </div>
35 <div class="row mx-0 h-10 loop-color cursor-pointer">
36 <div class="col-12 text-center align-self-center px-0">
37 <p class="h6 text-white">TOCA PARA COMENZAR</p>
38 </div>
39 </div>
40 </div>
41 </div>
42 </div>
43
src/app/modules/splash-screen/splash-screen.component.scss
Diff comments   View file @ b18d24a
File was created 1 .box:before {
2 content: "";
3 position: absolute;
4 top: 0;
5 left: 0;
6 width: 0;
7 height: 0;
8 background: transparent;
9 border: 2px solid transparent;
10 animation: animate 2.5s 1s linear forwards;
11 -webkit-animation: animate 2.5s 1s linear forwards;
12 }
13
14 @keyframes animate {
15 0% {
16 width: 0;
17 height: 0;
18 border-top-color: white;
19 border-bottom-color: transparent;
20 border-left-color: transparent;
21 border-right-color: transparent;
22 }
23 25% {
24 width: 100%;
25 height: 0;
26 border-top-color: white;
27 border-top-right-radius: 1.5rem;
28 border-bottom-color: transparent;
29 border-left-color: transparent;
30 border-right-color: white;
31 }
32 50% {
33 width: 100%;
34 height: 100%;
35 border-top-right-radius: 1.5rem;
36 border-bottom-right-radius: 1.5rem;
37 border-top-color: white;
38 border-bottom-color: transparent;
39 border-left-color: transparent;
40 border-right-color: white;
41 }
42 100% {
43 width: 100%;
44 height: 100%;
45 border-top-right-radius: 1.5rem;
46 border-bottom-right-radius: 1.5rem;
47 border-top-color: white;
48 border-bottom-color: white;
49 border-left-color: transparent;
50 border-right-color: white;
51 }
52 }
53
54 .box2:before {
55 content: "";
56 position: absolute;
57 top: 0;
58 left: 0;
59 width: 0;
60 height: 0;
61 background: transparent;
62 border: 2px solid transparent;
63 animation: animate2 2.5s 2.5s linear forwards;
64 -webkit-animation: animate2 2.5s 2.5s linear forwards;
65 }
66
67 @keyframes animate2 {
68 0% {
69 width: 100%;
70 height: 0;
71 border-top-color: white;
72 border-bottom-color: transparent;
73 border-left-color: transparent;
74 border-right-color: transparent;
75 }
76 25% {
77 width: 100%;
78 height: 0;
79 border-top-color: white;
80 border-top-left-radius: 1.5rem;
81 border-bottom-color: transparent;
82 border-right-color: transparent;
83 border-left-color: white;
84 }
85 50% {
86 width: 100%;
87 height: 100%;
88 border-top-left-radius: 1.5rem;
89 border-bottom-left-radius: 1.5rem;
90 border-top-color: white;
91 border-bottom-color: transparent;
92 border-right-color: transparent;
93 border-left-color: white;
94 }
95 100% {
96 width: 100%;
97 height: 100%;
98 border-top-left-radius: 1.5rem;
99 border-bottom-left-radius: 1.5rem;
100 border-top-color: white;
101 border-bottom-color: white;
102 border-right-color: transparent;
103 border-left-color: white;
104 }
105 }
106
107 /*
108 * animation slide-in-top
109 */
110 .welcome-text span,
111 .como-estas-text span,
112 .invitamos-text span,
113 .tu-pedido-text span {
114 opacity: 0;
115 -webkit-animation: slide-in-top 1s forwards;
116 animation: slide-in-top 1s forwards;
117 display: inline-block;
118 white-space: break-spaces;
119 }
120
121 @-webkit-keyframes slide-in-top {
122 0% {
123 -webkit-transform: translateY(-500px);
124 transform: translateY(-500px);
125 opacity: 0;
126 }
127 80% {
128 -webkit-transform: translateY(10px);
129 transform: translateY(10px);
130 opacity: 1;
131 }
132 100% {
133 -webkit-transform: translateY(0);
134 transform: translateY(0);
135 opacity: 1;
136 }
137 }
138
139 @keyframes slide-in-top {
140 0% {
141 -webkit-transform: translateY(-500px);
142 transform: translateY(-500px);
143 opacity: 0;
144 }
145 80% {
146 -webkit-transform: translateY(15px);
147 transform: translateY(15px);
148 opacity: 1;
149 }
150 100% {
151 -webkit-transform: translateY(0);
152 transform: translateY(0);
153 opacity: 1;
154 }
155 }
156
157 @for $i from 1 through 18 {
158 $delayValue: $i * 0.05s;
159 .welcome-text span:nth-child(#{$i}) {
160 -webkit-animation-delay: $delayValue;
161 animation-delay: $delayValue;
162 }
163 }
164
165 @for $i from 1 through 12 {
166 $delayValue: ($i + 18) * 0.05s;
167 .como-estas-text span:nth-child(#{$i}) {
168 -webkit-animation-delay: $delayValue;
169 animation-delay: $delayValue;
170 }
171 }
172
173 @for $i from 1 through 20 {
174 $delayValue: ($i + 30) * 0.05s;
175 .invitamos-text span:nth-child(#{$i}) {
176 -webkit-animation-delay: $delayValue;
177 animation-delay: $delayValue;
178 }
179 }
180
181 @for $i from 1 through 13 {
182 $delayValue: ($i + 50) * 0.05s;
183 .tu-pedido-text span:nth-child(#{$i}) {
184 -webkit-animation-delay: $delayValue;
185 animation-delay: $delayValue;
186 }
187 }
188
src/app/modules/splash-screen/splash-screen.component.spec.ts
Diff comments   View file @ b18d24a
File was created 1 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
2
3 import { SplashScreenComponent } from './splash-screen.component';
4
5 describe('SplashScreenComponent', () => {
6 let component: SplashScreenComponent;
7 let fixture: ComponentFixture<SplashScreenComponent>;
8
9 beforeEach(async(() => {
10 TestBed.configureTestingModule({
11 declarations: [ SplashScreenComponent ]
12 })
13 .compileComponents();
14 }));
15
16 beforeEach(() => {
17 fixture = TestBed.createComponent(SplashScreenComponent);
18 component = fixture.componentInstance;
19 fixture.detectChanges();
20 });
21
22 it('should create', () => {
23 expect(component).toBeTruthy();
24 });
25 });
26
src/app/modules/splash-screen/splash-screen.component.ts
Diff comments   View file @ b18d24a
File was created 1 import { Component, OnInit } from '@angular/core';
2
3 @Component({
4 selector: 'app-splash-screen',
5 templateUrl: './splash-screen.component.html',
6 styleUrls: ['./splash-screen.component.scss']
7 })
8 export class SplashScreenComponent implements OnInit {
9 timerSplashScreen = 2000;
10 showSplashScreen = true;
11 textWelcome = 'BIENVENIDO A SPOT!';
12 textComoEstas = 'ยฟcรณmo estas?';
13 textInvitamos = 'TE INVITAMOS A HACER';
14 textTuPedido = 'tu pedido acรก';
15
16 constructor() { }
17
18 ngOnInit() {
19 setTimeout(() => {
20 this.showSplashScreen = false;
21 }, this.timerSplashScreen);
22 }
23
24 }
25
src/app/pipes/split.pipe.spec.ts
Diff comments   View file @ b18d24a
File was created 1 import { SplitPipe } from './split.pipe';
2
3 describe('SplitPipe', () => {
4 it('create an instance', () => {
5 const pipe = new SplitPipe();
6 expect(pipe).toBeTruthy();
7 });
8 });
9
src/app/pipes/split.pipe.ts
Diff comments   View file @ b18d24a
File was created 1 import { Pipe, PipeTransform } from '@angular/core';
2
3 @Pipe({
4 name: 'split'
5 })
6 export class SplitPipe implements PipeTransform {
7
8 transform(value: any, args?: any): any {
9 return value.split('');
10 }
11
12 }
13
src/assets/fonts/gotham-medium.woff
Diff comments   View file @ b18d24a
No preview for this file type
src/assets/img/LogoSpot2.svg
Diff comments   View file @ b18d24a
File was created 1 <?xml version="1.0" encoding="UTF-8"?>
2 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
3 <!-- Creator: CorelDRAW X7 -->
4 <svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="78.7688mm" height="78.7676mm" version="1.1" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd"
5 viewBox="0 0 2581 2581"
6 xmlns:xlink="http://www.w3.org/1999/xlink">
7 <defs>
8 <style type="text/css">
9 <![CDATA[
10 .fil0 {fill:#AD036F}
11 .fil1 {fill:white}
12 ]]>
13 </style>
14 </defs>
15 <g id="Capa_x0020_1">
16 <metadata id="CorelCorpID_0Corel-Layer"/>
17 <path class="fil0" d="M2581 1291c0,713 -577,1290 -1290,1290 -713,0 -1291,-577 -1291,-1290 0,-713 578,-1291 1291,-1291 713,0 1290,578 1290,1291z"/>
18 <path class="fil1" d="M655 1065c-54,-47 -118,-118 -114,-140 10,-50 176,-64 221,-65 56,-2 80,-152 -3,-153 -71,-1 -264,19 -312,129 -56,130 22,248 140,351 55,49 150,126 143,211 -17,102 -208,152 -282,160 -103,13 -253,-6 -266,4 -13,7 10,44 112,84 220,78 387,27 482,-76 164,-214 -7,-411 -121,-505zm347 4c-30,-28 -64,5 -66,21 -1,10 -2,16 -4,44 -22,25 -54,80 -57,101 -2,21 22,59 48,55 -18,322 -5,396 -5,396 -2,0 27,278 30,266 19,112 44,183 49,0 6,-109 2,-172 12,-592 10,9 27,16 54,17 343,4 335,-588 -61,-308zm9 253c1,-30 3,-57 4,-83 0,0 0,0 0,0 91,-90 179,-107 179,-91 0,16 -68,114 -183,174zm520 -210c-69,0 -148,42 -154,68 -13,57 15,111 52,123 13,4 28,-23 69,-33 81,-21 153,31 155,104 3,73 -61,143 -145,156 -85,13 -163,-44 -163,-127 0,-25 2,-54 11,-88 13,-50 -33,-43 -71,66 -20,58 -7,146 38,212 40,59 105,94 177,94 136,0 254,-129 263,-288 8,-158 -95,-287 -232,-287zm684 -387c-134,-13 -205,-6 -221,-7 9,-68 27,-201 31,-231 6,-45 -102,-54 -109,-19 -7,37 -13,128 -28,252 -249,10 -563,41 -585,61 -39,37 -15,136 13,135 46,-2 330,-63 562,-85 -14,140 -56,576 -57,604 0,0 -7,229 -4,220 2,93 15,154 45,11 57,-298 100,-708 118,-849 41,-7 194,-23 235,-32 83,-16 134,-47 0,-60z"/>
19 <path class="fil1" d="M1828 1884c-55,-56 -105,-39 -135,13 -16,29 -10,79 6,102 15,26 33,41 52,51 37,19 78,22 113,-6 17,-13 32,-41 32,-63 10,-67 -34,-61 -68,-97z"/>
20 </g>
21 </svg>
22
src/assets/img/logo-spot.svg
Diff comments   View file @ b18d24a
File was created 1 <?xml version="1.0" encoding="UTF-8"?>
2 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
3 <!-- Creator: CorelDRAW X7 -->
4 <svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="78.7688mm" height="78.7676mm" version="1.1" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd"
5 viewBox="0 0 2581 2581"
6 xmlns:xlink="http://www.w3.org/1999/xlink">
7 <defs>
8 <style type="text/css">
9 <![CDATA[
10 .fil0 {fill:#AD036F}
11 .fil1 {fill:white}
12 ]]>
13 </style>
14 </defs>
15 <g id="Capa_x0020_1">
16 <metadata id="CorelCorpID_0Corel-Layer"/>
17 <path class="fil0" d="M2581 1291c0,713 -577,1290 -1290,1290 -713,0 -1291,-577 -1291,-1290 0,-713 578,-1291 1291,-1291 713,0 1290,578 1290,1291z"/>
18 <path class="fil1" d="M655 1065c-54,-47 -118,-118 -114,-140 10,-50 176,-64 221,-65 56,-2 80,-152 -3,-153 -71,-1 -264,19 -312,129 -56,130 22,248 140,351 55,49 150,126 143,211 -17,102 -208,152 -282,160 -103,13 -253,-6 -266,4 -13,7 10,44 112,84 220,78 387,27 482,-76 164,-214 -7,-411 -121,-505zm347 4c-30,-28 -64,5 -66,21 -1,10 -2,16 -4,44 -22,25 -54,80 -57,101 -2,21 22,59 48,55 -18,322 -5,396 -5,396 -2,0 27,278 30,266 19,112 44,183 49,0 6,-109 2,-172 12,-592 10,9 27,16 54,17 343,4 335,-588 -61,-308zm9 253c1,-30 3,-57 4,-83 0,0 0,0 0,0 91,-90 179,-107 179,-91 0,16 -68,114 -183,174zm520 -210c-69,0 -148,42 -154,68 -13,57 15,111 52,123 13,4 28,-23 69,-33 81,-21 153,31 155,104 3,73 -61,143 -145,156 -85,13 -163,-44 -163,-127 0,-25 2,-54 11,-88 13,-50 -33,-43 -71,66 -20,58 -7,146 38,212 40,59 105,94 177,94 136,0 254,-129 263,-288 8,-158 -95,-287 -232,-287zm684 -387c-134,-13 -205,-6 -221,-7 9,-68 27,-201 31,-231 6,-45 -102,-54 -109,-19 -7,37 -13,128 -28,252 -249,10 -563,41 -585,61 -39,37 -15,136 13,135 46,-2 330,-63 562,-85 -14,140 -56,576 -57,604 0,0 -7,229 -4,220 2,93 15,154 45,11 57,-298 100,-708 118,-849 41,-7 194,-23 235,-32 83,-16 134,-47 0,-60z"/>
19 <path class="fil1" d="M1828 1884c-55,-56 -105,-39 -135,13 -16,29 -10,79 6,102 15,26 33,41 52,51 37,19 78,22 113,-6 17,-13 32,-41 32,-63 10,-67 -34,-61 -68,-97z"/>
20 </g>
21 </svg>
22
src/assets/img/negativo-spot.svg
Diff comments   View file @ b18d24a
File was created 1 <?xml version="1.0" encoding="UTF-8"?>
2 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
3 <!-- Creator: CorelDRAW X7 -->
4 <svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="78.7688mm" height="78.7676mm" version="1.1" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd"
5 viewBox="0 0 2760 2760"
6 xmlns:xlink="http://www.w3.org/1999/xlink">
7 <defs>
8 <style type="text/css">
9 <![CDATA[
10 .fil1 {fill:#AD036F}
11 .fil0 {fill:white}
12 ]]>
13 </style>
14 </defs>
15 <g id="Capa_x0020_1">
16 <metadata id="CorelCorpID_0Corel-Layer"/>
17 <path class="fil0" d="M2760 1380c0,762 -618,1380 -1380,1380 -762,0 -1380,-618 -1380,-1380 0,-762 618,-1380 1380,-1380 762,0 1380,618 1380,1380z"/>
18 <path class="fil1" d="M700 1138c-58,-50 -125,-126 -121,-149 10,-53 187,-69 236,-70 60,-1 86,-162 -4,-163 -76,-1 -282,21 -333,138 -60,139 23,265 150,375 58,52 160,135 152,225 -18,110 -222,163 -301,172 -110,13 -270,-7 -285,3 -14,9 11,48 121,91 234,84 413,28 515,-81 175,-229 -8,-440 -130,-541zm372 4c-32,-29 -70,6 -71,23 -2,11 -2,18 -4,47 -24,28 -59,86 -61,108 -2,23 23,63 51,59 -19,345 -6,423 -6,423 -2,1 30,298 32,284 21,121 48,196 53,0 6,-115 2,-183 13,-632 10,9 28,17 57,18 367,5 359,-628 -64,-330zm9 271c1,-31 3,-61 5,-88 0,0 0,0 0,0 96,-96 190,-115 191,-98 0,18 -74,123 -196,186zm556 -224c-74,0 -158,45 -164,73 -15,61 15,118 54,131 14,5 31,-25 74,-36 87,-22 164,34 167,112 3,78 -66,153 -156,167 -91,14 -174,-48 -174,-137 0,-26 2,-57 12,-93 14,-54 -36,-46 -76,70 -22,62 -8,156 40,227 43,63 113,100 190,100 145,0 271,-137 280,-307 10,-170 -100,-307 -247,-307zm731 -414c-143,-14 -220,-6 -236,-8 10,-72 29,-214 33,-246 6,-48 -109,-58 -116,-21 -8,40 -15,138 -30,270 -267,11 -603,43 -626,65 -42,39 -16,146 14,144 49,-2 352,-67 600,-90 -14,149 -59,615 -60,645 0,0 -8,245 -5,236 2,99 16,164 49,11 61,-319 107,-757 126,-907 44,-8 207,-25 251,-35 89,-17 143,-50 0,-64z"/>
19 <path class="fil1" d="M1954 2014c-58,-60 -112,-41 -144,14 -17,31 -10,85 6,109 16,28 36,43 56,55 40,19 84,23 121,-7 18,-14 34,-43 34,-67 11,-71 -36,-65 -73,-104z"/>
20 </g>
21 </svg>
22
src/scss/animations.scss
Diff comments   View file @ b18d24a
File was created 1 /*
2 * animation focus-in-blur
3 */
4 .focus-in-blur {
5 -webkit-animation: focus-in-blur 0.5s cubic-bezier(0.55, 0.085, 0.68, 0.53) both;
6 animation: focus-in-blur 0.5s cubic-bezier(0.55, 0.085, 0.68, 0.53) both;
7 }
8
9 @-webkit-keyframes focus-in-blur {
10 0% {
11 -webkit-filter: blur(12px);
12 filter: blur(12px);
13 opacity: 0;
14 }
15 100% {
16 -webkit-filter: blur(0px);
17 filter: blur(0px);
18 opacity: 1;
19 }
20 }
21
22 @keyframes focus-in-blur {
23 0% {
24 -webkit-filter: blur(12px);
25 filter: blur(12px);
26 opacity: 0;
27 }
28 100% {
29 -webkit-filter: blur(0px);
30 filter: blur(0px);
31 opacity: 1;
32 }
33 }
34
35 /*
36 * animation fade-in
37 */
38 .fade-in {
39 -webkit-animation: fade-in 1.2s cubic-bezier(0.39, 0.575, 0.565, 1) both;
40 animation: fade-in 1.2s cubic-bezier(0.39, 0.575, 0.565, 1) both;
41 }
42
43 @-webkit-keyframes fade-in {
44 0% {
45 opacity: 0;
46 }
47 100% {
48 opacity: 1;
49 }
50 }
51
52 @keyframes fade-in {
53 0% {
54 opacity: 0;
55 }
56 100% {
57 opacity: 1;
58 }
59 }
60
61 /*
62 * animation fade-in
63 */
64 .loop-color {
65 -webkit-animation: loop-color 1.2s cubic-bezier(0.39, 0.575, 0.565, 1) infinite both;
66 animation: loop-color 1.2s cubic-bezier(0.39, 0.575, 0.565, 1) infinite both;
67 }
68
69 @-webkit-keyframes loop-color {
70 0% {
71 background-color: #f4b223;
72 }
73 50% {
74 background-color: #ba8b29;
75 }
76 100% {
77 background-color: #f4b223;
78 }
79 }
80
81 @keyframes loop-color {
82 0% {
83 background-color: #f4b223;
84 }
85 50% {
86 background-color: #ba8b29;
87 }
88 100% {
89 background-color: #f4b223;
90 }
91 }
92
src/scss/height-width.scss
Diff comments   View file @ b18d24a
File was created 1 @for $i from 1 through 100 {
2 $heightValue: 1% * $i;
3 .h-#{$i} {
4 height: $heightValue !important;
5 }
6 }
7
src/scss/styles-bootstrap.scss
Diff comments   View file @ b18d24a
File was created 1 @import "node_modules/bootstrap/scss/functions";
2 @import "node_modules/bootstrap/scss/variables";
3 @import "node_modules/bootstrap/scss/mixins";
4
5 $primary: #aa006b;
6 $secondary: #00acd8;
7 $info: #f4b223;
8
9 $theme-colors: (
10 primary: $primary,
11 secondary: $secondary,
12 info: $info
13 );
14
15 @import "node_modules/bootstrap/scss/bootstrap";
16
src/styles-bootstrap.scss
View file @ b18d24a
1 @import "../../../node_modules/bootstrap/scss/functions"; File was deleted
2 @import "../../../node_modules/bootstrap/scss/variables";
3 @import "../../../node_modules/bootstrap/scss/mixins";
4 1 @import "../../../node_modules/bootstrap/scss/functions";
1 @import "scss/styles-bootstrap.scss";
2 @import "scss/height-width.scss";
3 @import "scss/animations.scss";
4 @import "node_modules/bootstrap/scss/_variables.scss";
5
6 @font-face {
7 font-family: "Gotham-Medium";
8 font-style: normal;
9 font-weight: normal;
10 src: url("assets/fonts/gotham-medium.woff") format("woff");
11 }
12
13 html,
14 body {
15 min-height: 100vh;
16 max-height: 100vh;
17 height: 100vh;
18 background-color: #fcf2e3;
19 font-family: "Gotham-Medium";
20 overflow: hidden;
21 }
22
23 .cursor-pointer {
24 cursor: pointer;
25 }
26
27 p {
28 margin: 0 !important;
29 }
30
31 .rounded {
32 border-radius: 1.5rem !important;
33 }
34