polar-express 0.0.2

Sign up to get free protection for your applications and to get access to all the features.
Files changed (60) hide show
  1. data/MIT-LICENSE +19 -0
  2. data/README.md +37 -0
  3. data/lib/generators/inuitcss/install/USAGE +9 -0
  4. data/lib/generators/inuitcss/install/install_generator.rb +9 -0
  5. data/lib/generators/inuitcss/install/templates/inuit.css.scss +99 -0
  6. data/lib/polar-express.rb +6 -0
  7. data/vendor/assets/stylesheets/CHANGELOG.md +26 -0
  8. data/vendor/assets/stylesheets/CONTRIBUTING.md +42 -0
  9. data/vendor/assets/stylesheets/LICENSE +13 -0
  10. data/vendor/assets/stylesheets/README.md +367 -0
  11. data/vendor/assets/stylesheets/_defaults.scss +225 -0
  12. data/vendor/assets/stylesheets/_inuit.scss +213 -0
  13. data/vendor/assets/stylesheets/base/_code.scss +63 -0
  14. data/vendor/assets/stylesheets/base/_forms.scss +174 -0
  15. data/vendor/assets/stylesheets/base/_headings.scss +60 -0
  16. data/vendor/assets/stylesheets/base/_images.scss +73 -0
  17. data/vendor/assets/stylesheets/base/_lists.scss +19 -0
  18. data/vendor/assets/stylesheets/base/_main.scss +8 -0
  19. data/vendor/assets/stylesheets/base/_paragraphs.scss +11 -0
  20. data/vendor/assets/stylesheets/base/_quotes.scss +96 -0
  21. data/vendor/assets/stylesheets/base/_smallprint.scss +13 -0
  22. data/vendor/assets/stylesheets/base/_tables.scss +163 -0
  23. data/vendor/assets/stylesheets/component.json +5 -0
  24. data/vendor/assets/stylesheets/generic/_brand.scss +18 -0
  25. data/vendor/assets/stylesheets/generic/_clearfix.scss +15 -0
  26. data/vendor/assets/stylesheets/generic/_debug.scss +168 -0
  27. data/vendor/assets/stylesheets/generic/_helper.scss +184 -0
  28. data/vendor/assets/stylesheets/generic/_mixins.scss +328 -0
  29. data/vendor/assets/stylesheets/generic/_normalize.scss +396 -0
  30. data/vendor/assets/stylesheets/generic/_pull.scss +147 -0
  31. data/vendor/assets/stylesheets/generic/_push.scss +147 -0
  32. data/vendor/assets/stylesheets/generic/_reset.scss +80 -0
  33. data/vendor/assets/stylesheets/generic/_shared.scss +61 -0
  34. data/vendor/assets/stylesheets/generic/_widths.scss +158 -0
  35. data/vendor/assets/stylesheets/objects/_arrows.scss +147 -0
  36. data/vendor/assets/stylesheets/objects/_beautons.scss +226 -0
  37. data/vendor/assets/stylesheets/objects/_block-list.scss +44 -0
  38. data/vendor/assets/stylesheets/objects/_breadcrumb.scss +63 -0
  39. data/vendor/assets/stylesheets/objects/_columns.scss +22 -0
  40. data/vendor/assets/stylesheets/objects/_flexbox.scss +55 -0
  41. data/vendor/assets/stylesheets/objects/_flyout.scss +63 -0
  42. data/vendor/assets/stylesheets/objects/_greybox.scss +58 -0
  43. data/vendor/assets/stylesheets/objects/_grids.scss +69 -0
  44. data/vendor/assets/stylesheets/objects/_icon-text.scss +40 -0
  45. data/vendor/assets/stylesheets/objects/_island.scss +38 -0
  46. data/vendor/assets/stylesheets/objects/_link-complex.scss +32 -0
  47. data/vendor/assets/stylesheets/objects/_lozenges.scss +46 -0
  48. data/vendor/assets/stylesheets/objects/_marginalia.scss +52 -0
  49. data/vendor/assets/stylesheets/objects/_matrix.scss +89 -0
  50. data/vendor/assets/stylesheets/objects/_media.scss +60 -0
  51. data/vendor/assets/stylesheets/objects/_nav.scss +155 -0
  52. data/vendor/assets/stylesheets/objects/_options.scss +45 -0
  53. data/vendor/assets/stylesheets/objects/_pagination.scss +50 -0
  54. data/vendor/assets/stylesheets/objects/_rules.scss +65 -0
  55. data/vendor/assets/stylesheets/objects/_split.scss +39 -0
  56. data/vendor/assets/stylesheets/objects/_sprite.scss +98 -0
  57. data/vendor/assets/stylesheets/objects/_stats.scss +52 -0
  58. data/vendor/assets/stylesheets/objects/_this-or-this.scss +38 -0
  59. data/vendor/assets/stylesheets/style.scss +26 -0
  60. metadata +122 -0
