| 736 |
736 |
|
}
|
| 737 |
737 |
|
|
| 738 |
738 |
|
/* Disabled keeps its bevel. The object is still there, its label is just
|
| 739 |
|
- |
unavailable, which is what greying the content says. */
|
|
739 |
+ |
unavailable, which is what greying the content says.
|
|
740 |
+ |
|
|
741 |
+ |
The fill and the edge come from layout.css now. The colour and the cursor
|
|
742 |
+ |
do NOT, and the reason generalises: layers are resolved before specificity,
|
|
743 |
+ |
so a lower layer loses to a higher one no matter how specific it is. The
|
|
744 |
+ |
generated `.button:disabled` sits in `makeover`, and `.button` above sets
|
|
745 |
+ |
`color` and `cursor` in this file, which is either unlayered or in a later
|
|
746 |
+ |
layer. So the base rule wins and the generated disabled values never apply.
|
|
747 |
+ |
|
|
748 |
+ |
The rule that falls out of that, and it is worth knowing before deleting
|
|
749 |
+ |
anything else: an app must state the disabled variant of every property it
|
|
750 |
+ |
sets at rest. makeover can only supply what the app is silent about. This
|
|
751 |
+ |
is not the app out-specifying a primitive; it is the cascade working as
|
|
752 |
+ |
designed.
|
|
753 |
+ |
|
|
754 |
+ |
The `.button:disabled:hover, .button:disabled:active` pair that used to sit
|
|
755 |
+ |
below IS gone. That one existed to out-specify the generated hover and
|
|
756 |
+ |
pressed rules, in those words, and makeover emits disabled after both now
|
|
757 |
+ |
and restates the rest depth, so source order settles it at equal
|
|
758 |
+ |
specificity. Nothing here has to reach (0,3,0) to win any more. */
|
| 740 |
759 |
|
.button:disabled {
|
| 741 |
760 |
|
color: var(--content-muted);
|
| 742 |
761 |
|
border-color: var(--content-muted);
|
| 743 |
762 |
|
cursor: not-allowed;
|
| 744 |
763 |
|
}
|
| 745 |
764 |
|
|
| 746 |
|
- |
/* Inert on both, and both properties on both selectors. Overriding only
|
| 747 |
|
- |
box-shadow on :active left a disabled button taking the pressed fill while
|
| 748 |
|
- |
keeping the raised edge, which is the fill-and-edge disagreement the
|
| 749 |
|
- |
generated rules exist to prevent. Higher specificity than the generated
|
| 750 |
|
- |
.button:hover and .button:active, so these win. */
|
| 751 |
|
- |
.button:disabled:hover,
|
| 752 |
|
- |
.button:disabled:active {
|
| 753 |
|
- |
background: var(--surface-raised);
|
| 754 |
|
- |
box-shadow: var(--bevel-raised);
|
| 755 |
|
- |
}
|
| 756 |
|
- |
|
| 757 |
765 |
|
.button--primary {
|
| 758 |
766 |
|
background-color: var(--action);
|
| 759 |
767 |
|
color: var(--content-on-action);
|
| 1937 |
1945 |
|
font-size: var(--font-size-lg);
|
| 1938 |
1946 |
|
}
|
| 1939 |
1947 |
|
|
| 1940 |
|
- |
/* The focus ring sits outside the well, so the inset bevel stays under it.
|
| 1941 |
|
- |
Composed rather than replacing, because box-shadow is not additive. */
|
| 1942 |
|
- |
.field:focus {
|
| 1943 |
|
- |
outline: none;
|
| 1944 |
|
- |
box-shadow: var(--bevel-inset), 0 0 0 2px var(--action);
|
|
1948 |
+ |
/* A disabled field never greyed its text. layout.css supplies the muted
|
|
1949 |
+ |
colour, and `.field` above sets `color` at rest in a later layer, so the
|
|
1950 |
+ |
base rule was winning and the generated one never applied. Same rule as
|
|
1951 |
+ |
`.button:disabled`: an app must state the disabled variant of every
|
|
1952 |
+ |
property it sets at rest.
|
|
1953 |
+ |
|
|
1954 |
+ |
Found by adopting the generated states, not reported. The fill and the edge
|
|
1955 |
+ |
come from layout.css and are not restated here. */
|
|
1956 |
+ |
.field:disabled,
|
|
1957 |
+ |
.field[aria-disabled="true"] {
|
|
1958 |
+ |
color: var(--content-muted);
|
| 1945 |
1959 |
|
}
|
| 1946 |
1960 |
|
|
|
1961 |
+ |
/* The field's focus ring comes from layout.css now. This rule was the third
|
|
1962 |
+ |
of the three rings the three apps had written independently, and it was
|
|
1963 |
+ |
doing it a third way: `outline: none` plus a composed box-shadow, where the
|
|
1964 |
+ |
others used `outline`. That mattered, because `outline: none` here also
|
|
1965 |
+ |
killed the generated `.field:focus-visible`, so keeping this would have
|
|
1966 |
+ |
left fields with no ring at all rather than with two.
|
|
1967 |
+ |
|
|
1968 |
+ |
Same 2px, and --focus-ring resolves to the same colour as --action. The
|
|
1969 |
+ |
generated ring sits inside the well (`outline-offset: calc(-1 * 2px)`)
|
|
1970 |
+ |
rather than outside it, which is where a well's ring belongs and which the
|
|
1971 |
+ |
composed box-shadow could not express without restating the bevel beside
|
|
1972 |
+ |
it, as the comment here used to.
|
|
1973 |
+ |
|
|
1974 |
+ |
`:focus-visible` rather than `:focus` is not a behaviour change for a text
|
|
1975 |
+ |
field: a focused text input always matches `:focus-visible`, however it was
|
|
1976 |
+ |
focused. */
|
|
1977 |
+ |
|
| 1947 |
1978 |
|
/* Kind rides on the element, not on a second class. Every one of the 55 call
|
| 1948 |
1979 |
|
sites had the old .form-input class on an <input>, .form-select on a
|
| 1949 |
1980 |
|
<select> and .form-textarea on a <textarea>, with no exceptions, so the class
|
| 3498 |
3529 |
|
font-size: var(--font-size-base);
|
| 3499 |
3530 |
|
}
|
| 3500 |
3531 |
|
|
|
3532 |
+ |
/* `cursor: not-allowed` comes from layout.css's disabled rule now. The
|
|
3533 |
+ |
opacity does not: makeover greys a disabled control by moving its content
|
|
3534 |
+ |
to --content-muted rather than by fading the whole box, and this pagination
|
|
3535 |
+ |
pair has always faded. Left as it is rather than folded in, because
|
|
3536 |
+ |
dimming twice is a look question and not a duplication. */
|
| 3501 |
3537 |
|
.pagination-controls .button:disabled {
|
| 3502 |
3538 |
|
opacity: 0.5;
|
| 3503 |
|
- |
cursor: not-allowed;
|
| 3504 |
3539 |
|
}
|
| 3505 |
3540 |
|
|
| 3506 |
3541 |
|
/* 28. Focus & Keyboard Accessibility */
|
| 3507 |
|
- |
.tab:focus-visible,
|
| 3508 |
|
- |
.button:focus-visible,
|
| 3509 |
|
- |
.field:focus-visible,
|
| 3510 |
|
- |
.card:focus-visible,
|
|
3542 |
+ |
|
|
3543 |
+ |
/* .tab, .button, .field and .card take their ring from layout.css and are no
|
|
3544 |
+ |
longer named here. What is left is this app's own focusables, which the
|
|
3545 |
+ |
design system does not know about.
|
|
3546 |
+ |
|
|
3547 |
+ |
Same width, offset and token as the generated rule on purpose: the point of
|
|
3548 |
+ |
one ring is that a user learns it once, and an app with two rings has the
|
|
3549 |
+ |
problem the design system was fixing, only inside one codebase. Track
|
|
3550 |
+ |
makeover-webview's focus_rule if it ever changes.
|
|
3551 |
+ |
|
|
3552 |
+ |
Was 3px solid var(--action). The width came down to 2px when makeover took
|
|
3553 |
+ |
the ring, which is the value all three apps had independently chosen; the
|
|
3554 |
+ |
colour is the same, since --focus-ring is derived from action.primary. */
|
| 3511 |
3555 |
|
.email-item:focus-visible,
|
| 3512 |
3556 |
|
.task-row:focus-visible,
|
| 3513 |
3557 |
|
.event-row-virtual:focus-visible,
|
| 3515 |
3559 |
|
.modal-close:focus-visible,
|
| 3516 |
3560 |
|
.snooze-option:focus-visible,
|
| 3517 |
3561 |
|
.unscheduled-task:focus-visible,
|
| 3518 |
|
- |
.timeline-item:focus-visible,
|
| 3519 |
|
- |
.card:focus-visible {
|
| 3520 |
|
- |
outline: 3px solid var(--action);
|
|
3562 |
+ |
.timeline-item:focus-visible {
|
|
3563 |
+ |
outline: 2px solid var(--focus-ring);
|
| 3521 |
3564 |
|
outline-offset: 2px;
|
| 3522 |
3565 |
|
}
|
| 3523 |
3566 |
|
|
| 5088 |
5131 |
|
font-family: var(--font-heading);
|
| 5089 |
5132 |
|
}
|
| 5090 |
5133 |
|
|
|
5134 |
+ |
/* The border and the content colour are this bar's own; the background is
|
|
5135 |
+ |
not, and restating var(--surface-raised) here only repeated what
|
|
5136 |
+ |
layout.css already sets on .button.
|
|
5137 |
+ |
|
|
5138 |
+ |
The `:hover` sibling went with it. It set var(--surface-overlay), which is
|
|
5139 |
+ |
what this app hovered to before makeover owned the state; the generated
|
|
5140 |
+ |
rule hovers to var(--hover-surface), which is the value makeover derives
|
|
5141 |
+ |
for exactly this and which nothing consumed until phase A. Keeping it
|
|
5142 |
+ |
would have made these buttons the only ones in the app that hover
|
|
5143 |
+ |
differently. */
|
| 5091 |
5144 |
|
.bulk-actions-bar .button {
|
| 5092 |
|
- |
background: var(--surface-raised);
|
| 5093 |
5145 |
|
border: var(--border-width-sm) solid var(--border);
|
| 5094 |
5146 |
|
color: var(--content);
|
| 5095 |
5147 |
|
}
|
| 5096 |
5148 |
|
|
| 5097 |
|
- |
.bulk-actions-bar .button:hover {
|
| 5098 |
|
- |
background: var(--surface-overlay);
|
| 5099 |
|
- |
}
|
| 5100 |
|
- |
|
| 5101 |
5149 |
|
.bulk-select-all {
|
| 5102 |
5150 |
|
margin-left: auto;
|
| 5103 |
5151 |
|
}
|
| 8037 |
8085 |
|
background-color: transparent;
|
| 8038 |
8086 |
|
}
|
| 8039 |
8087 |
|
|
| 8040 |
|
- |
.card:hover {
|
| 8041 |
|
- |
background-color: var(--surface-raised);
|
| 8042 |
|
- |
box-shadow: var(--bevel-raised);
|
| 8043 |
|
- |
}
|
|
8088 |
+ |
/* No `.card:hover` or `.button:hover` here any more. layout.css wraps its
|
|
8089 |
+ |
own hover rules in (hover: hover) and (pointer: fine), so on a
|
|
8090 |
+ |
fingertip they never apply and there is nothing left to take back.
|
|
8091 |
+ |
These two only ever existed to out-specify a rule this app does not
|
|
8092 |
+ |
own, which they did by loading last rather than by saying anything.
|
| 8044 |
8093 |
|
|
| 8045 |
|
- |
.button:hover {
|
| 8046 |
|
- |
background: var(--surface-raised);
|
| 8047 |
|
- |
}
|
|
8094 |
+ |
The app rules below stay: `.task-row:hover`, `.button--primary:hover`
|
|
8095 |
+ |
and the rest are this app's own hover states, and makeover has no
|
|
8096 |
+ |
opinion about them. */
|
| 8048 |
8097 |
|
|
| 8049 |
8098 |
|
.button--primary:hover {
|
| 8050 |
8099 |
|
background-color: var(--action);
|
| 8075 |
8124 |
|
transform: none;
|
| 8076 |
8125 |
|
}
|
| 8077 |
8126 |
|
|
| 8078 |
|
- |
/* Row actions are hover-revealed on desktop; on touch there is no hover, so
|
| 8079 |
|
- |
show them all and give the pointer back what .row-actions took away. */
|
| 8080 |
|
- |
.row-actions {
|
| 8081 |
|
- |
opacity: 1;
|
| 8082 |
|
- |
pointer-events: auto;
|
| 8083 |
|
- |
}
|
|
8127 |
+ |
/* `.row-actions { opacity: 1 }` is gone from here. It undid a hide that
|
|
8128 |
+ |
layout.css used to emit ungated, which left a fingertip with actions
|
|
8129 |
+ |
and no hover to bring them back. makeover-webview 0.13.0 moved the hide
|
|
8130 |
+ |
inside the capability query with the reveal, so on touch the actions
|
|
8131 |
+ |
are simply never hidden and there is nothing to undo. Both webview apps
|
|
8132 |
+ |
had written the same undo, which is what sent the fix upstream. */
|
| 8084 |
8133 |
|
|
| 8085 |
8134 |
|
/* Task row actions also take a full touch-target size. */
|
| 8086 |
8135 |
|
.task-row .task-row-action {
|
| 8120 |
8169 |
|
}
|
| 8121 |
8170 |
|
|
| 8122 |
8171 |
|
/* Touch-device body class (set by touch.js), equivalent guards for browsers
|
| 8123 |
|
- |
that report (hover: hover) but are still touch-first (e.g. some Chromebooks). */
|
|
8172 |
+ |
that report (hover: hover) but are still touch-first (e.g. some Chromebooks).
|
|
8173 |
+ |
|
|
8174 |
+ |
This one survives where its sibling inside the (hover: none) block did not,
|
|
8175 |
+ |
and the difference is the point: makeover gates on what the platform
|
|
8176 |
+ |
reports, and this exists precisely for the platforms that report it wrong.
|
|
8177 |
+ |
A design system cannot know which browsers lie, so this stays app-local. It
|
|
8178 |
+ |
is not out-specifying the primitive either, it is a narrower condition the
|
|
8179 |
+ |
primitive has no way to express. */
|
| 8124 |
8180 |
|
body.is-touch .row-actions {
|
| 8125 |
8181 |
|
opacity: 1;
|
| 8126 |
8182 |
|
pointer-events: auto;
|