-
Notifications
You must be signed in to change notification settings - Fork 0
/
mixins.scss
156 lines (138 loc) · 5.03 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
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
// -----------------------------------------------------------------------------
// This file contains all application-wide Sass mixins.
// -----------------------------------------------------------------------------
/*-------- Tints and Shades */
/// Slightly lighten a color
/// @access public
/// @param {Color} $color - color to tint
/// @param {Number} $percentage - percentage of `$color` in returned color
/// @return {Color}
@function tint($color, $percentage) {
@return mix(white, $color, $percentage);
}
/// Slightly darken a color
/// @access public
/// @param {Color} $color - color to shade
/// @param {Number} $percentage - percentage of `$color` in returned color
/// @return {Color}
@function shade($color, $percentage) {
@return mix(black, $color, $percentage);
}
/*----- Stop repetition for cross borwser support -------*/
@mixin border-radius($radius) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
border-radius: $radius;
}
@mixin transition($transition) {
-webkit-transition: $transition;
-moz-transition: $transition;
-o-transition: $transition;
transition: $transition;
}
@mixin background($gradient) {
background: -webkit-linear-gradient($gradient);
background: -moz-linear-gradient($gradient);
background: -o-linear-gradient($gradient);
background: linear-gradient($gradient);
}
@mixin background-gradient($gradient) {
background: -webkit-($gradient);
background: -moz-($gradient);
background: -o-($gradient);
background: ($gradient);
}
@mixin box-shadow($horizonatal, $vertical, $blur, $spread, $color) {
-webkit-box-shadow:$horizonatal $vertical $blur $spread $color;
-moz-box-shadow:$horizonatal $vertical $blur $spread $color;
box-shadow:$horizonatal $vertical $blur $spread $color;
}
@mixin translate($valueX, $valueY) {
-webkit-transform: translate($valueX, $valueY);
-ms-transform: translate($valueX, $valueY);
transform: translate($valueX, $valueY);
}
@mixin translateY($value) {
-webkit-transform: translateY($value);
-ms-transform: translateY($value);
transform: translateY($value);
}
@mixin translateX($value) {
-webkit-transform: translateX($value);
-ms-transform: translateX($value);
transform: translateX($value);
}
/*----- Reset Lists -----*/
@mixin list-reset(){
padding: 0;
margin: 0;
list-style: none;
}
/*--------- Style background images ---------------*/
@mixin background-image($image, $background-position, $background-repeat, $background-size) {
background: $image $background-position $background-repeat;
background-size: $background-size;
}
@mixin background-color-and-image($color, $image, $background-position, $background-repeat, $background-size) {
background: $color $image $background-position $background-repeat;
background-size: $background-size;
}
@mixin bg-blend($gradient, $image, $blend-mode,
$background-position, $background-repeat, $background-size,
$cover-color, $transparency) {
@include mq($until:piad) {
background: $image $background-position, $background-repeat;
background-size: $background-size;
box-shadow: inset 1600px 0 rgba(saturate(darken($cover-color,20%),40%),$transparency);
}
@include mq($from:piad) {
background-image: $gradient, $image;
background-position: $background-position;
background-repeat: $background-repeat;
background-blend-mode: $blend-mode;
background-size: $background-size;
@media screen\0 {
background: $image $background-position, $background-repeat;
background-size: $background-size;
box-shadow: inset 1600px 0 rgba(saturate(darken($cover-color,20%),40%),$transparency);
}
@supports (-ms-ime-align:auto) {
background: $image $background-position, $background-repeat;
background-size: $background-size;
box-shadow: inset 1600px 0 rgba(saturate(darken($cover-color,20%),40%),$transparency);
}
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
background: $image $background-position, $background-repeat;
background-size: $background-size;
box-shadow: inset 1600px 0 rgba(saturate(darken($cover-color,20%),40%),$transparency);
}
}
}
@mixin placeholder {
&::-webkit-input-placeholder {@content}
&::-moz-placeholder {@content}
&:-moz-placeholder {@content}
&:-ms-input-placeholder {@content}
&::placeholder {@content}
}
/*---------- scale and rotate objects ----------*/
@mixin transform($direction, $value) {
-webkit-transform: $direction+unquote('(') + $value + unquote(')');
-moz-transform: $direction+unquote('(') + $value + unquote(')');
-o-transform: $direction+unquote('(') + $value + unquote(')');
transform: $direction+unquote('(') + $value + unquote(')');
}
@mixin translate($valueX, $valueY) {
-webkit-transform: translate($valueX, $valueY);
-ms-transform: translate($valueX, $valueY);
transform: translate($valueX, $valueY);
}
// ---------- THEME mixins ---------- //
@mixin columns-text($columns, $gap) {
-webkit-column-count: $columns;
-moz-column-count: $columns;
column-count: $columns;
-webkit-column-gap: $gap;
-moz-column-gap: $gap;
column-gap: $gap;
}