@@ -0,0 +1,63 @@
1
+ @if $use-breadcrumb == true{
2
+
3
+ /*------------------------------------*\
4
+ $BREADCRUMB
5
+ \*------------------------------------*/
6
+ /**
7
+ * Simple breadcrumb styling to apply to (ordered) lists. Extends `.nav`, e.g.:
8
+ *
9
+ <ol class="nav breadcrumb">
10
+ <li><a href=#>Home</a></li>
11
+ <li><a href=#>About</a></li>
12
+ <li><a href=#>The Board</a></li>
13
+ <li class=current><a href=#>Directors</a></li>
14
+ </ol>
15
+ *
16
+ * Demo: jsfiddle.net/inuitcss/rkAY9
17
+ *
18
+ */
19
+ .breadcrumb > li + li:before{
20
+ content:"\00BB" "\00A0";
21
+ }
22
+
23
+
24
+ /**
25
+ * For denoting a path-like structure, GitHub style, e.g.:
26
+ *
27
+ <ol class="nav breadcrumb--path">
28
+ <li class=breadcrumb__root><a href=#>inuit.css</a></li>
29
+ <li><a href=#>inuit.css</a></li>
30
+ <li><a href=#>partials</a></li>
31
+ <li class=current><a href=#>objects</a></li>
32
+ </ol>
33
+ *
34
+ */
35
+ .breadcrumb--path > li + li:before{
36
+ content:"\002F" "\00A0";
37
+ }
38
+
39
+
40
+ /**
41
+ * Assign a delimiter on the fly through a data attribute, e.g.:
42
+ *
43
+ <ol class="nav breadcrumb">
44
+ <li><a href=#>Home</a></li>
45
+ <li data-breadcrumb="|"><a href=#>About</a></li>
46
+ <li data-breadcrumb="|"><a href=#>The Board</a></li>
47
+ <li data-breadcrumb="|" class=current><a href=#>Directors</a></li>
48
+ </ol>
49
+ *
50
+ */
51
+ .breadcrumb > li + li[data-breadcrumb]:before{
52
+ content:attr(data-breadcrumb) "\00A0";
53
+ }
54
+
55
+
56
+ /**
57
+ * Denote the root of the tree.
58
+ */
59
+ .breadcrumb__root{
60
+ font-weight:bold;
61
+ }
62
+
63
+ }//endif
@@ -0,0 +1,22 @@
1
+ @if $use-columns == true{
2
+
3
+ /*------------------------------------*\
4
+ $COLUMNS
5
+ \*------------------------------------*/
6
+ /**
7
+ * Here we can set elements in columns of text using CSS3, e.g.:
8
+ *
9
+ <p class=text-cols--2>
10
+ *
11
+ * Demo: jsfiddle.net/inuitcss/E26Yd
12
+ *
13
+ */
14
+ %text-cols{
15
+ @include vendor(column-gap, $base-spacing-unit);
16
+ }
17
+ .text-cols--2 { @extend %text-cols; @include vendor(column-count, 2); }
18
+ .text-cols--3 { @extend %text-cols; @include vendor(column-count, 3); }
19
+ .text-cols--4 { @extend %text-cols; @include vendor(column-count, 4); }
20
+ .text-cols--5 { @extend %text-cols; @include vendor(column-count, 5); }
21
+
22
+ }//endif
@@ -0,0 +1,55 @@
1
+ @if $use-flexbox == true{
2
+
3
+ /*------------------------------------*\
4
+ $FLEXBOX
5
+ \*------------------------------------*/
6
+ /**
7
+ * Until we can utilise flexbox natively we can kinda, sorta, attempt to emulate
8
+ * it, in a way... e.g.:
9
+ *
10
+ <header class=flexbox>
11
+
12
+ <div class=flexbox__item>
13
+ <b>Welcome to</b>
14
+ </div>
15
+
16
+ <div class=flexbox__item>
17
+ <img src="//csswizardry.com/inuitcss/img/logo.jpg" alt="inuit.css">
18
+ </div>
19
+
20
+ </header>
21
+ *
22
+ * We can also combine our grid system classes with `.flexbox__item` classes,
23
+ * e.g.:
24
+ *
25
+ <div class=flexbox>
26
+ <div class="flexbox__item one-quarter">
27
+ </div>
28
+ <div class="flexbox__item three-quarters">
29
+ </div>
30
+ </div>
31
+ *
32
+ * It’s pretty poorly named I’m afraid, but it works...
33
+ *
34
+ * Demo: jsfiddle.net/inuitcss/ufUh2
35
+ *
36
+ */
37
+ .flexbox{
38
+ display:table;
39
+ width:100%;
40
+ }
41
+
42
+ /**
43
+ * Nasty hack to circumvent Modernizr conflicts.
44
+ */
45
+ html.flexbox{
46
+ display:block;
47
+ width:auto;
48
+ }
49
+
50
+ .flexbox__item{
51
+ display:table-cell;
52
+ vertical-align:middle;
53
+ }
54
+
55
+ }//endif
@@ -0,0 +1,63 @@
1
+ @if $use-flyout == true{
2
+
3
+ /*------------------------------------*\
4
+ $FLYOUT
5
+ \*------------------------------------*/
6
+ /**
7
+ * Flyouts are pieces of content that fly out of a parent when said parent is
8
+ * hovered. They typically appear bottom-left of the parent.
9
+ *
10
+ <div class=flyout>
11
+ Foo
12
+ <div class=flyout__content>
13
+ <h1>Lorem</h1>
14
+ <p>Ipsum</p>
15
+ </div>
16
+ </div>
17
+ *
18
+ * Extend these objects in your theme stylesheet.
19
+ *
20
+ * Demo: jsfiddle.net/inuitcss/B52HG
21
+ *
22
+ */
23
+ .flyout,
24
+ .flyout--alt{
25
+ position:relative;
26
+ overflow:hidden;
27
+ }
28
+ .flyout__content{
29
+ /**
30
+ * Position the flyouts off-screen. This is typically better than
31
+ * `display:none;`.
32
+ */
33
+ position:absolute;
34
+ top:100%;
35
+ left:-99999px;
36
+ }
37
+
38
+ /**
39
+ * Bring the flyouts into view when you hover their parents.
40
+ * Two different types of flyout; ‘regular’ (`.flyout`) and ‘alternative’
41
+ * (`.flyout--alt`).
42
+ */
43
+ .flyout:hover,
44
+ .flyout--alt:hover{
45
+ overflow:visible;
46
+ }
47
+
48
+ /**
49
+ * Regular flyouts sit all the way from the top, flush left.
50
+ */
51
+ .flyout:hover > .flyout__content{
52
+ left:0;
53
+ }
54
+
55
+ /**
56
+ * Alternative flyouts sit all the way from the left, flush top.
57
+ */
58
+ .flyout--alt:hover > .flyout__content{
59
+ top:0;
60
+ left:100%;
61
+ }
62
+
63
+ }//endif
@@ -0,0 +1,58 @@
1
+ @if $use-greybox == true{
2
+
3
+ /*------------------------------------*\
4
+ $GREYBOX
5
+ \*------------------------------------*/
6
+ /**
7
+ * Quickly throw together greybox wireframes. Use in conjunction with other
8
+ * inuit.css objects to create simple greybox prototypes, e.g.:
9
+ *
10
+ <div class="island greybox greybox--medium">Header</div>
11
+
12
+ <ul class="nav nav--fit nav--block greybox">
13
+ <li><a href=#>Home</a></li>
14
+ <li><a href=#>About</a></li>
15
+ <li><a href=#>Portfolio</a></li>
16
+ <li><a href=#>Contact</a></li>
17
+ </ul>
18
+ *
19
+ * The beauty of combining the greyboxing with inuit.css objects is that any
20
+ * prototyping can quickly be converted into/used as production code.
21
+ *
22
+ * For a more complete prototyping framework, consider Adam Whitcroft’s Proto:
23
+ * adamwhitcroft.com/proto
24
+ *
25
+ * Demo: jsfiddle.net/inuitcss/qCXfh/
26
+ *
27
+ */
28
+ .greybox,
29
+ .graybox{
30
+ @include font-size(12px);
31
+ font-family:sans-serif;
32
+ text-align:center;
33
+ background-color:rgba(0,0,0,0.2);
34
+ color:#fff;
35
+ }
36
+ .greybox a,
37
+ .graybox a{
38
+ color:#fff;
39
+ text-decoration:underline;
40
+ }
41
+
42
+
43
+ /**
44
+ * All greyboxes will occupy 100% of their parent’s width, but to alter their
45
+ * heights we apply incrementally larger line-heights:
46
+ */
47
+ .greybox--small,
48
+ .graybox--small { line-height: 2 * $base-line-height; }
49
+ .greybox--medium,
50
+ .graybox--medium { line-height: 4 * $base-line-height; }
51
+ .greybox--large,
52
+ .graybox--large { line-height: 8 * $base-line-height; }
53
+ .greybox--huge,
54
+ .graybox--huge { line-height:16 * $base-line-height; }
55
+ .greybox--gigantic,
56
+ .graybox--gigantic { line-height:32 * $base-line-height; }
57
+
58
+ }//endif
@@ -0,0 +1,69 @@
1
+ @if $use-grids == true{
2
+
3
+ /*------------------------------------*\
4
+ $GRIDS
5
+ \*------------------------------------*/
6
+ /**
7
+ * Fluid and nestable grid system, e.g.:
8
+ *
9
+ <div class="grid">
10
+
11
+ <div class="grid__item one-third">
12
+ <p>One third grid</p>
13
+ </div><!--
14
+
15
+ --><div class="grid__item two-thirds">
16
+ <p>Two thirds grid</p>
17
+ </div><!--
18
+
19
+ --><div class="grid__item one-half">
20
+ <p>One half grid</p>
21
+ </div><!--
22
+
23
+ --><div class="grid__item one-quarter">
24
+ <p>One quarter grid</p>
25
+ </div><!--
26
+
27
+ --><div class="grid__item one-quarter">
28
+ <p>One quarter grid</p>
29
+ </div>
30
+
31
+ </div>
32
+ *
33
+ * Demo: jsfiddle.net/inuitcss/CLYUC
34
+ *
35
+ */
36
+
37
+
38
+ /**
39
+ * Grid wrapper
40
+ */
41
+ .grid{
42
+ margin-left:-$base-spacing-unit;
43
+ list-style:none;
44
+ margin-bottom:0;
45
+ }
46
+
47
+
48
+ /**
49
+ * Very infrequently occuring grid wrappers as children of grid wrappers.
50
+ */
51
+ .grid > .grid{
52
+ margin-left:0;
53
+ }
54
+
55
+
56
+ /**
57
+ * Grid
58
+ */
59
+ .grid__item{
60
+ display:inline-block;
61
+ width:100%;
62
+ padding-left:$base-spacing-unit;
63
+ vertical-align:top;
64
+ @if $global-border-box == false{
65
+ @include vendor(box-sizing, border-box);
66
+ }
67
+ }
68
+
69
+ }//endif
@@ -0,0 +1,40 @@
1
+ @if $use-icon-text == true{
2
+
3
+ /*------------------------------------*\
4
+ $ICON-TEXT
5
+ \*------------------------------------*/
6
+ /**
7
+ * For text-links etc that have an icon with them. Sometimes whitespace would
8
+ * suffice in creating a gap between the icon and text, for example:
9
+ *
10
+ <a href=#>
11
+ <i class="s s--help"></i> Help &amp; support
12
+ </a>
13
+ *
14
+ * However we will sometimes want a larger, explicity set gap:
15
+ <a href=# class=icon-text>
16
+ <i class="icon-text__icon s s--help"></i>Help &amp; support
17
+ </a>
18
+ *
19
+ * Demo: jsfiddle.net/inuitcss/Q6Lbf
20
+ *
21
+ */
22
+ .icon-text > .icon-text__icon{
23
+ margin-right:$half-spacing-unit / 2;
24
+ }
25
+
26
+
27
+ /**
28
+ * We can also reverse the direction of the margin for icons that appear to the
29
+ * right of the text content, thus:
30
+ *
31
+ <a href=# class=icon-text--rev>
32
+ Help &amp; support<i class="icon-text__icon s s--help"></i>
33
+ </a>
34
+ *
35
+ */
36
+ .icon-text--rev > .icon-text__icon{
37
+ margin-left:$half-spacing-unit / 2;
38
+ }
39
+
40
+ }//endif
@@ -0,0 +1,38 @@
1
+ @if $use-island == true{
2
+
3
+ /*------------------------------------*\
4
+ $ISLAND
5
+ \*------------------------------------*/
6
+ /**
7
+ * Simple, boxed off content, as per: csswizardry.com/2011/10/the-island-object
8
+ * E.g.:
9
+ *
10
+ <div class=island>
11
+ I am boxed off.
12
+ </div>
13
+ *
14
+ * Demo: jsfiddle.net/inuitcss/u8pV3
15
+ *
16
+ */
17
+ .island,
18
+ .islet{
19
+ display:block;
20
+ @extend .cf;
21
+ }
22
+ .island{
23
+ padding:$base-spacing-unit;
24
+ }
25
+ .island > :last-child,
26
+ .islet > :last-child{
27
+ margin-bottom:0;
28
+ }
29
+
30
+
31
+ /**
32
+ * Just like `.island`, only smaller.
33
+ */
34
+ .islet{
35
+ padding:$half-spacing-unit;
36
+ }
37
+
38
+ }//endif
@@ -0,0 +1,32 @@
1
+ @if $use-link-complex == true{
2
+
3
+ /*------------------------------------*\
4
+ $LINK-COMPLEX
5
+ \*------------------------------------*/
6
+ /**
7
+ * As inspired by @necolas:
8
+ * github.com/necolas/suit-utils/blob/master/link.css#L18
9
+ *
10
+ * Add hover behaviour to only selected items within links, e.g.:
11
+ *
12
+ <a href=log-in class=link-complex>
13
+ <i class="s s--user"></i>
14
+ <span class=link-complex__target>Log in</span>
15
+ </a>
16
+ *
17
+ * Demo: jsfiddle.net/inuitcss/rt9M3
18
+ *
19
+ */
20
+ .link-complex,
21
+ .link-complex:hover,
22
+ .link-complex:active,
23
+ .link-complex:focus{
24
+ text-decoration:none;
25
+ }
26
+ .link-complex:hover .link-complex__target,
27
+ .link-complex:active .link-complex__target,
28
+ .link-complex:focus .link-complex__target{
29
+ text-decoration:underline;
30
+ }
31
+
32
+ }//endif
@@ -0,0 +1,46 @@
1
+ @if $use-lozenges == true{
2
+
3
+ /*------------------------------------*\
4
+ $LOZENGES
5
+ \*------------------------------------*/
6
+ /**
7
+ * Create pill- and lozenge-like runs of text, e.g.:
8
+ *
9
+ <p>This <span class=pill>here</span> is a pill!</p>
10
+ *
11
+ <p>This <span class=loz>here</span> is also a lozenge!</p>
12
+ *
13
+ * Pills have fully rounded ends, lozenges have only their corners rounded.
14
+ *
15
+ * Demo: jsfiddle.net/inuitcss/N3pGm
16
+ *
17
+ */
18
+ .pill{
19
+ display:inline-block;
20
+ /**
21
+ * These numbers set in ems mean that, at its narrowest, a lozenge will be
22
+ * the same width as the `line-height` set on the `html` element.
23
+ * This allows us to use the `.loz` in almost any `font-size` we wish.
24
+ */
25
+ min-width: ($line-height-ratio * 0.666667) * 1em;
26
+ padding-right:($line-height-ratio * 0.166667) * 1em;
27
+ padding-left: ($line-height-ratio * 0.166667) * 1em;
28
+ /* =1.50em */
29
+ text-align:center;
30
+ background-color:$base-ui-color;
31
+ color:#fff; /* Override this color in your theme stylesheet */
32
+
33
+ /**
34
+ * Normally we’d use border-radius:100%; but instead here we just use an
35
+ * overly large number; `border-radius:100%;` would create an oval on
36
+ * non-square elements whereas we just want to round the ends of an element.
37
+ */
38
+ border-radius:100px;
39
+ }
40
+
41
+ .loz{
42
+ @extend .pill;
43
+ border-radius:$brand-round;
44
+ }
45
+
46
+ }//endif
@@ -0,0 +1,52 @@
1
+ @if $use-marginalia == true{
2
+
3
+ /*------------------------------------*\
4
+ $MARGINALIA
5
+ \*------------------------------------*/
6
+ /**
7
+ * Marginalia are, per definition, notes in the margin of a document. The
8
+ * `marginalia__body` class can be applied to all kinds of content, like text or
9
+ * images, and is joined by a width class:
10
+ *
11
+ <div class="marginalia">
12
+ <div class="marginalia__body desk-one-fifth"></div>
13
+ </div>
14
+ *
15
+ * Demo: jsfiddle.net/inuitcss/AemkH
16
+ *
17
+ */
18
+ .marginalia{
19
+ @include font-size($milli-size);
20
+ }
21
+
22
+ /**
23
+ * Wait for a certain breakpoint to trigger ‘proper' marginalia. Up to this point,
24
+ * marginalia are inline with the other text.
25
+ */
26
+ @media (min-width: $desk-start){
27
+ .marginalia{
28
+ position:relative;
29
+ }
30
+
31
+ .marginalia__body,
32
+ .marginalia__body--right{
33
+ position:absolute;
34
+ }
35
+
36
+ .marginalia__body{
37
+ right:100%;
38
+ padding-right:$base-spacing-unit;
39
+ text-align:right;
40
+ }
41
+
42
+ /**
43
+ * Align marginalia to the right of the text.
44
+ */
45
+ .marginalia__body--right{
46
+ left:100%;
47
+ padding-left:$base-spacing-unit;
48
+ text-align:left;
49
+ }
50
+ }
51
+
52
+ }//endif
@@ -0,0 +1,89 @@
1
+ @if $use-matrix == true{
2
+
3
+ /*------------------------------------*\
4
+ $MATRIX
5
+ \*------------------------------------*/
6
+ /**
7
+ * Create a grid of items out of a single list, e.g.:
8
+ *
9
+ <ul class="matrix three-cols">
10
+ <li class=all-cols>Lorem</li>
11
+ <li>Ipsum <a href=#>dolor</a></li>
12
+ <li><a href=# class=matrix__link>Sit</a></li>
13
+ <li>Amet</li>
14
+ <li class=all-cols>Consectetuer</li>
15
+ </ul>
16
+ *
17
+ * Extend this object in your theme stylesheet.
18
+ *
19
+ * Demo: jsfiddle.net/inuitcss/Y2zrU
20
+ *
21
+ */
22
+ .matrix{
23
+ @extend .block-list;
24
+ border-left-width:1px;
25
+ @extend .cf;
26
+
27
+ > li{
28
+ float:left;
29
+ border-right-width:1px;
30
+ @if $global-border-box == false{
31
+ @include vendor(box-sizing, border-box);
32
+ }
33
+ }
34
+ }
35
+ .matrix__link{
36
+ @extend .block-list__link;
37
+ }
38
+
39
+
40
+ /**
41
+ * The `.multi-list` object is a lot like the `.matrix` object only without the
42
+ * blocky borders and padding.
43
+ *
44
+ <ul class="multi-list four-cols">
45
+ <li>Lorem</li>
46
+ <li>Ipsum</li>
47
+ <li>Dolor</li>
48
+ <li>Sit</li>
49
+ </ul>
50
+ *
51
+ * Demo: jsfiddle.net/inuitcss/Y2zrU
52
+ *
53
+ */
54
+ .multi-list{
55
+ list-style:none;
56
+ margin-left:0;
57
+ @extend .cf;
58
+ }
59
+ .multi-list > li{
60
+ float:left;
61
+ }
62
+
63
+
64
+ /**
65
+ * Apply these classes alongside the `.matrix` or `.multi-list` classes on
66
+ * lists to determine how wide their columns are.
67
+ */
68
+ .two-cols > li{
69
+ width:50%;
70
+ }
71
+ .three-cols > li{
72
+ width:33.333%;
73
+ }
74
+ .four-cols > li{
75
+ width:25%;
76
+ }
77
+ .five-cols > li{
78
+ width:20%;
79
+ }
80
+ /**
81
+ * Unfortunately we have to qualify this selector in order to bring its
82
+ * specificity above the `.[number]-cols > li` selectors above.
83
+ */
84
+ .matrix > .all-cols,
85
+ .multi-list > .all-cols{
86
+ width:100%;
87
+ }
88
+
89
+ }//endif
@@ -0,0 +1,60 @@
1
+ @if $use-media == true{
2
+
3
+ /*------------------------------------*\
4
+ $MEDIA
5
+ \*------------------------------------*/
6
+ /**
7
+ * Place any image- and text-like content side-by-side, as per:
8
+ * stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code
9
+ * E.g.:
10
+ *
11
+ <div class=media>
12
+ <img src=http://placekitten.com/200/300 alt="" class=media__img>
13
+ <p class=media__body>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
14
+ sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
15
+ </div>
16
+ *
17
+ * Demo: jsfiddle.net/inuitcss/cf4Qs
18
+ *
19
+ */
20
+ .media{
21
+ display:block;
22
+ @extend .cf;
23
+ }
24
+ .media__img{
25
+ float:left;
26
+ margin-right:$base-spacing-unit;
27
+ }
28
+ /**
29
+ * Reversed image location (right instead of left).
30
+ */
31
+ .media__img--rev{
32
+ float:right;
33
+ margin-left:$base-spacing-unit;
34
+ }
35
+
36
+ .media__img img,
37
+ .media__img--rev img{
38
+ display:block;
39
+ }
40
+
41
+ .media__body{
42
+ overflow:hidden;
43
+ }
44
+ .media__body,
45
+ .media__body > :last-child{
46
+ margin-bottom:0;
47
+ }
48
+
49
+
50
+ /**
51
+ * `.img`s in `.islet`s need an appropriately sized margin.
52
+ */
53
+ .islet .media__img{
54
+ margin-right:$half-spacing-unit;
55
+ }
56
+ .islet .media__img--rev{
57
+ margin-left:$half-spacing-unit;
58
+ }
59
+
60
+ }//endif