Skip to content

Commit

Permalink
simplify styling
Browse files Browse the repository at this point in the history
  • Loading branch information
charludo committed Dec 3, 2024
1 parent 8d38c44 commit 49e066b
Show file tree
Hide file tree
Showing 2 changed files with 17 additions and 67 deletions.
56 changes: 17 additions & 39 deletions integreat_cms/static/src/css/style.scss
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,6 @@ $fp-4x3-path: "flagpack-dart-sass/flags/4x3/";
}

@import "./upload_form.css";

@import "./tomselect.scss";

$list-bg-color: white;
Expand Down Expand Up @@ -214,27 +213,7 @@ input[type="submit"] {
textarea,
select,
.slug-field {
@apply w-full text-xl text-gray-800;
}
@include not-tomselect(
'[type="text"]',
'[type="email"]',
'[type="url"]',
'[type="password"]',
'[type="number"]',
'[type="date"]',
'[type="datetime-local"]',
'[type="month"]',
'[type="search"]',
'[type="tel"]',
'[type="time"]',
'[type="week"]',
"[multiple]",
"textarea",
"select",
".slug-field"
) {
@apply rounded bg-gray-200 border-gray-200 border-2;
@apply w-full rounded text-xl text-gray-800 bg-gray-200 border-gray-200 border-2;
&:focus {
@apply bg-white border-blue-500 ring-blue-500 #{!important};
}
Expand All @@ -251,27 +230,25 @@ select,
}

// All of the above except "select" and "multiple" which are read-only even when they can be edited
@include not-tomselect(
'[type="text"]',
'[type="email"]',
'[type="url"]',
'[type="password"]',
'[type="number"]',
'[type="date"]',
'[type="datetime-local"]',
'[type="month"]',
'[type="search"]',
'[type="tel"]',
'[type="time"]',
'[type="week"]',
"textarea"
) {
[type="text"],
[type="email"],
[type="url"],
[type="password"],
[type="number"],
[type="date"],
[type="datetime-local"],
[type="month"],
[type="search"],
[type="tel"],
[type="time"],
[type="week"],
textarea {
&:read-only {
@apply text-gray-500 pointer-events-none cursor-not-allowed;
}
}

@include not-tomselect(".slug-field") {
.slug-field {
@apply flex px-3 py-2 whitespace-nowrap;
overflow: auto;
&:focus-within {
Expand All @@ -293,7 +270,8 @@ select,
}
}

@include not-tomselect('[type="checkbox"]', '[type="radio"]') {
[type="checkbox"],
[type="radio"] {
@apply rounded text-blue-500 mr-2 align-text-top;

&:disabled,
Expand Down
28 changes: 0 additions & 28 deletions integreat_cms/static/src/css/tomselect.scss
Original file line number Diff line number Diff line change
Expand Up @@ -97,31 +97,3 @@
}
}
}

// Provide a mixin to bypass all inputs directly in tomselect
/* We could just have
some, very, long, list, of, selectors {
&:not(.ts-wrapper > &)
:not(.ts… {
properties: and;
& more > selectors {}
}
}
but this would generate the power set of all combinations:
some:not(… > some), some:not(… > very), some:not(… > long), …,
very:not(… > some), very:not(… > very), very:not(… > long), …,
etc. which would clutter the file, while we only need 1:1 correspondence:
some:not(… > some),
very:not(… > very),
long:not(… > long),
*/
@mixin not-tomselect($selectors...) {
@each $selector in $selectors {
#{$selector}:not(.ts-wrapper > #{$selector})
:not(.ts-control > #{$selector})
:not(.ts-dropdown > #{$selector}) {
@content;
}
}
}

0 comments on commit 49e066b

Please sign in to comment.