Eric Fernandez / wrapper-demo

Download as
Browse Code ยป

Commit 2e8c7cdefbfb35caa4f3f248350ad54d240e460b

Authored by Jose Pinto
2 parents 6ff3c20a36 5f8d9c06c4
Exists in master

Merge remote-tracking branch 'upstream/master'

Showing 2 changed files   Show diff stats
src/sass/_logistica-pedido-ruta.scss
Diff comments   View file @ 2e8c7cd
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 @ 2e8c7cd
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 @import 'tabs'; 19 @import 'tabs';
19 20
20 21
21 //OCULTA FLECHAS INPUT NUMBER 22 //OCULTA FLECHAS INPUT NUMBER
22 input[type='number'] { 23 input[type='number'] {
23 -moz-appearance:textfield; 24 -moz-appearance:textfield;
24 } 25 }
25 input::-webkit-outer-spin-button, 26 input::-webkit-outer-spin-button,
26 input::-webkit-inner-spin-button { 27 input::-webkit-inner-spin-button {
27 -webkit-appearance: none; 28 -webkit-appearance: none;
28 } 29 }
29 30
30 .d-md-grid{ 31 .d-md-grid{
31 @media (min-width: 768px) { 32 @media (min-width: 768px) {
32 display: grid !important; 33 display: grid !important;
33 } 34 }
34 } 35 }
35 36
36 .btn-outline-debo{ 37 .btn-outline-debo{
37 background-color: transparent; 38 background-color: transparent;
38 color: $primary-color; 39 color: $primary-color;
39 border-color: $primary-color; 40 border-color: $primary-color;
40 &:hover{ 41 &:hover{
41 color: #FFF; 42 color: #FFF;
42 border-color: transparent; 43 border-color: transparent;
43 background-color: $primary-color; 44 background-color: $primary-color;
44 } 45 }
45 } 46 }
46 47