Commit badd873503c1978682924870c75907b4e5de66db
1 parent
66040af53e
Exists in
develop
Add
Transicion a boton de categorias
Showing
1 changed file
with
4 additions
and
2 deletions
Show diff stats
src/app/modules/seleccion-articulos/seleccion-articulos.component.scss
| 1 | $primary: #aa006b; | 1 | $primary: #aa006b; |
| 2 | 2 | ||
| 3 | .box-categorias { | 3 | .box-categorias { |
| 4 | height: calc(100% - 100px) !important; | 4 | height: calc(100% - 100px) !important; |
| 5 | } | 5 | } |
| 6 | 6 | ||
| 7 | .active { | 7 | .active { |
| 8 | transition: 0.3s; | ||
| 8 | background-color: white; | 9 | background-color: white; |
| 9 | border-bottom: 3px solid $primary !important; | 10 | border-bottom: 3px solid $primary !important; |
| 10 | border-top: 3px solid $primary !important; | 11 | border-top: 3px solid $primary !important; |
| 11 | border-left: 3px solid $primary !important; | 12 | border-left: 3px solid $primary !important; |
| 12 | border-right: 3px solid $primary !important; | 13 | border-right: 3px solid $primary !important; |
| 13 | } | 14 | } |
| 14 | 15 | ||
| 15 | .border-bottom-effect { | 16 | .border-bottom-effect { |
| 16 | border: none; | 17 | border: none; |
| 17 | position: relative; | 18 | position: relative; |
| 18 | &:hover { | 19 | &:hover { |
| 19 | border: none; | 20 | border: none; |
| 20 | } | 21 | } |
| 21 | &::after { | 22 | &::after { |
| 22 | content: ""; | 23 | content: ""; |
| 23 | position: absolute; | 24 | position: absolute; |
| 24 | width: 0px; | 25 | width: 0px; |
| 25 | height: 3px; | 26 | height: 3px; |
| 26 | left: 50%; | 27 | left: 50%; |
| 27 | bottom: 0; | 28 | bottom: 0; |
| 28 | background-color: $primary; | 29 | background-color: $primary; |
| 29 | transition: all ease-in-out 0.2s; | 30 | transition: all ease-in-out 0.2s; |
| 30 | } | 31 | } |
| 31 | &:hover::after { | 32 | &:hover::after { |
| 32 | width: 100%; | 33 | width: 100%; |
| 33 | left: 0; | 34 | left: 0; |
| 34 | } | 35 | } |
| 35 | } | 36 | } |
| 36 | 37 | ||
| 37 | .card { | 38 | .card { |
| 38 | border: none; | 39 | border: none; |
| 39 | } | 40 | } |
| 40 | 41 | ||
| 41 | .line-height-sm { | 42 | .line-height-sm { |
| 42 | line-height: 1.2; | 43 | line-height: 1.2; |
| 43 | } | 44 | } |
| 44 | 45 | ||
| 45 | #content.media-pantalla,#boxCarrito.media-pantalla { | 46 | #content.media-pantalla, |
| 47 | #boxCarrito.media-pantalla { | ||
| 46 | max-height: 60% !important; | 48 | max-height: 60% !important; |
| 47 | } | 49 | } |
| 48 | 50 | ||
| 49 | .cat-content.media-pantalla { | 51 | .cat-content.media-pantalla { |
| 50 | margin: 0.5rem 0.7rem !important; | 52 | margin: 0.5rem 0.7rem !important; |
| 51 | height: 76% !important; | 53 | height: 76% !important; |
| 52 | } | 54 | } |
| 53 | 55 | ||
| 54 | .cat-box.media-pantalla{ | 56 | .cat-box.media-pantalla { |
| 55 | height: calc(100% - 85px) !important; | 57 | height: calc(100% - 85px) !important; |
| 56 | } | 58 | } |
| 57 | 59 | ||
| 58 | .cat-btn.media-pantalla { | 60 | .cat-btn.media-pantalla { |
| 59 | height: 7% !important; | 61 | height: 7% !important; |
| 60 | } | 62 | } |
| 61 | 63 |