mirror of
https://github.com/twbs/bootstrap.git
synced 2022-11-09 12:25:43 -05:00
rearranging everything
This commit is contained in:
Jacob Thornton
parent
a6d5f6743f
commit
d447898bf2
9 changed files with 1800 additions and 0 deletions
24
lib/baseline.less
Normal file
24
lib/baseline.less
Normal file
|
|
@ -0,0 +1,24 @@
|
|||
/*
|
||||
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";
|
||||
211
lib/bootstrap.less
vendored
Normal file
211
lib/bootstrap.less
vendored
Normal file
|
|
@ -0,0 +1,211 @@
|
|||
/*
|
||||
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);
|
||||
}
|
||||
}
|
||||
200
lib/docs.less
Normal file
200
lib/docs.less
Normal file
|
|
@ -0,0 +1,200 @@
|
|||
/*
|
||||
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);
|
||||
}
|
||||
}
|
||||
336
lib/forms.less
Normal file
336
lib/forms.less
Normal file
|
|
@ -0,0 +1,336 @@
|
|||
/*
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
526
lib/patterns.less
Normal file
526
lib/patterns.less
Normal file
|
|
@ -0,0 +1,526 @@
|
|||
/*
|
||||
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);
|
||||
}
|
||||
16
lib/reset.less
Normal file
16
lib/reset.less
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
/*--------------------------------------------------
|
||||
|
||||
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: ""; }
|
||||
110
lib/scaffolding.less
Normal file
110
lib/scaffolding.less
Normal file
|
|
@ -0,0 +1,110 @@
|
|||
/*
|
||||
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;
|
||||
}
|
||||
}
|
||||
121
lib/tables.less
Normal file
121
lib/tables.less
Normal file
|
|
@ -0,0 +1,121 @@
|
|||
/*
|
||||
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%);
|
||||
}
|
||||
}
|
||||
256
lib/type.less
Normal file
256
lib/type.less
Normal file
|
|
@ -0,0 +1,256 @@
|
|||
/*
|
||||
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; }
|
||||
Loading…
Reference in a new issue