mice 0.0.6 → 0.0.7
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 +4 -4
- data/Gemfile.lock +1 -1
- data/lib/mice/version.rb +1 -1
- data/vendor/assets/stylesheets/mice/_buttons.scss +196 -0
- data/vendor/assets/stylesheets/mice/_menu.scss +42 -32
- data/vendor/assets/stylesheets/mice/_mixins.scss +32 -0
- data/vendor/assets/stylesheets/mice/_scaffolding.scss +21 -0
- data/vendor/assets/stylesheets/mice/_variables.scss +69 -4
- data/vendor/assets/stylesheets/mice.scss +1 -0
- metadata +3 -2
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA1:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 74d0f0bbf2aa99724b376bc3905aac85069bc499
|
4
|
+
data.tar.gz: eb7ba6a3352e5eefd74e5cc30025d9c437c68acc
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 3d570fa67fa85ee74622e41bc2c372dfa34be9df3681d8416c2184f8142a150bd4e37dd28162132385222d0b09f3e9d18273b556aff9365c95e911bde78bb73e
|
7
|
+
data.tar.gz: ef6179f7b0e6a3793255aff30fd3fb4c0e6134d57bb5d705e30594775d1d95724ca4dc80ef70475391ded70d7abd18a25cfd5dcea59b99e032e036f9058ca0c2
|
data/Gemfile.lock
CHANGED
data/lib/mice/version.rb
CHANGED
@@ -0,0 +1,196 @@
|
|
1
|
+
// Button
|
2
|
+
// --------------------------------------------------
|
3
|
+
|
4
|
+
// Button variants
|
5
|
+
//
|
6
|
+
// Easily pump out default styles, as well as :hover, :focus, :active,
|
7
|
+
// and disabled options for all buttons
|
8
|
+
|
9
|
+
@mixin button-variant($color, $background, $border) {
|
10
|
+
color: $color;
|
11
|
+
background-color: $background;
|
12
|
+
border-color: $border;
|
13
|
+
|
14
|
+
&:hover{
|
15
|
+
color: $color;
|
16
|
+
background-color: darken($background, 10%);
|
17
|
+
border-color: darken($border, 10%);
|
18
|
+
}
|
19
|
+
|
20
|
+
&:active,
|
21
|
+
&.active{
|
22
|
+
color: $color;
|
23
|
+
background-color: darken($background, 15%);
|
24
|
+
border-color: darken($border, 15%);
|
25
|
+
}
|
26
|
+
|
27
|
+
&.disabled,
|
28
|
+
&[disabled] {
|
29
|
+
&,
|
30
|
+
&:hover,
|
31
|
+
&:active,
|
32
|
+
&.active {
|
33
|
+
background-color: $background;
|
34
|
+
border-color: $border;
|
35
|
+
}
|
36
|
+
}
|
37
|
+
}
|
38
|
+
|
39
|
+
// Button sizes
|
40
|
+
@mixin button-size($padding-vertical, $padding-horizontal, $font-size, $line-height) {
|
41
|
+
padding: $padding-vertical $padding-horizontal;
|
42
|
+
font-size: $font-size;
|
43
|
+
line-height: $line-height;
|
44
|
+
}
|
45
|
+
|
46
|
+
|
47
|
+
// Base styles
|
48
|
+
// -------------------------
|
49
|
+
|
50
|
+
button, .button{
|
51
|
+
display: inline-block;
|
52
|
+
margin-bottom: 0;
|
53
|
+
font-weight: $button-font-weight;
|
54
|
+
text-align: center;
|
55
|
+
vertical-align: middle;
|
56
|
+
cursor: pointer;
|
57
|
+
|
58
|
+
background-image: none;
|
59
|
+
border: none;
|
60
|
+
white-space: nowrap;
|
61
|
+
outline: none;
|
62
|
+
|
63
|
+
position: relative;
|
64
|
+
|
65
|
+
@include box-shadow(0 -2px 0 rgba(0, 0, 0, 0.15) inset);
|
66
|
+
|
67
|
+
@include button-size($padding-base-vertical, $padding-base-horizontal, $font-size-base, $line-height-base);
|
68
|
+
@include user-select(none);
|
69
|
+
|
70
|
+
&:hover,
|
71
|
+
&:focus {
|
72
|
+
color: $button-default-color;
|
73
|
+
text-decoration: none;
|
74
|
+
}
|
75
|
+
|
76
|
+
&:active,
|
77
|
+
&.active {
|
78
|
+
@include box-shadow(inset 0 3px 5px rgba(0, 0, 0, .125));
|
79
|
+
}
|
80
|
+
|
81
|
+
&.disabled,
|
82
|
+
&[disabled] {
|
83
|
+
cursor: not-allowed;
|
84
|
+
pointer-events: none; // Future-proof disabling of clicks
|
85
|
+
@include opacity(.65);
|
86
|
+
}
|
87
|
+
}
|
88
|
+
|
89
|
+
|
90
|
+
// Button Styles
|
91
|
+
// -------------------------
|
92
|
+
|
93
|
+
button, .button{
|
94
|
+
@include button-variant($button-default-color, $button-default-background, $button-default-border);
|
95
|
+
&.primary{ @include button-variant($button-primary-color, $button-primary-background, $button-primary-border); }
|
96
|
+
&.success{ @include button-variant($button-success-color, $button-success-background, $button-success-border); }
|
97
|
+
&.info { @include button-variant($button-info-color, $button-info-background, $button-info-border); }
|
98
|
+
&.warning{ @include button-variant($button-warning-color, $button-warning-background, $button-warning-border); }
|
99
|
+
&.danger { @include button-variant($button-danger-color, $button-danger-background, $button-danger-border); }
|
100
|
+
}
|
101
|
+
|
102
|
+
|
103
|
+
// Button Sizing
|
104
|
+
// -------------------------
|
105
|
+
|
106
|
+
button, .button{
|
107
|
+
&.mini {@include button-size($padding-mini-vertical, $padding-mini-horizontal, $font-size-mini, $line-height-mini);}
|
108
|
+
&.small {@include button-size($padding-small-vertical, $padding-small-horizontal, $font-size-small, $line-height-small);}
|
109
|
+
&.large {@include button-size($padding-large-vertical, $padding-large-horizontal, $font-size-large, $line-height-large);}
|
110
|
+
}
|
111
|
+
|
112
|
+
// Block Button
|
113
|
+
// -------------------------
|
114
|
+
|
115
|
+
button, .button{
|
116
|
+
&.block{
|
117
|
+
display: block;
|
118
|
+
width: 100%;
|
119
|
+
padding-left: 0;
|
120
|
+
padding-right: 0;
|
121
|
+
}
|
122
|
+
}
|
123
|
+
|
124
|
+
|
125
|
+
// Group Buttons
|
126
|
+
// --------------------------------------------------
|
127
|
+
|
128
|
+
.buttons{
|
129
|
+
@include clearfix();
|
130
|
+
display: inline-block;
|
131
|
+
vertical-align: middle;
|
132
|
+
|
133
|
+
button, .button{
|
134
|
+
float: left;
|
135
|
+
|
136
|
+
&:after{
|
137
|
+
display: block;
|
138
|
+
content: " ";
|
139
|
+
position: absolute;
|
140
|
+
top: 0;
|
141
|
+
right: -0.5px;
|
142
|
+
width: 1px;
|
143
|
+
height: 100%;
|
144
|
+
z-index: 1;
|
145
|
+
border-right: 1px solid rgba(0, 0, 0, 0.15);
|
146
|
+
}
|
147
|
+
|
148
|
+
&:last-child{
|
149
|
+
&:after{ display: none; }
|
150
|
+
}
|
151
|
+
}
|
152
|
+
}
|
153
|
+
|
154
|
+
// Vertical Group Buttons
|
155
|
+
// ------------------------
|
156
|
+
.buttons.vertical{
|
157
|
+
@include clearfix();
|
158
|
+
display: inline-block;
|
159
|
+
|
160
|
+
button, .button{
|
161
|
+
display: block;
|
162
|
+
float: none;
|
163
|
+
width: 100%;
|
164
|
+
|
165
|
+
@include box-shadow(0 -1px 0 rgba(0, 0, 0, 0.15) inset);
|
166
|
+
|
167
|
+
&:after{ display: none; }
|
168
|
+
}
|
169
|
+
}
|
170
|
+
|
171
|
+
// Justified Group Buttons
|
172
|
+
// ------------------------
|
173
|
+
.buttons.justified{
|
174
|
+
display: table;
|
175
|
+
width: 100%;
|
176
|
+
table-layout: fixed;
|
177
|
+
border-collapse: separate;
|
178
|
+
position: relative;
|
179
|
+
|
180
|
+
&:before, &:after{ display: none; }
|
181
|
+
|
182
|
+
> .buttons, .button{
|
183
|
+
float: none;
|
184
|
+
display: table-cell;
|
185
|
+
width: 1%;
|
186
|
+
position: relative;
|
187
|
+
}
|
188
|
+
> .buttons button{
|
189
|
+
width: 100%;
|
190
|
+
border-right: 1px solid rgba(0, 0, 0, 0.15);
|
191
|
+
}
|
192
|
+
> .buttons:last-child button{
|
193
|
+
border-right: none;
|
194
|
+
}
|
195
|
+
|
196
|
+
}
|
@@ -4,14 +4,18 @@
|
|
4
4
|
|
5
5
|
.navbar{
|
6
6
|
min-height: 45px;
|
7
|
-
background: #
|
7
|
+
background: #FFF;
|
8
|
+
border-bottom: 1px solid #E8E8E8;
|
8
9
|
|
9
10
|
.logo{
|
10
11
|
float: left;
|
11
12
|
.brand{
|
12
13
|
display: block;
|
13
|
-
|
14
|
-
|
14
|
+
line-height: 45px;
|
15
|
+
padding: 0;
|
16
|
+
color: #666;
|
17
|
+
text-decoration: none;
|
18
|
+
font-weight: 700;
|
15
19
|
}
|
16
20
|
}
|
17
21
|
|
@@ -31,46 +35,52 @@
|
|
31
35
|
|
32
36
|
> a{
|
33
37
|
display: block;
|
34
|
-
|
38
|
+
line-height: 45px;
|
39
|
+
padding: 0 20px;
|
35
40
|
position: relative;
|
36
41
|
text-decoration: none;
|
37
|
-
color: #
|
42
|
+
color: #666;
|
43
|
+
position: relative;
|
44
|
+
text-align: center;
|
38
45
|
|
39
|
-
|
40
|
-
|
41
|
-
position: absolute;
|
42
|
-
top: 0;
|
43
|
-
left: 0;
|
44
|
-
height: 100%;
|
45
|
-
border-right: solid 1px #4E4E4E;
|
46
|
-
}
|
46
|
+
-webkit-transition: padding 0.25s ease, color 0.25s ease, background-color 0.25s ease, box-shadow 0.25s ease;
|
47
|
+
transition: padding 0.25s ease, color 0.25s ease, background-color 0.25s ease, box-shadow 0.25s ease;
|
47
48
|
|
48
|
-
&:
|
49
|
-
|
50
|
-
|
49
|
+
&:after{
|
50
|
+
display: block;
|
51
|
+
margin: 0 auto;
|
52
|
+
content: '';
|
53
|
+
position: absolute;
|
54
|
+
left: 0;
|
55
|
+
bottom: -1px;
|
56
|
+
height: 0;
|
57
|
+
width: 100%;
|
58
|
+
|
59
|
+
-webkit-transition: height 0.15s ease;
|
60
|
+
transition: height 0.15s ease;
|
61
|
+
}
|
51
62
|
|
52
|
-
|
53
|
-
|
54
|
-
|
55
|
-
|
56
|
-
|
57
|
-
|
58
|
-
|
63
|
+
&:hover {
|
64
|
+
color: #428BCA;
|
65
|
+
background: #F5F5F5;
|
66
|
+
&:after{
|
67
|
+
height: 3px;
|
68
|
+
background-color: #428BCA;
|
69
|
+
}
|
70
|
+
}
|
71
|
+
&:active{ background: #F0F0F0; }
|
59
72
|
}
|
60
73
|
|
61
74
|
&.active{
|
62
75
|
a{
|
63
|
-
|
64
|
-
|
76
|
+
color: #428BCA;
|
77
|
+
background: #F5F5F5;
|
78
|
+
font-weight: 700;
|
65
79
|
|
66
|
-
&:
|
67
|
-
|
80
|
+
&:after{
|
81
|
+
height: 3px;
|
82
|
+
background-color: #428BCA;
|
68
83
|
}
|
69
|
-
&:hover { background: #2F9CF3; }
|
70
|
-
&:active{ background: #0380E8; }
|
71
|
-
}
|
72
|
-
& + li a:before {
|
73
|
-
display: none;
|
74
84
|
}
|
75
85
|
}
|
76
86
|
}
|
@@ -26,3 +26,35 @@
|
|
26
26
|
-moz-box-sizing: $boxmodel;
|
27
27
|
box-sizing: $boxmodel;
|
28
28
|
}
|
29
|
+
|
30
|
+
|
31
|
+
// User select
|
32
|
+
// For selecting text on the page
|
33
|
+
|
34
|
+
@mixin user-select($select) {
|
35
|
+
-webkit-user-select: $select;
|
36
|
+
-moz-user-select: $select;
|
37
|
+
-ms-user-select: $select; // IE10+
|
38
|
+
user-select: $select;
|
39
|
+
}
|
40
|
+
|
41
|
+
|
42
|
+
// Opacity
|
43
|
+
|
44
|
+
@mixin opacity($opacity) {
|
45
|
+
opacity: $opacity;
|
46
|
+
// IE8 filter
|
47
|
+
$opacity-ie: ($opacity * 100);
|
48
|
+
filter: #{alpha(opacity=$opacity-ie)};
|
49
|
+
}
|
50
|
+
|
51
|
+
|
52
|
+
// Drop shadows
|
53
|
+
//
|
54
|
+
// Note: Deprecated `.box-shadow()` as of v3.1.0 since all of Bootstrap's
|
55
|
+
// supported browsers that have box shadow capabilities now support it.
|
56
|
+
|
57
|
+
@mixin box-shadow($shadow...) {
|
58
|
+
-webkit-box-shadow: $shadow; // iOS <4.3 & Android <4.1
|
59
|
+
box-shadow: $shadow;
|
60
|
+
}
|
@@ -72,3 +72,24 @@ a {
|
|
72
72
|
img {
|
73
73
|
vertical-align: middle;
|
74
74
|
}
|
75
|
+
|
76
|
+
.shake {
|
77
|
+
-webkit-transform-origin: center center 0 50%;
|
78
|
+
-moz-transform-origin: center center 0 50%;
|
79
|
+
-ms-transform-origin: center center 0 50%;
|
80
|
+
-o-transform-origin: center center 0 50%;
|
81
|
+
transform-origin: center center 0 50%;
|
82
|
+
|
83
|
+
&:hover {
|
84
|
+
-webkit-animation-name: shake;
|
85
|
+
animation-name: shake;
|
86
|
+
-webkit-animation-duration: 100ms;
|
87
|
+
animation-duration: 100ms;
|
88
|
+
-webkit-animation-iteration-count: infinite;
|
89
|
+
animation-iteration-count: infinite;
|
90
|
+
-webkit-animation-timing-function: ease-in-out;
|
91
|
+
animation-timing-function: ease-in-out;
|
92
|
+
-webkit-animation-delay: 0s;
|
93
|
+
animation-delay: 0s;
|
94
|
+
}
|
95
|
+
}
|
@@ -11,11 +11,11 @@ $gray: #666 !default;
|
|
11
11
|
$gray-light: #999 !default;
|
12
12
|
$gray-lighter: #eee !default;
|
13
13
|
|
14
|
-
$brand-primary: #428bca !default;
|
15
|
-
$brand-success: #
|
14
|
+
$brand-primary: #428bca !default; //#0083FF
|
15
|
+
$brand-success: #81C735 !default; //#00A94B #00A85D #5cb85c
|
16
16
|
$brand-info: #5bc0de !default;
|
17
|
-
$brand-warning: #f0ad4e !default;
|
18
|
-
$brand-danger: #d9534f !default;
|
17
|
+
$brand-warning: #f0ad4e !default; //#FFAB00
|
18
|
+
$brand-danger: #d9534f !default; //#FF0006
|
19
19
|
|
20
20
|
$background-color: #fff !default;
|
21
21
|
|
@@ -40,6 +40,7 @@ $font-family-base: $font-family-sans-serif !default;
|
|
40
40
|
$font-size-base: 14px !default;
|
41
41
|
$font-size-large: ceil(($font-size-base * 1.28)) !default; // ~18px
|
42
42
|
$font-size-small: ceil(($font-size-base * 0.85)) !default; // ~12px
|
43
|
+
$font-size-mini: $font-size-small;
|
43
44
|
|
44
45
|
$font-size-h1: floor(($font-size-base * 2.6)) !default; // ~36px
|
45
46
|
$font-size-h2: floor(($font-size-base * 2.28)) !default; // ~32px
|
@@ -54,6 +55,38 @@ $line-height-base: 1.428571429 !default; // 20/14
|
|
54
55
|
$line-height-computed: floor(($font-size-base * $line-height-base)) !default; // ~20px
|
55
56
|
|
56
57
|
|
58
|
+
//== Components
|
59
|
+
//
|
60
|
+
//## Define common padding and border radius sizes and more. Values based on 14px text and 1.428 line-height (~20px to start).
|
61
|
+
|
62
|
+
$padding-base-vertical: 6px !default;
|
63
|
+
$padding-base-horizontal: 12px !default;
|
64
|
+
|
65
|
+
$padding-large-vertical: 10px !default;
|
66
|
+
$padding-large-horizontal: 16px !default;
|
67
|
+
|
68
|
+
$padding-small-vertical: 5px !default;
|
69
|
+
$padding-small-horizontal: 10px !default;
|
70
|
+
$padding-mini-horizontal: $padding-small-horizontal;
|
71
|
+
|
72
|
+
$padding-mini-vertical: 1px !default;
|
73
|
+
$padding-mini-horizontal: 5px !default;
|
74
|
+
|
75
|
+
$line-height-large: 1.33 !default;
|
76
|
+
$line-height-small: 1.5 !default;
|
77
|
+
$line-height-mini: $line-height-small;
|
78
|
+
|
79
|
+
//** Global color for active items (e.g., navs or dropdowns).
|
80
|
+
$component-active-color: #fff !default;
|
81
|
+
//** Global background color for active items (e.g., navs or dropdowns).
|
82
|
+
$component-active-bg: $brand-primary !default;
|
83
|
+
|
84
|
+
//** Width of the `border` for generating carets that indicator dropdowns.
|
85
|
+
$caret-width-base: 4px !default;
|
86
|
+
//** Carets increase slightly in size for larger components.
|
87
|
+
$caret-width-large: 5px !default;
|
88
|
+
|
89
|
+
|
57
90
|
// Heading
|
58
91
|
// -------------------------
|
59
92
|
|
@@ -62,3 +95,35 @@ $heading-font-weight: 500 !default;
|
|
62
95
|
$heading-line-height: 1.1 !default;
|
63
96
|
$heading-color: inherit !default;
|
64
97
|
|
98
|
+
|
99
|
+
//== Buttons
|
100
|
+
//
|
101
|
+
//## For each of Bootstrap's buttons, define text, background and border color.
|
102
|
+
|
103
|
+
$button-font-weight: normal !default;
|
104
|
+
|
105
|
+
$button-default-color: #666 !default;
|
106
|
+
$button-default-background: #EBEBEB !default;
|
107
|
+
$button-default-border: darken($button-default-background, 5%) !default;
|
108
|
+
|
109
|
+
$button-primary-color: #fff !default;
|
110
|
+
$button-primary-background: $brand-primary !default;
|
111
|
+
$button-primary-border: darken($button-primary-background, 5%) !default;
|
112
|
+
|
113
|
+
$button-success-color: #fff !default;
|
114
|
+
$button-success-background: $brand-success !default;
|
115
|
+
$button-success-border: darken($button-success-background, 5%) !default;
|
116
|
+
|
117
|
+
$button-info-color: #fff !default;
|
118
|
+
$button-info-background: $brand-info !default;
|
119
|
+
$button-info-border: darken($button-info-background, 5%) !default;
|
120
|
+
|
121
|
+
$button-warning-color: #fff !default;
|
122
|
+
$button-warning-background: $brand-warning !default;
|
123
|
+
$button-warning-border: darken($button-warning-background, 5%) !default;
|
124
|
+
|
125
|
+
$button-danger-color: #fff !default;
|
126
|
+
$button-danger-background: $brand-danger !default;
|
127
|
+
$button-danger-border: darken($button-danger-background, 5%) !default;
|
128
|
+
|
129
|
+
|
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.
|
4
|
+
version: 0.0.7
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- miclle
|
8
8
|
autorequire:
|
9
9
|
bindir: bin
|
10
10
|
cert_chain: []
|
11
|
-
date: 2014-04-
|
11
|
+
date: 2014-04-18 00:00:00.000000000 Z
|
12
12
|
dependencies:
|
13
13
|
- !ruby/object:Gem::Dependency
|
14
14
|
name: bundler
|
@@ -53,6 +53,7 @@ files:
|
|
53
53
|
- vendor/assets/javascripts/mice/jquery.min.js
|
54
54
|
- vendor/assets/javascripts/mice/jquery.min.map
|
55
55
|
- vendor/assets/stylesheets/mice.scss
|
56
|
+
- vendor/assets/stylesheets/mice/_buttons.scss
|
56
57
|
- vendor/assets/stylesheets/mice/_grid.scss
|
57
58
|
- vendor/assets/stylesheets/mice/_icons.scss
|
58
59
|
- vendor/assets/stylesheets/mice/_menu.scss
|