From 41d6cad4b65e9f6ab688d97a542363f9df00f6ba Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 9 Jul 2014 02:40:05 -0700 Subject: Docs: Refactor to use .less file instead, importing Bootstrap vars and mixins, and cleaning all the things up --- docs/assets/less/docs.less | 1431 ++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 1431 insertions(+) create mode 100644 docs/assets/less/docs.less (limited to 'docs/assets/less/docs.less') diff --git a/docs/assets/less/docs.less b/docs/assets/less/docs.less new file mode 100644 index 000000000..13ede286c --- /dev/null +++ b/docs/assets/less/docs.less @@ -0,0 +1,1431 @@ +/*! + * Bootstrap Docs (http://getbootstrap.com) + * Copyright 2011-2014 Twitter, Inc. + * Licensed under the Creative Commons Attribution 3.0 Unported License. For + * details, see http://creativecommons.org/licenses/by/3.0/. + */ + +// Import Bootstrap variables and mixins +@import "../../../less/variables.less"; +@import "../../../less/mixins.less"; + +// Import the syntax highlighting +@import "syntax.less"; + +// Local docs variables +@bs-purple: #563d7c; +@bs-purple-light: #cdbfe3; + + +// Scaffolding +// +// Update the basics of our documents to prep for docs content. + +body { + position: relative; // For scrollspy? +} + + +// +// Buttons +// + +.btn-outline { + color: #563d7c; + background-color: transparent; + border-color: #563d7c; +} +.btn-outline:hover, +.btn-outline:focus, +.btn-outline:active { + color: #fff; + background-color: #563d7c; + border-color: #563d7c; +} + +.btn-outline-inverse { + color: #fff; + background-color: transparent; + border-color: #cdbfe3; +} +.btn-outline-inverse:hover, +.btn-outline-inverse:focus, +.btn-outline-inverse:active { + color: #563d7c; + text-shadow: none; + background-color: #fff; + border-color: #fff; +} + + +// +// Bootstrap "B" icon +// + +.bs-docs-booticon { + display: block; + width: 144px; + height: 144px; + font-size: 108px; + font-weight: 500; + line-height: 140px; + color: #fff; + text-align: center; + cursor: default; + background-color: #563d7c; + border-radius: 15%; + + &.inverse { + color: #563d7c; + background-color: #fff; + } + &.outline { + background-color: transparent; + border: 1px solid #cdbfe3; + } +} + + +// +// Main navigation +// + +.bs-docs-nav { + margin-bottom: 0; + background-color: #563d7c; + border-bottom: 0; +} +.bs-home-nav .bs-nav-b { + display: none; +} +.bs-docs-nav .navbar-brand, +.bs-docs-nav .navbar-nav > li > a { + font-weight: 500; + color: #cdbfe3; +} +.bs-docs-nav .navbar-brand { + color: #fff; +} +.bs-docs-nav .navbar-nav > li > a:hover, +.bs-docs-nav .navbar-nav > .active > a, +.bs-docs-nav .navbar-nav > .active > a:hover { + color: #fff; + background-color: #563d7c; +} +.bs-docs-nav .navbar-toggle .icon-bar { + background-color: #fff; +} +.bs-docs-nav .navbar-header .navbar-toggle { + border-color: #322f38; +} +.bs-docs-nav .navbar-header .navbar-toggle:hover, +.bs-docs-nav .navbar-header .navbar-toggle:focus { + background-color: #29262f; + border-color: #29262f; +} + + +// +// Footer +// + +.bs-docs-footer { + margin-top: 100px; + color: #777; + text-align: center; + border-top: 1px solid #e5e5e5; +} +.bs-docs-footer-links { + padding-left: 0; + margin-top: 20px; + color: #999; +} +.bs-docs-footer-links li { + display: inline; + padding: 0 2px; +} +.bs-docs-footer-links li:first-child { + padding-left: 0; +} + +@media (min-width: 768px) { + .bs-docs-footer p { + margin-bottom: 0; + } + .bs-docs .bs-docs-footer { + text-align: left; + } +} + + +// +// Social buttons +// + +.bs-docs-social { + margin-bottom: 20px; + text-align: center; +} +.bs-docs-social-buttons { + display: inline-block; + padding-left: 0; + margin-bottom: 0; + list-style: none; +} +.bs-docs-social-buttons li { + display: inline-block; + padding: 5px 8px; + line-height: 1; +} +.bs-docs-social-buttons .twitter-follow-button { + width: 225px !important; +} +.bs-docs-social-buttons .twitter-share-button { + width: 98px !important; +} + +// Style the GitHub buttons via CSS instead of inline attributes +.github-btn { + overflow: hidden; + border: 0; +} + +@media (min-width: 768px) { + .bs-docs .bs-docs-social { + margin-left: -8px; + text-align: left; + } +} + + +// +// Homepage +// + +// Masthead (headings and download button) +.bs-docs-masthead { + position: relative; + padding: 30px 15px; + color: #cdbfe3; + text-align: center; + text-shadow: 0 1px 0 rgba(0,0,0,.1); + background-color: #6f5499; + #gradient > .vertical(@bs-purple, #6f5499); +} + +.bs-docs-masthead .bs-docs-booticon { + margin: 0 auto 30px; +} +.bs-docs-masthead h1 { + font-weight: 300; + line-height: 1; + color: #fff; +} +.bs-docs-masthead .lead { + margin: 0 auto 30px; + font-size: 20px; + color: #fff; +} +.bs-docs-masthead .version { + margin-top: -15px; + margin-bottom: 30px; + color: #9783b9; +} +.bs-docs-masthead .btn { + width: 100%; + padding: 15px 30px; + font-size: 20px; +} + +@media (min-width: 480px) { + .bs-docs-masthead .btn { + width: auto; + } +} + +@media (min-width: 768px) { + .bs-docs-masthead { + padding: 80px 0; + } + .bs-docs-masthead h1 { + font-size: 60px; + } + .bs-docs-masthead .lead { + font-size: 24px; + } +} + +@media (min-width: 992px) { + .bs-docs-masthead .lead { + width: 80%; + font-size: 30px; + } +} + + +// +// Page headers +// + +.bs-docs-header { + padding-top: 2rem; + padding-bottom: 2rem; + margin-bottom: 2rem; + font-size: 1.25rem; + background-color: #563d7c; +} +.bs-docs-header h1 { + margin-top: 0; + color: #fff; +} +.bs-docs-header p { + margin-bottom: 0; + font-weight: 300; + line-height: 1.4; + color: rgba(255,255,255,.65); +} +.bs-docs-header .container { + position: relative; +} + +@media (min-width: 768px) { + .bs-docs-header { + font-size: 24px; + text-align: left; + } + .bs-docs-header h1 { + font-size: 60px; + line-height: 1; + } +} + +@media (min-width: 992px) { + .bs-docs-header { + padding-top: 4rem; + padding-bottom: 4rem; + } + .bs-docs-header h1, + .bs-docs-header p { + margin-right: 380px; + } +} + + +// +// Carbon ads +// + +.carbonad { + width: auto !important; + height: auto !important; + padding: 20px !important; + margin: 30px -30px -31px !important; + overflow: hidden; /* clearfix */ + font-size: 13px !important; + line-height: 16px !important; + color: @bs-purple-light !important; + text-align: left; + background: transparent !important; + border: solid #866ab3 !important; + border-width: 1px 0 !important; +} +.carbonad-img { + margin: 0 !important; +} +.carbonad-text, +.carbonad-tag { + display: block !important; + float: none !important; + width: auto !important; + height: auto !important; + margin-left: 145px !important; + font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important; +} +.carbonad-text { + padding-top: 0 !important; +} +.carbonad-tag { + color: inherit !important; + text-align: left !important; +} +.carbonad-text a, +.carbonad-tag a { + color: #fff !important; +} +.carbonad #azcarbon > img { + display: none; // hide what I assume are tracking images +} + +// In the lighter page headers +// .bs-docs-header .carbonad { +// color: #777; +// background-color: #fff !important; +// border-color: #eee !important; +// } +// .bs-docs-header .carbonad-text a, +// .bs-docs-header .carbonad-tag a { +// color: #563d7c !important; +// } + +@media (min-width: 480px) { + .carbonad { + width: 330px !important; + margin: 20px auto !important; + border-width: 1px !important; + border-radius: 4px; + } + .bs-docs-masthead .carbonad { + margin: 50px auto 0 !important; + } +} + +@media (min-width: 768px) { + .carbonad { + margin-right: 0 !important; + margin-left: 0 !important; + } +} + +@media (min-width: 992px) { + .carbonad { + position: absolute; + top: 30px; + right: 60px; // 15px instead of 0 since box-sizing + width: 330px !important; + padding: 15px !important; + margin: 0 !important; + } + .bs-docs-masthead .carbonad { + position: static; + } +} + + +// +// Homepage featurettes +// + +.bs-docs-featurette { + padding-top: 40px; + padding-bottom: 40px; + font-size: 16px; + line-height: 1.5; + color: #555; + text-align: center; + background-color: #fff; + border-bottom: 1px solid #e5e5e5; +} +.bs-docs-featurette + .bs-docs-footer { + margin-top: 0; + border-top: 0; +} + +.bs-docs-featurette-title { + margin-bottom: 5px; + font-size: 30px; + font-weight: normal; + color: #333; +} +.half-rule { + width: 100px; + margin: 40px auto; +} +.bs-docs-featurette h3 { + margin-bottom: 5px; + font-weight: normal; + color: #333; +} +.bs-docs-featurette-img { + display: block; + margin-bottom: 20px; + color: #333; +} +.bs-docs-featurette-img:hover { + color: #428bca; + text-decoration: none; +} +.bs-docs-featurette-img img { + display: block; + margin-bottom: 15px; +} + +@media (min-width: 480px) { + .bs-docs-featurette .img-responsive { + margin-top: 30px; + } +} +@media (min-width: 768px) { + .bs-docs-featurette { + padding-top: 100px; + padding-bottom: 100px; + } + .bs-docs-featurette-title { + font-size: 40px; + } + .bs-docs-featurette .lead { + max-width: 80%; + margin-right: auto; + margin-left: auto; + } + .bs-docs-featurette .img-responsive { + margin-top: 0; + } +} + + +// +// Featured Expo sites +// + +.bs-docs-featured-sites { + margin-right: -1px; + margin-left: -1px; +} +.bs-docs-featured-sites .col-xs-6 { + padding: 1px; +} +.bs-docs-featured-sites .img-responsive { + margin-top: 0; +} + +@media (min-width: 768px) { + .bs-docs-featured-sites .col-sm-3:first-child img { + border-top-left-radius: 4px; + border-bottom-left-radius: 4px; + } + .bs-docs-featured-sites .col-sm-3:last-child img { + border-top-right-radius: 4px; + border-bottom-right-radius: 4px; + } +} + + +// +// Examples +// + +.bs-examples .thumbnail { + margin-bottom: 10px; +} +.bs-examples h4 { + margin-bottom: 5px; +} +.bs-examples p { + margin-bottom: 20px; +} + +@media (max-width: 480px) { + .bs-examples { + margin-right: -10px; + margin-left: -10px; + } + .bs-examples > [class^="col-"] { + padding-right: 10px; + padding-left: 10px; + } +} + + +// +// Side navigation +// + +.bs-docs-container { + position: relative; + max-width: 62rem; + padding: 1rem; + margin-right: auto; + margin-left: auto; +} +@media (min-width: 768px) { + .bs-docs-container { + padding: 2rem; + } +} +@media (min-width: 992px) { + .bs-docs-container { + padding: 2rem 4rem; + } +} + +.bs-docs-sidebar { + margin-bottom: 0; + background-color: #322f38; +} + +.bs-docs-sidebar .navbar-toggle { + position: absolute; + top: 5px; + right: 0; + z-index: 5; +} +.bs-docs-sidebar .navbar-toggle .icon-bar { + background-color: #fff; +} + +.bs-docs-sidebar .navbar-header { + float: none; + margin-right: -15px; +} + +.bs-docs-sidebar .navbar-collapse { + padding: 0; + border: 0; +} + +@media (min-width: 992px) { + .bs-docs { + padding-left: 240px; + } + .bs-docs-sidebar { + position: fixed; + top: 0; + bottom: 0; + left: 0; + width: 240px; + overflow-x: hidden; + overflow-y: auto; + #gradient > .vertical(#29262f, #322f38); + } + .bs-docs-sidebar .navbar-brand { + margin-bottom: 15px; + } +} + + +.bs-docs-sidebar .navbar-brand { + display: block; + float: none; + height: auto; + padding: 20px; + font-size: 20px; + font-weight: 500; + line-height: 1; + color: #fff; + border-bottom: 1px solid rgba(255,255,255,.1); +} +.bs-docs-sidebar-brand:hover, +.bs-docs-sidebar-brand:focus { + color: #fff; + text-decoration: none; +} + +.bs-docs-sidenav { + display: none; +} +.bs-docs-toc-item { + margin-right: -.75rem; + margin-left: -.75rem; +} + +.bs-docs-toc-link { + display: block; + padding: 4px 20px; + font-size: 16px; + color: #706e74; +} +.bs-docs-toc-link:hover, +.bs-docs-toc-link:focus { + color: #ffe484; + text-decoration: none; +} +.active > .bs-docs-toc-link { + font-weight: 500; + color: #ffe484; +} +.active > .bs-docs-sidenav { + display: block; +} + +.bs-docs-toc-item.active { + margin-top: 15px; + margin-bottom: 15px; +} +.bs-docs-toc-item:first-child { + margin-top: 0; +} +.bs-docs-toc-item:last-child { + margin-bottom: 30px; +} + +// All levels of nav +.bs-docs-sidebar .nav > li > a { + display: block; + padding: 4px 20px; + font-size: 14px; + color: #99979c; +} +.bs-docs-sidebar .nav > li > a:hover, +.bs-docs-sidebar .nav > li > a:focus { + color: #ffe484; + text-decoration: none; + background-color: transparent; +} +.bs-docs-sidebar .nav > .active > a, +.bs-docs-sidebar .nav > .active:hover > a, +.bs-docs-sidebar .nav > .active:focus > a { + font-weight: 500; + color: #ffe484; + background-color: transparent; +} + +// Nav: second level (shown on .active) +.bs-docs-sidebar .nav .nav { + display: none; // Hide by default, but at >768px, show it + padding-bottom: 10px; +} +.bs-docs-sidebar .nav .nav > li > a { + padding-top: 1px; + padding-bottom: 1px; + padding-left: 30px; + font-size: 12px; + font-weight: normal; +} +.bs-docs-sidebar .nav .nav > .active > a, +.bs-docs-sidebar .nav .nav > .active:hover > a, +.bs-docs-sidebar .nav .nav > .active:focus > a { + font-weight: 500; +} + +.bs-docs-sidebar .nav > .active > .nav { + display: block; +} +.bs-docs-sidebar .nav .nav > li > a { + padding-top: 2px; + padding-bottom: 2px; + padding-left: 30px; + font-size: 13px; +} + + +// +// Docs sections +// + +// Space things out +.bs-docs-section { + margin-bottom: 60px; +} +.bs-docs-section:last-child { + margin-bottom: 0; +} + +h1[id] { + padding-top: 20px; + margin-top: 0; +} + + +// +// Callouts +// + +.bs-callout { + padding: 20px; + margin: 20px 0; + border: 1px solid #eee; + border-left-width: 5px; + border-radius: 3px; +} +.bs-callout h4 { + margin-top: 0; + margin-bottom: 5px; +} +.bs-callout p:last-child { + margin-bottom: 0; +} +.bs-callout code { + border-radius: 3px; +} + +.bs-callout + .bs-callout { + margin-top: -5px; +} + +// Variations +.bs-callout-danger { + border-left-color: #d9534f; +} +.bs-callout-danger h4 { + color: #d9534f; +} +.bs-callout-warning { + border-left-color: #f0ad4e; +} +.bs-callout-warning h4 { + color: #f0ad4e; +} +.bs-callout-info { + border-left-color: #5bc0de; +} +.bs-callout-info h4 { + color: #5bc0de; +} + + +// +// Color swatches +// + +.color-swatches { + margin: 0 -5px; + overflow: hidden; // clearfix +} +.color-swatch { + float: left; + width: 60px; + height: 60px; + margin: 0 5px; + border-radius: 3px; +} + +@media (min-width: 768px) { + .color-swatch { + width: 100px; + height: 100px; + } +} + +// Framework colors +.color-swatches .gray-darker { + background-color: @gray-darker; +} +.color-swatches .gray-dark { + background-color: @gray-dark; +} +.color-swatches .gray { + background-color: @gray; +} +.color-swatches .gray-light { + background-color: @gray-light; +} +.color-swatches .gray-lighter { + background-color: @gray-lighter; +} +.color-swatches .brand-primary { + background-color: @brand-primary; +} +.color-swatches .brand-success { + background-color: @brand-success; +} +.color-swatches .brand-warning { + background-color: @brand-warning; +} +.color-swatches .brand-danger { + background-color: @brand-danger; +} +.color-swatches .brand-info { + background-color: @brand-info; +} + +// Docs colors +.color-swatches .bs-purple { + background-color: @bs-purple; +} +.color-swatches .bs-purple-light { + background-color: @bs-purple-light; +} +.color-swatches .bs-purple-lighter { + background-color: #e5e1ea; +} +.color-swatches .bs-gray { + background-color: #f9f9f9; +} + + +// +// Team members +// + +.bs-team .team-member { + line-height: 32px; + color: #555; +} +.bs-team .team-member:hover { + color: #333; + text-decoration: none; +} +.bs-team .github-btn { + float: right; + width: 180px; + height: 20px; + margin-top: 6px; +} +.bs-team img { + float: left; + width: 32px; + margin-right: 10px; + border-radius: 4px; +} + + +// +// Grid examples +// + +.show-grid { + margin-bottom: 15px; +} +.show-grid [class^="col-"] { + padding-top: 10px; + padding-bottom: 10px; + background-color: #eee; + background-color: rgba(86,61,124,.15); + border: 1px solid #ddd; + border: 1px solid rgba(86,61,124,.2); +} + + +// +// Docs examples +// + +.bs-example { + position: relative; + padding: 1.5rem; + margin-top: 1rem; + margin-bottom: -1rem; + border: solid #f7f7f9; + border-width: .2rem 0 0; +} +// Echo out a label for the example +.bs-example:before { + position: absolute; + top: 0; + display: none; + padding: .4rem .75rem; + font-size: .75rem; + font-weight: bold; + color: #fff; + text-transform: uppercase; + letter-spacing: .1rem; + content: "Example"; + background-color: #eb4c82; + border-radius: .2rem; +} + +@media (min-width: 480px) { + .bs-example { + border-width: .2rem; + } +} + +// Undo width of container +.bs-example .container { + width: auto; +} + +// Tweak content of examples for optimum awesome +.bs-example > p:last-child, +.bs-example > ul:last-child, +.bs-example > ol:last-child, +.bs-example > blockquote:last-child, +.bs-example > .form-control: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, +.bs-example > .progress:last-child, +.bs-example > .table-responsive:last-child > .table { + margin-bottom: 0; +} +.bs-example > p > .close { + float: none; +} + +// Typography +.bs-example-type .table .type-info { + color: #999; + vertical-align: middle; +} +.bs-example-type .table td { + padding: 15px 0; + border-color: #eee; +} +.bs-example-type .table tr:first-child td { + border-top: 0; +} +.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; +} + +// Contextual background colors +.bs-example-bg-classes p { + padding: 15px; +} + +// Images +.bs-example > .img-circle, +.bs-example > .img-rounded, +.bs-example > .img-thumbnail { + margin: 5px; +} + +// Tables +// .bs-example > .table-responsive > .table { +// background-color: #fff; +// } + +// Buttons +.bs-example > .btn, +.bs-example > .btn-group { + margin-top: 5px; + margin-bottom: 5px; +} +.bs-example > .btn-toolbar + .btn-toolbar { + margin-top: 10px; +} + +// Forms +.bs-example-control-sizing select, +.bs-example-control-sizing input[type="text"] + input[type="text"] { + margin-top: 10px; +} +.bs-example-form .input-group { + margin-bottom: 10px; +} +.bs-example > textarea.form-control { + resize: vertical; +} + +// List groups +.bs-example > .list-group { + max-width: 400px; +} + +// Navbars +.bs-example .navbar:last-child { + margin-bottom: 0; +} +.bs-navbar-top-example, +.bs-navbar-bottom-example { + z-index: 1; + padding: 0; + overflow: hidden; // cut the drop shadows off +} +.bs-navbar-top-example .navbar-header, +.bs-navbar-bottom-example .navbar-header { + margin-left: 0; +} +.bs-navbar-top-example .navbar-fixed-top, +.bs-navbar-bottom-example .navbar-fixed-bottom { + position: relative; + margin-right: 0; + margin-left: 0; +} +.bs-navbar-top-example { + padding-bottom: 45px; +} +.bs-navbar-top-example:after { + top: auto; + bottom: 15px; +} +.bs-navbar-top-example .navbar-fixed-top { + top: -1px; +} +.bs-navbar-bottom-example { + padding-top: 45px; +} +.bs-navbar-bottom-example .navbar-fixed-bottom { + bottom: -1px; +} +.bs-navbar-bottom-example .navbar { + margin-bottom: 0; +} +@media (min-width: 768px) { + .bs-navbar-top-example .navbar-fixed-top, + .bs-navbar-bottom-example .navbar-fixed-bottom { + position: absolute; + } +} + +// Pagination +.bs-example .pagination { + margin-top: 10px; + margin-bottom: 10px; +} + +// Pager +.bs-example > .pager { + margin-top: 0; +} + +// Example modals +.bs-example-modal { + background-color: #f5f5f5; +} +.bs-example-modal .modal { + position: relative; + top: auto; + right: auto; + bottom: auto; + left: auto; + z-index: 1; + display: block; +} +.bs-example-modal .modal-dialog { + left: auto; + margin-right: auto; + margin-left: auto; +} + +// Example dropdowns +.bs-example > .dropdown > .dropdown-toggle { + float: left; +} +.bs-example > .dropdown > .dropdown-menu { + position: static; + display: block; + margin-bottom: 5px; + clear: left; +} + +// Example tabbable tabs +.bs-example-tabs .nav-tabs { + margin-bottom: 15px; +} + +// Tooltips +.bs-example-tooltips { + text-align: center; +} +.bs-example-tooltips > .btn { + margin-top: 5px; + margin-bottom: 5px; +} + +// Popovers +.bs-example-popover { + padding-bottom: 24px; + background-color: #f9f9f9; +} +.bs-example-popover .popover { + position: relative; + display: block; + float: left; + width: 260px; + margin: 20px; +} + +// Scrollspy demo on fixed height div +.scrollspy-example { + position: relative; + height: 200px; + margin-top: 10px; + overflow: auto; +} + + +// +// Code snippets +// + +.highlight { + padding: 1.5rem; + margin-top: 1rem; + margin-bottom: 1rem; + background-color: #f7f7f9; +} +.highlight pre { + padding: 0; + margin-top: 0; + margin-bottom: 0; + background-color: transparent; + border: 0; +} +.highlight pre code { + font-size: inherit; + color: @gray-dark; // Effectively the base text color +} + + +// +// Responsive tests +// + +// Responsive (scrollable) doc tables +.table-responsive .highlight pre { + white-space: normal; +} + +// Utility classes table +.bs-table th small, +.responsive-utilities th small { + display: block; + font-weight: normal; + color: #999; +} +.responsive-utilities tbody th { + font-weight: normal; +} +.responsive-utilities td { + text-align: center; +} +.responsive-utilities td.is-visible { + color: #468847; + background-color: #dff0d8 !important; +} +.responsive-utilities td.is-hidden { + color: #ccc; + background-color: #f9f9f9 !important; +} + +// Responsive tests +.responsive-utilities-test { + margin-top: 5px; +} +.responsive-utilities-test .col-xs-6 { + margin-bottom: 10px; +} +.responsive-utilities-test span { + display: block; + padding: 15px 10px; + font-size: 14px; + font-weight: bold; + line-height: 1.1; + text-align: center; + border-radius: 4px; +} +.visible-on .col-xs-6 .hidden-xs, +.visible-on .col-xs-6 .hidden-sm, +.visible-on .col-xs-6 .hidden-md, +.visible-on .col-xs-6 .hidden-lg, +.hidden-on .col-xs-6 .hidden-xs, +.hidden-on .col-xs-6 .hidden-sm, +.hidden-on .col-xs-6 .hidden-md, +.hidden-on .col-xs-6 .hidden-lg { + color: #999; + border: 1px solid #ddd; +} +.visible-on .col-xs-6 .visible-xs-block, +.visible-on .col-xs-6 .visible-sm-block, +.visible-on .col-xs-6 .visible-md-block, +.visible-on .col-xs-6 .visible-lg-block, +.hidden-on .col-xs-6 .visible-xs-block, +.hidden-on .col-xs-6 .visible-sm-block, +.hidden-on .col-xs-6 .visible-md-block, +.hidden-on .col-xs-6 .visible-lg-block { + color: #468847; + background-color: #dff0d8; + border: 1px solid #d6e9c6; +} + + +// +// Customizer +// + +.bs-customizer .toggle { + float: right; + margin-top: 25px; +} + +// Headings and form controls +.bs-customizer label { + margin-top: 10px; + font-weight: 500; + color: #555; +} +.bs-customizer h2 { + padding-top: 30px; + margin-top: 0; + margin-bottom: 5px; +} +.bs-customizer h3 { + margin-bottom: 0; +} +.bs-customizer h4 { + margin-top: 15px; + margin-bottom: 0; +} +.bs-customizer .bs-callout h4 { + margin-top: 0; // lame, but due to specificity we have to duplicate + margin-bottom: 5px; +} +.bs-customizer input[type="text"] { + font-family: Menlo, Monaco, Consolas, "Courier New", monospace; + background-color: #fafafa; +} +.bs-customizer .help-block { + margin-bottom: 5px; + font-size: 12px; +} + +// For the variables, use regular weight +#less-section label { + font-weight: normal; +} + +.bs-customizer-input { + float: left; + width: 33.333333%; + padding-right: 15px; + padding-left: 15px; +} + +// Downloads +.bs-customize-download .btn-outline { + padding: 20px; +} + +// Error handling +.bs-customizer-alert { + position: fixed; + top: 0; + right: 0; + left: 0; + z-index: 1030; + padding: 15px 0; + color: #fff; + background-color: #d9534f; + border-bottom: 1px solid #b94441; + -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.25); + box-shadow: inset 0 1px 0 rgba(255,255,255,.25); +} +.bs-customizer-alert .close { + margin-top: -4px; + font-size: 24px; +} +.bs-customizer-alert p { + margin-bottom: 0; +} +.bs-customizer-alert .glyphicon { + margin-right: 5px; +} +.bs-customizer-alert pre { + margin: 10px 0 0; + color: #fff; + background-color: #a83c3a; + border-color: #973634; + -webkit-box-shadow: inset 0 2px 4px rgba(0,0,0,.05), 0 1px 0 rgba(255,255,255,.1); + box-shadow: inset 0 2px 4px rgba(0,0,0,.05), 0 1px 0 rgba(255,255,255,.1); +} + + +// +// Brand guidelines +// + +// Logo series wrapper +.bs-brand-logos { + display: table; + width: 100%; + margin-bottom: 15px; + overflow: hidden; + color: #563d7c; + background-color: #f9f9f9; + border-radius: 4px; +} + +// Individual items +.bs-brand-item { + padding: 60px 0; + text-align: center; +} +.bs-brand-item + .bs-brand-item { + border-top: 1px solid #fff; +} +.bs-brand-logos .inverse { + color: #fff; + background-color: #563d7c; +} +.bs-brand-item .svg { + width: 144px; + height: 144px; +} + +// Heading content within +.bs-brand-item h1, +.bs-brand-item h3 { + margin-top: 0; + margin-bottom: 0; +} +.bs-brand-item .bs-docs-booticon { + margin-right: auto; + margin-left: auto; +} + +// Make the icons stand out on what is/isn't okay +// .bs-brand-item .glyphicon { +// width: 30px; +// height: 30px; +// margin: 10px auto -10px; +// line-height: 30px; +// color: #fff; +// border-radius: 50%; +// } +// .bs-brand-item .glyphicon-ok { +// background-color: #5cb85c; +// } +// .bs-brand-item .glyphicon-remove { +// background-color: #d9534f; +// } + +@media (min-width: 768px) { + .bs-brand-item { + display: table-cell; + width: 1%; + } + .bs-brand-item + .bs-brand-item { + border-top: 0; + border-left: 1px solid #fff; + } + .bs-brand-item h1 { + font-size: 60px; + } +} + + +// +// ZeroClipboard styles +// + +.zero-clipboard { + position: relative; + display: none; + float: right; +} +.btn-clipboard { + position: absolute; + top: 0; + right: 0; + z-index: 10; + display: block; + padding: .25rem .5rem; + font-size: 75%; + color: #818a91; + cursor: pointer; + background-color: #eceeef; + border-radius: .2rem; +} +.btn-clipboard-hover { + color: #fff; + background-color: #027de7; +} + +@media (min-width: 768px) { + .zero-clipboard { + display: block; + } +} + + +// +// Miscellaneous +// + +// Pseudo :focus state for showing how it looks in the docs +#focusedInput { + border-color: @input-border-focus; + outline: 0; + outline: thin dotted \9; // IE9 + box-shadow: 0 0 8px @input-box-shadow-focus; +} -- cgit v1.2.3