titon-toolkit 1.5.3 → 2.0.0.pre.rc.1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (59) hide show
  1. checksums.yaml +4 -4
  2. data/changelog.md +180 -61
  3. data/license.md +1 -1
  4. data/readme.md +7 -7
  5. data/roadmap.md +4 -20
  6. data/scss/toolkit/_common.scss +426 -73
  7. data/scss/toolkit/{layout/base.scss → base.scss} +13 -25
  8. data/scss/toolkit/components/accordion.scss +6 -6
  9. data/scss/toolkit/components/blackout.scss +13 -11
  10. data/scss/toolkit/components/breadcrumb.scss +2 -2
  11. data/scss/toolkit/components/button-group.scss +130 -51
  12. data/scss/toolkit/components/button.scss +110 -9
  13. data/scss/toolkit/components/carousel.scss +20 -46
  14. data/scss/toolkit/{layout → components}/code.scss +1 -1
  15. data/scss/toolkit/components/divider.scss +24 -23
  16. data/scss/toolkit/components/drop.scss +35 -26
  17. data/scss/toolkit/components/flyout.scss +5 -10
  18. data/scss/toolkit/{layout → components}/form.scss +72 -65
  19. data/scss/toolkit/components/grid.scss +21 -116
  20. data/scss/toolkit/components/icon.scss +27 -13
  21. data/scss/toolkit/components/input-group.scss +4 -6
  22. data/scss/toolkit/components/input.scss +21 -21
  23. data/scss/toolkit/components/label.scss +76 -66
  24. data/scss/toolkit/components/lazy-load.scss +2 -2
  25. data/scss/toolkit/components/loader.scss +8 -8
  26. data/scss/toolkit/components/mask.scss +5 -9
  27. data/scss/toolkit/components/matrix.scss +4 -4
  28. data/scss/toolkit/components/modal.scss +33 -40
  29. data/scss/toolkit/components/notice.scss +5 -9
  30. data/scss/toolkit/components/off-canvas.scss +80 -60
  31. data/scss/toolkit/components/pagination.scss +75 -34
  32. data/scss/toolkit/components/pin.scss +7 -3
  33. data/scss/toolkit/components/popover.scss +14 -14
  34. data/scss/toolkit/components/progress.scss +25 -14
  35. data/scss/toolkit/{layout → components}/responsive.scss +31 -37
  36. data/scss/toolkit/components/showcase.scss +10 -36
  37. data/scss/toolkit/components/step.scss +7 -7
  38. data/scss/toolkit/components/switch.scss +47 -33
  39. data/scss/toolkit/components/tab.scss +42 -0
  40. data/scss/toolkit/components/table.scss +27 -25
  41. data/scss/toolkit/components/toast.scss +13 -9
  42. data/scss/toolkit/components/tooltip.scss +15 -16
  43. data/scss/toolkit/components/type-ahead.scss +6 -6
  44. data/scss/toolkit/{layout → components}/typography.scss +2 -2
  45. data/scss/toolkit/mixins/_components.scss +12 -6
  46. data/scss/toolkit/mixins/_grid.scss +5 -1
  47. data/scss/toolkit/mixins/_helper.scss +42 -3
  48. data/scss/toolkit/mixins/_layout.scss +22 -13
  49. data/scss/toolkit/mixins/_responsive.scss +39 -39
  50. data/scss/toolkit.scss +12 -18
  51. data/version.md +1 -1
  52. metadata +16 -22
  53. data/scss/toolkit/components/tabs.scss +0 -43
  54. data/scss/toolkit/effects/oval.scss +0 -37
  55. data/scss/toolkit/effects/pill.scss +0 -94
  56. data/scss/toolkit/effects/skew.scss +0 -85
  57. data/scss/toolkit/effects/visual.scss +0 -64
  58. data/scss/toolkit/mixins/_state.scss +0 -36
  59. data/scss/toolkit/themes/demo.scss +0 -569
data/scss/toolkit/effects/oval.scss DELETED
@@ -1,37 +0,0 @@
1
- /**
2
- * @copyright 2010-2014, The Titon Project
3
- * @license http://opensource.org/licenses/BSD-3-Clause
4
- * @link http://titon.io
5
- */
6
-
7
- @import "../common";
8
-
9
- //-------------------- Button --------------------//
10
-
11
- .#{$vendor-prefix}button.#{$shape-oval-class} {
12
- border-radius: #{$oval-x} / #{$oval-y};
13
- }
14
-
15
- //-------------------- Pagination --------------------//
16
-
17
- .#{$vendor-prefix}pagination--grouped.#{$shape-oval-class} {
18
- ul {
19
- border-radius: #{$oval-x} / #{$oval-y};
20
- }
21
-
22
- li:first-child a {
23
- border-radius: #{$oval-x} 0 0 #{$oval-x} / #{$oval-y} 0 0 #{$oval-y};
24
- }
25
-
26
- li:last-child a {
27
- border-radius: 0 #{$oval-x} #{$oval-x} 0 / 0 #{$oval-y} #{$oval-y} 0;
28
- }
29
- }
30
-
31
- //-------------------- Visual --------------------//
32
-
33
- .#{$vendor-prefix}visual-gloss.#{$shape-oval-class}:after {
34
- width: 90%;
35
- left: 5.5%;
36
- border-radius: 5rem 5rem 4rem 4rem / 1.5rem 1.5rem 1.5rem 1.5rem;
37
- }
data/scss/toolkit/effects/pill.scss DELETED
@@ -1,94 +0,0 @@
1
- /**
2
- * @copyright 2010-2014, The Titon Project
3
- * @license http://opensource.org/licenses/BSD-3-Clause
4
- * @link http://titon.io
5
- */
6
-
7
- @import "../common";
8
-
9
- //-------------------- Button --------------------//
10
-
11
- .#{$vendor-prefix}button.#{$shape-pill-class} {
12
- border-radius: $pill;
13
- }
14
-
15
- //-------------------- ButtonGroup --------------------//
16
-
17
- .#{$vendor-prefix}button-group.#{$shape-pill-class} {
18
- border-radius: $pill;
19
-
20
- @include button-group-first-child {
21
- border-top-left-radius: $pill;
22
- border-bottom-left-radius: $pill;
23
- }
24
-
25
- @include button-group-last-child {
26
- border-top-right-radius: $pill;
27
- border-bottom-right-radius: $pill;
28
- }
29
- }
30
-
31
- .#{$vendor-prefix}button-group--vertical.#{$shape-pill-class} {
32
- border-radius: $pill;
33
-
34
- @include button-group-first-child {
35
- border-top-left-radius: $pill;
36
- border-top-right-radius: $pill;
37
- border-bottom-left-radius: 0;
38
- border-bottom-right-radius: 0;
39
- }
40
-
41
- @include button-group-last-child {
42
- border-top-left-radius: 0;
43
- border-top-right-radius: 0;
44
- border-bottom-left-radius: $pill;
45
- border-bottom-right-radius: $pill;
46
- }
47
- }
48
-
49
- //-------------------- Pagination --------------------//
50
-
51
- .#{$vendor-prefix}pagination--grouped.#{$shape-pill-class} {
52
- ul {
53
- border-radius: $pill;
54
- }
55
-
56
- li:first-child a {
57
- border-top-left-radius: $pill;
58
- border-bottom-left-radius: $pill;
59
- }
60
-
61
- li:last-child a {
62
- border-top-right-radius: $pill;
63
- border-bottom-right-radius: $pill;
64
- }
65
- }
66
-
67
- //-------------------- Progress --------------------//
68
-
69
- .#{$vendor-prefix}progress.#{$shape-pill-class} {
70
- border-radius: $pill;
71
-
72
- .#{$vendor-prefix}progress-bar:first-child {
73
- border-top-left-radius: $pill;
74
- border-bottom-left-radius: $pill;
75
- }
76
- }
77
-
78
- //-------------------- Switch --------------------//
79
-
80
- .#{$vendor-prefix}switch.#{$shape-pill-class} {
81
- border-radius: $pill;
82
-
83
- .#{$vendor-prefix}switch-toggle {
84
- border-radius: $pill;
85
- }
86
- }
87
-
88
- //-------------------- Visual --------------------//
89
-
90
- .#{$vendor-prefix}visual-gloss.#{$shape-pill-class}:after {
91
- width: 90%;
92
- left: 5.5%;
93
- border-radius: 1rem 1rem 2rem 2rem / 1rem 1rem 1rem 1rem;
94
- }
data/scss/toolkit/effects/skew.scss DELETED
@@ -1,85 +0,0 @@
1
- /**
2
- * @copyright 2010-2014, The Titon Project
3
- * @license http://opensource.org/licenses/BSD-3-Clause
4
- * @link http://titon.io
5
- */
6
-
7
- @import "../common";
8
-
9
- //-------------------- Button --------------------//
10
-
11
- .#{$vendor-prefix}button.#{$shape-skew-class} {
12
- border-radius: #{$skew-x $skew-x} 0 0 / #{$skew-y $skew-y} 0 0;
13
- }
14
-
15
- //-------------------- ButtonGroup --------------------//
16
-
17
- .#{$vendor-prefix}button-group.#{$shape-skew-class} {
18
- border-top-left-radius: $skew;
19
- border-top-right-radius: $skew;
20
- border-bottom-left-radius: 0;
21
- border-bottom-right-radius: 0;
22
-
23
- @include button-group-first-child {
24
- border-top-left-radius: $skew;
25
- border-bottom-left-radius: 0;
26
- }
27
-
28
- @include button-group-last-child {
29
- border-top-right-radius: $skew;
30
- border-bottom-right-radius: 0;
31
- }
32
- }
33
-
34
- .#{$vendor-prefix}button-group--vertical {
35
- &.#{$shape-skew-class} {
36
- border-top-left-radius: $skew-y 1.5rem;
37
- border-bottom-left-radius: $skew-y 1.5rem;
38
-
39
- @include button-group-first-child {
40
- border-top-left-radius: $skew-reverse;
41
- }
42
-
43
- @include button-group-last-child {
44
- border-bottom-left-radius: $skew-reverse;
45
- border-top-right-radius: 0;
46
- }
47
- }
48
-
49
- &.#{$shape-skew-class}-reverse {
50
- border-top-right-radius: $skew-y 1.25rem;
51
- border-bottom-right-radius: $skew-y 1.25rem;
52
-
53
- @include button-group-first-child {
54
- border-top-right-radius: $skew-reverse;
55
- }
56
-
57
- @include button-group-last-child {
58
- border-bottom-right-radius: $skew-reverse;
59
- }
60
- }
61
- }
62
-
63
- //-------------------- Pagination --------------------//
64
-
65
- .#{$vendor-prefix}pagination--grouped.#{$shape-skew-class} {
66
- ul {
67
- border-radius: #{$skew-x $skew-x} 0 0 / #{$skew-y $skew-y} 0 0;
68
- }
69
-
70
- li:first-child a {
71
- border-radius: #{$skew-x} 0 0 0 / #{$skew-y} 0 0 0;
72
- }
73
-
74
- li:last-child a {
75
- border-radius: 0 #{$skew-x} 0 0 / 0 #{$skew-y} 0 0;
76
- }
77
- }
78
-
79
- //-------------------- Visual --------------------//
80
-
81
- .#{$vendor-prefix}visual-gloss.#{$shape-skew-class}:after {
82
- width: 90%;
83
- left: 5.5%;
84
- border-radius: 1rem 1rem 3rem 3rem / 1rem 1rem 2rem 2rem;
85
- }
data/scss/toolkit/effects/visual.scss DELETED
@@ -1,64 +0,0 @@
1
- /**
2
- * @copyright 2010-2014, The Titon Project
3
- * @license http://opensource.org/licenses/BSD-3-Clause
4
- * @link http://titon.io
5
- */
6
-
7
- @import "../common";
8
-
9
- //-------------------- Gloss --------------------//
10
-
11
- .#{$vendor-prefix}visual-gloss {
12
- &:after {
13
- content: "";
14
- position: absolute;
15
- width: 100%;
16
- height: 60%;
17
- top: 1%;
18
- left: 0;
19
- border-radius: 0 0 2rem 2rem / 0 0 1rem 1rem;
20
- background: linear-gradient(to left, white(.3) 0%, white(0) 50%, white(.3) 100%);
21
- }
22
-
23
- &.#{$shape-round-class}:after {
24
- border-radius: .2rem .2rem 2rem 2rem / .5rem .5rem 1rem 1rem;
25
- width: 98%;
26
- left: 1.5%;
27
- }
28
- }
29
-
30
- //-------------------- Reflection --------------------//
31
-
32
- .#{$vendor-prefix}visual-reflect:after {
33
- content: "";
34
- position: absolute;
35
- width: 100%;
36
- height: 50%;
37
- top: 0;
38
- left: 0;
39
- background: linear-gradient(180deg, white(0), white(.3));
40
- }
41
-
42
- //-------------------- Glare --------------------//
43
-
44
- .#{$vendor-prefix}visual-glare:after {
45
- content: "";
46
- position: absolute;
47
- width: 100%;
48
- height: 100%;
49
- top: 0;
50
- left: 0;
51
- background: linear-gradient(160deg, white(.5) 0%, white(.1) 50%, white(0) 50%, white(.3) 100%);
52
- }
53
-
54
- //-------------------- Popout --------------------//
55
-
56
- .#{$vendor-prefix}visual-popout {
57
- box-shadow: 0 6px 0 0 black(.25) !important;
58
- top: -3px;
59
-
60
- &:active {
61
- box-shadow: 0 3px 0 0 black(.5) !important;
62
- top: 0;
63
- }
64
- }
data/scss/toolkit/mixins/_state.scss DELETED
@@ -1,36 +0,0 @@
1
-
2
- @mixin is-active {
3
- .is-active > &,
4
- .is-active > li > &,
5
- &.is-active,
6
- &.is-active:hover { @content; }
7
- }
8
-
9
- @mixin is-active-parent {
10
- .is-active & { @content; }
11
- }
12
-
13
- @mixin is-disabled {
14
- .is-disabled > &,
15
- .is-disabled > li > &,
16
- &.is-disabled,
17
- &.is-disabled:hover,
18
- &[disabled],
19
- &[disabled]:hover { @content; }
20
- }
21
-
22
- @mixin is-info {
23
- &.is-info { @content; }
24
- }
25
-
26
- @mixin is-error {
27
- &.is-error { @content; }
28
- }
29
-
30
- @mixin is-warning {
31
- &.is-warning { @content; }
32
- }
33
-
34
- @mixin is-success {
35
- &.is-success { @content; }
36
- }