getting responsive layout in place

This commit is contained in:
davegandy 2013-10-06 10:46:50 -04:00
parent 53c8b30ca7
commit 30d83f7517
31 changed files with 113 additions and 110 deletions

View File

@ -1,4 +1,4 @@
<ul class="margin-bottom-none">
<ul class="margin-bottom-none padding-left-lg">
<li>All brand icons are trademarks of their respective owners.</li>
<li>The use of these trademarks does not indicate endorsement of the trademark holder by Font Awesome, nor vice versa.</li>
</ul>

View File

@ -1,11 +1,11 @@
<section id="animated-spinner">
<h2 class="page-header">Animated Spinner</h2>
<div class="row">
<div class="col-md-3">
<div class="col-md-3 col-sm-4">
Use the <code>fa-spin</code> class to get any icon to rotate. Works well with <code>fa-spinner</code>,
<code>fa-refresh</code>, and <code>fa-cog</code>.
</div>
<div class="col-md-9">
<div class="col-md-9 col-sm-8">
<div class="well well-large well-transparent lead">
<i class="fa fa-spinner fa-spin fa-lg"></i> Spinner icon when loading content...
</div>

View File

@ -1,13 +1,13 @@
<section id="bordered-pulled">
<h2 class="page-header">Bordered & Pulled Icons</h2>
<div class="row">
<div class="col-md-3">
<div class="col-md-3 col-sm-4">
<p>
Use <code>fa-border</code> and <code>pull-right</code> or <code>pull-left</code> for easy pull quotes or
article graphics.
</p>
</div>
<div class="col-md-9">
<div class="col-md-9 col-sm-8">
<div class="well well-large well-transparent">
<i class="fa fa-quote-left fa-4x pull-left fa-muted"></i>
Use a few of the new styles together, and you've got easy pull quotes or a great introductory article image.

View File

@ -1,7 +1,7 @@
<section id="button-dropdowns">
<h2 class="page-header">Button Dropdowns</h2>
<div class="row">
<div class="col-md-3">
<div class="col-md-3 col-sm-4">
<div class="btn-group open">
<a class="btn btn-primary" href="#"><i class="fa fa-user"></i> User</a>
<a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#">
@ -15,7 +15,7 @@
</ul>
</div>
</div>
<div class="col-md-9">
<div class="col-md-9 col-sm-8">
{% highlight html %}
<div class="btn-group open">
<a class="btn btn-primary" href="#"><i class="fa fa-user"></i> User</a>

View File

@ -1,7 +1,7 @@
<section id="button-groups">
<h2 class="page-header">Button Groups</h2>
<div class="row">
<div class="col-md-3">
<div class="col-md-3 col-sm-4">
<p>
<div class="btn-group">
<a class="btn btn-default" href="#"><i class="fa fa-align-left"></i></a>
@ -11,7 +11,7 @@
</div>
</p>
</div>
<div class="col-md-9">
<div class="col-md-9 col-sm-8">
{% highlight html %}
<div class="btn-group">
<a class="btn btn-default" href="#"><i class="fa fa-align-left"></i></a>

View File

@ -1,7 +1,7 @@
<section id="buttons">
<h2 class="page-header">Buttons</h2>
<div class="row">
<div class="col-md-3">
<div class="col-md-3 col-sm-4">
<p>
<a class="btn btn-default" href="#">
<i class="fa fa-repeat"></i> Reload</a>
@ -29,7 +29,7 @@
<i class="fa fa-refresh fa-spin"></i> Synchronizing Content...</a>
</p>
</div>
<div class="col-md-9">
<div class="col-md-9 col-sm-8">
<p>
Font Awesome icons work great in buttons. You can even combine them with larger icon styles,
<code>pull-right</code> and <code>pull-left</code>, and <code>fa-spin</code>.

View File

@ -1,10 +1,10 @@
<section id="custom">
<h2 class="page-header">Custom CSS</h2>
<div class="row">
<div class="col-md-3">
<div class="col-md-3 col-sm-4">
<p>Anything you can do with CSS font styles, you can do with Font Awesome.</p>
</div>
<div class="col-md-9">
<div class="col-md-9 col-sm-8">
<p>Star Ratings (inspired by <a href="http://css-tricks.com/star-ratings/" target="_blank">CSS Tricks</a>)</p>
<div class="well">
<span class="rating">

View File

