Update animations / transitions

Leonardo Merlin
1 parent 80fd000f
Showing 2 changed files with 18 additions and 3 deletions Show diff stats
src/app/components/programas/programas.html
src/app/components/programas/programas.scss
 <div id="lista-de-programas" class="row">
-  <div class="col-sm-4">
+  <div class="col-sm-4 col-md-3">
     <div class="category-list">
       <nav class="navigation">
         <h3 class="category-list--title"><b>Programas</b> por Tema</h3>
@@ -19,7 +19,7 @@
     </div>
   </div>
-  <div class="col-sm-8">
+  <div class="col-sm-8 col-md-9">
     <article class="program-list">
       <header class="header">
         <h2>Programas <span class="small">({{vm.filtredProgramList.length}}/{{::vm.programs.length}})</span></h2>
@@ -66,8 +66,23 @@
         z-index: 0;
         .active & {
-            transform: scale(15);
             z-index: -1;
+
+            @media (max-width: $screen-xs) {
+                transform: scale(20);
+            }
+
+            @media (min-width: $screen-xs + 1) {
+                transform: scale(40);
+            }
+
+            @media (min-width: $screen-sm + 1) {
+                transform: scale(20);
+            }
+
+            // @media (min-width: $screen-md + 1) {
+            //     transform: scale(20);
+            // }
         }
         @each $category, $color in $categories {
1	<div id="lista-de-programas" class="row">	1	<div id="lista-de-programas" class="row">
2	- <div class="col-sm-4">	2	+ <div class="col-sm-4 col-md-3">
3	<div class="category-list">	3	<div class="category-list">
4	<nav class="navigation">	4	<nav class="navigation">
5	<h3 class="category-list--title"><b>Programas</b> por Tema</h3>	5	<h3 class="category-list--title"><b>Programas</b> por Tema</h3>
	@@ -19,7 +19,7 @@		@@ -19,7 +19,7 @@
19	</div>	19	</div>
20	</div>	20	</div>
21		21
22	- <div class="col-sm-8">	22	+ <div class="col-sm-8 col-md-9">
23	<article class="program-list">	23	<article class="program-list">
24	<header class="header">	24	<header class="header">
25	<h2>Programas <span class="small">({{vm.filtredProgramList.length}}/{{::vm.programs.length}})</span></h2>	25	<h2>Programas <span class="small">({{vm.filtredProgramList.length}}/{{::vm.programs.length}})</span></h2>
	@@ -66,8 +66,23 @@		@@ -66,8 +66,23 @@
66	z-index: 0;	66	z-index: 0;
67		67
68	.active & {	68	.active & {
69	- transform: scale(15);
70	z-index: -1;	69	z-index: -1;
		70	+
		71	+ @media (max-width: $screen-xs) {
		72	+ transform: scale(20);
		73	+ }
		74	+
		75	+ @media (min-width: $screen-xs + 1) {
		76	+ transform: scale(40);
		77	+ }
		78	+
		79	+ @media (min-width: $screen-sm + 1) {
		80	+ transform: scale(20);
		81	+ }
		82	+
		83	+ // @media (min-width: $screen-md + 1) {
		84	+ // transform: scale(20);
		85	+ // }
71	}	86	}
72		87
73	@each $category, $color in $categories {	88	@each $category, $color in $categories {