From e4b2e4409647815d0eb27fb203cdf1aab5cbd73f Mon Sep 17 00:00:00 2001 From: Silvus Date: Tue, 1 Apr 2014 14:01:26 +0200 Subject: [PATCH] Include .less files (bootstrap themes) --- themes/bootstrap-light/less/alerts.less | 67 ++ themes/bootstrap-light/less/bootstrap.less | 58 ++ themes/bootstrap-light/less/buttons.less | 160 ++++ themes/bootstrap-light/less/code.less | 56 ++ themes/bootstrap-light/less/forms.less | 353 +++++++++ themes/bootstrap-light/less/glyphicons.less | 232 ++++++ themes/bootstrap-light/less/grid.less | 346 +++++++++ themes/bootstrap-light/less/input-groups.less | 127 +++ .../bootstrap-light/less/miniflux-base.less | 358 +++++++++ .../bootstrap-light/less/miniflux-theme.less | 38 + themes/bootstrap-light/less/mixins.less | 723 ++++++++++++++++++ themes/bootstrap-light/less/navs.less | 229 ++++++ themes/bootstrap-light/less/normalize.less | 396 ++++++++++ themes/bootstrap-light/less/pager.less | 55 ++ themes/bootstrap-light/less/pagination.less | 83 ++ themes/bootstrap-light/less/panels.less | 148 ++++ themes/bootstrap-light/less/print.less | 100 +++ .../less/responsive-utilities.less | 220 ++++++ themes/bootstrap-light/less/scaffolding.less | 130 ++++ themes/bootstrap-light/less/tables.less | 236 ++++++ themes/bootstrap-light/less/theme.less | 232 ++++++ themes/bootstrap-light/less/type.less | 238 ++++++ themes/bootstrap-light/less/utilities.less | 42 + themes/bootstrap-light/less/variables.less | 620 +++++++++++++++ themes/bootswatch-cyborg/less/alerts.less | 67 ++ themes/bootswatch-cyborg/less/bootstrap.less | 58 ++ themes/bootswatch-cyborg/less/buttons.less | 160 ++++ themes/bootswatch-cyborg/less/code.less | 56 ++ themes/bootswatch-cyborg/less/forms.less | 353 +++++++++ themes/bootswatch-cyborg/less/glyphicons.less | 232 ++++++ themes/bootswatch-cyborg/less/grid.less | 346 +++++++++ .../bootswatch-cyborg/less/input-groups.less | 127 +++ .../bootswatch-cyborg/less/miniflux-base.less | 358 +++++++++ .../less/miniflux-theme.less | 50 ++ themes/bootswatch-cyborg/less/mixins.less | 723 ++++++++++++++++++ themes/bootswatch-cyborg/less/navs.less | 229 ++++++ themes/bootswatch-cyborg/less/normalize.less | 396 ++++++++++ themes/bootswatch-cyborg/less/pager.less | 55 ++ themes/bootswatch-cyborg/less/pagination.less | 83 ++ themes/bootswatch-cyborg/less/panels.less | 148 ++++ themes/bootswatch-cyborg/less/print.less | 100 +++ .../less/responsive-utilities.less | 220 ++++++ .../bootswatch-cyborg/less/scaffolding.less | 130 ++++ themes/bootswatch-cyborg/less/tables.less | 236 ++++++ themes/bootswatch-cyborg/less/theme.less | 232 ++++++ themes/bootswatch-cyborg/less/type.less | 238 ++++++ themes/bootswatch-cyborg/less/utilities.less | 42 + themes/bootswatch-cyborg/less/variables.less | 620 +++++++++++++++ 48 files changed, 10506 insertions(+) create mode 100644 themes/bootstrap-light/less/alerts.less create mode 100644 themes/bootstrap-light/less/bootstrap.less create mode 100644 themes/bootstrap-light/less/buttons.less create mode 100644 themes/bootstrap-light/less/code.less create mode 100644 themes/bootstrap-light/less/forms.less create mode 100644 themes/bootstrap-light/less/glyphicons.less create mode 100644 themes/bootstrap-light/less/grid.less create mode 100644 themes/bootstrap-light/less/input-groups.less create mode 100644 themes/bootstrap-light/less/miniflux-base.less create mode 100644 themes/bootstrap-light/less/miniflux-theme.less create mode 100644 themes/bootstrap-light/less/mixins.less create mode 100644 themes/bootstrap-light/less/navs.less create mode 100644 themes/bootstrap-light/less/normalize.less create mode 100644 themes/bootstrap-light/less/pager.less create mode 100644 themes/bootstrap-light/less/pagination.less create mode 100644 themes/bootstrap-light/less/panels.less create mode 100644 themes/bootstrap-light/less/print.less create mode 100644 themes/bootstrap-light/less/responsive-utilities.less create mode 100644 themes/bootstrap-light/less/scaffolding.less create mode 100644 themes/bootstrap-light/less/tables.less create mode 100644 themes/bootstrap-light/less/theme.less create mode 100644 themes/bootstrap-light/less/type.less create mode 100644 themes/bootstrap-light/less/utilities.less create mode 100644 themes/bootstrap-light/less/variables.less create mode 100644 themes/bootswatch-cyborg/less/alerts.less create mode 100644 themes/bootswatch-cyborg/less/bootstrap.less create mode 100644 themes/bootswatch-cyborg/less/buttons.less create mode 100644 themes/bootswatch-cyborg/less/code.less create mode 100644 themes/bootswatch-cyborg/less/forms.less create mode 100644 themes/bootswatch-cyborg/less/glyphicons.less create mode 100644 themes/bootswatch-cyborg/less/grid.less create mode 100644 themes/bootswatch-cyborg/less/input-groups.less create mode 100644 themes/bootswatch-cyborg/less/miniflux-base.less create mode 100644 themes/bootswatch-cyborg/less/miniflux-theme.less create mode 100644 themes/bootswatch-cyborg/less/mixins.less create mode 100644 themes/bootswatch-cyborg/less/navs.less create mode 100644 themes/bootswatch-cyborg/less/normalize.less create mode 100644 themes/bootswatch-cyborg/less/pager.less create mode 100644 themes/bootswatch-cyborg/less/pagination.less create mode 100644 themes/bootswatch-cyborg/less/panels.less create mode 100644 themes/bootswatch-cyborg/less/print.less create mode 100644 themes/bootswatch-cyborg/less/responsive-utilities.less create mode 100644 themes/bootswatch-cyborg/less/scaffolding.less create mode 100644 themes/bootswatch-cyborg/less/tables.less create mode 100644 themes/bootswatch-cyborg/less/theme.less create mode 100644 themes/bootswatch-cyborg/less/type.less create mode 100644 themes/bootswatch-cyborg/less/utilities.less create mode 100644 themes/bootswatch-cyborg/less/variables.less diff --git a/themes/bootstrap-light/less/alerts.less b/themes/bootstrap-light/less/alerts.less new file mode 100644 index 0000000..be09d18 --- /dev/null +++ b/themes/bootstrap-light/less/alerts.less @@ -0,0 +1,67 @@ +// +// Alerts +// -------------------------------------------------- + + +// Base styles +// ------------------------- + +.alert { + padding: @alert-padding; + margin-bottom: @line-height-computed; + border: 1px solid transparent; + border-radius: @alert-border-radius; + + // Headings for larger alerts + h4 { + margin-top: 0; + // Specified for the h4 to prevent conflicts of changing @headingsColor + color: inherit; + } + // Provide class for links that match alerts + .alert-link { + font-weight: @alert-link-font-weight; + } + + // Improve alignment and spacing of inner content + > p, + > ul { + margin-bottom: 0; + } + > p + p { + margin-top: 5px; + } +} + +// Dismissable alerts +// +// Expand the right padding and account for the close button's positioning. + +.alert-dismissable { + padding-right: (@alert-padding + 20); + + // Adjust close link position + .close { + position: relative; + top: -2px; + right: -21px; + color: inherit; + } +} + +// Alternate styles +// +// Generate contextual modifier classes for colorizing the alert. + +.alert-success { + .alert-variant(@alert-success-bg; @alert-success-border; @alert-success-text); +} +.alert-info { + .alert-variant(@alert-info-bg; @alert-info-border; @alert-info-text); +} +.alert-warning { + .alert-variant(@alert-warning-bg; @alert-warning-border; @alert-warning-text); +} +.alert-danger { + .alert-variant(@alert-danger-bg; @alert-danger-border; @alert-danger-text); +} diff --git a/themes/bootstrap-light/less/bootstrap.less b/themes/bootstrap-light/less/bootstrap.less new file mode 100644 index 0000000..12c6497 --- /dev/null +++ b/themes/bootstrap-light/less/bootstrap.less @@ -0,0 +1,58 @@ +/*! + * Bootstrap v3.0.0 + * + * Copyright 2013 Twitter, Inc + * Licensed under the Apache License v2.0 + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Designed and built with all the love in the world by @mdo and @fat. + */ + +// Core variables and mixins +@import "variables.less"; +@import "mixins.less"; + +// Reset +@import "normalize.less"; +@import "print.less"; + +// Core CSS +@import "scaffolding.less"; +@import "type.less"; +@import "code.less"; +@import "grid.less"; +@import "tables.less"; +@import "forms.less"; +@import "buttons.less"; + +// Components +//@import "component-animations.less"; +@import "glyphicons.less"; +//@import "dropdowns.less"; +//@import "button-groups.less"; +@import "input-groups.less"; +@import "navs.less"; +//@import "navbar.less"; +//@import "breadcrumbs.less"; +@import "pagination.less"; +@import "pager.less"; +//@import "labels.less"; +//@import "badges.less"; +//@import "jumbotron.less"; +//@import "thumbnails.less"; +@import "alerts.less"; +//@import "progress-bars.less"; +//@import "media.less"; +//@import "list-group.less"; +@import "panels.less"; +//@import "wells.less"; +//@import "close.less"; + +// Utility classes +@import "utilities.less"; +@import "responsive-utilities.less"; + +// Mixins for miniflux +@import "miniflux-base.less"; +// Theme for miniflux +@import "miniflux-theme.less"; \ No newline at end of file diff --git a/themes/bootstrap-light/less/buttons.less b/themes/bootstrap-light/less/buttons.less new file mode 100644 index 0000000..5d60d39 --- /dev/null +++ b/themes/bootstrap-light/less/buttons.less @@ -0,0 +1,160 @@ +// +// Buttons +// -------------------------------------------------- + + +// Base styles +// -------------------------------------------------- + +// Core styles +.btn { + display: inline-block; + padding: @padding-base-vertical @padding-base-horizontal; + margin-bottom: 0; // For input.btn + font-size: @font-size-base; + font-weight: @btn-font-weight; + line-height: @line-height-base; + text-align: center; + vertical-align: middle; + cursor: pointer; + border: 1px solid transparent; + border-radius: @border-radius-base; + white-space: nowrap; + .user-select(none); + + &:focus { + .tab-focus(); + } + + &:hover, + &:focus { + color: @btn-default-color; + text-decoration: none; + } + + &:active, + &.active { + outline: 0; + background-image: none; + .box-shadow(inset 0 3px 5px rgba(0,0,0,.125)); + } + + &.disabled, + &[disabled], + fieldset[disabled] & { + cursor: not-allowed; + pointer-events: none; // Future-proof disabling of clicks + .opacity(.65); + .box-shadow(none); + } + +} + + +// Alternate buttons +// -------------------------------------------------- + +.btn-default { + .button-variant(@btn-default-color; @btn-default-bg; @btn-default-border); +} +.btn-primary { + .button-variant(@btn-primary-color; @btn-primary-bg; @btn-primary-border); +} +// Warning appears as orange +.btn-warning { + .button-variant(@btn-warning-color; @btn-warning-bg; @btn-warning-border); +} +// Danger and error appear as red +.btn-danger { + .button-variant(@btn-danger-color; @btn-danger-bg; @btn-danger-border); +} +// Success appears as green +.btn-success { + .button-variant(@btn-success-color; @btn-success-bg; @btn-success-border); +} +// Info appears as blue-green +.btn-info { + .button-variant(@btn-info-color; @btn-info-bg; @btn-info-border); +} + + +// Link buttons +// ------------------------- + +// Make a button look and behave like a link +.btn-link { + color: @link-color; + font-weight: normal; + cursor: pointer; + border-radius: 0; + + &, + &:active, + &[disabled], + fieldset[disabled] & { + background-color: transparent; + .box-shadow(none); + } + &, + &:hover, + &:focus, + &:active { + border-color: transparent; + } + &:hover, + &:focus { + color: @link-hover-color; + text-decoration: underline; + background-color: transparent; + } + &[disabled], + fieldset[disabled] & { + &:hover, + &:focus { + color: @btn-link-disabled-color; + text-decoration: none; + } + } +} + + +// Button Sizes +// -------------------------------------------------- + +.btn-lg { + // line-height: ensure even-numbered height of button next to large input + .button-size(@padding-large-vertical; @padding-large-horizontal; @font-size-large; @line-height-large; @border-radius-large); +} +.btn-sm, +.btn-xs { + // line-height: ensure proper height of button next to small input + .button-size(@padding-small-vertical; @padding-small-horizontal; @font-size-small; @line-height-small; @border-radius-small); +} +.btn-xs { + padding: 1px 5px; +} + + +// Block button +// -------------------------------------------------- + +.btn-block { + display: block; + width: 100%; + padding-left: 0; + padding-right: 0; +} + +// Vertically space out multiple block buttons +.btn-block + .btn-block { + margin-top: 5px; +} + +// Specificity overrides +input[type="submit"], +input[type="reset"], +input[type="button"] { + &.btn-block { + width: 100%; + } +} diff --git a/themes/bootstrap-light/less/code.less b/themes/bootstrap-light/less/code.less new file mode 100644 index 0000000..d6661d2 --- /dev/null +++ b/themes/bootstrap-light/less/code.less @@ -0,0 +1,56 @@ +// +// Code (inline and blocK) +// -------------------------------------------------- + + +// Inline and block code styles +code, +pre { + font-family: @font-family-monospace; +} + +// Inline code +code { + padding: 2px 4px; + font-size: 90%; + color: @code-color; + background-color: @code-bg; + white-space: nowrap; + border-radius: @border-radius-base; +} + +// Blocks of code +pre { + display: block; + padding: ((@line-height-computed - 1) / 2); + margin: 0 0 (@line-height-computed / 2); + font-size: (@font-size-base - 1); // 14px to 13px + line-height: @line-height-base; + word-break: break-all; + word-wrap: break-word; + color: @pre-color; + background-color: @pre-bg; + border: 1px solid @pre-border-color; + border-radius: @border-radius-base; + + // Make prettyprint styles more spaced out for readability + &.prettyprint { + margin-bottom: @line-height-computed; + } + + // Account for some code outputs that place code tags in pre tags + code { + padding: 0; + font-size: inherit; + color: inherit; + white-space: pre-wrap; + background-color: transparent; + border: 0; + } +} + +// Enable scrollable blocks of code +.pre-scrollable { + max-height: @pre-scrollable-max-height; + overflow-y: scroll; +} diff --git a/themes/bootstrap-light/less/forms.less b/themes/bootstrap-light/less/forms.less new file mode 100644 index 0000000..f87b602 --- /dev/null +++ b/themes/bootstrap-light/less/forms.less @@ -0,0 +1,353 @@ +// +// Forms +// -------------------------------------------------- + + +// Normalize non-controls +// +// Restyle and baseline non-control form elements. + +fieldset { + padding: 0; + margin: 0; + border: 0; +} + +legend { + display: block; + width: 100%; + padding: 0; + margin-bottom: @line-height-computed; + font-size: (@font-size-base * 1.5); + line-height: inherit; + color: @legend-color; + border: 0; + border-bottom: 1px solid @legend-border-color; +} + +label { + display: inline-block; + margin-bottom: 5px; + font-weight: bold; +} + + +// Normalize form controls + +// Override content-box in Normalize (* isn't specific enough) +input[type="search"] { + .box-sizing(border-box); +} + +// Position radios and checkboxes better +input[type="radio"], +input[type="checkbox"] { + margin: 4px 0 0; + margin-top: 1px \9; /* IE8-9 */ + line-height: normal; +} + +// Set the height of select and file controls to match text inputs +input[type="file"] { + display: block; +} + +// Make multiple select elements height not fixed +select[multiple], +select[size] { + height: auto; +} + +// Fix optgroup Firefox bug per https://github.com/twbs/bootstrap/issues/7611 +select optgroup { + font-size: inherit; + font-style: inherit; + font-family: inherit; +} + +// Focus for select, file, radio, and checkbox +input[type="file"]:focus, +input[type="radio"]:focus, +input[type="checkbox"]:focus { + .tab-focus(); +} + +// Fix for Chrome number input +// Setting certain font-sizes causes the `I` bar to appear on hover of the bottom increment button. +// See https://github.com/twbs/bootstrap/issues/8350 for more. +input[type="number"] { + &::-webkit-outer-spin-button, + &::-webkit-inner-spin-button { + height: auto; + } +} + + +// Placeholder +// +// Placeholder text gets special styles because when browsers invalidate entire +// lines if it doesn't understand a selector/ +.form-control { + .placeholder(); +} + + +// Common form controls +// +// Shared size and type resets for form controls. Apply `.form-control` to any +// of the following form controls: +// +// select +// textarea +// input[type="text"] +// input[type="password"] +// input[type="datetime"] +// input[type="datetime-local"] +// input[type="date"] +// input[type="month"] +// input[type="time"] +// input[type="week"] +// input[type="number"] +// input[type="email"] +// input[type="url"] +// input[type="search"] +// input[type="tel"] +// input[type="color"] + +.form-control { + display: block; + width: 100%; + height: @input-height-base; // Make inputs at least the height of their button counterpart (base line-height + padding + border) + padding: @padding-base-vertical @padding-base-horizontal; + font-size: @font-size-base; + line-height: @line-height-base; + color: @input-color; + vertical-align: middle; + background-color: @input-bg; + border: 1px solid @input-border; + border-radius: @input-border-radius; + .box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); + .transition(~"border-color ease-in-out .15s, box-shadow ease-in-out .15s"); + + // Customize the `:focus` state to imitate native WebKit styles. + .form-control-focus(); + + // Disabled and read-only inputs + // Note: HTML5 says that controls under a fieldset > legend:first-child won't + // be disabled if the fieldset is disabled. Due to implementation difficulty, + // we don't honor that edge case; we style them as disabled anyway. + &[disabled], + &[readonly], + fieldset[disabled] & { + cursor: not-allowed; + background-color: @input-bg-disabled; + } + + // Reset height for `textarea`s + textarea& { + height: auto; + } +} + + +// Form groups +// +// Designed to help with the organization and spacing of vertical forms. For +// horizontal forms, use the predefined grid classes. + +.form-group { + margin-bottom: 15px; +} + + +// Checkboxes and radios +// +// Indent the labels to position radios/checkboxes as hanging controls. + +.radio, +.checkbox { + display: block; + min-height: @line-height-computed; // clear the floating input if there is no label text + margin-top: 10px; + margin-bottom: 10px; + padding-left: 20px; + vertical-align: middle; + label { + display: inline; + margin-bottom: 0; + font-weight: normal; + cursor: pointer; + } +} +.radio input[type="radio"], +.radio-inline input[type="radio"], +.checkbox input[type="checkbox"], +.checkbox-inline input[type="checkbox"] { + float: left; + margin-left: -20px; +} +.radio + .radio, +.checkbox + .checkbox { + margin-top: -5px; // Move up sibling radios or checkboxes for tighter spacing +} + +// Radios and checkboxes on same line +.radio-inline, +.checkbox-inline { + display: inline-block; + padding-left: 20px; + margin-bottom: 0; + vertical-align: middle; + font-weight: normal; + cursor: pointer; +} +.radio-inline + .radio-inline, +.checkbox-inline + .checkbox-inline { + margin-top: 0; + margin-left: 10px; // space out consecutive inline controls +} + +// Apply same disabled cursor tweak as for inputs +// +// Note: Neither radios nor checkboxes can be readonly. +input[type="radio"], +input[type="checkbox"], +.radio, +.radio-inline, +.checkbox, +.checkbox-inline { + &[disabled], + fieldset[disabled] & { + cursor: not-allowed; + } +} + +// Form control sizing +.input-sm { + .input-size(@input-height-small; @padding-small-vertical; @padding-small-horizontal; @font-size-small; @line-height-small; @border-radius-small); +} + +.input-lg { + .input-size(@input-height-large; @padding-large-vertical; @padding-large-horizontal; @font-size-large; @line-height-large; @border-radius-large); +} + + +// Form control feedback states +// +// Apply contextual and semantic states to individual form controls. + +// Warning +.has-warning { + .form-control-validation(@state-warning-text; @state-warning-text; @state-warning-bg); +} +// Error +.has-error { + .form-control-validation(@state-danger-text; @state-danger-text; @state-danger-bg); +} +// Success +.has-success { + .form-control-validation(@state-success-text; @state-success-text; @state-success-bg); +} + + +// Static form control text +// +// Apply class to a `p` element to make any string of text align with labels in +// a horizontal form layout. + +.form-control-static { + margin-bottom: 0; // Remove default margin from `p` + padding-top: (@padding-base-vertical + 1); +} + + +// Help text +// +// Apply to any element you wish to create light text for placement immediately +// below a form control. Use for general help, formatting, or instructional text. + +.help-block { + display: block; // account for any element using help-block + margin-top: 5px; + margin-bottom: 10px; + color: lighten(@text-color, 25%); // lighten the text some for contrast +} + + + +// Inline forms +// +// Make forms appear inline(-block) by adding the `.form-inline` class. Inline +// forms begin stacked on extra small (mobile) devices and then go inline when +// viewports reach <768px. +// +// Requires wrapping inputs and labels with `.form-group` for proper display of +// default HTML form controls and our custom form controls (e.g., input groups). +// +// Heads up! This is mixin-ed into `.navbar-form` in navbars.less. + +.form-inline { + + // Kick in the inline + @media (min-width: @screen-tablet) { + // Inline-block all the things for "inline" + .form-group { + display: inline-block; + margin-bottom: 0; + vertical-align: middle; + } + + // In navbar-form, allow folks to *not* use `.form-group` + .form-control { + display: inline-block; + } + + // Remove default margin on radios/checkboxes that were used for stacking, and + // then undo the floating of radios and checkboxes to match (which also avoids + // a bug in WebKit: https://github.com/twbs/bootstrap/issues/1969). + .radio, + .checkbox { + display: inline-block; + margin-top: 0; + margin-bottom: 0; + padding-left: 0; + } + .radio input[type="radio"], + .checkbox input[type="checkbox"] { + float: none; + margin-left: 0; + } + } +} + + +// Horizontal forms +// +// Horizontal forms are built on grid classes and allow you to create forms with +// labels on the left and inputs on the right. + +.form-horizontal { + + // Consistent vertical alignment of labels, radios, and checkboxes + .control-label, + .radio, + .checkbox, + .radio-inline, + .checkbox-inline { + margin-top: 0; + margin-bottom: 0; + padding-top: (@padding-base-vertical + 1); // Default padding plus a border + } + + // Make form groups behave like rows + .form-group { + .make-row(); + } + + // Only right align form labels here when the columns stop stacking + @media (min-width: @screen-tablet) { + .control-label { + text-align: right; + } + } +} diff --git a/themes/bootstrap-light/less/glyphicons.less b/themes/bootstrap-light/less/glyphicons.less new file mode 100644 index 0000000..0e0ba98 --- /dev/null +++ b/themes/bootstrap-light/less/glyphicons.less @@ -0,0 +1,232 @@ +// +// Glyphicons for Bootstrap +// +// Since icons are fonts, they can be placed anywhere text is placed and are +// thus automatically sized to match the surrounding child. To use, create an +// inline element with the appropriate classes, like so: +// +// Star + +// Import the fonts +@font-face { + font-family: 'Glyphicons Halflings'; + src: url('@{icon-font-path}@{icon-font-name}.eot'); + src: url('@{icon-font-path}@{icon-font-name}.eot?#iefix') format('embedded-opentype'), + url('@{icon-font-path}@{icon-font-name}.woff') format('woff'), + url('@{icon-font-path}@{icon-font-name}.ttf') format('truetype'), + url('@{icon-font-path}@{icon-font-name}.svg#glyphicons-halflingsregular') format('svg'); +} + +// Catchall baseclass +.glyphicon { + position: relative; + top: 1px; + display: inline-block; + font-family: 'Glyphicons Halflings'; + font-style: normal; + font-weight: normal; + line-height: 1; + -webkit-font-smoothing: antialiased; +} + +// Individual icons +.glyphicon-asterisk { &:before { content: "\2a"; } } +.glyphicon-plus { &:before { content: "\2b"; } } +.glyphicon-euro { &:before { content: "\20ac"; } } +.glyphicon-minus { &:before { content: "\2212"; } } +.glyphicon-cloud { &:before { content: "\2601"; } } +.glyphicon-envelope { &:before { content: "\2709"; } } +.glyphicon-pencil { &:before { content: "\270f"; } } +.glyphicon-glass { &:before { content: "\e001"; } } +.glyphicon-music { &:before { content: "\e002"; } } +.glyphicon-search { &:before { content: "\e003"; } } +.glyphicon-heart { &:before { content: "\e005"; } } +.glyphicon-star { &:before { content: "\e006"; } } +.glyphicon-star-empty { &:before { content: "\e007"; } } +.glyphicon-user { &:before { content: "\e008"; } } +.glyphicon-film { &:before { content: "\e009"; } } +.glyphicon-th-large { &:before { content: "\e010"; } } +.glyphicon-th { &:before { content: "\e011"; } } +.glyphicon-th-list { &:before { content: "\e012"; } } +.glyphicon-ok { &:before { content: "\e013"; } } +.glyphicon-remove { &:before { content: "\e014"; } } +.glyphicon-zoom-in { &:before { content: "\e015"; } } +.glyphicon-zoom-out { &:before { content: "\e016"; } } +.glyphicon-off { &:before { content: "\e017"; } } +.glyphicon-signal { &:before { content: "\e018"; } } +.glyphicon-cog { &:before { content: "\e019"; } } +.glyphicon-trash { &:before { content: "\e020"; } } +.glyphicon-home { &:before { content: "\e021"; } } +.glyphicon-file { &:before { content: "\e022"; } } +.glyphicon-time { &:before { content: "\e023"; } } +.glyphicon-road { &:before { content: "\e024"; } } +.glyphicon-download-alt { &:before { content: "\e025"; } } +.glyphicon-download { &:before { content: "\e026"; } } +.glyphicon-upload { &:before { content: "\e027"; } } +.glyphicon-inbox { &:before { content: "\e028"; } } +.glyphicon-play-circle { &:before { content: "\e029"; } } +.glyphicon-repeat { &:before { content: "\e030"; } } +.glyphicon-refresh { &:before { content: "\e031"; } } +.glyphicon-list-alt { &:before { content: "\e032"; } } +.glyphicon-flag { &:before { content: "\e034"; } } +.glyphicon-headphones { &:before { content: "\e035"; } } +.glyphicon-volume-off { &:before { content: "\e036"; } } +.glyphicon-volume-down { &:before { content: "\e037"; } } +.glyphicon-volume-up { &:before { content: "\e038"; } } +.glyphicon-qrcode { &:before { content: "\e039"; } } +.glyphicon-barcode { &:before { content: "\e040"; } } +.glyphicon-tag { &:before { content: "\e041"; } } +.glyphicon-tags { &:before { content: "\e042"; } } +.glyphicon-book { &:before { content: "\e043"; } } +.glyphicon-print { &:before { content: "\e045"; } } +.glyphicon-font { &:before { content: "\e047"; } } +.glyphicon-bold { &:before { content: "\e048"; } } +.glyphicon-italic { &:before { content: "\e049"; } } +.glyphicon-text-height { &:before { content: "\e050"; } } +.glyphicon-text-width { &:before { content: "\e051"; } } +.glyphicon-align-left { &:before { content: "\e052"; } } +.glyphicon-align-center { &:before { content: "\e053"; } } +.glyphicon-align-right { &:before { content: "\e054"; } } +.glyphicon-align-justify { &:before { content: "\e055"; } } +.glyphicon-list { &:before { content: "\e056"; } } +.glyphicon-indent-left { &:before { content: "\e057"; } } +.glyphicon-indent-right { &:before { content: "\e058"; } } +.glyphicon-facetime-video { &:before { content: "\e059"; } } +.glyphicon-picture { &:before { content: "\e060"; } } +.glyphicon-map-marker { &:before { content: "\e062"; } } +.glyphicon-adjust { &:before { content: "\e063"; } } +.glyphicon-tint { &:before { content: "\e064"; } } +.glyphicon-edit { &:before { content: "\e065"; } } +.glyphicon-share { &:before { content: "\e066"; } } +.glyphicon-check { &:before { content: "\e067"; } } +.glyphicon-move { &:before { content: "\e068"; } } +.glyphicon-step-backward { &:before { content: "\e069"; } } +.glyphicon-fast-backward { &:before { content: "\e070"; } } +.glyphicon-backward { &:before { content: "\e071"; } } +.glyphicon-play { &:before { content: "\e072"; } } +.glyphicon-pause { &:before { content: "\e073"; } } +.glyphicon-stop { &:before { content: "\e074"; } } +.glyphicon-forward { &:before { content: "\e075"; } } +.glyphicon-fast-forward { &:before { content: "\e076"; } } +.glyphicon-step-forward { &:before { content: "\e077"; } } +.glyphicon-eject { &:before { content: "\e078"; } } +.glyphicon-chevron-left { &:before { content: "\e079"; } } +.glyphicon-chevron-right { &:before { content: "\e080"; } } +.glyphicon-plus-sign { &:before { content: "\e081"; } } +.glyphicon-minus-sign { &:before { content: "\e082"; } } +.glyphicon-remove-sign { &:before { content: "\e083"; } } +.glyphicon-ok-sign { &:before { content: "\e084"; } } +.glyphicon-question-sign { &:before { content: "\e085"; } } +.glyphicon-info-sign { &:before { content: "\e086"; } } +.glyphicon-screenshot { &:before { content: "\e087"; } } +.glyphicon-remove-circle { &:before { content: "\e088"; } } +.glyphicon-ok-circle { &:before { content: "\e089"; } } +.glyphicon-ban-circle { &:before { content: "\e090"; } } +.glyphicon-arrow-left { &:before { content: "\e091"; } } +.glyphicon-arrow-right { &:before { content: "\e092"; } } +.glyphicon-arrow-up { &:before { content: "\e093"; } } +.glyphicon-arrow-down { &:before { content: "\e094"; } } +.glyphicon-share-alt { &:before { content: "\e095"; } } +.glyphicon-resize-full { &:before { content: "\e096"; } } +.glyphicon-resize-small { &:before { content: "\e097"; } } +.glyphicon-exclamation-sign { &:before { content: "\e101"; } } +.glyphicon-gift { &:before { content: "\e102"; } } +.glyphicon-leaf { &:before { content: "\e103"; } } +.glyphicon-eye-open { &:before { content: "\e105"; } } +.glyphicon-eye-close { &:before { content: "\e106"; } } +.glyphicon-warning-sign { &:before { content: "\e107"; } } +.glyphicon-plane { &:before { content: "\e108"; } } +.glyphicon-random { &:before { content: "\e110"; } } +.glyphicon-comment { &:before { content: "\e111"; } } +.glyphicon-magnet { &:before { content: "\e112"; } } +.glyphicon-chevron-up { &:before { content: "\e113"; } } +.glyphicon-chevron-down { &:before { content: "\e114"; } } +.glyphicon-retweet { &:before { content: "\e115"; } } +.glyphicon-shopping-cart { &:before { content: "\e116"; } } +.glyphicon-folder-close { &:before { content: "\e117"; } } +.glyphicon-folder-open { &:before { content: "\e118"; } } +.glyphicon-resize-vertical { &:before { content: "\e119"; } } +.glyphicon-resize-horizontal { &:before { content: "\e120"; } } +.glyphicon-hdd { &:before { content: "\e121"; } } +.glyphicon-bullhorn { &:before { content: "\e122"; } } +.glyphicon-certificate { &:before { content: "\e124"; } } +.glyphicon-thumbs-up { &:before { content: "\e125"; } } +.glyphicon-thumbs-down { &:before { content: "\e126"; } } +.glyphicon-hand-right { &:before { content: "\e127"; } } +.glyphicon-hand-left { &:before { content: "\e128"; } } +.glyphicon-hand-up { &:before { content: "\e129"; } } +.glyphicon-hand-down { &:before { content: "\e130"; } } +.glyphicon-circle-arrow-right { &:before { content: "\e131"; } } +.glyphicon-circle-arrow-left { &:before { content: "\e132"; } } +.glyphicon-circle-arrow-up { &:before { content: "\e133"; } } +.glyphicon-circle-arrow-down { &:before { content: "\e134"; } } +.glyphicon-globe { &:before { content: "\e135"; } } +.glyphicon-tasks { &:before { content: "\e137"; } } +.glyphicon-filter { &:before { content: "\e138"; } } +.glyphicon-fullscreen { &:before { content: "\e140"; } } +.glyphicon-dashboard { &:before { content: "\e141"; } } +.glyphicon-heart-empty { &:before { content: "\e143"; } } +.glyphicon-link { &:before { content: "\e144"; } } +.glyphicon-phone { &:before { content: "\e145"; } } +.glyphicon-usd { &:before { content: "\e148"; } } +.glyphicon-gbp { &:before { content: "\e149"; } } +.glyphicon-sort { &:before { content: "\e150"; } } +.glyphicon-sort-by-alphabet { &:before { content: "\e151"; } } +.glyphicon-sort-by-alphabet-alt { &:before { content: "\e152"; } } +.glyphicon-sort-by-order { &:before { content: "\e153"; } } +.glyphicon-sort-by-order-alt { &:before { content: "\e154"; } } +.glyphicon-sort-by-attributes { &:before { content: "\e155"; } } +.glyphicon-sort-by-attributes-alt { &:before { content: "\e156"; } } +.glyphicon-unchecked { &:before { content: "\e157"; } } +.glyphicon-expand { &:before { content: "\e158"; } } +.glyphicon-collapse-down { &:before { content: "\e159"; } } +.glyphicon-collapse-up { &:before { content: "\e160"; } } +.glyphicon-log-in { &:before { content: "\e161"; } } +.glyphicon-flash { &:before { content: "\e162"; } } +.glyphicon-log-out { &:before { content: "\e163"; } } +.glyphicon-new-window { &:before { content: "\e164"; } } +.glyphicon-record { &:before { content: "\e165"; } } +.glyphicon-save { &:before { content: "\e166"; } } +.glyphicon-open { &:before { content: "\e167"; } } +.glyphicon-saved { &:before { content: "\e168"; } } +.glyphicon-import { &:before { content: "\e169"; } } +.glyphicon-export { &:before { content: "\e170"; } } +.glyphicon-send { &:before { content: "\e171"; } } +.glyphicon-floppy-disk { &:before { content: "\e172"; } } +.glyphicon-floppy-saved { &:before { content: "\e173"; } } +.glyphicon-floppy-remove { &:before { content: "\e174"; } } +.glyphicon-floppy-save { &:before { content: "\e175"; } } +.glyphicon-floppy-open { &:before { content: "\e176"; } } +.glyphicon-credit-card { &:before { content: "\e177"; } } +.glyphicon-transfer { &:before { content: "\e178"; } } +.glyphicon-cutlery { &:before { content: "\e179"; } } +.glyphicon-header { &:before { content: "\e180"; } } +.glyphicon-compressed { &:before { content: "\e181"; } } +.glyphicon-earphone { &:before { content: "\e182"; } } +.glyphicon-phone-alt { &:before { content: "\e183"; } } +.glyphicon-tower { &:before { content: "\e184"; } } +.glyphicon-stats { &:before { content: "\e185"; } } +.glyphicon-sd-video { &:before { content: "\e186"; } } +.glyphicon-hd-video { &:before { content: "\e187"; } } +.glyphicon-subtitles { &:before { content: "\e188"; } } +.glyphicon-sound-stereo { &:before { content: "\e189"; } } +.glyphicon-sound-dolby { &:before { content: "\e190"; } } +.glyphicon-sound-5-1 { &:before { content: "\e191"; } } +.glyphicon-sound-6-1 { &:before { content: "\e192"; } } +.glyphicon-sound-7-1 { &:before { content: "\e193"; } } +.glyphicon-copyright-mark { &:before { content: "\e194"; } } +.glyphicon-registration-mark { &:before { content: "\e195"; } } +.glyphicon-cloud-download { &:before { content: "\e197"; } } +.glyphicon-cloud-upload { &:before { content: "\e198"; } } +.glyphicon-tree-conifer { &:before { content: "\e199"; } } +.glyphicon-tree-deciduous { &:before { content: "\e200"; } } +.glyphicon-briefcase { &:before { content: "\1f4bc"; } } +.glyphicon-calendar { &:before { content: "\1f4c5"; } } +.glyphicon-pushpin { &:before { content: "\1f4cc"; } } +.glyphicon-paperclip { &:before { content: "\1f4ce"; } } +.glyphicon-camera { &:before { content: "\1f4f7"; } } +.glyphicon-lock { &:before { content: "\1f512"; } } +.glyphicon-bell { &:before { content: "\1f514"; } } +.glyphicon-bookmark { &:before { content: "\1f516"; } } +.glyphicon-fire { &:before { content: "\1f525"; } } +.glyphicon-wrench { &:before { content: "\1f527"; } } diff --git a/themes/bootstrap-light/less/grid.less b/themes/bootstrap-light/less/grid.less new file mode 100644 index 0000000..44e3899 --- /dev/null +++ b/themes/bootstrap-light/less/grid.less @@ -0,0 +1,346 @@ +// +// Grid system +// -------------------------------------------------- + + +// Set the container width, and override it for fixed navbars in media queries +.container { + .container-fixed(); +} + +// mobile first defaults +.row { + .make-row(); +} + +// Common styles for small and large grid columns +.col-xs-1, +.col-xs-2, +.col-xs-3, +.col-xs-4, +.col-xs-5, +.col-xs-6, +.col-xs-7, +.col-xs-8, +.col-xs-9, +.col-xs-10, +.col-xs-11, +.col-xs-12, +.col-sm-1, +.col-sm-2, +.col-sm-3, +.col-sm-4, +.col-sm-5, +.col-sm-6, +.col-sm-7, +.col-sm-8, +.col-sm-9, +.col-sm-10, +.col-sm-11, +.col-sm-12, +.col-md-1, +.col-md-2, +.col-md-3, +.col-md-4, +.col-md-5, +.col-md-6, +.col-md-7, +.col-md-8, +.col-md-9, +.col-md-10, +.col-md-11, +.col-md-12, +.col-lg-1, +.col-lg-2, +.col-lg-3, +.col-lg-4, +.col-lg-5, +.col-lg-6, +.col-lg-7, +.col-lg-8, +.col-lg-9, +.col-lg-10, +.col-lg-11, +.col-lg-12 { + position: relative; + // Prevent columns from collapsing when empty + min-height: 1px; + // Inner gutter via padding + padding-left: (@grid-gutter-width / 2); + padding-right: (@grid-gutter-width / 2); +} + + +// Extra small grid +// +// Grid classes for extra small devices like smartphones. No offset, push, or +// pull classes are present here due to the size of the target. +// +// Note that `.col-xs-12` doesn't get floated on purpose—there's no need since +// it's full-width. + +.col-xs-1, +.col-xs-2, +.col-xs-3, +.col-xs-4, +.col-xs-5, +.col-xs-6, +.col-xs-7, +.col-xs-8, +.col-xs-9, +.col-xs-10, +.col-xs-11 { + float: left; +} +.col-xs-1 { width: percentage((1 / @grid-columns)); } +.col-xs-2 { width: percentage((2 / @grid-columns)); } +.col-xs-3 { width: percentage((3 / @grid-columns)); } +.col-xs-4 { width: percentage((4 / @grid-columns)); } +.col-xs-5 { width: percentage((5 / @grid-columns)); } +.col-xs-6 { width: percentage((6 / @grid-columns)); } +.col-xs-7 { width: percentage((7 / @grid-columns)); } +.col-xs-8 { width: percentage((8 / @grid-columns)); } +.col-xs-9 { width: percentage((9 / @grid-columns)); } +.col-xs-10 { width: percentage((10/ @grid-columns)); } +.col-xs-11 { width: percentage((11/ @grid-columns)); } +.col-xs-12 { width: 100%; } + + +// Small grid +// +// Columns, offsets, pushes, and pulls for the small device range, from phones +// to tablets. +// +// Note that `.col-sm-12` doesn't get floated on purpose—there's no need since +// it's full-width. + +@media (min-width: @screen-tablet) { + .container { + max-width: @container-tablet; + } + + .col-sm-1, + .col-sm-2, + .col-sm-3, + .col-sm-4, + .col-sm-5, + .col-sm-6, + .col-sm-7, + .col-sm-8, + .col-sm-9, + .col-sm-10, + .col-sm-11 { + float: left; + } + .col-sm-1 { width: percentage((1 / @grid-columns)); } + .col-sm-2 { width: percentage((2 / @grid-columns)); } + .col-sm-3 { width: percentage((3 / @grid-columns)); } + .col-sm-4 { width: percentage((4 / @grid-columns)); } + .col-sm-5 { width: percentage((5 / @grid-columns)); } + .col-sm-6 { width: percentage((6 / @grid-columns)); } + .col-sm-7 { width: percentage((7 / @grid-columns)); } + .col-sm-8 { width: percentage((8 / @grid-columns)); } + .col-sm-9 { width: percentage((9 / @grid-columns)); } + .col-sm-10 { width: percentage((10/ @grid-columns)); } + .col-sm-11 { width: percentage((11/ @grid-columns)); } + .col-sm-12 { width: 100%; } + + // Push and pull columns for source order changes + .col-sm-push-1 { left: percentage((1 / @grid-columns)); } + .col-sm-push-2 { left: percentage((2 / @grid-columns)); } + .col-sm-push-3 { left: percentage((3 / @grid-columns)); } + .col-sm-push-4 { left: percentage((4 / @grid-columns)); } + .col-sm-push-5 { left: percentage((5 / @grid-columns)); } + .col-sm-push-6 { left: percentage((6 / @grid-columns)); } + .col-sm-push-7 { left: percentage((7 / @grid-columns)); } + .col-sm-push-8 { left: percentage((8 / @grid-columns)); } + .col-sm-push-9 { left: percentage((9 / @grid-columns)); } + .col-sm-push-10 { left: percentage((10/ @grid-columns)); } + .col-sm-push-11 { left: percentage((11/ @grid-columns)); } + + .col-sm-pull-1 { right: percentage((1 / @grid-columns)); } + .col-sm-pull-2 { right: percentage((2 / @grid-columns)); } + .col-sm-pull-3 { right: percentage((3 / @grid-columns)); } + .col-sm-pull-4 { right: percentage((4 / @grid-columns)); } + .col-sm-pull-5 { right: percentage((5 / @grid-columns)); } + .col-sm-pull-6 { right: percentage((6 / @grid-columns)); } + .col-sm-pull-7 { right: percentage((7 / @grid-columns)); } + .col-sm-pull-8 { right: percentage((8 / @grid-columns)); } + .col-sm-pull-9 { right: percentage((9 / @grid-columns)); } + .col-sm-pull-10 { right: percentage((10/ @grid-columns)); } + .col-sm-pull-11 { right: percentage((11/ @grid-columns)); } + + // Offsets + .col-sm-offset-1 { margin-left: percentage((1 / @grid-columns)); } + .col-sm-offset-2 { margin-left: percentage((2 / @grid-columns)); } + .col-sm-offset-3 { margin-left: percentage((3 / @grid-columns)); } + .col-sm-offset-4 { margin-left: percentage((4 / @grid-columns)); } + .col-sm-offset-5 { margin-left: percentage((5 / @grid-columns)); } + .col-sm-offset-6 { margin-left: percentage((6 / @grid-columns)); } + .col-sm-offset-7 { margin-left: percentage((7 / @grid-columns)); } + .col-sm-offset-8 { margin-left: percentage((8 / @grid-columns)); } + .col-sm-offset-9 { margin-left: percentage((9 / @grid-columns)); } + .col-sm-offset-10 { margin-left: percentage((10/ @grid-columns)); } + .col-sm-offset-11 { margin-left: percentage((11/ @grid-columns)); } +} + + +// Medium grid +// +// Columns, offsets, pushes, and pulls for the desktop device range. +// +// Note that `.col-md-12` doesn't get floated on purpose—there's no need since +// it's full-width. + +@media (min-width: @screen-desktop) { + .container { + max-width: @container-desktop; + } + .col-md-1, + .col-md-2, + .col-md-3, + .col-md-4, + .col-md-5, + .col-md-6, + .col-md-7, + .col-md-8, + .col-md-9, + .col-md-10, + .col-md-11 { + float: left; + } + .col-md-1 { width: percentage((1 / @grid-columns)); } + .col-md-2 { width: percentage((2 / @grid-columns)); } + .col-md-3 { width: percentage((3 / @grid-columns)); } + .col-md-4 { width: percentage((4 / @grid-columns)); } + .col-md-5 { width: percentage((5 / @grid-columns)); } + .col-md-6 { width: percentage((6 / @grid-columns)); } + .col-md-7 { width: percentage((7 / @grid-columns)); } + .col-md-8 { width: percentage((8 / @grid-columns)); } + .col-md-9 { width: percentage((9 / @grid-columns)); } + .col-md-10 { width: percentage((10/ @grid-columns)); } + .col-md-11 { width: percentage((11/ @grid-columns)); } + .col-md-12 { width: 100%; } + + // Push and pull columns for source order changes + .col-md-push-0 { left: auto; } + .col-md-push-1 { left: percentage((1 / @grid-columns)); } + .col-md-push-2 { left: percentage((2 / @grid-columns)); } + .col-md-push-3 { left: percentage((3 / @grid-columns)); } + .col-md-push-4 { left: percentage((4 / @grid-columns)); } + .col-md-push-5 { left: percentage((5 / @grid-columns)); } + .col-md-push-6 { left: percentage((6 / @grid-columns)); } + .col-md-push-7 { left: percentage((7 / @grid-columns)); } + .col-md-push-8 { left: percentage((8 / @grid-columns)); } + .col-md-push-9 { left: percentage((9 / @grid-columns)); } + .col-md-push-10 { left: percentage((10/ @grid-columns)); } + .col-md-push-11 { left: percentage((11/ @grid-columns)); } + + .col-md-pull-0 { right: auto; } + .col-md-pull-1 { right: percentage((1 / @grid-columns)); } + .col-md-pull-2 { right: percentage((2 / @grid-columns)); } + .col-md-pull-3 { right: percentage((3 / @grid-columns)); } + .col-md-pull-4 { right: percentage((4 / @grid-columns)); } + .col-md-pull-5 { right: percentage((5 / @grid-columns)); } + .col-md-pull-6 { right: percentage((6 / @grid-columns)); } + .col-md-pull-7 { right: percentage((7 / @grid-columns)); } + .col-md-pull-8 { right: percentage((8 / @grid-columns)); } + .col-md-pull-9 { right: percentage((9 / @grid-columns)); } + .col-md-pull-10 { right: percentage((10/ @grid-columns)); } + .col-md-pull-11 { right: percentage((11/ @grid-columns)); } + + // Offsets + .col-md-offset-0 { margin-left: 0; } + .col-md-offset-1 { margin-left: percentage((1 / @grid-columns)); } + .col-md-offset-2 { margin-left: percentage((2 / @grid-columns)); } + .col-md-offset-3 { margin-left: percentage((3 / @grid-columns)); } + .col-md-offset-4 { margin-left: percentage((4 / @grid-columns)); } + .col-md-offset-5 { margin-left: percentage((5 / @grid-columns)); } + .col-md-offset-6 { margin-left: percentage((6 / @grid-columns)); } + .col-md-offset-7 { margin-left: percentage((7 / @grid-columns)); } + .col-md-offset-8 { margin-left: percentage((8 / @grid-columns)); } + .col-md-offset-9 { margin-left: percentage((9 / @grid-columns)); } + .col-md-offset-10 { margin-left: percentage((10/ @grid-columns)); } + .col-md-offset-11 { margin-left: percentage((11/ @grid-columns)); } +} + + +// Large grid +// +// Columns, offsets, pushes, and pulls for the large desktop device range. +// +// Note that `.col-lg-12` doesn't get floated on purpose—there's no need since +// it's full-width. + +@media (min-width: @screen-lg-desktop) { + .container { + max-width: @container-lg-desktop; + } + + .col-lg-1, + .col-lg-2, + .col-lg-3, + .col-lg-4, + .col-lg-5, + .col-lg-6, + .col-lg-7, + .col-lg-8, + .col-lg-9, + .col-lg-10, + .col-lg-11 { + float: left; + } + .col-lg-1 { width: percentage((1 / @grid-columns)); } + .col-lg-2 { width: percentage((2 / @grid-columns)); } + .col-lg-3 { width: percentage((3 / @grid-columns)); } + .col-lg-4 { width: percentage((4 / @grid-columns)); } + .col-lg-5 { width: percentage((5 / @grid-columns)); } + .col-lg-6 { width: percentage((6 / @grid-columns)); } + .col-lg-7 { width: percentage((7 / @grid-columns)); } + .col-lg-8 { width: percentage((8 / @grid-columns)); } + .col-lg-9 { width: percentage((9 / @grid-columns)); } + .col-lg-10 { width: percentage((10/ @grid-columns)); } + .col-lg-11 { width: percentage((11/ @grid-columns)); } + .col-lg-12 { width: 100%; } + + // Push and pull columns for source order changes + .col-lg-push-0 { left: auto; } + .col-lg-push-1 { left: percentage((1 / @grid-columns)); } + .col-lg-push-2 { left: percentage((2 / @grid-columns)); } + .col-lg-push-3 { left: percentage((3 / @grid-columns)); } + .col-lg-push-4 { left: percentage((4 / @grid-columns)); } + .col-lg-push-5 { left: percentage((5 / @grid-columns)); } + .col-lg-push-6 { left: percentage((6 / @grid-columns)); } + .col-lg-push-7 { left: percentage((7 / @grid-columns)); } + .col-lg-push-8 { left: percentage((8 / @grid-columns)); } + .col-lg-push-9 { left: percentage((9 / @grid-columns)); } + .col-lg-push-10 { left: percentage((10/ @grid-columns)); } + .col-lg-push-11 { left: percentage((11/ @grid-columns)); } + + .col-lg-pull-0 { right: auto; } + .col-lg-pull-1 { right: percentage((1 / @grid-columns)); } + .col-lg-pull-2 { right: percentage((2 / @grid-columns)); } + .col-lg-pull-3 { right: percentage((3 / @grid-columns)); } + .col-lg-pull-4 { right: percentage((4 / @grid-columns)); } + .col-lg-pull-5 { right: percentage((5 / @grid-columns)); } + .col-lg-pull-6 { right: percentage((6 / @grid-columns)); } + .col-lg-pull-7 { right: percentage((7 / @grid-columns)); } + .col-lg-pull-8 { right: percentage((8 / @grid-columns)); } + .col-lg-pull-9 { right: percentage((9 / @grid-columns)); } + .col-lg-pull-10 { right: percentage((10/ @grid-columns)); } + .col-lg-pull-11 { right: percentage((11/ @grid-columns)); } + + // Offsets + .col-lg-offset-0 { margin-left: 0; } + .col-lg-offset-1 { margin-left: percentage((1 / @grid-columns)); } + .col-lg-offset-2 { margin-left: percentage((2 / @grid-columns)); } + .col-lg-offset-3 { margin-left: percentage((3 / @grid-columns)); } + .col-lg-offset-4 { margin-left: percentage((4 / @grid-columns)); } + .col-lg-offset-5 { margin-left: percentage((5 / @grid-columns)); } + .col-lg-offset-6 { margin-left: percentage((6 / @grid-columns)); } + .col-lg-offset-7 { margin-left: percentage((7 / @grid-columns)); } + .col-lg-offset-8 { margin-left: percentage((8 / @grid-columns)); } + .col-lg-offset-9 { margin-left: percentage((9 / @grid-columns)); } + .col-lg-offset-10 { margin-left: percentage((10/ @grid-columns)); } + .col-lg-offset-11 { margin-left: percentage((11/ @grid-columns)); } +} diff --git a/themes/bootstrap-light/less/input-groups.less b/themes/bootstrap-light/less/input-groups.less new file mode 100644 index 0000000..570f03f --- /dev/null +++ b/themes/bootstrap-light/less/input-groups.less @@ -0,0 +1,127 @@ +// +// Input groups +// -------------------------------------------------- + +// Base styles +// ------------------------- +.input-group { + position: relative; // For dropdowns + display: table; + border-collapse: separate; // prevent input groups from inheriting border styles from table cells when placed within a table + + // Undo padding and float of grid classes + &.col { + float: none; + padding-left: 0; + padding-right: 0; + } + + .form-control { + width: 100%; + margin-bottom: 0; + } +} + +// Sizing options +// +// Remix the default form control sizing classes into new ones for easier +// manipulation. + +.input-group-lg > .form-control, +.input-group-lg > .input-group-addon, +.input-group-lg > .input-group-btn > .btn { .input-lg(); } +.input-group-sm > .form-control, +.input-group-sm > .input-group-addon, +.input-group-sm > .input-group-btn > .btn { .input-sm(); } + + +// Display as table-cell +// ------------------------- +.input-group-addon, +.input-group-btn, +.input-group .form-control { + display: table-cell; + + &:not(:first-child):not(:last-child) { + border-radius: 0; + } +} +// Addon and addon wrapper for buttons +.input-group-addon, +.input-group-btn { + width: 1%; + white-space: nowrap; + vertical-align: middle; // Match the inputs +} + +// Text input groups +// ------------------------- +.input-group-addon { + padding: @padding-base-vertical @padding-base-horizontal; + font-size: @font-size-base; + font-weight: normal; + line-height: 1; + text-align: center; + background-color: @input-group-addon-bg; + border: 1px solid @input-group-addon-border-color; + border-radius: @border-radius-base; + + // Sizing + &.input-sm { + padding: @padding-small-vertical @padding-small-horizontal; + font-size: @font-size-small; + border-radius: @border-radius-small; + } + &.input-lg { + padding: @padding-large-vertical @padding-large-horizontal; + font-size: @font-size-large; + border-radius: @border-radius-large; + } + + // Nuke default margins from checkboxes and radios to vertically center within. + input[type="radio"], + input[type="checkbox"] { + margin-top: 0; + } +} + +// Reset rounded corners +.input-group .form-control:first-child, +.input-group-addon:first-child, +.input-group-btn:first-child > .btn, +.input-group-btn:first-child > .dropdown-toggle, +.input-group-btn:last-child > .btn:not(:last-child):not(.dropdown-toggle) { + .border-right-radius(0); +} +.input-group-addon:first-child { + border-right: 0; +} +.input-group .form-control:last-child, +.input-group-addon:last-child, +.input-group-btn:last-child > .btn, +.input-group-btn:last-child > .dropdown-toggle, +.input-group-btn:first-child > .btn:not(:first-child) { + .border-left-radius(0); +} +.input-group-addon:last-child { + border-left: 0; +} + +// Button input groups +// ------------------------- +.input-group-btn { + position: relative; + white-space: nowrap; +} +.input-group-btn > .btn { + position: relative; + // Jankily prevent input button groups from wrapping + + .btn { + margin-left: -4px; + } + // Bring the "active" button to the front + &:hover, + &:active { + z-index: 2; + } +} diff --git a/themes/bootstrap-light/less/miniflux-base.less b/themes/bootstrap-light/less/miniflux-base.less new file mode 100644 index 0000000..c27c87d --- /dev/null +++ b/themes/bootstrap-light/less/miniflux-base.less @@ -0,0 +1,358 @@ +// Bootstrap 3 theme integration for miniflux +// -------------------------------------- + +// Form +.btn { + &:extend(.btn all, .btn-primary all); +} +.btn-blue { + &:extend(.btn all, .btn-info all); +} + +input[type="text"], +input[type="password"], +select { + &:extend(.form-control all); +} + +// Alerts +.alert { + &:extend(.alert all); +} +.alert-normal { + &:extend(.alert-success all); +} +.alert-info { + &:extend(.alert-info all); +} +.alert-error { + &:extend(.alert-danger all); +} + +// Icons +header > nav > ul a:before { + font-family:'Glyphicons Halflings'; + margin-right: 5px; +} +header > nav > ul li:nth-child(1) a:before {content:"\e043";} // Unread +header > nav > ul li:nth-child(2) a:before {content:"\1f516";} // Bookmarks +header > nav > ul li:nth-child(3) a:before {content:"\e023";} // History +header > nav > ul li:nth-child(4) a:before {content:"\e012";} // Subscriptions +header > nav > ul li:nth-child(5) a:before {content:"\1f527";} // Préférences +header > nav > ul li:nth-child(6) a:before {content:"\e017";} // Logout + +// Logo +.logo { + min-width: 100px; + min-height: 45px; + font-size: 18px; + transition: all 0.4s; + display: block; + text-align: center; +} +.logo:hover, .logo:focus { + text-decoration: none; + outline: medium none; + transition: all 0.4s +} +.logo span , +.logo:hover span { + transition: all 0.4s +} + +// Container +// -------------------------------------- +body { + .container-fixed(); +} + +// Menu +// -------------------------------------- +body > header { + position: fixed; + top: 10px; left: 10px; + + > nav > ul { + &:extend(.nav all, .nav-pills all, .nav-stacked all); + + li { + a { + min-width: 120px; + text-transform: capitalize; + } + } + + li.hide-mobile { + display: block !important; + } + } +} + + +// Page +// -------------------------------------- +.page { + .clearfix(); + padding-left: 150px ; + padding-top: 10px ; +} + +// Page header +// -------------------------------------- +.page-header { + .make-row(); + margin-top: 0; +} + +.page-header h2 { + .make-sm-column(7); + margin-top: 0; +} + +.page-header ul { + .make-sm-column(5); + &:extend(.nav all, .nav-pills all, .nav-justified all); + > li > a > span.hide-mobile { + display: inline-block !important; + margin-left: 5px; + font-size: 12px; + } +} + + +// Page footer +// -------------------------------------- +#bottom-menu, +#items-paging { + float: right; +} +#bottom-menu a, +#items-paging a { + &:extend(.btn all, .btn-primary all); + margin: 10px; +} + +// item pagination +.item nav { + &:extend(.pager all); + margin-bottom: 0; +} + +.item nav > span { + border-radius: 15px; + display: inline-block; + padding: 5px 14px; + border-radius: 4px; +} + +.item nav .nav-left { + float: left; +} +.item nav .nav-right { + float: right; +} + +// Top pagination +.item nav.top { + margin: 30px 0 10px 0; +} + + +// Articles +// -------------------------------------- +.item h2 {font-size:18px} +.item h3 {font-size:16px} +.item h4 {font-size:15px} +.item h5 {font-size:14px} +.item h6 {font-size:12px} +.item blockquote p {font-size: 15px;} + +article img { + max-width: 100%; +} + +.items { + .clearfix(); +} + +article.item, +.items article { + .clearfix(); + &:extend(.panel all, .panel-default all); + position: relative; + padding: 10px; +} + +article.item h1, +.items article h2 { + margin-top: 0; + padding-top: 20px; + font-size: 18px; +} + +.items article .preview { + margin-bottom: 0; + text-align: justify; +} + +// Actions links +article ul.item-infos, +article ul.item-menu { + .clearfix(); + list-style: none; + margin: 0; padding: 0; + position: absolute; + top: 5px; right: 10px; + > li { + display: block; + float: left; + a { + &:extend(.btn all, .btn-primary all, .btn-xs all); + margin-left: 5px; + } + > span { + margin-left: 5px; + } + } +} + +.downloading { + &:extend(.text-muted all); +} + +// Subscriptions +// -------------------------------------- +.feed-last-checked { + font-size: 14px; + &:extend(.text-muted all); +} + +// Preferences +// -------------------------------------- +section form input, +section form select {max-width: 300px;} +section form .form-actions input { + &:extend(.btn-block all); +} + +section .alert ul { + list-style: square; +} + +// Login +// -------------------------------------- +#login-page .page { + margin: 0 auto; + max-width: 330px; + padding: 15px; +} +#form-username, +#form-password { + &:extend(.form-control all); +} +#login-page .btn { + margin-top: 15px; + &:extend(.btn-block all); +} + +// Help +// -------------------------------------- +#help-page .page { + padding-left: 0; +} + +// Responsive +// -------------------------------------- +.hide-mobile { + .visible-lg(); +} +.hide-desktop { + .visible-xs(); +} + + +@media (max-width: @screen-sm) { + //.logo + body > header > nav > ul { + li { + &.hide-desktop {display: none !important;} + &.hide-mobile {display: block !important;} + a { + max-width: 45px; + min-width: 0; + width: 45px; + display: block; + overflow: hidden; + white-space:nowrap; + } + } + } + + .logo {display: none;} + + header > nav > ul a:before { + margin-right: 9999px; + } + + .page { + padding-left: 55px ; + } + + .page-header h2 { + font-size: 18px; + text-align: center; + } + + article.item h1, + .items article h2 { + margin-top: 0; + padding-top: 0px; + font-size: 18px; + } + + + article ul.item-menu { + position: static; + margin-top: 10px; + > li { + display: block; + float: none; + + > span, + > a { + margin: 0 0 5px 0; + display: block; + font-size: 15px; + min-height: 40px; + line-height: 35px; + } + > span { + + } + } + } + + // pagination + .item nav > span, + .item nav > span a { + display: block; + } + .item nav .nav-left, + .item nav .nav-middle, + .item nav .nav-right { + float: none; + margin-top: 3px; + } + + #items-paging, + #bottom-menu { + float: none; + max-height: 20px; + } + #bottom-menu a, + #items-paging a { + display: block; + margin: 5px 0; + } + +} diff --git a/themes/bootstrap-light/less/miniflux-theme.less b/themes/bootstrap-light/less/miniflux-theme.less new file mode 100644 index 0000000..96534a0 --- /dev/null +++ b/themes/bootstrap-light/less/miniflux-theme.less @@ -0,0 +1,38 @@ +// Colors and specificities for the theme +// --------------------------------------------- + +// Logo +.logo { + color: @gray-dark; +} + +.logo:hover, .logo:focus { + color: @brand-primary; +} + +.logo span { + color: @brand-primary; +} + +.logo:hover span { + color: @gray-dark; +} + +// Article +article.item, +.items article { + background: @gray-lighter; +} + +#current-item { + border-color: @brand-primary; +} + +.item nav > span { + background: @btn-primary-bg; + border: 1px solid @btn-primary-border; +} + +.item nav > span a { + color: @btn-success-color; +} diff --git a/themes/bootstrap-light/less/mixins.less b/themes/bootstrap-light/less/mixins.less new file mode 100644 index 0000000..3f23020 --- /dev/null +++ b/themes/bootstrap-light/less/mixins.less @@ -0,0 +1,723 @@ +// +// Mixins +// -------------------------------------------------- + + +// Utilities +// ------------------------- + +// Clearfix +// Source: http://nicolasgallagher.com/micro-clearfix-hack/ +// +// For modern browsers +// 1. The space content is one way to avoid an Opera bug when the +// contenteditable attribute is included anywhere else in the document. +// Otherwise it causes space to appear at the top and bottom of elements +// that are clearfixed. +// 2. The use of `table` rather than `block` is only necessary if using +// `:before` to contain the top-margins of child elements. +.clearfix() { + &:before, + &:after { + content: " "; /* 1 */ + display: table; /* 2 */ + } + &:after { + clear: both; + } +} + +// Webkit-style focus +.tab-focus() { + // Default + outline: thin dotted #333; + // Webkit + outline: 5px auto -webkit-focus-ring-color; + outline-offset: -2px; +} + +// Center-align a block level element +.center-block() { + display: block; + margin-left: auto; + margin-right: auto; +} + +// Sizing shortcuts +.size(@width; @height) { + width: @width; + height: @height; +} +.square(@size) { + .size(@size; @size); +} + +// Placeholder text +.placeholder(@color: @input-color-placeholder) { + &:-moz-placeholder { color: @color; } // Firefox 4-18 + &::-moz-placeholder { color: @color; } // Firefox 19+ + &:-ms-input-placeholder { color: @color; } // Internet Explorer 10+ + &::-webkit-input-placeholder { color: @color; } // Safari and Chrome +} + +// Text overflow +// Requires inline-block or block for proper styling +.text-overflow() { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +// CSS image replacement +// Source: https://github.com/h5bp/html5-boilerplate/commit/aa0396eae757 +.hide-text() { + font: ~"0/0" a; + color: transparent; + text-shadow: none; + background-color: transparent; + border: 0; +} + + + +// CSS3 PROPERTIES +// -------------------------------------------------- + +// Single side border-radius +.border-top-radius(@radius) { + border-top-right-radius: @radius; + border-top-left-radius: @radius; +} +.border-right-radius(@radius) { + border-bottom-right-radius: @radius; + border-top-right-radius: @radius; +} +.border-bottom-radius(@radius) { + border-bottom-right-radius: @radius; + border-bottom-left-radius: @radius; +} +.border-left-radius(@radius) { + border-bottom-left-radius: @radius; + border-top-left-radius: @radius; +} + +// Drop shadows +.box-shadow(@shadow) { + -webkit-box-shadow: @shadow; // iOS <4.3 & Android <4.1 + box-shadow: @shadow; +} + +// Transitions +.transition(@transition) { + -webkit-transition: @transition; + transition: @transition; +} +.transition-delay(@transition-delay) { + -webkit-transition-delay: @transition-delay; + transition-delay: @transition-delay; +} +.transition-duration(@transition-duration) { + -webkit-transition-duration: @transition-duration; + transition-duration: @transition-duration; +} +.transition-transform(@transition) { + -webkit-transition: -webkit-transform @transition; + -moz-transition: -moz-transform @transition; + -o-transition: -o-transform @transition; + transition: transform @transition; +} + +// Transformations +.rotate(@degrees) { + -webkit-transform: rotate(@degrees); + -ms-transform: rotate(@degrees); // IE9+ + transform: rotate(@degrees); +} +.scale(@ratio) { + -webkit-transform: scale(@ratio); + -ms-transform: scale(@ratio); // IE9+ + transform: scale(@ratio); +} +.translate(@x; @y) { + -webkit-transform: translate(@x, @y); + -ms-transform: translate(@x, @y); // IE9+ + transform: translate(@x, @y); +} +.skew(@x; @y) { + -webkit-transform: skew(@x, @y); + -ms-transform: skewX(@x) skewY(@y); // See https://github.com/twbs/bootstrap/issues/4885; IE9+ + transform: skew(@x, @y); +} +.translate3d(@x; @y; @z) { + -webkit-transform: translate3d(@x, @y, @z); + transform: translate3d(@x, @y, @z); +} + +// Backface visibility +// Prevent browsers from flickering when using CSS 3D transforms. +// Default value is `visible`, but can be changed to `hidden` +// See git pull https://github.com/dannykeane/bootstrap.git backface-visibility for examples +.backface-visibility(@visibility){ + -webkit-backface-visibility: @visibility; + -moz-backface-visibility: @visibility; + backface-visibility: @visibility; +} + +// Box sizing +.box-sizing(@boxmodel) { + -webkit-box-sizing: @boxmodel; + -moz-box-sizing: @boxmodel; + box-sizing: @boxmodel; +} + +// User select +// For selecting text on the page +.user-select(@select) { + -webkit-user-select: @select; + -moz-user-select: @select; + -ms-user-select: @select; // IE10+ + -o-user-select: @select; + user-select: @select; +} + +// Resize anything +.resizable(@direction) { + resize: @direction; // Options: horizontal, vertical, both + overflow: auto; // Safari fix +} + +// CSS3 Content Columns +.content-columns(@column-count; @column-gap: @grid-gutter-width) { + -webkit-column-count: @column-count; + -moz-column-count: @column-count; + column-count: @column-count; + -webkit-column-gap: @column-gap; + -moz-column-gap: @column-gap; + column-gap: @column-gap; +} + +// Optional hyphenation +.hyphens(@mode: auto) { + word-wrap: break-word; + -webkit-hyphens: @mode; + -moz-hyphens: @mode; + -ms-hyphens: @mode; // IE10+ + -o-hyphens: @mode; + hyphens: @mode; +} + +// Opacity +.opacity(@opacity) { + opacity: @opacity; + // IE8 filter + @opacity-ie: (@opacity * 100); + filter: ~"alpha(opacity=@{opacity-ie})"; +} + + + +// GRADIENTS +// -------------------------------------------------- + +#gradient { + + // Horizontal gradient, from left to right + // + // Creates two color stops, start and end, by specifying a color and position for each color stop. + // Color stops are not available in IE9 and below. + .horizontal(@start-color: #555; @end-color: #333; @start-percent: 0%; @end-percent: 100%) { + background-image: -webkit-gradient(linear, @start-percent top, @end-percent top, from(@start-color), to(@end-color)); // Safari 4+, Chrome 2+ + background-image: -webkit-linear-gradient(left, color-stop(@start-color @start-percent), color-stop(@end-color @end-percent)); // Safari 5.1+, Chrome 10+ + background-image: -moz-linear-gradient(left, @start-color @start-percent, @end-color @end-percent); // FF 3.6+ + background-image: linear-gradient(to right, @start-color @start-percent, @end-color @end-percent); // Standard, IE10 + background-repeat: repeat-x; + filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",argb(@start-color),argb(@end-color))); // IE9 and down + } + + // Vertical gradient, from top to bottom + // + // Creates two color stops, start and end, by specifying a color and position for each color stop. + // Color stops are not available in IE9 and below. + .vertical(@start-color: #555; @end-color: #333; @start-percent: 0%; @end-percent: 100%) { + background-image: -webkit-gradient(linear, left @start-percent, left @end-percent, from(@start-color), to(@end-color)); // Safari 4+, Chrome 2+ + background-image: -webkit-linear-gradient(top, @start-color, @start-percent, @end-color, @end-percent); // Safari 5.1+, Chrome 10+ + background-image: -moz-linear-gradient(top, @start-color @start-percent, @end-color @end-percent); // FF 3.6+ + background-image: linear-gradient(to bottom, @start-color @start-percent, @end-color @end-percent); // Standard, IE10 + background-repeat: repeat-x; + filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(@start-color),argb(@end-color))); // IE9 and down + } + + .directional(@start-color: #555; @end-color: #333; @deg: 45deg) { + background-repeat: repeat-x; + background-image: -webkit-linear-gradient(@deg, @start-color, @end-color); // Safari 5.1+, Chrome 10+ + background-image: -moz-linear-gradient(@deg, @start-color, @end-color); // FF 3.6+ + background-image: linear-gradient(@deg, @start-color, @end-color); // Standard, IE10 + } + .horizontal-three-colors(@start-color: #00b3ee; @mid-color: #7a43b6; @color-stop: 50%; @end-color: #c3325f) { + background-image: -webkit-gradient(left, linear, 0 0, 0 100%, from(@start-color), color-stop(@color-stop, @mid-color), to(@end-color)); + background-image: -webkit-linear-gradient(left, @start-color, @mid-color @color-stop, @end-color); + background-image: -moz-linear-gradient(left, @start-color, @mid-color @color-stop, @end-color); + background-image: linear-gradient(to right, @start-color, @mid-color @color-stop, @end-color); + background-repeat: no-repeat; + filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",argb(@start-color),argb(@end-color))); // IE9 and down, gets no color-stop at all for proper fallback + } + .vertical-three-colors(@start-color: #00b3ee; @mid-color: #7a43b6; @color-stop: 50%; @end-color: #c3325f) { + background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@start-color), color-stop(@color-stop, @mid-color), to(@end-color)); + background-image: -webkit-linear-gradient(@start-color, @mid-color @color-stop, @end-color); + background-image: -moz-linear-gradient(top, @start-color, @mid-color @color-stop, @end-color); + background-image: linear-gradient(@start-color, @mid-color @color-stop, @end-color); + background-repeat: no-repeat; + filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(@start-color),argb(@end-color))); // IE9 and down, gets no color-stop at all for proper fallback + } + .radial(@inner-color: #555; @outer-color: #333) { + background-image: -webkit-gradient(radial, center center, 0, center center, 460, from(@inner-color), to(@outer-color)); + background-image: -webkit-radial-gradient(circle, @inner-color, @outer-color); + background-image: -moz-radial-gradient(circle, @inner-color, @outer-color); + background-image: radial-gradient(circle, @inner-color, @outer-color); + background-repeat: no-repeat; + } + .striped(@color: #555; @angle: 45deg) { + background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, rgba(255,255,255,.15)), color-stop(.25, transparent), color-stop(.5, transparent), color-stop(.5, rgba(255,255,255,.15)), color-stop(.75, rgba(255,255,255,.15)), color-stop(.75, transparent), to(transparent)); + background-image: -webkit-linear-gradient(@angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent); + background-image: -moz-linear-gradient(@angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent); + background-image: linear-gradient(@angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent); + } +} + +// Reset filters for IE +// +// When you need to remove a gradient background, do not forget to use this to reset +// the IE filter for IE9 and below. +.reset-filter() { + filter: e(%("progid:DXImageTransform.Microsoft.gradient(enabled = false)")); +} + + + +// Retina images +// +// Short retina mixin for setting background-image and -size + +.img-retina(@file-1x; @file-2x; @width-1x; @height-1x) { + background-image: url("@{file-1x}"); + + @media + only screen and (-webkit-min-device-pixel-ratio: 2), + only screen and ( min--moz-device-pixel-ratio: 2), + only screen and ( -o-min-device-pixel-ratio: 2/1), + only screen and ( min-device-pixel-ratio: 2), + only screen and ( min-resolution: 192dpi), + only screen and ( min-resolution: 2dppx) { + background-image: url("@{file-2x}"); + background-size: @width-1x @height-1x; + } +} + + +// Responsive image +// +// Keep images from scaling beyond the width of their parents. + +.img-responsive(@display: block;) { + display: @display; + max-width: 100%; // Part 1: Set a maximum relative to the parent + height: auto; // Part 2: Scale the height according to the width, otherwise you get stretching +} + + +// COMPONENT MIXINS +// -------------------------------------------------- + +// Horizontal dividers +// ------------------------- +// Dividers (basically an hr) within dropdowns and nav lists +.nav-divider(@color: #e5e5e5) { + height: 1px; + margin: ((@line-height-computed / 2) - 1) 0; + overflow: hidden; + background-color: @color; +} + +// Panels +// ------------------------- +.panel-variant(@border; @heading-text-color; @heading-bg-color; @heading-border;) { + border-color: @border; + & > .panel-heading { + color: @heading-text-color; + background-color: @heading-bg-color; + border-color: @heading-border; + + .panel-collapse .panel-body { + border-top-color: @border; + } + } + & > .panel-footer { + + .panel-collapse .panel-body { + border-bottom-color: @border; + } + } +} + +// Alerts +// ------------------------- +.alert-variant(@background; @border; @text-color) { + background-color: @background; + border-color: @border; + color: @text-color; + hr { + border-top-color: darken(@border, 5%); + } + .alert-link { + color: darken(@text-color, 10%); + } +} + +// Tables +// ------------------------- +.table-row-variant(@state; @background; @border) { + // Exact selectors below required to override `.table-striped` and prevent + // inheritance to nested tables. + .table > thead > tr, + .table > tbody > tr, + .table > tfoot > tr { + > td.@{state}, + > th.@{state}, + &.@{state} > td, + &.@{state} > th { + background-color: @background; + border-color: @border; + } + } + + // Hover states for `.table-hover` + // Note: this is not available for cells or rows within `thead` or `tfoot`. + .table-hover > tbody > tr { + > td.@{state}:hover, + > th.@{state}:hover, + &.@{state}:hover > td { + background-color: darken(@background, 5%); + border-color: darken(@border, 5%); + } + } +} + +// Button variants +// ------------------------- +// Easily pump out default styles, as well as :hover, :focus, :active, +// and disabled options for all buttons +.button-variant(@color; @background; @border) { + color: @color; + background-color: @background; + border-color: @border; + + &:hover, + &:focus, + &:active, + &.active, + .open .dropdown-toggle& { + color: @color; + background-color: darken(@background, 8%); + border-color: darken(@border, 12%); + } + &:active, + &.active, + .open .dropdown-toggle& { + background-image: none; + } + &.disabled, + &[disabled], + fieldset[disabled] & { + &, + &:hover, + &:focus, + &:active, + &.active { + background-color: @background; + border-color: @border + } + } +} + +// Button sizes +// ------------------------- +.button-size(@padding-vertical; @padding-horizontal; @font-size; @line-height; @border-radius) { + padding: @padding-vertical @padding-horizontal; + font-size: @font-size; + line-height: @line-height; + border-radius: @border-radius; +} + +// Pagination +// ------------------------- +.pagination-size(@padding-vertical; @padding-horizontal; @font-size; @border-radius) { + > li { + > a, + > span { + padding: @padding-vertical @padding-horizontal; + font-size: @font-size; + } + &:first-child { + > a, + > span { + .border-left-radius(@border-radius); + } + } + &:last-child { + > a, + > span { + .border-right-radius(@border-radius); + } + } + } +} + +// Labels +// ------------------------- +.label-variant(@color) { + background-color: @color; + &[href] { + &:hover, + &:focus { + background-color: darken(@color, 10%); + } + } +} + +// Navbar vertical align +// ------------------------- +// Vertically center elements in the navbar. +// Example: an element has a height of 30px, so write out `.navbar-vertical-align(30px);` to calculate the appropriate top margin. +.navbar-vertical-align(@element-height) { + margin-top: ((@navbar-height - @element-height) / 2); + margin-bottom: ((@navbar-height - @element-height) / 2); +} + +// Progress bars +// ------------------------- +.progress-bar-variant(@color) { + background-color: @color; + .progress-striped & { + #gradient > .striped(@color); + } +} + +// Responsive utilities +// ------------------------- +// More easily include all the states for responsive-utilities.less. +.responsive-visibility() { + display: block !important; + tr& { display: table-row !important; } + th&, + td& { display: table-cell !important; } +} + +.responsive-invisibility() { + display: none !important; + tr& { display: none !important; } + th&, + td& { display: none !important; } +} + +// Grid System +// ----------- + +// Centered container element +.container-fixed() { + margin-right: auto; + margin-left: auto; + padding-left: (@grid-gutter-width / 2); + padding-right: (@grid-gutter-width / 2); + .clearfix(); +} + +// Creates a wrapper for a series of columns +.make-row(@gutter: @grid-gutter-width) { + margin-left: (@gutter / -2); + margin-right: (@gutter / -2); + .clearfix(); +} + +// Generate the extra small columns +.make-xs-column(@columns; @gutter: @grid-gutter-width) { + position: relative; + float: left; + width: percentage((@columns / @grid-columns)); + // Prevent columns from collapsing when empty + min-height: 1px; + // Inner gutter via padding + padding-left: (@gutter / 2); + padding-right: (@gutter / 2); +} + +// Generate the small columns +.make-sm-column(@columns; @gutter: @grid-gutter-width) { + position: relative; + // Prevent columns from collapsing when empty + min-height: 1px; + // Inner gutter via padding + padding-left: (@gutter / 2); + padding-right: (@gutter / 2); + + // Calculate width based on number of columns available + @media (min-width: @screen-sm) { + float: left; + width: percentage((@columns / @grid-columns)); + } +} + +// Generate the small column offsets +.make-sm-column-offset(@columns) { + @media (min-width: @screen-sm) { + margin-left: percentage((@columns / @grid-columns)); + } +} +.make-sm-column-push(@columns) { + @media (min-width: @screen-sm) { + left: percentage((@columns / @grid-columns)); + } +} +.make-sm-column-pull(@columns) { + @media (min-width: @screen-sm) { + right: percentage((@columns / @grid-columns)); + } +} + +// Generate the medium columns +.make-md-column(@columns; @gutter: @grid-gutter-width) { + position: relative; + // Prevent columns from collapsing when empty + min-height: 1px; + // Inner gutter via padding + padding-left: (@gutter / 2); + padding-right: (@gutter / 2); + + // Calculate width based on number of columns available + @media (min-width: @screen-md) { + float: left; + width: percentage((@columns / @grid-columns)); + } +} + +// Generate the large column offsets +.make-md-column-offset(@columns) { + @media (min-width: @screen-md) { + margin-left: percentage((@columns / @grid-columns)); + } +} +.make-md-column-push(@columns) { + @media (min-width: @screen-md) { + left: percentage((@columns / @grid-columns)); + } +} +.make-md-column-pull(@columns) { + @media (min-width: @screen-md) { + right: percentage((@columns / @grid-columns)); + } +} + +// Generate the large columns +.make-lg-column(@columns; @gutter: @grid-gutter-width) { + position: relative; + // Prevent columns from collapsing when empty + min-height: 1px; + // Inner gutter via padding + padding-left: (@gutter / 2); + padding-right: (@gutter / 2); + + // Calculate width based on number of columns available + @media (min-width: @screen-lg) { + float: left; + width: percentage((@columns / @grid-columns)); + } +} + +// Generate the large column offsets +.make-lg-column-offset(@columns) { + @media (min-width: @screen-lg) { + margin-left: percentage((@columns / @grid-columns)); + } +} +.make-lg-column-push(@columns) { + @media (min-width: @screen-lg) { + left: percentage((@columns / @grid-columns)); + } +} +.make-lg-column-pull(@columns) { + @media (min-width: @screen-lg) { + right: percentage((@columns / @grid-columns)); + } +} + + +// Form validation states +// +// Used in forms.less to generate the form validation CSS for warnings, errors, +// and successes. + +.form-control-validation(@text-color: #555; @border-color: #ccc; @background-color: #f5f5f5) { + // Color the label and help text + .help-block, + .control-label { + color: @text-color; + } + // Set the border and box shadow on specific inputs to match + .form-control { + border-color: @border-color; + .box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); // Redeclare so transitions work + &:focus { + border-color: darken(@border-color, 10%); + @shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px lighten(@border-color, 20%); + .box-shadow(@shadow); + } + } + // Set validation states also for addons + .input-group-addon { + color: @text-color; + border-color: @border-color; + background-color: @background-color; + } +} + +// Form control focus state +// +// Generate a customized focus state and for any input with the specified color, +// which defaults to the `@input-focus-border` variable. +// +// We highly encourage you to not customize the default value, but instead use +// this to tweak colors on an as-needed basis. This aesthetic change is based on +// WebKit's default styles, but applicable to a wider range of browsers. Its +// usability and accessibility should be taken into account with any change. +// +// Example usage: change the default blue border and shadow to white for better +// contrast against a dark gray background. + +.form-control-focus(@color: @input-border-focus) { + @color-rgba: rgba(red(@color), green(@color), blue(@color), .6); + &:focus { + border-color: @color; + outline: 0; + .box-shadow(~"inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px @{color-rgba}"); + } +} + +// Form control sizing +// +// Relative text size, padding, and border-radii changes for form controls. For +// horizontal sizing, wrap controls in the predefined grid classes. `` +// element gets special love because it's special, and that's a fact! + +.input-size(@input-height; @padding-vertical; @padding-horizontal; @font-size; @line-height; @border-radius) { + height: @input-height; + padding: @padding-vertical @padding-horizontal; + font-size: @font-size; + line-height: @line-height; + border-radius: @border-radius; + + select& { + height: @input-height; + line-height: @input-height; + } + + textarea& { + height: auto; + } +} diff --git a/themes/bootswatch-cyborg/less/navs.less b/themes/bootswatch-cyborg/less/navs.less new file mode 100644 index 0000000..6002a8c --- /dev/null +++ b/themes/bootswatch-cyborg/less/navs.less @@ -0,0 +1,229 @@ +// +// Navs +// -------------------------------------------------- + + +// Base class +// -------------------------------------------------- + +.nav { + margin-bottom: 0; + padding-left: 0; // Override default ul/ol + list-style: none; + .clearfix(); + + > li { + position: relative; + display: block; + + > a { + position: relative; + display: block; + padding: @nav-link-padding; + &:hover, + &:focus { + text-decoration: none; + background-color: @nav-link-hover-bg; + } + } + + // Disabled state sets text to gray and nukes hover/tab effects + &.disabled > a { + color: @nav-disabled-link-color; + + &:hover, + &:focus { + color: @nav-disabled-link-hover-color; + text-decoration: none; + background-color: transparent; + cursor: not-allowed; + } + } + } + + // Open dropdowns + .open > a { + &, + &:hover, + &:focus { + background-color: @nav-link-hover-bg; + border-color: @link-color; + } + } + + // Dividers (basically an hr) within the dropdown + .nav-divider { + .nav-divider(); + } + + // Prevent IE8 from misplacing imgs + // See https://github.com/h5bp/html5-boilerplate/issues/984#issuecomment-3985989 + > li > a > img { + max-width: none; + } +} + + +// Tabs +// ------------------------- + +// Give the tabs something to sit on +.nav-tabs { + border-bottom: 1px solid @nav-tabs-border-color; + > li { + float: left; + // Make the list-items overlay the bottom border + margin-bottom: -1px; + + // Actual tabs (as links) + > a { + margin-right: 2px; + line-height: @line-height-base; + border: 1px solid transparent; + border-radius: @border-radius-base @border-radius-base 0 0; + &:hover { + border-color: @nav-tabs-link-hover-border-color @nav-tabs-link-hover-border-color @nav-tabs-border-color; + } + } + + // Active state, and it's :hover to override normal :hover + &.active > a { + &, + &:hover, + &:focus { + color: @nav-tabs-active-link-hover-color; + background-color: @nav-tabs-active-link-hover-bg; + border: 1px solid @nav-tabs-active-link-hover-border-color; + border-bottom-color: transparent; + cursor: default; + } + } + } + // pulling this in mainly for less shorthand + &.nav-justified { + .nav-justified(); + .nav-tabs-justified(); + } +} + + +// Pills +// ------------------------- +.nav-pills { + > li { + float: left; + + // Links rendered as pills + > a { + border-radius: 5px; + } + + li { + margin-left: 2px; + } + + // Active state + &.active > a { + &, + &:hover, + &:focus { + color: @nav-pills-active-link-hover-color; + background-color: @nav-pills-active-link-hover-bg; + } + } + } +} + + +// Stacked pills +.nav-stacked { + > li { + float: none; + + li { + margin-top: 2px; + margin-left: 0; // no need for this gap between nav items + } + } +} + + +// Nav variations +// -------------------------------------------------- + +// Justified nav links +// ------------------------- + +.nav-justified { + width: 100%; + + > li { + float: none; + > a { + text-align: center; + } + } + + @media (min-width: @screen-sm) { + > li { + display: table-cell; + width: 1%; + } + } +} + +// Move borders to anchors instead of bottom of list +.nav-tabs-justified { + border-bottom: 0; + > li > a { + border-bottom: 1px solid @nav-tabs-justified-link-border-color; + + // Override margin from .nav-tabs + margin-right: 0; + } + > .active > a { + border-bottom-color: @nav-tabs-justified-active-link-border-color; + } +} + + +// Tabbable tabs +// ------------------------- + +// Clear any floats +.tabbable { + .clearfix(); +} + +// Show/hide tabbable areas +.tab-content > .tab-pane, +.pill-content > .pill-pane { + display: none; +} +.tab-content, +.pill-content { + > .active { + display: block; + } +} + + + +// Dropdowns +// ------------------------- + +// Make dropdown carets use link color in navs +.nav .caret { + border-top-color: @link-color; + border-bottom-color: @link-color; +} +.nav a:hover .caret { + border-top-color: @link-hover-color; + border-bottom-color: @link-hover-color; +} + +// Specific dropdowns +.nav-tabs .dropdown-menu { + // make dropdown border overlap tab border + margin-top: -1px; + // Remove the top rounded corners here since there is a hard edge above the menu + .border-top-radius(0); +} diff --git a/themes/bootswatch-cyborg/less/normalize.less b/themes/bootswatch-cyborg/less/normalize.less new file mode 100644 index 0000000..a2e9c64 --- /dev/null +++ b/themes/bootswatch-cyborg/less/normalize.less @@ -0,0 +1,396 @@ +/*! normalize.css v2.1.0 | MIT License | git.io/normalize */ + +// ========================================================================== +// HTML5 display definitions +// ========================================================================== + +// +// Correct `block` display not defined in IE 8/9. +// + +article, +aside, +details, +figcaption, +figure, +footer, +header, +hgroup, +main, +nav, +section, +summary { + display: block; +} + +// +// Correct `inline-block` display not defined in IE 8/9. +// + +audio, +canvas, +video { + display: inline-block; +} + +// +// Prevent modern browsers from displaying `audio` without controls. +// Remove excess height in iOS 5 devices. +// + +audio:not([controls]) { + display: none; + height: 0; +} + +// +// Address styling not present in IE 8/9. +// + +[hidden] { + display: none; +} + +// ========================================================================== +// Base +// ========================================================================== + +// +// 1. Set default font family to sans-serif. +// 2. Prevent iOS text size adjust after orientation change, without disabling +// user zoom. +// + +html { + font-family: sans-serif; // 1 + -webkit-text-size-adjust: 100%; // 2 + -ms-text-size-adjust: 100%; // 2 +} + +// +// Remove default margin. +// + +body { + margin: 0; +} + +// ========================================================================== +// Links +// ========================================================================== + +// +// Address `outline` inconsistency between Chrome and other browsers. +// + +a:focus { + outline: thin dotted; +} + +// +// Improve readability when focused and also mouse hovered in all browsers. +// + +a:active, +a:hover { + outline: 0; +} + +// ========================================================================== +// Typography +// ========================================================================== + +// +// Address variable `h1` font-size and margin within `section` and `article` +// contexts in Firefox 4+, Safari 5, and Chrome. +// + +h1 { + font-size: 2em; + margin: 0.67em 0; +} + +// +// Address styling not present in IE 8/9, Safari 5, and Chrome. +// + +abbr[title] { + border-bottom: 1px dotted; +} + +// +// Address style set to `bolder` in Firefox 4+, Safari 5, and Chrome. +// + +b, +strong { + font-weight: bold; +} + +// +// Address styling not present in Safari 5 and Chrome. +// + +dfn { + font-style: italic; +} + +// +// Address differences between Firefox and other browsers. +// + +hr { + -moz-box-sizing: content-box; + box-sizing: content-box; + height: 0; +} + +// +// Address styling not present in IE 8/9. +// + +mark { + background: #ff0; + color: #000; +} + +// +// Correct font family set oddly in Safari 5 and Chrome. +// + +code, +kbd, +pre, +samp { + font-family: monospace, serif; + font-size: 1em; +} + +// +// Improve readability of pre-formatted text in all browsers. +// + +pre { + white-space: pre-wrap; +} + +// +// Set consistent quote types. +// + +q { + quotes: "\201C" "\201D" "\2018" "\2019"; +} + +// +// Address inconsistent and variable font size in all browsers. +// + +small { + font-size: 80%; +} + +// +// Prevent `sub` and `sup` affecting `line-height` in all browsers. +// + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sup { + top: -0.5em; +} + +sub { + bottom: -0.25em; +} + +// ========================================================================== +// Embedded content +// ========================================================================== + +// +// Remove border when inside `a` element in IE 8/9. +// + +img { + border: 0; +} + +// +// Correct overflow displayed oddly in IE 9. +// + +svg:not(:root) { + overflow: hidden; +} + +// ========================================================================== +// Figures +// ========================================================================== + +// +// Address margin not present in IE 8/9 and Safari 5. +// + +figure { + margin: 0; +} + +// ========================================================================== +// Forms +// ========================================================================== + +// +// Define consistent border, margin, and padding. +// + +fieldset { + border: 1px solid #c0c0c0; + margin: 0 2px; + padding: 0.35em 0.625em 0.75em; +} + +// +// 1. Correct `color` not being inherited in IE 8/9. +// 2. Remove padding so people aren't caught out if they zero out fieldsets. +// + +legend { + border: 0; // 1 + padding: 0; // 2 +} + +// +// 1. Correct font family not being inherited in all browsers. +// 2. Correct font size not being inherited in all browsers. +// 3. Address margins set differently in Firefox 4+, Safari 5, and Chrome. +// + +button, +input, +select, +textarea { + font-family: inherit; // 1 + font-size: 100%; // 2 + margin: 0; // 3 +} + +// +// Address Firefox 4+ setting `line-height` on `input` using `!important` in +// the UA stylesheet. +// + +button, +input { + line-height: normal; +} + +// +// Address inconsistent `text-transform` inheritance for `button` and `select`. +// All other form control elements do not inherit `text-transform` values. +// Correct `button` style inheritance in Chrome, Safari 5+, and IE 8+. +// Correct `select` style inheritance in Firefox 4+ and Opera. +// + +button, +select { + text-transform: none; +} + +// +// 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` +// and `video` controls. +// 2. Correct inability to style clickable `input` types in iOS. +// 3. Improve usability and consistency of cursor style between image-type +// `input` and others. +// + +button, +html input[type="button"], // 1 +input[type="reset"], +input[type="submit"] { + -webkit-appearance: button; // 2 + cursor: pointer; // 3 +} + +// +// Re-set default cursor for disabled elements. +// + +button[disabled], +html input[disabled] { + cursor: default; +} + +// +// 1. Address box sizing set to `content-box` in IE 8/9. +// 2. Remove excess padding in IE 8/9. +// + +input[type="checkbox"], +input[type="radio"] { + box-sizing: border-box; // 1 + padding: 0; // 2 +} + +// +// 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome. +// 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome +// (include `-moz` to future-proof). +// + +input[type="search"] { + -webkit-appearance: textfield; // 1 + -moz-box-sizing: content-box; + -webkit-box-sizing: content-box; // 2 + box-sizing: content-box; +} + +// +// Remove inner padding and search cancel button in Safari 5 and Chrome +// on OS X. +// + +input[type="search"]::-webkit-search-cancel-button, +input[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; +} + +// +// Remove inner padding and border in Firefox 4+. +// + +button::-moz-focus-inner, +input::-moz-focus-inner { + border: 0; + padding: 0; +} + +// +// 1. Remove default vertical scrollbar in IE 8/9. +// 2. Improve readability and alignment in all browsers. +// + +textarea { + overflow: auto; // 1 + vertical-align: top; // 2 +} + +// ========================================================================== +// Tables +// ========================================================================== + +// +// Remove most spacing between table cells. +// + +table { + border-collapse: collapse; + border-spacing: 0; +} diff --git a/themes/bootswatch-cyborg/less/pager.less b/themes/bootswatch-cyborg/less/pager.less new file mode 100644 index 0000000..16993dd --- /dev/null +++ b/themes/bootswatch-cyborg/less/pager.less @@ -0,0 +1,55 @@ +// +// Pager pagination +// -------------------------------------------------- + + +.pager { + padding-left: 0; + margin: @line-height-computed 0; + list-style: none; + text-align: center; + .clearfix(); + li { + display: inline; + > a, + > span { + display: inline-block; + padding: 5px 14px; + background-color: @pagination-bg; + border: 1px solid @pagination-border; + border-radius: @pager-border-radius; + } + + > a:hover, + > a:focus { + text-decoration: none; + background-color: @pagination-hover-bg; + } + } + + .next { + > a, + > span { + float: right; + } + } + + .previous { + > a, + > span { + float: left; + } + } + + .disabled { + > a, + > a:hover, + > a:focus, + > span { + color: @pager-disabled-color; + background-color: @pagination-bg; + cursor: not-allowed; + } + } + +} diff --git a/themes/bootswatch-cyborg/less/pagination.less b/themes/bootswatch-cyborg/less/pagination.less new file mode 100644 index 0000000..b480b38 --- /dev/null +++ b/themes/bootswatch-cyborg/less/pagination.less @@ -0,0 +1,83 @@ +// +// Pagination (multiple pages) +// -------------------------------------------------- +.pagination { + display: inline-block; + padding-left: 0; + margin: @line-height-computed 0; + border-radius: @border-radius-base; + + > li { + display: inline; // Remove list-style and block-level defaults + > a, + > span { + position: relative; + float: left; // Collapse white-space + padding: @padding-base-vertical @padding-base-horizontal; + line-height: @line-height-base; + text-decoration: none; + background-color: @pagination-bg; + border: 1px solid @pagination-border; + margin-left: -1px; + } + &:first-child { + > a, + > span { + margin-left: 0; + .border-left-radius(@border-radius-base); + } + } + &:last-child { + > a, + > span { + .border-right-radius(@border-radius-base); + } + } + } + + > li > a, + > li > span { + &:hover, + &:focus { + background-color: @pagination-hover-bg; + } + } + + > .active > a, + > .active > span { + &, + &:hover, + &:focus { + z-index: 2; + color: @pagination-active-color; + background-color: @pagination-active-bg; + border-color: @pagination-active-bg; + cursor: default; + } + } + + > .disabled { + > span, + > a, + > a:hover, + > a:focus { + color: @pagination-disabled-color; + background-color: @pagination-bg; + border-color: @pagination-border; + cursor: not-allowed; + } + } +} + +// Sizing +// -------------------------------------------------- + +// Large +.pagination-lg { + .pagination-size(@padding-large-vertical; @padding-large-horizontal; @font-size-large; @border-radius-large); +} + +// Small +.pagination-sm { + .pagination-size(@padding-small-vertical; @padding-small-horizontal; @font-size-small; @border-radius-small); +} diff --git a/themes/bootswatch-cyborg/less/panels.less b/themes/bootswatch-cyborg/less/panels.less new file mode 100644 index 0000000..2343b25 --- /dev/null +++ b/themes/bootswatch-cyborg/less/panels.less @@ -0,0 +1,148 @@ +// +// Panels +// -------------------------------------------------- + + +// Base class +.panel { + margin-bottom: @line-height-computed; + background-color: @panel-bg; + border: 1px solid transparent; + border-radius: @panel-border-radius; + .box-shadow(0 1px 1px rgba(0,0,0,.05)); +} + +// Panel contents +.panel-body { + padding: 15px; + .clearfix(); +} + + +// List groups in panels +// +// By default, space out list group content from panel headings to account for +// any kind of custom content between the two. + +.panel { + > .list-group { + margin-bottom: 0; + + .list-group-item { + border-width: 1px 0; + + // Remove border radius for top one + &:first-child { + .border-top-radius(0); + } + // But keep it for the last one + &:last-child { + border-bottom: 0; + } + } + } +} +// Collapse space between when there's no additional content. +.panel-heading + .list-group { + .list-group-item:first-child { + border-top-width: 0; + } +} + + +// Tables in panels +// +// Place a non-bordered `.table` within a panel (not within a `.panel-body`) and +// watch it go full width. + +.panel { + > .table { + margin-bottom: 0; + } + > .panel-body + .table { + border-top: 1px solid @table-border-color; + } +} + + +// Optional heading +.panel-heading { + padding: 10px 15px; + border-bottom: 1px solid transparent; + .border-top-radius(@panel-border-radius - 1); +} + +// Within heading, strip any `h*` tag of it's default margins for spacing. +.panel-title { + margin-top: 0; + margin-bottom: 0; + font-size: ceil((@font-size-base * 1.125)); + > a { + color: inherit; + } +} + +// Optional footer (stays gray in every modifier class) +.panel-footer { + padding: 10px 15px; + background-color: @panel-footer-bg; + border-top: 1px solid @panel-inner-border; + .border-bottom-radius(@panel-border-radius - 1); +} + + +// Collapsable panels (aka, accordion) +// +// Wrap a series of panels in `.panel-group` to turn them into an accordion with +// the help of our collapse JavaScript plugin. + +.panel-group { + // Tighten up margin so it's only between panels + .panel { + margin-bottom: 0; + border-radius: @panel-border-radius; + overflow: hidden; // crop contents when collapsed + + .panel { + margin-top: 5px; + } + } + + .panel-heading { + border-bottom: 0; + + .panel-collapse .panel-body { + border-top: 1px solid @panel-inner-border; + } + } + .panel-footer { + border-top: 0; + + .panel-collapse .panel-body { + border-bottom: 1px solid @panel-inner-border; + } + } + + // New subcomponent for wrapping collapsable content for proper animations + .panel-collapse { + + } +} + + +// Contextual variations +.panel-default { + .panel-variant(@panel-default-border; @panel-default-text; @panel-default-heading-bg; @panel-default-border); +} +.panel-primary { + .panel-variant(@panel-primary-border; @panel-primary-text; @panel-primary-heading-bg; @panel-primary-border); +} +.panel-success { + .panel-variant(@panel-success-border; @panel-success-text; @panel-success-heading-bg; @panel-success-border); +} +.panel-warning { + .panel-variant(@panel-warning-border; @panel-warning-text; @panel-warning-heading-bg; @panel-warning-border); +} +.panel-danger { + .panel-variant(@panel-danger-border; @panel-danger-text; @panel-danger-heading-bg; @panel-danger-border); +} +.panel-info { + .panel-variant(@panel-info-border; @panel-info-text; @panel-info-heading-bg; @panel-info-border); +} diff --git a/themes/bootswatch-cyborg/less/print.less b/themes/bootswatch-cyborg/less/print.less new file mode 100644 index 0000000..1e4bffe --- /dev/null +++ b/themes/bootswatch-cyborg/less/print.less @@ -0,0 +1,100 @@ +// +// Basic print styles +// -------------------------------------------------- +// Source: https://github.com/h5bp/html5-boilerplate/blob/master/css/main.css + +@media print { + + * { + text-shadow: none !important; + color: #000 !important; // Black prints faster: h5bp.com/s + background: transparent !important; + box-shadow: none !important; + } + + a, + a:visited { + text-decoration: underline; + } + + a[href]:after { + content: " (" attr(href) ")"; + } + + abbr[title]:after { + content: " (" attr(title) ")"; + } + + // Don't show links for images, or javascript/internal links + .ir a:after, + a[href^="javascript:"]:after, + a[href^="#"]:after { + content: ""; + } + + pre, + blockquote { + border: 1px solid #999; + page-break-inside: avoid; + } + + thead { + display: table-header-group; // h5bp.com/t + } + + tr, + img { + page-break-inside: avoid; + } + + img { + max-width: 100% !important; + } + + @page { + margin: 2cm .5cm; + } + + p, + h2, + h3 { + orphans: 3; + widows: 3; + } + + h2, + h3 { + page-break-after: avoid; + } + + // Bootstrap components + .navbar { + display: none; + } + .table { + td, + th { + background-color: #fff !important; + } + } + .btn, + .dropup > .btn { + > .caret { + border-top-color: #000 !important; + } + } + .label { + border: 1px solid #000; + } + + .table { + border-collapse: collapse !important; + } + .table-bordered { + th, + td { + border: 1px solid #ddd !important; + } + } + +} diff --git a/themes/bootswatch-cyborg/less/responsive-utilities.less b/themes/bootswatch-cyborg/less/responsive-utilities.less new file mode 100644 index 0000000..c756b23 --- /dev/null +++ b/themes/bootswatch-cyborg/less/responsive-utilities.less @@ -0,0 +1,220 @@ +// +// Responsive: Utility classes +// -------------------------------------------------- + + +// IE10 Metro responsive +// Required for Windows 8 Metro split-screen snapping with IE10 +// +// Source: http://timkadlec.com/2012/10/ie10-snap-mode-and-responsive-design/ +@-ms-viewport{ + width: device-width; +} + +// IE10 on Windows Phone 8 +// IE10 on WP8 doesn't report CSS pixels, but actual device pixels. In +// other words, say on a Lumia, you'll get 768px as the device width, +// meaning users will see the tablet styles and not phone styles. +// +// Alternatively you can override this with JS (see source below), but +// we won't be doing that here given our limited scope. +// +// Source: http://timkadlec.com/2013/01/windows-phone-8-and-device-width/ +@media screen and (max-width: 400px) { + @-ms-viewport{ + width: 320px; + } +} + +// Hide from screenreaders and browsers +// Credit: HTML5 Boilerplate +.hidden { + display: none !important; + visibility: hidden !important; +} + +// Visibility utilities + +.visible-xs { + .responsive-invisibility(); + @media (max-width: @screen-xs-max) { + .responsive-visibility(); + } + &.visible-sm { + @media (min-width: @screen-sm) and (max-width: @screen-sm-max) { + .responsive-visibility(); + } + } + &.visible-md { + @media (min-width: @screen-md) and (max-width: @screen-md-max) { + .responsive-visibility(); + } + } + &.visible-lg { + @media (min-width: @screen-lg) { + .responsive-visibility(); + } + } +} +.visible-sm { + .responsive-invisibility(); + &.visible-xs { + @media (max-width: @screen-xs-max) { + .responsive-visibility(); + } + } + @media (min-width: @screen-sm) and (max-width: @screen-sm-max) { + .responsive-visibility(); + } + &.visible-md { + @media (min-width: @screen-md) and (max-width: @screen-md-max) { + .responsive-visibility(); + } + } + &.visible-lg { + @media (min-width: @screen-lg) { + .responsive-visibility(); + } + } +} +.visible-md { + .responsive-invisibility(); + &.visible-xs { + @media (max-width: @screen-xs-max) { + .responsive-visibility(); + } + } + &.visible-sm { + @media (min-width: @screen-sm) and (max-width: @screen-sm-max) { + .responsive-visibility(); + } + } + @media (min-width: @screen-md) and (max-width: @screen-md-max) { + .responsive-visibility(); + } + &.visible-lg { + @media (min-width: @screen-lg) { + .responsive-visibility(); + } + } +} +.visible-lg { + .responsive-invisibility(); + &.visible-xs { + @media (max-width: @screen-xs-max) { + .responsive-visibility(); + } + } + &.visible-sm { + @media (min-width: @screen-sm) and (max-width: @screen-sm-max) { + .responsive-visibility(); + } + } + &.visible-md { + @media (min-width: @screen-md) and (max-width: @screen-md-max) { + .responsive-visibility(); + } + } + @media (min-width: @screen-lg) { + .responsive-visibility(); + } +} + +.hidden-xs { + .responsive-visibility(); + @media (max-width: @screen-xs-max) { + .responsive-invisibility(); + } + &.hidden-sm { + @media (min-width: @screen-sm) and (max-width: @screen-sm-max) { + .responsive-invisibility(); + } + } + &.hidden-md { + @media (min-width: @screen-md) and (max-width: @screen-md-max) { + .responsive-invisibility(); + } + } + &.hidden-lg { + @media (min-width: @screen-lg) { + .responsive-invisibility(); + } + } +} +.hidden-sm { + .responsive-visibility(); + &.hidden-xs { + @media (max-width: @screen-xs-max) { + .responsive-invisibility(); + } + } + @media (min-width: @screen-sm) and (max-width: @screen-sm-max) { + .responsive-invisibility(); + } + &.hidden-md { + @media (min-width: @screen-md) and (max-width: @screen-md-max) { + .responsive-invisibility(); + } + } + &.hidden-lg { + @media (min-width: @screen-lg) { + .responsive-invisibility(); + } + } +} +.hidden-md { + .responsive-visibility(); + &.hidden-xs { + @media (max-width: @screen-xs-max) { + .responsive-invisibility(); + } + } + &.hidden-sm { + @media (min-width: @screen-sm) and (max-width: @screen-sm-max) { + .responsive-invisibility(); + } + } + @media (min-width: @screen-md) and (max-width: @screen-md-max) { + .responsive-invisibility(); + } + &.hidden-lg { + @media (min-width: @screen-lg) { + .responsive-invisibility(); + } + } +} +.hidden-lg { + .responsive-visibility(); + &.hidden-xs { + @media (max-width: @screen-xs-max) { + .responsive-invisibility(); + } + } + &.hidden-sm { + @media (min-width: @screen-sm) and (max-width: @screen-sm-max) { + .responsive-invisibility(); + } + } + &.hidden-md { + @media (min-width: @screen-md) and (max-width: @screen-md-max) { + .responsive-invisibility(); + } + } + @media (min-width: @screen-lg) { + .responsive-invisibility(); + } +} + +// Print utilities +.visible-print { + .responsive-invisibility(); +} + +@media print { + .visible-print { + .responsive-visibility(); + } + .hidden-print { + .responsive-invisibility(); + } +} diff --git a/themes/bootswatch-cyborg/less/scaffolding.less b/themes/bootswatch-cyborg/less/scaffolding.less new file mode 100644 index 0000000..53e1be5 --- /dev/null +++ b/themes/bootswatch-cyborg/less/scaffolding.less @@ -0,0 +1,130 @@ +// +// Scaffolding +// -------------------------------------------------- + + +// Reset the box-sizing + +*, +*:before, +*:after { + .box-sizing(border-box); +} + + +// Body reset + +html { + font-size: 62.5%; + -webkit-tap-highlight-color: rgba(0,0,0,0); +} + +body { + font-family: @font-family-base; + font-size: @font-size-base; + line-height: @line-height-base; + color: @text-color; + background-color: @body-bg; +} + +// Reset fonts for relevant elements +input, +button, +select, +textarea { + font-family: inherit; + font-size: inherit; + line-height: inherit; +} + +// Reset unusual Firefox-on-Android default style. +// +// See https://github.com/necolas/normalize.css/issues/214 + +button, +input, +select[multiple], +textarea { + background-image: none; +} + + +// Links + +a { + color: @link-color; + text-decoration: none; + + &:hover, + &:focus { + color: @link-hover-color; + text-decoration: underline; + } + + &:focus { + .tab-focus(); + } +} + + +// Images + +img { + vertical-align: middle; +} + +// Responsive images (ensure images don't scale beyond their parents) +.img-responsive { + .img-responsive(); +} + +// Rounded corners +.img-rounded { + border-radius: @border-radius-large; +} + +// Image thumbnails +// +// Heads up! This is mixin-ed into thumbnails.less for `.thumbnail`. +.img-thumbnail { + padding: @thumbnail-padding; + line-height: @line-height-base; + background-color: @thumbnail-bg; + border: 1px solid @thumbnail-border; + border-radius: @thumbnail-border-radius; + .transition(all .2s ease-in-out); + + // Keep them at most 100% wide + .img-responsive(inline-block); +} + +// Perfect circle +.img-circle { + border-radius: 50%; // set radius in percents +} + + +// Horizontal rules + +hr { + margin-top: @line-height-computed; + margin-bottom: @line-height-computed; + border: 0; + border-top: 1px solid @hr-border; +} + + +// Only display content to screen readers +// +// See: http://a11yproject.com/posts/how-to-hide-content/ + +.sr-only { + position: absolute; + width: 1px; + height: 1px; + margin: -1px; + padding: 0; + overflow: hidden; + clip: rect(0 0 0 0); + border: 0; +} diff --git a/themes/bootswatch-cyborg/less/tables.less b/themes/bootswatch-cyborg/less/tables.less new file mode 100644 index 0000000..7543b16 --- /dev/null +++ b/themes/bootswatch-cyborg/less/tables.less @@ -0,0 +1,236 @@ +// +// Tables +// -------------------------------------------------- + + +table { + max-width: 100%; + background-color: @table-bg; +} +th { + text-align: left; +} + + +// Baseline styles + +.table { + width: 100%; + margin-bottom: @line-height-computed; + // Cells + thead, + tbody, + tfoot { + > tr { + > th, + > td { + padding: @table-cell-padding; + line-height: @line-height-base; + vertical-align: top; + border-top: 1px solid @table-border-color; + } + } + } + // Bottom align for column headings + thead > tr > th { + vertical-align: bottom; + border-bottom: 2px solid @table-border-color; + } + // Remove top border from thead by default + caption + thead, + colgroup + thead, + thead:first-child { + tr:first-child { + th, td { + border-top: 0; + } + } + } + // Account for multiple tbody instances + tbody + tbody { + border-top: 2px solid @table-border-color; + } + + // Nesting + .table { + background-color: @body-bg; + } +} + + +// Condensed table w/ half padding + +.table-condensed { + thead, + tbody, + tfoot { + > tr { + > th, + > td { + padding: @table-condensed-cell-padding; + } + } + } +} + + +// Bordered version +// +// Add borders all around the table and between all the columns. + +.table-bordered { + border: 1px solid @table-border-color; + > thead, + > tbody, + > tfoot { + > tr { + > th, + > td { + border: 1px solid @table-border-color; + } + } + } + > thead { + > tr { + > th, + > td { + border-bottom-width: 2px; + } + } + } +} + + +// Zebra-striping +// +// Default zebra-stripe styles (alternating gray and transparent backgrounds) + +.table-striped { + > tbody { + > tr:nth-child(odd) { + > td, + > th { + background-color: @table-bg-accent; + } + } + } +} + + +// Hover effect +// +// Placed here since it has to come after the potential zebra striping + +.table-hover { + > tbody { + > tr:hover { + > td, + > th { + background-color: @table-bg-hover; + } + } + } +} + + +// Table cell sizing +// +// Reset default table behavior + +table col[class*="col-"] { + float: none; + display: table-column; +} +table { + td, + th { + &[class*="col-"] { + float: none; + display: table-cell; + } + } +} + + +// Table backgrounds +// +// Exact selectors below required to override `.table-striped` and prevent +// inheritance to nested tables. + +.table > thead > tr, +.table > tbody > tr, +.table > tfoot > tr { + > td.active, + > th.active, + &.active > td, + &.active > th { + background-color: @table-bg-active; + } +} + +// Generate the contextual variants +.table-row-variant(success; @state-success-bg; @state-success-border); +.table-row-variant(danger; @state-danger-bg; @state-danger-border); +.table-row-variant(warning; @state-warning-bg; @state-warning-border); + + +// Responsive tables +// +// Wrap your tables in `.table-scrollable` and we'll make them mobile friendly +// by enabling horizontal scrolling. Only applies <768px. Everything above that +// will display normally. + +@media (max-width: @screen-sm) { + .table-responsive { + width: 100%; + margin-bottom: 15px; + overflow-y: hidden; + overflow-x: scroll; + border: 1px solid @table-border-color; + + // Tighten up spacing and give a background color + > .table { + margin-bottom: 0; + background-color: #fff; + + // Ensure the content doesn't wrap + > thead, + > tbody, + > tfoot { + > tr { + > th, + > td { + white-space: nowrap; + } + } + } + } + + // Special overrides for the bordered tables + > .table-bordered { + border: 0; + + // Nuke the appropriate borders so that the parent can handle them + > thead, + > tbody, + > tfoot { + > tr { + > th:first-child, + > td:first-child { + border-left: 0; + } + > th:last-child, + > td:last-child { + border-right: 0; + } + } + > tr:last-child { + > th, + > td { + border-bottom: 0; + } + } + } + } + } +} diff --git a/themes/bootswatch-cyborg/less/theme.less b/themes/bootswatch-cyborg/less/theme.less new file mode 100644 index 0000000..92469c4 --- /dev/null +++ b/themes/bootswatch-cyborg/less/theme.less @@ -0,0 +1,232 @@ + +// +// Load core variables and mixins +// -------------------------------------------------- + +@import "variables.less"; +@import "mixins.less"; + + + +// +// Buttons +// -------------------------------------------------- + +// Common styles +.btn-default, +.btn-primary, +.btn-success, +.btn-info, +.btn-warning, +.btn-danger { + text-shadow: 0 -1px 0 rgba(0,0,0,.2); + @shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 1px 1px rgba(0,0,0,.075); + .box-shadow(@shadow); + + // Reset the shadow + &:active, + &.active { + .box-shadow(inset 0 3px 5px rgba(0,0,0,.125)); + } +} + +// Mixin for generating new styles +.btn-styles(@btn-color: #555;) { + #gradient > .vertical(@start-color: @btn-color; @end-color: darken(@btn-color, 10%)); + border-color: darken(@btn-color, 12%); + + &:active, + &.active { + background-color: darken(@btn-color, 10%); + border-color: darken(@btn-color, 12%); + } +} + +// Common styles +.btn { + // Remove the gradient for the pressed/active state + &:active, + &.active { + background-image: none; + } +} + +// Apply the mixin to the buttons +.btn-default { .btn-styles(@btn-default-bg;); text-shadow: 0 1px 0 #fff; border-color: #ccc; } +.btn-primary { .btn-styles(@btn-primary-bg); } +.btn-success { .btn-styles(@btn-success-bg); } +.btn-warning { .btn-styles(@btn-warning-bg); } +.btn-danger { .btn-styles(@btn-danger-bg); } +.btn-info { .btn-styles(@btn-info-bg); } + + + +// +// Images +// -------------------------------------------------- + +.thumbnail, +.img-thumbnail { + .box-shadow(0 1px 2px rgba(0,0,0,.075)); +} + + + +// +// Dropdowns +// -------------------------------------------------- + +.dropdown-menu > li > a:hover, +.dropdown-menu > li > a:focus, +.dropdown-menu > .active > a, +.dropdown-menu > .active > a:hover, +.dropdown-menu > .active > a:focus { + #gradient > .vertical(@start-color: @dropdown-link-hover-bg; @end-color: darken(@dropdown-link-hover-bg, 5%)); + background-color: darken(@dropdown-link-hover-bg, 5%); +} + + + +// +// Navbar +// -------------------------------------------------- + +// Basic navbar +.navbar { + #gradient > .vertical(@start-color: lighten(@navbar-default-bg, 10%); @end-color: @navbar-default-bg;); + border-radius: @navbar-border-radius; + @shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 1px 5px rgba(0,0,0,.075); + .box-shadow(@shadow); + + .navbar-nav > .active > a { + background-color: @navbar-default-bg; + } +} +.navbar-brand, +.navbar-nav > li > a { + text-shadow: 0 1px 0 rgba(255,255,255,.25); +} + +// Inverted navbar +.navbar-inverse { + #gradient > .vertical(@start-color: lighten(@navbar-inverse-bg, 10%); @end-color: @navbar-inverse-bg;); + + .navbar-nav > .active > a { + background-color: @navbar-inverse-bg; + } + + .navbar-brand, + .navbar-nav > li > a { + text-shadow: 0 -1px 0 rgba(0,0,0,.25); + } +} + +// Undo rounded corners in static and fixed navbars +.navbar-static-top, +.navbar-fixed-top, +.navbar-fixed-bottom { + border-radius: 0; +} + + + +// +// Alerts +// -------------------------------------------------- + +// Common styles +.alert { + text-shadow: 0 1px 0 rgba(255,255,255,.2); + @shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 1px 2px rgba(0,0,0,.05); + .box-shadow(@shadow); +} + +// Mixin for generating new styles +.alert-styles(@color) { + #gradient > .vertical(@start-color: @color; @end-color: darken(@color, 7.5%)); + border-color: darken(@color, 15%); +} + +// Apply the mixin to the alerts +.alert-success { .alert-styles(@alert-success-bg); } +.alert-info { .alert-styles(@alert-info-bg); } +.alert-warning { .alert-styles(@alert-warning-bg); } +.alert-danger { .alert-styles(@alert-danger-bg); } + + + +// +// Progress bars +// -------------------------------------------------- + +// Give the progress background some depth +.progress { + #gradient > .vertical(@start-color: darken(@progress-bg, 4%); @end-color: @progress-bg;) +} + +// Mixin for generating new styles +.progress-bar-styles(@color) { + #gradient > .vertical(@start-color: @color; @end-color: darken(@color, 10%)); +} + +// Apply the mixin to the progress bars +.progress-bar { .progress-bar-styles(@progress-bar-bg); } +.progress-bar-success { .progress-bar-styles(@progress-bar-success-bg); } +.progress-bar-info { .progress-bar-styles(@progress-bar-info-bg); } +.progress-bar-warning { .progress-bar-styles(@progress-bar-warning-bg); } +.progress-bar-danger { .progress-bar-styles(@progress-bar-danger-bg); } + + + +// +// List groups +// -------------------------------------------------- + +.list-group { + border-radius: @border-radius-base; + .box-shadow(0 1px 2px rgba(0,0,0,.075)); +} +.list-group-item.active, +.list-group-item.active:hover, +.list-group-item.active:focus { + text-shadow: 0 -1px 0 darken(@list-group-active-bg, 10%); + #gradient > .vertical(@start-color: @list-group-active-bg; @end-color: darken(@list-group-active-bg, 7.5%)); + border-color: darken(@list-group-active-border, 7.5%); +} + + + +// +// Panels +// -------------------------------------------------- + +// Common styles +.panel { + .box-shadow(0 1px 2px rgba(0,0,0,.05)); +} + +// Mixin for generating new styles +.panel-heading-styles(@color) { + #gradient > .vertical(@start-color: @color; @end-color: darken(@color, 5%)); +} + +// Apply the mixin to the panel headings only +.panel-default > .panel-heading { .panel-heading-styles(@panel-default-heading-bg); } +.panel-primary > .panel-heading { .panel-heading-styles(@panel-primary-heading-bg); } +.panel-success > .panel-heading { .panel-heading-styles(@panel-success-heading-bg); } +.panel-info > .panel-heading { .panel-heading-styles(@panel-info-heading-bg); } +.panel-warning > .panel-heading { .panel-heading-styles(@panel-warning-heading-bg); } +.panel-danger > .panel-heading { .panel-heading-styles(@panel-danger-heading-bg); } + + + +// +// Wells +// -------------------------------------------------- + +.well { + #gradient > .vertical(@start-color: darken(@well-bg, 5%); @end-color: @well-bg;); + border-color: darken(@well-bg, 10%); + @shadow: inset 0 1px 3px rgba(0,0,0,.05), 0 1px 0 rgba(255,255,255,.1); + .box-shadow(@shadow); +} diff --git a/themes/bootswatch-cyborg/less/type.less b/themes/bootswatch-cyborg/less/type.less new file mode 100644 index 0000000..c40a891 --- /dev/null +++ b/themes/bootswatch-cyborg/less/type.less @@ -0,0 +1,238 @@ +// +// Typography +// -------------------------------------------------- + + +// Body text +// ------------------------- + +p { + margin: 0 0 (@line-height-computed / 2); +} +.lead { + margin-bottom: @line-height-computed; + font-size: (@font-size-base * 1.15); + font-weight: 200; + line-height: 1.4; + + @media (min-width: 768px) { + font-size: (@font-size-base * 1.5); + } +} + + +// Emphasis & misc +// ------------------------- + +// Ex: 14px base font * 85% = about 12px +small { font-size: 85%; } + +// Undo browser default styling +cite { font-style: normal; } + +// Contextual emphasis +.text-muted { color: @text-muted; } +.text-primary { color: @brand-primary; } +.text-warning { color: @state-warning-text; } +.text-danger { color: @state-danger-text; } +.text-success { color: @state-success-text; } +.text-info { color: @state-info-text; } + +// Alignment +.text-left { text-align: left; } +.text-right { text-align: right; } +.text-center { text-align: center; } + + +// Headings +// ------------------------- + +h1, h2, h3, h4, h5, h6, +.h1, .h2, .h3, .h4, .h5, .h6 { + font-family: @headings-font-family; + font-weight: @headings-font-weight; + line-height: @headings-line-height; + small { + font-weight: normal; + line-height: 1; + color: @headings-small-color; + } +} + +h1, +h2, +h3 { + margin-top: @line-height-computed; + margin-bottom: (@line-height-computed / 2); +} +h4, +h5, +h6 { + margin-top: (@line-height-computed / 2); + margin-bottom: (@line-height-computed / 2); +} + +h1, .h1 { font-size: floor(@font-size-base * 2.60); } // ~36px +h2, .h2 { font-size: floor(@font-size-base * 2.15); } // ~30px +h3, .h3 { font-size: ceil(@font-size-base * 1.70); } // ~24px +h4, .h4 { font-size: ceil(@font-size-base * 1.25); } // ~18px +h5, .h5 { font-size: @font-size-base; } +h6, .h6 { font-size: ceil(@font-size-base * 0.85); } // ~12px + +h1 small, .h1 small { font-size: ceil(@font-size-base * 1.70); } // ~24px +h2 small, .h2 small { font-size: ceil(@font-size-base * 1.25); } // ~18px +h3 small, .h3 small, +h4 small, .h4 small { font-size: @font-size-base; } + + +// Page header +// ------------------------- + +.page-header { + padding-bottom: ((@line-height-computed / 2) - 1); + margin: (@line-height-computed * 2) 0 @line-height-computed; + border-bottom: 1px solid @page-header-border-color; +} + + + +// Lists +// -------------------------------------------------- + +// Unordered and Ordered lists +ul, +ol { + margin-top: 0; + margin-bottom: (@line-height-computed / 2); + ul, + ol{ + margin-bottom: 0; + } +} + +// List options + +// Unstyled keeps list items block level, just removes default browser padding and list-style +.list-unstyled { + padding-left: 0; + list-style: none; +} +// Inline turns list items into inline-block +.list-inline { + .list-unstyled(); + > li { + display: inline-block; + padding-left: 5px; + padding-right: 5px; + } +} + +// Description Lists +dl { + margin-bottom: @line-height-computed; +} +dt, +dd { + line-height: @line-height-base; +} +dt { + font-weight: bold; +} +dd { + margin-left: 0; // Undo browser default +} + +// Horizontal description lists +// +// Defaults to being stacked without any of the below styles applied, until the +// grid breakpoint is reached (default of ~768px). + +@media (min-width: @grid-float-breakpoint) { + .dl-horizontal { + dt { + float: left; + width: (@component-offset-horizontal - 20); + clear: left; + text-align: right; + .text-overflow(); + } + dd { + margin-left: @component-offset-horizontal; + .clearfix(); // Clear the floated `dt` if an empty `dd` is present + } + } +} + +// MISC +// ---- + +// Abbreviations and acronyms +abbr[title], +// Added data-* attribute to help out our tooltip plugin, per https://github.com/twbs/bootstrap/issues/5257 +abbr[data-original-title] { + cursor: help; + border-bottom: 1px dotted @abbr-border-color; +} +abbr.initialism { + font-size: 90%; + text-transform: uppercase; +} + +// Blockquotes +blockquote { + padding: (@line-height-computed / 2) @line-height-computed; + margin: 0 0 @line-height-computed; + border-left: 5px solid @blockquote-border-color; + p { + font-size: (@font-size-base * 1.25); + font-weight: 300; + line-height: 1.25; + } + p:last-child { + margin-bottom: 0; + } + small { + display: block; + line-height: @line-height-base; + color: @blockquote-small-color; + &:before { + content: '\2014 \00A0';// EM DASH, NBSP + } + } + + // Float right with text-align: right + &.pull-right { + padding-right: 15px; + padding-left: 0; + border-right: 5px solid @blockquote-border-color; + border-left: 0; + p, + small { + text-align: right; + } + small { + &:before { + content: ''; + } + &:after { + content: '\00A0 \2014';// NBSP, EM DASH + } + } + } +} + +// Quotes +q:before, +q:after, +blockquote:before, +blockquote:after { + content: ""; +} + +// Addresses +address { + display: block; + margin-bottom: @line-height-computed; + font-style: normal; + line-height: @line-height-base; +} diff --git a/themes/bootswatch-cyborg/less/utilities.less b/themes/bootswatch-cyborg/less/utilities.less new file mode 100644 index 0000000..3d310e6 --- /dev/null +++ b/themes/bootswatch-cyborg/less/utilities.less @@ -0,0 +1,42 @@ +// +// Utility classes +// -------------------------------------------------- + + +// Floats +// ------------------------- + +.clearfix { + .clearfix(); +} +.pull-right { + float: right !important; +} +.pull-left { + float: left !important; +} + + +// Toggling content +// ------------------------- + +.hide { + display: none !important; +} +.show { + display: block !important; +} +.invisible { + visibility: hidden; +} +.text-hide { + .hide-text(); +} + + +// For Affix plugin +// ------------------------- + +.affix { + position: fixed; +} diff --git a/themes/bootswatch-cyborg/less/variables.less b/themes/bootswatch-cyborg/less/variables.less new file mode 100644 index 0000000..23ed64f --- /dev/null +++ b/themes/bootswatch-cyborg/less/variables.less @@ -0,0 +1,620 @@ +// Cyborg 3.0.0 +// Variables +// -------------------------------------------------- + + +// Global values +// -------------------------------------------------- + +// Grays +// ------------------------- + +@gray-darker: #222; +@gray-dark: #282828; +@gray: #555; +@gray-light: #888; +@gray-lighter: #ADAFAE; // #eee + +// Brand colors +// ------------------------- + +@brand-primary: #2A9FD6; +@brand-success: #77B300; +@brand-warning: #FF8800; +@brand-danger: #CC0000; +@brand-info: #9933CC; + +// Scaffolding +// ------------------------- + +@body-bg: #060606; +@text-color: @gray-light; + +// Links +// ------------------------- + +@link-color: @brand-primary; +@link-hover-color: @link-color; + +// Typography +// ------------------------- + +@font-family-sans-serif: "Droid Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; +@font-family-serif: Georgia, "Times New Roman", Times, serif; +@font-family-monospace: Monaco, Menlo, Consolas, "Courier New", monospace; +@font-family-base: @font-family-sans-serif; + +@font-size-base: 14px; +@font-size-large: ceil(@font-size-base * 1.25); // ~18px +@font-size-small: ceil(@font-size-base * 0.85); // ~12px + +@line-height-base: 1.428571429; // 20/14 +@line-height-computed: floor(@font-size-base * @line-height-base); // ~20px + +@headings-font-family: @font-family-base; +@headings-font-weight: 500; +@headings-line-height: 1.1; + +// Iconography +// ------------------------- + +@icon-font-path: "../fonts/"; +@icon-font-name: "glyphicons-halflings-regular"; + + +// Components +// ------------------------- +// Based on 14px font-size and 1.428 line-height (~20px to start) + +@padding-base-vertical: 8px; +@padding-base-horizontal: 12px; + +@padding-large-vertical: 14px; +@padding-large-horizontal: 16px; + +@padding-small-vertical: 5px; +@padding-small-horizontal: 10px; + +@line-height-large: 1.33; +@line-height-small: 1.5; + +@border-radius-base: 4px; +@border-radius-large: 6px; +@border-radius-small: 3px; + +@component-active-bg: @brand-primary; + +@caret-width-base: 4px; +@caret-width-large: 5px; + +// Tables +// ------------------------- + +@table-cell-padding: 8px; +@table-condensed-cell-padding: 5px; + +@table-bg: darken(@gray-darker, 4%); // overall background-color +@table-bg-accent: darken(@table-bg, 6%); // for striping +@table-bg-hover: @gray-dark; +@table-bg-active: @table-bg-hover; + +@table-border-color: @gray-dark; // table and cell border + + +// Buttons +// ------------------------- + +@btn-font-weight: normal; + +@btn-default-color: #fff; +@btn-default-bg: lighten(@gray-dark, 10%); +@btn-default-border: @btn-default-bg; + +@btn-primary-color: @btn-default-color; +@btn-primary-bg: @brand-primary; +@btn-primary-border: @btn-primary-bg; + +@btn-success-color: @btn-default-color; +@btn-success-bg: @brand-success; +@btn-success-border: @btn-success-bg; + +@btn-warning-color: @btn-default-color; +@btn-warning-bg: @brand-warning; +@btn-warning-border: @btn-warning-bg; + +@btn-danger-color: @btn-default-color; +@btn-danger-bg: @brand-danger; +@btn-danger-border: @btn-danger-bg; + +@btn-info-color: @btn-default-color; +@btn-info-bg: @brand-info; +@btn-info-border: @btn-info-bg; + +@btn-link-disabled-color: @gray-light; + + +// Forms +// ------------------------- + +@input-bg: #fff; +@input-bg-disabled: @gray-lighter; + +@input-color: @text-color; +@input-border: @gray-dark; +@input-border-radius: @border-radius-base; +@input-border-focus: #66afe9; + +@input-color-placeholder: @gray-light; + +@input-height-base: (@line-height-computed + (@padding-base-vertical * 2) + 2); +@input-height-large: (ceil(@font-size-large * @line-height-base) + (@padding-large-vertical * 2) + 2); +@input-height-small: (ceil(@font-size-small * @line-height-base) + (@padding-small-vertical * 2) + 2); + +@legend-color: @text-color; +@legend-border-color: @gray-dark; + +@input-group-addon-bg: @gray-lighter; +@input-group-addon-border-color: @input-border; + + +// Dropdowns +// ------------------------- + +@dropdown-bg: @gray-darker; +@dropdown-border: rgba(255,255,255,0.1); +@dropdown-fallback-border: #444; +@dropdown-divider-bg: rgba(255,255,255,0.1); + +@dropdown-link-active-color: #fff; +@dropdown-link-active-bg: @component-active-bg; + +@dropdown-link-color: #fff; +@dropdown-link-hover-color: #fff; +@dropdown-link-hover-bg: @dropdown-link-active-bg; + +@dropdown-link-disabled-color: @text-muted; + +@dropdown-header-color: @text-muted; + +@dropdown-caret-color: #000; + + +// COMPONENT VARIABLES +// -------------------------------------------------- + + +// Z-index master list +// ------------------------- +// Used for a bird's eye view of components dependent on the z-axis +// Try to avoid customizing these :) + +@zindex-navbar: 1000; +@zindex-dropdown: 1000; +@zindex-popover: 1010; +@zindex-tooltip: 1030; +@zindex-navbar-fixed: 1030; +@zindex-modal-background: 1040; +@zindex-modal: 1050; + +// Media queries breakpoints +// -------------------------------------------------- + +// Extra small screen / phone +@screen-xs: 480px; +@screen-phone: @screen-xs; + +// Small screen / tablet +@screen-sm: 768px; +@screen-tablet: @screen-sm; + +// Medium screen / desktop +@screen-md: 992px; +@screen-desktop: @screen-md; + +// Large screen / wide desktop +@screen-lg: 1200px; +@screen-lg-desktop: @screen-lg; + +// So media queries don't overlap when required, provide a maximum +@screen-xs-max: (@screen-sm - 1); +@screen-sm-max: (@screen-md - 1); +@screen-md-max: (@screen-lg - 1); + + +// Grid system +// -------------------------------------------------- + +// Number of columns in the grid system +@grid-columns: 12; +// Padding, to be divided by two and applied to the left and right of all columns +@grid-gutter-width: 30px; +// Point at which the navbar stops collapsing +@grid-float-breakpoint: @screen-tablet; + + +// Navbar +// ------------------------- + +// Basics of a navbar +@navbar-height: 50px; +@navbar-margin-bottom: @line-height-computed; +@navbar-default-color: @text-color; +@navbar-default-bg: @body-bg; +@navbar-default-border: darken(@navbar-default-bg, 6.5%); +@navbar-border-radius: @border-radius-base; +@navbar-padding-horizontal: floor(@grid-gutter-width / 2); +@navbar-padding-vertical: ((@navbar-height - @line-height-computed) / 2); + +// Navbar links +@navbar-default-link-color: @text-color; +@navbar-default-link-hover-color: #fff; +@navbar-default-link-hover-bg: transparent; +@navbar-default-link-active-color: #fff; +@navbar-default-link-active-bg: transparent; +@navbar-default-link-disabled-color: @gray-light; +@navbar-default-link-disabled-bg: transparent; + +// Navbar brand label +@navbar-default-brand-color: #fff; +@navbar-default-brand-hover-color: #fff; +@navbar-default-brand-hover-bg: transparent; + +// Navbar toggle +@navbar-default-toggle-hover-bg: @gray-dark; +@navbar-default-toggle-icon-bar-bg: #ccc; +@navbar-default-toggle-border-color: @gray-dark; + + +// Inverted navbar +// +// Reset inverted navbar basics +@navbar-inverse-color: @gray-light; +@navbar-inverse-bg: @gray-darker; +@navbar-inverse-border: darken(@navbar-inverse-bg, 10%); + +// Inverted navbar links +@navbar-inverse-link-color: @gray-light; +@navbar-inverse-link-hover-color: #fff; +@navbar-inverse-link-hover-bg: transparent; +@navbar-inverse-link-active-color: @navbar-inverse-link-hover-color; +@navbar-inverse-link-active-bg: transparent; +@navbar-inverse-link-disabled-color: #aaa; +@navbar-inverse-link-disabled-bg: transparent; + +// Inverted navbar brand label +@navbar-inverse-brand-color: #fff; +@navbar-inverse-brand-hover-color: #fff; +@navbar-inverse-brand-hover-bg: transparent; + +// Inverted navbar search +// Normal navbar needs no special styles or vars +@navbar-inverse-search-bg: lighten(@navbar-inverse-bg, 25%); +@navbar-inverse-search-bg-focus: #fff; +@navbar-inverse-search-border: @navbar-inverse-bg; +@navbar-inverse-search-placeholder-color: #ccc; + +// Inverted navbar toggle +@navbar-inverse-toggle-hover-bg: #333; +@navbar-inverse-toggle-icon-bar-bg: #fff; +@navbar-inverse-toggle-border-color: #333; + + +// Navs +// ------------------------- + +@nav-link-padding: 10px 15px; +@nav-link-hover-bg: @gray-darker; + +@nav-disabled-link-color: @gray-light; +@nav-disabled-link-hover-color: @gray-light; + +@nav-open-link-hover-color: @gray-darker; +@nav-open-caret-border-color: #fff; + +// Tabs +@nav-tabs-border-color: @gray-dark; + +@nav-tabs-link-hover-border-color: transparent; + +@nav-tabs-active-link-hover-bg: @brand-primary; +@nav-tabs-active-link-hover-color: #fff; +@nav-tabs-active-link-hover-border-color: @gray-dark; + +@nav-tabs-justified-link-border-color: #ddd; +@nav-tabs-justified-active-link-border-color: @body-bg; + +// Pills +@nav-pills-active-link-hover-bg: @component-active-bg; +@nav-pills-active-link-hover-color: #fff; + + +// Pagination +// ------------------------- + +@pagination-bg: @gray-darker; +@pagination-border: @gray-dark; + +@pagination-hover-bg: @gray-lighter; + +@pagination-active-bg: @brand-primary; +@pagination-active-color: #fff; + +@pagination-disabled-color: @gray-light; + + +// Pager +// ------------------------- + +@pager-border-radius: 15px; +@pager-disabled-color: @gray-light; + + +// Jumbotron +// ------------------------- + +@jumbotron-padding: 30px; +@jumbotron-color: inherit; +@jumbotron-bg: darken(@gray-darker, 5%); + +@jumbotron-heading-color: inherit; + + +// Form states and alerts +// ------------------------- + +@state-warning-text: #fff; +@state-warning-bg: @brand-warning; +@state-warning-border: darken(spin(@state-warning-bg, -10), 3%); + +@state-danger-text: #fff; +@state-danger-bg: @brand-danger; +@state-danger-border: darken(spin(@state-danger-bg, -10), 3%); + +@state-success-text: #fff; +@state-success-bg: @brand-success; +@state-success-border: darken(spin(@state-success-bg, -10), 5%); + +@state-info-text: #fff; +@state-info-bg: @brand-info; +@state-info-border: darken(spin(@state-info-bg, -10), 7%); + + +// Tooltips +// ------------------------- +@tooltip-max-width: 200px; +@tooltip-color: #fff; +@tooltip-bg: rgba(0,0,0,.9); + +@tooltip-arrow-width: 5px; +@tooltip-arrow-color: @tooltip-bg; + + +// Popovers +// ------------------------- +@popover-bg: lighten(@body-bg, 10%); +@popover-max-width: 276px; +@popover-border-color: rgba(0,0,0,.2); +@popover-fallback-border-color: #999; + +@popover-title-bg: darken(@popover-bg, 3%); + +@popover-arrow-width: 10px; +@popover-arrow-color: @popover-bg; + +@popover-arrow-outer-width: (@popover-arrow-width + 1); +@popover-arrow-outer-color: rgba(0,0,0,.25); +@popover-arrow-outer-fallback-color: #999; + + +// Labels +// ------------------------- + +@label-default-bg: @btn-default-bg; +@label-primary-bg: @brand-primary; +@label-success-bg: @brand-success; +@label-info-bg: @brand-info; +@label-warning-bg: @brand-warning; +@label-danger-bg: @brand-danger; + +@label-color: #fff; +@label-link-hover-color: #fff; + + +// Modals +// ------------------------- +@modal-inner-padding: 20px; + +@modal-title-padding: 15px; +@modal-title-line-height: @line-height-base; + +@modal-content-bg: lighten(@body-bg, 10%); +@modal-content-border-color: rgba(0,0,0,.2); +@modal-content-fallback-border-color: #999; + +@modal-backdrop-bg: #000; +@modal-header-border-color: @gray-dark; +@modal-footer-border-color: @modal-header-border-color; + + +// Alerts +// ------------------------- +@alert-padding: 15px; +@alert-border-radius: @border-radius-base; +@alert-link-font-weight: bold; + +@alert-success-bg: @state-success-bg; +@alert-success-text: @state-success-text; +@alert-success-border: @state-success-border; + +@alert-info-bg: @state-info-bg; +@alert-info-text: @state-info-text; +@alert-info-border: @state-info-border; + +@alert-warning-bg: @state-warning-bg; +@alert-warning-text: @state-warning-text; +@alert-warning-border: @state-warning-border; + +@alert-danger-bg: @state-danger-bg; +@alert-danger-text: @state-danger-text; +@alert-danger-border: @state-danger-border; + + +// Progress bars +// ------------------------- +@progress-bg: @gray-darker; +@progress-bar-color: #fff; + +@progress-bar-bg: @brand-primary; +@progress-bar-success-bg: @brand-success; +@progress-bar-warning-bg: @brand-warning; +@progress-bar-danger-bg: @brand-danger; +@progress-bar-info-bg: @brand-info; + + +// List group +// ------------------------- +@list-group-bg: @gray-darker; +@list-group-border: @gray-dark; +@list-group-border-radius: @border-radius-base; + +@list-group-hover-bg: lighten(@list-group-bg, 15%); +@list-group-active-color: #fff; +@list-group-active-bg: @component-active-bg; +@list-group-active-border: @list-group-active-bg; + +@list-group-link-color: @text-color; +@list-group-link-heading-color: #fff; + + +// Panels +// ------------------------- +@panel-bg: @gray-darker; +@panel-inner-border: @gray-dark; +@panel-border-radius: @border-radius-base; +@panel-footer-bg: @panel-default-heading-bg; + +@panel-default-text: @gray-dark; +@panel-default-border: @panel-inner-border; +@panel-default-heading-bg: lighten(@gray-darker, 10%); + +@panel-primary-text: #fff; +@panel-primary-border: @brand-primary; +@panel-primary-heading-bg: @brand-primary; + +@panel-success-text: @state-success-text; +@panel-success-border: @state-success-border; +@panel-success-heading-bg: @state-success-bg; + +@panel-warning-text: @state-warning-text; +@panel-warning-border: @state-warning-border; +@panel-warning-heading-bg: @state-warning-bg; + +@panel-danger-text: @state-danger-text; +@panel-danger-border: @state-danger-border; +@panel-danger-heading-bg: @state-danger-bg; + +@panel-info-text: @state-info-text; +@panel-info-border: @state-info-border; +@panel-info-heading-bg: @state-info-bg; + + +// Thumbnails +// ------------------------- +@thumbnail-padding: 4px; +@thumbnail-bg: @body-bg; +@thumbnail-border: #ddd; +@thumbnail-border-radius: @border-radius-base; + +@thumbnail-caption-color: @text-color; +@thumbnail-caption-padding: 9px; + + +// Wells +// ------------------------- +@well-bg: darken(@gray-darker, 5%); + + +// Badges +// ------------------------- +@badge-color: #fff; +@badge-link-hover-color: #fff; +@badge-bg: @brand-primary; + +@badge-active-color: @brand-primary; +@badge-active-bg: #fff; + +@badge-font-weight: bold; +@badge-line-height: 1; +@badge-border-radius: 10px; + + +// Breadcrumbs +// ------------------------- +@breadcrumb-bg: @gray-darker; +@breadcrumb-color: #fff; +@breadcrumb-active-color: @text-color; + + +// Carousel +// ------------------------ + +@carousel-text-shadow: 0 1px 2px rgba(0,0,0,.6); + +@carousel-control-color: #fff; +@carousel-control-width: 15%; +@carousel-control-opacity: .5; +@carousel-control-font-size: 20px; + +@carousel-indicator-active-bg: #fff; +@carousel-indicator-border-color: #fff; + +@carousel-caption-color: #fff; + + +// Close +// ------------------------ +@close-color: #000; +@close-font-weight: bold; +@close-text-shadow: 0 1px 0 #fff; + + +// Code +// ------------------------ +@code-color: #c7254e; +@code-bg: #f9f2f4; + +@pre-bg: #f5f5f5; +@pre-color: @gray-dark; +@pre-border-color: #ccc; +@pre-scrollable-max-height: 340px; + +// Type +// ------------------------ +@text-muted: @gray-light; +@abbr-border-color: @gray-light; +@headings-small-color: @gray-light; +@blockquote-small-color: @gray; +@blockquote-border-color: @gray-dark; +@page-header-border-color: @gray-dark; + +// Miscellaneous +// ------------------------- + +// Hr border color +@hr-border: @gray-dark; + +// Horizontal forms & lists +@component-offset-horizontal: 180px; + + +// Container sizes +// -------------------------------------------------- + +// Small screen / tablet +@container-tablet: ((720px + @grid-gutter-width)); + +// Medium screen / desktop +@container-desktop: ((940px + @grid-gutter-width)); + +// Large screen / wide desktop +@container-lg-desktop: ((1140px + @grid-gutter-width));