titon-toolkit 0.14.0 → 1.0.0.rc1

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 (49) hide show
  1. checksums.yaml +4 -4
  2. data/readme.md +18 -13
  3. data/scss/ie8.scss +23 -16
  4. data/scss/toolkit/_common.scss +126 -7
  5. data/scss/toolkit/{modules → components}/accordion.scss +3 -25
  6. data/scss/toolkit/{modules → components}/blackout.scss +0 -7
  7. data/scss/toolkit/{ui → components}/breadcrumbs.scss +26 -16
  8. data/scss/toolkit/{ui → components}/button-group.scss +1 -8
  9. data/scss/toolkit/{ui → components}/button.scss +0 -5
  10. data/scss/toolkit/components/carousel.scss +147 -0
  11. data/scss/toolkit/{ui → components}/dropdown.scss +30 -27
  12. data/scss/toolkit/{modules → components}/flyout.scss +0 -6
  13. data/scss/toolkit/{layout → components}/grid.scss +1 -1
  14. data/scss/toolkit/components/icon.scss +60 -0
  15. data/scss/toolkit/{layout → components}/input-group.scss +3 -1
  16. data/scss/toolkit/components/input.scss +112 -0
  17. data/scss/toolkit/components/label.scss +106 -0
  18. data/scss/toolkit/components/lazy-load.scss +12 -0
  19. data/scss/toolkit/{ui → components}/matrix.scss +0 -7
  20. data/scss/toolkit/{modules → components}/modal.scss +44 -44
  21. data/scss/toolkit/{ui/alert.scss → components/notice.scss} +13 -20
  22. data/scss/toolkit/{ui → components}/pagination.scss +0 -14
  23. data/scss/toolkit/{ui → components}/pin.scss +0 -5
  24. data/scss/toolkit/{modules → components}/popover.scss +4 -16
  25. data/scss/toolkit/{ui → components}/progress.scss +15 -12
  26. data/scss/toolkit/{modules → components}/showcase.scss +30 -60
  27. data/scss/toolkit/{layout → components}/table.scss +0 -0
  28. data/scss/toolkit/{modules → components}/tabs.scss +0 -16
  29. data/scss/toolkit/{modules → components}/tooltip.scss +1 -15
  30. data/scss/toolkit/{modules → components}/type-ahead.scss +1 -4
  31. data/scss/toolkit/effects/pill.scss +4 -2
  32. data/scss/toolkit/layout/base.scss +68 -30
  33. data/scss/toolkit/layout/code.scss +2 -3
  34. data/scss/toolkit/layout/form.scss +71 -25
  35. data/scss/toolkit/layout/typography.scss +8 -8
  36. data/scss/toolkit/mixins/_grid.scss +0 -8
  37. data/scss/toolkit/mixins/_layout.scss +3 -14
  38. data/scss/toolkit/mixins/_responsive.scss +0 -14
  39. data/scss/toolkit/themes/titon.scss +116 -98
  40. data/scss/toolkit.scss +26 -25
  41. data/version.md +1 -1
  42. metadata +30 -32
  43. data/scss/toolkit/_variables.scss +0 -63
  44. data/scss/toolkit/mixins/_themes.scss +0 -98
  45. data/scss/toolkit/modules/carousel.scss +0 -183
  46. data/scss/toolkit/themes/tomorrow-night.scss +0 -582
  47. data/scss/toolkit/ui/icon.scss +0 -22
  48. data/scss/toolkit/ui/label-badge.scss +0 -76
  49. data/scss/toolkit/ui/lazy-load.scss +0 -19
@@ -6,20 +6,6 @@
6
6
 
7
7
  @import "../common";
8
8
 
