Luigi / wrapper-demo

Download as
Browse Code ยป

Commit 5f8d9c06c40a7139694ef492019dd095785fbbf6

Authored by Jose Pinto
2 parents ab80553d90 cdcf6eee75
Exists in master

Merge branch 'master' into 'master' 

Master(efernandez)

See merge request !31
Showing 2 changed files   Show diff stats
src/sass/_logistica-pedido-ruta.scss
Diff comments   View file @ 5f8d9c0
File was created 1 .arrastrando {
2 opacity: 0.5;
3 }
4 .vertical {
5 display: inline-block;
6 width: 20%;
7 height: 40px;
8 -webkit-transform: rotate(-90deg); /* Chrome, Safari, Opera */
9 transform: rotate(-90deg);
10 }
11 .progress-circle{
12 width: 150px;
13 height: 150px;
14 line-height: 150px;
15 background: none;
16 margin: 0 auto;
17 box-shadow: none;
18 position: relative;
19 }
20 .progress-circle:after{
21 content: "";
22 width: 100%;
23 height: 100%;
24 border-radius: 50%;
25 border: 12px solid #fff;
26 position: absolute;
27 top: 0;
28 left: 0;
29 }
30 .progress-circle > span{
31 width: 50%;
32 height: 100%;
33 overflow: hidden;
34 position: absolute;
35 top: 0;
36 z-index: 1;
37 }
38 .progress-circle .progress-left{
39 left: 0;
40 }
41 .progress-circle .progress-bar{
42 width: 100%;
43 height: 100%;
44 background: none;
45 border-width: 12px;
46 border-style: solid;
47 position: absolute;
48 top: 0;
49 }
50 .progress-circle .progress-left .progress-bar{
51 left: 100%;
52 border-top-right-radius: 80px;
53 border-bottom-right-radius: 80px;
54 border-left: 0;
55 -webkit-transform-origin: center left;
56 transform-origin: center left;
57 }
58 .progress-circle .progress-right{
59 right: 0;
60 }
61 .progress-circle .progress-right .progress-bar{
62 left: -100%;
63 border-top-left-radius: 80px;
64 border-bottom-left-radius: 80px;
65 border-right: 0;
66 -webkit-transform-origin: center right;
67 transform-origin: center right;
68 animation: loading-1 1.8s linear forwards;
69 }
70 .progress-circle .progress-value{
71 width: 90%;
72 height: 90%;
73 border-radius: 50%;
74 background: #44484b;
75 font-size: 24px;
76 color: #fff;
77 line-height: 135px;
78 text-align: center;
79 position: absolute;
80 top: 5%;
81 left: 5%;
82 }
83 .progress-circle.blue .progress-bar{
84 border-color: #049dff;
85 }
86 .progress-circle.blue .progress-left .progress-bar{
87 animation: loading-2 1.5s linear forwards 1.8s;
88 }
89 @keyframes loading-1{
90 0%{
91 -webkit-transform: rotate(0deg);
92 transform: rotate(0deg);
93 }
94 100%{
95 -webkit-transform: rotate(180deg);
96 transform: rotate(180deg);
97 }
98 }
99 @keyframes loading-2{
100 0%{
101 -webkit-transform: rotate(0deg);
102 transform: rotate(0deg);
103 }
104 100%{
105 -webkit-transform: rotate(180deg);
106 transform: rotate(180deg);
107 }
108 }
109 @keyframes loading-3{
110 0%{
111 -webkit-transform: rotate(0deg);
112 transform: rotate(0deg);
113 }
114 100%{
115 -webkit-transform: rotate(90deg);
116 transform: rotate(90deg);
117 }
118 }
119 @keyframes loading-4{
120 0%{
121 -webkit-transform: rotate(0deg);
122 transform: rotate(0deg);
123 }
124 100%{
125 -webkit-transform: rotate(36deg);
126 transform: rotate(36deg);
127 }
128 }
129 @keyframes loading-5{
130 0%{
131 -webkit-transform: rotate(0deg);
132 transform: rotate(0deg);
133 }
134 100%{
135 -webkit-transform: rotate(126deg);
136 transform: rotate(126deg);
137 }
138 }
139 @media only screen and (max-width: 990px){
140 .progress{ margin-bottom: 20px; }
141 }
142 .foca-alto-progress{
143 height: 2rem;
144 }
145
src/sass/general.scss
Diff comments   View file @ 5f8d9c0
1 $primary-color: #e09125; 1 $primary-color: #e09125;
2 @import 'admin-seguimiento'; 2 @import 'admin-seguimiento';
3 @import 'bootstrap'; 3 @import 'bootstrap';
4 @import 'botonera'; 4 @import 'botonera';
5 @import 'botonera-lateral'; 5 @import 'botonera-lateral';
6 @import 'botonera-principal'; 6 @import 'botonera-principal';
7 @import 'botonera-secundaria'; 7 @import 'botonera-secundaria';
8 @import 'contenedor'; 8 @import 'contenedor';
9 @import 'lista'; 9 @import 'lista';
10 @import 'login'; 10 @import 'login';
11 @import 'panel-informativo'; 11 @import 'panel-informativo';
12 @import 'tabla'; 12 @import 'tabla';
13 @import 'teclado'; 13 @import 'teclado';
14 @import 'tabla-articulos'; 14 @import 'tabla-articulos';
15 @import 'acciones-mobile'; 15 @import 'acciones-mobile';
16 @import 'swiper'; 16 @import 'swiper';
17 @import 'foca-crear'; 17 @import 'foca-crear';
18 @import 'logistica-pedido-ruta';
18 19
19 20
20 //OCULTA FLECHAS INPUT NUMBER 21 //OCULTA FLECHAS INPUT NUMBER
21 input[type='number'] { 22 input[type='number'] {
22 -moz-appearance:textfield; 23 -moz-appearance:textfield;
23 } 24 }
24 input::-webkit-outer-spin-button, 25 input::-webkit-outer-spin-button,
25 input::-webkit-inner-spin-button { 26 input::-webkit-inner-spin-button {
26 -webkit-appearance: none; 27 -webkit-appearance: none;
27 } 28 }
28 29
29 .d-md-grid{ 30 .d-md-grid{
30 @media (min-width: 768px) { 31 @media (min-width: 768px) {
31 display: grid !important; 32 display: grid !important;
32 } 33 }
33 } 34 }
34 35
35 .btn-outline-debo{ 36 .btn-outline-debo{
36 background-color: transparent; 37 background-color: transparent;
37 color: $primary-color; 38 color: $primary-color;
38 border-color: $primary-color; 39 border-color: $primary-color;
39 &:hover{ 40 &:hover{
40 color: #FFF; 41 color: #FFF;
41 border-color: transparent; 42 border-color: transparent;
42 background-color: $primary-color; 43 background-color: $primary-color;
43 } 44 }
44 } 45 }
45 46