UNPKG

vuesax

Version:

Framework Components for Vue js

lusaxweb.github.io/vuesax/

lusaxweb/vuesax

135 lines (115 loc) • 3.86 kB
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
// get color ver css getColor(colorx, alpha = 1) unquote("rgba(var(--vs-"+colorx+"), "+alpha+")") getVar(var) unquote("var(--vs-"+var+")") /** * dirValue * this mixin is for the properties that take "right" or "left" as value * it will automatically create two classes: * vuesax-app-is-rtl forwared with class in RTL case * vuesax-app-is-ltr forwared with class in LTR case * the value passed will be used in LTR case and the opposite will be assigned automatically * for the RTL * example: .someClass dirValue(float, left) [Compiled] .vuesax-app-is-rtl .someClass float: right .vuesax-app-is-ltr .someClass float: left * */ dirValue(prop, value) rtDir=right if value == right rtDir=left .vuesax-app-is-rtl & {prop}: rtDir .vuesax-app-is-ltr & {prop}: value /** * propWithDir * this mixin is for the properties that have direction like "margin-left" or "padding-left" * as explained above it will automatically create two classes * @params: * - prop ==> is the property name [eg: 'margin'] * - dir ==> is the direction of the property [eg: 'left' or 'right'] * - value ==> is the value (value will be assigned to LTR class) [eg: '10px'] * - otherValues ==> any others value you want to pass [eg: '!important', if the propery is transform you may pass some thing like 'rotate(20deg) skew(10deg)' ] * if you want to use the mixin with transform, the mixin work with translate by default * when using transform you should pass: * transform as your first parameter * null as your second parameter (since transform dose not take direction in its definiton) * the value you want to pass in the third parameter, but you must pass it as array [eg: (10px 10px)] * the mixin will convert the first value (x-asis) to negative [eg: (10px 10px) ==> (-10px 10px)] * example using the mixin with transform: .someClass propWithDir(transform, null, (10px)) [Compiled] .vuesax-app-is-rtl .someClass transform: translate(-10px, 10px) .vuesax-app-is-ltr .someClass transform: translate(10px, 10px) * in case of using the mixin with justify-content * a class with the opposite value will be assigned to RTL * in case of using the mixin with right or left property * a class with the oppoiste property will be assigned to RTL * eg: .someClass propWithValue(right, null, 0px) [Compiled] .vuesax-app-is-rtl .someClass left: 0px .vuesax-app-is-ltr .someClass right: 0px */ propWithDir(prop, dir = null, value = null, otherValues = null) if prop == transform rtlTransDir = (0px 0px) rtlTransDir[1] = value[1] || rtlTransDir[1] rtlTransDir[0] = value[0] * -1 .vuesax-app-is-rtl & transform: translate(rtlTransDir[0], rtlTransDir[1]) otherValues .vuesax-app-is-ltr & transform: translate(value[0], value[1] || rtlTransDir[1]) otherValues // justify-content case else if prop == justify-content rtlVal = '' if value == flex-start rtlVal = flex-end else rtlVal = flex-start .vuesax-app-is-rtl & justify-content: rtlVal otherValues .vuesax-app-is-ltr & justify-content: value otherValues // right or left properties case else if prop == right || prop == left rtlProp = '' if prop == right rtlProp = left else rtlProp = right .vuesax-app-is-rtl & {rtlProp}: value otherValues .vuesax-app-is-ltr & {prop}: value otherValues // default case else rtlDir=right if dir == right rtlDir=left .vuesax-app-is-rtl & {prop}-{rtlDir}: value otherValues .vuesax-app-is-ltr & {prop}-{dir}: value otherValues