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 CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA1:
3
- metadata.gz: 3cbdabc42f3caf3c736f272a47aa48ed7af848bf
4
- data.tar.gz: e320ed34899256c7b964eca62dbf09e637bd1264
3
+ metadata.gz: 74d0f0bbf2aa99724b376bc3905aac85069bc499
4
+ data.tar.gz: eb7ba6a3352e5eefd74e5cc30025d9c437c68acc
5
5
  SHA512:
6
- metadata.gz: 7bc098d5231f6beda8f07ac2a5e7fb3493bcc248fdf7f4e6007eb4cd97abed53cd4fcf57faa3af53137e52f224b63137b1b07efb7de36d99e2eae80936d3dc99
7
- data.tar.gz: 927f6faf59b663100d1979456e85334a3d12c69f5139d8cc83a76d3e25e2822726591d5ae85994847bfafc33e2bfe4ffa626f2b21b2f9a371018220aaf45fbfc
6
+ metadata.gz: 3d570fa67fa85ee74622e41bc2c372dfa34be9df3681d8416c2184f8142a150bd4e37dd28162132385222d0b09f3e9d18273b556aff9365c95e911bde78bb73e
7
+ data.tar.gz: ef6179f7b0e6a3793255aff30fd3fb4c0e6134d57bb5d705e30594775d1d95724ca4dc80ef70475391ded70d7abd18a25cfd5dcea59b99e032e036f9058ca0c2
data/Gemfile.lock CHANGED
@@ -1,7 +1,7 @@
1
1
  PATH
2
2
  remote: .
3
3
  specs:
4
- mice (0.0.5)
4
+ mice (0.0.7)
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.6"
2
+ VERSION = "0.0.7"
3
3
  end
@@ -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: #333;
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
- padding: 15px 0;
14
- color: #FFF;
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
- padding: 15px 20px;
38
+ line-height: 45px;
39
+ padding: 0 20px;
35
40
  position: relative;
36
41
  text-decoration: none;
37
- color: #EEE;
42
+ color: #666;
43
+ position: relative;
44
+ text-align: center;
38
45
 
39
- &:before {
40
- content: '';
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
- &:hover { background: #272727; }
49
- &:active{ background: #000; }
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
- &:last-child a:after {
53
- content: '';
54
- position: absolute;
55
- top: 0;
56
- right: 0;
57
- height: 100%;
58
- border-right: solid 1px #4E4E4E;
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
- background: #288EDF;
64
- color: #FFF;
76
+ color: #428BCA;
77
+ background: #F5F5F5;
78
+ font-weight: 700;
65
79
 
66
- &:before, &:after {
67
- border: none;
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: #5cb85c !default;
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
+
@@ -10,6 +10,7 @@
10
10
  @import "mice/typography";
11
11
  @import "mice/grid";
12
12
 
13
+ @import "mice/buttons";
13
14
  @import "mice/icons";
14
15
 
15
16
  @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.6
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-14 00:00:00.000000000 Z
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