Skip to content

Commit 5a21dbd

Browse files
adamraiderAdam Raider
adamraider
authored and
Adam Raider
committed
fix(grid): Fixes maxwidths and gutters, adds storybook example (#13)
* fix(grid): Fixes maxwidths and gutters, adds storybook example * tweaks * adds fancy colors * prefix classes * prefix grid classes
1 parent 8184f8e commit 5a21dbd

17 files changed

+590
-72
lines changed

‎packages/ray/lib/_grid.scss

Lines changed: 0 additions & 4 deletions
This file was deleted.

‎packages/ray/lib/application.scss

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
1-
@import 'variables';
1+
@import './global/variables';
22

33
@import '../node_modules/normalize.css/normalize.css';
44

55
// @import 'fonts';
66
@import 'responsive';
77
@import 'base';
8-
@import 'grid';
8+
@import './components/grid/bootstrap-grid';
99
@import 'typography';
1010
@import 'forms';
1111
@import 'card';

‎packages/ray/lib/components/button/_button.scss

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@ $btn-border-radius: $border-radius;
4343
&[disabled] {
4444
background-color: $color-blue30;
4545
border-color: $color-blue30;
46-
color: rgba($white, 0.4);
46+
color: rgba($color-white, 0.4);
4747
}
4848

4949
&Danger {
@@ -64,7 +64,7 @@ $btn-border-radius: $border-radius;
6464

6565
.#{$prefix}btn--secondary {
6666
color: $color-blue50;
67-
background-color: $white;
67+
background-color: $color-white;
6868

6969
&:hover {
7070
background-color: $color-blue10;
@@ -75,7 +75,7 @@ $btn-border-radius: $border-radius;
7575
}
7676

7777
&[disabled] {
78-
background-color: $white;
78+
background-color: $color-white;
7979
border-color: rgba($color-blue50, 0.4);
8080
color: rgba($color-blue50, 0.4);
8181
}

‎packages/ray/lib/components/grid/_bootstrap-grid.scss

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
/*!
2+
* Bootstrap Grid v4.2.1 (https://getbootstrap.com/)
3+
* Copyright 2011-2018 The Bootstrap Authors
4+
* Copyright 2011-2018 Twitter, Inc.
5+
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
6+
*/
7+
8+
html {
9+
box-sizing: border-box;
10+
-ms-overflow-style: scrollbar;
11+
}
12+
13+
*,
14+
*::before,
15+
*::after {
16+
box-sizing: inherit;
17+
}
18+
19+
@import '../../global/functions';
20+
@import '../../global/variables';
21+
22+
@import './mixins/breakpoints';
23+
@import './mixins/grid-framework';
24+
@import './mixins/grid';
25+
26+
@import './grid';
27+
// @import 'utilities/display';
28+
// @import 'utilities/flex';
29+
// @import 'utilities/spacing';

‎packages/ray/lib/components/grid/_grid-framework.scss

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
// Copyright Twitter Bootstrap
2+
// Framework grid generation
3+
//
4+
// Used only by Bootstrap to generate the correct number of grid classes given
5+
// any value of `$grid-columns`.
6+
7+
@mixin make-grid-columns(
8+
$columns: $grid-columns,
9+
$gutter: $grid-gutter-width,
10+
$breakpoints: $grid-breakpoints
11+
) {
12+
// Common properties for all breakpoints
13+
%grid-column {
14+
position: relative;
15+
width: 100%;
16+
padding-right: $gutter / 2;
17+
padding-left: $gutter / 2;
18+
}
19+
20+
@each $breakpoint in map-keys($breakpoints) {
21+
$infix: breakpoint-infix($breakpoint, $breakpoints);
22+
23+
// Allow columns to stretch full width below their breakpoints
24+
@for $i from 1 through $columns {
25+
.#{$prefix}col#{$infix}-#{$i} {
26+
@extend %grid-column;
27+
}
28+
}
29+
.#{$prefix}col#{$infix},
30+
.#{$prefix}col#{$infix}-auto {
31+
@extend %grid-column;
32+
}
33+
34+
@include media-breakpoint-up($breakpoint, $breakpoints) {
35+
// Provide basic `.col-{bp}` classes for equal-width flexbox columns
36+
.#{$prefix}col#{$infix} {
37+
flex-basis: 0;
38+
flex-grow: 1;
39+
max-width: 100%;
40+
}
41+
.#{$prefix}col#{$infix}-auto {
42+
flex: 0 0 auto;
43+
width: auto;
44+
max-width: 100%; // Reset earlier grid tiers
45+
}
46+
47+
@for $i from 1 through $columns {
48+
.#{$prefix}col#{$infix}-#{$i} {
49+
@include make-col($i, $columns);
50+
}
51+
}
52+
53+
.#{$prefix}order#{$infix}-first {
54+
order: -1;
55+
}
56+
57+
.#{$prefix}order#{$infix}-last {
58+
order: $columns + 1;
59+
}
60+
61+
@for $i from 0 through $columns {
62+
.#{$prefix}order#{$infix}-#{$i} {
63+
order: $i;
64+
}
65+
}
66+
67+
// `$columns - 1` because offsetting by the width of an entire row isn't possible
68+
@for $i from 0 through ($columns - 1) {
69+
@if not($infix == '' and $i == 0) {
70+
// Avoid emitting useless .offset-0
71+
.#{$prefix}offset#{$infix}-#{$i} {
72+
@include make-col-offset($i, $columns);
73+
}
74+
}
75+
}
76+
}
77+
}
78+
}

