Commit 445542a61cefa59df91bcc633042b1eeee3a5d19
1 parent
822ecd10a2
Exists in
20200117-axion-responsive
scss formatter
Showing
9 changed files
with
63 additions
and
64 deletions
Show diff stats
src/app/modules/cancelar-compra/cancelar-compra.component.scss
| 1 | .bg-grey { | 1 | .bg-grey { |
| 2 | background-color: rgb(212, 212, 212); | 2 | background-color: rgb(212, 212, 212); |
| 3 | } | 3 | } |
| 4 | 4 | ||
| 5 | #cancelCard.media-pantalla{ | 5 | #cancelCard.media-pantalla { |
| 6 | height: 45% !important; | 6 | height: 45% !important; |
| 7 | margin-top: 1rem !important; | 7 | margin-top: 1rem !important; |
| 8 | } | 8 | } |
| 9 | 9 | ||
| 10 | #cancelCard.media-pantalla h4{ | 10 | #cancelCard.media-pantalla h4 { |
| 11 | margin-top: 1rem !important; | 11 | margin-top: 1rem !important; |
| 12 | } | 12 | } |
| 13 | 13 | ||
| 14 | #cancelImg.media-pantalla{ | 14 | #cancelImg.media-pantalla { |
| 15 | height: 20% !important; | 15 | height: 20% !important; |
| 16 | } | 16 | } |
| 17 | 17 | ||
| 18 | #cancelImg.media-pantalla img{ | 18 | #cancelImg.media-pantalla img { |
| 19 | max-width: 15% !important; | 19 | max-width: 15% !important; |
| 20 | } | 20 | } |
| 21 | 21 |
src/app/modules/carrito/carrito.component.scss
| 1 | .bg-total { | 1 | .bg-total { |
| 2 | width: 75px; | 2 | width: 75px; |
| 3 | border-radius: 1.5rem; | 3 | border-radius: 1.5rem; |
| 4 | } | 4 | } |
| 5 | 5 | ||
| 6 | #art-carrito.media-pantalla{ | 6 | #art-carrito.media-pantalla { |
| 7 | min-height: 130px !important; | 7 | min-height: 130px !important; |
| 8 | } | 8 | } |
| 9 | 9 | ||
| 10 | #carrito.media-pantalla{ | 10 | #carrito.media-pantalla { |
| 11 | max-height: 60% !important; | 11 | max-height: 60% !important; |
| 12 | } | 12 | } |
| 13 | 13 |
src/app/modules/forma-pago/forma-pago.component.scss
| 1 | #card1.media-pantalla{ | ||
| 2 | position: absolute; | ||
| 3 | bottom: 150px; | ||
| 4 | -webkit-box-flex: 0; | ||
| 5 | flex: 0 0 41.6666666667%; | ||
| 6 | max-width: 41.6666666667%; | ||
| 7 | left: 10%; | ||
| 8 | margin-left: 0 !important; | ||
| 9 | } | ||
| 10 | |||
| 11 | #card2.media-pantalla{ | ||
| 12 | position: absolute; | ||
| 13 | bottom: 150px; | ||
| 14 | -webkit-box-flex: 0; | ||
| 15 | flex: 0 0 41.6666666667%; | ||
| 16 | max-width: 41.6666666667%; | ||
| 17 | right: 10%; | ||
| 18 | margin-right: 0 !important; | ||
| 19 | } | ||
| 20 |
src/app/modules/info-formas-pago/info-formas-pago.component.scss
| 1 | .mt-6 { | 1 | .mt-6 { |
| 2 | margin-top: 4.5rem; | 2 | margin-top: 4.5rem; |
| 3 | } | 3 | } |
| 4 | 4 | ||
| 5 | #card1.media-pantalla{ | 5 | #card1.media-pantalla { |
| 6 | position: absolute; | 6 | position: absolute; |
| 7 | bottom: 0; | 7 | bottom: 0; |
| 8 | -webkit-box-flex: 0; | 8 | -webkit-box-flex: 0; |
| 9 | flex: 0 0 41.6666666667%; | 9 | flex: 0 0 41.6666666667%; |
| 10 | max-width: 41.6666666667%; | 10 | max-width: 41.6666666667%; |
| 11 | left: 5%; | 11 | left: 5%; |
| 12 | margin-left: 0 !important; | 12 | margin-left: 0 !important; |
| 13 | } | 13 | } |
| 14 | 14 | ||
| 15 | #card2.media-pantalla{ | 15 | #card2.media-pantalla { |
| 16 | position: absolute; | 16 | position: absolute; |
| 17 | bottom: 0; | 17 | bottom: 0; |
| 18 | -webkit-box-flex: 0; | 18 | -webkit-box-flex: 0; |
| 19 | flex: 0 0 41.6666666667%; | 19 | flex: 0 0 41.6666666667%; |
| 20 | max-width: 41.6666666667%; | 20 | max-width: 41.6666666667%; |
| 21 | right: 5%; | 21 | right: 5%; |
| 22 | margin-right: 0 !important; | 22 | margin-right: 0 !important; |
| 23 | height: 202px !important; | 23 | height: 202px !important; |
| 24 | } | 24 | } |
| 25 | 25 |
src/app/modules/opcion-pedido/opcion-pedido.component.scss
| 1 | #card1.media-pantalla{ | ||
| 2 | position: absolute; | ||
| 3 | bottom: 150px; | ||
| 4 | -webkit-box-flex: 0; | ||
| 5 | flex: 0 0 41.6666666667%; | ||
| 6 | max-width: 41.6666666667%; | ||
| 7 | left: 10%; | ||
| 8 | margin-left: 0 !important; | ||
| 9 | } | ||
| 10 | |||
| 11 | #card2.media-pantalla{ | ||
| 12 | position: absolute; | ||
| 13 | bottom: 150px; | ||
| 14 | -webkit-box-flex: 0; | ||
| 15 | flex: 0 0 41.6666666667%; | ||
| 16 | max-width: 41.6666666667%; | ||
| 17 | right: 10%; | ||
| 18 | margin-right: 0 !important; | ||
| 19 | } | ||
| 1 | #card1.media-pantalla { |
src/app/modules/pago-electronico/pago-electronico.component.scss
| 1 | .mt-6 { | 1 | .mt-6 { |
| 2 | margin-top: 4.5rem; | 2 | margin-top: 4.5rem; |
| 3 | } | 3 | } |
| 4 | 4 | ||
| 5 | .mt-7 { | 5 | .mt-7 { |
| 6 | margin-top: 6rem; | 6 | margin-top: 6rem; |
| 7 | } | ||
| 7 | } |
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 | background-color: white; | 8 | background-color: white; |
| 9 | border-bottom: 3px solid $primary !important; | 9 | border-bottom: 3px solid $primary !important; |
| 10 | } | 10 | } |
| 11 | 11 | ||
| 12 | .border-bottom-effect { | 12 | .border-bottom-effect { |
| 13 | border: none; | 13 | border: none; |
| 14 | position: relative; | 14 | position: relative; |
| 15 | &:hover { | 15 | &:hover { |
| 16 | border: none; | 16 | border: none; |
| 17 | } | 17 | } |
| 18 | &::after { | 18 | &::after { |
| 19 | content: ""; | 19 | content: ""; |
| 20 | position: absolute; | 20 | position: absolute; |
| 21 | width: 0px; | 21 | width: 0px; |
| 22 | height: 3px; | 22 | height: 3px; |
| 23 | left: 50%; | 23 | left: 50%; |
| 24 | bottom: 0; | 24 | bottom: 0; |
| 25 | background-color: $primary; | 25 | background-color: $primary; |
| 26 | transition: all ease-in-out 0.2s; | 26 | transition: all ease-in-out 0.2s; |
| 27 | } | 27 | } |
| 28 | &:hover::after { | 28 | &:hover::after { |
| 29 | width: 100%; | 29 | width: 100%; |
| 30 | left: 0; | 30 | left: 0; |
| 31 | } | 31 | } |
| 32 | } | 32 | } |
| 33 | 33 | ||
| 34 | .card { | 34 | .card { |
| 35 | border: none; | 35 | border: none; |
| 36 | } | 36 | } |
| 37 | 37 | ||
| 38 | .line-height-sm { | 38 | .line-height-sm { |
| 39 | line-height: 1.2; | 39 | line-height: 1.2; |
| 40 | } | 40 | } |
| 41 | 41 | ||
| 42 | .bg-total { | 42 | .bg-total { |
| 43 | width: 110px; | 43 | width: 110px; |
| 44 | border-radius: 1.5rem; | 44 | border-radius: 1.5rem; |
| 45 | } | 45 | } |
| 46 | 46 | ||
| 47 | #content.media-pantalla{ | 47 | #content.media-pantalla { |
| 48 | max-height: 60% !important; | 48 | max-height: 60% !important; |
| 49 | } | 49 | } |
| 50 | 50 | ||
| 51 | .cat-content.media-pantalla{ | 51 | .cat-content.media-pantalla { |
| 52 | margin: 1.3rem 0.9rem !important; | 52 | margin: 1.3rem 0.9rem !important; |
| 53 | height: 60% !important; | 53 | height: 60% !important; |
| 54 | } | 54 | } |
| 55 | 55 | ||
| 56 | .cat-btn.media-pantalla{ | 56 | .cat-btn.media-pantalla { |
| 57 | height: 7% !important; | 57 | height: 7% !important; |
| 58 | } | 58 | } |
| 59 | 59 |
src/app/shared/header-publicidad/header-publicidad.component.scss
| 1 | #headerPub.media-pantalla{ | 1 | #headerPub.media-pantalla { |
| 2 | height: 12% !important; | 2 | height: 12% !important; |
| 3 | } | 3 | } |
| 4 | #headerPad.media-pantalla{ | 4 | #headerPad.media-pantalla { |
| 5 | padding: 0.5rem !important; | 5 | padding: 0.5rem !important; |
| 6 | } | 6 | } |
| 7 | 7 |
src/styles.scss
| 1 | @import "scss/styles-bootstrap.scss"; | 1 | @import "scss/styles-bootstrap.scss"; |
| 2 | @import "scss/typography.scss"; | 2 | @import "scss/typography.scss"; |
| 3 | @import "scss/height-width.scss"; | 3 | @import "scss/height-width.scss"; |
| 4 | @import "scss/animations.scss"; | 4 | @import "scss/animations.scss"; |
| 5 | @import "scss/icons.scss"; | 5 | @import "scss/icons.scss"; |
| 6 | @import "scss/scroll.scss"; | 6 | @import "scss/scroll.scss"; |
| 7 | @import "node_modules/bootstrap/scss/_variables.scss"; | 7 | @import "node_modules/bootstrap/scss/_variables.scss"; |
| 8 | 8 | ||
| 9 | @font-face { | 9 | @font-face { |
| 10 | font-family: "Gotham"; | 10 | font-family: "Gotham"; |
| 11 | font-style: normal; | 11 | font-style: normal; |
| 12 | font-weight: normal; | 12 | font-weight: normal; |
| 13 | src: url("assets/fonts/gotham-medium.woff") format("woff"); | 13 | src: url("assets/fonts/gotham-medium.woff") format("woff"); |
| 14 | } | 14 | } |
| 15 | 15 | ||
| 16 | html, | 16 | html, |
| 17 | body { | 17 | body { |
| 18 | max-height: 100vh; | 18 | max-height: 100vh; |
| 19 | height: 100%; | 19 | height: 100%; |
| 20 | font-family: "Gotham"; | 20 | font-family: "Gotham"; |
| 21 | overflow: hidden; | 21 | overflow: hidden; |
| 22 | user-select: none; | 22 | user-select: none; |
| 23 | } | 23 | } |
| 24 | 24 | ||
| 25 | .btn-effect { | 25 | .btn-effect { |
| 26 | transition: all 0.3s; | 26 | transition: all 0.3s; |
| 27 | &:hover { | 27 | &:hover { |
| 28 | cursor: pointer; | 28 | cursor: pointer; |
| 29 | opacity: 0.7; | 29 | opacity: 0.7; |
| 30 | } | 30 | } |
| 31 | &:active { | 31 | &:active { |
| 32 | transform: scale(1.02); | 32 | transform: scale(1.02); |
| 33 | } | 33 | } |
| 34 | } | 34 | } |
| 35 | 35 | ||
| 36 | .cursor-pointer { | 36 | .cursor-pointer { |
| 37 | cursor: pointer; | 37 | cursor: pointer; |
| 38 | } | 38 | } |
| 39 | 39 | ||
| 40 | p { | 40 | p { |
| 41 | margin: 0 !important; | 41 | margin: 0 !important; |
| 42 | } | 42 | } |
| 43 | 43 | ||
| 44 | .img-in-top { | 44 | .img-in-top { |
| 45 | position: absolute; | 45 | position: absolute; |
| 46 | top: -35px; | 46 | top: -35px; |
| 47 | left: 50%; | 47 | left: 50%; |
| 48 | height: 70px; | 48 | height: 70px; |
| 49 | -webkit-transform: translateX(-50%); | 49 | -webkit-transform: translateX(-50%); |
| 50 | transform: translateX(-50%); | 50 | transform: translateX(-50%); |
| 51 | } | 51 | } |
| 52 | 52 | ||
| 53 | .rotate-45 { | 53 | .rotate-45 { |
| 54 | transform: rotate(45deg); | 54 | transform: rotate(45deg); |
| 55 | } | 55 | } |
| 56 | 56 | ||
| 57 | .rotate-90 { | 57 | .rotate-90 { |
| 58 | transform: rotate(90deg); | 58 | transform: rotate(90deg); |
| 59 | } | 59 | } |
| 60 | 60 | ||
| 61 | .rotate-90-neg { | 61 | .rotate-90-neg { |
| 62 | transform: rotate(-90deg); | 62 | transform: rotate(-90deg); |
| 63 | } | 63 | } |
| 64 | 64 | ||
| 65 | .rotate-180-neg { | 65 | .rotate-180-neg { |
| 66 | transform: rotate(-180deg); | 66 | transform: rotate(-180deg); |
| 67 | } | 67 | } |
| 68 | 68 | ||
| 69 | body.media-pantalla{ | 69 | body.media-pantalla { |
| 70 | position: absolute !important; | 70 | position: absolute !important; |
| 71 | bottom: 0; | 71 | bottom: 0; |
| 72 | width: 100%; | 72 | width: 100%; |
| 73 | height: 50%; | 73 | height: 50%; |
| 74 | } | 74 | } |
| 75 | 75 |