@acorex/styles 16.0.6 → 16.0.7

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.
Files changed (2) hide show
  1. package/package.json +1 -1
  2. package/scss/menu.scss +120 -117
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@acorex/styles",
3
- "version": "16.0.6",
3
+ "version": "16.0.7",
4
4
  "description": "",
5
5
  "main": "index.js",
6
6
  "scripts": {
package/scss/menu.scss CHANGED
@@ -1,130 +1,133 @@
1
1
  .ax {
2
- &.nav-menu {
3
- list-style: none;
4
- margin: 0;
5
- padding: 0;
2
+ &.nav-menu {
3
+ list-style: none;
4
+ margin: 0;
5
+ padding: 0;
6
+ display: flex;
7
+ &.nav-vertical {
8
+ background-color: var(--ax-white-color);
9
+ flex-direction: column;
10
+ ul {
11
+ top: 0;
12
+ inset-inline-start: -9999px;
13
+ }
14
+
15
+ li {
16
+ width: 100%;
17
+ float: none;
18
+ text-align: right;
19
+ }
20
+ }
21
+ > li {
22
+ text-align: center;
23
+ padding: 0.5rem;
24
+ min-width: 2.375rem;
25
+ margin-inline-end: 0.5rem;
26
+ border-radius: var(--ax-size-border-radius);
27
+ .ax-menu-item,
28
+ .menu-item-start-side,
29
+ .menu-item-end-side {
6
30
  display: flex;
7
- &.nav-vertical {
8
- background-color: var(--ax-white-color);
9
- flex-direction: column;
10
- ul {
11
- top: 0;
12
- inset-inline-start: -9999px;
13
- }
31
+ align-items: center;
32
+ justify-content: space-between;
33
+ }
34
+ ul {
35
+ opacity: 0;
36
+ position: absolute;
37
+ top: 100%;
38
+ inset-inline-start: -9999px;
39
+ z-index: 50000;
40
+ -webkit-transition: opacity 0.3s;
41
+ transition: opacity 0.3s;
42
+ min-width: 12em;
43
+ li {
44
+ float: none;
14
45
 
15
- li {
16
- width: 100%;
17
- float: none;
18
- text-align: right;
46
+ &:hover {
47
+ > ul {
48
+ top: 0;
49
+ inset-inline-start: 100%;
19
50
  }
51
+ }
20
52
  }
21
- > li {
22
- text-align: center;
23
- padding: 0.5rem;
24
- min-width: 2.375rem;
25
- margin-inline-end: 0.5rem;
26
- border-radius: var(--ax-size-border-radius);
27
- .ax-menu-item,
28
- .menu-item-start-side,
29
- .menu-item-end-side {
30
- display: flex;
31
- align-items: center;
32
- justify-content: space-between;
33
- }
34
- ul {
35
- opacity: 0;
36
- position: absolute;
37
- top: 100%;
38
- inset-inline-start: -9999px;
39
- z-index: 50000;
40
- -webkit-transition: opacity 0.3s;
41
- transition: opacity 0.3s;
42
- min-width: 12em;
43
- li {
44
- float: none;
45
-
46
- &:hover {
47
- > ul {
48
- top: 0;
49
- inset-inline-start: 100%;
50
- }
51
- }
52
- }
53
- }
54
- :hover {
55
- > ul {
56
- inset-inline-start: 100%;
57
- }
58
- }
53
+ }
54
+ :hover {
55
+ > ul {
56
+ inset-inline-start: 100%;
59
57
  }
60
- li {
61
- cursor: pointer;
62
- position: relative;
58
+ }
59
+ }
60
+ li {
61
+ cursor: pointer;
62
+ position: relative;
63
63
 
64
- .ax-menu-item {
65
- height: 100%;
66
- display: inline-flex;
67
- align-items: center;
68
- justify-content: center;
69
- .menu-item-start-side {
70
- }
71
- .ax-menu-item-text {
72
- margin: 0 0.5rem;
73
- white-space: nowrap;
74
- }
64
+ .ax-menu-item {
65
+ height: 100%;
66
+ display: inline-flex;
67
+ align-items: center;
68
+ justify-content: center;
69
+ .menu-item-start-side {
70
+ }
71
+ .ax-menu-item-text {
72
+ margin: 0 0.5rem;
73
+ white-space: nowrap;
74
+ }
75
75
 
76
- .menu-item-end-side {
77
- }
78
- }
76
+ .menu-item-end-side {
77
+ }
78
+ }
79
79
 
80
- ul {
81
- list-style: none;
82
- margin: 0;
83
- padding: 0;
84
- background: #fff;
85
- border: 1px solid var(--ax-border-color);
86
- border-radius: var(--ax-size-border-radius);
87
- }
88
- &:hover {
89
- > ul {
90
- inset-inline-start: 0;
91
- opacity: 1;
92
- z-index: 1000;
93
- }
94
- }
95
- &.tooltip {
96
- position: relative;
97
- &:hover {
98
- &::before {
99
- display: block;
100
- }
101
- }
102
- &::before {
103
- content: attr(data-text);
104
- font-size: 0.875rem;
105
- position: absolute;
106
- bottom: -85%;
107
- inset-inline-start: 0;
108
- padding: 0.5rem 1rem;
109
- border-radius: var(--ax-size-border-radius);
110
- background: var(--ax-dark-color);
111
- color: var(--ax-dark-fore-color);
112
- text-align: center;
113
- display: none;
114
- z-index: 1;
115
- }
116
- }
80
+ ul {
81
+ list-style: none;
82
+ margin: 0;
83
+ padding: 0;
84
+ background: #fff;
85
+ border: 1px solid var(--ax-border-color);
86
+ border-radius: var(--ax-size-border-radius);
87
+ }
88
+ &:hover {
89
+ > ul {
90
+ inset-inline-start: 0;
91
+ opacity: 1;
92
+ z-index: 1000;
117
93
  }
118
- .ax-sub-menu {
119
- display: flex;
120
- flex-direction: column;
121
- li {
122
- padding: 0.5rem;
123
- .ax-menu-item {
124
- display: flex;
125
- justify-content: space-between;
126
- }
127
- }
94
+ }
95
+ &.tooltip {
96
+ position: relative;
97
+ &:hover {
98
+ &::before {
99
+ display: block;
100
+ }
101
+ }
102
+ &::before {
103
+ content: attr(data-text);
104
+ font-size: 0.875rem;
105
+ position: absolute;
106
+ bottom: -85%;
107
+ inset-inline-start: 0;
108
+ padding: 0.5rem 1rem;
109
+ border-radius: var(--ax-size-border-radius);
110
+ background: var(--ax-dark-color);
111
+ color: var(--ax-dark-fore-color);
112
+ text-align: center;
113
+ display: none;
114
+ z-index: 1;
115
+ }
116
+ }
117
+ }
118
+ .ax-sub-menu {
119
+ display: flex;
120
+ flex-direction: column;
121
+ li {
122
+ padding: 0.5rem;
123
+ .ax-menu-item {
124
+ display: flex;
125
+ justify-content: space-between;
128
126
  }
127
+ }
128
+ &.ax-float-bottom-end {
129
+ margin: 0px -110px;
130
+ }
129
131
  }
132
+ }
130
133
  }