slippers-ui 3.0.0-alpha.2 → 3.0.0-alpha.3

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 (10) hide show
  1. package/.vscode/extensions.json +3 -0
  2. package/README.md +29 -62
  3. package/dist/slippers-ui.es.js +29 -257
  4. package/dist/style.css +1 -1
  5. package/package.json +32 -26
  6. package/assets/css/_variables.scss +0 -354
  7. package/assets/css/base.scss +0 -154
  8. package/dist/favicon.ico +0 -0
  9. package/dist/package.json +0 -46
  10. package/dist/robots.txt +0 -1
package/.vscode/extensions.json ADDED
@@ -0,0 +1,3 @@
1
+ {
2
+ "recommendations": ["Vue.volar"]
3
+ }
package/README.md CHANGED
@@ -1,75 +1,42 @@
1
- # Nuxt Minimal Starter
1
+ # Slippers UI - GitLab's Marketing Design System
2
2
 
3
- Look at the [Nuxt documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.
3
+ Slippers is the open-source GitLab Marketing Web Design System. It was created in the spirit of ["everyone can contribute"](https://about.gitlab.com/company/mission/#everyone-can-contribute).
4
4
 
5
- ## Setup
5
+ ## Resources:
6
6
 
7
- Make sure to install dependencies:
7
+ - Storybook: https://gitlab-com.gitlab.io/marketing/digital-experience/slippers-ui/.
8
+ - Figma: https://www.figma.com/file/nWIOpmuMp7RZXmfTj6ujAF/Slippers_foundations.
9
+ - GitLab project: https://gitlab.com/gitlab-com/marketing/digital-experience/slippers-ui.
10
+ - Further documentation: https://about.gitlab.com/handbook/marketing/digital-experience/slippers-design-system/.
8
11
 
9
- ```bash
10
- # npm
11
- npm install
12
+ ## Gettings started with Slippers:
12
13
 
13
- # pnpm
14
- pnpm install
14
+ ### Local development
15
15
 
16
- # yarn
17
- yarn install
16
+ Slippers uses [Storybook](https://storybook.js.org/) to enable component exploration.
18
17
 
19
- # bun
20
- bun install
21
- ```
18
+ [Yarn](https://yarnpkg.com/) is the preferred package manager.
22
19
 
23
- ## Development Server
20
+ **Running Storybook locally:**
24
21
 
25
- Start the development server on `http://localhost:3000`:
22
+ 1. Clone the [Slippers project](https://gitlab.com/gitlab-com/marketing/digital-experience/slippers-ui).
23
+ 2. Install the dependecies using the version of node specified in [.npmrc](https://gitlab.com/gitlab-com/marketing/digital-experience/slippers-ui/-/blob/main/.npmrc) - `npm install`.
24
+ 3. Run Storybook - `yarn storybook`.
25
+ 4. Storybook should now be running at: http://localhost:6009/.
26
26
 
27
- ```bash
28
- # npm
29
- npm run dev
27
+ **Updating the slippers-ui NPM package**
30
28
 
31
- # pnpm
32
- pnpm dev
29
+ 1. Make changes to slippers-ui.
30
+ 2. If needed, create/update .stories so Storybook is upto date.
31
+ 3. Increment the version number in package.json.
32
+ 4. If needed, add component into install.js (this adds components into the build).
33
+ 5. Build /dist folder - `yarn build-library`.
34
+ 6. Publish to NPM - `yarn publish`.
35
+ 7. You can optionally publish using `sh scripts/publish.sh`. Note that you must have `jq` installed. This attempts to run Step 5 and 6 and validate all of this process for you.
36
+ 8. Merge changes into origin/main.
37
+ 9. Once the package has been published it's now ready to be updated in the consuming repositories (Example: Buyer Experience, be-navigation, etc.).
33
38
 
34
- # yarn
35
- yarn dev
39
+ **Importing slippers-ui into your project:**
36
40
 
37
- # bun
38
- bun run dev
39
- ```
40
-
41
- ## Production
42
-
43
- Build the application for production:
44
-
45
- ```bash
46
- # npm
47
- npm run build
48
-
49
- # pnpm
50
- pnpm build
51
-
52
- # yarn
53
- yarn build
54
-
55
- # bun
56
- bun run build
57
- ```
58
-
59
- Locally preview production build:
60
-
61
- ```bash
62
- # npm
63
- npm run preview
64
-
65
- # pnpm
66
- pnpm preview
67
-
68
- # yarn
69
- yarn preview
70
-
71
- # bun
72
- bun run preview
73
- ```
74
-
75
- Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.
41
+ - With NPM `npm install slippers-ui` OR with YARN `yarn add slippers-ui`
42
+ - Slippers main entry point is /dist/slippers-core.umd.min.js, [example usage](https://gitlab.com/gitlab-com/marketing/digital-experience/buyer-experience/-/blob/main/plugins/slippers-ui.ts). To import the styling for the above components, the compiled css file can be found at: /dist/slippers-core.css.
package/dist/slippers-ui.es.js CHANGED
@@ -1,262 +1,34 @@
1
- import { defineComponent as u, computed as f, openBlock as s, createElementBlock as a, mergeProps as v, renderSlot as t, normalizeClass as l, createElementVNode as n, createBlock as $, resolveDynamicComponent as h, withCtx as m, createCommentVNode as y } from "vue";
2
- const g = u({
3
- name: "SlpButton",
1
+ import { defineComponent as c, computed as u, openBlock as r, createElementBlock as a, mergeProps as l, renderSlot as p } from "vue";
2
+ const d = ["href"], f = /* @__PURE__ */ c({
3
+ __name: "SlpButton",
4
4
  props: {
5
- disabled: {
6
- type: Boolean,
7
- required: !1,
8
- default: !1
9
- },
10
- variant: {
11
- type: String,
12
- required: !1,
13
- default: "primary"
14
- },
15
- href: {
16
- type: String,
17
- required: !1,
18
- default: ""
19
- }
5
+ disabled: { type: Boolean },
6
+ variant: {},
7
+ href: {}
20
8
  },
21
- setup(e) {
22
- return {
23
- className: f(() => {
24
- let r = [`slp-btn-${e.variant}`];
25
- return e.disabled && r.push("slp-btn-disabled"), r.join(" ");
26
- })
27
- };
9
+ setup(o) {
10
+ const e = o, s = u(() => {
11
+ let t = [`slp-btn-${e.variant}`];
12
+ return e.disabled && t.push("slp-btn-disabled"), t.join(" ");
13
+ });
14
+ return (t, n) => e.href ? (r(), a("a", l({ key: 0 }, t.$attrs, {
15
+ class: ["slp-btn", s.value],
16
+ href: e.href
17
+ }), [
18
+ p(t.$slots, "default", {}, void 0, !0)
19
+ ], 16, d)) : (r(), a("button", l({ key: 1 }, t.$attrs, {
20
+ class: ["slp-btn", s.value],
21
+ type: "button"
22
+ }), [
23
+ p(t.$slots, "default", {}, void 0, !0)
24
+ ], 16));
28
25
  }
29
- }), c = (e, o) => {
30
- const r = e.__vccOpts || e;
31
- for (const [d, i] of o)
32
- r[d] = i;
33
- return r;
34
- }, b = ["href"];
35
- function _(e, o, r, d, i, p) {
36
- return e.href ? (s(), a("a", v({ key: 0 }, e.$attrs, {
37
- class: ["slp-btn", e.className],
38
- href: e.href
39
- }), [
40
- t(e.$slots, "default", {}, void 0, !0)
41
- ], 16, b)) : (s(), a("button", v({ key: 1 }, e.$attrs, {
42
- class: ["slp-btn", e.className],
43
- type: "button"
44
- }), [
45
- t(e.$slots, "default", {}, void 0, !0)
46
- ], 16));
47
- }
48
- const H = /* @__PURE__ */ c(g, [["render", _], ["__scopeId", "data-v-92377259"]]), k = u({
49
- name: "SlpColumn",
50
- props: {
51
- cols: {
52
- type: Number,
53
- required: !1,
54
- default: null
55
- },
56
- size: {
57
- type: String,
58
- required: !1,
59
- default: "md"
60
- }
61
- },
62
- setup(e) {
63
- return {
64
- className: f(() => e.cols ? `slp-col-${e.size}-${e.cols}` : `slp-col-${e.size}`)
65
- };
66
- }
67
- });
68
- function N(e, o, r, d, i, p) {
69
- return s(), a("div", {
70
- class: l(e.className)
71
- }, [
72
- t(e.$slots, "default", {}, void 0, !0)
73
- ], 2);
74
- }
75
- const J = /* @__PURE__ */ c(k, [["render", N], ["__scopeId", "data-v-6de89156"]]), S = u({
76
- name: "SlpContainer",
77
- props: {
78
- fluid: {
79
- type: Boolean,
80
- required: !1,
81
- default: !1
82
- },
83
- variant: {
84
- type: String,
85
- required: !1,
86
- default: "white"
87
- }
88
- },
89
- setup(e) {
90
- return {
91
- className: f(() => e.fluid ? "fluid" : "")
92
- };
93
- }
94
- }), q = {
95
- key: 0,
96
- class: "slp-full-light-purple-background"
97
- }, w = {
98
- key: 1,
99
- class: "slp-charcoal-grey-background"
100
- }, C = {
101
- key: 2,
102
- class: "slp-gradient-background"
103
- }, B = {
104
- key: 3,
105
- class: "slp-full-gradient-background"
106
- }, I = {
107
- key: 4,
108
- class: "slp-full-charcoal-background"
109
- }, z = {
110
- key: 5,
111
- class: "slp-partial-charcoal-background"
112
- }, E = {
113
- key: 6,
114
- class: "slp-half-grey-background"
115
- }, R = {
116
- key: 7,
117
- class: "slp-partial-white-background"
118
- }, T = {
119
- key: 8,
120
- class: "slp-partial-grey-background"
121
- };
122
- function V(e, o, r, d, i, p) {
123
- return e.variant === "light-purple-100" ? (s(), a("div", q, [
124
- n("div", {
125
- class: l(["slp-container", e.className])
126
- }, [
127
- t(e.$slots, "default", {}, void 0, !0)
128
- ], 2)
129
- ])) : e.variant === "grey-100" ? (s(), a("div", w, [
130
- n("div", {
131
- class: l(["slp-container", e.className])
132
- }, [
133
- t(e.$slots, "default", {}, void 0, !0)
134
- ], 2)
135
- ])) : e.variant === "gradient" ? (s(), a("div", C, [
136
- n("div", {
137
- class: l(["slp-container", e.className])
138
- }, [
139
- t(e.$slots, "default", {}, void 0, !0)
140
- ], 2)
141
- ])) : e.variant === "gradient-full" ? (s(), a("div", B, [
142
- n("div", {
143
- class: l(["slp-container", e.className])
144
- }, [
145
- t(e.$slots, "default", {}, void 0, !0)
146
- ], 2)
147
- ])) : e.variant === "charcoal-100" ? (s(), a("div", I, [
148
- n("div", {
149
- class: l(["slp-container", e.className])
150
- }, [
151
- t(e.$slots, "default", {}, void 0, !0)
152
- ], 2)
153
- ])) : e.variant === "charcoal-75" ? (s(), a("div", z, [
154
- n("div", {
155
- class: l(["slp-container", e.className])
156
- }, [
157
- t(e.$slots, "default", {}, void 0, !0)
158
- ], 2)
159
- ])) : e.variant === "grey-50" ? (s(), a("div", E, [
160
- n("div", {
161
- class: l(["slp-container", e.className])
162
- }, [
163
- t(e.$slots, "default", {}, void 0, !0)
164
- ], 2)
165
- ])) : e.variant === "white-75" ? (s(), a("div", R, [
166
- n("div", {
167
- class: l(["slp-container", e.className])
168
- }, [
169
- t(e.$slots, "default", {}, void 0, !0)
170
- ], 2)
171
- ])) : e.variant === "grey-75" ? (s(), a("div", T, [
172
- n("div", {
173
- class: l(["slp-container", e.className])
174
- }, [
175
- t(e.$slots, "default", {}, void 0, !0)
176
- ], 2)
177
- ])) : (s(), a("div", {
178
- key: 9,
179
- class: l(["slp-container", e.className])
180
- }, [
181
- t(e.$slots, "default", {}, void 0, !0)
182
- ], 2));
183
- }
184
- const K = /* @__PURE__ */ c(S, [["render", V], ["__scopeId", "data-v-6286b621"]]), W = {};
185
- function j(e, o) {
186
- return s(), a("h1", null, " Welcome Nuxt to Storybook ");
187
- }
188
- const L = /* @__PURE__ */ c(W, [["render", j]]), D = u({
189
- name: "SlpRow"
190
- }), M = { class: "slp-row" };
191
- function O(e, o, r, d, i, p) {
192
- return s(), a("div", M, [
193
- t(e.$slots, "default", {}, void 0, !0)
194
- ]);
195
- }
196
- const Q = /* @__PURE__ */ c(D, [["render", O], ["__scopeId", "data-v-0fbd2157"]]), P = u({
197
- name: "SlpTypography",
198
- props: {
199
- variant: {
200
- type: String,
201
- required: !1,
202
- default: "body1",
203
- validator: (e) => [
204
- "display1",
205
- "heading1",
206
- "heading2",
207
- "heading3",
208
- "heading4",
209
- "heading5",
210
- "heading1-bold",
211
- "heading2-bold",
212
- "heading3-bold",
213
- "heading4-bold",
214
- "heading5-bold",
215
- "body1",
216
- "body2",
217
- "body3",
218
- "body1-bold",
219
- "body2-bold",
220
- "body3-bold",
221
- "all-caps",
222
- "arrow",
223
- "quotes",
224
- "emphasis"
225
- ].includes(e)
226
- },
227
- tag: {
228
- type: String,
229
- required: !1,
230
- default: "span",
231
- validator: (e) => ["span", "h1", "h2", "h3", "h4", "p", "div"].includes(e)
232
- }
233
- },
234
- setup(e) {
235
- return {
236
- className: f(() => `slp-text-${e.variant}`)
237
- };
238
- }
239
- }), A = {
240
- key: 0,
241
- class: "arrow-symbol"
242
- };
243
- function F(e, o, r, d, i, p) {
244
- return s(), $(h(e.tag), {
245
- class: l(e.className)
246
- }, {
247
- default: m(() => [
248
- t(e.$slots, "default", {}, void 0, !0),
249
- e.variant === "arrow" ? (s(), a("span", A, "→")) : y("", !0)
250
- ]),
251
- _: 3
252
- }, 8, ["class"]);
253
- }
254
- const U = /* @__PURE__ */ c(P, [["render", F], ["__scopeId", "data-v-5f7bd974"]]);
26
+ }), i = (o, e) => {
27
+ const s = o.__vccOpts || o;
28
+ for (const [t, n] of e)
29
+ s[t] = n;
30
+ return s;
31
+ }, b = /* @__PURE__ */ i(f, [["__scopeId", "data-v-6f224ce6"]]);
255
32
  export {
256
- H as Button,
257
- J as Column,
258
- K as Container,
259
- L as MyWelcome,
260
- Q as Row,
261
- U as Typography
33
+ b as SlpButton
262
34
  };
package/dist/style.css CHANGED
@@ -1 +1 @@
1
- .slp-btn[data-v-92377259]{box-sizing:border-box;font-family:Inter,"sans-serif";min-width:68px;display:inline-flex;align-items:center;text-align:center;vertical-align:middle;padding:11px 16px;text-decoration:none;border-radius:4px;font-weight:600;font-size:18px;line-height:20px;transition:.3s cubic-bezier(.7,0,.3,1) background-color}.slp-btn[data-v-92377259]:hover{cursor:pointer}.slp-btn-primary[data-v-92377259]{background-color:#171321;color:#fff;border:1px solid #171321}.slp-btn-primary[data-v-92377259]:hover{background-color:#fff;color:#171321;border:1px solid #171321}.slp-btn-primary.slp-btn-disabled[data-v-92377259]{background-color:#d1d0d3;border:1px solid #D1D0D3;color:#74717a}.slp-btn-primary.slp-btn-disabled[data-v-92377259]:hover{background-color:#d1d0d3;cursor:default}.slp-btn-secondary[data-v-92377259]{background-color:#fff;color:#171321;border:none}.slp-btn-secondary[data-v-92377259]:hover{border:none;outline:none;background-color:#e8e7eb;color:#171321}.slp-btn-secondary.slp-btn-disabled[data-v-92377259]{color:#d1d0d3}.slp-btn-secondary.slp-btn-disabled[data-v-92377259]:hover{background-color:#fff;cursor:default}.slp-btn-tertiary[data-v-92377259]{color:#171321;border:none;padding-left:0;text-decoration:underline;text-underline-offset:2px;text-decoration-color:transparent;-webkit-text-decoration:none;transition:all .2s ease-in-out}.slp-btn-tertiary[data-v-92377259]:hover{text-decoration-color:#171321;-webkit-text-decoration:underline}.slp-btn-tertiary:hover .slp-icon[data-v-92377259]{transform:translate(8px)}.slp-btn-tertiary .slp-icon[data-v-92377259]{margin-left:4px;transition:transform .2s ease-in-out}.slp-btn-tertiary.slp-btn-disabled[data-v-92377259]{color:#d1d0d3;text-decoration:none}.slp-btn-tertiary.slp-btn-disabled[data-v-92377259]:hover{background-color:#fff;cursor:default}.slp-btn-tertiary.slp-btn-disabled:hover .slp-icon[data-v-92377259]{transform:none}.slp-btn-icon[data-v-92377259]{min-width:unset;font-size:0px;line-height:unset;border:none;background-color:transparent;padding:8px}.slp-btn-icon.slp-btn-disabled[data-v-92377259]{pointer-events:none;opacity:.5}.slp-btn-ghost[data-v-92377259]{border:none;background-color:transparent;padding:8px;font-size:inherit;font-weight:inherit;line-height:inherit}.slp-btn-ghost.slp-btn-disabled[data-v-92377259]{pointer-events:none;opacity:.5}@media (max-width: 0px){.slp-col-xs[data-v-6de89156],.slp-col-xs-1[data-v-6de89156]{width:inherit;max-width:100%}}@media (min-width: 0px){.slp-col-xs-1[data-v-6de89156]{position:relative;width:100%;min-height:1px;flex:0 0 8.3333333333%;max-width:8.3333333333%}.slp-col-xs[data-v-6de89156]{flex-basis:0;flex-grow:1;position:relative;width:100%;min-height:1px;max-width:100%}}@media (max-width: 576px){.slp-col-sm[data-v-6de89156],.slp-col-sm-1[data-v-6de89156]{width:inherit;max-width:100%}}@media (min-width: 576px){.slp-col-sm-1[data-v-6de89156]{position:relative;width:100%;min-height:1px;flex:0 0 8.3333333333%;max-width:8.3333333333%}.slp-col-sm[data-v-6de89156]{flex-basis:0;flex-grow:1;position:relative;width:100%;min-height:1px;max-width:100%}}@media (max-width: 768px){.slp-col-md[data-v-6de89156],.slp-col-md-1[data-v-6de89156]{width:inherit;max-width:100%}}@media (min-width: 768px){.slp-col-md-1[data-v-6de89156]{position:relative;width:100%;min-height:1px;flex:0 0 8.3333333333%;max-width:8.3333333333%}.slp-col-md[data-v-6de89156]{flex-basis:0;flex-grow:1;position:relative;width:100%;min-height:1px;max-width:100%}}@media (max-width: 1025px){.slp-col-lg[data-v-6de89156],.slp-col-lg-1[data-v-6de89156]{width:inherit;max-width:100%}}@media (min-width: 1025px){.slp-col-lg-1[data-v-6de89156]{position:relative;width:100%;min-height:1px;flex:0 0 8.3333333333%;max-width:8.3333333333%}.slp-col-lg[data-v-6de89156]{flex-basis:0;flex-grow:1;position:relative;width:100%;min-height:1px;max-width:100%}}@media (max-width: 1200px){.slp-col-xl[data-v-6de89156],.slp-col-xl-1[data-v-6de89156]{width:inherit;max-width:100%}}@media (min-width: 1200px){.slp-col-xl-1[data-v-6de89156]{position:relative;width:100%;min-height:1px;flex:0 0 8.3333333333%;max-width:8.3333333333%}.slp-col-xl[data-v-6de89156]{flex-basis:0;flex-grow:1;position:relative;width:100%;min-height:1px;max-width:100%}}@media (max-width: 1400px){.slp-col-2xl[data-v-6de89156],.slp-col-2xl-1[data-v-6de89156]{width:inherit;max-width:100%}}@media (min-width: 1400px){.slp-col-2xl-1[data-v-6de89156]{position:relative;width:100%;min-height:1px;flex:0 0 8.3333333333%;max-width:8.3333333333%}.slp-col-2xl[data-v-6de89156]{flex-basis:0;flex-grow:1;position:relative;width:100%;min-height:1px;max-width:100%}}@media (max-width: 0px){.slp-col-xs[data-v-6de89156],.slp-col-xs-2[data-v-6de89156]{width:inherit;max-width:100%}}@media (min-width: 0px){.slp-col-xs-2[data-v-6de89156]{position:relative;width:100%;min-height:1px;flex:0 0 16.6666666667%;max-width:16.6666666667%}.slp-col-xs[data-v-6de89156]{flex-basis:0;flex-grow:1;position:relative;width:100%;min-height:1px;max-width:100%}}@media (max-width: 576px){.slp-col-sm[data-v-6de89156],.slp-col-sm-2[data-v-6de89156]{width:inherit;max-width:100%}}@media (min-width: 576px){.slp-col-sm-2[data-v-6de89156]{position:relative;width:100%;min-height:1px;flex:0 0 16.6666666667%;max-width:16.6666666667%}.slp-col-sm[data-v-6de89156]{flex-basis:0;flex-grow:1;position:relative;width:100%;min-height:1px;max-width:100%}}@media (max-width: 768px){.slp-col-md[data-v-6de89156],.slp-col-md-2[data-v-6de89156]{width:inherit;max-width:100%}}@media (min-width: 768px){.slp-col-md-2[data-v-6de89156]{position:relative;width:100%;min-height:1px;flex:0 0 16.6666666667%;max-width:16.6666666667%}.slp-col-md[data-v-6de89156]{flex-basis:0;flex-grow:1;position:relative;width:100%;min-height:1px;max-width:100%}}@media (max-width: 1025px){.slp-col-lg[data-v-6de89156],.slp-col-lg-2[data-v-6de89156]{width:inherit;max-width:100%}}@media (min-width: 1025px){.slp-col-lg-2[data-v-6de89156]{position:relative;width:100%;min-height:1px;flex:0 0 16.6666666667%;max-width:16.6666666667%}.slp-col-lg[data-v-6de89156]{flex-basis:0;flex-grow:1;position:relative;width:100%;min-height:1px;max-width:100%}}@media (max-width: 1200px){.slp-col-xl[data-v-6de89156],.slp-col-xl-2[data-v-6de89156]{width:inherit;max-width:100%}}@media (min-width: 1200px){.slp-col-xl-2[data-v-6de89156]{position:relative;width:100%;min-height:1px;flex:0 0 16.6666666667%;max-width:16.6666666667%}.slp-col-xl[data-v-6de89156]{flex-basis:0;flex-grow:1;position:relative;width:100%;min-height:1px;max-width:100%}}@media (max-width: 1400px){.slp-col-2xl[data-v-6de89156],.slp-col-2xl-2[data-v-6de89156]{width:inherit;max-width:100%}}@media (min-width: 1400px){.slp-col-2xl-2[data-v-6de89156]{position:relative;width:100%;min-height:1px;flex:0 0 16.6666666667%;max-width:16.6666666667%}.slp-col-2xl[data-v-6de89156]{flex-basis:0;flex-grow:1;position:relative;width:100%;min-height:1px;max-width:100%}}@media (max-width: 0px){.slp-col-xs[data-v-6de89156],.slp-col-xs-3[data-v-6de89156]{width:inherit;max-width:100%}}@media (min-width: 0px){.slp-col-xs-3[data-v-6de89156]{position:relative;width:100%;min-height:1px;flex:0 0 25%;max-width:25%}.slp-col-xs[data-v-6de89156]{flex-basis:0;flex-grow:1;position:relative;width:100%;min-height:1px;max-width:100%}}@media (max-width: 576px){.slp-col-sm[data-v-6de89156],.slp-col-sm-3[data-v-6de89156]{width:inherit;max-width:100%}}@media (min-width: 576px){.slp-col-sm-3[data-v-6de89156]{position:relative;width:100%;min-height:1px;flex:0 0 25%;max-width:25%}.slp-col-sm[data-v-6de89156]{flex-basis:0;flex-grow:1;position:relative;width:100%;min-height:1px;max-width:100%}}@media (max-width: 768px){.slp-col-md[data-v-6de89156],.slp-col-md-3[data-v-6de89156]{width:inherit;max-width:100%}}@media (min-width: 768px){.slp-col-md-3[data-v-6de89156]{position:relative;width:100%;min-height:1px;flex:0 0 25%;max-width:25%}.slp-col-md[data-v-6de89156]{flex-basis:0;flex-grow:1;position:relative;width:100%;min-height:1px;max-width:100%}}@media (max-width: 1025px){.slp-col-lg[data-v-6de89156],.slp-col-lg-3[data-v-6de89156]{width:inherit;max-width:100%}}@media (min-width: 1025px){.slp-col-lg-3[data-v-6de89156]{position:relative;width:100%;min-height:1px;flex:0 0 25%;max-width:25%}.slp-col-lg[data-v-6de89156]{flex-basis:0;flex-grow:1;position:relative;width:100%;min-height:1px;max-width:100%}}@media (max-width: 1200px){.slp-col-xl[data-v-6de89156],.slp-col-xl-3[data-v-6de89156]{width:inherit;max-width:100%}}@media (min-width: 1200px){.slp-col-xl-3[data-v-6de89156]{position:relative;width:100%;min-height:1px;flex:0 0 25%;max-width:25%}.slp-col-xl[data-v-6de89156]{flex-basis:0;flex-grow:1;position:relative;width:100%;min-height:1px;max-width:100%}}@media (max-width: 1400px){.slp-col-2xl[data-v-6de89156],.slp-col-2xl-3[data-v-6de89156]{width:inherit;max-width:100%}}@media (min-width: 1400px){.slp-col-2xl-3[data-v-6de89156]{position:relative;width:100%;min-height:1px;flex:0 0 25%;max-width:25%}.slp-col-2xl[data-v-6de89156]{flex-basis:0;flex-grow:1;position:relative;width:100%;min-height:1px;max-width:100%}}@media (max-width: 0px){.slp-col-xs[data-v-6de89156],.slp-col-xs-4[data-v-6de89156]{width:inherit;max-width:100%}}@media (min-width: 0px){.slp-col-xs-4[data-v-6de89156]{position:relative;width:100%;min-height:1px;flex:0 0 33.3333333333%;max-width:33.3333333333%}.slp-col-xs[data-v-6de89156]{flex-basis:0;flex-grow:1;position:relative;width:100%;min-height:1px;max-width:100%}}@media (max-width: 576px){.slp-col-sm[data-v-6de89156],.slp-col-sm-4[data-v-6de89156]{width:inherit;max-width:100%}}@media (min-width: 576px){.slp-col-sm-4[data-v-6de89156]{position:relative;width:100%;min-height:1px;flex:0 0 33.3333333333%;max-width:33.3333333333%}.slp-col-sm[data-v-6de89156]{flex-basis:0;flex-grow:1;position:relative;width:100%;min-height:1px;max-width:100%}}@media (max-width: 768px){.slp-col-md[data-v-6de89156],.slp-col-md-4[data-v-6de89156]{width:inherit;max-width:100%}}@media (min-width: 768px){.slp-col-md-4[data-v-6de89156]{position:relative;width:100%;min-height:1px;flex:0 0 33.3333333333%;max-width:33.3333333333%}.slp-col-md[data-v-6de89156]{flex-basis:0;flex-grow:1;position:relative;width:100%;min-height:1px;max-width:100%}}@media (max-width: 1025px){.slp-col-lg[data-v-6de89156],.slp-col-lg-4[data-v-6de89156]{width:inherit;max-width:100%}}@media (min-width: 1025px){.slp-col-lg-4[data-v-6de89156]{position:relative;width:100%;min-height:1px;flex:0 0 33.3333333333%;max-width:33.3333333333%}.slp-col-lg[data-v-6de89156]{flex-basis:0;flex-grow:1;position:relative;width:100%;min-height:1px;max-width:100%}}@media (max-width: 1200px){.slp-col-xl[data-v-6de89156],.slp-col-xl-4[data-v-6de89156]{width:inherit;max-width:100%}}@media (min-width: 1200px){.slp-col-xl-4[data-v-6de89156]{position:relative;width:100%;min-height:1px;flex:0 0 33.3333333333%;max-width:33.3333333333%}.slp-col-xl[data-v-6de89156]{flex-basis:0;flex-grow:1;position:relative;width:100%;min-height:1px;max-width:100%}}@media (max-width: 1400px){.slp-col-2xl[data-v-6de89156],.slp-col-2xl-4[data-v-6de89156]{width:inherit;max-width:100%}}@media (min-width: 1400px){.slp-col-2xl-4[data-v-6de89156]{position:relative;width:100%;min-height:1px;flex:0 0 33.3333333333%;max-width:33.3333333333%}.slp-col-2xl[data-v-6de89156]{flex-basis:0;flex-grow:1;position:relative;width:100%;min-height:1px;max-width:100%}}@media (max-width: 0px){.slp-col-xs[data-v-6de89156],.slp-col-xs-5[data-v-6de89156]{width:inherit;max-width:100%}}@media (min-width: 0px){.slp-col-xs-5[data-v-6de89156]{position:relative;width:100%;min-height:1px;flex:0 0 41.6666666667%;max-width:41.6666666667%}.slp-col-xs[data-v-6de89156]{flex-basis:0;flex-grow:1;position:relative;width:100%;min-height:1px;max-width:100%}}@media (max-width: 576px){.slp-col-sm[data-v-6de89156],.slp-col-sm-5[data-v-6de89156]{width:inherit;max-width:100%}}@media (min-width: 576px){.slp-col-sm-5[data-v-6de89156]{position:relative;width:100%;min-height:1px;flex:0 0 41.6666666667%;max-width:41.6666666667%}.slp-col-sm[data-v-6de89156]{flex-basis:0;flex-grow:1;position:relative;width:100%;min-height:1px;max-width:100%}}@media (max-width: 768px){.slp-col-md[data-v-6de89156],.slp-col-md-5[data-v-6de89156]{width:inherit;max-width:100%}}@media (min-width: 768px){.slp-col-md-5[data-v-6de89156]{position:relative;width:100%;min-height:1px;flex:0 0 41.6666666667%;max-width:41.6666666667%}.slp-col-md[data-v-6de89156]{flex-basis:0;flex-grow:1;position:relative;width:100%;min-height:1px;max-width:100%}}@media (max-width: 1025px){.slp-col-lg[data-v-6de89156],.slp-col-lg-5[data-v-6de89156]{width:inherit;max-width:100%}}@media (min-width: 1025px){.slp-col-lg-5[data-v-6de89156]{position:relative;width:100%;min-height:1px;flex:0 0 41.6666666667%;max-width:41.6666666667%}.slp-col-lg[data-v-6de89156]{flex-basis:0;flex-grow:1;position:relative;width:100%;min-height:1px;max-width:100%}}@media (max-width: 1200px){.slp-col-xl[data-v-6de89156],.slp-col-xl-5[data-v-6de89156]{width:inherit;max-width:100%}}@media (min-width: 1200px){.slp-col-xl-5[data-v-6de89156]{position:relative;width:100%;min-height:1px;flex:0 0 41.6666666667%;max-width:41.6666666667%}.slp-col-xl[data-v-6de89156]{flex-basis:0;flex-grow:1;position:relative;width:100%;min-height:1px;max-width:100%}}@media (max-width: 1400px){.slp-col-2xl[data-v-6de89156],.slp-col-2xl-5[data-v-6de89156]{width:inherit;max-width:100%}}@media (min-width: 1400px){.slp-col-2xl-5[data-v-6de89156]{position:relative;width:100%;min-height:1px;flex:0 0 41.6666666667%;max-width:41.6666666667%}.slp-col-2xl[data-v-6de89156]{flex-basis:0;flex-grow:1;position:relative;width:100%;min-height:1px;max-width:100%}}@media (max-width: 0px){.slp-col-xs[data-v-6de89156],.slp-col-xs-6[data-v-6de89156]{width:inherit;max-width:100%}}@media (min-width: 0px){.slp-col-xs-6[data-v-6de89156]{position:relative;width:100%;min-height:1px;flex:0 0 50%;max-width:50%}.slp-col-xs[data-v-6de89156]{flex-basis:0;flex-grow:1;position:relative;width:100%;min-height:1px;max-width:100%}}@media (max-width: 576px){.slp-col-sm[data-v-6de89156],.slp-col-sm-6[data-v-6de89156]{width:inherit;max-width:100%}}@media (min-width: 576px){.slp-col-sm-6[data-v-6de89156]{position:relative;width:100%;min-height:1px;flex:0 0 50%;max-width:50%}.slp-col-sm[data-v-6de89156]{flex-basis:0;flex-grow:1;position:relative;width:100%;min-height:1px;max-width:100%}}@media (max-width: 768px){.slp-col-md[data-v-6de89156],.slp-col-md-6[data-v-6de89156]{width:inherit;max-width:100%}}@media (min-width: 768px){.slp-col-md-6[data-v-6de89156]{position:relative;width:100%;min-height:1px;flex:0 0 50%;max-width:50%}.slp-col-md[data-v-6de89156]{flex-basis:0;flex-grow:1;position:relative;width:100%;min-height:1px;max-width:100%}}@media (max-width: 1025px){.slp-col-lg[data-v-6de89156],.slp-col-lg-6[data-v-6de89156]{width:inherit;max-width:100%}}@media (min-width: 1025px){.slp-col-lg-6[data-v-6de89156]{position:relative;width:100%;min-height:1px;flex:0 0 50%;max-width:50%}.slp-col-lg[data-v-6de89156]{flex-basis:0;flex-grow:1;position:relative;width:100%;min-height:1px;max-width:100%}}@media (max-width: 1200px){.slp-col-xl[data-v-6de89156],.slp-col-xl-6[data-v-6de89156]{width:inherit;max-width:100%}}@media (min-width: 1200px){.slp-col-xl-6[data-v-6de89156]{position:relative;width:100%;min-height:1px;flex:0 0 50%;max-width:50%}.slp-col-xl[data-v-6de89156]{flex-basis:0;flex-grow:1;position:relative;width:100%;min-height:1px;max-width:100%}}@media (max-width: 1400px){.slp-col-2xl[data-v-6de89156],.slp-col-2xl-6[data-v-6de89156]{width:inherit;max-width:100%}}@media (min-width: 1400px){.slp-col-2xl-6[data-v-6de89156]{position:relative;width:100%;min-height:1px;flex:0 0 50%;max-width:50%}.slp-col-2xl[data-v-6de89156]{flex-basis:0;flex-grow:1;position:relative;width:100%;min-height:1px;max-width:100%}}@media (max-width: 0px){.slp-col-xs[data-v-6de89156],.slp-col-xs-7[data-v-6de89156]{width:inherit;max-width:100%}}@media (min-width: 0px){.slp-col-xs-7[data-v-6de89156]{position:relative;width:100%;min-height:1px;flex:0 0 58.3333333333%;max-width:58.3333333333%}.slp-col-xs[data-v-6de89156]{flex-basis:0;flex-grow:1;position:relative;width:100%;min-height:1px;max-width:100%}}@media (max-width: 576px){.slp-col-sm[data-v-6de89156],.slp-col-sm-7[data-v-6de89156]{width:inherit;max-width:100%}}@media (min-width: 576px){.slp-col-sm-7[data-v-6de89156]{position:relative;width:100%;min-height:1px;flex:0 0 58.3333333333%;max-width:58.3333333333%}.slp-col-sm[data-v-6de89156]{flex-basis:0;flex-grow:1;position:relative;width:100%;min-height:1px;max-width:100%}}@media (max-width: 768px){.slp-col-md[data-v-6de89156],.slp-col-md-7[data-v-6de89156]{width:inherit;max-width:100%}}@media (min-width: 768px){.slp-col-md-7[data-v-6de89156]{position:relative;width:100%;min-height:1px;flex:0 0 58.3333333333%;max-width:58.3333333333%}.slp-col-md[data-v-6de89156]{flex-basis:0;flex-grow:1;position:relative;width:100%;min-height:1px;max-width:100%}}@media (max-width: 1025px){.slp-col-lg[data-v-6de89156],.slp-col-lg-7[data-v-6de89156]{width:inherit;max-width:100%}}@media (min-width: 1025px){.slp-col-lg-7[data-v-6de89156]{position:relative;width:100%;min-height:1px;flex:0 0 58.3333333333%;max-width:58.3333333333%}.slp-col-lg[data-v-6de89156]{flex-basis:0;flex-grow:1;position:relative;width:100%;min-height:1px;max-width:100%}}@media (max-width: 1200px){.slp-col-xl[data-v-6de89156],.slp-col-xl-7[data-v-6de89156]{width:inherit;max-width:100%}}@media (min-width: 1200px){.slp-col-xl-7[data-v-6de89156]{position:relative;width:100%;min-height:1px;flex:0 0 58.3333333333%;max-width:58.3333333333%}.slp-col-xl[data-v-6de89156]{flex-basis:0;flex-grow:1;position:relative;width:100%;min-height:1px;max-width:100%}}@media (max-width: 1400px){.slp-col-2xl[data-v-6de89156],.slp-col-2xl-7[data-v-6de89156]{width:inherit;max-width:100%}}@media (min-width: 1400px){.slp-col-2xl-7[data-v-6de89156]{position:relative;width:100%;min-height:1px;flex:0 0 58.3333333333%;max-width:58.3333333333%}.slp-col-2xl[data-v-6de89156]{flex-basis:0;flex-grow:1;position:relative;width:100%;min-height:1px;max-width:100%}}@media (max-width: 0px){.slp-col-xs[data-v-6de89156],.slp-col-xs-8[data-v-6de89156]{width:inherit;max-width:100%}}@media (min-width: 0px){.slp-col-xs-8[data-v-6de89156]{position:relative;width:100%;min-height:1px;flex:0 0 66.6666666667%;max-width:66.6666666667%}.slp-col-xs[data-v-6de89156]{flex-basis:0;flex-grow:1;position:relative;width:100%;min-height:1px;max-width:100%}}@media (max-width: 576px){.slp-col-sm[data-v-6de89156],.slp-col-sm-8[data-v-6de89156]{width:inherit;max-width:100%}}@media (min-width: 576px){.slp-col-sm-8[data-v-6de89156]{position:relative;width:100%;min-height:1px;flex:0 0 66.6666666667%;max-width:66.6666666667%}.slp-col-sm[data-v-6de89156]{flex-basis:0;flex-grow:1;position:relative;width:100%;min-height:1px;max-width:100%}}@media (max-width: 768px){.slp-col-md[data-v-6de89156],.slp-col-md-8[data-v-6de89156]{width:inherit;max-width:100%}}@media (min-width: 768px){.slp-col-md-8[data-v-6de89156]{position:relative;width:100%;min-height:1px;flex:0 0 66.6666666667%;max-width:66.6666666667%}.slp-col-md[data-v-6de89156]{flex-basis:0;flex-grow:1;position:relative;width:100%;min-height:1px;max-width:100%}}@media (max-width: 1025px){.slp-col-lg[data-v-6de89156],.slp-col-lg-8[data-v-6de89156]{width:inherit;max-width:100%}}@media (min-width: 1025px){.slp-col-lg-8[data-v-6de89156]{position:relative;width:100%;min-height:1px;flex:0 0 66.6666666667%;max-width:66.6666666667%}.slp-col-lg[data-v-6de89156]{flex-basis:0;flex-grow:1;position:relative;width:100%;min-height:1px;max-width:100%}}@media (max-width: 1200px){.slp-col-xl[data-v-6de89156],.slp-col-xl-8[data-v-6de89156]{width:inherit;max-width:100%}}@media (min-width: 1200px){.slp-col-xl-8[data-v-6de89156]{position:relative;width:100%;min-height:1px;flex:0 0 66.6666666667%;max-width:66.6666666667%}.slp-col-xl[data-v-6de89156]{flex-basis:0;flex-grow:1;position:relative;width:100%;min-height:1px;max-width:100%}}@media (max-width: 1400px){.slp-col-2xl[data-v-6de89156],.slp-col-2xl-8[data-v-6de89156]{width:inherit;max-width:100%}}@media (min-width: 1400px){.slp-col-2xl-8[data-v-6de89156]{position:relative;width:100%;min-height:1px;flex:0 0 66.6666666667%;max-width:66.6666666667%}.slp-col-2xl[data-v-6de89156]{flex-basis:0;flex-grow:1;position:relative;width:100%;min-height:1px;max-width:100%}}@media (max-width: 0px){.slp-col-xs[data-v-6de89156],.slp-col-xs-9[data-v-6de89156]{width:inherit;max-width:100%}}@media (min-width: 0px){.slp-col-xs-9[data-v-6de89156]{position:relative;width:100%;min-height:1px;flex:0 0 75%;max-width:75%}.slp-col-xs[data-v-6de89156]{flex-basis:0;flex-grow:1;position:relative;width:100%;min-height:1px;max-width:100%}}@media (max-width: 576px){.slp-col-sm[data-v-6de89156],.slp-col-sm-9[data-v-6de89156]{width:inherit;max-width:100%}}@media (min-width: 576px){.slp-col-sm-9[data-v-6de89156]{position:relative;width:100%;min-height:1px;flex:0 0 75%;max-width:75%}.slp-col-sm[data-v-6de89156]{flex-basis:0;flex-grow:1;position:relative;width:100%;min-height:1px;max-width:100%}}@media (max-width: 768px){.slp-col-md[data-v-6de89156],.slp-col-md-9[data-v-6de89156]{width:inherit;max-width:100%}}@media (min-width: 768px){.slp-col-md-9[data-v-6de89156]{position:relative;width:100%;min-height:1px;flex:0 0 75%;max-width:75%}.slp-col-md[data-v-6de89156]{flex-basis:0;flex-grow:1;position:relative;width:100%;min-height:1px;max-width:100%}}@media (max-width: 1025px){.slp-col-lg[data-v-6de89156],.slp-col-lg-9[data-v-6de89156]{width:inherit;max-width:100%}}@media (min-width: 1025px){.slp-col-lg-9[data-v-6de89156]{position:relative;width:100%;min-height:1px;flex:0 0 75%;max-width:75%}.slp-col-lg[data-v-6de89156]{flex-basis:0;flex-grow:1;position:relative;width:100%;min-height:1px;max-width:100%}}@media (max-width: 1200px){.slp-col-xl[data-v-6de89156],.slp-col-xl-9[data-v-6de89156]{width:inherit;max-width:100%}}@media (min-width: 1200px){.slp-col-xl-9[data-v-6de89156]{position:relative;width:100%;min-height:1px;flex:0 0 75%;max-width:75%}.slp-col-xl[data-v-6de89156]{flex-basis:0;flex-grow:1;position:relative;width:100%;min-height:1px;max-width:100%}}@media (max-width: 1400px){.slp-col-2xl[data-v-6de89156],.slp-col-2xl-9[data-v-6de89156]{width:inherit;max-width:100%}}@media (min-width: 1400px){.slp-col-2xl-9[data-v-6de89156]{position:relative;width:100%;min-height:1px;flex:0 0 75%;max-width:75%}.slp-col-2xl[data-v-6de89156]{flex-basis:0;flex-grow:1;position:relative;width:100%;min-height:1px;max-width:100%}}@media (max-width: 0px){.slp-col-xs[data-v-6de89156],.slp-col-xs-10[data-v-6de89156]{width:inherit;max-width:100%}}@media (min-width: 0px){.slp-col-xs-10[data-v-6de89156]{position:relative;width:100%;min-height:1px;flex:0 0 83.3333333333%;max-width:83.3333333333%}.slp-col-xs[data-v-6de89156]{flex-basis:0;flex-grow:1;position:relative;width:100%;min-height:1px;max-width:100%}}@media (max-width: 576px){.slp-col-sm[data-v-6de89156],.slp-col-sm-10[data-v-6de89156]{width:inherit;max-width:100%}}@media (min-width: 576px){.slp-col-sm-10[data-v-6de89156]{position:relative;width:100%;min-height:1px;flex:0 0 83.3333333333%;max-width:83.3333333333%}.slp-col-sm[data-v-6de89156]{flex-basis:0;flex-grow:1;position:relative;width:100%;min-height:1px;max-width:100%}}@media (max-width: 768px){.slp-col-md[data-v-6de89156],.slp-col-md-10[data-v-6de89156]{width:inherit;max-width:100%}}@media (min-width: 768px){.slp-col-md-10[data-v-6de89156]{position:relative;width:100%;min-height:1px;flex:0 0 83.3333333333%;max-width:83.3333333333%}.slp-col-md[data-v-6de89156]{flex-basis:0;flex-grow:1;position:relative;width:100%;min-height:1px;max-width:100%}}@media (max-width: 1025px){.slp-col-lg[data-v-6de89156],.slp-col-lg-10[data-v-6de89156]{width:inherit;max-width:100%}}@media (min-width: 1025px){.slp-col-lg-10[data-v-6de89156]{position:relative;width:100%;min-height:1px;flex:0 0 83.3333333333%;max-width:83.3333333333%}.slp-col-lg[data-v-6de89156]{flex-basis:0;flex-grow:1;position:relative;width:100%;min-height:1px;max-width:100%}}@media (max-width: 1200px){.slp-col-xl[data-v-6de89156],.slp-col-xl-10[data-v-6de89156]{width:inherit;max-width:100%}}@media (min-width: 1200px){.slp-col-xl-10[data-v-6de89156]{position:relative;width:100%;min-height:1px;flex:0 0 83.3333333333%;max-width:83.3333333333%}.slp-col-xl[data-v-6de89156]{flex-basis:0;flex-grow:1;position:relative;width:100%;min-height:1px;max-width:100%}}@media (max-width: 1400px){.slp-col-2xl[data-v-6de89156],.slp-col-2xl-10[data-v-6de89156]{width:inherit;max-width:100%}}@media (min-width: 1400px){.slp-col-2xl-10[data-v-6de89156]{position:relative;width:100%;min-height:1px;flex:0 0 83.3333333333%;max-width:83.3333333333%}.slp-col-2xl[data-v-6de89156]{flex-basis:0;flex-grow:1;position:relative;width:100%;min-height:1px;max-width:100%}}@media (max-width: 0px){.slp-col-xs[data-v-6de89156],.slp-col-xs-11[data-v-6de89156]{width:inherit;max-width:100%}}@media (min-width: 0px){.slp-col-xs-11[data-v-6de89156]{position:relative;width:100%;min-height:1px;flex:0 0 91.6666666667%;max-width:91.6666666667%}.slp-col-xs[data-v-6de89156]{flex-basis:0;flex-grow:1;position:relative;width:100%;min-height:1px;max-width:100%}}@media (max-width: 576px){.slp-col-sm[data-v-6de89156],.slp-col-sm-11[data-v-6de89156]{width:inherit;max-width:100%}}@media (min-width: 576px){.slp-col-sm-11[data-v-6de89156]{position:relative;width:100%;min-height:1px;flex:0 0 91.6666666667%;max-width:91.6666666667%}.slp-col-sm[data-v-6de89156]{flex-basis:0;flex-grow:1;position:relative;width:100%;min-height:1px;max-width:100%}}@media (max-width: 768px){.slp-col-md[data-v-6de89156],.slp-col-md-11[data-v-6de89156]{width:inherit;max-width:100%}}@media (min-width: 768px){.slp-col-md-11[data-v-6de89156]{position:relative;width:100%;min-height:1px;flex:0 0 91.6666666667%;max-width:91.6666666667%}.slp-col-md[data-v-6de89156]{flex-basis:0;flex-grow:1;position:relative;width:100%;min-height:1px;max-width:100%}}@media (max-width: 1025px){.slp-col-lg[data-v-6de89156],.slp-col-lg-11[data-v-6de89156]{width:inherit;max-width:100%}}@media (min-width: 1025px){.slp-col-lg-11[data-v-6de89156]{position:relative;width:100%;min-height:1px;flex:0 0 91.6666666667%;max-width:91.6666666667%}.slp-col-lg[data-v-6de89156]{flex-basis:0;flex-grow:1;position:relative;width:100%;min-height:1px;max-width:100%}}@media (max-width: 1200px){.slp-col-xl[data-v-6de89156],.slp-col-xl-11[data-v-6de89156]{width:inherit;max-width:100%}}@media (min-width: 1200px){.slp-col-xl-11[data-v-6de89156]{position:relative;width:100%;min-height:1px;flex:0 0 91.6666666667%;max-width:91.6666666667%}.slp-col-xl[data-v-6de89156]{flex-basis:0;flex-grow:1;position:relative;width:100%;min-height:1px;max-width:100%}}@media (max-width: 1400px){.slp-col-2xl[data-v-6de89156],.slp-col-2xl-11[data-v-6de89156]{width:inherit;max-width:100%}}@media (min-width: 1400px){.slp-col-2xl-11[data-v-6de89156]{position:relative;width:100%;min-height:1px;flex:0 0 91.6666666667%;max-width:91.6666666667%}.slp-col-2xl[data-v-6de89156]{flex-basis:0;flex-grow:1;position:relative;width:100%;min-height:1px;max-width:100%}}.slp-container[data-v-6286b621]{width:100%;margin-left:auto;margin-right:auto;padding-left:16px;padding-right:16px;border:1px solid transparent}@media (min-width: 640px){.slp-container[data-v-6286b621]{max-width:95%}}@media (min-width: 1024px){.slp-container[data-v-6286b621]{max-width:1024px;padding:0}}@media (min-width: 1170px){.slp-container[data-v-6286b621]{max-width:1170px;padding:0}}.slp-full-grey-background[data-v-6286b621]{background:#f2f1f5}.slp-full-charcoal-background[data-v-6286b621]{background:#171321}.slp-partial-charcoal-background[data-v-6286b621]{background-image:linear-gradient(to bottom,#fff,#fff 75%,#171321 75%,#171321)}@media (max-width: 576px){.slp-partial-charcoal-background[data-v-6286b621]{background-image:linear-gradient(to bottom,#fff,#fff 30%,#171321 30%,#171321)}}.slp-gradient-background[data-v-6286b621]{background:radial-gradient(50.08% 44.51% at 100% 100%,#a989f533,#7759c200),radial-gradient(60.76% 48.01% at 0% 100%,#e2432933,#e2432900),#fff}.slp-full-gradient-background[data-v-6286b621]{background:linear-gradient(165.41deg,#fadcd7,#f8f5ff 23.65%,#fff 54.66%,#f6f3fe 80.95%,#ffd4d8 100.92%)}.slp-full-light-purple-background[data-v-6286b621]{background:#f6f3fe}.slp-half-grey-background[data-v-6286b621]{background-image:linear-gradient(to bottom,#fff,#fff 50%,#f2f1f5 50%,#f2f1f5)}.slp-partial-white-background[data-v-6286b621]{background-image:linear-gradient(to bottom,#f2f1f5,#f2f1f5 70%,#fff 70%,#fff)}.slp-partial-grey-background[data-v-6286b621]{background-image:linear-gradient(to bottom,#fff,#fff 60%,#f2f1f5 60%,#f2f1f5)}@media (max-width: 576px){.slp-partial-grey-background[data-v-6286b621]{background-image:linear-gradient(to bottom,#fff,#fff 30%,#f2f1f5 30%,#f2f1f5)}}.fluid[data-v-6286b621]{max-width:100%;margin:0;border:none;padding:0}.readmore{-webkit-text-size-adjust:100%;-moz-tab-size:4;tab-size:4;box-sizing:border-box;border-width:0;border-style:solid;border-color:#e0e0e0;--tw-ring-inset: var(--tw-empty, );--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgba(14, 165, 233, .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;font-family:Nunito Sans,-apple-system,".SFNSText-Regular",San Francisco,BlinkMacSystemFont,Segoe UI,Helvetica Neue,Helvetica,Arial,sans-serif;margin:0;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:rgba(0,0,0,0);line-height:24px;color:#029cfd;text-decoration:none;font-size:14px}.slp-row[data-v-0fbd2157]{display:flex;flex-wrap:wrap}.slp-text-display1[data-v-5f7bd974],.slp-text-display1[data-v-5f7bd974] *{font-size:96px;line-height:100px;font-weight:600;letter-spacing:-2px}@media (max-width: 576px){.slp-text-display1[data-v-5f7bd974],.slp-text-display1[data-v-5f7bd974] *{font-size:48px;line-height:52px;font-weight:600;letter-spacing:-1.8px}}.slp-text-heading1[data-v-5f7bd974],.slp-text-heading1[data-v-5f7bd974] *{font-size:64px;line-height:72px;font-weight:400;letter-spacing:-2.77px}@media (max-width: 576px){.slp-text-heading1[data-v-5f7bd974],.slp-text-heading1[data-v-5f7bd974] *{font-size:48px;line-height:52px;font-weight:400;letter-spacing:-2.3px}}.slp-text-heading2[data-v-5f7bd974],.slp-text-heading2[data-v-5f7bd974] *{font-size:50px;line-height:60px;font-weight:400;letter-spacing:-1.9px}@media (max-width: 576px){.slp-text-heading2[data-v-5f7bd974],.slp-text-heading2[data-v-5f7bd974] *{font-size:40px;line-height:48px;font-weight:400;letter-spacing:-1.6px}}.slp-text-heading3[data-v-5f7bd974],.slp-text-heading3[data-v-5f7bd974] *{font-size:40px;line-height:48px;font-weight:400;letter-spacing:-1.4px}@media (max-width: 576px){.slp-text-heading3[data-v-5f7bd974],.slp-text-heading3[data-v-5f7bd974] *{font-size:32px;line-height:40px;font-weight:400;letter-spacing:-1.2px}}.slp-text-heading4[data-v-5f7bd974],.slp-text-heading4[data-v-5f7bd974] *{font-size:32px;line-height:40px;font-weight:400;letter-spacing:-1.1px}@media (max-width: 576px){.slp-text-heading4[data-v-5f7bd974],.slp-text-heading4[data-v-5f7bd974] *{font-size:28px;line-height:36px;font-weight:400;letter-spacing:-1px}}.slp-text-heading5[data-v-5f7bd974],.slp-text-heading5[data-v-5f7bd974] *{font-size:24px;line-height:32px;font-weight:400;letter-spacing:-.8px}@media (max-width: 576px){.slp-text-heading5[data-v-5f7bd974],.slp-text-heading5[data-v-5f7bd974] *{font-size:22px;line-height:28px;font-weight:400;letter-spacing:-.8px}}.slp-text-heading1-bold[data-v-5f7bd974],.slp-text-heading1-bold[data-v-5f7bd974] *{font-size:64px;line-height:72px;font-weight:600;letter-spacing:-2.1px}@media (max-width: 576px){.slp-text-heading1-bold[data-v-5f7bd974],.slp-text-heading1-bold[data-v-5f7bd974] *{font-size:48px;line-height:52px;font-weight:600;letter-spacing:-1.8px}}.slp-text-heading2-bold[data-v-5f7bd974],.slp-text-heading2-bold[data-v-5f7bd974] *{font-size:50px;line-height:60px;font-weight:600;letter-spacing:-1.4px}@media (max-width: 576px){.slp-text-heading2-bold[data-v-5f7bd974],.slp-text-heading2-bold[data-v-5f7bd974] *{font-size:40px;line-height:48px;font-weight:600;letter-spacing:-1.2px}}.slp-text-heading3-bold[data-v-5f7bd974],.slp-text-heading3-bold[data-v-5f7bd974] *{font-size:40px;line-height:48px;font-weight:600;letter-spacing:-1px}@media (max-width: 576px){.slp-text-heading3-bold[data-v-5f7bd974],.slp-text-heading3-bold[data-v-5f7bd974] *{font-size:32px;line-height:40px;font-weight:600;letter-spacing:-.9px}}.slp-text-heading4-bold[data-v-5f7bd974],.slp-text-heading4-bold[data-v-5f7bd974] *{font-size:32px;line-height:40px;font-weight:600;letter-spacing:-.8px}@media (max-width: 576px){.slp-text-heading4-bold[data-v-5f7bd974],.slp-text-heading4-bold[data-v-5f7bd974] *{font-size:28px;line-height:36px;font-weight:600;letter-spacing:-.7px}}.slp-text-heading5-bold[data-v-5f7bd974],.slp-text-heading5-bold[data-v-5f7bd974] *{font-size:24px;line-height:32px;font-weight:600;letter-spacing:-.6px}@media (max-width: 576px){.slp-text-heading5-bold[data-v-5f7bd974],.slp-text-heading5-bold[data-v-5f7bd974] *{font-size:22px;line-height:28px;font-weight:600;letter-spacing:-.55px}}.slp-text-body1[data-v-5f7bd974],.slp-text-body1[data-v-5f7bd974] *{font-size:18px;line-height:28px;font-weight:400}.slp-text-body2[data-v-5f7bd974],.slp-text-body2[data-v-5f7bd974] *{font-size:16px;line-height:24px;font-weight:400}.slp-text-body3[data-v-5f7bd974],.slp-text-body3[data-v-5f7bd974] *{font-size:14px;line-height:22px;font-weight:400}.slp-text-body1-bold[data-v-5f7bd974],.slp-text-body1-bold[data-v-5f7bd974] *{font-size:18px;line-height:28px;font-weight:600}.slp-text-body2-bold[data-v-5f7bd974],.slp-text-body2-bold[data-v-5f7bd974] *{font-size:16px;line-height:24px;font-weight:600}.slp-text-body3-bold[data-v-5f7bd974],.slp-text-body3-bold[data-v-5f7bd974] *{font-size:14px;line-height:22px;font-weight:600}.slp-text-all-caps[data-v-5f7bd974],.slp-text-all-caps[data-v-5f7bd974] *{font-size:12px;line-height:20px;font-weight:600;text-transform:uppercase;letter-spacing:.1em}.slp-text-quotes[data-v-5f7bd974],.slp-text-quotes[data-v-5f7bd974] *{font-size:23px;line-height:38px;font-weight:400;font-style:italic}@media (max-width: 576px){.slp-text-quotes[data-v-5f7bd974],.slp-text-quotes[data-v-5f7bd974] *{font-size:16px;line-height:24px}}.slp-text-emphasis[data-v-5f7bd974],.slp-text-emphasis[data-v-5f7bd974] *{font-size:23px;line-height:38px;font-weight:400}.slp-text-arrow[data-v-5f7bd974],.slp-text-arrow[data-v-5f7bd974] *{color:#fff;cursor:pointer;font-weight:600;font-size:16px;line-height:24px}.slp-text-arrow[data-v-5f7bd974]:hover,.slp-text-arrow[data-v-5f7bd974] *:hover{color:#171321}.slp-text-arrow:hover .slp-link-text[data-v-5f7bd974],.slp-text-arrow[data-v-5f7bd974] *:hover .slp-link-text{text-decoration:underline}.slp-text-arrow[data-v-5f7bd974]:active,.slp-text-arrow[data-v-5f7bd974] *:active{color:#fff}.slp-text-arrow:active .slp-link-text[data-v-5f7bd974],.slp-text-arrow[data-v-5f7bd974] *:active .slp-link-text{text-decoration:underline}.arrow-symbol[data-v-5f7bd974]{padding-left:4px}
1
+ .slp-btn[data-v-6f224ce6]{box-sizing:border-box;font-family:Inter,"sans-serif";min-width:68px;display:inline-flex;align-items:center;text-align:center;vertical-align:middle;padding:11px 16px;text-decoration:none;border-radius:4px;font-weight:600;font-size:18px;line-height:20px;transition:.3s cubic-bezier(.7,0,.3,1) background-color}.slp-btn[data-v-6f224ce6]:hover{cursor:pointer}.slp-btn-primary[data-v-6f224ce6]{background-color:#171321;color:#fff;border:1px solid #171321}.slp-btn-primary[data-v-6f224ce6]:hover{background-color:#fff;color:#171321;border:1px solid #171321}.slp-btn-primary.slp-btn-disabled[data-v-6f224ce6]{background-color:#d1d0d3;border:1px solid #D1D0D3;color:#74717a}.slp-btn-primary.slp-btn-disabled[data-v-6f224ce6]:hover{background-color:#d1d0d3;cursor:default}.slp-btn-secondary[data-v-6f224ce6]{background-color:#fff;color:#171321;border:none}.slp-btn-secondary[data-v-6f224ce6]:hover{border:none;outline:none;background-color:#e8e7eb;color:#171321}.slp-btn-secondary.slp-btn-disabled[data-v-6f224ce6]{color:#d1d0d3}.slp-btn-secondary.slp-btn-disabled[data-v-6f224ce6]:hover{background-color:#fff;cursor:default}.slp-btn-tertiary[data-v-6f224ce6]{color:#171321;border:none;padding-left:0;text-decoration:underline;text-underline-offset:2px;text-decoration-color:transparent;-webkit-text-decoration:none;transition:all .2s ease-in-out}.slp-btn-tertiary[data-v-6f224ce6]:hover{text-decoration-color:#171321;-webkit-text-decoration:underline}.slp-btn-tertiary:hover .slp-icon[data-v-6f224ce6]{transform:translate(8px)}.slp-btn-tertiary .slp-icon[data-v-6f224ce6]{margin-left:4px;transition:transform .2s ease-in-out}.slp-btn-tertiary.slp-btn-disabled[data-v-6f224ce6]{color:#d1d0d3;text-decoration:none}.slp-btn-tertiary.slp-btn-disabled[data-v-6f224ce6]:hover{background-color:#fff;cursor:default}.slp-btn-tertiary.slp-btn-disabled:hover .slp-icon[data-v-6f224ce6]{transform:none}.slp-btn-icon[data-v-6f224ce6]{min-width:unset;font-size:0px;line-height:unset;border:none;background-color:transparent;padding:8px}.slp-btn-icon.slp-btn-disabled[data-v-6f224ce6]{pointer-events:none;opacity:.5}.slp-btn-ghost[data-v-6f224ce6]{border:none;background-color:transparent;padding:8px;font-size:inherit;font-weight:inherit;line-height:inherit}.slp-btn-ghost.slp-btn-disabled[data-v-6f224ce6]{pointer-events:none;opacity:.5}
package/package.json CHANGED
@@ -1,46 +1,52 @@
1
1
  {
2
2
  "name": "slippers-ui",
3
- "version": "3.0.0-alpha.2",
4
- "private": false,
5
3
  "description": "GitLab Marketing Design System",
6
- "author": "GitLab",
4
+ "version": "3.0.0-alpha.3",
5
+ "type": "module",
7
6
  "files": [
8
7
  "dist",
9
- "assets/css/base.scss",
10
- "assets/css/_variables.scss",
11
- "package.json"
8
+ "fonts"
12
9
  ],
13
- "module": "./slippers-ui.es.js",
14
- "type": "module",
10
+ "main": "./dist/slippers-ui.es.js",
11
+ "module": "./dist/slippers-ui.es.js",
12
+ "types": "./dist/index.d.ts",
13
+ "exports": {
14
+ ".": {
15
+ "import": "./dist/slippers-ui.es.js"
16
+ }
17
+ },
18
+ "author": "GitLab",
19
+ "bugs": {
20
+ "url": "https://gitlab.com/gitlab-com/marketing/digital-experience/slippers-ui-/issues"
21
+ },
22
+ "homepage": "https://gitlab-com.gitlab.io/marketing/digital-experience/slippers-ui",
23
+ "license": "MIT",
24
+ "repository": {
25
+ "type": "git",
26
+ "url": "https://gitlab.com/gitlab-com/marketing/digital-experience/slippers-ui.git"
27
+ },
15
28
  "scripts": {
16
- "build": "nuxt build",
17
- "dev": "nuxt dev",
18
- "generate": "nuxt generate",
19
- "preview": "nuxt preview",
20
- "postinstall": "nuxt prepare",
21
- "storybook": "storybook dev --port 6006",
22
- "build-storybook": "storybook build",
23
- "build-library": "vite build --config vite.config.ts",
24
- "build-library-locally": "vite build --config vite.config.ts && cp package.json dist/"
29
+ "dev": "storybook dev",
30
+ "build-lib": "vite build"
25
31
  },
26
32
  "dependencies": {
27
- "nuxt": "^3.13.2",
28
- "vue": "latest",
29
- "vue-router": "latest"
33
+ "vue": "^3.5.12"
30
34
  },
31
- "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e",
32
35
  "devDependencies": {
33
- "@nuxtjs/storybook": "8.3.2",
34
- "@storybook-vue/nuxt": "^8.3.2",
36
+ "@chromatic-com/storybook": "^1.9.0",
35
37
  "@storybook/addon-essentials": "^8.3.6",
36
38
  "@storybook/addon-interactions": "^8.3.6",
37
39
  "@storybook/addon-links": "^8.3.6",
40
+ "@storybook/addon-onboarding": "^8.3.6",
38
41
  "@storybook/blocks": "^8.3.6",
39
- "@storybook/builder-vite": "^8.3.6",
40
42
  "@storybook/test": "^8.3.6",
41
43
  "@storybook/vue3": "^8.3.6",
42
- "@types/node": "^18.17.5",
44
+ "@storybook/vue3-vite": "^8.3.6",
45
+ "@types/node": "^20.17.0",
46
+ "@vitejs/plugin-vue": "^5.1.4",
43
47
  "sass-embedded": "^1.80.4",
44
- "storybook": "^8.3.6"
48
+ "storybook": "^8.3.6",
49
+ "typescript": "~5.6.2",
50
+ "vite": "^5.4.9"
45
51
  }
46
52
  }
package/assets/css/_variables.scss DELETED
@@ -1,354 +0,0 @@
1
- $prefix: 'slp'; // For themeing in the future
2
- $max-columns: 12; // Columns in the grid
3
-
4
- /*
5
- _____ _
6
- / ____| | |
7
- | | ___ | | ___ _ __ ___
8
- | | / _ \| |/ _ \| '__/ __|
9
- | |___| (_) | | (_) | | \__ \
10
- \_____\___/|_|\___/|_| |___/
11
- */
12
-
13
- $color-primary-100: #D1D0D3 !default;
14
- $color-primary-200: #171321 !default;
15
- $color-primary-300: #FFFFFF !default;
16
-
17
- // Secondary
18
- $color-secondary-100: #D1D0D3 !default;
19
- $color-secondary-200: #FFFFFF !default;
20
- $color-secondary-300: #171321 !default;
21
-
22
- // Surface
23
- $color-surface-50: #FFFFFF !default;
24
- $color-surface-100: #F2F1F5 !default;
25
- $color-surface-200: #E8E7EB !default;
26
- $color-surface-300: #D1D0D3 !default;
27
- $color-surface-400: #A2A1A6 !default;
28
- $color-surface-500: #74717A !default;
29
- $color-surface-600: #45424D !default;
30
- $color-surface-700: #171321 !default;
31
- $color-surface-800: #F6F3FE !default;
32
- $color-surface-900: #EEE7FD !default;
33
- $color-surface-950: #E3D6FF !default;
34
-
35
- // Text
36
- $color-text-50: #FFFFFF !default;
37
- $color-text-100: #D1D0D3 !default;
38
- $color-text-200: #74717A !default;
39
- $color-text-300: #171321 !default;
40
-
41
- $color-text-link-100: #7759C2 !default;
42
-
43
- // Alert
44
- $color-alert-100: #FFD4D8 !default;
45
- $color-alert-200: #F24F63 !default;
46
- $color-alert-300: #CB3446 !default;
47
-
48
- // Warning
49
- $color-warning-100: #FFEFC7 !default;
50
- $color-warning-200: #FFDA7A !default;
51
- $color-warning-300: #FFB800 !default;
52
-
53
- // Success
54
- $color-success-100: #B8E5BC !default;
55
- $color-success-200: #48A651 !default;
56
- $color-success-300: #327338 !default;
57
-
58
- // Info
59
- $color-info-100: #D6EAFF !default;
60
- $color-info-200: #70B4FF !default;
61
- $color-info-300: #3979BF !default;
62
-
63
- // Accents
64
-
65
- $color-accent-100: #FCA326 !default;
66
- $color-accent-200: #FC6D26 !default;
67
- $color-accent-300: #E24329 !default;
68
- $color-accent-400: #A989F5 !default;
69
- $color-accent-500: #7759C2 !default;
70
-
71
- $color-list: (
72
- "primary-100":$color-primary-100,
73
- "primary-200":$color-primary-200,
74
- "primary-300":$color-primary-300,
75
- "secondary-100":$color-secondary-100,
76
- "secondary-200":$color-secondary-200,
77
- "secondary-300":$color-secondary-300,
78
- "surface-50":$color-surface-50,
79
- "surface-100": $color-surface-100,
80
- "surface-200":$color-surface-200,
81
- "surface-300":$color-surface-300,
82
- "surface-400":$color-surface-400,
83
- "surface-500":$color-surface-500,
84
- "surface-600":$color-surface-600,
85
- "surface-700":$color-surface-700,
86
- "surface-800":$color-surface-800,
87
- "surface-900":$color-surface-900,
88
- "surface-950":$color-surface-950,
89
- "text-50":$color-text-50,
90
- "text-100": $color-text-100,
91
- "text-200": $color-text-200,
92
- "text-300": $color-text-300,
93
- "text-link-100":$color-text-link-100,
94
- "alert-100":$color-alert-100,
95
- "alert-200":$color-alert-200,
96
- "alert-300":$color-alert-300,
97
- "warning-100":$color-warning-100,
98
- "warning-200":$color-warning-200,
99
- "warning-300":$color-warning-300,
100
- "success-100":$color-success-100,
101
- "success-200":$color-success-200,
102
- "success-300":$color-success-300,
103
- "info-100":$color-info-100,
104
- "info-200":$color-info-200,
105
- "info-300":$color-info-300,
106
- "accent-100":$color-accent-100,
107
- "accent-200":$color-accent-200,
108
- "accent-300":$color-accent-300,
109
- "accent-400":$color-accent-400,
110
- "accent-500":$color-accent-500
111
- );
112
-
113
- /*
114
- _____ _
115
- / ____| (_)
116
- | (___ _ __ __ _ ___ _ _ __ __ _
117
- \___ \| '_ \ / _` |/ __| | '_ \ / _` |
118
- ____) | |_) | (_| | (__| | | | | (_| |
119
- |_____/| .__/ \__,_|\___|_|_| |_|\__, |
120
- | | __/ |
121
- |_| |___/
122
- */
123
-
124
- $spacing-default: 16px !default;
125
-
126
- $spacing-0: 0px !default;
127
- $spacing-4: 4px !default;
128
- $spacing-8: 8px !default;
129
- $spacing-16: 16px;
130
- $spacing-24: 24px !default;
131
- $spacing-32: 32px !default;
132
- $spacing-48: 48px !default;
133
- $spacing-64: 64px !default;
134
- $spacing-96: 96px !default;
135
- $spacing-160: 160px !default;
136
-
137
- $spacing: (
138
- 0: $spacing-0,
139
- 4: $spacing-4,
140
- 8: $spacing-8,
141
- 16: $spacing-16,
142
- 24: $spacing-24,
143
- 32: $spacing-32,
144
- 48: $spacing-48,
145
- 64: $spacing-64,
146
- 96: $spacing-96,
147
- 160: $spacing-160,
148
- );
149
-
150
- $spacing-shortcuts: ("margin": "m", "padding": "p") !default;
151
- $spacing-directions: ("top": "t", "right": "r", "bottom": "b", "left": "l") !default;
152
- $spacing-horizontal: "x" !default;
153
- $spacing-vertical: "y" !default;
154
-
155
-
156
- /*
157
- _______ _
158
- |__ __| | |
159
- | |_ _ _ __ ___ __ _ _ __ __ _ _ __ | |__ _ _
160
- | | | | | '_ \ / _ \ / _` | '__/ _` | '_ \| '_ \| | | |
161
- | | |_| | |_) | (_) | (_| | | | (_| | |_) | | | | |_| |
162
- |_|\__, | .__/ \___/ \__, |_| \__,_| .__/|_| |_|\__, |
163
- __/ | | __/ | | | __/ |
164
- |___/|_| |___/ |_| |___/
165
- */
166
-
167
- $font-size-default: 16px !default;
168
-
169
- // Headings
170
- $text-display-1: 96px !default;
171
-
172
- $text-heading-1: 64px !default;
173
- $text-heading-2: 50px !default;
174
- $text-heading-3: 40px !default;
175
- $text-heading-4: 32px !default;
176
- $text-heading-5: 24px !default;
177
-
178
- $text-display-1-mobile: 77px !default;
179
-
180
- $text-heading-1-mobile: 48px !default;
181
- $text-heading-2-mobile: 40px !default;
182
- $text-heading-3-mobile: 32px !default;
183
- $text-heading-4-mobile: 28px !default;
184
- $text-heading-5-mobile: 22px !default;
185
-
186
- // Body
187
- $text-body-1: 18px !default;
188
- $text-body-2: 16px !default;
189
- $text-body-3: 14px !default;
190
-
191
- $text-body-1-bold: 18px !default;
192
- $text-body-2-bold: 16px !default;
193
- $text-body-3-bold: 14px !default;
194
-
195
- $text-body-1-link: 18px !default;
196
- $text-body-2-link: 16px !default;
197
- $text-body-3-link: 14px !default;
198
-
199
- // Button
200
- $text-button-1: 18px !default;
201
- $text-button-2: 14px !default;
202
-
203
- // ALL CAPS
204
- $text-caps: 12px !default;
205
-
206
- // Quotes
207
- $text-quotes: 23px !default;
208
- $text-quotes-mobile: 16px;
209
- $line-height-quotes-mobile: 24px;
210
-
211
- // Emphasis
212
- $text-emphasis: 23px !default;
213
-
214
- // Line Heights
215
- $line-height-default: 24px !default;
216
-
217
- $line-height-display-1: 100px !default;
218
-
219
- $line-height-heading-1: 72px !default;
220
- $line-height-heading-2: 60px !default;
221
- $line-height-heading-3: 48px !default;
222
- $line-height-heading-4: 40px !default;
223
- $line-height-heading-5: 32px !default;
224
-
225
- $line-height-display-1-mobile: 84px !default;
226
-
227
- $line-height-heading-1-mobile: 52px !default;
228
- $line-height-heading-2-mobile: 48px !default;
229
- $line-height-heading-3-mobile: 40px !default;
230
- $line-height-heading-4-mobile: 36px !default;
231
- $line-height-heading-5-mobile: 28px !default;
232
-
233
- $line-height-body-1: 28px !default;
234
- $line-height-body-2: 24px !default;
235
- $line-height-body-3: 22px !default;
236
-
237
- $line-height-body-1-bold: 28px !default;
238
- $line-height-body-2-bold: 24px !default;
239
- $line-height-body-3-bold: 22px !default;
240
-
241
- $line-height-body-1-link: 28px !default;
242
- $line-height-body-2-link: 24px !default;
243
- $line-height-body-3-link: 22px !default;
244
-
245
- $line-height-button-1: 20px !default;
246
- $line-height-caps: 20px !default;
247
- $line-height-quotes: 38px !default;
248
- $line-height-emphasis: 38px !default;
249
-
250
- // Heading Letter Spacing
251
- $letter-spacing-display-1: -2px !default;
252
- $letter-spacing-display-1-mobile: -1.9px !default;
253
-
254
- $letter-spacing-heading-1: -2.77px !default;
255
- $letter-spacing-heading-2: -1.9px !default;
256
- $letter-spacing-heading-3: -1.4px !default;
257
- $letter-spacing-heading-4: -1.1px !default;
258
- $letter-spacing-heading-5: -0.8px !default;
259
-
260
- $letter-spacing-heading-1-mobile: -2.3px !default;
261
- $letter-spacing-heading-2-mobile: -1.6px !default;
262
- $letter-spacing-heading-3-mobile: -1.2px !default;
263
- $letter-spacing-heading-4-mobile: -1px !default;
264
- $letter-spacing-heading-5-mobile: -0.8px !default;
265
-
266
- $letter-spacing-heading-1-bold: -2.1px !default;
267
- $letter-spacing-heading-2-bold: -1.4px !default;
268
- $letter-spacing-heading-3-bold: -1px !default;
269
- $letter-spacing-heading-4-bold: -0.8px !default;
270
- $letter-spacing-heading-5-bold: -0.6px !default;
271
-
272
- $letter-spacing-heading-1-bold-mobile: -1.8px !default;
273
- $letter-spacing-heading-2-bold-mobile: -1.2px !default;
274
- $letter-spacing-heading-3-bold-mobile: -0.9px !default;
275
- $letter-spacing-heading-4-bold-mobile: -0.7px !default;
276
- $letter-spacing-heading-5-bold-mobile: -0.55px !default;
277
-
278
- // Font Weight
279
- $font-weight-normal: 400 !default;
280
- $font-weight-bold: 600 !default;
281
-
282
- /*
283
- ____ _ _ _
284
- | _ \ | | (_) | |
285
- | |_) |_ __ ___ __ _| | ___ __ ___ _ _ __ | |_ ___
286
- | _ <| '__/ _ \/ _` | |/ / '_ \ / _ \| | '_ \| __/ __|
287
- | |_) | | | __/ (_| | <| |_) | (_) | | | | | |_\__ \
288
- |____/|_| \___|\__,_|_|\_\ .__/ \___/|_|_| |_|\__|___/
289
- | |
290
- |_|
291
- */
292
-
293
- $breakpoint-xs: 0px !default;
294
- $breakpoint-sm: 576px !default;
295
- $breakpoint-md: 768px !default;
296
- $breakpoint-lg: 1025px !default;
297
- $breakpoint-xl: 1200px !default;
298
- $breakpoint-2xl: 1400px !default;
299
-
300
- $breakpoints: (
301
- xs: $breakpoint-xs,
302
- sm: $breakpoint-sm,
303
- md: $breakpoint-md,
304
- lg: $breakpoint-lg,
305
- xl: $breakpoint-xl,
306
- 2xl: $breakpoint-2xl,
307
- );
308
-
309
- /*
310
- _ _
311
- (_) | |
312
- _____ _ __ __| | _____ __
313
- |_ / | '_ \ / _` |/ _ \ \/ /
314
- / /| | | | | (_| | __/> <
315
- /___|_|_| |_|\__,_|\___/_/\_\
316
-
317
- */
318
-
319
- $zindex-dropdown: 1000;
320
- $zindex-sticky: 1020;
321
- $zindex-fixed: 1030;
322
- $zindex-modal-backdrop: 1040;
323
- $zindex-offcanvas: 1050;
324
- $zindex-modal: 1060;
325
- $zindex-popover: 1070;
326
- $zindex-tooltip: 1080;
327
-
328
- /*
329
- __ __ _
330
- | \/ (_)___ ___
331
- | |\/| | / __|/ __|
332
- | | | | \__ \ (__
333
- |_| |_|_|___/\___|
334
- */
335
-
336
- $border-radius-4: 4px;
337
- $border-radius-24: 24px;
338
- $border-radius-pill: 90px;
339
- $border-width: 1px;
340
- $border: $border-width solid $color-surface-300;
341
- $border-pill: $border-width solid $color-accent-500;
342
-
343
- $shadow-surface-primary-1: $color-surface-300 0px 8px 50px -24px;
344
- $shadow-surface-primary-2: $color-surface-300 0px 16px 50px -24px;
345
- $shadow-surface-primary-3: $color-surface-300 0px 24px 50px -24px;
346
- $shadow-surface-primary-4: $color-surface-300 0px 32px 50px -24px;
347
-
348
- $shadow-surface-secondary-1: $color-surface-300 0px 8px 50px -24px;
349
- $shadow-surface-secondary-2: $color-surface-300 0px 16px 50px -24px;
350
- $shadow-surface-secondary-3: $color-surface-300 0px 24px 50px -24px;
351
- $shadow-surface-secondary-4: $color-surface-300 0px 32px 50px -24px;
352
-
353
- $interactive-ease: cubic-bezier(0.70, 0.00, 0.30, 1.00);
354
- $expressive-ease: cubic-bezier(0.30, 0.80, 0.70, 1.20);
package/assets/css/base.scss DELETED
@@ -1,154 +0,0 @@
1
- @import "variables";
2
-
3
- html {
4
- scroll-behavior: smooth;
5
- }
6
-
7
- body {
8
- color: $color-text-300;
9
- margin: 0;
10
- font-family: "Inter", "sans-serif";
11
- font-size: $font-size-default;
12
- font-weight: $font-weight-normal;
13
- line-height: $line-height-default;
14
- -webkit-font-smoothing: antialiased;
15
- -moz-osx-font-smoothing: grayscale;
16
- text-rendering: optimizeLegibility;
17
- }
18
-
19
- a:not(.slp-btn) {
20
- text-decoration: none;
21
- }
22
-
23
- h1, h2, h3, h4, h5, h6 {
24
- color: inherit;
25
- }
26
-
27
- // Removes the default spacing and border for appropriate elements.
28
- blockquote,
29
- dl,
30
- dd,
31
- h1,
32
- h2,
33
- h3,
34
- h4,
35
- h5,
36
- h6,
37
- hr,
38
- ol,
39
- ul,
40
- li,
41
- figure,
42
- p,
43
- pre {
44
- margin: 0;
45
- }
46
-
47
- button {
48
- background-color: transparent;
49
- background-image: none;
50
- }
51
-
52
- ol,
53
- ul {
54
- list-style: none;
55
- padding: 0;
56
- }
57
-
58
- @each $breakpoint-name, $breakpoint-value in $breakpoints {
59
- @each $property, $shortcut in $spacing-shortcuts {
60
- @each $name, $value in $spacing {
61
- // All directions
62
- .#{$prefix}-#{$shortcut}-#{$name} {
63
- #{$property}: $value;
64
- }
65
-
66
- .#{$prefix}-#{$shortcut}-#{$breakpoint-name}-#{$name} {
67
- @media (min-width: $breakpoint-value) {
68
- #{$property}: $value !important;
69
- }
70
- }
71
-
72
- // Cardinal directions
73
- @each $direction, $directional-shortcut in $spacing-directions {
74
- .#{$prefix}-#{$shortcut}#{$directional-shortcut}-#{$name} {
75
- #{$property}-#{$direction}: $value;
76
- }
77
-
78
- .#{$prefix}-#{$shortcut}#{$directional-shortcut}-#{$breakpoint-name}-#{$name} {
79
- @media (min-width: $breakpoint-value) {
80
- #{$property}-#{$direction}: $value !important;
81
- }
82
- }
83
- }
84
-
85
- // Horizontal axis
86
- @if $spacing-horizontal != null {
87
- .#{$prefix}-#{$shortcut}#{$spacing-horizontal}-#{$name} {
88
- #{$property}-left: $value;
89
- #{$property}-right: $value;
90
- }
91
-
92
- .#{$prefix}-#{$shortcut}#{$spacing-horizontal}-#{$breakpoint-name}-#{$name} {
93
- @media (min-width: $breakpoint-value) {
94
- #{$property}-left: $value !important;
95
- #{$property}-right: $value !important;
96
- }
97
- }
98
- }
99
-
100
- // Vertical axis
101
- @if $spacing-vertical != null {
102
- .#{$prefix}-#{$shortcut}#{$spacing-vertical}-#{$name} {
103
- #{$property}-top: $value;
104
- #{$property}-bottom: $value;
105
- }
106
-
107
- .#{$prefix}-#{$shortcut}#{$spacing-vertical}-#{$breakpoint-name}-#{$name} {
108
- @media (min-width: $breakpoint-value) {
109
- #{$property}-top: $value !important;
110
- #{$property}-bottom: $value !important;
111
- }
112
- }
113
- }
114
- }
115
- }
116
- }
117
-
118
- // Colors
119
- @each $color, $value in $color-list {
120
- .#{$prefix}-color-#{$color} {
121
- color: $value;
122
- }
123
- .#{$prefix}-bg-#{$color} {
124
- background-color: $value;
125
- }
126
- }
127
-
128
- .#{$prefix}-flex {
129
- display: flex;
130
- }
131
-
132
- .#{$prefix}-flex-column {
133
- flex-direction: column;
134
- }
135
-
136
- .#{$prefix}-flex-row {
137
- flex-direction: row;
138
- }
139
-
140
- .#{$prefix}-justify-content-center {
141
- justify-content: center;
142
- }
143
-
144
- .#{$prefix}-justify-content-between {
145
- justify-content: space-between;
146
- }
147
-
148
- .#{$prefix}-align-items-center {
149
- align-items: center;
150
- }
151
-
152
- .#{$prefix}-text-align-center {
153
- text-align: center;
154
- }
package/dist/favicon.ico DELETED
Binary file
package/dist/package.json DELETED
@@ -1,46 +0,0 @@
1
- {
2
- "name": "slippers-ui",
3
- "version": "3.0.0-alpha.1",
4
- "private": false,
5
- "description": "GitLab Marketing Design System",
6
- "author": "GitLab",
7
- "files": [
8
- "dist",
9
- "assets/css/base.scss",
10
- "assets/css/_variables.scss",
11
- "package.json"
12
- ],
13
- "module": "./slippers-ui.es.js",
14
- "type": "module",
15
- "scripts": {
16
- "build": "nuxt build",
17
- "dev": "nuxt dev",
18
- "generate": "nuxt generate",
19
- "preview": "nuxt preview",
20
- "postinstall": "nuxt prepare",
21
- "storybook": "storybook dev --port 6006",
22
- "build-storybook": "storybook build",
23
- "build-library": "vite build --config vite.config.ts",
24
- "build-library-locally": "vite build --config vite.config.ts && cp package.json dist/"
25
- },
26
- "dependencies": {
27
- "nuxt": "^3.13.2",
28
- "vue": "latest",
29
- "vue-router": "latest"
30
- },
31
- "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e",
32
- "devDependencies": {
33
- "@nuxtjs/storybook": "8.3.2",
34
- "@storybook-vue/nuxt": "^8.3.2",
35
- "@storybook/addon-essentials": "^8.3.6",
36
- "@storybook/addon-interactions": "^8.3.6",
37
- "@storybook/addon-links": "^8.3.6",
38
- "@storybook/blocks": "^8.3.6",
39
- "@storybook/builder-vite": "^8.3.6",
40
- "@storybook/test": "^8.3.6",
41
- "@storybook/vue3": "^8.3.6",
42
- "@types/node": "^18.17.5",
43
- "sass-embedded": "^1.80.4",
44
- "storybook": "^8.3.6"
45
- }
46
- }
package/dist/robots.txt DELETED
@@ -1 +0,0 @@
1
-