Add vw-100 class to represent width: 100vw.

Added `vw-100`, `vw-100-ns`, `vw-100-m`, `vw-100-l`
This commit is contained in:
John Ray 2019-07-21 07:58:04 -04:00 committed by GitHub
parent 2cf141993c
commit fd39dae324
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23

View file

@ -5,6 +5,7 @@
Base:
w = width
vw = view-width;
Modifiers
1 = 1st step in width scale
@ -63,6 +64,8 @@
.w-90 { width: 90%; }
.w-100 { width: 100%; }
.vw-100 { width: 100vw; }
.w-third { width: calc(100% / 3); }
.w-two-thirds { width: calc(100% / 1.5); }
.w-auto { width: auto; }
@ -87,6 +90,7 @@
.w-80-ns { width: 80%; }
.w-90-ns { width: 90%; }
.w-100-ns { width: 100%; }
.vw-100-ns { width: 100vw; }
.w-third-ns { width: calc(100% / 3); }
.w-two-thirds-ns { width: calc(100% / 1.5); }
.w-auto-ns { width: auto; }
@ -112,6 +116,7 @@
.w-80-m { width: 80%; }
.w-90-m { width: 90%; }
.w-100-m { width: 100%; }
.vw-100-m { width: 100vw; }
.w-third-m { width: calc(100% / 3); }
.w-two-thirds-m { width: calc(100% / 1.5); }
.w-auto-m { width: auto; }
@ -137,6 +142,7 @@
.w-80-l { width: 80%; }
.w-90-l { width: 90%; }
.w-100-l { width: 100%; }
.vw-100-l { width: 100vw; }
.w-third-l { width: calc(100% / 3); }
.w-two-thirds-l { width: calc(100% / 1.5); }
.w-auto-l { width: auto; }