titon-toolkit 1.1.0 → 1.2.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. checksums.yaml +4 -4
  2. data/changelog.md +105 -67
  3. data/license.md +1 -1
  4. data/readme.md +5 -8
  5. data/roadmap.md +13 -11
  6. data/scss/toolkit/_common.scss +19 -10
  7. data/scss/toolkit/components/accordion.scss +0 -7
  8. data/scss/toolkit/components/breadcrumb.scss +0 -2
  9. data/scss/toolkit/components/button-group.scss +3 -19
  10. data/scss/toolkit/components/button.scss +2 -2
  11. data/scss/toolkit/components/drop.scss +5 -8
  12. data/scss/toolkit/components/flyout.scss +1 -5
  13. data/scss/toolkit/components/grid.scss +35 -17
  14. data/scss/toolkit/components/icon.scss +1 -14
  15. data/scss/toolkit/components/input-group.scss +7 -16
  16. data/scss/toolkit/components/input.scss +1 -7
  17. data/scss/toolkit/components/label.scss +0 -5
  18. data/scss/toolkit/components/lazy-load.scss +1 -1
  19. data/scss/toolkit/components/loader.scss +1 -1
  20. data/scss/toolkit/components/matrix.scss +7 -13
  21. data/scss/toolkit/components/modal.scss +123 -131
  22. data/scss/toolkit/components/notice.scss +5 -2
  23. data/scss/toolkit/components/pagination.scss +0 -1
  24. data/scss/toolkit/components/popover.scss +13 -16
  25. data/scss/toolkit/components/progress.scss +2 -17
  26. data/scss/toolkit/components/showcase.scss +5 -2
  27. data/scss/toolkit/components/table.scss +10 -8
  28. data/scss/toolkit/components/tabs.scss +1 -0
  29. data/scss/toolkit/components/tooltip.scss +38 -42
  30. data/scss/toolkit/components/type-ahead.scss +2 -6
  31. data/scss/toolkit/effects/oval.scss +3 -1
  32. data/scss/toolkit/effects/pill.scss +8 -12
  33. data/scss/toolkit/effects/skew.scss +9 -15
  34. data/scss/toolkit/layout/base.scss +4 -18
  35. data/scss/toolkit/layout/code.scss +1 -1
  36. data/scss/toolkit/layout/form.scss +11 -10
  37. data/scss/toolkit/layout/responsive.scss +4 -2
  38. data/scss/toolkit/layout/typography.scss +9 -3
  39. data/scss/toolkit/mixins/_components.scss +16 -0
  40. data/scss/toolkit/mixins/_helper.scss +15 -0
  41. data/scss/toolkit/mixins/_layout.scss +0 -9
  42. data/scss/toolkit/themes/{titon.scss → demo.scss} +39 -15
  43. data/version.md +1 -1
  44. metadata +6 -5
@@ -8,7 +8,9 @@
8
8
 
9
9
  //-------------------- Button --------------------//
10
10
 
11
- .#{$vendor-prefix}button.#{$shape-skew-class} { border-radius: #{$skew-x $skew-x} 0 0 / #{$skew-y $skew-y} 0 0; }
11
+ .#{$vendor-prefix}button.#{$shape-skew-class} {
12
+ border-radius: #{$skew-x $skew-x} 0 0 / #{$skew-y $skew-y} 0 0;
13
+ }
12
14
 
13
15
  //-------------------- ButtonGroup --------------------//
14
16
 
@@ -18,16 +20,12 @@
18
20
  border-bottom-left-radius: 0;
19
21
  border-bottom-right-radius: 0;
20
22
 
21
- > li:first-child .#{$vendor-prefix}button,
22
- > .#{$vendor-prefix}button:first-child,
23
- > .#{$vendor-prefix}button.first {
23
+ @include button-group-first-child {
24
24
  border-top-left-radius: $skew;
25
25
  border-bottom-left-radius: 0;
26
26
  }
