titon-toolkit 0.9.4 → 0.10.0

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 (44) hide show
  1. data/license.md +23 -0
  2. data/readme.md +93 -0
  3. data/src/lib/titon-toolkit.rb +2 -2
  4. data/src/scss/toolkit.scss +3 -3
  5. data/src/scss/toolkit/effects/visual.scss +47 -47
  6. data/src/scss/toolkit/layout/base.scss +32 -32
  7. data/src/scss/toolkit/layout/code.scss +38 -38
  8. data/src/scss/toolkit/layout/form.scss +86 -86
  9. data/src/scss/toolkit/layout/grid.scss +31 -31
  10. data/src/scss/toolkit/layout/input-group.scss +41 -41
  11. data/src/scss/toolkit/layout/responsive.scss +21 -21
  12. data/src/scss/toolkit/layout/table.scss +59 -59
  13. data/src/scss/toolkit/layout/typography.scss +18 -18
  14. data/src/scss/toolkit/mixins/_grid.scss +8 -8
  15. data/src/scss/toolkit/mixins/_layout.scss +36 -36
  16. data/src/scss/toolkit/mixins/_responsive.scss +56 -56
  17. data/src/scss/toolkit/mixins/_themes.scss +78 -78
  18. data/src/scss/toolkit/modules/accordion.scss +33 -33
  19. data/src/scss/toolkit/modules/blackout.scss +13 -13
  20. data/src/scss/toolkit/modules/carousel.scss +141 -141
  21. data/src/scss/toolkit/modules/flyout.scss +57 -57
  22. data/src/scss/toolkit/modules/modal.scss +206 -206
  23. data/src/scss/toolkit/modules/popover.scss +58 -58
  24. data/src/scss/toolkit/modules/showcase.scss +135 -135
  25. data/src/scss/toolkit/modules/tabs.scss +29 -29
  26. data/src/scss/toolkit/modules/tooltip.scss +109 -109
  27. data/src/scss/toolkit/modules/type-ahead.scss +44 -44
  28. data/src/scss/toolkit/themes/titon.scss +242 -242
  29. data/src/scss/toolkit/themes/tomorrow-night.scss +322 -322
  30. data/src/scss/toolkit/ui/alert.scss +29 -29
  31. data/src/scss/toolkit/ui/breadcrumbs.scss +41 -41
  32. data/src/scss/toolkit/ui/button-group.scss +181 -181
  33. data/src/scss/toolkit/ui/button.scss +31 -31
  34. data/src/scss/toolkit/ui/dropdown.scss +83 -83
  35. data/src/scss/toolkit/ui/icon.scss +5 -5
  36. data/src/scss/toolkit/ui/label-badge.scss +48 -48
  37. data/src/scss/toolkit/ui/lazy-load.scss +8 -5
  38. data/src/scss/toolkit/ui/matrix.scss +26 -0
  39. data/src/scss/toolkit/ui/pagination.scss +108 -108
  40. data/src/scss/toolkit/ui/pin.scss +5 -5
  41. data/src/scss/toolkit/ui/progress.scss +20 -20
  42. data/version.md +1 -0
  43. metadata +17 -5
  44. checksums.yaml +0 -15
@@ -1,64 +1,64 @@
1
1
  /**
2
- * @copyright Copyright 2010-2013, The Titon Project
3
- * @license http://opensource.org/licenses/bsd-license.php
4
- * @link http://titon.io
2
+ * @copyright 2010-2013, The Titon Project
3
+ * @license http://opensource.org/licenses/bsd-license.php
4
+ * @link http://titon.io
5
5
  */
6
6
 
7
7
  @import "../common";
8
8
 
9
9
  .grid {
10
- @include grid-row;
10
+ @include grid-row;
11
11
  }
12
12
 
13
13
  // These should be the same for all sizes
14
14
  @for $i from 1 through $grid-columns {
15
- $span: grid-span($i);
15
+ $span: grid-span($i);
16
16
 
17
- .span-#{$i} { width: $span; }
18
- .push-#{$i} { left: $span; }
19
- .pull-#{$i} { right: $span; }
17
+ .span-#{$i} { width: $span; }
18
+ .push-#{$i} { left: $span; }
19
+ .pull-#{$i} { right: $span; }
20
20
  }
21
21
 
22
22
  // Mobile supports 3 columns
23
23
  .col[class*="span-"],
24
24
  .col[class*="mobile-"] {
25
- @include grid-column;
25
+ @include grid-column;
26
26
  }
27
27
 
