-
Notifications
You must be signed in to change notification settings - Fork 6
/
Copy pathmixins.scss
135 lines (123 loc) · 3.45 KB
/
mixins.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
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
126
127
128
129
130
131
132
133
134
135
@mixin rectangle($width, $height, $color) {
width: $width;
height: $height;
background: $color;
}
@mixin parallelogram($width, $height, $skew, $color) {
@include rectangle($width, $height, $color);
-webkit-transform: skew($skew);
-moz-transform: skew($skew);
-ms-transform: skew($skew);
-o-transform: skew($skew);
transform: skew($skew);
}
@mixin square($size, $color) {
@include rectangle($size, $size, $color);
}
@mixin circle($size, $color) {
@include square($size, $color);
-webkit-border-radius: $size / 2;
-moz-border-radius: $size / 2;
border-radius: $size / 2;
}
@mixin oval($width, $height, $color) {
width: $width;
height: $height;
-webkit-border-radius: #{$width} / #{$height};
-moz-border-radius: #{$width} / #{$height};
border-radius: #{$width} / #{$height};
background: $color;
}
@mixin triangle($size, $color, $direction: 'up') {
width: 0;
height: 0;
@if $direction == 'up' {
border-right: $size solid transparent;
border-bottom: $size * 1.732 solid $color;
border-left: $size solid transparent;
} @else if $direction == 'down' {
border-top: $size * 1.732 solid $color;
border-right: $size solid transparent;
border-left: $size solid transparent;
} @else if $direction == 'left' {
border-top: $size solid transparent;
border-right: $size * 1.732 solid $color;
border-bottom: $size solid transparent;
} @else if $direction == 'right' {
border-top: $size solid transparent;
border-bottom: $size solid transparent;
border-left: $size * 1.732 solid $color;
}
}
@mixin corner-triangle($size, $color, $corner: 'top-left') {
width: 0;
height: 0;
@if $corner == 'top-left' {
border-top: $size solid $color;
border-right: $size solid transparent;
} @else if $corner == 'top-right' {
border-top: $size solid $color;
border-left: $size solid transparent;
} @else if $corner == 'bottom-left' {
border-right: $size solid transparent;
border-bottom: $size solid $color;
} @else if $corner == 'bottom-right' {
border-bottom: $size solid $color;
border-left: $size solid transparent;
}
}
@mixin trapezoid($width, $color) {
width: $width;
height: 0;
border-right: $width / 2 solid transparent;
border-bottom: $width solid $color;
border-left: $width / 2 solid transparent;
}
@mixin chevron($width, $height, $skew, $color, $direction: 'up') {
position: relative;
width: $width;
height: $height;
@if $direction == 'down' {
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
} @else if $direction == 'left' {
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform: rotate(-90deg);
} @else if $direction == 'right' {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
}
&:before, &:after {
position: absolute;
top: 0;
width: 50%;
height: 100%;
background: $color;
content: '';
}
&:before {
left: 0;
-webkit-transform: skew(0deg, $skew);
-moz-transform: skew(0deg, $skew);
-ms-transform: skew(0deg, $skew);
-o-transform: skew(0deg, $skew);
transform: skew(0deg, $skew);
}
&:after {
right: 0;
-webkit-transform: skew(0deg, -$skew);
-moz-transform: skew(0deg, -$skew);
-ms-transform: skew(0deg, -$skew);
-o-transform: skew(0deg, -$skew);
transform: skew(0deg, -$skew);
}
}