mirror of
https://github.com/react/react-native-devtools-frontend.git
synced 2026-09-30 17:27:22 +08:00
Peter Marshall
9a3d85fa0b
https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible :focus-visible is basically the exact same functionality as the custom data-keyboard-focus attribute that devtools maintains. This CL converts all of our uses of data-keyboard-focus in CSS to use :focus-visible. This has no intended behaviour change although it's possible there are small differences in our implementation vs. the web platform one, so this might cause some regression with focus styles for keyboard interaction. I tested a few of these manually to verify they still do the same thing. The CSS linter was unhappy about the ordering of some rules due to specificity-ordering checks, so there is some re-ordering too. A follow-up CL will remove our implementation of data-keyboard-focus. Change-Id: Ifc273f7d82e16ea07e24ed2d1faa6f794a12501d Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2352236 Commit-Queue: Peter Marshall <petermarshall@chromium.org> Reviewed-by: Jack Franklin <jacktfranklin@chromium.org> Reviewed-by: Kalon Hinds <kahinds@microsoft.com> Reviewed-by: Jack Lynch <jalyn@microsoft.com> Reviewed-by: Brandon Goddard <brgoddar@microsoft.com>
71 lines
1.4 KiB
CSS
71 lines
1.4 KiB
CSS
/*
|
|
* Copyright 2017 The Chromium Authors. All rights reserved.
|
|
* Use of this source code is governed by a BSD-style license that can be
|
|
* found in the LICENSE file.
|
|
*/
|
|
|
|
.breakpoint-list {
|
|
padding-bottom: 3px;
|
|
}
|
|
|
|
.breakpoint-list .editing.being-edited {
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.breakpoint-condition {
|
|
display: block;
|
|
margin-top: 4px;
|
|
margin-bottom: 4px;
|
|
margin-left: 23px;
|
|
margin-right: 8px;
|
|
}
|
|
|
|
.breakpoint-condition-input {
|
|
display: block;
|
|
margin-left: 0;
|
|
margin-right: 0;
|
|
outline: none !important;
|
|
border: 1px solid rgb(66% 66% 66%);
|
|
}
|
|
|
|
.breakpoint-entry {
|
|
white-space: nowrap;
|
|
padding: 2px 0;
|
|
}
|
|
|
|
.breakpoint-list .breakpoint-entry:hover {
|
|
background-color: #eee;
|
|
}
|
|
|
|
.breakpoint-list .breakpoint-entry:focus-visible {
|
|
background-color: var(--focus-bg-color);
|
|
}
|
|
|
|
.breakpoint-entry [is=dt-checkbox] {
|
|
max-width: 100%;
|
|
}
|
|
|
|
.breakpoint-hit {
|
|
background-color: rgb(255 255 194);
|
|
border-right: 3px solid rgb(107 97 48);
|
|
}
|
|
|
|
:host-context(.-theme-with-dark-background) .breakpoint-hit {
|
|
background-color: hsl(46deg 98% 22%);
|
|
color: #ccc;
|
|
}
|
|
|
|
@media (forced-colors: active) {
|
|
.breakpoint-list .breakpoint-entry:hover,
|
|
.breakpoint-list .breakpoint-entry:focus-visible {
|
|
forced-color-adjust: none;
|
|
background-color: Highlight;
|
|
}
|
|
|
|
.breakpoint-list .breakpoint-entry:hover *,
|
|
.breakpoint-list .breakpoint-entry:focus-visible * {
|
|
color: HighlightText;
|
|
}
|
|
}
|