9
- /**
10
- * <nav class="pagination small pill">
11
- * <ul>
12
- * <li><a href="" class="button">Previous</a></li>
13
- * <li><a href="" class="button">1</a></li>
14
- * <li><a href="" class="button">2</a></li>
15
- * <li class="active"><a href="" class="button">3</a></li>
16
- * <li><a href="" class="button">4</a></li>
17
- * <li><a href="" class="button">5</a></li>
18
- * <li class="disabled"><a href="" class="button">Next</a></li>
19
- * </ul>
20
- * </nav>
21
- */
22
-
23
9
  .pagination {
24
10
  display: block;
25
11
  margin: $margin 0;
@@ -6,11 +6,6 @@
6
6
 
7
7
  @import "../common";
8
8
 
9
- /**
10
- * Adds a sliding effect to pinned elements.
11
- * Should be used in conjunction with the JavaScript Titon.Pin component.
12
- */
13
-
14
9
  .pin {
15
10
  @include transition(top 1s, right .5s, left .5s);
16
11
  }
@@ -6,18 +6,6 @@
6
6
 
7
7
  @import "../common";
8
8
 
9
- /**
10
- * Should be used in conjunction with the JavaScript Titon.Popover module.
11
- *
12
- * <div class="popover">
13
- * <div class="popover-inner">
14
- * <div class="popover-head">Popover Title</div>
15
- * <div class="popover-body">Popover Content</div>
16
- * </div>
17
- * <div class="popover-arrow"></div>
18
- * </div>
19
- */
20
-
21
9
  .popover {
22
10
  position: absolute;
23
11
  top: 0;
@@ -37,12 +25,12 @@
37
25
  }
38
26
 
39
27
  &.center-left .popover-arrow {
40
- border-left-color: #000;
28
+ border-left-color: $gray-dark;
41
29
  right: -16px;
42
30
  }
43
31
 
44
32
  &.center-right .popover-arrow {
45
- border-right-color: #000;
33
+ border-right-color: $gray-dark;
46
34
  left: -16px;
47
35
  }
48
36
 
@@ -53,12 +41,12 @@
53
41
  }
54
42
 
55
43
  &.top-center .popover-arrow {
56
- border-top-color: #000;
44
+ border-top-color: $gray-dark;
57
45
  bottom: -16px;
58
46
  }
59
47
 
60
48
  &.bottom-center .popover-arrow {
61
- border-bottom-color: #000;
49
+ border-bottom-color: $gray-dark;
62
50
  top: -16px;
63
51
  }
64
52
  }
@@ -6,30 +6,33 @@
6
6
 
7
7
  @import "../common";
8
8
 
9
- $progress-transition: $default-transition !default;
10
-
11
- /**
12
- * <div class="progress">
13
- * <div class="progress-bar" style="width: 50%">50%</div>
14
- * </div>
15
- */
16
-
17
9
  .progress {
18
- height: 20px;
19
10
  overflow: hidden;
20
11
  position: relative;
21
12
  background: $gray;
22
13
 
14
+ &.small .progress-bar {
15
+ height: 1rem;
16
+ line-height: .75rem;
17
+ font-size: $small-size;
18
+ }
19
+
20
+ &.large .progress-bar {
21
+ height: 2rem;
22
+ line-height: 1.75rem;
23
+ font-size: $large-size;
24
+ }
25
+
23
26
  @include clear-fix;
24
27
  }
25
28
 