@ -1,7 +1,7 @@
<section id="form-inputs">
<h2 class="page-header">Prepended & Appended Form Inputs</h2>
<div class="row">
<div class="col-md-3">
<div class="col-md-3 col-sm-4">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-envelope"></i></span>
<input class="form-control" type="text" placeholder="Email address">
@ -12,7 +12,7 @@
<input class="form-control" type="password" placeholder="Password">
</div>
</div>
<div class="col-md-9">
<div class="col-md-9 col-sm-8">
{% highlight html %}
<form>
<div class="input-prepend">

View File

@ -1,10 +1,10 @@
<section id="inline-icons">
<h2 class="page-header">Inline Icons</h2>
<div class="row">
<div class="col-md-3">
<div class="col-md-3 col-sm-4">
<p>Place Font Awesome icons just about anywhere with the <code>&lt;i&gt;</code> tag.</p>
</div>
<div class="col-md-9">
<div class="col-md-9 col-sm-8">
<div class="well well-transparent">
<div style="font-size: 24px; line-height: 1.5em;">
<i class="fa fa-camera-retro"></i> icon-camera-retro

View File

@ -1,13 +1,13 @@
<section id="larger-icons">
<h2 class="page-header">Larger Icons</h2>
<div class="row">
<div class="col-md-3">
<div class="col-md-3 col-sm-4">
<p>
To increase the size of icons relative to its container, use <code>fa-lg</code>, <code>fa-2x</code>,
<code>fa-3x</code>, or <code>fa-4x</code>.
</p>
</div>
<div class="col-md-9">
<div class="col-md-9 col-sm-8">
<p>
Increase the icon size by using the <code>fa-lg</code> (33% increase), <code>fa-2x</code>,
<code>fa-3x</code>, or <code>fa-4x</code> classes.

View File

@ -1,7 +1,7 @@
<section id="list-bullets">
<h2 class="page-header">List Bullets</h2>
<div class="row">
<div class="col-md-3">
<div class="col-md-3 col-sm-4">
<ul class="fa-ul">
<li><i class="fa-li fa fa-ok"></i>List bullets (like these)</li>
<li><i class="fa-li fa fa-ok"></i>Buttons</li>
@ -11,7 +11,7 @@
<li><i class="fa-li fa fa-ok"></i>&hellip;and many more with custom CSS</li>
</ul>
</div>
<div class="col-md-9">
<div class="col-md-9 col-sm-8">
<p>Easily replace individual list bullets.</p>
{% highlight html %}
<ul class="fa-ul">

View File

@ -1,7 +1,7 @@
<section id="navigation">
<h2 class="page-header">Navigation</h2>
<div class="row">
<div class="col-md-3">
<div class="col-md-3 col-sm-4">
<ul class="nav nav-pills nav-stacked">
<li class="active"><a href="#"><i class="fa fa-home fa-fixed-width"></i> Home</a></li>
<li><a href="#"><i class="fa fa-book fa-fixed-width"></i> Library</a></li>
@ -9,7 +9,7 @@
<li><a href="#"><i class="fa fa-cogs fa-fixed-width"></i> Settings</a></li>
</ul>
</div>
<div class="col-md-9">
<div class="col-md-9 col-sm-8">
<p>Use Font Awesome icons in navigation to provide helpful visual cues.</p>
{% highlight html %}
<ul class="nav nav-pills nav-stacked">

View File

@ -1,7 +1,7 @@
<{% if page.navbar_active == "examples" %}div{% else %}section{% endif %} id="new-styles">
<h2 class="page-header">New Styles in {{ site.fontawesome.minor_version }}</h2>
<div class="row">
<div class="col-md-4">
<div class="col-md-4 col-sm-6">
<h4><a href="#rotated-flipped">Rotated and Flipped Icons</a></h4>
<div class="well well-transparent">
<i class="fa fa-shield"></i>&nbsp; normal<br>
@ -12,10 +12,10 @@
<i class="fa fa-shield fa-flip-vertical"></i>&nbsp; fa-flip-vertical
</div>
</div>
<div class="col-md-4">
<div class="col-md-4 col-sm-6">
<h4><a href="#stacked">Stacked Icons</a></h4>
<div class="well well-transparent">
<div class="margin-top margin-bottom">
<div class="margin-top-sm margin-bottom-sm">
<span class="fa-stack">
<i class="fa fa-unchecked fa-stack-base"></i>
<i class="fa fa-twitter"></i>
@ -30,11 +30,16 @@
<i class="fa fa-sign-blank fa-stack-base"></i>
<i class="fa fa-terminal fa-light"></i>
</span>
fa-terminal on fa-sign-blank
</div>
fa-terminal on fa-sign-blank<br>
<span class="fa-stack">
<i class="fa fa-camera"></i>
<i class="fa fa-ban-circle fa-stack-base text-danger"></i>
</span>
fa-camera on fa-ban-circle
</div>
</div>
</div>
<div class="col-md-4">
<div class="col-md-4 col-sm-6 col-sm-offset-3">
<h4><a href="#bulleted-lists">Better Bulleted Lists</a></h4>
<div class="well well-transparent">
<ul class="fa-ul">

View File

@ -1,10 +1,10 @@
<section id="rotated-flipped">
<h2 class="page-header">Rotated &amp; Flipped</h2>
<div class="row">
<div class="col-md-3">
<div class="col-md-3 col-sm-4">
A set of classes that can be used to arbitrarily rotate and flip icons.
</div>
<div class="col-md-9">
<div class="col-md-9 col-sm-8">
<div class="well well-large well-transparent lead">
<i class="fa fa-shield"></i>&nbsp; normal<br>
<i class="fa fa-shield fa-rotate-90"></i>&nbsp; fa-rotate-90<br>

View File

@ -1,11 +1,11 @@
<section id="stacked">
<h2 class="page-header">Stacked Icons</h2>
<div class="row">
<div class="col-md-3">
<div class="col-md-3 col-sm-4">
A method for easily stacking multiple icons. Use the <code>fa-stack</code> class on the parent and
<code>fa-stack-base</code> for the bottom icon.
</div>
<div class="col-md-9">
<div class="col-md-9 col-sm-8">
<div class="well well-large well-transparent lead">
<span class="fa-stack">
<i class="fa fa-check-empty fa-stack-base"></i>

View File

@ -9,7 +9,7 @@
{% assign icons_brand = icons | expand_aliases | category:"Brand Icons" | sort_by:'class' %}
{% for icon in icons_brand %}
<div class="col-md-3"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}"></i> {{ site.fontawesome.css_prefix }}-{{ icon.class }}{% if icon.alias_of %} <span class="muted">(alias)</span>{% endif %}</a></div>
<div class="col-md-3 col-sm-4"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}"></i> {{ site.fontawesome.css_prefix }}-{{ icon.class }}{% if icon.alias_of %} <span class="muted">(alias)</span>{% endif %}</a></div>
{% endfor %}
</div>
</section>

View File

@ -5,7 +5,7 @@
{% assign icons_currency = icons | expand_aliases | category:"Currency Icons" | sort_by:'class' %}
{% for icon in icons_currency %}
<div class="col-md-3"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}"></i> {{ site.fontawesome.css_prefix }}-{{ icon.class }}{% if icon.alias_of %} <span class="muted">(alias)</span>{% endif %}</a></div>
<div class="col-md-3 col-sm-4"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}"></i> {{ site.fontawesome.css_prefix }}-{{ icon.class }}{% if icon.alias_of %} <span class="muted">(alias)</span>{% endif %}</a></div>
{% endfor %}
</div>

View File

@ -5,7 +5,7 @@
{% assign icons_directional = icons | expand_aliases | category:"Directional Icons" | sort_by:'class' %}
{% for icon in icons_directional %}
<div class="col-md-3"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}"></i> {{ site.fontawesome.css_prefix }}-{{ icon.class }}{% if icon.alias_of %} <span class="muted">(alias)</span>{% endif %}</a></div>
<div class="col-md-3 col-sm-4"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}"></i> {{ site.fontawesome.css_prefix }}-{{ icon.class }}{% if icon.alias_of %} <span class="muted">(alias)</span>{% endif %}</a></div>
{% endfor %}
</div>

View File

@ -5,7 +5,7 @@
{% assign icons_medical = icons | expand_aliases | category:"Medical Icons" | sort_by:'class' %}
{% for icon in icons_medical %}
<div class="col-md-3"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}"></i> {{ site.fontawesome.css_prefix }}-{{ icon.class }}{% if icon.alias_of %} <span class="muted">(alias)</span>{% endif %}</a></div>
<div class="col-md-3 col-sm-4"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}"></i> {{ site.fontawesome.css_prefix }}-{{ icon.class }}{% if icon.alias_of %} <span class="muted">(alias)</span>{% endif %}</a></div>
{% endfor %}
</div>

View File

@ -11,7 +11,7 @@
{% assign icons_new = icons | expand_aliases | version:site.fontawesome.minor_version %}
{% for icon in icons_new %}
<div class="col-md-3"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}"></i> {{ site.fontawesome.css_prefix }}-{{ icon.class }}{% if icon.alias_of %} <span class="muted">(alias)</span>{% endif %}</a></div>
<div class="col-md-3 col-sm-4"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}"></i> {{ site.fontawesome.css_prefix }}-{{ icon.class }}{% if icon.alias_of %} <span class="muted">(alias)</span>{% endif %}</a></div>
{% endfor %}
</div>

View File

@ -5,7 +5,7 @@
{% assign icons_text_editor = icons | expand_aliases | category:"Text Editor Icons" | sort_by:'class' %}
{% for icon in icons_text_editor %}
<div class="col-md-3"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}"></i> {{ site.fontawesome.css_prefix }}-{{ icon.class }}{% if icon.alias_of %} <span class="muted">(alias)</span>{% endif %}</a></div>
<div class="col-md-3 col-sm-4"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}"></i> {{ site.fontawesome.css_prefix }}-{{ icon.class }}{% if icon.alias_of %} <span class="muted">(alias)</span>{% endif %}</a></div>
{% endfor %}
</div>

View File

@ -5,7 +5,7 @@
{% assign icons_video_player = icons | expand_aliases | category:"Video Player Icons" | sort_by:'class' %}
{% for icon in icons_video_player %}
<div class="col-md-3"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}"></i> {{ site.fontawesome.css_prefix }}-{{ icon.class }}{% if icon.alias_of %} <span class="muted">(alias)</span>{% endif %}</a></div>
<div class="col-md-3 col-sm-4"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}"></i> {{ site.fontawesome.css_prefix }}-{{ icon.class }}{% if icon.alias_of %} <span class="muted">(alias)</span>{% endif %}</a></div>
{% endfor %}
</div>

View File

@ -5,7 +5,7 @@
{% assign icons_web_application = icons | expand_aliases | category:"Web Application Icons" | sort_by:'class' %}
{% for icon in icons_web_application %}
<div class="col-md-3"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}"></i> {{ site.fontawesome.css_prefix }}-{{ icon.class }}{% if icon.alias_of %} <span class="muted">(alias)</span>{% endif %}</a></div>
<div class="col-md-3 col-sm-4"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}"></i> {{ site.fontawesome.css_prefix }}-{{ icon.class }}{% if icon.alias_of %} <span class="muted">(alias)</span>{% endif %}</a></div>
{% endfor %}
</div>

View File

@ -1,7 +1,7 @@
<div class="jumbotron jumbotron-carousel hidden-print">
<div class="container">
<div class="row">
<div class="col-md-8 text-center">
<div class="col-md-8 col-sm-8 text-center">
<h1>Font Awesome</h1>
<p>The iconic font designed for Bootstrap</p>
<div class="actions">
@ -19,7 +19,7 @@
Created &amp; Maintained by <a href="http://twitter.com/{{ site.fontawesome.author.twitter }}">Dave Gandy</a>
</div>
</div>
<div class="col-md-4">
<div class="col-md-4 col-sm-4">
<div id="icon-carousel" class="carousel slide">
<!-- Carousel items -->
<div class="carousel-inner">

View File

@ -1,10 +1,6 @@
<section class="hidden-print">
<div class="row stripe-ad">
<div class="col-md-8">
{{ stripe_ad_content }}
</div>
<div class="col-md-4">
{% include ads/carbon-light-horizontal.html %}
</div>
<div class="stripe-ad">
{% include ads/carbon-light-horizontal.html %}
{{ stripe_ad_content }}
</div>
</section>

View File

@ -5,13 +5,13 @@
open source community. If you'd like, here are a couple of ways you can tell me thanks for all my hard work.
</p>
<div class="row">
<div class="col-md-6">
<div class="col-md-6 col-sm-6">
<h3><a href="https://www.gittip.com/davegandy/"><i class="fa fa-gittip"></i> Tip me on Gittip</a></h3>
<p>
Gittip is a great way to let developers know you appreciate their work.
</p>
</div>
<div class="col-md-6">
<div class="col-md-6 col-sm-6">
<h3><a href="http://amzn.com/w/G64X58AY416W" target="_blank">My Amazon Wish List</a></h3>
<p>
Or pick something straight

View File

