--- /dev/null
+/*
+ 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
--- /dev/null
+/*
+ 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);
+ }
+}
--- /dev/null
+/*
+ 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);
+ }
+}
--- /dev/null
+/*
+ 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;
+ }
+ }
+ }
+}
--- /dev/null
+/*
+ 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);
+}
--- /dev/null
+/*--------------------------------------------------
+
+ 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
--- /dev/null
+/*
+ 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;
+ }
+}
--- /dev/null
+/*
+ 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%);
+ }
+}
--- /dev/null
+/*
+ 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; }
projects / thirdparty / bootstrap.git / commitdiff
