Added fixed width to examples page

This commit is contained in:
Andrew Gioia 2015-03-21 20:04:41 -04:00
parent 633777a103
commit 7745fff4b3
7 changed files with 37 additions and 3 deletions

View File

@ -18,11 +18,11 @@
"*.json", "*.json",
"*.md" "*.md"
], ],
"_release": "cb8a2fa161", "_release": "f899d84794",
"_resolution": { "_resolution": {
"type": "branch", "type": "branch",
"branch": "master", "branch": "master",
"commit": "cb8a2fa16152cc833f8cc2d71f617dd96ac3eac1" "commit": "f899d84794bc720b1fb5cec5ecd0c96ad988beb5"
}, },
"_source": "git://github.com/andrewgioia/keyrune.git", "_source": "git://github.com/andrewgioia/keyrune.git",
"_target": "*", "_target": "*",

View File

@ -52,6 +52,12 @@
.ss-mythic { .ss-mythic {
color: #A2472A; color: #A2472A;
} }
/**
* Fixed width */
.ss-fw {
width: 1.28571429em;
text-align: center;
}
/** /**
* Core */ * Core */
.ss-lea:before { .ss-lea:before {

File diff suppressed because one or more lines are too long

View File

@ -3,4 +3,5 @@
@import "core.less"; @import "core.less";
@import "sizes.less"; @import "sizes.less";
@import "rarities.less"; @import "rarities.less";
@import "width.less";
@import "icons.less"; @import "icons.less";

View File

@ -0,0 +1,7 @@
/**
* Fixed width */
.@{prefix}-fw {
width: (18em / 14);
text-align: center;
}

View File

@ -254,6 +254,7 @@ blockquote {
.example .each { .example .each {
display: block; display: block;
padding-bottom: 2px;
} }
.explanation { .explanation {

View File

@ -77,6 +77,25 @@
</div> </div>
<div class="clear"></div> <div class="clear"></div>
</section> </section>
<section class="content">
<h4>Fixed Width</h4>
<div class="example float-left">
<div style="padding-bottom: 5px;">Fixed width:</div>
<span class="each"><i class="ss ss-inv ss-fw"></i> Invasion</span>
<span class="each"><i class="ss ss-nms ss-fw"></i> Nemesis</span>
<div style="padding: 15px 0 5px;">Default (to compare):</div>
<span class="each"><i class="ss ss-inv"></i> Invasion</span>
<span class="each"><i class="ss ss-nms"></i> Nemesis</span>
</div>
<div class="explanation">
<p>All of the set symbols are variable width by default, if you put them in a list they may stack irregularly. To fix their width just append the class <code>.ss-fw</code> and the set symbols will have a constant width and centered icon.</p>
<blockquote>
&lt;<span class="e">i</span> <span class="a">class</span>=<span class="v">"ss ss-inv ss-fw"</span>&gt;&lt;/<span class="a">i</span>&gt; Invasion<br />
&lt;<span class="e">i</span> <span class="a">class</span>=<span class="v">"ss ss-nms ss-fw"</span>&gt;&lt;/<span class="a">i</span>&gt; Nemesis
</blockquote>
</div>
<div class="clear"></div>
</section>
<section class="content"> <section class="content">
<h4>Rarity Colors</h4> <h4>Rarity Colors</h4>
<div class="example float-left"> <div class="example float-left">