Commit 1802cedb authored by Mark Otto's avatar Mark Otto

Use scss option instead of css for better highlighting

parent 4b194471
This diff is collapsed.
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
.err { color: #AA0000; background-color: #FFAAAA } /* Error */ .err { color: #AA0000; background-color: #FFAAAA } /* Error */
.k { color: #006699; } /* Keyword */ .k { color: #006699; } /* Keyword */
.o { color: #555555 } /* Operator */ .o { color: #555555 } /* Operator */
.cm { color: #0099FF; font-style: italic } /* Comment.Multiline */ .cm { color: #999; } /* Comment.Multiline */ /* Edited to remove italics and make into comment */
.cp { color: #009999 } /* Comment.Preproc */ .cp { color: #009999 } /* Comment.Preproc */
.c1 { color: #999; } /* Comment.Single */ .c1 { color: #999; } /* Comment.Single */
.cs { color: #999; } /* Comment.Special */ .cs { color: #999; } /* Comment.Special */
......
...@@ -1574,7 +1574,7 @@ lead: "Over a dozen reusable components built to provide iconography, dropdowns, ...@@ -1574,7 +1574,7 @@ lead: "Over a dozen reusable components built to provide iconography, dropdowns,
<div class="bs-callout bs-callout-danger"> <div class="bs-callout bs-callout-danger">
<h4>Body padding required</h4> <h4>Body padding required</h4>
<p>The fixed navbar will overlay your other content, unless you add <code>padding</code> to the top of the <code>&lt;body&gt;</code>. Try out your own values or use our snippet below. Tip: By default, the navbar is 50px high.</p> <p>The fixed navbar will overlay your other content, unless you add <code>padding</code> to the top of the <code>&lt;body&gt;</code>. Try out your own values or use our snippet below. Tip: By default, the navbar is 50px high.</p>
{% highlight css %} {% highlight scss %}
body { padding-top: 70px; } body { padding-top: 70px; }
{% endhighlight %} {% endhighlight %}
<p>Make sure to include this <strong>after</strong> the core Bootstrap CSS.</p> <p>Make sure to include this <strong>after</strong> the core Bootstrap CSS.</p>
...@@ -1618,7 +1618,7 @@ body { padding-top: 70px; } ...@@ -1618,7 +1618,7 @@ body { padding-top: 70px; }
<div class="bs-callout bs-callout-danger"> <div class="bs-callout bs-callout-danger">
<h4>Body padding required</h4> <h4>Body padding required</h4>
<p>The fixed navbar will overlay your other content, unless you add <code>padding</code> to the bottom of the <code>&lt;body&gt;</code>. Try out your own values or use our snippet below. Tip: By default, the navbar is 50px high.</p> <p>The fixed navbar will overlay your other content, unless you add <code>padding</code> to the bottom of the <code>&lt;body&gt;</code>. Try out your own values or use our snippet below. Tip: By default, the navbar is 50px high.</p>
{% highlight css %} {% highlight scss %}
body { padding-bottom: 70px; } body { padding-bottom: 70px; }
{% endhighlight %} {% endhighlight %}
<p>Make sure to include this <strong>after</strong> the core Bootstrap CSS.</p> <p>Make sure to include this <strong>after</strong> the core Bootstrap CSS.</p>
......
This diff is collapsed.
...@@ -483,11 +483,11 @@ bootstrap/ ...@@ -483,11 +483,11 @@ bootstrap/
<h3 id="support-ie10-width">Internet Explorer 10 in Windows 8 and Windows Phone 8</h3> <h3 id="support-ie10-width">Internet Explorer 10 in Windows 8 and Windows Phone 8</h3>
<p>Internet Explorer 10 doesn't differentiate <strong>device width</strong> from <strong>viewport width</strong>, and thus doesn't properly apply the media queries in Bootstrap's CSS. Normally you'd just add a quick snippet of CSS to fix this:</p> <p>Internet Explorer 10 doesn't differentiate <strong>device width</strong> from <strong>viewport width</strong>, and thus doesn't properly apply the media queries in Bootstrap's CSS. Normally you'd just add a quick snippet of CSS to fix this:</p>
{% highlight css %} {% highlight scss %}
@-ms-viewport { width: device-width; } @-ms-viewport { width: device-width; }
{% endhighlight %} {% endhighlight %}
<p>However, this doesn't work for devices running Windows Phone 8 versions older than <a href="http://blogs.windows.com/windows_phone/b/wpdev/archive/2013/10/14/introducing-windows-phone-preview-for-developers.aspx">Update 3 (a.k.a. GDR3)</a>, as it causes such devices to show a mostly desktop view instead of narrow "phone" view. To address this, you'll need to <strong>include the following CSS and JavaScript to work around the bug</strong>.</p> <p>However, this doesn't work for devices running Windows Phone 8 versions older than <a href="http://blogs.windows.com/windows_phone/b/wpdev/archive/2013/10/14/introducing-windows-phone-preview-for-developers.aspx">Update 3 (a.k.a. GDR3)</a>, as it causes such devices to show a mostly desktop view instead of narrow "phone" view. To address this, you'll need to <strong>include the following CSS and JavaScript to work around the bug</strong>.</p>
{% highlight css %} {% highlight scss %}
@-webkit-viewport { width: device-width; } @-webkit-viewport { width: device-width; }
@-moz-viewport { width: device-width; } @-moz-viewport { width: device-width; }
@-ms-viewport { width: device-width; } @-ms-viewport { width: device-width; }
...@@ -563,7 +563,7 @@ if (isAndroid) { ...@@ -563,7 +563,7 @@ if (isAndroid) {
<h3 id="third-box-sizing">Box-sizing</h3> <h3 id="third-box-sizing">Box-sizing</h3>
<p>Some third party software, including Google Maps and Google Custom Search Engine, conflict with Bootstrap due to <code>* { box-sizing: border-box; }</code>, a rule which makes it so <code>padding</code> does not affect the final computed width of an element. Learn more about <a href="http://css-tricks.com/box-sizing/">box model and sizing at CSS Tricks</a>.</p> <p>Some third party software, including Google Maps and Google Custom Search Engine, conflict with Bootstrap due to <code>* { box-sizing: border-box; }</code>, a rule which makes it so <code>padding</code> does not affect the final computed width of an element. Learn more about <a href="http://css-tricks.com/box-sizing/">box model and sizing at CSS Tricks</a>.</p>
<p>Depending on the context, you may override as-needed (Option 1) or reset the box-sizing for entire regions (Option 2).</p> <p>Depending on the context, you may override as-needed (Option 1) or reset the box-sizing for entire regions (Option 2).</p>
{% highlight css %} {% highlight scss %}
/* Box-sizing resets /* Box-sizing resets
* *
* Reset individual elements or override regions to avoid conflicts due to * Reset individual elements or override regions to avoid conflicts due to
...@@ -704,7 +704,7 @@ if (isAndroid) { ...@@ -704,7 +704,7 @@ if (isAndroid) {
<p>To implement this, in the custom stylesheet, add the following CSS:</p> <p>To implement this, in the custom stylesheet, add the following CSS:</p>
{% highlight css %} {% highlight scss %}
/* Custom button /* Custom button
-------------------------------------------------- */ -------------------------------------------------- */
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment