Commit 2d8839dd8bf62d2da6f19035c8626fe4272d588d
1 parent
c8447b1a9c
Exists in
master
and in
1 other branch
Cambio en clase css-
Showing
1 changed file
with
21 additions
and
0 deletions
Show diff stats
src/app/components/comanda/comanda.component.scss
| 1 | @media (min-width: 1200px) { | 1 | @media (min-width: 1200px) { |
| 2 | .col-1-5 { | 2 | .col-1-5 { |
| 3 | flex: 0 0 12.5%; | 3 | flex: 0 0 12.5%; |
| 4 | max-width: 12.5%; | 4 | max-width: 12.5%; |
| 5 | position: relative; | 5 | position: relative; |
| 6 | width: 100%; | 6 | width: 100%; |
| 7 | padding-right: 15px; | 7 | padding-right: 15px; |
| 8 | padding-left: 15px; | 8 | padding-left: 15px; |
| 9 | } | 9 | } |
| 10 | } | 10 | } |
| 11 | 11 | ||
| 12 | @media (min-width: 1200px) { | ||
| 13 | .card-columns { | ||
| 14 | column-count: 7 !important; | ||
| 15 | column-gap: 0.5rem !important; | ||
| 16 | } | ||
| 17 | } | ||
| 18 | |||
| 19 | @media (max-width: 1200px) { | ||
| 20 | .card-columns { | ||
| 21 | column-count: 6 !important; | ||
| 22 | column-gap: 0.5rem !important; | ||
| 23 | } | ||
| 24 | } | ||
| 25 | |||
| 26 | @media (max-width: 768px) { | ||
| 27 | .card-columns { | ||
| 28 | column-count: 3 !important; | ||
| 29 | column-gap: 0.5rem !important; | ||
| 30 | } | ||
| 31 | } | ||
| 32 | |||
| 12 | .bg-danger { | 33 | .bg-danger { |
| 13 | background-color: #8c000e !important; | 34 | background-color: #8c000e !important; |
| 14 | p { | 35 | p { |
| 15 | color: #fff; | 36 | color: #fff; |
| 16 | } | 37 | } |
| 17 | } | 38 | } |
| 18 | 39 | ||
| 19 | .bg-success { | 40 | .bg-success { |
| 20 | background-color: #00751b !important; | 41 | background-color: #00751b !important; |
| 21 | p { | 42 | p { |
| 22 | color: #fff; | 43 | color: #fff; |
| 23 | } | 44 | } |
| 24 | } | 45 | } |
| 25 | 46 | ||
| 26 | .bg-light { | 47 | .bg-light { |
| 27 | background-color: white !important; | 48 | background-color: white !important; |
| 28 | p { | 49 | p { |
| 29 | color: #212529; | 50 | color: #212529; |
| 30 | } | 51 | } |
| 31 | } | 52 | } |
| 32 | 53 | ||
| 33 | .rounded-xs { | 54 | .rounded-xs { |
| 34 | border-radius: 0.5rem; | 55 | border-radius: 0.5rem; |
| 35 | } | 56 | } |
| 36 | 57 | ||
| 37 | .card-comanda { | 58 | .card-comanda { |
| 38 | min-height: 250px; | 59 | min-height: 250px; |
| 39 | } | 60 | } |
| 40 | 61 | ||
| 41 | .swing-out-top-bck { | 62 | .swing-out-top-bck { |
| 42 | -webkit-animation: swing-out-top-bck 0.45s | 63 | -webkit-animation: swing-out-top-bck 0.45s |
| 43 | cubic-bezier(0.6, -0.28, 0.735, 0.045) 10s both; | 64 | cubic-bezier(0.6, -0.28, 0.735, 0.045) 10s both; |
| 44 | animation: swing-out-top-bck 0.8s cubic-bezier(0.6, -0.28, 0.735, 0.045) 10s | 65 | animation: swing-out-top-bck 0.8s cubic-bezier(0.6, -0.28, 0.735, 0.045) 10s |
| 45 | both; | 66 | both; |
| 46 | } | 67 | } |
| 47 | 68 | ||
| 48 | @-webkit-keyframes swing-out-top-bck { | 69 | @-webkit-keyframes swing-out-top-bck { |
| 49 | 0% { | 70 | 0% { |
| 50 | -webkit-transform: rotateX(0deg); | 71 | -webkit-transform: rotateX(0deg); |
| 51 | transform: rotateX(0deg); | 72 | transform: rotateX(0deg); |
| 52 | -webkit-transform-origin: top; | 73 | -webkit-transform-origin: top; |
| 53 | transform-origin: top; | 74 | transform-origin: top; |
| 54 | opacity: 1; | 75 | opacity: 1; |
| 55 | } | 76 | } |
| 56 | 75% { | 77 | 75% { |
| 57 | -webkit-transform: rotateX(-100deg); | 78 | -webkit-transform: rotateX(-100deg); |
| 58 | transform: rotateX(-100deg); | 79 | transform: rotateX(-100deg); |
| 59 | -webkit-transform-origin: top; | 80 | -webkit-transform-origin: top; |
| 60 | transform-origin: top; | 81 | transform-origin: top; |
| 61 | } | 82 | } |
| 62 | 100% { | 83 | 100% { |
| 63 | -webkit-transform: rotateX(-100deg); | 84 | -webkit-transform: rotateX(-100deg); |
| 64 | transform: rotateX(-100deg); | 85 | transform: rotateX(-100deg); |
| 65 | -webkit-transform-origin: top; | 86 | -webkit-transform-origin: top; |
| 66 | transform-origin: top; | 87 | transform-origin: top; |
| 67 | opacity: 0; | 88 | opacity: 0; |
| 68 | display: none; | 89 | display: none; |
| 69 | position: absolute; | 90 | position: absolute; |
| 70 | } | 91 | } |
| 71 | } | 92 | } |
| 72 | 93 | ||
| 73 | @keyframes swing-out-top-bck { | 94 | @keyframes swing-out-top-bck { |
| 74 | 0% { | 95 | 0% { |
| 75 | -webkit-transform: rotateX(0deg); | 96 | -webkit-transform: rotateX(0deg); |
| 76 | transform: rotateX(0deg); | 97 | transform: rotateX(0deg); |
| 77 | -webkit-transform-origin: top; | 98 | -webkit-transform-origin: top; |
| 78 | transform-origin: top; | 99 | transform-origin: top; |
| 79 | opacity: 1; | 100 | opacity: 1; |
| 80 | } | 101 | } |
| 81 | 75% { | 102 | 75% { |
| 82 | -webkit-transform: rotateX(-100deg); | 103 | -webkit-transform: rotateX(-100deg); |
| 83 | transform: rotateX(-100deg); | 104 | transform: rotateX(-100deg); |
| 84 | -webkit-transform-origin: top; | 105 | -webkit-transform-origin: top; |
| 85 | transform-origin: top; | 106 | transform-origin: top; |
| 86 | } | 107 | } |
| 87 | 100% { | 108 | 100% { |
| 88 | -webkit-transform: rotateX(-100deg); | 109 | -webkit-transform: rotateX(-100deg); |
| 89 | transform: rotateX(-100deg); | 110 | transform: rotateX(-100deg); |
| 90 | -webkit-transform-origin: top; | 111 | -webkit-transform-origin: top; |
| 91 | transform-origin: top; | 112 | transform-origin: top; |
| 92 | opacity: 0; | 113 | opacity: 0; |
| 93 | display: none; | 114 | display: none; |
| 94 | position: absolute; | 115 | position: absolute; |
| 95 | } | 116 | } |
| 96 | } | 117 | } |
| 97 | 118 |