Related Setup: https://gist.github.com/hofmannsven/6814278
Related Pro Tips: https://ochronus.com/git-tips-from-the-trenches/
@mixin transition($transition-property, $transition-time, $method) { | |
-webkit-transition: $transition-property $transition-time $method; | |
-moz-transition: $transition-property $transition-time $method; | |
-ms-transition: $transition-property $transition-time $method; | |
-o-transition: $transition-property $transition-time $method; | |
transition: $transition-property $transition-time $method; | |
} | |
/* Usage - Stick into the top of your SCSS sheet and @include where needed for cross browser transitions. | |
.class { |
Related Setup: https://gist.github.com/hofmannsven/6814278
Related Pro Tips: https://ochronus.com/git-tips-from-the-trenches/
/* Vertically aling on ion-content */ | |
.center { | |
border: 1px solid red; | |
display: -webkit-box; | |
display: -moz-box; | |
display: -ms-flexbox; | |
display: -webkit-flex; | |
display: flex; | |
-webkit-box-direction: normal; | |
-moz-box-direction: normal; |
@mixin box-shadow($top, $left, $blur, $color, $inset: false) { | |
@if $inset { | |
-webkit-box-shadow:inset $top $left $blur $color; | |
-moz-box-shadow:inset $top $left $blur $color; | |
box-shadow:inset $top $left $blur $color; | |
} @else { | |
-webkit-box-shadow: $top $left $blur $color; | |
-moz-box-shadow: $top $left $blur $color; | |
box-shadow: $top $left $blur $color; | |
} |
//Cross browser CSS3 mixins | |
@mixin box-shadow($left, $top, $radius, $color) { | |
box-shadow: $left $top $radius $color; | |
-webkit-box-shadow: $left $top $radius $color; | |
-moz-box-shadow: $left $top $radius $color; | |
} | |
@mixin transition($property, $duration, $easing: linear) { | |
transition: $property $duration $easing; |
enum VisibilityState { | |
Visible = 'visible', | |
Hidden = 'hidden' | |
} | |
enum Direction { | |
Up = 'Up', | |
Down = 'Down' | |
} |
// -------------------------------------------------- | |
// Flexbox SASS mixins | |
// The spec: http://www.w3.org/TR/css3-flexbox | |
// -------------------------------------------------- | |
// Flexbox display | |
@mixin flexbox() { | |
display: -webkit-box; | |
display: -moz-box; | |
display: -ms-flexbox; |
// Browser Prefixes | |
@mixin transform($transforms) { | |
-webkit-transform: $transforms; | |
-moz-transform: $transforms; | |
-ms-transform: $transforms; | |
transform: $transforms; | |
} | |
// Rotate | |
@mixin rotate ($deg) { |
/* http://meyerweb.com/eric/tools/css/reset/ | |
v2.0-modified | 20110126 | |
License: none (public domain) | |
*/ | |
html, body, div, span, applet, object, iframe, | |
h1, h2, h3, h4, h5, h6, p, blockquote, pre, | |
a, abbr, acronym, address, big, cite, code, | |
del, dfn, em, img, ins, kbd, q, s, samp, | |
small, strike, strong, sub, sup, tt, var, |
/* | |
(c) by Thomas Konings | |
Random Name Generator for Javascript | |
*/ | |
function capFirst(string) { | |
return string.charAt(0).toUpperCase() + string.slice(1); | |
} | |
function getRandomInt(min, max) { |