27
27
 
28
- > li:last-child .#{$vendor-prefix}button,
29
- > .#{$vendor-prefix}button:last-child,
30
- > .#{$vendor-prefix}button.last {
28
+ @include button-group-last-child {
31
29
  border-top-right-radius: $skew;
32
30
  border-bottom-right-radius: 0;
33
31
  }
@@ -38,13 +36,11 @@
38
36
  border-top-left-radius: $skew-y 1.5rem;
39
37
  border-bottom-left-radius: $skew-y 1.5rem;
40
38
 
41
- > li:first-child .#{$vendor-prefix}button,
42
- > .#{$vendor-prefix}button:first-child {
39
+ @include button-group-first-child {
43
40
  border-top-left-radius: $skew-reverse;
44
41
  }
45
42
 
46
- > li:last-child .#{$vendor-prefix}button,
47
- > .#{$vendor-prefix}button:last-child {
43
+ @include button-group-last-child {
48
44
  border-bottom-left-radius: $skew-reverse;
49
45
  border-top-right-radius: 0;
50
46
  }
@@ -54,13 +50,11 @@
54
50
  border-top-right-radius: $skew-y 1.25rem;
55
51
  border-bottom-right-radius: $skew-y 1.25rem;
56
52
 
57
- > li:first-child .#{$vendor-prefix}button,
58
- > .#{$vendor-prefix}button:first-child {
53
+ @include button-group-first-child {
59
54
  border-top-right-radius: $skew-reverse;
60
55
  }
61
56
 
62
- > li:last-child .#{$vendor-prefix}button,
63
- > .#{$vendor-prefix}button:last-child {
57
+ @include button-group-last-child {
64
58
  border-bottom-right-radius: $skew-reverse;
65
59
  }
66
60
  }
@@ -25,24 +25,10 @@
25
25
 
26
26
  // Display
27
27
  .shown { display: block; }
28
- .inline { display: inline; }
29
- .inline-block { display: inline-block; }
30
28
  .hidden { display: none; }
31
-
32
- // Positioning
33
- .relative { position: relative; }
34
- .absolute { position: absolute; }
35
- .static { position: static; }
29
+ .no-scroll { overflow: hidden; }
36
30
 
37
31
  // Layout
38
- .clear-fix { @include clear-fix; }
39
- .clear {
40
- clear: both;
41
- display: block;
42
- margin: 0;
43
- padding: 0;
44
- }
45
-
46
32
  .vertical-center {
47
33
  position: absolute;
48
34
  left: 50%;
@@ -50,6 +36,8 @@
50
36
  @include transform(translate(-50%, -50%));
51
37
  }
52
38
 
39
+ .clear-fix { @include clear-fix; }
40
+
53
41
  // Styles
54
42
  .#{$shape-round-class} { border-radius: $round; }
55
43
  .#{$state-is-prefix}draggable { cursor: move; }
@@ -102,10 +90,8 @@
102
90
 
103
91
  // Bullets
