ada-ui 5.1.2-test-78f41d7705169e98447060a979808d45697a468b → 5.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 +16 -2
- package/css/ada.blue.css +1 -1
- package/css/ada.css +1 -1
- package/index.html +175 -238
- package/package.json +1 -1
- package/scss/_ada.theme-base.scss +12 -4
- package/scss/_command.scss +12 -7
- package/scss/_global.scss +3 -3
- package/scss/ada.blue.scss +39 -3
- package/scss/ada.green.scss +0 -1
- package/style.css +148 -0
package/CHANGELOG.md
CHANGED
|
@@ -1,10 +1,24 @@
|
|
|
1
1
|
# ada-ui
|
|
2
2
|
|
|
3
|
-
## 5.
|
|
3
|
+
## 5.3.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- 619db2d: Add base values for lightness and chroma which can be overriden for light theme
|
|
8
|
+
|
|
9
|
+
### Patch Changes
|
|
10
|
+
|
|
11
|
+
- 619db2d: Fix wrong foreground colors for color variants in light theme
|
|
12
|
+
|
|
13
|
+
## 5.2.0
|
|
14
|
+
|
|
15
|
+
### Minor Changes
|
|
16
|
+
|
|
17
|
+
- 1bb7ec4: Add abbreviations for commands to be shown on small screens instead of the default label
|
|
4
18
|
|
|
5
19
|
### Patch Changes
|
|
6
20
|
|
|
7
|
-
-
|
|
21
|
+
- d9ec56e: Using whole border as focus state
|
|
8
22
|
|
|
9
23
|
## 5.1.1
|
|
10
24
|
|
package/css/ada.blue.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.warn,.shade2,.shade3,.shade1,.primary,:root{--color100: oklch(0.91 0.05 var(--hue));--color500: oklch(0.
|
|
1
|
+
.warn,.shade2,.shade3,.shade1,.primary,:root{--l-base: var(--l-base-override, 0.31);--c-base: var(--c-base-override, 0.07);--color100: oklch(0.91 0.05 var(--hue));--color500: oklch( calc(var(--l-base) + 0.15) calc(var(--c-base) + 0.06) var(--hue) );--color600: oklch( calc(var(--l-base) + 0.1) calc(var(--c-base) + 0.04) var(--hue) );--color700: oklch( calc(var(--l-base) + 0.05) calc(var(--c-base) + 0.02) var(--hue) );--color800: oklch(var(--l-base) var(--c-base) var(--hue));--color950: oklch(0.18 0.03 var(--hue));--bg-body: var(--bg-body-override, var(--color950));--fg-body: var(--fg-body-override, var(--color100));--panel-background: oklch(var(--500) / 0.1)}:root.light-theme .warn,:root.light-theme .shade2,:root.light-theme .shade3,:root.light-theme .shade1,:root.light-theme .primary,:root.light-theme :root,:root.light-theme{--l-base-override: 0.4;--c-base-override: 0.1;--bg-body-override: var(--color100);--fg-body-override: var(--color800)}.primary,:root{--hue: 246}.shade1{--hue: 225}.shade3{--hue: 165}.shade2{--hue: 190}.warn{--hue: 29}
|
package/css/ada.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
*,::before,::after{box-sizing:border-box;border-width:0;border-style:solid;border-color:currentColor}html{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}body{margin:0}h1,h2,h3,h4,h5,h6,p,pre{font-size:inherit;font-weight:inherit;margin:0}a{color:inherit;text-decoration:inherit}button,input,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button;background-color:transparent;background-image:none}button,[role=button]{cursor:pointer}:disabled{cursor:default}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}ol,ul,menu{list-style:none;margin:0;padding:0}:root{--font-family: "Open Sans", sans-serif;--font-size: 16px;--scale-sm: 0.85rem;--scale-base: 1rem;--scale-lg: 1.2rem;--scale-xl: 1.4rem;--scale-2xl: 1.6rem;--scale-3xl: 1.8rem;--box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.4);--spacing-xs: 2px;--spacing-sm: 6px;--spacing: 10px;--
|
|
1
|
+
*,::before,::after{box-sizing:border-box;border-width:0;border-style:solid;border-color:currentColor}html{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}body{margin:0}h1,h2,h3,h4,h5,h6,p,pre{font-size:inherit;font-weight:inherit;margin:0}a{color:inherit;text-decoration:inherit}button,input,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button;background-color:transparent;background-image:none}button,[role=button]{cursor:pointer}:disabled{cursor:default}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}ol,ul,menu{list-style:none;margin:0;padding:0}:root{--font-family: "Open Sans", sans-serif;--font-size: 16px;--scale-sm: 0.85rem;--scale-base: 1rem;--scale-lg: 1.2rem;--scale-xl: 1.4rem;--scale-2xl: 1.6rem;--scale-3xl: 1.8rem;--box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.4);--spacing-xs: 2px;--spacing-sm: 6px;--spacing: 10px;--spacing-lg: 14px;--border-width: 2px;--border-radius: 0.3rem}@media screen and (min-width: 640px){:root{--font-size: 14px}}:root.light-theme{--box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.4)}.panel>article::-webkit-scrollbar,body::-webkit-scrollbar{width:var(--spacing-sm);background:transparent}.panel>article::-webkit-scrollbar-thumb,body::-webkit-scrollbar-thumb{min-width:1rem;border-style:solid;border-color:transparent;border-width:var(--spacing-sm);background:var(--color700);box-sizing:border-box;background-clip:border-box}html{font-family:var(--font-family);font-weight:400;font-size:var(--font-size)}body{font-size:1rem;padding:var(--spacing);background:var(--bg-body);color:var(--fg-body);transition:background-color .15s ease-in-out}h1,h2,h3,h4,.panel>header{font-weight:300;text-shadow:0 0 4px oklch(var(--400)/0.5);color:var(--fg-body)}h1{font-size:var(--scale-3xl)}h2{font-size:var(--scale-2xl)}h3{font-size:var(--scale-xl)}h4{font-size:var(--scale-lg)}.command{background-color:var(--color800);box-shadow:var(--box-shadow);display:grid;align-items:end;justify-items:end;text-align:end;border-style:solid;border-color:transparent;border-width:var(--border-width);padding:var(--spacing-xs) var(--spacing-sm);min-height:3rem;min-width:3rem;border-radius:var(--border-radius);overflow:hidden;outline:none;color:var(--color100);font-family:inherit;font-size:var(--scale-base);cursor:pointer;user-select:none;vertical-align:middle;transition:border-color .15s ease-in-out,background-color .15s ease-in-out}.command.flash{animation:flash-background 1s ease-in-out infinite}.command[data-label][data-abbr]::after{content:attr(data-abbr)}@media(min-width: 640px){.command[data-label][data-abbr]::after{content:attr(data-label)}}.command:disabled{opacity:.7;cursor:default;pointer-events:none;background:#6d6d6d;color:#ededed}.command.outline{background-color:transparent;border-color:var(--color700);color:var(--fg-body)}.command.outline.flash{animation-name:flash-border}.command.outline:disabled{background:transparent;border-color:#6d6d6d;color:#6d6d6d}.command.outline:active{color:var(--color100)}.command:focus{border-color:var(--color500)}.command:active{border-color:var(--color500);background-color:var(--color500);animation-play-state:paused}.compound-commands{display:inline-flex;gap:var(--spacing-sm)}.compound-commands>.spacer{background-color:var(--color800);box-shadow:var(--box-shadow);min-width:1rem;min-height:1rem}.compound-commands>.spacer.outline{background-color:transparent;border:var(--border-width) solid var(--color700)}.compound-commands>.text{font-size:var(--scale-3xl);line-height:var(--scale-3xl);align-self:center;padding:var(--spacing-xs)}.compound-commands>.command:first-child,.compound-commands .spacer:first-child{border-radius:var(--border-radius) 0 0 var(--border-radius)}.compound-commands>.command:not(:first-child):not(:last-child),.compound-commands .spacer:not(:first-child):not(:last-child){border-radius:0}.compound-commands>.command:last-child,.compound-commands .spacer:last-child{border-radius:0 var(--border-radius) var(--border-radius) 0}.compound-commands.vertical{flex-direction:column}.compound-commands.vertical>.text{justify-self:center}.compound-commands.vertical>.command:first-child,.compound-commands.vertical .spacer:first-child{border-radius:var(--border-radius) var(--border-radius) 0 0}.compound-commands.vertical>.command:last-child,.compound-commands.vertical .spacer:last-child{border-radius:0 0 var(--border-radius) var(--border-radius)}@keyframes flash-background{50%{background-color:var(--color600)}}@keyframes flash-border{50%{border-color:var(--color500)}}.input{border-radius:var(--border-radius);box-shadow:var(--box-shadow);outline:none;border:var(--border-width) solid var(--color600);color:var(--fg-body);font-family:inherit;background-color:transparent;transition:border-color .15s ease-in-out;padding:var(--spacing-sm);font-size:var(--scale-base)}.input:focus{border:var(--border-width) solid var(--color500)}.input:disabled{opacity:.4;filter:saturate(0.6);cursor:default;pointer-events:none}.panel>footer::after,.panel>footer::before,.panel>header::after,.panel>header::before{content:"";border-style:solid;border-color:var(--color700);position:absolute;height:1rem;width:1rem;z-index:2}.panel{background:var(--panel-background);box-shadow:var(--box-shadow);border-radius:var(--border-radius);display:grid;grid-template-rows:auto 1fr auto;overflow:auto}.panel>header{position:relative;font-size:var(--scale-xl);padding:var(--spacing-sm) var(--spacing)}.panel>header:empty{padding:0}.panel>header::before{border-width:var(--border-width) 0 0 var(--border-width);border-radius:var(--border-radius) 0 0 0;left:0;top:0}.panel>header::after{border-width:var(--border-width) var(--border-width) 0 0;border-radius:0 var(--border-radius) 0 0;right:0;top:0}.panel>article{z-index:1;padding:var(--spacing);overflow:auto}.panel>footer{position:relative;padding:var(--spacing-sm) var(--spacing);font-size:var(--scale-sm);text-align:right}.panel>footer:empty{padding:0}.panel>footer::before{border-width:0 0 var(--border-width) var(--border-width);border-radius:0 0 0 var(--border-radius);left:0;bottom:0}.panel>footer::after{border-width:0 var(--border-width) var(--border-width) 0;border-radius:0 0 var(--border-radius) 0;right:0;bottom:0}.spinner{display:inline-grid;justify-items:center;align-items:center;width:1em;height:1em;position:relative;box-sizing:border-box;animation:6s .5s rotate ease-in-out alternate infinite}.spinner::before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;border-style:solid;border-width:.05em;border-radius:50%;border-color:var(--color700) transparent;animation:4s .5s inset1 ease-in-out infinite;box-shadow:0px 12px 10px -12px rgba(0,0,0,.4),0px -12px 10px -12px rgba(0,0,0,.4)}.spinner::after{content:"";position:absolute;top:0;left:0;right:0;bottom:0;border-style:solid;border-width:.05em;border-radius:50%;border-color:transparent var(--color500);animation:4s .5s inset2 ease-in-out infinite;box-shadow:12px 0px 10px -12px rgba(0,0,0,.4),-12px 0px 10px -12px rgba(0,0,0,.4)}@keyframes rotate{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}@keyframes inset1{0%{top:0;left:0;right:0;bottom:0;transform:rotate(0)}12.5%{top:.2em;left:.2em;right:.2em;bottom:.2em;transform:rotate(0)}37.5%{top:.2em;left:.2em;right:.2em;bottom:.2em;transform:rotate(180deg)}50%{top:0;left:0;right:0;bottom:0;transform:rotate(180deg)}100%{top:0;left:0;right:0;bottom:0;transform:rotate(180deg)}}@keyframes inset2{0%{top:0;left:0;right:0;bottom:0;transform:rotate(0)}50%{top:0;left:0;right:0;bottom:0;transform:rotate(0)}62.5%{top:.2em;left:.2em;right:.2em;bottom:.2em;transform:rotate(0)}87.5%{top:.2em;left:.2em;right:.2em;bottom:.2em;transform:rotate(180deg)}100%{top:0;left:0;right:0;bottom:0;transform:rotate(180deg)}}
|
package/index.html
CHANGED
|
@@ -10,189 +10,88 @@
|
|
|
10
10
|
name="viewport"
|
|
11
11
|
content="user-scalable=yes, initial-scale=1.0, maximum-scale=10.0, width=device-width"
|
|
12
12
|
/>
|
|
13
|
+
<link rel="stylesheet" href="style.css" />
|
|
13
14
|
<link rel="stylesheet" href="css/ada.blue.css" />
|
|
14
15
|
<link rel="stylesheet" href="css/ada.css" />
|
|
15
16
|
<link
|
|
16
17
|
href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600"
|
|
17
18
|
rel="stylesheet"
|
|
18
19
|
/>
|
|
19
|
-
<style>
|
|
20
|
-
html {
|
|
21
|
-
scroll-padding-top: 1rem;
|
|
22
|
-
}
|
|
23
|
-
|
|
24
|
-
html.height-100 {
|
|
25
|
-
height: 100%;
|
|
26
|
-
min-height: 100%;
|
|
27
|
-
}
|
|
28
|
-
|
|
29
|
-
html.height-100 > body {
|
|
30
|
-
height: 100%;
|
|
31
|
-
min-height: 100%;
|
|
32
|
-
}
|
|
33
|
-
|
|
34
|
-
html:not(.height-100) > body {
|
|
35
|
-
align-items: start;
|
|
36
|
-
}
|
|
37
|
-
|
|
38
|
-
.typography {
|
|
39
|
-
display: grid;
|
|
40
|
-
grid-template-columns: repeat(2, auto) 1fr;
|
|
41
|
-
gap: var(--spacing);
|
|
42
|
-
justify-content: start;
|
|
43
|
-
}
|
|
44
|
-
.typography > p {
|
|
45
|
-
grid-column: span 3;
|
|
46
|
-
display: grid;
|
|
47
|
-
grid-template-columns: subgrid;
|
|
48
|
-
gap: var(--spacing);
|
|
49
|
-
}
|
|
50
|
-
|
|
51
|
-
.color-shades {
|
|
52
|
-
display: grid;
|
|
53
|
-
}
|
|
54
|
-
|
|
55
|
-
.color-shades > h3 {
|
|
56
|
-
margin-bottom: var(--spacing-sm);
|
|
57
|
-
}
|
|
58
|
-
|
|
59
|
-
.color-shades > div {
|
|
60
|
-
display: inline-grid;
|
|
61
|
-
align-items: center;
|
|
62
|
-
justify-items: center;
|
|
63
|
-
width: 8rem;
|
|
64
|
-
height: 3rem;
|
|
65
|
-
box-sizing: border-box;
|
|
66
|
-
color: var(--color100);
|
|
67
|
-
border-bottom: 1px solid transparent;
|
|
68
|
-
}
|
|
69
|
-
|
|
70
|
-
.color-shades > div:last-of-type {
|
|
71
|
-
border-bottom: none;
|
|
72
|
-
}
|
|
73
|
-
|
|
74
|
-
.color-shades.usage > div {
|
|
75
|
-
border-color: var(--color600);
|
|
76
|
-
color: inherit;
|
|
77
|
-
width: auto;
|
|
78
|
-
padding: 0 1rem;
|
|
79
|
-
}
|
|
80
|
-
|
|
81
|
-
.color-shades > div.color950 {
|
|
82
|
-
background: var(--color950);
|
|
83
|
-
}
|
|
84
|
-
|
|
85
|
-
.color-shades > div.color800 {
|
|
86
|
-
background: var(--color800);
|
|
87
|
-
}
|
|
88
|
-
|
|
89
|
-
.color-shades > div.color700 {
|
|
90
|
-
background: var(--color700);
|
|
91
|
-
}
|
|
92
|
-
|
|
93
|
-
.color-shades > div.color600 {
|
|
94
|
-
background: var(--color600);
|
|
95
|
-
}
|
|
96
|
-
|
|
97
|
-
.color-shades > div.color500 {
|
|
98
|
-
background: var(--color500);
|
|
99
|
-
}
|
|
100
|
-
|
|
101
|
-
.color-shades > div.color100 {
|
|
102
|
-
background: var(--color100);
|
|
103
|
-
color: var(--color800);
|
|
104
|
-
}
|
|
105
|
-
|
|
106
|
-
.spacing {
|
|
107
|
-
display: grid;
|
|
108
|
-
grid-template-columns: repeat(2, auto) 1fr;
|
|
109
|
-
gap: var(--spacing);
|
|
110
|
-
align-items: center;
|
|
111
|
-
}
|
|
112
|
-
|
|
113
|
-
.spacing-box {
|
|
114
|
-
display: inline-block;
|
|
115
|
-
background: var(--color500);
|
|
116
|
-
width: var(--spacing);
|
|
117
|
-
height: var(--spacing);
|
|
118
|
-
}
|
|
119
|
-
|
|
120
|
-
.spacing-box.xs {
|
|
121
|
-
width: var(--spacing-xs);
|
|
122
|
-
height: var(--spacing-xs);
|
|
123
|
-
}
|
|
124
|
-
|
|
125
|
-
.spacing-box.sm {
|
|
126
|
-
width: var(--spacing-sm);
|
|
127
|
-
height: var(--spacing-sm);
|
|
128
|
-
}
|
|
129
|
-
</style>
|
|
130
20
|
</head>
|
|
131
21
|
|
|
132
|
-
<body
|
|
133
|
-
style="
|
|
134
|
-
display: grid;
|
|
135
|
-
grid-template-columns: minmax(12vw, auto) 1fr;
|
|
136
|
-
grid-template-rows: 1fr auto;
|
|
137
|
-
column-gap: var(--spacing);
|
|
138
|
-
"
|
|
139
|
-
>
|
|
22
|
+
<body>
|
|
140
23
|
<div
|
|
141
24
|
class="compound-commands vertical"
|
|
142
25
|
style="position: sticky; top: var(--spacing)"
|
|
143
26
|
>
|
|
144
27
|
<div class="spacer"></div>
|
|
145
|
-
<a
|
|
28
|
+
<a
|
|
29
|
+
href="#typography"
|
|
30
|
+
class="command shade1"
|
|
31
|
+
data-label="Typography"
|
|
32
|
+
data-abbr="Typo"
|
|
33
|
+
></a>
|
|
146
34
|
<a href="#spacing" class="command shade1">Spacing</a>
|
|
147
35
|
<a href="#colors" class="command shade1">Colors</a>
|
|
148
36
|
<a href="#page-layout" class="command shade1">Page Layout</a>
|
|
149
|
-
<a
|
|
37
|
+
<a
|
|
38
|
+
href="#command"
|
|
39
|
+
class="command shade3"
|
|
40
|
+
data-label="Command"
|
|
41
|
+
data-abbr="Cmd"
|
|
42
|
+
></a>
|
|
150
43
|
<a href="#panel" class="command shade2">Panel</a>
|
|
151
44
|
<a href="#input" class="command">Input</a>
|
|
152
45
|
<a href="#spinner" class="command">Spinner</a>
|
|
153
46
|
<div style="flex: 1" class="spacer"></div>
|
|
47
|
+
<button
|
|
48
|
+
class="command"
|
|
49
|
+
onclick="document.documentElement.classList.toggle('light-theme'); this.textContent = this.textContent === 'Dark' ? 'Light' : 'Dark'"
|
|
50
|
+
>
|
|
51
|
+
Light
|
|
52
|
+
</button>
|
|
154
53
|
<div class="spacer"></div>
|
|
155
54
|
</div>
|
|
156
55
|
<div class="panel">
|
|
157
56
|
<header><h1>Ada UI Design Guide</h1></header>
|
|
158
57
|
<article
|
|
159
58
|
style="
|
|
59
|
+
scroll-padding-top: 1rem;
|
|
160
60
|
display: grid;
|
|
161
61
|
grid-auto-rows: max-content;
|
|
162
62
|
gap: var(--spacing);
|
|
163
|
-
scroll-padding-top: 1rem;
|
|
164
63
|
"
|
|
165
64
|
>
|
|
166
65
|
<div class="panel">
|
|
167
66
|
<header><h2 id="typography">Typography</h2></header>
|
|
168
67
|
<article class="typography">
|
|
169
|
-
<p
|
|
170
|
-
<code>--scale-3xl</code>
|
|
68
|
+
<p>
|
|
69
|
+
<code style="font-size: var(--scale-3xl)">--scale-3xl</code>
|
|
171
70
|
<span>1.8rem</span>
|
|
172
71
|
<span>Headline 1, Text in Compound Commands</span>
|
|
173
72
|
</p>
|
|
174
|
-
<p
|
|
175
|
-
<code>--scale-2xl</code>
|
|
73
|
+
<p>
|
|
74
|
+
<code style="font-size: var(--scale-2xl)">--scale-2xl</code>
|
|
176
75
|
<span>1.6rem</span>
|
|
177
76
|
<span>Headline 2</span>
|
|
178
77
|
</p>
|
|
179
|
-
<p
|
|
180
|
-
<code>--scale-xl</code>
|
|
78
|
+
<p>
|
|
79
|
+
<code style="font-size: var(--scale-xl)">--scale-xl</code>
|
|
181
80
|
<span>1.4rem</span>
|
|
182
81
|
<span>Headline 3</span>
|
|
183
82
|
</p>
|
|
184
|
-
<p
|
|
185
|
-
<code>--scale-lg</code>
|
|
83
|
+
<p>
|
|
84
|
+
<code style="font-size: var(--scale-lg)">--scale-lg</code>
|
|
186
85
|
<span>1.2rem</span>
|
|
187
86
|
<span>Headline 4</span>
|
|
188
87
|
</p>
|
|
189
|
-
<p
|
|
190
|
-
<code>--scale-base</code>
|
|
88
|
+
<p>
|
|
89
|
+
<code style="font-size: var(--scale-base)">--scale-base</code>
|
|
191
90
|
<span>1rem</span>
|
|
192
91
|
<span>Normal Text, Command Label</span>
|
|
193
92
|
</p>
|
|
194
|
-
<p
|
|
195
|
-
<code>--scale-sm</code>
|
|
93
|
+
<p>
|
|
94
|
+
<code style="font-size: var(--scale-sm)">--scale-sm</code>
|
|
196
95
|
<span>0.85rem</span>
|
|
197
96
|
<span>Small Text, Panel Footer</span>
|
|
198
97
|
</p>
|
|
@@ -211,65 +110,76 @@
|
|
|
211
110
|
<code>--spacing</code>
|
|
212
111
|
<span>10px</span>
|
|
213
112
|
<div class="spacing-box shade3"></div>
|
|
113
|
+
<code>--spacing-lg</code>
|
|
114
|
+
<span>14px</span>
|
|
115
|
+
<div class="spacing-box lg shade3"></div>
|
|
214
116
|
</article>
|
|
215
117
|
<footer></footer>
|
|
216
118
|
</div>
|
|
217
119
|
<div class="panel">
|
|
218
120
|
<header><h2 id="colors">Colors</h2></header>
|
|
219
|
-
<article style="display:
|
|
220
|
-
<div class="
|
|
221
|
-
<
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
<
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
<
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
<
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
<
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
121
|
+
<article style="display: grid; gap: var(--spacing)">
|
|
122
|
+
<div class="colors">
|
|
123
|
+
<div class="color-shades">
|
|
124
|
+
<h4>Primary</h4>
|
|
125
|
+
<div class="color100">100</div>
|
|
126
|
+
<div class="color500">500</div>
|
|
127
|
+
<div class="color600">600</div>
|
|
128
|
+
<div class="color700">700</div>
|
|
129
|
+
<div class="color800">800</div>
|
|
130
|
+
<div class="color950">950</div>
|
|
131
|
+
</div>
|
|
132
|
+
<div class="color-shades">
|
|
133
|
+
<h4>Shade 1</h4>
|
|
134
|
+
<div class="color100 shade1">100</div>
|
|
135
|
+
<div class="color500 shade1">500</div>
|
|
136
|
+
<div class="color600 shade1">600</div>
|
|
137
|
+
<div class="color700 shade1">700</div>
|
|
138
|
+
<div class="color800 shade1">800</div>
|
|
139
|
+
<div class="color950 shade1">950</div>
|
|
140
|
+
</div>
|
|
141
|
+
<div class="color-shades">
|
|
142
|
+
<h4>Shade 2</h4>
|
|
143
|
+
<div class="color100 shade2">100</div>
|
|
144
|
+
<div class="color500 shade2">500</div>
|
|
145
|
+
<div class="color600 shade2">600</div>
|
|
146
|
+
<div class="color700 shade2">700</div>
|
|
147
|
+
<div class="color800 shade2">800</div>
|
|
148
|
+
<div class="color950 shade2">950</div>
|
|
149
|
+
</div>
|
|
150
|
+
<div class="color-shades">
|
|
151
|
+
<h4>Shade 3</h4>
|
|
152
|
+
<div class="color100 shade3">100</div>
|
|
153
|
+
<div class="color500 shade3">500</div>
|
|
154
|
+
<div class="color600 shade3">600</div>
|
|
155
|
+
<div class="color700 shade3">700</div>
|
|
156
|
+
<div class="color800 shade3">800</div>
|
|
157
|
+
<div class="color950 shade3">950</div>
|
|
158
|
+
</div>
|
|
159
|
+
<div class="color-shades">
|
|
160
|
+
<h4>Warn</h4>
|
|
161
|
+
<div class="color100 warn">100</div>
|
|
162
|
+
<div class="color500 warn">500</div>
|
|
163
|
+
<div class="color600 warn">600</div>
|
|
164
|
+
<div class="color700 warn">700</div>
|
|
165
|
+
<div class="color800 warn">800</div>
|
|
166
|
+
<div class="color950 warn">950</div>
|
|
167
|
+
</div>
|
|
264
168
|
</div>
|
|
265
|
-
<
|
|
266
|
-
|
|
267
|
-
<
|
|
268
|
-
<
|
|
269
|
-
<
|
|
270
|
-
<
|
|
271
|
-
<
|
|
272
|
-
<
|
|
169
|
+
<h3>Usage</h3>
|
|
170
|
+
<div class="color-usages">
|
|
171
|
+
<code>100</code>
|
|
172
|
+
<span>Text Color</span>
|
|
173
|
+
<code>500</code>
|
|
174
|
+
<span>Active/Focus State</span>
|
|
175
|
+
<code>600</code>
|
|
176
|
+
<span>Border/Flash Color</span>
|
|
177
|
+
<code>700</code>
|
|
178
|
+
<span>Corner Color</span>
|
|
179
|
+
<code>800</code>
|
|
180
|
+
<span>Command Color</span>
|
|
181
|
+
<code>950</code>
|
|
182
|
+
<span>Background</span>
|
|
273
183
|
</div>
|
|
274
184
|
</article>
|
|
275
185
|
<footer></footer>
|
|
@@ -277,13 +187,15 @@
|
|
|
277
187
|
<div class="panel">
|
|
278
188
|
<header><h2 id="page-layout">Page Layout</h2></header>
|
|
279
189
|
<article>
|
|
280
|
-
<p
|
|
190
|
+
<p>
|
|
281
191
|
Choose yourself whether the body should scroll or the body should
|
|
282
192
|
have a fixed width of 100%. For the latter, you should use one or
|
|
283
|
-
more top-most panels which then will scroll their content.
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
193
|
+
more top-most panels which then will scroll their content.
|
|
194
|
+
</p>
|
|
195
|
+
<p>
|
|
196
|
+
You can see both options and how to implement them by toggling the
|
|
197
|
+
class <code>height-100</code> on the <code>html</code> element of
|
|
198
|
+
this demo page.
|
|
287
199
|
</p>
|
|
288
200
|
</article>
|
|
289
201
|
<footer></footer>
|
|
@@ -298,56 +210,81 @@
|
|
|
298
210
|
gap: 1rem;
|
|
299
211
|
"
|
|
300
212
|
>
|
|
301
|
-
<h3
|
|
302
|
-
<
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
<
|
|
310
|
-
<
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
<
|
|
318
|
-
<
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
<
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
|
|
213
|
+
<h3>Default</h3>
|
|
214
|
+
<div class="row">
|
|
215
|
+
<button class="command">Command</button>
|
|
216
|
+
<button class="command shade1">Command</button>
|
|
217
|
+
<button class="command shade2">Command</button>
|
|
218
|
+
<button class="command shade3">Command</button>
|
|
219
|
+
<button class="command warn">Command</button>
|
|
220
|
+
</div>
|
|
221
|
+
<h3>Outline</h3>
|
|
222
|
+
<div class="row">
|
|
223
|
+
<button class="command outline">Command</button>
|
|
224
|
+
<button class="command outline shade1">Command</button>
|
|
225
|
+
<button class="command outline shade2">Command</button>
|
|
226
|
+
<button class="command outline shade3">Command</button>
|
|
227
|
+
<button class="command outline warn">Command</button>
|
|
228
|
+
</div>
|
|
229
|
+
<h3>Flashing</h3>
|
|
230
|
+
<div class="row">
|
|
231
|
+
<button class="command flash">Command</button>
|
|
232
|
+
<button class="command flash shade1">Command</button>
|
|
233
|
+
<button class="command flash shade2">Command</button>
|
|
234
|
+
<button class="command flash shade3">Command</button>
|
|
235
|
+
<button class="command flash warn">Command</button>
|
|
236
|
+
</div>
|
|
237
|
+
<div class="row">
|
|
238
|
+
<button class="command flash outline">Command</button>
|
|
239
|
+
<button class="command flash outline shade1">Command</button>
|
|
240
|
+
<button class="command flash outline shade2">Command</button>
|
|
241
|
+
<button class="command flash outline shade3">Command</button>
|
|
242
|
+
<button class="command flash outline warn">Command</button>
|
|
243
|
+
</div>
|
|
244
|
+
<h3>Disabled</h3>
|
|
245
|
+
<div class="row">
|
|
246
|
+
<button disabled class="command">Command</button>
|
|
247
|
+
<button disabled class="command outline">Command</button>
|
|
248
|
+
</div>
|
|
249
|
+
<h3>Abbreviations for small screens</h3>
|
|
250
|
+
<p>
|
|
251
|
+
When rendered on small screens (<640px) an abbreviation can be
|
|
252
|
+
used to reduce the space a command needs. When doing so, the text
|
|
253
|
+
node of the command should be empty and two
|
|
254
|
+
<code>data-</code> attributes should be used:
|
|
255
|
+
<code>data-label</code> and <code>data-abbr</code>.
|
|
256
|
+
</p>
|
|
257
|
+
<p>
|
|
258
|
+
In order to see the difference below, reduce/increase the browser
|
|
259
|
+
window width.
|
|
331
260
|
</p>
|
|
332
261
|
<button
|
|
333
|
-
|
|
262
|
+
data-label="Internationalization"
|
|
263
|
+
data-abbr="i18n"
|
|
334
264
|
class="command"
|
|
335
|
-
>
|
|
265
|
+
></button>
|
|
266
|
+
<h3>Wrapping</h3>
|
|
267
|
+
<p>
|
|
268
|
+
The command's text is wrapped by default which increases the
|
|
269
|
+
height of the command.
|
|
270
|
+
</p>
|
|
271
|
+
<button style="max-width: 20rem" class="command">
|
|
336
272
|
A command with a quite long description.
|
|
337
273
|
</button>
|
|
338
|
-
<p
|
|
274
|
+
<p>
|
|
339
275
|
If you want to use ellipsis and a single line of text, a wrapper
|
|
340
276
|
element is needed. See page's source code for details.
|
|
341
277
|
</p>
|
|
342
|
-
<p
|
|
278
|
+
<p
|
|
279
|
+
class="warn"
|
|
280
|
+
style="font-size: var(--scale-lg); color: var(--fg-body)"
|
|
281
|
+
>
|
|
343
282
|
Double check if ellipsis is really needed and if yes, that the
|
|
344
283
|
full text is visible with another interaction (no tooltip, since
|
|
345
|
-
not mobile friendly and not in the sense of the Ada look and
|
|
284
|
+
not mobile friendly and not in the sense of the Ada look and
|
|
285
|
+
feel).
|
|
346
286
|
</p>
|
|
347
|
-
<button
|
|
348
|
-
style="max-width: 20rem; grid-column: span 5"
|
|
349
|
-
class="command"
|
|
350
|
-
>
|
|
287
|
+
<button style="max-width: 20rem" class="command">
|
|
351
288
|
<span
|
|
352
289
|
style="
|
|
353
290
|
text-overflow: ellipsis;
|
|
@@ -359,20 +296,20 @@
|
|
|
359
296
|
A command with a quite long description.
|
|
360
297
|
</span>
|
|
361
298
|
</button>
|
|
362
|
-
<h3
|
|
363
|
-
<div
|
|
299
|
+
<h3>Compound</h3>
|
|
300
|
+
<div class="compound-commands">
|
|
364
301
|
<button class="command">Command</button>
|
|
365
302
|
<button class="command"></button>
|
|
366
303
|
<div class="spacer"></div>
|
|
367
304
|
</div>
|
|
368
|
-
<h4
|
|
369
|
-
<div
|
|
305
|
+
<h4>With Text</h4>
|
|
306
|
+
<div class="compound-commands">
|
|
370
307
|
<button class="command">Command</button>
|
|
371
308
|
<div class="text">47</div>
|
|
372
309
|
<div class="spacer"></div>
|
|
373
310
|
</div>
|
|
374
|
-
<h4
|
|
375
|
-
<div
|
|
311
|
+
<h4>Vertical</h4>
|
|
312
|
+
<div class="compound-commands vertical">
|
|
376
313
|
<div class="spacer"></div>
|
|
377
314
|
<button class="command">Command</button>
|
|
378
315
|
<button class="command"></button>
|
|
@@ -463,7 +400,7 @@
|
|
|
463
400
|
<footer></footer>
|
|
464
401
|
</div>
|
|
465
402
|
</article>
|
|
466
|
-
<footer>Ada Version 5
|
|
403
|
+
<footer>Ada Version 5</footer>
|
|
467
404
|
</div>
|
|
468
405
|
</body>
|
|
469
406
|
</html>
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "ada-ui",
|
|
3
|
-
"version": "5.
|
|
3
|
+
"version": "5.3.0",
|
|
4
4
|
"scripts": {
|
|
5
5
|
"dev": "concurrently -n scss,serve 'sass scss:css --watch' 'alive-server .'",
|
|
6
6
|
"build": "rm -rf css && sass scss:css -s compressed --no-source-map",
|
|
@@ -1,10 +1,18 @@
|
|
|
1
1
|
%colourShades {
|
|
2
|
+
--l-base: var(--l-base-override, 0.31);
|
|
3
|
+
--c-base: var(--c-base-override, 0.07);
|
|
2
4
|
--color100: oklch(0.91 0.05 var(--hue));
|
|
3
5
|
|
|
4
|
-
--color500: oklch(
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
--
|
|
6
|
+
--color500: oklch(
|
|
7
|
+
calc(var(--l-base) + 0.15) calc(var(--c-base) + 0.06) var(--hue)
|
|
8
|
+
);
|
|
9
|
+
--color600: oklch(
|
|
10
|
+
calc(var(--l-base) + 0.1) calc(var(--c-base) + 0.04) var(--hue)
|
|
11
|
+
);
|
|
12
|
+
--color700: oklch(
|
|
13
|
+
calc(var(--l-base) + 0.05) calc(var(--c-base) + 0.02) var(--hue)
|
|
14
|
+
);
|
|
15
|
+
--color800: oklch(var(--l-base) var(--c-base) var(--hue));
|
|
8
16
|
|
|
9
17
|
--color950: oklch(0.18 0.03 var(--hue));
|
|
10
18
|
|
package/scss/_command.scss
CHANGED
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
text-align: end;
|
|
8
8
|
border-style: solid;
|
|
9
9
|
border-color: transparent;
|
|
10
|
-
border-width:
|
|
10
|
+
border-width: var(--border-width);
|
|
11
11
|
padding: var(--spacing-xs) var(--spacing-sm);
|
|
12
12
|
min-height: 3rem;
|
|
13
13
|
min-width: 3rem;
|
|
@@ -26,6 +26,16 @@
|
|
|
26
26
|
animation: flash-background 1s ease-in-out infinite;
|
|
27
27
|
}
|
|
28
28
|
|
|
29
|
+
&[data-label][data-abbr]::after {
|
|
30
|
+
content: attr(data-abbr);
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
@media (min-width: 640px) {
|
|
34
|
+
&[data-label][data-abbr]::after {
|
|
35
|
+
content: attr(data-label);
|
|
36
|
+
}
|
|
37
|
+
}
|
|
38
|
+
|
|
29
39
|
&:disabled {
|
|
30
40
|
opacity: 0.7;
|
|
31
41
|
cursor: default;
|
|
@@ -37,7 +47,6 @@
|
|
|
37
47
|
&.outline {
|
|
38
48
|
background-color: transparent;
|
|
39
49
|
border-color: var(--color700);
|
|
40
|
-
border-width: var(--border-width);
|
|
41
50
|
color: var(--fg-body);
|
|
42
51
|
|
|
43
52
|
&.flash {
|
|
@@ -50,17 +59,13 @@
|
|
|
50
59
|
color: #6d6d6d;
|
|
51
60
|
}
|
|
52
61
|
|
|
53
|
-
&:focus {
|
|
54
|
-
border-color: var(--color500);
|
|
55
|
-
}
|
|
56
|
-
|
|
57
62
|
&:active {
|
|
58
63
|
color: var(--color100);
|
|
59
64
|
}
|
|
60
65
|
}
|
|
61
66
|
|
|
62
67
|
&:focus {
|
|
63
|
-
border-
|
|
68
|
+
border-color: var(--color500);
|
|
64
69
|
}
|
|
65
70
|
|
|
66
71
|
&:active {
|
package/scss/_global.scss
CHANGED
|
@@ -11,11 +11,11 @@
|
|
|
11
11
|
--spacing-xs: 2px;
|
|
12
12
|
--spacing-sm: 6px;
|
|
13
13
|
--spacing: 10px;
|
|
14
|
-
--
|
|
15
|
-
--
|
|
14
|
+
--spacing-lg: 14px;
|
|
15
|
+
--border-width: 2px;
|
|
16
16
|
--border-radius: 0.3rem;
|
|
17
17
|
|
|
18
|
-
@media screen and (min-width:
|
|
18
|
+
@media screen and (min-width: 640px) {
|
|
19
19
|
--font-size: 14px;
|
|
20
20
|
}
|
|
21
21
|
|
package/scss/ada.blue.scss
CHANGED
|
@@ -1,37 +1,73 @@
|
|
|
1
1
|
@import "ada.theme-base";
|
|
2
2
|
|
|
3
|
+
// The whole logic of setting the variables
|
|
4
|
+
// for every class to ensure the colors are all
|
|
5
|
+
// correct for all variants is quite repetitive.
|
|
6
|
+
// This needs improvement
|
|
7
|
+
|
|
8
|
+
%light-override {
|
|
9
|
+
//Set overrides for light theme
|
|
10
|
+
--l-base-override: 0.4;
|
|
11
|
+
--c-base-override: 0.1;
|
|
12
|
+
--bg-body-override: var(--color100);
|
|
13
|
+
--fg-body-override: var(--color800);
|
|
14
|
+
}
|
|
15
|
+
|
|
3
16
|
:root {
|
|
4
17
|
//Defaults to primary color
|
|
5
18
|
@extend .primary;
|
|
6
19
|
|
|
7
|
-
//Set overrides for light theme
|
|
8
20
|
&.light-theme {
|
|
9
|
-
|
|
10
|
-
--fg-body-override: var(--color800);
|
|
21
|
+
@extend %light-override;
|
|
11
22
|
}
|
|
12
23
|
}
|
|
13
24
|
|
|
14
25
|
.primary {
|
|
15
26
|
@extend %colourShades;
|
|
27
|
+
|
|
28
|
+
:root.light-theme & {
|
|
29
|
+
@extend %light-override;
|
|
30
|
+
}
|
|
31
|
+
|
|
16
32
|
--hue: 246;
|
|
17
33
|
}
|
|
18
34
|
|
|
19
35
|
.shade1 {
|
|
20
36
|
@extend %colourShades;
|
|
37
|
+
|
|
38
|
+
:root.light-theme & {
|
|
39
|
+
@extend %light-override;
|
|
40
|
+
}
|
|
41
|
+
|
|
21
42
|
--hue: 225;
|
|
22
43
|
}
|
|
23
44
|
|
|
24
45
|
.shade3 {
|
|
25
46
|
@extend %colourShades;
|
|
47
|
+
|
|
48
|
+
:root.light-theme & {
|
|
49
|
+
@extend %light-override;
|
|
50
|
+
}
|
|
51
|
+
|
|
26
52
|
--hue: 165;
|
|
27
53
|
}
|
|
28
54
|
|
|
29
55
|
.shade2 {
|
|
30
56
|
@extend %colourShades;
|
|
57
|
+
|
|
58
|
+
:root.light-theme & {
|
|
59
|
+
@extend %light-override;
|
|
60
|
+
}
|
|
61
|
+
|
|
31
62
|
--hue: 190;
|
|
32
63
|
}
|
|
33
64
|
|
|
34
65
|
.warn {
|
|
35
66
|
@extend %colourShades;
|
|
67
|
+
|
|
68
|
+
:root.light-theme & {
|
|
69
|
+
@extend %light-override;
|
|
70
|
+
}
|
|
71
|
+
|
|
36
72
|
--hue: 29;
|
|
37
73
|
}
|
package/scss/ada.green.scss
CHANGED
package/style.css
ADDED
|
@@ -0,0 +1,148 @@
|
|
|
1
|
+
html {
|
|
2
|
+
scroll-padding-top: 1rem;
|
|
3
|
+
}
|
|
4
|
+
|
|
5
|
+
html.height-100 {
|
|
6
|
+
height: 100%;
|
|
7
|
+
min-height: 100%;
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
html.height-100 > body {
|
|
11
|
+
height: 100%;
|
|
12
|
+
min-height: 100%;
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
html:not(.height-100) > body {
|
|
16
|
+
align-items: start;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
body {
|
|
20
|
+
display: grid;
|
|
21
|
+
grid-template-columns: minmax(12vw, min-content) 1fr;
|
|
22
|
+
gap: var(--spacing);
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
.row {
|
|
26
|
+
display: flex;
|
|
27
|
+
flex-wrap: wrap;
|
|
28
|
+
align-items: center;
|
|
29
|
+
gap: var(--spacing);
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
.typography {
|
|
33
|
+
display: grid;
|
|
34
|
+
grid-template-columns: repeat(2, auto) 1fr;
|
|
35
|
+
gap: var(--spacing);
|
|
36
|
+
justify-content: start;
|
|
37
|
+
|
|
38
|
+
@media (max-width: 48rem) {
|
|
39
|
+
gap: var(--spacing-lg);
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
> p {
|
|
43
|
+
grid-column: span 3;
|
|
44
|
+
display: grid;
|
|
45
|
+
grid-template-columns: subgrid;
|
|
46
|
+
gap: var(--spacing);
|
|
47
|
+
align-items: center;
|
|
48
|
+
|
|
49
|
+
@media (max-width: 48rem) {
|
|
50
|
+
grid-template-columns: 1fr;
|
|
51
|
+
gap: var(--spacing-xs);
|
|
52
|
+
}
|
|
53
|
+
}
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
.colors {
|
|
57
|
+
display: flex;
|
|
58
|
+
gap: var(--spacing);
|
|
59
|
+
flex-wrap: wrap;
|
|
60
|
+
|
|
61
|
+
> .color-shades {
|
|
62
|
+
display: grid;
|
|
63
|
+
> h4 {
|
|
64
|
+
margin-bottom: var(--spacing-sm);
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
> div {
|
|
68
|
+
display: inline-grid;
|
|
69
|
+
align-items: center;
|
|
70
|
+
justify-items: center;
|
|
71
|
+
width: 6rem;
|
|
72
|
+
height: 3rem;
|
|
73
|
+
box-sizing: border-box;
|
|
74
|
+
color: var(--color100);
|
|
75
|
+
border-bottom: 1px solid transparent;
|
|
76
|
+
|
|
77
|
+
&:last-of-type {
|
|
78
|
+
border-bottom: none;
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
&.color950 {
|
|
82
|
+
background: var(--color950);
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
&.color800 {
|
|
86
|
+
background: var(--color800);
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
&.color700 {
|
|
90
|
+
background: var(--color700);
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
&.color600 {
|
|
94
|
+
background: var(--color600);
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
&.color500 {
|
|
98
|
+
background: var(--color500);
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
&.color100 {
|
|
102
|
+
background: var(--color100);
|
|
103
|
+
color: var(--color800);
|
|
104
|
+
}
|
|
105
|
+
}
|
|
106
|
+
}
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
.color-usages {
|
|
110
|
+
display: grid;
|
|
111
|
+
grid-template-columns: repeat(2, auto);
|
|
112
|
+
gap: var(--spacing);
|
|
113
|
+
justify-content: start;
|
|
114
|
+
align-items: center;
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
.spacing {
|
|
118
|
+
display: grid;
|
|
119
|
+
grid-template-columns: repeat(2, auto) 1fr;
|
|
120
|
+
gap: var(--spacing);
|
|
121
|
+
align-items: center;
|
|
122
|
+
|
|
123
|
+
> .spacing-box {
|
|
124
|
+
display: inline-block;
|
|
125
|
+
background: var(--color500);
|
|
126
|
+
width: var(--spacing);
|
|
127
|
+
height: var(--spacing);
|
|
128
|
+
|
|
129
|
+
&.xs {
|
|
130
|
+
width: var(--spacing-xs);
|
|
131
|
+
height: var(--spacing-xs);
|
|
132
|
+
}
|
|
133
|
+
|
|
134
|
+
&.sm {
|
|
135
|
+
width: var(--spacing-sm);
|
|
136
|
+
height: var(--spacing-sm);
|
|
137
|
+
}
|
|
138
|
+
|
|
139
|
+
&.lg {
|
|
140
|
+
width: var(--spacing-lg);
|
|
141
|
+
height: var(--spacing-lg);
|
|
142
|
+
}
|
|
143
|
+
}
|
|
144
|
+
}
|
|
145
|
+
|
|
146
|
+
input {
|
|
147
|
+
max-width: 20rem;
|
|
148
|
+
}
|