mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-11-06 22:29:44 +08:00
renamed scss variables
This commit is contained in:
Adam Bradley
1439
dist/ionic.css
vendored
1439
dist/ionic.css
vendored
File diff suppressed because it is too large
Load Diff
@ -127,6 +127,12 @@
|
||||
<input class="span9" type="text" placeholder="your@email.com">
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-group inset">
|
||||
<label class="input-wrapper row-fluid">
|
||||
<span class="input-label span3">Filter By Name</span>
|
||||
<input class="span9" type="text" placeholder="Enter keywords">
|
||||
</label>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
@ -68,30 +68,6 @@
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
// IE7 inline-block
|
||||
// ----------------
|
||||
@mixin ie7-inline-block() {
|
||||
*display: inline; /* IE7 inline-block hack */
|
||||
*zoom: 1;
|
||||
}
|
||||
|
||||
// IE7 likes to collapse whitespace on either side of the inline-block elements.
|
||||
// Ems because we're attempting to match the width of a space character. Left
|
||||
// version is for form buttons, which typically come after other elements, and
|
||||
// right version is for icons, which come before. Applying both is ok, but it will
|
||||
// mean that space between those elements will be .6em (~2 space characters) in IE7,
|
||||
// instead of the 1 space in other browsers.
|
||||
@mixin ie7-restore-left-whitespace() {
|
||||
*margin-left: .3em;
|
||||
|
||||
&:first-child {
|
||||
*margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin ie7-restore-right-whitespace() {
|
||||
*margin-right: .3em;
|
||||
}
|
||||
|
||||
// Sizing shortcuts
|
||||
// -------------------------
|
||||
@ -105,7 +81,7 @@
|
||||
|
||||
// Placeholder text
|
||||
// -------------------------
|
||||
@mixin placeholder($color: $placeholderText) {
|
||||
@mixin placeholder($color: $input-color-placeholder) {
|
||||
&:-moz-placeholder {
|
||||
color: $color;
|
||||
}
|
||||
@ -126,29 +102,18 @@
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
// CSS image replacement
|
||||
// -------------------------
|
||||
// Source: https://github.com/h5bp/html5-boilerplate/commit/aa0396eae757
|
||||
@mixin hide-text {
|
||||
font: 0/0 a;
|
||||
color: transparent;
|
||||
text-shadow: none;
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
|
||||
// FONTS
|
||||
// --------------------------------------------------
|
||||
|
||||
@mixin font-family-serif() {
|
||||
font-family: $serifFontFamily;
|
||||
font-family: $serif-font-family;
|
||||
}
|
||||
@mixin font-family-sans-serif() {
|
||||
font-family: $sansFontFamily;
|
||||
font-family: $sans-font-family;
|
||||
}
|
||||
@mixin font-family-monospace() {
|
||||
font-family: $monoFontFamily;
|
||||
font-family: $mono-font-family;
|
||||
}
|
||||
@mixin font-shorthand($size: $baseFontSize, $weight: normal, $lineHeight: $baseLineHeight) {
|
||||
font-size: $size;
|
||||
@ -169,53 +134,6 @@
|
||||
}
|
||||
|
||||
|
||||
// FORMS
|
||||
// --------------------------------------------------
|
||||
|
||||
// Block level inputs
|
||||
@mixin input-block-level {
|
||||
display: block;
|
||||
width: 100%;
|
||||
min-height: $inputHeight; // Make inputs at least the height of their button counterpart (base line-height + padding + border)
|
||||
@include box-sizing(border-box); // Makes inputs behave like true block-level elements
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Mixin for form field states
|
||||
@mixin formFieldState($textColor: #555, $borderColor: #ccc, $backgroundColor: #f5f5f5) {
|
||||
// Set the text color
|
||||
.control-label,
|
||||
.help-block,
|
||||
.help-inline {
|
||||
color: $textColor;
|
||||
}
|
||||
// Style inputs accordingly
|
||||
.checkbox,
|
||||
.radio,
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
color: $textColor;
|
||||
}
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
border-color: $borderColor;
|
||||
@include box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); // Redeclare so transitions work
|
||||
&:focus {
|
||||
border-color: darken($borderColor, 10%);
|
||||
@include box-shadow(inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px lighten($borderColor, 20%));
|
||||
}
|
||||
}
|
||||
// Give a small background color for input-prepend/-append
|
||||
.input-prepend .add-on,
|
||||
.input-append .add-on {
|
||||
color: $textColor;
|
||||
background-color: $backgroundColor;
|
||||
border-color: $textColor;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
@ -410,12 +328,6 @@
|
||||
hyphens: $mode;
|
||||
}
|
||||
|
||||
// Opacity
|
||||
@mixin opacity($opacity) {
|
||||
opacity: $opacity / 100;
|
||||
filter: alpha(opacity=$opacity);
|
||||
}
|
||||
|
||||
@mixin box-orient($orientation) {
|
||||
box-orient: $orientation;
|
||||
-webkit-box-orient: $orientation;
|
||||
@ -428,156 +340,6 @@
|
||||
-moz-box-flex: $flex;
|
||||
}
|
||||
|
||||
|
||||
|
||||
// BACKGROUNDS
|
||||
// --------------------------------------------------
|
||||
|
||||
// Add an alphatransparency value to any background or border color (via Elyse Holladay)
|
||||
@mixin translucent-background($color: $white, $alpha: 1) {
|
||||
background-color: hsla(hue($color), saturation($color), lightness($color), $alpha);
|
||||
}
|
||||
|
||||
@mixin translucent-border($color: $white, $alpha: 1) {
|
||||
border-color: hsla(hue($color), saturation($color), lightness($color), $alpha);
|
||||
@include background-clip(padding-box);
|
||||
}
|
||||
|
||||
// Gradient Bar Colors for buttons and alerts
|
||||
@mixin gradientBar($primaryColor, $secondaryColor, $textColor: #fff, $textShadow: 0 -1px 0 rgba(0,0,0,.25)) {
|
||||
color: $textColor;
|
||||
text-shadow: $textShadow;
|
||||
@include gradient-vertical($primaryColor, $secondaryColor);
|
||||
border-color: $secondaryColor $secondaryColor darken($secondaryColor, 15%);
|
||||
border-color: rgba(0,0,0,.1) rgba(0,0,0,.1) fade-in(rgba(0,0,0,.1), 0.15);
|
||||
}
|
||||
|
||||
// Gradients
|
||||
@mixin gradient-horizontal($startColor: #555, $endColor: #333) {
|
||||
background-color: $endColor;
|
||||
background-image: -moz-linear-gradient(left, $startColor, $endColor); // FF 3.6+
|
||||
background-image: -webkit-gradient(linear, 0 0, 100% 0, from($startColor), to($endColor)); // Safari 4+, Chrome 2+
|
||||
background-image: -webkit-linear-gradient(left, $startColor, $endColor); // Safari 5.1+, Chrome 10+
|
||||
background-image: -o-linear-gradient(left, $startColor, $endColor); // Opera 11.10
|
||||
background-image: linear-gradient(to right, $startColor, $endColor); // Standard, IE10
|
||||
background-repeat: repeat-x;
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str($startColor)}', endColorstr='#{ie-hex-str($endColor)}', GradientType=1); // IE9 and down
|
||||
}
|
||||
@mixin gradient-vertical($startColor: #555, $endColor: #333) {
|
||||
background-color: mix($startColor, $endColor, 60%);
|
||||
background-image: -moz-linear-gradient(top, $startColor, $endColor); // FF 3.6+
|
||||
background-image: -webkit-gradient(linear, 0 0, 0 100%, from($startColor), to($endColor)); // Safari 4+, Chrome 2+
|
||||
background-image: -webkit-linear-gradient(top, $startColor, $endColor); // Safari 5.1+, Chrome 10+
|
||||
background-image: -o-linear-gradient(top, $startColor, $endColor); // Opera 11.10
|
||||
background-image: linear-gradient(to bottom, $startColor, $endColor); // Standard, IE10
|
||||
background-repeat: repeat-x;
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str($startColor)}', endColorstr='#{ie-hex-str($endColor)}', GradientType=0); // IE9 and down
|
||||
}
|
||||
@mixin gradient-directional($startColor: #555, $endColor: #333, $deg: 45deg) {
|
||||
background-color: $endColor;
|
||||
background-repeat: repeat-x;
|
||||
background-image: -moz-linear-gradient($deg, $startColor, $endColor); // FF 3.6+
|
||||
background-image: -webkit-linear-gradient($deg, $startColor, $endColor); // Safari 5.1+, Chrome 10+
|
||||
background-image: -o-linear-gradient($deg, $startColor, $endColor); // Opera 11.10
|
||||
background-image: linear-gradient($deg, $startColor, $endColor); // Standard, IE10
|
||||
}
|
||||
@mixin gradient-horizontal-three-colors($startColor: #00b3ee, $midColor: #7a43b6, $colorStop: 50%, $endColor: #c3325f) {
|
||||
background-color: mix($midColor, $endColor, 80%);
|
||||
background-image: -webkit-gradient(left, linear, 0 0, 0 100%, from($startColor), color-stop($colorStop, $midColor), to($endColor));
|
||||
background-image: -webkit-linear-gradient(left, $startColor, $midColor $colorStop, $endColor);
|
||||
background-image: -moz-linear-gradient(left, $startColor, $midColor $colorStop, $endColor);
|
||||
background-image: -o-linear-gradient(left, $startColor, $midColor $colorStop, $endColor);
|
||||
background-image: linear-gradient(to right, $startColor, $midColor $colorStop, $endColor);
|
||||
background-repeat: no-repeat;
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str($startColor)}', endColorstr='#{ie-hex-str($endColor)}', GradientType=0); // IE9 and down, gets no color-stop at all for proper fallback
|
||||
}
|
||||
|
||||
@mixin gradient-vertical-three-colors($startColor: #00b3ee, $midColor: #7a43b6, $colorStop: 50%, $endColor: #c3325f) {
|
||||
background-color: mix($midColor, $endColor, 80%);
|
||||
background-image: -webkit-gradient(linear, 0 0, 0 100%, from($startColor), color-stop($colorStop, $midColor), to($endColor));
|
||||
background-image: -webkit-linear-gradient($startColor, $midColor $colorStop, $endColor);
|
||||
background-image: -moz-linear-gradient(top, $startColor, $midColor $colorStop, $endColor);
|
||||
background-image: -o-linear-gradient($startColor, $midColor $colorStop, $endColor);
|
||||
background-image: linear-gradient($startColor, $midColor $colorStop, $endColor);
|
||||
background-repeat: no-repeat;
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str($startColor)}', endColorstr='#{ie-hex-str($endColor)}', GradientType=0); // IE9 and down, gets no color-stop at all for proper fallback
|
||||
}
|
||||
@mixin gradient-radial($innerColor: #555, $outerColor: #333) {
|
||||
background-color: $outerColor;
|
||||
background-image: -webkit-gradient(radial, center center, 0, center center, 460, from($innerColor), to($outerColor));
|
||||
background-image: -webkit-radial-gradient(circle, $innerColor, $outerColor);
|
||||
background-image: -moz-radial-gradient(circle, $innerColor, $outerColor);
|
||||
background-image: -o-radial-gradient(circle, $innerColor, $outerColor);
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
@mixin gradient-striped($color: #555, $angle: 45deg) {
|
||||
background-color: $color;
|
||||
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: -o-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
|
||||
@mixin reset-filter() {
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
|
||||
}
|
||||
|
||||
|
||||
|
||||
// COMPONENT MIXINS
|
||||
// --------------------------------------------------
|
||||
|
||||
// Horizontal dividers
|
||||
// -------------------------
|
||||
// Dividers (basically an hr) within dropdowns and nav lists
|
||||
@mixin nav-divider($top: #e5e5e5, $bottom: $white) {
|
||||
// IE7 needs a set width since we gave a height. Restricting just
|
||||
// to IE7 to keep the 1px left/right space in other browsers.
|
||||
// It is unclear where IE is getting the extra space that we need
|
||||
// to negative-margin away, but so it goes.
|
||||
*width: 100%;
|
||||
height: 1px;
|
||||
margin: (($baseLineHeight / 2) - 1) 1px; // 8px 1px
|
||||
*margin: -5px 0 5px;
|
||||
overflow: hidden;
|
||||
background-color: $top;
|
||||
border-bottom: 1px solid $bottom;
|
||||
}
|
||||
|
||||
// Button backgrounds
|
||||
// ------------------
|
||||
@mixin buttonBackground($startColor, $endColor, $textColor: #fff, $textShadow: 0 -1px 0 rgba(0,0,0,.25)) {
|
||||
// gradientBar will set the background to a pleasing blend of these, to support IE<=9
|
||||
@include gradientBar($startColor, $endColor, $textColor, $textShadow);
|
||||
*background-color: $endColor; /* Darken IE7 buttons by default so they stand out more given they won't have borders */
|
||||
@include reset-filter();
|
||||
|
||||
// in these cases the gradient won't cover the background, so we override
|
||||
&:hover, &:focus, &:active, &.active, &.disabled, &[disabled] {
|
||||
color: $textColor;
|
||||
background-color: $endColor;
|
||||
*background-color: darken($endColor, 5%);
|
||||
}
|
||||
|
||||
// IE 7 + 8 can't handle box-shadow to show active, so we darken a bit ourselves
|
||||
&:active,
|
||||
&.active {
|
||||
background-color: darken($endColor, 10%) \9;
|
||||
}
|
||||
}
|
||||
|
||||
// Navbar vertical align
|
||||
// -------------------------
|
||||
// Vertically center elements in the navbar.
|
||||
// Example: an element has a height of 30px, so write out `.navbarVerticalAlign(30px);` to calculate the appropriate top margin.
|
||||
@mixin navbarVerticalAlign($elementHeight) {
|
||||
margin-top: ($navbarHeight - $elementHeight) / 2;
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Grid System
|
||||
// -----------
|
||||
|
||||
@ -585,175 +347,125 @@
|
||||
@mixin container-fixed() {
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
padding-left: ($grid-gutter-width / 2);
|
||||
padding-right: ($grid-gutter-width / 2);
|
||||
@include clearfix();
|
||||
}
|
||||
|
||||
// Table columns
|
||||
@mixin tableColumns($columnSpan: 1) {
|
||||
float: none; // undo default grid column styles
|
||||
width: (($gridColumnWidth) * $columnSpan) + ($gridGutterWidth * ($columnSpan - 1)) - 16; // 16 is total padding on left and right of table cells
|
||||
margin-left: 0; // undo default grid column styles
|
||||
}
|
||||
|
||||
// Make a Grid
|
||||
// Use .makeRow and .makeColumn to assign semantic layouts grid system behavior
|
||||
@mixin makeRow() {
|
||||
margin-left: $gridGutterWidth * -1;
|
||||
// Creates a wrapper for a series of columns
|
||||
@mixin make-row($gutter: $grid-gutter-width) {
|
||||
margin-left: ($gutter / -2);
|
||||
margin-right: ($gutter / -2);
|
||||
@include clearfix();
|
||||
}
|
||||
@mixin makeColumn($columns: 1, $offset: 0) {
|
||||
|
||||
// Generate the extra small columns
|
||||
@mixin make-xs-column($columns, $gutter: $grid-gutter-width) {
|
||||
position: relative;
|
||||
float: left;
|
||||
margin-left: ($gridColumnWidth * $offset) + ($gridGutterWidth * ($offset - 1)) + ($gridGutterWidth * 2);
|
||||
width: ($gridColumnWidth * $columns) + ($gridGutterWidth * ($columns - 1));
|
||||
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);
|
||||
}
|
||||
|
||||
// The Grid
|
||||
@mixin grid-core($gridColumnWidth, $gridGutterWidth) {
|
||||
.row {
|
||||
margin-left: $gridGutterWidth * -1;
|
||||
@include clearfix();
|
||||
}
|
||||
// Generate the small columns
|
||||
@mixin 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);
|
||||
|
||||
[class*="span"] {
|
||||
// Calculate width based on number of columns available
|
||||
@media (min-width: $screen-sm) {
|
||||
float: left;
|
||||
min-height: 1px; // prevent collapsing columns
|
||||
margin-left: $gridGutterWidth;
|
||||
}
|
||||
|
||||
// Set the container width, and override it for fixed navbars in media queries
|
||||
.container,
|
||||
.navbar-static-top .container,
|
||||
.navbar-fixed-top .container,
|
||||
.navbar-fixed-bottom .container {
|
||||
@include grid-core-span($gridColumns, $gridColumnWidth, $gridGutterWidth);
|
||||
}
|
||||
|
||||
// generate .spanX and .offsetX
|
||||
@include grid-core-span-x($gridColumns, $gridColumnWidth, $gridGutterWidth);
|
||||
@include grid-core-offset-x($gridColumns, $gridColumnWidth, $gridGutterWidth);
|
||||
}
|
||||
|
||||
@mixin grid-core-span-x($gridColumns, $gridColumnWidth, $gridGutterWidth) {
|
||||
@for $i from 1 through $gridColumns {
|
||||
.span#{$i} { @include grid-core-span($i, $gridColumnWidth, $gridGutterWidth); }
|
||||
width: percentage(($columns / $grid-columns));
|
||||
}
|
||||
}
|
||||
|
||||
@mixin grid-core-offset-x($gridColumns, $gridColumnWidth, $gridGutterWidth) {
|
||||
@for $i from 1 through $gridColumns {
|
||||
.offset#{$i} { @include grid-core-offset($i, $gridColumnWidth, $gridGutterWidth); }
|
||||
// Generate the small column offsets
|
||||
@mixin make-sm-column-offset($columns) {
|
||||
@media (min-width: $screen-sm) {
|
||||
margin-left: percentage(($columns / $grid-columns));
|
||||
}
|
||||
}
|
||||
@mixin make-sm-column-push($columns) {
|
||||
@media (min-width: $screen-sm) {
|
||||
left: percentage(($columns / $grid-columns));
|
||||
}
|
||||
}
|
||||
@mixin make-sm-column-pull($columns) {
|
||||
@media (min-width: $screen-sm) {
|
||||
right: percentage(($columns / $grid-columns));
|
||||
}
|
||||
}
|
||||
|
||||
@mixin grid-core-span($columns, $gridColumnWidth, $gridGutterWidth) {
|
||||
width: ($gridColumnWidth * $columns) + ($gridGutterWidth * ($columns - 1));
|
||||
}
|
||||
// Generate the medium columns
|
||||
@mixin 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);
|
||||
|
||||
@mixin grid-core-offset($columns, $gridColumnWidth, $gridGutterWidth) {
|
||||
margin-left: ($gridColumnWidth * $columns) + ($gridGutterWidth * ($columns + 1));
|
||||
}
|
||||
|
||||
|
||||
|
||||
@mixin grid-fluid($fluidGridColumnWidth, $fluidGridGutterWidth) {
|
||||
.row-fluid {
|
||||
width: 100%;
|
||||
@include clearfix();
|
||||
[class*="span"] {
|
||||
@include input-block-level();
|
||||
float: left;
|
||||
margin-left: $fluidGridGutterWidth;
|
||||
*margin-left: $fluidGridGutterWidth - (.5 / $gridRowWidth * 100px * 1%);
|
||||
}
|
||||
[class*="span"]:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
// Space grid-sized controls properly if multiple per line
|
||||
.controls-row [class*="span"] + [class*="span"] {
|
||||
margin-left: $fluidGridGutterWidth;
|
||||
}
|
||||
|
||||
// generate .spanX and .offsetX
|
||||
@include grid-fluid-span-x($gridColumns, $fluidGridColumnWidth, $fluidGridGutterWidth);
|
||||
@include grid-fluid-offset-x($gridColumns, $fluidGridColumnWidth, $fluidGridGutterWidth);
|
||||
// Calculate width based on number of columns available
|
||||
@media (min-width: $screen-md) {
|
||||
float: left;
|
||||
width: percentage(($columns / $grid-columns));
|
||||
}
|
||||
}
|
||||
|
||||
@mixin grid-fluid-span-x($gridColumns, $fluidGridColumnWidth, $fluidGridGutterWidth) {
|
||||
@for $i from 1 through $gridColumns {
|
||||
.span#{$i} { @include grid-fluid-span($i, $fluidGridColumnWidth, $fluidGridGutterWidth); }
|
||||
// Generate the large column offsets
|
||||
@mixin make-md-column-offset($columns) {
|
||||
@media (min-width: $screen-md) {
|
||||
margin-left: percentage(($columns / $grid-columns));
|
||||
}
|
||||
}
|
||||
@mixin make-md-column-push($columns) {
|
||||
@media (min-width: $screen-md) {
|
||||
left: percentage(($columns / $grid-columns));
|
||||
}
|
||||
}
|
||||
@mixin make-md-column-pull($columns) {
|
||||
@media (min-width: $screen-md) {
|
||||
right: percentage(($columns / $grid-columns));
|
||||
}
|
||||
}
|
||||
|
||||
@mixin grid-fluid-offset-x($gridColumns, $fluidGridColumnWidth, $fluidGridGutterWidth) {
|
||||
@for $i from 1 through $gridColumns {
|
||||
.offset#{$i} { @include grid-fluid-offset($i, $fluidGridColumnWidth, $fluidGridGutterWidth); }
|
||||
.offset#{$i}:first-child { @include grid-fluid-offset-first-child($i, $fluidGridColumnWidth, $fluidGridGutterWidth); }
|
||||
// Generate the large columns
|
||||
@mixin 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));
|
||||
}
|
||||
}
|
||||
|
||||
@mixin grid-fluid-span($columns, $fluidGridColumnWidth, $fluidGridGutterWidth) {
|
||||
width: ($fluidGridColumnWidth * $columns) + ($fluidGridGutterWidth * ($columns - 1));
|
||||
*width: ($fluidGridColumnWidth * $columns) + ($fluidGridGutterWidth * ($columns - 1)) - (.5 / $gridRowWidth * 100px * 1%);
|
||||
}
|
||||
|
||||
@mixin grid-fluid-offset($columns, $fluidGridColumnWidth, $fluidGridGutterWidth) {
|
||||
margin-left: ($fluidGridColumnWidth * $columns) + ($fluidGridGutterWidth * ($columns - 1)) + ($fluidGridGutterWidth * 2);
|
||||
*margin-left: ($fluidGridColumnWidth * $columns) + ($fluidGridGutterWidth * ($columns - 1)) - (.5 / $gridRowWidth * 100px * 1%) + ($fluidGridGutterWidth * 2) - (.5 / $gridRowWidth * 100px * 1%);
|
||||
}
|
||||
|
||||
@mixin grid-fluid-offset-first-child($columns, $fluidGridColumnWidth, $fluidGridGutterWidth) {
|
||||
margin-left: ($fluidGridColumnWidth * $columns) + ($fluidGridGutterWidth * ($columns - 1)) + ($fluidGridGutterWidth);
|
||||
*margin-left: ($fluidGridColumnWidth * $columns) + ($fluidGridGutterWidth * ($columns - 1)) - (.5 / $gridRowWidth * 100px * 1%) + $fluidGridGutterWidth - (.5 / $gridRowWidth * 100px * 1%);
|
||||
}
|
||||
|
||||
|
||||
|
||||
@mixin grid-input($gridColumnWidth, $gridGutterWidth) {
|
||||
input,
|
||||
textarea,
|
||||
.uneditable-input {
|
||||
margin-left: 0; // override margin-left from core grid system
|
||||
}
|
||||
|
||||
// Space grid-sized controls properly if multiple per line
|
||||
.controls-row [class*="span"] + [class*="span"] {
|
||||
margin-left: $gridGutterWidth;
|
||||
}
|
||||
|
||||
// generate .spanX
|
||||
@include grid-input-span-x($gridColumns, $gridColumnWidth, $gridGutterWidth);
|
||||
}
|
||||
|
||||
@mixin grid-input-span-x($gridColumns, $gridColumnWidth, $gridGutterWidth) {
|
||||
@for $i from 1 through $gridColumns {
|
||||
input.span#{$i},
|
||||
textarea.span#{$i},
|
||||
.uneditable-input.span#{$i} {
|
||||
@include grid-input-span($i, $gridColumnWidth, $gridGutterWidth);
|
||||
}
|
||||
// Generate the large column offsets
|
||||
@mixin make-lg-column-offset($columns) {
|
||||
@media (min-width: $screen-lg) {
|
||||
margin-left: percentage(($columns / $grid-columns));
|
||||
}
|
||||
}
|
||||
|
||||
@mixin grid-input-span($columns, $gridColumnWidth, $gridGutterWidth) {
|
||||
width: (($gridColumnWidth) * $columns) + ($gridGutterWidth * ($columns - 1)) - 14;
|
||||
}
|
||||
|
||||
@mixin 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;
|
||||
}
|
||||
@mixin make-lg-column-push($columns) {
|
||||
@media (min-width: $screen-lg) {
|
||||
left: percentage(($columns / $grid-columns));
|
||||
}
|
||||
}
|
||||
@mixin make-lg-column-pull($columns) {
|
||||
@media (min-width: $screen-lg) {
|
||||
right: percentage(($columns / $grid-columns));
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -1,92 +1,133 @@
|
||||
// Components
|
||||
// -------------------------
|
||||
// Based on 14px font-size and 1.428 line-height (~20px to start)
|
||||
|
||||
$padding-base-vertical: 6px !default;
|
||||
$padding-base-horizontal: 12px !default;
|
||||
|
||||
$padding-large-vertical: 10px !default;
|
||||
$padding-large-horizontal: 16px !default;
|
||||
|
||||
$padding-small-vertical: 5px !default;
|
||||
$padding-small-horizontal: 10px !default;
|
||||
|
||||
$line-height-large: 1.33 !default;
|
||||
$line-height-small: 1.5 !default;
|
||||
|
||||
$border-radius-base: 4px !default;
|
||||
$border-radius-large: 6px !default;
|
||||
$border-radius-small: 3px !default;
|
||||
|
||||
$caret-width-base: 4px !default;
|
||||
$caret-width-large: 5px !default;
|
||||
|
||||
|
||||
// Typography
|
||||
// -------------------------------
|
||||
$baseFontSize: 14px !default;
|
||||
$fontSizeLarge: ceil($baseFontSize * 1.25);
|
||||
$baseLineHeight: 1.428571429; // 20/14
|
||||
$baseLineHeightComputed: floor($baseFontSize * $baseLineHeight); // ~20px
|
||||
$lineHeightComputed: $baseLineHeightComputed;
|
||||
$baseBorderRadius: 2px !default;
|
||||
// -------------------------
|
||||
|
||||
$font-family-sans-serif: "Helvetica Neue", Helvetica, Arial, sans-serif !default;
|
||||
$font-family-serif: Georgia, "Times New Roman", Times, serif !default;
|
||||
$font-family-monospace: Monaco, Menlo, Consolas, "Courier New", monospace !default;
|
||||
$font-family-base: $font-family-sans-serif !default;
|
||||
|
||||
$font-size-base: 14px !default;
|
||||
$font-size-large: ceil($font-size-base * 1.25) !default; // ~18px
|
||||
$font-size-small: ceil($font-size-base * 0.85) !default; // ~12px
|
||||
|
||||
$line-height-base: 1.428571429 !default; // 20/14
|
||||
$line-height-computed: floor($font-size-base * $line-height-base) !default; // ~20px
|
||||
|
||||
$headings-font-family: $font-family-base !default;
|
||||
$headings-font-weight: 500 !default;
|
||||
$headings-line-height: 1.1 !default;
|
||||
|
||||
|
||||
// Content stuff
|
||||
// -------------------------------
|
||||
$contentPadding: 10px;
|
||||
$insetMargin: 10px;
|
||||
$roundedRadius: 5px;
|
||||
$content-padding: 10px;
|
||||
$inset-margin: 10px;
|
||||
$border-radius-base: 4px !default;
|
||||
$border-radius-large: 6px !default;
|
||||
$border-radius-small: 3px !default;
|
||||
|
||||
|
||||
// Bar stuff
|
||||
// -------------------------------
|
||||
$barHeight: 44px !default;
|
||||
$barLineHeight: 44px !default;
|
||||
$barButtonLineHeight: 23px !default;
|
||||
$barButtonBarLineHeight: 18px !default;
|
||||
$barTitleFontSize: $fontSizeLarge;
|
||||
$barTitleLineHeightComputed: 26px;//$barHeight - 2;
|
||||
$barPaddingPortrait: 5px;
|
||||
$barPaddingLandscape: 5px;
|
||||
$bar-height: 44px !default;
|
||||
$bar-button-line-height: 23px !default;
|
||||
$bar-button-bar-line-height: 18px !default;
|
||||
$bar-title-font-size: $font-size-large;
|
||||
$bar-padding-portrait: 5px;
|
||||
$bar-padding-landscape: 5px;
|
||||
|
||||
|
||||
// Button bar stuff
|
||||
// -------------------------------
|
||||
$buttonBarButtonLineHeight: 15px !default;
|
||||
$button-bar-button-line-height: 15px !default;
|
||||
|
||||
|
||||
// Forms
|
||||
// -------------------------------
|
||||
$textInputBorderRadius: 2px;
|
||||
|
||||
|
||||
// Horizontal forms & lists
|
||||
// -------------------------------
|
||||
$horizontalComponentOffset: 180px !default;
|
||||
$input-height-base: ($line-height-computed + ($padding-base-vertical * 2) + 2) !default;
|
||||
$input-height-large: (floor($font-size-large * $line-height-large) + ($padding-large-vertical * 2) + 2) !default;
|
||||
$input-height-small: (floor($font-size-small * $line-height-small) + ($padding-small-vertical * 2) + 2) !default;
|
||||
|
||||
|
||||
// Lists
|
||||
// -------------------------------
|
||||
$listItemBorder: 1px solid #ddd;
|
||||
$list-item-border: 1px solid #ddd;
|
||||
|
||||
|
||||
// Menus
|
||||
// -------------------------------
|
||||
$menuWidth: 270px;
|
||||
$menuAnimationSpeed: 200ms;
|
||||
$menuBackgroundColor: #eee;
|
||||
$menuInsetBorderColor: #bbb;
|
||||
$menu-width: 270px;
|
||||
$menu-animation-speed: 200ms;
|
||||
|
||||
|
||||
// GRID
|
||||
// Media queries breakpoints
|
||||
// -------------------------------
|
||||
|
||||
// Extra small screen / phone
|
||||
$screen-xs: 480px !default;
|
||||
$screen-phone: $screen-xs !default;
|
||||
|
||||
// Default 940px grid
|
||||
// Small screen / tablet
|
||||
$screen-sm: 768px !default;
|
||||
$screen-tablet: $screen-sm !default;
|
||||
|
||||
// Medium screen / desktop
|
||||
$screen-md: 992px !default;
|
||||
$screen-desktop: $screen-md !default;
|
||||
|
||||
// Large screen / wide desktop
|
||||
$screen-lg: 1200px !default;
|
||||
$screen-lg-desktop: $screen-lg !default;
|
||||
|
||||
// So media queries don't overlap when required, provide a maximum
|
||||
$screen-xs-max: ($screen-sm - 1) !default;
|
||||
$screen-sm-max: ($screen-md - 1) !default;
|
||||
$screen-md-max: ($screen-lg - 1) !default;
|
||||
|
||||
|
||||
// Grid system
|
||||
// -------------------------------
|
||||
$gridColumns: 12 !default;
|
||||
$gridColumnWidth: 60px !default;
|
||||
$gridGutterWidth: 20px !default;
|
||||
$gridRowWidth: ($gridColumns * $gridColumnWidth) + ($gridGutterWidth * ($gridColumns - 1)) !default;
|
||||
|
||||
// 1200px min
|
||||
$gridColumnWidth1200: 70px !default;
|
||||
$gridGutterWidth1200: 30px !default;
|
||||
$gridRowWidth1200: ($gridColumns * $gridColumnWidth1200) + ($gridGutterWidth1200 * ($gridColumns - 1)) !default;
|
||||
|
||||
// 768px-979px
|
||||
$gridColumnWidth768: 42px !default;
|
||||
$gridGutterWidth768: 20px !default;
|
||||
$gridRowWidth768: ($gridColumns * $gridColumnWidth768) + ($gridGutterWidth768 * ($gridColumns - 1)) !default;
|
||||
// Number of columns in the grid system
|
||||
$grid-columns: 12 !default;
|
||||
// Padding, to be divided by two and applied to the left and right of all columns
|
||||
$grid-gutter-width: 30px !default;
|
||||
// Point at which the navbar stops collapsing
|
||||
$grid-float-breakpoint: $screen-tablet !default;
|
||||
|
||||
|
||||
// Fluid grid
|
||||
// Container sizes
|
||||
// -------------------------------
|
||||
$fluidGridColumnWidth: percentage($gridColumnWidth/$gridRowWidth) !default;
|
||||
$fluidGridGutterWidth: percentage($gridGutterWidth/$gridRowWidth) !default;
|
||||
|
||||
// 1200px min
|
||||
$fluidGridColumnWidth1200: percentage($gridColumnWidth1200/$gridRowWidth1200) !default;
|
||||
$fluidGridGutterWidth1200: percentage($gridGutterWidth1200/$gridRowWidth1200) !default;
|
||||
// Small screen / tablet
|
||||
$container-tablet: ((720px + $grid-gutter-width)) !default;
|
||||
|
||||
// Medium screen / desktop
|
||||
$container-desktop: ((940px + $grid-gutter-width)) !default;
|
||||
|
||||
// Large screen / wide desktop
|
||||
$container-lg-desktop: ((1140px + $grid-gutter-width)) !default;
|
||||
|
||||
// 768px-979px
|
||||
$fluidGridColumnWidth768: percentage($gridColumnWidth768/$gridRowWidth768) !default;
|
||||
$fluidGridGutterWidth768: percentage($gridGutterWidth768/$gridRowWidth768) !default;
|
||||
|
||||
@ -1,169 +1,174 @@
|
||||
|
||||
// Brand Colors
|
||||
// -------------------------------
|
||||
$brandPrimary: #428bca;
|
||||
$brandSuccess: #5cb85c;
|
||||
$brandWarning: #f0ad4e;
|
||||
$brandDanger: #d9534f;
|
||||
$brandInfo: #5bc0de;
|
||||
$brand-primary: #428bca;
|
||||
$brand-success: #5cb85c;
|
||||
$brand-warning: #f0ad4e;
|
||||
$brand-danger: #d9534f;
|
||||
$brand-info: #5bc0de;
|
||||
|
||||
|
||||
// Global Gray Colors
|
||||
// -------------------------------
|
||||
$black: #000 !default;
|
||||
$grayDarker: #222 !default;
|
||||
$grayDark: #333 !default;
|
||||
$gray: #555 !default;
|
||||
$grayLight: #999 !default;
|
||||
$grayLighter: #f5f5f5 !default;
|
||||
$gray-darker: lighten(#000, 13.5%) !default; // #222
|
||||
$gray-dark: lighten(#000, 20%) !default; // #333
|
||||
$gray: lighten(#000, 33.5%) !default; // #555
|
||||
$gray-light: lighten(#000, 60%) !default; // #999
|
||||
$gray-lighter: lighten(#000, 93.5%) !default; // #eee
|
||||
$white: #fff !default;
|
||||
|
||||
|
||||
// Global Accent Colors
|
||||
// -------------------------------
|
||||
$blue: #049cdb !default;
|
||||
$blueDark: #0064cd !default;
|
||||
$green: #46a546 !default;
|
||||
$red: #9d261d !default;
|
||||
$yellow: #ffc40d !default;
|
||||
$orange: #f89406 !default;
|
||||
$pink: #c3325f !default;
|
||||
$purple: #7a43b6 !default;
|
||||
$blue: #049cdb !default;
|
||||
$blue-dark: #0064cd !default;
|
||||
$green: #46a546 !default;
|
||||
$red: #9d261d !default;
|
||||
$yellow: #ffc40d !default;
|
||||
$orange: #f89406 !default;
|
||||
$pink: #c3325f !default;
|
||||
$purple: #7a43b6 !default;
|
||||
|
||||
$component-active-bg: $brand-primary !default;
|
||||
|
||||
|
||||
// Global Fonts
|
||||
// -------------------------------
|
||||
$sansFontFamily: "Helvetica Neue", Helvetica, Arial, sans-serif !default;
|
||||
$lightSansFontFamily: "Helvetica Neue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif !default;
|
||||
$serifFontFamily: Georgia, "Times New Roman", Times, serif !default;
|
||||
$monoFontFamily: Monaco, Menlo, Consolas, "Courier New", monospace !default;
|
||||
$sans-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !default;
|
||||
$light-sans-font-family: "Helvetica Neue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif !default;
|
||||
$serif-font-family: Georgia, "Times New Roman", Times, serif !default;
|
||||
$mono-font-family: Monaco, Menlo, Consolas, "Courier New", monospace !default;
|
||||
|
||||
|
||||
// Base
|
||||
// -------------------------------
|
||||
$baseFontFamily: $sansFontFamily;
|
||||
$baseBackgroundColor: $white;
|
||||
$textColor: $grayDark !default;
|
||||
$base-font-family: $sans-font-family;
|
||||
$base-background-color: $white;
|
||||
|
||||
|
||||
// Forms
|
||||
// -------------------------------
|
||||
$inputBackground: $white !default;
|
||||
$inputBorderColor: #bbb !default;
|
||||
$inputBorderWidth: 1px !default;
|
||||
$inputBorderRadius: 2px !default;
|
||||
$inputDisabledBackground: $grayLighter !default;
|
||||
$formActionsBackground: $grayLighter !default;
|
||||
$inputHeight: $baseFontSize + 10px; // base line-height + 8px vertical padding + 2px top/bottom border
|
||||
$placeholderText: $grayLight !default;
|
||||
$input-bg: $white !default;
|
||||
$input-bg-disabled: $gray-lighter !default;
|
||||
|
||||
$input-color: $gray !default;
|
||||
$input-border-color: #ccc !default;
|
||||
$input-border-width: 1px !default;
|
||||
$input-border-radius: $border-radius-base !default;
|
||||
$input-border-focus: #66afe9 !default;
|
||||
|
||||
$input-color-placeholder: $gray-light !default;
|
||||
|
||||
$legend-color: $gray-dark !default;
|
||||
$legend-border-color: #e5e5e5 !default;
|
||||
|
||||
$input-group-addon-bg: $gray-lighter !default;
|
||||
$input-group-addon-border-color: $input-border-color !default;
|
||||
|
||||
// Typography
|
||||
// -------------------------------
|
||||
$lightColor: #fff;
|
||||
$darkColor: #333;
|
||||
|
||||
|
||||
// Buttons
|
||||
// -------------------------------
|
||||
$buttonColor: #222;
|
||||
$buttonPadding: 12px 12px;
|
||||
$buttonClearPadding: 10px 0px;
|
||||
$buttonBorderRadius: 2px;
|
||||
$buttonBorderWidth: 1px;
|
||||
$buttonFontSize: 16px;
|
||||
$button-color: #222;
|
||||
$button-padding: 12px 12px;
|
||||
$button-clear-padding: 10px 0px;
|
||||
$button-border-radius: 2px;
|
||||
$button-border-width: 1px;
|
||||
$button-font-size: 16px;
|
||||
|
||||
// Button block that has spacing
|
||||
$buttonBlockMargin: 10px 0 10px 0;
|
||||
$button-block-margin: 10px 0 10px 0;
|
||||
|
||||
$buttonDefaultBackground: #fff;
|
||||
$buttonDefaultBackgroundActive: #eee;
|
||||
$buttonDefaultBorder: #ddd;
|
||||
$button-default-bg: #fff;
|
||||
$button-default-bg-active: #eee;
|
||||
$buttonDefaultBorder: #ddd;
|
||||
|
||||
$buttonSecondaryBackground: #f5f5f5;
|
||||
$buttonSecondaryBackgroundActive: #eee;
|
||||
$buttonSecondaryBorder: #ccc;
|
||||
$button-secondary-bg: #f5f5f5;
|
||||
$button-secondary-bg-active: #eee;
|
||||
$button-secondary-border: #ccc;
|
||||
|
||||
$buttonPrimaryBackground: #6999e9;
|
||||
$buttonPrimaryBackgroundActive: #eee;
|
||||
$buttonPrimaryBorder: #5981c5;
|
||||
$button-primary-bg: #6999e9;
|
||||
$button-primary-bg-active: #eee;
|
||||
$button-primary-border: #5981c5;
|
||||
|
||||
$buttonInfoBackground: #60d2e6;
|
||||
$buttonInfoBackgroundActive: #eee;
|
||||
$buttonInfoBorder: #51b3c4;
|
||||
$button-info-bg: #60d2e6;
|
||||
$button-info-bg-active: #eee;
|
||||
$button-info-border: #51b3c4;
|
||||
|
||||
$buttonSuccessBackground: #89c163;
|
||||
$buttonSuccessBackgroundActive: #eee;
|
||||
$buttonSuccessBorder: #71a052;
|
||||
$button-success-bg: #89c163;
|
||||
$button-success-bg-active: #eee;
|
||||
$button-success-border: #71a052;
|
||||
|
||||
$buttonWarningBackground: #f0b840;
|
||||
$buttonWarningBackgroundActive: #eee;
|
||||
$buttonWarningBorder: #cf9a29;
|
||||
$button-warning-bg: #f0b840;
|
||||
$button-warning-bg-active: #eee;
|
||||
$button-warning-border: #cf9a29;
|
||||
|
||||
$buttonDangerBackground: #de5645;
|
||||
$buttonDangerBackgroundActive: #eee;
|
||||
$buttonDangerBorder: #bc4435;
|
||||
$button-danger-bg: #de5645;
|
||||
$button-danger-bg-active: #eee;
|
||||
$buttonDangerBorder: #bc4435;
|
||||
|
||||
$buttonDarkBackground: #444;
|
||||
$buttonDarkBackgroundActive: #eee;
|
||||
$buttonDarkBorder: #111;
|
||||
$button-dark-bg: #444;
|
||||
$button-dark-bg-active: #eee;
|
||||
$button-dark-border: #111;
|
||||
|
||||
|
||||
// Bars
|
||||
// -------------------------------
|
||||
$barBackground: white;
|
||||
$bar-bg: #fff;
|
||||
|
||||
// Bar variations
|
||||
$barDefaultBackground: #fff;
|
||||
$barDefaultBorderColor: #ddd;
|
||||
$bar-default-bg: #fff;
|
||||
$bar-default-border-color: #ddd;
|
||||
|
||||
$barSecondaryBackground: #f5f5f5;
|
||||
$barSecondaryBorderColor: #ccc;
|
||||
$bar-secondary-bg: #f5f5f5;
|
||||
$bar-secondary-border-color: #ccc;
|
||||
|
||||
$barPrimaryBackground: #6999e9;
|
||||
$barPrimaryBorderColor: #5981c5;
|
||||
$bar-primary-bg: #6999e9;
|
||||
$bar-primary-border-color: #5981c5;
|
||||
|
||||
$barInfoBackground: #60d2e6;
|
||||
$barInfoBorderColor: #51b3c4;
|
||||
$bar-info-bg: #60d2e6;
|
||||
$bar-info-border-color: #51b3c4;
|
||||
|
||||
$barSuccessBackground: #89c163;
|
||||
$barSuccessBorderColor: #71a052;
|
||||
$bar-success-bg: #89c163;
|
||||
$bar-success-border-color: #71a052;
|
||||
|
||||
$barWarningBackground: #f0b840;
|
||||
$barWarningBorderColor: #cf9a29;
|
||||
$bar-warning-bg: #f0b840;
|
||||
$bar-warning-border-color: #cf9a29;
|
||||
|
||||
$barDangerBackground: #de5645;
|
||||
$barDangerBorderColor: #bc4435;
|
||||
$bar-danger-bg: #de5645;
|
||||
$bar-danger-border-color: #bc4435;
|
||||
|
||||
$barDarkBackground: #444;
|
||||
$barDarkBorderColor: #111;
|
||||
$bar-dark-bg: #444;
|
||||
$bar-dark-border-color: #111;
|
||||
|
||||
|
||||
// Lists
|
||||
// -------------------------------
|
||||
$listDividerBackground: #f5f5f5;
|
||||
$listDividerColor: #222;
|
||||
$list-divider-bg: #f5f5f5;
|
||||
$list-divider-color: #222;
|
||||
|
||||
|
||||
// Form states and alerts
|
||||
// Form States and Alerts
|
||||
// -------------------------------
|
||||
$warningText: #c09853;
|
||||
$warningBackground: #fcf8e3;
|
||||
$warningBorder: darken(adjust-hue($warningBackground, -10), 3%);
|
||||
$warning-text: #c09853;
|
||||
$warning-bg: #fcf8e3;
|
||||
$warning-border: darken(adjust-hue($warning-bg, -10), 3%);
|
||||
|
||||
$errorText: #b94a48;
|
||||
$errorBackground: #f2dede;
|
||||
$errorBorder: darken(adjust-hue($errorBackground, -10), 3%);
|
||||
$error-text: #b94a48;
|
||||
$error-bg: #f2dede;
|
||||
$error-border: darken(adjust-hue($error-bg, -10), 3%);
|
||||
|
||||
$successText: #468847;
|
||||
$successBackground: #dff0d8;
|
||||
$successBorder: darken(adjust-hue($successBackground, -10), 5%);
|
||||
$success-text: #468847;
|
||||
$success-bg: #dff0d8;
|
||||
$success-border: darken(adjust-hue($success-bg, -10), 5%);
|
||||
|
||||
$infoText: #3a87ad;
|
||||
$infoBackground: #d9edf7;
|
||||
$infoBorder: darken(adjust-hue($infoBackground, -10), 7%);
|
||||
$info-text: #3a87ad;
|
||||
$info-bg: #d9edf7;
|
||||
$info-border: darken(adjust-hue($info-bg, -10), 7%);
|
||||
|
||||
|
||||
// Panels
|
||||
// Side Menu
|
||||
// -------------------------------
|
||||
$menuBackgroundColor: #eee;
|
||||
$menuInsetBorderColor: #bbb;
|
||||
$menu-bg: #eee;
|
||||
$menu-inset-border-color: #bbb;
|
||||
|
||||
@ -18,7 +18,7 @@
|
||||
position: relative;
|
||||
top: -2px;
|
||||
right: -21px;
|
||||
line-height: $baseLineHeight;
|
||||
line-height: $line-height-base;
|
||||
}
|
||||
|
||||
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
|
||||
// Use Flexbox for our header and footer bars
|
||||
.bar {
|
||||
@include disable-user-select();
|
||||
@include user-select(none);
|
||||
|
||||
display: -webkit-box;
|
||||
display: box;
|
||||
@ -11,8 +11,8 @@
|
||||
right: 0;
|
||||
z-index: 10;
|
||||
width: 100%;
|
||||
height: $barHeight;
|
||||
padding: $barPaddingPortrait;
|
||||
height: $bar-height;
|
||||
padding: $bar-padding-portrait;
|
||||
box-sizing: border-box;
|
||||
|
||||
|
||||
@ -26,7 +26,7 @@
|
||||
left: 0;
|
||||
right: 0;
|
||||
|
||||
line-height: $barHeight;
|
||||
line-height: $bar-height;
|
||||
|
||||
margin: 0;
|
||||
//padding: $barPaddingVertical 0px;
|
||||
@ -38,7 +38,7 @@
|
||||
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
font-size: $barTitleFontSize;
|
||||
font-size: $bar-title-font-size;
|
||||
|
||||
}
|
||||
|
||||
@ -49,12 +49,12 @@
|
||||
|
||||
.button {
|
||||
@include box-flex(0);
|
||||
line-height: $barButtonLineHeight;
|
||||
line-height: $bar-button-line-height;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.button-bar {
|
||||
line-height: $barButtonBarLineHeight;
|
||||
line-height: $bar-button-bar-line-height;
|
||||
}
|
||||
|
||||
.button-bar + .button, .button + .button-bar {
|
||||
@ -88,19 +88,19 @@
|
||||
}
|
||||
|
||||
.bar-header-secondary {
|
||||
top: $barHeight;
|
||||
top: $bar-height;
|
||||
}
|
||||
.bar-footer-secondary {
|
||||
bottom: $barHeight;
|
||||
bottom: $bar-height;
|
||||
}
|
||||
|
||||
/* Pad top/bottom of content so it doesn't hide behind .bar-title and .bar-tab.
|
||||
Note: For these to work, content must come after both bars in the markup */
|
||||
.has-header {
|
||||
top: $barHeight;
|
||||
top: $bar-height;
|
||||
}
|
||||
|
||||
.has-footer {
|
||||
bottom: $barHeight;
|
||||
bottom: $bar-height;
|
||||
}
|
||||
|
||||
|
||||
@ -3,8 +3,7 @@
|
||||
// Make sure iOS Safari doesn't scale fonts on orientation changes
|
||||
html {
|
||||
-webkit-text-size-adjust: 100%;
|
||||
|
||||
@include disable-user-select();
|
||||
@include user-select(none);
|
||||
}
|
||||
|
||||
body {
|
||||
@ -46,15 +45,15 @@ body {
|
||||
}
|
||||
|
||||
.content-padded {
|
||||
padding: $contentPadding;
|
||||
padding: $content-padding;
|
||||
}
|
||||
|
||||
.inset {
|
||||
margin: $insetMargin;
|
||||
margin: $inset-margin;
|
||||
}
|
||||
|
||||
.rounded {
|
||||
border-radius: $roundedRadius;
|
||||
border-radius: $border-radius-base;
|
||||
}
|
||||
|
||||
// Remove tap highlight color on Safari
|
||||
|
||||
@ -76,7 +76,7 @@
|
||||
@include box-flex(1);
|
||||
// Fix for box-flex width issue
|
||||
|
||||
line-height: $buttonBarButtonLineHeight;
|
||||
line-height: $button-bar-button-line-height;
|
||||
border-radius: 0;
|
||||
|
||||
overflow: hidden;
|
||||
|
||||
@ -7,7 +7,7 @@
|
||||
margin: 0;
|
||||
|
||||
&.button-block {
|
||||
margin: $buttonBlockMargin;
|
||||
margin: $button-block-margin;
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
|
||||
// Make all forms have space below them
|
||||
form {
|
||||
margin: 0 0 $baseLineHeight;
|
||||
margin: 0 0 $line-height-base;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
@ -18,17 +18,17 @@ legend {
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
margin-bottom: $baseLineHeight;
|
||||
font-size: $baseFontSize * 1.5;
|
||||
line-height: $baseLineHeight * 2;
|
||||
color: $grayDark;
|
||||
margin-bottom: $line-height-base;
|
||||
font-size: $font-size-base * 1.5;
|
||||
line-height: $line-height-base * 2;
|
||||
color: $gray-dark;
|
||||
border: 0;
|
||||
border-bottom: 1px solid #e5e5e5;
|
||||
|
||||
// Small
|
||||
small {
|
||||
font-size: $baseLineHeight * .75;
|
||||
color: $grayLight;
|
||||
font-size: $line-height-base * .75;
|
||||
color: $gray-light;
|
||||
}
|
||||
}
|
||||
|
||||
@ -38,34 +38,34 @@ input,
|
||||
button,
|
||||
select,
|
||||
textarea {
|
||||
@include font-shorthand($baseFontSize, normal, $baseLineHeight); // Set size, weight, line-height here
|
||||
@include font-shorthand($font-size-base, normal, $line-height-base); // Set size, weight, line-height here
|
||||
}
|
||||
input,
|
||||
button,
|
||||
select,
|
||||
textarea {
|
||||
font-family: $baseFontFamily; // And only set font-family here for those that need it (note the missing label element)
|
||||
font-family: $base-font-family; // And only set font-family here for those that need it (note the missing label element)
|
||||
}
|
||||
|
||||
.form-group {
|
||||
border-top: $inputBorderWidth solid $inputBorderColor;
|
||||
border-bottom: $inputBorderWidth solid $inputBorderColor;
|
||||
background-color: $inputBackground;
|
||||
border-top: $input-border-width solid $input-border-color;
|
||||
border-bottom: $input-border-width solid $input-border-color;
|
||||
background-color: $input-bg;
|
||||
overflow: hidden;
|
||||
}
|
||||
.content-padded > .form-group,
|
||||
.form-group.inset {
|
||||
border-left: $inputBorderWidth solid $inputBorderColor;
|
||||
border-right: $inputBorderWidth solid $inputBorderColor;
|
||||
@include border-radius($inputBorderRadius);
|
||||
border-left: $input-border-width solid $input-border-color;
|
||||
border-right: $input-border-width solid $input-border-color;
|
||||
@include border-radius($input-border-radius);
|
||||
}
|
||||
|
||||
.form-group .input-wrapper + .input-wrapper {
|
||||
border-top: $inputBorderWidth solid $inputBorderColor;
|
||||
border-top: $input-border-width solid $input-border-color;
|
||||
}
|
||||
|
||||
.form-group + .form-group {
|
||||
margin-top: $contentPadding;
|
||||
margin-top: $content-padding;
|
||||
}
|
||||
|
||||
.input-wrapper {
|
||||
@ -82,7 +82,7 @@ textarea {
|
||||
|
||||
.input-label {
|
||||
font-weight: bold;
|
||||
line-height: $baseLineHeightComputed + $baseFontSize;
|
||||
line-height: $line-height-computed + $font-size-base;
|
||||
}
|
||||
}
|
||||
|
||||
@ -93,11 +93,11 @@ textarea {
|
||||
}
|
||||
|
||||
.form-group.stacked-label input {
|
||||
border: $inputBorderWidth solid $inputBorderColor;
|
||||
background-color: $inputBackground;
|
||||
border: $input-border-width solid $input-border-color;
|
||||
background-color: $input-bg;
|
||||
padding: 4px 8px 3px;
|
||||
overflow: hidden;
|
||||
@include border-radius($inputBorderRadius);
|
||||
@include border-radius($input-border-radius);
|
||||
}
|
||||
|
||||
|
||||
@ -123,9 +123,9 @@ input[type="tel"],
|
||||
input[type="color"],
|
||||
.uneditable-input {
|
||||
display: inline-block;
|
||||
height: $baseLineHeightComputed + $baseFontSize;
|
||||
font-size: $baseFontSize;
|
||||
line-height: $baseLineHeightComputed;
|
||||
height: $line-height-computed + $font-size-base;
|
||||
font-size: $font-size-base;
|
||||
line-height: $line-height-computed;
|
||||
color: $gray;
|
||||
vertical-align: middle;
|
||||
}
|
||||
@ -191,15 +191,15 @@ input[type="checkbox"] {
|
||||
// Set the height of select and file controls to match text inputs
|
||||
select,
|
||||
input[type="file"] {
|
||||
height: $inputHeight; /* In IE7, the height of the select element cannot be changed by height, only font-size */
|
||||
line-height: $inputHeight;
|
||||
height: $input-height-base; /* In IE7, the height of the select element cannot be changed by height, only font-size */
|
||||
line-height: $input-height-base;
|
||||
}
|
||||
|
||||
// Make select elements obey height by applying a border
|
||||
select {
|
||||
width: 220px; // default input width + 10px of padding that doesn't get applied
|
||||
border: $inputBorderWidth solid $inputBorderColor;
|
||||
background-color: $inputBackground; // Chrome on Linux and Mobile Safari need background-color
|
||||
border: $input-border-width solid $input-border-color;
|
||||
background-color: $input-bg; // Chrome on Linux and Mobile Safari need background-color
|
||||
}
|
||||
|
||||
// Make multiple select elements height not fixed
|
||||
@ -217,31 +217,6 @@ input[type="checkbox"]:focus {
|
||||
}
|
||||
|
||||
|
||||
// Uneditable inputs
|
||||
// -------------------------------
|
||||
|
||||
// Make uneditable inputs look inactive
|
||||
.uneditable-input,
|
||||
.uneditable-textarea {
|
||||
color: $grayLight;
|
||||
background-color: darken($inputBackground, 1%);
|
||||
border-color: $inputBorderColor;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
// For text that needs to appear as an input but should not be an input
|
||||
.uneditable-input {
|
||||
overflow: hidden; // prevent text from wrapping, but still cut it off like an input does
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
// Make uneditable textareas behave like a textarea
|
||||
.uneditable-textarea {
|
||||
width: auto;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
|
||||
// Placeholder
|
||||
// -------------------------------
|
||||
input,
|
||||
@ -250,111 +225,9 @@ textarea {
|
||||
}
|
||||
|
||||
|
||||
// CHECKBOXES & RADIOS
|
||||
// -------------------------------
|
||||
|
||||
// Indent the labels to position radios/checkboxes as hanging
|
||||
.radio,
|
||||
.checkbox {
|
||||
min-height: $baseLineHeight; // clear the floating input if there is no label text
|
||||
padding-left: 20px;
|
||||
}
|
||||
.radio input[type="radio"],
|
||||
.checkbox input[type="checkbox"] {
|
||||
float: left;
|
||||
margin-left: -20px;
|
||||
}
|
||||
|
||||
// Move the options list down to align with labels
|
||||
.controls > .radio:first-child,
|
||||
.controls > .checkbox:first-child {
|
||||
padding-top: 5px; // has to be padding because margin collaspes
|
||||
}
|
||||
|
||||
// Radios and checkboxes on same line
|
||||
// TODO v3: Convert .inline to .control-inline
|
||||
.radio.inline,
|
||||
.checkbox.inline {
|
||||
display: inline-block;
|
||||
padding-top: 5px;
|
||||
margin-bottom: 0;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.radio.inline + .radio.inline,
|
||||
.checkbox.inline + .checkbox.inline {
|
||||
margin-left: 10px; // space out consecutive inline controls
|
||||
}
|
||||
|
||||
|
||||
|
||||
// INPUT SIZES
|
||||
// -------------------------------
|
||||
|
||||
// General classes for quick sizes
|
||||
.input-mini { width: 60px; }
|
||||
.input-small { width: 90px; }
|
||||
.input-medium { width: 150px; }
|
||||
.input-large { width: 210px; }
|
||||
.input-xlarge { width: 270px; }
|
||||
.input-xxlarge { width: 530px; }
|
||||
|
||||
// Grid style input sizes
|
||||
input[class*="span"],
|
||||
select[class*="span"],
|
||||
textarea[class*="span"],
|
||||
.uneditable-input[class*="span"],
|
||||
// Redeclare since the fluid row class is more specific
|
||||
.row-fluid input[class*="span"],
|
||||
.row-fluid select[class*="span"],
|
||||
.row-fluid textarea[class*="span"],
|
||||
.row-fluid .uneditable-input[class*="span"] {
|
||||
float: none;
|
||||
margin-left: 0;
|
||||
}
|
||||
// Ensure input-prepend/append never wraps
|
||||
.input-append input[class*="span"],
|
||||
.input-append .uneditable-input[class*="span"],
|
||||
.input-prepend input[class*="span"],
|
||||
.input-prepend .uneditable-input[class*="span"],
|
||||
.row-fluid input[class*="span"],
|
||||
.row-fluid select[class*="span"],
|
||||
.row-fluid textarea[class*="span"],
|
||||
.row-fluid .uneditable-input[class*="span"],
|
||||
.row-fluid .input-prepend [class*="span"],
|
||||
.row-fluid .input-append [class*="span"] {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
|
||||
|
||||
// GRID SIZING FOR INPUTS
|
||||
// -------------------------------
|
||||
|
||||
// Grid sizes
|
||||
@include grid-input($gridColumnWidth, $gridGutterWidth);
|
||||
|
||||
// Control row for multiple inputs per line
|
||||
.controls-row {
|
||||
@include clearfix(); // Clear the float from controls
|
||||
}
|
||||
|
||||
// Float to collapse white-space for proper grid alignment
|
||||
.controls-row [class*="span"],
|
||||
// Redeclare the fluid grid collapse since we undo the float for inputs
|
||||
.row-fluid .controls-row [class*="span"] {
|
||||
float: left;
|
||||
}
|
||||
// Explicity set top padding on all checkboxes/radios, not just first-child
|
||||
.controls-row .checkbox[class*="span"],
|
||||
.controls-row .radio[class*="span"] {
|
||||
padding-top: 5px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
// DISABLED STATE
|
||||
// --------------
|
||||
// -------------------------------
|
||||
|
||||
// Disabled and read-only inputs
|
||||
input[disabled],
|
||||
@ -364,7 +237,7 @@ input[readonly],
|
||||
select[readonly],
|
||||
textarea[readonly] {
|
||||
cursor: not-allowed;
|
||||
background-color: $inputDisabledBackground;
|
||||
background-color: $input-bg-disabled;
|
||||
}
|
||||
// Explicitly reset the colors here
|
||||
input[type="radio"][disabled],
|
||||
@ -374,345 +247,3 @@ input[type="checkbox"][readonly] {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
// FORM FIELD FEEDBACK STATES
|
||||
// --------------------------
|
||||
|
||||
// Warning
|
||||
.control-group.warning {
|
||||
@include formFieldState($warningText, $warningText, $warningBackground);
|
||||
}
|
||||
// Error
|
||||
.control-group.error {
|
||||
@include formFieldState($errorText, $errorText, $errorBackground);
|
||||
}
|
||||
// Success
|
||||
.control-group.success {
|
||||
@include formFieldState($successText, $successText, $successBackground);
|
||||
}
|
||||
// Info
|
||||
.control-group.info {
|
||||
@include formFieldState($infoText, $infoText, $infoBackground);
|
||||
}
|
||||
|
||||
// HTML5 invalid states
|
||||
// Shares styles with the .control-group.error above
|
||||
input:focus:invalid,
|
||||
textarea:focus:invalid,
|
||||
select:focus:invalid {
|
||||
color: #b94a48;
|
||||
border-color: #ee5f5b;
|
||||
&:focus {
|
||||
border-color: darken(#ee5f5b, 10%);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
// FORM ACTIONS
|
||||
// ------------
|
||||
|
||||
.form-actions {
|
||||
padding: ($baseLineHeight - 1) 20px $baseLineHeight;
|
||||
margin-top: $baseLineHeight;
|
||||
margin-bottom: $baseLineHeight;
|
||||
background-color: $formActionsBackground;
|
||||
border-top: 1px solid #e5e5e5;
|
||||
@include clearfix(); // Adding clearfix to allow for .pull-right button containers
|
||||
}
|
||||
|
||||
|
||||
|
||||
// HELP TEXT
|
||||
// ---------
|
||||
|
||||
.help-block,
|
||||
.help-inline {
|
||||
color: lighten($textColor, 15%); // lighten the text some for contrast
|
||||
}
|
||||
|
||||
.help-block {
|
||||
display: block; // account for any element using help-block
|
||||
margin-bottom: $baseLineHeight / 2;
|
||||
}
|
||||
|
||||
.help-inline {
|
||||
display: inline-block;
|
||||
@include ie7-inline-block();
|
||||
vertical-align: middle;
|
||||
padding-left: 5px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
// INPUT GROUPS
|
||||
// ------------
|
||||
|
||||
// Allow us to put symbols and text within the input field for a cleaner look
|
||||
.input-append,
|
||||
.input-prepend {
|
||||
display: inline-block;
|
||||
margin-bottom: $baseLineHeight / 2;
|
||||
vertical-align: middle;
|
||||
font-size: 0; // white space collapse hack
|
||||
white-space: nowrap; // Prevent span and input from separating
|
||||
|
||||
// Reset the white space collapse hack
|
||||
input,
|
||||
select,
|
||||
.uneditable-input,
|
||||
.dropdown-menu,
|
||||
.popover {
|
||||
font-size: $baseFontSize;
|
||||
}
|
||||
|
||||
input,
|
||||
select,
|
||||
.uneditable-input {
|
||||
position: relative; // placed here by default so that on :focus we can place the input above the .add-on for full border and box-shadow goodness
|
||||
margin-bottom: 0; // prevent bottom margin from screwing up alignment in stacked forms
|
||||
vertical-align: top;
|
||||
// Make input on top when focused so blue border and shadow always show
|
||||
&:focus {
|
||||
z-index: 2;
|
||||
}
|
||||
}
|
||||
.add-on {
|
||||
display: inline-block;
|
||||
width: auto;
|
||||
height: $baseLineHeight;
|
||||
min-width: 16px;
|
||||
padding: 4px 5px;
|
||||
font-size: $baseFontSize;
|
||||
font-weight: normal;
|
||||
line-height: $baseLineHeight;
|
||||
text-align: center;
|
||||
text-shadow: 0 1px 0 $white;
|
||||
background-color: $grayLighter;
|
||||
border: 1px solid #ccc;
|
||||
}
|
||||
.add-on,
|
||||
.btn,
|
||||
.btn-group > .dropdown-toggle {
|
||||
vertical-align: top;
|
||||
@include border-radius(0);
|
||||
}
|
||||
.active {
|
||||
background-color: lighten($green, 30);
|
||||
border-color: $green;
|
||||
}
|
||||
}
|
||||
|
||||
.input-prepend {
|
||||
.add-on,
|
||||
.btn {
|
||||
margin-right: -1px;
|
||||
}
|
||||
.add-on:first-child,
|
||||
.btn:first-child {
|
||||
// FYI, `.btn:first-child` accounts for a button group that's prepended
|
||||
@include border-radius($inputBorderRadius 0 0 $inputBorderRadius);
|
||||
}
|
||||
}
|
||||
|
||||
.input-append {
|
||||
input,
|
||||
select,
|
||||
.uneditable-input {
|
||||
@include border-radius($inputBorderRadius 0 0 $inputBorderRadius);
|
||||
+ .btn-group .btn:last-child {
|
||||
@include border-radius(0 $inputBorderRadius $inputBorderRadius 0);
|
||||
}
|
||||
}
|
||||
.add-on,
|
||||
.btn,
|
||||
.btn-group {
|
||||
margin-left: -1px;
|
||||
}
|
||||
.add-on:last-child,
|
||||
.btn:last-child,
|
||||
.btn-group:last-child > .dropdown-toggle {
|
||||
@include border-radius(0 $inputBorderRadius $inputBorderRadius 0);
|
||||
}
|
||||
}
|
||||
|
||||
// Remove all border-radius for inputs with both prepend and append
|
||||
.input-prepend.input-append {
|
||||
input,
|
||||
select,
|
||||
.uneditable-input {
|
||||
@include border-radius(0);
|
||||
+ .btn-group .btn {
|
||||
@include border-radius(0 $inputBorderRadius $inputBorderRadius 0);
|
||||
}
|
||||
}
|
||||
.add-on:first-child,
|
||||
.btn:first-child {
|
||||
margin-right: -1px;
|
||||
@include border-radius($inputBorderRadius 0 0 $inputBorderRadius);
|
||||
}
|
||||
.add-on:last-child,
|
||||
.btn:last-child {
|
||||
margin-left: -1px;
|
||||
@include border-radius(0 $inputBorderRadius $inputBorderRadius 0);
|
||||
}
|
||||
.btn-group:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
// SEARCH FORM
|
||||
// -----------
|
||||
|
||||
input.search-query {
|
||||
padding-right: 14px;
|
||||
padding-right: 4px \9;
|
||||
padding-left: 14px;
|
||||
padding-left: 4px \9; /* IE7-8 doesn't have border-radius, so don't indent the padding */
|
||||
margin-bottom: 0; // Remove the default margin on all inputs
|
||||
@include border-radius(15px);
|
||||
}
|
||||
|
||||
/* Allow for input prepend/append in search forms */
|
||||
.form-search .input-append .search-query,
|
||||
.form-search .input-prepend .search-query {
|
||||
@include border-radius(0); // Override due to specificity
|
||||
}
|
||||
.form-search .input-append .search-query {
|
||||
@include border-radius(14px 0 0 14px);
|
||||
}
|
||||
.form-search .input-append .btn {
|
||||
@include border-radius(0 14px 14px 0);
|
||||
}
|
||||
.form-search .input-prepend .search-query {
|
||||
@include border-radius(0 14px 14px 0);
|
||||
}
|
||||
.form-search .input-prepend .btn {
|
||||
@include border-radius(14px 0 0 14px);
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
// HORIZONTAL & VERTICAL FORMS
|
||||
// ---------------------------
|
||||
|
||||
// Common properties
|
||||
// -----------------
|
||||
|
||||
.form-search,
|
||||
.form-inline,
|
||||
.form-horizontal {
|
||||
input,
|
||||
textarea,
|
||||
select,
|
||||
.help-inline,
|
||||
.uneditable-input,
|
||||
.input-prepend,
|
||||
.input-append {
|
||||
display: inline-block;
|
||||
@include ie7-inline-block();
|
||||
margin-bottom: 0;
|
||||
vertical-align: middle;
|
||||
}
|
||||
// Re-hide hidden elements due to specifity
|
||||
.hide {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.form-search label,
|
||||
.form-inline label,
|
||||
.form-search .btn-group,
|
||||
.form-inline .btn-group {
|
||||
display: inline-block;
|
||||
}
|
||||
// Remove margin for input-prepend/-append
|
||||
.form-search .input-append,
|
||||
.form-inline .input-append,
|
||||
.form-search .input-prepend,
|
||||
.form-inline .input-prepend {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
// Inline checkbox/radio labels (remove padding on left)
|
||||
.form-search .radio,
|
||||
.form-search .checkbox,
|
||||
.form-inline .radio,
|
||||
.form-inline .checkbox {
|
||||
padding-left: 0;
|
||||
margin-bottom: 0;
|
||||
vertical-align: middle;
|
||||
}
|
||||
// Remove float and margin, set to inline-block
|
||||
.form-search .radio input[type="radio"],
|
||||
.form-search .checkbox input[type="checkbox"],
|
||||
.form-inline .radio input[type="radio"],
|
||||
.form-inline .checkbox input[type="checkbox"] {
|
||||
float: left;
|
||||
margin-right: 3px;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
|
||||
// Margin to space out fieldsets
|
||||
.control-group {
|
||||
margin-bottom: $baseLineHeight / 2;
|
||||
}
|
||||
|
||||
// Legend collapses margin, so next element is responsible for spacing
|
||||
legend + .control-group {
|
||||
margin-top: $baseLineHeight;
|
||||
-webkit-margin-top-collapse: separate;
|
||||
}
|
||||
|
||||
// Horizontal-specific styles
|
||||
// --------------------------
|
||||
|
||||
.form-horizontal {
|
||||
// Increase spacing between groups
|
||||
.control-group {
|
||||
margin-bottom: $baseLineHeight;
|
||||
@include clearfix();
|
||||
}
|
||||
// Float the labels left
|
||||
.control-label {
|
||||
float: left;
|
||||
width: $horizontalComponentOffset - 20;
|
||||
padding-top: 5px;
|
||||
text-align: right;
|
||||
}
|
||||
// Move over all input controls and content
|
||||
.controls {
|
||||
// Super jank IE7 fix to ensure the inputs in .input-append and input-prepend
|
||||
// don't inherit the margin of the parent, in this case .controls
|
||||
*display: inline-block;
|
||||
*padding-left: 20px;
|
||||
margin-left: $horizontalComponentOffset;
|
||||
&:first-child {
|
||||
*padding-left: $horizontalComponentOffset;
|
||||
}
|
||||
}
|
||||
// Remove bottom margin on block level help text since that's accounted for on .control-group
|
||||
.help-block {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
// And apply it only to .help-block instances that follow a form control
|
||||
input,
|
||||
select,
|
||||
textarea,
|
||||
.uneditable-input,
|
||||
.input-prepend,
|
||||
.input-append {
|
||||
+ .help-block {
|
||||
margin-top: $baseLineHeight / 2;
|
||||
}
|
||||
}
|
||||
// Move over buttons in .form-actions to align with .controls
|
||||
.form-actions {
|
||||
padding-left: $horizontalComponentOffset;
|
||||
}
|
||||
}
|
||||
|
||||
@ -3,19 +3,344 @@
|
||||
// --------------------------------------------------
|
||||
|
||||
|
||||
// Fixed (940px)
|
||||
@include grid-core($gridColumnWidth, $gridGutterWidth);
|
||||
|
||||
// Fluid (940px)
|
||||
@include grid-fluid($fluidGridColumnWidth, $fluidGridGutterWidth);
|
||||
|
||||
// Reset utility classes due to specificity
|
||||
[class*="span"].hide,
|
||||
.row-fluid [class*="span"].hide {
|
||||
display: none;
|
||||
// Set the container width, and override it for fixed navbars in media queries
|
||||
.container {
|
||||
@include container-fixed();
|
||||
}
|
||||
|
||||
[class*="span"].pull-right,
|
||||
.row-fluid [class*="span"].pull-right {
|
||||
float: right;
|
||||
// mobile first defaults
|
||||
.row {
|
||||
@include 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)); }
|
||||
}
|
||||
|
||||
@ -15,7 +15,7 @@
|
||||
margin-bottom: -1px;
|
||||
|
||||
//background-color: $list-group-bg;
|
||||
border: $listItemBorder;
|
||||
border: $list-item-border;
|
||||
|
||||
// Round the first and last items
|
||||
&:first-child {
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
.menu {
|
||||
min-height: 100%;
|
||||
max-height: 100%;
|
||||
width: $menuWidth;
|
||||
width: $menu-width;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
@ -23,7 +23,7 @@
|
||||
.menu-right { right: 0; }
|
||||
|
||||
.menu-animated {
|
||||
-webkit-transition: -webkit-transform $menuAnimationSpeed ease;
|
||||
-moz-transition: -moz-transform $menuAnimationSpeed ease;
|
||||
transition: transform $menuAnimationSpeed ease;
|
||||
-webkit-transition: -webkit-transform $menu-animation-speed ease;
|
||||
-moz-transition: -moz-transform $menu-animation-speed ease;
|
||||
transition: transform $menu-animation-speed ease;
|
||||
}
|
||||
|
||||
@ -7,15 +7,15 @@
|
||||
// -------------------------
|
||||
|
||||
.alert {
|
||||
margin-bottom: $baseLineHeight;
|
||||
margin-bottom: $line-height-base;
|
||||
text-shadow: 0 1px 0 rgba(255,255,255,.5);
|
||||
background-color: $warningBackground;
|
||||
border: 1px solid $warningBorder;
|
||||
background-color: $warning-bg;
|
||||
border: 1px solid $warning-border;
|
||||
}
|
||||
.alert,
|
||||
.alert h4 {
|
||||
// Specified for the h4 to prevent conflicts of changing $headingsColor
|
||||
color: $warningText;
|
||||
color: $warning-text;
|
||||
}
|
||||
|
||||
|
||||
@ -23,29 +23,29 @@
|
||||
// -------------------------
|
||||
|
||||
.alert-success {
|
||||
background-color: $successBackground;
|
||||
border-color: $successBorder;
|
||||
color: $successText;
|
||||
background-color: $success-bg;
|
||||
border-color: $success-border;
|
||||
color: $success-text;
|
||||
}
|
||||
.alert-success h4 {
|
||||
color: $successText;
|
||||
color: $success-text;
|
||||
}
|
||||
.alert-danger,
|
||||
.alert-error {
|
||||
background-color: $errorBackground;
|
||||
border-color: $errorBorder;
|
||||
color: $errorText;
|
||||
background-color: $error-bg;
|
||||
border-color: $error-border;
|
||||
color: $error-text;
|
||||
}
|
||||
.alert-danger h4,
|
||||
.alert-error h4 {
|
||||
color: $errorText;
|
||||
color: $error-text;
|
||||
}
|
||||
.alert-info {
|
||||
background-color: $infoBackground;
|
||||
border-color: $infoBorder;
|
||||
color: $infoText;
|
||||
background-color: $info-bg;
|
||||
border-color: $info-border;
|
||||
color: $info-text;
|
||||
}
|
||||
.alert-info h4 {
|
||||
color: $infoText;
|
||||
color: $info-text;
|
||||
}
|
||||
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
.bar {
|
||||
background-color: $barBackground;
|
||||
background-color: $bar-bg;
|
||||
border-style: solid;
|
||||
border-width: 0;
|
||||
|
||||
@ -11,70 +11,70 @@
|
||||
}
|
||||
|
||||
&.bar-default {
|
||||
background-color: $barDefaultBackground;
|
||||
border-color: $barDefaultBorderColor;
|
||||
color: $darkColor;
|
||||
background-color: $bar-default-bg;
|
||||
border-color: $bar-default-border-color;
|
||||
color: $gray-dark;
|
||||
.tab-item a {
|
||||
color: $darkColor;
|
||||
color: $gray-dark;
|
||||
}
|
||||
}
|
||||
|
||||
&.bar-secondary {
|
||||
background-color: $barSecondaryBackground;
|
||||
border-color: $barSecondaryBorderColor;
|
||||
color: $darkColor;
|
||||
background-color: $bar-secondary-bg;
|
||||
border-color: $bar-secondary-border-color;
|
||||
color: $gray-dark;
|
||||
.tab-item a {
|
||||
color: $darkColor;
|
||||
color: $gray-dark;
|
||||
}
|
||||
}
|
||||
&.bar-primary {
|
||||
background-color: $barPrimaryBackground;
|
||||
border-color: $barPrimaryBorderColor;
|
||||
color: $lightColor;
|
||||
background-color: $bar-primary-bg;
|
||||
border-color: $bar-primary-border-color;
|
||||
color: $gray-light;
|
||||
.tab-item a {
|
||||
color: $lightColor;
|
||||
color: $gray-light;
|
||||
}
|
||||
}
|
||||
&.bar-info {
|
||||
background-color: $barInfoBackground;
|
||||
border-color: $barInfoBorderColor;
|
||||
color: $lightColor;
|
||||
background-color: $bar-info-bg;
|
||||
border-color: $bar-info-border-color;
|
||||
color: $gray-light;
|
||||
.tab-item a {
|
||||
color: $lightColor;
|
||||
color: $gray-light;
|
||||
}
|
||||
}
|
||||
&.bar-success {
|
||||
background-color: $barSuccessBackground;
|
||||
border-color: $barSuccessBorderColor;
|
||||
color: $lightColor;
|
||||
background-color: $bar-success-bg;
|
||||
border-color: $bar-success-border-color;
|
||||
color: $gray-light;
|
||||
.tab-item a {
|
||||
color: $lightColor;
|
||||
color: $gray-light;
|
||||
}
|
||||
}
|
||||
&.bar-warning {
|
||||
background-color: $barWarningBackground;
|
||||
border-color: $barWarningBorderColor;
|
||||
color: $lightColor;
|
||||
background-color: $bar-warning-bg;
|
||||
border-color: $bar-warning-border-color;
|
||||
color: $gray-light;
|
||||
.tab-item a {
|
||||
color: $lightColor;
|
||||
color: $gray-light;
|
||||
}
|
||||
}
|
||||
&.bar-danger {
|
||||
background-color: $barDangerBackground;
|
||||
border-color: $barDangerBorderColor;
|
||||
color: $lightColor;
|
||||
background-color: $bar-danger-bg;
|
||||
border-color: $bar-danger-border-color;
|
||||
color: $gray-light;
|
||||
|
||||
.tab-item a {
|
||||
color: $lightColor;
|
||||
color: $gray-light;
|
||||
}
|
||||
}
|
||||
&.bar-dark {
|
||||
background-color: $barDarkBackground;
|
||||
border-color: $barDarkBorderColor;
|
||||
color: $lightColor;
|
||||
background-color: $bar-dark-bg;
|
||||
border-color: $bar-dark-border-color;
|
||||
color: $gray-light;
|
||||
|
||||
.tab-item a {
|
||||
color: $lightColor;
|
||||
color: $gray-light;
|
||||
}
|
||||
}
|
||||
|
||||
@ -89,45 +89,45 @@
|
||||
|
||||
.bar-default {
|
||||
.button {
|
||||
@include button-style($buttonDefaultBackground, $buttonDefaultBorder, $darkColor);
|
||||
@include button-style($button-default-bg, $buttonDefaultBorder, $gray-dark);
|
||||
}
|
||||
}
|
||||
|
||||
.bar-secondary {
|
||||
.button {
|
||||
@include button-style($buttonSecondaryBackground, $buttonSecondaryBorder, $darkColor);
|
||||
@include button-style($button-secondary-bg, $button-secondary-border, $gray-dark);
|
||||
}
|
||||
}
|
||||
|
||||
.bar-primary {
|
||||
.button {
|
||||
@include button-style($buttonPrimaryBackground, $buttonPrimaryBorder, $lightColor);
|
||||
@include button-style($button-primary-bg, $button-primary-border, $gray-light);
|
||||
}
|
||||
}
|
||||
.bar-info {
|
||||
.button {
|
||||
@include button-style($buttonInfoBackground, $buttonInfoBorder, $lightColor);
|
||||
@include button-style($button-info-bg, $button-info-border, $gray-light);
|
||||
}
|
||||
}
|
||||
.bar-success {
|
||||
.button {
|
||||
@include button-style($buttonSuccessBackground, $buttonSuccessBorder, $lightColor);
|
||||
@include button-style($button-success-bg, $button-success-border, $gray-light);
|
||||
}
|
||||
}
|
||||
.bar-warning {
|
||||
.button {
|
||||
@include button-style($buttonWarningBackground, $buttonWarningBorder, $lightColor);
|
||||
@include button-style($button-warning-bg, $button-warning-border, $gray-light);
|
||||
}
|
||||
}
|
||||
.bar-danger {
|
||||
.button {
|
||||
@include button-style($buttonDangerBackground, $buttonDangerBorder, $lightColor);
|
||||
@include button-style($button-danger-bg, $buttonDangerBorder, $gray-light);
|
||||
}
|
||||
}
|
||||
.bar-dark {
|
||||
// A default style for buttons
|
||||
.button {
|
||||
@include button-style($buttonDarkBackground, $buttonDarkBorder, $lightColor);
|
||||
@include button-style($button-dark-bg, $button-dark-border, $gray-light);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -2,11 +2,11 @@
|
||||
body {
|
||||
font-size: 14px;
|
||||
line-height: 1.25;
|
||||
font-family: $baseFontFamily;
|
||||
font-family: $base-font-family;
|
||||
}
|
||||
|
||||
main {
|
||||
background-color: $baseBackgroundColor;
|
||||
background-color: $base-background-color;
|
||||
}
|
||||
|
||||
.full-section {
|
||||
|
||||
@ -1,39 +1,39 @@
|
||||
.button {
|
||||
color: $buttonColor;
|
||||
border-radius: $buttonBorderRadius;
|
||||
border-width: $buttonBorderWidth;
|
||||
color: $button-color;
|
||||
border-radius: $button-border-radius;
|
||||
border-width: $button-border-width;
|
||||
border-style: solid;
|
||||
padding: $buttonPadding;
|
||||
font-size: $buttonFontSize;
|
||||
padding: $button-padding;
|
||||
font-size: $button-font-size;
|
||||
|
||||
&.button-default {
|
||||
@include button-style($buttonDefaultBackground, $buttonDefaultBorder, $darkColor);
|
||||
@include button-style($button-default-bg, $buttonDefaultBorder, $gray-dark);
|
||||
}
|
||||
&.button-secondary {
|
||||
@include button-style($buttonSecondaryBackground, $buttonSecondaryBorder, $darkColor);
|
||||
@include button-style($button-secondary-bg, $button-secondary-border, $gray-dark);
|
||||
}
|
||||
&.button-primary {
|
||||
@include button-style($buttonPrimaryBackground, $buttonPrimaryBorder, $lightColor);
|
||||
@include button-style($button-primary-bg, $button-primary-border, $gray-light);
|
||||
}
|
||||
&.button-info {
|
||||
@include button-style($buttonInfoBackground, $buttonInfoBorder, $lightColor);
|
||||
@include button-style($button-info-bg, $button-info-border, $gray-light);
|
||||
}
|
||||
&.button-success {
|
||||
@include button-style($buttonSuccessBackground, $buttonSuccessBorder, $lightColor);
|
||||
@include button-style($button-success-bg, $button-success-border, $gray-light);
|
||||
}
|
||||
&.button-warning {
|
||||
@include button-style($buttonWarningBackground, $buttonWarningBorder, $lightColor);
|
||||
@include button-style($button-warning-bg, $button-warning-border, $gray-light);
|
||||
}
|
||||
&.button-danger {
|
||||
@include button-style($buttonDangerBackground, $buttonDangerBorder, $lightColor);
|
||||
@include button-style($button-danger-bg, $buttonDangerBorder, $gray-light);
|
||||
}
|
||||
&.button-dark {
|
||||
@include button-style($buttonDarkBackground, $buttonDarkBorder, $lightColor);
|
||||
@include button-style($button-dark-bg, $button-dark-border, $gray-light);
|
||||
}
|
||||
&.button-clear {
|
||||
background: none;
|
||||
border: none;
|
||||
padding: $buttonClearPadding;
|
||||
padding: $button-clear-padding;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
.list-divider {
|
||||
background-color: $listDividerBackground;
|
||||
color: $listDividerColor;
|
||||
background-color: $list-divider-bg;
|
||||
color: $list-divider-color;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
a.list-item {
|
||||
color: $darkColor;
|
||||
color: $gray-dark;
|
||||
}
|
||||
|
||||
@ -1,12 +1,12 @@
|
||||
|
||||
.ion-panel {
|
||||
background: $menuBackgroundColor;
|
||||
background: $menu-bg;
|
||||
}
|
||||
|
||||
.ion-panel-left .ion-panel {
|
||||
border-right: 1px solid $menuInsetBorderColor;
|
||||
border-right: 1px solid $menu-inset-border-color;
|
||||
}
|
||||
|
||||
.ion-panel-right .ion-panel {
|
||||
border-left: 1px solid $menuInsetBorderColor;
|
||||
border-left: 1px solid $menu-inset-border-color;
|
||||
}
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
}
|
||||
.tab-item {
|
||||
a {
|
||||
font-family: $lightSansFontFamily;
|
||||
font-family: $light-sans-font-family;
|
||||
font-weight: 200;
|
||||
|
||||
.active, &:active {
|
||||
|
||||
Reference in New Issue
Block a user