Commit dd769f9a authored by Mark Otto's avatar Mark Otto

update to use latest version of bootstrap, docs cleanup, etc

parent b9e28e48
This diff is collapsed.
......@@ -65,7 +65,7 @@ section {
font-size: 20px;
font-weight: 300;
line-height: 30px;
margin: 5px 0;
margin: 0;
}
#masthead a.btn {
background-color: #552e7e;
......
// Javascript to toggle the dropdowns
$(document).ready(function(){
// Example dropdown for topbar nav
$("body").bind("click", function(e) {
$("ul.menu-dropdown").hide();
$('a.menu').parent("li").removeClass("open").children("ul.menu-dropdown").hide();
......@@ -22,10 +22,10 @@ $(document).ready(function(){
return false;
});
//table sort example
// table sort example
$("#sortTableExample").tablesorter( {sortList: [[1,0]]} );
//add on
// add on
$('.add-on :checkbox').click(function() {
if ($(this).attr('checked')) {
$(this).parents('.add-on').addClass('active');
......@@ -35,7 +35,7 @@ $(document).ready(function(){
});
//scroll spyer
// scroll spyer
var activeTarget,
$window = $(window),
position = {},
......
This diff is collapsed.
/*
Master Stylesheet
This file is only for importing all required stylesheets for LESS to include and then compile.
*/
// CSS Reset
@import "reset.less";
// Core
@import "bootstrap.less";
@import "scaffolding.less";
// Styled patterns and elements
@import "type.less";
@import "forms.less";
@import "tables.less";
@import "patterns.less";
\ No newline at end of file
/*
Bootstrap v1.1
Variables and mixins to bootstrap any new web development project. Modified from original version for Twitter.
Master Stylesheet
This file is only for importing all required stylesheets for LESS to include and then compile.
*/
// CSS Reset
@import "reset.less";
/* Variables
-------------------------------------------------- */
// Core
@import "preboot.less";
@import "scaffolding.less";
// Links
@link-color: #0069d6;
@link-hover-color: darken(@link-color, 10);
// Grays
@white: #fff;
@gray-lighter: #ccc;
@gray-light: #777;
@gray: #555;
@gray-dark: #333;
@black: #000;
// Accent Colors
@blue: #08b5fb;
@blue-dark: #0069d6;
@green: #46a546;
@red: #9d261d;
@yellow: #ffc40d;
@orange: #f89406;
@pink: #c3325f;
@purple: #7a43b6;
// Baseline grid
@baseline: 20px;
// Griditude
@grid_columns: 16;
@grid_column_width: 40px;
@grid_gutter_width: 20px;
@site_width: (@grid_columns * @grid_column_width) + (@grid_gutter_width * (@grid_columns - 1));
/* Mixins
-------------------------------------------------- */
// Clearfix for clearing floats like a boss
.clearfix {
zoom: 1;
&:after {
display: block;
visibility: hidden;
height: 0;
clear: both;
content: ".";
}
}
// Floats
.right {
float: right;
}
.left {
float: left;
}
// Input placeholder text
.placeholder(@color: @gray-light) {
:-moz-placeholder {
color: @color;
}
::-webkit-input-placeholder {
color: @color;
}
}
// Font Stacks
.font(@weight: normal, @size: 14px, @lineheight: 20px) {
font-size: @size;
font-weight: @weight;
line-height: @lineheight;
}
.sans-serif(@weight: normal, @size: 14px, @lineheight: 20px) {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: @size;
font-weight: @weight;
line-height: @lineheight;
}
.serif(@weight: normal, @size: 14px, @lineheight: 20px) {
font-family: "Georgia", Times New Roman, Times, sans-serif;
font-size: @size;
font-weight: @weight;
line-height: @lineheight;
}
.monospace(@weight: normal, @size: 12px, @lineheight: 20px) {
font-family: "Monaco", Courier New, monospace;
font-size: @size;
font-weight: @weight;
line-height: @lineheight;
}
// Grid System
.container {
width: @site_width;
margin: 0 auto;
}
.columns(@column_span: 1) {
display: inline;
float: left;
width: (@grid_column_width * @column_span) + (@grid_gutter_width * (@column_span - 1));
margin-left: @grid_gutter_width;
&:first-child {
margin-left: 0;
}
}
.offset(@column_offset: 1) {
margin-left: (@grid_column_width * @column_offset) + (@grid_gutter_width * (@column_offset - 1)) !important;
}
// Border Radius
.border-radius(@radius: 5px) {
-moz-border-radius: @radius;
border-radius: @radius;
}
// Drop shadows
.box-shadow(@shadow: 0 1px 3px rgba(0,0,0,.25)) {
-webkit-box-shadow: @shadow;
-moz-box-shadow: @shadow;
box-shadow: @shadow;
}
// Transitions
.transition(@transition) {
-webkit-transition: @transition;
-moz-transition: @transition;
transition: @transition;
}
// CSS3 Content Columns
.content-columns(@column_count, @column_gap: 20px) {
-webkit-column-count: @count;
-webkit-column-gap: @gap;
-moz-column-count: @count;
-moz-column-gap: @gap;
column-count: @count;
column-gap: @gap;
}
// Buttons
.button(@color: #f9f9f9, @padding: 4px 14px, @text_color: #555, @text_shadow: 0 1px 0 rgba(255,255,255,.75), @font_size: 13px, @border_color: rgba(0,0,0,.1), @rounded: 4px) {
display: inline-block;
#gradient > .vertical-three-colors(@color, @color, 0.25, darken(@color, 10%));
padding: @padding;
text-shadow: @text_shadow;
color: @text_color;
line-height: @baseline;
border: 1px solid @border_color;
border-bottom-color: fadein(@border_color, 15%);
.border-radius(@rounded);
@shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 1px 2px rgba(0,0,0,.1);
.box-shadow(@shadow);
cursor: pointer;
&:hover {
background-position: 0 -15px;
color: darken(@text_color, 10%);
text-decoration: none;
}
}
// Add an alphatransparency value to any background or border color (via Elyse Holladay)
#translucent {
.background(@color: @white, @alpha: 1) {
background-color: hsla(hue(@color), saturation(@color), lightness(@color), @alpha);
}
.border(@color: @white, @alpha: 1) {
border-color: hsla(hue(@color), saturation(@color), lightness(@color), @alpha);
background-clip: padding-box;
}
}
// Gradients
#gradient {
.horizontal(@startColor: #555, @endColor: #333) {
background-color: @endColor;
background-repeat: no-repeat;
background-image: -webkit-gradient(linear, left top, right top, from(@startColor), to(@endColor));
background-image: -webkit-linear-gradient(right center, @startColor, @endColor);
background-image: -moz-linear-gradient(right center, @startColor, @endColor);
background-image: -o-linear-gradient(left, @startColor, @endColor);
background-image: -khtml-gradient(linear, left top, right top, from(@startColor), to(@endColor));
filter: e(%("progid:DXImageTransform.Microsoft.Gradient(StartColorStr='%d', EndColorStr='%d', GradientType=1)",@startColor,@endColor));
-ms-filter: %("progid:DXImageTransform.Microsoft.gradient(startColorStr='%d', EndColorStr='%d', GradientType=1))",@startColor,@endColor);
}
.vertical(@startColor: #555, @endColor: #333) {
background-color: @endColor;
background-repeat: no-repeat;
background-image: -webkit-gradient(linear, left top, left bottom, from(@startColor), to(@endColor));
background-image: -webkit-linear-gradient(@startColor, @endColor);
background-image: -moz-linear-gradient(@startColor, @endColor);
background-image: -o-linear-gradient(top, @startColor, @endColor);
background-image: -khtml-gradient(linear, left top, left bottom, from(@startColor), to(@endColor));
filter: e(%("progid:DXImageTransform.Microsoft.Gradient(StartColorStr='%d', EndColorStr='%d', GradientType=0)",@startColor,@endColor));
-ms-filter: %("progid:DXImageTransform.Microsoft.gradient(startColorStr='%d', EndColorStr='%d', GradientType=0))",@startColor,@endColor);
}
.vertical-three-colors(@startColor: #00b3ee, @midColor: #7a43b6, @colorStop: 0.5, @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, color-stop(@colorStop, @midColor), @endColor);
background-image: -moz-linear-gradient(@startColor, color-stop(@midColor, @colorStop), @endColor);
}
}
// Styled patterns and elements
@import "type.less";
@import "forms.less";
@import "tables.less";
@import "patterns.less";
\ No newline at end of file
......@@ -18,7 +18,7 @@ form {
margin-left: 150px;
font-size: 20px;
line-height: 1;
color: @gray-dark;
color: @grayDark;
}
}
// Parent element that clears floats and wraps labels and fields together
......@@ -27,7 +27,7 @@ form {
}
// Set font for forms
label, input, select, textarea {
.sans-serif(normal,13px,normal);
#font > .sans-serif(normal,13px,normal);
}
// Float labels left
label {
......@@ -177,7 +177,7 @@ div.actions {
.help-block {
font-size: 12px;
line-height: @baseline;
color: @gray-light;
color: @grayLight;
}
.help-inline {
padding-left: 5px;
......@@ -196,7 +196,7 @@ div.actions {
margin-bottom: 0;
font-size: 12px;
line-height: @baseline;
color: @gray-light;
color: @grayLight;
}
ol {
margin-bottom: 10px;
......@@ -234,7 +234,7 @@ div.input-append {
width: auto;
min-width: 16px;
padding: 5px 4px 5px 5px;
color: @gray-light;
color: @grayLight;
font-weight: normal;
line-height: 18px;
height: 18px;
......
......@@ -36,7 +36,7 @@ div.topbar {
a.logo {
margin-left: -10px;
margin-right: 10px;
color: @gray-light;
color: @grayLight;
font-size: 20px;
font-weight: 200;
img {
......@@ -77,7 +77,7 @@ div.topbar {
.box-shadow(@shadow);
// Links get text shadow
a {
color: @gray-light;
color: @grayLight;
text-shadow: 0 -1px 0 rgba(0,0,0,.25);
.transition(all linear .1s);
}
......@@ -113,9 +113,9 @@ div.topbar {
opacity: 1;
position: relative;
input {
background-color: @gray-light;
background-color: @grayLight;
background-color: rgba(255,255,255,.3);
.sans-serif(13px, normal, 1);
#font > .sans-serif(13px, normal, 1);
width: 220px;
padding: 4px 9px;
color: #fff;
......@@ -127,10 +127,10 @@ div.topbar {
.transition(none);
// Placeholder text gets special styles; can't be bundled together though for some reason
&:-moz-placeholder {
color: @gray-lighter;
color: @grayLighter;
}
&::-webkit-input-placeholder {
color: @gray-lighter;
color: @grayLighter;
}
&:hover {
background-color: #444;
......@@ -141,7 +141,7 @@ div.topbar {
&.focused {
outline: none;
background-color: #fff;
color: @gray-dark;
color: @grayDark;
text-shadow: 0 1px 0 #fff;
border: 0;
padding: 5px 10px;
......@@ -315,7 +315,7 @@ div.page-header {
// One-liner alert bars
div.alert-message {
#gradient > .vertical(transparent, rgba(0,0,0,0.15));
background-color: @gray-lighter;
background-color: @grayLighter;
margin-bottom: @baseline;
padding: 10px 15px 9px;
.border-radius(6px);
......@@ -457,14 +457,14 @@ ul.pills {
line-height: 30px;
.border-radius(15px);
&:hover {
background: @link-hover-color;
background: @linkColorHover;
color: #fff;
text-decoration: none;
text-shadow: 0 1px 1px rgba(0,0,0,.25);
}
}
&.active a {
background: @link-color;
background: @linkColor;
color: #fff;
text-shadow: 0 1px 1px rgba(0,0,0,.25);
}
......@@ -501,7 +501,7 @@ div.pagination {
&.disabled a,
&.disabled a:hover {
background-color: none;
color: @gray-light;
color: @grayLight;
}
&.next a,
&:last-child a {
......
/*
Preboot
Variables and mixins to pre-ignite any new web development project
*/
/* Variables
-------------------------------------------------- */
// Links
@linkColor: #08b5fb;
@linkColorHover: darken(@linkColor, 10);
// Grays
@black: #000;
@grayDark: lighten(@black, 25%);
@gray: lighten(@black, 50%);
@grayLight: lighten(@black, 70%);
@grayLighter: lighten(@black, 90%);
@white: #fff;
// Accent Colors
@blue: #08b5fb;
@green: #46a546;
@red: #9d261d;
@yellow: #ffc40d;
@orange: #f89406;
@pink: #c3325f;
@purple: #7a43b6;
// Baseline grid
@baseline: 20px;
// Griditude
@gridColumns: 16;
@gridColumnWidth: 40px;
@gridGutterWidth: 20px;
@siteWidth: (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1));
/* Color Scheme
-------------------------------------------------- */
@baseColor: @blue; // Set a base color
@complement: spin(@baseColor, 180); // Determine a complementary color
@split1: spin(@baseColor, 158); // Split complements
@split2: spin(@baseColor, -158);
@triad1: spin(@baseColor, 135); // Triads colors
@triad2: spin(@baseColor, -135);
@tetra1: spin(@baseColor, 90); // Tetra colors
@tetra2: spin(@baseColor, -90);
@analog1: spin(@baseColor, 22); // Analogs colors
@analog2: spin(@baseColor, -22);
/* Mixins
-------------------------------------------------- */
// Clearfix for clearing floats like a boss
.clearfix {
zoom: 1;
&:after {
display: block;
visibility: hidden;
height: 0;
clear: both;
content: ".";
}
}
// Center-align a block level element
.center-block {
display: block;
margin: 0 auto;
}
// Sizing shortcuts
.size(@height: 5px, @width: 5px) {
height: @height;
width: @width;
}
.square(@size: 5px) {
.size(@size, @size);
}
// Input placeholder text
.placeholder(@color: @grayLight) {
:-moz-placeholder {
color: @color;
}
::-webkit-input-placeholder {
color: @color;
}
}
// Font Stacks
#font {
.shorthand(@weight: normal, @size: 14px, @lineHeight: 20px) {
font-size: @size;
font-weight: @weight;
line-height: @lineHeight;
}
.sans-serif(@weight: normal, @size: 14px, @lineHeight: 20px) {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: @size;
font-weight: @weight;
line-height: @lineHeight;
}
.serif(@weight: normal, @size: 14px, @lineHeight: 20px) {
font-family: "Georgia", Times New Roman, Times, sans-serif;
font-size: @size;
font-weight: @weight;
line-height: @lineHeight;
}
.monospace(@weight: normal, @size: 12px, @lineHeight: 20px) {
font-family: "Monaco", Courier New, monospace;
font-size: @size;
font-weight: @weight;
line-height: @lineHeight;
}
}
// Grid System
.container {
width: @siteWidth;
margin: 0 auto;
.clearfix();
}
.columns(@columnSpan: 1) {
display: inline;
float: left;
width: (@gridColumnWidth * @columnSpan) + (@gridGutterWidth * (@columnSpan - 1));
margin-left: @gridGutterWidth;
&:first-child {
margin-left: 0;
}
}
.offset(@columnOffset: 1) {
margin-left: (@gridColumnWidth * @columnOffset) + (@gridGutterWidth * (@columnOffset - 1)) !important;
}
// Border Radius
.border-radius(@radius: 5px) {
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
border-radius: @radius;
}
// Drop shadows
.box-shadow(@shadow: 0 1px 3px rgba(0,0,0,.25)) {
-webkit-box-shadow: @shadow;
-moz-box-shadow: @shadow;
box-shadow: @shadow;
}
// Transitions
.transition(@transition) {
-webkit-transition: @transition;
-moz-transition: @transition;
transition: @transition;
}
// CSS3 Content Columns
.content-columns(@columnCount, @columnGap: 20px) {
-webkit-column-count: @columnCount;
-webkit-column-gap: @columnGap;
-moz-column-count: @columnCount;
-moz-column-gap: @columnGap;
column-count: @columnCount;
column-gap: @columnGap;
}
// Buttons
.button(@color: #f5f5f5, @textColor: #333, @textShadow: 0 1px 1px rgba(255,255,255,.75), @fontSize: 13px, @padding: 9px 15px 10px, @borderRadius: 6px) {
display: inline-block;
#gradient > .vertical(@color,darken(saturate(@color,10),10));
padding: @padding;
text-shadow: @textShadow;
color: @textColor;
font-size: @fontSize;
line-height: 20px;
.border-radius(@borderRadius);
@shadow: inset 0 1px 0 rgba(255,255,255,.2), inset 0 -1px 0 rgba(0,0,0,.2), 0 1px 2px rgba(0,0,0,.25);
.box-shadow(@shadow);
&:hover {
background-position: 0 -15px;
color: @textColor;
text-decoration: none;
}
}
// Add an alphatransparency value to any background or border color (via Elyse Holladay)
#translucent {
.background(@color: @white, @alpha: 1) {
background-color: hsla(hue(@color), saturation(@color), lightness(@color), @alpha);
}
.border(@color: @white, @alpha: 1) {
border-color: hsla(hue(@color), saturation(@color), lightness(@color), @alpha);
background-clip: padding-box;
}
}
// Gradients
#gradient {
.horizontal (@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
filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",@startColor,@endColor)); /* IE6 & IE7 */
-ms-filter: %("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",@startColor,@endColor); /* IE8+ */
background-image: linear-gradient(left, @startColor, @endColor); // Le standard
}
.vertical (@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(@startColor, @endColor); /* FF 3.6+ */
background-image: -ms-linear-gradient(@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(@startColor, @endColor); /* Safari 5.1+, Chrome 10+ */
background-image: -o-linear-gradient(@startColor, @endColor); /* Opera 11.10 */
filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",@startColor,@endColor)); /* IE6 & IE7 */
-ms-filter: %("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",@startColor,@endColor); /* IE8+ */
background-image: linear-gradient(@startColor, @endColor); /* the standard */
}
.directional (@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 */
}
.vertical-three-colors(@startColor: #00b3ee, @midColor: #7a43b6, @colorStop: 0.5, @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, color-stop(@colorStop, @midColor), @endColor);
background-image: -moz-linear-gradient(@startColor, color-stop(@midColor, @colorStop), @endColor);
}
}
// Opacity
.opacity(@opacity: 100) {
filter: e(%("alpha(opacity=%d)", @opacity));
-khtml-opacity: @opacity / 100;
-moz-opacity: @opacity / 100;
opacity: @opacity / 100;
}
\ No newline at end of file
......@@ -35,10 +35,9 @@ html, body {
}
body {
margin: 0;
.sans-serif(normal,14px,20px);
#font > .sans-serif(normal,14px,20px);
color: @gray;
text-rendering: optimizeLegibility;
.box-shadow(inset 0 1px 0 #fff);
}
// Container (centered, fixed-width layouts)
......@@ -68,11 +67,11 @@ div.container-fluid {
// Links
a {
color: @link-color;
color: @linkColor;
text-decoration: none;
line-height: inherit;
&:hover {
color: @link-hover-color;
color: @linkColorHover;
text-decoration: underline;
}
}
......@@ -81,7 +80,7 @@ a {
.btn {
.button();
&.primary {
#gradient > .vertical(@blue, @blue-dark);
#gradient > .vertical(@blue, darken(@blue, 15));
color: #fff;
text-shadow: 0 -1px 0 rgba(0,0,0,.25);
&:hover {
......
......@@ -13,7 +13,6 @@ table {
text-align: left;
border-collapse: separate;
th, td {
// #translucent > .background(@green, .15);
padding: 10px 10px 9px;
line-height: @baseline;
vertical-align: middle;
......@@ -51,8 +50,8 @@ table.zebra-striped {
background-position: right -23px;
background-repeat: no-repeat;
background-color: rgba(141,192,219,.25);
.border-radius(3px 3px 0 0);
text-shadow: 0 1px 1px rgba(255,255,255,.75);
.border-radius(3px 3px 0 0);
}
th.header:hover { // Style the ascending (reverse alphabetical) column header
background-image: url(assets/img/tablesorter-indicators.png);
......
......@@ -8,11 +8,11 @@
-------------------------------------------------- */
p {
.font(normal,14px,@baseline);
#font > .shorthand(normal,14px,@baseline);
margin-bottom: @baseline;
small {
font-size: 12px;
color: @gray-light;
color: @grayLight;
}
}
......@@ -22,9 +22,9 @@ p {
h1, h2, h3, h4, h5, h6 {
font-weight: 500;
color: @gray-dark;
color: @grayDark;
small {
color: @gray-light;
color: @grayLight;
}
}
h1 {
......@@ -62,7 +62,7 @@ h5 {
}
h6 {
font-size: 13px;
color: @gray-light;
color: @grayLight;
text-transform: uppercase;
}
......@@ -167,7 +167,7 @@ em {
line-height: inherit;
}
.muted {
color: @gray-lighter;
color: @grayLighter;
}
// Blockquotes
......@@ -176,13 +176,13 @@ blockquote {
border-left: 5px solid #eee;
padding-left: 15px;
p {
.font(300,14px,@baseline);
#font > .shorthand(300,14px,@baseline);
margin-bottom: 0;
}
cite {
display: block;
.font(300,12px,@baseline);
color: @gray-light;
#font > .shorthand(300,12px,@baseline);
color: @grayLight;
&:before {
content: '\2014 \00A0';
}
......@@ -236,7 +236,7 @@ pre ol {
border-left-color: lighten(@orange, 35%);
font-size: 11px;
line-height: @baseline;
color: @gray-light;
color: @grayLight;
text-shadow: 0 1px 1px rgba(255,255,255,.5);
word-wrap: break-word;
&:hover {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment