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
data/src/scss/toolkit/ui/button.scss CHANGED
@@ -1,48 +1,48 @@
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
  /**
10
- * <button type="button" class="button large round">Large Rounded Button</button>
11
- * <a href="" class="button small pill">Small Pill Button</a>
10
+ * <button type="button" class="button large round">Large Rounded Button</button>
11
+ * <a href="" class="button small pill">Small Pill Button</a>
12
12
  */
13
13
 
14
14
  .button {
15
- @include reset-inline-block;
16
- cursor: pointer;
17
- text-align: center;
18
- overflow: hidden;
19
- font-weight: normal;
20
- line-height: normal; // setting it to normal allows it to match form input heights
21
- user-select: none;
22
- white-space: nowrap;
23
- @include size-medium;
24
- background: $gray;
25
- border: 1px solid $gray-dark;
15
+ @include reset-inline-block;
16
+ cursor: pointer;
17
+ text-align: center;
18
+ overflow: hidden;
19
+ font-weight: normal;
20
+ line-height: normal; // Setting it to normal allows it to match form input heights
21
+ user-select: none;
22
+ white-space: nowrap;
23
+ @include size-medium;
24
+ background: $gray;
25
+ border: 1px solid $gray-dark;
26
26
 
27
- // Sizes
28
- &.small, .small & { @include size-small; }
29
- &.large, .large & { @include size-large; }
27
+ // Sizes
28
+ &.small, .small & { @include size-small; }
29
+ &.large, .large & { @include size-large; }
30
30
 
31
- // Shapes
32
- &.round { border-radius: $round; }
33
- &.pill { border-radius: $pill; }
34
- &.oval { border-radius: #{$oval-x} / #{$oval-y}; }
35
- &.skew { border-radius: #{$skew-x $skew-x} 0 0 / #{$skew-y $skew-y} 0 0; }
31
+ // Shapes
32
+ &.round { border-radius: $round; }
33
+ &.pill { border-radius: $pill; }
34
+ &.oval { border-radius: #{$oval-x} / #{$oval-y}; }
35
+ &.skew { border-radius: #{$skew-x $skew-x} 0 0 / #{$skew-y $skew-y} 0 0; }
36
36
 
37
- // State
38
- @include disabled-state {
39
- cursor: not-allowed;
40
- pointer-events: none;
41
- }
37
+ // State
38
+ @include disabled-state {
39
+ cursor: not-allowed;
40
+ pointer-events: none;
41
+ }
42
42
  }
43
43
 
44
44
  // Reset browser styles
45
45
  button::-moz-focus-inner {
46
- padding: 0;
47
- border: 0;
46
+ padding: 0;
47
+ border: 0;
48
48
  }
data/src/scss/toolkit/ui/dropdown.scss CHANGED
@@ -1,105 +1,105 @@
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
  /**
10
- * <ul class="dropdown">
11
- * <li class="heading>Heading</li>
12
- * <li><a href="">Some Action</a></li>
13
- * <li><a href="">Some Action</a></li>
14
- * <li class="divider"></li>
15
- * <li><a href="">Some Action</a></li>
16
- * </ul>
10
+ * <ul class="dropdown">
11
+ * <li class="heading>Heading</li>
12
+ * <li><a href="">Some Action</a></li>
13
+ * <li><a href="">Some Action</a></li>
14
+ * <li class="divider"></li>
15
+ * <li><a href="">Some Action</a></li>
16
+ * </ul>
17
17
  */
18
18
 
19
19
  .dropdown {
20
- display: none;
21
- text-align: left;
22
- position: absolute;
23
- top: 100%;
24
- left: 0;
25
- width: 200px;
26
- background: $gray-light;
27
- border: 1px solid $gray-dark;
28
- line-height: 100%;
29
- z-index: 500;
30
- opacity: 0;
31
- visibility: hidden;
32
- @include transition(opacity .3s);
33
-
34
- // Nested dropdowns
35
- .dropdown {
36
- display: block;
37
- top: 0;
38
- left: 90%;
39
- z-index: 510;
40
- @include transition(left .3s, opacity .3s);
41
- }
42
-
43
- li {
44
- position: relative;
45
-
46
- > a {
47
- padding: $small-padding;
48
- display: block;
49
-
50
- .caret-right {
51
- float: right;
52
- display: none;
53
- }
54
- }
55
-
56
- &.divider {
57
- margin: ($margin / 2) 0;
58
- border-top: 1px solid $gray-dark;
59
- }
60
-
61
- &.has-children {
62
- > a .caret-right { display: inline-block; }
63
- }
64
-
65
- // Show nested dropdown
66
- &:hover {
67
- > a { background: #fff; }
68
-
69
- .dropdown {
70
- visibility: visible;
71
- opacity: 1;
72
- left: 100%;
73
- }
74
- }
75
-
76
- &.heading {
77
- font-weight: bold;
78
- padding: $small-padding;
79
- }
80
- }
81
-
82
- // Force display
83
- &.show {
84
- display: block;
85
- }
20
+ display: none;
21
+ text-align: left;
22
+ position: absolute;
23
+ top: 100%;
24
+ left: 0;
25
+ width: 200px;
26
+ background: $gray-light;
27
+ border: 1px solid $gray-dark;
28
+ line-height: 100%;
29
+ z-index: 500;
30
+ opacity: 0;
31
+ visibility: hidden;
32
+ @include transition(opacity .3s);
33
+
34
+ // Nested dropdowns
35
+ .dropdown {
36
+ display: block;
37
+ top: 0;
38
+ left: 90%;
39
+ z-index: 510;
40
+ @include transition(left .3s, opacity .3s);
41
+ }
42
+
43
+ li {
44
+ position: relative;
45
+
46
+ > a {
47
+ padding: $small-padding;
48
+ display: block;
49
+
50
+ .caret-right {
51
+ float: right;
52
+ display: none;
53
+ }
54
+ }
55
+
56
+ &.divider {
57
+ margin: ($margin / 2) 0;
58
+ border-top: 1px solid $gray-dark;
59
+ }
60
+
61
+ &.has-children {
62
+ > a .caret-right { display: inline-block; }
63
+ }
64
+
65
+ // Show nested dropdown
66
+ &:hover {
67
+ > a { background: #fff; }
68
+
69
+ .dropdown {
70
+ visibility: visible;
71
+ opacity: 1;
72
+ left: 100%;
73
+ }
74
+ }
75
+
76
+ &.heading {
77
+ font-weight: bold;
78
+ padding: $small-padding;
79
+ }
80
+ }
81
+
82
+ // Force display
83
+ &.show {
84
+ display: block;
85
+ }
86
86
  }
87
87
 
88
88
  .dropdown,
89
89
  .dropdown ul {
90
- list-style: none;
91
- margin: 0;
92
- padding: 0;
90
+ list-style: none;
91
+ margin: 0;
92
+ padding: 0;
93
93
  }
94
94
 
95
95
  //-------------------- Modifiers --------------------//
96
96
 
97
97
  .dropdown.dropdown--right {
98
- left: auto;
99
- right: 0;
98
+ left: auto;
99
+ right: 0;
100
100
  }
101
101
 
102
102
  .dropdown.dropdown--top {
103
- top: auto;
104
- bottom: 100%;
103
+ top: auto;
104
+ bottom: 100%;
105
105
  }
data/src/scss/toolkit/ui/icon.scss CHANGED
@@ -1,13 +1,13 @@
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
  /**
10
- * <span class="icon-16-delete"></span>
10
+ * <span class="icon-16-delete"></span>
11
11
  */
12
12
 
13
13
  [class*="icon-"] { @include reset-inline-block; }
@@ -18,5 +18,5 @@
18
18
  [class*="icon-64"] { width: 64px; height: 64px; }
19
19
 
20
20
  .button {
21
- [class*="icon-"] { margin-top: -1px; }
21
+ [class*="icon-"] { margin-top: -1px; }
22
22
  }
data/src/scss/toolkit/ui/label-badge.scss CHANGED
@@ -1,76 +1,76 @@
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
  /**
10
- * <span class="badge is-success">15</span>
11
- * <span class="label is-error">Required</span>
10
+ * <span class="badge is-success">15</span>
11
+ * <span class="label is-error">Required</span>
12
12
  */
13
13
 
14
14
  .badge,
15
15
  .label {
16
- @include reset-inline-block;
17
- color: #fff;
18
- // Shorthand doesn't work in IE
19
- font-weight: bold;
20
- font-size: .6rem;
21
- line-height: 100%;
22
- background: #282a2e;
23
- padding: 3px 5px;
24
- text-transform: uppercase;
25
- border-radius: 2px;
26
- white-space: nowrap;
27
- top: -1px;
16
+ @include reset-inline-block;
17
+ color: #fff;
18
+ // Shorthand doesn't work in IE
19
+ font-weight: bold;
20
+ font-size: .6rem;
21
+ line-height: 100%;
22
+ background: #282a2e;
23
+ padding: 3px 5px;
24
+ text-transform: uppercase;
25
+ border-radius: 2px;
26
+ white-space: nowrap;
27
+ top: -1px;
28
28
 
29
- &:empty { display: none; }
29
+ &:empty { display: none; }
30
30
  }
31
31
 
32
32
  .label {
33
- letter-spacing: 1px;
33
+ letter-spacing: 1px;
34
34
  }
35
35
 
36
36
  .badge {
37
- border-radius: 10px;
37
+ border-radius: 10px;
38
38
  }
39
39
 
40
40
  //-------------------- Modifiers --------------------//
41
41
 
42
42
  .label.label--left {
43
- border-top-left-radius: 1px;
44
- border-bottom-left-radius: 1px;
45
- padding-left: 2px;
46
- margin-left: 10px;
43
+ border-top-left-radius: 1px;
44
+ border-bottom-left-radius: 1px;
45
+ padding-left: 2px;
46
+ margin-left: 10px;
47
47
 
48
- &:after {
49
- top: 0;
50
- right: 100%;
51
- content: "";
52
- height: 0;
53
- width: 0;
54
- position: absolute;
55
- border: .85em solid transparent;
56
- border-right-color: #282a2e;
57
- }
48
+ &:after {
49
+ top: 0;
50
+ right: 100%;
51
+ content: "";
52
+ height: 0;
53
+ width: 0;
54
+ position: absolute;
55
+ border: .85em solid transparent;
56
+ border-right-color: #282a2e;
57
+ }
58
58
  }
59
59
 
60
60
  .label.label--right {
61
- border-top-right-radius: 1px;
62
- border-bottom-right-radius: 1px;
63
- padding-right: 2px;
64
- margin-right: 10px;
61
+ border-top-right-radius: 1px;
62
+ border-bottom-right-radius: 1px;
63
+ padding-right: 2px;
64
+ margin-right: 10px;
65
65
 
66
- &:after {
67
- top: 0;
68
- left: 100%;
69
- content: "";
70
- height: 0;
71
- width: 0;
72
- position: absolute;
73
- border: .85em solid transparent;
74
- border-left-color: #282a2e;
75
- }
66
+ &:after {
67
+ top: 0;
68
+ left: 100%;
69
+ content: "";
70
+ height: 0;
71
+ width: 0;
72
+ position: absolute;
73
+ border: .85em solid transparent;
74
+ border-left-color: #282a2e;
75
+ }
76
76
  }
data/src/scss/toolkit/ui/lazy-load.scss CHANGED
@@ -1,14 +1,17 @@
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
  /**
10
10
  * Will hide background images and defer image loading until they are within viewport.
11
- * Should be used in conjunction with the JavaScript Titon.LazyLoad module.
11
+ * Should be used in conjunction with the JavaScript Titon.LazyLoad component.
12
12
  */
13
13
 
14
- .lazy-load { background-image: none !important; }
14
+ .lazy-load {
15
+ background-image: none !important;
16
+ @include transition(background-image .3s);
17
+ }
data/src/scss/toolkit/ui/matrix.scss ADDED
@@ -0,0 +1,26 @@
1
+ /**
2
+ * @copyright 2010-2013, The Titon Project
3
+ * @license http://opensource.org/licenses/bsd-license.php
4
+ * @link http://titon.io
5
+ */
6
+
7
+ @import "../common";
8
+
9
+ /**
10
+ * Should be used in conjunction with the JavaScript Titon.Matrix component.
11
+ */
12
+
13
+ .matrix {
14
+ position: relative;
15
+
16
+ @include clear-fix;
17
+
18
+ &.no-columns .matrix-item {
19
+ position: relative !important;
20
+ }
21
+ }
22
+
23
+ .matrix-item {
24
+ position: absolute;
25
+ @include transition(top .3s, left .3s, bottom .3s, right .3s, opacity .3s);
26
+ }