Add Tailwind button for save+cancel

- remove custom styles
- add new button styles based on Tailwind classes using @apply
- extend config to allow hover:ring-blue-200 and such
- update the js-files to use new classes

- Only unsure about the `.review-form .save-non-active`, this might need additional Tailwind helper classes in this specific situation. Don't know where it shows up, so could not test.
This commit is contained in:
Tobias 2021-01-24 22:20:40 +01:00
parent 2342d369d0
commit 4068931bba
7 changed files with 29 additions and 39 deletions

View file

@ -114,9 +114,6 @@
display: block ruby;
}
.review-form .save-non-active {
display: block ruby;
}
.review-form textarea {
resize: unset;
}

View file

@ -87,25 +87,6 @@ input:checked + label .question-option-with-border {
border: 2px solid var(--subtle-detail-color-contrast);
}
.save {
display: inline-block;
border: solid var(--catch-detail-color-contrast) 2px;
background-color: var(--catch-detail-color);
color: var(--catch-detail-color-contrast);
padding: 0.2em 0.6em;
font-size: x-large;
font-weight: bold;
border-radius: 1.5em;
}
.cancel {
display: inline-block;
border: solid black 0.5px;
padding: 0.2em 0.3em;
border-radius: 1.5em;
}
.login-button-friendly {
display: inline-block;
background-color: var(--catch-detail-color);
@ -119,16 +100,6 @@ input:checked + label .question-option-with-border {
width: 100%;
}
.save-non-active {
display: inline-block;
border: solid lightgrey 2px;
color: grey;
padding: 0.2em 0.3em;
font-size: x-large;
font-weight: bold;
border-radius: 1.5em;
}
.edit-button img {
width: 1.3em;
height: 1.3em;