changing alerts to alert-success, matching color

This commit is contained in:
davegandy 2013-10-19 15:39:26 -04:00
parent 579c8efe4e
commit 0d6aae1199
11 changed files with 27 additions and 20 deletions

View File

@ -2,8 +2,15 @@
<h2 class="page-header">Animated Spinner</h2>
<div class="row">
<div class="col-md-3 col-sm-4">
<p>
Use the <code>fa-icon-spin</code> class to get any icon to rotate. Works well with <code>fa-icon-spinner</code>,
<code>fa-icon-refresh</code>, and <code>fa-icon-cog</code>.
</p>
<p>
<button class="btn btn-default btn-lg"><i class="fa-icon fa-icon-spinner fa-icon-spin"></i></button>
<button class="btn btn-default btn-lg"><i class="fa-icon fa-icon-refresh fa-icon-spin"></i></button>
<button class="btn btn-default btn-lg"><i class="fa-icon fa-icon-cog fa-icon-spin"></i></button>
</p>
</div>
<div class="col-md-9 col-sm-8">
<div class="well well-large well-transparent lead">
@ -12,7 +19,7 @@
{% highlight html %}
<i class="fa-icon fa-icon-spinner fa-icon-spin fa-icon-lg"></i> Spinner icon when loading content...
{% endhighlight %}
<p class="alert alert-info">
<p class="alert alert-success">
<i class="fa-icon fa-icon-info-circle"></i> CSS3 animations aren't supported in IE8 - IE9.
</p>
</div>

View File

@ -3,8 +3,8 @@
<div class="row">
<div class="col-md-3 col-sm-4">
<div class="btn-group open">
<a class="btn btn-primary" href="#"><i class="fa-icon fa-icon-user"></i> User</a>
<a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#">
<a class="btn btn-success" href="#"><i class="fa-icon fa-icon-user"></i> User</a>
<a class="btn btn-success dropdown-toggle" data-toggle="dropdown" href="#">
<span class="fa-icon fa-icon-caret-down"></span></a>
<ul class="dropdown-menu">
<li><a href="#"><i class="fa-icon fa-icon-pencil fa-icon-fixed-width"></i> Edit</a></li>
@ -18,8 +18,8 @@
<div class="col-md-9 col-sm-8">
{% highlight html %}
<div class="btn-group open">
<a class="btn btn-primary" href="#"><i class="fa-icon fa-icon-user"></i> User</a>
<a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#">
<a class="btn btn-success" href="#"><i class="fa-icon fa-icon-user"></i> User</a>
<a class="btn btn-success dropdown-toggle" data-toggle="dropdown" href="#">
<span class="fa-icon fa-icon-caret-down"></span></a>
<ul class="dropdown-menu">
<li><a href="#"><i class="fa-icon fa-icon-pencil fa-icon-fixed-width"></i> Edit</a></li>
@ -30,7 +30,7 @@
</ul>
</div>
{% endhighlight %}
<div class="alert alert-info"><i class="fa-icon fa-icon-info-circle"></i> Don't forget to add the appropriate JavaScript to enable button dropdowns.</div>
<div class="alert alert-success"><i class="fa-icon fa-icon-info-circle"></i> Don't forget to add the appropriate JavaScript to enable button dropdowns.</div>
</div>
</div>
</section>

View File

@ -13,7 +13,7 @@
{% highlight html %}
<i class="fa-icon fa-icon-camera-retro"></i> icon-camera-retro
{% endhighlight %}
<div class="alert alert-info"><i class="fa-icon fa-icon-info-circle"></i> Icon classes are echoed via CSS :before.</div>
<div class="alert alert-success"><i class="fa-icon fa-icon-info-circle"></i> Icon classes are echoed via CSS :before.</div>
</div>
</div>
</section>

View File

@ -26,7 +26,7 @@
<p><i class="fa-icon fa-icon-camera-retro fa-icon-3x"></i> fa-icon-camera-retro</p>
<p><i class="fa-icon fa-icon-camera-retro fa-icon-4x"></i> fa-icon-camera-retro</p>
{% endhighlight %}
<div class="alert alert-info">
<div class="alert alert-success">
<i class="fa-icon fa-icon-info-circle"></i> If your icons are getting chopped off on top and bottom, make sure you have
sufficient line-height.
</div>

