123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143 |
- /*
-
- WIDTHS
- Docs: http://tachyons.io/docs/layout/widths/
-
- Base:
- w = width
-
- Modifiers
- 1 = 1st step in width scale
- 2 = 2nd step in width scale
- 3 = 3rd step in width scale
- 4 = 4th step in width scale
- 5 = 5th step in width scale
-
- -10 = literal value 10%
- -20 = literal value 20%
- -25 = literal value 25%
- -30 = literal value 30%
- -33 = literal value 33%
- -34 = literal value 34%
- -40 = literal value 40%
- -50 = literal value 50%
- -60 = literal value 60%
- -70 = literal value 70%
- -75 = literal value 75%
- -80 = literal value 80%
- -90 = literal value 90%
- -100 = literal value 100%
-
- -third = 100% / 3 (Not supported in opera mini or IE8)
- -two-thirds = 100% / 1.5 (Not supported in opera mini or IE8)
- -auto = string value auto
-
-
- Media Query Extensions:
- -ns = not-small
- -m = medium
- -l = large
-
- */
-
- /* Width Scale */
-
- .w1 { width: 1rem; }
- .w2 { width: 2rem; }
- .w3 { width: 4rem; }
- .w4 { width: 8rem; }
- .w5 { width: 16rem; }
-
- .w-10 { width: 10%; }
- .w-20 { width: 20%; }
- .w-25 { width: 25%; }
- .w-30 { width: 30%; }
- .w-33 { width: 33%; }
- .w-34 { width: 34%; }
- .w-40 { width: 40%; }
- .w-50 { width: 50%; }
- .w-60 { width: 60%; }
- .w-70 { width: 70%; }
- .w-75 { width: 75%; }
- .w-80 { width: 80%; }
- .w-90 { width: 90%; }
- .w-100 { width: 100%; }
-
- .w-third { width: calc(100% / 3); }
- .w-two-thirds { width: calc(100% / 1.5); }
- .w-auto { width: auto; }
-
- @media (--breakpoint-not-small) {
- .w1-ns { width: 1rem; }
- .w2-ns { width: 2rem; }
- .w3-ns { width: 4rem; }
- .w4-ns { width: 8rem; }
- .w5-ns { width: 16rem; }
- .w-10-ns { width: 10%; }
- .w-20-ns { width: 20%; }
- .w-25-ns { width: 25%; }
- .w-30-ns { width: 30%; }
- .w-33-ns { width: 33%; }
- .w-34-ns { width: 34%; }
- .w-40-ns { width: 40%; }
- .w-50-ns { width: 50%; }
- .w-60-ns { width: 60%; }
- .w-70-ns { width: 70%; }
- .w-75-ns { width: 75%; }
- .w-80-ns { width: 80%; }
- .w-90-ns { width: 90%; }
- .w-100-ns { width: 100%; }
- .w-third-ns { width: calc(100% / 3); }
- .w-two-thirds-ns { width: calc(100% / 1.5); }
- .w-auto-ns { width: auto; }
- }
-
- @media (--breakpoint-medium) {
- .w1-m { width: 1rem; }
- .w2-m { width: 2rem; }
- .w3-m { width: 4rem; }
- .w4-m { width: 8rem; }
- .w5-m { width: 16rem; }
- .w-10-m { width: 10%; }
- .w-20-m { width: 20%; }
- .w-25-m { width: 25%; }
- .w-30-m { width: 30%; }
- .w-33-m { width: 33%; }
- .w-34-m { width: 34%; }
- .w-40-m { width: 40%; }
- .w-50-m { width: 50%; }
- .w-60-m { width: 60%; }
- .w-70-m { width: 70%; }
- .w-75-m { width: 75%; }
- .w-80-m { width: 80%; }
- .w-90-m { width: 90%; }
- .w-100-m { width: 100%; }
- .w-third-m { width: calc(100% / 3); }
- .w-two-thirds-m { width: calc(100% / 1.5); }
- .w-auto-m { width: auto; }
- }
-
- @media (--breakpoint-large) {
- .w1-l { width: 1rem; }
- .w2-l { width: 2rem; }
- .w3-l { width: 4rem; }
- .w4-l { width: 8rem; }
- .w5-l { width: 16rem; }
- .w-10-l { width: 10%; }
- .w-20-l { width: 20%; }
- .w-25-l { width: 25%; }
- .w-30-l { width: 30%; }
- .w-33-l { width: 33%; }
- .w-34-l { width: 34%; }
- .w-40-l { width: 40%; }
- .w-50-l { width: 50%; }
- .w-60-l { width: 60%; }
- .w-70-l { width: 70%; }
- .w-75-l { width: 75%; }
- .w-80-l { width: 80%; }
- .w-90-l { width: 90%; }
- .w-100-l { width: 100%; }
- .w-third-l { width: calc(100% / 3); }
- .w-two-thirds-l { width: calc(100% / 1.5); }
- .w-auto-l { width: auto; }
- }
|