{% endhighlight %}
<h3 id="less-mixins-box-shadow">Box (Drop) shadows</h3>
- <p>If your target audience is using the latest and greatest browsers and devices, be sure to just use the <code>box-shadow</code> property on it's own. If you need support for older Android (pre-v4) and iOS devices (pre-iOS 5), use of the mixin to pick up the required <code>-webkit</code> prefix.</p>
+ <p>If your target audience is using the latest and greatest browsers and devices, be sure to just use the <code>box-shadow</code> property on its own. If you need support for older Android (pre-v4) and iOS devices (pre-iOS 5), use the mixin to pick up the required <code>-webkit</code> prefix.</p>
<p>Be sure to use <code>rgba()</code> colors in your box shadows so they blend as seamlessly as possible with backgrounds.</p>
{% highlight css %}
.box-shadow(@shadow: 0 1px 3px rgba(0,0,0,.25)) {
<p>The affix plugin toggles between three classes, each representing a particular state: <code>.affix</code>, <code>.affix-top</code>, and <code>.affix-bottom</code>. You must provide the styles for these classes yourself (independent of this plugin) to handle the actual positions.</p>
<p>Here's how the affix plugin works:</p>
<ol>
- <li>To start, the plugin adds <code>.affix-top</code> to indicate the element is in it's top-most position. At this point no CSS positioning is required.</li>
+ <li>To start, the plugin adds <code>.affix-top</code> to indicate the element is in its top-most position. At this point no CSS positioning is required.</li>
<li>Scrolling past the element you want affixed should trigger the actual affixing. This is where <code>.affix</code> replaces <code>.affix-top</code> and sets <code>position: fixed;</code> (provided by Bootstrap's code CSS).</li>
<li>If a bottom offset is defined, scrolling past that should replace <code>.affix</code> with <code>.affix-bottom</code>. Since offsets are optional, setting one requires you to set the appropriate CSS. In this case, add <code>position: absolute;</code> when necessary. The plugin uses the data attribute or JavaScript option to determine where to position the element from there.</li>
</ol>
// Feedback icon (requires .glyphicon classes)
.form-control-feedback {
position: absolute;
- top: (@line-height-computed + 5); // Height of the `label` and it's margin
+ top: (@line-height-computed + 5); // Height of the `label` and its margin
right: 0;
display: block;
width: @input-height-base;
// Navbar nav links
//
-// Builds on top of the `.nav` components with it's own modifier class to make
+// Builds on top of the `.nav` components with its own modifier class to make
// the nav the full height of the horizontal nav (above 768px).
.navbar-nav {
}
}
- // Active state, and it's :hover to override normal :hover
+ // Active state, and its :hover to override normal :hover
&.active > a {
&,
&:hover,
}
}
-// Within heading, strip any `h*` tag of it's default margins for spacing.
+// Within heading, strip any `h*` tag of its default margins for spacing.
.panel-title {
margin-top: 0;
margin-bottom: 0;
// For now we'll leave these alongside the text classes until v4 when we can
// safely shift things around (per SemVer rules).
.bg-primary {
- // Given the contrast here, this is the only class to have it's color inverted
+ // Given the contrast here, this is the only class to have its color inverted
// automatically.
color: #fff;
background-color: @brand-primary;