28
28
  @for $i from 1 through ceil($grid-columns / 4) {
29
- $span: grid-span($i * 4);
29
+ $span: grid-span($i * 4);
30
30
 
31
- .col.mobile-#{$i} { width: $span; }
32
- .col.mobile-push-#{$i} { left: $span; }
33
- .col.mobile-pull-#{$i} { right: $span; }
31
+ .col.mobile-#{$i} { width: $span; }
32
+ .col.mobile-push-#{$i} { left: $span; }
33
+ .col.mobile-pull-#{$i} { right: $span; }
34
34
  }
35
35
 
36
36
  // Tablet supports 6 columns
37
37
  @include in-tablet {
38
- .col[class*="tablet-"] {
39
- @include grid-column;
40
- }
38
+ .col[class*="tablet-"] {
39
+ @include grid-column;
40
+ }
41
41
 
42
- @for $i from 1 through ceil($grid-columns / 2) {
43
- $span: grid-span($i * 2);
42
+ @for $i from 1 through ceil($grid-columns / 2) {
43
+ $span: grid-span($i * 2);
44
44
 
45
- .col.tablet-#{$i} { width: $span; }
46
- .col.tablet-push-#{$i} { left: $span; }
47
- .col.tablet-pull-#{$i} { right: $span; }
48
- }
45
+ .col.tablet-#{$i} { width: $span; }
46
+ .col.tablet-push-#{$i} { left: $span; }
47
+ .col.tablet-pull-#{$i} { right: $span; }
48
+ }
49
49
  }
50
50
 
51
51
  // Desktop supports 12 columns
52
52
  @include in-desktop {
53
- .col[class*="desktop-"] {
54
- @include grid-column;
55
- }
53
+ .col[class*="desktop-"] {
54
+ @include grid-column;
55
+ }
56
56
 
57
- @for $i from 1 through $grid-columns {
58
- $span: grid-span($i);
57
+ @for $i from 1 through $grid-columns {
58
+ $span: grid-span($i);
59
59
 
60
- .col.desktop-#{$i} { width: $span; }
61
- .col.desktop-push-#{$i} { left: $span; }
62
- .col.desktop-pull-#{$i} { right: $span; }
63
- }
60
+ .col.desktop-#{$i} { width: $span; }
61
+ .col.desktop-push-#{$i} { left: $span; }
62
+ .col.desktop-pull-#{$i} { right: $span; }
63
+ }
64
64
  }
@@ -1,56 +1,56 @@
1
1
  /**
2
- * @copyright Copyright 2010-2013, The Titon Project
3
- * @license http://opensource.org/licenses/bsd-license.php
4
- * @link http://titon.io
2
+ * @copyright 2010-2013, The Titon Project
3
+ * @license http://opensource.org/licenses/bsd-license.php
4
+ * @link http://titon.io
5
5
  */
6
6
 
7
7
  @import "../common";
8
8
 
9
9
  .input-group {
10
- display: inline-block;
11
-
12
- > .input,
13
- > .input-addon,
14
- > .button,
15
- > .button-group {
16
- display: inline-block;
17
- position: relative;
18
- border-radius: 0;
19
- margin-right: -6px; // Remove whitespace and overlap borders
20
- white-space: nowrap;
21
- height: auto;
22
- vertical-align: middle;
23
- }
24
-
25
- // Inputs should always be above everything else
26
- > .input { z-index: 1; }
10
+ display: inline-block;
11
+
12
+ > .input,
13
+ > .input-addon,
14
+ > .button,
15
+ > .button-group {
16
+ display: inline-block;
17
+ position: relative;
18
+ border-radius: 0;
19
+ margin-right: -6px; // Remove whitespace and overlap borders
20
+ white-space: nowrap;
21
+ height: auto;
22
+ vertical-align: middle;
23
+ }
24
+
25
+ // Inputs should always be above everything else
26
+ > .input { z-index: 1; }
27
27
  }
28
28
 
29
29
  .input-addon {
30
- border: 1px solid $gray-dark;
31
- background: $gray;
32
- vertical-align: middle;
33
- padding: $medium-padding;
34
- line-height: normal;
35
- font-size: inherit;
30
+ border: 1px solid $gray-dark;
31
+ background: $gray;
32
+ vertical-align: middle;
33
+ padding: $medium-padding;
34
+ line-height: normal;
35
+ font-size: inherit;
36
36
  }
37
37
 
38
38
  //-------------------- Modifiers --------------------//
39
39
 
40
40
  .input-group.round {
41
- > .input:first-child,
42
- > .input-addon:first-child,
43
- > .button:first-child,
44
- > .button-group:first-child .button {
45
- border-top-left-radius: $round;
46
- border-bottom-left-radius: $round;
47
- }
48
-
49
- > .input:last-child,
50
- > .input-addon:last-child,
51
- > .button:last-child,
52
- > .button-group:last-child .button {
53
- border-top-right-radius: $round;
54
- border-bottom-right-radius: $round;
55
- }
41
+ > .input:first-child,
42
+ > .input-addon:first-child,
43
+ > .button:first-child,
44
+ > .button-group:first-child .button {
45
+ border-top-left-radius: $round;
46
+ border-bottom-left-radius: $round;
47
+ }
48
+
49
+ > .input:last-child,
50
+ > .input-addon:last-child,
51
+ > .button:last-child,
52
+ > .button-group:last-child .button {
53
+ border-top-right-radius: $round;
54
+ border-bottom-right-radius: $round;
55
+ }
56
56
  }
@@ -1,53 +1,53 @@
1
1
  /**
2
- * @copyright Copyright 2010-2013, The Titon Project
3
- * @license http://opensource.org/licenses/bsd-license.php
4
- * @link http://titon.io
2
+ * @copyright 2010-2013, The Titon Project
3
+ * @license http://opensource.org/licenses/bsd-license.php
4
+ * @link http://titon.io
5
5
  */
6
6
 
7
7
  @import "../common";
8
8
 
9
9
  img, video, canvas {
10
- max-width: 100%;
11
- max-height: auto;
12
- height: auto;
10
+ max-width: 100%;
11
+ max-height: auto;
12
+ height: auto;
13
13
  }
14
14
 
15
15
  .show-print { display: none; }
16
16
 
17
17
  // Desktop states
18
18
  @include in-desktop {
19
- .show-tablet,
20
- .show-mobile,
21
- .hide-desktop { display: none; }
19
+ .show-tablet,
20
+ .show-mobile,
21
+ .hide-desktop { display: none; }
22
22
  }
23
23
 
24
24
  // Tablet states
25
25
  @include in-tablet {
26
- .show-desktop,
27
- .show-mobile,
28
- .hide-tablet { display: none; }
26
+ .show-desktop,
27
+ .show-mobile,
28
+ .hide-tablet { display: none; }
29
29
  }
30
30
 
31
31
  // Mobile states
32
32
  @include in-mobile {
33
- .show-desktop,
34
- .show-tablet,
35
- .hide-mobile { display: none; }
33
+ .show-desktop,
34
+ .show-tablet,
35
+ .hide-mobile { display: none; }
36
36
  }
37
37
 
38
38
  // Orientation states
39
39
  @include if-portrait {
40
- .show-landscape,
41
- .hide-portrait { display: none; }
40
+ .show-landscape,
41
+ .hide-portrait { display: none; }
42
42
  }
43
43
 
44
44
  @include if-landscape {
45
- .show-portrait,
46
- .hide-landscape { display: none; }
45
+ .show-portrait,
46
+ .hide-landscape { display: none; }
47
47
  }
48
48
 
49
49
  // Type states
50
50
  @media print {
51
- .show-print { display: block; }
52
- .hide-print { display: none; }
51
+ .show-print { display: block; }
52
+ .hide-print { display: none; }
53
53
  }
@@ -1,82 +1,82 @@
1
1
  /**
2
- * @copyright Copyright 2010-2013, The Titon Project
3
- * @license http://opensource.org/licenses/bsd-license.php
4
- * @link http://titon.io
2
+ * @copyright 2010-2013, The Titon Project
3
+ * @license http://opensource.org/licenses/bsd-license.php
4
+ * @link http://titon.io
5
5
  */
6
6
 
7
7
  @import "../common";
8
8
 
