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
|
@import 'theme';
// Variables
// @oo-ui-default-image-ext set during build
// @oo-ui-distribution set during build
@oo-ui-default-image-path: 'images';
// Mixins
.oo-ui-background-image( @url ) {
background-image: e('/* @embed */') url(~'@{url}');
}
.oo-ui-background-image-svg2( @svg, @fallback ) when ( @oo-ui-distribution = mixed ) {
background-image: url(@fallback);
background-image: -webkit-linear-gradient(transparent, transparent), e('/* @embed */') url(@svg);
background-image: linear-gradient(transparent, transparent), e('/* @embed */') url(@svg);
background-image: -o-linear-gradient(transparent, transparent), url(@fallback);
}
.oo-ui-background-image-svg2( @svg, @fallback ) when ( @oo-ui-distribution = vector ) {
.oo-ui-background-image(@svg);
}
.oo-ui-background-image-svg2( @svg, @fallback ) when ( @oo-ui-distribution = raster ) {
.oo-ui-background-image(@fallback);
}
.oo-ui-background-image-svg( @url-without-extension ) {
@svg: '@{url-without-extension}.svg';
@fallback: '@{url-without-extension}.@{oo-ui-default-image-ext}';
.oo-ui-background-image-svg2(@svg, @fallback);
}
.oo-ui-force-webkit-gpu() {
-webkit-transform: translate3d(0, 0, 0);
}
.oo-ui-animation( @value1, @value2: X, ... ) {
@value: ~`"@{arguments}".replace(/[\[\]]|\,\sX/g, '')`;
-webkit-animation: @value;
-moz-animation: @value;
-ms-animation: @value;
-o-animation: @value;
animation: @value;
}
.oo-ui-transition( @value1, @value2: X, ... ) {
@value: ~`"@{arguments}".replace(/[\[\]]|\,\sX/g, '')`;
-webkit-transition: @value;
-moz-transition: @value;
-ms-transition: @value;
-o-transition: @value;
transition: @value;
}
.oo-ui-transform( @string ) {
-webkit-transform: @string;
-moz-transform: @string;
-ms-transform: @string;
-o-transform: @string;
transform: @string;
}
.oo-ui-box-sizing( @type: border-box ) {
-webkit-box-sizing: @type;
-moz-box-sizing: @type;
box-sizing: @type;
}
.oo-ui-vertical-gradient( @start: #EEE, @stop: #FFF ) {
background: mix(@start, @stop, 50%);
filter: e(%("progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='%d', endColorstr='%d')", @start, @stop));
background-image: -webkit-gradient(linear, right top, right bottom, color-stop(0%, @start), color-stop(100%, @stop));
background-image: -webkit-linear-gradient(top, @start 0%, @stop 100%);
background-image: -moz-linear-gradient(top, @start 0%, @stop 100%);
background-image: -ms-linear-gradient(top, @start 0%, @stop 100%);
background-image: -o-linear-gradient(top, @start 0%, @stop 100%);
background-image: linear-gradient(top, @start 0%, @stop 100%);
}
.oo-ui-unselectable() {
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.oo-ui-selectable() {
-webkit-touch-callout: default;
-webkit-user-select: all;
-moz-user-select: all;
-ms-user-select: all;
user-select: all;
}
.oo-ui-inline-spacing( @spacing, @cancelled-spacing: 0 ) {
margin-right: @spacing;
&:last-child {
margin-right: @cancelled-spacing;
}
}
|
