titon-toolkit 0.9.4 → 0.10.0

Sign up to get free protection for your applications and to get access to all the features.
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
+ }