@acusti/uikit-docs 0.3.0 → 0.3.1
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/CHANGELOG.md +7 -0
- package/package.json +1 -1
- package/stories/Dropdown.css +119 -71
- package/stories/Dropdown.stories.tsx +1 -1
package/CHANGELOG.md
CHANGED
package/package.json
CHANGED
package/stories/Dropdown.css
CHANGED
|
@@ -1,65 +1,106 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
box-sizing: border-box;
|
|
6
|
-
width: 110px;
|
|
1
|
+
#storybook-root,
|
|
2
|
+
.sb-story > div {
|
|
3
|
+
display: flex;
|
|
4
|
+
flex-direction: column;
|
|
7
5
|
}
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
6
|
+
|
|
7
|
+
#storybook-root {
|
|
8
|
+
&:has(.position-right.uktdropdown) {
|
|
9
|
+
align-items: center;
|
|
10
|
+
justify-content: center;
|
|
11
|
+
height: calc(200vh - 110px);
|
|
12
|
+
width: calc(200vw - 270px);
|
|
13
|
+
}
|
|
13
14
|
}
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
15
|
+
|
|
16
|
+
.sb-story {
|
|
17
|
+
&:has(.position-right.uktdropdown) {
|
|
18
|
+
height: 350px;
|
|
19
|
+
width: 100%;
|
|
20
|
+
overflow: auto;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
> div {
|
|
24
|
+
&:has(.position-right.uktdropdown) {
|
|
25
|
+
align-items: center;
|
|
26
|
+
justify-content: center;
|
|
27
|
+
height: 670px;
|
|
28
|
+
width: calc(200% - 190px);
|
|
29
|
+
}
|
|
30
|
+
}
|
|
18
31
|
}
|
|
19
32
|
|
|
20
|
-
.
|
|
21
|
-
|
|
22
|
-
font-size: 12px;
|
|
23
|
-
text-transform: uppercase;
|
|
24
|
-
letter-spacing: 1px;
|
|
25
|
-
font-weight: 700;
|
|
26
|
-
margin: 0.75rem 0 0.5rem;
|
|
33
|
+
.sb-story {
|
|
34
|
+
min-height: 180px;
|
|
27
35
|
}
|
|
28
36
|
|
|
29
|
-
.uktdropdown
|
|
30
|
-
|
|
37
|
+
.uktdropdown input {
|
|
38
|
+
box-sizing: border-box;
|
|
39
|
+
width: 110px;
|
|
31
40
|
}
|
|
32
41
|
|
|
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
|
-
|
|
42
|
+
.uktdropdown-body {
|
|
43
|
+
ul {
|
|
44
|
+
text-align: left;
|
|
45
|
+
list-style-type: none;
|
|
46
|
+
padding-left: 0px;
|
|
47
|
+
margin: 0px;
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
li {
|
|
51
|
+
padding: 4px 8px;
|
|
52
|
+
margin: 4px 0;
|
|
53
|
+
white-space: nowrap;
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
.heading {
|
|
57
|
+
color: #aaa;
|
|
58
|
+
font-size: 12px;
|
|
59
|
+
text-transform: uppercase;
|
|
60
|
+
letter-spacing: 1px;
|
|
61
|
+
font-weight: 700;
|
|
62
|
+
margin: 0.75rem 0 0.5rem;
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
&:first-child {
|
|
66
|
+
margin-top: 0.25rem;
|
|
67
|
+
}
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
.no-trigger-text {
|
|
71
|
+
.uktdropdown-trigger {
|
|
72
|
+
position: relative;
|
|
73
|
+
margin-left: 3px;
|
|
74
|
+
width: 27px;
|
|
75
|
+
height: 21px;
|
|
76
|
+
vertical-align: top;
|
|
77
|
+
|
|
78
|
+
&:before {
|
|
79
|
+
content: "";
|
|
80
|
+
display: block;
|
|
81
|
+
position: absolute;
|
|
82
|
+
width: 9px;
|
|
83
|
+
height: 2px;
|
|
84
|
+
top: 10px;
|
|
85
|
+
left: 4px;
|
|
86
|
+
border-radius: 2px 0 0 3px;
|
|
87
|
+
background-color: #666;
|
|
88
|
+
transform: rotateZ(38deg);
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
&:after {
|
|
92
|
+
content: "";
|
|
93
|
+
display: block;
|
|
94
|
+
position: absolute;
|
|
95
|
+
width: 9px;
|
|
96
|
+
height: 2px;
|
|
97
|
+
top: 10px;
|
|
98
|
+
right: 4px;
|
|
99
|
+
border-radius: 0 2px 2px 0;
|
|
100
|
+
background-color: #666;
|
|
101
|
+
transform: rotateZ(-38deg);
|
|
102
|
+
}
|
|
103
|
+
}
|
|
63
104
|
}
|
|
64
105
|
|
|
65
106
|
.font-weight {
|
|
@@ -72,19 +113,30 @@
|
|
|
72
113
|
color: #fff;
|
|
73
114
|
}
|
|
74
115
|
|
|
75
|
-
.searchable-with-label
|
|
76
|
-
.searchable-
|
|
77
|
-
|
|
78
|
-
|
|
116
|
+
.searchable-with-label,
|
|
117
|
+
.searchable-and-allow-create {
|
|
118
|
+
input,
|
|
119
|
+
.uktdropdown-body {
|
|
120
|
+
width: 85px;
|
|
121
|
+
}
|
|
122
|
+
|
|
123
|
+
.uktdropdown-body {
|
|
124
|
+
left: revert;
|
|
125
|
+
right: anchor(right);
|
|
126
|
+
}
|
|
79
127
|
}
|
|
80
128
|
|
|
81
|
-
.
|
|
82
|
-
|
|
129
|
+
.css-value-input-trigger {
|
|
130
|
+
.uktdropdown-body {
|
|
131
|
+
width: 110px;
|
|
132
|
+
left: revert;
|
|
133
|
+
right: anchor(right);
|
|
134
|
+
margin-right: 14px;
|
|
135
|
+
}
|
|
83
136
|
}
|
|
84
137
|
|
|
85
|
-
.
|
|
86
|
-
|
|
87
|
-
align-self: center;
|
|
138
|
+
.dropdown-without-items .uktdropdown-body {
|
|
139
|
+
width: 300px;
|
|
88
140
|
}
|
|
89
141
|
|
|
90
142
|
.textarea-trigger .uktdropdown-body {
|
|
@@ -101,16 +153,12 @@
|
|
|
101
153
|
}
|
|
102
154
|
|
|
103
155
|
.overlapping-dropdown .uktdropdown-body {
|
|
104
|
-
top: -
|
|
105
|
-
left: -
|
|
156
|
+
margin-top: -22px;
|
|
157
|
+
margin-left: -10px;
|
|
106
158
|
width: 250px;
|
|
107
159
|
min-height: 200px;
|
|
108
160
|
}
|
|
109
161
|
|
|
110
|
-
.out-of-bounds-example.uktdropdown {
|
|
111
|
-
position: absolute;
|
|
112
|
-
bottom: 50px;
|
|
113
|
-
}
|
|
114
162
|
.out-of-bounds-example input {
|
|
115
163
|
width: 150px;
|
|
116
164
|
}
|
|
@@ -120,8 +168,8 @@
|
|
|
120
168
|
}
|
|
121
169
|
|
|
122
170
|
.position-right.uktdropdown {
|
|
123
|
-
position: absolute;
|
|
124
|
-
right: 65px;
|
|
171
|
+
/* position: absolute;
|
|
172
|
+
right: 65px; */
|
|
125
173
|
}
|
|
126
174
|
|
|
127
175
|
.out-of-bounds-example.no-direction-change.uktdropdown {
|
|
@@ -425,7 +425,7 @@ export const OutOfBoundsAtRight: Story = {
|
|
|
425
425
|
className: 'out-of-bounds-example position-right',
|
|
426
426
|
isSearchable: true,
|
|
427
427
|
name: 'outofboundsatright',
|
|
428
|
-
placeholder: '
|
|
428
|
+
placeholder: 'Fill available space',
|
|
429
429
|
},
|
|
430
430
|
};
|
|
431
431
|
|