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

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

270 lines 9.0 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 perspective($perspective) {
136	-moz-perspective: $perspective;
137	-ms-perspective: $perspective;
138	-webkit-perspective: $perspective;
139	perspective: $perspective;
140	-moz-transform-style: preserve-3d;
141	-ms-transform-style: preserve-3d;
142	-webkit-transform-style: preserve-3d;
143	transform-style: preserve-3d;
144	}
145
146	@mixin transform ($transforms) {
147	-moz-transform: $transforms;
148	-o-transform: $transforms;
149	-ms-transform: $transforms;
150	-webkit-transform: $transforms;
151	transform: $transforms;
152	}
153
154	@mixin matrix ($a, $b, $c, $d, $e, $f) {
155	-moz-transform: matrix($a, $b, $c, $d, #{$e}px, #{$f}px);
156	-o-transform: matrix($a, $b, $c, $d, $e, $f);
157	-ms-transform: matrix($a, $b, $c, $d, $e, $f);
158	-webkit-transform: matrix($a, $b, $c, $d, $e, $f);
159	transform: matrix($a, $b, $c, $d, $e, $f);
160	}
161
162	@mixin rotate ($deg) {
163	@include transform(rotate(#{$deg}deg));
164	}
165
166	@mixin scale ($size) {
167	@include transform(scale(#{$size}));
168	}
169
170	@mixin translate ($x, $y) {
171	@include transform(translate($x, $y));
172	}
173
174	@mixin transition ($value...) {
175	-moz-transition: $value;
176	-o-transition: $value;
177	-ms-transition: $value;
178	-webkit-transition: $value;
179	transition: $value;
180	}
181
182	@mixin animation($str) {
183	-webkit-animation: #{$str};
184	-moz-animation: #{$str};
185	-ms-animation: #{$str};
186	-o-animation: #{$str};
187	animation: #{$str};
188	}
189
190	@mixin animation-name($str) {
191	-webkit-animation-name: #{$str};
192	-moz-animation-name: #{$str};
193	-ms-animation-name: #{$str};
194	-o-animation-name: #{$str};
195	animation-name: #{$str};
196	}
197
198	@mixin animation-duration($str) {
199	-webkit-animation-duration: #{$str};
200	-moz-animation-duration: #{$str};
201	-ms-animation-duration: #{$str};
202	-o-animation-duration: #{$str};
203	animation-duration: #{$str};
204	}
205
206	@mixin animation-direction($str) {
207	-webkit-animation-direction: #{$str};
208	-moz-animation-direction: #{$str};
209	-ms-animation-direction: #{$str};
210	-o-animation-direction: #{$str};
211	animation-direction: #{$str};
212	}
213
214	@mixin animation-delay($str) {
215	animation-delay:#{$str};
216	-o-animation-delay:#{$str};
217	-ms-animation-delay:#{$str};
218	-webkit-animation-delay:#{$str};
219	-moz-animation-delay:#{$str};
220	}
221
222	@mixin animation-iteration-count($str) {
223	animation-iteration-count:#{$str};
224	-o-animation-iteration-count:#{$str};
225	-ms-animation-iteration-count:#{$str};
226	-webkit-animation-iteration-count:#{$str};
227	-moz-animation-iteration-count:#{$str};
228	}
229
230	@mixin animation-timing-function($str) {
231	-webkit-animation-timing-function: #{$str};
232	-moz-animation-timing-function: #{$str};
233	-ms-animation-timing-function: #{$str};
234	-o-animation-timing-function: #{$str};
235	animation-timing-function: #{$str};
236	}
237
238	// ==== /CSS3 SASS MIXINS ====
239
240	@mixin opacity($opacity) {
241	opacity: $opacity;
242	$opacity-ie: $opacity * 100;
243	filter: alpha(opacity=$opacity-ie); //IE8
244	}
245
246	@mixin size($width, $height: $width)
247	{
248	width: $width;
249	height: $height;
250	}
251
252	@mixin clearfix
253	{
254	&:after {
255	content: "";
256	display: table;
257	clear: both;
258	}
259	}
260
261	// Placeholder text
262	@mixin placeholder($color: $input-color-placeholder) {
263	// Firefox
264	&::-moz-placeholder {
265	color: $color;
266	opacity: 1; // Override Firefox's unusual default opacity; see https://github.com/twbs/bootstrap/pull/11526
267	}
268	&:-ms-input-placeholder { color: $color; } // Internet Explorer 10+
269	&::-webkit-input-placeholder { color: $color; } // Safari and Chrome
270	}