making borders more subtle, making examples appear better on mobile

This commit is contained in:
davegandy 2013-10-23 10:19:49 -04:00
parent 2407f0ae2d
commit bc01f2f8c6
8 changed files with 19 additions and 15 deletions

View file

@ -2,9 +2,6 @@
<h2 class="page-header">Bootstrap 3 Examples</h2>
<div class="row">
<div class="col-md-3 col-sm-4">
<p>
Font Awesome works great with the full range of Bootstrap components.
</p>
<p>
<a class="btn btn-danger" href="#">
<i class="fa fa-trash-o fa-lg"></i> Delete</a>
@ -50,6 +47,9 @@
</div>
<div class="col-md-9 col-sm-8">
<p>
Font Awesome works great with the full range of Bootstrap components.
</p>
{% highlight html %}
<a class="btn btn-danger" href="#">
<i class="fa fa-trash-o fa-lg"></i> Delete</a>

View file

@ -2,7 +2,7 @@
<h2 class="page-header">Fixed Width Icons</h2>
<div class="row">
<div class="col-md-3 col-sm-4">
<ul class="nav nav-pills nav-stacked">
<ul class="nav nav-pills nav-stacked margin-bottom">
<li class="active"><a href="#"><i class="fa fa-home fa-fw"></i>&nbsp; Home</a></li>
<li><a href="#"><i class="fa fa-book fa-fw"></i>&nbsp; Library</a></li>
<li><a href="#"><i class="fa fa-pencil fa-fw"></i>&nbsp; Applications</a></li>

View file

@ -2,7 +2,9 @@
<h2 class="page-header">Inline Icons</h2>
<div class="row">
<div class="col-md-3 col-sm-4">
<i class="fa fa-camera-retro"></i> fa-camera-retro
<p>
<i class="fa fa-camera-retro"></i> fa-camera-retro
</p>
</div>
<div class="col-md-9 col-sm-8">
<p>Place Font Awesome icons just about anywhere with the <code>&lt;i&gt;</code> tag.</p>

View file

@ -2,14 +2,14 @@
<h2 class="page-header">Rotated &amp; Flipped</h2>
<div class="row">
<div class="col-md-3 col-sm-4">
<div style="font-size: 18px;">
<p style="font-size: 18px;">
<i class="fa fa-shield"></i>&nbsp; normal<br>
<i class="fa fa-shield fa-rotate-90"></i>&nbsp; fa-rotate-90<br>
<i class="fa fa-shield fa-rotate-180"></i>&nbsp; fa-rotate-180<br>
<i class="fa fa-shield fa-rotate-270"></i>&nbsp; fa-rotate-270<br>
<i class="fa fa-shield fa-flip-horizontal"></i>&nbsp; fa-flip-horizontal<br>
<i class="fa fa-shield fa-flip-vertical"></i>&nbsp; fa-flip-vertical
</div>
</p>
</div>
<div class="col-md-9 col-sm-8">
<p>

View file

@ -2,9 +2,11 @@
<h2 class="page-header">Spinning Icons</h2>
<div class="row">
<div class="col-md-3 col-sm-4">
<button class="btn btn-default btn-lg"><i class="fa fa-spinner fa-spin"></i></button>
<button class="btn btn-default btn-lg"><i class="fa fa-refresh fa-spin"></i></button>
<button class="btn btn-default btn-lg"><i class="fa fa-cog fa-spin"></i></button>
<p>
<button class="btn btn-default btn-lg"><i class="fa fa-spinner fa-spin"></i></button>
<button class="btn btn-default btn-lg"><i class="fa fa-refresh fa-spin"></i></button>
<button class="btn btn-default btn-lg"><i class="fa fa-cog fa-spin"></i></button>
</p>
</div>
<div class="col-md-9 col-sm-8">
<p>

View file

@ -2,7 +2,7 @@
<h2 class="page-header">Stacked Icons</h2>
<div class="row">
<div class="col-md-3 col-sm-4">
<div>
<div class="margin-bottom">
<span class="fa-stack fa-lg">
<i class="fa fa-square-o fa-stack-2x"></i>
<i class="fa fa-twitter fa-stack-1x"></i>

View file

@ -102,7 +102,7 @@
// Form states and alerts
@state-success-text: @fa-green;
@state-success-bg: mix(@fa-green, #fff, 6%);
@state-success-border: darken(spin(@state-success-bg, -10), 13%);
@state-success-border: darken(spin(@state-success-bg, -10), 5%);
@state-info-text: mix(@blue-dark, @blue, 50%);
@state-info-bg: @blue-lighter;
@ -117,4 +117,4 @@
// Code
@pre-border-color: #e5e5e5;
@pre-border-color: #eee;

View file

@ -1,7 +1,7 @@
#carbonads-container {
.carbonad {
background: @table-bg-accent;
border-color: @table-border-color;
background: @pre-bg;
border-color: @pre-border-color;
border-radius: (@border-radius-base);
border-width: 1px;
float: right;