titon-toolkit 0.12.0 → 0.13.2

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.
@@ -38,14 +38,12 @@
38
38
 
39
39
  a {
40
40
  display: block;
41
- padding: $medium-padding;
42
41
  line-height: 100%;
43
- font-size: $medium-size;
42
+ @include size-medium;
44
43
  }
45
44
 
46
- // Sizes
47
- &.small a { padding: $small-padding; font-size: $small-size; }
48
- &.large a { padding: $large-padding; font-size: $large-size; }
45
+ &.small a { @include size-small; }
46
+ &.large a { @include size-large; }
49
47
 
50
48
  @include clear-fix;
51
49
  }
@@ -34,7 +34,6 @@
34
34
  border-radius: 0;
35
35
  }
36
36
 
37
- // Shape: round
38
37
  &.round {
39
38
  border-radius: $round;
40
39
 
@@ -53,47 +52,6 @@
53
52
  }
54
53
  }
55
54
 
56
- // Shape: pill
57
- &.pill {
58
- border-radius: $pill;
59
-
60
- > li:first-child .button,
61
- > .button:first-child,
62
- > .button.first {
63
- border-top-left-radius: $pill;
64
- border-bottom-left-radius: $pill;
65
- }
66
-
67
- > li:last-child .button,
68
- > .button:last-child,
69
- > .button.last {
70
- border-top-right-radius: $pill;
71
- border-bottom-right-radius: $pill;
72
- }
73
- }
74
-
75
- // Shape: skew
76
- &.skew {
77
- border-top-left-radius: $skew;
78
- border-top-right-radius: $skew;
79
- border-bottom-left-radius: 0;
80
- border-bottom-right-radius: 0;
81
-
82
- > li:first-child .button,
83
- > .button:first-child,
84
- > .button.first {
85
- border-top-left-radius: $skew;
86
- border-bottom-left-radius: 0;
87
- }
88
-
89
- > li:last-child .button,
90
- > .button:last-child,
91
- > .button.last {
92
- border-top-right-radius: $skew;
93
- border-bottom-right-radius: 0;
94
- }
95
- }
96
-
97
55
  @include clear-fix;
98
56
  }
99
57
 
@@ -119,7 +77,6 @@
119
77
  &:hover { z-index: 1; }
120
78
  }
121
79
 
122
- // Reset radius
123
80
  &.round,
124
81
  &.pill,
125
82
  &.skew,
@@ -127,7 +84,6 @@
127
84
  .button { border-radius: 0; }
128
85
  }
129
86
 
130
- // Shape: round
131
87
  &.round {
132
88
  > li:first-child .button,
133
89
  > .button:first-child {
@@ -141,56 +97,6 @@
141
97
  border-bottom-right-radius: $round;
142
98
  }
143
99
  }
144
-
145
- // Shape: pill
146
- &.pill {
147
- border-radius: $pill;
148
-
149
- > li:first-child .button,
150
- > .button:first-child {
151
- border-top-left-radius: $pill;
152
- border-top-right-radius: $pill;
153
- }
154
-
155
- > li:last-child .button,
156
- > .button:last-child {
157
- border-bottom-left-radius: $pill;
158
- border-bottom-right-radius: $pill;
159
- }
160
- }
161
-
162
- // Shape: skew
163
- &.skew {
164
- border-top-left-radius: $skew-y 1.5rem;
165
- border-bottom-left-radius: $skew-y 1.5rem;
166
-
167
- > li:first-child .button,
168
- > .button:first-child {
169
- border-top-left-radius: $skew-reverse;
170
- }
171
-
172
- > li:last-child .button,
173
- > .button:last-child {
174
- border-bottom-left-radius: $skew-reverse;
175
- border-top-right-radius: 0;
176
- }
177
- }
178
-
179
- // Shape: skew-reverse
180
- &.skew-reverse {
181
- border-top-right-radius: $skew-y 1.25rem;
182
- border-bottom-right-radius: $skew-y 1.25rem;
183
-
184
- > li:first-child .button,
185
- > .button:first-child {
186
- border-top-right-radius: $skew-reverse;
187
- }
188
-
189
- > li:last-child .button,
190
- > .button:last-child {
191
- border-bottom-right-radius: $skew-reverse;
192
- }
193
- }
194
100
  }
195
101
 
196
102
  .button-group.button-group--justified {
@@ -13,6 +13,7 @@
13
13
 
14
14
  .button {
15
15
  @include reset-inline-block;
16
+ @include size-medium;
16
17
  cursor: pointer;
17
18
  text-align: center;
18
19
  overflow: hidden;
@@ -20,21 +21,13 @@
20
21
  line-height: normal;
21
22
  user-select: none;
22
23
  white-space: nowrap;
23
- @include size-medium;
24
24
  background: $gray;
25
25
  border: 1px solid $gray-dark;
26
26
 
27
- // Sizes
28
27
  &.small, .small & { @include size-small; }
29
28
  &.large, .large & { @include size-large; }
30
-
31
- // Shapes
32
29
  &.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
30
 
37
- // State
38
31
  @include disabled-state {
39
32
  cursor: not-allowed;
40
33
  pointer-events: none;
@@ -6,6 +6,8 @@
6
6
 
7
7
  @import "../common";
8
8
 
9
+ $dropdown-transition: $default-transition !default;
10
+
9
11
  /**
10
12
  * <ul class="dropdown">
11
13
  * <li class="heading>Heading</li>
@@ -6,6 +6,8 @@
6
6
 
7
7
  @import "../common";
8
8
 
9
+ $lazyLoad-transition: $default-transition !default;
10
+
9
11
  /**
10
12
  * Will hide background images and defer image loading until they are within viewport.
11
13
  * Should be used in conjunction with the JavaScript Titon.LazyLoad component.
@@ -13,5 +15,5 @@
13
15
 
14
16
  .lazy-load {
15
17
  background-image: none !important;
16
- @include transition(background-image .3s);
18
+ @include transition(background-image $lazyLoad-transition);
17
19
  }
@@ -6,6 +6,8 @@
6
6
 
7
7
  @import "../common";
8
8
 
9
+ $matrix-transition: $default-transition !default;
10
+
9
11
  /**
10
12
  * Should be used in conjunction with the JavaScript Titon.Matrix component.
11
13
  */
@@ -27,7 +29,7 @@
27
29
  margin: 0;
28
30
  padding: 0;
29
31
  position: absolute;
30
- @include transition(top .3s, left .3s, bottom .3s, right .3s, opacity .3s);
32
+ @include transition(top $matrix-transition, left $matrix-transition, bottom $matrix-transition, right $matrix-transition, opacity $matrix-transition);
31
33
 
32
34
  img {
33
35
  max-width: 100%;
@@ -54,7 +54,8 @@
54
54
  margin-right: 0;
55
55
 
56
56
  &:first-child { margin-left: 0; }
57
- &:hover, .button:hover { z-index: 1; }
57
+ &:hover,
58
+ .button:hover { z-index: 1; }
58
59
 
59
60
  .button {
60
61
  margin: 0;
@@ -62,7 +63,6 @@
62
63
  }
63
64
  }
64
65
 
65
- // Shape: round
66
66
  &.round {
67
67
  ul {
68
68
  border-radius: $round;
@@ -78,51 +78,4 @@
78
78
  border-bottom-right-radius: $round;
79
79
  }
80
80
  }
81
-
82
- // Shape: pill
83
- &.pill {
84
- ul {
85
- border-radius: $pill;
86
- }
87
-
88
- li:first-child .button {
89
- border-top-left-radius: $pill;
90
- border-bottom-left-radius: $pill;
91
- }
92
-
93
- li:last-child .button {
94
- border-top-right-radius: $pill;
95
- border-bottom-right-radius: $pill;
96
- }
97
- }
98
-
99
- // Shape: oval
100
- &.oval {
101
- ul {
102
- border-radius: #{$oval-x} / #{$oval-y};
103
- }
104
-
105
- li:first-child .button {
106
- border-radius: #{$oval-x} 0 0 #{$oval-x} / #{$oval-y} 0 0 #{$oval-y};
107
- }
108
-
109
- li:last-child .button {
110
- border-radius: 0 #{$oval-x} #{$oval-x} 0 / 0 #{$oval-y} #{$oval-y} 0;
111
- }
112
- }
113
-
114
- // Shape: skew
115
- &.skew {
116
- ul {
117
- border-radius: #{$skew-x $skew-x} 0 0 / #{$skew-y $skew-y} 0 0;
118
- }
119
-
120
- li:first-child .button {
121
- border-radius: #{$skew-x} 0 0 0 / #{$skew-y} 0 0 0;
122
- }
123
-
124
- li:last-child .button {
125
- border-radius: 0 #{$skew-x} 0 0 / 0 #{$skew-y} 0 0;
126
- }
127
- }
128
81
  }
@@ -6,6 +6,8 @@
6
6
 
7
7
  @import "../common";
8
8
 
9
+ $progress-transition: $default-transition !default;
10
+
9
11
  /**
10
12
  * <div class="progress">
11
13
  * <div class="progress-bar" style="width: 50%">50%</div>
@@ -30,5 +32,5 @@
30
32
  font-size: .7rem;
31
33
  background: $gray-darkest;
32
34
  float: left;
33
- @include transition(width .6s, background .3s);
35
+ @include transition(width .6s, background $progress-transition);
34
36
  }
data/version.md CHANGED
@@ -1 +1 @@
1
- 0.12.0
1
+ 0.13.2
metadata CHANGED
@@ -1,8 +1,7 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: titon-toolkit
3
3
  version: !ruby/object:Gem::Version
4
- version: 0.12.0
5
- prerelease:
4
+ version: 0.13.2
6
5
  platform: ruby
7
6
  authors:
8
7
  - Titon
@@ -10,38 +9,34 @@ authors:
10
9
  autorequire:
11
10
  bindir: bin
12
11
  cert_chain: []
13
- date: 2013-09-22 00:00:00.000000000 Z
12
+ date: 2013-10-21 00:00:00.000000000 Z
14
13
  dependencies:
15
14
  - !ruby/object:Gem::Dependency
16
15
  name: sass
17
16
  requirement: !ruby/object:Gem::Requirement
18
- none: false
19
17
  requirements:
20
- - - ! '>='
18
+ - - '>='
21
19
  - !ruby/object:Gem::Version
22
20
  version: 3.2.0
23
21
  type: :runtime
24
22
  prerelease: false
25
23
  version_requirements: !ruby/object:Gem::Requirement
26
- none: false
27
24
  requirements:
28
- - - ! '>='
25
+ - - '>='
29
26
  - !ruby/object:Gem::Version
30
27
  version: 3.2.0
31
28
  - !ruby/object:Gem::Dependency
32
29
  name: compass
33
30
  requirement: !ruby/object:Gem::Requirement
34
- none: false
35
31
  requirements:
36
- - - ! '>='
32
+ - - '>='
37
33
  - !ruby/object:Gem::Version
38
34
  version: '0.11'
39
35
  type: :runtime
40
36
  prerelease: false
41
37
  version_requirements: !ruby/object:Gem::Requirement
42
- none: false
43
38
  requirements:
44
- - - ! '>='
39
+ - - '>='
45
40
  - !ruby/object:Gem::Version
46
41
  version: '0.11'
47
42
  description: A powerful front-end UI and component toolkit. Provides Sass files for
@@ -52,7 +47,13 @@ extensions: []
52
47
  extra_rdoc_files: []
53
48
  files:
54
49
  - lib/titon-toolkit.rb
50
+ - scss/ie8.scss
55
51
  - scss/normalize.scss
52
+ - scss/toolkit/_common.scss
53
+ - scss/toolkit/_variables.scss
54
+ - scss/toolkit/effects/oval.scss
55
+ - scss/toolkit/effects/pill.scss
56
+ - scss/toolkit/effects/skew.scss
56
57
  - scss/toolkit/effects/visual.scss
57
58
  - scss/toolkit/layout/base.scss
58
59
  - scss/toolkit/layout/code.scss
@@ -90,8 +91,6 @@ files:
90
91
  - scss/toolkit/ui/pagination.scss
91
92
  - scss/toolkit/ui/pin.scss
92
93
  - scss/toolkit/ui/progress.scss
93
- - scss/toolkit/_common.scss
94
- - scss/toolkit/_variables.scss
95
94
  - scss/toolkit.scss
96
95
  - license.md
97
96
  - readme.md
@@ -99,26 +98,25 @@ files:
99
98
  homepage: http://titon.io
100
99
  licenses:
101
100
  - BSD-2
101
+ metadata: {}
102
102
  post_install_message:
103
103
  rdoc_options: []
104
104
  require_paths:
105
105
  - lib
106
106
  required_ruby_version: !ruby/object:Gem::Requirement
107
- none: false
108
107
  requirements:
109
- - - ! '>='
108
+ - - '>='
110
109
  - !ruby/object:Gem::Version
111
110
  version: '0'
112
111
  required_rubygems_version: !ruby/object:Gem::Requirement
113
- none: false
114
112
  requirements:
115
- - - ! '>='
113
+ - - '>='
116
114
  - !ruby/object:Gem::Version
117
115
  version: '0'
118
116
  requirements: []
119
117
  rubyforge_project:
120
- rubygems_version: 1.8.23
118
+ rubygems_version: 2.0.3
121
119
  signing_key:
122
- specification_version: 3
120
+ specification_version: 4
123
121
  summary: Provides Titon Toolkit Sass files for use in projects.
124
122
  test_files: []