Skip to content
This repository was archived by the owner on Mar 18, 2025. It is now read-only.

Commit 752004b

Browse files
rawilkrawilk
committed
Wrap each css file in @layer components 
1 parent 7a6b4b4 commit 752004b

File tree

9 files changed

+520
-502
lines changed

9 files changed

+520
-502
lines changed

‎resources/css/addons.css‎

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,13 @@
1-
.leading-addon svg {
2-
@apply h-5 w-5;
3-
}
1+
@layer components {
2+
.leading-addon svg {
3+
@apply h-5 w-5;
4+
}
45

5-
.leading-icon {
6-
z-index: 1;
7-
}
6+
.leading-icon {
7+
z-index: 1;
8+
}
89

9-
.leading-icon svg {
10-
@apply max-w-full;
10+
.leading-icon svg {
11+
@apply max-w-full;
12+
}
1113
}

‎resources/css/checkbox-group.css‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@
22
--fc-checkbox-grid-cols: 3;
33
}
44

5-
.form-checkbox-group {
6-
grid-template-columns: repeat(var(--fc-checkbox-grid-cols), minmax(0, 1fr));
5+
@layer components {
6+
.form-checkbox-group {
7+
grid-template-columns: repeat(var(--fc-checkbox-grid-cols), minmax(0, 1fr));
8+
}
79
}

‎resources/css/custom-select.css‎

Lines changed: 90 additions & 88 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
1-
.custom-select__button,
2-
.tree-select__button {
3-
@apply pl-2
1+
@layer components {
2+
.custom-select__button,
3+
.tree-select__button {
4+
@apply pl-2
45
pr-1
56
border
67
border-blue-gray-300
@@ -11,16 +12,16 @@
1112
table-fixed
1213
h-[38px]
1314
w-full;
14-
}
15+
}
1516

16-
.custom-select__button.disabled,
17-
.tree-select__button.disabled {
18-
@apply bg-blue-gray-50 cursor-not-allowed;
19-
}
17+
.custom-select__button.disabled,
18+
.tree-select__button.disabled {
19+
@apply bg-blue-gray-50 cursor-not-allowed;
20+
}
2021

21-
.custom-select-menu,
22-
.tree-select-menu {
23-
@apply absolute
22+
.custom-select-menu,
23+
.tree-select-menu {
24+
@apply absolute
2425
origin-top-right
2526
right-0
2627
rounded-md
@@ -29,81 +30,82 @@
2930
w-full
3031
border
3132
border-blue-300;
32-
}
33-
34-
.custom-select-menu[data-popper-placement="top-start"],
35-
.tree-select-menu[data-popper-placement="top-start"] {
36-
@apply rounded-b-none border-b-0;
37-
}
38-
39-
.custom-select-menu[data-popper-placement="top-start"] .custom-select-menu__container,
40-
.tree-select-menu[data-popper-placement="top-start"] .tree-select-menu__container {
41-
@apply rounded-b-none;
42-
}
43-
44-
.custom-select-menu[data-popper-placement="bottom-start"],
45-
.tree-select-menu[data-popper-placement="bottom-start"] {
46-
@apply rounded-t-none border-t-0;
47-
}
48-
49-
.custom-select-menu[data-popper-placement="bottom-start"] .custom-select-menu__container,
50-
.tree-select-menu[data-popper-placement="bottom-start"] .tree-select-menu__container {
51-
@apply rounded-t-none;
52-
}
53-
54-
.custom-select-menu:not(.invisible) + .custom-select__button,
55-
.tree-select-menu:not(.invisible) + .tree-select__button {
56-
@apply border-blue-300;
57-
}
58-
59-
.custom-select-menu:not(.invisible)[data-popper-placement="bottom-start"] + .custom-select__button,
60-
.tree-select-menu:not(.invisible)[data-popper-placement="bottom-start"] + .tree-select__button {
61-
@apply rounded-b-none border-b-blue-gray-200;
62-
}
63-
64-
.custom-select-menu:not(.invisible)[data-popper-placement="top-start"] + .custom-select__button,
65-
.tree-select-menu:not(.invisible)[data-popper-placement="top-start"] + .tree-select__button {
66-
@apply rounded-t-none border-t-blue-gray-200;
67-
}
68-
69-
.custom-select-option,
70-
.tree-select-option {
71-
@apply w-full focus:outline-none;
72-
}
73-
74-
.custom-select-option__container,
75-
.tree-select-option__container {
76-
@apply px-2.5 text-sm text-blue-gray-600 flex items-center;
77-
}
78-
79-
.custom-select-option:not(.disabled).has-focus > .custom-select-option__container,
80-
.tree-select-option:not(.disabled).has-focus > .tree-select-option__container{
81-
@apply bg-blue-gray-100 outline-none;
82-
}
83-
84-
.custom-select-option.disabled > .custom-select-option__container,
85-
.tree-select-option.disabled > .tree-select-option__container {
86-
@apply bg-gray-100 opacity-50 cursor-not-allowed;
87-
}
88-
89-
.custom-select-option__label,
90-
.tree-select-option__label {
91-
@apply py-3.5;
92-
}
93-
94-
.custom-select-option--opt-group .custom-select-option__container {
95-
@apply text-blue-gray-400 font-semibold;
96-
}
97-
98-
.custom-select-option--opt-group .custom-select-option__label {
99-
@apply py-2;
100-
}
101-
102-
.custom-select-option--opt-group:not(:first-child) {
103-
@apply border-t border-t-blue-gray-300;
104-
}
105-
106-
.custom-select-option.selected > .custom-select-option__container,
107-
.tree-select-option.selected > .tree-select-option__container {
108-
@apply bg-blue-200 font-semibold;
33+
}
34+
35+
.custom-select-menu[data-popper-placement="top-start"],
36+
.tree-select-menu[data-popper-placement="top-start"] {
37+
@apply rounded-b-none border-b-0;
38+
}
39+
40+
.custom-select-menu[data-popper-placement="top-start"] .custom-select-menu__container,
41+
.tree-select-menu[data-popper-placement="top-start"] .tree-select-menu__container {
42+
@apply rounded-b-none;
43+
}
44+
45+
.custom-select-menu[data-popper-placement="bottom-start"],
46+
.tree-select-menu[data-popper-placement="bottom-start"] {
47+
@apply rounded-t-none border-t-0;
48+
}
49+
50+
.custom-select-menu[data-popper-placement="bottom-start"] .custom-select-menu__container,
51+
.tree-select-menu[data-popper-placement="bottom-start"] .tree-select-menu__container {
52+
@apply rounded-t-none;
53+
}
54+
55+
.custom-select-menu:not(.invisible) + .custom-select__button,
56+
.tree-select-menu:not(.invisible) + .tree-select__button {
57+
@apply border-blue-300;
58+
}
59+
60+
.custom-select-menu:not(.invisible)[data-popper-placement="bottom-start"] + .custom-select__button,
61+
.tree-select-menu:not(.invisible)[data-popper-placement="bottom-start"] + .tree-select__button {
62+
@apply rounded-b-none border-b-blue-gray-200;
63+
}
64+
65+
.custom-select-menu:not(.invisible)[data-popper-placement="top-start"] + .custom-select__button,
66+
.tree-select-menu:not(.invisible)[data-popper-placement="top-start"] + .tree-select__button {
67+
@apply rounded-t-none border-t-blue-gray-200;
68+
}
69+
70+
.custom-select-option,
71+
.tree-select-option {
72+
@apply w-full focus:outline-none;
73+
}
74+
75+
.custom-select-option__container,
76+
.tree-select-option__container {
77+
@apply px-2.5 text-sm text-blue-gray-600 flex items-center;
78+
}
79+
80+
.custom-select-option:not(.disabled).has-focus > .custom-select-option__container,
81+
.tree-select-option:not(.disabled).has-focus > .tree-select-option__container{
82+
@apply bg-blue-gray-100 outline-none;
83+
}
84+
85+
.custom-select-option.disabled > .custom-select-option__container,
86+
.tree-select-option.disabled > .tree-select-option__container {
87+
@apply bg-gray-100 opacity-50 cursor-not-allowed;
88+
}
89+
90+
.custom-select-option__label,
91+
.tree-select-option__label {
92+
@apply py-3.5;
93+
}
94+
95+
.custom-select-option--opt-group .custom-select-option__container {
96+
@apply text-blue-gray-400 font-semibold;
97+
}
98+
99+
.custom-select-option--opt-group .custom-select-option__label {
100+
@apply py-2;
101+
}
102+
103+
.custom-select-option--opt-group:not(:first-child) {
104+
@apply border-t border-t-blue-gray-300;
105+
}
106+
107+
.custom-select-option.selected > .custom-select-option__container,
108+
.tree-select-option.selected > .tree-select-option__container {
109+
@apply bg-blue-200 font-semibold;
110+
}
109111
}

‎resources/css/disabled.css‎

Lines changed: 12 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,14 @@
1-
input[disabled],
2-
textarea[disabled],
3-
select[disabled] {
4-
@apply bg-blue-gray-50 cursor-not-allowed;
5-
}
1+
@layer components {
2+
input[disabled],
3+
textarea[disabled],
4+
select[disabled] {
5+
@apply bg-blue-gray-50 cursor-not-allowed;
6+
}
67

7-
.form-checkbox[disabled],
8-
.form-checkbox.disabled,
9-
.form-radio[disabled],
10-
.form-radio.disabled {
11-
@apply opacity-75 text-blue-gray-300;
8+
.form-checkbox[disabled],
9+
.form-checkbox.disabled,
10+
.form-radio[disabled],
11+
.form-radio.disabled {
12+
@apply opacity-75 text-blue-gray-300;
13+
}
1214
}

‎resources/css/errors.css‎

Lines changed: 27 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,33 @@
1-
.has-error label {
2-
@apply text-red-500;
3-
}
1+
@layer components {
2+
.has-error label {
3+
@apply text-red-500;
4+
}
45

5-
.input-error,
6-
.has-error .form-input,
7-
.has-error .form-select,
8-
.has-error .custom-select__button {
9-
@apply border-red-300 text-red-900 focus:border-red-300;
10-
}
6+
.input-error,
7+
.has-error .form-input,
8+
.has-error .form-select,
9+
.has-error .custom-select__button {
10+
@apply border-red-300 text-red-900 focus:border-red-300;
11+
}
1112

12-
.input-error:not(.password-toggleable),
13-
.has-error .custom-select__button,
14-
.has-error .form-input:not(.password-toggleable),
15-
.has-error .form-select:not(.password-toggleable) {
16-
@apply focus:ring-red-400 focus:ring-opacity-50;
17-
}
13+
.input-error:not(.password-toggleable),
14+
.has-error .custom-select__button,
15+
.has-error .form-input:not(.password-toggleable),
16+
.has-error .form-select:not(.password-toggleable) {
17+
@apply focus:ring-red-400 focus:ring-opacity-50;
18+
}
1819

19-
.has-error .password-input-container {
20-
@apply focus-within:ring-red-400 focus-within:border-red-300 focus-within:ring-opacity-50;
21-
}
20+
.has-error .password-input-container {
21+
@apply focus-within:ring-red-400 focus-within:border-red-300 focus-within:ring-opacity-50;
22+
}
2223

23-
.has-error .password-toggle {
24-
@apply border-red-300;
25-
}
24+
.has-error .password-toggle {
25+
@apply border-red-300;
26+
}
2627

27-
.input-error::placeholder,
28-
.has-error .form-input::placeholder,
29-
.has-error .form-select::placeholder {
30-
@apply text-red-300;
28+
.input-error::placeholder,
29+
.has-error .form-input::placeholder,
30+
.has-error .form-select::placeholder {
31+
@apply text-red-300;
32+
}
3133
}

‎resources/css/input.css‎

Lines changed: 15 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,17 @@
1-
/* clears the 'X' from Internet Explorer */
2-
input.busy[type="search"]::-ms-clear,
3-
input.busy[type="search"]::-ms-reveal {
4-
display: none;
5-
width: 0;
6-
height: 0;
7-
}
1+
@layer components {
2+
/* clears the 'X' from Internet Explorer */
3+
input.busy[type="search"]::-ms-clear,
4+
input.busy[type="search"]::-ms-reveal {
5+
display: none;
6+
width: 0;
7+
height: 0;
8+
}
89

9-
/* clears the 'X' from chrome */
10-
input.busy[type="search"]::-webkit-search-decoration,
11-
input.busy[type="search"]::-webkit-search-cancel-button,
12-
input.busy[type="search"]::-webkit-search-results-button,
13-
input.busy[type="search"]::-webkit-search-results-decoration {
14-
display: none;
10+
/* clears the 'X' from chrome */
11+
input.busy[type="search"]::-webkit-search-decoration,
12+
input.busy[type="search"]::-webkit-search-cancel-button,
13+
input.busy[type="search"]::-webkit-search-results-button,
14+
input.busy[type="search"]::-webkit-search-results-decoration {
15+
display: none;
16+
}
1517
}

‎resources/css/select.css‎

Lines changed: 12 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,15 @@
1-
.form-select[multiple] {
2-
background-image: none;
3-
overflow: auto;
4-
}
1+
@layer components {
2+
.form-select[multiple] {
3+
background-image: none;
4+
overflow: auto;
5+
}
56

6-
.form-select + .trailing-addon,
7-
.form-select + .trailing-icon {
8-
right: 1.5rem;
9-
}
7+
.form-select + .trailing-addon,
8+
.form-select + .trailing-icon {
9+
right: 1.5rem;
10+
}
1011

11-
.form-select.has-trailing-icon {
12-
padding-right: 4rem;
12+
.form-select.has-trailing-icon {
13+
padding-right: 4rem;
14+
}
1315
}

0 commit comments

Comments
 (0)