‎packages/ray/lib/components/grid/_grid.scss

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
// Container widths
2+
//
3+
// Set the container width, and override it for fixed navbars in media queries.
4+
5+
@if $enable-grid-classes {
6+
.#{$prefix}container {
7+
@include make-container();
8+
@include make-container-max-widths();
9+
}
10+
}
11+
12+
// Fluid container
13+
//
14+
// Utilizes the mixin meant for fixed width containers, but with 100% width for
15+
// fluid, full width layouts.
16+
17+
@if $enable-grid-classes {
18+
.#{$prefix}container-fluid {
19+
@include make-container();
20+
}
21+
}
22+
23+
// Row
24+
//
25+
// Rows contain and clear the floats of your columns.
26+
27+
@if $enable-grid-classes {
28+
.#{$prefix}row {
29+
@include make-row();
30+
}
31+
32+
// Remove the negative margin from default .row, then the horizontal padding
33+
// from all immediate children columns (to prevent runaway style inheritance).
34+
.#{$prefix}no-gutters {
35+
margin-right: 0;
36+
margin-left: 0;
37+
38+
> .col,
39+
> [class*='col-'] {
40+
padding-right: 0;
41+
padding-left: 0;
42+
}
43+
}
44+
}
45+
46+
// Columns
47+
//
48+
// Common styles for small and large grid columns
49+
50+
@if $enable-grid-classes {
51+
@include make-grid-columns();
52+
}

‎packages/ray/lib/components/grid/mixins/_breakpoints.scss

