magic_stylez 0.0.0.26 → 0.0.0.27
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/lib/magic_stylez/version.rb +1 -1
- data/vendor/assets/stylesheets/magic/content/_buttons.scss +39 -84
- data/vendor/assets/stylesheets/magic/content/_helper.scss +71 -0
- data/vendor/assets/stylesheets/magic/corporate/_colors.scss +34 -1
- data/vendor/assets/stylesheets/magic/lib/_helper.scss +85 -66
- data/vendor/assets/stylesheets/magic-stylez.scss +1 -0
- metadata +2 -1
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA1:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 6d3442d70a6ea2660f8759093ac39967d00eab40
|
4
|
+
data.tar.gz: 5cdd96c5cef979a7233c4bc7f07abbda67a10592
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 330833d8544a1cf9069a4465de0bfd85eb4cf62a923bceb495692b98eb4a8ef02ddc9f596a3af798a56f7f4f3007749d6a0fd263aae824d7ed84d2b3b741b6a2
|
7
|
+
data.tar.gz: 276e3457e1f107c7b46395d700f21c76cfadae1e38fd96933d0680fcf7c4fa44a791bbf613c0035f3d05a7015e2f5776e103030bb668c1c7ec410852230add56
|
data/lib/magic_stylez/version.rb
CHANGED
@@ -110,54 +110,44 @@ $paypal-nice-bottom: darken(#1784cb, 5%);
|
|
110
110
|
|
111
111
|
|
112
112
|
|
113
|
-
//
|
113
|
+
// Alternate buttons .. again with important color (to stay btn in navbar)
|
114
|
+
// --------------------------------------------------
|
115
|
+
.btn-default {
|
116
|
+
@include btn-variant($btn-default-color, $btn-default-bg, $btn-default-border);
|
117
|
+
}
|
118
|
+
.btn-primary {
|
119
|
+
@include btn-variant($btn-primary-color, $btn-primary-bg, $btn-primary-border);
|
120
|
+
}
|
121
|
+
// Success appears as green
|
122
|
+
.btn-success {
|
123
|
+
@include btn-variant($btn-success-color, $btn-success-bg, $btn-success-border);
|
124
|
+
}
|
125
|
+
// Info appears as blue-green
|
126
|
+
.btn-info {
|
127
|
+
@include btn-variant($btn-info-color, $btn-info-bg, $btn-info-border);
|
128
|
+
}
|
129
|
+
// Warning appears as orange
|
130
|
+
.btn-warning {
|
131
|
+
@include btn-variant($btn-warning-color, $btn-warning-bg, $btn-warning-border);
|
132
|
+
}
|
133
|
+
// Danger and error appear as red
|
134
|
+
.btn-danger {
|
135
|
+
@include btn-variant($btn-danger-color, $btn-danger-bg, $btn-danger-border);
|
136
|
+
}
|
137
|
+
|
138
|
+
|
139
|
+
// Socials
|
114
140
|
.btn-facebook {
|
115
|
-
|
116
|
-
text-shadow: 0 1px 0 darken($facebook-color, 20%);
|
117
|
-
border-color: darken($facebook-color, 10%);
|
118
|
-
&:active {
|
119
|
-
background: darken($facebook-color, 10%);
|
120
|
-
}
|
121
|
-
&:hover {
|
122
|
-
background: darken($facebook-color, 5%);
|
123
|
-
border-color: darken($facebook-color, 15%);
|
124
|
-
}
|
141
|
+
@include btn-variant($btn-facebook-color, $btn-facebook-bg, $btn-facebook-border);
|
125
142
|
}
|
126
143
|
.btn-google {
|
127
|
-
|
128
|
-
text-shadow: 0 1px 0 darken($google-color, 20%);
|
129
|
-
border-color: darken($google-color, 10%);
|
130
|
-
&:active {
|
131
|
-
background: darken($google-color, 10%);
|
132
|
-
}
|
133
|
-
&:hover {
|
134
|
-
background: darken($google-color, 5%);
|
135
|
-
border-color: darken($google-color, 15%);
|
136
|
-
}
|
144
|
+
@include btn-variant($btn-google-color, $btn-google-bg, $btn-google-border);
|
137
145
|
}
|
138
146
|
.btn-twitter {
|
139
|
-
|
140
|
-
text-shadow: 0 1px 0 darken($twitter-color, 20%);
|
141
|
-
border-color: darken($twitter-color, 10%);
|
142
|
-
&:active {
|
143
|
-
background: darken($twitter-color, 10%);
|
144
|
-
}
|
145
|
-
&:hover {
|
146
|
-
background: darken($twitter-color, 5%);
|
147
|
-
border-color: darken($twitter-color, 15%);
|
148
|
-
}
|
147
|
+
@include btn-variant($btn-twitter-color, $btn-twitter-bg, $btn-twitter-border);
|
149
148
|
}
|
150
149
|
.btn-paypal {
|
151
|
-
|
152
|
-
text-shadow: 0 1px 0 darken($paypal-color, 20%);
|
153
|
-
border-color: darken($paypal-color, 10%);
|
154
|
-
&:active {
|
155
|
-
background: darken($paypal-color, 10%);
|
156
|
-
}
|
157
|
-
&:hover {
|
158
|
-
background: darken($paypal-color, 5%);
|
159
|
-
border-color: darken($paypal-color, 15%);
|
160
|
-
}
|
150
|
+
@include btn-variant($btn-paypal-color, $btn-paypal-bg, $btn-paypal-border);
|
161
151
|
}
|
162
152
|
|
163
153
|
|
@@ -171,58 +161,23 @@ $paypal-nice-bottom: darken(#1784cb, 5%);
|
|
171
161
|
&:hover { color: #fff; }
|
172
162
|
}
|
173
163
|
|
174
|
-
.btn-facebook-nice
|
175
|
-
|
176
|
-
text-shadow: 0 1px 0 darken($facebook-nice-bottom, 20%);
|
177
|
-
border-color: darken($facebook-nice-top, 10%);
|
178
|
-
&:active {
|
179
|
-
@include linear-gradient( darken($facebook-nice-top, 10%), darken($facebook-nice-bottom, 10%));
|
180
|
-
}
|
181
|
-
&:hover {
|
182
|
-
@include linear-gradient( darken($facebook-nice-top, 5%), darken($facebook-nice-bottom, 5%));
|
183
|
-
}
|
164
|
+
.btn-facebook-nice {
|
165
|
+
@include btn-with-gradient($btn-facebook-color, $facebook-gradient-top, $facebook-gradient-bottom, $btn-facebook-border);
|
184
166
|
}
|
185
|
-
.btn-google-nice
|
186
|
-
|
187
|
-
text-shadow: 0 1px 0 darken($google-nice-bottom, 20%);
|
188
|
-
border-color: darken($google-nice-top, 10%);
|
189
|
-
border-bottom-color: darken($google-nice-bottom, 5%);
|
190
|
-
&:active {
|
191
|
-
@include linear-gradient( darken($google-nice-top, 10%), darken($google-nice-bottom, 10%));
|
192
|
-
}
|
193
|
-
&:hover {
|
194
|
-
@include linear-gradient( darken($google-nice-top, 5%), darken($google-nice-bottom, 5%));
|
195
|
-
}
|
167
|
+
.btn-google-nice {
|
168
|
+
@include btn-with-gradient($btn-google-color, $google-gradient-top, $google-gradient-bottom, $btn-google-border);
|
196
169
|
}
|
197
|
-
.btn-twitter-nice
|
198
|
-
|
199
|
-
text-shadow: 0 1px 0 darken($twitter-nice-bottom, 20%);
|
200
|
-
border-color: darken($twitter-nice-top, 10%);
|
201
|
-
&:active {
|
202
|
-
@include linear-gradient( darken($twitter-nice-top, 10%), darken($twitter-nice-bottom, 10%));
|
203
|
-
}
|
204
|
-
&:hover {
|
205
|
-
@include linear-gradient( darken($twitter-nice-top, 5%), darken($twitter-nice-bottom, 5%));
|
206
|
-
}
|
170
|
+
.btn-twitter-nice {
|
171
|
+
@include btn-with-gradient($btn-twitter-color, $twitter-gradient-top, $twitter-gradient-bottom, $btn-twitter-border);
|
207
172
|
}
|
208
|
-
.btn-paypal-nice
|
209
|
-
|
210
|
-
text-shadow: 0 1px 0 darken($paypal-nice-bottom, 20%);
|
211
|
-
border-color: darken($paypal-nice-top, 20%);
|
212
|
-
&:active {
|
213
|
-
@include linear-gradient( darken($paypal-nice-top, 10%), darken($paypal-nice-bottom, 10%));
|
214
|
-
}
|
215
|
-
&:hover {
|
216
|
-
@include linear-gradient( darken($paypal-nice-top, 5%), darken($paypal-nice-bottom, 5%));
|
217
|
-
}
|
173
|
+
.btn-paypal-nice {
|
174
|
+
@include btn-with-gradient($btn-paypal-color, $paypal-gradient-top, $paypal-gradient-bottom, $btn-paypal-border);
|
218
175
|
}
|
219
176
|
|
220
177
|
|
221
178
|
|
222
179
|
|
223
180
|
|
224
|
-
|
225
|
-
|
226
181
|
// # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # #
|
227
182
|
//
|
228
183
|
// D E P R E A C A T E D . . . will be removed soon !
|
@@ -0,0 +1,71 @@
|
|
1
|
+
// media max-width: 767px
|
2
|
+
@include responsiveStep-xs-only {
|
3
|
+
.press-xs { margin-bottom:20px; }
|
4
|
+
.hide-xs { display: none !important; }
|
5
|
+
}
|
6
|
+
|
7
|
+
// media min-width: 768px and max-width: 991px
|
8
|
+
@include responsiveStep-sm-only {
|
9
|
+
.press-sm { margin-bottom:20px; }
|
10
|
+
.hide-sm { display: none; }
|
11
|
+
}
|
12
|
+
|
13
|
+
// media min-width: 992px and max-width: 1199px
|
14
|
+
@include responsiveStep-md-only {
|
15
|
+
.press-md { margin-bottom:20px; }
|
16
|
+
.hide-md { display: none; }
|
17
|
+
}
|
18
|
+
|
19
|
+
// media min-width: 1200px and max-width: 1599px
|
20
|
+
@include responsiveStep-lg-only {
|
21
|
+
.press-lg { margin-bottom:20px; }
|
22
|
+
.hide-lg { display: none; }
|
23
|
+
}
|
24
|
+
|
25
|
+
// media min-width: 1600px
|
26
|
+
@include responsiveStep-xl {
|
27
|
+
.press-xl { margin-bottom:20px; }
|
28
|
+
.hide-xl { display: none; }
|
29
|
+
}
|
30
|
+
|
31
|
+
|
32
|
+
@include responsiveStep-sm {
|
33
|
+
.left-text-sm { text-align: left; }
|
34
|
+
}
|
35
|
+
|
36
|
+
|
37
|
+
.press { margin-bottom: 20px; }
|
38
|
+
.no-press { margin-bottom: 0; }
|
39
|
+
.col-press { margin-bottom: 30px; }
|
40
|
+
|
41
|
+
.press-top { margin-top: 20px; }
|
42
|
+
.press-left { margin-left: 20px; }
|
43
|
+
.press-right { margin-right: 20px; }
|
44
|
+
|
45
|
+
|
46
|
+
.no-press-top { margin-top: 0; }
|
47
|
+
.no-press-left { margin-left: 0; }
|
48
|
+
.no-press-right { margin-right: 0; }
|
49
|
+
|
50
|
+
|
51
|
+
|
52
|
+
|
53
|
+
.left_text { text-align: left !important; }
|
54
|
+
.center_text { text-align: center !important; }
|
55
|
+
.right_text { text-align: right !important; }
|
56
|
+
|
57
|
+
.onTop { z-index: 15; }
|
58
|
+
|
59
|
+
@each $size in 0, 5, 10, 15, 20, 30, 40, 50 {
|
60
|
+
|
61
|
+
.padding_#{$size} { padding: #{$size}px; }
|
62
|
+
.v_padding_#{$size} { padding-top: #{$size}px; padding-bottom: #{$size}px; }
|
63
|
+
.h_padding_#{$size} { padding-left: #{$size}px; padding-right: #{$size}px; }
|
64
|
+
|
65
|
+
.margin_#{$size} { margin: #{$size}px; }
|
66
|
+
.v_margin_#{$size} { margin-top: #{$size}px; margin-bottom: #{$size}px; }
|
67
|
+
.h_margin_#{$size} { margin-left: #{$size}px; margin-right: #{$size}px; }
|
68
|
+
|
69
|
+
.r_#{$size} { margin-right: #{$size}px !important; }
|
70
|
+
.l_#{$size} { margin-left: #{$size}px !important; }
|
71
|
+
}
|
@@ -46,7 +46,7 @@ $brand-danger: #d9534f !default; // twbs-default: #d9534f
|
|
46
46
|
$brand-color: #a0c775;
|
47
47
|
|
48
48
|
//** Global Background colors.
|
49
|
-
$main-bg: #
|
49
|
+
$main-bg: darken(#fff, 10%) !default;
|
50
50
|
$dark-bg: #e5e5e5 !default;
|
51
51
|
$soft-bg: #f8f8f8 !default;
|
52
52
|
$blue-bg: $blue-soft !default;
|
@@ -115,6 +115,39 @@ $btn-danger-border: darken($btn-danger-bg, 5%) !default;
|
|
115
115
|
$btn-link-disabled-color: $gray-light !default;
|
116
116
|
|
117
117
|
|
118
|
+
//== Social Buttons
|
119
|
+
//
|
120
|
+
// Flat Colors
|
121
|
+
$btn-facebook-color: #fff !default;
|
122
|
+
$btn-facebook-bg: #3b5998 !default;
|
123
|
+
$btn-facebook-border: darken($btn-facebook-bg, 5%) !default;
|
124
|
+
|
125
|
+
$btn-google-color: #fff !default;
|
126
|
+
$btn-google-bg: #dd4b39 !default;
|
127
|
+
$btn-google-border: darken($btn-google-bg, 5%) !default;
|
128
|
+
|
129
|
+
$btn-paypal-color: #fff !default;
|
130
|
+
$btn-paypal-bg: #1784cb !default; // was #12398c
|
131
|
+
$btn-paypal-border: darken($btn-paypal-bg, 5%) !default;
|
132
|
+
|
133
|
+
$btn-twitter-color: #fff !default;
|
134
|
+
$btn-twitter-bg: #00aced !default;
|
135
|
+
$btn-twitter-border: darken($btn-twitter-bg, 5%) !default;
|
136
|
+
|
137
|
+
|
138
|
+
// Gradient Colors
|
139
|
+
$facebook-gradient-top: lighten($btn-facebook-bg, 7%);
|
140
|
+
$facebook-gradient-bottom: darken($btn-facebook-bg, 7%);
|
141
|
+
$google-gradient-top: lighten($btn-google-bg, 7%);
|
142
|
+
$google-gradient-bottom: darken($btn-google-bg, 7%);
|
143
|
+
$twitter-gradient-top: lighten($btn-twitter-bg, 7%);
|
144
|
+
$twitter-gradient-bottom: darken($btn-twitter-bg, 7%);
|
145
|
+
$paypal-gradient-top: #52b9f4;
|
146
|
+
$paypal-gradient-bottom: darken(#1784cb, 5%);
|
147
|
+
|
148
|
+
|
149
|
+
|
150
|
+
|
118
151
|
//== Forms
|
119
152
|
//
|
120
153
|
//##
|
@@ -19,74 +19,93 @@
|
|
19
19
|
|
20
20
|
|
21
21
|
|
22
|
-
// media max-width: 767px
|
23
|
-
@include responsiveStep-xs-only {
|
24
|
-
.press-xs { margin-bottom:20px; }
|
25
|
-
.hide-xs { display: none !important; }
|
26
|
-
}
|
27
|
-
|
28
|
-
// media min-width: 768px and max-width: 991px
|
29
|
-
@include responsiveStep-sm-only {
|
30
|
-
.press-sm { margin-bottom:20px; }
|
31
|
-
.hide-sm { display: none; }
|
32
|
-
}
|
33
|
-
|
34
|
-
// media min-width: 992px and max-width: 1199px
|
35
|
-
@include responsiveStep-md-only {
|
36
|
-
.press-md { margin-bottom:20px; }
|
37
|
-
.hide-md { display: none; }
|
38
|
-
}
|
39
22
|
|
40
|
-
//
|
41
|
-
@
|
42
|
-
|
43
|
-
|
44
|
-
|
45
|
-
|
46
|
-
|
47
|
-
|
48
|
-
|
49
|
-
|
23
|
+
// Button helper from twbs ..changed
|
24
|
+
@mixin btn-variant($color, $background, $border) {
|
25
|
+
color: $color !important;
|
26
|
+
background-color: $background !important;
|
27
|
+
border-color: $border !important;
|
28
|
+
|
29
|
+
&:hover,
|
30
|
+
&:focus,
|
31
|
+
&:active,
|
32
|
+
&.active,
|
33
|
+
.open > &.dropdown-toggle {
|
34
|
+
color: $color !important;
|
35
|
+
background-color: darken($background, 7%) !important;
|
36
|
+
border-color: darken($border, 12%) !important;
|
37
|
+
}
|
38
|
+
&:active,
|
39
|
+
&.active,
|
40
|
+
.open > &.dropdown-toggle {
|
41
|
+
background-color: darken($background, 10%) !important;
|
42
|
+
}
|
43
|
+
&:active,
|
44
|
+
&.active,
|
45
|
+
.open > &.dropdown-toggle {
|
46
|
+
background-image: none;
|
47
|
+
}
|
48
|
+
&.disabled,
|
49
|
+
&[disabled],
|
50
|
+
fieldset[disabled] & {
|
51
|
+
&,
|
52
|
+
&:hover,
|
53
|
+
&:focus,
|
54
|
+
&:active,
|
55
|
+
&.active {
|
56
|
+
background-color: $background !important;
|
57
|
+
border-color: $border !important;
|
58
|
+
}
|
59
|
+
}
|
60
|
+
|
61
|
+
.badge {
|
62
|
+
color: $background;
|
63
|
+
background-color: $color;
|
64
|
+
}
|
50
65
|
}
|
51
66
|
|
52
67
|
|
53
|
-
|
54
|
-
|
68
|
+
// Button helper from twbs ..changed
|
69
|
+
@mixin btn-with-gradient($color, $top-bg, $bottom-bg, $border) {
|
70
|
+
color: $color !important;
|
71
|
+
@include linear-gradient($top-bg, $bottom-bg);
|
72
|
+
border-color: $border !important;
|
73
|
+
text-shadow: 0 1px 0 darken($bottom-bg, 20%);
|
74
|
+
|
75
|
+
&:hover,
|
76
|
+
&:focus,
|
77
|
+
&:active,
|
78
|
+
&.active,
|
79
|
+
.open > &.dropdown-toggle {
|
80
|
+
color: $color !important;
|
81
|
+
@include linear-gradient( darken($top-bg, 5%), darken($bottom-bg, 5%));
|
82
|
+
border-color: darken($border, 12%) !important;
|
83
|
+
}
|
84
|
+
&:active,
|
85
|
+
&.active,
|
86
|
+
.open > &.dropdown-toggle {
|
87
|
+
@include linear-gradient( darken($top-bg, 10%), darken($bottom-bg, 10%));
|
88
|
+
}
|
89
|
+
&:active,
|
90
|
+
&.active,
|
91
|
+
.open > &.dropdown-toggle {
|
92
|
+
background-image: none;
|
93
|
+
}
|
94
|
+
&.disabled,
|
95
|
+
&[disabled],
|
96
|
+
fieldset[disabled] & {
|
97
|
+
&,
|
98
|
+
&:hover,
|
99
|
+
&:focus,
|
100
|
+
&:active,
|
101
|
+
&.active {
|
102
|
+
@include linear-gradient($top-bg, $bottom-bg);
|
103
|
+
border-color: $border !important;
|
104
|
+
}
|
105
|
+
}
|
106
|
+
|
107
|
+
.badge {
|
108
|
+
color: $bottom-bg;
|
109
|
+
background-color: $color;
|
110
|
+
}
|
55
111
|
}
|
56
|
-
|
57
|
-
|
58
|
-
.press { margin-bottom: 20px; }
|
59
|
-
.no-press { margin-bottom: 0; }
|
60
|
-
.col-press { margin-bottom: 30px; }
|
61
|
-
|
62
|
-
.press-top { margin-top: 20px; }
|
63
|
-
.press-left { margin-left: 20px; }
|
64
|
-
.press-right { margin-right: 20px; }
|
65
|
-
|
66
|
-
|
67
|
-
.no-press-top { margin-top: 0; }
|
68
|
-
.no-press-left { margin-left: 0; }
|
69
|
-
.no-press-right { margin-right: 0; }
|
70
|
-
|
71
|
-
|
72
|
-
|
73
|
-
|
74
|
-
.left_text { text-align: left !important; }
|
75
|
-
.center_text { text-align: center !important; }
|
76
|
-
.right_text { text-align: right !important; }
|
77
|
-
|
78
|
-
.onTop { z-index: 15; }
|
79
|
-
|
80
|
-
@each $size in 0, 5, 10, 15, 20, 30, 40, 50 {
|
81
|
-
|
82
|
-
.padding_#{$size} { padding: #{$size}px; }
|
83
|
-
.v_padding_#{$size} { padding-top: #{$size}px; padding-bottom: #{$size}px; }
|
84
|
-
.h_padding_#{$size} { padding-left: #{$size}px; padding-right: #{$size}px; }
|
85
|
-
|
86
|
-
.margin_#{$size} { margin: #{$size}px; }
|
87
|
-
.v_margin_#{$size} { margin-top: #{$size}px; margin-bottom: #{$size}px; }
|
88
|
-
.h_margin_#{$size} { margin-left: #{$size}px; margin-right: #{$size}px; }
|
89
|
-
|
90
|
-
.r_#{$size} { margin-right: #{$size}px !important; }
|
91
|
-
.l_#{$size} { margin-left: #{$size}px !important; }
|
92
|
-
}
|
metadata
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: magic_stylez
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 0.0.0.
|
4
|
+
version: 0.0.0.27
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- Torsten Wetzel
|
@@ -340,6 +340,7 @@ files:
|
|
340
340
|
- vendor/assets/stylesheets/magic/content/_box.scss
|
341
341
|
- vendor/assets/stylesheets/magic/content/_buttons.scss
|
342
342
|
- vendor/assets/stylesheets/magic/content/_forms.scss
|
343
|
+
- vendor/assets/stylesheets/magic/content/_helper.scss
|
343
344
|
- vendor/assets/stylesheets/magic/content/_icons.scss
|
344
345
|
- vendor/assets/stylesheets/magic/content/_inputs.scss
|
345
346
|
- vendor/assets/stylesheets/magic/content/_navbar.scss
|