diff options
author | Rasmus Andersson <rasmus@notion.se> | 2018-10-08 04:32:03 +0300 |
---|---|---|
committer | Rasmus Andersson <rasmus@notion.se> | 2018-10-11 09:38:33 +0300 |
commit | a0df8aa6d40ab7b1e96dafd93a197c6859580454 (patch) | |
tree | 0d1ca583a4ea9cbb2112a114b66698e3a3ed9358 /docs/index-var.css | |
parent | f6050df80182f7bfc55e5f2df7c715969a1cb67d (diff) | |
download | inter-a0df8aa6d40ab7b1e96dafd93a197c6859580454.tar.xz |
website: big update with samples and vf stuff
Diffstat (limited to 'docs/index-var.css')
-rw-r--r-- | docs/index-var.css | 108 |
1 files changed, 108 insertions, 0 deletions
diff --git a/docs/index-var.css b/docs/index-var.css new file mode 100644 index 000000000..97d69fa72 --- /dev/null +++ b/docs/index-var.css @@ -0,0 +1,108 @@ +.variable-sample { + --var-size: 128px; + --var-weight: 600; + --var-slant: 0; + --var-letterSpacing: -0.03em; + --var-lineHeight: 1.1; + text-align: center; +} +@supports (font-variation-settings: normal) { + .variable-sample { + font-family: 'Inter UI var', sans-serif; + } +} + +.variable { + padding-bottom: 0; +} + +.variable label { + user-select: none; +} + +.variable .unsupported-message { + opacity: 0.3; + border: 2px solid #999; + border-radius:4px; + text-align: center; + padding: 1em 1em; + display: none; + margin: 1em auto; + width: 60%; +} +.variable .unsupported-message.active { + display: block; +} + .variable .unsupported-message p { + margin: 0.5em 0; + } + +.variable .ctrl { + display: flex; + flex-direction: column; + justify-content: space-between; + align-items: stretch; + /*border: 1px solid #ddd; border-radius:4px;*/ + /*border-top: 1px solid #ddd;*/ + border-bottom: 1px solid #ddd; + color: #333; + padding:20px 20px 20px 20px; +} + +.variable .unsupported-message.active + .ctrl { + border-top: none; +} + + .variable .ctrl .ctrlrow { + flex: 1 0 auto; + display: flex; + justify-content: flex-start; + align-items: center; + padding:5px; + } + .variable .ctrl input { + margin: 0 8px 0 0; + } + .variable .ctrl input[type="range"] { + margin-left: 8px; + flex: 0 0 auto; + width: 150px; + } + .variable .ctrl label { + display: flex; + flex: 0 1 auto; + align-items: center; + margin-right: 20px; + /*background:lightpink;*/ + } + .variable .ctrl label.disabled { + color: rgba(0,0,0,0.3); + } + .variable .ctrl label.tight { + flex: 0 1 auto; + } + .variable .ctrl label:last-child { + margin-right: 0; + } + .variable .ctrl label .label { + min-width: 65px; + } + .variable .ctrl label .label.var { + font-weight: 500; + } + +.variable-sample-row { + padding-top:0; +} +.variable-sample-row.black .variable-sample { + color: white; +} +.variable-sample { + color: #030508; + padding-top: 40px; + max-width: 100%; + font-size: var(--var-size); + letter-spacing: var(--var-letterSpacing); + line-height: var(--var-lineHeight); + font-variation-settings: 'wght' var(--var-weight), 'slnt' var(--var-slant); +} |