Magic-Mirror/gecko-dev
1
0
Fork 0
mirror of https://github.com/mozilla/gecko-dev.git synced 2024-10-25 11:15:34 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Bug 1462385 - Add notches to Weight slider in Font Editor. r=pbro

Browse Source 
MozReview-Commit-ID: 5A3zmsQFaLS

--HG--
extra : rebase_source : 65d1a03e22834560c31cbfc55f1665dbc58679d2
This commit is contained in:
Razvan Caliman 2018-05-16 20:15:05 +02:00
parent cbdca910d6
commit 31465023e6
2 changed files with 17 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
devtools/client/inspector/fonts/components/FontPropertyValue.js
View File

@ -56,6 +56,7 @@ class FontPropertyValue extends PureComponent {
{
...defaults,
className: "font-value-slider",
name: this.props.name,
title: this.props.label,
type: "range",
}

16
devtools/client/themes/fonts.css
View File

@ -160,6 +160,22 @@
min-width: 50px;
}
/*
The value of font-weight goes from 100 to 900 in increments of 100.
Decorate the slider for font-weight to have 9 vertical notches using a linear gradient.
*/
.font-value-slider[name=font-weight] {
--notch-size: 2px;
/* Draw a vertical line to get one notch per background-image instance */
background-image: linear-gradient(90deg, var(--grey-30) var(--notch-size), transparent 0);
/* Offset the background so the notch aligns with the center of the slider thumb */
background-position: 7px center;
/* Repeat the background-image horizontally */
background-repeat: repeat-x;
/* Size the background to get nine visible notch instances. */
background-size: calc(12.5% - var(--notch-size)) 90%;
}
.font-value-slider:-moz-focusring {
outline: none;
}