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.
- checksums.yaml +7 -0
- data/.gitignore +9 -0
- data/.travis.yml +4 -0
- data/Gemfile +4 -0
- data/LICENSE.txt +21 -0
- data/README.md +46 -0
- data/Rakefile +1 -0
- data/app/assets/stylesheets/scooter.scss +38 -0
- data/app/assets/stylesheets/scooter/base/__all.scss +12 -0
- data/app/assets/stylesheets/scooter/base/_base.scss +23 -0
- data/app/assets/stylesheets/scooter/base/_reset.scss +55 -0
- data/app/assets/stylesheets/scooter/base/_typography.scss +91 -0
- data/app/assets/stylesheets/scooter/components/__all.scss +21 -0
- data/app/assets/stylesheets/scooter/components/_arrow.scss +25 -0
- data/app/assets/stylesheets/scooter/components/_avatar.scss +191 -0
- data/app/assets/stylesheets/scooter/components/_badge.scss +46 -0
- data/app/assets/stylesheets/scooter/components/_banners.scss +68 -0
- data/app/assets/stylesheets/scooter/components/_buttons.scss +152 -0
- data/app/assets/stylesheets/scooter/components/_calendar.scss +97 -0
- data/app/assets/stylesheets/scooter/components/_cards.scss +146 -0
- data/app/assets/stylesheets/scooter/components/_inputs.scss +91 -0
- data/app/assets/stylesheets/scooter/components/_loading-indicator.scss +69 -0
- data/app/assets/stylesheets/scooter/components/_modal.scss +74 -0
- data/app/assets/stylesheets/scooter/components/_tab-nav.scss +70 -0
- data/app/assets/stylesheets/scooter/components/_tables.scss +66 -0
- data/app/assets/stylesheets/scooter/components/_title-bubble.scss +137 -0
- data/app/assets/stylesheets/scooter/components/_tokens.scss +116 -0
- data/app/assets/stylesheets/scooter/components/_typeahead.scss +77 -0
- data/app/assets/stylesheets/scooter/functions/__all.scss +11 -0
- data/app/assets/stylesheets/scooter/functions/_colors.scss +104 -0
- data/app/assets/stylesheets/scooter/functions/_maths.scss +21 -0
- data/app/assets/stylesheets/scooter/functions/_units.scss +10 -0
- data/app/assets/stylesheets/scooter/helpers/__all.scss +13 -0
- data/app/assets/stylesheets/scooter/helpers/_accessibility.scss +28 -0
- data/app/assets/stylesheets/scooter/helpers/_clearfix.scss +23 -0
- data/app/assets/stylesheets/scooter/helpers/_inputs.scss +22 -0
- data/app/assets/stylesheets/scooter/helpers/_layout.scss +112 -0
- data/app/assets/stylesheets/scooter/helpers/_typography.scss +88 -0
- data/app/assets/stylesheets/scooter/mixins/__all.scss +11 -0
- data/app/assets/stylesheets/scooter/mixins/_accessibility.scss +22 -0
- data/app/assets/stylesheets/scooter/mixins/_arrow.scss +53 -0
- data/app/assets/stylesheets/scooter/mixins/_debug.scss +83 -0
- data/app/assets/stylesheets/scooter/mixins/_image.scss +15 -0
- data/app/assets/stylesheets/scooter/mixins/_properties.scss +16 -0
- data/app/assets/stylesheets/scooter/objects/__all.scss +11 -0
- data/app/assets/stylesheets/scooter/objects/_flag.scss +88 -0
- data/app/assets/stylesheets/scooter/objects/_grid.scss +295 -0
- data/app/assets/stylesheets/scooter/objects/_list-ui.scss +23 -0
- data/app/assets/stylesheets/scooter/objects/_media.scss +33 -0
- data/app/assets/stylesheets/scooter/objects/_wrap.scss +12 -0
- data/app/assets/stylesheets/scooter/variables/__all.scss +10 -0
- data/app/assets/stylesheets/scooter/variables/_colors.scss +72 -0
- data/app/assets/stylesheets/scooter/variables/_config.scss +5 -0
- data/app/assets/stylesheets/scooter/variables/_units.scss +8 -0
- data/bin/console +14 -0
- data/bin/setup +8 -0
- data/lib/scooter-sass.rb +52 -0
- data/lib/scooter-sass/engine.rb +11 -0
- data/lib/scooter-sass/version.rb +5 -0
- data/scooter-sass.gemspec +26 -0
- 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,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,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
|
+
}
|