Florencia Cazzola / wrapper-demo

Download as
Browse Code ยป

Commit 2045e69269751b2d0c1959273f59c405c35763af

Authored by --global
1 parent c7c46a609f
Exists in master and in 1 other branch develop

imagen nota pedido

Showing 1 changed file with 3 additions and 2 deletions   Show diff stats
src/sass/_botonera-principal.scss
Diff comments   View file @ 2045e69
1 .botonera-principal { 1 .botonera-principal {
2 menuitem { 2 menuitem {
3 display: inline-block; 3 display: inline-block;
4 height: 130px; 4 height: 130px;
5 text-align: center; 5 text-align: center;
6 width: 180px; 6 width: 180px;
7 @media (max-width: 576px) { 7 @media (max-width: 576px) {
8 width: 100%; 8 width: 100%;
9 } 9 }
10 @media (min-width: 992px) and (max-width: 1200px){ 10 @media (min-width: 992px) and (max-width: 1200px){
11 width: 150px; 11 width: 150px;
12 } 12 }
13 } 13 }
14 button { 14 button {
15 background-image: url('../img/botonera.png'); 15 background-image: url('../img/botonera.png');
16 border-radius: 12px; 16 border-radius: 12px;
17 border-width: 0; 17 border-width: 0;
18 height: 90px; 18 height: 90px;
19 position: relative; 19 position: relative;
20 width: 90px; 20 width: 90px;
21 span { 21 span {
22 left: 0; 22 left: 0;
23 position: absolute; 23 position: absolute;
24 text-align: center; 24 text-align: center;
25 top: 90px; 25 top: 90px;
26 width: 100%; 26 width: 100%;
27 font-size: 12px; 27 font-size: 12px;
28 color: #777777; 28 color: #777777;
29 } 29 }
30 } 30 }
31 &-menu { 31 &-menu {
32 width: 100%; 32 width: 100%;
33 padding-left: 90px; 33 padding-left: 90px;
34 @media (max-width: 576px) { 34 @media (max-width: 576px) {
35 padding: 0; 35 padding: 0;
36 } 36 }
37 } 37 }
38 &-logo { 38 &-logo {
39 width: 80%; 39 width: 80%;
40 opacity: .8; 40 opacity: .8;
41 @media (max-width: 576px) { 41 @media (max-width: 576px) {
42 width: 100%; 42 width: 100%;
43 } 43 }
44 } 44 }
45 &-vacio { 45 &-vacio {
46 & button { 46 & button {
47 background-position: -4380px 0; 47 background-position: -4380px 0;
48 &:hover { 48 &:hover {
49 background-position: -4380px -90px; 49 background-position: -4380px -90px;
50 } 50 }
51 } 51 }
52 } 52 }
53 &-abrir-turno { 53 &-abrir-turno {
54 & button { 54 & button {
55 background-position: 0 0; 55 background-position: 0 0;
56 &:hover { 56 &:hover {
57 background-position: 0 -90px; 57 background-position: 0 -90px;
58 } 58 }
59 } 59 }
60 } 60 }
61 &-cerrar-turno { 61 &-cerrar-turno {
62 & button { 62 & button {
63 background-position: -90px 0; 63 background-position: -90px 0;
64 &:hover { 64 &:hover {
65 background-position: -90px -90px; 65 background-position: -90px -90px;
66 } 66 }
67 } 67 }
68 } 68 }
69 &-caja { 69 &-caja {
70 & button { 70 & button {
71 background-position: -180px 0; 71 background-position: -180px 0;
72 &:hover { 72 &:hover {
73 background-position: -180px -90px; 73 background-position: -180px -90px;
74 } 74 }
75 } 75 }
76 } 76 }
77 &-facturador { 77 &-facturador {
78 & button { 78 & button {
79 background-position: -270px 0px; 79 background-position: -270px 0px;
80 &:hover { 80 &:hover {
81 background-position: -270px -90px; 81 background-position: -270px -90px;
82 } 82 }
83 } 83 }
84 } 84 }
85 &-nota-pedido { 85 &-nota-pedido {
86 & button { 86 & button {
87 background-position: -1250px 0px; 87 background-image: url('../img/notaDePedido.png');
88 background-size: 90px 90px;
88 &:hover { 89 &:hover {
89 background-position: -1250px -90px; 90 background-color: rgb(250,250,250);
90 } 91 }
91 } 92 }
92 } 93 }
93 &-remito { 94 &-remito {
94 & button { 95 & button {
95 background-position: -4560px 0px; 96 background-position: -4560px 0px;
96 &:hover { 97 &:hover {
97 background-position: -4560px -90px; 98 background-position: -4560px -90px;
98 } 99 }
99 } 100 }
100 } 101 }
101 &-hoja-ruta { 102 &-hoja-ruta {
102 & button { 103 & button {
103 background-position: -4650px 0px; 104 background-position: -4650px 0px;
104 &:hover { 105 &:hover {
105 background-position: -4650px -90px; 106 background-position: -4650px -90px;
106 } 107 }
107 } 108 }
108 } 109 }
109 &-hoja-ruta-transportista { 110 &-hoja-ruta-transportista {
110 & button { 111 & button {
111 background-image: url('../img/hojaRutaVolante.png'); 112 background-image: url('../img/hojaRutaVolante.png');
112 background-size: 90px 90px; 113 background-size: 90px 90px;
113 &:hover { 114 &:hover {
114 background-color: rgb(250,250,250); 115 background-color: rgb(250,250,250);
115 } 116 }
116 } 117 }
117 } 118 }
118 &-seguimiento { 119 &-seguimiento {
119 & button { 120 & button {
120 background-image: url('../img/seguimientoNotaPedido.png'); 121 background-image: url('../img/seguimientoNotaPedido.png');
121 background-size: 90px 90px; 122 background-size: 90px 90px;
122 background-position: 15px 10px; 123 background-position: 15px 10px;
123 &:hover { 124 &:hover {
124 background-color: rgb(250,250,250); 125 background-color: rgb(250,250,250);
125 } 126 }
126 } 127 }
127 } 128 }
128 &-seguimiento-hoja-ruta { 129 &-seguimiento-hoja-ruta {
129 & button { 130 & button {
130 background-image: url('../img/seguimientoHojaRuta.png'); 131 background-image: url('../img/seguimientoHojaRuta.png');
131 background-size: 90px 90px; 132 background-size: 90px 90px;
132 background-position: 15px 10px; 133 background-position: 15px 10px;
133 &:hover { 134 &:hover {
134 background-color: rgb(250,250,250); 135 background-color: rgb(250,250,250);
135 } 136 }
136 } 137 }
137 } 138 }
138 &-cobranzas { 139 &-cobranzas {
139 & button { 140 & button {
140 background-position: -1880 0px; 141 background-position: -1880 0px;
141 &:hover { 142 &:hover {
142 background-position: -1880 -90px; 143 background-position: -1880 -90px;
143 } 144 }
144 } 145 }
145 } 146 }
146 &-seguimiento-cobranzas { 147 &-seguimiento-cobranzas {
147 & button { 148 & button {
148 background-image: url('../img/seguimientoCobranza.png'); 149 background-image: url('../img/seguimientoCobranza.png');
149 background-size: 90px 90px; 150 background-size: 90px 90px;
150 background-position: 15px 10px; 151 background-position: 15px 10px;
151 &:hover { 152 &:hover {
152 background-color: rgb(250,250,250); 153 background-color: rgb(250,250,250);
153 } 154 }
154 } 155 }
155 } 156 }
156 &-vehiculo { 157 &-vehiculo {
157 & button { 158 & button {
158 background-image: url('../img/abmVehiculos.png'); 159 background-image: url('../img/abmVehiculos.png');
159 background-size: 90px 90px; 160 background-size: 90px 90px;
160 &:hover { 161 &:hover {
161 background-color: rgb(250,250,250); 162 background-color: rgb(250,250,250);
162 } 163 }
163 } 164 }
164 } 165 }
165 &-precio-condicion { 166 &-precio-condicion {
166 & button { 167 & button {
167 background-image: url('../img/abmPrecios.png'); 168 background-image: url('../img/abmPrecios.png');
168 background-size: 90px 90px; 169 background-size: 90px 90px;
169 &:hover { 170 &:hover {
170 background-color: rgb(250,250,250); 171 background-color: rgb(250,250,250);
171 } 172 }
172 } 173 }
173 } 174 }
174 &-chofer { 175 &-chofer {
175 & button { 176 & button {
176 background-image: url('../img/abmChofer.png'); 177 background-image: url('../img/abmChofer.png');
177 background-size: 90px 90px; 178 background-size: 90px 90px;
178 &:hover { 179 &:hover {
179 background-color: rgb(250,250,250); 180 background-color: rgb(250,250,250);
180 } 181 }
181 } 182 }
182 } 183 }
183 .swiper-pagination { 184 .swiper-pagination {
184 bottom: 0px !important; 185 bottom: 0px !important;
185 } 186 }
186 187
187 .swiper-button-next { 188 .swiper-button-next {
188 background-image: url('../img/derecha.png'); 189 background-image: url('../img/derecha.png');
189 } 190 }
190 191
191 .swiper-button-prev { 192 .swiper-button-prev {
192 background-image: url('../img/izquierda.png'); 193 background-image: url('../img/izquierda.png');
193 } 194 }
194 195
195 @media (min-width: 992px){ 196 @media (min-width: 992px){
196 a{ 197 a{
197 margin-top: 2.5rem; 198 margin-top: 2.5rem;
198 } 199 }
199 } 200 }
200 } 201 }
201 202