mice 0.0.10 → 0.0.11

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.
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA1:
3
- metadata.gz: 71e0af67a383518ed5d5ef80b9d6589fa1765f5a
4
- data.tar.gz: 78f1a76d69b287ed93e3427cc1ee46c8d31e789f
3
+ metadata.gz: f7030505c8ae8c2bf4d35e15765650d0bbd62bad
4
+ data.tar.gz: de86ea62bc99ecc36d99456a8f725f1498a2a451
5
5
  SHA512:
6
- metadata.gz: 32640d3af83d6ad907d214823db06a2ea71d340ac2e7815a0cfcc84705674df7a211b874416c52fa1671de4eee2018cf4bbac5098e7f153f0ef5c74f2019e423
7
- data.tar.gz: 1545d8a9833365493f84fa4eb27d710d9d6fdaff1f9c1b078a5682e23f178513b881b9638928a0230008615f8e2b4d44da26520e4ac0239439ab6c7dd6904a36
6
+ metadata.gz: 63632da323b3f90436ba43901907fc6305e2f059fa3ca667ca32213843aa4eb461bb94e6d58c1a8ffdc2336d781cb4f854f8b7112ab406430e9d0795161e166d
7
+ data.tar.gz: b2aed92d7f2704cf20ce2428d4d36dcc1124c741fe85b29d73ea8c007f0970feb5dc6b13fda2f117bfdb12273103de1f35f1cdc52d2aadef1fde13da931e32ec
data/Gemfile.lock CHANGED
@@ -1,7 +1,7 @@
1
1
  PATH
2
2
  remote: .
3
3
  specs:
4
- mice (0.0.10)
4
+ mice (0.0.11)
5
5
 
6
6
  GEM
7
7
  remote: https://rubygems.org/
data/lib/mice/version.rb CHANGED
@@ -1,3 +1,3 @@
1
1
  module Mice
2
- VERSION = "0.0.10"
2
+ VERSION = "0.0.11"
3
3
  end
@@ -1,18 +1,23 @@
1
1
  // Forms
2
2
  // --------------------------------------------------
3
3
 
4
- // Button variants
4
+ // $input-types: "text", "password", "datetime", "datetime-local", "date", "month", "time", "week", "number", "email", "url", "search", "tel", "color";
5
+
6
+ // Input variants
5
7
  // -------------------------
