compass-inuit 4.5.5.1 → 5.0.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 (62) hide show
  1. checksums.yaml +15 -0
  2. data/README.md +2 -4
  3. data/stylesheets/_compass-inuit.scss +1 -0
  4. data/stylesheets/compass-inuit/_base.scss +0 -1
  5. data/stylesheets/compass-inuit/_defaults.scss +225 -0
  6. data/stylesheets/compass-inuit/_objects.scss +1 -2
  7. data/stylesheets/compass-inuit/base/_code.scss +4 -4
  8. data/stylesheets/compass-inuit/base/_forms.scss +19 -19
  9. data/stylesheets/compass-inuit/base/_headings.scss +4 -4
  10. data/stylesheets/compass-inuit/base/_images.scss +7 -1
  11. data/stylesheets/compass-inuit/base/_lists.scss +0 -0
  12. data/stylesheets/compass-inuit/base/_main.scss +1 -1
  13. data/stylesheets/compass-inuit/base/_paragraphs.scss +0 -0
  14. data/stylesheets/compass-inuit/base/_quotes.scss +15 -15
  15. data/stylesheets/compass-inuit/base/_smallprint.scss +0 -0
  16. data/stylesheets/compass-inuit/base/_tables.scss +2 -2
  17. data/stylesheets/compass-inuit/generic/_brand.scss +0 -0
  18. data/stylesheets/compass-inuit/generic/_clearfix.scss +3 -9
  19. data/stylesheets/compass-inuit/generic/_debug.scss +3 -3
  20. data/stylesheets/compass-inuit/generic/_helper.scss +99 -27
  21. data/stylesheets/compass-inuit/generic/_mixins.scss +106 -77
  22. data/stylesheets/compass-inuit/generic/_pull.scss +39 -15
  23. data/stylesheets/compass-inuit/generic/_push.scss +39 -15
  24. data/stylesheets/compass-inuit/generic/_reset.scss +3 -3
  25. data/stylesheets/compass-inuit/generic/_shared.scss +1 -1
  26. data/stylesheets/compass-inuit/generic/_widths.scss +6 -2
  27. data/stylesheets/compass-inuit/objects/_arrows.scss +14 -10
  28. data/stylesheets/compass-inuit/objects/_beautons.scss +226 -0
  29. data/stylesheets/compass-inuit/objects/_block-list.scss +10 -6
  30. data/stylesheets/compass-inuit/objects/_breadcrumb.scss +14 -10
  31. data/stylesheets/compass-inuit/objects/_columns.scss +7 -3
  32. data/stylesheets/compass-inuit/objects/_flexbox.scss +15 -11
  33. data/stylesheets/compass-inuit/objects/_flyout.scss +12 -8
  34. data/stylesheets/compass-inuit/objects/_greybox.scss +11 -7
  35. data/stylesheets/compass-inuit/objects/_grids.scss +31 -61
  36. data/stylesheets/compass-inuit/objects/_icon-text.scss +8 -4
  37. data/stylesheets/compass-inuit/objects/_island.scss +8 -4
  38. data/stylesheets/compass-inuit/objects/_link-complex.scss +8 -4
  39. data/stylesheets/compass-inuit/objects/_lozenges.scss +11 -7
  40. data/stylesheets/compass-inuit/objects/_marginalia.scss +5 -1
  41. data/stylesheets/compass-inuit/objects/_matrix.scss +16 -25
  42. data/stylesheets/compass-inuit/objects/_media.scss +12 -8
  43. data/stylesheets/compass-inuit/objects/_nav.scss +26 -22
  44. data/stylesheets/compass-inuit/objects/_options.scss +8 -4
  45. data/stylesheets/compass-inuit/objects/_pagination.scss +11 -7
  46. data/stylesheets/compass-inuit/objects/_rules.scss +11 -7
  47. data/stylesheets/compass-inuit/objects/_split.scss +16 -12
  48. data/stylesheets/compass-inuit/objects/_sprite.scss +36 -30
  49. data/stylesheets/compass-inuit/objects/_stats.scss +7 -3
  50. data/stylesheets/compass-inuit/objects/_this-or-this.scss +8 -4
  51. data/templates/project/_vars.scss +47 -100
  52. data/templates/project/style.scss +3 -4
  53. metadata +7 -18
  54. data/stylesheets/compass-inuit/base/_links.scss +0 -37
  55. data/stylesheets/compass-inuit/objects/_batch.scss +0 -15
  56. data/stylesheets/compass-inuit/objects/_buttons.scss +0 -44
  57. data/templates/batch/assets/batch/batch.eot +0 -0
  58. data/templates/batch/assets/batch/batch.svg +0 -360
  59. data/templates/batch/assets/batch/batch.ttf +0 -0
  60. data/templates/batch/assets/batch/batch.woff +0 -0
  61. data/templates/batch/assets/batch/batch_webfont_reference.pdf +0 -0
  62. data/templates/batch/manifest.rb +0 -21
