wave-ui 1.42.1 → 1.44.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/wave-ui.cjs.js +1 -1
- package/dist/wave-ui.css +1 -1
- package/dist/wave-ui.es.js +310 -147
- package/dist/wave-ui.umd.js +1 -1
- package/package.json +1 -1
- package/src/wave-ui/components/index.js +2 -1
- package/src/wave-ui/components/w-app.vue +42 -2
- package/src/wave-ui/components/w-card.vue +19 -5
- package/src/wave-ui/components/w-confirm.vue +103 -0
- package/src/wave-ui/components/w-icon.vue +1 -3
- package/src/wave-ui/components/w-menu.vue +90 -49
- package/src/wave-ui/components/w-tooltip.vue +11 -8
- package/src/wave-ui/scss/_mixins.scss +100 -0
- package/src/wave-ui/scss/_variables.scss +0 -9
- package/src/wave-ui/scss/index.scss +1 -0
- package/src/wave-ui/utils/index.js +11 -0
|
@@ -0,0 +1,100 @@
|
|
|
1
|
+
@mixin default-transition($duration: $transition-duration, $delay: 0s) {
|
|
2
|
+
transition: $duration $delay ease-in-out;
|
|
3
|
+
}
|
|
4
|
+
|
|
5
|
+
@mixin out-back-transition($duration: $transition-duration, $delay: 0s) {
|
|
6
|
+
transition: $duration $delay cubic-bezier(0.18, 0.89, 0.32, 1.28);
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
/**
|
|
10
|
+
* Generates a triangle arrow on the edge of an element.
|
|
11
|
+
*
|
|
12
|
+
* @param $color: the color to apply to the triangle.
|
|
13
|
+
* @param $selector: the element selector that receives the modifiers (--top, --left, etc.).
|
|
14
|
+
* @param $size: the triangle size at the base.
|
|
15
|
+
* @param $thickness: the border thickness, 0 to remove the border.
|
|
16
|
+
*/
|
|
17
|
+
@mixin triangle($color: white, $selector: '', $size: 7px, $thickness: 1px) {
|
|
18
|
+
@if ($thickness > 0) {
|
|
19
|
+
// The underneath border triangle.
|
|
20
|
+
&:before {
|
|
21
|
+
content: '';
|
|
22
|
+
position: absolute;
|
|
23
|
+
width: 0;
|
|
24
|
+
height: 0;
|
|
25
|
+
border: $size solid transparent;
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
&#{$selector}--top:before {
|
|
29
|
+
top: 100%;
|
|
30
|
+
left: 50%;
|
|
31
|
+
border-top-color: inherit;
|
|
32
|
+
transform: translateX(-50%);
|
|
33
|
+
margin-top: 0;
|
|
34
|
+
}
|
|
35
|
+
&#{$selector}--bottom:before {
|
|
36
|
+
bottom: 100%;
|
|
37
|
+
left: 50%;
|
|
38
|
+
border-bottom-color: inherit;
|
|
39
|
+
transform: translateX(-50%);
|
|
40
|
+
margin-bottom: 0;
|
|
41
|
+
}
|
|
42
|
+
&#{$selector}--left:before {
|
|
43
|
+
left: 100%;
|
|
44
|
+
top: 50%;
|
|
45
|
+
border-left-color: inherit;
|
|
46
|
+
transform: translateY(-50%);
|
|
47
|
+
margin-left: 0;
|
|
48
|
+
}
|
|
49
|
+
&#{$selector}--right:before {
|
|
50
|
+
right: 100%;
|
|
51
|
+
top: 50%;
|
|
52
|
+
border-right-color: inherit;
|
|
53
|
+
transform: translateY(-50%);
|
|
54
|
+
margin-right: 0;
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
&#{$selector}--align-top:before {transform: none;top: (2 * $base-increment) - 1px;}
|
|
58
|
+
&#{$selector}--align-bottom:before {transform: none;top: auto;bottom: (2 * $base-increment) - 1px;}
|
|
59
|
+
&#{$selector}--align-left:before {transform: none;left: (2 * $base-increment) - 1px;}
|
|
60
|
+
&#{$selector}--align-right:before {transform: none;left: auto;right: (2 * $base-increment) - 1px;}
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
// The colored triangle on top of `:before`.
|
|
64
|
+
&:after {
|
|
65
|
+
content: '';
|
|
66
|
+
position: absolute;
|
|
67
|
+
width: 0;
|
|
68
|
+
height: 0;
|
|
69
|
+
border: ($size - $thickness) solid transparent;
|
|
70
|
+
}
|
|
71
|
+
&#{$selector}--top:after {
|
|
72
|
+
top: 100%;
|
|
73
|
+
left: 50%;
|
|
74
|
+
border-top-color: $color;
|
|
75
|
+
transform: translateX(-50%);
|
|
76
|
+
}
|
|
77
|
+
&#{$selector}--bottom:after {
|
|
78
|
+
bottom: 100%;
|
|
79
|
+
left: 50%;
|
|
80
|
+
border-bottom-color: $color;
|
|
81
|
+
transform: translateX(-50%);
|
|
82
|
+
}
|
|
83
|
+
&#{$selector}--left:after {
|
|
84
|
+
left: 100%;
|
|
85
|
+
top: 50%;
|
|
86
|
+
border-left-color: $color;
|
|
87
|
+
transform: translateY(-50%);
|
|
88
|
+
}
|
|
89
|
+
&#{$selector}--right:after {
|
|
90
|
+
right: 100%;
|
|
91
|
+
top: 50%;
|
|
92
|
+
border-right-color: $color;
|
|
93
|
+
transform: translateY(-50%);
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
&#{$selector}--align-top:after {transform: none;top: 2 * $base-increment;}
|
|
97
|
+
&#{$selector}--align-bottom:after {transform: none;top: auto;bottom: 2 * $base-increment;}
|
|
98
|
+
&#{$selector}--align-left:after {transform: none;left: 2 * $base-increment;}
|
|
99
|
+
&#{$selector}--align-right:after {transform: none;left: auto;right: 2 * $base-increment;}
|
|
100
|
+
}
|
|
@@ -28,15 +28,6 @@ $form-field-height: round(2 * $base-font-size) !default;
|
|
|
28
28
|
// Always an even number for better vertical alignment. (Used in checkbox, radio, switch)
|
|
29
29
|
$small-form-el-size: round(divide(1.3 * $base-font-size, 2)) * 2 !default;
|
|
30
30
|
|
|
31
|
-
// Mixins.
|
|
32
|
-
@mixin default-transition($duration: $transition-duration, $delay: 0s) {
|
|
33
|
-
transition: $duration $delay ease-in-out;
|
|
34
|
-
}
|
|
35
|
-
|
|
36
|
-
@mixin out-back-transition($duration: $transition-duration, $delay: 0s) {
|
|
37
|
-
transition: $duration $delay cubic-bezier(0.18, 0.89, 0.32, 1.28);
|
|
38
|
-
}
|
|
39
|
-
|
|
40
31
|
// COMPONENTS DEFAULTS.
|
|
41
32
|
// ========================================================
|
|
42
33
|
// w-drawer.
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Takes CSS classes as a string array or object and turn them into an object.
|
|
3
|
+
*
|
|
4
|
+
* @param {String|Array|Object} classes the CSS classes to merge into an object
|
|
5
|
+
* @return {Object}
|
|
6
|
+
*/
|
|
7
|
+
export const objectifyClasses = (classes = {}) => {
|
|
8
|
+
if (typeof classes === 'string') classes = { [classes]: true }
|
|
9
|
+
else if (typeof classes === 'array') classes = { [classes.join(' ')]: true }
|
|
10
|
+
return classes
|
|
11
|
+
}
|