26
29
  .progress-bar {
27
- height: 20px;
28
- line-height: 18px;
30
+ height: 1.5rem;
31
+ line-height: 1.25rem;
29
32
  overflow: hidden;
30
33
  position: relative;
31
34
  text-align: center;
32
- font-size: .7rem;
35
+ font-size: $medium-size;
33
36
  background: $gray-darkest;
34
37
  float: left;
35
38
  @include transition(width .6s, background $progress-transition);
@@ -6,24 +6,6 @@
6
6
 
7
7
  @import "../common";
8
8
 
9
- $showcase-transition: $default-transition !default;
10
-
11
- /**
12
- * Should be used in conjunction with the JavaScript Titon.Showcase module.
13
- *
14
- * <div class="showcase">
15
- * <div class="showcase-inner">
16
- * <ul class="showcase-items"></u>
17
- * <ol class="showcase-tabs"></ol>
18
- * <a href="javascript:;" class="showcase-prev showcase-event-prev"><span class="icon-chevron-sign-left"></span></a>
19
- * <a href="javascript:;" class="showcase-next showcase-event-next"><span class="icon-chevron-sign-right"></span></a>
20
- * <button type="button" class="close showcase-event-close">
21
- * <span class="x">&times;</span>
22
- * </button>
23
- * </div>
24
- * </div>
25
- */
26
-
27
9
  .showcase {
28
10
  position: fixed;
29
11
  top: 50%;
@@ -37,12 +19,6 @@ $showcase-transition: $default-transition !default;
37
19
  backface-visibility: hidden;
38
20
  @include transform(translateX(-50%) translateY(-50%));
39
21
 
40
- .close {
41
- position: absolute;
42
- top: -1px;
43
- right: -35px;
44
- }
45
-
46
22
  &.is-loading,
47
23
  &.is-single {
48
24
  .showcase-prev,
@@ -50,13 +26,27 @@ $showcase-transition: $default-transition !default;
50
26
  .showcase-tabs {
51
27
  display: none !important;
52
28
  }
29
+ }
53
30
 
54
- .showcase-inner {
55
- background: $gray;
31
+ &.is-loading {
32
+ .showcase-close {
33
+ display: none !important;
56
34
  }
57
35
  }
58
36
  }
59
37
 
38
+ .showcase-close {
39
+ position: absolute;
40
+ top: $padding;
41
+ right: $padding;
42
+ line-height: 1rem;
43
+ opacity: $showcase-opacity;
44
+ padding: $padding;
45
+
46
+ .x { color: #fff; }
47
+ &:hover { opacity: 1; }
48
+ }
49
+
60
50
  .showcase-inner {
61
51
  position: relative;
62
52
  padding: $padding;
@@ -121,19 +111,25 @@ $showcase-transition: $default-transition !default;
121
111
  width: auto;
122
112
  height: auto;
123
113
  z-index: 5;
124
- font-size: 28px;
125
- color: #fff;
126
- opacity: .65;
114
+ opacity: $showcase-opacity;
127
115
  top: 50%;
128
116
  @include transform(translateY(-50%)); // move up 50% of their height
129
117
 
130
- &:hover {
118
+ .arrow-left,
119
+ .arrow-right {
131
120
  color: #fff;
132
- opacity: 1;
121
+ font-size: 2rem;
133
122
  }
134
123
 
135
- &:focus {
136
- outline: none;
124
+ &:hover { opacity: 1; }
125
+ &:focus { outline: none; }
126
+
127
+ // Large icons for large resolutions
128
+ @include if-tablet-landscape {
129
+ .arrow-left,
130
+ .arrow-right {
131
+ font-size: 3rem;
132
+ }
137
133
  }
138
134
  }
139
135
 
@@ -141,34 +137,8 @@ $showcase-transition: $default-transition !default;
141
137
  .showcase-next { right: $padding; }
142
138
 
143
139
  .showcase-tabs {
144
- list-style: none;
145
- line-height: 100%;
146
- margin: 0;
147
- padding: $padding;
148
140
  position: absolute;
149
- top: $padding;
141
+ top: ($padding * 2);
150
142
  left: 50%;
151
- z-index: 5;
152
143
  @include transform(translateX(-50%)); // move left 50% of their width
153
-
154
- li {
155
- display: inline-block;
156
- margin: 0 3px;
157
- }
158
-
159
- a {
160
- display: inline-block;
161
- border: 2px solid #fff;
162
- height: 10px;
163
- width: 10px;
164
- border-radius: 50%;
165
- opacity: .65;
166
- background: black(0);
167
-
168
- &:hover { opacity: 1; }
169
- &.is-active { background: #fff; }
170
- }
171
-
172
- // Hide if no tabs
173
- &:empty { display: none; }
174
144
  }
File without changes
@@ -6,22 +6,6 @@
6
6
 
7
7
  @import "../common";
8
8
 
9
- /**
10
- * Should be used in conjunction with the JavaScript Titon.Tabs module.
11
- *
12
- * <div id="tabs" class="tabs">
13
- * <nav class="tabs-nav">
14
- * <ul>
15
- * <li><a href="#tab-1">Tab 1</a></li>
16
- * <li><a href="#tab-2">Tab 2</a></li>
17
- * </ul>
18
- * </nav>
19
- *
20
- * <section id="tab-1" class="tabs-section"></section>
21
- * <section id="tab-2" class="tabs-section"></section>
22
- * </div>
23
- */
24
-
25
9
  .tabs {
26
10
  text-align: left;
27
11
  }
@@ -6,20 +6,6 @@
6
6
 
7
7
  @import "../common";
8
8
 
9
- $tooltip-transition: $default-transition !default;
10
-
11
- /**
12
- * Should be used in conjunction with the JavaScript Titon.Tooltip module.
13
- *
14
- * <div class="tooltip">
15
- * <div class="tooltip-inner">
16
- * <div class="tooltip-head">Tooltip Title</div>
17
- * <div class="tooltip-body">Tooltip Content</div>
18
- * </div>
19
- * <div class="tooltip-arrow"></div>
20
- * </div>
21
- */
22
-
23
9
  .tooltip {
24
10
  position: absolute;
25
11
  top: 0;
@@ -108,7 +94,7 @@ $tooltip-transition: $default-transition !default;
108
94
 
109
95
  &.flip-rotate {
110
96
  @include transition(transform $tooltip-transition);
111
- @include transform(rotate(-90deg));
97
+ @include transform(rotate(-15deg));
112
98
 
113
99
  &.show {
114
100
  @include transform(rotate(0deg));
@@ -6,10 +6,6 @@
6
6
 
7
7
  @import "../common";
8
8
 
9
- /**
10
- * Should be used in conjunction with the JavaScript Titon.TypeAhead module.
11
- */
12
-
13
9
  .type-ahead {
14
10
  position: absolute;
15
11
  top: 0;
@@ -49,6 +45,7 @@
49
45
 
50
46
  .type-ahead-shadow {
51
47
  position: relative;
48
+ height: 2rem;
52
49
 
53
50
  input {
54
51
  position: absolute;
@@ -33,16 +33,18 @@
33
33
  .button-group.button-group--vertical.pill {
34
34
  border-radius: $pill;
35
35
 
36
- .button { border-radius: 0; }
37
-
38
36
  > li:first-child .button,
39
37
  > .button:first-child {
40
38
  border-top-left-radius: $pill;
41
39
  border-top-right-radius: $pill;
40
+ border-bottom-left-radius: 0;
41
+ border-bottom-right-radius: 0;
42
42
  }
43
43
 
44
44
  > li:last-child .button,
45
45
  > .button:last-child {
46
+ border-top-left-radius: 0;
47
+ border-top-right-radius: 0;
46
48
  border-bottom-left-radius: $pill;
47
49
  border-bottom-right-radius: $pill;
48
50
  }
@@ -7,7 +7,7 @@
7
7
  @import "../common";
8
8
 
9
9
  // Use border-box for everything
10
- *, *:after, *:before { @include box-sizing(border-box); }
10
+ *, *:after, *:before { @include box-sizing("border-box"); }
11
11
 
12
12
  // Alignment
13
13
  .align-left { text-align: left; }
@@ -35,14 +35,20 @@
35
35
  .static { position: static; }
36
36
 
37
37
  // Layout
38
- .clear { clear: both; display: block; margin: 0; padding: 0; }
39
38
  .clear-fix { @include clear-fix; }
39
+ .clear {
40
+ clear: both;
41
+ display: block;
42
+ margin: 0;
43
+ padding: 0;
44
+ }
40
45
 
41
46
  // Styles
42
47
  .round { border-radius: $round; }
43
48
  .is-draggable { cursor: move; }
49
+ .is-dragging { cursor: grabbing; }
44
50
  .is-disabled,
45
- button[disabled] { cursor: not-allowed !important; pointer-events: none; }
51
+ [disabled] { cursor: not-allowed !important; }
46
52
 
47
53
  // Carets
48
54
  .caret-up,
@@ -56,38 +62,70 @@ button[disabled] { cursor: not-allowed !important; pointer-events: none; }
56
62
  width: 0;
57
63
  }
58
64
 
59
- .caret-up { border-bottom-color: $foreground-color; }
60
- .caret-down { border-top-color: $foreground-color; }
61
- .caret-left { border-right-color: $foreground-color; }
62
- .caret-right { border-left-color: $foreground-color; }
63
-
64
- // Close
65
- .x {
65
+ .caret-up { border-bottom-color: inherit; top: -2px; }
66
+ .caret-down { border-top-color: inherit; bottom: -2px; }
67
+ .caret-left { border-right-color: inherit; }
68
+ .caret-right { border-left-color: inherit; }
69
+
70
+ // Arrows, Characters
71
+ .x,
72
+ .arrow-up,
73
+ .arrow-down,
74
+ .arrow-left,
75
+ .arrow-right {
66
76
  @include reset-inline-block;
67
- color: $foreground-color;
68
- font: bold 1.5rem/100% Arial, sans-serif;
77
+ font: bold 1.5rem/1rem Arial, sans-serif;
69
78
  text-transform: uppercase;
70
79
  }
71
80
 
72
- .close {
73
- @include reset-inline-block;
74
- width: 30px;
75
- height: 30px;
76
- line-height: 32px;
77
- text-align: center;
78
- background: white(.5);
79
- border-radius: 2px;
80
- cursor: pointer;
81
-
82
- .x {
83
- color: black(.5);
84
- position: relative;
85
- top: -1px;
86
- }
81
+ .x:before { content: "\00D7"; /* times */ }
82
+
83
+ .arrow-up:before,
84
+ .arrow-left:before,
85
+ .arrow-down:before,
86
+ .arrow-right:before {
87
+ display: inline-block;
88
+ position: relative;
89
+ }
90
+
91
+ .arrow-up:before,
92
+ .arrow-left:before { content: "\000AB"; /* laquo */ }
93
+ .arrow-down:before,
94
+ .arrow-right:before { content: "\000BB"; /* raquo */ }
87
95
 
88
- &:hover {
89
- background: white(.8);
96
+ .arrow-left:before,
97
+ .arrow-right:before { top: -2px; }
90
98
 
91
- .x { color: black(.75); }
99
+ .arrow-up:before,
100
+ .arrow-down:before {
101
+ right: -2px;
102
+ @include transform(rotate(90deg));
103
+ }
104
+
105
+ // Bullets
106
+ .bullets {
107
+ list-style: none;
108
+ line-height: 100%;
109
+ margin: 0;
110
+ padding: 0;
111
+
112
+ li {
113
+ display: inline-block;
114
+ margin: 0 3px;
92
115
  }
116
+
117
+ a {
118
+ display: inline-block;
119
+ border: 3px solid #fff;
120
+ height: 10px;
121
+ width: 10px;
122
+ border-radius: 50%;
123
+ opacity: $default-opacity;
124
+ background: black(0);
125
+
126
+ &:hover { opacity: 1; border-width: 2px; }
127
+ @include active-state { background: #fff; }
128
+ }
129
+
130
+ &:empty { display: none; }
93
131
  }
@@ -18,8 +18,8 @@ var,
18
18
  kbd {
19
19
  display: inline-block;
20
20
  background: $gray-dark;
21
- border-radius: 2px;
22
- padding: 2px 4px;
21
+ border-radius: $round;
22
+ padding: .2em .4em;
23
23
  }
24
24
 
25
25
  pre {
@@ -27,7 +27,6 @@ pre {
27
27
  margin: $margin 0;
28
28
  background: $gray-light;
29
29
  border: 1px solid $gray-dark;
30
- border-radius: 3px;
31
30
  text-align: left;
32
31
  direction: ltr;
33
32
  white-space: pre;
@@ -48,7 +48,9 @@ label,
48
48
  //-------------------- Inputs --------------------//
49
49
 
50
50
  .input,
51
- .input-static {
51
+ .input-static,
52
+ .input-radio,
53
+ .input-checkbox {
52
54
  @include reset-inline-block;
53
55
  border: 1px solid $gray-dark;
54
56
  font-size: $medium-size;
@@ -58,15 +60,14 @@ label,
58
60
  .input {
59
61
  background: $gray-lightest;
60
62
  border-radius: $round;
61
- @include transition(all .3s);
63
+ @include transition(all $default-transition);
62
64
 
63
65
  &:hover { border-color: $gray-darkest; }
64
- &:focus { border-color: $info; box-shadow: 0 0 5px $info-light; outline: none; }
65
66
 
66
- @include disabled-state {
67
- cursor: not-allowed;
68
- color: $gray-darkest;
69
- border-color: $gray;
67
+ &:focus {
68
+ border-color: $info;
69
+ box-shadow: 0 0 5px $info-light;
70
+ outline: none;
70
71
  }
71
72
 
72
73
  &[readonly] {
@@ -74,38 +75,51 @@ label,
74
75
  border: 1px solid $gray-dark;
75
76
  box-shadow: none;
76
77
  }
78
+
79
+ @include disabled-state {
80
+ cursor: not-allowed;
81
+ color: $gray-darkest;
82
+ border-color: $gray;
83
+ }
77
84
  }
78
85
 
79
- .input-static {
86
+ .input-static,
87
+ .input-radio,
88
+ .input-checkbox {
80
89
  background: transparent;
81
90
  border-color: transparent;
82
91
  padding-left: 0;
83
92
  padding-right: 0;
84
93
  }
85
94
 
86
- select.input { padding: $medium-padding - .05; } // fixes vertical alignment
87
- select.input[multiple] { min-height: 150px; max-height: 500px; }
88
-
89
- textarea.input {
90
- line-height: 135%;
91
- min-height: 150px;
92
- }
93
-
94
- .radio,
95
- .checkbox {
96
- display: inline-block;
97
- vertical-align: middle;
98
- cursor: pointer;
95
+ .input-radio,
96
+ .input-checkbox {
97
+ padding: 0;
99
98
 
100
99
  input[type="checkbox"],
101
100
  input[type="radio"] {
102
101
  vertical-align: middle;
103
102
  position: relative;
104
103
  top: -1px;
105
- margin-right: 3px;
104
+ margin-right: 5px;
106
105
  }
107
106
  }
108
107
 
108
+ select.input {
109
+ -webkit-appearance: none;
110
+ padding: $medium-padding - .05rem; // fixes vertical alignment
111
+ }
112
+
113
+ select.input[multiple] {
114
+ min-height: 150px;
115
+ max-height: 500px;
116
+ }
117
+
118
+ textarea.input {
119
+ line-height: 135%;
120
+ min-height: 150px;
121
+ }
122
+
109
123
  //-------------------- Fields, Labels --------------------//
110
124
 
111
125
  .field {
@@ -114,18 +128,44 @@ textarea.input {
114
128
  &.is-required {
115
129
  .field-label { font-weight: bold; }
116
130
  }
131
+ }
132
+
133
+ .field:not(.is-disabled) {
134
+ &.is-error {
135
+ .input {
136
+ border-color: $error;
137
+
138
+ &:focus { box-shadow: 0 0 5px $error-light; }
139
+ }
140
+
141
+ .input-radio,
142
+ .input-checkbox {
143
+ color: $error-dark;
144
+ }
145
+ }
117
146
 
118
- @include field-style;
147
+ &.is-success {
148
+ .input {
149
+ border-color: $success;
150
+
151
+ &:focus { box-shadow: 0 0 5px $success-light; }
152
+ }
153
+
154
+ .input-radio,
155
+ .input-checkbox {
156
+ color: $success-dark;
157
+ }
158
+ }
119
159
  }
120
160
 
121
161
  .field-label {
122
162
  display: block;
123
163
  vertical-align: middle;
124
- margin-bottom: 7px;
164
+ margin-bottom: .5em;
125
165
  }
126
166
 
127
167
  .field-help {
128
- margin-top: 7px;
168
+ margin-top: .5em;
129
169
  font-size: $small-size;
130
170
  }
131
171
 
@@ -153,10 +193,16 @@ textarea.input {
153
193
  .form-actions {
154
194
  display: inline-block;
155
195
  vertical-align: middle;
196
+ line-height: normal;
156
197
  margin-right: $margin;
157
198
  margin-bottom: $margin / 2;
158
199
  }
159
200
 
160
201
  .field-label { margin: 0 ($margin / 2) 0 0; }
161
202
  .field-help { display: none; }
203
+
204
+ .input-radio,
205
+ .input-checkbox {
206
+ padding: $medium-padding 0;
207
+ }
162
208
  }