Skip to content

Commit 840ccd8

Browse files
estherbrunnerestherbrunner
authored
Merge pull request #35 from zeixcom/feature/docs
Feature/docs
2 parents 95dafb4 + a77926b commit 840ccd8

File tree

84 files changed

+2637
-1654
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

84 files changed

+2637
-1654
lines changed

‎docs-src/components/accordion-panel/accordion-panel.css

+45
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
accordion-panel {
2+
display: block;
3+
4+
> details {
5+
6+
& summary {
7+
cursor: pointer;
8+
font-size: var(--font-size-m);
9+
font-weight: var(--font-weight-bold);
10+
margin: 0 0 var(--space-s);
11+
}
12+
13+
::marker,
14+
::-webkit-details-marker {
15+
color: var(--color-text-soft);
16+
}
17+
18+
.summary {
19+
display: inline-block;
20+
margin-left: var(--space-xs);
21+
}
22+
23+
&[open] {
24+
margin-bottom: var(--space-m);
25+
}
26+
27+
&[aria-disabled="true"] {
28+
29+
& summary {
30+
pointer-events: none;
31+
display: block;
32+
cursor: text;
33+
}
34+
35+
::marker,
36+
::-webkit-details-marker {
37+
display: none;
38+
}
39+
40+
.summary {
41+
margin-left: 0;
42+
}
43+
}
44+
}
45+
}

‎docs-src/components/accordion-panel/accordion-panel.html

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
<accordion-panel>
2+
<details open aria-disabled="true">
3+
<summary class="visually-hidden">
4+
<div class="summary">Tab 1</div>
5+
</summary>
6+
Content for Tab 1
7+
</details>
8+
</accordion-panel>
9+
<accordion-panel>
10+
<details aria-disabled="true">
11+
<summary class="visually-hidden">
12+
<div class="summary">Tab 2</div>
13+
</summary>
14+
Content for Tab 2
15+
</details>
16+
</accordion-panel>
17+
<accordion-panel>
18+
<details aria-disabled="true">
19+
<summary class="visually-hidden">
20+
<div class="summary">Tab 3</div>
21+
</summary>
22+
Content for Tab 3
23+
</details>
24+
</accordion-panel>

‎docs-src/components/accordion-panel.ts ‎docs-src/components/accordion-panel/accordion-panel.ts

File renamed without changes.

‎docs-src/components/code-block/code-block.css

+89
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
@import './okaidia.css';
2+
3+
code-block {
4+
position: relative;
5+
display: block;
6+
margin: 0 0 var(--space-l);
7+
8+
.meta {
9+
display: flex;
10+
margin-bottom: var(--space-xs);
11+
font-size: var(--font-size-s);
12+
color: var(--color-text-soft);
13+
14+
&:not(:has(.file)) .language {
15+
margin-block-start: calc(-1 * var(--space-m));
16+
}
17+
}
18+
19+
.language {
20+
margin-left: auto;
21+
text-transform: uppercase;
22+
}
23+
24+
& pre {
25+
color: var(--color-gray-10);
26+
background: var(--color-gray-90);
27+
padding: var(--space-s);
28+
margin: var(--space-xs) 0;
29+
overflow: auto;
30+
border-radius: var(--space-xs);
31+
}
32+
33+
.copy {
34+
position: absolute;
35+
right: var(--space-s);
36+
bottom: var(--space-s);
37+
}
38+
39+
.overlay {
40+
display: none;
41+
}
42+
43+
&[collapsed] {
44+
max-height: 12rem;
45+
overflow: hidden;
46+
47+
&::after {
48+
content: '';
49+
display: block;
50+
position: absolute;
51+
bottom: 0;
52+
width: 100%;
53+
height: var(--space-m);
54+
background: linear-gradient(-135deg, var(--color-secondary) 0.5rem, transparent 0) 0 0.5rem, linear-gradient(135deg, var(--color-secondary) 0.5rem, var(--color-background) 0) 0 0.5rem;
55+
background-color: var(--color-secondary);
56+
background-size: var(--space-m) var(--space-m);
57+
background-position: bottom;
58+
}
59+
60+
.copy {
61+
display: none;
62+
}
63+
64+
.overlay {
65+
display: flex;
66+
flex-direction: column-reverse;
67+
align-items: center;
68+
position: absolute;
69+
bottom: 0;
70+
left: 0;
71+
width: 100%;
72+
height: 6rem;
73+
color: var(--color-text);
74+
background: linear-gradient(transparent, var(--color-secondary));
75+
border: 0;
76+
cursor: pointer;
77+
padding: var(--space-xs) var(--space-s);
78+
margin-bottom: var(--space-m);
79+
font-size: var(--font-size-s);
80+
transition: background-color var(--transition-short) var(--easing-inout);
81+
text-shadow: var(--color-background) 1px 0 var(--space-xs);
82+
83+
&:hover,
84+
&:active {
85+
text-shadow: var(--color-text-inverted) var(--space-xs) 0 var(--space-s);
86+
}
87+
}
88+
}
89+
}

