Adding newsletter signup, updating bootstrap

This commit is contained in:
Dave Gandy 2015-06-23 22:19:49 -07:00
parent 5ad6a98a54
commit 44a83862fb
92 changed files with 973 additions and 495 deletions

View File

@ -49,8 +49,8 @@ fontawesome:
url: http://creativecommons.org/licenses/by/3.0/
bootstrap:
version: 3.2.0
version: 3.3.5
url: http://getbootstrap.com
jquery:
version: 1.11.1
version: 1.11.3

View File

@ -5,9 +5,9 @@
<h1>Font Awesome</h1>
<p>The iconic font and CSS toolkit</p>
<div class="actions">
<a class="btn btn-default btn-lg" href="{{ page.relative_path }}assets/font-awesome-{{ site.fontawesome.version }}.zip"
onClick="_gaq.push(['_trackEvent', 'Outbound Link', 'Download on GitHub']);">
<i class="fa fa-download fa-lg"></i>&nbsp;&nbsp;
<a class="btn btn-default btn-lg" href="#modal-download" data-toggle="modal"
onClick="_gaq.push(['_trackEvent', 'Launch Modal', 'Launch Download Modal']);">
<i class="fa fa-download fa-lg"></i>&nbsp;
Download
</a>
</div>

View File

@ -0,0 +1,38 @@
<div class="modal fade" id="modal-download" tabindex="-1" role="dialog" aria-labelledby="modal-download-label">
<div class="modal-dialog modal-md" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><i class="fa fa-times"></i></button>
<h2 class="modal-title" id="modal-download-label">Help Us Out!</h2>
</div>
<div class="modal-body text-md">
<p>
I hope you love Font Awesome. If you've found it useful,
<a class="strong" href="https://fonticons.com/?utm_source=font_awesome_homepage&utm_medium=display&utm_content=download_modal&utm_campaign=promo_4.3_update" target="_blank">
please do me a favor and check out my latest project, Fonticons
</a>
. It makes it easy to put the perfect icons on your website. Choose from our awesome, comprehensive icon
sets or copy and paste your own.
</p>
<p>
Please. Check it out.
</p>
<p>
-Dave Gandy
</p>
</div>
<div class="modal-footer">
<a class="btn btn-default btn-lg block-xs" href="{{ page.relative_path }}assets/font-awesome-{{ site.fontawesome.version }}.zip"
onClick="_gaq.push(['_trackEvent', 'Outbound Modal Link', 'Download on GitHub']);">
<i class="fa fa-download fa-lg"></i>&nbsp;
Download
</a>
<a class="btn btn-success btn-lg block-xs" href="https://fonticons.com/?utm_source=font_awesome_homepage&utm_medium=display&utm_content=download_modal&utm_campaign=promo_4.3_update" target="_blank">
Check out Fonticons &nbsp;<i class="fa fa-external-link fa-lg"></i>
</a>
</div>
</div>
</div>
</div>

View File

@ -1,5 +1,20 @@
<div id="social-buttons" class="hidden-print">
<div class="container">
<form method="post" action="https://formkeep.com/f/ba101f5b69f0">
<div class="row">
<div class="col-md-4 col-md-offset-2 col-sm-6">
<input name="email" type="email" class="form-control margin-bottom" id="email" placeholder="Enter your email address&hellip;">
</div>
<div class="col-md-4 col-sm-6">
<button type="submit" class="btn btn-success btn-block margin-bottom-lg"
data-toggle="popover" data-trigger="hover" data-placement="top" title="Stay up to date with the Awesome"
data-content="We'll send you updates on new Font Awesome releases, icons, and other stuff that we're working on. We won't spam you. Scout's honor.">
Subscribe to Font Awesome Updates&nbsp;&nbsp;<i class="fa fa-envelope"></i>
</button>
</div>
</div>
</form>
<ul class="list-inline">
<li>
<iframe class="github-btn" src="http://ghbtns.com/github-btn.html?user=FortAwesome&repo=Font-Awesome&type=watch&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="100px" height="20px"></iframe>

View File

@ -58,7 +58,7 @@
<script src="https://platform.twitter.com/widgets.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/{{ site.jquery.version }}/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/{{ site.bootstrap.version }}/js/bootstrap.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/{{ site.bootstrap.version }}/js/bootstrap.min.js"></script>
<script src="{{ page.relative_path}}assets/js/tabcomplete.min.js"></script>
<script src="{{ page.relative_path }}assets/js/site.js"></script>
<script>

View File

@ -0,0 +1,7 @@
I hope you love Font Awesome. If you've found it useful, please do me a favor and check out my latest project,
Fonticons. It makes it easy to put the perfect icons on your website. Choose from our awesome, comprehensive icon sets
or copy and paste your own.
Please. Check it out.
-Dave

View File

