Skip to content

Commit 4c644c7

Browse files
author
Matthew Morek
authored
Merge pull request #116 from wfp/hotfix-v0.12.1
Hotfix v0.12.1
2 parents 9a5838e + 2133acf commit 4c644c7

10 files changed

Lines changed: 58 additions & 32 deletions

File tree

dist/css/bootstrap-theme.css

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

dist/css/wfpui+grid.css

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

dist/css/wfpui.css

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

docs/_config.yml

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ title: "WFP UI Guidelines"
33
email: "me@matthewmorek.com"
44
description: ""
55
url: "https://cdn.wfp.org" # WFP CDN
6-
version: "v0.12.0"
6+
version: "v0.12.1"
77
quiet: true
88

99
exclude: ["*.sublime-*", "*.sh", "*.yml", "*.DS_*"]

docs/component-2-navigation.md

Lines changed: 37 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -164,27 +164,52 @@ This pattern is useful for when you need to display a set of controls with an in
164164
### Breadcrumbs
165165
_Breadcrumbs_ are a special kind of _segmented control_ component; a simple and minimal way to give users a hint at your site or application's structure. They also provide an important context in relation to user's current location within your content. Breadcrumbs should be displayed just below the header, possibly on their own, with appropriate spacing to stay visible.
166166

167-
<!-- <div class="notice">
168-
<h6 class="title">Note</h6>
169-
<p>You can use a inversed breadcrumbs, by replacing class <code>breadcrumbs</code> with <code>breadcrumbs-inverse</code>. Inversed breadcrumbs should only ever be used against dark, or unpredictable backgrounds, such as splash screens, etc.</p>
170-
</div> -->
167+
<div class="notice">
168+
<p>You can use a dark variant of breadcrumbs, by replacing class <code>wfp-breadcrumbs</code> with <code>wfp-breadcrumbs--dark</code>. Dark breadcrumbs should only ever be used against unpredictable backgrounds, such as splash screens, etc.</p>
169+
</div>
171170

172171
###### Preview
173172
<div class="preview plain">
174-
<ul class="wfp-breadcrumbs">
175-
<li class="breadcrumbs--item"><a href="#home" class="breadcrumbs--link home"><span class="icon-home-dark" alt="Home icon"></span><span>Home</span></a></li>
173+
<nav class="wfp-breadcrumbs">
174+
<ol class="breadcrumbs--wrapper">
175+
<li class="breadcrumbs--item"><a href="#home" class="breadcrumbs--link home"><span class="icon-home-dark xsmall"></span><span>Home</span></a></li>
176+
<li class="breadcrumbs--item"><a href="#email" class="breadcrumbs--link">Careers</a></li>
177+
<li class="breadcrumbs--item"><span class="breadcrumbs--last">Internships</span></li>
178+
</ol>
179+
</nav>
180+
</div>
181+
182+
###### Markup
183+
{% highlight html %}
184+
<nav class="wfp-breadcrumbs">
185+
<ol class="breadcrumbs--wrapper">
186+
<li class="breadcrumbs--item"><a href="#home" class="breadcrumbs--link home"><span class="icon-home-dark xsmall"></span><span>Home</span></a></li>
176187
<li class="breadcrumbs--item"><a href="#email" class="breadcrumbs--link">Careers</a></li>
177188
<li class="breadcrumbs--item"><span class="breadcrumbs--last">Internships</span></li>
178-
</ul>
189+
</ol>
190+
</nav>
191+
{% endhighlight %}
192+
193+
###### Preview
194+
<div class="preview plain">
195+
<nav class="wfp-breadcrumbs--dark">
196+
<ol class="breadcrumbs--wrapper">
197+
<li class="breadcrumbs--item"><a href="#home" class="breadcrumbs--link home"><span class="icon-home-light xsmall"></span><span>Home</span></a></li>
198+
<li class="breadcrumbs--item"><a href="#email" class="breadcrumbs--link">Careers</a></li>
199+
<li class="breadcrumbs--item"><span class="breadcrumbs--last">Internships</span></li>
200+
</ol>
201+
</nav>
179202
</div>
180203

