jwa11y/a11yist
2
1
Fork 0
Code Issues 15 Pull requests Projects 1 Releases Packages 1 Wiki Activity Actions

Model menus, modal edit and layout improvements
Some checks failed
/ Run tests (push) Successful in 2m44s
Details
/ Run system tests (push) Failing after 2m43s
Details
/ Build, push and deploy image (push) Successful in 4m3s
Details

Browse source
This commit is contained in:
david 2024-11-23 19:10:09 +01:00
parent 7b0f05a448
commit 70500c49a1
35 changed files with 1079 additions and 148 deletions
Download patch file Download diff file Expand all files Collapse all files

110
app/assets/stylesheets/layout.scss
View file

@ -20,37 +20,6 @@ $tertiary-dark-active-open: $gray-600;
}
}
// // Fix trix dark mode
// .trix-button-row {
// .trix-button-group {
// border: var(--bs-border-width) solid var(--bs-border-color);
// .trix-button {
// border: 0;
// }
// }
// }
// [data-bs-theme=dark] {
// .trix-button-row {
// .trix-button-group {
// .trix-button {
// background-color: transparent;
// filter: invert(100%);
// }
// }
// }
// }
// // end fix trix dark mode
// .trix-content pre {
// background-color: var(--bs-secondary-bg);
// color: var(--bs-secondary-color);
// border: var(--bs-border-width) solid var(--bs-border-color);
// border-radius: var(--bs-border-radius);
// padding: var(--bs-padding);
// }
.hover-row:hover {
background-color: var(--bs-tertiary-bg);
}
@ -91,6 +60,7 @@ $tertiary-dark-active-open: $gray-600;
.page_nav nav ul {
padding-left: 0;
list-style-type: none;
li {
margin-bottom: 0.5rem;
}
@ -230,8 +200,9 @@ details.success_criterion:last-child {
}
details.success_criterion {
border: solid 1px $tertiary;
border-bottom: solid 0px $tertiary;
border-left: solid 1px $tertiary;
border-right: solid 0px $tertiary;
border-top: solid 0px $tertiary;
summary:hover {
background-color: $tertiary-hover;
@ -248,6 +219,7 @@ details.success_criterion {
>.content {
padding-left: 1rem;
padding-right: 1rem;
padding-bottom: 1rem;
}
}
@ -262,7 +234,7 @@ details.success_criterion {
details.success_criterion[open] {
border: solid 1px $tertiary;
/* border: solid 1px $tertiary; */
>summary {
background-color: $tertiary;
@ -275,14 +247,17 @@ details.success_criterion[open] {
@include color-mode(dark) {
details.success_criterion {
border: solid 1px $tertiary-dark;
border-bottom: solid 0px $tertiary-dark;
border-left: solid 1px $tertiary-dark;
border-right: solid 1px $tertiary-dark;
border-top: solid 1px $tertiary-dark;
}
details.success_criterion:last-child {
border-bottom: solid 1px $tertiary-dark;
}
details.success_criterion[open] {
border: solid 1px $tertiary-dark;
/* border: solid 1px $tertiary-dark; */
>summary {
background-color: $tertiary-dark;
@ -343,3 +318,64 @@ details[open] {
.sortable-ghost {
border: solid 3px $primary !important;
}
$dialog-animation-time: 0.5s;
$dialog-animation-start-state: scaleX(1);
$dialog-animation-end-state: scaleX(1);
/* dialog::backdrop { */
/* background-color: white; */
/* opacity: 0.75; */
/* } */
/* Open state of the dialog */
dialog[open] {
opacity: 1;
transform: $dialog-animation-end-state;
}
/* Closed state of the dialog */
dialog {
opacity: 0;
transform: $dialog-animation-start-state;
transition:
opacity $dialog-animation-time ease-out,
transform $dialog-animation-time ease-out,
overlay $dialog-animation-time ease-out allow-discrete,
display $dialog-animation-time ease-out allow-discrete;
/* Equivalent to
transition: all $dialog-animation-time allow-discrete; */
}
/* Before-open state */
/* Needs to be after the previous dialog[open] rule to take effect,
as the specificity is the same */
@starting-style {
dialog[open] {
opacity: 0;
transform: $dialog-animation-start-state;
}
}
/* Transition the :backdrop when the dialog modal is promoted to the top layer */
dialog::backdrop {
background-color: rgb(0 0 0 / 75%);
transition:
display $dialog-animation-time allow-discrete,
overlay $dialog-animation-time allow-discrete,
background-color $dialog-animation-time;
/* Equivalent to
transition: all $dialog-animation-time allow-discrete; */
}
dialog[open]::backdrop {
background-color: rgb(0 0 0 / 75%);
}
/* This starting-style rule cannot be nested inside the above selector
because the nesting selector cannot represent pseudo-elements. */
@starting-style {
dialog[open]::backdrop {
background-color: rgb(0 0 0 / 0%);
}
}