diff options
author | Rasmus Andersson <rasmus@notion.se> | 2018-09-10 20:21:55 +0300 |
---|---|---|
committer | Rasmus Andersson <rasmus@notion.se> | 2018-10-11 09:37:35 +0300 |
commit | 045c98c1c7441fb0f2c4e6dfe866fe5e3f78defe (patch) | |
tree | fbb9310e5863473a29aa0c2576a66f382ed8a31b /docs/lab/lab.css | |
parent | 69d824fc5bf9ba28f664f6d20fe0da91b82bd1a5 (diff) | |
download | inter-045c98c1c7441fb0f2c4e6dfe866fe5e3f78defe.tar.xz |
website
Diffstat (limited to 'docs/lab/lab.css')
-rw-r--r-- | docs/lab/lab.css | 56 |
1 files changed, 51 insertions, 5 deletions
diff --git a/docs/lab/lab.css b/docs/lab/lab.css index a439ee415..b744490c7 100644 --- a/docs/lab/lab.css +++ b/docs/lab/lab.css @@ -12,9 +12,6 @@ body { .systemFont { font-family: system-ui,-apple-system,"SF Pro Text","SF UI Text",BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif;, serif; } -.italic { - font-style: italic; -} .de-emphasize { color:#555; } @@ -44,7 +41,7 @@ h2 { top:0; right:0; bottom:0; background:#f4f4f4; padding: 24px; - user-select:none; + user-select:none; -moz-user-select: none; font-family: sans-serif !important; overflow: auto; letter-spacing:0.01em; @@ -73,7 +70,7 @@ h2 { width:90px; } .options .label-and-value input { - width:50px; + width: 50px; } .options .label-and-value select { min-width:50px; @@ -89,9 +86,49 @@ h2 { .options label.rasterizePhrase input { width:100%; } + .options label.style { + display: flex; + align-items: center; + justify-content: space-between; + } + .options input[type="checkbox"] + * { + user-select: none; -moz-user-select: none; + } + .options .varfontControl { + display: none; + } + body.varfont .options .varfontControl { + display: block; + } + .options .varfontControl .label-and-value { + display: flex; + } + .options .varfontControl .label-and-value > span { + padding-left: 10px; + width: 80px; + flex: 0 0 auto; + } + .options .varfontControl input[type="range"] { + flex: 1 1 auto; + } + .options .varfontControl input[type="number"] { + flex: 0 1 auto; + width: 35px; + border: none; + padding: 0; + margin-left: 4px; + } + body.varfont .options select[name="weight"] { + pointer-events: none; + opacity: 0.4; + } input[type="number"] { width:50px; + background: none; + border: 1px solid rgba(0,0,0,0.2); + padding: 4px; + border-radius: 2px; } label { @@ -119,6 +156,15 @@ samples { padding: 24px 0; width:100%; } +body.italic samples { + font-style: italic; +} +body.varfont.italic samples { + /* [BUG] (Safari 11.1) font-style:italic and ital axis is not + mutually exclusive, meaning we have to set either or. */ + font-style: normal; + font-variation-settings: 'ital' 100; +} sample { margin: 0; /*white-space: pre;*/ |