mice 0.0.10 → 0.0.11

Sign up to get free protection for your applications and to get access to all the features.
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