104
92
  .bullets {
105
- list-style: none;
93
+ @include reset-list();
106
94
  line-height: 100%;
107
- margin: 0;
108
- padding: 0;
109
95
 
110
96
  li {
111
97
  display: inline-block;
@@ -24,7 +24,7 @@ kbd {
24
24
 
25
25
  pre {
26
26
  padding: $padding;
27
- margin: $margin 0;
27
+ margin: $margin 0 0 0;
28
28
  background: $gray-light;
29
29
  border: 1px solid $gray-dark;
30
30
  text-align: left;
@@ -6,15 +6,13 @@
6
6
 
7
7
  @import "../common";
8
8
 
9
- form { text-align: left; }
10
-
11
9
  fieldset {
12
10
  padding: $padding 0;
13
11
  margin: 0;
14
12
  border: 0;
15
13
  border-top: 1px solid $gray-dark;
16
14
 
17
- &.#{$state-is-prefix}legendless {
15
+ &.no-legend {
18
16
  border: 0;
19
17
  padding: 0;
20
18
  }
@@ -53,11 +51,12 @@ label,
53
51
  .#{$vendor-prefix}input-radio,
54
52
  .#{$vendor-prefix}input-checkbox {
55
53
  @include reset-inline-block;
54
+ line-height: normal;
56
55
  border: 1px solid $gray-dark;
57
56
  @include size-medium;
58
57
 
59
- &.#{$size-small-class} { @include size-small; }
60
- &.#{$size-large-class} { @include size-large; }
58
+ @include is-small(true, true) { @include size-small; }
59
+ @include is-large(true, true) { @include size-large; }
61
60
  }
62
61
 
63
62
  .#{$vendor-prefix}input {
@@ -86,9 +85,7 @@ label,
86
85
  }
87
86
  }
88
87
 
89
- .#{$vendor-prefix}input-static,
90
- .#{$vendor-prefix}input-radio,
91
- .#{$vendor-prefix}input-checkbox {
88
+ .#{$vendor-prefix}input-static {
92
89
  background: transparent;
93
90
  border-color: transparent;
94
91
  padding-left: 0 !important;
@@ -98,19 +95,21 @@ label,
98
95
  .#{$vendor-prefix}input-radio,
99
96
  .#{$vendor-prefix}input-checkbox {
100
97
  padding: 0;
98
+ border: 0;
101
99
 
102
100
  input[type="checkbox"],
103
101
  input[type="radio"] {
104
102
  vertical-align: middle;
105
103
  position: relative;
106
- top: -1px;
104
+ top: -2px;
107
105
  margin-right: 5px;
108
106
  }
109
107
  }
110
108
 
111
109
  select.#{$vendor-prefix}input {
112
110
  -webkit-appearance: none;
113
- padding: $medium-padding - .05rem; // fixes vertical alignment
111
+ -moz-appearance: none;
112
+ appearance: none;
114
113
  }
115
114
 
116
115
  select.#{$vendor-prefix}input[multiple] {
@@ -190,6 +189,8 @@ textarea.#{$vendor-prefix}input {
190
189
  }
191
190
 
192
191
  .#{$vendor-prefix}form--inline {
192
+ margin-bottom: -($margin / 2);
193
+
193
194
  .#{$vendor-prefix}field,
194
195
  .#{$vendor-prefix}field-label,
195
196
  .#{$vendor-prefix}form-actions {
@@ -6,10 +6,12 @@
6
6
 
7
7
  @import "../common";
8
8
 
9
- img, video, canvas {
9
+ .fluid {
10
+ display: block;
11
+ width: 100%;
12
+ height: auto;
10
13
  max-width: 100%;
11
14
  max-height: auto;
12
- height: auto;
13
15
  }
14
16
 
15
17
  .show-retina,
@@ -25,7 +25,15 @@ h1, h2, h3, h4, h5, h6 {
25
25
  font-weight: normal;
26
26
  }
27
27
 
28
- p, ul, ol, hr {
28
+ p, ul, ol {
29
+ margin: $margin 0 0 0;
30
+
31
+ ul, ol {
32
+ margin: 0;
33
+ }
34
+ }
35
+
36
+ hr {
29
37
  margin: $margin 0;
30
38
  }
31
39
 
@@ -36,8 +44,6 @@ blockquote {
36
44
 
37
45
  cite { display: block; font-size: $small-size; }
38
46
  cite:before { content: "\2014 \00A0"; /* em dash */ }
39
-
40
- @include content-spacing;
41
47
  }
42
48
 
43
49
  mark {
@@ -0,0 +1,16 @@
1
+
2
+ @mixin button-group-first-child {
3
+ > li:first-child .#{$vendor-prefix}button,
4
+ > .#{$vendor-prefix}button:first-child,
5
+ > .#{$vendor-prefix}button.first {
6
+ @content;
7
+ }
8
+ }
9
+
10
+ @mixin button-group-last-child {
11
+ > li:last-child .#{$vendor-prefix}button,
12
+ > .#{$vendor-prefix}button:last-child,
13
+ > .#{$vendor-prefix}button.last {
14
+ @content;
15
+ }
16
+ }
@@ -7,4 +7,19 @@
7
7
  // White transparent background
8
8
  @function white($opacity){
9
9
  @return rgba(255, 255, 255, $opacity);
10
+ }
11
+
12
+ // Take a list of classes (without .) and generate a selector list
13
+ @function join-classes($classes, $inherit: true) {
14
+ $selectors: ();
15
+
16
+ @each $class in $classes {
17
+ @if $inherit {
18
+ $selectors: $selectors, unquote("&." + $class);
19
+ } @else {
20
+ $selectors: $selectors, unquote("." + $class);
21
+ }
22
+ }
23
+
24
+ @return $selectors;
10
25
  }
@@ -30,15 +30,6 @@
30
30
  @include transform(translate(-50%, -50%));
31
31
  }
