mice 0.1.7 → 0.1.9

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: b000eb76f79782d204ef7686245a009231183b61
4
- data.tar.gz: 2ca1be8e0e72383879bd13ceba49a95de4b0ed1a
3
+ metadata.gz: 75868159de22568aa1ef29b14227a5597e8245d3
4
+ data.tar.gz: 8f22b046a0e0ec8aeae45bb415211a8c399a3a1e
5
5
  SHA512:
6
- metadata.gz: d48207edfacb617ff6cedd8ee9dec0244104c41f851a35f836471ef70a7b37b77025f8118e8e61f65a5032b5e5d0b71d8aa04a861c22c934fbf96cee9b821976
7
- data.tar.gz: efd1aa52ef681ca9d6517d866d523e8f67c307888a63409defd546c5006a03867becd1da971d4bd6fe21d582100411490b5fd7bdc2918e6ef10889a3c3c6c5c4
6
+ metadata.gz: 56de04aff405e3712810130f2da67be1ead606942e203563980c3e6d9629c3f285cd5c8cd5e6e93d285a387b07b4b6a7fa331743089641b8772702802e3ff16d
7
+ data.tar.gz: 3db236686683e2d92f9ae876928f71733ca25ae402367b1ac7581b31093218b8f2f5bafbc6ad01caf7c8b78d69334620155e3e78cb8af68f6d1ca890c0ced430
data/Gemfile CHANGED
@@ -3,7 +3,7 @@ source 'https://rubygems.org'
3
3
  # Specify your gem's dependencies in mice.gemspec
4
4
  gemspec
5
5
 
6
- gem "middleman", "~>3.3.2", :require => false
6
+ gem "middleman", "~>3.3.3", :require => false
7
7
 
8
8
  # Live-reloading plugin
9
9
  gem "middleman-livereload", "~> 3.3.3", :require => false
@@ -1,17 +1,18 @@
1
1
  PATH
2
2
  remote: .
3
3
  specs:
4
- mice (0.1.7)
4
+ mice (0.1.9)
5
+ sass (~> 3.2)
5
6
 
6
7
  GEM
7
8
  remote: https://rubygems.org/
8
9
  specs:
9
- activesupport (4.0.5)
10
+ activesupport (4.1.1)
10
11
  i18n (~> 0.6, >= 0.6.9)
11
- minitest (~> 4.2)
12
- multi_json (~> 1.3)
12
+ json (~> 1.7, >= 1.7.7)
13
+ minitest (~> 5.1)
13
14
  thread_safe (~> 0.1)
14
- tzinfo (~> 0.3.37)
15
+ tzinfo (~> 1.1)
15
16
  chunky_png (1.3.1)
16
17
  coffee-script (2.2.0)
17
18
  coffee-script-source
@@ -28,7 +29,7 @@ GEM
28
29
  http_parser.rb (~> 0.6.0)
29
30
  erubis (2.7.0)
30
31
  eventmachine (1.0.3)
31
- execjs (2.0.2)
32
+ execjs (2.1.0)
32
33
  ffi (1.9.3)
33
34
  fssm (0.2.10)
34
35
  haml (4.0.5)
@@ -44,19 +45,19 @@ GEM
44
45
  rb-fsevent (>= 0.9.3)
45
46
  rb-inotify (>= 0.9)
46
47
  rb-kqueue (>= 0.2)
47
- middleman (3.3.2)
48
+ middleman (3.3.3)
48
49
  coffee-script (~> 2.2.0)
49
50
  compass (>= 0.12.4)
50
- compass-import-once (~> 1.0.4)
51
+ compass-import-once (= 1.0.4)
51
52
  execjs (~> 2.0)
52
53
  haml (>= 4.0.5)
53
54
  kramdown (~> 1.2)
54
- middleman-core (= 3.3.2)
55
+ middleman-core (= 3.3.3)
55
56
  middleman-sprockets (>= 3.1.2)
56
57
  sass (>= 3.2.17, < 4.0)
57
58
  uglifier (~> 2.5)