@ -6,12 +6,6 @@ $(function() {
url: "https://fonticons.com/?utm_source=font_awesome_homepage&utm_medium=display&utm_content=ad_1_next_level&utm_campaign=promo_4.3_update",
btn_text: "Gimme Some!"
},
{
quote: "Subset your icons, add your own, and serve up from a CDN. Check out <strong>Fonticons</strong>, from the maker of Font Awesome.",
class: "fonticons",
url: "https://fonticons.com/?utm_source=font_awesome_homepage&utm_medium=display&utm_content=ad_2_all_value_add&utm_campaign=promo_4.3_update",
btn_text: "Gimme Some!"
},
{
quote: "Make your icons load 10x faster! Check out <strong>Fonticons</strong>, from the maker of Font Awesome.",
class: "fonticons",
@ -25,43 +19,25 @@ $(function() {
btn_text: "Gimme Some!"
},
{
quote: "Need a custom icon in Font Awesome? Check out <strong>Fonticons</strong>, from the maker of Font Awesome.",
quote: "Want to add your own icon? Check out <strong>Fonticons</strong>, from the maker of Font Awesome.",
class: "fonticons",
url: "https://fonticons.com/?utm_source=font_awesome_homepage&utm_medium=display&utm_content=ad_5_custom_icons&utm_campaign=promo_4.3_update",
url: "https://fonticons.com/?utm_source=font_awesome_homepage&utm_medium=display&utm_content=ad_6_your_own_icon&utm_campaign=promo_4.3_update",
btn_text: "Gimme Some!"
},
{
quote: "So hot right now: <strong>Black Tie</strong>, the new multi-weight icon font from the maker of Font Awesome.",
class: "black-tie",
url: "http://blacktie.io/?utm_source=font_awesome_homepage&utm_medium=display&utm_content=ad_1_so_hot&utm_campaign=promo_4.3_update",
btn_text: "Buy it Now!"
},
{
quote: "<strong>Black Tie</strong>, from the creator of Font Awesome. On sale at the Kickstarter price for a limited time.",
class: "black-tie",
url: "http://blacktie.io/?utm_source=font_awesome_homepage&utm_medium=display&utm_content=ad_2_kickstarter&utm_campaign=promo_4.3_update",
btn_text: "Buy it Now!"
},
{
quote: "Get more Awesome: <strong>Black Tie</strong>, the new multi-weight icon font from the maker of Font Awesome.",
class: "black-tie",
url: "http://blacktie.io/?utm_source=font_awesome_homepage&utm_medium=display&utm_content=ad_3_more_awesome&utm_campaign=promo_4.3_update",
btn_text: "Buy it Now!"
},
{
quote: "The new hotness from the maker of Font Awesome: <strong>Black Tie</strong>, the multi-weight icon font.",
class: "black-tie",
url: "http://blacktie.io/?utm_source=font_awesome_homepage&utm_medium=display&utm_content=ad_4_new_hotness&utm_campaign=promo_4.3_update",
btn_text: "Buy it Now!"
btn_text: "Check it Out!"
},
{
quote: "Want clean, minimalist icons? Check out <strong>Black Tie</strong>, the new multi-weight icon font from the maker of Font Awesome.",
class: "black-tie",
url: "http://blacktie.io/?utm_source=font_awesome_homepage&utm_medium=display&utm_content=ad_5_clean_minimalist&utm_campaign=promo_4.3_update",
btn_text: "Buy it Now!"
btn_text: "Check it Out!"
}
];
@ -72,6 +48,8 @@ $(function() {
interval: 5000
});
$('[data-toggle="popover"]').popover();
var $filter_by = $('#filter-by');
// Filter icons

View File

@ -1,56 +0,0 @@
// Media objects
// Source: http://stubbornella.org/content/?p=497
// --------------------------------------------------
// Common styles
// -------------------------
// Clear the floats
.media,
.media-body {
overflow: hidden;
zoom: 1;
}
// Proper spacing between instances of .media
.media,
.media .media {
margin-top: 15px;
}
.media:first-child {
margin-top: 0;
}
// For images and videos, set to block
.media-object {
display: block;
}
// Reset margins on headings for tighter default spacing
.media-heading {
margin: 0 0 5px;
}
// Media image alignment
// -------------------------
.media {
> .pull-left {
margin-right: 10px;
}
> .pull-right {
margin-left: 10px;
}
}
// Media list variation
// -------------------------
// Undo default ul/ol styles
.media-list {
padding-left: 0;
list-style: none;
}

View File

@ -1,101 +0,0 @@
//
// Basic print styles
// --------------------------------------------------
// Source: https://github.com/h5bp/html5-boilerplate/blob/master/css/main.css
@media print {
* {
text-shadow: none !important;
color: #000 !important; // Black prints faster: h5bp.com/s
background: transparent !important;
box-shadow: none !important;
}
a,
a:visited {
text-decoration: underline;
}
a[href]:after {
content: " (" attr(href) ")";
}
abbr[title]:after {
content: " (" attr(title) ")";
}
// Don't show links for images, or javascript/internal links
a[href^="javascript:"]:after,
a[href^="#"]:after {
content: "";
}
pre,
blockquote {
border: 1px solid #999;
page-break-inside: avoid;
}
thead {
display: table-header-group; // h5bp.com/t
}
tr,
img {
page-break-inside: avoid;
}
img {
max-width: 100% !important;
}
p,
h2,
h3 {
orphans: 3;
widows: 3;
}
h2,
h3 {
page-break-after: avoid;
}
// Chrome (OSX) fix for https://github.com/twbs/bootstrap/issues/11245
// Once fixed, we can just straight up remove this.
select {
background: #fff !important;
}
// Bootstrap components
.navbar {
display: none;
}
.table {
td,
th {
background-color: #fff !important;
}
}
.btn,
.dropup > .btn {
> .caret {
border-top-color: #000 !important;
}
}
.label {
border: 1px solid #000;
}
.table {
border-collapse: collapse !important;
}
.table-bordered {
th,
td {
border: 1px solid #ddd !important;
}
}
}

View File

@ -1,16 +1,21 @@
{
"always-semicolon": true,
"block-indent": 2,
"colon-space": [0, 1],
"color-case": "lower",
"color-shorthand": true,
"combinator-space": true,
"element-case": "lower",
"eof-newline": true,
"leading-zero": false,
"remove-empty-rulesets": true,
"rule-indent": 2,
"stick-brace": " ",
"space-after-colon": 1,
"space-after-combinator": 1,
"space-before-selector-delimiter": 0,
"space-between-declarations": "\n",
"space-after-opening-brace": "\n",
"space-before-closing-brace": "\n",
"space-before-colon": 0,
"space-before-combinator": 1,
"space-before-opening-brace": 1,
"strip-spaces": true,
"unitless-zero": true,
"vendor-prefix-align": true,
@ -109,6 +114,8 @@
"list-style-type",
"list-style-image",
"pointer-events",
"-ms-touch-action",
"touch-action",
"cursor",
"visibility",
"zoom",

View File

@ -18,6 +18,7 @@
// Specified for the h4 to prevent conflicts of changing @headings-color
color: inherit;
}
// Provide class for links that match alerts
.alert-link {
font-weight: @alert-link-font-weight;
@ -28,6 +29,7 @@
> ul {
margin-bottom: 0;
}
> p + p {
margin-top: 5px;
}
@ -57,12 +59,15 @@
.alert-success {
.alert-variant(@alert-success-bg; @alert-success-border; @alert-success-text);
}
.alert-info {
.alert-variant(@alert-info-bg; @alert-info-border; @alert-info-text);
}
.alert-warning {
.alert-variant(@alert-warning-bg; @alert-warning-border; @alert-warning-text);
}
.alert-danger {
.alert-variant(@alert-danger-bg; @alert-danger-border; @alert-danger-text);
}

View File

@ -12,7 +12,7 @@
font-weight: @badge-font-weight;
color: @badge-color;
line-height: @badge-line-height;
vertical-align: baseline;
vertical-align: middle;
white-space: nowrap;
text-align: center;
background-color: @badge-bg;
@ -28,7 +28,9 @@
position: relative;
top: -1px;
}
.btn-xs & {
.btn-xs &,
.btn-group-xs > .btn & {
top: 0;
padding: 1px 5px;
}
@ -44,11 +46,20 @@
}
// Account for badges in navs
a.list-group-item.active > &,
.list-group-item.active > &,
.nav-pills > .active > a > & {
color: @badge-active-color;
background-color: @badge-active-bg;
}
.list-group-item > & {
float: right;
}
.list-group-item > & + & {
margin-right: 5px;
}
.nav-pills > li > a > & {
margin-left: 3px;
}

View File

@ -1,3 +1,9 @@
/*!
* Bootstrap v3.3.5 (http://getbootstrap.com)
* Copyright 2011-2015 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
*/
// Core variables and mixins
@import "variables.less";
@import "mixins.less";

View File

@ -18,10 +18,6 @@
&.active {
z-index: 2;
}
&:focus {
// Remove focus outline when dropdown JS adds it after closing the menu
outline: 0;
}
}
}
@ -40,6 +36,7 @@
margin-left: -5px; // Offset the first child's margin
&:extend(.clearfix all);
.btn,
.btn-group,
.input-group {
float: left;
@ -75,13 +72,13 @@
.btn-group > .btn-group:not(:first-child):not(:last-child) > .btn {
border-radius: 0;
}
.btn-group > .btn-group:first-child {
.btn-group > .btn-group:first-child:not(:last-child) {
> .btn:last-child,
> .dropdown-toggle {
.border-right-radius(0);
}
}
.btn-group > .btn-group:last-child > .btn:first-child {
.btn-group > .btn-group:last-child:not(:first-child) > .btn:first-child {
.border-left-radius(0);
}
@ -176,11 +173,11 @@
border-radius: 0;
}
&:first-child:not(:last-child) {
border-top-right-radius: @border-radius-base;
border-top-right-radius: @btn-border-radius-base;
.border-bottom-radius(0);
}
&:last-child:not(:first-child) {
border-bottom-left-radius: @border-radius-base;
border-bottom-left-radius: @btn-border-radius-base;
.border-top-radius(0);
}
}
@ -198,7 +195,6 @@
}
// Justified button groups
// ----------------------
@ -226,15 +222,23 @@
// Checkbox and radio options
//
// In order to support the browser's form validation feedback, powered by the
// `required` attribute, we have to "hide" the inputs via `opacity`. We cannot
// use `display: none;` or `visibility: hidden;` as that also hides the popover.
// `required` attribute, we have to "hide" the inputs via `clip`. We cannot use
// `display: none;` or `visibility: hidden;` as that also hides the popover.
// Simply visually hiding the inputs via `opacity` would leave them clickable in
// certain cases which is prevented by using `clip` and `pointer-events`.
// This way, we ensure a DOM element is visible to position the popover from.
//
// See https://github.com/twbs/bootstrap/pull/12794 for more.
// See https://github.com/twbs/bootstrap/pull/12794 and
// https://github.com/twbs/bootstrap/pull/14559 for more information.
[data-toggle="buttons"] > .btn > input[type="radio"],
[data-toggle="buttons"] > .btn > input[type="checkbox"] {
position: absolute;
z-index: -1;
.opacity(0);
[data-toggle="buttons"] {
> .btn,
> .btn-group > .btn {
input[type="radio"],
input[type="checkbox"] {
position: absolute;
clip: rect(0,0,0,0);
pointer-events: none;
}
}
}

View File

@ -12,23 +12,26 @@
font-weight: @btn-font-weight;
text-align: center;
vertical-align: middle;
touch-action: manipulation;
cursor: pointer;
background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214
border: 1px solid transparent;
white-space: nowrap;
.button-size(@padding-base-vertical; @padding-base-horizontal; @font-size-base; @line-height-base; @border-radius-base);
.button-size(@padding-base-vertical; @padding-base-horizontal; @font-size-base; @line-height-base; @btn-border-radius-base);
.user-select(none);
&,
&:active,
&.active {
&:focus {
&:focus,
&.focus {
.tab-focus();
}
}
&:hover,
&:focus {
&:focus,
&.focus {
color: @btn-default-color;
text-decoration: none;
}
@ -43,11 +46,17 @@
&.disabled,
&[disabled],
fieldset[disabled] & {
cursor: not-allowed;
pointer-events: none; // Future-proof disabling of clicks
cursor: @cursor-disabled;
.opacity(.65);
.box-shadow(none);
}
a& {
&.disabled,
fieldset[disabled] & {
pointer-events: none; // Future-proof disabling of clicks on `<a>` elements
}
}
}
@ -85,11 +94,11 @@
.btn-link {
color: @link-color;
font-weight: normal;
cursor: pointer;
border-radius: 0;
&,
&:active,
&.active,
&[disabled],
fieldset[disabled] & {
background-color: transparent;
@ -104,7 +113,7 @@
&:hover,
&:focus {
color: @link-hover-color;
text-decoration: underline;
text-decoration: @link-hover-decoration;
background-color: transparent;
}
&[disabled],
@ -123,14 +132,14 @@
.btn-lg {
// line-height: ensure even-numbered height of button next to large input
.button-size(@padding-large-vertical; @padding-large-horizontal; @font-size-large; @line-height-large; @border-radius-large);
.button-size(@padding-large-vertical; @padding-large-horizontal; @font-size-large; @line-height-large; @btn-border-radius-large);
}
.btn-sm {
// line-height: ensure proper height of button next to small input
.button-size(@padding-small-vertical; @padding-small-horizontal; @font-size-small; @line-height-small; @border-radius-small);
.button-size(@padding-small-vertical; @padding-small-horizontal; @font-size-small; @line-height-small; @btn-border-radius-small);
}
.btn-xs {
.button-size(@padding-xs-vertical; @padding-xs-horizontal; @font-size-small; @line-height-small; @border-radius-small);
.button-size(@padding-xs-vertical; @padding-xs-horizontal; @font-size-small; @line-height-small; @btn-border-radius-small);
}

View File

@ -24,6 +24,30 @@
&:extend(.img-responsive);
line-height: 1;
}
// WebKit CSS3 transforms for supported devices
@media all and (transform-3d), (-webkit-transform-3d) {
.transition-transform(~'0.6s ease-in-out');
.backface-visibility(~'hidden');
.perspective(1000px);
&.next,
&.active.right {
.translate3d(100%, 0, 0);
left: 0;
}
&.prev,
&.active.left {
.translate3d(-100%, 0, 0);
left: 0;
}
&.next.left,
&.prev.right,
&.active {
.translate3d(0, 0, 0);
left: 0;
}
}
}
> .active,
@ -106,6 +130,7 @@
.glyphicon-chevron-right {
position: absolute;
top: 50%;
margin-top: -10px;
z-index: 5;
display: inline-block;
}
@ -123,7 +148,7 @@
.icon-next {
width: 20px;
height: 20px;
margin-top: -10px;
line-height: 1;
font-family: serif;
}
@ -171,6 +196,7 @@
// Internet Explorer 8-9 does not support clicks on elements without a set
// `background-color`. We cannot use `filter` since that's not viewed as a
// background color by the browser. Thus, a hack is needed.
// See https://developer.mozilla.org/en-US/docs/Web/Events/click#Internet_Explorer
//
// For IE8, we set solid black as it doesn't support `rgba()`. For IE9, we
// set alpha transparency for the best results possible.

View File

@ -23,6 +23,7 @@
// Additional properties for button version
// iOS requires the button element instead of an anchor tag.
// If you want the anchor version, it requires `href="#"`.
// See https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile
button& {
padding: 0;
cursor: pointer;

View File

@ -32,6 +32,7 @@ kbd {
kbd {
padding: 0;
font-size: 100%;
font-weight: bold;
box-shadow: none;
}
}

View File

@ -27,5 +27,7 @@
position: relative;
height: 0;
overflow: hidden;
.transition(height .35s ease);
.transition-property(~"height, visibility");
.transition-duration(.35s);
.transition-timing-function(ease);
}

View File

@ -10,12 +10,14 @@
height: 0;
margin-left: 2px;
vertical-align: middle;
border-top: @caret-width-base solid;
border-top: @caret-width-base dashed;
border-top: @caret-width-base solid ~"\9"; // IE8
border-right: @caret-width-base solid transparent;
border-left: @caret-width-base solid transparent;
}
// The dropdown wrapper (div)
.dropup,
.dropdown {
position: relative;
}
@ -103,16 +105,15 @@
&:focus {
color: @dropdown-link-disabled-color;
}
}
// Nuke hover/focus effects
.dropdown-menu > .disabled > a {
// Nuke hover/focus effects
&:hover,
&:focus {
text-decoration: none;
background-color: transparent;
background-image: none; // Remove CSS gradient
.reset-filter();
cursor: not-allowed;
cursor: @cursor-disabled;
}
}
@ -184,14 +185,15 @@
// Reverse the caret
.caret {
border-top: 0;
border-bottom: @caret-width-base solid;
border-bottom: @caret-width-base dashed;
border-bottom: @caret-width-base solid ~"\9"; // IE8
content: "";
}
// Different positioning for bottom up menu
.dropdown-menu {
top: auto;
bottom: 100%;
margin-bottom: 1px;
margin-bottom: 2px;
}
}
@ -212,4 +214,3 @@
}
}
}