181204
###### Markup
182205
{% highlight html %}
183-
<ul class="wfp-breadcrumbs">
184-
<li class="breadcrumbs--item"><a href="#" class="breadcrumbs--link home"><span class="icon-home-dark"></span><span>Home</span></a></li>
185-
<li class="breadcrumbs--item"><a href="#" class="breadcrumbs--link">Careers</a></li>
186-
<li class="breadcrumbs--item"><span class="breadcrumbs--last">Internships</span></li>
187-
</ul>
206+
<nav class="wfp-breadcrumbs--dark">
207+
<ol class="breadcrumbs--wrapper">
208+
<li class="breadcrumbs--item"><a href="#home" class="breadcrumbs--link home"><span class="icon-home-light xsmall"></span><span>Home</span></a></li>
209+
<li class="breadcrumbs--item"><a href="#email" class="breadcrumbs--link">Careers</a></li>
210+
<li class="breadcrumbs--item"><span class="breadcrumbs--last">Internships</span></li>
211+
</ol>
212+
</nav>
188213
{% endhighlight %}
189214

190215
<div class="notice">

scss/bootstrap-theme.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
/*!
2-
* WFP UI Bootstrap Theme, v0.12.0
2+
* WFP UI Bootstrap Theme, v0.12.1
33
* Copyright 2016 WFP/MADBIT Co.
44
* License: https://github.com/wfp/ui/blob/master/LICENSE
55
*/

scss/components/navigation/_breadcrumbs.scss

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,8 @@
55
.wfp-breadcrumbs {
66
display: inline-block;
77
height: auto;
8-
margin: 0.25rem 0;
9-
padding: 0.25rem 0;
8+
margin: 0;
9+
padding: 0;
1010
font-size: 0.875rem;
1111
font-weight: bold;
1212
line-height: 1.75;
@@ -49,6 +49,7 @@
4949
// @include icon-size(xsmall);
5050
vertical-align: text-bottom;
5151
margin-right: 0.25rem;
52+
margin-bottom: 0;
5253
}
5354

5455
&:hover {
@@ -61,7 +62,7 @@
6162

6263
.wfp-breadcrumbs--dark {
6364
@extend .wfp-breadcrumbs;
64-
background-color: transparentize($black, 0.25);
65+
background-color: transparentize($black, 0.35);
6566
border-radius: 4px;
6667
color: $white;
6768

scss/css/_typography.scss

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -56,18 +56,18 @@
5656
// Vertical Align
5757
// ----------------------------------------------------------------------------
5858
// Inline alignment
59-
.v-base { @include v-align("baseline"); }
60-
.v-base { @include v-align("sub"); }
61-
.v-base { @include v-align("super"); }
62-
.v-base { @include v-align("text-top"); }
63-
.v-base { @include v-align("text-bottom"); }
59+
.va-base { @include v-align("baseline"); }
60+
.va-sub { @include v-align("sub"); }
61+
.va-sup { @include v-align("super"); }
62+
.va-texttop { @include v-align("text-top"); }
63+
.va-textbottom { @include v-align("text-bottom"); }
6464

6565
// ----------------------------------------------------------------------------
6666
// Table alignment
6767
// ----------------------------------------------------------------------------
68-
.v-base { @include v-align("middle"); }
69-
.v-base { @include v-align("top"); }
70-
.v-base { @include v-align("bottom"); }
68+
.va-mid { @include v-align("middle"); }
69+
.va-top { @include v-align("top"); }
70+
.va-bottom { @include v-align("bottom"); }
7171

7272
// ----------------------------------------------------------------------------
7373
// Weight

scss/wfpui+grid.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
/*!
2-
* WFP UI with grids, v0.12.0
2+
* WFP UI with grids, v0.12.1
33
* Copyright 2016 WFP/MADBIT Co.
44
* License: https://github.com/wfp/ui/blob/master/LICENSE
55
*/

scss/wfpui.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
/*!
2-
* WFP UI sans grids, v0.12.0
2+
* WFP UI sans grids, v0.12.1
33
* Copyright 2016 WFP/MADBIT Co.
44
* License: https://github.com/wfp/ui/blob/master/LICENSE
55
*/

0 commit comments

Comments
 (0)