add https://github.com/mgarciaisaia mention to readme
[2048.git] / style / helpers.scss
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
// Exponent
// From: https://github.com/Team-Sass/Sassy-math/blob/master/sass/math.scss#L36

@function exponent($base, $exponent) {
  // reset value
  $value: $base;
  // positive intergers get multiplied
  @if $exponent > 1 {
    @for $i from 2 through $exponent {
      $value: $value * $base; } }
  // negitive intergers get divided. A number divided by itself is 1
  @if $exponent < 1 {
    @for $i from 0 through -$exponent {
      $value: $value / $base; } }
  // return the last value written
  @return $value;
}

@function pow($base, $exponent) {
  @return exponent($base, $exponent);
}

// Transition mixins
@mixin transition($args...) {
  -webkit-transition: $args;
  -moz-transition: $args;
  transition: $args;
}

@mixin transition-property($args...) {
  -webkit-transition-property: $args;
  -moz-transition-property: $args;
  transition-property: $args;
}

@mixin animation($args...) {
  -webkit-animation: $args;
  -moz-animation: $args;
  animation: $args;
}

@mixin animation-fill-mode($args...) {
  -webkit-animation-fill-mode: $args;
  -moz-animation-fill-mode: $args;
  animation-fill-mode: $args;
}

@mixin transform($args...) {
  -webkit-transform: $args;
  -moz-transform: $args;
  transform: $args;
}

// Keyframe animations
@mixin keyframes($animation-name) {
  @-webkit-keyframes $animation-name {
    @content;
  }
  @-moz-keyframes $animation-name {
    @content;
  }
  @keyframes $animation-name {
    @content;
  }
}

// Media queries
@mixin smaller($width) {
  @media screen and (max-width: $width) {
    @content;
  }
}

// Clearfix
@mixin clearfix {
  &:after {
    content: "";
    display: block;
    clear: both;
  }
}

comments