Merge branch 'develop' of http://git.focasoftware.com/npm/wrapper-demo

Benjamin Rodriguez
2 parents 34a480183b c754f89c8a
Showing 6 changed files Show diff stats
gulpfile.js
img/logo-foca.png
img/logofoca.png
src/sass/_botonera-principal.scss
src/sass/_login.scss
src/sass/general.scss
@@ -82,7 +82,7 @@ gulp.task(&#39;webserver&#39;, function() {
     pump [
         connect.server(
             {
-                port: 8086,
+                port: 4203,
                 host: '0.0.0.0',
                 livereload: true
             }
@@ -20,6 +20,7 @@
         position: relative;
         width: 90px;
         outline: 0;
+        transition: 0.3s;
         span {
             left: 0;
             position: absolute;
@@ -254,44 +255,41 @@
         }
     }
  
-    .btn-tareas-pausadas{
-        background-color: #cd9035;
-        border-color: #cd9035 !important;
-        height: 30px;
-        text-align: center;
-        width: 280px;
+    .btn-tareas-pausadas {
+        padding-left: 2rem;
+        padding-right: 2rem;
+        border-radius: 4px;
+        font-size: 14px;
+        width: auto;
+        height: 35px;
+        color: white;
         background-image: none;
-        flood-color: #ffffff;
-        &:hover {
-            background-color: #cd9035;
-        }
+        background-color: #cd9035;
+        transition: 0.3s;
+        &:hover,
         &:focus {
             background-color: #cd9035;
         }
     }
  
-    .dropdown-tareas-pausadas{
-        background: linear-gradient(0 ,#ffffff, #e6e6e6);
-        position: absolute;
-        will-change: transform;
-        top: 0px;
-        left: 0px;
-        transform: translate3d(0px, 0px, 0px);
-        margin-bottom: 5px;
+    .dropdown-tareas-pausadas {
         padding: 0px;
-        box-sizing: content-box;
-        border-radius: 12px;
-        font: small;
+        border-radius: 4px;
+        background: linear-gradient(0, #ffffff, #e6e6e6);
         transform: translate3d(0px, 30px, 0px);
+        box-sizing: content-box;
+        font-size: 12px;
+        transition: 0.3s;
     }
  
-    .items-dropdown{
-        background-color:rgba(0, 0, 0, 0);
-        cursor: hand;
-        &:hover {
+    .items-dropdown {
+        cursor: pointer;
+        width: auto;
+        background-color: rgba(0, 0, 0, 0);
+        transition: 0.3s;
+        &:hover,
+        &:focus {
             background-color: #e6e6e6;
-            width: 98%;
-            border-radius: 12px;
         }
     }
  
-.login {
-    background: linear-gradient(0 ,#ffffff, #e6e6e6);
-    border: 1px solid #000000;
-    border-radius: 3px;
-    height: calc(280px + 1em);
-    left: calc(50% - 130px);
-    opacity: 0.7;
-    position: absolute;
-    text-align: center;
-    top: 190px;
-    width: 260px;
-    &-titulo {
-        border-bottom: 1px solid #ffffff;
-        padding: 5px 0;
-    }
-    &-campo {
-        label {
-            display: block;
-            font-size: 12px;
-            margin: 5px 0 0;
-        }
-        input {
-            -moz-border-radius: 10px;
-            -khtml-border-radius: 10px;
-            -webkit-border-radius: 10px;
-            -webkit-appearance: none;
-            padding-right: 5%;
-            padding-left: 5%;
-            border-radius: 10px;
-            outline: 0;
-            border-color: transparent;
-            text-transform: none !important;
-            &:focus {
-                border-color: #ff9900;
-            }
-        }
-    }
-    &-button {
-        width: 80%;
-        background-color: #cd9035;
-        color: white;
-        &:hover {
-            background-color: #a7743d;
-            color: white
-        }
-        &:focus {
-            color: white;
-        }
-    }
-    &-alerta-error {
-        width: 260px;
-        left: calc(50% - 130px);
-        top: calc(383px + 1.5em);
-    }
+.bg-gradient-login {
+    background: linear-gradient(0, #ffffff, #e6e6e6);
+}
+
+.login-small-text {
+    font-size: 12px;
 }
  
 @media (min-width: 768px) {
-    .img-login{
-        height: 190px;
+    .img-login {
         width: 211px;
     }
 }
  
 @media (max-width: 768px) {
-    .img-login{
-        height: 150px;
+    .img-login {
         width: 158px;
     }
 }
+
+.input-icon {
+    width: 100%;
+    pointer-events: none;
+    float: right;
+    position: absolute;
+    align-self: center;
+    z-index: 10;
+    div {
+        pointer-events: all;
+        float: right;
+    }
+}
@@ -386,3 +386,7 @@ button.clear-input {
         transform: translateY(0);
     }
 }
+
+.text-transform-none {
+    text-transform: none !important;
+}
...	...	@@ -82,7 +82,7 @@ gulp.task('webserver', function() {
82	82	pump [
83	83	connect.server(
84	84	{
85		- port: 8086,
	85	+ port: 4203,
86	86	host: '0.0.0.0',
87	87	livereload: true
88	88	}
...	...	@@ -20,6 +20,7 @@
20	20	position: relative;
21	21	width: 90px;
22	22	outline: 0;
	23	+ transition: 0.3s;
23	24	span {
24	25	left: 0;
25	26	position: absolute;
...	...	@@ -254,44 +255,41 @@
254	255	}
255	256	}
256	257
257		- .btn-tareas-pausadas{
258		- background-color: #cd9035;
259		- border-color: #cd9035 !important;
260		- height: 30px;
261		- text-align: center;
262		- width: 280px;
	258	+ .btn-tareas-pausadas {
	259	+ padding-left: 2rem;
	260	+ padding-right: 2rem;
	261	+ border-radius: 4px;
	262	+ font-size: 14px;
	263	+ width: auto;
	264	+ height: 35px;
	265	+ color: white;
263	266	background-image: none;
264		- flood-color: #ffffff;
265		- &:hover {
266		- background-color: #cd9035;
267		- }
	267	+ background-color: #cd9035;
	268	+ transition: 0.3s;
	269	+ &:hover,
268	270	&:focus {
269	271	background-color: #cd9035;
270	272	}
271	273	}
272	274
273		- .dropdown-tareas-pausadas{
274		- background: linear-gradient(0 ,#ffffff, #e6e6e6);
275		- position: absolute;
276		- will-change: transform;
277		- top: 0px;
278		- left: 0px;
279		- transform: translate3d(0px, 0px, 0px);
280		- margin-bottom: 5px;
	275	+ .dropdown-tareas-pausadas {
281	276	padding: 0px;
282		- box-sizing: content-box;
283		- border-radius: 12px;
284		- font: small;
	277	+ border-radius: 4px;
	278	+ background: linear-gradient(0, #ffffff, #e6e6e6);
285	279	transform: translate3d(0px, 30px, 0px);
	280	+ box-sizing: content-box;
	281	+ font-size: 12px;
	282	+ transition: 0.3s;
286	283	}
287	284
288		- .items-dropdown{
289		- background-color:rgba(0, 0, 0, 0);
290		- cursor: hand;
291		- &:hover {
	285	+ .items-dropdown {
	286	+ cursor: pointer;
	287	+ width: auto;
	288	+ background-color: rgba(0, 0, 0, 0);
	289	+ transition: 0.3s;
	290	+ &:hover,
	291	+ &:focus {
292	292	background-color: #e6e6e6;
293		- width: 98%;
294		- border-radius: 12px;
295	293	}
296	294	}
297	295
1		-.login {
2		- background: linear-gradient(0 ,#ffffff, #e6e6e6);
3		- border: 1px solid #000000;
4		- border-radius: 3px;
5		- height: calc(280px + 1em);
6		- left: calc(50% - 130px);
7		- opacity: 0.7;
8		- position: absolute;
9		- text-align: center;
10		- top: 190px;
11		- width: 260px;
12		- &-titulo {
13		- border-bottom: 1px solid #ffffff;
14		- padding: 5px 0;
15		- }
16		- &-campo {
17		- label {
18		- display: block;
19		- font-size: 12px;
20		- margin: 5px 0 0;
21		- }
22		- input {
23		- -moz-border-radius: 10px;
24		- -khtml-border-radius: 10px;
25		- -webkit-border-radius: 10px;
26		- -webkit-appearance: none;
27		- padding-right: 5%;
28		- padding-left: 5%;
29		- border-radius: 10px;
30		- outline: 0;
31		- border-color: transparent;
32		- text-transform: none !important;
33		- &:focus {
34		- border-color: #ff9900;
35		- }
36		- }
37		- }
38		- &-button {
39		- width: 80%;
40		- background-color: #cd9035;
41		- color: white;
42		- &:hover {
43		- background-color: #a7743d;
44		- color: white
45		- }
46		- &:focus {
47		- color: white;
48		- }
49		- }
50		- &-alerta-error {
51		- width: 260px;
52		- left: calc(50% - 130px);
53		- top: calc(383px + 1.5em);
54		- }
	1	+.bg-gradient-login {
	2	+ background: linear-gradient(0, #ffffff, #e6e6e6);
	3	+}
	4	+
	5	+.login-small-text {
	6	+ font-size: 12px;
55	7	}
56	8
57	9	@media (min-width: 768px) {
58		- .img-login{
59		- height: 190px;
	10	+ .img-login {
60	11	width: 211px;
61	12	}
62	13	}
63	14
64	15	@media (max-width: 768px) {
65		- .img-login{
66		- height: 150px;
	16	+ .img-login {
67	17	width: 158px;
68	18	}
69	19	}
	20	+
	21	+.input-icon {
	22	+ width: 100%;
	23	+ pointer-events: none;
	24	+ float: right;
	25	+ position: absolute;
	26	+ align-self: center;
	27	+ z-index: 10;
	28	+ div {
	29	+ pointer-events: all;
	30	+ float: right;
	31	+ }
	32	+}
...	...	@@ -386,3 +386,7 @@ button.clear-input {
386	386	transform: translateY(0);
387	387	}
388	388	}
	389	+
	390	+.text-transform-none {
	391	+ text-transform: none !important;
	392	+}