6
- @mixin input-variant($color, $background, $border) {
7
- color: $color;
8
- background-color: $background;
9
- border-color: $border;
8
+ @mixin input-variant($border-color) {
9
+ color: $gray;
10
+ background-color: #FFF;
11
+ border-color: $border-color;
10
12
 
11
- &:hover{ border-color: darken($border, 15%); }
13
+ &:hover{ border-color: darken($border-color, 20%); }
12
14
 
13
15
  &:focus,
14
16
  &:active,
15
- &.active{ border-color: darken($border, 30%); }
17
+ &.active{
18
+ border-color: darken($border-color, 20%);
19
+ box-shadow: 0 0 0 1px darken($border-color, 15%), inset 0 1px #F5F5F5;
20
+ }
16
21
 
17
22
  &.disabled,
18
23
  &[disabled] {
@@ -20,13 +25,28 @@
20
25
  &:hover,
21
26
  &:active,
22
27
  &.active {
23
- border-color: $border;
28
+ border-color: $border-color-default;
24
29
  cursor: not-allowed;
30
+ background-color: #eee;
25
31
  @include opacity(.55);
26
32
  }
27
33
  }
28
34
  }
29
35
 
36
+ // Field variants
37
+ // -------------------------
38
+ @mixin field-variant($border-color){
39
+ color: $border-color;
40
+
41
+ input[type="text"],
42
+ input[type="password"],
43
+ input[type="email"],
44
+ textarea,
45
+ select{
46
+ @include input-variant($border-color);
47
+ }
48
+ }
49
+
30
50
 
31
51
  // Input sizing
32
52
  // -------------------------
@@ -42,6 +62,32 @@
42
62
  // Base styles
43
63
  // -------------------------
44
64
 
65
+ fieldset {
66
+ padding: 0;
67
+ margin: 0;
68
+ border: 0;
69
+ min-width: 0;
70
+
71
+ &[disabled]{
72
+ input[type="text"],
73
+ input[type="password"],
74
+ input[type="email"],
75
+ textarea,
76
+ select,
77
+ button{
78
+ &,
79
+ &:hover,
80
+ &:active,
81
+ &.active {
82
+ cursor: not-allowed;
83
+ background-color: #eee;
84
+ border-width: 1px;
85
+ @include opacity(1);
86
+ }
87
+ }
88
+ }
89
+ }
90
+
45
91
  input[type="text"],
46
92
  input[type="password"],
47
93
  input[type="email"],
@@ -54,7 +100,6 @@ select{
54
100
  text-align: left;
55
101
 
56
102
  border: 1px solid #CCC;
57
- border-radius: $border-radius;
58
103
  white-space: nowrap;
59
104
  outline: none;
60
105
 
@@ -62,11 +107,7 @@ select{
62
107
  box-shadow: inset 0 1px #F5F5F5;
63
108
  background-color: transparent;
64
109
 
65
- padding: 6px;
66
- font-size: 14px;
67
- line-height: $line-height-base;
68
-
69
- transition: border-color ease-in-out .1s,box-shadow ease-in-out .1s;
110
+ transition: border-color ease-in-out .1s, box-shadow ease-in-out .1s;
70
111
 
71
112
  &.disabled,
72
113
  &[disabled] {
@@ -81,10 +122,10 @@ select{
81
122
  textarea{
82
123
  display: block;
83
124
  line-height: 20px;
84
- height: 120px;
85
- resize: vertical;
86
-
125
+ min-height: 120px;
87
126
  margin-bottom: 10px;
127
+ white-space: normal;
128
+ resize: vertical;
88
129
  color: #555;
89
130
  background-color: #FFF;
90
131
  background-image: none;
@@ -102,16 +143,14 @@ input[type="text"],
102
143
  input[type="password"],
103
144
  input[type="email"],
104
145
  textarea{
105
- @include input-variant($input-default-color, $input-default-background, $input-default-border);
106
- &.primary{@include input-variant($input-primary-color, $input-primary-background, $input-primary-border);}
107
- &.success{@include input-variant($input-success-color, $input-success-background, $input-success-border);}
108
- &.info {@include input-variant($input-info-color, $input-info-background, $input-info-border );}
109
- &.warning{@include input-variant($input-warning-color, $input-warning-background, $input-warning-border);}
110
- &.danger {@include input-variant($input-danger-color, $input-danger-background, $input-danger-border );}
111
-
112
- &.fluid{
113
- width: 100%;
114
- }
146
+ @include input-variant($border-color-default);
147
+ &.primary{@include input-variant($border-color-primary);}
148
+ &.success{@include input-variant($border-color-success);}
149
+ &.info {@include input-variant($border-color-info );}
150
+ &.warning{@include input-variant($border-color-warning);}
151
+ &.danger {@include input-variant($border-color-danger );}
152
+
153
+ &.fluid{ width: 100%; }
115
154
  }
116
155
 
117
156
 
@@ -119,9 +158,11 @@ textarea{
119
158
  // -------------------------
120
159
  input[type="text"],
121
160
  input[type="password"],
122
- input[type="email"]{
123
- &.small {@include input-size($input-height-small, $padding-small-vertical, $padding-small-horizontal, $font-size-small, $line-height-small, $border-radius-small);}
124
- &.large {@include input-size($input-height-large, $padding-large-vertical, $padding-large-horizontal, $font-size-large, $line-height-large, $border-radius-large);}
161
+ input[type="email"],
162
+ textarea{
163
+ @include input-size($input-height-default, $input-padding-default-vertical, $input-padding-default-horizontal, $font-size-base, $line-height-base, $border-radius);
164
+ &.small {@include input-size($input-height-small, $input-padding-small-vertical, $input-padding-small-horizontal, $font-size-small, $line-height-small, $border-radius-small);}
165
+ &.large {@include input-size($input-height-large, $input-padding-large-vertical, $input-padding-large-horizontal, $font-size-large, $line-height-large, $border-radius-large);}
125
166
  }
126
167
 
127
168
 
@@ -140,6 +181,12 @@ input[type="email"]{
140
181
  display: inline-block;
141
182
  }
142
183
 
184
+ &:not(.checkbox){
185
+ label{
186
+ font-weight: 700;
187
+ }
188
+ }
189
+
143
190
  input[type="text"],
144
191
  input[type="password"],
145
192
  input[type="email"],
@@ -147,20 +194,59 @@ input[type="email"]{
147
194
  textarea{
148
195
  width: 100%;
149
196
  }
197
+
198
+ &.success {@include field-variant($border-color-success);}
199
+ &.warning {@include field-variant($border-color-warning);}
200
+ &.error {@include field-variant($border-color-danger );}
201
+
202
+ &.feedback{
203
+ position: relative;
204
+
205
+ input[type="text"],
206
+ input[type="password"],
207
+ input[type="email"],
208
+ select,
209
+ textarea{
210
+ padding-right: 50px;
211
+ }
212
+
213
+ .icon{
214
+ width: 34px;
215
+ height: 34px;
216
+ line-height: 34px;
217
+ text-align: center;
218
+ position: absolute;
219
+ right: 0;
220
+ top: 22px;
221
+ z-index: 1
222
+ }
223
+ }
150
224
  }
151
225
 
226
+ // Inline form
227
+ // -------------------------
152
228
  form.inline{
153
229
  .field{
154
230
  display: inline-block;
155
231
  margin-bottom: 0;
156
232
  vertical-align: middle;
157
233
 
158
- &:not(.checkbox){
234
+ input[type="text"],
235
+ input[type="password"],
236
+ input[type="email"]{
237
+ width: auto;
238
+ }
239
+ }
240
+
241
+ &.unlabel{
242
+ .field:not(.checkbox){
159
243
  label{ display: none;}
160
244
  }
161
245
  }
162
246
  }
163
247
 
248
+ // Horizontal Form
249
+ // -------------------------
164
250
  form.horizontal{
165
251
 
166
252
  $offsets: "one", "two", "three", "four", "five", "six", "seven", "eight", "nine", "ten", "eleven";
@@ -186,6 +272,11 @@ form.horizontal{
186
272
  }
187
273
  }
188
274
 
275
+ .static{
276
+ padding-top: 6px;
277
+ margin-bottom: 0;
278
+ }
279
+
189
280
  }
190
281
  }
191
282
  }
@@ -193,6 +284,15 @@ form.horizontal{
193
284
  }
194
285
 
195
286
 
287
+ // With optional icons
288
+ // -------------------------
289
+ form.inline,
290
+ form.horizontal{
291
+ .field.feedback{
292
+ .icon{ top: 0 }
293
+ }
294
+ }
295
+
196
296
 
197
297
 
198
298
 
@@ -0,0 +1,35 @@
1
+ //
2
+ // Images
3
+ // --------------------------------------------------
4
+
5
+ img {
6
+ vertical-align: middle;
7
+
8
+ &.responsive{
9
+ max-width: 100%;
10
+ }
11
+
12
+ &.rounded { border-radius: $border-radius-large; }
13
+ &.circle { border-radius: 50%; }
14
+ &.thumbnail {
15
+ padding: 4px;
16
+ line-height: 1.42857143;
17
+ background-color: #FFF;
18
+ border: 1px solid #DDD;
19
+ border-radius: $border-radius;
20
+ -webkit-transition: all .2s ease-in-out;
21
+ transition: all .2s ease-in-out;
22
+ display: inline-block;
23
+ max-width: 100%;
24
+ height: auto;
25
+ }
26
+
27
+ &.disabled{
28
+ cursor: default;
29
+ @include opacity(.3);
30
+ }
31
+
32
+ &.fluid{
33
+ width: 100%;
34
+ }
35
+ }
@@ -67,12 +67,6 @@ a {
67
67
  }
68
68
 
69
69
 
70
- // Images
71
- // -------------------------
72
- img {
73
- vertical-align: middle;
74
- }
75
-
76
70
  .shake {
77
71
  -webkit-transform-origin: center center 0 50%;
78
72
  -moz-transform-origin: center center 0 50%;
@@ -26,8 +26,8 @@ $link-color: $brand-primary !default;
26
26
  $link-hover-color: darken($link-color, 15%) !default;
27
27
 
28
28
  $border-radius: 2px !default;
29
- $border-radius-small: $border-radius !default;
30
- $border-radius-large: $border-radius !default;
29
+ $border-radius-small: $border-radius * 1.5 !default;
30
+ $border-radius-large: $border-radius * 2 !default;
31
31
 
32
32
  // Font family, size
33
33
  // -------------------------
@@ -49,8 +49,12 @@ $font-size-h4: ceil(($font-size-base * 1.28)) !default; // ~18px
49
49
  $font-size-h5: $font-size-base !default;
50
50
  $font-size-h6: ceil(($font-size-base * 0.85)) !default; // ~12px
51
51
 
52
+ // Line Height
53
+ // -------------------------
52
54
 
53
55
  $line-height-base: 1.42858 !default; // 20/14
56
+ $line-height-small: 1.33 !default;
57
+ $line-height-large: 1.5 !default;
54
58
 
55
59
  $line-height-computed: floor(($font-size-base * $line-height-base)) !default; // ~20px
56
60
 
@@ -63,14 +67,13 @@ $padding-base-vertical: 6px !default;
63
67
  $padding-base-horizontal: 12px !default;
64
68
 
65
69
  $padding-small-vertical: 5px !default;
66
- $padding-small-horizontal: 5px !default;
70
+ $padding-small-horizontal: 10px !default;
67
71
 
68
72
  $padding-large-vertical: 8px !default;
69
- $padding-large-horizontal: 8px !default;
73
+ $padding-large-horizontal: 15px !default;
70
74
 
71
- $padding-mini-vertical: 1px !default;
72
- $padding-mini-horizontal: 5px !default;
73
- // $padding-mini-horizontal: $padding-small-horizontal;
75
+ $padding-mini-vertical: 2px !default;
76
+ $padding-mini-horizontal: 6px !default;
74
77
 
75
78
  $line-height-large: 1.33 !default;
76
79
  $line-height-small: 1.5 !default;
@@ -86,19 +89,18 @@ $caret-width-base: 4px !default;
86
89
  //** Carets increase slightly in size for larger components.
87
90
  $caret-width-large: 5px !default;
88
91
 
92
+
89
93
  // Border color
90
94
  // -------------------------
91
-
92
- $border-default-border-color: #CCC !default;
93
- $border-primary-border-color: $brand-primary !default;
94
- $border-success-border-color: $brand-success !default;
95
- $border-info-border-color: $brand-info !default;
96
- $border-warning-border-color: $brand-warning !default;
97
- $border-danger-border-color: $brand-danger !default;
95
+ $border-color-default: #CCC !default;
96
+ $border-color-primary: $brand-primary !default;
97
+ $border-color-success: $brand-success !default;
98
+ $border-color-info: $brand-info !default;
99
+ $border-color-warning: $brand-warning !default;
100
+ $border-color-danger: $brand-danger !default;
98
101
 
99
102
  // Heading
100
103
  // -------------------------
101
-
102
104
  $heading-font-family: inherit !default;
103
105
  $heading-font-weight: 500 !default;
104
106
  $heading-line-height: 1.1 !default;
@@ -153,36 +155,19 @@ $button-danger-border: darken($button-danger-background, 5%) !defau
153
155
 
154
156
  //== Input
155
157
  // -------------------------
156
- $input-default-color: $gray !default;
157
- $input-default-background: #FFF !default;
158
- $input-default-border: $border-default-border-color !default;
159
-
160
- $input-primary-color: $input-default-color !default;
161
- $input-primary-background: $input-default-background !default;
162
- $input-primary-border: $border-primary-border-color !default;
163
-
164
- $input-success-color: $input-default-color !default;
165
- $input-success-background: $input-default-background !default;
166
- $input-success-border: $border-success-border-color !default;
167
-
168
- $input-info-color: $input-default-color !default;
169
- $input-info-background: $input-default-background !default;
170
- $input-info-border: $border-info-border-color !default;
171
-
172
- $input-warning-color: $input-default-color !default;
173
- $input-warning-background: $input-default-background !default;
174
- $input-warning-border: $border-warning-border-color !default;
158
+ $input-height-default: ($line-height-computed + ($padding-base-vertical * 2) + 2) !default;
159
+ $input-height-small: (floor($font-size-small * $line-height-small) + ($padding-small-vertical * 2) + 2) !default;
160
+ $input-height-large: (ceil($font-size-large * $line-height-large) + ($padding-large-vertical * 2) + 2) !default;
175
161
 
176
- $input-danger-color: $input-default-color !default;
177
- $input-danger-background: $input-default-background !default;
178
- $input-danger-border: $border-danger-border-color !default;
162
+ // Sizing
163
+ $input-padding-default-vertical: $padding-base-vertical !default;
164
+ $input-padding-default-horizontal: $padding-base-vertical !default;
179
165
 
180
- $input-height-base: ($line-height-computed + ($padding-base-vertical * 2) + 2) !default;
181
- $input-height-small: (floor($font-size-small * $line-height-small) + ($padding-small-vertical * 2) + 2) !default;
182
- $input-height-large: (ceil($font-size-large * $line-height-large) + ($padding-large-vertical * 2) + 2) !default;
166
+ $input-padding-small-vertical: $padding-small-vertical !default;
167
+ $input-padding-small-horizontal: $padding-small-vertical !default;
183
168
 
184
- $line-height-small: 1.33 !default;
185
- $line-height-large: 1.5 !default;
169
+ $input-padding-large-vertical: $padding-large-vertical !default;
170
+ $input-padding-large-horizontal: $padding-large-vertical !default;
186
171
 
187
172
  //== Tables
188
173
  //
@@ -11,6 +11,7 @@
11
11
  @import "mice/grid";
12
12
 
13
13
  @import "mice/buttons";
14
+ @import "mice/images";
14
15
  @import "mice/icons";
15
16
 
16
17
  @import "mice/menu";
metadata CHANGED
@@ -1,14 +1,14 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: mice
3
3
  version: !ruby/object:Gem::Version
4
- version: 0.0.10
4
+ version: 0.0.11
5
5
  platform: ruby
6
6
  authors:
7
7
  - miclle
8
8
  autorequire:
9
9
  bindir: bin
10
10
  cert_chain: []
11
- date: 2014-05-05 00:00:00.000000000 Z
11
+ date: 2014-05-11 00:00:00.000000000 Z
12
12
  dependencies:
13
13
  - !ruby/object:Gem::Dependency
14
14
  name: bundler
@@ -58,6 +58,7 @@ files:
58
58
  - vendor/assets/stylesheets/mice/_forms.scss
59
59
  - vendor/assets/stylesheets/mice/_grid.scss
60
60
  - vendor/assets/stylesheets/mice/_icons.scss
61
+ - vendor/assets/stylesheets/mice/_images.scss
61
62
  - vendor/assets/stylesheets/mice/_media.scss
62
63
  - vendor/assets/stylesheets/mice/_menu.scss
63
64
  - vendor/assets/stylesheets/mice/_mixins.scss