@@ -1,26 +1,28 @@
1
+ @if $use-block-list == true or $use-matrix == true{
2
+
1
3
  /*------------------------------------*\
2
4
  $BLOCK-LIST
3
5
  \*------------------------------------*/
4
6
  /**
5
7
  * Create big blocky lists of content, e.g.:
6
- *
8
+ *
7
9
  <ul class=block-list>
8
10
  <li>Foo</li>
9
11
  <li>Bar</li>
10
12
  <li>Baz</li>
11
13
  <li><a href=# class=block-list__link>Foo Bar Baz</a></li>
12
14
  </ul>
13
- *
15
+ *
14
16
  * Extend this object in your theme stylesheet.
15
- *
17
+ *
16
18
  * Demo: jsfiddle.net/inuitcss/hR57q
17
- *
19
+ *
18
20
  */
19
21
  .block-list{
20
-
22
+
21
23
  &,
22
24
  > li{
23
- border:0 solid #ccc; /* Override this color in your theme stylesheet */
25
+ border:0 solid $base-ui-color;
24
26
  }
25
27
  }
26
28
  .block-list{
@@ -38,3 +40,5 @@
38
40
  padding:$half-spacing-unit;
39
41
  margin:-$half-spacing-unit;
40
42
  }
43
+
44
+ }//endif
@@ -1,53 +1,55 @@
1
+ @if $use-breadcrumb == true{
2
+
1
3
  /*------------------------------------*\
2
4
  $BREADCRUMB
3
5
  \*------------------------------------*/
4
6
  /**
5
7
  * Simple breadcrumb styling to apply to (ordered) lists. Extends `.nav`, e.g.:
6
- *
8
+ *
7
9
  <ol class="nav breadcrumb">
8
10
  <li><a href=#>Home</a></li>
9
11
  <li><a href=#>About</a></li>
10
12
  <li><a href=#>The Board</a></li>
11
13
  <li class=current><a href=#>Directors</a></li>
12
14
  </ol>
13
- *
15
+ *
14
16
  * Demo: jsfiddle.net/inuitcss/rkAY9
15
- *
17
+ *
16
18
  */
17
19
  .breadcrumb > li + li:before{
18
- content:"» ";
20
+ content:"\00BB" "\00A0";
19
21
  }
20
22
 
21
23
 
22
24
  /**
23
25
  * For denoting a path-like structure, GitHub style, e.g.:
24
- *
26
+ *
25
27
  <ol class="nav breadcrumb--path">
26
28
  <li class=breadcrumb__root><a href=#>inuit.css</a></li>
27
29
  <li><a href=#>inuit.css</a></li>
28
30
  <li><a href=#>partials</a></li>
29
31
  <li class=current><a href=#>objects</a></li>
30
32
  </ol>
31
- *
33
+ *
32
34
  */
33
35
  .breadcrumb--path > li + li:before{
34
- content:"/ ";
36
+ content:"\002F" "\00A0";
35
37
  }
36
38
 
37
39
 
38
40
  /**
39
41
  * Assign a delimiter on the fly through a data attribute, e.g.:
40
- *
42
+ *
41
43
  <ol class="nav breadcrumb">
42
44
  <li><a href=#>Home</a></li>
43
45
  <li data-breadcrumb="|"><a href=#>About</a></li>
44
46
  <li data-breadcrumb="|"><a href=#>The Board</a></li>
45
47
  <li data-breadcrumb="|" class=current><a href=#>Directors</a></li>
46
48
  </ol>
47
- *
49
+ *
48
50
  */
49
51
  .breadcrumb > li + li[data-breadcrumb]:before{
50
- content:attr(data-breadcrumb)" ";
52
+ content:attr(data-breadcrumb) "\00A0";
51
53
  }
52
54
 
53
55
 
@@ -57,3 +59,5 @@
57
59
  .breadcrumb__root{
58
60
  font-weight:bold;
59
61
  }
62
+
63
+ }//endif
@@ -1,13 +1,15 @@
1
+ @if $use-columns == true{
2
+
1
3
  /*------------------------------------*\
2
4
  $COLUMNS
3
5
  \*------------------------------------*/
4
6
  /**
5
7
  * Here we can set elements in columns of text using CSS3, e.g.:
6
- *
8
+ *
7
9
  <p class=text-cols--2>
8
- *
10
+ *
9
11
  * Demo: jsfiddle.net/inuitcss/E26Yd
10
- *
12
+ *
11
13
  */
12
14
  %text-cols{
13
15
  @include vendor(column-gap, $base-spacing-unit);
@@ -16,3 +18,5 @@
16
18
  .text-cols--3 { @extend %text-cols; @include vendor(column-count, 3); }
17
19
  .text-cols--4 { @extend %text-cols; @include vendor(column-count, 4); }
18
20
  .text-cols--5 { @extend %text-cols; @include vendor(column-count, 5); }
21
+
22
+ }//endif
@@ -1,36 +1,38 @@
1
+ @if $use-flexbox == true{
2
+
1
3
  /*------------------------------------*\
2
4
  $FLEXBOX
3
5
  \*------------------------------------*/
4
6
  /**
5
7
  * Until we can utilise flexbox natively we can kinda, sorta, attempt to emulate
6
8
  * it, in a way... e.g.:
7
- *
9
+ *
8
10
  <header class=flexbox>
9
-
11
+
10
12
  <div class=flexbox__item>
11
13
  <b>Welcome to</b>
12
14
  </div>
13
-
15
+
14
16
  <div class=flexbox__item>
15
17
  <img src="//csswizardry.com/inuitcss/img/logo.jpg" alt="inuit.css">
16
18
  </div>
17
-
19
+
18
20
  </header>
19
- *
21
+ *
20
22
  * We can also combine our grid system classes with `.flexbox__item` classes,
21
23
  * e.g.:
22
- *
24
+ *
23
25
  <div class=flexbox>
24
26
  <div class="flexbox__item one-quarter">
25
27
  </div>
26
28
  <div class="flexbox__item three-quarters">
27
29
  </div>
28
30
  </div>
29
- *
30
- * It’s pretty poorly named I’m afraid, but it works
31
- *
31
+ *
32
+ * It’s pretty poorly named I’m afraid, but it works...
33
+ *
32
34
  * Demo: jsfiddle.net/inuitcss/ufUh2
33
- *
35
+ *
34
36
  */
35
37
  .flexbox{
36
38
  display:table;
@@ -44,8 +46,10 @@ html.flexbox{
44
46
  display:block;
45
47
  width:auto;
46
48
  }
47
-
49
+
48
50
  .flexbox__item{
49
51
  display:table-cell;
50
52
  vertical-align:middle;
51
53
  }
54
+
55
+ }//endif
@@ -1,10 +1,12 @@
1
+ @if $use-flyout == true{
2
+
1
3
  /*------------------------------------*\
2
4
  $FLYOUT
3
5
  \*------------------------------------*/
4
6
  /**
5
7
  * Flyouts are pieces of content that fly out of a parent when said parent is
6
8
  * hovered. They typically appear bottom-left of the parent.
7
- *
9
+ *
8
10
  <div class=flyout>
9
11
  Foo
10
12
  <div class=flyout__content>
@@ -12,11 +14,11 @@
12
14
  <p>Ipsum</p>
13
15
  </div>
14
16
  </div>
15
- *
17
+ *
16
18
  * Extend these objects in your theme stylesheet.
17
- *
19
+ *
18
20
  * Demo: jsfiddle.net/inuitcss/B52HG
19
- *
21
+ *
20
22
  */
21
23
  .flyout,
22
24
  .flyout--alt{
@@ -32,7 +34,7 @@
32
34
  top:100%;
33
35
  left:-99999px;
34
36
  }
35
-
37
+
36
38
  /**
37
39
  * Bring the flyouts into view when you hover their parents.
38
40
  * Two different types of flyout; ‘regular’ (`.flyout`) and ‘alternative’
@@ -42,18 +44,20 @@
42
44
  .flyout--alt:hover{
43
45
  overflow:visible;
44
46
  }
45
-
47
+
46
48
  /**
47
49
  * Regular flyouts sit all the way from the top, flush left.
48
50
  */
49
51
  .flyout:hover > .flyout__content{
50
52
  left:0;
51
53
  }
52
-
54
+
53
55
  /**
54
56
  * Alternative flyouts sit all the way from the left, flush top.
55
57
  */
56
58
  .flyout--alt:hover > .flyout__content{
57
59
  top:0;
58
60
  left:100%;
59
- }
61
+ }
62
+
63
+ }//endif
@@ -1,27 +1,29 @@
1
+ @if $use-greybox == true{
2
+
1
3
  /*------------------------------------*\
2
4
  $GREYBOX
3
5
  \*------------------------------------*/
4
6
  /**
5
7
  * Quickly throw together greybox wireframes. Use in conjunction with other
6
8
  * inuit.css objects to create simple greybox prototypes, e.g.:
7
- *
9
+ *
8
10
  <div class="island greybox greybox--medium">Header</div>
9
-
11
+
10
12
  <ul class="nav nav--fit nav--block greybox">
11
13
  <li><a href=#>Home</a></li>
12
14
  <li><a href=#>About</a></li>
13
15
  <li><a href=#>Portfolio</a></li>
14
16
  <li><a href=#>Contact</a></li>
15
17
  </ul>
16
- *
18
+ *
17
19
  * The beauty of combining the greyboxing with inuit.css objects is that any
18
20
  * prototyping can quickly be converted into/used as production code.
19
- *
21
+ *
20
22
  * For a more complete prototyping framework, consider Adam Whitcroft’s Proto:
21
23
  * adamwhitcroft.com/proto
22
- *
24
+ *
23
25
  * Demo: jsfiddle.net/inuitcss/qCXfh/
24
- *
26
+ *
25
27
  */
26
28
  .greybox,
27
29
  .graybox{
@@ -51,4 +53,6 @@
51
53
  .greybox--huge,
52
54
  .graybox--huge { line-height:16 * $base-line-height; }
53
55
  .greybox--gigantic,
54
- .graybox--gigantic { line-height:32 * $base-line-height; }
56
+ .graybox--gigantic { line-height:32 * $base-line-height; }
57
+
58
+ }//endif
@@ -1,99 +1,69 @@
1
+ @if $use-grids == true{
2
+
1
3
  /*------------------------------------*\
2
4
  $GRIDS
3
5
  \*------------------------------------*/
4
6
  /**
5
7
  * Fluid and nestable grid system, e.g.:
6
- *
7
- <div class=gw>
8
-
9
- <div class="g one-third">
8
+ *
9
+ <div class="grid">
10
+
11
+ <div class="grid__item one-third">
10
12
  <p>One third grid</p>
11
- </div>
12
-
13
- <div class="g two-thirds">
13
+ </div><!--
14
+
15
+ --><div class="grid__item two-thirds">
14
16
  <p>Two thirds grid</p>
15
- </div>
16
-
17
- <div class="g one-half">
17
+ </div><!--
18
+
19
+ --><div class="grid__item one-half">
18
20
  <p>One half grid</p>
19
- </div>
20
-
21
- <div class="g one-quarter">
21
+ </div><!--
22
+
23
+ --><div class="grid__item one-quarter">
22
24
  <p>One quarter grid</p>
23
- </div>
24
-
25
- <div class="g one-quarter">
25
+ </div><!--
26
+
27
+ --><div class="grid__item one-quarter">
26
28
  <p>One quarter grid</p>
27
29
  </div>
28
-
30
+
29
31
  </div>
30
- *
32
+ *
31
33
  * Demo: jsfiddle.net/inuitcss/CLYUC
32
- *
34
+ *
33
35
  */
34
36
 
35
37
 
36
38
  /**
37
39
  * Grid wrapper
38
- *
39
- * Shorthand and verbose
40
40
  */
41
- .gw,
42
- .grid-wrapper{
43
- /**
44
- * Negative margin to negate the padding on the first grid child.
45
- */
41
+ .grid{
46
42
  margin-left:-$base-spacing-unit;
47
- /**
48
- * The following declarations allow us to use the `.gw` class on lists.
49
- */
50
43
  list-style:none;
51
44
  margin-bottom:0;
52
- @extend .cf;
53
- }
54
-
55
-
56
- /**
57
- * Reverse grid order
58
- *
59
- <div class="gw gw--rev">
60
-
61
- <div class="g one-third">
62
- <p>Appears on the right</p>
63
- </div>
64
-
65
- <div class="g two-thirds">
66
- <p>Appears on the left</p>
67
- </div>
68
-
69
- </div>
70
- *
71
- */
72
- .gw--rev > .g,
73
- .grid-wrapper--rev > .grid{
74
- float:right;
75
45
  }
76
46
 
77
47
 
78
48
  /**
79
49
  * Very infrequently occuring grid wrappers as children of grid wrappers.
80
50
  */
81
- .gw > .gw,
82
- .grid-wrapper > .grid-wrapper{
51
+ .grid > .grid{
83
52
  margin-left:0;
84
53
  }
85
-
86
-
54
+
55
+
87
56
  /**
88
57
  * Grid
89
- *
90
- * Shorthand and verbose
91
58
  */
92
- .g,
93
- .grid{
94
- float:left;
59
+ .grid__item{
60
+ display:inline-block;
61
+ width:100%;
95
62
  padding-left:$base-spacing-unit;
63
+ vertical-align:top;
96
64
  @if $global-border-box == false{
97
65
  @include vendor(box-sizing, border-box);
98
66
  }
99
67
  }
68
+
69
+ }//endif
@@ -1,21 +1,23 @@
1
+ @if $use-icon-text == true{
2
+
1
3
  /*------------------------------------*\
2
4
  $ICON-TEXT
3
5
  \*------------------------------------*/
4
6
  /**
5
7
  * For text-links etc that have an icon with them. Sometimes whitespace would
6
8
  * suffice in creating a gap between the icon and text, for example:
7
- *
9
+ *
8
10
  <a href=#>
9
11
  <i class="s s--help"></i> Help &amp; support
10
12
  </a>
11
- *
13
+ *
12
14
  * However we will sometimes want a larger, explicity set gap:
13
15
  <a href=# class=icon-text>
14
16
  <i class="icon-text__icon s s--help"></i>Help &amp; support
15
17
  </a>
16
- *
18
+ *
17
19
  * Demo: jsfiddle.net/inuitcss/Q6Lbf
18
- *
20
+ *
19
21
  */
20
22
  .icon-text > .icon-text__icon{
21
23
  margin-right:$half-spacing-unit / 2;
@@ -34,3 +36,5 @@
34
36
  .icon-text--rev > .icon-text__icon{
35
37
  margin-left:$half-spacing-unit / 2;
36
38
  }
39
+
40
+ }//endif