Nicolás Guarnieri / wrapper-demo

Download as
Browse Code »

Commit c3877a5bafc144e8f78146b4d032555dcda05758

Authored by Jose Pinto
2 parents 89a7c71ea3 94ef1b9024
Exists in master

Merge branch 'master' into 'master' 

Master(efernandez)

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