buttonizer-multifunctional-button / freemius / assets / scss / _mixins.scss

_mixins.scss in Buttonizer – Floating Menus, Sticky Buttons, & Popup Builder 1.3, at freemius/assets/scss/_mixins.scss

283 lines 9.5 KB

Raw Download Zip

1	// ---- CSS3 SASS MIXINS ----
2	// https://github.com/madr/css3-sass-mixins
3	//
4	// Copyright (C) 2011 by Anders Ytterström
5	//
6	// Permission is hereby granted, free of charge, to any person obtaining a copy
7	// of this software and associated documentation files (the "Software"), to deal
8	// in the Software without restriction, including without limitation the rights
9	// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
10	// copies of the Software, and to permit persons to whom the Software is
11	// furnished to do so, subject to the following conditions:
12	//
13	// The above copyright notice and this permission notice shall be included in
14	// all copies or substantial portions of the Software.
15	//
16	// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
17	// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
18	// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
19	// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
20	// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
21	// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
22	// THE SOFTWARE.
23	//
24
25	// ---- LEGACY IE SUPPORT USING FILTERS ----
26	// Should IE filters be used or not?
27	// PROS: gradients, drop shadows etc will be handled by css.
28	// CONS: will harm the site performance badly,
29	// especially on sites with heavy rendering and scripting.
30	$useIEFilters: 0;
31	// might be 0 or 1. disabled by default.
32	// ---- /LEGACY IE SUPPORT USING FILTERS ----
33
34
35	@mixin background-size ($value) {
36	-webkit-background-size: $value;
37	background-size: $value;
38	}
39
40	@mixin border-image ($path, $offsets, $repeats) {
41	-moz-border-image: $path $offsets $repeats;
42	-o-border-image: $path $offsets $repeats;
43	-webkit-border-image: $path $offsets $repeats;
44	border-image: $path $offsets $repeats;
45	}
46
47	@mixin border-radius ($values...) {
48	-moz-border-radius: $values;
49	-webkit-border-radius: $values;
50	border-radius: $values;
51	/*-moz-background-clip: padding;
52	-webkit-background-clip: padding-box;
53	background-clip: padding-box;*/
54	}
55
56	@mixin box-shadow ($values...) {
57	-moz-box-shadow: $values;
58	-webkit-box-shadow: $values;
59	box-shadow: $values;
60	}
61
62	//@mixin box-shadow ($x, $y, $offset, $hex, $ie: $useIEFilters, $inset: null, $spread:null) {
63	// -moz-box-shadow: $x $y $offset $spread $hex $inset;
64	// -webkit-box-shadow: $x $y $offset $spread $hex $inset;
65	// box-shadow: $x $y $offset $spread $hex $inset;
66	//
67	// @if $ie == 1 {
68	// $iecolor: '#' + red($hex) + green($hex) + blue($hex);
69	// filter: progid:DXImageTransform.Microsoft.dropshadow(OffX=#{$x}, OffY=#{$y}, Color='#{$iecolor}');
70	// -ms-filter: quote(progid:DXImageTransform.Microsoft.dropshadow(OffX=#{$x}, OffY=#{$y}, Color='#{$iecolor}'));
71	// }
72	//}
73
74	@mixin box-sizing($value) {
75	-moz-box-sizing: $value;
76	-webkit-box-sizing: $value;
77	box-sizing: $value;
78	}
79
80	// requires sass 3.2
81	@mixin keyframes($name){
82	@-moz-keyframes #{$name} { @content; }
83	@-ms-keyframes #{$name} { @content; }
84	@-o-keyframes #{$name} { @content; }
85	@-webkit-keyframes #{$name} { @content; }
86	@keyframes #{$name} { @content; }
87	}
88
89	@mixin linear-gradient($from, $to, $ie: $useIEFilters) {
90	@if $ie != 1 { background-color: $to; }
91
92	background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, $from),color-stop(1, $to));
93	background-image: -webkit-linear-gradient(top, $from, $to);
94	background-image: -moz-linear-gradient(top, $from, $to);
95	background-image: -ms-linear-gradient(top, $from, $to);
96	background-image: -o-linear-gradient(top, $from, $to);
97	background-image: linear-gradient(top, bottom, $from, $to);
98
99	@if $ie == 1 {
100	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{$from}', endColorstr='#{$to}');
101	}
102	}
103
104	@mixin horizontal-gradient($startColor: #555, $endColor: #333, $ie: $useIEFilters) {
105	@if $ie != 1 { background-color: $endColor; }
106
107	background-color: $endColor;
108	background-image: -webkit-gradient(linear, 0 0, 100% 0, from($startColor), to($endColor)); // Safari 4+, Chrome 2+
109	background-image: -webkit-linear-gradient(left, $startColor, $endColor); // Safari 5.1+, Chrome 10+
110	background-image: -moz-linear-gradient(left, $startColor, $endColor); // FF 3.6+
111	background-image: -o-linear-gradient(left, $startColor, $endColor); // Opera 11.10
112	background-image: linear-gradient(to right, $startColor, $endColor); // Standard, IE10
113	background-repeat: repeat-x;
114	@if $ie == 1 {
115	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{$startColor}', endColorstr='#{$endColor}', GradientType=1);
116	}
117	}
118
119	@mixin radial-gradient($from, $to, $ie: $useIEFilters) {
120	@if $ie != 1 { background-color: $to; }
121
122	background: -moz-radial-gradient(center, circle cover, $from 0%, $to 100%);
123	background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, $from), color-stop(100%, $to));
124	background: -webkit-radial-gradient(center, circle cover, $from 0%, $to 100%);
125	background: -o-radial-gradient(center, circle cover, $from 0%, $to 100%);
126	background: -ms-radial-gradient(center, circle cover, $from 0%, $to 100%);
127	background: radial-gradient(center, circle cover, $from 0%, $to 100%);
128	background-color: $from;
129
130	@if $ie == 1 {
131	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{$from}', endColorstr='#{$to}', GradientType=1); /* IE6-9 fallback on horizontal gradient */
132	}
133	}
134
135	/*@mixin rgba-bg ($hex, $alpha, $ie: $useIEFilters) {
136	@if $ie == 1 {
137	background-color: none;
138	$hexopac: ie-hex-str(rgba($hex, $alpha));
139	filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#{$hexopac}',EndColorStr='#{$hexopac}}');
140	-ms-filter: quote(progid:DXImageTransform.Microsoft.gradient(startColorStr='#{$hexopac}',EndColorStr='#{$hexopac}'));
141	}
142	@else {
143	background-color: $hex;
144	background-color: rgba($hex, $alpha);
145	}
146	}*/
147
148	@mixin perspective($perspective) {
149	-moz-perspective: $perspective;
150	-ms-perspective: $perspective;
151	-webkit-perspective: $perspective;
152	perspective: $perspective;
153	-moz-transform-style: preserve-3d;
154	-ms-transform-style: preserve-3d;
155	-webkit-transform-style: preserve-3d;
156	transform-style: preserve-3d;
157	}
158
159	@mixin transform ($transforms) {
160	-moz-transform: $transforms;
161	-o-transform: $transforms;
162	-ms-transform: $transforms;
163	-webkit-transform: $transforms;
164	transform: $transforms;
165	}
166
167	@mixin matrix ($a, $b, $c, $d, $e, $f) {
168	-moz-transform: matrix($a, $b, $c, $d, #{$e}px, #{$f}px);
169	-o-transform: matrix($a, $b, $c, $d, $e, $f);
170	-ms-transform: matrix($a, $b, $c, $d, $e, $f);
171	-webkit-transform: matrix($a, $b, $c, $d, $e, $f);
172	transform: matrix($a, $b, $c, $d, $e, $f);
173	}
174
175	@mixin rotate ($deg) {
176	@include transform(rotate(#{$deg}deg));
177	}
178
179	@mixin scale ($size) {
180	@include transform(scale(#{$size}));
181	}
182
183	@mixin translate ($x, $y) {
184	@include transform(translate($x, $y));
185	}
186
187	@mixin transition ($value...) {
188	-moz-transition: $value;
189	-o-transition: $value;
190	-ms-transition: $value;
191	-webkit-transition: $value;
192	transition: $value;
193	}
194
195	@mixin animation($str) {
196	-webkit-animation: #{$str};
197	-moz-animation: #{$str};
198	-ms-animation: #{$str};
199	-o-animation: #{$str};
200	animation: #{$str};
201	}
202
203	@mixin animation-name($str) {
204	-webkit-animation-name: #{$str};
205	-moz-animation-name: #{$str};
206	-ms-animation-name: #{$str};
207	-o-animation-name: #{$str};
208	animation-name: #{$str};
209	}
210
211	@mixin animation-duration($str) {
212	-webkit-animation-duration: #{$str};
213	-moz-animation-duration: #{$str};
214	-ms-animation-duration: #{$str};
215	-o-animation-duration: #{$str};
216	animation-duration: #{$str};
217	}
218
219	@mixin animation-direction($str) {
220	-webkit-animation-direction: #{$str};
221	-moz-animation-direction: #{$str};
222	-ms-animation-direction: #{$str};
223	-o-animation-direction: #{$str};
224	animation-direction: #{$str};
225	}
226
227	@mixin animation-delay($str) {
228	animation-delay:#{$str};
229	-o-animation-delay:#{$str};
230	-ms-animation-delay:#{$str};
231	-webkit-animation-delay:#{$str};
232	-moz-animation-delay:#{$str};
233	}
234
235	@mixin animation-iteration-count($str) {
236	animation-iteration-count:#{$str};
237	-o-animation-iteration-count:#{$str};
238	-ms-animation-iteration-count:#{$str};
239	-webkit-animation-iteration-count:#{$str};
240	-moz-animation-iteration-count:#{$str};
241	}
242
243	@mixin animation-timing-function($str) {
244	-webkit-animation-timing-function: #{$str};
245	-moz-animation-timing-function: #{$str};
246	-ms-animation-timing-function: #{$str};
247	-o-animation-timing-function: #{$str};
248	animation-timing-function: #{$str};
249	}
250
251	// ==== /CSS3 SASS MIXINS ====
252
253	@mixin opacity($opacity) {
254	opacity: $opacity;
255	$opacity-ie: $opacity * 100;
256	filter: alpha(opacity=$opacity-ie); //IE8
257	}
258
259	@mixin size($width, $height: $width)
260	{
261	width: $width;
262	height: $height;
263	}
264
265	@mixin clearfix
266	{
267	&:after {
268	content: "";
269	display: table;
270	clear: both;
271	}
272	}
273
274	// Placeholder text
275	@mixin placeholder($color: $input-color-placeholder) {
276	// Firefox
277	&::-moz-placeholder {
278	color: $color;
279	opacity: 1; // Override Firefox's unusual default opacity; see https://github.com/twbs/bootstrap/pull/11526
280	}
281	&:-ms-input-placeholder { color: $color; } // Internet Explorer 10+
282	&::-webkit-input-placeholder { color: $color; } // Safari and Chrome
283	}