@tattvafoundation/upyog-css 1.0.28 → 1.0.29
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.css +42 -6
- package/dist/index.min.css +1 -1
- package/package.json +1 -1
- package/src/components/bmc.scss +72 -4
package/package.json
CHANGED
package/src/components/bmc.scss
CHANGED
|
@@ -133,19 +133,22 @@ body {
|
|
|
133
133
|
.CardBasedOptions {
|
|
134
134
|
margin-bottom: 24px;
|
|
135
135
|
}
|
|
136
|
-
|
|
137
136
|
.mobile-CardWrapper {
|
|
138
137
|
display: flex;
|
|
139
138
|
justify-content: center;
|
|
140
139
|
align-items: center;
|
|
141
140
|
height: 100%;
|
|
141
|
+
width: 100%;
|
|
142
|
+
margin: 0px;
|
|
142
143
|
}
|
|
143
144
|
|
|
144
145
|
.mobile-CardWrapper .card {
|
|
145
|
-
width:
|
|
146
|
+
width: 100%;
|
|
147
|
+
max-width: 510px;
|
|
146
148
|
}
|
|
147
|
-
.planningCardWrapper .card {
|
|
148
|
-
|
|
149
|
+
.mobile-CardWrapper .planningCardWrapper .card {
|
|
150
|
+
width: 100%;
|
|
151
|
+
max-width: 510px;
|
|
149
152
|
}
|
|
150
153
|
|
|
151
154
|
.CardBasedOptions,
|
|
@@ -1718,3 +1721,68 @@ button.submit-bar:hover {
|
|
|
1718
1721
|
text-align: center;
|
|
1719
1722
|
color: red;
|
|
1720
1723
|
}
|
|
1724
|
+
|
|
1725
|
+
/* Extra Small Mobile Phones (up to 320px) */
|
|
1726
|
+
@media screen and (max-width: 320px) {
|
|
1727
|
+
.mobile-CardWrapper {
|
|
1728
|
+
min-height: 30vh;
|
|
1729
|
+
}
|
|
1730
|
+
|
|
1731
|
+
.mobile-CardWrapper .card,
|
|
1732
|
+
.mobile-CardWrapper .planningCardWrapper .card {
|
|
1733
|
+
width: 100%;
|
|
1734
|
+
margin: 0;
|
|
1735
|
+
}
|
|
1736
|
+
}
|
|
1737
|
+
|
|
1738
|
+
/* Small Mobile Phones (up to 480px) */
|
|
1739
|
+
@media screen and (max-width: 480px) {
|
|
1740
|
+
.mobile-CardWrapper {
|
|
1741
|
+
min-height: 30vh;
|
|
1742
|
+
}
|
|
1743
|
+
|
|
1744
|
+
.mobile-CardWrapper .card,
|
|
1745
|
+
.mobile-CardWrapper .planningCardWrapper .card {
|
|
1746
|
+
width: 100%;
|
|
1747
|
+
margin: 0;
|
|
1748
|
+
}
|
|
1749
|
+
}
|
|
1750
|
+
|
|
1751
|
+
/* Large Mobile Phones (up to 600px) */
|
|
1752
|
+
@media screen and (max-width: 600px) {
|
|
1753
|
+
.mobile-CardWrapper {
|
|
1754
|
+
min-height: 35vh;
|
|
1755
|
+
}
|
|
1756
|
+
|
|
1757
|
+
.mobile-CardWrapper .card,
|
|
1758
|
+
.mobile-CardWrapper .planningCardWrapper .card {
|
|
1759
|
+
width: 100%;
|
|
1760
|
+
margin: 0;
|
|
1761
|
+
}
|
|
1762
|
+
}
|
|
1763
|
+
|
|
1764
|
+
/* Tablets (up to 768px) */
|
|
1765
|
+
@media screen and (max-width: 768px) {
|
|
1766
|
+
.mobile-CardWrapper {
|
|
1767
|
+
min-height: 40vh;
|
|
1768
|
+
}
|
|
1769
|
+
|
|
1770
|
+
.mobile-CardWrapper .card {
|
|
1771
|
+
max-width: 100%;
|
|
1772
|
+
width: 100%;
|
|
1773
|
+
}
|
|
1774
|
+
}
|
|
1775
|
+
|
|
1776
|
+
/* Small Desktops or Large Tablets (up to 1024px) */
|
|
1777
|
+
@media screen and (max-width: 1024px) {
|
|
1778
|
+
.mobile-CardWrapper .card {
|
|
1779
|
+
max-width: 480px;
|
|
1780
|
+
}
|
|
1781
|
+
}
|
|
1782
|
+
|
|
1783
|
+
/* Landscape orientation adjustments */
|
|
1784
|
+
@media screen and (max-height: 600px) and (orientation: landscape) {
|
|
1785
|
+
.mobile-CardWrapper {
|
|
1786
|
+
min-height: 20vh;
|
|
1787
|
+
}
|
|
1788
|
+
}
|