9
9
  .table {
10
- width: 100%;
11
- background: $gray;
12
- border-collapse: collapse;
13
-
14
- th, td {
15
- padding: $padding;
16
- line-height: 110%;
17
- vertical-align: top;
18
- border: 1px solid $gray-dark;
19
- }
20
-
21
- // Move headings to bottom
22
- thead th {
23
- vertical-align: bottom;
24
- text-align: left;
25
- }
26
-
27
- // Allow for multiple tbody's
28
- tbody + tbody { border-top-width: 2px; }
29
-
30
- // Row colors
31
- thead tr,
32
- tfoot tr {
33
- background: $gray-dark;
34
-
35
- th { border-color: shade($gray-dark, 10%); }
36
- }
37
-
38
- // Zebra striping
39
- tbody tr {
40
- background: $gray;
41
-
42
- &:nth-child(odd) { background: $gray-light; }
43
- &.divider { background: shade($gray, 2%); }
44
- }
10
+ width: 100%;
11
+ background: $gray;
12
+ border-collapse: collapse;
13
+
14
+ th, td {
15
+ padding: $padding;
16
+ line-height: 110%;
17
+ vertical-align: top;
18
+ border: 1px solid $gray-dark;
19
+ }
20
+
21
+ // Move headings to bottom
22
+ thead th {
23
+ vertical-align: bottom;
24
+ text-align: left;
25
+ }
26
+
27
+ // Allow for multiple tbody's
28
+ tbody + tbody { border-top-width: 2px; }
29
+
30
+ // Row colors
31
+ thead tr,
32
+ tfoot tr {
33
+ background: $gray-dark;
34
+
35
+ th { border-color: shade($gray-dark, 10%); }
36
+ }
37
+
38
+ // Zebra striping
39
+ tbody tr {
40
+ background: $gray;
41
+
42
+ &:nth-child(odd) { background: $gray-light; }
43
+ &.divider { background: shade($gray, 2%); }
44
+ }
45
45
  }
46
46
 
47
47
  //-------------------- Modifiers --------------------//
48
48
 
49
49
  .table.table--hover {
50
- tbody tr:not(.divider):hover { background: #fff; }
50
+ tbody tr:not(.divider):hover { background: #fff; }
51
51
  }
52
52
 
53
53
  .table.table--sortable {
54
- thead th {
55
- padding: 0;
54
+ thead th {
55
+ padding: 0;
56
56
 
57
- a, span {
58
- padding: $padding;
59
- display: block;
60
- }
57
+ a, span {
58
+ padding: $padding;
59
+ display: block;
60
+ }
61
61
 
62
- a {
63
- background: $gray-dark;
64
- color: #000;
62
+ a {
63
+ background: $gray-dark;
64
+ color: #000;
65
65
 
66
- &:hover { background: shade($gray-dark, 5%); }
67
- }
68
- }
66
+ &:hover { background: shade($gray-dark, 5%); }
67
+ }
68
+ }
69
69
  }
70
70
 
71
71
  .table.table--compact {
72
- thead th,
73
- tbody td { padding: $small-padding; }
72
+ thead th,
73
+ tbody td { padding: $small-padding; }
74
74
 
75
- &.table--sortable {
76
- thead th {
77
- padding: 0;
75
+ &.table--sortable {
76
+ thead th {
77
+ padding: 0;
78
78
 
79
- a, span { padding: $small-padding; }
80
- }
81
- }
79
+ a, span { padding: $small-padding; }
80
+ }
81
+ }
82
82
  }
@@ -1,7 +1,7 @@
1
1
  /**
2
- * @copyright Copyright 2010-2013, The Titon Project
3
- * @license http://opensource.org/licenses/bsd-license.php
4
- * @link http://titon.io
2
+ * @copyright 2010-2013, The Titon Project
3
+ * @license http://opensource.org/licenses/bsd-license.php
4
+ * @link http://titon.io
5
5
  */
6
6
 
7
7
  @import "../common";
@@ -14,32 +14,32 @@ h5 { font-size: 1.2rem; }
14
14
  h6 { font-size: 1rem; }
15
15
 
16
16
  h1, h2, h3, h4, h5, h6 {
17
- margin: 0;
18
- padding: 0;
19
- line-height: 100%;
20
- font-weight: normal;
17
+ margin: 0;
18
+ padding: 0;
19
+ line-height: 100%;
20
+ font-weight: normal;
21
21
  }
22
22
 
23
23
  p, ul, ol, hr, blockquote {
24
- margin: $margin 0;
24
+ margin: $margin 0;
25
25
  }
26
26
 
27
27
  blockquote {
28
- margin: $margin;
29
- padding: 0 $padding;
30
- border-left: 5px solid $gray;
28
+ margin: $margin;
29
+ padding: 0 $padding;
30
+ border-left: 5px solid $gray;
31
31
 
32
- cite { display: block; font-size: .8rem; }
33
- cite:before { content: "\2014 \00A0"; /* em dash */ }
32
+ cite { display: block; font-size: .8rem; }
33
+ cite:before { content: "\2014 \00A0"; /* em dash */ }
34
34
 
35
- @include content-spacing;
35
+ @include content-spacing;
36
36
  }
37
37
 
38
38
  mark {
39
- display: inline-block;
40
- background: $gray-dark;
41
- border-radius: 2px;
42
- padding: 0 5px;
39
+ display: inline-block;
40
+ background: $gray-dark;
41
+ border-radius: 2px;
42
+ padding: 0 5px;
43
43
  }
44
44
 
45
45
  .text-muted { color: $default; }