Skip to content

B
bootstrap
Commit d447898b authored by Jacob Thornton's avatar Jacob Thornton
Browse files
Options

rearranging everything

parent a6d5f674
Hide whitespace changes
Inline Side-by-side
Showing with 1800 additions and 0 deletions
lib/baseline.less 0 → 100644
View file @ d447898b
/*
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";
/* Add additional stylesheets below
-------------------------------------------------- */
// Documentation
@import "docs.less";
\ No newline at end of file
lib/bootstrap.less 0 → 100644
View file @ d447898b
/*
Bootstrap v1.1
Variables and mixins to bootstrap any new web development project. Modified from original version for Twitter Blueprint.
*/
/* Variables
-------------------------------------------------- */
// 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);
}
}
lib/docs.less 0 → 100644
View file @ d447898b
/*
Baseline's documentation styles
Special styles for presenting Baseline's documentation and examples
*/
/* Body and structure
-------------------------------------------------- */
// Give us a gradient background
body {
#gradient > .vertical-three-colors(#eee, #fff, 0.15, #fff);
background-attachment: fixed;
background-position: 0 40px;
position: relative;
}
// Give us some love on HTML5 elements (hardly use these in Basline thus far though)
header,
section,
footer,
article,
aside {
display: block;
}
// Break up sections
section {
padding-top: @baseline * 4;
margin-bottom: @baseline * -2;
}
// Blueprint-style header and footer
#masthead,
#footer {
#gradient > .vertical(darken(@blue-dark, 7.5%), darken(@blue, 7.5%));
div.inner {
background: transparent url(assets/img/grid-20px.png) 0 -1px;
padding: 40px 0;
.box-shadow(inset 0 10px 30px rgba(0,0,0,.25));
}
h1, p, small {
color: #fff;
text-shadow: 0 2px 0 rgba(0,0,0,.25);
}
}
#masthead {
margin-top: @baseline * 2;
margin-bottom: @baseline * -2;
h1 {
margin-bottom: 0;
}
p.lead {
.font(300,20px,30px);
margin: 5px 0;
}
a.btn {
#gradient > .vertical(@purple, darken(@purple, 15%));
display: block;
margin-bottom: 20px;
padding-top: 5px;
padding-bottom: 5px;
text-align: center;
border: 0;
@shadow: inset 0 1px 0 rgba(255,255,255,.25), inset 0 -1px 0 rgba(0,0,0,.25), 0 1px 2px rgba(0,0,0,.4);
.box-shadow(@shadow);
.transition(all .2s linear);
}
small {
display: block;
text-align: center;
font-size: 13px;
line-height: @baseline;
color: rgba(255,255,255,.5);
a {
color: #fff;
}
}
}
// Page footer
#footer {
margin-top: @baseline * 4;
p {
margin-bottom: 0;
}
}
/* Special grid styles
-------------------------------------------------- */
.show-grid {
margin-top: 20px;
margin-bottom: 20px;
.column,
.columns {
background: rgba(0,0,0,.1);
text-align: center;
.border-radius(3px);
height: 30px;
line-height: 30px;
}
&:hover {
.column,
.columns {
background: rgba(0,0,0,.25);
}
}
}
/* Hashgrid.js grid (press G & H to view)
-------------------------------------------------- */
#grid {
width: 980px;
position: absolute;
top: 0;
left: 50%;
margin-left: -490px;
}
#grid div.vert {
#translucent > .background(#00CED1, .075);
width: 39px;
border: solid darkturquoise;
border-width: 0 1px;
margin-right: 19px;
}
#grid div.vert.first-line {
margin-left: 19px;
}
#grid div.horiz {
height: @baseline - 1;
border-bottom: 1px solid rgba(255,0,0,.1);
margin: 0;
padding: 0;
&:nth-child(5n) {
border-color: rgba(255,0,0,.25);
}
}
/* Render mini layout previews
-------------------------------------------------- */
div.mini-layout {
height: 340px;
margin-bottom: @baseline;
padding: 9px;
border: 1px solid rgba(0,0,0,.25);
.border-radius(6px);
.box-shadow(0 1px 3px rgba(0,0,0,.125));
// Default mini layout (fixed container)
div {
.border-radius(3px);
&.mini-layout-body {
background-color: rgba(141,192,219,.25);
margin: 0 auto;
width: 450px;
height: 340px;
}
}
// Fluid layout (sidebar)
&.fluid {
div.mini-layout-sidebar,
div.mini-layout-header,
div.mini-layout-body {
float: left;
}
div.mini-layout-sidebar {
background-color: rgba(141,192,219,.5);
width: 90px;
height: 340px;
}
div.mini-layout-body {
width: 400px;
margin-left: 10px;
}
}
}
/* Topbar special styles
-------------------------------------------------- */
div.topbar-wrapper {
position: relative;
height: 40px;
margin: 5px 0 15px;
div.topbar {
position: absolute;
margin: 0 -20px;
padding-left: 20px;
padding-right: 20px;
.border-radius(4px);
}
}
lib/forms.less 0 → 100644
View file @ d447898b
/*
Forms
Base line styles for various input types, form layouts, and states
*/
/* Global 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;
color: @gray-dark;
}
}
// Parent element that clears floats and wraps labels and fields together
div.clearfix {
margin-bottom: @baseline;
}
// Set font for forms
label, input, select, textarea {
.sans-serif(normal,13px,normal);
}
// Float labels left
label {
padding-top: 6px;
font-size: 13px;
line-height: 18px;
float: left;
width: 130px;
text-align: right;
}
// 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[type=text],
input[type=password],
textarea,
select,
.uneditable-input {
display: block;
width: 210px;
margin: 0;
padding: 4px;
font-size: 13px;
line-height: @baseline;
height: @baseline;
color: @gray;
border: 1px solid #bbb;
.border-radius(3px);
}
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;
.box-shadow(inset 0 1px 2px rgba(0,0,0,.075));
}
// Focus states
input[type=text],
input[type=password],
select, textarea {
@transition: border linear .2s, box-shadow linear .2s;
.transition(@transition);
}
input[type=text]:focus,
input[type=password]:focus,
textarea:focus {
outline: none;
border-color: rgba(82,168,236,.75);
.box-shadow(0 0 8px rgba(82,168,236,.5));
}
// Error styles
div.error {
background: lighten(@red, 57%);
padding: 10px 0;
margin: -10px 0 10px;
.border-radius(4px);
@error-text: desaturate(lighten(@red, 25%), 25%);
> label {
color: @red;
}
input[type=text],
input[type=password],
textarea {
border-color: @error-text;
.box-shadow(0 0 3px rgba(171,41,32,.25));
&:focus {
border-color: darken(@error-text, 10%);
.box-shadow(0 0 6px rgba(171,41,32,.5));
}
}
div.input-prepend,
div.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;
.box-shadow(none);
}
}
// Actions (the buttons)
div.actions {
background: #f5f5f5;
margin-top: @baseline;
margin-bottom: @baseline;
padding: (@baseline - 1) 20px @baseline 150px;
border-top: 1px solid #ddd;
.border-radius(0 0 3px 3px);
div.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: @gray-light;
}
.help-inline {
padding-left: 5px;
}
// Big blocks of help text
.help-block {
display: block;
max-width: 600px;
h5, p, ol li {
color: @gray;
}
p, ol li {
font-size: 12px;
}
p {
margin-bottom: 0;
font-size: 12px;
line-height: @baseline;
color: @gray-light;
}
ol {
margin-bottom: 10px;
margin-left: 25px;
}
}
// Inline Fields (input fields that appear as inline objects
div.inline-inputs {
color: @gray;
span, input[type=text] {
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
div.input-prepend,
div.input-append {
input[type=text] {
.border-radius(0 3px 3px 0);
}
.add-on {
background: #f5f5f5;
float: left;
display: block;
width: auto;
min-width: 16px;
padding: 5px 4px 5px 5px;
color: @gray-light;
font-weight: normal;
line-height: 18px;
height: 18px;
text-align: center;
text-shadow: 0 1px 0 #fff;
border: 1px solid #bbb;
border-right-width: 0;
.border-radius(3px 0 0 3px);
}
.active {
background: lighten(@green, 30);
border-color: @green;
}
}
div.input-append {
input[type=text] {
float: left;
.border-radius(3px 0 0 3px);
}
.add-on {
.border-radius(0 3px 3px 0);
border-right-width: 1px;
border-left-width: 0;
}
}
// Stacked options for forms (radio buttons or checkboxes)
ul.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 !important;
}
}
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.form-stacked {
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;
}
div.clearfix {
margin-bottom: @baseline / 2;
div.input {
margin-left: 0;
}
}
ul.inputs-list {
margin-bottom: 0;
li {
padding-top: 0;
label {
font-weight: normal;
padding-top: 0;
}
}
}
}
lib/patterns.less 0 → 100644
View file @ d447898b
/*
Patterns.less
Repeatable UI elements outside the base styles provided from the scaffolding
*/
/* Top bar
-------------------------------------------------- */
/*
div.topbar {
#gradient > .vertical(#333, #222);
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1000;
height: 40px;
.box-shadow(0 1px 3px rgba(0,0,0,.5));
a {
color: #999;
&:hover {
color: @white;
text-decoration: none;
background-color: rgba(255,255,255,.05);
}
}
a.logo,
ul li a {
float: left;
padding: 0 10px;
line-height: 40px;
text-shadow: 0 -1px 0 rgba(0,0,0,.25);
}
// Logo
a.logo {
margin-left: -10px;
margin-right: 10px;
color: @gray-light;
font-size: 20px;
font-weight: 200;
img {
float: left;
margin-top: 9px;
margin-right: 6px;
}
&:hover {
color: @white;
}
}
// Nav items
ul {
float: left;
margin: 0;
li {
display: inline;
&.active a {
color: #fff;
background-color: rgba(0,0,0,.5);
}
}
}
}
*/
// Topbar for Branding and Nav
div.topbar {
#gradient > .vertical(#333, #222);
height: 40px;
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 100;
overflow: visible;
@shadow: 0 1px 3px rgba(0,0,0,.25), inset 0 -1px 0 rgba(0,0,0,.1);
.box-shadow(@shadow);
// Links get text shadow
a {
color: @gray-light;
text-shadow: 0 -1px 0 rgba(0,0,0,.25);
.transition(all linear .1s);
}
// Hover and active states for links
ul li a:hover,
ul li.active a,
a.logo:hover {
background-color: #333;
background-color: rgba(255,255,255,.15);
color: @white;
text-decoration: none;
}
// Logo
a.logo {
float: left;
display: block;
padding: 8px 20px 12px;
margin-left: -20px;
color: @white;
font-size: 20px;
font-weight: 200;
line-height: 1;
img {
display: inline;
float: left;
margin-right: 6px;
}
}
// Search Form
form {
float: left;
margin: 4px 0 0 0;
opacity: 1;
position: relative;
input {
background-color: @gray-light;
background-color: rgba(255,255,255,.3);
.sans-serif(13px, normal, 1);
width: 220px;
padding: 4px 9px;
color: #fff;
color: rgba(255,255,255,.75);
border: 1px solid #111;
.border-radius(4px);
@shadow: inset 0 1px 2px rgba(0,0,0,.1), 0 1px 0px rgba(255,255,255,.25);
.box-shadow(@shadow);
.transition(none);
// Placeholder text gets special styles; can't be bundled together though for some reason
&:-moz-placeholder {
color: @gray-lighter;
}
&::-webkit-input-placeholder {
color: @gray-lighter;
}
&:hover {
background-color: #444;
background-color: rgba(255,255,255,.5);
color: #fff;
}
&:focus,
&.focused {
outline: none;
background-color: #fff;
color: @gray-dark;
text-shadow: 0 1px 0 #fff;
border: 0;
padding: 5px 10px;
.box-shadow(0 0 3px rgba(0,0,0,.15));
}
}
}
// Navigation
ul {
display: block;
float: left;
margin: 0 10px 0 0;
&.secondary-nav {
float: right;
margin-left: 10px;
margin-right: 0;
}
li {
display: block;
float: left;
font-size: 13px;
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);
font-weight: bold;
}
// Vertical rule
&.vr {
border-left: 1px solid #008db8;
border-right: 1px solid #00a0d1;
height: 26px;
margin: 6px 3px 1px 3px;
}
}
// Dropdowns
&.primary-nav li ul {
left: 0;
}
&.secondary-nav li ul {
right: 0;
}
li.menu {
position: relative;
a.menu {
&:after {
width: 7px;
height: 7px;
display: inline-block;
background: transparent url(assets/img/dropdown-arrow.gif) no-repeat top center;
content: "↓";
text-indent: -99999px;
vertical-align: top;
margin-top: 8px;
margin-left: 4px;
opacity: .5;
}
}
&.open {
a.menu,
a:hover {
background-color: lighten(#00a0d1,5);
background-color: rgba(255,255,255,.1);
color: #fff;
}
ul {
display: block;
li {
a {
background-color: transparent;
font-weight: normal;
&:hover {
background-color: rgba(255,255,255,.1);
color: #fff;
}
}
&.active a {
background-color: rgba(255,255,255,.1);
font-weight: bold;
}
}
}
}
}
li ul {
background-color: #333;
float: left;
display: none;
position: absolute;
top: 40px;
min-width: 160px;
max-width: 220px;
_width: 160px;
margin-left: 0;
margin-right: 0;
padding: 0;
text-align: left;
border: 0;
zoom: 1;
.border-radius(0 0 5px 5px);
.box-shadow(0 1px 2px rgba(0,0,0,0.6));
li {
float: none;
clear: both;
display: block;
background: none;
font-size: 12px;
a {
display: block;
padding: 6px 15px;
clear: both;
font-weight: normal;
line-height: 19px;
color: #bbb;
&:hover {
background-color: #333;
background-color: rgba(255,255,255,.25);
color: #fff;
}
}
// Dividers (basically an hr)
&.divider {
height: 1px;
overflow: hidden;
background: rgba(0,0,0,.2);
border-bottom: 1px solid rgba(255,255,255,.1);
margin: 5px 0;
}
// Section separaters
span {
clear: both;
display: block;
background: rgba(0,0,0,.2);
padding: 6px 15px;
cursor: default;
color: #666;
border-top: 1px solid rgba(0,0,0,.2);
}
}
}
}
}
/* Page Headers
-------------------------------------------------- */
div.page-header {
margin-bottom: @baseline - 1;
border-bottom: 1px solid #ddd;
.border-radius(6px 6px 0 0);
.box-shadow(0 1px 0 rgba(255,255,255,.5));
h1 {
margin-bottom: 0;
}
}
/* Error Styles
-------------------------------------------------- */
// One-liner alert bars
div.alert-message {
#gradient > .vertical(transparent, rgba(0,0,0,0.15));
background-color: @gray-lighter;
margin-bottom: @baseline;
padding: 10px 15px 9px;
.border-radius(6px);
color: #fff;
border-bottom: 1px solid rgba(0,0,0,.25);
text-shadow: 0 -1px 0 rgba(0,0,0,.25);
p {
color: #fff;
margin-bottom: 0;
+ p {
margin-top: 5px;
}
}
&.error {
background-color: lighten(@red, 25%);
}
&.warning {
background-color: lighten(@yellow, 15%);
}
&.success {
background-color: lighten(@green, 15%);
}
&.info {
background-color: lighten(@blue, 15%);
}
a.close {
float: right;
margin-top: -2px;
opacity: .5;
color: #fff;
font-size: 20px;
font-weight: bold;
text-shadow: 0 1px 0 rgba(0,0,0,.5);
.border-radius(3px);
&:hover {
opacity: 1;
text-decoration: none;
}
}
}
// Block-level Alerts
div.block-message {
margin-bottom: @baseline;
padding: 14px 19px;
color: #333;
color: rgba(0,0,0,.8);
text-shadow: 0 1px 0 rgba(255,255,255,.25);
.border-radius(6px);
p {
font-size: 13px;
line-height: 18px;
color: #333;
color: rgba(0,0,0,.8);
margin-right: 30px;
margin-bottom: 0;
}
ul {
margin-bottom: 0;
}
strong {
display: block;
}
a.close {
display: block;
color: #333;
color: rgba(0,0,0,.5);
text-shadow: 0 1px 1px rgba(255,255,255,.75);
}
&.error {
background: lighten(@red, 55%);
border: 1px solid lighten(@red, 50%);
}
&.warning {
background: lighten(@yellow, 35%);
border: 1px solid lighten(@yellow, 25%)
}
&.success {
background: lighten(@green, 45%);
border: 1px solid lighten(@green, 35%)
}
&.info {
background: lighten(@blue, 45%);
border: 1px solid lighten(@blue, 40%);
}
}
/* Navigation
-------------------------------------------------- */
// Common tab and pill styles
ul.tabs,
ul.pills {
margin: 0 0 20px;
padding: 0;
.clearfix();
li {
display: inline;
a {
display: inline;
float: left;
width: auto;
}
}
}
// Basic Tabs
ul.tabs {
width: 100%;
border-bottom: 1px solid #ccc;
li {
a {
margin-bottom: -1px;
margin-right: 2px;
padding: 0 15px;
line-height: (@baseline * 2) - 1;
.border-radius(3px 3px 0 0);
&:hover {
background: #f5f5f5;
border-bottom: 1px solid #ccc;
}
}
&.active a {
background: #fff;
padding: 0 14px;
border: 1px solid #ccc;
border-bottom: 0;
color: @gray;
}
}
}
// Basic pill nav
ul.pills {
li {
a {
margin: 5px 3px 5px 0;
padding: 0 15px;
text-shadow: 0 1px 1px #fff;
line-height: 30px;
.border-radius(15px);
&:hover {
background: @link-hover-color;
color: #fff;
text-decoration: none;
text-shadow: 0 1px 1px rgba(0,0,0,.25);
}
}
&.active a {
background: @link-color;
color: #fff;
text-shadow: 0 1px 1px rgba(0,0,0,.25);
}
}
}
/* Pagination
-------------------------------------------------- */
div.pagination {
height: @baseline * 2;
margin: @baseline 0;
ul {
float: left;
margin: 0;
border: 1px solid rgba(0,0,0,.15);
.border-radius(3px);
.box-shadow(0 1px 2px rgba(0,0,0,.075);
li {
display: inline;
a {
display: inline;
float: left;
padding: 0 14px;
line-height: (@baseline * 2) - 2;
border-right: 1px solid rgba(0,0,0,.15);
text-decoration: none;
}
a:hover,
&.active a {
background-color: lighten(@blue, 45%);
}
&.disabled a,
&.disabled a:hover {
background-color: none;
color: @gray-light;
}
&.next a,
&:last-child a {
border: 0;
}
}
}
}
/* Wells
-------------------------------------------------- */
div.well {
background: #f5f5f5;
margin-bottom: 20px;
padding: 19px;
min-height: 20px;
border: 1px solid #ddd;
.border-radius(4px);
.box-shadow(inset 0 1px 1px rgba(0,0,0,.075);
}
lib/reset.less 0 → 100644
View file @ d447898b
/*--------------------------------------------------
Global Reset
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).
-------------------------------------------------- */
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: ""; }
\ No newline at end of file
lib/scaffolding.less 0 → 100644
View file @ d447898b
/*
Scaffolding
Basic and global styles for generating a grid system, structural layout, and page templates
*/
/* Baseline Grid System
-------------------------------------------------- */
div.row {
.clearfix();
div.span1 { .columns(1); }
div.span2 { .columns(2); }
div.span3 { .columns(3); }
div.span4 { .columns(4); }
div.span5 { .columns(5); }
div.span6 { .columns(6); }
div.span7 { .columns(7); }
div.span8 { .columns(8); }
div.span9 { .columns(9); }
div.span10 { .columns(10); }
div.span11 { .columns(11); }
div.span12 { .columns(12); }
div.span13 { .columns(13); }
div.span14 { .columns(14); }
div.span15 { .columns(15); }
div.span16 { .columns(16); }
}
/* Structural Layout
-------------------------------------------------- */
html, body {
background-color: #fff;
}
body {
margin: 0;
.sans-serif(normal,14px,20px);
color: @gray;
text-rendering: optimizeLegibility;
.box-shadow(inset 0 1px 0 #fff);
}
// Container (centered, fixed-width layouts)
div.container {
width: 940px;
margin: 0 auto;
}
// Fluid layouts (left aligned, with sidebar, min- & max-width content)
div.container-fluid {
padding: 20px;
.clearfix();
div.sidebar {
float: left;
width: 220px;
}
div.content {
min-width: 700px;
max-width: 1180px;
margin-left: 240px;
}
}
/* Base Styles
-------------------------------------------------- */
// Links
a {
color: @link-color;
text-decoration: none;
line-height: inherit;
&:hover {
color: @link-hover-color;
text-decoration: underline;
}
}
// Buttons
.btn {
.button();
&.primary {
#gradient > .vertical(@blue, @blue-dark);
color: #fff;
text-shadow: 0 -1px 0 rgba(0,0,0,.25);
&:hover {
color: #fff;
}
}
&.large {
font-size: 16px;
line-height: 30px;
.border-radius(6px);
}
&.small {
padding-right: 9px;
padding-left: 9px;
font-size: 11px;
line-height: 16px;
}
}
// Help Firefox not be a douche about adding extra padding to buttons
button.btn,
input[type=submit].btn {
&::-moz-focus-inner {
padding: 0;
border: 0;
}
}
lib/tables.less 0 → 100644
View file @ d447898b
/*
Tables
*/
/* Baseline styles
-------------------------------------------------- */
table {
width: 100%;
margin-bottom: @baseline;
padding: 0;
text-align: left;
border-collapse: separate;
th, td {
// #translucent > .background(@green, .15);
padding: 10px 10px 9px;
line-height: @baseline;
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)
table.zebra-striped {
tbody {
tr:nth-child(odd) td {
background-color: #f5f5f5;
}
tr:hover td {
background-color: #f1f1f1;
}
}
// Tablesorting styles w/ jQuery plugin
th.header { // For tablesorter tables, make THs have a pointer on hover
cursor: pointer;
padding-right: 20px;
}
th.headerSortUp,
th.headerSortDown { // Style the sorted column headers (THs)
background-image: url(assets/img/tablesorter-indicators.png);
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);
}
th.header:hover { // Style the ascending (reverse alphabetical) column header
background-image: url(assets/img/tablesorter-indicators.png);
background-position: right 15px;
background-repeat: no-repeat;
}
th.actions:hover {
background-image: none !important;
}
th.headerSortDown,
th.headerSortDown:hover { // Style the descending (alphabetical) column header
background-position: right -25px;
}
th.headerSortUp,
th.headerSortUp:hover { // Style the ascending (reverse alphabetical) column header
background-position: right -65px;
}
// Blue Table Headings
th.blue {
color: @blue;
border-bottom-color: @blue;
}
th.headerSortUp.blue, th.headerSortDown.blue {
background-color: lighten(@blue, 40%);
}
// Green Table Headings
th.green {
color: @green;
border-bottom-color: @green;
}
th.headerSortUp.green, th.headerSortDown.green { // backround color is 20% of border color
background-color: lighten(@green, 40%);
}
// Red Table Headings
th.red {
color: @red;
border-bottom-color: @red;
}
th.headerSortUp.red, th.headerSortDown.red { // backround color is 20% of border color
background-color: lighten(@red, 50%);
}
// Yellow Table Headings
th.yellow {
color: @yellow;
border-bottom-color: @yellow;
}
th.headerSortUp.yellow, th.headerSortDown.yellow { // backround color is 20% of border color
background-color: lighten(@yellow, 40%);
}
// Orange Table Headings
th.orange {
color: @orange;
border-bottom-color: @orange;
}
th.headerSortUp.orange, th.headerSortDown.orange { // backround color is 20% of border color
background-color: lighten(@orange, 40%);
}
// Purple Table Headings
th.purple {
color: @purple;
border-bottom-color: @purple;
}
th.headerSortUp.purple, th.headerSortDown.purple { // backround color is 20% of border color
background-color: lighten(@purple, 40%);
}
}
lib/type.less 0 → 100644
View file @ d447898b
/*
Typography
Headings, body text, lists, code, and more for a versatile and durable typography system
*/
/* Body text
-------------------------------------------------- */
p {
.font(normal,14px,@baseline);
margin-bottom: @baseline;
small {
font-size: 12px;
color: @gray-light;
}
}
/* Headings
-------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
font-weight: 500;
color: @gray-dark;
small {
color: @gray-light;
}
}
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: @gray-light;
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
-------------------------------------------------- */
// Labels
span.label {
background-color: #ccc;
padding: 3px 5px;
font-size: 10px;
font-weight: bold;
color: #fff;
text-shadow: 0 0 1px rgba(0,0,0,.01);
text-transform: uppercase;
.border-radius(3px);
&.expired {
background-color: #f5f5f5;
color: #999;
}
&.pending {
background-color: #48489b;
}
&.declined {
background-color: #9b4848;
}
&.active,
&.approved {
background-color: #59bf59;
}
&.disabled {
background-color: #faa226;
}
&.scheduled {
background-color: #f5f5f5;
color: #59bf59;
text-shadow: 0 1px 0 rgba(255,255,255,.5);
}
}
// 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: @gray-lighter;
}
// Blockquotes
blockquote {
margin-bottom: @baseline;
border-left: 5px solid #eee;
padding-left: 15px;
p {
.font(300,14px,@baseline);
margin-bottom: 0;
}
cite {
display: block;
.font(300,12px,@baseline);
color: @gray-light;
&: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;
.border-radius(3px);
}
code {
background-color: lighten(@orange, 40%);
color: rgba(0,0,0,.75);
padding: 2px 3px;
}
pre {
background-color: #f5f5f5;
display: block;
padding: @baseline - 1;
margin: 0 0 @baseline;
line-height: @baseline;
font-size: 12px;
border: 1px solid rgba(0,0,0,.15);
.border-radius(3px);
white-space: pre-wrap;
}
// Code block styling from Chili
pre.css, pre.html {
background-color: #fff;
}
pre ol {
background-color: lighten(@orange, 42%);
list-style: decimal;
margin: (@baseline - 1) * -1;
padding-left: 59px;
.border-radius(2px);
li {
background-color: #fff;
padding: 0 10px;
border-left: 1px solid rgba(0,0,0,.1);
border-left-color: lighten(@orange, 35%);
font-size: 11px;
line-height: @baseline;
color: @gray-light;
text-shadow: 0 1px 1px rgba(255,255,255,.5);
word-wrap: break-word;
&:hover {
}
&:first-child {
padding-top: 9px;
}
&:last-child {
padding-bottom: 9px;
}
}
}
// Language Styles
span.html__tag_start,
span.html__tag_end { color: #277ac1; font-weight: normal; }
span.html__attr_name { color: #d78b41; }
span.html__attr_value { color: #de4a3f; }
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