@ -1,21 +1,21 @@
<section id="thanks-to">
<h2 class="page-header">Thanks To</h2>
<div class="row">
<div class="col-md-4">
<div class="col-md-4 col-sm-4">
<p>
Thanks to <a href="https://twitter.com/robmadole/">@robmadole</a> and
<a href="https://twitter.com/supercodepoet/">@supercodepoet</a> for icon design
review, advice, some Jekyll help, and being all around badass coders.
</p>
</div>
<div class="col-md-4">
<div class="col-md-4 col-sm-4">
<p>
Thanks to <a href="https://twitter.com/grantgordon">@grantgordon</a> and
<a href="https://twitter.com/johnsmclay">@johnsmclay</a> for developing and hosting
<a href="http://icnfnt.com/">icnfnt</a>, the best way to subset Font Awesome.
</p>
</div>
<div class="col-md-4">
<div class="col-md-4 col-sm-4">
<p>
Thanks to <a href="http://maxcdn.com"><i class="fa fa-maxcdn"></i> MaxCDN</a> for providing the excellent
<a href="http://www.bootstrapcdn.com/#tab_fontawesome">BootstrapCDN</a>, the fastest and easiest way to

View File

@ -1,39 +1,39 @@
<div id="why" class="feature-list">
<div class="row">
<div class="col-md-4">
<div class="col-md-4 col-sm-6">
<h4><i class="fa fa-flag"></i> One Font, {{ icons | size }} Icons</h4>
In a single collection, Font Awesome is a pictographic language of web-related actions.
</div>
<div class="col-md-4">
<div class="col-md-4 col-sm-6">
<h4><i class="fa fa-pencil"></i> CSS Control</h4>
Easily style icon color, size, shadow, and anything that's possible with CSS.
</div>
<div class="col-md-4">
<div class="col-md-4 col-sm-6">
<h4><i class="fa fa-fullscreen"></i> Infinite Scalability</h4>
Scalable vector graphics means every icon looks awesome at any size.
</div>
<div class="col-md-4">
<div class="col-md-4 col-sm-6">
<h4><i class="fa fa-microphone"></i> Free, as in Speech</h4>
Font Awesome is completely free for commercial use. Check out the <a href="{{ page.relative_path }}license/">license</a>.
</div>
<div class="col-md-4">
<div class="col-md-4 col-sm-6">
<h4><i class="fa fa-ok"></i> IE7 Support</h4>
Font Awesome supports IE7. If you need it, you have my condolences.
</div>
<div class="col-md-4">
<div class="col-md-4 col-sm-6">
<h4><i class="fa fa-eye-open"></i> Perfect on Retina Displays</h4>
Font Awesome icons are vectors, which mean they're gorgeous on high-resolution displays.
</div>
<div class="col-md-4">
<div class="col-md-4 col-sm-6">
<h4><i class="fa fa-thumbs-up-alt"></i> Made for Bootstrap</h4>
Designed from scratch to be fully compatible with <a href="{{ site.bootstrap.url }}">Bootstrap {{ site.bootstrap.version }}</a>.
</div>
<div class="col-md-4">
<div class="col-md-4 col-sm-6">
<h4><i class="fa fa-desktop"></i> Desktop Friendly</h4>
To use on the desktop or for a complete set of vectors,
check out the <a href="{{ page.relative_path }}cheatsheet/">cheatsheet</a>.
</div>
<div class="col-md-4">
<div class="col-md-4 col-sm-6">
<h4><i class="fa fa-search"></i> Screen Reader Compatible</h4>
Font Awesome won't trip up screen readers, unlike other icon fonts.
</div>

View File

@ -3,5 +3,7 @@
background: @table-bg-accent;
border-color: @table-border-color;
border-radius: (@border-radius-base);
float: right;
margin-left: @buffer-lg;
}
}

View File