58
- middleman-core (3.3.2)
59
- activesupport (~> 4.0.1)
59
+ middleman-core (3.3.3)
60
+ activesupport (~> 4.1.0)
60
61
  bundler (~> 1.1)
61
62
  erubis
62
63
  hooks (~> 0.3)
@@ -79,13 +80,13 @@ GEM
79
80
  middleman-syntax (2.0.0)
80
81
  middleman-core (~> 3.2)
81
82
  rouge (~> 1.0)
82
- minitest (4.7.5)
83
- multi_json (1.10.0)
84
- padrino-helpers (0.12.1)
83
+ minitest (5.3.4)
84
+ multi_json (1.10.1)
85
+ padrino-helpers (0.12.2)
85
86
  i18n (~> 0.6, >= 0.6.7)
86
- padrino-support (= 0.12.1)
87
+ padrino-support (= 0.12.2)
87
88
  tilt (~> 1.4.1)
88
- padrino-support (0.12.1)
89
+ padrino-support (0.12.2)
89
90
  activesupport (>= 3.1)
90
91
  rack (1.5.2)
91
92
  rack-livereload (0.3.15)
@@ -110,10 +111,11 @@ GEM
110
111
  sprockets (~> 2.0)
111
112
  tilt (~> 1.1)
112
113
  thor (0.19.1)
113
- thread_safe (0.3.3)
114
+ thread_safe (0.3.4)
114
115
  tilt (1.4.1)
115
- tzinfo (0.3.39)
116
- uber (0.0.4)
116
+ tzinfo (1.2.0)
117
+ thread_safe (~> 0.1)
118
+ uber (0.0.6)
117
119
  uglifier (2.5.0)
118
120
  execjs (>= 0.3.0)
119
121
  json (>= 1.8.0)
@@ -124,7 +126,7 @@ PLATFORMS
124
126
  DEPENDENCIES
125
127
  bundler (~> 1.5)
126
128
  mice!
127
- middleman (~> 3.3.2)
129
+ middleman (~> 3.3.3)
128
130
  middleman-livereload (~> 3.3.3)
129
131
  middleman-syntax (~> 2.0.0)
130
132
  tzinfo-data
data/README.md CHANGED
@@ -42,6 +42,8 @@ or
42
42
  */
43
43
  ```
44
44
 
45
+ For mobile
46
+ @import "mice-mobile"
45
47
 
46
48
  ## Contributing
47
49
 
@@ -53,4 +55,4 @@ or
53
55
 
54
56
  ## Copyright and license
55
57
 
56
- Code and documentation copyright 2014 Miclle. Code released under the MIT license. Docs released under Creative Commons.
58
+ Code and documentation copyright 2014 Miclle. Code released under the MIT license. Docs released under Creative Commons.
@@ -1,3 +1,3 @@
1
1
  module Mice
2
- VERSION = "0.1.7"
2
+ VERSION = "0.1.9"
3
3
  end
@@ -2,13 +2,22 @@
2
2
  @import "mice/variables";
3
3
  @import "mice/mixins";
4
4
 
5
- // Reset and dependencies
6
5
  @import "mice/normalize";
7
-
6
+ @import "mice/typography";
7
+ @import "mice/buttons";
8
8
  @import "mice/icons";
9
9
 
10
10
  // Components
11
+ @import "mice/lists";
11
12
  @import "mice/media";
13
+ @import "mice/labels";
14
+ @import "mice/panels";
15
+
16
+ @import "mice/utilities";
17
+
18
+ // Base CSS
19
+ @import "mobile/variables";
20
+ @import "mobile/base";
21
+ @import "mobile/bars";
12
22
 
13
- // Variables
14
- @import "mobile/variables";
23
+ @import "mice/forms";
@@ -23,6 +23,7 @@
23
23
  @import "mice/tables";
24
24
 
25
25
  // Components
26
+ @import "mice/panels";
26
27
  @import "mice/media";
27
28
  @import "mice/labels";
28
29
  @import "mice/timeline";
@@ -38,9 +38,7 @@
38
38
  @mixin field-variant($border-color){
39
39
  color: $border-color;
40
40
 
41
- input[type="text"],
42
- input[type="password"],
43
- input[type="email"],
41
+ input:not([type~=checkbox]):not([type~=radio]):not([type~=file]):not([type~=button]):not([type~=submit]),
44
42
  textarea,
45
43
  select{
46
44
  @include input-variant($border-color);
@@ -69,9 +67,7 @@ fieldset {
69
67
  min-width: 0;
70
68
 
71
69
  &[disabled]{
72
- input[type="text"],
73
- input[type="password"],
74
- input[type="email"],
70
+ input:not([type~=checkbox]):not([type~=radio]):not([type~=file]):not([type~=button]):not([type~=submit]),
75
71
  textarea,
76
72
  select,
77
73
  button{
@@ -88,9 +84,7 @@ fieldset {
88
84
  }
89
85
  }
90
86
 
91
- input[type="text"],
92
- input[type="password"],
93
- input[type="email"],
87
+ input:not([type~=checkbox]):not([type~=radio]):not([type~=file]):not([type~=button]):not([type~=submit]),
94
88
  textarea,
95
89
  select{
96
90
  display: inline-block;
@@ -118,7 +112,6 @@ select{
118
112
  }
119
113
  }
120
114
 
121
-
122
115
  textarea{
123
116
  display: block;
124
117
  line-height: 20px;
@@ -136,12 +129,11 @@ label{
136
129
  margin-bottom: 2px;
137
130
  }
138
131
 
132
+
139
133
  // Input Styles
140
134
  // -------------------------
141
135
 
142
- input[type="text"],
143
- input[type="password"],
144
- input[type="email"],
136
+ input:not([type~=checkbox]):not([type~=radio]):not([type~=file]):not([type~=button]):not([type~=submit]),
145
137
  textarea{
146
138
  @include input-variant($border-color-default);
147
139
  &.primary{@include input-variant($border-color-primary);}
@@ -156,9 +148,7 @@ textarea{
156
148
 
157
149
  // Input Sizing
158
150
  // -------------------------
159
- input[type="text"],
160
- input[type="password"],
161
- input[type="email"],
151
+ input:not([type~=checkbox]):not([type~=radio]):not([type~=file]):not([type~=button]):not([type~=submit]),
162
152
  textarea{
163
153
  @include input-size($input-height-default, $input-padding-default-vertical, $input-padding-default-horizontal, $font-size-base, $line-height-base, $border-radius);
164
154
  &.small {@include input-size($input-height-small, $input-padding-small-vertical, $input-padding-small-horizontal, $font-size-small, $line-height-small, $border-radius-small);}
@@ -187,9 +177,7 @@ textarea{
187
177
  }
188
178
  }
189
179
 
190
- input[type="text"],
191
- input[type="password"],
192
- input[type="email"],
180
+ input:not([type~=checkbox]):not([type~=radio]):not([type~=button]),
193
181
  select,
194
182
  textarea{
195
183
  width: 100%;
@@ -202,9 +190,7 @@ textarea{
202
190
  &.feedback{
203
191
  position: relative;
204
192
 
205
- input[type="text"],
206
- input[type="password"],
207
- input[type="email"],
193
+ input:not([type~=checkbox]):not([type~=radio]):not([type~=file]):not([type~=button]):not([type~=submit]),
208
194
  select,
209
195
  textarea{
210
196
  padding-right: 50px;
@@ -223,6 +209,7 @@ textarea{
223
209
  }
224
210
  }
225
211
 
212
+
226
213
  // Inline form
227
214
  // -------------------------
228
215
  .navbar form,
@@ -232,8 +219,7 @@ form.inline{
232
219
  margin-bottom: 0;
233
220
  vertical-align: middle;
234
221
 
235
- input[type="text"],
236
- input[type="password"],
222
+ input:not([type~=checkbox]):not([type~=radio]):not([type~=file]):not([type~=button]):not([type~=submit]),
237
223
  input[type="email"]{
238
224
  width: auto;
239
225
  }
@@ -250,6 +236,14 @@ form.inline{
250
236
  }
251
237
  }
252
238
 
239
+ .inline{
240
+ input:not([type~=checkbox]):not([type~=radio]):not([type~=file]):not([type~=button]):not([type~=submit]),
241
+ input[type="email"]{
242
+ width: auto;
243
+ }
244
+ }
245
+
246
+
253
247
  // Horizontal Form
254
248
  // -------------------------
255
249
  form.horizontal{
@@ -299,6 +293,27 @@ form.horizontal{
299
293
  }
300
294
 
301
295
 
296
+ // Input justified
297
+ .justified{
298
+ display: table;
299
+ width: 100%;
300
+ table-layout: fixed;
301
+ border-collapse: separate;
302
+
303
+ &:before, &:after{ display: none; }
304
+
305
+ .field{
306
+ float: none;
307
+ display: table-cell;
308
+ width: 1%;
309
+ padding: 0 5px;
310
+ &:first-child{ padding-left: 0; }
311
+ &:last-child{ padding-right: 0; }
312
+ input:not([type~=checkbox]):not([type~=radio]):not([type~=file]):not([type~=button]){
313
+ width: 100%;
314
+ }
315
+ }
316
+ }
302
317
 
303
318
 
304
319
 
@@ -67,9 +67,11 @@ $columns: "two", "three", "four", "five", "six", "seven", "eight", "nine", "ten"
67
67
  @for $i from 1 through length($columns) {
68
68
  .grid.#{nth($columns, $i)} {
69
69
  @include column-child($i + 1);
70
- @for $j from 1 through $i - 1 {
71
- > .#{nth($columns, $j)}{
72
- @include column-self($i + 1, $j + 1);
70
+ @if $i - 1 > 0 {
71
+ @for $j from 1 through $i - 1 {
72
+ > .#{nth($columns, $j)}{
73
+ @include column-self($i + 1, $j + 1);
74
+ }
73
75
  }
74
76
  }
75
77
  }
@@ -42,13 +42,13 @@ ol {
42
42
  }
43
43
 
44
44
  // List options
45
- .unstyled {
45
+ ul.unstyled {
46
46
  padding-left: 0;
47
47
  list-style: none;
48
48
  }
49
49
 
50
50
  // Inline
51
- .inline {
51
+ ul.inline {
52
52
  @extend .unstyled;
53
53
  margin-left: -5px;
54
54
 
@@ -63,21 +63,14 @@ ol {
63
63
  dl {
64
64
  margin-top: 0;
65
65
  margin-bottom: $line-height-computed;
66
- }
67
- dt,
68
- dd {
69
- line-height: $line-height-base;
70
- }
71
- dt {
72
- font-weight: bold;
73
- }
74
- dd {
75
- margin-left: 0;
66
+ dt,
67
+ dd { line-height: $line-height-base; }
68
+ dt { font-weight: bold; }
69
+ dd { margin-left: 0; }
76
70
  }
77
71
 
78
72
  // Horizontal description lists
79
-
80
- .horizontal {
73
+ dl.horizontal {
81
74
  dt{
82
75
  float: left;
83
76
  width: 160px;
@@ -101,7 +94,7 @@ dd {
101
94
  // Base class
102
95
  // Easily usable on <ul>, <ol>, <div> or <section>.
103
96
  ul, ol, div, section{
104
- .group {
97
+ &.group {
105
98
  margin-bottom: 20px;
106
99
  padding-left: 0;
107
100
 
@@ -0,0 +1,236 @@
1
+ //
2
+ // Panels
3
+ // --------------------------------------------------
4
+
5
+
6
+ // Panels
7
+ @mixin panel-variant($border, $heading-text-color, $heading-bg-color, $heading-border) {
8
+ border-color: $border;
9
+
10
+ & > .heading {
11
+ color: $heading-text-color;
12
+ background-color: $heading-bg-color;
13
+ border-color: $heading-border;
14
+ }
15
+ & > .footer {
16
+ + .collapse > .body {
17
+ border-bottom-color: $border;
18
+ }
19
+ }
20
+ }
21
+
22
+
23
+ // Base class
24
+ .panel {
25
+ margin-bottom: $line-height-computed;
26
+ background-color: $panel-bg;
27
+ border: 1px solid transparent;
28
+ border-radius: $panel-border-radius;
29
+ @include box-shadow(0 1px 1px rgba(0,0,0,.05));
30
+
31
+ // Panel contents
32
+ > .body {
33
+ padding: $panel-body-padding;
34
+ @include clearfix();
35
+ *:last-child{
36
+ margin-bottom: 0;
37
+ }
38
+ }
39
+
40
+ // Optional heading
41
+ > .heading {
42
+ padding: $panel-heading-padding;
43
+ border-bottom: 1px solid transparent;
44
+ @include border-top-radius(($panel-border-radius - 1));
45
+
46
+ // Within heading, strip any `h*` tag of its default margins for spacing.
47
+ h1,h2,h3,h4,h5,h6{
48
+ margin: 0;
49
+ padding: 0;
50
+ font-size: ceil(($font-size-base * 1.125));
51
+ color: inherit;
52
+ border-bottom: none;
53
+
54
+ > a {
55
+ color: inherit;
56
+ }
57
+ }
58
+ }
59
+
60
+ // Optional footer (stays gray in every modifier class)
61
+ > .footer {
62
+ padding: $panel-footer-padding;
63
+ background-color: $panel-footer-bg;
64
+ border-top: 1px solid $panel-inner-border;
65
+ @include border-bottom-radius(($panel-border-radius - 1));
66
+ }
67
+ }
68
+
69
+
70
+ // List groups in panels
71
+ //
72
+ // By default, space out list group content from panel headings to account for
73
+ // any kind of custom content between the two.
74
+
75
+ .panel {
76
+ > .group {
77
+ margin-bottom: 0;
78
+
79
+ > li,
80
+ > a,
81
+ .item {
82
+ border-width: 1px 0;
83
+ border-radius: 0;
84
+ }
85
+
86
+ // Add border top radius for first one
87
+ &:first-child {
88
+ > li:first-child,
89
+ > a:first-child,
90
+ .item:first-child {
91
+ border-top: 0;
92
+ @include border-top-radius(($panel-border-radius - 1));
93
+ }
94
+ }
95
+ // Add border bottom radius for last one
96
+ &:last-child {
97
+ > li:last-child,
98
+ > a:last-child,
99
+ .item:last-child {
100
+ border-bottom: 0;
101
+ @include border-bottom-radius(($panel-border-radius - 1));
102
+ }
103
+ }
104
+ }
105
+ }
106
+
107
+ // Collapse space between when there's no additional content.
108
+ .panel{
109
+ .heading + .list-group {
110
+ > li:first-child,
111
+ > a:first-child,
112
+ .item:first-child {
113
+ border-top-width: 0;
114
+ }
115
+ }
116
+ }
117
+
118
+
119
+ // Tables in panels
120
+ //
121
+ // Place a non-bordered `table` within a panel (not within a `.panel-body`) and
122
+ // watch it go full width.
123
+
124
+ .panel {
125
+ > table,
126
+ > table.responsive > table {
127
+ margin-bottom: 0;
128
+ }
129
+ // Add border top radius for first one
130
+ > table:first-child,
131
+ > table.responsive:first-child > table:first-child {
132
+ @include border-top-radius(($panel-border-radius - 1));
133
+
134
+ > thead:first-child,
135
+ > tbody:first-child {
136
+ > tr:first-child {
137
+ td:first-child,
138
+ th:first-child {
139
+ border-top-left-radius: ($panel-border-radius - 1);
140
+ }
141
+ td:last-child,
142
+ th:last-child {
143
+ border-top-right-radius: ($panel-border-radius - 1);
144
+ }
145
+ }
146
+ }
147
+ }
148
+ // Add border bottom radius for last one
149
+ > table:last-child,
150
+ > table.responsive:last-child > table:last-child {
151
+ @include border-bottom-radius(($panel-border-radius - 1));
152
+
153
+ > tbody:last-child,
154
+ > tfoot:last-child {
155
+ > tr:last-child {
156
+ td:first-child,
157
+ th:first-child {
158
+ border-bottom-left-radius: ($panel-border-radius - 1);
159
+ }
160
+ td:last-child,
161
+ th:last-child {
162
+ border-bottom-right-radius: ($panel-border-radius - 1);
163
+ }
164
+ }
165
+ }
166
+ }
167
+ > .body + table,
168
+ > .body + table.responsive {
169
+ border-top: 1px solid $table-border-color;
170
+ }
171
+ > table > tbody:first-child > tr:first-child th,
172
+ > table > tbody:first-child > tr:first-child td {
173
+ border-top: 0;
174
+ }
175
+ > table-bordered,
176
+ > table.responsive > table-bordered {
177
+ border: 0;
178
+ > thead,
179
+ > tbody,
180
+ > tfoot {
181
+ > tr {
182
+ > th:first-child,
183
+ > td:first-child {
184
+ border-left: 0;
185
+ }
186
+ > th:last-child,
187
+ > td:last-child {
188
+ border-right: 0;
189
+ }
190
+ }
191
+ }
192
+ > thead,
193
+ > tbody {
194
+ > tr:first-child {
195
+ > td,
196
+ > th {
197
+ border-bottom: 0;
198
+ }
199
+ }
200
+ }
201
+ > tbody,
202
+ > tfoot {
203
+ > tr:last-child {
204
+ > td,
205
+ > th {
206
+ border-bottom: 0;
207
+ }
208
+ }
209
+ }
210
+ }
211
+ > table.responsive {
212
+ border: 0;
213
+ margin-bottom: 0;
214
+ }
215
+ }
216
+
217
+
218
+ // Contextual variations
219
+ .panel {
220
+ @include panel-variant($panel-default-border, $panel-default-text, $panel-default-heading-bg, $panel-default-border);
221
+ }
222
+ .panel.primary {
223
+ @include panel-variant($panel-primary-border, $panel-primary-text, $panel-primary-heading-bg, $panel-primary-border);
224
+ }
225
+ .panel.success {
226
+ @include panel-variant($panel-success-border, $panel-success-text, $panel-success-heading-bg, $panel-success-border);
227
+ }
228
+ .panel.info {
229
+ @include panel-variant($panel-info-border, $panel-info-text, $panel-info-heading-bg, $panel-info-border);
230
+ }
231
+ .panel.warning {
232
+ @include panel-variant($panel-warning-border, $panel-warning-text, $panel-warning-heading-bg, $panel-warning-border);
233
+ }
234
+ .panel.danger {
235
+ @include panel-variant($panel-danger-border, $panel-danger-text, $panel-danger-heading-bg, $panel-danger-border);
236
+ }
@@ -94,4 +94,8 @@ hr {
94
94
  border-top: 1px solid #EEE;
95
95
  -moz-box-sizing: content-box;
96
96
  box-sizing: content-box;
97
- }
97
+
98
+ &.dotted{ border-top: 1px dotted #EEE;}
99
+ &.dashed{ border-top: 1px dashed #EEE;}
100
+ &.double{ border-top: 1px double #EEE;}
101
+ }
@@ -287,5 +287,42 @@ $timeline-large-font-size: 24px !default;
287
287
  $timeline-large-border: 4px !default;
288
288
 
289
289
 
290
+ //== Panels
291
+ //
292
+ //##
293
+
294
+ $panel-bg: #fff !default;
295
+ $panel-body-padding: 15px !default;
296
+ $panel-heading-padding: 10px 15px !default;
297
+ $panel-footer-padding: $panel-heading-padding !default;
298
+ $panel-border-radius: $border-radius !default;
299
+
300
+ //** Border color for elements within panels
301
+ $panel-inner-border: #ddd !default;
302
+ $panel-footer-bg: #f5f5f5 !default;
303
+
304
+ $panel-default-text: $gray-dark !default;
305
+ $panel-default-border: #ddd !default;
306
+ $panel-default-heading-bg: #f5f5f5 !default;
307
+
308
+ $panel-primary-text: #fff !default;
309
+ $panel-primary-border: $brand-primary !default;
310
+ $panel-primary-heading-bg: $brand-primary !default;
311
+
312
+ $panel-success-text: $state-success-text !default;
313
+ $panel-success-border: $state-success-border !default;
314
+ $panel-success-heading-bg: $state-success-background !default;
315
+
316
+ $panel-info-text: $state-info-text !default;
317
+ $panel-info-border: $state-info-border !default;
318
+ $panel-info-heading-bg: $state-info-background !default;
319
+
320
+ $panel-warning-text: $state-warning-text !default;
321
+ $panel-warning-border: $state-warning-border !default;
322
+ $panel-warning-heading-bg: $state-warning-background !default;
323
+
324
+ $panel-danger-text: $state-danger-text !default;
325
+ $panel-danger-border: $state-danger-border !default;
326
+ $panel-danger-heading-bg: $state-danger-background !default;
290
327
 
291
328
 
@@ -2,12 +2,62 @@
2
2
  // Bars
3
3
  // --------------------------------------------------
4
4
 
5
- .bar {
5
+ nav{
6
6
  position: fixed;
7
7
  right: 0;
8
8
  left: 0;
9
+ z-index: 10;
10
+ height: $bar-base-height;
11
+ padding-right: $bar-side-spacing;
12
+ padding-left: $bar-side-spacing;
13
+ background-color: $background;
14
+ border-bottom: $border-default;
15
+ -webkit-backface-visibility: hidden; // Make sure the bar is visible when a modal animates in.
16
+ backface-visibility: hidden;
9
17
  }
10
18
 
11
19
  // Nav bar
12
20
  // --------------------------------------------------
13
- // TODO
21
+ nav.tab {
22
+ display: table;
23
+ bottom: 0;
24
+ width: 100%;
25
+ height: $bar-tab-height;
26
+ padding: 0;
27
+ table-layout: fixed;
28
+ border-top: $border-default;
29
+ border-bottom: 0;
30
+
31
+ > a{
32
+ display: table-cell;
33
+ width: 1%;
34
+ height: $bar-tab-height;
35
+ color: #929292;
36
+ text-align: center;
37
+ vertical-align: middle;
38
+ text-decoration: none;
39
+
40
+ // Active states for the tab bar
41
+ &.active,
42
+ &:active {
43
+ color: $primary-color;
44
+ }
45
+
46
+ // Tab icon
47
+ .icon {
48
+ top: 3px;
49
+ width: 24px;
50
+ height: 24px;
51
+ padding-top: 0;
52
+ padding-bottom: 0;
53
+
54
+ // Make the text smaller if it's used with an icon
55
+ ~ .label {
56
+ display: block;
57
+ font-size: 11px;
58
+ }
59
+ }
60
+
61
+ }
62
+
63
+ }
@@ -0,0 +1,52 @@
1
+ //
2
+ // Base styles
3
+ // --------------------------------------------------
4
+
5
+ // Reset the box-sizing
6
+ * {
7
+ @include box-sizing(border-box);
8
+ }
9
+
10
+ *:before,
11
+ *:after {
12
+ @include box-sizing(border-box);
13
+ }
14
+
15
+ body {
16
+ font-size: 16px;
17
+ position: relative;
18
+ font-family: $font-family-default;
19
+ font-size: $font-size-default;
20
+ line-height: $line-height-default;
21
+ color: #333;
22
+ background-color: #fff;
23
+ }
24
+
25
+ // Universal link styling
26
+ a {
27
+ color: $primary-color;
28
+ text-decoration: none;
29
+ -webkit-tap-highlight-color: rgba(0,0,0,0); // Removes the dark touch outlines on links in webkit browsers.
30
+
31
+ &:active {
32
+ color: darken($primary-color, 10%);
33
+ }
34
+ }
35
+
36
+ .content {
37
+ position: relative;
38
+ margin: $bar-side-spacing;
39
+ }
40
+
41
+
42
+ hr {
43
+ margin: 20px 0;
44
+ border: 0;
45
+ border-top: 1px solid #EEE;
46
+ -moz-box-sizing: content-box;
47
+ box-sizing: content-box;
48
+
49
+ &.dotted{ border-top: 1px dotted #EEE;}
50
+ &.dashed{ border-top: 1px dashed #EEE;}
51
+ &.double{ border-top: 1px double #EEE;}
52
+ }
@@ -2,4 +2,36 @@
2
2
  // Variables
3
3
  // --------------------------------------------------
4
4
 
5
- // TODO
5
+
6
+ // Type
7
+ // --------------------------------------------------
8
+ $font-family-default: "Helvetica Neue", Helvetica, sans-serif !default;
9
+ $font-size-default: 17px !default;
10
+ $font-weight: 500 !default;
11
+ $font-weight-light: 400 !default;
12
+ $line-height-default: 21px !default;
13
+
14
+
15
+ // Colors
16
+ // --------------------------------------------------
17
+ // Main theme colors
18
+ $primary-color: #428bca !default;
19
+ $background: #fff !default;
20
+
21
+ // Action colors
22
+ $default-color: #fff !default;
23
+ $positive-color: #5cb85c !default;
24
+ $negative-color: #d9534f !default;
25
+
26
+
27
+ // Bars
28
+ // --------------------------------------------------
29
+ $bar-base-height: 44px !default;
30
+ $bar-tab-height: 50px !default;
31
+ $bar-side-spacing: 10px !default;
32
+
33
+
34
+ // Borders
35
+ // --------------------------------------------------
36
+ $border-default: 1px solid #ddd !default;
37
+ $border-radius: 6px !default;
metadata CHANGED
@@ -1,15 +1,29 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: mice
3
3
  version: !ruby/object:Gem::Version
4
- version: 0.1.7
4
+ version: 0.1.9
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-27 00:00:00.000000000 Z
11
+ date: 2014-06-04 00:00:00.000000000 Z
12
12
  dependencies:
13
+ - !ruby/object:Gem::Dependency
14
+ name: sass
15
+ requirement: !ruby/object:Gem::Requirement
16
+ requirements:
17
+ - - "~>"
18
+ - !ruby/object:Gem::Version
19
+ version: '3.2'
20
+ type: :runtime
21
+ prerelease: false
22
+ version_requirements: !ruby/object:Gem::Requirement
23
+ requirements:
24
+ - - "~>"
25
+ - !ruby/object:Gem::Version
26
+ version: '3.2'
13
27
  - !ruby/object:Gem::Dependency
14
28
  name: bundler
15
29
  requirement: !ruby/object:Gem::Requirement
@@ -69,6 +83,7 @@ files:
69
83
  - vendor/assets/stylesheets/mice/_mixins.scss
70
84
  - vendor/assets/stylesheets/mice/_navbar.scss
71
85
  - vendor/assets/stylesheets/mice/_normalize.scss
86
+ - vendor/assets/stylesheets/mice/_panels.scss
72
87
  - vendor/assets/stylesheets/mice/_scaffolding.scss
73
88
  - vendor/assets/stylesheets/mice/_sidebar.scss
74
89
  - vendor/assets/stylesheets/mice/_tables.scss
@@ -77,6 +92,7 @@ files:
77
92
  - vendor/assets/stylesheets/mice/_utilities.scss
78
93
  - vendor/assets/stylesheets/mice/_variables.scss
79
94
  - vendor/assets/stylesheets/mobile/bars.scss
95
+ - vendor/assets/stylesheets/mobile/base.scss
80
96
  - vendor/assets/stylesheets/mobile/cards.scss
81
97
  - vendor/assets/stylesheets/mobile/variables.scss
82
98
  homepage: https://github.com/miclle/mice