Lines changed: 135 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,135 @@
1+
// Breakpoint viewport sizes and media queries.
2+
//
3+
// Breakpoints are defined as a map of (name: minimum width), order from small to large:
4+
//
5+
// (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px)
6+
//
7+
// The map defined in the `$grid-breakpoints` global variable is used as the `$breakpoints` argument by default.
8+
9+
// Name of the next breakpoint, or null for the last breakpoint.
10+
//
11+
// >> breakpoint-next(sm)
12+
// md
13+
// >> breakpoint-next(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
14+
// md
15+
// >> breakpoint-next(sm, $breakpoint-names: (xs sm md lg xl))
16+
// md
17+
@function breakpoint-next(
18+
$name,
19+
$breakpoints: $grid-breakpoints,
20+
$breakpoint-names: map-keys($breakpoints)
21+
) {
22+
$n: index($breakpoint-names, $name);
23+
@return if(
24+
$n != null and $n < length($breakpoint-names),
25+
nth($breakpoint-names, $n + 1),
26+
null
27+
);
28+
}
29+
30+
// Minimum breakpoint width. Null for the smallest (first) breakpoint.
31+
//
32+
// >> breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
33+
// 576px
34+
@function breakpoint-min($name, $breakpoints: $grid-breakpoints) {
35+
$min: map-get($breakpoints, $name);
36+
@return if($min != 0, $min, null);
37+
}
38+
39+
// Maximum breakpoint width. Null for the largest (last) breakpoint.
40+
// The maximum value is calculated as the minimum of the next one less 0.02px
41+
// to work around the limitations of `min-` and `max-` prefixes and viewports with fractional widths.
42+
// See https://www.w3.org/TR/mediaqueries-4/#mq-min-max
43+
// Uses 0.02px rather than 0.01px to work around a current rounding bug in Safari.
44+
// See https://bugs.webkit.org/show_bug.cgi?id=178261
45+
//
46+
// >> breakpoint-max(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
47+
// 767.98px
48+
@function breakpoint-max($name, $breakpoints: $grid-breakpoints) {
49+
$next: breakpoint-next($name, $breakpoints);
50+
@return if($next, breakpoint-min($next, $breakpoints) - 0.02, null);
51+
}
52+
53+
// Returns a blank string if smallest breakpoint, otherwise returns the name with a dash in front.
54+
// Useful for making responsive utilities.
55+
//
56+
// >> breakpoint-infix(xs, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
57+
// "" (Returns a blank string)
58+
// >> breakpoint-infix(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
59+
// "-sm"
60+
@function breakpoint-infix($name, $breakpoints: $grid-breakpoints) {
61+
@return if(breakpoint-min($name, $breakpoints) == null, '', '-#{$name}');
62+
}
63+
64+
// Media of at least the minimum breakpoint width. No query for the smallest breakpoint.
65+
// Makes the @content apply to the given breakpoint and wider.
66+
@mixin media-breakpoint-up($name, $breakpoints: $grid-breakpoints) {
67+
$min: breakpoint-min($name, $breakpoints);
68+
@if $min {
69+
@media (min-width: $min) {
70+
@content;
71+
}
72+
} @else {
73+
@content;
74+
}
75+
}
76+
77+
// Media of at most the maximum breakpoint width. No query for the largest breakpoint.
78+
// Makes the @content apply to the given breakpoint and narrower.
79+
@mixin media-breakpoint-down($name, $breakpoints: $grid-breakpoints) {
80+
$max: breakpoint-max($name, $breakpoints);
81+
@if $max {
82+
@media (max-width: $max) {
83+
@content;
84+
}
85+
} @else {
86+
@content;
87+
}
88+
}
89+
90+
// Media that spans multiple breakpoint widths.
91+
// Makes the @content apply between the min and max breakpoints
92+
@mixin media-breakpoint-between(
93+
$lower,
94+
$upper,
95+
$breakpoints: $grid-breakpoints
96+
) {
97+
$min: breakpoint-min($lower, $breakpoints);
98+
$max: breakpoint-max($upper, $breakpoints);
99+
100+
@if $min != null and $max != null {
101+
@media (min-width: $min) and (max-width: $max) {
102+
@content;
103+
}
104+
} @else if $max == null {
105+
@include media-breakpoint-up($lower, $breakpoints) {
106+
@content;
107+
}
108+
} @else if $min == null {
109+
@include media-breakpoint-down($upper, $breakpoints) {
110+
@content;
111+
}
112+
}
113+
}
114+
115+
// Media between the breakpoint's minimum and maximum widths.
116+
// No minimum for the smallest breakpoint, and no maximum for the largest one.
117+
// Makes the @content apply only to the given breakpoint, not viewports any wider or narrower.
118+
@mixin media-breakpoint-only($name, $breakpoints: $grid-breakpoints) {
119+
$min: breakpoint-min($name, $breakpoints);
120+
$max: breakpoint-max($name, $breakpoints);
121+
122+
@if $min != null and $max != null {
123+
@media (min-width: $min) and (max-width: $max) {
124+
@content;
125+
}
126+
} @else if $max == null {
127+
@include media-breakpoint-up($name, $breakpoints) {
128+
@content;
129+
}
130+
} @else if $min == null {
131+
@include media-breakpoint-down($name, $breakpoints) {
132+
@content;
133+
}
134+
}
135+
}

0 commit comments

Comments
 (0)