Extracted Bootstrap from QA
and everything *should* work.
This commit is contained in:
Thomas McDonald
commit
c303d86d57
|
|
@ -0,0 +1,2 @@
|
|||
*.gem
|
||||
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
Copyright 2011 Twitter, Inc.
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
# Bootstrap for Rails
|
||||
|
||||
`bootstrap-rails` is an SASS-powered version of [Twitter's Bootstrap](http://github.com/twitter/bootstrap), ready to drop right into your asset-pipeline powered Rails applications.
|
||||
|
||||
Enjoy.
|
||||
|
||||
## Usage
|
||||
|
||||
In your gemfile:
|
||||
|
||||
gem 'bootstrap-rails', '1.2.0'
|
||||
|
||||
In your css file of choice:
|
||||
|
||||
/*
|
||||
*= require bootstrap
|
||||
*/
|
||||
|
||||
Simples.
|
||||
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
Gem::Specification.new do |s|
|
||||
s.name = "bootstrap-rails"
|
||||
s.version = '1.2.0'
|
||||
s.authors = ["Thomas McDonald"]
|
||||
s.email = 'tom@conceptcoding.co.uk'
|
||||
s.summary = "Twitter's Bootstrap, converted to SASS and ready to drop into Rails"
|
||||
s.homepage = "http://github.com/thomas-mcdonald/bootstrap-rails"
|
||||
|
||||
s.add_dependency 'sass-rails'
|
||||
|
||||
s.files = Dir["vendor/**/*.css.scss"] + ["README.md", "LICENSE", "lib/bootstrap-rails.rb"]
|
||||
end
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
module Bootstrap
|
||||
module Rails
|
||||
class Engine < ::Rails::Engine
|
||||
# Rails, will you please look in our vendor? kthx
|
||||
end
|
||||
end
|
||||
end
|
||||
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
/*!
|
||||
* Bootstrap 1.2.0
|
||||
*
|
||||
* Copyright 2011 Twitter, Inc
|
||||
* Licensed under the Apache License v2.0
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Designed and built with all the love in the world @twitter by @mdo and @fat, and crafted into SASS by the fine typing of Thomas McDonald
|
||||
* Date: 6th September, 2011
|
||||
*/
|
||||
|
||||
// CSS Reset
|
||||
@import "bootstrap/reset";
|
||||
|
||||
// Core
|
||||
@import "bootstrap/preboot";
|
||||
@import "bootstrap/scaffolding";
|
||||
|
||||
// Styled patterns and elements
|
||||
@import "bootstrap/type";
|
||||
@import "bootstrap/forms";
|
||||
@import "bootstrap/tables";
|
||||
@import "bootstrap/patterns";
|
||||
|
||||
|
|
@ -0,0 +1,371 @@
|
|||
/* forms.css.scss
|
||||
* Base styles for various input types, form layouts, and states
|
||||
* ------------------------------------------------------------- */
|
||||
|
||||
// FORM STYLES
|
||||
// -----------
|
||||
|
||||
form {
|
||||
margin-bottom: $baseline;
|
||||
}
|
||||
|
||||
// Groups of fields with labels on top (legends)
|
||||
fieldset {
|
||||
margin-bottom: $baseline;
|
||||
padding-top: $baseline;
|
||||
legend {
|
||||
display: block;
|
||||
margin-left: 150px;
|
||||
font-size: 20px;
|
||||
line-height: 1;
|
||||
*margin: 0 0 5px 145px; /* IE6-7 */
|
||||
*line-height: 1.5; /* IE6-7 */
|
||||
color: $grayDark;
|
||||
}
|
||||
}
|
||||
|
||||
// Parent element that clears floats and wraps labels and fields together
|
||||
.clearfix {
|
||||
margin-bottom: $baseline;
|
||||
}
|
||||
|
||||
// Set font for forms
|
||||
label, input, select, textarea {
|
||||
@include sans-serif-font(normal,13px,normal);
|
||||
}
|
||||
|
||||
// Float labels left
|
||||
label {
|
||||
padding-top: 6px;
|
||||
font-size: 13px;
|
||||
line-height: 18px;
|
||||
float: left;
|
||||
width: 130px;
|
||||
text-align: right;
|
||||
color: $grayDark;
|
||||
}
|
||||
|
||||
// Shift over the inside div to align all label's relevant content
|
||||
div.input {
|
||||
margin-left: 150px;
|
||||
}
|
||||
|
||||
// Checkboxs and radio buttons
|
||||
input[type=checkbox], input[type=radio] {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
// Inputs, Textareas, Selects
|
||||
input, textarea, select, .uneditable-input {
|
||||
display: inline-block;
|
||||
width: 210px;
|
||||
height: $baseline;
|
||||
padding: 4px;
|
||||
font-size: 13px;
|
||||
line-height: $baseline;
|
||||
color: $gray;
|
||||
border: 1px solid #ccc;
|
||||
@include border-radius(3px);
|
||||
}
|
||||
|
||||
/* mini reset for non-html5 file types */
|
||||
input[type=checkbox], input[type=radio] {
|
||||
width: auto;
|
||||
height: auto;
|
||||
padding: 0;
|
||||
margin: 3px 0;
|
||||
*margin-top: 0; /* IE6-7 */
|
||||
line-height: normal;
|
||||
border: none;
|
||||
}
|
||||
|
||||
input[type=file] {
|
||||
background-color: #fff;
|
||||
padding: initial;
|
||||
border: initial;
|
||||
line-height: initial;
|
||||
@include box-shadow(none);
|
||||
}
|
||||
|
||||
input[type=button], input[type=reset], input[type=submit] {
|
||||
width: auto;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
select, input[type=file] {
|
||||
height: $baseline * 1.5;
|
||||
line-height: $baseline * 1.5;
|
||||
}
|
||||
|
||||
textarea {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.uneditable-input {
|
||||
background-color: #eee;
|
||||
display: block;
|
||||
border-color: #ccc;
|
||||
@include box-shadow(inset 0 1px 2px rgba(0,0,0,.075));
|
||||
}
|
||||
|
||||
// Placeholder text gets special styles; can't be bundled together though for some reason
|
||||
:-moz-placeholder {
|
||||
color: $grayLight;
|
||||
}
|
||||
::-webkit-input-placeholder {
|
||||
color: $grayLight;
|
||||
}
|
||||
|
||||
// Focus states
|
||||
input, select, textarea {
|
||||
$transition: border linear .2s, box-shadow linear .2s;
|
||||
@include transition($transition);
|
||||
@include box-shadow(inset 0 1px 3px rgba(0,0,0,.1));
|
||||
}
|
||||
input:focus, textarea:focus {
|
||||
outline: none;
|
||||
border-color: rgba(82,168,236,.8);
|
||||
$shadow: inset 0 1px 3px rgba(0,0,0,.1), 0 0 8px rgba(82,168,236,.6);
|
||||
@include box-shadow($shadow);
|
||||
}
|
||||
|
||||
// Error styles
|
||||
form div.error {
|
||||
background: lighten($red, 57%);
|
||||
padding: 10px 0;
|
||||
margin: -10px 0 10px;
|
||||
@include border-radius(4px);
|
||||
$error-text: desaturate(lighten($red, 25%), 25%);
|
||||
> label, span.help-inline, span.help-block {
|
||||
color: $red;
|
||||
}
|
||||
input, textarea {
|
||||
border-color: $error-text;
|
||||
@include box-shadow(0 0 3px rgba(171,41,32,.25));
|
||||
&:focus {
|
||||
border-color: darken($error-text, 10%);
|
||||
@include box-shadow(0 0 6px rgba(171,41,32,.5));
|
||||
}
|
||||
}
|
||||
.input-prepend, .input-append {
|
||||
span.add-on {
|
||||
background: lighten($red, 50%);
|
||||
border-color: $error-text;
|
||||
color: darken($error-text, 10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Form element sizes
|
||||
.input-mini, input.mini, textarea.mini, select.mini {
|
||||
width: 60px;
|
||||
}
|
||||
.input-small, input.small, textarea.small, select.small {
|
||||
width: 90px;
|
||||
}
|
||||
.input-medium, input.medium, textarea.medium, select.medium {
|
||||
width: 150px;
|
||||
}
|
||||
.input-large, input.large, textarea.large, select.large {
|
||||
width: 210px;
|
||||
}
|
||||
.input-xlarge, input.xlarge, textarea.xlarge, select.xlarge {
|
||||
width: 270px;
|
||||
}
|
||||
.input-xxlarge, input.xxlarge, textarea.xxlarge, select.xxlarge {
|
||||
width: 530px;
|
||||
}
|
||||
textarea.xxlarge {
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
// Turn off focus for disabled (read-only) form elements
|
||||
input[readonly]:focus, textarea[readonly]:focus, input.disabled {
|
||||
background: #f5f5f5;
|
||||
border-color: #ddd;
|
||||
@include box-shadow(none);
|
||||
}
|
||||
|
||||
// Actions (the buttons)
|
||||
.actions {
|
||||
background: #f5f5f5;
|
||||
margin-top: $baseline;
|
||||
margin-bottom: $baseline;
|
||||
padding: ($baseline - 1) 20px $baseline 150px;
|
||||
border-top: 1px solid #ddd;
|
||||
@include border-radius(0 0 3px 3px);
|
||||
.secondary-action {
|
||||
float: right;
|
||||
a {
|
||||
line-height: 30px;
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Help Text
|
||||
.help-inline, .help-block {
|
||||
font-size: 12px;
|
||||
line-height: $baseline;
|
||||
color: $grayLight;
|
||||
}
|
||||
.help-inline {
|
||||
padding-left: 5px;
|
||||
*position: relative; /* IE6-7 */
|
||||
*top: -5px; /* IE6-7 */
|
||||
}
|
||||
|
||||
// Big blocks of help text
|
||||
.help-block {
|
||||
display: block;
|
||||
max-width: 600px;
|
||||
}
|
||||
|
||||
// Inline Fields (input fields that appear as inline objects
|
||||
.inline-inputs {
|
||||
color: $gray;
|
||||
span, input {
|
||||
display: inline-block;
|
||||
}
|
||||
input.mini {
|
||||
width: 60px;
|
||||
}
|
||||
input.small {
|
||||
width: 90px;
|
||||
}
|
||||
span {
|
||||
padding: 0 2px 0 1px;
|
||||
}
|
||||
}
|
||||
|
||||
// Allow us to put symbols and text within the input field for a cleaner look
|
||||
.input-prepend, .input-append {
|
||||
input {
|
||||
@include border-radius(0 3px 3px 0);
|
||||
}
|
||||
.add-on {
|
||||
background: #f5f5f5;
|
||||
float: left;
|
||||
display: block;
|
||||
width: auto;
|
||||
min-width: 16px;
|
||||
padding: 4px 4px 4px 5px;
|
||||
color: $grayLight;
|
||||
font-weight: normal;
|
||||
line-height: 18px;
|
||||
height: 18px;
|
||||
text-align: center;
|
||||
text-shadow: 0 1px 0 #fff;
|
||||
border: 1px solid #ccc;
|
||||
border-right-width: 0;
|
||||
@include border-radius(3px 0 0 3px);
|
||||
}
|
||||
.active {
|
||||
background: lighten($green, 30);
|
||||
border-color: $green;
|
||||
}
|
||||
}
|
||||
.input-prepend {
|
||||
.add-on {
|
||||
*margin-top: 1px; /* IE6-7 */
|
||||
}
|
||||
}
|
||||
.input-append {
|
||||
input {
|
||||
float: left;
|
||||
@include border-radius(3px 0 0 3px);
|
||||
}
|
||||
.add-on {
|
||||
@include border-radius(0 3px 3px 0);
|
||||
border-right-width: 1px;
|
||||
border-left-width: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Stacked options for forms (radio buttons or checkboxes)
|
||||
.inputs-list {
|
||||
margin: 0 0 5px;
|
||||
width: 100%;
|
||||
li {
|
||||
display: block;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
label {
|
||||
display: block;
|
||||
float: none;
|
||||
width: auto;
|
||||
padding: 0;
|
||||
line-height: $baseline;
|
||||
text-align: left;
|
||||
white-space: normal;
|
||||
strong {
|
||||
color: $gray;
|
||||
}
|
||||
small {
|
||||
font-size: 12px;
|
||||
font-weight: normal;
|
||||
}
|
||||
}
|
||||
ul.inputs-list {
|
||||
margin-left: 25px;
|
||||
margin-bottom: 10px;
|
||||
padding-top: 0;
|
||||
}
|
||||
&:first-child {
|
||||
padding-top: 5px;
|
||||
}
|
||||
}
|
||||
input[type=radio], input[type=checkbox] {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Stacked forms
|
||||
.form-stacked {
|
||||
padding-left: 20px;
|
||||
fieldset {
|
||||
padding-top: $baseline / 2;
|
||||
}
|
||||
legend {
|
||||
margin-left: 0;
|
||||
}
|
||||
label {
|
||||
display: block;
|
||||
float: none;
|
||||
width: auto;
|
||||
font-weight: bold;
|
||||
text-align: left;
|
||||
line-height: 20px;
|
||||
padding-top: 0;
|
||||
}
|
||||
.clearfix {
|
||||
margin-bottom: $baseline / 2;
|
||||
div.input {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
.inputs-list {
|
||||
margin-bottom: 0;
|
||||
li {
|
||||
padding-top: 0;
|
||||
label {
|
||||
font-weight: normal;
|
||||
padding-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
div.error {
|
||||
padding-top: 10px;
|
||||
padding-bottom: 10px;
|
||||
padding-left: 10px;
|
||||
margin-top: 0;
|
||||
margin-left: -10px;
|
||||
}
|
||||
.actions {
|
||||
margin-left: -20px;
|
||||
padding-left: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,776 @@
|
|||
/* patterns.css.scss
|
||||
* Repeatable UI elements outside the base styles provided from the scaffolding
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
// TOPBAR
|
||||
// ------
|
||||
|
||||
// Topbar for Branding and Nav
|
||||
.topbar {
|
||||
height: 40px;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 10000;
|
||||
overflow: visible;
|
||||
|
||||
// Links get text shadow
|
||||
a {
|
||||
color: $grayLight;
|
||||
text-shadow: 0 -1px 0 rgba(0,0,0,.25);
|
||||
}
|
||||
|
||||
// Hover and active states
|
||||
a:hover,
|
||||
ul .active a {
|
||||
background-color: #333;
|
||||
background-color: rgba(255,255,255,.05);
|
||||
color: $white;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
// Website name
|
||||
h3 {
|
||||
position: relative;
|
||||
a {
|
||||
float: left;
|
||||
display: block;
|
||||
padding: 8px 20px 12px;
|
||||
margin-left: -20px; // negative indent to left-align the text down the page
|
||||
color: $white;
|
||||
font-size: 20px;
|
||||
font-weight: 200;
|
||||
line-height: 1;
|
||||
}
|
||||
}
|
||||
|
||||
// Search Form
|
||||
form {
|
||||
float: left;
|
||||
margin: 5px 0 0 0;
|
||||
position: relative;
|
||||
@include opacity(100);
|
||||
}
|
||||
input {
|
||||
background-color: #444;
|
||||
background-color: rgba(255,255,255,.3);
|
||||
@include sans-serif-font(13px, normal, 1);
|
||||
padding: 4px 9px;
|
||||
color: #fff;
|
||||
color: rgba(255,255,255,.75);
|
||||
border: 1px solid #111;
|
||||
@include border-radius(4px);
|
||||
$shadow: inset 0 1px 2px rgba(0,0,0,.1), 0 1px 0px rgba(255,255,255,.25);
|
||||
@include box-shadow($shadow);
|
||||
@include transition(none);
|
||||
|
||||
// Placeholder text gets special styles; can't be bundled together though for some reason
|
||||
&:-moz-placeholder {
|
||||
color: $grayLighter;
|
||||
}
|
||||
&::-webkit-input-placeholder {
|
||||
color: $grayLighter;
|
||||
}
|
||||
// Hover states
|
||||
&:hover {
|
||||
background-color: $grayLight;
|
||||
background-color: rgba(255,255,255,.5);
|
||||
color: #fff;
|
||||
}
|
||||
// Focus states (we use .focused since IE8 and down doesn't support :focus)
|
||||
&:focus, &.focused {
|
||||
outline: none;
|
||||
background-color: #fff;
|
||||
color: $grayDark;
|
||||
text-shadow: 0 1px 0 #fff;
|
||||
border: 0;
|
||||
padding: 5px 10px;
|
||||
@include box-shadow(0 0 3px rgba(0,0,0,.15));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// gradient is applied to it's own element because overflow visible is not honored by ie when filter is present
|
||||
// For backwards compatability, include .topbar .fill
|
||||
.topbar-inner, .topbar .fill {
|
||||
background-color: #222;
|
||||
@include vertical-gradient(#333, #222);
|
||||
$shadow: 0 1px 3px rgba(0,0,0,.25), inset 0 -1px 0 rgba(0,0,0,.1);
|
||||
@include box-shadow($shadow);
|
||||
}
|
||||
|
||||
// NAVIGATION
|
||||
// ----------
|
||||
|
||||
// Topbar Nav
|
||||
// ul.nav for all topbar based navigation to avoid inheritance issues and over-specificity
|
||||
// For backwards compatibility, leave in .topbar div > ul
|
||||
.topbar div > ul, .nav {
|
||||
display: block;
|
||||
float: left;
|
||||
margin: 0 10px 0 0;
|
||||
position: relative;
|
||||
left: 0;
|
||||
> li {
|
||||
display: block;
|
||||
float: left;
|
||||
}
|
||||
a {
|
||||
display: block;
|
||||
float: none;
|
||||
padding: 10px 10px 11px;
|
||||
line-height: 19px;
|
||||
text-decoration: none;
|
||||
&:hover {
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
.active a {
|
||||
background-color: #222;
|
||||
background-color: rgba(0,0,0,.5);
|
||||
}
|
||||
|
||||
// Secondary (floated right) nav in topbar
|
||||
&.secondary-nav {
|
||||
float: right;
|
||||
margin-left: 10px;
|
||||
margin-right: 0;
|
||||
// backwards compatibility
|
||||
.menu-dropdown, .dropdown-menu {
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
// Dropdowns within the .nav
|
||||
// a.menu:hover and li.open .menu for backwards compatibility
|
||||
a.menu:hover, li.open .menu, .dropdown-toggle:hover, .dropdown.open .dropdown-toggle {
|
||||
background: #444;
|
||||
background: rgba(255,255,255,.05);
|
||||
}
|
||||
// .menu-dropdown for backwards compatibility
|
||||
.menu-dropdown, .dropdown-menu {
|
||||
background-color: #333;
|
||||
// a.menu for backwards compatibility
|
||||
a.menu, .dropdown-toggle {
|
||||
color: #fff;
|
||||
&.open {
|
||||
background: #444;
|
||||
background: rgba(255,255,255,.05);
|
||||
}
|
||||
}
|
||||
li a {
|
||||
color: #999;
|
||||
text-shadow: 0 1px 0 rgba(0,0,0,.5);
|
||||
&:hover {
|
||||
@include vertical-gradient(#292929,#191919);
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
.divider {
|
||||
background-color: #222;
|
||||
border-color: #444;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// For backwards compatability with new dropdowns, redeclare dropdown link padding
|
||||
.topbar ul .menu-dropdown li a, .topbar ul .dropdown-menu li a {
|
||||
padding: 4px 15px;
|
||||
}
|
||||
|
||||
// Dropdown Menus
|
||||
// Use the .menu class on any <li> element within the topbar or ul.tabs and you'll get some superfancy dropdowns
|
||||
// li.menu for backwards compatibility
|
||||
li.menu, .dropdown {
|
||||
position: relative;
|
||||
}
|
||||
// The link that is clicked to toggle the dropdown
|
||||
// a.menu for backwards compatibility
|
||||
a.menu:after, .dropdown-toggle:after {
|
||||
width: 0;
|
||||
height: 0;
|
||||
display: inline-block;
|
||||
content: "↓";
|
||||
text-indent: -99999px;
|
||||
vertical-align: top;
|
||||
margin-top: 8px;
|
||||
margin-left: 4px;
|
||||
border-left: 4px solid transparent;
|
||||
border-right: 4px solid transparent;
|
||||
border-top: 4px solid #fff;
|
||||
@include opacity(50);
|
||||
}
|
||||
// The dropdown menu (ul)
|
||||
// .menu-dropdown for backwards compatibility
|
||||
.menu-dropdown, .dropdown-menu {
|
||||
background-color: #fff;
|
||||
float: left;
|
||||
display: none; // None by default, but block on "open" of the menu
|
||||
position: absolute;
|
||||
top: 40px;
|
||||
min-width: 160px;
|
||||
max-width: 220px;
|
||||
_width: 160px;
|
||||
margin-left: 0; // override default ul styles
|
||||
margin-right: 0;
|
||||
padding: 6px 0;
|
||||
zoom: 1; // do we need this?
|
||||
border-color: #999;
|
||||
border-color: rgba(0,0,0,.2);
|
||||
border-style: solid;
|
||||
border-width: 0 1px 1px;
|
||||
@include border-radius(0 0 6px 6px);
|
||||
@include box-shadow(0 2px 4px rgba(0,0,0,.2));
|
||||
@include background-clip(padding-box);
|
||||
|
||||
// Unfloat any li's to make them stack
|
||||
li {
|
||||
float: none;
|
||||
display: block;
|
||||
background-color: none;
|
||||
}
|
||||
// Dividers (basically an hr) within the dropdown
|
||||
.divider {
|
||||
height: 1px;
|
||||
margin: 5px 0;
|
||||
overflow: hidden;
|
||||
background-color: #eee;
|
||||
border-bottom: 1px solid #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.topbar .dropdown-menu, .dropdown-menu {
|
||||
// Links within the dropdown menu
|
||||
a {
|
||||
display: block;
|
||||
padding: 4px 15px;
|
||||
clear: both;
|
||||
font-weight: normal;
|
||||
line-height: 18px;
|
||||
color: $gray;
|
||||
text-shadow: 0 1px 0 #fff;
|
||||
// Hover state
|
||||
&:hover {
|
||||
@include vertical-gradient(#eee, #ddd);
|
||||
color: $grayDark;
|
||||
text-decoration: none;
|
||||
$shadow: inset 0 1px 0 rgba(0,0,0,.025), inset 0 -1px rgba(0,0,0,.025);
|
||||
@include box-shadow($shadow);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Open state for the dropdown
|
||||
// .open for backwards compatibility
|
||||
.open, .dropdown.open {
|
||||
// .menu for backwards compatibility
|
||||
.menu, .dropdown-toggle {
|
||||
color: #fff;
|
||||
background: #ccc;
|
||||
background: rgba(0,0,0,.3);
|
||||
}
|
||||
// .menu-dropdown for backwards compatibility
|
||||
.menu-dropdown, .dropdown-menu {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
// Tabs and Pills
|
||||
.tabs, .pills {
|
||||
margin: 0 0 20px;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
@include clearfix();
|
||||
> li {
|
||||
float: left;
|
||||
> a {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Basic Tabs
|
||||
.tabs {
|
||||
width: 100%;
|
||||
border-bottom: 1px solid #ddd;
|
||||
> li {
|
||||
position: relative; // For the dropdowns mostly
|
||||
top: 1px;
|
||||
> a {
|
||||
margin-right: 2px;
|
||||
padding: 0 15px;
|
||||
line-height: ($baseline * 2) - 1;
|
||||
@include border-radius(4px 4px 0 0);
|
||||
&:hover {
|
||||
background-color: #eee;
|
||||
border-bottom: 1px solid #ddd;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
&.active > a {
|
||||
background-color: #fff;
|
||||
padding: 0 14px;
|
||||
border: 1px solid #ddd;
|
||||
border-bottom: 0;
|
||||
color: $gray;
|
||||
}
|
||||
}
|
||||
// first one for backwards compatibility
|
||||
.menu-dropdown, .dropdown-menu {
|
||||
top: 35px;
|
||||
border-width: 1px;
|
||||
@include border-radius(0 6px 6px 6px);
|
||||
}
|
||||
// first one for backwards compatibility
|
||||
a.menu:after, .dropdown-toggle:after {
|
||||
border-top-color: #999;
|
||||
margin-top: 15px;
|
||||
margin-left: 5px;
|
||||
}
|
||||
// first one for backwards compatibility
|
||||
li.open a.menu:after, .dropdown.open .dropdown-toggle:after {
|
||||
border-top-color: #555;
|
||||
}
|
||||
}
|
||||
|
||||
// Basic pill nav
|
||||
.pills {
|
||||
a {
|
||||
margin: 5px 3px 5px 0;
|
||||
padding: 0 15px;
|
||||
text-shadow: 0 1px 1px #fff;
|
||||
line-height: 30px;
|
||||
@include border-radius(15px);
|
||||
&:hover {
|
||||
background: $linkColorHover;
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
text-shadow: 0 1px 1px rgba(0,0,0,.25);
|
||||
}
|
||||
}
|
||||
.active a {
|
||||
background: $linkColor;
|
||||
color: #fff;
|
||||
text-shadow: 0 1px 1px rgba(0,0,0,.25);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// PAGE HEADERS
|
||||
// ------------
|
||||
|
||||
.hero-unit {
|
||||
background-color: #f5f5f5;
|
||||
margin-top: 60px;
|
||||
margin-bottom: 30px;
|
||||
padding: 60px;
|
||||
@include border-radius(6px);
|
||||
h1 {
|
||||
margin-bottom: 0;
|
||||
font-size: 60px;
|
||||
line-height: 1;
|
||||
letter-spacing: -1px;
|
||||
}
|
||||
p {
|
||||
font-size: 18px;
|
||||
font-weight: 200;
|
||||
line-height: $baseline * 1.5;
|
||||
}
|
||||
}
|
||||
footer {
|
||||
margin-top: $baseline - 1;
|
||||
padding-top: $baseline - 1;
|
||||
border-top: 1px solid #eee;
|
||||
}
|
||||
|
||||
|
||||
// PAGE HEADERS
|
||||
// ------------
|
||||
|
||||
.page-header {
|
||||
margin-bottom: $baseline - 1;
|
||||
border-bottom: 1px solid #ddd;
|
||||
@include box-shadow(0 1px 0 rgba(255,255,255,.5));
|
||||
h1 {
|
||||
margin-bottom: ($baseline / 2) - 1px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// BUTTON STYLES
|
||||
// -------------
|
||||
|
||||
// Base .btn styles
|
||||
.btn {
|
||||
// Button Base
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
@include vertical-three-colors-gradient(#ffffff, #ffffff, 25%, darken(#ffffff, 10%)); // Don't use .gradientbar() here since it does a three-color gradient
|
||||
padding: 5px 14px 6px;
|
||||
text-shadow: 0 1px 1px rgba(255,255,255,.75);
|
||||
color: #333;
|
||||
font-size: 13px;
|
||||
line-height: normal;
|
||||
border: 1px solid #ccc;
|
||||
border-bottom-color: #bbb;
|
||||
@include border-radius(4px);
|
||||
$shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
|
||||
@include box-shadow($shadow);
|
||||
|
||||
&:hover {
|
||||
background-position: 0 -15px;
|
||||
color: #333;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
// Primary Button Type
|
||||
&.primary {
|
||||
color:#fff;
|
||||
@include gradientBar($blue, $blueDark)
|
||||
}
|
||||
|
||||
// Transitions
|
||||
@include transition(.1s linear all);
|
||||
|
||||
// Active and Disabled states
|
||||
&:active {
|
||||
$shadow: inset 0 2px 4px rgba(0,0,0,.25), 0 1px 2px rgba(0,0,0,.05);
|
||||
@include box-shadow($shadow);
|
||||
}
|
||||
&.disabled {
|
||||
cursor: default;
|
||||
background-image: none;
|
||||
@include opacity(65);
|
||||
@include box-shadow(none);
|
||||
}
|
||||
&[disabled] {
|
||||
// disabled pseudo can't be included with .disabled
|
||||
// def because IE8 and below will drop it ;_;
|
||||
cursor: default;
|
||||
background-image: none;
|
||||
@include opacity(65);
|
||||
@include box-shadow(none);
|
||||
}
|
||||
|
||||
// Button Sizes
|
||||
&.large {
|
||||
font-size: 16px;
|
||||
line-height: normal;
|
||||
padding: 9px 14px 9px;
|
||||
@include border-radius(6px);
|
||||
}
|
||||
&.small {
|
||||
padding: 7px 9px 7px;
|
||||
font-size: 11px;
|
||||
}
|
||||
}
|
||||
// Super jank hack for removing border-radius from IE9 so we can keep filter gradients on alerts and buttons
|
||||
:root .alert-message, :root .btn {
|
||||
border-radius: 0 \0;
|
||||
}
|
||||
|
||||
// Help Firefox not be a jerk about adding extra padding to buttons
|
||||
button.btn, input[type=submit].btn {
|
||||
&::-moz-focus-inner {
|
||||
padding: 0;
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// ERROR STYLES
|
||||
// ------------
|
||||
|
||||
// Base alert styles
|
||||
.alert-message {
|
||||
@include gradientBar(#fceec1, #eedc94); // warning by default
|
||||
margin-bottom: $baseline;
|
||||
padding: 7px 14px;
|
||||
color: $grayDark;
|
||||
text-shadow: 0 1px 0 rgba(255,255,255,.5);
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
@include border-radius(4px);
|
||||
@include box-shadow(inset 0 1px 0 rgba(255,255,255,.25));
|
||||
|
||||
// Remove extra margin from content
|
||||
h5 {
|
||||
line-height: $baseline;
|
||||
}
|
||||
p {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
div {
|
||||
margin-top: 5px;
|
||||
margin-bottom: 2px;
|
||||
line-height: 28px;
|
||||
}
|
||||
.btn {
|
||||
// Provide actions with buttons
|
||||
@include box-shadow(0 1px 0 rgba(255,255,255,.25));
|
||||
}
|
||||
.close {
|
||||
float: right;
|
||||
margin-top: -2px;
|
||||
color: $black;
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
text-shadow: 0 1px 0 rgba(255,255,255,1);
|
||||
@include opacity(20);
|
||||
&:hover {
|
||||
color: $black;
|
||||
text-decoration: none;
|
||||
@include opacity(40);
|
||||
}
|
||||
}
|
||||
|
||||
&.block-message {
|
||||
background-image: none;
|
||||
background-color: lighten(#fceec1, 5%);
|
||||
padding: 14px;
|
||||
border-color: #fceec1;
|
||||
@include box-shadow(none);
|
||||
|
||||
p {
|
||||
margin-right: 30px;
|
||||
}
|
||||
.alert-actions {
|
||||
margin-top: 5px;
|
||||
}
|
||||
&.error, &.success, &.info {
|
||||
color: $grayDark;
|
||||
text-shadow: 0 1px 0 rgba(255,255,255,.5);
|
||||
}
|
||||
&.error {
|
||||
background-color: lighten(#f56a66, 25%);
|
||||
border-color: lighten(#f56a66, 20%);
|
||||
}
|
||||
&.success {
|
||||
background-color: lighten(#62c462, 30%);
|
||||
border-color: lighten(#62c462, 25%);
|
||||
}
|
||||
&.info {
|
||||
background-color: lighten(#6bd0ee, 25%);
|
||||
border-color: lighten(#6bd0ee, 20%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// PAGINATION
|
||||
// ----------
|
||||
|
||||
.pagination {
|
||||
height: $baseline * 2;
|
||||
margin: $baseline 0;
|
||||
ul {
|
||||
float: left;
|
||||
margin: 0;
|
||||
border: 1px solid #ddd;
|
||||
border: 1px solid rgba(0,0,0,.15);
|
||||
@include border-radius(3px);
|
||||
@include box-shadow(0 1px 2px rgba(0,0,0,.05));
|
||||
}
|
||||
li {
|
||||
display: inline;
|
||||
}
|
||||
a {
|
||||
float: left;
|
||||
padding: 0 14px;
|
||||
line-height: ($baseline * 2) - 2;
|
||||
border-right: 1px solid;
|
||||
border-right-color: #ddd;
|
||||
border-right-color: rgba(0,0,0,.15);
|
||||
*border-right-color: #ddd; /* IE6-7 */
|
||||
text-decoration: none;
|
||||
}
|
||||
a:hover, .active a {
|
||||
background-color: lighten($blue, 45%);
|
||||
}
|
||||
.disabled a, .disabled a:hover {
|
||||
background-color: transparent;
|
||||
color: $grayLight;
|
||||
}
|
||||
.next a {
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// WELLS
|
||||
// -----
|
||||
.well {
|
||||
background-color: #f5f5f5;
|
||||
margin-bottom: 20px;
|
||||
padding: 19px;
|
||||
min-height: 20px;
|
||||
border: 1px solid #eee;
|
||||
border: 1px solid rgba(0,0,0,.05);
|
||||
@include border-radius(4px);
|
||||
@include box-shadow(inset 0 1px 1px rgba(0,0,0,.05));
|
||||
}
|
||||
|
||||
// MODALS
|
||||
// ------
|
||||
.modal-backdrop {
|
||||
background-color: rgba(0,0,0,.5);
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 1000;
|
||||
}
|
||||
.modal {
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
z-index: 2000;
|
||||
width: 560px;
|
||||
margin: -280px 0 0 -250px;
|
||||
background-color: $white;
|
||||
border: 1px solid #999;
|
||||
border: 1px solid rgba(0,0,0,.3);
|
||||
*border: 1px solid #999; /* IE6-7 */
|
||||
@include border-radius(6px);
|
||||
@include box-shadow(0 3px 7px rgba(0,0,0,0.3));
|
||||
@include background-clip(padding-box);
|
||||
}
|
||||
.modal-header {
|
||||
border-bottom: 1px solid #eee;
|
||||
padding: 5px 20px;
|
||||
.close {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 10px;
|
||||
color: #999;
|
||||
line-height:10px;
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
.modal-body {
|
||||
padding: 20px;
|
||||
}
|
||||
.modal-footer {
|
||||
background-color: #f5f5f5;
|
||||
padding: 14px 20px 15px;
|
||||
border-top: 1px solid #ddd;
|
||||
@include border-radius(0 0 6px 6px);
|
||||
@include box-shadow(inset 0 1px 0 #fff);
|
||||
@include clearfix();
|
||||
margin-bottom: 0;
|
||||
.btn {
|
||||
float: right;
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
// POPOVER ARROWS
|
||||
// --------------
|
||||
@mixin above-arrow($arrowWidth: 5px) {
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
margin-left: -$arrowWidth;
|
||||
border-left: $arrowWidth solid transparent;
|
||||
border-right: $arrowWidth solid transparent;
|
||||
border-top: $arrowWidth solid #000;
|
||||
}
|
||||
@mixin left-arrow($arrowWidth: 5px) {
|
||||
top: 50%;
|
||||
right: 0;
|
||||
margin-top: -$arrowWidth;
|
||||
border-top: $arrowWidth solid transparent;
|
||||
border-bottom: $arrowWidth solid transparent;
|
||||
border-left: $arrowWidth solid #000;
|
||||
}
|
||||
@mixin below-arrow($arrowWidth: 5px) {
|
||||
top: 0;
|
||||
left: 50%;
|
||||
margin-left: -$arrowWidth;
|
||||
border-left: $arrowWidth solid transparent;
|
||||
border-right: $arrowWidth solid transparent;
|
||||
border-bottom: $arrowWidth solid #000;
|
||||
}
|
||||
@mixin right-arrow($arrowWidth: 5px) {
|
||||
top: 50%;
|
||||
left: 0;
|
||||
margin-top: -$arrowWidth;
|
||||
border-top: $arrowWidth solid transparent;
|
||||
border-bottom: $arrowWidth solid transparent;
|
||||
border-right: $arrowWidth solid #000;
|
||||
}
|
||||
|
||||
// TWIPSY
|
||||
// ------
|
||||
.twipsy {
|
||||
display: block;
|
||||
position: absolute;
|
||||
visibility: visible;
|
||||
padding: 5px;
|
||||
font-size: 11px;
|
||||
z-index: 1000;
|
||||
@include opacity(80);
|
||||
&.above .twipsy-arrow { @include above-arrow(); }
|
||||
&.left .twipsy-arrow { @include left-arrow(); }
|
||||
&.below .twipsy-arrow { @include below-arrow(); }
|
||||
&.right .twipsy-arrow { @include right-arrow(); }
|
||||
}
|
||||
.twipsy-inner {
|
||||
padding: 3px 8px;
|
||||
background-color: #000;
|
||||
color: white;
|
||||
text-align: center;
|
||||
max-width: 200px;
|
||||
text-decoration: none;
|
||||
@include border-radius(4px);
|
||||
}
|
||||
.twipsy-arrow {
|
||||
position: absolute;
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
// POPOVERS
|
||||
// --------
|
||||
.popover {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 1000;
|
||||
padding: 5px;
|
||||
display: none;
|
||||
&.above .arrow { @include above-arrow(); }
|
||||
&.right .arrow { @include right-arrow(); }
|
||||
&.below .arrow { @include below-arrow(); }
|
||||
&.left .arrow { @include left-arrow(); }
|
||||
.arrow {
|
||||
position: absolute;
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
.inner {
|
||||
background: #333;
|
||||
background: rgba(0,0,0,.8);
|
||||
padding: 3px;
|
||||
overflow: hidden;
|
||||
width: 280px;
|
||||
@include border-radius(6px);
|
||||
@include box-shadow(0 3px 7px rgba(0,0,0,0.3));
|
||||
}
|
||||
.title {
|
||||
background-color: #f5f5f5;
|
||||
padding: 9px 15px;
|
||||
line-height: 1;
|
||||
@include border-radius(3px 3px 0 0);
|
||||
border-bottom:1px solid #eee;
|
||||
}
|
||||
.content {
|
||||
background-color: $white;
|
||||
padding: 14px;
|
||||
@include border-radius(0 0 3px 3px);
|
||||
@include background-clip(padding-box);
|
||||
p, ul, ol {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,265 @@
|
|||
/* preboot.css.scss
|
||||
* Variables and mixins to pre-ignite any new web development project
|
||||
* ------------------------------------------------------------------ */
|
||||
|
||||
// VARIABLES
|
||||
// ---------
|
||||
|
||||
// Links
|
||||
$linkColor: #0069d6;
|
||||
$linkColorHover: darken($linkColor, 10);
|
||||
|
||||
// Grays
|
||||
$black: #000;
|
||||
$grayDark: lighten($black, 25%);
|
||||
$gray: lighten($black, 50%);
|
||||
$grayLight: lighten($black, 75%);
|
||||
$grayLighter: lighten($black, 90%);
|
||||
$white: #fff;
|
||||
|
||||
// Accent Colors
|
||||
$blue: #049CDB;
|
||||
$blueDark: #0064CD;
|
||||
$green: #46a546;
|
||||
$red: #9d261d;
|
||||
$yellow: #ffc40d;
|
||||
$orange: #f89406;
|
||||
$pink: #c3325f;
|
||||
$purple: #7a43b6;
|
||||
|
||||
// Baseline grid
|
||||
$basefont: 13px;
|
||||
$baseline: 18px;
|
||||
|
||||
// Griditude
|
||||
$gridColumns: 16;
|
||||
$gridColumnWidth: 40px;
|
||||
$gridGutterWidth: 20px;
|
||||
$extraSpace: ($gridGutterWidth * 2); // For our grid calculations
|
||||
$siteWidth: ($gridColumns * $gridColumnWidth) + ($gridGutterWidth * ($gridColumns - 1));
|
||||
|
||||
// Color Scheme
|
||||
$baseColor: $blue; // Set a base color
|
||||
$complement: complement($baseColor); // Determine a complementary color
|
||||
$split1: adjust-hue($baseColor, 158); // Split complements
|
||||
$split2: adjust-hue($baseColor, -158);
|
||||
$triad1: adjust-hue($baseColor, 135); // Triads colors
|
||||
$triad2: adjust-hue($baseColor, -135);
|
||||
$tetra1: adjust-hue($baseColor, 90); // Tetra colors
|
||||
$tetra2: adjust-hue($baseColor, -90);
|
||||
$analog1: adjust-hue($baseColor, 22); // Analogs colors
|
||||
$analog2: adjust-hue($baseColor, -22);
|
||||
|
||||
|
||||
// MIXINS
|
||||
// ------
|
||||
|
||||
// Clearfix for clearing floats like a boss h5bp.com/q
|
||||
@mixin clearfix {
|
||||
zoom: 1;
|
||||
&:before, &:after {
|
||||
display: table;
|
||||
content: "";
|
||||
}
|
||||
&:after {
|
||||
clear: both;
|
||||
}
|
||||
}
|
||||
|
||||
// Center-align a block level element
|
||||
@mixin center-block {
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
// Sizing shortcuts
|
||||
@mixin size($height: 5px, $width: 5px) {
|
||||
height: $height;
|
||||
width: $width;
|
||||
}
|
||||
@mixin square($size: 5px) {
|
||||
@include size($size, $size);
|
||||
}
|
||||
|
||||
// Input placeholder text
|
||||
@mixin placeholder($color: $grayLight) {
|
||||
:-moz-placeholder {
|
||||
color: $color;
|
||||
}
|
||||
::-webkit-input-placeholder {
|
||||
color: $color;
|
||||
}
|
||||
}
|
||||
|
||||
// Font Stacks
|
||||
@mixin shorthand-font($weight: normal, $size: 14px, $lineHeight: 20px) {
|
||||
font-size: $size;
|
||||
font-weight: $weight;
|
||||
line-height: $lineHeight;
|
||||
}
|
||||
@mixin sans-serif-font($weight: normal, $size: 14px, $lineHeight: 20px) {
|
||||
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
font-size: $size;
|
||||
font-weight: $weight;
|
||||
line-height: $lineHeight;
|
||||
}
|
||||
@mixin serif-font($weight: normal, $size: 14px, $lineHeight: 20px) {
|
||||
font-family: "Georgia", Times New Roman, Times, serif;
|
||||
font-size: $size;
|
||||
font-weight: $weight;
|
||||
line-height: $lineHeight;
|
||||
}
|
||||
@mixin monospace-font($weight: normal, $size: 12px, $lineHeight: 20px) {
|
||||
font-family: "Monaco", Courier New, monospace;
|
||||
font-size: $size;
|
||||
font-weight: $weight;
|
||||
line-height: $lineHeight;
|
||||
}
|
||||
|
||||
// Grid System
|
||||
@mixin container {
|
||||
width: $siteWidth;
|
||||
margin: 0 auto;
|
||||
@include clearfix();
|
||||
}
|
||||
@mixin columns($columnSpan: 1) {
|
||||
width: ($gridColumnWidth * $columnSpan) + ($gridGutterWidth * ($columnSpan - 1));
|
||||
}
|
||||
@mixin offset($columnOffset: 1) {
|
||||
margin-left: ($gridColumnWidth * $columnOffset) + ($gridGutterWidth * ($columnOffset - 1)) + $extraSpace;
|
||||
}
|
||||
|
||||
// Border Radius
|
||||
@mixin border-radius($radius: 5px) {
|
||||
-webkit-border-radius: $radius;
|
||||
-moz-border-radius: $radius;
|
||||
border-radius: $radius;
|
||||
}
|
||||
|
||||
// Drop shadows
|
||||
@mixin box-shadow($shadow: 0 1px 3px rgba(0,0,0,.25)) {
|
||||
-webkit-box-shadow: $shadow;
|
||||
-moz-box-shadow: $shadow;
|
||||
box-shadow: $shadow;
|
||||
}
|
||||
|
||||
// Transitions
|
||||
@mixin transition($transition) {
|
||||
-webkit-transition: $transition;
|
||||
-moz-transition: $transition;
|
||||
transition: $transition;
|
||||
}
|
||||
|
||||
// Background clipping
|
||||
@mixin background-clip($clip) {
|
||||
-webkit-background-clip: $clip;
|
||||
-moz-background-clip: $clip;
|
||||
background-clip: $clip;
|
||||
}
|
||||
|
||||
// CSS3 Content Columns
|
||||
@mixin content-columns($columnCount, $columnGap: 20px) {
|
||||
-webkit-column-count: $columnCount;
|
||||
-moz-column-count: $columnCount;
|
||||
column-count: $columnCount;
|
||||
-webkit-column-gap: $columnGap;
|
||||
-moz-column-gap: $columnGap;
|
||||
column-gap: $columnGap;
|
||||
}
|
||||
|
||||
// Add an alphatransparency value to any background or border color (via Elyse Holladay)
|
||||
@mixin background-translucent($color: $white, $alpha: 1) {
|
||||
background-color: hsla(hue($color), saturation($color), lightness($color), $alpha);
|
||||
}
|
||||
@mixin border-translucent($color: $white, $alpha: 1) {
|
||||
border-color: hsla(hue($color), saturation($color), lightness($color), $alpha);
|
||||
background-clip: padding-box;
|
||||
}
|
||||
|
||||
// Gradients
|
||||
@mixin horizontal-gradient($startColor: #555, $endColor: #333) {
|
||||
background-color: $endColor;
|
||||
background-repeat: repeat-x;
|
||||
background-image: -khtml-gradient(linear, left top, right top, from($startColor), to($endColor)); // Konqueror
|
||||
background-image: -moz-linear-gradient(left, $startColor, $endColor); // FF 3.6+
|
||||
background-image: -ms-linear-gradient(left, $startColor, $endColor); // IE10
|
||||
background-image: -webkit-gradient(linear, left top, right top, color-stop(0%, $startColor), color-stop(100%, $endColor)); // Safari 4+, Chrome 2+
|
||||
background-image: -webkit-linear-gradient(left, $startColor, $endColor); // Safari 5.1+, Chrome 10+
|
||||
background-image: -o-linear-gradient(left, $startColor, $endColor); // Opera 11.10
|
||||
background-image: linear-gradient(left, $startColor, $endColor); // Le standard
|
||||
}
|
||||
@mixin vertical-gradient($startColor: #555, $endColor: #333) {
|
||||
background-color: $endColor;
|
||||
background-repeat: repeat-x;
|
||||
background-image: -khtml-gradient(linear, left top, left bottom, from($startColor), to($endColor)); // Konqueror
|
||||
background-image: -moz-linear-gradient(top, $startColor, $endColor); // FF 3.6+
|
||||
background-image: -ms-linear-gradient(top, $startColor, $endColor); // IE10
|
||||
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, $startColor), color-stop(100%, $endColor)); // Safari 4+, Chrome 2+
|
||||
background-image: -webkit-linear-gradient(top, $startColor, $endColor); // Safari 5.1+, Chrome 10+
|
||||
background-image: -o-linear-gradient(top, $startColor, $endColor); // Opera 11.10
|
||||
background-image: linear-gradient(top, $startColor, $endColor); // The standard
|
||||
}
|
||||
@mixin directional-gradient($startColor: #555, $endColor: #333, $deg: 45deg) {
|
||||
background-color: $endColor;
|
||||
background-repeat: repeat-x;
|
||||
background-image: -moz-linear-gradient($deg, $startColor, $endColor); // FF 3.6+
|
||||
background-image: -ms-linear-gradient($deg, $startColor, $endColor); // IE10
|
||||
background-image: -webkit-linear-gradient($deg, $startColor, $endColor); // Safari 5.1+, Chrome 10+
|
||||
background-image: -o-linear-gradient($deg, $startColor, $endColor); // Opera 11.10
|
||||
background-image: linear-gradient($deg, $startColor, $endColor); // The standard
|
||||
}
|
||||
@mixin vertical-three-colors-gradient($startColor: #00b3ee, $midColor: #7a43b6, $colorStop: 50%, $endColor: #c3325f) {
|
||||
background-color: $endColor;
|
||||
background-repeat: no-repeat;
|
||||
background-image: -webkit-gradient(linear, 0 0, 0 100%, from($startColor), color-stop($colorStop, $midColor), to($endColor));
|
||||
background-image: -webkit-linear-gradient($startColor, $midColor $colorStop, $endColor);
|
||||
background-image: -moz-linear-gradient(top, $startColor, $midColor $colorStop, $endColor);
|
||||
background-image: -ms-linear-gradient($startColor, $midColor $colorStop, $endColor);
|
||||
background-image: -o-linear-gradient($startColor, $midColor $colorStop, $endColor);
|
||||
background-image: linear-gradient($startColor, $midColor $colorStop, $endColor);
|
||||
}
|
||||
|
||||
// Gradient Bar Colors for buttons and allerts
|
||||
@mixin gradientBar($primaryColor, $secondaryColor) {
|
||||
@include vertical-gradient($primaryColor, $secondaryColor);
|
||||
text-shadow: 0 -1px 0 rgba(0,0,0,.25);
|
||||
border-color: $secondaryColor $secondaryColor darken($secondaryColor, 15%);
|
||||
border-color: rgba(0,0,0,.1) rgba(0,0,0,.1) fadein(rgba(0,0,0,.1), 15%);
|
||||
}
|
||||
// Shared colors for buttons and alerts
|
||||
.btn,
|
||||
.alert-message {
|
||||
// Set text color
|
||||
&.danger,
|
||||
&.danger:hover,
|
||||
&.error,
|
||||
&.error:hover,
|
||||
&.success,
|
||||
&.success:hover,
|
||||
&.info,
|
||||
&.info:hover {
|
||||
color: $white
|
||||
}
|
||||
// Danger and error appear as red
|
||||
&.danger,
|
||||
&.error {
|
||||
@include gradientBar(#ee5f5b, #c43c35);
|
||||
}
|
||||
// Success appears as green
|
||||
&.success {
|
||||
@include gradientBar(#62c462, #57a957);
|
||||
}
|
||||
// Info appears as a neutral blue
|
||||
&.info {
|
||||
@include gradientBar(#5bc0de, #339bb9);
|
||||
}
|
||||
}
|
||||
|
||||
// Opacity
|
||||
@mixin opacity($opacity: 100) {
|
||||
-khtml-opacity: $opacity / 100;
|
||||
-moz-opacity: $opacity / 100;
|
||||
opacity: $opacity / 100;
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,137 @@
|
|||
/* reset.css.scss
|
||||
* Props to Eric Meyer (meyerweb.com) for his CSS reset file. We're using an adapted version here that cuts out some of the reset HTML elements we will never need here (i.e., dfn, samp, etc).
|
||||
* ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
|
||||
|
||||
|
||||
// ERIC MEYER RESET
|
||||
// --------------------------------------------------
|
||||
|
||||
html, body { margin: 0; padding: 0; }
|
||||
h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, cite, code, del, dfn, em, img, q, s, samp, small, strike, strong, sub, sup, tt, var, dd, dl, dt, li, ol, ul, fieldset, form, label, legend, button, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; font-weight: normal; font-style: normal; font-size: 100%; line-height: 1; font-family: inherit; }
|
||||
table { border-collapse: collapse; border-spacing: 0; }
|
||||
ol, ul { list-style: none; }
|
||||
q:before, q:after, blockquote:before, blockquote:after { content: ""; }
|
||||
|
||||
|
||||
// Normalize.css
|
||||
// Pulling in select resets form the normalize.css project
|
||||
// --------------------------------------------------
|
||||
|
||||
// Display in IE6-9 and FF3
|
||||
// -------------------------
|
||||
// Source: http://github.com/necolas/normalize.css
|
||||
html {
|
||||
overflow-y: scroll;
|
||||
font-size: 100%;
|
||||
-webkit-text-size-adjust: 100%;
|
||||
-ms-text-size-adjust: 100%;
|
||||
}
|
||||
// Focus states
|
||||
a:focus {
|
||||
outline: thin dotted;
|
||||
}
|
||||
|
||||
// Display in IE6-9 and FF3
|
||||
// -------------------------
|
||||
// Source: http://github.com/necolas/normalize.css
|
||||
article,
|
||||
aside,
|
||||
details,
|
||||
figcaption,
|
||||
figure,
|
||||
footer,
|
||||
header,
|
||||
hgroup,
|
||||
nav,
|
||||
section {
|
||||
display: block;
|
||||
}
|
||||
|
||||
// Display block in IE6-9 and FF3
|
||||
// -------------------------
|
||||
// Source: http://github.com/necolas/normalize.css
|
||||
audio,
|
||||
canvas,
|
||||
video {
|
||||
display: inline-block;
|
||||
*display: inline;
|
||||
*zoom: 1;
|
||||
}
|
||||
|
||||
// Prevents modern browsers from displaying 'audio' without controls
|
||||
// -------------------------
|
||||
// Source: http://github.com/necolas/normalize.css
|
||||
audio:not([controls]) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// Prevents sub and sup affecting line-height in all browsers
|
||||
// -------------------------
|
||||
// Source: http://github.com/necolas/normalize.css
|
||||
sub,
|
||||
sup {
|
||||
font-size: 75%;
|
||||
line-height: 0;
|
||||
position: relative;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
sup {
|
||||
top: -0.5em;
|
||||
}
|
||||
sub {
|
||||
bottom: -0.25em;
|
||||
}
|
||||
|
||||
// Img border in a's and image quality
|
||||
// -------------------------
|
||||
// Source: http://github.com/necolas/normalize.css
|
||||
img {
|
||||
border: 0;
|
||||
-ms-interpolation-mode: bicubic;
|
||||
}
|
||||
|
||||
// Forms
|
||||
// -------------------------
|
||||
// Source: http://github.com/necolas/normalize.css
|
||||
|
||||
// Font size in all browsers, margin changes, misc consistency
|
||||
button,
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
font-size: 100%;
|
||||
margin: 0;
|
||||
vertical-align: baseline;
|
||||
*vertical-align: middle;
|
||||
}
|
||||
button,
|
||||
input {
|
||||
line-height: normal; // FF3/4 have !important on line-height in UA stylesheet
|
||||
*overflow: visible; // Inner spacing ie IE6/7
|
||||
}
|
||||
button::-moz-focus-inner,
|
||||
input::-moz-focus-inner { // Inner padding and border oddities in FF3/4
|
||||
border: 0;
|
||||
padding: 0;
|
||||
}
|
||||
button,
|
||||
input[type="button"],
|
||||
input[type="reset"],
|
||||
input[type="submit"] {
|
||||
cursor: pointer; // Cursors on all buttons applied consistently
|
||||
-webkit-appearance: button; // Style clicable inputs in iOS
|
||||
}
|
||||
input[type="search"] { // Appearance in Safari/Chrome
|
||||
-webkit-appearance: textfield;
|
||||
-webkit-box-sizing: content-box;
|
||||
-moz-box-sizing: content-box;
|
||||
box-sizing: content-box;
|
||||
}
|
||||
input[type="search"]::-webkit-search-decoration {
|
||||
-webkit-appearance: none; // Inner-padding issues in Chrome OSX, Safari 5
|
||||
}
|
||||
textarea {
|
||||
overflow: auto; // Remove vertical scrollbar in IE6-9
|
||||
vertical-align: top; // Readability and alignment cross-browser
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,110 @@
|
|||
/*
|
||||
* scaffolding.css.scss
|
||||
* Basic and global styles for generating a grid system, structural layout, and page templates
|
||||
* ------------------------------------------------------------------------------------------- */
|
||||
|
||||
|
||||
// GRID SYSTEM
|
||||
// -----------
|
||||
|
||||
.row {
|
||||
@include clearfix();
|
||||
margin-left: -1 * $gridGutterWidth;
|
||||
|
||||
// Find all .span# classes within .row and give them the necessary properties for grid columns (supported by all browsers back to IE7)
|
||||
// Credit to @dhg for the idea
|
||||
[class^="span"] {
|
||||
display: inline;
|
||||
float: left;
|
||||
margin-left: $gridGutterWidth;
|
||||
}
|
||||
|
||||
// Default columns
|
||||
.span1 { @include columns(1); }
|
||||
.span2 { @include columns(2); }
|
||||
.span3 { @include columns(3); }
|
||||
.span4 { @include columns(4); }
|
||||
.span5 { @include columns(5); }
|
||||
.span6 { @include columns(6); }
|
||||
.span7 { @include columns(7); }
|
||||
.span8 { @include columns(8); }
|
||||
.span9 { @include columns(9); }
|
||||
.span10 { @include columns(10); }
|
||||
.span11 { @include columns(11); }
|
||||
.span12 { @include columns(12); }
|
||||
.span13 { @include columns(13); }
|
||||
.span14 { @include columns(14); }
|
||||
.span15 { @include columns(15); }
|
||||
.span16 { @include columns(16); }
|
||||
|
||||
// Offset column options
|
||||
.offset1 { @include offset(1); }
|
||||
.offset2 { @include offset(2); }
|
||||
.offset3 { @include offset(3); }
|
||||
.offset4 { @include offset(4); }
|
||||
.offset5 { @include offset(5); }
|
||||
.offset6 { @include offset(6); }
|
||||
.offset7 { @include offset(7); }
|
||||
.offset8 { @include offset(8); }
|
||||
.offset9 { @include offset(9); }
|
||||
.offset10 { @include offset(10); }
|
||||
.offset11 { @include offset(11); }
|
||||
.offset12 { @include offset(12); }
|
||||
|
||||
// Unique column sizes for 16-column grid
|
||||
.span-one-third { width: 300px; }
|
||||
.span-two-thirds { width: 620px; }
|
||||
.offset-one-third { margin-left: 340px; }
|
||||
.offset-two-thirds { margin-left: 660px; }
|
||||
}
|
||||
|
||||
|
||||
// STRUCTURAL LAYOUT
|
||||
// -----------------
|
||||
|
||||
html, body {
|
||||
background-color: #fff;
|
||||
}
|
||||
body {
|
||||
margin: 0;
|
||||
@include sans-serif-font(normal,$basefont,$baseline);
|
||||
color: $gray;
|
||||
}
|
||||
|
||||
// Container (centered, fixed-width layouts)
|
||||
.container {
|
||||
width: 940px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
// Fluid layouts (left aligned, with sidebar, min- & max-width content)
|
||||
.container-fluid {
|
||||
padding: 0 20px;
|
||||
@include clearfix();
|
||||
> .sidebar {
|
||||
float: left;
|
||||
width: 220px;
|
||||
}
|
||||
// TODO in v2: rename this and .popover .content to be more specific
|
||||
> .content {
|
||||
min-width: 700px;
|
||||
max-width: 1180px;
|
||||
margin-left: 240px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// BASE STYLES
|
||||
// -----------
|
||||
|
||||
// Links
|
||||
a {
|
||||
color: $linkColor;
|
||||
text-decoration: none;
|
||||
line-height: inherit;
|
||||
font-weight: inherit;
|
||||
&:hover {
|
||||
color: $linkColorHover;
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,148 @@
|
|||
/*
|
||||
* tables.css.scss
|
||||
* Tables for, you guessed it, tabular data
|
||||
* ---------------------------------------- */
|
||||
|
||||
// BASELINE STYLES
|
||||
// ---------------
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
margin-bottom: $baseline;
|
||||
padding: 0;
|
||||
border-collapse: separate;
|
||||
font-size: 13px;
|
||||
th, td {
|
||||
padding: 10px 10px 9px;
|
||||
line-height: $baseline * .75;
|
||||
text-align: left;
|
||||
vertical-align: middle;
|
||||
border-bottom: 1px solid #ddd;
|
||||
}
|
||||
th {
|
||||
padding-top: 9px;
|
||||
font-weight: bold;
|
||||
border-bottom-width: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// ZEBRA-STRIPING
|
||||
// --------------
|
||||
|
||||
// Default zebra-stripe styles (alternating gray and transparent backgrounds)
|
||||
.zebra-striped {
|
||||
tbody {
|
||||
tr:nth-child(odd) td {
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
tr:hover td {
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
}
|
||||
|
||||
// Tablesorting styles w/ jQuery plugin
|
||||
.header {
|
||||
cursor: pointer;
|
||||
&:after {
|
||||
content: "";
|
||||
float: right;
|
||||
margin-top: 7px;
|
||||
border-width: 0 4px 4px;
|
||||
border-style: solid;
|
||||
border-color: #000 transparent;
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
// Style the sorted column headers (THs)
|
||||
.headerSortUp,
|
||||
.headerSortDown {
|
||||
background-color: rgba(141,192,219,.25);
|
||||
text-shadow: 0 1px 1px rgba(255,255,255,.75);
|
||||
@include border-radius(3px 3px 0 0);
|
||||
}
|
||||
// Style the ascending (reverse alphabetical) column header
|
||||
.header:hover {
|
||||
&:after {
|
||||
visibility:visible;
|
||||
}
|
||||
}
|
||||
// Style the descending (alphabetical) column header
|
||||
.headerSortDown,
|
||||
.headerSortDown:hover {
|
||||
&:after {
|
||||
visibility:visible;
|
||||
@include opacity(60);
|
||||
}
|
||||
}
|
||||
// Style the ascending (reverse alphabetical) column header
|
||||
.headerSortUp {
|
||||
&:after {
|
||||
border-bottom: none;
|
||||
border-left: 4px solid transparent;
|
||||
border-right: 4px solid transparent;
|
||||
border-top: 4px solid #000;
|
||||
visibility:visible;
|
||||
@include box-shadow(none); //can't add boxshadow to downward facing arrow :(
|
||||
@include opacity(60);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
table {
|
||||
// Blue Table Headings
|
||||
.blue {
|
||||
color: $blue;
|
||||
border-bottom-color: $blue;
|
||||
}
|
||||
.headerSortUp.blue,
|
||||
.headerSortDown.blue {
|
||||
background-color: lighten($blue, 40%);
|
||||
}
|
||||
// Green Table Headings
|
||||
.green {
|
||||
color: $green;
|
||||
border-bottom-color: $green;
|
||||
}
|
||||
.headerSortUp.green,
|
||||
.headerSortDown.green {
|
||||
background-color: lighten($green, 40%);
|
||||
}
|
||||
// Red Table Headings
|
||||
.red {
|
||||
color: $red;
|
||||
border-bottom-color: $red;
|
||||
}
|
||||
.headerSortUp.red,
|
||||
.headerSortDown.red {
|
||||
background-color: lighten($red, 50%);
|
||||
}
|
||||
// Yellow Table Headings
|
||||
.yellow {
|
||||
color: $yellow;
|
||||
border-bottom-color: $yellow;
|
||||
}
|
||||
.headerSortUp.yellow,
|
||||
.headerSortDown.yellow {
|
||||
background-color: lighten($yellow, 40%);
|
||||
}
|
||||
// Orange Table Headings
|
||||
.orange {
|
||||
color: $orange;
|
||||
border-bottom-color: $orange;
|
||||
}
|
||||
.headerSortUp.orange,
|
||||
.headerSortDown.orange {
|
||||
background-color: lighten($orange, 40%);
|
||||
}
|
||||
// Purple Table Headings
|
||||
.purple {
|
||||
color: $purple;
|
||||
border-bottom-color: $purple;
|
||||
}
|
||||
.headerSortUp.purple,
|
||||
.headerSortDown.purple {
|
||||
background-color: lighten($purple, 40%);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,188 @@
|
|||
/* typography.css.scss
|
||||
* Headings, body text, lists, code, and more for a versatile and durable typography system
|
||||
* ---------------------------------------------------------------------------------------- */
|
||||
|
||||
// BODY TEXT
|
||||
// ---------
|
||||
|
||||
p {
|
||||
@include shorthand-font(normal,$basefont,$baseline);
|
||||
margin-bottom: $baseline / 2;
|
||||
small {
|
||||
font-size: $basefont - 2;
|
||||
color: $grayLight;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// HEADINGS
|
||||
// --------
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
font-weight: bold;
|
||||
color: $grayDark;
|
||||
small {
|
||||
color: $grayLight;
|
||||
}
|
||||
}
|
||||
h1 {
|
||||
margin-bottom: $baseline;
|
||||
font-size: 30px;
|
||||
line-height: $baseline * 2;
|
||||
small {
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
h2 {
|
||||
font-size: 24px;
|
||||
line-height: $baseline * 2;
|
||||
small {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
h3, h4, h5, h6 {
|
||||
line-height: $baseline * 2;
|
||||
}
|
||||
h3 {
|
||||
font-size: 18px;
|
||||
small {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
h4 {
|
||||
font-size: 16px;
|
||||
small {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
h5 {
|
||||
font-size: 14px;
|
||||
}
|
||||
h6 {
|
||||
font-size: 13px;
|
||||
color: $grayLight;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
|
||||
// COLORS
|
||||
// ------
|
||||
|
||||
// Unordered and Ordered lists
|
||||
ul, ol {
|
||||
margin: 0 0 $baseline 25px;
|
||||
}
|
||||
ul ul,
|
||||
ul ol,
|
||||
ol ol,
|
||||
ol ul {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
ul {
|
||||
list-style: disc;
|
||||
}
|
||||
ol {
|
||||
list-style: decimal;
|
||||
}
|
||||
li {
|
||||
line-height: $baseline;
|
||||
color: $gray;
|
||||
}
|
||||
ul.unstyled {
|
||||
list-style: none;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
// Description Lists
|
||||
dl {
|
||||
margin-bottom: $baseline;
|
||||
dt, dd {
|
||||
line-height: $baseline;
|
||||
}
|
||||
dt {
|
||||
font-weight: bold;
|
||||
}
|
||||
dd {
|
||||
margin-left: $baseline / 2;
|
||||
}
|
||||
}
|
||||
|
||||
// MISC
|
||||
// ----
|
||||
|
||||
// Horizontal rules
|
||||
hr {
|
||||
margin: 0 0 19px;
|
||||
border: 0;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
|
||||
// Emphasis
|
||||
strong {
|
||||
font-style: inherit;
|
||||
font-weight: bold;
|
||||
line-height: inherit;
|
||||
}
|
||||
em {
|
||||
font-style: italic;
|
||||
font-weight: inherit;
|
||||
line-height: inherit;
|
||||
}
|
||||
.muted {
|
||||
color: $grayLight;
|
||||
}
|
||||
|
||||
// Blockquotes
|
||||
blockquote {
|
||||
margin-bottom: $baseline;
|
||||
border-left: 5px solid #eee;
|
||||
padding-left: 15px;
|
||||
p {
|
||||
@include shorthand-font(300,14px,$baseline);
|
||||
margin-bottom: 0;
|
||||
}
|
||||
small {
|
||||
display: block;
|
||||
@include shorthand-font(300,12px,$baseline);
|
||||
color: $grayLight;
|
||||
&:before {
|
||||
content: '\2014 \00A0';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Addresses
|
||||
address {
|
||||
display: block;
|
||||
line-height: $baseline;
|
||||
margin-bottom: $baseline;
|
||||
}
|
||||
|
||||
// Inline and block code styles
|
||||
code, pre {
|
||||
padding: 0 3px 2px;
|
||||
font-family: Monaco, Andale Mono, Courier New, monospace;
|
||||
font-size: 12px;
|
||||
@include border-radius(3px);
|
||||
}
|
||||
code {
|
||||
background-color: lighten($orange, 40%);
|
||||
color: rgba(0,0,0,.75);
|
||||
padding: 1px 3px;
|
||||
}
|
||||
pre {
|
||||
background-color: #f5f5f5;
|
||||
display: block;
|
||||
padding: $baseline - 1;
|
||||
margin: 0 0 $baseline;
|
||||
line-height: $baseline;
|
||||
font-size: 12px;
|
||||
border: 1px solid #ccc;
|
||||
border: 1px solid rgba(0,0,0,.15);
|
||||
@include border-radius(3px);
|
||||
white-space: pre;
|
||||
white-space: pre-wrap;
|
||||
word-wrap: break-word;
|
||||
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue