agrego estilos de logistica

Eric Fernandez
1 parent ab80553d90
Showing 2 changed files with 145 additions and 0 deletions Show diff stats
src/sass/_logistica-pedido-ruta.scss
src/sass/general.scss
@@ -0,0 +1,144 @@
+.arrastrando {
+    opacity: 0.5;
+}
+.vertical {
+  display: inline-block;
+  width: 20%;
+  height: 40px;
+  -webkit-transform: rotate(-90deg); /* Chrome, Safari, Opera */
+  transform: rotate(-90deg);
+}
+.progress-circle{
+    width: 150px;
+    height: 150px;
+    line-height: 150px;
+    background: none;
+    margin: 0 auto;
+    box-shadow: none;
+    position: relative;
+}
+.progress-circle:after{
+    content: "";
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+    border: 12px solid #fff;
+    position: absolute;
+    top: 0;
+    left: 0;
+}
+.progress-circle > span{
+    width: 50%;
+    height: 100%;
+    overflow: hidden;
+    position: absolute;
+    top: 0;
+    z-index: 1;
+}
+.progress-circle .progress-left{
+    left: 0;
+}
+.progress-circle .progress-bar{
+    width: 100%;
+    height: 100%;
+    background: none;
+    border-width: 12px;
+    border-style: solid;
+    position: absolute;
+    top: 0;
+}
+.progress-circle .progress-left .progress-bar{
+    left: 100%;
+    border-top-right-radius: 80px;
+    border-bottom-right-radius: 80px;
+    border-left: 0;
+    -webkit-transform-origin: center left;
+    transform-origin: center left;
+}
+.progress-circle .progress-right{
+    right: 0;
+}
+.progress-circle .progress-right .progress-bar{
+    left: -100%;
+    border-top-left-radius: 80px;
+    border-bottom-left-radius: 80px;
+    border-right: 0;
+    -webkit-transform-origin: center right;
+    transform-origin: center right;
+    animation: loading-1 1.8s linear forwards;
+}
+.progress-circle .progress-value{
+    width: 90%;
+    height: 90%;
+    border-radius: 50%;
+    background: #44484b;
+    font-size: 24px;
+    color: #fff;
+    line-height: 135px;
+    text-align: center;
+    position: absolute;
+    top: 5%;
+    left: 5%;
+}
+.progress-circle.blue .progress-bar{
+    border-color: #049dff;
+}
+.progress-circle.blue .progress-left .progress-bar{
+    animation: loading-2 1.5s linear forwards 1.8s;
+}
+@keyframes loading-1{
+    0%{
+        -webkit-transform: rotate(0deg);
+        transform: rotate(0deg);
+    }
+    100%{
+        -webkit-transform: rotate(180deg);
+        transform: rotate(180deg);
+    }
+}
+@keyframes loading-2{
+    0%{
+        -webkit-transform: rotate(0deg);
+        transform: rotate(0deg);
+    }
+    100%{
+        -webkit-transform: rotate(180deg);
+        transform: rotate(180deg);
+    }
+}
+@keyframes loading-3{
+    0%{
+        -webkit-transform: rotate(0deg);
+        transform: rotate(0deg);
+    }
+    100%{
+        -webkit-transform: rotate(90deg);
+        transform: rotate(90deg);
+    }
+}
+@keyframes loading-4{
+    0%{
+        -webkit-transform: rotate(0deg);
+        transform: rotate(0deg);
+    }
+    100%{
+        -webkit-transform: rotate(36deg);
+        transform: rotate(36deg);
+    }
+}
+@keyframes loading-5{
+    0%{
+        -webkit-transform: rotate(0deg);
+        transform: rotate(0deg);
+    }
+    100%{
+        -webkit-transform: rotate(126deg);
+        transform: rotate(126deg);
+    }
+}
+@media only screen and (max-width: 990px){
+    .progress{ margin-bottom: 20px; }
+}
+.foca-alto-progress{
+    height: 2rem;
+}
@@ -15,6 +15,7 @@ $primary-color: #e09125;
 @import 'acciones-mobile';
 @import 'swiper';
 @import 'foca-crear';
+@import 'logistica-pedido-ruta';
  
  
 //OCULTA FLECHAS INPUT NUMBER
...	...	@@ -0,0 +1,144 @@
	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	+}
...	...	@@ -15,6 +15,7 @@ $primary-color: #e09125;
15	15	@import 'acciones-mobile';
16	16	@import 'swiper';
17	17	@import 'foca-crear';
	18	+@import 'logistica-pedido-ruta';
18	19
19	20
20	21	//OCULTA FLECHAS INPUT NUMBER