bterkuile/fizzy
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #695 from basecamp/focus-hover-styles

Browse Source 
Focus hover styles
This commit is contained in:
Andy Smith
2025-07-07 09:49:08 -05:00
committed by GitHub
parent 402a918031 757ff4ff2b
commit 84d5f64d1f
35 changed files with 233 additions and 237 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/assets/stylesheets/_global.css
+9
View File
@@ -10,6 +10,10 @@
--block-space-double: calc(var(--block-space) * 2);
/* Text */
--font-sans: system-ui;
--font-serif: ui-serif, serif;
--font-mono: ui-monospace, monospace;
--text-xx-small: 0.55rem;
--text-x-small: 0.75rem;
--text-small: 0.85rem;
@@ -33,6 +37,11 @@
--footer-height: 3.5rem;
--tray-size: clamp(12rem, 25dvw, 24rem);
/* Focus rings for keyboard navigation */
--focus-ring-color: var(--color-link);
--focus-ring-offset: 1px;
--focus-ring-size: 2px;
@media (max-width: 799px) {
--tray-size: var(--footer-height);
}
app/assets/stylesheets/actiontext-lexical.css
+9 -11
View File
@@ -6,12 +6,12 @@
figure.node--selected {
&:not(:has(img)) {
box-shadow: 0 0 0 var(--hover-size) var(--color-selected-dark);
box-shadow: 0 0 0 var(--focus-ring-size) var(--focus-ring-color);
}
&:has(img) {
img {
box-shadow: 0 0 0 var(--hover-size) var(--color-selected-dark);
box-shadow: 0 0 0 var(--focus-ring-size) var(--focus-ring-color);
}
}
}
@@ -45,7 +45,7 @@
&:is([type="submit"]) {
--btn-background: var(--card-color, var(--color-link));
--btn-color: var(--color-ink-inverted);
--outline-color: var(--card-color, var(--color-link));
--focus-ring-color: var(--card-color, var(--color-link));
}
}
@@ -55,8 +55,6 @@
}
.lexical-editor__content {
--outline-size: max(2px, 0.08em);
margin: var(--block-space-half) 0;
min-block-size: calc(7lh + var(--block-space));
outline: 0;
@@ -177,15 +175,11 @@
padding: var(--lexical-prompt-padding);
&:hover {
background-color: var(--color-selected);
background-color: var(--color-ink-lightest);
}
&[aria-selected] {
box-shadow: 0 0 0 var(--hover-size) var(--color-selected-dark) inset;
&:hover {
--hover-size: 0;
}
background-color: var(--color-selected);
}
img {
@@ -196,6 +190,10 @@
margin: 0;
}
+ & {
margin-top: 2px;
}
code {
background-color: var(--color-terminal-text-light);
border-radius: 0.25ch;
app/assets/stylesheets/avatars.css
+3 -10
View File
@@ -2,8 +2,7 @@
.avatar {
--avatar-border-radius: 50%;
--avatar-size-default: 5ch;
--btn-border-size: 0;
--hover-size: 0;
--btn-border-size: 0;
aspect-ratio: 1;
block-size: var(--avatar-size, var(--avatar-size-default));
@@ -16,19 +15,13 @@
:is(img, .icon) {
aspect-ratio: 1;
block-size: auto;
block-size: 100%;
border-radius: var(--avatar-border-radius);
grid-area: 1/1;
inline-size: var(--avatar-size, var(--avatar-size-default));
inline-size: 100%;
max-inline-size: 100%;
object-fit: cover;
}
&:where(a):not(:active):hover {
@media (any-hover: hover) {
filter: brightness(0.7);
}
}
}
.avatar__form {
app/assets/stylesheets/base.css
+17 -46
View File
@@ -8,13 +8,6 @@
}
body {
--font-sans: system-ui;
--font-serif: ui-serif, serif;
--font-mono: ui-monospace, monospace;
--hover-color: var(--color-ink-medium);
--hover-size: 0.15rem;
--hover-filter: brightness(1);
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
-webkit-text-size-adjust: none;
@@ -28,55 +21,33 @@
text-size-adjust: none;
}
a:not([class]) {
--hover-size: 0;
a {
text-decoration: none;
color: var(--color-link);
text-decoration: underline;
text-decoration-skip-ink: auto;
&:not([class]) {
color: var(--color-link);
text-decoration: underline;
text-decoration-skip-ink: auto;
}
}
:is(a, button, input, textarea, .switch, .btn) {
--outline-size: 2px;
caret-color: var(--color-link);
text-decoration: none;
transition: 100ms ease-out;
transition-property: background-color, border-color, box-shadow, filter, outline;
touch-action: manipulation;
transition:
box-shadow 150ms ease,
outline-offset 150ms ease,
background-color 150ms ease,
opacity 150ms ease,
filter 150ms ease;
/* Hover */
@media (any-hover: hover) {
&:where(:not(:active):hover) {
box-shadow: 0 0 0 var(--hover-size) var(--hover-color);
}
}
/* Keyboard navigation */
&:where(:not(:active)):focus-visible {
outline-color: var(--outline-color, currentColor);
outline-width: var(--outline-size);
outline-offset: var(--outline-offset, calc(var(--outline-size) * 2));
&:where(:focus-visible) {
border-radius: 0.25ch;
outline: var(--focus-ring-size) solid var(--focus-ring-color);
outline-offset: var(--focus-ring-offset);
}
&:where(:focus-visible):focus,
&:where(:focus-visible):active {
outline: 0;
}
/* Pressing */
&:focus:not(:focus-visible) {
--outline-offset: 0;
}
/* Disabled */
&:where([disabled]):not(:hover):not(:active) {
/* Default disabled styles */
&:where([disabled]) {
cursor: not-allowed;
filter: brightness(0.75);
opacity: 0.5;
pointer-events: none;
}
}
app/assets/stylesheets/buttons.css
+55 -55
View File
@@ -1,7 +1,8 @@
@layer components {
.btn {
--transition: 150ms ease;
--icon-size: var(--btn-icon-size, 1.3em);
--btn-border-radius: 99rem;
--btn-hover-brightness: 0.9;
align-items: center;
background-color: var(--btn-background, var(--color-canvas));
@@ -16,57 +17,18 @@
justify-content: center;
padding: var(--btn-padding, 0.5em 1.1em);
pointer-events: auto;
transition:
background-color var( --transition),
border var( --transition),
color var( --transition),
filter var( --transition),
opacity var( --transition),
scale var( --transition);
position: relative;
transition: 100ms ease-out;
transition-property: background-color, border, box-shadow, color, filter, opacity, scale;
/* Default icon styles */
&:where(:has(.icon)) {
--icon-size: var(--btn-icon-size, 1.3em);
text-align: start;
}
/* With radios and checkboxes */
&:has(input[type=radio]),
&:has(input[type=checkbox]) {
position: relative;
:is(input[type=radio]),
:is(input[type=checkbox]) {
--hover-size: 0;
appearance: none;
border-radius: var(--btn-border-radius);
cursor: pointer;
display: flex;
inset: 0;
margin: 0;
padding: 0;
position: absolute;
&:focus-visible {
outline: none;
}
}
.checked {
display: none;
@media (any-hover: hover) {
&:hover {
filter: brightness(var(--btn-hover-brightness));
}
}
&:has(input:checked) {
--btn-background: var(--color-ink);
--btn-color: var(--color-ink-inverted);
--outline-color: var(--color-ink);
.checked {
display: block;
}
@media (prefers-color-scheme: dark) {
--btn-hover-brightness: 1.25;
}
&[disabled],
@@ -93,15 +55,13 @@
--btn-color: inherit;
--btn-icon-size: 100%;
--btn-padding: 0;
--hover-size: 0;
--outline-size: 0;
}
.btn--link {
--btn-background: var(--color-link);
--btn-border-color: var(--color-canvas);
--btn-color: var(--color-ink-inverted);
--outline-color: var(--color-link);
--focus-ring-color: var(--color-link);
}
.btn--circle,
@@ -122,16 +82,16 @@
.btn--negative {
--btn-background: var(--color-negative);
--btn-border-color: var(--color-canvas);
--btn-border-color: var(--color-negative);
--btn-color: var(--color-ink-inverted);
--outline-color: var(--color-negative);
--focus-ring-color: var(--color-negative);
}
.btn--positive {
--btn-background: var(--color-positive);
--btn-border-color: var(--color-canvas);
--btn-color: var(--color-ink-inverted);
--outline-color: var(--color-positive);
--focus-ring-color: var(--color-positive);
}
.btn--success {
@@ -157,7 +117,47 @@
--btn-background: var(--color-ink);
--btn-border-color: var(--color-canvas);
--btn-color: var(--color-canvas);
--outline-color: var(--color-ink);
--focus-ring-color: var(--color-ink);
}
/* Toggleable buttons
/* ------------------------------------------------------------------------ */
.btn {
:is(input[type=radio], input[type=checkbox]) {
appearance: none;
border-radius: var(--btn-border-radius);
cursor: pointer;
display: flex;
inset: 0;
margin: 0;
padding: 0;
position: absolute;
&:focus-visible {
outline: none;
}
}
.checked {
display: none;
}
&:has(input:focus-visible) {
outline: var(--focus-ring-size) solid var(--focus-ring-color);
outline-offset: var(--focus-ring-offset);
}
&:has(input:checked) {
--btn-background: var(--color-ink);
--btn-border-color: var(--color-ink);
--btn-color: var(--color-ink-inverted);
--focus-ring-color: var(--color-ink);
.checked {
display: block;
}
}
}
/* Button groups
app/assets/stylesheets/card-columns.css
+8 -5
View File
@@ -118,6 +118,7 @@
/* ------------------------------------------------------------------------ */
.cards__heading {
background-color: var(--color-canvas);
display: flex;
font-size: var(--text-medium);
@@ -129,17 +130,19 @@
position: sticky;
z-index: 2;
&, button {
&, .cards__filter {
font-weight: bold;
text-transform: uppercase;
}
button {
--hover-size: 0;
.cards__filter {
--filter-block-padding: 0.5rem;
background-color: var(--color-canvas);
border-radius: 99rem;
inline-size: auto;
margin-inline-start: 2em;
padding: 0 2em 0 0;
margin-block: calc(-1 * var(--filter-block-padding));
padding-block: var(--filter-block-padding);
}
dialog {
app/assets/stylesheets/card-perma.css
+3 -2
View File
@@ -48,10 +48,10 @@
.collection-picker__button {
--btn-border-size: 0;
font-size: 0.5em;
margin-inline-start: 1ch;
+ .panel {
--panel-size: 18ch;
}
@@ -152,6 +152,7 @@
&:has(input:checked) {
--btn-background: var(--card-color);
--btn-border-color: var(--card-color);
--btn-color: var(--color-ink-inverted);
}
}
app/assets/stylesheets/cards.css
+27 -7
View File
@@ -4,6 +4,7 @@
.card {
--avatar-size: 2.75em;
--card-bg-color: color-mix(in srgb, var(--card-color) 4%, var(--color-canvas));
--card-padding-inline: var(--inline-space-double);
--card-padding-block: var(--block-space);
--border-color: transparent;
@@ -11,7 +12,7 @@
--border-size: 0;
aspect-ratio: var(--card-aspect-ratio, auto);
background-color: color-mix(in srgb, var(--card-color) 4%, var(--color-canvas));
background-color: var(--card-bg-color);
border-radius: var(--border-radius);
box-shadow: var(--shadow);
color: color-mix(in srgb, var(--card-color) 40%, var(--color-ink));
@@ -64,6 +65,22 @@
max-inline-size: 100%;
min-inline-size: 0;
padding: var(--block-space-half) var(--inline-space) var(--block-space-half) var(--card-padding-inline);
&:has(.collection-picker__button) {
cursor: pointer;
transition: background-color: 100ms ease-out;
@media (any-hover: hover) {
&:hover {
background-color: color-mix(in srgb, var(--card-color) 90%, var(--color-ink));
}
}
&:has(.btn:focus-visible) {
outline: var(--focus-ring-size) solid var(--focus-ring-color);
outline-offset: var(--focus-ring-offset);
}
}
}
.card__collection-name {
@@ -139,8 +156,6 @@
}
.card__link {
--hover-size: 0;
content: "";
inset: 0;
position: absolute;
@@ -168,7 +183,6 @@
}
.card__title {
--hover-size: 0;
--input-border-radius: 0;
--input-color: color-mix(in srgb, var(--card-color) 40%, var(--color-ink));
--lines: 3;
@@ -204,10 +218,17 @@
--btn-icon-size: 1em;
--card-padding-block: calc(var(--block-space) * 1.25);
box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-link) 20%, var(--color-canvas));
box-shadow: 0 0 0 1px oklch(var(--lch-blue-lighter));
color: var(--btn-color);
font-weight: 700;
transition: none;
transition: box-shadow 100ms ease-out;
@media (any-hover: hover) {
&:hover {
filter: none;
box-shadow: 0 0 0 1px oklch(var(--lch-blue-lighter)), var(--shadow);
}
}
}
.card__move-button {
@@ -393,7 +414,6 @@
--btn-icon-size: 0.75em;
--btn-padding: 0;
--btn-size: 1.25em;
--hover-size: 0;
position: relative;
z-index: 1;
app/assets/stylesheets/events.css
+1 -4
View File
@@ -198,10 +198,7 @@
}
.event--related {
--hover-color: var(--card-color);
--hover-size: 0.15rem;
box-shadow: 0 0 0 var(--hover-size) var(--hover-color);
box-shadow: 0 0 0 0.15rem var(--card-color);
}
.event__content {
app/assets/stylesheets/expander.css
+5 -6
View File
@@ -30,7 +30,7 @@
}
[open] & {
box-shadow: none;
filter: none;
}
.icon {
@@ -44,6 +44,7 @@
align-items: stretch;
border-radius: var(--expander-radius);
flex-direction: column;
filter: none;
gap: 0;
padding-block-start: var(--expander-height);
@@ -92,21 +93,19 @@
}
.expander__item {
--btn-background: transparent;
--btn-background: var(--card-color);
--btn-border-radius: 0.3em;
--btn-border-size: 0;
--btn-font-weight: 500;
--btn-padding: var(--inline-space-half) var(--inline-space);
--hover-size: 0;
--outline-color: transparent;
inline-size: calc(100% + var(--inline-space-double));
margin-inline-start: calc(-1 * var(--inline-space));
justify-content: flex-start;
white-space: nowrap;
&:hover,
/* &:hover,
&:focus-visible {
background-color: oklch(var(--lch-canvas) / 15%);
}
} */
}
app/assets/stylesheets/fizzy-menu.css
+8 -1
View File
@@ -14,12 +14,19 @@
--input-border-color: var(--color-selected-dark);
--input-padding: 0.2em 2em 0.2em 0.9em;
background-color: var(--color-canvas);
box-shadow: 0 0 0 1px oklch(var(--lch-blue-medium) / 5%),
0 0.2em 0.2em oklch(var(--lch-blue-medium) / 5%),
0 0.4em 0.4em oklch(var(--lch-blue-medium) / 5%),
0 0.8em 0.8em oklch(var(--lch-blue-medium) / 5%);
margin-block-start: 0.1em;
@media (any-hover: hover) {
&:hover {
filter: brightness(0.9);
}
}
svg {
block-size: auto;
inline-size: 1.1em;
@@ -69,4 +76,4 @@
}
}
}
}
}
app/assets/stylesheets/inputs.css
+21 -25
View File
@@ -21,18 +21,12 @@
-webkit-box-shadow: 0 0 0px 1000px var(--color-selected) inset;
}
&:where(:not(:active)):focus {
--input-border-color: var(--color-selected-dark);
--hover-color: var(--color-selected-dark);
--outline-size: 0;
--outline-color: transparent;
filter: var(--hover-filter);
box-shadow: 0 0 0 var(--hover-size) var(--hover-color);
&:where(:focus) {
--focus-ring-offset: -1px;
}
&:where([disabled]):not(:hover):not(:active) {
filter: none;
&[readonly] {
--focus-ring-size: 0;
}
}
@@ -134,6 +128,9 @@
/* Switches */
.switch {
--switch-color: var(--color-ink-medium);
--switch-hover-brightness: 0.9;
block-size: 1.75em;
border-radius: 2em;
display: inline-flex;
@@ -142,9 +139,7 @@
&:has(:focus-visible) {
.switch__btn {
box-shadow:
0 0 0 var(--outline-size) var(--color-canvas),
0 0 0 calc(var(--outline-size) * 2) var(--color-ink);
outline: var(--focus-ring-size) solid var(--focus-ring-color);
}
}
}
@@ -156,10 +151,11 @@
}
.switch__btn {
background-color: var(--color-ink-medium);
background-color: var(--switch-color);
border-radius: 2em;
cursor: pointer;
inset: 0;
outline-offset: var(--focus-ring-offset);
position: absolute;
transition: 150ms ease;
@@ -175,13 +171,20 @@
transition: 150ms ease;
}
@media (any-hover: hover) {
&:hover {
background-color: color-mix(in srgb, var(--switch-color) 80%, var(--color-ink));
}
}
.switch__input:disabled + & {
background-color: var(--color-ink-medium) !important;
--switch-color: var(--color-ink-medium) !important;
cursor: not-allowed;
}
.switch__input:checked + & {
background-color: var(--color-link);
--switch-color: var(--color-link);
&::before {
transform: translateX(1.2em);
@@ -191,15 +194,13 @@
/* Containers that act like (and contain) inputs */
.input--actor {
outline-offset: -1px;
transition: box-shadow 150ms ease, outline-offset 150ms ease;
&:focus-within {
--input-border-color: var(--color-selected-dark);
--hover-color: var(--color-selected-dark);
--outline-size: 0;
filter: var(--hover-filter);
box-shadow: 0 0 0 var(--hover-size) var(--hover-color);
outline: var(--focus-ring-size) solid var(--focus-ring-color);
}
.input {
@@ -207,9 +208,6 @@
--input-border-radius: 0;
--input-background: transparent;
--input-border-size: 0;
--hover-size: 0;
--outline-size: 0;
--outline-color: transparent;
inline-size: 100%;
outline: 0;
@@ -233,11 +231,9 @@
}
.input.boost__input {
--hover-size: 0;
--input-border-radius: 0;
--input-border-size: 0;
--input-padding: 0;
--outline-size: 0;
color: inherit;
font-size: inherit;
app/assets/stylesheets/knobs.css
+2 -3
View File
@@ -19,8 +19,6 @@
}
.knob__slider {
--hover-size: 0;
appearance: none;
background-color: transparent;
block-size: var(--knob-size);
@@ -75,7 +73,8 @@
}
&:has(:focus-visible) {
box-shadow: 0 0 0 2px var(--knob-color);
outline: var(--focus-ring-size) solid var(--focus-ring-color);
outline-offset: 0;
}
/* Tick marks */
app/assets/stylesheets/layout.css
+2
View File
@@ -92,7 +92,9 @@
display: none;
}
}
}
@layer components {
.skip-navigation {
--left-offset: -999em;
app/assets/stylesheets/markdown.css
-1
View File
@@ -1,6 +1,5 @@
@layer components {
.heading__link {
--hover-size: 0;
--opacity: 0.5;
--size: 0.8em;
app/assets/stylesheets/popup.css
+8 -12
View File
@@ -59,14 +59,18 @@
@media (any-hover: hover) {
&:hover {
--hover-size: 0;
background: var(--color-selected);
background: var(--color-ink-lightest);
}
}
&[aria-selected] {
box-shadow: 0 0 0 var(--hover-size) var(--color-selected-dark) inset;
background-color: var(--color-selected);
@media (any-hover: hover) {
&:hover {
background-color: var(--color-selected);
}
}
}
}
@@ -76,8 +80,6 @@
--btn-border-size: 0;
--btn-font-weight: 500;
--btn-padding: var(--inline-space-half) 0 var(--inline-space-half) var(--inline-space);
--hover-size: 0;
--outline-color: transparent;
flex: 1 1 auto;
justify-content: start;
@@ -90,11 +92,6 @@
}
}
&[aria-selected] {
border-radius: 0.3em;
box-shadow: 0 0 0 var(--hover-size) var(--color-selected-dark) inset;
}
&:has(input:checked) {
--btn-background: transparent;
--btn-color: var(--color-ink);
@@ -110,7 +107,6 @@
@media (any-hover: hover) {
&:where(:not(:active):hover) {
--hover-size: 0;
--btn-background: var(--color-selected);
}
}
app/assets/stylesheets/reactions.css
+11 -11
View File
@@ -26,6 +26,7 @@
.reaction {
--btn-size: 100%;
--reaction-hover-brightness: 0.9;
align-items: center;
background-color: var(--color-canvas);
@@ -51,18 +52,13 @@
@media (any-hover: hover) {
&:not(:active):hover {
--reaction-border-color: var(--color-ink-medium);
filter: brightness(var(--reaction-hover-brightness));
box-shadow: 0 0 0 var(--hover-size) var(--hover-color);
@media (prefers-color-scheme: dark) {
--reaction-hover-brightness: 1.25;
}
}
}
&:has(.reaction__input):focus-within {
--hover-color: var(--color-selected-dark);
--reaction-border-color: var(--color-selected-dark);
box-shadow: 0 0 0 var(--hover-size) var(--hover-color);
}
}
/* Make the avatar and delete buttons fit nicely within the reaction */
@@ -74,6 +70,7 @@
.reaction__delete {
display: none;
translate: 0.25em;
.expanded & {
display: flex;
@@ -89,17 +86,20 @@
transform-origin: left center;
}
&:has(.input:focus) {
outline: var(--focus-ring-size) solid var(--focus-ring-color);
outline-offset: var(--focus-ring-offset);
}
.reaction__form-label:focus {
outline: none;
}
}
.reaction__input {
--hover-size: 0;
--input-background: transparent;
--input-border-size: 0;
--input-padding: 0;
--outline-size: 0;
box-shadow: none;
display: inherit;
app/assets/stylesheets/rich-text-content.css
-6
View File
@@ -210,10 +210,6 @@
}
}
.attachment__figure {
--hover-size: 0;
}
.attachment--file {
align-items: center;
display: inline-flex;
@@ -329,8 +325,6 @@
}
.attachment__link {
--hover-size: 0;
color: var(--color-link);
text-decoration: underline;
}
app/assets/stylesheets/terminals.css
-5
View File
@@ -23,8 +23,6 @@
--btn-border-color: var(--color-terminal-text);
--btn-padding: 0.1em 0.7em;
--btn-border-size: 1px;
--hover-color: var(--color-terminal-text);
--hover-size: 1px;
font-family: var(--font-mono);
font-size: var(--text-x-small);
@@ -95,10 +93,7 @@
.terminal__input:is(.input) {
--input-border-color: transparent;
--input-border-radius: 0.3em;
--hover-color: transparent;
--input-color: var(--color-terminal-text);
--outline-size: 0;
--outline-color: transparent;
accent-color: var(--color-terminal-text);
caret-color: var(--color-terminal-text);
app/assets/stylesheets/trays.css
-5
View File
@@ -63,9 +63,6 @@
/* ------------------------------------------------------------------------ */
.tray__expander {
--hover-size: 0;
--outline-size: 0;
align-self: stretch;
background: transparent;
border: 0;
@@ -116,8 +113,6 @@
/* ------------------------------------------------------------------------ */
.tray__actions {
--hover-size: 0;
align-self: center;
align-items: stretch;
border: 1px dashed oklch(var(--lch-white) / 50%);
app/assets/stylesheets/utilities.css
+4
View File
@@ -218,4 +218,8 @@
/* Visibility */
[hidden] { display: none !important; }
[contents] { display: contents; }
.hide-focus-ring {
--focus-ring-size: 0;
}
}
app/assets/stylesheets/workflows.css
+22 -7
View File
@@ -4,14 +4,13 @@
--btn-padding: 0.2em 0.5em;
--btn-border-size: 0;
--btn-border-radius: 0.2em;
--hover-size: 0;
color: inherit;
inline-size: 100%;
@media (hover: hover) {
&:hover {
background-color: color(from var(--card-color) srgb r g b / 0.15);
--btn-background: color(from var(--card-color) srgb r g b / 0.15);
}
}
}
@@ -23,21 +22,29 @@
@media (hover: hover) {
&:hover {
background-color: color(from var(--card-color) srgb r g b / 0.65);
--btn-background: var(--card-color);
}
}
}
/* Workflow settings
/* ------------------------------------------------------------------------ */
.workflow-preview {
--border-size: 0.2em;
aspect-ratio: 1;
border: 0.2em solid var(--color-ink-lighter);
flex: 1 1 30%;
max-inline-size: 30%;
button {
--hover-size: 0;
@media (any-hover: hover) {
&:hover:not(.workflow-preview--selected) {
border-color: var(--color-ink-light);
}
}
button {
appearance: none;
aspect-ratio: 1;
background: transparent;
@@ -58,15 +65,23 @@
}
.workflow-preview--selected {
--border-color: var(--color-link);
border-color: var(--color-link);
}
.workflow-preview__swatch {
--btn-size: 1em;
--btn-border-radius: 50%;
--btn-border-size: 0;
--hover-size: 0;
cursor: auto;
}
.workflow__swatch-btn {
@media (any-hover: hover) {
&:hover {
filter: brightness(0.9);
}
}
}
}
app/views/accounts/settings/_users.html.erb
+1 -1
View File
@@ -7,7 +7,7 @@
<input placeholder="Filter…" class="input input--transparent full-width" type="search" autocorrect="off" autocomplete="off" data-1p-ignore="true" data-filter-target="input" data-action="input->filter#filter">
</div>
<div data-filter-target="list" class="users-list flex flex-column gap">
<div data-filter-target="list" class="users-list">
<%= render partial: "accounts/user", collection: users %>
</div>
</div>
app/views/cards/comments/reactions/_reaction.html.erb
+1 -1
View File
@@ -17,7 +17,7 @@
<%= button_to card_comment_reaction_path(reaction.comment.card, reaction.comment, reaction),
method: :delete,
class: "btn btn--negative flex-item-justify-end reaction__delete",
class: "reaction__delete btn btn--negative flex-item-justify-end",
data: { action: "reaction-delete#perform", reaction_delete_target: "button" } do %>
<%= icon_tag "minus" %>
<span class="for-screen-reader">Delete this reaction</span>
app/views/cards/display/common/_assignees.html.erb
+1 -1
View File
@@ -4,7 +4,7 @@
<% end %>
<div class="position-relative" data-controller="dialog" data-action="keydown.esc->dialog#close click@document->dialog#closeOnClickOutside" <%= "hidden" if card.closed? %>>
<button class="btn card__hide-on-index fill-transparent" data-action="click->dialog#open:stop">
<button class="btn card__hide-on-index" data-action="click->dialog#open:stop" style="--btn-background: var(--card-bg-color);">
<%= icon_tag "person-add" %>
<span class="for-screen-reader">Assign</span>
</button>
app/views/cards/display/perma/_tags.html.erb
+1 -1
View File
@@ -12,7 +12,7 @@
</div>
<div class="position-relative" data-controller="dialog" data-action="keydown.esc->dialog#close click@document->dialog#closeOnClickOutside" <%= "hidden" if card.closed? %>>
<button class="tag-picker__button btn card__hide-on-index fill-transparent" data-action="click->dialog#open:stop">
<button class="tag-picker__button btn card__hide-on-index" data-action="click->dialog#open:stop" style="--btn-background: var(--card-bg-color);">
<%= icon_tag "tag" %>
<span class="for-screen-reader">Add a tag</span>
</button>
app/views/cards/display/public_preview/_meta.html.erb
+1 -1
View File
@@ -28,7 +28,7 @@
<% end %>
<div class="position-relative" data-controller="dialog" data-action="keydown.esc->dialog#close click@document->dialog#closeOnClickOutside" <%= "hidden" if card.closed? %>>
<button class="btn card__hide-on-index fill-transparent" data-action="click->dialog#open:stop">
<button class="btn card__hide-on-index" data-action="click->dialog#open:stop" style="--btn-background: var(--card-bg-color);">
<%= icon_tag "person-add" %>
<span class="for-screen-reader">Assign</span>
</button>
app/views/cards/edit.html.erb
+1 -1
View File
@@ -2,7 +2,7 @@
<%= form_with model: @card, url: collection_card_path(@card.collection, @card), class: "card__content", data: { controller: "autoresize form" } do |form| %>
<h1 class="card__title">
<%= form.label :title, class: "flex flex-column align-center autoresize__wrapper", data: { autoresize_target: "wrapper", autoresize_clone_value: "" } do %>
<%= form.text_area :title, class: "input input--textarea full-width borderless txt-align-start card-field__title autoresize__textarea",
<%= form.text_area :title, class: "card-field__title input input--textarea hide-focus-ring full-width borderless txt-align-start autoresize__textarea",
required: true, autofocus: true, placeholder: "Name it…", rows: 1,
data: { autoresize_target: "textarea", action: "input->autoresize#resize keydown.enter->form#submit:prevent keydown.ctrl+enter->form#submit:prevent keydown.meta+enter->form#submit:prevent keydown.esc->form#cancel focus->form#select" } %>
<% end %>
app/views/cards/index/_closure_filter.html.erb
+1 -1
View File
@@ -1,5 +1,5 @@
<div class="cards__heading" data-controller="dialog" data-action="keydown.esc->dialog#close click@document->dialog#closeOnClickOutside">
<button class="cards__filter input input--select borderless overflow-ellipsis" data-action="click->dialog#open:stop">
<button class="cards__filter btn input input--select borderless overflow-ellipsis" data-action="click->dialog#open:stop">
Recently closed
</button>
app/views/cards/index/_workflow_filter.html.erb
+2 -2
View File
@@ -1,5 +1,5 @@
<div class="cards__heading cards__filter" data-controller="dialog" data-action="keydown.esc->dialog#close click@document->dialog#closeOnClickOutside">
<button class="cards__filter input input--select borderless overflow-ellipsis" data-action="click->dialog#open:stop">
<div class="cards__heading" data-controller="dialog" data-action="keydown.esc->dialog#close click@document->dialog#closeOnClickOutside">
<button class="cards__filter btn input input--select borderless overflow-ellipsis" data-action="click->dialog#open:stop">
<% if filter.stages.any? %>
<%= filter.stages.map(&:name).to_sentence %>
<% else %>
app/views/cards/show.html.erb
+5 -2
View File
@@ -27,8 +27,11 @@
<% end %>
<header class="card-perma__collection-header">
<%= link_to cards_path(collection_ids: [ @card.collection ]), class: "txt-large overflow-ellipsis margin-none txt-ink", style: "view-transistion-name: card-collection-title", data: { controller: "hotkey", action: "keydown.esc@document->hotkey#click" } do %>
&larr; <strong class="font-black"><%= @card.collection.name %></strong>
<%= link_to cards_path(collection_ids: [ @card.collection ]), class: "btn borderless txt-large", style: "--btn-padding: 0.25ch 1ch 0.25ch 0.75ch; view-transistion-name: card-collection-title;", data: { controller: "hotkey", action: "keydown.esc@document->hotkey#click" } do %>
<span>
&larr;
<strong class="font-black"><%= @card.collection.name %></strong>
</span>
<% end %>
</header>
app/views/collections/edit/_publication.html.erb
+1 -1
View File
@@ -18,7 +18,7 @@
</div>
<div class="flex align-center gap-half margin-block">
<%= text_field_tag :publication_url, published_collection_url(collection), disabled: true, class: "full-width input fill-white" %>
<%= text_field_tag :publication_url, published_collection_url(collection), readonly: true, class: "full-width input fill-white" %>
<div class="flex align-center justify-center gap-half">
<%= button_to_copy_to_clipboard(published_collection_url(collection)) do %>
<%= icon_tag "copy-paste" %>
app/views/collections/edit/_workflows.html.erb
+1 -1
View File
@@ -3,7 +3,7 @@
<div class="flex justify-center margin-block-end">Use a Workflow to track progress in this Collection.</div>
<div class="flex flex-wrap gap justify-center">
<% Workflow.all.each do |workflow| %>
<div class="workflow-preview txt-align-start border border-radius <%= 'workflow-preview--selected' if workflow == collection.workflow %>">
<div class="workflow-preview txt-align-start border-radius <%= 'workflow-preview--selected' if workflow == collection.workflow %>">
<%= button_to collection_workflow_path(collection), method: :patch, aria: { label: workflow == collection.workflow ? "Stop using this workflow" : "Use this workflow" } do %>
<%= hidden_field_tag "collection[workflow_id]", workflow == collection.workflow ? "" : workflow.id %>
<strong class="txt-small overflow-ellipsis flex-item-no-shrink"><%= workflow.name %></strong>
app/views/commands/_form.html.erb
+1 -1
View File
@@ -22,7 +22,7 @@
<%= rich_textarea_tag "command", nil,
toolbar: false,
class: "terminal__input input fill-transparent unpad",
class: "terminal__input input hide-focus-ring fill-transparent unpad",
"single-line": true,
attachments: false,
data: {
app/views/workflows/stages/_color.html.erb
+1 -1
View File
@@ -1,5 +1,5 @@
<div class="position-relative" data-controller="dialog" data-action="keydown.esc->dialog#close">
<button class="btn btn--reversed txt-small borderless" data-action="dialog#open:stop" style="--btn-background: <%= stage_color(stage) %>">
<button class="workflow__swatch-btn btn btn--reversed txt-small borderless" data-action="dialog#open:stop" style="--btn-background: <%= stage_color(stage) %>">
<%= icon_tag "art" %>
<span class="for-screen-reader">Change color</span>
</button>