5 $box-sizing-prefix: webkit moz spec;
6 $border-radius-prefix: webkit spec;
7 $box-shadow-radius-prefix: webkit moz spec;
8 $text-shadow-radius-prefix: spec;
9 $text-shadow-prefix: spec;
10 $box-shadow-prefix: all;
11 $linear-gradient-prefix: all;
12 $transition-prefix: webkit moz o spec;
13 $flex-prefix: webkit spec;
14 $browserPrefixes: webkit moz o ms;
16 @mixin prefix($property, $value, $prefixeslist: 'all') {
17 @if $prefixeslist == all {
18 -webkit-#{$property}: $value;
19 -moz-#{$property}: $value;
20 -ms-#{$property}: $value;
21 -o-#{$property}: $value;
24 @each $prefix in $prefixeslist {
25 @if $prefix == webkit {
26 -webkit-#{$property}: $value;
27 } @else if $prefix == moz {
28 -moz-#{$property}: $value;
29 } @else if $prefix == ms {
30 -ms-#{$property}: $value;
31 } @else if $prefix == o {
32 -o-#{$property}: $value;
33 } @else if $prefix == spec {
36 @warn "No such prefix: #{$prefix}";
43 @mixin value-suffix-with-range($property, $valuesuffix, $from, $to, $prefixeslist) {
45 @if $prefixeslist == all {
46 #{property} : -webkit-#{$valuesuffix}($from, $to);
47 #{property} : -moz-#{$valuesuffix}($from, $to);
48 #{property} : -o-#{$valuesuffix}($from, $to);
49 #{property} : -ms-#{$valuesuffix}($from, $to);
52 @each $prefix in $prefixeslist {
53 @if $prefix == webkit {
54 #{property} : -webkit-#{$valuesuffix}($from, $to);
55 } @else if $prefix == moz {
56 #{property} : -moz-#{$valuesuffix}($from, $to);
57 } @else if $prefix == ms {
58 #{property} : -ms-#{$valuesuffix}($from, $to);
59 } @else if $prefix == o {
60 #{property} : -o-#{$valuesuffix}($from, $to);
62 @warn "No such prefix: #{$prefix}";
69 @mixin box-sizing($value: border-box) {
70 @include prefix(box-sizing, $value, $box-sizing-prefix);
73 /* Borders & Shadows */
74 @mixin box-shadow($value) {
75 @include prefix(box-shadow, $value, $box-shadow-radius-prefix);
78 @mixin text-shadow($value) {
79 @include prefix(text-shadow, $value, $text-shadow-radius-prefix);
82 @mixin border-radius($value, $positions: all) {
83 @if ($positions == all) {
84 @include prefix(border-radius, $value, $border-radius-prefix);
86 @each $position in $positions {
87 @include prefix(border-#{$position}-radius, $value, $border-radius-prefix);
93 @mixin transition($value) {
94 @include prefix(transition, $value, $transition-prefix);
98 @mixin opacity($alpha) {
99 $ie-opacity: round($alpha * 100);
101 filter: unquote("alpha(opacity = #{$ie-opacity})");
105 @mixin ellipsis($width: 100%, $display: inline-block, $max-width: none) {
107 text-overflow: ellipsis;
111 max-width: $max-width;
114 @mixin multiline-ellipsis($lineHeight: 1.3em, $lineCount: 2, $bgColor: $white){
117 line-height: $lineHeight;
118 max-height: $lineHeight * $lineCount;
120 word-break: break-all;
121 // margin-right: -1em;
136 background: $bgColor;
140 @mixin gradient($from, $to) {
141 /* fallback/image non-cover color */
142 background-color: $from;
143 background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from($from), to($to));
144 @include value-suffix-with-range(background-color, linear-gradient, $from, $to, $linear-gradient-prefix);
147 /* Vertical placement of multuple lines of text */
148 @mixin vertical-text($height) {
151 margin-top: -$height/2;
154 @mixin text-vertical-align($align: middle) {
159 vertical-align: $align;
164 @mixin center-element($width) {
170 @mixin center-content($width) {
172 @include center-element($width);
176 /* transform-rotate */
178 // Defines a 2D rotation, the angle is specified in the parameter
180 // $deg - angle in degrees
181 @mixin transform-rotate($deg) {
182 transform: rotate($deg + deg); /* IE10 and Mozilla */
183 -ms-transform: rotate($deg + deg); /* IE 9 */
184 -webkit-transform: rotate($deg + deg); /* Safari and Chrome */
187 /* transform-translate */
189 // Defines a 2D rotation, the angle is specified in the parameter
191 // $deg - angle in degrees
192 @mixin transform-translate($x, $y) {
193 transform: translate($x, $y); /* IE10 and Mozilla */
194 -ms-transform: translate($x, $y); /* IE 9 */
195 -webkit-transform: translate($x, $y); /* Safari and Chrome */
198 /* transform-scale */
200 // Defines a 2D scale transformation, changing the elements width and height
205 @mixin transform-scale($width, $height) {
206 transform: scale($width, $height); /* IE10 and Mozilla */
207 -ms-transform: scale($width, $height); /* IE 9 */
208 -webkit-transform: scale($width, $height); /* Safari and Chrome */
211 @mixin scrollable() {
212 ::-webkit-scrollbar {
217 @mixin create-circle($size, $bgcolor, $content) {
221 background: $bgcolor;
222 border: 3px solid $bgcolor;
225 justify-content: center;
229 @mixin keyframe-animation($animationType, $properties, $fromValue, $toValue) {
231 @keyframes #{$animationType} {
234 @each $property in $properties {
235 #{$property}: nth($fromValue, $startIndex);
236 $startIndex: $startIndex + 1;
241 @each $property in $properties {
242 #{$property}: nth($toValue, $startIndex);
243 $startIndex: $startIndex + 1;
247 @-moz-keyframes #{$animationType}{
251 @each $property in $properties {
252 #{$property}: nth($fromValue, $startIndex);
253 $startIndex: $startIndex + 1;
258 @each $property in $properties {
259 #{$property}: nth($toValue, $startIndex);
260 $startIndex: $startIndex + 1;
264 @-webkit-keyframes #{$animationType} {
265 /* Safari and Chrome */
268 @each $property in $properties {
269 #{$property}: nth($fromValue, $startIndex);
270 $startIndex: $startIndex + 1;
275 @each $property in $properties {
276 #{$property}: nth($toValue, $startIndex);
277 $startIndex: $startIndex + 1;
281 @-o-keyframes #{$animationType} {
285 @each $property in $properties {
286 #{$property}: nth($fromValue, $startIndex);
287 $startIndex: $startIndex + 1;
292 @each $property in $properties {
293 #{$property}: nth($toValue, $startIndex);
294 $startIndex: $startIndex + 1;
302 @mixin border-shadow($xShadow: 0.545px, $yShadow: 0.839px, $blur: 4px, $spread: 0, $color: $light-gray, $opacity: 0.2) {
303 @include box-shadow($xShadow $yShadow $blur $spread rgba($color, $opacity));
306 /* percent-plus-value */
308 // Calculate length property (e.g. width, margin) by adding a value (e.g. in pixels)
309 // to a percentage of container height/width
310 @mixin percent-plus-value($property, $value, $percent: 100%) {
311 $string: 'calc(' + $percent + ' + ' + $value + ')';
312 #{$property}: unquote($string);