mirror of
https://github.com/Sea-Haven-Industries/meal-order-manager.git
synced 2026-09-30 05:23:13 +00:00
fix(form): refine meal description More/Less formatting (DEV-24) (#121)
Some checks failed
Deploy / deploy (push) Has been cancelled
Some checks failed
Deploy / deploy (push) Has been cancelled
* fix(form): align More/Less spacing with meal card rhythm * fix(form): lighten More/Less typography underline treatment * fix(form): add More/Less focus-visible and coarse-pointer hit target * fix(form): stop meal cards stretching on description expand
This commit is contained in:
parent
357318ef28
commit
b595744882
1 changed files with 22 additions and 1 deletions
|
|
@ -26,6 +26,7 @@ body {
|
|||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
|
||||
gap: 12px;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
header {
|
||||
|
|
@ -152,6 +153,10 @@ header p { font-size: 0.85rem; opacity: 0.8; }
|
|||
overflow: hidden;
|
||||
}
|
||||
|
||||
.meal-desc:has(+ .meal-desc-toggle) {
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
.meal-desc.is-expanded {
|
||||
display: block;
|
||||
-webkit-line-clamp: unset;
|
||||
|
|
@ -159,7 +164,7 @@ header p { font-size: 0.85rem; opacity: 0.8; }
|
|||
}
|
||||
|
||||
.meal-desc-toggle {
|
||||
display: inline-block;
|
||||
display: block;
|
||||
margin: 0 0 4px;
|
||||
padding: 0;
|
||||
border: none;
|
||||
|
|
@ -169,11 +174,27 @@ header p { font-size: 0.85rem; opacity: 0.8; }
|
|||
font-weight: 600;
|
||||
font-family: inherit;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.meal-desc-toggle:hover,
|
||||
.meal-desc-toggle:focus-visible {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.meal-desc-toggle:hover { opacity: 0.85; }
|
||||
|
||||
.meal-desc-toggle:focus-visible {
|
||||
outline: 2px solid var(--color-brand);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
@media (pointer: coarse) {
|
||||
.meal-desc-toggle {
|
||||
padding: 8px 0;
|
||||
}
|
||||
}
|
||||
|
||||
.qty-control {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue