diff --git a/README.md b/README.md index 5cb6cf0..1460ba6 100644 --- a/README.md +++ b/README.md @@ -37,6 +37,13 @@ Never used by itself; always in support of another piece of content on the page. ![screenshot of small text](/screenshots/small.png?raw=true) +### Label Text + +Used for labels. Its font size/line spacing is relative to the root font +and respond to viewport width changes. + +![screenshot of small text](/screenshots/label.png?raw=true) + ### Headings There are four available heading styles. These would typically be applied to the `

`, `

`, `

` and `

` HTML elements, though it's not a requirement. @@ -76,6 +83,10 @@ Mixins are also available for standard body, compact body, small body and headin @include d2l-body-small(); } +.label { + @include d2l-label-text(); +} + h1 { @include d2l-heading-1(); } @@ -123,6 +134,9 @@ Additional CSS classes are available for standard body, compact body, small body
...
+ + +
... diff --git a/d2l-typography-shared-styles.html b/d2l-typography-shared-styles.html index 7dfb323..6a81c0d 100644 --- a/d2l-typography-shared-styles.html +++ b/d2l-typography-shared-styles.html @@ -52,6 +52,12 @@ margin: 1.5rem 0 1.5rem 0; }; + --d2l-label-text: { + font-size: 0.8rem; + line-height: 1rem; + font-weight: 700; + letter-spacing: 0.2px; + }; } diff --git a/d2l-typography.html b/d2l-typography.html index b03e4de..d05b533 100644 --- a/d2l-typography.html +++ b/d2l-typography.html @@ -30,6 +30,10 @@ @apply --d2l-body-small-text; } + .d2l-typography .d2l-label-text { + @apply --d2l-label-text; + } + .d2l-typography p, .vui-typography p { margin: 1rem 0; @@ -130,6 +134,10 @@ font-size: 0.6rem; line-height: 0.9rem; } + .d2l-typography .d2l-label-text { + font-size: 0.7rem; + line-height: 0.9rem; + } } diff --git a/d2l-typography.scss b/d2l-typography.scss index a3fffde..4da133c 100644 --- a/d2l-typography.scss +++ b/d2l-typography.scss @@ -160,3 +160,16 @@ line-height: 1.2rem; } } + +@mixin d2l-label-text() { + font-size: 0.8rem; + line-height: 1rem; + font-weight: 700; + letter-spacing: 0.2px; + @media (max-width: 615px) { + font-size: 0.7rem; + line-height: 0.9rem; + font-weight: 700; + letter-spacing: 0.2px; + } +} diff --git a/demo/index.html b/demo/index.html index 8cb5753..f729532 100644 --- a/demo/index.html +++ b/demo/index.html @@ -65,6 +65,12 @@

Heading 4

Grumpy wizards make toxic brew for the evil Queen and Jack. Grumpy wizards make toxic brew for the evil Queen and Jack.

+ + Label Text + + + + diff --git a/screenshots/label.png b/screenshots/label.png new file mode 100644 index 0000000..28b1747 Binary files /dev/null and b/screenshots/label.png differ