diff options
author | Rasmus Andersson <rasmus@figma.com> | 2019-05-28 00:19:08 +0300 |
---|---|---|
committer | Rasmus Andersson <rasmus@figma.com> | 2019-05-28 00:19:08 +0300 |
commit | 727977bd4ec0b493bf5589bc94fe8bc8f58d9b31 (patch) | |
tree | 4e8b8961682a42d73dbfdca6dda5939ceb6f4e75 /docs/lab/lab.css | |
parent | e32aae98d3f9a383e243e52b32e1e0cd6852542c (diff) | |
download | inter-727977bd4ec0b493bf5589bc94fe8bc8f58d9b31.tar.xz |
website: some UI updates to the lab
Diffstat (limited to 'docs/lab/lab.css')
-rw-r--r-- | docs/lab/lab.css | 117 |
1 files changed, 106 insertions, 11 deletions
diff --git a/docs/lab/lab.css b/docs/lab/lab.css index 887869d0a..69d775295 100644 --- a/docs/lab/lab.css +++ b/docs/lab/lab.css @@ -1,3 +1,19 @@ +:root { + --fieldHeight: 24px; + + /* P3 wide gamut colors */ + --red: color(display-p3 0.94 0.19 0.04); + --yellow: color(display-p3 1 0.87 0.05); + --blue: rgb(3, 102, 214); +} +@supports not (color: color(display-p3 1 1 1)) { + /* sRGB colors */ + :root { + --red: #F03009; + --yellow: #FFE310; + } +} + * { margin:0; padding:0; font-synthesis: none; } html { } body { @@ -39,6 +55,41 @@ i, cite, em, var, address, dfn { font-style: oblique; } +label { + display: block; + margin: 2px 0; +} + +input[type="number"] { + width:50px; + background: none; + /*border: 1px solid rgba(0,0,0,0.2);*/ + border: none; + padding: 4px; + border-radius: 2px; + background: white; +} + +select { + height: var(--fieldHeight); + box-sizing: border-box; + -webkit-appearance: none; + border: none; + padding: 4px 18px 4px 4px; + border-radius: 2px; + background: white; + background-image: url(../res/icons/popup-black.svg); + background-repeat: no-repeat; + background-position: right center; +} + +input[type="number"]:focus, +input[type="text"]:focus, +select:focus { + outline: none; + box-shadow: 0 0 0 2px black; +} + .options { width: 275px; box-sizing:border-box; @@ -59,6 +110,11 @@ i, cite, em, var, address, dfn { .options small { opacity: 0.6; } + .options h3 { + font-weight: 600; + font-size: 12px; + margin: 1rem 0 0.5rem 0; + } .options input[type="radio"], .options input[type="checkbox"] { margin-right:4px; } @@ -66,6 +122,8 @@ i, cite, em, var, address, dfn { display: flex; flex-wrap: nowrap; justify-content: flex-start; + align-items: center; + height: var(--fieldHeight); } .options .label-and-value span { /*flex: 1 1 auto;*/ @@ -76,8 +134,10 @@ i, cite, em, var, address, dfn { } .options .label-and-value input { width: 50px; + max-height: var(--fieldHeight); + box-sizing: border-box; } - .options .label-and-value select { + .options select { min-width:50px; max-width:130px; } @@ -127,18 +187,45 @@ i, cite, em, var, address, dfn { pointer-events: none; opacity: 0.4; } + .options .label-and-value input + note, + .options .label-and-value select + note { + display: flex; + align-items: center; + height: var(--fieldHeight); + line-height: var(--fieldHeight); + margin-left: 0.5em; + user-select: none; -webkit-user-select: none; + color: rgba(0,0,0,0.4); + } + .options .label-and-value input + note .unit, + .options .label-and-value select + note .unit { + flex: 0 0 auto; + display:flex; + width: 18px; + } -input[type="number"] { - width:50px; - background: none; - border: 1px solid rgba(0,0,0,0.2); - padding: 4px; - border-radius: 2px; -} -label { - display: block; - margin: 2px 0; +.img-button { + display: inline-block; + width: var(--fieldHeight); + height:var(--fieldHeight); + background-size: 16px 16px; + background-position: center center; + background-repeat: no-repeat; + border-radius: 3px; + opacity: 0.8; + outline: none; +} +.img-button:hover { + opacity: 1; + background-color: rgba(0,0,0,0.1); +} +.img-button:hover:active { + opacity: 1; + background-color: rgba(0,0,0,0.2); +} +.img-button:focus { + box-shadow: 0 0 0 2px black; } .checkbox-group label { @@ -172,6 +259,7 @@ body.italic samples { white-space: pre-wrap; outline: none; overflow-wrap: break-word; + color:black; } sample p { white-space: pre-wrap; @@ -221,6 +309,13 @@ body.italic samples { display:none; } +body.inverted-colors { + background: #020202; +} +body.inverted-colors sample { + color: white; +} + body.secondarySampleDisabled .showOnlyWithSecondarySample { display: none; } |