‎docs-src/components/code-block/code-block.html

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<code-block collapsed language="html" copy-success="Copied!" copy-error="Error trying to copy to clipboard!">
2+
<p class="meta">
3+
<span class="file">code-block.html</span>
4+
<span class="language">html</span>
5+
</p>
6+
<pre><code class="language-html"><code-block collapsed language="html" copy-success="Copied!" copy-error="Error trying to copy to clipboard!">
7+
<p class="meta">
8+
<span class="file">code-block.html</span>
9+
<span class="language">html</span>
10+
</p>
11+
<pre><code class="language-html"></code></pre>
12+
<input-button class="copy">
13+
<button type="button" class="secondary small">Copy</button>
14+
</input-button>
15+
<button type="button" class="overlay">Expand</button>
16+
</code-block></code></pre>
17+
<input-button class="copy">
18+
<button type="button" class="secondary small">Copy</button>
19+
</input-button>
20+
<button type="button" class="overlay">Expand</button>
21+
</code-block>

‎docs-src/components/code-block.ts ‎docs-src/components/code-block/code-block.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import 'prismjs/components/prism-bash';
44
import 'prismjs/components/prism-json';
55
import 'prismjs/components/prism-typescript';
66

7-
import type { InputButton } from './input-button'
7+
import type { InputButton } from '../input-button/input-button'
88

99
export class CodeBlock extends UIElement {
1010
static observedAttributes = ['collapsed']

‎docs/assets/css/okaidia.css ‎docs-src/components/code-block/okaidia.css

File renamed without changes.

‎docs-src/components/component-demo/component-demo.css

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
component-demo {
2+
display: flex;
3+
flex-direction: column;
4+
gap: var(--space-m);
5+
margin-block-end: var(--space-l);
6+
7+
.preview {
8+
border: 1px dotted var(--color-border);
9+
border-radius: var(--space-xs);
10+
padding: var(--space-s);
11+
}
12+
}

‎docs-src/components/hello-world/hello-world.html

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
<hello-world>
2+
<label>Your name<br>
3+
<input type="text">
4+
</label>
5+
<p>Hello, <span>World</span>!</p>
6+
</hello-world>

‎docs-src/components/hello-world.ts ‎docs-src/components/hello-world/hello-world.ts

File renamed without changes.

‎docs-src/components/input-button/input-button.css

+102
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,102 @@
1+
input-button {
2+
display: inline-block;
3+
flex: 0;
4+
5+
& button {
6+
height: var(--input-height);
7+
min-width: var(--input-height);
8+
border: 1px solid var(--color-border);
9+
border-radius: var(--space-xs);
10+
background-color: var(--color-secondary);
11+
color: var(--color-text);
12+
padding: 0 var(--space-s);
13+
font-size: var(--font-size-s);
14+
line-height: var(--line-height-s);
15+
white-space: nowrap;
16+
opacity: var(--opacity-dimmed);
17+
transition: all var(--transition-shorter) var(--easing-inout);
18+
19+
&:disabled {
20+
opacity: var(--opacity-translucent);
21+
}
22+
23+
&:not(:disabled) {
24+
cursor: pointer;
25+
opacity: var(--opacity-solid);
26+
27+
&:hover {
28+
background-color: var(--color-secondary-hover);
29+
}
30+
31+
&:active {
32+
background-color: var(--color-secondary-active);
33+
}
34+
}
35+
36+
&.primary {
37+
color: var(--color-text-inverted);
38+
background-color: var(--color-primary);
39+
border-color: var(--color-primary-active);
40+
opacity: var(--opacity-solid);
41+
42+
&:not(:disabled) {
43+
44+
&:hover {
45+
background-color: var(--color-primary-hover);
46+
}
47+
48+
&:active {
49+
background-color: var(--color-primary-active);
50+
}
51+
}
52+
}
53+
54+
&.destructive {
55+
color: var(--color-text-inverted);
56+
background-color: var(--color-error);
57+
border-color: var(--color-error-active);
58+
opacity: var(--opacity-solid);
59+
60+
&:not(:disabled) {
61+
62+
&:hover {
63+
background-color: var(--color-error-hover);
64+
}
65+
66+
&:active {
67+
background-color: var(--color-error-active);
68+
}
69+
}
70+
}
71+
72+
&.constructive {
73+
color: var(--color-text-inverted);
74+
background-color: var(--color-success);
75+
border-color: var(--color-success-active);
76+
opacity: var(--opacity-solid);
77+
78+
&:not(:disabled) {
79+
80+
&:hover {
81+
background-color: var(--color-success-hover);
82+
}
83+
84+
&:active {
85+
background-color: var(--color-success-active);
86+
}
87+
}
88+
}
89+
90+
&.small {
91+
--input-height: var(--space-l);
92+
font-size: var(--font-size-xs);
93+
padding-inline: var(--space-xs);
94+
}
95+
96+
&.large {
97+
--input-height: var(--space-xl);
98+
font-size: var(--font-size-m);
99+
padding-inline: var(--space-m);
100+
}
101+
}
102+
}

‎docs-src/components/input-button/input-button.html

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
<input-button>
2+
<button type="button">Button</button>
3+
</input-button>
4+
5+
<input-button>
6+
<button type="submit" class="primary" disabled>Submit</button>
7+
</input-button>

‎docs-src/components/input-button.ts ‎docs-src/components/input-button/input-button.ts

File renamed without changes.

‎docs-src/components/input-checkbox/input-checkbox.css

+60
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
input-checkbox {
2+
flex-grow: 1;
3+
4+
& label {
5+
font-size: var(--font-size-s);
6+
}
7+
8+
&.todo label {
9+
display: flex;
10+
gap: var(--space-s);
11+
line-height: var(--input-height);
12+
cursor: pointer;
13+
14+
&::before {
15+
display: inline-block;
16+
box-sizing: border-box;
17+
content: '';
18+
font-size: var(--font-size-l);
19+
text-align: center;
20+
width: var(--input-height);
21+
height: var(--input-height);
22+
border: 1px solid var(--color-border);
23+
border-radius: 100%;
24+
background-color: var(--color-secondary);
25+
}
26+
27+
&:hover::before {
28+
background-color: var(--color-secondary-hover);
29+
opacity: var(--opacity-solid);
30+
}
31+
32+
&:active::before {
33+
background-color: var(--color-secondary-active);
34+
}
35+
}
36+
37+
&.todo[checked] label {
38+
opacity: var(--opacity-translucent);
39+
40+
& span {
41+
text-decoration: line-through;
42+
}
43+
44+
&::before {
45+
color: var(--color-text-inverted);
46+
background-color: var(--color-success);
47+
border-color: var(--color-success-active);
48+
text-shadow: 0 0 var(--space-xs) var(--color-success-active);
49+
content: '✓';
50+
}
51+
52+
&:hover::before {
53+
background-color: var(--color-success-hover);
54+
}
55+
56+
&:active::before {
57+
background-color: var(--color-success-active);
58+
}
59+
}
60+
}

0 commit comments

Comments
 (0)