@ -1,57 +1,57 @@
@size-none: 0px;
@size-sm: 5px;
@size-md: 10px;
@size-lg: 22px;
@buffer-none: 0px;
@buffer-sm: 5px;
@buffer-md: 10px;
@buffer-lg: 22px;
.padding-none { padding: @size-none !important; }
.padding { padding: @size-md !important; }
.padding-sm { padding: @size-sm !important; }
.padding-lg { padding: @size-lg !important; }
.padding-none { padding: @buffer-none !important; }
.padding { padding: @buffer-md !important; }
.padding-sm { padding: @buffer-sm !important; }
.padding-lg { padding: @buffer-lg !important; }
.padding-top-none { padding-top: @size-none !important; }
.padding-top { padding-top: @size-md !important; }
.padding-top-sm { padding-top: @size-sm !important; }
.padding-top-lg { padding-top: @size-lg !important; }
.padding-top-none { padding-top: @buffer-none !important; }
.padding-top { padding-top: @buffer-md !important; }
.padding-top-sm { padding-top: @buffer-sm !important; }
.padding-top-lg { padding-top: @buffer-lg !important; }
.padding-right-none { padding-right: @size-none !important; }
.padding-right { padding-right: @size-md !important; }
.padding-right-sm { padding-right: @size-sm !important; }
.padding-right-lg { padding-right: @size-lg !important; }
.padding-right-none { padding-right: @buffer-none !important; }
.padding-right { padding-right: @buffer-md !important; }
.padding-right-sm { padding-right: @buffer-sm !important; }
.padding-right-lg { padding-right: @buffer-lg !important; }
.padding-bottom-none { padding-bottom: @size-none !important; }
.padding-bottom { padding-bottom: @size-md !important; }
.padding-bottom-sm { padding-bottom: @size-sm !important; }
.padding-bottom-lg { padding-bottom: @size-lg !important; }
.padding-bottom-none { padding-bottom: @buffer-none !important; }
.padding-bottom { padding-bottom: @buffer-md !important; }
.padding-bottom-sm { padding-bottom: @buffer-sm !important; }
.padding-bottom-lg { padding-bottom: @buffer-lg !important; }
.padding-left-none { padding-left: @size-none !important; }
.padding-left { padding-left: @size-md !important; }
.padding-left-sm { padding-left: @size-sm !important; }
.padding-left-lg { padding-left: @size-lg !important; }
.padding-left-none { padding-left: @buffer-none !important; }
.padding-left { padding-left: @buffer-md !important; }
.padding-left-sm { padding-left: @buffer-sm !important; }
.padding-left-lg { padding-left: @buffer-lg !important; }
.margin-none { margin: @size-none !important; }
.margin { margin: @size-md !important; }
.margin-sm { margin: @size-sm !important; }
.margin-lg { margin: @size-lg !important; }
.margin-none { margin: @buffer-none !important; }
.margin { margin: @buffer-md !important; }
.margin-sm { margin: @buffer-sm !important; }
.margin-lg { margin: @buffer-lg !important; }
.margin-top-none { margin-top: @size-none !important; }
.margin-top { margin-top: @size-md !important; }
.margin-top-lg { margin-top: @size-lg !important; }
.margin-top-sm { margin-top: @size-sm !important; }
.margin-top-none { margin-top: @buffer-none !important; }
.margin-top { margin-top: @buffer-md !important; }
.margin-top-lg { margin-top: @buffer-lg !important; }
.margin-top-sm { margin-top: @buffer-sm !important; }
.margin-right-none { margin-right: @size-none !important; }
.margin-right { margin-right: @size-md !important; }
.margin-right-lg { margin-right: @size-lg !important; }
.margin-right-sm { margin-right: @size-sm !important; }
.margin-right-none { margin-right: @buffer-none !important; }
.margin-right { margin-right: @buffer-md !important; }
.margin-right-lg { margin-right: @buffer-lg !important; }
.margin-right-sm { margin-right: @buffer-sm !important; }
.margin-bottom-none { margin-bottom: @size-none !important; }
.margin-bottom { margin-bottom: @size-md !important; }
.margin-bottom-lg { margin-bottom: @size-lg !important; }
.margin-bottom-sm { margin-bottom: @size-sm !important; }
.margin-bottom-none { margin-bottom: @buffer-none !important; }
.margin-bottom { margin-bottom: @buffer-md !important; }
.margin-bottom-lg { margin-bottom: @buffer-lg !important; }
.margin-bottom-sm { margin-bottom: @buffer-sm !important; }
.margin-left-none { margin-left: @size-none !important; }
.margin-left { margin-left: @size-md !important; }
.margin-left-lg { margin-left: @size-lg !important; }
.margin-left-sm { margin-left: @size-sm !important; }
.margin-left-none { margin-left: @buffer-none !important; }
.margin-left { margin-left: @buffer-md !important; }
.margin-left-lg { margin-left: @buffer-lg !important; }
.margin-left-sm { margin-left: @buffer-sm !important; }
.border-left-none { border-left: none !important; }
.border-right-none { border-right: none !important; }

View File

@ -1,7 +1,7 @@
.stripe-ad {
margin-bottom: 22px;
.lead {
margin-top: 10px;
margin-right: 30px;
padding-top: 10px;
padding-right: 30px;
}
}