View File

@ -23,7 +23,7 @@
<li><i class="fa-icon-li fa-icon fa-icon-check"></i>&hellip;and many more with custom CSS</li>
</ul>
{% endhighlight %}
<div class="alert alert-info"><i class="fa-icon fa-icon-info-circle"></i> Make sure to NOT include any whitespace after the icon declaration.</div>
<div class="alert alert-success"><i class="fa-icon fa-icon-info-circle"></i> Make sure to NOT include any whitespace after the icon declaration.</div>
</div>
</div>
</section>

View File

@ -21,7 +21,7 @@
<i class="fa-icon fa-icon-shield fa-icon-flip-horizontal"></i>&nbsp; fa-icon-flip-horizontal<br>
<i class="fa-icon fa-icon-shield fa-icon-flip-vertical"></i>&nbsp; icon-flip-vertical
{% endhighlight %}
<p class="alert alert-info">
<p class="alert alert-success">
<i class="fa-icon fa-icon-info-circle"></i> Rotating and flipping icons aren't yet supported in IE7.
</p>
</div>

View File

@ -1,7 +1,7 @@
<section id="brand">
<h2 class="page-header">Brand Icons</h2>
<div class="alert alert-info">
<div class="alert alert-success">
{% include brand-license.html %}
</div>

View File

@ -1,6 +1,6 @@
<section id="new-naming">
<h2 class="page-header">New Naming Conventions in {{ site.fontawesome.minor_version }}</h2>
<p class="lead text-center alert alert-info">fa-icon-[name]-[shape]-[alt]-[direction]</p>
<p class="lead text-center alert alert-success">fa-icon-[name]-[shape]-[alt]-[direction]</p>
<p>
A desire for better icon naming <strong>consistency</strong> and <strong>predictability</strong> are at the heart
of the changes in naming conventions. Once you know the name of the base icon shape, you should be able to predict

View File

@ -57,7 +57,7 @@
// Brand colors
//@brand-primary: @blue-dark;
@brand-success: lighten(@fa-green, 5%);
@brand-success: mix(@fa-green, #fff, 70%);
//@brand-warning: @yellow-dark;
//@brand-danger: @red;
//@brand-info: @blue;
@ -112,9 +112,9 @@
//@state-danger-bg: @red-lighter;
//@state-danger-border: darken(spin(@state-danger-bg, -10), 4%);
//
//@state-success-text: mix(@green-darker, @green-dark, 30%);
//@state-success-bg: @green-lighter;
//@state-success-border: darken(spin(@state-success-bg, -10), 13%);
@state-success-text: @fa-green;
@state-success-bg: mix(@fa-green, #fff, 6%);
@state-success-border: darken(spin(@state-success-bg, -10), 13%);
@state-info-text: mix(@blue-dark, @blue, 50%);
@state-info-bg: @blue-lighter;

View File

@ -93,7 +93,7 @@ $ gem install font-awesome-sass
{% highlight scss %}
@fa-font-path: "../font";
{% endhighlight %}
<p class="alert alert-info"><i class="fa-icon fa-icon-info-circle"></i> The font path is relative from your compiled CSS directory.</p>
<p class="alert alert-success"><i class="fa-icon fa-icon-info-circle"></i> The font path is relative from your compiled CSS directory.</p>
</li>
<li>Re-compile your LESS or SCSS if using a static compiler. Otherwise, you should be good to go.</li>
<li>Check out the <a href="{{ page.relative_path }}examples/">examples</a> to start using Font Awesome!</li>

View File

@ -20,7 +20,7 @@ relative_path: ../
{% include stripe-ad.html %}
<section>
<div class="alert alert-info">
<div class="alert alert-success">
<ul class="fa-icon-ul margin-bottom-none">
<li>
<i class="fa-icon-li fa-icon fa-icon-info-circle fa-icon-lg"></i>Attribution is no longer required as of Font Awesome 3.0 but is much appreciated: