scooter-sass 0.9.1

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.
Files changed (61) hide show
  1. checksums.yaml +7 -0
  2. data/.gitignore +9 -0
  3. data/.travis.yml +4 -0
  4. data/Gemfile +4 -0
  5. data/LICENSE.txt +21 -0
  6. data/README.md +46 -0
  7. data/Rakefile +1 -0
  8. data/app/assets/stylesheets/scooter.scss +38 -0
  9. data/app/assets/stylesheets/scooter/base/__all.scss +12 -0
  10. data/app/assets/stylesheets/scooter/base/_base.scss +23 -0
  11. data/app/assets/stylesheets/scooter/base/_reset.scss +55 -0
  12. data/app/assets/stylesheets/scooter/base/_typography.scss +91 -0
  13. data/app/assets/stylesheets/scooter/components/__all.scss +21 -0
  14. data/app/assets/stylesheets/scooter/components/_arrow.scss +25 -0
  15. data/app/assets/stylesheets/scooter/components/_avatar.scss +191 -0
  16. data/app/assets/stylesheets/scooter/components/_badge.scss +46 -0
  17. data/app/assets/stylesheets/scooter/components/_banners.scss +68 -0
  18. data/app/assets/stylesheets/scooter/components/_buttons.scss +152 -0
  19. data/app/assets/stylesheets/scooter/components/_calendar.scss +97 -0
  20. data/app/assets/stylesheets/scooter/components/_cards.scss +146 -0
  21. data/app/assets/stylesheets/scooter/components/_inputs.scss +91 -0
  22. data/app/assets/stylesheets/scooter/components/_loading-indicator.scss +69 -0
  23. data/app/assets/stylesheets/scooter/components/_modal.scss +74 -0
  24. data/app/assets/stylesheets/scooter/components/_tab-nav.scss +70 -0
  25. data/app/assets/stylesheets/scooter/components/_tables.scss +66 -0
  26. data/app/assets/stylesheets/scooter/components/_title-bubble.scss +137 -0
  27. data/app/assets/stylesheets/scooter/components/_tokens.scss +116 -0
  28. data/app/assets/stylesheets/scooter/components/_typeahead.scss +77 -0
  29. data/app/assets/stylesheets/scooter/functions/__all.scss +11 -0
  30. data/app/assets/stylesheets/scooter/functions/_colors.scss +104 -0
  31. data/app/assets/stylesheets/scooter/functions/_maths.scss +21 -0
  32. data/app/assets/stylesheets/scooter/functions/_units.scss +10 -0
  33. data/app/assets/stylesheets/scooter/helpers/__all.scss +13 -0
  34. data/app/assets/stylesheets/scooter/helpers/_accessibility.scss +28 -0
  35. data/app/assets/stylesheets/scooter/helpers/_clearfix.scss +23 -0
  36. data/app/assets/stylesheets/scooter/helpers/_inputs.scss +22 -0
  37. data/app/assets/stylesheets/scooter/helpers/_layout.scss +112 -0
  38. data/app/assets/stylesheets/scooter/helpers/_typography.scss +88 -0
  39. data/app/assets/stylesheets/scooter/mixins/__all.scss +11 -0
  40. data/app/assets/stylesheets/scooter/mixins/_accessibility.scss +22 -0
  41. data/app/assets/stylesheets/scooter/mixins/_arrow.scss +53 -0
  42. data/app/assets/stylesheets/scooter/mixins/_debug.scss +83 -0
  43. data/app/assets/stylesheets/scooter/mixins/_image.scss +15 -0
  44. data/app/assets/stylesheets/scooter/mixins/_properties.scss +16 -0
  45. data/app/assets/stylesheets/scooter/objects/__all.scss +11 -0
  46. data/app/assets/stylesheets/scooter/objects/_flag.scss +88 -0
  47. data/app/assets/stylesheets/scooter/objects/_grid.scss +295 -0
  48. data/app/assets/stylesheets/scooter/objects/_list-ui.scss +23 -0
  49. data/app/assets/stylesheets/scooter/objects/_media.scss +33 -0
  50. data/app/assets/stylesheets/scooter/objects/_wrap.scss +12 -0
  51. data/app/assets/stylesheets/scooter/variables/__all.scss +10 -0
  52. data/app/assets/stylesheets/scooter/variables/_colors.scss +72 -0
  53. data/app/assets/stylesheets/scooter/variables/_config.scss +5 -0
  54. data/app/assets/stylesheets/scooter/variables/_units.scss +8 -0
  55. data/bin/console +14 -0
  56. data/bin/setup +8 -0
  57. data/lib/scooter-sass.rb +52 -0
  58. data/lib/scooter-sass/engine.rb +11 -0
  59. data/lib/scooter-sass/version.rb +5 -0
  60. data/scooter-sass.gemspec +26 -0
  61. metadata +132 -0
@@ -0,0 +1,88 @@
1
+ // scss-lint:disable ImportantRule
2
+ //
3
+ //-----------------------------
4
+ //
5
+ // Utility: Typography
6
+ // ===================
7
+ //
8
+ //-----------------------------
9
+ //
10
+ .u-font-center,
11
+ %u-font-center {
12
+ text-align: center !important;
13
+ }
14
+
15
+ .u-font-left,
16
+ %u-font-left {
17
+ text-align: left !important;
18
+ }
19
+
20
+ .u-font-right,
21
+ %u-font-right {
22
+ text-align: right !important;
23
+ }
24
+
25
+ .u-font-small,
26
+ %u-font-small {
27
+ font-size: 0.85em;
28
+ }
29
+
30
+ .u-font-strong,
31
+ %u-font-strong {
32
+ font-weight: 600;
33
+ }
34
+
35
+ .u-font-black,
36
+ %u-font-black {
37
+ color: color(black);
38
+ }
39
+
40
+ .u-font-meta,
41
+ %u-font-meta {
42
+ color: color(gray, medium);
43
+ }
44
+
45
+ .u-font-error,
46
+ %u-font-error,
47
+ .u-font-danger,
48
+ %u-font-danger {
49
+ color: color(red);
50
+ }
51
+
52
+ .u-font-success,
53
+ %u-font-success {
54
+ color: color(green);
55
+ }
56
+
57
+ .u-font-wrap,
58
+ %u-font-wrap {
59
+ white-space: normal;
60
+ }
61
+
62
+ .u-font-nowrap,
63
+ %u-font-nowrap {
64
+ white-space: nowrap;
65
+ }
66
+
67
+ // Hide text in element
68
+ // Useful for icons with screenreader-accessible text
69
+ .u-thide {
70
+ overflow: hidden;
71
+ white-space: nowrap;
72
+
73
+ text-indent: 100%;
74
+ }
75
+
76
+ // Ellipsis text overflow
77
+ .u-ellip {
78
+ max-width: 100%;
79
+ overflow: hidden;
80
+ white-space: nowrap;
81
+
82
+ text-overflow: ellipsis;
83
+ }
84
+
85
+ // Remove list styling from lists
86
+ .u-unlist {
87
+ list-style: none;
88
+ }
@@ -0,0 +1,11 @@
1
+ //---------------------------
2
+ //
3
+ // Mixins
4
+ //
5
+ //---------------------------
6
+
7
+ @import "debug";
8
+ @import "properties";
9
+ @import "arrow";
10
+ @import "image";
11
+ @import "accessibility";
@@ -0,0 +1,22 @@
1
+ // scss-lint:disable ImportantRule
2
+ //
3
+ //-----------------------------------
4
+ //
5
+ // Accessibility mixins
6
+ // ====================
7
+ //
8
+ //-----------------------------------
9
+
10
+ // Assert that the parent selector matches one of the selectors passed into $selectors
11
+ @mixin assert-selector($selectors...) {
12
+ $result: &;
13
+
14
+ @each $selector in $selectors {
15
+ $result: selector-append($result, unquote(':not(#{$selector})'));
16
+ }
17
+
18
+ @at-root #{$result} {
19
+ /*! You must ensure the element matches one of these selectors: #{$selectors} */
20
+ outline: 2px solid red !important;
21
+ }
22
+ }
@@ -0,0 +1,53 @@
1
+ //-----------------------------
2
+ //
3
+ // Arrow mixin
4
+ // ===========
5
+ //
6
+ // Allows creation of CSS-only directional arrows
7
+ //
8
+ // The following example turns the .el element into a 10px downward-facing
9
+ // arrow that inherits its color from the parent.
10
+ //
11
+ // .el {
12
+ // @include arrow(10px, inherit, down);
13
+ // }
14
+ //
15
+ //-----------------------------
16
+
17
+ // @private mixin arrow-base
18
+ // Used to set up an arrow element
19
+ @mixin __arrow-base($size: 10px) {
20
+ display: inline-block;
21
+ width: 0;
22
+ height: 0;
23
+
24
+ $size: $size/2;
25
+ border: $size solid transparent;
26
+ }
27
+
28
+ // @private mixin arrow-make
29
+ // Used with arrow-base($size) to create an arrow shape
30
+ @mixin __arrow-make($color: inherit, $direction: down) {
31
+ // Set up the direction
32
+ @if $direction == down {
33
+ $direction: "top";
34
+ } @elseif $direction == up {
35
+ $direction: "bottom";
36
+ } @elseif $direction == left {
37
+ $direction: "right";
38
+ } @elseif $direction == right {
39
+ $direction: "left";
40
+ } @else {
41
+ @warn "[@include arrow[-*](vars)] $direction can only accept the following values: up, down, left, right. Falling back to default (down)";
42
+ $direction: "top";
43
+ }
44
+
45
+ border-#{$direction}-color: $color;
46
+ }
47
+
48
+ // Arrow
49
+ // Shorthand mixin accessor for arrow-base() and arrow-make()
50
+ @mixin arrow($size: 10px, $color: inherit, $direction: down) {
51
+ @include __arrow-base($size);
52
+ @include __arrow-make($color, $direction);
53
+ }
@@ -0,0 +1,83 @@
1
+ //-----------------------------
2
+ //
3
+ // Debugging
4
+ // =========
5
+ //
6
+ // Mixins for debugging class use, etc.
7
+ //
8
+ //-----------------------------
9
+
10
+ // Simple toggle for switching debugging on and off
11
+ $DBdebug: false !default;
12
+
13
+ // Mixin that gives visual feedback in the DOM if a selector is used outside of
14
+ // a given context. Useful for detecting misused Elements in BEM.
15
+ //
16
+ // .simple {
17
+ // font-weight: bold;
18
+ // }
19
+ //
20
+ // .simple__usage {
21
+ // color: red;
22
+ // @include nest-check(".simple");
23
+ // }
24
+ //
25
+ // Courtesy Harry Roberts (@csswizardry)
26
+ @mixin nest-check($element) {
27
+ @if ($DBdebug == true) {
28
+ position: relative;
29
+
30
+ outline: 1px solid color(red);
31
+
32
+ &::after {
33
+ content: "Error: Element `." attr(class) "` should be within `#{$element}`.";
34
+ position: absolute;
35
+ bottom: 100%;
36
+ left: 0;
37
+ white-space: nowrap;
38
+
39
+ font-family: monospace;
40
+
41
+ color: color(red);
42
+ background-color: color(white);
43
+ }
44
+
45
+ #{$element} & {
46
+ outline: none;
47
+
48
+ &::after {
49
+ content: normal;
50
+ }
51
+ }
52
+ }
53
+ }
54
+
55
+ @if ($DBdebug == true) {
56
+
57
+ // If an element has a class attribute containing two hyphens but no space
58
+ // (i.e. only one class is being used, and it's a Modifier), provide visual
59
+ // feedback in the DOM.
60
+ //
61
+ // N.B. This isn't bulletproof: `class="foo--bar baz"` would pass, as would
62
+ // `class=" foo--bar"`. Use with a pinch of salt.
63
+ //
64
+ [class*="--"]:not([class*=" "]) {
65
+ position: relative;
66
+
67
+ outline: 1px solid red;
68
+
69
+ &:after {
70
+ content: "Error: Cannot have a Modifier (i.e. `." attr(class) "`) without a Block.";
71
+ position: absolute;
72
+ bottom: 100%;
73
+ left: 0;
74
+ white-space: nowrap;
75
+
76
+ font-family: monospace;
77
+
78
+ color: red;
79
+ background-color: white;
80
+ }
81
+ }
82
+
83
+ }
@@ -0,0 +1,15 @@
1
+ //-----------------------------------
2
+ //
3
+ // Image mixins
4
+ // ============
5
+ //
6
+ //-----------------------------------
7
+
8
+ @mixin background-image($name, $size: null, $position: center, $repeat: no-repeat) {
9
+ background-image: url("#{$DBimage-path}#{$name}");
10
+ @if ($size != null) {
11
+ background-size: $size;
12
+ }
13
+ background-position: $position;
14
+ background-repeat: $repeat;
15
+ }
@@ -0,0 +1,16 @@
1
+ //---------------------------
2
+ //
3
+ // Property functions
4
+ //
5
+ //---------------------------
6
+
7
+ // Share values for multiple properties
8
+ // Usage:
9
+ //
10
+ // @include share(padding-top, padding-bottom, 23px);
11
+ //
12
+ @mixin share($props.../*, $value */) {
13
+ @for $i from 1 to length($props) {
14
+ #{nth($props, $i)}: nth($props, -1);
15
+ }
16
+ }
@@ -0,0 +1,11 @@
1
+ //---------------------------
2
+ //
3
+ // Objects
4
+ //
5
+ //---------------------------
6
+
7
+ @import "wrap";
8
+ @import "grid";
9
+ @import "media";
10
+ @import "list-ui";
11
+ @import "flag";
@@ -0,0 +1,88 @@
1
+ //-----------------------------
2
+ //
3
+ // Flag object
4
+ // ===========
5
+ //
6
+ // Modified version of Harry Roberts' flag object
7
+ // (http://csswizardry.com/2013/05/the-flag-object/)
8
+ //
9
+ // Similar to the media object. Used to vertically align a fluid-width element
10
+ // and a fixed-width element next to one another.
11
+ //
12
+ // Usage:
13
+ //
14
+ // <div class="o-flag">
15
+ // <div class="o-flag__fix">
16
+ // <img src="" alt="This element will maintain its width" />
17
+ // </div>
18
+ // <div class="o-flag__flex">
19
+ // <p>This element will grow to fill the remaining space</p>
20
+ // </div>
21
+ // </div>
22
+ //
23
+ //-----------------------------
24
+
25
+ $DBflag-namespace: "o-flag" !default;
26
+
27
+ .#{$DBflag-namespace} {
28
+ display: table;
29
+ width: 100%;
30
+
31
+ &__fix,
32
+ &__flex {
33
+ display: table-cell;
34
+ vertical-align: middle;
35
+
36
+ // Use the --top modifier to align top edges of the elements
37
+ .#{$DBflag-namespace}--top & {
38
+ vertical-align: top;
39
+ }
40
+
41
+ // Use --bottom to align bottom edges of the elements
42
+ .#{$DBflag-namespace}--bottom & {
43
+ vertical-align: bottom;
44
+ }
45
+
46
+ }
47
+
48
+ // The fixed-width element
49
+ &__fix {
50
+ white-space: nowrap;
51
+ }
52
+
53
+ // This element grows to fill the remainder of its container
54
+ &__flex {
55
+ width: 100%;
56
+ }
57
+ }
58
+
59
+ // Flexbox adjustments
60
+ @supports (display: flex) {
61
+ .#{$DBflag-namespace} {
62
+ display: flex;
63
+ align-items: center;
64
+
65
+ &--top {
66
+ align-items: flex-start;
67
+ }
68
+
69
+ &--bottom {
70
+ align-items: flex-end;
71
+ }
72
+ }
73
+
74
+ .#{$DBflag-namespace}__fix {
75
+ display: inherit;
76
+ align-items: inherit;
77
+ flex: 0 0 auto;
78
+ }
79
+
80
+ .#{$DBflag-namespace}__flex {
81
+ display: initial;
82
+ min-width: 0;
83
+ // Though width is set by flex in this selector, Safari 9 exhibits a bug
84
+ // causing it to ignore the implied width if an explicit width is set.
85
+ width: auto;
86
+ flex: 1 1 auto;
87
+ }
88
+ }
@@ -0,0 +1,295 @@
1
+ // scss-lint:disable SelectorDepth
2
+ //
3
+ //-----------------------------
4
+ //
5
+ // Grid system adapted from Daniel Eden's
6
+ // Toast (http://daneden.github.io/Toast/)
7
+ //
8
+ //
9
+ // Usage
10
+ // =====
11
+ //
12
+ // Assuming default values:
13
+ //
14
+ // <div class="grid">
15
+ // <div class="grid__col grid__col--1-of-2">
16
+ // A half-width column.
17
+ // </div>
18
+ // <div class="grid__col grid__col--1-of-4 grid__col--pull-1-of-4">
19
+ // A quarter, pulled left by its own width. You get this, right?
20
+ // </div>
21
+ // </div>
22
+ //
23
+ //
24
+ // Customisation
25
+ // =============
26
+ //
27
+ // $DBgrid-namespace and $grid-column-namespace adjusts the class names for the
28
+ // grid. With default values, grid wrappers have a class of '.grid' and
29
+ // columns '.grid__col'.
30
+ //
31
+ // $DBcol-groups(n) adjusts column divisions.
32
+ // For example, $DBcol-groups(12) will produce a 12-column grid.
33
+ // $DBcol-groups(3,6,8) will produce a 3-, 6-, and 8-column grid.
34
+ //
35
+ // $DBgutter-width is-you guessed it-the gutter width. Accepts any unit.
36
+ //
37
+ // That's it. Have fun.
38
+ //
39
+ //-----------------------------
40
+
41
+ // Namespaces
42
+ // This stops me from being overzealous with enforcing classes
43
+ $DBgrid-namespace: "o-grid" !default;
44
+ $DBgrid-column-namespace: "o-grid__col" !default;
45
+
46
+ // $DBcol-groups are the column groups you want
47
+ // For example, $DBcol-groups: (3, 4, 5) will output:
48
+ // .grid__col--n-of-3, .grid__col--n-of-4, [...]
49
+ $DBcol-groups: (2, 3, 4, 6, 12) !default;
50
+
51
+ // Gutter width
52
+ $DBgutter-width: 20px !default;
53
+
54
+ // Breakpoints
55
+ $DBbreakpoint-medium: 750px !default;
56
+ $DBbreakpoint-small: 550px !default;
57
+
58
+ .#{$DBgrid-namespace} {
59
+ list-style: none;
60
+ margin-left: -$DBgutter-width;
61
+ }
62
+
63
+ %span-all { width: percentage(1 / 1); }
64
+
65
+ %one-half { width: percentage(1 / 2); }
66
+
67
+ %one-third { width: percentage(1 / 3); }
68
+ %two-thirds { width: percentage(2 / 3); }
69
+
70
+ %one-quarter { width: percentage(1 / 4); }
71
+ %two-quarters { width: percentage(2 / 4); }
72
+ %three-quarters { width: percentage(3 / 4); }
73
+
74
+ %push-span-all { margin-left: percentage(1 / 1); }
75
+
76
+ %push-one-half { margin-left: percentage(1 / 2); }
77
+
78
+ %push-one-third { margin-left: percentage(1 / 3); }
79
+ %push-two-thirds { margin-left: percentage(2 / 3); }
80
+
81
+ %push-one-quarter { margin-left: percentage(1 / 4); }
82
+ %push-two-quarters { margin-left: percentage(2 / 4); }
83
+ %push-three-quarters { margin-left: percentage(3 / 4); }
84
+
85
+ %pull-span-all { margin-left: -(percentage(1 / 1)); }
86
+
87
+ %pull-one-half { margin-left: -(percentage(1 / 2)); }
88
+
89
+ %pull-one-third { margin-left: -(percentage(1 / 3)); }
90
+ %pull-two-thirds { margin-left: -(percentage(2 / 3)); }
91
+
92
+ %pull-one-quarter { margin-left: -(percentage(1 / 4)); }
93
+ %pull-two-quarters { margin-left: -(percentage(2 / 4)); }
94
+ %pull-three-quarters { margin-left: -(percentage(3 / 4)); }
95
+
96
+ // For each of our column groups...
97
+ @each $group in $DBcol-groups {
98
+
99
+ // For each column width from 1 to the column group...
100
+ @for $i from 1 through $group {
101
+ $relation: ($i / $group);
102
+
103
+ .#{$DBgrid-column-namespace}--#{$i}-of-#{$group} {
104
+ @if $relation == 1 {
105
+ @extend %span-all;
106
+ } @else if $relation == 1 {
107
+ @extend %one-half;
108
+ } @else if $relation == (1 / 3) {
109
+ @extend %one-third;
110
+ } @else if $relation == (2 / 3) {
111
+ @extend %two-thirds;
112
+ } @else if $relation == (1 / 4) {
113
+ @extend %one-quarter;
114
+ } @else if $relation == (2 / 4) {
115
+ @extend %two-quarters;
116
+ } @else if $relation == (3 / 4) {
117
+ @extend %three-quarters;
118
+ } @else {
119
+ width: percentage($i / $group);
120
+ }
121
+ }
122
+
123
+ .#{$DBgrid-column-namespace}--push-#{$i}-of-#{$group} {
124
+
125
+ @if $relation == 1 {
126
+ @extend %push-span-all;
127
+ } @else if $relation == (1 / 2) {
128
+ @extend %push-one-half;
129
+ } @else if $relation == (1 / 3) {
130
+ @extend %push-one-third;
131
+ } @else if $relation == (2 / 3) {
132
+ @extend %push-two-thirds;
133
+ } @else if $relation == (1 / 4) {
134
+ @extend %push-one-quarter;
135
+ } @else if $relation == (2 / 4) {
136
+ @extend %push-two-quarters;
137
+ } @else if $relation == (3 / 4) {
138
+ @extend %push-three-quarters;
139
+ } @else {
140
+ margin-left: percentage($i / $group);
141
+ }
142
+ }
143
+
144
+ .#{$DBgrid-column-namespace}--pull-#{$i}-of-#{$group} {
145
+
146
+ @if $relation == 1 {
147
+ @extend %pull-span-all;
148
+ } @else if $relation == (1 / 2) {
149
+ @extend %pull-one-half;
150
+ } @else if $relation == (1 / 3) {
151
+ @extend %pull-one-third;
152
+ } @else if $relation == (2 / 3) {
153
+ @extend %pull-two-thirds;
154
+ } @else if $relation == (1 / 4) {
155
+ @extend %pull-one-quarter;
156
+ } @else if $relation == (2 / 4) {
157
+ @extend %pull-two-quarters;
158
+ } @else if $relation == (3 / 4) {
159
+ @extend %pull-three-quarters;
160
+ } @else {
161
+
162
+ margin-left: -(percentage($i / $group));
163
+
164
+ }
165
+ }
166
+ } // end @for
167
+
168
+ } // end @each
169
+
170
+ // All direct descendents of .grid get treated the same way.
171
+ // This might be overkill for some, but its a time-saver for me.
172
+ .#{$DBgrid-column-namespace} {
173
+ box-sizing: border-box;
174
+ display: inline-block;
175
+ margin-right: -0.24em;
176
+ min-height: 1px;
177
+ padding-left: $DBgutter-width;
178
+ vertical-align: top;
179
+
180
+ // Remove whitespace offset when there is no whitespace
181
+ .#{$DBgrid-namespace}--nowhitespace &,
182
+ [data-reactid] & {
183
+ margin-right: 0;
184
+ }
185
+
186
+ .#{$DBgrid-namespace}--responsive & {
187
+ @media (max-width: $DBbreakpoint-medium) {
188
+ display: block;
189
+ margin-left: 0;
190
+ margin-right: 0;
191
+ width: auto;
192
+ }
193
+
194
+ @media (max-width: $DBbreakpoint-medium) and (min-width: $DBbreakpoint-small) {
195
+ &[class*="#{$DBgrid-column-namespace}--m-"] {
196
+ display: inline-block;
197
+ margin-right: -0.24em;
198
+ }
199
+
200
+ &.#{$DBgrid-column-namespace}--m-1-of-2,
201
+ &.#{$DBgrid-column-namespace}--m-2-of-4 {
202
+ width: percentage(1 / 2);
203
+ }
204
+
205
+ &.#{$DBgrid-column-namespace}--m-1-of-3 {
206
+ width: percentage(1 / 3);
207
+ }
208
+
209
+ &.#{$DBgrid-column-namespace}--m-2-of-3 {
210
+ width: percentage(2 / 3);
211
+ }
212
+
213
+ &.#{$DBgrid-column-namespace}--m-1-of-4 {
214
+ width: percentage(1 / 4);
215
+ }
216
+
217
+ &.#{$DBgrid-column-namespace}--m-3-of-4 {
218
+ width: percentage(3 / 4);
219
+ }
220
+ }
221
+
222
+ @media (max-width: $DBbreakpoint-small) {
223
+ &[class*="#{$DBgrid-column-namespace}--s-"] {
224
+ display: inline-block;
225
+ margin-right: -0.24em;
226
+ }
227
+
228
+ &.#{$DBgrid-column-namespace}--s-1-of-2,
229
+ &.#{$DBgrid-column-namespace}--s-2-of-4 {
230
+ width: percentage(1 / 2);
231
+ }
232
+
233
+ &.#{$DBgrid-column-namespace}--s-1-of-3 {
234
+ width: percentage(1 / 3);
235
+ }
236
+
237
+ &.#{$DBgrid-column-namespace}--s-2-of-3 {
238
+ width: percentage(2 / 3);
239
+ }
240
+
241
+ &.#{$DBgrid-column-namespace}--s-1-of-4 {
242
+ width: percentage(1 / 4);
243
+ }
244
+
245
+ &.#{$DBgrid-column-namespace}--s-3-of-4 {
246
+ width: percentage(3 / 4);
247
+ }
248
+ }
249
+ }
250
+ }
251
+
252
+ // Centers the column in the grid and clears the row of all other columns
253
+ .#{$DBgrid-column-namespace}--centered {
254
+ display: block;
255
+ margin-left: auto;
256
+ margin-right: auto;
257
+ }
258
+
259
+
260
+ // Displays the column as the first in its row
261
+ .#{$DBgrid-column-namespace}--d-first {
262
+ float: left;
263
+ }
264
+
265
+ // Displays the column as the last in its row
266
+ .#{$DBgrid-column-namespace}--d-last {
267
+ float: right;
268
+ }
269
+
270
+ // Removes gutters from the columns
271
+ .#{$DBgrid-namespace}--no-gutter {
272
+ margin-left: 0;
273
+ width: 100%;
274
+
275
+ .#{$DBgrid-column-namespace} {
276
+ padding-left: 0;
277
+ }
278
+
279
+ .#{$DBgrid-column-namespace}--span-all {
280
+ margin-left: 0;
281
+ width: 100%;
282
+ }
283
+ }
284
+
285
+ // Align column to the bottom.
286
+ .#{$DBgrid-column-namespace}--ab,
287
+ .#{$DBgrid-column-namespace}--align-bottom {
288
+ vertical-align: bottom;
289
+ }
290
+
291
+ // Align column to the middle.
292
+ .#{$DBgrid-column-namespace}--am,
293
+ .#{$DBgrid-column-namespace}--align-middle {
294
+ vertical-align: middle;
295
+ }