From 2d4de17183f164fc124bb701be6018f5ba97397e Mon Sep 17 00:00:00 2001 From: Matthew Morek Date: Sun, 7 Aug 2016 11:59:41 +0100 Subject: [PATCH 01/14] Remove redundant SCSS code Signed-off-by: Matthew Morek --- scss/components/navigation/_menu.scss | 5 ----- 1 file changed, 5 deletions(-) diff --git a/scss/components/navigation/_menu.scss b/scss/components/navigation/_menu.scss index 5cb5a8bd7..75d2a559a 100644 --- a/scss/components/navigation/_menu.scss +++ b/scss/components/navigation/_menu.scss @@ -138,23 +138,18 @@ .wfp-menu-plain { @include menu; - // @include padding(0 1rem); @include margin(1rem 0); .menu--heading, .menu--link { @include padding(0); - // @include height(1rem); } .menu--heading { - // @include fs(6); @include pv(1); - // @include mb(0); } .menu--link { - // @include fs(6); display: inline-block; color: darken($primary, 12%); From bef43db0374e7bb6044f00704ec452d2a38d0c81 Mon Sep 17 00:00:00 2001 From: jrah Date: Mon, 8 Aug 2016 14:27:12 +0100 Subject: [PATCH 02/14] Update breadcrumbs This is a preview commit for @matthewmorek - `breadcrumbs--last` applied to `li` and containing span class has no class - Primitive `&-dark` theme - Add SVG used in Go implemention to replace existing icon via relevant class/`background-image` Ref #87 --- docs/example.html | 36 +++++- scss/components/navigation/_breadcrumbs.scss | 115 +++++++++---------- 2 files changed, 83 insertions(+), 68 deletions(-) diff --git a/docs/example.html b/docs/example.html index abed51c68..076e49c70 100644 --- a/docs/example.html +++ b/docs/example.html @@ -5,8 +5,8 @@ WFP UI Testing Grounds - - + @@ -270,13 +270,37 @@

.wfp-seg-control

-

.wfp-breadcrumbs

+

.wfp-breadcrumbs-light

+
+ +

.wfp-breadcrumbs-dark

+ +
+
diff --git a/scss/components/navigation/_breadcrumbs.scss b/scss/components/navigation/_breadcrumbs.scss index 9bdfd7f88..35872e825 100644 --- a/scss/components/navigation/_breadcrumbs.scss +++ b/scss/components/navigation/_breadcrumbs.scss @@ -1,106 +1,97 @@ // Component: Breadcrumbs // Project: WFPUI -// Author: Matthew Morek (me@matthewmorek.com) +// Author: Matthew Morek (me@matthewmorek.com) / nuvole // URL: http://matthewmorek.com .wfp-breadcrumbs { @include seg-control; + height: auto; + margin: .25em 0; + text-align: left; .breadcrumbs--item { @include seg-control--item; - display: block; - float: left; - margin: -1px 0 0 -1px; - border-left: 1px solid darken($grey-lighter, 10%); - background-color: $white; - white-space: nowrap; - - border-color: darken($grey-lighter, 10%); - - &:first-child { - border-color: darken($grey-lighter, 10%); + display: inline-block; + border: 0; + margin: 0; + + &::after { + content: "\203A"; + color: $grey; + font-size: 1.125em; + margin-left: .5em; + display: inline-block; } - &:only-child { - border-radius: 2px; + &:first-child { + border-left: 0; } } .breadcrumbs--link { @include seg-control--link; - @include pv(1); - @include ph(2); - @include lh-scale(1.083); + padding: 0; font-weight: normal; + display: inline-block; color: darken($primary, 12%); - white-space: nowrap; &.home { - padding-left: 0.25em; - [class*="icon-"] { - margin: 0 0.25em; + margin: 0; + } + + svg { + path { + fill: $blue-dark; + } } - } - &:visited { - color: $blue-darkest; + &:hover { + background-color: inherit; + color: $primary; + border: 0; + } + + &::after { + margin-left: .25em; + } } &:hover { background-color: inherit; color: $primary; + border: 1px solid $blue; } } - .breadcrumbs--last { +.breadcrumbs--item.last { + + &::after { + content: ""; + } + + span { @include seg-control--link; - @include pv(1); - @include ph(2); - @include lh-scale(1.083); + display: inline-block; + padding: 0 0.4em 0 0; font-weight: normal; - color: $grey-darker; + color: $grey-dark; cursor: default; &:hover { - background-color: initial; - color: initial; + background-color: inherit; + color: inherit; } } } -// Specificity Wars II™: The Dark Side of the Breadcrumb -.wfp-breadcrumbs-inverse { - @include seg-control; + &-dark { + @extend .wfp-breadcrumbs; + background-color: transparentize($black, 0.5); + border-radius: 4px; - .breadcrumbs--item { - @include seg-control--item; - border-color: $grey; - background-color: $grey-dark; - color: $grey-contrast; - - &:first-child { - border-color: $grey; - } - } - - .breadcrumbs--link { - @include seg-control--link; - color: $grey-contrast; - - &:hover, - &:active { - color: darken($primary, 12%); - } - } - - .breadcrumbs--last { - @include seg-control--link; - color: $grey-lighter; - cursor: default; - - &:hover { - color: $grey-lighter; + .breadcrumbs--last { + color: $white; } } } From 0e30f3249a84447996555c7a34ef9b1df06e562e Mon Sep 17 00:00:00 2001 From: Matthew Morek Date: Mon, 8 Aug 2016 17:34:31 +0100 Subject: [PATCH 03/14] Update colour variables Adding a bit of transparency goes hand in hand with accessibility, especially against differently coloured backgrounds. --- scss/_init.scss | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/scss/_init.scss b/scss/_init.scss index dbbfd51a1..1780979dc 100644 --- a/scss/_init.scss +++ b/scss/_init.scss @@ -12,14 +12,9 @@ $small-font-size: $base-font-size * 0.875; // 14px $spacing-unit: 0.25rem; -$text-color: #404040 !default; -$background-color: #ffffff !default; - $primary: #2a93fc; $accent: #1f6ebc; -$black: #000000; - // Greys gradation $grey: #8c8c8c; $grey-darkest: darken($grey, 42%); @@ -40,12 +35,16 @@ $blue-lightest: lighten($blue, 30%); $grey-contrast: #eaeaea; +$black: #000000; $white: #ffffff; $red: #ff5252; $orange: #ffc759; $yellow: #fcdc5d; $green: #00a878; +$text-color: transparentize($grey-darkest, 0.1) !default; +$background-color: transparentize($white, 0.1) !default; + // Width of the content area $content-width: 1000px !default; $max-content-width: 1200px !default; From 5b50d15988c5777f31143c4532227658c037fee0 Mon Sep 17 00:00:00 2001 From: Matthew Morek Date: Mon, 8 Aug 2016 17:36:48 +0100 Subject: [PATCH 04/14] Update breadcrumbs markup in `example.html` --- docs/example.html | 34 ++++++++++++++++++++-------------- 1 file changed, 20 insertions(+), 14 deletions(-) diff --git a/docs/example.html b/docs/example.html index 076e49c70..72ce8b43d 100644 --- a/docs/example.html +++ b/docs/example.html @@ -273,35 +273,41 @@

.wfp-seg-control

.wfp-breadcrumbs-light

- + +

.wfp-breadcrumbs-dark

- + +

.wfp-pagination

From 2617fd616dce1a0fc9414b270bcedaca2e948f6f Mon Sep 17 00:00:00 2001 From: Matthew Morek Date: Mon, 8 Aug 2016 17:37:04 +0100 Subject: [PATCH 05/14] Rewrite SCSS for `breadcrumbs` component --- scss/components/navigation/_breadcrumbs.scss | 99 ++++++++------------ 1 file changed, 40 insertions(+), 59 deletions(-) diff --git a/scss/components/navigation/_breadcrumbs.scss b/scss/components/navigation/_breadcrumbs.scss index 35872e825..02f55102d 100644 --- a/scss/components/navigation/_breadcrumbs.scss +++ b/scss/components/navigation/_breadcrumbs.scss @@ -1,97 +1,78 @@ +// --------------------------------------------------------------------------- // Component: Breadcrumbs -// Project: WFPUI -// Author: Matthew Morek (me@matthewmorek.com) / nuvole -// URL: http://matthewmorek.com +// --------------------------------------------------------------------------- .wfp-breadcrumbs { - @include seg-control; + display: inline-block; height: auto; - margin: .25em 0; - text-align: left; + margin: 0.25rem 0; + padding: 0.25rem 0; + font-size: 0.875rem; + font-weight: bold; + line-height: 1.75; + + .breadcrumbs--wrapper { + @include nolist; + } .breadcrumbs--item { - @include seg-control--item; display: inline-block; border: 0; margin: 0; + line-height: 1.25; &::after { content: "\203A"; - color: $grey; - font-size: 1.125em; - margin-left: .5em; + color: transparentize($grey, 0.1); + font-size: 1.125rem; + margin-left: 0.25rem; + margin-right: 0.25rem; display: inline-block; } - &:first-child { - border-left: 0; + &:last-child { + &::after { + content: ""; + margin: 0; + } } } .breadcrumbs--link { - @include seg-control--link; padding: 0; - font-weight: normal; display: inline-block; color: darken($primary, 12%); + border: 0; - &.home { - [class*="icon-"] { - margin: 0; - } - - svg { - path { - fill: $blue-dark; - } - } - - &:hover { - background-color: inherit; - color: $primary; - border: 0; - } - - &::after { - margin-left: .25em; - } + [class^="icon-"] { + // Uncomment post-merge to `develop` + // @include icon-size(xsmall); + vertical-align: text-bottom; + margin-right: 0.25rem; } &:hover { background-color: inherit; color: $primary; - border: 1px solid $blue; + border-bottom: 1px solid $orange; } } -.breadcrumbs--item.last { - - &::after { - content: ""; - } - - span { - @include seg-control--link; - display: inline-block; - padding: 0 0.4em 0 0; - font-weight: normal; - color: $grey-dark; - cursor: default; + &.dark { + background-color: transparentize($black, 0.25); + border-radius: 4px; + color: $white; - &:hover { - background-color: inherit; - color: inherit; + .breadcrumbs--wrapper { + padding: 0.25rem 0.5rem; } - } -} - &-dark { - @extend .wfp-breadcrumbs; - background-color: transparentize($black, 0.5); - border-radius: 4px; + .breadcrumbs--link { + color: transparentize(lighten($primary, 0.25), 0.1); - .breadcrumbs--last { - color: $white; + &:hover { + color: transparentize(lighten($primary, 0.4), 0.1); + } } } } From 1a51d37e60900a20f5160c5af6c4bafe729915e4 Mon Sep 17 00:00:00 2001 From: Matthew Morek Date: Mon, 8 Aug 2016 18:07:29 +0100 Subject: [PATCH 06/14] =?UTF-8?q?Properly=20name=20`breadcrumbs=E2=80=94da?= =?UTF-8?q?rk`?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/example.html | 2 +- scss/components/navigation/_breadcrumbs.scss | 25 ++++++++++---------- 2 files changed, 14 insertions(+), 13 deletions(-) diff --git a/docs/example.html b/docs/example.html index 72ce8b43d..24fb15d67 100644 --- a/docs/example.html +++ b/docs/example.html @@ -293,7 +293,7 @@

.wfp-breadcrumbs-light

.wfp-breadcrumbs-dark

-