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 CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA1:
3
- metadata.gz: 68a4b119baac8b554bb647c9dbda035e5d33840a
4
- data.tar.gz: 4912c82943c9accc5a593206651e6749e59f476e
3
+ metadata.gz: 6d3442d70a6ea2660f8759093ac39967d00eab40
4
+ data.tar.gz: 5cdd96c5cef979a7233c4bc7f07abbda67a10592
5
5
  SHA512:
6
- metadata.gz: 04ddb369a4b46866e198ac362d4778b1a0b49b9b0cc25d2b6c64361055b58f4ef24578b223a084a1dc3438a56c1c678a176277a181e4f4eef82409138aced4d8
7
- data.tar.gz: 5e17dfed3905af669b6eced1892ffef7a1f47a0556d356618cd63a165e719e1dc42c8ec995c762f9836811340c0e4b8f3196f7af13328843a220cebc9a5d09c1
6
+ metadata.gz: 330833d8544a1cf9069a4465de0bfd85eb4cf62a923bceb495692b98eb4a8ef02ddc9f596a3af798a56f7f4f3007749d6a0fd263aae824d7ed84d2b3b741b6a2
7
+ data.tar.gz: 276e3457e1f107c7b46395d700f21c76cfadae1e38fd96933d0680fcf7c4fa44a791bbf613c0035f3d05a7015e2f5776e103030bb668c1c7ec410852230add56
@@ -1,3 +1,3 @@
1
1
  module MagicStylez
2
- VERSION = "0.0.0.26"
2
+ VERSION = "0.0.0.27"
3
3
  end
@@ -110,54 +110,44 @@ $paypal-nice-bottom: darken(#1784cb, 5%);
110
110
 
111
111
 
112
112
 
113
- // Flat Buttons
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
- background: $facebook-color;
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
- background: $google-color;
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
- background: $twitter-color;
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
- background: $paypal-color;
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, .btn-facebook-nice > .btn {
175
- @include linear-gradient($facebook-nice-top, $facebook-nice-bottom);
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, .btn-google-nice > .btn {
186
- @include linear-gradient($google-nice-top, $google-nice-bottom);
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, .btn-twitter-nice > .btn {
198
- @include linear-gradient($twitter-nice-top, $twitter-nice-bottom);
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, .btn-paypal-nice > .btn {
209
- @include linear-gradient($paypal-nice-top, $paypal-nice-bottom);
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: #f2f1f1 !default;
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
- // media min-width: 1200px and max-width: 1599px
41
- @include responsiveStep-lg-only {
42
- .press-lg { margin-bottom:20px; }
43
- .hide-lg { display: none; }
44
- }
45
-
46
- // media min-width: 1600px
47
- @include responsiveStep-xl {
48
- .press-xl { margin-bottom:20px; }
49
- .hide-xl { display: none; }
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
- @include responsiveStep-sm {
54
- .left-text-sm { text-align: left; }
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
- }
@@ -40,6 +40,7 @@
40
40
  @import "magic/content/box";
41
41
  @import "magic/content/buttons";
42
42
  @import "magic/content/forms";
43
+ @import "magic/content/helper";
43
44
  @import "magic/content/icons";
44
45
  @import "magic/content/inputs";
45
46
  @import "magic/content/navbar";
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.26
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