From 533f23b0e7598d6fa556f6b8300f1df7b010c337 Mon Sep 17 00:00:00 2001 From: Derek Zeng Date: Fri, 3 Nov 2017 11:52:50 -0400 Subject: [PATCH] Added label text --- README.md | 14 ++++++++++++++ d2l-typography-shared-styles.html | 6 ++++++ d2l-typography.html | 8 ++++++++ d2l-typography.scss | 13 +++++++++++++ demo/index.html | 6 ++++++ screenshots/label.png | Bin 0 -> 1250 bytes 6 files changed, 47 insertions(+) create mode 100644 screenshots/label.png 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 0000000000000000000000000000000000000000..28b17473d2a3da1424e2caf0ec9dc079019d76b8 GIT binary patch literal 1250 zcmV<81ReW{P)Px#1ZP1_K>z@;j|==^1poj532;bRa{vGi!vFvd!vV){sAK>D1b0b9K~#8N?U~VQ zB1sU&@2|Xv7?8<>d01f?IE1hg+~r6J3CAIe>>>%qz#>SNJwy;Bhaf%#Q6w^uFdPx0 zpu%DhMHqzds(ZS1jALRh7r{(_FyNG3-BtbT?kUG#pyVkj;2x6#?lCFg9+Lv@F)834 zlLGEBDc~NH0`4&>;2zV2g+kNkB%_CMJeD?3iy&*7PvJ;r(vLKG|(9dn?qKAh=FB)?oqq?-O#=f zvbqh_D+X?RqLI|t!hn3OvHiJY)^O8yv>CN<P4-Kg%iTGK826_2MEpx?CBU17KN0k^HuBOC{8~njLE; z6Tfet+Q``3d3@TMe#gg&*X%k#_IYCPrd)EqCgX_QcVqanGtDz_Qp0V2&k;WxxA5ZA z=hcB*P5_ks(){ZRw8M3ZGAwL6;FASc5MsiA+q@+I5+Rzd-^BSxnmE4(-}WIgW*3823DIrVe+0R%?KY={z$y0kaa=T5 zKL%2)Z?b(Vuw6Jr@xbmk#m1qX+N}IQ?pmzI=K$Y$hohW{PQQgBpC5|fADZNp+GTAt z9A9y#|EyOAE+-^_xg<@JNxEN819wi&{|5ZQc%8o;$L>}L`{~;BxPK{dhu@k2H<9E= z=^=`JVd9c@0{)ZTy8|B-4|$UMchfF(oR=(mRt>zJMd(30t8E~6b_iWO%YC%_d+ZDE z0k?1&W6wMd(Xyjll0Nzm@v_DpI9gfg%)XnQ?iwauk=q|v4ZK&_<2Fs!5KfI7Nb!?P z)e(;8QKy2md6nk5 zPImZ+Y877HQ$dy~p;|~|U;g4)f8g_%3~umG9?{=KqICJTBS==9fiD718sDRO7J)YT zSwyfu#!-~@*b0D$|Cs))WU;4Y6+Wf~`PcL)w_{7A?s$9+uG0v~@97yIrA41%h2Gi% ze~#Eo2bY&F%Zk0A;4fHKq?tv+Vt2eOnbYX;*sT5|zAMyffv=gKJQdbZ3iu;x7TLdm z2^8;y;SERu_m~uLk4XXdm=ti2Ndfnm6mXA80r!{`aF0m=_mqHt0g