From 695102a2bc284e5411f115f489ff657cb65f5e3f Mon Sep 17 00:00:00 2001 From: Al Power Date: Tue, 2 Oct 2018 17:14:13 +0100 Subject: [PATCH 1/2] adding some basic styles for DL lists --- examples/app.tsx | 83 +++++++++++++++++++++++++++++++++++++++++ src/less/text.less | 75 +++++++++++++++++++++++++++++++++++++ src/less/variables.less | 3 ++ 3 files changed, 161 insertions(+) diff --git a/examples/app.tsx b/examples/app.tsx index c028fdf52..12779c4a1 100644 --- a/examples/app.tsx +++ b/examples/app.tsx @@ -1,6 +1,7 @@ import * as React from 'react'; import { PureComponent } from 'react'; import { + Alert, AppRoot, Button, Column, @@ -161,6 +162,88 @@ class App extends PureComponent<{}, AppState> { + + +

Definition List Styles

+ + +

<dl className="list">

+
+
Felines
+
Tabby
+
+ I'm a really really long label that probably will wrap +
+
+ +
+
+ +
+
Dogs
+
Lhasa Apso
+
Dalmation
+
Labrador
+
+ + +

<dl className="stacked">

+
+
Felines
+
Tabby
+
+ I'm a really really long label that probably will wrap +
+
+ +
+
+ +
+
Dogs
+
Lhasa Apso
+
Dalmation
+
Labrador
+
+ + +

<dl className="inline">

+
+
Felines
+
Tabby
+
Ginger
+
Persian
+
+ I'm a really really long label that probably will wrap +
+
+ +
+
+ +
+
Dogs
+
Lhasa Apso
+
Dalmation
+
Labrador
+
+ +

+ note: to use the inline style, you have + to add a last class to the final dd element + before a dt. +

+

+ DL lists are notoriously hard to style, so this is the + best you can do really, so only use for lists with limited + things in. +

+ + + + + +

Can't touch these

diff --git a/src/less/text.less b/src/less/text.less index 442d83f21..ec31613de 100644 --- a/src/less/text.less +++ b/src/less/text.less @@ -104,3 +104,78 @@ .error { color: @error; } + + +dl.list { + padding: @padding-base; + + dt { + float: left; + clear: left; + width: @dl-label-width; + text-align: right; + font-weight: @font-weight-bold; + color: @dl-label-color; + } + + dt::after { + content: ':'; + } + + dd { + margin: 0 0 0 @dl-label-width + @padding-base; + padding: 0 0 @margin-base 0; + } +} + +dl.stacked { + padding: @padding-base; + + dt { + font-weight: @font-weight-bold; + color: @dl-label-color; + margin-top: @padding-base; + margin-bottom: @padding-small; + + &:first-of-type { + margin-top: 0; + } + } + + + dd { + margin: 0; + padding: 0; + } +} + +dl.inline { + padding: @padding-base; + + dt, + dd { + display: inline; + padding: 0; + margin: 0; + } + + dt { + font-weight: @font-weight-bold; + color: @dl-label-color; + } + + dt::after { + content: ':'; + margin-right: @margin-base; + } + + dd::after { + content: ', '; + } + + dd.last:after { + content: '\A'; + white-space: pre; + } + +} diff --git a/src/less/variables.less b/src/less/variables.less index eb0134412..b7d681c9f 100644 --- a/src/less/variables.less +++ b/src/less/variables.less @@ -162,6 +162,9 @@ @label-width: 100px; @no-label-offset: @label-width + @margin-base; +@dl-label-width: @label-width; +@dl-label-color: @grey-medium; + @textarea-width: @input-width; @textarea-height: @input-height * 2; From c171ab48aad6cf9256db5e435b1d7b420dbc7e53 Mon Sep 17 00:00:00 2001 From: Al Power Date: Tue, 16 Oct 2018 12:09:29 +0100 Subject: [PATCH 2/2] definition list improvements Removed last class and switched to separate lists for the inline style. Added example for Styleguidist. --- examples/app.tsx | 19 +++--- src/less/definition-list.examples.md | 86 ++++++++++++++++++++++++++++ src/less/text.less | 18 +++--- styleguide.config.js | 4 ++ 4 files changed, 109 insertions(+), 18 deletions(-) create mode 100644 src/less/definition-list.examples.md diff --git a/examples/app.tsx b/examples/app.tsx index 12779c4a1..10206d870 100644 --- a/examples/app.tsx +++ b/examples/app.tsx @@ -212,31 +212,30 @@ class App extends PureComponent<{}, AppState> {
Felines
Tabby
Ginger
-
Persian
+
Persian
+ +
I'm a really really long label that probably will wrap
-
+
+
+
Dogs
Lhasa Apso
Dalmation
-
Labrador
+
Labrador
-

- note: to use the inline style, you have - to add a last class to the final dd element - before a dt. -

DL lists are notoriously hard to style, so this is the - best you can do really, so only use for lists with limited - things in. + best you can do really, so assuming you have markup + control, use seperate DL lists for each group of DT/DDs

diff --git a/src/less/definition-list.examples.md b/src/less/definition-list.examples.md new file mode 100644 index 000000000..be7fe6e0e --- /dev/null +++ b/src/less/definition-list.examples.md @@ -0,0 +1,86 @@ +Used to style definition lists. + + +#### Example + +```js + + +

Definition List Styles

+ + +

className="list"

+
+
Felines
+
Tabby
+
+ I'm a really really long label that probably will wrap +
+
+ +
+
+ +
+
Dogs
+
Lhasa Apso
+
Dalmation
+
Labrador
+
+ + +

className="stacked"

+
+
Felines
+
Tabby
+
+ I'm a really really long label that probably will wrap +
+
+ +
+
+ +
+
Dogs
+
Lhasa Apso
+
Dalmation
+
Labrador
+
+ + +

className="inline"

+
+
Felines
+
Tabby
+
Ginger
+
Persian
+
+
+
+ I'm a really really long label that probably will wrap +
+
+ +
+
+ +
+
+
+
Dogs
+
Lhasa Apso
+
Dalmation
+
Labrador
+
+ +

+ DL lists are notoriously hard to style, so this is the + best you can do really, so assuming you have markup + control, use seperate DL lists for each group of DT/DDs +

+ + + + + ``` diff --git a/src/less/text.less b/src/less/text.less index ec31613de..02bf95df4 100644 --- a/src/less/text.less +++ b/src/less/text.less @@ -105,10 +105,16 @@ color: @error; } +dl { + margin: 0; + padding: 0; +} -dl.list { - padding: @padding-base; +dl + dl { +margin-top: @padding-base; +} +dl.list { dt { float: left; clear: left; @@ -129,7 +135,6 @@ dl.list { } dl.stacked { - padding: @padding-base; dt { font-weight: @font-weight-bold; @@ -150,7 +155,6 @@ dl.stacked { } dl.inline { - padding: @padding-base; dt, dd { @@ -173,9 +177,7 @@ dl.inline { content: ', '; } - dd.last:after { - content: '\A'; - white-space: pre; + dd:last-child:after { + content: ''; } - } diff --git a/styleguide.config.js b/styleguide.config.js index e6e6ff23e..5b2d5a444 100644 --- a/styleguide.config.js +++ b/styleguide.config.js @@ -103,6 +103,10 @@ var less = [ name: 'Atomic text align classes', content: 'src/less/text-align.examples.md' }, + { + name: 'Definition Lists', + content: 'src/less/definition-list.examples.md' + }, { name: 'Variables', content: 'src/less/variables.examples.md'