@vanjana/vue-ui 0.1.87 → 0.1.89
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/theme-light.css +1 -1
- package/dist/types/directives/focus.directive.d.ts +2 -2
- package/dist/types/directives/index.d.ts +4 -3
- package/dist/types/directives/loading.directive.d.ts +2 -2
- package/dist/types/directives/resize.directive.d.ts +2 -2
- package/dist/types/directives/tooltip.directive.d.ts +26 -0
- package/dist/types/stories/components/tooltip.stories.d.ts +24 -0
- package/dist/vanjana-vue-ui.es.js +976 -908
- package/dist/vanjana-vue-ui.umd.js +1 -1
- package/dist/vue-ui.css +1 -1
- package/package.json +1 -1
- package/themes/common/_components.scss +2 -0
- package/themes/common/components/_shell.scss +27 -5
- package/themes/common/components/_tooltip.scss +24 -0
|
@@ -37,7 +37,7 @@
|
|
|
37
37
|
|
|
38
38
|
&.with-navigation {
|
|
39
39
|
main {
|
|
40
|
-
padding:
|
|
40
|
+
padding: var(--space-s) var(--space-m);
|
|
41
41
|
}
|
|
42
42
|
}
|
|
43
43
|
}
|
|
@@ -65,26 +65,48 @@
|
|
|
65
65
|
border-left: solid 5px transparent;
|
|
66
66
|
transition: all 0.2s ease;
|
|
67
67
|
|
|
68
|
-
.shell-navigation-icon {
|
|
69
|
-
font-size: 1.5rem;
|
|
70
|
-
}
|
|
71
|
-
|
|
72
68
|
@include useColor("navigation-item");
|
|
73
69
|
|
|
74
70
|
&:hover {
|
|
75
71
|
border-left: solid 5px currentColor;
|
|
76
72
|
@include useColor("navigation-hover");
|
|
73
|
+
|
|
74
|
+
.shell-navigation-item-label {
|
|
75
|
+
@include useColor("navigation-hover");
|
|
76
|
+
}
|
|
77
77
|
}
|
|
78
78
|
&.router-link-active {
|
|
79
79
|
border-left: solid 5px currentColor;
|
|
80
80
|
@include useColor("navigation-item-active");
|
|
81
|
+
|
|
82
|
+
.shell-navigation-item-label {
|
|
83
|
+
@include useColor("navigation-item-active");
|
|
84
|
+
}
|
|
81
85
|
}
|
|
82
86
|
}
|
|
83
87
|
}
|
|
88
|
+
.shell-navigation-item-button {
|
|
89
|
+
@include useColor("navigation-item");
|
|
90
|
+
|
|
91
|
+
&:hover {
|
|
92
|
+
@include useColor("navigation-hover");
|
|
93
|
+
|
|
94
|
+
.shell-navigation-item-label {
|
|
95
|
+
@include useColor("navigation-hover");
|
|
96
|
+
}
|
|
97
|
+
}
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
.shell-navigation-icon {
|
|
101
|
+
font-size: 1.5rem;
|
|
102
|
+
@include useColor("navigation-item");
|
|
103
|
+
}
|
|
84
104
|
|
|
85
105
|
.shell-navigation-item-label {
|
|
86
106
|
display: none;
|
|
107
|
+
@include useColor("navigation-item");
|
|
87
108
|
}
|
|
109
|
+
|
|
88
110
|
&.with-labels {
|
|
89
111
|
.shell-navigation-item-label {
|
|
90
112
|
display: inline;
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
@use "../mixins" as *;
|
|
2
|
+
|
|
3
|
+
.vj-tooltip {
|
|
4
|
+
@include useFont("secondary");
|
|
5
|
+
pointer-events: none;
|
|
6
|
+
display: inline-block;
|
|
7
|
+
padding: 6px 10px;
|
|
8
|
+
border-radius: 6px;
|
|
9
|
+
font-size: 0.85rem;
|
|
10
|
+
line-height: 1;
|
|
11
|
+
white-space: nowrap;
|
|
12
|
+
opacity: 0;
|
|
13
|
+
transform-origin: center;
|
|
14
|
+
transition:
|
|
15
|
+
opacity 160ms ease,
|
|
16
|
+
transform 160ms ease;
|
|
17
|
+
background: rgba(0, 0, 0, 0.82);
|
|
18
|
+
color: #fff;
|
|
19
|
+
box-shadow: var(--box-shadow-container, 0 6px 18px rgba(0, 0, 0, 0.12));
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
.vj-tooltip--visible {
|
|
23
|
+
opacity: 1;
|
|
24
|
+
}
|