aboutsummaryrefslogtreecommitdiff
path: root/docs/assets/css/docs.css
diff options
context:
space:
mode:
Diffstat (limited to 'docs/assets/css/docs.css')
-rw-r--r--docs/assets/css/docs.css507
1 files changed, 271 insertions, 236 deletions
diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css
index aca8df213..305247251 100644
--- a/docs/assets/css/docs.css
+++ b/docs/assets/css/docs.css
@@ -10,94 +10,60 @@
body {
position: relative; /* For scrollyspy */
- /* We add the padding to the body for >768px only */
+ padding-top: 50px; /* Account for fixed navbar */
}
-hr {
- margin-top: 30px;
- margin-bottom: 30px;
-}
-.bs-docs-dl-options h4 {
- margin-top: 15px;
- margin-bottom: 5px;
-}
-.bs-docs-container,
-.bs-home-container {
- padding-left: 15px;
- padding-right: 15px;
-}
-.bs-docs-container {
- max-width: 860px;
-}
-.bs-docs-container .row {
- margin-left: -15px;
- margin-right: -15px;
-}
+/* Top nav and header
+-------------------------------------------------- */
-/* Side notes for calling out things */
-.bs-docs-sidenote {
- margin: 20px 0;
- padding: 15px 30px 15px 15px;
- background-color: #fcf2f2;
- border-left: 5px solid #df7c7b;
+.bs-docs-nav {
+ background-color: #b94a48;
}
-.bs-docs-sidenote h4 {
- margin-top: 0;
+.bs-docs-nav .navbar-brand {
+ color: #fff;
}
-.bs-docs-sidenote p:last-child {
- margin-bottom: 0;
+.bs-docs-nav .navbar-nav > li > a {
+ color: #e6cac8;
}
-.bs-docs-sidenote code,
-.bs-docs-sidenote .highlight {
- background-color: #fff;
+.bs-docs-nav .navbar-nav > li > a:hover {
+ color: #fff;
}
-
-
-/* Sections
--------------------------------------------------- */
-
-/* Padding for in-page bookmarks */
-section,
-.bs-docs-section {
- padding-top: 30px;
+.bs-docs-nav .navbar-nav > .active > a,
+.bs-docs-nav .navbar-nav > .active > a:hover {
+ color: #fff;
+ background-color: #993c3a;
}
-
-/* Few stylistic typography tweaks */
-section > .page-header,
-section > .lead {
- color: #5a5a5a;
+.bs-docs-nav .navbar-toggle {
+ border-color: #b94a48;
}
-section > ul li {
- margin-bottom: 5px;
+.bs-docs-nav .navbar-toggle:hover {
+ background-color: #993c3a;
+ border-color: #993c3a;
}
-/* Jumbotrons
+/* Homepage masthead
-------------------------------------------------- */
-.bs-docs-section-header {
- padding-top: 60px;
- color: #b94a48;
- border-bottom: 5px solid #b94a48;
-}
-
-/* Base class */
-.bs-docs-jumbotron {
+.bs-masthead {
position: relative;
margin-bottom: 20px;
padding: 30px 15px;
text-align: center;
}
-.bs-docs-jumbotron h1 {
+.bs-masthead h1 {
font-size: 50px;
line-height: 1;
}
+.bs-masthead .bs-social {
+ margin-top: 80px;
+}
/* Download button */
-.bs-docs-jumbotron .btn {
+.bs-masthead .btn {
margin-top: 5px;
margin-bottom: 5px;
padding: 18px 24px;
@@ -106,79 +72,129 @@ section > ul li {
background-color: #fff;
border-color: #e5e5e5;
}
-.bs-docs-jumbotron .btn:hover,
-.bs-docs-jumbotron .btn:active {
+.bs-masthead .btn:hover,
+.bs-masthead .btn:active {
color: #fff; /* redeclare to override the `.jumbotron a` */
background-color: #b94a48;
border-color: #b94a48;
}
-/* Textual links in masthead */
-.masthead-links {
+/* Textual links */
+.bs-masthead-links {
margin: 20px 0;
list-style: none;
}
-.masthead-links li {
+.bs-masthead-links li {
display: inline;
color: #999;
}
-.masthead-links li + li {
+.bs-masthead-links li + li {
margin-left: 20px;
}
-/* Special grid styles
+/* Customize and Download button
-------------------------------------------------- */
-.show-grid {
- margin-bottom: 15px;
+.bs-customizer {
+
}
-.show-grid .col {
- padding-top: 10px;
- padding-bottom: 10px;
- background-color: #eee;
- border: 1px solid #ddd;
+.bs-customizer .toggle {
+ float: right;
}
-.show-grid .col:hover {
- background-color: #ddd;
+.bs-customizer label {
+ margin-top: 10px;
+ font-weight: 500;
+ color: #555;
+}
+.bs-customizer h4 {
+ margin-top: 15px;
+}
+.bs-customizer input[type="text"] {
+ background-color: #fafafa;
}
+.bs-customize-download {
+ text-align:center;
+}
+.bs-customize-download .btn {
+ margin-top: 5px;
+ margin-bottom: 5px;
+ padding: 18px 24px;
+ font-size: 21px;
+ color: #b94a48;
+ background-color: #fff;
+ border-color: #b94a48;
+}
+.bs-customize-download .btn:hover,
+.bs-customize-download .btn:active {
+ color: #fff;
+ background-color: #b94a48;
+}
-/* Sidenav
+
+
+/* Docs pages and sections
-------------------------------------------------- */
-.bs-docs-sidebar {
- display: none;
- position: fixed;
- top: 0;
- left: 0;
- bottom: 0;
- width: 240px;
- overflow-y: scroll;
+/* Page headers */
+.bs-header {
+ padding: 30px 30px 40px;
+ font-size: 16px;
+ color: #5a5a5a;
+ text-align: center;
+ border-bottom: 1px solid #ddd;
+}
+.bs-header h1 {
+ color: #b94a48;
+}
+.bs-header p {
+ font-weight: 300;
+ line-height: 1.5;
+}
+
+/* Padding for in-page bookmarks */
+.bs-docs-section {
+ padding-top: 30px;
+}
+
+
+
+/* Docs sidebar
+-------------------------------------------------- */
+
+/* By default it's not affixed in mobile views, so undo that */
+.bs-sidebar.affix {
+ position: static;
+}
+
+/* First level of nav */
+.bs-sidenav {
+ margin-top: 30px;
+ margin-bottom: 30px;
+ padding-top: 15px;
+ padding-bottom: 15px;
text-shadow: 0 1px 0 #fff;
background-color: #f5f5f5;
- box-shadow: inset -1px 0 0 #e5e5e5;
+ border-radius: 5px;
}
-/* Nav: first level */
-.bs-docs-sidebar > .nav {
- margin: 0 0 25px 0;
-}
-.bs-docs-sidebar .nav > li > a {
+/* All levels of nav */
+.bs-sidebar .nav > li > a {
display: block;
color: #666;
- padding: 4px 25px;
+ padding: 4px 20px;
}
-.bs-docs-sidebar .nav > li > a:hover,
-.bs-docs-sidebar .nav > li > a:focus {
+.bs-sidebar .nav > li > a:hover,
+.bs-sidebar .nav > li > a:focus {
text-decoration: none;
border-right: 1px solid #d5d5d5;
}
-.bs-docs-sidebar .nav > .active > a,
-.bs-docs-sidebar .nav > .active:hover > a,
-.bs-docs-sidebar .nav > .active:focus > a {
+.bs-sidebar .nav > .active > a,
+.bs-sidebar .nav > .active:hover > a,
+.bs-sidebar .nav > .active:focus > a {
font-weight: 500;
color: #b94a48;
background-color: transparent;
@@ -186,47 +202,58 @@ section > ul li {
}
/* Nav: second level (shown on .active) */
-.bs-docs-sidebar .nav .nav {
+.bs-sidebar .nav .nav {
display: none;
margin-bottom: 5px;
}
-.bs-docs-sidebar .nav > .active > ul {
+.bs-sidebar .nav > .active > ul {
display: block;
}
-.bs-docs-sidebar .nav .nav > li > a {
+.bs-sidebar .nav .nav > li > a {
padding-top: 2px;
padding-bottom: 2px;
- padding-left: 40px;
+ padding-left: 30px;
font-size: 90%;
}
-.bs-docs-sidenav-heading {
- margin: 0 0 25px;
+
+
+/* Side notes for calling out things
+-------------------------------------------------- */
+
+.bs-callout {
+ margin: 20px 0;
+ padding: 15px 30px 15px 15px;
+ background-color: #fcf2f2;
+ border-left: 5px solid #df7c7b;
}
-.bs-docs-sidenav-heading a {
- display: block;
- padding: 15px 25px;
- color: #b94a48;
- border-bottom: 1px solid #e5e5e5;
- box-shadow: 0 1px 0 #fff;
+.bs-callout h4 {
+ margin-top: 0;
}
-.bs-docs-sidenav-heading a:hover {
- color: #a3403e;
- text-decoration: none;
+.bs-callout p:last-child {
+ margin-bottom: 0;
+}
+.bs-callout code,
+.bs-callout .highlight {
+ background-color: #fff;
}
-/* Section headings for groups of links */
-.bs-docs-sidenav > li > .nav-header {
- margin-top: 20px;
- margin-bottom: 5px;
- font-size: 14px;
- font-weight: 500;
- color: #333;
+
+
+/* Special grid styles
+-------------------------------------------------- */
+
+.show-grid {
+ margin-bottom: 15px;
}
-.bs-docs-sidenav > .active > .nav-header,
-.bs-docs-sidenav > .active > .nav-header:hover {
- color: #333;
- border-color: #333;
+.show-grid .col {
+ padding-top: 10px;
+ padding-bottom: 10px;
+ background-color: #eee;
+ border: 1px solid #ddd;
+}
+.show-grid .col:hover {
+ background-color: #ddd;
}
@@ -235,7 +262,7 @@ section > ul li {
-------------------------------------------------- */
/* Base class */
-.bs-docs-example {
+.bs-example {
position: relative;
padding: 39px 14px 14px;
margin-bottom: -1px;
@@ -244,7 +271,7 @@ section > ul li {
border-top-right-radius: 4px;
}
/* Echo out a label for the example */
-.bs-docs-example:after {
+.bs-example:after {
content: "Example";
position: absolute;
top: -1px;
@@ -260,56 +287,70 @@ section > ul li {
}
/* Tweak display of the examples */
-.bs-docs-example + .prettyprint,
-.bs-docs-example + .highlight {
+.bs-example + .prettyprint,
+.bs-example + .highlight {
margin-top: 0;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
/* Tweak content of examples for optimum awesome */
-.bs-docs-example > p:last-child,
-.bs-docs-example > ul:last-child,
-.bs-docs-example > ol:last-child,
-.bs-docs-example > blockquote:last-child,
-.bs-docs-example > input:last-child,
-.bs-docs-example > select:last-child,
-.bs-docs-example > textarea:last-child,
-.bs-docs-example > .table:last-child,
-.bs-docs-example > .jumbotron:last-child,
-.bs-docs-example > .alert:last-child,
-.bs-docs-example > .panel:last-child,
-.bs-docs-example > .list-group:last-child,
-.bs-docs-example > .well:last-child {
+.bs-example > p:last-child,
+.bs-example > ul:last-child,
+.bs-example > ol:last-child,
+.bs-example > blockquote:last-child,
+.bs-example > input:last-child,
+.bs-example > select:last-child,
+.bs-example > textarea:last-child,
+.bs-example > .table:last-child,
+.bs-example > .navbar:last-child
+.bs-example > .jumbotron:last-child,
+.bs-example > .alert:last-child,
+.bs-example > .panel:last-child,
+.bs-example > .list-group:last-child,
+.bs-example > .well:last-child {
margin-bottom: 0;
}
+.bs-example > .close {
+ float: none;
+}
/* Typography */
-.bs-docs-example-type .table td {
+.bs-example-type .table td {
color: #999;
vertical-align: middle;
border-color: ;
}
-.bs-docs-example-type .table td,
-.bs-docs-example-type .table th {
+.bs-example-type .table td,
+.bs-example-type .table th {
padding: 15px 0;
border-color: #eee;
}
-.bs-docs-example-type .table tr:first-child td,
-.bs-docs-example-type .table tr:first-child th {
+.bs-example-type .table tr:first-child td,
+.bs-example-type .table tr:first-child th {
border-top: 0;
}
-.bs-docs-example-type h1,
-.bs-docs-example-type h2,
-.bs-docs-example-type h3,
-.bs-docs-example-type h4,
-.bs-docs-example-type h5,
-.bs-docs-example-type h6 {
+.bs-example-type h1,
+.bs-example-type h2,
+.bs-example-type h3,
+.bs-example-type h4,
+.bs-example-type h5,
+.bs-example-type h6 {
margin: 0;
}
+/* Forms */
+.bs-example.form-inline select,
+.bs-example.form-inline input[type="text"],
+.bs-example.form-inline input[type="password"] {
+ width: 180px;
+}
+.bs-example-control-sizing input[type="text"] + input[type="text"] {
+ margin-top: 10px;
+}
+
/* List groups */
-.bs-docs-example > .list-group {
+.bs-example > .list-group {
max-width: 400px;
}
@@ -355,10 +396,10 @@ section > ul li {
}
/* Example modals */
-.bs-docs-example-modal {
+.bs-example-modal {
background-color: #f5f5f5;
}
-.bs-docs-example-modal .modal {
+.bs-example-modal .modal {
position: relative;
top: auto;
right: auto;
@@ -367,49 +408,49 @@ section > ul li {
z-index: 1;
display: block;
}
-.bs-docs-example-modal .modal-dialog {
+.bs-example-modal .modal-dialog {
left: auto;
margin-left: auto;
margin-right: auto;
}
/* Example dropdowns */
-.bs-docs-example > .dropdown > .dropdown-menu,
-.bs-docs-example-submenu > .pull-left > .dropup > .dropdown-menu,
-.bs-docs-example-submenu > .pull-left > .dropdown > .dropdown-menu {
+.bs-example > .dropdown > .dropdown-menu,
+.bs-example-submenu > .pull-left > .dropup > .dropdown-menu,
+.bs-example-submenu > .pull-left > .dropdown > .dropdown-menu {
position: static;
display: block;
margin-bottom: 5px;
}
-.bs-docs-example-submenu {
+.bs-example-submenu {
min-height: 230px;
}
-.bs-docs-example-submenu > .pull-left + .pull-left {
+.bs-example-submenu > .pull-left + .pull-left {
margin-left: 20px;
}
/* Example tabbable tabs */
-.bs-docs-example-tabs .nav-tabs {
+.bs-example-tabs .nav-tabs {
margin-bottom: 15px;
}
/* Tooltips */
-.bs-docs-tooltip-examples {
+.bs-example-tooltips {
text-align: center;
margin: 0 0 10px;
list-style: none;
}
-.bs-docs-tooltip-examples li {
+.bs-example-tooltips li {
display: inline;
padding: 0 10px;
}
/* Popovers */
-.bs-docs-example-popover {
+.bs-example-popover {
padding-bottom: 24px;
background-color: #f9f9f9;
}
-.bs-docs-example-popover .popover {
+.bs-example-popover .popover {
position: relative;
display: block;
float: left;
@@ -418,13 +459,14 @@ section > ul li {
}
+
/* Example templates
-------------------------------------------------- */
-.bs-docs-examples h4 {
+.bs-examples h4 {
margin-bottom: 5px;
}
-.bs-docs-examples p {
+.bs-examples p {
margin-bottom: 20px;
}
@@ -510,31 +552,25 @@ section > ul li {
position: relative;
float: left;
width: 25%;
- height: 43px;
- font-size: 14px;
- font-weight: bold;
- line-height: 43px;
- color: #999;
- text-align: center;
- border: 1px solid #ddd;
- -webkit-border-radius: 4px;
- -moz-border-radius: 4px;
- border-radius: 4px;
}
.responsive-utilities-test li + li {
margin-left: 10px;
}
.responsive-utilities-test span {
- position: absolute;
- top: -1px;
- left: -1px;
- right: -1px;
- bottom: -1px;
- -webkit-border-radius: 4px;
- -moz-border-radius: 4px;
- border-radius: 4px;
+ padding: 15px 10px;
+ font-size: 14px;
+ font-weight: bold;
+ line-height: 1.1;
+ text-align: center;
+ border-radius: 4px;
}
-.responsive-utilities-test span {
+.responsive-utilities-test.visible-on [class*="hidden"],
+.responsive-utilities-test.hidden-on [class*="visible"] {
+ color: #999;
+ border: 1px solid #ddd;
+}
+.responsive-utilities-test.visible-on [class*="visible"],
+.responsive-utilities-test.hidden-on [class*="hidden"] {
color: #468847;
background-color: #dff0d8;
border: 1px solid #d6e9c6;
@@ -545,13 +581,14 @@ section > ul li {
/* Footer
-------------------------------------------------- */
-.bs-docs-footer {
- padding-top: 30px;
+.bs-footer {
+ padding-top: 40px;
padding-bottom: 30px;
margin-top: 100px;
+ text-align: center;
border-top: 1px solid #e5e5e5;
}
-.bs-docs-footer p {
+.bs-footer p {
margin-bottom: 0;
color: #777;
}
@@ -567,27 +604,25 @@ section > ul li {
}
/* Social proof buttons from GitHub & Twitter */
-.bs-docs-social {
- margin-top: 80px;
+.bs-social {
margin-bottom: 20px;
}
-/* Quick links on Home */
-.bs-docs-social-buttons {
+.bs-social-buttons {
display: inline-block;
margin: 0;
list-style: none;
}
-.bs-docs-social-buttons li {
+.bs-social-buttons li {
display: inline-block;
line-height: 1;
}
-.bs-docs-social-buttons li + li {
+.bs-social-buttons li + li {
margin-left: 15px;
}
-.bs-docs-social-buttons .twitter-follow-button {
+.bs-social-buttons .twitter-follow-button {
width: 225px !important;
}
-.bs-docs-social-buttons .twitter-share-button {
+.bs-social-buttons .twitter-share-button {
width: 98px !important;
}
@@ -622,6 +657,7 @@ input.focused {
}
.highlight pre {
padding: 0;
+ margin-top: 0;
margin-bottom: 0;
background-color: transparent;
border: 0;
@@ -640,14 +676,15 @@ input.focused {
color: #bebec5;
}
+/* Better spacing on download options in getting started */
+.bs-docs-dl-options h4 {
+ margin-top: 15px;
+ margin-bottom: 5px;
+}
-
-/* Docs gallery
--------------------------------------------------- */
-
-.bs-docs-gallery .thumbnail {
- max-width: 400px;
- margin: 0 auto 20px;
+/* Hide the top link initially */
+.bs-top {
+ display: none;
}
@@ -656,7 +693,7 @@ input.focused {
/* Hide code snippets on mobile devices */
@media screen and (max-width: 480px) {
- .bs-docs-example {
+ .bs-example {
border-radius: 4px;
}
.highlight {
@@ -667,8 +704,16 @@ input.focused {
/* Tablets and up */
@media screen and (min-width: 768px) {
+ /* Reaffix the fixed sidebar */
+ .bs-sidebar.affix {
+ position: fixed; /* Undo the static from mobile-first approach */
+ top: 50px;
+ width: 160px;
+ }
+
/* Back to top link */
- .bs-docs-top {
+ .bs-top {
+ display: block; /* Unhide */
float: left;
padding: 7px 15px;
font-weight: 500;
@@ -676,57 +721,44 @@ input.focused {
background-color: #eee;
border-radius: 4px;
}
- .bs-docs-top:hover {
+ .bs-top:hover {
color: #fff;
text-decoration: none;
background-color: #999;
}
- .bs-docs-top.affix {
+ .bs-top.affix {
position: fixed;
right: 15px;
bottom: 15px;
}
- .bs-docs-section-header h1 {
- font-size: 80px;
- font-size: 8rem;
- line-height: 1;
- }
-
- /* Account for fixed navbar (which is static to start) */
- .bs-docs-docs {
- padding-left: 260px;
+ .bs-header {
+ font-size: 21px;
+ text-align: left;
}
-
- /* Undo custom padding */
- .bs-docs-container {
- padding-left: 0;
- padding-right: 0;
+ .bs-header h1 {
+ font-size: 60px;
+ line-height: 1;
}
/* Show the docs nav */
- .bs-docs-sidebar {
+ .bs-sidebar {
display: block;
}
/* Tweak display of docs jumbotrons */
- .masthead {
+ .bs-masthead {
padding-top: 100px;
padding-bottom: 100px;
}
- .masthead h1 {
+ .bs-masthead h1 {
font-size: 100px;
}
- .masthead p {
+ .bs-masthead p {
margin-left: 15%;
margin-right: 15%;
font-size: 30px;
}
- .subhead {
- padding-top: 60px;
- padding-bottom: 60px;
- text-align: left;
- }
.bs-navbar-top-example .navbar-fixed-top,
.bs-navbar-bottom-example .navbar-fixed-bottom {
@@ -738,8 +770,9 @@ input.focused {
/* Tablets/desktops and up */
@media screen and (min-width: 992px) {
- .bs-docs-docs {
- padding-left: 280px;
+ /* Widen the fixed sidebar */
+ .bs-sidebar.affix {
+ width: 213px;
}
/* Icons */
@@ -751,8 +784,10 @@ input.focused {
/* Large desktops and up */
@media screen and (min-width: 1200px) {
- .bs-docs-docs {
- padding-left: 300px;
+
+ /* Widen the fixed sidebar again */
+ .bs-sidebar.affix {
+ width: 270px;
}
}