306c441ae7
This moves the location of javascript files, commonFramework, iFrameScript, sandbox, plugin, and all the less files. On gulp or gulp build these files are moved and revisioned. Places where they are references in jade/html are now removed and replaced with the use of a helper function `rev`. This function will take the required file and return a string referencing the revisioned file. This should alleviate the need for hard refreshing and will break caches when files change, so fixes for firefox caching issue as well. NOTE: @benmcmahon @quincylarson, This means files will need to be build on the server in production before doing a server restart/reload In production: 'npm run build' To build and revision js/css files `gulp` and `gulp build` will used in development npm install also needs to be run in production on initial deploy
161 lines
3.5 KiB
Plaintext
Executable File
161 lines
3.5 KiB
Plaintext
Executable File
//
|
|
// Buttons
|
|
// --------------------------------------------------
|
|
|
|
|
|
// Base styles
|
|
// --------------------------------------------------
|
|
|
|
.btn {
|
|
display: inline-block;
|
|
margin-bottom: 0; // For input.btn
|
|
font-weight: @btn-font-weight;
|
|
text-align: center;
|
|
vertical-align: middle;
|
|
touch-action: manipulation;
|
|
cursor: pointer;
|
|
background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214
|
|
border: 1px solid transparent;
|
|
white-space: nowrap;
|
|
.button-size(@padding-base-vertical; @padding-base-horizontal; @font-size-base; @line-height-base; @border-radius-base);
|
|
.user-select(none);
|
|
|
|
&,
|
|
&:active,
|
|
&.active {
|
|
&:focus,
|
|
&.focus {
|
|
.tab-focus();
|
|
}
|
|
}
|
|
|
|
&:hover,
|
|
&:focus,
|
|
&.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: @cursor-disabled;
|
|
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);
|
|
}
|
|
// 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);
|
|
}
|
|
// 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);
|
|
}
|
|
|
|
|
|
// Link buttons
|
|
// -------------------------
|
|
|
|
// Make a button look and behave like a link
|
|
.btn-link {
|
|
color: @link-color;
|
|
font-weight: normal;
|
|
border-radius: 0;
|
|
|
|
&,
|
|
&:active,
|
|
&.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 {
|
|
// 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 {
|
|
.button-size(@padding-xs-vertical; @padding-xs-horizontal; @font-size-small; @line-height-small; @border-radius-small);
|
|
}
|
|
|
|
|
|
// Block button
|
|
// --------------------------------------------------
|
|
|
|
.btn-block {
|
|
display: block;
|
|
width: 100%;
|
|
}
|
|
|
|
// 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%;
|
|
}
|
|
}
|