Revert editable text style on Windows (#3828)
This commit is contained in:
parent
e08c34b497
commit
92a04fcffa
5 changed files with 21 additions and 21 deletions
|
@ -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, ' ');
|
||||||
|
|
|
@ -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);
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
|
@ -14,7 +14,6 @@
|
||||||
// Elements
|
// Elements
|
||||||
|
|
||||||
@import "win/elements/itemBox";
|
@import "win/elements/itemBox";
|
||||||
@import "win/elements/editableText";
|
|
||||||
|
|
||||||
// Components
|
// Components
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue