global-scss/_mixins.scss at master · zalora/global-scss · GitHub

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
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
//-------------------------------------
// Mixin Library
//-------------------------------------

/* Media queries */

@mixin media($breakpoint) {
    @media screen and (min-width: $breakpoint) {
        @content;
    }
}

@mixin media-height($breakpoint) {
    @media screen and (min-height: $breakpoint) {
        @content;
    }
}

// generic transform
@mixin transform($transforms) {
     -moz-transform: $transforms;
       -o-transform: $transforms;
      -ms-transform: $transforms;
  -webkit-transform: $transforms;
          transform: $transforms;
}
// rotate
@mixin rotate ($deg) {
  @include transform(rotate(#{$deg}deg));
}

// scale
@mixin scale($scale) {
   @include transform(scale($scale));
}
// translate
@mixin translate ($x, $y) {
   @include transform(translate($x, $y));
}
// skew
@mixin skew ($x, $y) {
   @include transform(skew(#{$x}deg, #{$y}deg));
}
//transform origin
@mixin transform-origin ($origin) {
      moz-transform-origin: $origin;
       -o-transform-origin: $origin;
      -ms-transform-origin: $origin;
  -webkit-transform-origin: $origin;
          transform-origin: $origin;
}

/* Keyframes & Animation*/

@mixin keyframes($animation-name) {
    @-webkit-keyframes #{$animation-name} {
        @content;
    }
    @-moz-keyframes #{$animation-name} {
        @content;
    }
    @-ms-keyframes #{$animation-name} {
        @content;
    }
    @-o-keyframes #{$animation-name} {
        @content;
    }
    @keyframes #{$animation-name} {
        @content;
    }
}

// animation
@mixin animation($str) {
    -webkit-animation: #{$str};
    -moz-animation: #{$str};
    -ms-animation: #{$str};
    -o-animation: #{$str};
    animation: #{$str};
}

// Input placeholder
@mixin placeholder {
    ::-webkit-input-placeholder {@content}
    :-moz-placeholder           {@content}
    ::-moz-placeholder          {@content}
    :-ms-input-placeholder      {@content}
}

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

@mixin ellipsis($max-height, $lines: 2) {
  // Fallback for non-webkit browsers.
  // Fallback does not render ellipsis.
  overflow: hidden;
  max-height: $max-height;

  // Webkit solution for multiline ellipsis
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: $lines;

  // Solution for Opera
  text-overflow: -o-ellipsis-lastline;
}

// Negative Margins
// In order to solve collisions between spaces and line-height
// pseudo elements couldn't be used, because of problems with overflow hidden!
@mixin negative-margins($font-size: 12px, $line-height: 1.6, $ignore-top: false) {
  line-height: $line-height;

  @if $ignore-top == false {
    margin-top: -$font-size * ($line-height - 1) / 2;
  }

  margin-bottom: -$font-size * ($line-height - 1) / 2;
}