Commit 018b9b655e3ddc44f8867c2fcde39b2845196a5f
1 parent
7adf531e
Exists in
master
and in
4 other branches
Fix: align to right the share links on archived program
Showing
1 changed file
with
31 additions
and
14 deletions
Show diff stats
src/app/pages/programas/programas.scss
| @@ -11,12 +11,34 @@ | @@ -11,12 +11,34 @@ | ||
| 11 | 11 | ||
| 12 | .program-preview { | 12 | .program-preview { |
| 13 | 13 | ||
| 14 | - .program-preview--box { | 14 | + &--box { |
| 15 | position: relative; | 15 | position: relative; |
| 16 | background-color: #f1f1f1; | 16 | background-color: #f1f1f1; |
| 17 | } | 17 | } |
| 18 | 18 | ||
| 19 | - .program-preview--banner { | 19 | + &--box--content-wrapper { |
| 20 | + padding: 48px; | ||
| 21 | + position: relative; | ||
| 22 | + | ||
| 23 | + } | ||
| 24 | + &--archived { | ||
| 25 | + .program-preview--box--content-wrapper { | ||
| 26 | + text-align: right; | ||
| 27 | + padding: 10px; | ||
| 28 | + | ||
| 29 | + @media screen and (max-width: $screen-xs) { | ||
| 30 | + text-align: center; | ||
| 31 | + padding-top: 50px; | ||
| 32 | + } | ||
| 33 | + } | ||
| 34 | + | ||
| 35 | + .program-preview--share { | ||
| 36 | + margin-bottom: 0; | ||
| 37 | + } | ||
| 38 | + } | ||
| 39 | + | ||
| 40 | + | ||
| 41 | + &--banner { | ||
| 20 | width: 100%; | 42 | width: 100%; |
| 21 | height: 400px; | 43 | height: 400px; |
| 22 | 44 | ||
| @@ -35,7 +57,7 @@ | @@ -35,7 +57,7 @@ | ||
| 35 | } | 57 | } |
| 36 | } | 58 | } |
| 37 | 59 | ||
| 38 | - .program-preview--icon { | 60 | + &--icon { |
| 39 | $icon-size: 80px; | 61 | $icon-size: 80px; |
| 40 | $icon-scale: 0.7; | 62 | $icon-scale: 0.7; |
| 41 | position: absolute; | 63 | position: absolute; |
| @@ -57,19 +79,14 @@ | @@ -57,19 +79,14 @@ | ||
| 57 | } | 79 | } |
| 58 | } | 80 | } |
| 59 | 81 | ||
| 60 | - .program-preview--box--content-wrapper { | ||
| 61 | - padding: 48px; | ||
| 62 | - position: relative; | ||
| 63 | - } | ||
| 64 | - | ||
| 65 | - .program-preview--abstract { | 82 | + &--abstract { |
| 66 | h2 { | 83 | h2 { |
| 67 | margin-top: 22px; // parent.margin + this.margin = 48 + 22 = 72px; | 84 | margin-top: 22px; // parent.margin + this.margin = 48 + 22 = 72px; |
| 68 | margin-bottom: 32px; | 85 | margin-bottom: 32px; |
| 69 | } | 86 | } |
| 70 | } | 87 | } |
| 71 | 88 | ||
| 72 | - .program-preview--abstract-details { | 89 | + &--abstract-details { |
| 73 | p { | 90 | p { |
| 74 | color: #484848; | 91 | color: #484848; |
| 75 | font-size: 14px; | 92 | font-size: 14px; |
| @@ -78,7 +95,7 @@ | @@ -78,7 +95,7 @@ | ||
| 78 | } | 95 | } |
| 79 | } | 96 | } |
| 80 | 97 | ||
| 81 | - .program-preview--share { | 98 | + &--share { |
| 82 | margin-bottom: 20px; | 99 | margin-bottom: 20px; |
| 83 | position: relative; | 100 | position: relative; |
| 84 | 101 | ||
| @@ -110,8 +127,8 @@ | @@ -110,8 +127,8 @@ | ||
| 110 | } | 127 | } |
| 111 | } | 128 | } |
| 112 | 129 | ||
| 113 | - .program-preview--share-label, | ||
| 114 | - .program-preview--share-directive { | 130 | + &--share-label, |
| 131 | + &--share-directive { | ||
| 115 | display: inline-block; | 132 | display: inline-block; |
| 116 | vertical-align: middle; | 133 | vertical-align: middle; |
| 117 | } | 134 | } |
| @@ -262,7 +279,7 @@ | @@ -262,7 +279,7 @@ | ||
| 262 | h3 { | 279 | h3 { |
| 263 | font-weight: bold; | 280 | font-weight: bold; |
| 264 | } | 281 | } |
| 265 | - | 282 | + |
| 266 | .sub-section-odd {background-color: #f1f1f1; } | 283 | .sub-section-odd {background-color: #f1f1f1; } |
| 267 | .sub-section-even {background-color: #ffffff; } | 284 | .sub-section-even {background-color: #ffffff; } |
| 268 | 285 |