Commit e79f4dfa99159d841cda0ca217349bcce0b184ba

Authored by Benjamin Rodriguez
1 parent fd5ec05a78

cambio el borde redondeo y color

src/app/modules/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) { 12 @media (min-width: 1200px) {
13 .card-columns { 13 .card-columns {
14 column-count: 5 !important; 14 column-count: 5 !important;
15 column-gap: 0.5rem !important; 15 column-gap: 0.5rem !important;
16 } 16 }
17 } 17 }
18 18
19 @media (max-width: 1200px) { 19 @media (max-width: 1200px) {
20 .card-columns { 20 .card-columns {
21 column-count: 4 !important; 21 column-count: 4 !important;
22 column-gap: 0.5rem !important; 22 column-gap: 0.5rem !important;
23 } 23 }
24 } 24 }
25 25
26 @media (max-width: 768px) { 26 @media (max-width: 768px) {
27 .card-columns { 27 .card-columns {
28 column-count: 3 !important; 28 column-count: 3 !important;
29 column-gap: 0.5rem !important; 29 column-gap: 0.5rem !important;
30 } 30 }
31 } 31 }
32 32
33 .bg-danger { 33 .bg-danger {
34 transition: 0.2s; 34 transition: 0.2s;
35 background-color: #aa006b !important; 35 background-color: #aa006b !important;
36 p { 36 p {
37 color: #fff; 37 color: #fff;
38 } 38 }
39 } 39 }
40 40
41 .bg-success { 41 .bg-success {
42 transition: 0.2s; 42 transition: 0.2s;
43 background-color: #EEEEF0 !important; 43 background-color: #EEEEF0 !important;
44 p { 44 p {
45 color: black; 45 color: black;
46 } 46 }
47 } 47 }
48 48
49 .bg-light { 49 .bg-light {
50 transition: 0.2s; 50 transition: 0.2s;
51 background-color: white !important; 51 background-color: white !important;
52 p { 52 p {
53 color: #212529; 53 color: #212529;
54 } 54 }
55 } 55 }
56 56
57 .bg-dark-red { 57 .bg-dark-red {
58 background-color: #670006 !important; 58 background-color: #670006 !important;
59 p { 59 p {
60 color: white; 60 color: white;
61 } 61 }
62 } 62 }
63 63
64 .btn-elaborar { 64 .btn-elaborar {
65 border-radius: 2rem; 65 border-radius: 2rem;
66 .p { 66 .p {
67 color: #fff; 67 color: #fff;
68 } 68 }
69 } 69 }
70 70
71 .btn-deshacer { 71 .btn-deshacer {
72 background-color: #fff; 72 background-color: #fff;
73 border-radius: 2rem; 73 border-radius: 2rem;
74 } 74 }
75 75
76 .btn-terminar { 76 .btn-terminar {
77 background-color: rgba(228, 253, 251, 0.842); 77 background-color: rgba(228, 253, 251, 0.842);
78 border-radius: 2rem; 78 border-radius: 2rem;
79 p { 79 p {
80 color: #212529; 80 color: #212529;
81 } 81 }
82 } 82 }
83 83
84 .rounded-xs { 84 .rounded-xs {
85 border-radius: 1.5rem; 85 border-radius: 1rem;
86 border-color: #aa006b ;
86 } 87 }
87 88
88 .card-comanda { 89 .card-comanda {
89 min-height: 250px; 90 min-height: 250px;
90 } 91 }
91 92
92 .swing-out-top-bck { 93 .swing-out-top-bck {
93 -webkit-animation: swing-out-top-bck 0.45s 94 -webkit-animation: swing-out-top-bck 0.45s
94 cubic-bezier(0.6, -0.28, 0.735, 0.045) 10s both; 95 cubic-bezier(0.6, -0.28, 0.735, 0.045) 10s both;
95 animation: swing-out-top-bck 0.8s cubic-bezier(0.6, -0.28, 0.735, 0.045) 10s 96 animation: swing-out-top-bck 0.8s cubic-bezier(0.6, -0.28, 0.735, 0.045) 10s
96 both; 97 both;
97 } 98 }
98 99
99 @-webkit-keyframes swing-out-top-bck { 100 @-webkit-keyframes swing-out-top-bck {
100 0% { 101 0% {
101 -webkit-transform: rotateX(0deg); 102 -webkit-transform: rotateX(0deg);
102 transform: rotateX(0deg); 103 transform: rotateX(0deg);
103 -webkit-transform-origin: top; 104 -webkit-transform-origin: top;
104 transform-origin: top; 105 transform-origin: top;
105 opacity: 1; 106 opacity: 1;
106 } 107 }
107 75% { 108 75% {
108 -webkit-transform: rotateX(-100deg); 109 -webkit-transform: rotateX(-100deg);
109 transform: rotateX(-100deg); 110 transform: rotateX(-100deg);
110 -webkit-transform-origin: top; 111 -webkit-transform-origin: top;
111 transform-origin: top; 112 transform-origin: top;
112 } 113 }
113 100% { 114 100% {
114 -webkit-transform: rotateX(-100deg); 115 -webkit-transform: rotateX(-100deg);
115 transform: rotateX(-100deg); 116 transform: rotateX(-100deg);
116 -webkit-transform-origin: top; 117 -webkit-transform-origin: top;
117 transform-origin: top; 118 transform-origin: top;
118 opacity: 0; 119 opacity: 0;
119 display: none; 120 display: none;
120 position: absolute; 121 position: absolute;
121 } 122 }
122 } 123 }
123 124
124 @keyframes swing-out-top-bck { 125 @keyframes swing-out-top-bck {
125 0% { 126 0% {
126 -webkit-transform: rotateX(0deg); 127 -webkit-transform: rotateX(0deg);
127 transform: rotateX(0deg); 128 transform: rotateX(0deg);
128 -webkit-transform-origin: top; 129 -webkit-transform-origin: top;
129 transform-origin: top; 130 transform-origin: top;
130 opacity: 1; 131 opacity: 1;
131 } 132 }
132 75% { 133 75% {
133 -webkit-transform: rotateX(-100deg); 134 -webkit-transform: rotateX(-100deg);
134 transform: rotateX(-100deg); 135 transform: rotateX(-100deg);
135 -webkit-transform-origin: top; 136 -webkit-transform-origin: top;
136 transform-origin: top; 137 transform-origin: top;
137 } 138 }
138 100% { 139 100% {
139 -webkit-transform: rotateX(-100deg); 140 -webkit-transform: rotateX(-100deg);
140 transform: rotateX(-100deg); 141 transform: rotateX(-100deg);
141 -webkit-transform-origin: top; 142 -webkit-transform-origin: top;
142 transform-origin: top; 143 transform-origin: top;
143 opacity: 0; 144 opacity: 0;
144 display: none; 145 display: none;
145 position: absolute; 146 position: absolute;
146 } 147 }
147 } 148 }
148 149
149 blockquote p::before, 150 blockquote p::before,
150 blockquote p::after { 151 blockquote p::after {
151 content: "“"; 152 content: "“";
152 font-family: Georgia; 153 font-family: Georgia;
153 font-size: 40px; 154 font-size: 40px;
154 margin: -10px 0 0 -20px !important; 155 margin: -10px 0 0 -20px !important;
155 position: absolute; 156 position: absolute;
156 opacity: 0.5; 157 opacity: 0.5;
157 } 158 }
158 159
159 blockquote p::after { 160 blockquote p::after {
160 content: "”"; 161 content: "”";
161 margin: -5px 0 0 4px !important; 162 margin: -5px 0 0 4px !important;
162 } 163 }
163 164