@gitlab/ui 38.5.1 → 38.8.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 +21 -0
- package/dist/components/base/filtered_search/filtered_search.js +1 -0
- package/dist/index.css +1 -1
- package/dist/index.css.map +1 -1
- package/dist/utility_classes.css +1 -1
- package/dist/utility_classes.css.map +1 -1
- package/package.json +2 -1
- package/src/components/base/filtered_search/filtered_search.vue +1 -0
- package/src/components/base/form/form_input/form_input.scss +4 -5
- package/src/components/base/form/form_input/form_input.stories.js +6 -0
- package/src/components/base/modal/modal.stories.js +10 -13
- package/src/directives/outside/outside.stories.js +1 -0
- package/src/scss/typescale/typescale.stories.js +1 -0
- package/src/scss/utilities.scss +234 -104
- package/src/scss/utility-mixins/display.scss +36 -0
- package/src/scss/utility-mixins/sizing.scss +24 -0
- package/src/scss/utility-mixins/text.scss +12 -0
|
@@ -7,6 +7,12 @@
|
|
|
7
7
|
display: none;
|
|
8
8
|
}
|
|
9
9
|
|
|
10
|
+
@mixin gl-xs-display-none {
|
|
11
|
+
@include gl-media-breakpoint-down(sm) {
|
|
12
|
+
@include gl-display-none;
|
|
13
|
+
}
|
|
14
|
+
}
|
|
15
|
+
|
|
10
16
|
@mixin gl-sm-display-none {
|
|
11
17
|
@include gl-media-breakpoint-up(sm) {
|
|
12
18
|
@include gl-display-none;
|
|
@@ -29,6 +35,12 @@
|
|
|
29
35
|
display: flex;
|
|
30
36
|
}
|
|
31
37
|
|
|
38
|
+
@mixin gl-xs-display-flex {
|
|
39
|
+
@include gl-media-breakpoint-down(sm) {
|
|
40
|
+
@include gl-display-flex;
|
|
41
|
+
}
|
|
42
|
+
}
|
|
43
|
+
|
|
32
44
|
@mixin gl-sm-display-flex {
|
|
33
45
|
@include gl-media-breakpoint-up(sm) {
|
|
34
46
|
@include gl-display-flex;
|
|
@@ -51,6 +63,12 @@
|
|
|
51
63
|
display: inline-flex;
|
|
52
64
|
}
|
|
53
65
|
|
|
66
|
+
@mixin gl-xs-display-inline-flex {
|
|
67
|
+
@include gl-media-breakpoint-down(sm) {
|
|
68
|
+
@include gl-display-inline-flex;
|
|
69
|
+
}
|
|
70
|
+
}
|
|
71
|
+
|
|
54
72
|
@mixin gl-sm-display-inline-flex {
|
|
55
73
|
@include gl-media-breakpoint-up(sm) {
|
|
56
74
|
@include gl-display-inline-flex;
|
|
@@ -73,6 +91,12 @@
|
|
|
73
91
|
display: block;
|
|
74
92
|
}
|
|
75
93
|
|
|
94
|
+
@mixin gl-xs-display-block {
|
|
95
|
+
@include gl-media-breakpoint-down(sm) {
|
|
96
|
+
@include gl-display-block;
|
|
97
|
+
}
|
|
98
|
+
}
|
|
99
|
+
|
|
76
100
|
@mixin gl-sm-display-block {
|
|
77
101
|
@include gl-media-breakpoint-up(sm) {
|
|
78
102
|
@include gl-display-block;
|
|
@@ -95,6 +119,12 @@
|
|
|
95
119
|
display: inline;
|
|
96
120
|
}
|
|
97
121
|
|
|
122
|
+
@mixin gl-xs-display-inline {
|
|
123
|
+
@include gl-media-breakpoint-down(sm) {
|
|
124
|
+
@include gl-display-inline;
|
|
125
|
+
}
|
|
126
|
+
}
|
|
127
|
+
|
|
98
128
|
@mixin gl-sm-display-inline {
|
|
99
129
|
@include gl-media-breakpoint-up(sm) {
|
|
100
130
|
@include gl-display-inline;
|
|
@@ -117,6 +147,12 @@
|
|
|
117
147
|
display: inline-block;
|
|
118
148
|
}
|
|
119
149
|
|
|
150
|
+
@mixin gl-xs-display-inline-block {
|
|
151
|
+
@include gl-media-breakpoint-down(sm) {
|
|
152
|
+
@include gl-display-inline-block;
|
|
153
|
+
}
|
|
154
|
+
}
|
|
155
|
+
|
|
120
156
|
@mixin gl-sm-display-inline-block {
|
|
121
157
|
@include gl-media-breakpoint-up(sm) {
|
|
122
158
|
@include gl-display-inline-block;
|
|
@@ -128,6 +128,24 @@
|
|
|
128
128
|
}
|
|
129
129
|
}
|
|
130
130
|
|
|
131
|
+
@mixin gl-sm-w-full {
|
|
132
|
+
@include gl-media-breakpoint-up(sm) {
|
|
133
|
+
@include gl-w-full;
|
|
134
|
+
}
|
|
135
|
+
}
|
|
136
|
+
|
|
137
|
+
@mixin gl-md-w-full {
|
|
138
|
+
@include gl-media-breakpoint-up(md) {
|
|
139
|
+
@include gl-w-full;
|
|
140
|
+
}
|
|
141
|
+
}
|
|
142
|
+
|
|
143
|
+
@mixin gl-lg-w-full {
|
|
144
|
+
@include gl-media-breakpoint-up(lg) {
|
|
145
|
+
@include gl-w-full;
|
|
146
|
+
}
|
|
147
|
+
}
|
|
148
|
+
|
|
131
149
|
@mixin gl-w-max-content {
|
|
132
150
|
width: max-content;
|
|
133
151
|
}
|
|
@@ -343,6 +361,12 @@
|
|
|
343
361
|
* - Utilities should strictly follow $gl-spacing-scale
|
|
344
362
|
*/
|
|
345
363
|
|
|
364
|
+
@mixin gl-md-max-w-26 {
|
|
365
|
+
@include gl-media-breakpoint-up(md) {
|
|
366
|
+
max-width: $gl-spacing-scale-26;
|
|
367
|
+
}
|
|
368
|
+
}
|
|
369
|
+
|
|
346
370
|
@mixin gl-md-max-w-15p {
|
|
347
371
|
@include gl-media-breakpoint-up(md) {
|
|
348
372
|
max-width: 15%;
|
|
@@ -93,6 +93,18 @@
|
|
|
93
93
|
white-space: pre-line;
|
|
94
94
|
}
|
|
95
95
|
|
|
96
|
+
/**
|
|
97
|
+
* Responsive White-space utilities
|
|
98
|
+
*
|
|
99
|
+
* naming convention: gl-{breakpoint}-white-space-{value}
|
|
100
|
+
*/
|
|
101
|
+
|
|
102
|
+
@mixin gl-md-white-space-nowrap {
|
|
103
|
+
@include gl-media-breakpoint-up(md) {
|
|
104
|
+
white-space: nowrap;
|
|
105
|
+
}
|
|
106
|
+
}
|
|
107
|
+
|
|
96
108
|
/**
|
|
97
109
|
* Word utilities.
|
|
98
110
|
*
|