Revert editable text style on Windows (#3828)

This commit is contained in:
windingwind 2024-03-11 14:25:26 +08:00 committed by GitHub
parent e08c34b497
commit 92a04fcffa
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
5 changed files with 21 additions and 21 deletions

View file

@ -184,6 +184,7 @@
input.rows = 1; input.rows = 1;
} }
input.classList.add('input'); input.classList.add('input');
input.toggleAttribute("no-windows-native", true);
let handleInput = () => { let handleInput = () => {
if (!this.multiline) { if (!this.multiline) {
this._input.value = this._input.value.replace(/\n/g, ' '); this._input.value = this._input.value.replace(/\n/g, ' ');

View file

@ -79,6 +79,15 @@ editable-text {
@media not (-moz-platform: windows) { @media not (-moz-platform: windows) {
@include focus-ring(true); @include focus-ring(true);
} }
// Do not use default Windows focus-ring
@media (-moz-platform: windows) {
&:focus-visible {
outline: none;
box-shadow: 0 0 0 var(--width-focus-border) var(--color-focus-border);
--width-focus-border: 1px;
--color-focus-border: var(--color-accent);
}
}
// Necessary for consistent padding, even if it's actually an <input> // Necessary for consistent padding, even if it's actually an <input>
-moz-default-appearance: textarea; -moz-default-appearance: textarea;
@ -93,13 +102,17 @@ editable-text {
&:read-only, &:not(:focus) { &:read-only, &:not(:focus) {
appearance: none; appearance: none;
background: transparent !important; background: transparent;
} }
&:hover:not(:read-only, :focus) { &:hover:not(:read-only, :focus) {
background: var(--fill-quinary) !important; background: var(--fill-quinary);
box-shadow: 0 0 0 1px var(--fill-quinary); box-shadow: 0 0 0 1px var(--fill-quinary);
} }
&:focus {
background: var(--material-background);
}
::placeholder { ::placeholder {
color: var(--fill-tertiary); color: var(--fill-tertiary);

View file

@ -51,11 +51,11 @@
input:is([type=color], [type=date], [type=datetime-local], [type=email], [type=month], input:is([type=color], [type=date], [type=datetime-local], [type=email], [type=month],
[type=number], [type=password], [type=search], [type=tel], [type=text], [type=time], [type=number], [type=password], [type=search], [type=tel], [type=text], [type=time],
[type=url], [type=week], [type=autocomplete]), [type=url], [type=week], [type=autocomplete]):not([no-windows-native]),
input:not([type]), input:not([type], [no-windows-native]),
textbox, textbox:not([no-windows-native]),
search-textbox, search-textbox:not([no-windows-native]),
textarea { textarea:not([no-windows-native]) {
appearance: none; appearance: none;
height: 26px; height: 26px;
padding: 0; padding: 0;

View file

@ -1,13 +0,0 @@
editable-text {
.input {
height: unset !important;
// Disable focus ring
outline: none;
padding-inline-start: unset;
&:not(:focus, :focus-visible),
&:read-only {
border: none !important;
}
}
}

View file

@ -14,7 +14,6 @@
// Elements // Elements
@import "win/elements/itemBox"; @import "win/elements/itemBox";
@import "win/elements/editableText";
// Components // Components