magic_stylez 0.0.0.26 → 0.0.0.27

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: 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