mirror of
https://github.com/RGBCube/serenity
synced 2025-07-27 01:07:36 +00:00
LibWeb: Add basic input range rendering
This commit is contained in:
parent
d28c400fcb
commit
0f37e0ee89
7 changed files with 169 additions and 3 deletions
|
@ -26,7 +26,7 @@ label {
|
|||
}
|
||||
|
||||
/* FIXME: This is a temporary hack until we can render a native-looking frame for these. */
|
||||
input:not([type=submit], input[type=button], input[type=reset], input[type=color], input[type=checkbox], input[type=radio]), textarea {
|
||||
input:not([type=submit], input[type=button], input[type=reset], input[type=color], input[type=checkbox], input[type=radio], input[type=range]), textarea {
|
||||
border: 1px solid ButtonBorder;
|
||||
min-height: 16px;
|
||||
width: attr(size ch, 20ch);
|
||||
|
@ -70,6 +70,30 @@ option {
|
|||
display: none;
|
||||
}
|
||||
|
||||
/* Custom <input type="range"> styles */
|
||||
input[type=range] {
|
||||
display: inline-block;
|
||||
width: 20ch;
|
||||
height: 16px;
|
||||
}
|
||||
input[type=range]::-webkit-slider-runnable-track, input[type=range]::-webkit-slider-thumb {
|
||||
display: block;
|
||||
}
|
||||
input[type=range]::-webkit-slider-runnable-track {
|
||||
height: 4px;
|
||||
margin-top: 6px;
|
||||
background-color: hsl(217, 71%, 53%);
|
||||
border: 1px solid rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
input[type=range]::-webkit-slider-thumb {
|
||||
margin-top: -6px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border-radius: 50%;
|
||||
background-color: hsl(0, 0%, 96%);
|
||||
outline: 1px solid rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
/* Custom <meter> styles */
|
||||
meter {
|
||||
display: inline-block;
|
||||
|
|
|
@ -390,6 +390,10 @@ StringView Selector::PseudoElement::name(Selector::PseudoElement::Type pseudo_el
|
|||
return "placeholder"sv;
|
||||
case Selector::PseudoElement::Type::Selection:
|
||||
return "selection"sv;
|
||||
case Selector::PseudoElement::Type::SliderRunnableTrack:
|
||||
return "-webkit-slider-runnable-track"sv;
|
||||
case Selector::PseudoElement::Type::SliderThumb:
|
||||
return "-webkit-slider-thumb"sv;
|
||||
case Selector::PseudoElement::Type::KnownPseudoElementCount:
|
||||
break;
|
||||
case Selector::PseudoElement::Type::UnknownWebKit:
|
||||
|
@ -426,6 +430,10 @@ Optional<Selector::PseudoElement> Selector::PseudoElement::from_string(FlyString
|
|||
return Selector::PseudoElement { Selector::PseudoElement::Type::Placeholder };
|
||||
} else if (name.equals_ignoring_ascii_case("selection"sv)) {
|
||||
return Selector::PseudoElement { Selector::PseudoElement::Type::Selection };
|
||||
} else if (name.equals_ignoring_ascii_case("-webkit-slider-runnable-track"sv)) {
|
||||
return Selector::PseudoElement { Selector::PseudoElement::Type::SliderRunnableTrack };
|
||||
} else if (name.equals_ignoring_ascii_case("-webkit-slider-thumb"sv)) {
|
||||
return Selector::PseudoElement { Selector::PseudoElement::Type::SliderThumb };
|
||||
}
|
||||
return {};
|
||||
}
|
||||
|
|
|
@ -37,6 +37,8 @@ public:
|
|||
ProgressBar,
|
||||
Placeholder,
|
||||
Selection,
|
||||
SliderRunnableTrack,
|
||||
SliderThumb,
|
||||
|
||||
// Keep this last.
|
||||
KnownPseudoElementCount,
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue