Skip to content

Commit 96c9770

Browse files
mzpkdevmzpkdev
committed
fix: fix sidebar
1 parent 8ebe042 commit 96c9770

File tree

2 files changed

+74
-34
lines changed

2 files changed

+74
-34
lines changed

‎styles/components/form/_button.scss‎

Lines changed: 15 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@
1616
font-family: inherit;
1717
font-size: inherit;
1818
font-weight: inherit;
19+
width: auto;
1920
padding: var(--button__spacing-y) var(--button__spacing-x);
2021
color: var(--button__text-color);
2122
background: var(--button__background);
@@ -29,31 +30,32 @@
2930
transition-duration: var(--transition__duration);
3031
transition-timing-function: var(--transition__easing);
3132

32-
&:is(a) {
33+
&:is(a), & > a {
3334
text-decoration: none;
35+
color: var(--button__text-color);
3436
}
3537

36-
&:hover {
38+
&:hover, &.\:hover {
3739
--button__text-color: var(--color__text-50);
3840
--button__background: var(--color__primary-400);
3941
--button__border-color: var(--color__primary-400);
4042
}
4143

42-
&:focus {
44+
&:focus, &.\:focus {
4345
--button__text-color: var(--color__text-50);
4446
--button__background: var(--color__primary-400);
4547
--button__border-color: var(--color__primary-400);
4648

4749
outline: none;
4850
}
4951

50-
&:active {
52+
&:active, &.\:active {
5153
--button__text-color: var(--color__text-50);
5254
--button__background: var(--color__primary-500);
5355
--button__border-color: var(--color__primary-500);
5456
}
5557

56-
&:disabled {
58+
&:disabled, &.\:disabled {
5759
--button__text-color: var(--color__primary-100);
5860
--button__background: transparent;
5961
--button__border-color: var(--color__primary-100);
@@ -67,25 +69,25 @@
6769
--button__background: var(--color__primary-400);
6870
--button__border-color: transparent;
6971

70-
&:hover {
72+
&:hover, &.\:hover {
7173
--button__text-color: var(--color__text-50);
7274
--button__background: var(--color__primary-500);
7375
--button__border-color: var(--color__primary-500);
7476
}
7577

76-
&:focus {
78+
&:focus, &.\:focus {
7779
--button__text-color: var(--color__text-50);
7880
--button__background: var(--color__primary-500);
7981
--button__border-color: var(--color__primary-500);
8082
}
8183

82-
&:active {
84+
&:active, &.\:active {
8385
--button__text-color: var(--color__text-50);
8486
--button__background: var(--color__primary-600);
8587
--button__border-color: var(--color__primary-600);
8688
}
8789

88-
&:disabled {
90+
&:disabled, &.\:disabled {
8991
--button__text-color: var(--color__primary-50);
9092
--button__background: var(--color__primary-200);
9193
--button__border-color: var(--color__primary-200);
@@ -98,25 +100,25 @@
98100
--button__border-color: transparent;
99101
--button__shadow: var(--shadow__none);
100102

101-
&:hover {
103+
&:hover, &.\:hover {
102104
--button__text-color: var(--color__text-700);
103105
--button__background: var(--color__grey-100);
104106
--button__border-color: var(--color__grey-100);
105107
}
106108

107-
&:focus {
109+
&:focus, &.\:focus {
108110
--button__text-color: var(--color__text-700);
109111
--button__background: var(--color__grey-100);
110112
--button__border-color: var(--color__grey-100);
111113
}
112114

113-
&:active {
115+
&:active, &.\:active {
114116
--button__text-color: var(--color__text-700);
115117
--button__background: var(--color__grey-200);
116118
--button__border-color: var(--color__grey-200);
117119
}
118120

119-
&:disabled {
121+
&:disabled, &.\:disabled {
120122
--button__text-color: var(--color__text-300);
121123
--button__background: transparent;
122124
--button__border-color: transparent;

‎website/templates/layouts/documentation.html‎

Lines changed: 59 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -13,37 +13,75 @@
1313

1414
<%- include("navbar") %>
1515
<div class="container columns">
16-
<div class="column:1/4">
16+
<div class="column:1/5">
1717
<div class="menu">
1818
<div class="menu-title">Form</div>
19-
<a class="menu-item button text" href="documentation/button/">Button</a>
20-
<a class="menu-item button text text:line-through" href="documentation/checkbox/">Checkbox</a>
21-
<a class="menu-item button text" href="documentation/input/">Input</a>
22-
<a class="menu-item button text text:line-through" href="documentation/radio/">Radio</a>
23-
<a class="menu-item button text text:line-through" href="documentation/select/">Select</a>
24-
<a class="menu-item button text text:line-through" href="documentation/slider/">Slider</a>
25-
<a class="menu-item button text text:line-through" href="documentation/textarea/">Textarea</a>
26-
<a class="menu-item button text text:line-through" href="documentation/toggle/">Toggle</a>
19+
<button type="button" class="menu-item button text text:left">
20+
<a href="documentation/button/">Button</a>
21+
</button>
22+
<button type="button" class="menu-item button text :disabled text:left">
23+
<a href="documentation/checkbox/" style="pointer-events: none">Checkbox</a>
24+
</button>
25+
<button type="button" class="menu-item button text text:left">
26+
<a href="documentation/input/">Input</a>
27+
</button>
28+
<button type="button" class="menu-item button text :disabled text:left">
29+
<a href="documentation/radio/" style="pointer-events: none">Radio</a>
30+
</button>
31+
<button type="button" class="menu-item button text :disabled text:left">
32+
<a href="documentation/select/" style="pointer-events: none">Select</a>
33+
</button>
34+
<button type="button" class="menu-item button text :disabled text:left">
35+
<a href="documentation/slider/" style="pointer-events: none">Slider</a>
36+
</button>
37+
<button type="button" class="menu-item button text :disabled text:left">
38+
<a href="documentation/textarea/" style="pointer-events: none">Textarea</a>
39+
</button>
40+
<button type="button" class="menu-item button text :disabled text:left">
41+
<a href="documentation/toggle/" style="pointer-events: none">Toggle</a>
42+
</button>
2743
</div>
2844
<div class="menu">
2945
<div class="menu-title">Layout</div>
30-
<a class="menu-item button text text:line-through" href="documentation/card/">Card</a>
31-
<a class="menu-item button text text:line-through" href="documentation/columns/">Columns</a>
32-
<a class="menu-item button text text:line-through" href="documentation/container/">Container</a>
33-
<a class="menu-item button text text:line-through" href="documentation/dialog/">Dialog</a>
34-
<a class="menu-item button text" href="documentation/divider/">Divider</a>
35-
<a class="menu-item button text text:line-through" href="documentation/grid/">Grid</a>
36-
<a class="menu-item button text text:line-through" href="documentation/hero/">Hero</a>
37-
<a class="menu-item button text text:line-through" href="documentation/stack/">Stack</a>
46+
<button type="button" class="menu-item button text :disabled text:left">
47+
<a href="documentation/card/" style="pointer-events: none">Card</a>
48+
</button>
49+
<button type="button" class="menu-item button text :disabled text:left">
50+
<a href="documentation/columns/" style="pointer-events: none">Columns</a>
51+
</button>
52+
<button type="button" class="menu-item button text :disabled text:left">
53+
<a href="documentation/container/" style="pointer-events: none">Container</a>
54+
</button>
55+
<button type="button" class="menu-item button text :disabled text:left">
56+
<a href="documentation/dialog/" style="pointer-events: none">Dialog</a>
57+
</button>
58+
<button type="button" class="menu-item button text text:left">
59+
<a href="documentation/divider/">Divider</a>
60+
</button>
61+
<button type="button" class="menu-item button text :disabled text:left">
62+
<a href="documentation/grid/" style="pointer-events: none">Grid</a>
63+
</button>
64+
<button type="button" class="menu-item button text :disabled text:left">
65+
<a href="documentation/hero/" style="pointer-events: none">Hero</a>
66+
</button>
67+
<button type="button" class="menu-item button text :disabled text:left">
68+
<a href="documentation/stack/" style="pointer-events: none">Stack</a>
69+
</button>
3870
</div>
3971
<div class="menu">
4072
<div class="menu-title">Navigation</div>
41-
<a class="menu-item button text text:line-through" href="documentation/dropdown/">Dropdown</a>
42-
<a class="menu-item button text text:line-through" href="documentation/link/">Link</a>
43-
<a class="menu-item button text" href="documentation/navbar/">Navbar</a>
73+
<button type="button" class="menu-item button text :disabled text:left">
74+
<a href="documentation/dropdown/" style="pointer-events: none">Dropdown</a>
75+
</button>
76+
<button type="button" class="menu-item button text :disabled text:left">
77+
<a href="documentation/link/" style="pointer-events: none">Link</a>
78+
</button>
79+
<button type="button" class="menu-item button text text:left">
80+
<a href="documentation/navbar/" style="pointer-events: none">Navbar</a>
81+
</button>
4482
</div>
4583
</div>
46-
<div class="column:3/4">
84+
<div class="column:4/5">
4785
<%- body %>
4886
</div>
4987
</div>

0 commit comments

Comments
 (0)