View File

@ -56,7 +56,6 @@ input[type="checkbox"] {
line-height: normal;
}
// Set the height of file controls to match text inputs
input[type="file"] {
display: block;
}
@ -123,7 +122,7 @@ output {
background-color: @input-bg;
background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214
border: 1px solid @input-border;
border-radius: @input-border-radius;
border-radius: @input-border-radius; // Note: This has no effect on <select>s in some browsers, due to the limited stylability of <select>s in CSS.
.box-shadow(inset 0 1px 1px rgba(0,0,0,.075));
.transition(~"border-color ease-in-out .15s, box-shadow ease-in-out .15s");
@ -133,6 +132,12 @@ output {
// Placeholder
.placeholder();
// Unstyle the caret on `<select>`s in IE10+.
&::-ms-expand {
border: 0;
background-color: transparent;
}
// Disabled and read-only inputs
//
// HTML5 says that controls under a fieldset > legend:first-child won't be
@ -141,9 +146,13 @@ output {
&[disabled],
&[readonly],
fieldset[disabled] & {
cursor: not-allowed;
background-color: @input-bg-disabled;
opacity: 1; // iOS fix for unreadable disabled content
opacity: 1; // iOS fix for unreadable disabled content; see https://github.com/twbs/bootstrap/issues/11655
}
&[disabled],
fieldset[disabled] & {
cursor: @cursor-disabled;
}
// Reset height for `textarea`s
@ -168,24 +177,30 @@ input[type="search"] {
// Special styles for iOS temporal inputs
//
// In Mobile Safari, setting `display: block` on temporal inputs causes the
// text within the input to become vertically misaligned.
// As a workaround, we set a pixel line-height that matches the
// given height of the input. Since this fucks up everything else, we have to
// appropriately reset it for Internet Explorer and the size variations.
// text within the input to become vertically misaligned. As a workaround, we
// set a pixel line-height that matches the given height of the input, but only
// for Safari. See https://bugs.webkit.org/show_bug.cgi?id=139848
//
// Note that as of 8.3, iOS doesn't support `datetime` or `week`.
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="month"] {
line-height: @input-height-base;
// IE8+ misaligns the text within date inputs, so we reset
line-height: @line-height-base ~"\0";
@media screen and (-webkit-min-device-pixel-ratio: 0) {
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="month"] {
&.form-control {
line-height: @input-height-base;
}
&.input-sm {
line-height: @input-height-small;
}
&.input-lg {
line-height: @input-height-large;
&.input-sm,
.input-group-sm & {
line-height: @input-height-small;
}
&.input-lg,
.input-group-lg & {
line-height: @input-height-large;
}
}
}
@ -196,7 +211,7 @@ input[type="month"] {
// horizontal forms, use the predefined grid classes.
.form-group {
margin-bottom: 15px;
margin-bottom: @form-group-margin-bottom;
}
@ -208,11 +223,11 @@ input[type="month"] {
.checkbox {
position: relative;
display: block;
min-height: @line-height-computed; // clear the floating input if there is no label text
margin-top: 10px;
margin-bottom: 10px;
label {
min-height: @line-height-computed; // Ensure the input doesn't jump when there is no text
padding-left: 20px;
margin-bottom: 0;
font-weight: normal;
@ -236,6 +251,7 @@ input[type="month"] {
// Radios and checkboxes on same line
.radio-inline,
.checkbox-inline {
position: relative;
display: inline-block;
padding-left: 20px;
margin-bottom: 0;
@ -258,7 +274,7 @@ input[type="checkbox"] {
&[disabled],
&.disabled,
fieldset[disabled] & {
cursor: not-allowed;
cursor: @cursor-disabled;
}
}
// These classes are used directly on <label>s
@ -266,7 +282,7 @@ input[type="checkbox"] {
.checkbox-inline {
&.disabled,
fieldset[disabled] & {
cursor: not-allowed;
cursor: @cursor-disabled;
}
}
// These classes are used on elements with <label> descendants
@ -275,7 +291,7 @@ input[type="checkbox"] {
&.disabled,
fieldset[disabled] & {
label {
cursor: not-allowed;
cursor: @cursor-disabled;
}
}
}
@ -292,6 +308,7 @@ input[type="checkbox"] {
padding-bottom: (@padding-base-vertical + 1);
// Remove default margin from `p`
margin-bottom: 0;
min-height: (@line-height-computed + @font-size-base);
&.input-lg,
&.input-sm {
@ -305,13 +322,64 @@ input[type="checkbox"] {
//
// Build on `.form-control` with modifier classes to decrease or increase the
// height and font-size of form controls.
//
// The `.form-group-* form-control` variations are sadly duplicated to avoid the
// issue documented in https://github.com/twbs/bootstrap/issues/15074.
.input-sm {
.input-size(@input-height-small; @padding-small-vertical; @padding-small-horizontal; @font-size-small; @line-height-small; @border-radius-small);
.input-size(@input-height-small; @padding-small-vertical; @padding-small-horizontal; @font-size-small; @line-height-small; @input-border-radius-small);
}
.form-group-sm {
.form-control {
height: @input-height-small;
padding: @padding-small-vertical @padding-small-horizontal;
font-size: @font-size-small;
line-height: @line-height-small;
border-radius: @input-border-radius-small;
}
select.form-control {
height: @input-height-small;
line-height: @input-height-small;
}
textarea.form-control,
select[multiple].form-control {
height: auto;
}
.form-control-static {
height: @input-height-small;
min-height: (@line-height-computed + @font-size-small);
padding: (@padding-small-vertical + 1) @padding-small-horizontal;
font-size: @font-size-small;
line-height: @line-height-small;
}
}
.input-lg {
.input-size(@input-height-large; @padding-large-vertical; @padding-large-horizontal; @font-size-large; @line-height-large; @border-radius-large);
.input-size(@input-height-large; @padding-large-vertical; @padding-large-horizontal; @font-size-large; @line-height-large; @input-border-radius-large);
}
.form-group-lg {
.form-control {
height: @input-height-large;
padding: @padding-large-vertical @padding-large-horizontal;
font-size: @font-size-large;
line-height: @line-height-large;
border-radius: @input-border-radius-large;
}
select.form-control {
height: @input-height-large;
line-height: @input-height-large;
}
textarea.form-control,
select[multiple].form-control {
height: auto;
}
.form-control-static {
height: @input-height-large;
min-height: (@line-height-computed + @font-size-large);
padding: (@padding-large-vertical + 1) @padding-large-horizontal;
font-size: @font-size-large;
line-height: @line-height-large;
}
}
@ -331,7 +399,7 @@ input[type="checkbox"] {
// Feedback icon (requires .glyphicon classes)
.form-control-feedback {
position: absolute;
top: (@line-height-computed + 5); // Height of the `label` and its margin
top: 0;
right: 0;
z-index: 2; // Ensure icon is above input groups
display: block;
@ -339,13 +407,18 @@ input[type="checkbox"] {
height: @input-height-base;
line-height: @input-height-base;
text-align: center;
pointer-events: none;
}
.input-lg + .form-control-feedback {
.input-lg + .form-control-feedback,
.input-group-lg + .form-control-feedback,
.form-group-lg .form-control + .form-control-feedback {
width: @input-height-large;
height: @input-height-large;
line-height: @input-height-large;
}
.input-sm + .form-control-feedback {
.input-sm + .form-control-feedback,
.input-group-sm + .form-control-feedback,
.form-group-sm .form-control + .form-control-feedback {
width: @input-height-small;
height: @input-height-small;
line-height: @input-height-small;
@ -362,10 +435,15 @@ input[type="checkbox"] {
.form-control-validation(@state-danger-text; @state-danger-text; @state-danger-bg);
}
// Reposition feedback icon if input has visible label above
.has-feedback label {
// Reposition feedback icon if label is hidden with "screenreader only" state
.has-feedback label.sr-only ~ .form-control-feedback {
top: 0;
& ~ .form-control-feedback {
top: (@line-height-computed + 5); // Height of the `label` and its margin
}
&.sr-only ~ .form-control-feedback {
top: 0;
}
}
@ -382,7 +460,6 @@ input[type="checkbox"] {
}
// Inline forms
//
// Make forms appear inline(-block) by adding the `.form-inline` class. Inline
@ -412,6 +489,11 @@ input[type="checkbox"] {
vertical-align: middle;
}
// Make static controls behave like regular ones
.form-control-static {
display: inline-block;
}
.input-group {
display: inline-table;
vertical-align: middle;
@ -434,8 +516,7 @@ input[type="checkbox"] {
}
// Remove default margin on radios/checkboxes that were used for stacking, and
// then undo the floating of radios and checkboxes to match (which also avoids
// a bug in WebKit: https://github.com/twbs/bootstrap/issues/1969).
// then undo the floating of radios and checkboxes to match.
.radio,
.checkbox {
display: inline-block;
@ -453,10 +534,7 @@ input[type="checkbox"] {
margin-left: 0;
}
// Validation states
//
// Reposition the icon because it's now within a grid column and columns have
// `position: relative;` on them. Also accounts for the grid gutter padding.
// Re-override the feedback icon.
.has-feedback .form-control-feedback {
top: 0;
}
@ -509,8 +587,7 @@ input[type="checkbox"] {
// Reposition the icon because it's now within a grid column and columns have
// `position: relative;` on them. Also accounts for the grid gutter padding.
.has-feedback .form-control-feedback {
top: 0;
right: (@grid-gutter-width / 2);
right: floor((@grid-gutter-width / 2));
}
// Form group sizes
@ -521,20 +598,16 @@ input[type="checkbox"] {
@media (min-width: @screen-sm-min) {
.control-label {
padding-top: ((@padding-large-vertical * @line-height-large) + 1);
font-size: @font-size-large;
}
}
.form-control {
&:extend(.input-lg);
}
}
.form-group-sm {
@media (min-width: @screen-sm-min) {
.control-label {
padding-top: (@padding-small-vertical + 1);
font-size: @font-size-small;
}
}
.form-control {
&:extend(.input-sm);
}
}
}

View File

@ -12,6 +12,7 @@
font-family: 'Glyphicons Halflings';
src: url('@{icon-font-path}@{icon-font-name}.eot');
src: url('@{icon-font-path}@{icon-font-name}.eot?#iefix') format('embedded-opentype'),
url('@{icon-font-path}@{icon-font-name}.woff2') format('woff2'),
url('@{icon-font-path}@{icon-font-name}.woff') format('woff'),
url('@{icon-font-path}@{icon-font-name}.ttf') format('truetype'),
url('@{icon-font-path}@{icon-font-name}.svg#@{icon-font-svg-id}') format('svg');
@ -33,7 +34,8 @@
// Individual icons
.glyphicon-asterisk { &:before { content: "\2a"; } }
.glyphicon-plus { &:before { content: "\2b"; } }
.glyphicon-euro { &:before { content: "\20ac"; } }
.glyphicon-euro,
.glyphicon-eur { &:before { content: "\20ac"; } }
.glyphicon-minus { &:before { content: "\2212"; } }
.glyphicon-cloud { &:before { content: "\2601"; } }
.glyphicon-envelope { &:before { content: "\2709"; } }
@ -231,3 +233,73 @@
.glyphicon-cloud-upload { &:before { content: "\e198"; } }
.glyphicon-tree-conifer { &:before { content: "\e199"; } }
.glyphicon-tree-deciduous { &:before { content: "\e200"; } }
.glyphicon-cd { &:before { content: "\e201"; } }
.glyphicon-save-file { &:before { content: "\e202"; } }
.glyphicon-open-file { &:before { content: "\e203"; } }
.glyphicon-level-up { &:before { content: "\e204"; } }
.glyphicon-copy { &:before { content: "\e205"; } }
.glyphicon-paste { &:before { content: "\e206"; } }
// The following 2 Glyphicons are omitted for the time being because
// they currently use Unicode codepoints that are outside the
// Basic Multilingual Plane (BMP). Older buggy versions of WebKit can't handle
// non-BMP codepoints in CSS string escapes, and thus can't display these two icons.
// Notably, the bug affects some older versions of the Android Browser.
// More info: https://github.com/twbs/bootstrap/issues/10106
// .glyphicon-door { &:before { content: "\1f6aa"; } }
// .glyphicon-key { &:before { content: "\1f511"; } }
.glyphicon-alert { &:before { content: "\e209"; } }
.glyphicon-equalizer { &:before { content: "\e210"; } }
.glyphicon-king { &:before { content: "\e211"; } }
.glyphicon-queen { &:before { content: "\e212"; } }
.glyphicon-pawn { &:before { content: "\e213"; } }
.glyphicon-bishop { &:before { content: "\e214"; } }
.glyphicon-knight { &:before { content: "\e215"; } }
.glyphicon-baby-formula { &:before { content: "\e216"; } }
.glyphicon-tent { &:before { content: "\26fa"; } }
.glyphicon-blackboard { &:before { content: "\e218"; } }
.glyphicon-bed { &:before { content: "\e219"; } }
.glyphicon-apple { &:before { content: "\f8ff"; } }
.glyphicon-erase { &:before { content: "\e221"; } }
.glyphicon-hourglass { &:before { content: "\231b"; } }
.glyphicon-lamp { &:before { content: "\e223"; } }
.glyphicon-duplicate { &:before { content: "\e224"; } }
.glyphicon-piggy-bank { &:before { content: "\e225"; } }
.glyphicon-scissors { &:before { content: "\e226"; } }
.glyphicon-bitcoin { &:before { content: "\e227"; } }
.glyphicon-btc { &:before { content: "\e227"; } }
.glyphicon-xbt { &:before { content: "\e227"; } }
.glyphicon-yen { &:before { content: "\00a5"; } }
.glyphicon-jpy { &:before { content: "\00a5"; } }
.glyphicon-ruble { &:before { content: "\20bd"; } }
.glyphicon-rub { &:before { content: "\20bd"; } }
.glyphicon-scale { &:before { content: "\e230"; } }
.glyphicon-ice-lolly { &:before { content: "\e231"; } }
.glyphicon-ice-lolly-tasted { &:before { content: "\e232"; } }
.glyphicon-education { &:before { content: "\e233"; } }
.glyphicon-option-horizontal { &:before { content: "\e234"; } }
.glyphicon-option-vertical { &:before { content: "\e235"; } }
.glyphicon-menu-hamburger { &:before { content: "\e236"; } }
.glyphicon-modal-window { &:before { content: "\e237"; } }
.glyphicon-oil { &:before { content: "\e238"; } }
.glyphicon-grain { &:before { content: "\e239"; } }
.glyphicon-sunglasses { &:before { content: "\e240"; } }
.glyphicon-text-size { &:before { content: "\e241"; } }
.glyphicon-text-color { &:before { content: "\e242"; } }
.glyphicon-text-background { &:before { content: "\e243"; } }
.glyphicon-object-align-top { &:before { content: "\e244"; } }
.glyphicon-object-align-bottom { &:before { content: "\e245"; } }
.glyphicon-object-align-horizontal{ &:before { content: "\e246"; } }
.glyphicon-object-align-left { &:before { content: "\e247"; } }
.glyphicon-object-align-vertical { &:before { content: "\e248"; } }
.glyphicon-object-align-right { &:before { content: "\e249"; } }
.glyphicon-triangle-right { &:before { content: "\e250"; } }
.glyphicon-triangle-left { &:before { content: "\e251"; } }
.glyphicon-triangle-bottom { &:before { content: "\e252"; } }
.glyphicon-triangle-top { &:before { content: "\e253"; } }
.glyphicon-console { &:before { content: "\e254"; } }
.glyphicon-superscript { &:before { content: "\e255"; } }
.glyphicon-subscript { &:before { content: "\e256"; } }
.glyphicon-menu-left { &:before { content: "\e257"; } }
.glyphicon-menu-right { &:before { content: "\e258"; } }
.glyphicon-menu-down { &:before { content: "\e259"; } }
.glyphicon-menu-up { &:before { content: "\e260"; } }

View File

@ -79,18 +79,18 @@
text-align: center;
background-color: @input-group-addon-bg;
border: 1px solid @input-group-addon-border-color;
border-radius: @border-radius-base;
border-radius: @input-border-radius;
// Sizing
&.input-sm {
padding: @padding-small-vertical @padding-small-horizontal;
font-size: @font-size-small;
border-radius: @border-radius-small;
border-radius: @input-border-radius-small;
}
&.input-lg {
padding: @padding-large-vertical @padding-large-horizontal;
font-size: @font-size-large;
border-radius: @border-radius-large;
border-radius: @input-border-radius-large;
}
// Nuke default margins from checkboxes and radios to vertically center within.
@ -160,6 +160,7 @@
&:last-child {
> .btn,
> .btn-group {
z-index: 2;
margin-left: -1px;
}
}

View File

@ -4,7 +4,8 @@
.jumbotron {
padding: @jumbotron-padding;
padding-top: @jumbotron-padding;
padding-bottom: @jumbotron-padding;
margin-bottom: @jumbotron-padding;
color: @jumbotron-color;
background-color: @jumbotron-bg;
@ -13,6 +14,7 @@
.h1 {
color: @jumbotron-heading-color;
}
p {
margin-bottom: (@jumbotron-padding / 2);
font-size: @jumbotron-font-size;
@ -23,7 +25,8 @@
border-top-color: darken(@jumbotron-bg, 10%);
}
.container & {
.container &,
.container-fluid & {
border-radius: @border-radius-large; // Only round corners at higher resolutions if contained in a container
}
@ -35,14 +38,15 @@
padding-top: (@jumbotron-padding * 1.6);
padding-bottom: (@jumbotron-padding * 1.6);
.container & {
.container &,
.container-fluid & {
padding-left: (@jumbotron-padding * 2);
padding-right: (@jumbotron-padding * 2);
}
h1,
.h1 {
font-size: (@font-size-base * 4.5);
font-size: @jumbotron-heading-font-size;
}
}
}

View File

@ -35,23 +35,16 @@
margin-bottom: 0;
.border-bottom-radius(@list-group-border-radius);
}
// Align badges within list items
> .badge {
float: right;
}
> .badge + .badge {
margin-right: 5px;
}
}
// Linked list items
// Interactive list items
//
// Use anchor elements instead of `li`s or `div`s to create linked list items.
// Use anchor or button elements instead of `li`s or `div`s to create interactive items.
// Includes an extra `.active` modifier class for showing selected items.
a.list-group-item {
a.list-group-item,
button.list-group-item {
color: @list-group-link-color;
.list-group-item-heading {
@ -67,6 +60,11 @@ a.list-group-item {
}
}
button.list-group-item {
width: 100%;
text-align: left;
}
.list-group-item {
// Disabled state
&.disabled,
@ -74,6 +72,7 @@ a.list-group-item {
&.disabled:focus {
background-color: @list-group-disabled-bg;
color: @list-group-disabled-color;
cursor: @cursor-disabled;
// Force color to inherit for custom content
.list-group-item-heading {

View File

@ -0,0 +1,66 @@
.media {
// Proper spacing between instances of .media
margin-top: 15px;
&:first-child {
margin-top: 0;
}
}
.media,
.media-body {
zoom: 1;
overflow: hidden;
}
.media-body {
width: 10000px;
}
.media-object {
display: block;
// Fix collapse in webkit from max-width: 100% and display: table-cell.
&.img-thumbnail {
max-width: none;
}
}
.media-right,
.media > .pull-right {
padding-left: 10px;
}
.media-left,
.media > .pull-left {
padding-right: 10px;
}
.media-left,
.media-right,
.media-body {
display: table-cell;
vertical-align: top;
}
.media-middle {
vertical-align: middle;
}
.media-bottom {
vertical-align: bottom;
}
// Reset margins on headings for tighter default spacing
.media-heading {
margin-top: 0;
margin-bottom: 5px;
}
// Media list variation
//
// Undo default ul/ol styles
.media-list {
padding-left: 0;
list-style: none;
}

View File

@ -11,6 +11,7 @@
@import "mixins/responsive-visibility.less";
@import "mixins/size.less";
@import "mixins/tab-focus.less";
@import "mixins/reset-text.less";
@import "mixins/text-emphasis.less";
@import "mixins/text-overflow.less";
@import "mixins/vendor-prefixes.less";

View File

@ -2,7 +2,8 @@
.bg-variant(@color) {
background-color: @color;
a&:hover {
a&:hover,
a&:focus {
background-color: darken(@color, 10%);
}
}

View File

@ -8,14 +8,31 @@
background-color: @background;
border-color: @border;
&:hover,
&:focus,
&.focus {
color: @color;
background-color: darken(@background, 10%);
border-color: darken(@border, 25%);
}
&:hover {
color: @color;
background-color: darken(@background, 10%);
border-color: darken(@border, 12%);
}
&:active,
&.active,
.open > .dropdown-toggle& {
color: @color;
background-color: darken(@background, 10%);
border-color: darken(@border, 12%);
&:hover,
&:focus,
&.focus {
color: @color;
background-color: darken(@background, 17%);
border-color: darken(@border, 25%);
}
}
&:active,
&.active,
@ -28,6 +45,7 @@
&,
&:hover,
&:focus,
&.focus,
&:active,
&.active {
background-color: @background;

View File

@ -10,7 +10,11 @@
.radio,
.checkbox,
.radio-inline,
.checkbox-inline {
.checkbox-inline,
&.radio label,
&.checkbox label,
&.radio-inline label,
&.checkbox-inline label {
color: @text-color;
}
// Set the border and box shadow on specific inputs to match

View File

@ -5,7 +5,7 @@
.make-grid-columns() {
// Common styles for all sizes of grid columns, widths 1-12
.col(@index) when (@index = 1) { // initial
.col(@index) { // initial
@item: ~".col-xs-@{index}, .col-sm-@{index}, .col-md-@{index}, .col-lg-@{index}";
.col((@index + 1), @item);
}
@ -19,15 +19,15 @@
// Prevent columns from collapsing when empty
min-height: 1px;
// Inner gutter via padding
padding-left: (@grid-gutter-width / 2);
padding-right: (@grid-gutter-width / 2);
padding-left: ceil((@grid-gutter-width / 2));
padding-right: floor((@grid-gutter-width / 2));
}
}
.col(1); // kickstart it
}
.float-grid-columns(@class) {
.col(@index) when (@index = 1) { // initial
.col(@index) { // initial
@item: ~".col-@{class}-@{index}";
.col((@index + 1), @item);
}

View File

@ -13,8 +13,8 @@
// Creates a wrapper for a series of columns
.make-row(@gutter: @grid-gutter-width) {
margin-left: (@gutter / -2);
margin-right: (@gutter / -2);
margin-left: ceil((@gutter / -2));
margin-right: floor((@gutter / -2));
&:extend(.clearfix all);
}

View File

@ -1,6 +1,6 @@
// CSS image replacement
//
// Heads up! v3 launched with with only `.hide-text()`, but per our pattern for
// Heads up! v3 launched with only `.hide-text()`, but per our pattern for
// mixins being reused as classes with the same name, this doesn't hold up. As
// of v3.0.1 we have added `.text-hide()` and deprecated `.hide-text()`.
//

View File

@ -8,7 +8,6 @@
// Keep images from scaling beyond the width of their parents.
.img-responsive(@display: block) {
display: @display;
width: 100% \9; // Force IE10 and below to size SVG images correctly
max-width: 100%; // Part 1: Set a maximum relative to the parent
height: auto; // Part 2: Scale the height according to the width, otherwise you get stretching
}

View File

@ -5,7 +5,8 @@
color: @color;
background-color: @background;
a& {
a&,
button& {
color: @color;
.list-group-item-heading {

View File

@ -1,11 +1,12 @@
// Pagination
.pagination-size(@padding-vertical; @padding-horizontal; @font-size; @border-radius) {
.pagination-size(@padding-vertical; @padding-horizontal; @font-size; @line-height; @border-radius) {
> li {
> a,
> span {
padding: @padding-vertical @padding-horizontal;
font-size: @font-size;
line-height: @line-height;
}
&:first-child {
> a,

View File

@ -0,0 +1,18 @@
.reset-text() {
font-family: @font-family-base;
// We deliberately do NOT reset font-size.
font-style: normal;
font-weight: normal;
letter-spacing: normal;
line-break: auto;
line-height: @line-height-base;
text-align: left; // Fallback for where `start` is not supported
text-align: start;
text-decoration: none;
text-shadow: none;
text-transform: none;
white-space: normal;
word-break: normal;
word-spacing: normal;
word-wrap: normal;
}

View File

@ -4,7 +4,7 @@
// More easily include all the states for responsive-utilities.less.
.responsive-visibility() {
display: block !important;
table& { display: table; }
table& { display: table !important; }
tr& { display: table-row !important; }
th&,
td& { display: table-cell !important; }

View File

@ -2,7 +2,8 @@
.text-emphasis-variant(@color) {
color: @color;
a&:hover {
a&:hover,
a&:focus {
color: darken(@color, 10%);
}
}

View File

@ -99,9 +99,12 @@
// Placeholder text
.placeholder(@color: @input-color-placeholder) {
&::-moz-placeholder { color: @color; // Firefox
opacity: 1; } // See https://github.com/twbs/bootstrap/pull/11526
&:-ms-input-placeholder { color: @color; } // Internet Explorer 10+
// Firefox
&::-moz-placeholder {
color: @color;
opacity: 1; // Override Firefox's unusual default opacity; see https://github.com/twbs/bootstrap/pull/11526
}
&:-ms-input-placeholder { color: @color; } // Internet Explorer 10+
&::-webkit-input-placeholder { color: @color; } // Safari and Chrome
}

View File

@ -30,10 +30,10 @@
// When fading in the modal, animate it to slide down
&.fade .modal-dialog {
.translate3d(0, -25%, 0);
.translate(0, -25%);
.transition-transform(~"0.3s ease-out");
}
&.in .modal-dialog { .translate3d(0, 0, 0) }
&.in .modal-dialog { .translate(0, 0) }
}
.modal-open .modal {
overflow-x: hidden;

View File

@ -92,7 +92,7 @@
.navbar-collapse {
max-height: @navbar-collapse-max-height;
@media (max-width: @screen-xs-min) and (orientation: landscape) {
@media (max-device-width: @screen-xs-min) and (orientation: landscape) {
max-height: 200px;
}
}
@ -141,7 +141,6 @@
right: 0;
left: 0;
z-index: @zindex-navbar-fixed;
.translate3d(0, 0, 0);
// Undo the rounded corners
@media (min-width: @grid-float-breakpoint) {
@ -173,6 +172,10 @@
text-decoration: none;
}
> img {
display: block;
}
@media (min-width: @grid-float-breakpoint) {
.navbar > .container &,
.navbar > .container-fluid & {
@ -271,26 +274,10 @@
padding-bottom: @navbar-padding-vertical;
}
}
&.navbar-right:last-child {
margin-right: -@navbar-padding-horizontal;
}
}
}
// Component alignment
//
// Repurpose the pull utilities as their own navbar utilities to avoid specificity
// issues with parents and chaining. Only do this when the navbar is uncollapsed
// though so that navbar contents properly stack and align in mobile.
@media (min-width: @grid-float-breakpoint) {
.navbar-left { .pull-left(); }
.navbar-right { .pull-right(); }
}
// Navbar form
//
// Extension of the `.form-inline` with some extra flavor for optimum display in
@ -311,6 +298,10 @@
.form-group {
@media (max-width: @grid-float-breakpoint-max) {
margin-bottom: 5px;
&:last-child {
margin-bottom: 0;
}
}
}
@ -326,11 +317,6 @@
padding-top: 0;
padding-bottom: 0;
.box-shadow(none);
// Outdent the form if last child to line up with content down the page
&.navbar-right:last-child {
margin-right: -@navbar-padding-horizontal;
}
}
}
@ -344,6 +330,8 @@
}
// Menu position and menu caret support for dropups via extra dropup class
.navbar-fixed-bottom .navbar-nav > li > .dropdown-menu {
margin-bottom: 0;
.border-top-radius(@navbar-border-radius);
.border-bottom-radius(0);
}
@ -375,14 +363,31 @@
float: left;
margin-left: @navbar-padding-horizontal;
margin-right: @navbar-padding-horizontal;
}
}
// Outdent the form if last child to line up with content down the page
&.navbar-right:last-child {
// Component alignment
//
// Repurpose the pull utilities as their own navbar utilities to avoid specificity
// issues with parents and chaining. Only do this when the navbar is uncollapsed
// though so that navbar contents properly stack and align in mobile.
//
// Declared after the navbar components to ensure more specificity on the margins.
@media (min-width: @grid-float-breakpoint) {
.navbar-left { .pull-left(); }
.navbar-right {
.pull-right();
margin-right: -@navbar-padding-horizontal;
~ .navbar-right {
margin-right: 0;
}
}
}
// Alternate navbars
// --------------------------------------------------

View File

@ -36,7 +36,7 @@
color: @nav-disabled-link-hover-color;
text-decoration: none;
background-color: transparent;
cursor: not-allowed;
cursor: @cursor-disabled;
}
}
}

View File

@ -1,9 +1,9 @@
/*! normalize.css v3.0.1 | MIT License | git.io/normalize */
/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */
//
// 1. Set default font family to sans-serif.
// 2. Prevent iOS text size adjust after orientation change, without disabling
// user zoom.
// 2. Prevent iOS and IE text size adjust after device orientation change,
// without disabling user zoom.
//
html {
@ -25,7 +25,8 @@ body {
//
// Correct `block` display not defined for any HTML5 element in IE 8/9.
// Correct `block` display not defined for `details` or `summary` in IE 10/11 and Firefox.
// Correct `block` display not defined for `details` or `summary` in IE 10/11
// and Firefox.
// Correct `block` display not defined for `main` in IE 11.
//
@ -38,6 +39,7 @@ footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
@ -69,7 +71,7 @@ audio:not([controls]) {
//
// Address `[hidden]` styling not present in IE 8/9/10.
// Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22.
// Hide the `template` element in IE 8/9/10/11, Safari, and Firefox < 22.
//
[hidden],
@ -85,11 +87,12 @@ template {
//
a {
background: transparent;
background-color: transparent;
}
//
// Improve readability when focused and also mouse hovered in all browsers.
// Improve readability of focused elements when they are also in an
// active/hover state.
//
a:active,
@ -207,7 +210,6 @@ figure {
//
hr {
-moz-box-sizing: content-box;
box-sizing: content-box;
height: 0;
}
@ -348,15 +350,12 @@ input[type="number"]::-webkit-outer-spin-button {
//
// 1. Address `appearance` set to `searchfield` in Safari and Chrome.
// 2. Address `box-sizing` set to `border-box` in Safari and Chrome
// (include `-moz` to future-proof).
// 2. Address `box-sizing` set to `border-box` in Safari and Chrome.
//
input[type="search"] {
-webkit-appearance: textfield; // 1
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box; // 2
box-sizing: content-box;
box-sizing: content-box; //2
}
//

View File

@ -48,8 +48,7 @@
> span {
color: @pager-disabled-color;
background-color: @pager-bg;
cursor: not-allowed;
cursor: @cursor-disabled;
}
}
}

View File

@ -40,6 +40,7 @@
> li > span {
&:hover,
&:focus {
z-index: 2;
color: @pagination-hover-color;
background-color: @pagination-hover-bg;
border-color: @pagination-hover-border;
@ -51,7 +52,7 @@
&,
&:hover,
&:focus {
z-index: 2;
z-index: 3;
color: @pagination-active-color;
background-color: @pagination-active-bg;
border-color: @pagination-active-border;
@ -69,7 +70,7 @@
color: @pagination-disabled-color;
background-color: @pagination-disabled-bg;
border-color: @pagination-disabled-border;
cursor: not-allowed;
cursor: @cursor-disabled;
}
}
}
@ -79,10 +80,10 @@
// Large
.pagination-lg {
.pagination-size(@padding-large-vertical; @padding-large-horizontal; @font-size-large; @border-radius-large);
.pagination-size(@padding-large-vertical; @padding-large-horizontal; @font-size-large; @line-height-large; @border-radius-large);
}
// Small
.pagination-sm {
.pagination-size(@padding-small-vertical; @padding-small-horizontal; @font-size-small; @border-radius-small);
.pagination-size(@padding-small-vertical; @padding-small-horizontal; @font-size-small; @line-height-small; @border-radius-small);
}

View File

@ -36,7 +36,11 @@
font-size: ceil((@font-size-base * 1.125));
color: inherit;
> a {
> a,
> small,
> .small,
> small > a,
> .small > a {
color: inherit;
}
}
@ -56,7 +60,8 @@
// any kind of custom content between the two.
.panel {
> .list-group {
> .list-group,
> .panel-collapse > .list-group {
margin-bottom: 0;
.list-group-item {
@ -71,6 +76,7 @@
.border-top-radius((@panel-border-radius - 1));
}
}
// Add border bottom radius for last one
&:last-child {
.list-group-item:last-child {
@ -79,6 +85,11 @@
}
}
}
> .panel-heading + .panel-collapse > .list-group {
.list-group-item:first-child {
.border-top-radius(0);
}
}
}
// Collapse space between when there's no additional content.
.panel-heading + .list-group {
@ -100,6 +111,11 @@
> .table-responsive > .table,
> .panel-collapse > .table {
margin-bottom: 0;
caption {
padding-left: @panel-body-padding;
padding-right: @panel-body-padding;
}
}
// Add border top radius for first one
> .table:first-child,
@ -109,6 +125,9 @@
> thead:first-child,
> tbody:first-child {
> tr:first-child {
border-top-left-radius: (@panel-border-radius - 1);
border-top-right-radius: (@panel-border-radius - 1);
td:first-child,
th:first-child {
border-top-left-radius: (@panel-border-radius - 1);
@ -128,6 +147,9 @@
> tbody:last-child,
> tfoot:last-child {
> tr:last-child {
border-bottom-left-radius: (@panel-border-radius - 1);
border-bottom-right-radius: (@panel-border-radius - 1);
td:first-child,
th:first-child {
border-bottom-left-radius: (@panel-border-radius - 1);
@ -140,7 +162,9 @@
}
}
> .panel-body + .table,
> .panel-body + .table-responsive {
> .panel-body + .table-responsive,
> .table + .panel-body,
> .table-responsive + .panel-body {
border-top: 1px solid @table-border-color;
}
> .table > tbody:first-child > tr:first-child th,
@ -202,6 +226,7 @@
.panel {
margin-bottom: 0;
border-radius: @panel-border-radius;
+ .panel {
margin-top: 5px;
}
@ -209,10 +234,13 @@
.panel-heading {
border-bottom: 0;
+ .panel-collapse > .panel-body {
+ .panel-collapse > .panel-body,
+ .panel-collapse > .list-group {
border-top: 1px solid @panel-inner-border;
}
}
.panel-footer {
border-top: 0;
+ .panel-collapse .panel-body {

View File

@ -11,7 +11,11 @@
display: none;
max-width: @popover-max-width;
padding: 1px;
text-align: left; // Reset given new insertion method
// Our parent element can be arbitrary since popovers are by default inserted as a sibling of their target element.
// So reset our font and text properties to avoid inheriting weird values.
.reset-text();
font-size: @font-size-base;
background-color: @popover-bg;
background-clip: padding-box;
border: 1px solid @popover-fallback-border-color;
@ -19,9 +23,6 @@
border-radius: @border-radius-large;
.box-shadow(0 5px 10px rgba(0,0,0,.2));
// Overrides for proper insertion
white-space: normal;
// Offset the popover to account for the popover arrow
&.top { margin-top: -@popover-arrow-width; }
&.right { margin-left: @popover-arrow-width; }
@ -33,8 +34,6 @@
margin: 0; // reset heading margin
padding: 8px 14px;
font-size: @font-size-base;
font-weight: normal;
line-height: 18px;
background-color: @popover-title-bg;
border-bottom: 1px solid darken(@popover-title-bg, 5%);
border-radius: (@border-radius-large - 1) (@border-radius-large - 1) 0 0;
@ -129,5 +128,4 @@
bottom: -@popover-arrow-width;
}
}
}

View File

@ -0,0 +1,101 @@
/*! Source: https://github.com/h5bp/html5-boilerplate/blob/master/src/css/main.css */
// ==========================================================================
// Print styles.
// Inlined to avoid the additional HTTP request: h5bp.com/r
// ==========================================================================
@media print {
*,
*:before,
*:after {
background: transparent !important;
color: #000 !important; // Black prints faster: h5bp.com/s
box-shadow: none !important;
text-shadow: none !important;
}
a,
a:visited {
text-decoration: underline;
}
a[href]:after {
content: " (" attr(href) ")";
}
abbr[title]:after {
content: " (" attr(title) ")";
}
// Don't show links that are fragment identifiers,
// or use the `javascript:` pseudo protocol
a[href^="#"]:after,
a[href^="javascript:"]:after {
content: "";
}
pre,
blockquote {
border: 1px solid #999;
page-break-inside: avoid;
}
thead {
display: table-header-group; // h5bp.com/t
}
tr,
img {
page-break-inside: avoid;
}
img {
max-width: 100% !important;
}
p,
h2,
h3 {
orphans: 3;
widows: 3;
}
h2,
h3 {
page-break-after: avoid;
}
// Bootstrap specific changes start
// Bootstrap components
.navbar {
display: none;
}
.btn,
.dropup > .btn {
> .caret {
border-top-color: #000 !important;
}
}
.label {
border: 1px solid #000;
}
.table {
border-collapse: collapse !important;
td,
th {
background-color: #fff !important;
}
}
.table-bordered {
th,
td {
border: 1px solid #ddd !important;
}
}
// Bootstrap specific changes end
}

View File

@ -19,7 +19,6 @@
}
// Bar itself
// -------------------------
@ -29,7 +28,7 @@
height: @line-height-computed;
margin-bottom: @line-height-computed;
background-color: @progress-bg;
border-radius: @border-radius-base;
border-radius: @progress-border-radius;
.box-shadow(inset 0 1px 2px rgba(0,0,0,.1));
}
@ -67,23 +66,6 @@
.animation(progress-bar-stripes 2s linear infinite);
}
// Account for lower percentages
.progress-bar {
&[aria-valuenow="1"],
&[aria-valuenow="2"] {
min-width: 30px;
}
&[aria-valuenow="0"] {
color: @gray-light;
min-width: 30px;
background-color: transparent;
background-image: none;
box-shadow: none;
}
}
// Variations
// -------------------------

View File

@ -12,7 +12,8 @@
.embed-responsive-item,
iframe,
embed,
object {
object,
video {
position: absolute;
top: 0;
left: 0;
@ -21,14 +22,14 @@
width: 100%;
border: 0;
}
// Modifier class for 16:9 aspect ratio
&.embed-responsive-16by9 {
padding-bottom: 56.25%;
}
// Modifier class for 4:3 aspect ratio
&.embed-responsive-4by3 {
padding-bottom: 75%;
}
}
// Modifier class for 16:9 aspect ratio
.embed-responsive-16by9 {
padding-bottom: 56.25%;
}
// Modifier class for 4:3 aspect ratio
.embed-responsive-4by3 {
padding-bottom: 75%;
}

View File

@ -52,7 +52,7 @@ a {
&:hover,
&:focus {
color: @link-hover-color;
text-decoration: underline;
text-decoration: @link-hover-decoration;
}
&:focus {
@ -148,3 +148,14 @@ hr {
clip: auto;
}
}
// iOS "clickable elements" fix for role="button"
//
// Fixes "clickability" issue (and more generally, the firing of events such as focus as well)
// for traditionally non-focusable elements with role="button"
// see https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile
[role="button"] {
cursor: pointer;
}

View File

@ -6,6 +6,12 @@
table {
background-color: @table-bg;
}
caption {
padding-top: @table-cell-padding;
padding-bottom: @table-cell-padding;
color: @text-muted;
text-align: left;
}
th {
text-align: left;
}
@ -105,11 +111,8 @@ th {
// Default zebra-stripe styles (alternating gray and transparent backgrounds)
.table-striped {
> tbody > tr:nth-child(odd) {
> td,
> th {
background-color: @table-bg-accent;
}
> tbody > tr:nth-of-type(odd) {
background-color: @table-bg-accent;
}
}
@ -120,10 +123,7 @@ th {
.table-hover {
> tbody > tr:hover {
> td,
> th {
background-color: @table-bg-hover;
}
background-color: @table-bg-hover;
}
}
@ -133,7 +133,7 @@ th {
// Reset default table behavior
table col[class*="col-"] {
position: static; // Prevent border hiding in Firefox and IE9/10 (see https://github.com/twbs/bootstrap/issues/11623)
position: static; // Prevent border hiding in Firefox and IE9-11 (see https://github.com/twbs/bootstrap/issues/11623)
float: none;
display: table-column;
}
@ -141,7 +141,7 @@ table {
td,
th {
&[class*="col-"] {
position: static; // Prevent border hiding in Firefox and IE9/10 (see https://github.com/twbs/bootstrap/issues/11623)
position: static; // Prevent border hiding in Firefox and IE9-11 (see https://github.com/twbs/bootstrap/issues/11623)
float: none;
display: table-cell;
}
@ -169,14 +169,15 @@ table {
// will display normally.
.table-responsive {
overflow-x: auto;
min-height: 0.01%; // Workaround for IE9 bug (see https://github.com/twbs/bootstrap/issues/14837)
@media screen and (max-width: @screen-xs-max) {
width: 100%;
margin-bottom: (@line-height-computed * 0.75);
overflow-y: hidden;
overflow-x: auto;
-ms-overflow-style: -ms-autohiding-scrollbar;
border: 1px solid @table-border-color;
-webkit-overflow-scrolling: touch;
// Tighten up spacing
> .table {

View File

@ -1,3 +1,8 @@
/*!
* Bootstrap v3.3.5 (http://getbootstrap.com)
* Copyright 2011-2015 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
*/
//
// Load core variables and mixins
@ -7,7 +12,6 @@
@import "mixins.less";
//
// Buttons
// --------------------------------------------------
@ -28,12 +32,22 @@
&.active {
.box-shadow(inset 0 3px 5px rgba(0,0,0,.125));
}
&.disabled,
&[disabled],
fieldset[disabled] & {
.box-shadow(none);
}
.badge {
text-shadow: none;
}
}
// Mixin for generating new styles
.btn-styles(@btn-color: #555) {
#gradient > .vertical(@start-color: @btn-color; @end-color: darken(@btn-color, 12%));
.reset-filter(); // Disable gradients for IE9 because filter bleeds through rounded corners
.reset-filter(); // Disable gradients for IE9 because filter bleeds through rounded corners; see https://github.com/twbs/bootstrap/issues/10620
background-repeat: repeat-x;
border-color: darken(@btn-color, 14%);
@ -49,10 +63,18 @@
border-color: darken(@btn-color, 14%);
}
&:disabled,
&[disabled] {
background-color: darken(@btn-color, 12%);
background-image: none;
&.disabled,
&[disabled],
fieldset[disabled] & {
&,
&:hover,
&:focus,
&.focus,
&:active,
&.active {
background-color: darken(@btn-color, 12%);
background-image: none;
}
}
}
@ -74,7 +96,6 @@
.btn-danger { .btn-styles(@btn-danger-bg); }
//
// Images
// --------------------------------------------------
@ -85,7 +106,6 @@
}
//
// Dropdowns
// --------------------------------------------------
@ -103,7 +123,6 @@
}
//
// Navbar
// --------------------------------------------------
@ -116,8 +135,9 @@
@shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 1px 5px rgba(0,0,0,.075);
.box-shadow(@shadow);
.navbar-nav > .open > a,
.navbar-nav > .active > a {
#gradient > .vertical(@start-color: darken(@navbar-default-bg, 5%); @end-color: darken(@navbar-default-bg, 2%));
#gradient > .vertical(@start-color: darken(@navbar-default-link-active-bg, 5%); @end-color: darken(@navbar-default-link-active-bg, 2%));
.box-shadow(inset 0 3px 9px rgba(0,0,0,.075));
}
}
@ -129,10 +149,11 @@
// Inverted navbar
.navbar-inverse {
#gradient > .vertical(@start-color: lighten(@navbar-inverse-bg, 10%); @end-color: @navbar-inverse-bg);
.reset-filter(); // Remove gradient in IE<10 to fix bug where dropdowns don't get triggered
.reset-filter(); // Remove gradient in IE<10 to fix bug where dropdowns don't get triggered; see https://github.com/twbs/bootstrap/issues/10257
border-radius: @navbar-border-radius;
.navbar-nav > .open > a,
.navbar-nav > .active > a {
#gradient > .vertical(@start-color: @navbar-inverse-bg; @end-color: lighten(@navbar-inverse-bg, 2.5%));
#gradient > .vertical(@start-color: @navbar-inverse-link-active-bg; @end-color: lighten(@navbar-inverse-link-active-bg, 2.5%));
.box-shadow(inset 0 3px 9px rgba(0,0,0,.25));
}
@ -149,6 +170,17 @@
border-radius: 0;
}
// Fix active state of dropdown items in collapsed mode
@media (max-width: @grid-float-breakpoint-max) {
.navbar .navbar-nav .open .dropdown-menu > .active > a {
&,
&:hover,
&:focus {
color: #fff;
#gradient > .vertical(@start-color: @dropdown-link-active-bg; @end-color: darken(@dropdown-link-active-bg, 5%));
}
}
}
//
@ -175,7 +207,6 @@
.alert-danger { .alert-styles(@alert-danger-bg); }
//
// Progress bars
// --------------------------------------------------
@ -218,8 +249,11 @@
text-shadow: 0 -1px 0 darken(@list-group-active-bg, 10%);
#gradient > .vertical(@start-color: @list-group-active-bg; @end-color: darken(@list-group-active-bg, 7.5%));
border-color: darken(@list-group-active-border, 7.5%);
}
.badge {
text-shadow: none;
}
}
//
@ -245,7 +279,6 @@
.panel-danger > .panel-heading { .panel-heading-styles(@panel-danger-heading-bg); }
//
// Wells
// --------------------------------------------------

View File

@ -12,7 +12,7 @@
background-color: @thumbnail-bg;
border: 1px solid @thumbnail-border;
border-radius: @thumbnail-border-radius;
.transition(all .2s ease-in-out);
.transition(border .2s ease-in-out);
> img,
a > img {

View File

@ -8,9 +8,11 @@
position: absolute;
z-index: @zindex-tooltip;
display: block;
visibility: visible;
// Our parent element can be arbitrary since tooltips are by default inserted as a sibling of their target element.
// So reset our font and text properties to avoid inheriting weird values.
.reset-text();
font-size: @font-size-small;
line-height: 1.4;
.opacity(0);
&.in { .opacity(@tooltip-opacity); }
@ -26,7 +28,6 @@
padding: 3px 8px;
color: @tooltip-color;
text-align: center;
text-decoration: none;
background-color: @tooltip-bg;
border-radius: @border-radius-base;
}
@ -39,6 +40,7 @@
border-color: transparent;
border-style: solid;
}
// Note: Deprecated .top-left, .top-right, .bottom-left, and .bottom-right as of v3.3.1
.tooltip {
&.top .tooltip-arrow {
bottom: 0;
@ -49,13 +51,15 @@
}
&.top-left .tooltip-arrow {
bottom: 0;
left: @tooltip-arrow-width;
right: @tooltip-arrow-width;
margin-bottom: -@tooltip-arrow-width;
border-width: @tooltip-arrow-width @tooltip-arrow-width 0;
border-top-color: @tooltip-arrow-color;
}
&.top-right .tooltip-arrow {
bottom: 0;
right: @tooltip-arrow-width;
left: @tooltip-arrow-width;
margin-bottom: -@tooltip-arrow-width;
border-width: @tooltip-arrow-width @tooltip-arrow-width 0;
border-top-color: @tooltip-arrow-color;
}
@ -82,13 +86,15 @@
}
&.bottom-left .tooltip-arrow {
top: 0;
left: @tooltip-arrow-width;
right: @tooltip-arrow-width;
margin-top: -@tooltip-arrow-width;
border-width: 0 @tooltip-arrow-width @tooltip-arrow-width;
border-bottom-color: @tooltip-arrow-color;
}
&.bottom-right .tooltip-arrow {
top: 0;
right: @tooltip-arrow-width;
left: @tooltip-arrow-width;
margin-top: -@tooltip-arrow-width;
border-width: 0 @tooltip-arrow-width @tooltip-arrow-width;
border-bottom-color: @tooltip-arrow-color;
}

View File

@ -80,11 +80,6 @@ small,
font-size: floor((100% * @font-size-small / @font-size-base));
}
// Undo browser default styling
cite {
font-style: normal;
}
mark,
.mark {
background-color: @state-warning-bg;
@ -216,7 +211,7 @@ dd {
&:extend(.clearfix all); // Clear the floated `dt` if an empty `dd` is present
}
@media (min-width: @grid-float-breakpoint) {
@media (min-width: @dl-horizontal-breakpoint) {
dt {
float: left;
width: (@dl-horizontal-offset - 20);
@ -243,7 +238,7 @@ abbr[data-original-title] {
}
.initialism {
font-size: 90%;
text-transform: uppercase;
.text-uppercase();
}
// Blockquotes
@ -299,12 +294,6 @@ blockquote.pull-right {
}
}
// Quotes
blockquote:before,
blockquote:after {
content: "";
}
// Addresses
address {
margin-bottom: @line-height-computed;

View File

@ -44,7 +44,6 @@
.hidden {
display: none !important;
visibility: hidden !important;
}
@ -53,5 +52,4 @@
.affix {
position: fixed;
.translate3d(0, 0, 0);
}

View File

@ -7,13 +7,14 @@
//
//## Gray and brand colors for use across Bootstrap.
@gray-darker: lighten(#000, 13.5%); // #222
@gray-dark: lighten(#000, 20%); // #333
@gray: lighten(#000, 33.5%); // #555
@gray-light: lighten(#000, 46.7%); // #777
@gray-lighter: lighten(#000, 93.5%); // #eee
@gray-base: #000;
@gray-darker: lighten(@gray-base, 13.5%); // #222
@gray-dark: lighten(@gray-base, 20%); // #333
@gray: lighten(@gray-base, 33.5%); // #555
@gray-light: lighten(@gray-base, 46.7%); // #777
@gray-lighter: lighten(@gray-base, 93.5%); // #eee
@brand-primary: #428bca;
@brand-primary: darken(#428bca, 6.5%); // #337ab7
@brand-success: #5cb85c;
@brand-info: #5bc0de;
@brand-warning: #f0ad4e;
@ -33,6 +34,8 @@
@link-color: @brand-primary;
//** Link hover color set via `darken()` function.
@link-hover-color: darken(@link-color, 15%);
//** Link hover decoration.
@link-hover-decoration: underline;
//== Typography
@ -96,7 +99,7 @@
@padding-xs-vertical: 1px;
@padding-xs-horizontal: 5px;
@line-height-large: 1.33;
@line-height-large: 1.3333333; // extra decimals for Win 8.1 Chrome
@line-height-small: 1.5;
@border-radius-base: 4px;
@ -167,6 +170,11 @@
@btn-link-disabled-color: @gray-light;
// Allows for customizing button radius independently from global border radius
@btn-border-radius-base: @border-radius-base;
@btn-border-radius-large: @border-radius-large;
@btn-border-radius-small: @border-radius-small;
//== Forms
//
@ -181,13 +189,21 @@
@input-color: @gray;
//** `<input>` border color
@input-border: #ccc;
//** `<input>` border radius
// TODO: Rename `@input-border-radius` to `@input-border-radius-base` in v4
//** Default `.form-control` border radius
// This has no effect on `<select>`s in some browsers, due to the limited stylability of `<select>`s in CSS.
@input-border-radius: @border-radius-base;
//** Large `.form-control` border radius
@input-border-radius-large: @border-radius-large;
//** Small `.form-control` border radius
@input-border-radius-small: @border-radius-small;
//** Border color for inputs on focus
@input-border-focus: #66afe9;
//** Placeholder text color
@input-color-placeholder: @gray-light;
@input-color-placeholder: #999;
//** Default `.form-control` height
@input-height-base: (@line-height-computed + (@padding-base-vertical * 2) + 2);
@ -196,6 +212,9 @@
//** Small `.form-control` height
@input-height-small: (floor(@font-size-small * @line-height-small) + (@padding-small-vertical * 2) + 2);
//** `.form-group` margin
@form-group-margin-bottom: 15px;
@legend-color: @gray-dark;
@legend-border-color: #e5e5e5;
@ -204,6 +223,9 @@
//** Border color for textual input addons
@input-group-addon-border-color: @input-border;
//** Disabled cursor for form controls and buttons.
@cursor-disabled: not-allowed;
//== Dropdowns
//
@ -315,17 +337,17 @@
//## Define the maximum width of `.container` for different screen sizes.
// Small screen / tablet
@container-tablet: ((720px + @grid-gutter-width));
@container-tablet: (720px + @grid-gutter-width);
//** For `@screen-sm-min` and up.
@container-sm: @container-tablet;
// Medium screen / desktop
@container-desktop: ((940px + @grid-gutter-width));
@container-desktop: (940px + @grid-gutter-width);
//** For `@screen-md-min` and up.
@container-md: @container-desktop;
// Large screen / wide desktop
@container-large-desktop: ((1140px + @grid-gutter-width));
@container-large-desktop: (1140px + @grid-gutter-width);
//** For `@screen-lg-min` and up.
@container-lg: @container-large-desktop;
@ -366,14 +388,14 @@
@navbar-default-toggle-border-color: #ddd;
// Inverted navbar
//=== Inverted navbar
// Reset inverted navbar basics
@navbar-inverse-color: @gray-light;
@navbar-inverse-color: lighten(@gray-light, 15%);
@navbar-inverse-bg: #222;
@navbar-inverse-border: darken(@navbar-inverse-bg, 10%);
// Inverted navbar links
@navbar-inverse-link-color: @gray-light;
@navbar-inverse-link-color: lighten(@gray-light, 15%);
@navbar-inverse-link-hover-color: #fff;
@navbar-inverse-link-hover-bg: transparent;
@navbar-inverse-link-active-color: @navbar-inverse-link-hover-color;
@ -403,8 +425,6 @@
@nav-disabled-link-color: @gray-light;
@nav-disabled-link-hover-color: @gray-light;
@nav-open-link-hover-color: #fff;
//== Tabs
@nav-tabs-border-color: #ddd;
@ -469,6 +489,7 @@
@jumbotron-bg: @gray-lighter;
@jumbotron-heading-color: inherit;
@jumbotron-font-size: ceil((@font-size-base * 1.5));
@jumbotron-heading-font-size: ceil((@font-size-base * 4.5));
//== Form states and alerts
@ -529,7 +550,7 @@
//** Popover arrow width
@popover-arrow-width: 10px;
//** Popover arrow color
@popover-arrow-color: #fff;
@popover-arrow-color: @popover-bg;
//** Popover outer arrow width
@popover-arrow-outer-width: (@popover-arrow-width + 1);
@ -628,6 +649,8 @@
@progress-bg: #f5f5f5;
//** Progress bar text color
@progress-bar-color: #fff;
//** Variable for setting rounded corners on progress bar.
@progress-border-radius: @border-radius-base;
//** Default progress bar color
@progress-bar-bg: @brand-primary;
@ -840,7 +863,7 @@
@page-header-border-color: @gray-lighter;
//** Width of horizontal description list titles
@dl-horizontal-offset: @component-offset-horizontal;
//** Point at which .dl-horizontal becomes horizontal
@dl-horizontal-breakpoint: @grid-float-breakpoint;
//** Horizontal line color.
@hr-border: @gray-lighter;

View File

@ -8,6 +8,7 @@
@import "site/bootstrap/jumbotron";
@import "site/bootstrap/wells";
@import "site/bootstrap/type";
@import "site/bootstrap/modals";
@import "site/layout";
@import "site/social-buttons";

View File

@ -10,19 +10,27 @@
font-size: 80px;
letter-spacing: -2px;
line-height: 1;
text-shadow: 4px 3px 0px @jumbotron-bg, 9px 8px 0px rgba(0,0,0,0.15); // double text shadow
margin: 0 0 15px;
}
p {
font-family: @font-family-alt;
color: mix(@jumbotron-color, @jumbotron-bg, 75%);
margin-top: 15px;
margin-bottom: 15px;
font-size: 24px;
line-height: 1.3;
font-weight: lighter;
}
}
.jumbotron-ad, .jumbotron-carousel {
h1 {
text-shadow: 4px 3px 0px @jumbotron-bg, 9px 8px 0px rgba(0,0,0,0.15); // double text shadow
}
p {
color: mix(@jumbotron-color, @jumbotron-bg, 75%);
text-shadow: 0 1px 0 rgba(0,0,0,0.15);
}
}
.jumbotron-icon {
@ -34,7 +42,6 @@
border-top-color: mix(#fff, @gray-lighter, 50%);
h1 {
color: @gray-darker;
font-size: 30px;
margin-top: @buffer-lg;
small {
letter-spacing: normal;
@ -66,3 +73,7 @@
.fa-1, .fa-2, .fa-3, .fa-4, .fa-5, .fa-6 { margin-right: 1/14em; }
}
h1.info-class {
font-size: 30px;
}

View File

@ -0,0 +1,6 @@
// Scale up the modal
@media (min-width: @screen-sm-min) {
// Modal sizes
.modal-md { width: ((@modal-md + @modal-sm) / 2); }
}

View File

@ -56,7 +56,7 @@
// -------------------
// Brand colors
@brand-success: mix(@fa-green, #fff, 70%);
@brand-success: @fa-green;
// Links

View File

@ -1 +1,10 @@
.well-transparent { background-color: transparent; }
.well-lg {
padding: @buffer-xl;
font-size: @font-size-large + 3;
h1 { font-size: 3em; }
h2 { font-size: 2em; }
h1, h2 { margin-top: 0; }
p { margin-bottom: 30px; }
}

View File

@ -1,63 +1,80 @@
@buffer-none: 0px;
@buffer-sm: 5px;
@buffer-md: 10px;
@buffer-lg: 22px;
@buffer-none: 0px;
@buffer-sm: 5px;
@buffer-md: 10px;
@buffer-lg: 22px;
@buffer-xl: 40px;
.padding-none { padding: @buffer-none !important; }
.padding { padding: @buffer-md !important; }
.padding-sm { padding: @buffer-sm !important; }
.padding-lg { padding: @buffer-lg !important; }
.padding-xl { padding: @buffer-xl !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-top-xl { padding-top: @buffer-xl !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-right-xl { padding-right: @buffer-xl !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-bottom-xl { padding-bottom: @buffer-xl !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; }
.padding-left-xl { padding-left: @buffer-xl !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-xl { margin: @buffer-xl !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-top-lg { margin-top: @buffer-lg !important; }
.margin-top-xl { margin-top: @buffer-xl !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-right-lg { margin-right: @buffer-lg !important; }
.margin-right-xl { margin-right: @buffer-xl !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-bottom-lg { margin-bottom: @buffer-lg !important; }
.margin-bottom-xl { margin-bottom: @buffer-xl !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; }
.margin-left-lg { margin-left: @buffer-lg !important; }
.margin-left-xl { margin-left: @buffer-xl !important; }
.border-left-none { border-left: none !important; }
.border-right-none { border-right: none !important; }
.border-bottom-none { border-bottom: none !important; }
.border-top-none { border-top: none !important; }
.text-sm { font-size: @font-size-small !important; }
.text-base { font-size: @font-size-base !important; }
.text-md { font-size: @font-size-base + 2 !important; }
.text-lg { font-size: @font-size-large !important; }
.display-block { display: block; } // use to swap an anchor tag to span a whole row to make click target larger
.no-underline:hover { text-decoration: none; }
.clickable { cursor: pointer; }

View File

@ -72,4 +72,11 @@
}
.hide-xs { display: none; }
.block-xs { display: block; }
.modal-footer .block-xs + .block-xs {
margin-left: 0;
margin-top: 10px;
}
}

View File

@ -7,3 +7,8 @@
border-top: 1px solid #fff;
border-bottom: 1px solid #eee;
}
#subscribe {
padding: 22px 0 17px;
text-align: center;
}

View File

@ -20,3 +20,5 @@ relative_path: ./
{% include why.html %}
{% include thanks-to.html %}
</div>
{% include modals/download.html %}

29
src/thanks.html Normal file
View File

@ -0,0 +1,29 @@
---
layout: base
title: Thanks for subscribing!
relative_path: ../
---
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2 margin-top-lg">
<div class="well well-lg margin-top-xl margin-bottom-none">
<h1>You're all set!</h1>
<p>
Thanks for signing up!
We'll send you email updates on new Font Awesome releases, icons, and other stuff that we're working on.
We won't spam you. Scout's honor!
</p>
<h2>What's next?</h2>
<p>
Want to see what we're working on next? Check out Fonticons! We're making it easy to put the perfect icons
on your website. Pick from gorgeous, complete icon sets or copy and paste your own vector icons.
</p>
<a href="https://fonticons.com/?utm_source=font_awesome_homepage&utm_medium=display&utm_content=subscribe_thanks&utm_campaign=promo_4.3_update" class="btn btn-lg btn-success">Check out Fonticons!</a>
</div>
</div>
</div>
</div>