Skip to content

Commit 57d6a20

Browse files
SebKaySebKay
committed
Wrap all custom styles in a "components" layer
1 parent 0e568f0 commit 57d6a20

File tree

3 files changed

+127
-121
lines changed

3 files changed

+127
-121
lines changed

‎resources/css/buttons.css‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
1-
.button {
2-
@apply rounded-md bg-brand-800 px-6 py-3 text-sm font-semibold text-white inline-flex shadow-sm hover:bg-brand-600 transition-colors ease-in-out duration-200;
3-
}
1+
@layer components {
2+
.button {
3+
@apply rounded-md bg-brand-800 px-6 py-3 text-sm font-semibold text-white inline-flex shadow-sm hover:bg-brand-600 transition-colors ease-in-out duration-200;
4+
}
45

5-
.button-full {
6-
@apply w-full text-center justify-center;
6+
.button-full {
7+
@apply w-full text-center justify-center;
8+
}
79
}

‎resources/css/content.css‎

Lines changed: 73 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -1,93 +1,95 @@
1-
.content {
2-
h1,
3-
h2,
4-
h3,
5-
h4,
6-
h5,
7-
h6 {
8-
@apply text-brand-900 font-heading;
9-
10-
a {
11-
@apply text-brand-800 hover:no-underline;
1+
@layer components {
2+
.content {
3+
h1,
4+
h2,
5+
h3,
6+
h4,
7+
h5,
8+
h6 {
9+
@apply text-brand-900 font-heading;
10+
11+
a {
12+
@apply text-brand-800 hover:no-underline;
13+
}
1214
}
13-
}
1415

15-
h1 {
16-
@apply text-4xl md:text-5xl;
17-
}
16+
h1 {
17+
@apply text-4xl md:text-5xl;
18+
}
1819

19-
h2 {
20-
@apply text-3xl;
21-
}
20+
h2 {
21+
@apply text-3xl;
22+
}
2223

23-
h3 {
24-
@apply text-2xl;
25-
}
24+
h3 {
25+
@apply text-2xl;
26+
}
2627

27-
h4 {
28-
@apply text-xl;
29-
}
28+
h4 {
29+
@apply text-xl;
30+
}
3031

31-
h5 {
32-
@apply text-lg;
33-
}
32+
h5 {
33+
@apply text-lg;
34+
}
3435

35-
h6 {
36-
@apply text-base;
37-
}
36+
h6 {
37+
@apply text-base;
38+
}
3839

39-
li {
40-
@apply ml-8;
41-
}
40+
li {
41+
@apply ml-8;
42+
}
4243

43-
a {
44-
@apply hover:underline;
45-
}
44+
a {
45+
@apply hover:underline;
46+
}
4647

47-
ul li {
48-
@apply list-disc;
49-
}
48+
ul li {
49+
@apply list-disc;
50+
}
5051

51-
ol li {
52-
@apply list-decimal;
53-
}
52+
ol li {
53+
@apply list-decimal;
54+
}
5455

55-
strong {
56-
@apply font-bold;
57-
}
56+
strong {
57+
@apply font-bold;
58+
}
5859

59-
blockquote {
60-
@apply pl-4 py-3 my-4 border-s-4 border-gray-300 text-xl italic;
61-
}
60+
blockquote {
61+
@apply pl-4 py-3 my-4 border-s-4 border-gray-300 text-xl italic;
62+
}
6263

63-
table {
64-
@apply w-full text-sm text-left;
65-
}
64+
table {
65+
@apply w-full text-sm text-left;
66+
}
6667

67-
th {
68-
@apply p-4 font-bold bg-brand-200;
69-
}
68+
th {
69+
@apply p-4 font-bold bg-brand-200;
70+
}
7071

71-
td {
72-
@apply p-4 font-medium;
73-
}
72+
td {
73+
@apply p-4 font-medium;
74+
}
7475

75-
tr:not(:last-child) td {
76-
@apply border-b border-brand-200;
77-
}
76+
tr:not(:last-child) td {
77+
@apply border-b border-brand-200;
78+
}
7879

79-
> * + * {
80-
@apply mt-6;
81-
}
80+
> * + * {
81+
@apply mt-6;
82+
}
8283

83-
* {
84-
& + h1,
85-
& + h2,
86-
& + h3,
87-
& + h4,
88-
& + h5,
89-
& + h6 {
90-
@apply mt-12;
84+
* {
85+
& + h1,
86+
& + h2,
87+
& + h3,
88+
& + h4,
89+
& + h5,
90+
& + h6 {
91+
@apply mt-12;
92+
}
9193
}
9294
}
9395
}

‎resources/css/forms.css‎

Lines changed: 47 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -1,58 +1,60 @@
1-
.form-row {
2-
@apply grid grid-cols-1 gap-5 sm:gap-7 sm:grid-cols-3;
3-
}
1+
@layer components {
2+
.form-row {
3+
@apply grid grid-cols-1 gap-5 sm:gap-7 sm:grid-cols-3;
4+
}
45

5-
.form-col {
6-
@apply col-span-full;
7-
}
6+
.form-col {
7+
@apply col-span-full;
8+
}
89

9-
label {
10-
&[for] {
11-
@apply cursor-pointer;
10+
label {
11+
&[for] {
12+
@apply cursor-pointer;
13+
}
1214
}
13-
}
1415

15-
.label {
16-
@apply pb-3 block text-base font-medium;
17-
}
16+
.label {
17+
@apply pb-3 block text-base font-medium;
18+
}
1819

19-
.small-label {
20-
@apply block text-sm font-medium;
21-
}
20+
.small-label {
21+
@apply block text-sm font-medium;
22+
}
2223

23-
.inline-label {
24-
@apply flex items-center gap-x-2;
25-
}
24+
.inline-label {
25+
@apply flex items-center gap-x-2;
26+
}
2627

27-
.input,
28-
.textarea,
29-
.select,
30-
.checkbox,
31-
.radio {
32-
@apply block rounded-md border-brand-300 shadow-sm hover:ring hover:ring-brand-200 hover:ring-opacity-50 focus:border-brand-300 focus:ring focus:ring-brand-200 focus:ring-opacity-50 focus:ring-offset-0 transition ease-in-out duration-200;
33-
}
28+
.input,
29+
.textarea,
30+
.select,
31+
.checkbox,
32+
.radio {
33+
@apply block rounded-md border-brand-300 shadow-sm hover:ring hover:ring-brand-200 hover:ring-opacity-50 focus:border-brand-300 focus:ring focus:ring-brand-200 focus:ring-opacity-50 focus:ring-offset-0 transition ease-in-out duration-200;
34+
}
3435

35-
.input,
36-
.textarea,
37-
.select {
38-
@apply block text-base w-full;
39-
}
36+
.input,
37+
.textarea,
38+
.select {
39+
@apply block text-base w-full;
40+
}
4041

41-
.textarea {
42-
@apply min-h-32;
43-
}
42+
.textarea {
43+
@apply min-h-32;
44+
}
4445

45-
.select,
46-
.checkbox,
47-
.radio {
48-
@apply cursor-pointer;
49-
}
46+
.select,
47+
.checkbox,
48+
.radio {
49+
@apply cursor-pointer;
50+
}
5051

51-
.checkbox,
52-
.radio {
53-
@apply size-5 text-brand-800;
54-
}
52+
.checkbox,
53+
.radio {
54+
@apply size-5 text-brand-800;
55+
}
5556

56-
.radio {
57-
@apply rounded-full;
57+
.radio {
58+
@apply rounded-full;
59+
}
5860
}

0 commit comments

Comments
 (0)