32
32
 
33
- // Remove the top and bottom margin from content elements
34
- // Allows for perfect spacing within content blocks
35
- @mixin content-spacing {
36
- p, ul, ol, hr, blockquote {
37
- &:first-child { margin-top: 0; }
38
- &:last-child { margin-bottom: 0; }
39
- }
40
- }
41
-
42
33
  @mixin size-small {
43
34
  font-size: $small-size;
44
35
  padding: $small-padding;
@@ -33,6 +33,7 @@ mark { background: lighten($warning-light, 25%); }
33
33
  //-------------------- Accordion --------------------//
34
34
 
35
35
  .accordion-header {
36
+ background: $gray;
36
37
  border: 1px solid $gray-dark;
37
38
  margin: -1px;
38
39
  @include transition(all .15s);
@@ -52,6 +53,11 @@ mark { background: lighten($warning-light, 25%); }
52
53
 
53
54
  .breadcrumb {
54
55
  border: 1px solid $gray-dark;
56
+ background: $gray;
57
+
58
+ ul, ol {
59
+ .caret { color: $gray-darkest; }
60
+ }
55
61
  }
56
62
 
57
63
  //-------------------- Button --------------------//
@@ -82,6 +88,7 @@ mark { background: lighten($warning-light, 25%); }
82
88
 
83
89
  .button {
84
90
  color: #fff;
91
+ background: $gray;
85
92
  font-weight: bold;
86
93
  text-shadow: 1px 1px black(.2);
87
94
  @include transition(all .2s);
@@ -143,8 +150,13 @@ mark { background: lighten($warning-light, 25%); }
143
150
  .drop--up,
144
151
  .drop--right,
145
152
  .drop--left {
153
+ background: $gray;
146
154
  border: 1px solid $gray-dark;
147
155
  box-shadow: 5px 5px black(.25);
156
+ padding: $small-padding;
157
+
158
+ ul { padding: $small-padding; }
159
+ > ul { padding: 0; }
148
160
 
149
161
  li {
150
162
  > a {
@@ -215,6 +227,11 @@ mark { background: lighten($warning-light, 25%); }
215
227
  }
216
228
  }
217
229
 
230
+ .flyout-heading,
231
+ .type-ahead-heading {
232
+ background: $gray-dark;
233
+ }
234
+
218
235
  .type-ahead-highlight { background: $warning-light; }
219
236
 
220
237
  .type-ahead {
@@ -256,13 +273,16 @@ mark { background: lighten($warning-light, 25%); }
256
273
  }
257
274
  }
258
275
 
259
- //-------------------- InputGroup --------------------//
260
-
261
276
  .input-group {
262
- > .input,
263
- > .input-addon,
264
- > .button,
265
- > .button-group .button { height: 46px; }
277
+ > .button { height: 44px; }
278
+
279
+ &.small > .button { height: 30px; }
280
+ &.large > .button { height: 59px; }
281
+ }
282
+
283
+ .input-addon {
284
+ background: $gray;
285
+ border: 1px solid $gray-dark;
266
286
  }
267
287
 
268
288
  //-------------------- Label --------------------//
@@ -326,10 +346,6 @@ mark { background: lighten($warning-light, 25%); }
326
346
 
327
347
  //-------------------- Modal --------------------//
328
348
 
329
- .modal {
330
- margin: $margin;
331
- }
332
-
333
349
  .modal-inner {
334
350
  background: $gray;
335
351
  border: 1px solid $gray-dark;
@@ -447,18 +463,26 @@ mark { background: lighten($warning-light, 25%); }
447
463
  }
448
464
 
449
465
  .progress {
466
+ background: $gray;
450
467
  box-shadow: inset 1px 1px 2px $gray-darkest;
451
-
452
- &.is-info .progress-bar { @include progress-style($info, $info-dark); }
453
- &.is-error .progress-bar { @include progress-style($error, $error-dark); }
454
- &.is-warning .progress-bar { @include progress-style($warning, $warning-dark); }
455
- &.is-success .progress-bar { @include progress-style($success, $success-dark); }
456
468
  }
457
469
 
458
470
  .progress-bar {
459
471
  color: #fff;
460
472
  font-weight: bold;
461
473
  @include progress-style($default, $default-dark);
474
+
475
+ &.is-info { @include progress-style($info, $info-dark); }
476
+ &.is-error { @include progress-style($error, $error-dark); }
477
+ &.is-warning { @include progress-style($warning, $warning-dark); }
478
+ &.is-success { @include progress-style($success, $success-dark); }
479
+ }
480
+
481
+ //-------------------- Showcase --------------------//
482
+
483
+ .showcase-inner {
484
+ background: $gray;
485
+ border: 1px solid $gray-dark;
462
486
  }
463
487
 
464
488
  //-------------------- Tooltip --------------------//
data/version.md CHANGED
@@ -1 +1 @@
1
- 1.1.0
1
+ 1.2.0
metadata CHANGED
@@ -1,15 +1,15 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: titon-toolkit
3
3
  version: !ruby/object:Gem::Version
4
- version: 1.1.0
4
+ version: 1.2.0
5
5
  platform: ruby
6
6
  authors:
7
- - Titon
7
+ - Project Titon
8
8
  - Miles Johnson
9
9
  autorequire:
10
10
  bindir: bin
11
11
  cert_chain: []
12
- date: 2014-02-14 00:00:00.000000000 Z
12
+ date: 2014-03-14 00:00:00.000000000 Z
13
13
  dependencies:
14
14
  - !ruby/object:Gem::Dependency
15
15
  name: sass
@@ -54,7 +54,7 @@ dependencies:
54
54
  - !ruby/object:Gem::Version
55
55
  version: 0.1.alpha.0
56
56
  description: A collection of extensible front-end UI components for the responsive
57
- web.
57
+ and mobile web.
58
58
  email:
59
59
  executables: []
60
60
  extensions: []
@@ -100,13 +100,14 @@ files:
100
100
  - scss/toolkit/layout/form.scss
101
101
  - scss/toolkit/layout/responsive.scss
102
102
  - scss/toolkit/layout/typography.scss
103
+ - scss/toolkit/mixins/_components.scss
103
104
  - scss/toolkit/mixins/_grid.scss
104
105
  - scss/toolkit/mixins/_helper.scss
105
106
  - scss/toolkit/mixins/_layout.scss
106
107
  - scss/toolkit/mixins/_responsive.scss
107
108
  - scss/toolkit/mixins/_state.scss
108
109
  - scss/toolkit/mixins/_unit.scss
109
- - scss/toolkit/themes/titon.scss
110
+ - scss/toolkit/themes/demo.scss
110
111
  - scss/toolkit.scss
111
112
  - changelog.md
112
113
  - license.md