primer/css
1
1
Fork 0
mirror of https://github.com/primer/css.git synced 2025-01-08 15:33:53 +03:00
Code Issues Projects Releases Wiki Activity

Merge pull request #582 from primer/offset-is-important-v2

Browse Source 
Add responsive variants & `!important` to grid offset classes
This commit is contained in:
Shawn Allen 2018-10-17 15:16:34 -07:00 committed by GitHub
commit 11fe822512
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 12 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
modules/primer-layout/lib/grid-offset.scss
View File

@ -1,30 +1,19 @@
// Optional offset options to work with grid.scss
// Offset Columns
.offset-1 { margin-left: (1 / 12 * 100%); }
.offset-2 { margin-left: (2 / 12 * 100%); }
.offset-3 { margin-left: (3 / 12 * 100%); }
.offset-4 { margin-left: (4 / 12 * 100%); }
.offset-5 { margin-left: (5 / 12 * 100%); }
.offset-6 { margin-left: (6 / 12 * 100%); }
.offset-7 { margin-left: (7 / 12 * 100%); }
.offset-8 { margin-left: (8 / 12 * 100%); }
.offset-9 { margin-left: (9 / 12 * 100%); }
.offset-10 { margin-left: (10 / 12 * 100%); }
.offset-11 { margin-left: (11 / 12 * 100%); }
@each $breakpoint in map-keys($breakpoints) {
@each $breakpoint, $variant in $responsive-variants {
@include breakpoint($breakpoint) {
.offset-#{$breakpoint}-1 { margin-left: (1 / 12 * 100%); }
.offset-#{$breakpoint}-2 { margin-left: (2 / 12 * 100%); }
.offset-#{$breakpoint}-3 { margin-left: (3 / 12 * 100%); }
.offset-#{$breakpoint}-4 { margin-left: (4 / 12 * 100%); }
.offset-#{$breakpoint}-5 { margin-left: (5 / 12 * 100%); }
.offset-#{$breakpoint}-6 { margin-left: (6 / 12 * 100%); }
.offset-#{$breakpoint}-7 { margin-left: (7 / 12 * 100%); }
.offset-#{$breakpoint}-8 { margin-left: (8 / 12 * 100%); }
.offset-#{$breakpoint}-9 { margin-left: (9 / 12 * 100%); }
.offset-#{$breakpoint}-10 { margin-left: (10 / 12 * 100%); }
.offset-#{$breakpoint}-11 { margin-left: (11 / 12 * 100%); }
.offset#{$variant}-1 { margin-left: (1 / 12 * 100%) !important; }
.offset#{$variant}-2 { margin-left: (2 / 12 * 100%) !important; }
.offset#{$variant}-3 { margin-left: (3 / 12 * 100%) !important; }
.offset#{$variant}-4 { margin-left: (4 / 12 * 100%) !important; }
.offset#{$variant}-5 { margin-left: (5 / 12 * 100%) !important; }
.offset#{$variant}-6 { margin-left: (6 / 12 * 100%) !important; }
.offset#{$variant}-7 { margin-left: (7 / 12 * 100%) !important; }
.offset#{$variant}-8 { margin-left: (8 / 12 * 100%) !important; }
.offset#{$variant}-9 { margin-left: (9 / 12 * 100%) !important; }
.offset#{$variant}-10 { margin-left: (10 / 12 * 100%) !important; }
.offset#{$variant}-11 { margin-left: (11 / 12 * 100%) !important; }
}
}