Skip to content

Commit

Permalink
Update label mixin and code mono font family
Browse files Browse the repository at this point in the history
  • Loading branch information
@picturepan2
picturepan2 committed Aug 20, 2017
1 parent f8b430f commit 4fe9dff
Show file tree
Hide file tree
Showing 9 changed files with 27 additions and 38 deletions.
4 changes: 2 additions & 2 deletions docs/css/docs.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -323,7 +323,7 @@
@media screen and (max-width: 880px) {
.s-sidebar {
background: #f8f9fa;
height: 100%;
bottom: 0;
left: 0;
overflow-y: auto;
padding: 3rem 1.5rem;
Expand Down Expand Up @@ -362,7 +362,7 @@
}
.s-brand .menu-btn {
display: block;
left: 1rem;
left: .65rem;
position: fixed;
top: .95rem;
}
Expand Down
16 changes: 3 additions & 13 deletions docs/dist/spectre.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -123,8 +123,8 @@ code,
kbd,
pre,
samp {
font-family: monospace, monospace;
/* 1 */
font-family: "SF Mono", "Segoe UI Mono", "Roboto Mono", Menlo, Courier, monospace;
/* 1 (changed) */
font-size: 1em;
/* 2 */
}
Expand Down Expand Up @@ -477,19 +477,13 @@ kbd {
background: #454d5d;
border-radius: .1rem;
color: #fff;
display: inline-block;
line-height: 1.2;
padding: .1em .3em;
vertical-align: baseline;
}
mark {
background: #ffe9b3;
border-radius: .1rem;
color: #454d5d;
display: inline-block;
line-height: 1.2;
padding: .1em .3em;
vertical-align: baseline;
}
blockquote {
border-left: .1rem solid #e7e9ed;
Expand Down Expand Up @@ -1214,9 +1208,8 @@ input.disabled + .form-icon {
border-radius: .1rem;
color: #50596c;
display: inline-block;
line-height: 1.2;
line-height: 1;
padding: .1em .3em;
vertical-align: baseline;
}
.label.label-primary {
background: #5764c6;
Expand All @@ -1242,10 +1235,7 @@ code {
background: #fdf4f4;
border-radius: .1rem;
color: #e06870;
display: inline-block;
line-height: 1.2;
padding: .1em .3em;
vertical-align: baseline;
}
.code {
border-radius: .1rem;
Expand Down
2 changes: 1 addition & 1 deletion docs/dist/spectre.min.css
View file

Large diffs are not rendered by default.

31 changes: 15 additions & 16 deletions docs/elements.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -557,7 +557,6 @@ <h3 class="s-title"><a href="#buttons" class="anchor" aria-hidden="true">#</a>Bu
<button class="btn loading-inline">default button</button>
<button class="btn btn-primary">primary button</button>
<button class="btn btn-link">link button</button>
<a class="btn btn-test">Button</a>
</div>
</div>

Expand Down Expand Up @@ -994,13 +993,13 @@ <h4 id="forms-sizes" class="s-subtitle">Form sizes</h4>
<p>For smaller or larger input and select controls, you could add the <code>input-sm</code>/<code>input-lg</code>, <code>select-sm</code>/<code>select-lg</code> and <code>label-sm</code>/<code>label-lg</code> classes to the elements.</p>
</div>
<div class="columns">
<div class="column col-4">
<div class="column col-4 col-xs-12">
<label class="form-label label-sm">Label</label>
</div>
<div class="column col-4">
<div class="column col-4 col-xs-12">
<input class="form-input input-sm" type="text" placeholder="Name" />
</div>
<div class="column col-4">
<div class="column col-4 col-xs-12">
<select class="form-select select-sm">
<option>Choose an option</option>
<option>Slack</option>
Expand All @@ -1010,13 +1009,13 @@ <h4 id="forms-sizes" class="s-subtitle">Form sizes</h4>
</div>
</div>
<div class="columns">
<div class="column col-4">
<div class="column col-4 col-xs-12">
<label class="form-label label-lg">Label</label>
</div>
<div class="column col-4">
<div class="column col-4 col-xs-12">
<input class="form-input input-lg" type="text" placeholder="Name" />
</div>
<div class="column col-4">
<div class="column col-4 col-xs-12">
<select class="form-select select-lg">
<option>Choose an option</option>
<option>Slack</option>
Expand All @@ -1032,39 +1031,39 @@ <h4 id="forms-icons" class="s-subtitle">Form icons</h4>
<p>Add a wrapper with the <code>has-icon-left</code>/<code>has-icon-right</code> class to &lt;input&gt; element. And add the icon with <code>form-icon</code> class next to the &lt;input&gt;.</p>
</div>
<div class="columns">
<div class="column col-4">
<div class="column col-4 col-xs-12">
<div class="has-icon-left">
<input class="form-input input-sm" type="text" placeholder="Name" />
<i class="form-icon icon icon-arrow-right"></i>
</div>
</div>
<div class="column col-4">
<div class="column col-4 col-xs-12">
<div class="has-icon-left tooltip" data-tooltip="Lorem ipsum dolor sit amet">
<input class="form-input" type="text" placeholder="Name" />
<i class="form-icon icon icon-arrow-right"></i>
</div>
</div>
<div class="column col-4">
<div class="column col-4 col-xs-12">
<div class="has-icon-left">
<input class="form-input input-lg" type="text" placeholder="Name" />
<i class="form-icon icon icon-arrow-right"></i>
</div>
</div>
</div>
<div class="columns">
<div class="column col-4">
<div class="column col-4 col-xs-12">
<div class="has-icon-right">
<input class="form-input input-sm" type="text" placeholder="Name" />
<i class="form-icon icon icon-check"></i>
</div>
</div>
<div class="column col-4">
<div class="column col-4 col-xs-12">
<div class="has-icon-right">
<input class="form-input" type="text" placeholder="Name" />
<i class="form-icon icon icon-check"></i>
</div>
</div>
<div class="column col-4">
<div class="column col-4 col-xs-12">
<div class="has-icon-right">
<input class="form-input input-lg" type="text" placeholder="Name" />
<i class="form-icon icon icon-check"></i>
Expand All @@ -1085,19 +1084,19 @@ <h4 id="forms-icons" class="s-subtitle">Form icons</h4>
</div>

<div class="columns">
<div class="column col-4">
<div class="column col-4 col-xs-12">
<div class="has-icon-right">
<input class="form-input input-sm" type="text" placeholder="Name" />
<i class="form-icon loading"></i>
</div>
</div>
<div class="column col-4">
<div class="column col-4 col-xs-12">
<div class="has-icon-right">
<input class="form-input" type="text" placeholder="Name" />
<i class="form-icon loading"></i>
</div>
</div>
<div class="column col-4">
<div class="column col-4 col-xs-12">
<div class="has-icon-right">
<input class="form-input input-lg" type="text" placeholder="Name" />
<i class="form-icon loading"></i>
Expand Down
4 changes: 2 additions & 2 deletions docs/src/docs.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -385,7 +385,7 @@
@media screen and (max-width: 880px) {
.s-sidebar {
background: @bg-color;
height: 100%;
bottom: 0;
overflow-y: auto;
padding: 3rem 1.5rem;
position: fixed;
Expand Down Expand Up @@ -428,7 +428,7 @@

.menu-btn {
display: block;
left: 1rem;
left: .65rem;
position: fixed;
top: .95rem;

Expand Down
2 changes: 2 additions & 0 deletions src/labels.less
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,9 @@
// Labels
.label {
display: inline-block;
.label-base();
.label-variant(lighten(@body-font-color, 5%), @bg-color);
line-height: 1;

&.label-primary {
.label-variant(@light-color, @primary-color);
Expand Down
3 changes: 0 additions & 3 deletions src/mixins.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,10 +34,7 @@
// Label base style
.label-base() {
border-radius: @border-radius;
display: inline-block;
line-height: 1.2;
padding: .1em .3em;
vertical-align: baseline;
}

.label-variant(@color: @light-color, @bg-color: @primary-color) {
Expand Down
2 changes: 1 addition & 1 deletion src/normalize.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -141,7 +141,7 @@ code,
kbd,
pre,
samp {
font-family: monospace, monospace; /* 1 */
font-family: @mono-font-family; /* 1 (changed) */
font-size: 1em; /* 2 */
}

Expand Down
1 change: 1 addition & 0 deletions src/variables.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@
// Fonts
// Credit: https://www.smashingmagazine.com/2015/11/using-system-ui-fonts-practical-guide/
@base-font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto;
@mono-font-family: "SF Mono", "Segoe UI Mono", "Roboto Mono", Menlo, Courier, monospace;
@fallback-font-family: "Helvetica Neue", sans-serif;
@cjk-zh-font-family: @base-font-family, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", @fallback-font-family;
@cjk-jp-font-family: @base-font-family, "Hiragino Sans", "Hiragino Kaku Gothic Pro", "Yu Gothic", YuGothic, Meiryo, @fallback-font-family;
Expand Down

0 comments on commit 4fe9dff

Please sign in to comment.