Commit 8a716ff8 authored by Renfred's avatar Renfred

Add custom bootstrap styles

parent 6ac28e18
Copyright (c) 2012 Balazs Kutil
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.
# Bootstrap theme
## Prerequisites
Please check that you have a recent version of [compass](http://compass-style.org/) installed in octopress' bundle
(see Gemfile.lock in your octopress directory and run bundle update if necessary), otherwise, you might get errors
similar to those reported in issue #7. Compass version 0.12.1 is known to work.
## Installation
$ git clone git://github.com/bkutil/bootstrap-theme.git bootstrap-theme
Copy the bootstrap-theme into your blog's octopress .theme directory:
$ cp -R bootstrap-theme $MY_OCTOBLOG/.themes/bootstrap
Currently, version of sass least 3.2 is needed due to requirements of [twitter-bootstrap-sass](https://github.com/jlong/sass-twitter-bootstrap):
$ gem list| grep sass
sass (3.2.4)
To update, run ````bundle update sass```` in your octopress directory. Make sure to *remove the older versions of sass*,
as compass might pick one of those up and site generation would fail.
$ bundle update sass
$ gem remove sass -v3.1.20
Install the theme and generate site:
$ rake install['bootstrap'] (rake install[bootstrap] if you are using zsh)
$ rake generate
## Code snippet colors
Theme utilizes the solarized color scheme for code snippets. By default, the
bootstrap variant is selected, but light/dark colors can be used by setting
the $solarized variable in sass/syntax/\_higlight.scss.
## Patches welcome!
This is a first draft only. Any ideas, suggestions or improvements are welcome.
## Demo
Latest code from master branch is running at this [demo site](http://bootstrap-theme.kutilovi.cz/).
//
// Accordion
// --------------------------------------------------
// Parent container
.accordion {
margin-bottom: $baseLineHeight;
}
// Group == heading + body
.accordion-group {
margin-bottom: 2px;
border: 1px solid #e5e5e5;
@include border-radius($baseBorderRadius);
}
.accordion-heading {
border-bottom: 0;
}
.accordion-heading .accordion-toggle {
display: block;
padding: 8px 15px;
}
// General toggle styles
.accordion-toggle {
cursor: pointer;
}
// Inner needs the styles because you can't animate properly with any styles on the element
.accordion-inner {
padding: 9px 15px;
border-top: 1px solid #e5e5e5;
}
//
// Alerts
// --------------------------------------------------
// Base styles
// -------------------------
.alert {
padding: 8px 35px 8px 14px;
margin-bottom: $baseLineHeight;
text-shadow: 0 1px 0 rgba(255,255,255,.5);
background-color: $warningBackground;
border: 1px solid $warningBorder;
@include border-radius($baseBorderRadius);
}
.alert,
.alert h4 {
// Specified for the h4 to prevent conflicts of changing $headingsColor
color: $warningText;
}
.alert h4 {
margin: 0;
}
// Adjust close link position
.alert .close {
position: relative;
top: -2px;
right: -21px;
line-height: $baseLineHeight;
}
// Alternate styles
// -------------------------
.alert-success {
background-color: $successBackground;
border-color: $successBorder;
color: $successText;
}
.alert-success h4 {
color: $successText;
}
.alert-danger,
.alert-error {
background-color: $errorBackground;
border-color: $errorBorder;
color: $errorText;
}
.alert-danger h4,
.alert-error h4 {
color: $errorText;
}
.alert-info {
background-color: $infoBackground;
border-color: $infoBorder;
color: $infoText;
}
.alert-info h4 {
color: $infoText;
}
// Block alerts
// -------------------------
.alert-block {
padding-top: 14px;
padding-bottom: 14px;
}
.alert-block > p,
.alert-block > ul {
margin-bottom: 0;
}
.alert-block p + p {
margin-top: 5px;
}
//
// Breadcrumbs
// --------------------------------------------------
.breadcrumb {
padding: 8px 15px;
margin: 0 0 $baseLineHeight;
list-style: none;
background-color: #f5f5f5;
@include border-radius($baseBorderRadius);
> li {
display: inline-block;
@include ie7-inline-block();
text-shadow: 0 1px 0 $white;
> .divider {
padding: 0 5px;
color: #ccc;
}
}
.active {
color: $grayLight;
}
}
//
// Button groups
// --------------------------------------------------
// Make the div behave like a button
.btn-group {
position: relative;
display: inline-block;
@include ie7-inline-block();
font-size: 0; // remove as part 1 of font-size inline-block hack
vertical-align: middle; // match .btn alignment given font-size hack above
white-space: nowrap; // prevent buttons from wrapping when in tight spaces (e.g., the table on the tests page)
@include ie7-restore-left-whitespace();
}
// Space out series of button groups
.btn-group + .btn-group {
margin-left: 5px;
}
// Optional: Group multiple button groups together for a toolbar
.btn-toolbar {
font-size: 0; // Hack to remove whitespace that results from using inline-block
margin-top: $baseLineHeight / 2;
margin-bottom: $baseLineHeight / 2;
> .btn + .btn,
> .btn-group + .btn,
> .btn + .btn-group {
margin-left: 5px;
}
}
// Float them, remove border radius, then re-add to first and last elements
.btn-group > .btn {
position: relative;
@include border-radius(0);
}
.btn-group > .btn + .btn {
margin-left: -1px;
}
.btn-group > .btn,
.btn-group > .dropdown-menu,
.btn-group > .popover {
font-size: $baseFontSize; // redeclare as part 2 of font-size inline-block hack
}
// Reset fonts for other sizes
.btn-group > .btn-mini {
font-size: $fontSizeMini;
}
.btn-group > .btn-small {
font-size: $fontSizeSmall;
}
.btn-group > .btn-large {
font-size: $fontSizeLarge;
}
// Set corners individual because sometimes a single button can be in a .btn-group and we need :first-child and :last-child to both match
.btn-group > .btn:first-child {
margin-left: 0;
@include border-top-left-radius($baseBorderRadius);
@include border-bottom-left-radius($baseBorderRadius);
}
// Need .dropdown-toggle since :last-child doesn't apply given a .dropdown-menu immediately after it
.btn-group > .btn:last-child,
.btn-group > .dropdown-toggle {
@include border-top-right-radius($baseBorderRadius);
@include border-bottom-right-radius($baseBorderRadius);
}
// Reset corners for large buttons
.btn-group > .btn.large:first-child {
margin-left: 0;
@include border-top-left-radius($borderRadiusLarge);
@include border-bottom-left-radius($borderRadiusLarge);
}
.btn-group > .btn.large:last-child,
.btn-group > .large.dropdown-toggle {
@include border-top-right-radius($borderRadiusLarge);
@include border-bottom-right-radius($borderRadiusLarge);
}
// On hover/focus/active, bring the proper btn to front
.btn-group > .btn:hover,
.btn-group > .btn:focus,
.btn-group > .btn:active,
.btn-group > .btn.active {
z-index: 2;
}
// On active and open, don't show outline
.btn-group .dropdown-toggle:active,
.btn-group.open .dropdown-toggle {
outline: 0;
}
// Split button dropdowns
// ----------------------
// Give the line between buttons some depth
.btn-group > .btn + .dropdown-toggle {
padding-left: 8px;
padding-right: 8px;
@include box-shadow(inset 1px 0 0 rgba(255,255,255,.125), inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05));
*padding-top: 5px;
*padding-bottom: 5px;
}
.btn-group > .btn-mini + .dropdown-toggle {
padding-left: 5px;
padding-right: 5px;
*padding-top: 2px;
*padding-bottom: 2px;
}
.btn-group > .btn-small + .dropdown-toggle {
*padding-top: 5px;
*padding-bottom: 4px;
}
.btn-group > .btn-large + .dropdown-toggle {
padding-left: 12px;
padding-right: 12px;
*padding-top: 7px;
*padding-bottom: 7px;
}
.btn-group.open {
// The clickable button for toggling the menu
// Remove the gradient and set the same inset shadow as the :active state
.dropdown-toggle {
background-image: none;
@include box-shadow(inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05));
}
// Keep the hover's background when dropdown is open
.btn.dropdown-toggle {
background-color: $btnBackgroundHighlight;
}
.btn-primary.dropdown-toggle {
background-color: $btnPrimaryBackgroundHighlight;
}
.btn-warning.dropdown-toggle {
background-color: $btnWarningBackgroundHighlight;
}
.btn-danger.dropdown-toggle {
background-color: $btnDangerBackgroundHighlight;
}
.btn-success.dropdown-toggle {
background-color: $btnSuccessBackgroundHighlight;
}
.btn-info.dropdown-toggle {
background-color: $btnInfoBackgroundHighlight;
}
.btn-inverse.dropdown-toggle {
background-color: $btnInverseBackgroundHighlight;
}
}
// Reposition the caret
.btn .caret {
margin-top: 8px;
margin-left: 0;
}
// Carets in other button sizes
.btn-mini .caret,
.btn-small .caret,
.btn-large .caret {
margin-top: 6px;
}
.btn-large .caret {
border-left-width: 5px;
border-right-width: 5px;
border-top-width: 5px;
}
// Upside down carets for .dropup
.dropup .btn-large .caret {
border-bottom-width: 5px;
}
// Account for other colors
.btn-primary,
.btn-warning,
.btn-danger,
.btn-info,
.btn-success,
.btn-inverse {
.caret {
border-top-color: $white;
border-bottom-color: $white;
}
}
// Vertical button groups
// ----------------------
.btn-group-vertical {
display: inline-block; // makes buttons only take up the width they need
@include ie7-inline-block();
}
.btn-group-vertical > .btn {
display: block;
float: none;
max-width: 100%;
@include border-radius(0);
}
.btn-group-vertical > .btn + .btn {
margin-left: 0;
margin-top: -1px;
}
.btn-group-vertical > .btn:first-child {
@include border-radius($baseBorderRadius $baseBorderRadius 0 0);
}
.btn-group-vertical > .btn:last-child {
@include border-radius(0 0 $baseBorderRadius $baseBorderRadius);
}
.btn-group-vertical > .btn-large:first-child {
@include border-radius($borderRadiusLarge $borderRadiusLarge 0 0);
}
.btn-group-vertical > .btn-large:last-child {
@include border-radius(0 0 $borderRadiusLarge $borderRadiusLarge);
}
//
// Buttons
// --------------------------------------------------
// Base styles
// --------------------------------------------------
// Core
.btn {
display: inline-block;
@include ie7-inline-block();
padding: 4px 12px;
margin-bottom: 0; // For input.btn
font-size: $baseFontSize;
line-height: $baseLineHeight;
text-align: center;
vertical-align: middle;
cursor: pointer;
@include buttonBackground($btnBackground, $btnBackgroundHighlight, $grayDark, 0 1px 1px rgba(255,255,255,.75));
border: 1px solid $btnBorder;
*border: 0; // Remove the border to prevent IE7's black border on input:focus
border-bottom-color: darken($btnBorder, 10%);
@include border-radius($baseBorderRadius);
@include ie7-restore-left-whitespace(); // Give IE7 some love
@include box-shadow(inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05));
// Hover state
&:hover {
color: $grayDark;
text-decoration: none;
background-position: 0 -15px;
// transition is only when going to hover, otherwise the background
// behind the gradient (there for IE<=9 fallback) gets mismatched
@include transition(background-position .1s linear);
}
// Focus state for keyboard and accessibility
&:focus {
@include tab-focus();
}
// Active state
&.active,
&:active {
background-image: none;
outline: 0;
@include box-shadow(inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05));
}
// Disabled state
&.disabled,
&[disabled] {
cursor: default;
background-image: none;
@include opacity(65);
@include box-shadow(none);
}
}
// Button Sizes
// --------------------------------------------------
// Large
.btn-large {
padding: $paddingLarge;
font-size: $fontSizeLarge;
@include border-radius($borderRadiusLarge);
}
.btn-large [class^="icon-"],
.btn-large [class*=" icon-"] {
margin-top: 4px;
}
// Small
.btn-small {
padding: $paddingSmall;
font-size: $fontSizeSmall;
@include border-radius($borderRadiusSmall);
}
.btn-small [class^="icon-"],
.btn-small [class*=" icon-"] {
margin-top: 0;
}
.btn-mini [class^="icon-"],
.btn-mini [class*=" icon-"] {
margin-top: -1px;
}
// Mini
.btn-mini {
padding: $paddingMini;
font-size: $fontSizeMini;
@include border-radius($borderRadiusSmall);
}
// Block button
// -------------------------
.btn-block {
display: block;
width: 100%;
padding-left: 0;
padding-right: 0;
@include box-sizing(border-box);
}
// Vertically space out multiple block buttons
.btn-block + .btn-block {
margin-top: 5px;
}
// Specificity overrides
input[type="submit"],
input[type="reset"],
input[type="button"] {
&.btn-block {
width: 100%;
}
}
// Alternate buttons
// --------------------------------------------------
// Provide *some* extra contrast for those who can get it
.btn-primary.active,
.btn-warning.active,
.btn-danger.active,
.btn-success.active,
.btn-info.active,
.btn-inverse.active {
color: rgba(255,255,255,.75);
}
// Set the backgrounds
// -------------------------
.btn {
// reset here as of 2.0.3 due to Recess property order
border-color: #c5c5c5;