@gitlab/ui 86.2.0 → 86.3.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/CHANGELOG.md +7 -0
- package/dist/index.css +1 -1
- package/dist/index.css.map +1 -1
- package/package.json +3 -3
- package/src/components/base/drawer/drawer.scss +14 -8
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@gitlab/ui",
|
|
3
|
-
"version": "86.
|
|
3
|
+
"version": "86.3.0",
|
|
4
4
|
"description": "GitLab UI Components",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"main": "dist/index.js",
|
|
@@ -170,8 +170,8 @@
|
|
|
170
170
|
"module-alias": "^2.2.2",
|
|
171
171
|
"npm-run-all": "^4.1.5",
|
|
172
172
|
"pikaday": "^1.8.0",
|
|
173
|
-
"playwright": "^1.45.
|
|
174
|
-
"playwright-core": "^1.45.
|
|
173
|
+
"playwright": "^1.45.1",
|
|
174
|
+
"playwright-core": "^1.45.1",
|
|
175
175
|
"plop": "^2.5.4",
|
|
176
176
|
"postcss": "8.4.28",
|
|
177
177
|
"postcss-loader": "^7.0.2",
|
|
@@ -1,8 +1,13 @@
|
|
|
1
1
|
$gl-drawer-width: 400px;
|
|
2
2
|
$gl-sidebar-width: 290px;
|
|
3
|
-
$gl-drawer-scrim-gradient: linear-gradient(
|
|
3
|
+
$gl-drawer-scrim-gradient: linear-gradient(
|
|
4
|
+
to bottom,
|
|
5
|
+
$transparent-rgba,
|
|
6
|
+
var(--drawer-variant-bg-color)
|
|
7
|
+
);
|
|
4
8
|
|
|
5
9
|
.gl-drawer {
|
|
10
|
+
background-color: var(--drawer-variant-bg-color);
|
|
6
11
|
right: 0;
|
|
7
12
|
@include gl-transition-medium;
|
|
8
13
|
position: fixed;
|
|
@@ -16,14 +21,14 @@ $gl-drawer-scrim-gradient: linear-gradient(to bottom, $transparent-rgba, $white)
|
|
|
16
21
|
@include gl-flex-direction-column;
|
|
17
22
|
|
|
18
23
|
.gl-drawer-header-sticky {
|
|
19
|
-
|
|
24
|
+
background-color: var(--drawer-variant-bg-color);
|
|
20
25
|
top: 0;
|
|
21
26
|
position: sticky;
|
|
22
27
|
}
|
|
23
28
|
}
|
|
24
29
|
|
|
25
30
|
.gl-drawer-default {
|
|
26
|
-
|
|
31
|
+
--drawer-variant-bg-color: var(--gl-background-color-default);
|
|
27
32
|
@include media-breakpoint-up(md) {
|
|
28
33
|
width: $gl-drawer-width;
|
|
29
34
|
}
|
|
@@ -35,7 +40,7 @@ $gl-drawer-scrim-gradient: linear-gradient(to bottom, $transparent-rgba, $white)
|
|
|
35
40
|
}
|
|
36
41
|
|
|
37
42
|
.gl-drawer-sidebar {
|
|
38
|
-
|
|
43
|
+
--drawer-variant-bg-color: var(--gl-background-color-subtle);
|
|
39
44
|
@include media-breakpoint-up(md) {
|
|
40
45
|
width: $gl-sidebar-width;
|
|
41
46
|
}
|
|
@@ -56,7 +61,7 @@ $gl-drawer-scrim-gradient: linear-gradient(to bottom, $transparent-rgba, $white)
|
|
|
56
61
|
|
|
57
62
|
.gl-drawer-footer {
|
|
58
63
|
@include gl-border-t-solid;
|
|
59
|
-
|
|
64
|
+
border-top-color: var(--gl-border-color-default);
|
|
60
65
|
@include gl-border-t-1;
|
|
61
66
|
@include gl-p-5;
|
|
62
67
|
}
|
|
@@ -76,18 +81,19 @@ $gl-drawer-scrim-gradient: linear-gradient(to bottom, $transparent-rgba, $white)
|
|
|
76
81
|
}
|
|
77
82
|
|
|
78
83
|
.gl-drawer-footer-sticky {
|
|
79
|
-
|
|
84
|
+
background-color: var(--drawer-variant-bg-color);
|
|
80
85
|
bottom: 0;
|
|
81
86
|
position: sticky;
|
|
82
87
|
}
|
|
83
88
|
|
|
84
89
|
.gl-drawer-header {
|
|
85
90
|
@include gl-border-b-solid;
|
|
86
|
-
|
|
91
|
+
border-bottom-color: var(--gl-border-color-default);
|
|
87
92
|
@include gl-border-b-1;
|
|
88
93
|
}
|
|
89
94
|
|
|
90
95
|
.gl-drawer-title {
|
|
96
|
+
color: var(--gl-text-color-heading);
|
|
91
97
|
@include gl-display-flex;
|
|
92
98
|
@include gl-align-items-center;
|
|
93
99
|
@include gl-justify-content-space-between;
|
|
@@ -127,7 +133,7 @@ $gl-drawer-scrim-gradient: linear-gradient(to bottom, $transparent-rgba, $white)
|
|
|
127
133
|
|
|
128
134
|
.gl-drawer-body > * {
|
|
129
135
|
@include gl-border-b-solid;
|
|
130
|
-
|
|
136
|
+
border-bottom-color: var(--gl-border-color-default);
|
|
131
137
|
@include gl-border-b-1;
|
|
132
138
|
|
|
133
139
|
&:last-child {
|