0c3d57e833
- NEW "plugin API" for custom UI modules, closed #913 - NEW live "Killstream" for killboard module, closed #909 - NEW "custom layout" UI settings, closed #470
1287 lines
31 KiB
SCSS
1287 lines
31 KiB
SCSS
html {
|
|
margin: 0;
|
|
padding: 0;
|
|
height: 100%;
|
|
position:relative;
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
padding: 0;
|
|
min-height: 100%;
|
|
direction:ltr;
|
|
}
|
|
|
|
/* when mobile menu is active */
|
|
body.mobile-view-activated.hidden-menu {
|
|
overflow-x:hidden;
|
|
}
|
|
|
|
body.modal-open {
|
|
overflow:hidden !important;
|
|
}
|
|
|
|
a:hover, a:active, a:focus, button, button:active, button:focus, object, embed, input::-moz-focus-inner {
|
|
outline: 0;
|
|
}
|
|
|
|
h1,h3,h4 {
|
|
margin:0;
|
|
font-family: $font-family-bold;
|
|
}
|
|
|
|
.page-title {
|
|
margin: 12px 0 28px;
|
|
span {
|
|
font-size: $font-size-base+3;
|
|
color: $gray-dark;
|
|
display: inline-block;
|
|
vertical-align: 1px;
|
|
}
|
|
}
|
|
|
|
label {
|
|
font-weight:normal;
|
|
}
|
|
|
|
*:not(td):focus {
|
|
outline: 0 !important;
|
|
}
|
|
|
|
/*
|
|
* IE FIX for tap delay
|
|
*/
|
|
a, input, button {
|
|
-ms-touch-action: none !important;
|
|
}
|
|
|
|
textarea:focus,
|
|
select:focus,
|
|
input[type="text"]:focus,
|
|
input[type="password"]:focus,
|
|
input[type="datetime"]:focus,
|
|
input[type="datetime-local"]:focus,
|
|
input[type="date"]:focus,
|
|
input[type="month"]:focus,
|
|
input[type="time"]:focus,
|
|
input[type="week"]:focus,
|
|
input[type="number"]:focus,
|
|
input[type="email"]:focus,
|
|
input[type="url"]:focus,
|
|
input[type="search"]:focus,
|
|
input[type="tel"]:focus,
|
|
input[type="color"]:focus,
|
|
.uneditable-input:focus {
|
|
outline: 0;
|
|
outline: thin dotted \9;
|
|
/* IE6-9 */
|
|
|
|
//-webkit-box-shadow: none !important;
|
|
//-moz-box-shadow: none !important;
|
|
//box-shadow: none !important;
|
|
box-shadow: inset -1px 1px 5px 0 rgba(0, 0, 0, 0.8) !important;
|
|
}
|
|
|
|
.input-sm,
|
|
.input-lg,
|
|
.input-xs,
|
|
.form-control {
|
|
border-radius: 0px !important;
|
|
-webkit-border-radius: 0px !important;
|
|
-moz-border-radius: 0px !important;
|
|
}
|
|
|
|
.input-xs {
|
|
height: 24px;
|
|
padding: 2px 10px;
|
|
font-size: 11px;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.btn-xs {
|
|
padding: 0px 2px;
|
|
font-size: 10px;
|
|
line-height: 1.3;
|
|
}
|
|
|
|
.btn-sm {
|
|
padding: 5px 8px 4px;
|
|
}
|
|
|
|
.btn-lg {
|
|
padding: 10px 16px;
|
|
}
|
|
|
|
.no-space {
|
|
margin: 0;
|
|
|
|
> [class*="col-"] {
|
|
margin: 0 !important;
|
|
padding-right: 0;
|
|
padding-left: 0;
|
|
}
|
|
}
|
|
|
|
|
|
/*
|
|
* Headers
|
|
*/
|
|
|
|
.h1, .h2, .h3, .h4, .h5, .h6 {
|
|
display: inline-block;
|
|
}
|
|
|
|
h1, .h1 {
|
|
letter-spacing: -1px;
|
|
font-size: $font-size-h1;
|
|
margin: 10px 0;
|
|
|
|
small, .small {
|
|
font-size: $font-size-h4;
|
|
font-weight: 300;
|
|
letter-spacing: -1px;
|
|
}
|
|
}
|
|
|
|
h2, .h2 {
|
|
font-size: $font-size-h2;
|
|
margin: 20px 0;
|
|
line-height: normal;
|
|
}
|
|
|
|
h3, .h3 {
|
|
display: block;
|
|
font-size: $font-size-h3;
|
|
font-weight: 400;
|
|
margin: 20px 0;
|
|
line-height: normal;
|
|
}
|
|
|
|
h4, .h4 {
|
|
line-height: normal;
|
|
margin: 20px 0 10px 0;
|
|
}
|
|
|
|
h5, .h5 {
|
|
font-size: $font-size-h5;
|
|
font-weight: 300;
|
|
margin-top: 0;
|
|
margin-bottom: 10px;
|
|
line-height: normal;
|
|
}
|
|
|
|
h6, .h6 {
|
|
font-size: $font-size-h6;
|
|
margin: 10px 0;
|
|
font-weight: bold;
|
|
line-height: normal;
|
|
}
|
|
|
|
.row-seperator-header {
|
|
margin:15px 14px 20px;
|
|
border-bottom:none;
|
|
display:block;
|
|
color: darken( $gray-light, 20.9%);
|
|
font-size:20px;
|
|
font-weight:400;
|
|
}
|
|
|
|
/*
|
|
* Footer
|
|
* see: component-page-footer.less
|
|
*/
|
|
|
|
|
|
/*
|
|
* Center Canvas
|
|
*/
|
|
.center-canvas, .center-child-canvas > canvas {
|
|
display:block !important;
|
|
margin:0 auto !important;
|
|
}
|
|
|
|
|
|
/*
|
|
* ***************************************************
|
|
* MAIN LAYOUT END
|
|
* ***************************************************
|
|
*/
|
|
|
|
|
|
/*
|
|
* FORMS
|
|
*/
|
|
|
|
.form-control {
|
|
box-shadow:none !important;
|
|
-webkit-box-shadow: none !important;
|
|
-moz-box-shadow: none !important;
|
|
}
|
|
|
|
.form hr {
|
|
margin-left:-13px;
|
|
margin-right:-13px;
|
|
border-color:rgba(red($black), green($black), blue($black), 0.1);
|
|
margin-top: 20px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.form fieldset {
|
|
display: block;
|
|
border: none;
|
|
background: rgba(red($white), green($white), blue($white), 0.9);
|
|
position: relative;
|
|
}
|
|
|
|
fieldset {
|
|
position:relative;
|
|
}
|
|
|
|
|
|
.popover-content .form-actions {
|
|
margin:0 -14px -9px;
|
|
border-radius:0 0 3px 3px;
|
|
padding:9px 14px
|
|
}
|
|
|
|
.no-padding .form .form-actions {
|
|
margin:0;
|
|
display: block;
|
|
padding: 13px 14px 15px;
|
|
border-top: 1px solid rgba(red($black), green($black), blue($black), 0.1);
|
|
background: rgba(248, 248, 248, 0.9);
|
|
text-align:right;
|
|
margin-top:25px;
|
|
}
|
|
|
|
.form header, legend {
|
|
display: block;
|
|
padding: 8px 0;
|
|
border-bottom: 1px dashed rgba(red($black), green($black), blue($black), 0.2);
|
|
background: $white;
|
|
font-size: 16px;
|
|
font-weight: 300;
|
|
color: $gray-darker;
|
|
margin: 25px 0px 20px;
|
|
} .no-padding .form header {
|
|
margin: 25px 14px 0;
|
|
}.form header:first-child {
|
|
margin-top:10px;
|
|
} legend {
|
|
font-weight:400;
|
|
margin-top:0px;
|
|
background:none;
|
|
}
|
|
|
|
.input-group-addon {
|
|
padding: 6px 10px;
|
|
will-change: background-color, border-color;
|
|
@include border-radius(0);
|
|
@include transition(all ease-out .15s);
|
|
}
|
|
|
|
.input-group-addon .fa {
|
|
font-size:14px;
|
|
}
|
|
|
|
.input-group-addon .fa-lg, .input-group-addon .fa-2x {
|
|
font-size: 2em;
|
|
}
|
|
|
|
.input-group-addon .fa-3x, .input-group-addon .fa-4x, .input-group-addon .fa-5x {
|
|
font-size: 30px;
|
|
}
|
|
|
|
|
|
input[type="text"],
|
|
input[type="password"],
|
|
input[type="email"]{
|
|
&:focus + .input-group-addon {
|
|
border-color: $teal-lighter;
|
|
//background-color: lighten($state-info-text, 23%);
|
|
color: $teal-lighter;
|
|
}
|
|
}
|
|
|
|
.has-warning input[type="text"], .has-warning input[type="text"] + .input-group-addon {
|
|
border-color: $state-warning-border;
|
|
}.has-warning input[type="text"] + .input-group-addon {
|
|
background-color: darken($state-warning-bg, 5%);
|
|
color:$state-warning-text;
|
|
}
|
|
.has-warning input[type="text"]:focus, .has-warning input[type="text"]:focus + .input-group-addon {
|
|
border-color: $state-warning-border;
|
|
}.has-warning input[type="text"]:focus + .input-group-addon {
|
|
background-color: darken($state-warning-bg, 45%);
|
|
color:$white;
|
|
}
|
|
|
|
.has-error .input-group-addon {
|
|
border-color: $red !important;
|
|
background:$red !important;
|
|
color:$state-danger-text !important;
|
|
}
|
|
|
|
.has-success .input-group-addon {
|
|
border-color: $state-success-border !important;
|
|
background-color:$state-success-text !important;
|
|
color: $state-success-border !important;
|
|
}
|
|
|
|
.form fieldset .form-group:last-child, .form fieldset .form-group:last-child .note,
|
|
.form .form-group:last-child, .form .form-group:last-child .note {
|
|
margin-bottom:0;
|
|
}
|
|
|
|
.note {
|
|
margin-top: 6px;
|
|
padding: 0 1px;
|
|
font-size: 11px;
|
|
line-height: 15px;
|
|
color: lighten($text-color, 10%);
|
|
}
|
|
|
|
/*
|
|
* WITH ICON
|
|
*/
|
|
.input-icon-right {
|
|
position:relative;
|
|
}
|
|
.input-icon-right > i, .input-icon-left > i {
|
|
position:absolute;
|
|
right:10px;
|
|
top:10px;
|
|
font-size:12px;
|
|
color:$gray-light;
|
|
}
|
|
|
|
.input-icon-left > i {
|
|
right:auto;
|
|
left:24px;
|
|
}
|
|
|
|
.input-icon-right .form-control {
|
|
padding-right:27px;
|
|
}
|
|
|
|
.input-icon-left .form-control {
|
|
padding-left:29px;
|
|
}
|
|
|
|
input[type="text"].ui-autocomplete-loading,
|
|
input[type="password"].ui-autocomplete-loading,
|
|
input[type="datetime"].ui-autocomplete-loading,
|
|
input[type="datetime-local"].ui-autocomplete-loading,
|
|
input[type="date"].ui-autocomplete-loading,
|
|
input[type="month"].ui-autocomplete-loading,
|
|
input[type="time"].ui-autocomplete-loading,
|
|
input[type="week"].ui-autocomplete-loading,
|
|
input[type="number"].ui-autocomplete-loading,
|
|
input[type="email"].ui-autocomplete-loading,
|
|
input[type="url"].ui-autocomplete-loading,
|
|
input[type="search"].ui-autocomplete-loading,
|
|
input[type="tel"].ui-autocomplete-loading,
|
|
input[type="color"].ui-autocomplete-loading {
|
|
background-image: url("#{$base-url}/select2-spinner.gif") !important;
|
|
background-repeat: no-repeat;
|
|
background-position: 99% 50%;
|
|
padding-right:27px
|
|
}
|
|
|
|
.input-group-addon .checkbox, .input-group-addon .radio {
|
|
min-height: 0px;
|
|
margin-right:0px !important;
|
|
padding-top:0;
|
|
}
|
|
|
|
.input-group-addon label input[type="checkbox"].checkbox + span,
|
|
.input-group-addon label input[type="radio"].radiobox + span,
|
|
.input-group-addon label input[type="radio"].radiobox + span:before,
|
|
.input-group-addon label input[type="checkbox"].checkbox + span:before {
|
|
margin-right:0px;
|
|
}
|
|
|
|
/*
|
|
* Alerts
|
|
*/
|
|
.alert {
|
|
margin-bottom: 10px;
|
|
margin-top: 0px;
|
|
padding: 5px 15px 5px 34px;
|
|
color:#675100;
|
|
border-width:0px;
|
|
border-left-width: 3px;
|
|
padding:10px;
|
|
|
|
.ui-pnotify-title{
|
|
line-height: 12px;
|
|
}
|
|
|
|
.ui-pnotify-text{
|
|
font-size: 10px;
|
|
}
|
|
|
|
.close {
|
|
top: 0px;
|
|
right: -5px;
|
|
line-height: 18px;
|
|
}
|
|
}
|
|
|
|
.alert-heading {
|
|
font-weight:600;
|
|
}
|
|
|
|
.alert-danger {
|
|
border-color: $state-danger-border;
|
|
color: $state-danger-text;
|
|
background: $state-danger-bg;
|
|
text-shadow:none;
|
|
|
|
.ui-pnotify-icon{
|
|
color: $state-danger-border;
|
|
}
|
|
}
|
|
|
|
.alert-warning {
|
|
border-color: $state-warning-border;
|
|
color: $state-warning-text;
|
|
background: $state-warning-bg;
|
|
|
|
.ui-pnotify-icon{
|
|
color: $state-warning-border;
|
|
}
|
|
}
|
|
|
|
.alert-success {
|
|
border-color: $state-success-border;
|
|
color: $state-success-text;
|
|
background: $state-success-bg;
|
|
|
|
.ui-pnotify-icon{
|
|
color: $state-success-border;
|
|
}
|
|
}
|
|
|
|
.alert-info {
|
|
border-color: $state-info-border;
|
|
color: $state-info-text;
|
|
background: $state-info-bg;
|
|
|
|
.ui-pnotify-icon{
|
|
color: $state-info-border;
|
|
}
|
|
}
|
|
|
|
|
|
/*
|
|
* PROGRESS BARS
|
|
*/
|
|
|
|
.progress-micro {
|
|
height: $progressbar-micro !important;
|
|
line-height:$progressbar-micro !important;
|
|
}
|
|
|
|
.progress-xs {
|
|
height: $progressbar-xs !important;
|
|
line-height:$progressbar-xs !important;
|
|
}
|
|
|
|
.progress-sm {
|
|
height: $progressbar-sm !important;
|
|
line-height:$progressbar-sm !important;
|
|
}
|
|
|
|
.progress-lg {
|
|
height: $progressbar-lg !important;
|
|
line-height:$progressbar-lg !important;
|
|
}
|
|
|
|
.progress .progress-bar {
|
|
position: absolute;
|
|
overflow: hidden;
|
|
line-height: 18px;
|
|
}
|
|
|
|
.progress .progressbar-back-text {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
font-size: 12px;
|
|
line-height: 20px;
|
|
text-align: center;
|
|
}
|
|
|
|
.progress .progressbar-front-text {
|
|
display: block;
|
|
width: 100%;
|
|
font-size: 12px;
|
|
line-height: 20px;
|
|
text-align: center;
|
|
}
|
|
|
|
.progress.right .progress-bar {
|
|
right: 0;
|
|
}
|
|
|
|
.progress.right .progressbar-front-text {
|
|
position: absolute;
|
|
right: 0;
|
|
}
|
|
|
|
.progress.vertical {
|
|
width: 25px;
|
|
height: 100%;
|
|
min-height:150px;
|
|
margin-right: 20px;
|
|
display:inline-block;
|
|
margin-bottom:0px;
|
|
}
|
|
|
|
.progress.wide-bar {
|
|
width: 40px;
|
|
}
|
|
|
|
.progress.vertical.bottom {
|
|
position: relative;
|
|
}
|
|
|
|
.progress.vertical.bottom .progressbar-front-text {
|
|
position: absolute;
|
|
bottom: 0;
|
|
}
|
|
|
|
.progress.vertical .progress-bar {
|
|
width: 100%;
|
|
height: 0;
|
|
-webkit-transition: height 0.6s ease;
|
|
transition: height 0.6s ease;
|
|
}
|
|
|
|
.progress.vertical.bottom .progress-bar {
|
|
position: absolute;
|
|
bottom: 0;
|
|
}
|
|
|
|
@-webkit-keyframes progress-bar-stripes {
|
|
from {
|
|
background-position: 40px 0;
|
|
}
|
|
to {
|
|
background-position: 0 0;
|
|
}
|
|
}
|
|
|
|
@-moz-keyframes progress-bar-stripes {
|
|
from {
|
|
background-position: 40px 0;
|
|
}
|
|
to {
|
|
background-position: 0 0;
|
|
}
|
|
}
|
|
|
|
@-o-keyframes progress-bar-stripes {
|
|
from {
|
|
background-position: 0 0;
|
|
}
|
|
to {
|
|
background-position: 40px 0;
|
|
}
|
|
}
|
|
|
|
@keyframes progress-bar-stripes {
|
|
from {
|
|
background-position: 40px 0;
|
|
}
|
|
to {
|
|
background-position: 0 0;
|
|
}
|
|
}
|
|
|
|
.progress {
|
|
position: relative;
|
|
margin-bottom: 20px;
|
|
overflow: hidden;
|
|
height: 18px;
|
|
background: $gray-light;
|
|
@include box-shadow( 0 1px 0 transparent, 0 0 0 1px $gray-light inset);
|
|
@include border-radius($progressbar-radius);
|
|
}
|
|
|
|
.progress-bar {
|
|
float: left;
|
|
width: 0;
|
|
height: 100%;
|
|
font-size: 11px;
|
|
color: $white;
|
|
text-align: center;
|
|
background-color: $blue;
|
|
font-weight: bold;
|
|
@include transition(width 1s ease-in-out, background-color 1s ease-in-out) ;
|
|
}
|
|
|
|
.progress-striped .progress-bar {
|
|
background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(red($white), green($white), blue($white), 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(red($white), green($white), blue($white), 0.15)), color-stop(0.75, rgba(red($white), green($white), blue($white), 0.15)), color-stop(0.75, transparent), to(transparent));
|
|
background-image: -webkit-linear-gradient(45deg, rgba(red($white), green($white), blue($white), 0.15) 25%, transparent 25%, transparent 50%, rgba(red($white), green($white), blue($white), 0.15) 50%, rgba(red($white), green($white), blue($white), 0.15) 75%, transparent 75%, transparent);
|
|
background-image: -moz-linear-gradient(45deg, rgba(red($white), green($white), blue($white), 0.15) 25%, transparent 25%, transparent 50%, rgba(red($white), green($white), blue($white), 0.15) 50%, rgba(red($white), green($white), blue($white), 0.15) 75%, transparent 75%, transparent);
|
|
background-image: linear-gradient(45deg, rgba(red($white), green($white), blue($white), 0.15) 25%, transparent 25%, transparent 50%, rgba(red($white), green($white), blue($white), 0.15) 50%, rgba(red($white), green($white), blue($white), 0.15) 75%, transparent 75%, transparent);
|
|
background-size: 40px 40px;
|
|
}
|
|
|
|
.progress.active .progress-bar {
|
|
-webkit-animation: progress-bar-stripes 2s linear infinite;
|
|
-moz-animation: progress-bar-stripes 2s linear infinite;
|
|
-ms-animation: progress-bar-stripes 2s linear infinite;
|
|
-o-animation: progress-bar-stripes 2s linear infinite;
|
|
animation: progress-bar-stripes 2s linear infinite;
|
|
}
|
|
|
|
.progress-bar-danger {
|
|
background-color: $brand-danger;
|
|
}
|
|
|
|
.progress-striped .progress-bar-danger {
|
|
background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(red($white), green($white), blue($white), 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(red($white), green($white), blue($white), 0.15)), color-stop(0.75, rgba(red($white), green($white), blue($white), 0.15)), color-stop(0.75, transparent), to(transparent));
|
|
background-image: -webkit-linear-gradient(45deg, rgba(red($white), green($white), blue($white), 0.15) 25%, transparent 25%, transparent 50%, rgba(red($white), green($white), blue($white), 0.15) 50%, rgba(red($white), green($white), blue($white), 0.15) 75%, transparent 75%, transparent);
|
|
background-image: -moz-linear-gradient(45deg, rgba(red($white), green($white), blue($white), 0.15) 25%, transparent 25%, transparent 50%, rgba(red($white), green($white), blue($white), 0.15) 50%, rgba(red($white), green($white), blue($white), 0.15) 75%, transparent 75%, transparent);
|
|
background-image: linear-gradient(45deg, rgba(red($white), green($white), blue($white), 0.15) 25%, transparent 25%, transparent 50%, rgba(red($white), green($white), blue($white), 0.15) 50%, rgba(red($white), green($white), blue($white), 0.15) 75%, transparent 75%, transparent);
|
|
}
|
|
|
|
.progress-bar-success {
|
|
background-color: $brand-success;
|
|
}
|
|
|
|
.progress-striped .progress-bar-success {
|
|
background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(red($white), green($white), blue($white), 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(red($white), green($white), blue($white), 0.15)), color-stop(0.75, rgba(red($white), green($white), blue($white), 0.15)), color-stop(0.75, transparent), to(transparent));
|
|
background-image: -webkit-linear-gradient(45deg, rgba(red($white), green($white), blue($white), 0.15) 25%, transparent 25%, transparent 50%, rgba(red($white), green($white), blue($white), 0.15) 50%, rgba(red($white), green($white), blue($white), 0.15) 75%, transparent 75%, transparent);
|
|
background-image: -moz-linear-gradient(45deg, rgba(red($white), green($white), blue($white), 0.15) 25%, transparent 25%, transparent 50%, rgba(red($white), green($white), blue($white), 0.15) 50%, rgba(red($white), green($white), blue($white), 0.15) 75%, transparent 75%, transparent);
|
|
background-image: linear-gradient(45deg, rgba(red($white), green($white), blue($white), 0.15) 25%, transparent 25%, transparent 50%, rgba(red($white), green($white), blue($white), 0.15) 50%, rgba(red($white), green($white), blue($white), 0.15) 75%, transparent 75%, transparent);
|
|
}
|
|
|
|
.progress-bar-warning {
|
|
background-color: $brand-warning;
|
|
}
|
|
|
|
.progress-striped .progress-bar-warning {
|
|
background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(red($white), green($white), blue($white), 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(red($white), green($white), blue($white), 0.15)), color-stop(0.75, rgba(red($white), green($white), blue($white), 0.15)), color-stop(0.75, transparent), to(transparent));
|
|
background-image: -webkit-linear-gradient(45deg, rgba(red($white), green($white), blue($white), 0.15) 25%, transparent 25%, transparent 50%, rgba(red($white), green($white), blue($white), 0.15) 50%, rgba(red($white), green($white), blue($white), 0.15) 75%, transparent 75%, transparent);
|
|
background-image: -moz-linear-gradient(45deg, rgba(red($white), green($white), blue($white), 0.15) 25%, transparent 25%, transparent 50%, rgba(red($white), green($white), blue($white), 0.15) 50%, rgba(red($white), green($white), blue($white), 0.15) 75%, transparent 75%, transparent);
|
|
background-image: linear-gradient(45deg, rgba(red($white), green($white), blue($white), 0.15) 25%, transparent 25%, transparent 50%, rgba(red($white), green($white), blue($white), 0.15) 50%, rgba(red($white), green($white), blue($white), 0.15) 75%, transparent 75%, transparent);
|
|
}
|
|
|
|
.progress-bar-info {
|
|
background-color: $brand-info;
|
|
}
|
|
|
|
.progress-striped .progress-bar-info {
|
|
background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(red($white), green($white), blue($white), 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(red($white), green($white), blue($white), 0.15)), color-stop(0.75, rgba(red($white), green($white), blue($white), 0.15)), color-stop(0.75, transparent), to(transparent));
|
|
background-image: -webkit-linear-gradient(45deg, rgba(red($white), green($white), blue($white), 0.15) 25%, transparent 25%, transparent 50%, rgba(red($white), green($white), blue($white), 0.15) 50%, rgba(red($white), green($white), blue($white), 0.15) 75%, transparent 75%, transparent);
|
|
background-image: -moz-linear-gradient(45deg, rgba(red($white), green($white), blue($white), 0.15) 25%, transparent 25%, transparent 50%, rgba(red($white), green($white), blue($white), 0.15) 50%, rgba(red($white), green($white), blue($white), 0.15) 75%, transparent 75%, transparent);
|
|
background-image: linear-gradient(45deg, rgba(red($white), green($white), blue($white), 0.15) 25%, transparent 25%, transparent 50%, rgba(red($white), green($white), blue($white), 0.15) 50%, rgba(red($white), green($white), blue($white), 0.15) 75%, transparent 75%, transparent);
|
|
}
|
|
|
|
|
|
.progress-info .bar, .progress .bar-info {
|
|
background: $brand-info;
|
|
}
|
|
|
|
.vertical-bars {
|
|
padding:0;
|
|
margin:0;
|
|
}
|
|
|
|
.vertical-bars:after {
|
|
content: "";
|
|
display: block;
|
|
height: 0;
|
|
clear: both;
|
|
}
|
|
.vertical-bars li {
|
|
padding: 14px 0;
|
|
width: 25%;
|
|
display: block;
|
|
float: left;
|
|
text-align: center;
|
|
}
|
|
.vertical-bars li:first-child {
|
|
border-left: none;
|
|
}
|
|
.vertical-bars > li > .progress.vertical:first-child {
|
|
margin-left: auto;
|
|
}
|
|
.vertical-bars > li > .progress.vertical {
|
|
margin: 0 auto;
|
|
float: none;
|
|
}
|
|
|
|
/*
|
|
* TABS
|
|
*/
|
|
.nav-tabs{
|
|
border-bottom: none;
|
|
}
|
|
|
|
.nav-tabs>li > a .badge {
|
|
font-size: 11px;
|
|
padding: 3px 5px 3px 5px;
|
|
opacity: .5;
|
|
margin-left: 5px;
|
|
min-width: 17px;
|
|
font-weight: normal;
|
|
}
|
|
|
|
.tabs-left .nav-tabs>li > a .badge {
|
|
margin-right:5px;
|
|
margin-left:0px;
|
|
}
|
|
.nav-tabs>li > a .label {
|
|
display:inline-block;
|
|
font-size:11px;
|
|
margin-left:5px;
|
|
opacity: .5;
|
|
}
|
|
|
|
.nav-tabs>li>a {
|
|
color: $gray-light;
|
|
//color: $gray-lighter;
|
|
font-family: $font-family-bold;
|
|
|
|
&:hover{
|
|
color: $gray-lighter;
|
|
border-color: transparent transparent $gray-light transparent;
|
|
margin-top: 1px;
|
|
border-top-width: 0;
|
|
}
|
|
}
|
|
.nav-tabs > li.active > a {
|
|
|
|
background-color: $gray-lighter;
|
|
color: $gray-darkest;
|
|
border-top-width: 0px !important;
|
|
margin-top: 1px !important;
|
|
font-weight:bold;
|
|
}
|
|
.tabs-left .nav-tabs > li.active > a {
|
|
-webkit-box-shadow: -2px 0 0 $blue;
|
|
-moz-box-shadow: -2px 0 0 $blue;
|
|
box-shadow: -2px 0 0 $blue;
|
|
border-top-width: 1px !important;
|
|
border-left: none !important;
|
|
margin-left: 1px !important;
|
|
}
|
|
.tabs-left .nav-pills > li.active > a {
|
|
border:none !important;
|
|
box-shadow:none !important;
|
|
-webkit-box-shadow: none !important;
|
|
-moz-box-shadow: none !important;
|
|
}
|
|
.tabs-right .nav-tabs > li.active > a {
|
|
-webkit-box-shadow: 2px 0 0 $blue;
|
|
-moz-box-shadow: 2px 0 0 $blue;
|
|
box-shadow: 2px 0 0 $blue;
|
|
border-top-width: 1px !important;
|
|
border-right: none !important;
|
|
margin-right: 1px !important;
|
|
}
|
|
.tabs-below .nav-tabs > li.active > a {
|
|
-webkit-box-shadow: 0 2px 0 $blue;
|
|
-moz-box-shadow: 0 2px 0 $blue;
|
|
box-shadow: 0 2px 0 $blue;
|
|
border-bottom-width: 0px !important;
|
|
border-top: none !important;
|
|
margin-top: 0px !important;
|
|
}
|
|
|
|
.tabs-below > .nav-tabs, .tabs-right > .nav-tabs, .tabs-left > .nav-tabs {
|
|
border-bottom: 0;
|
|
}
|
|
|
|
.tab-content > .tab-pane, .pill-content > .pill-pane {
|
|
display: none;
|
|
}
|
|
|
|
.tab-content > .active, .pill-content > .active {
|
|
display: block;
|
|
}
|
|
|
|
.tabs-below > .nav-tabs {
|
|
border-top: 1px solid darken($gray-lighter, 7%);
|
|
}
|
|
|
|
.tabs-below > .nav-tabs > li {
|
|
margin-top: -1px;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.tabs-left > .nav-tabs > li, .tabs-right > .nav-tabs > li,
|
|
.tabs-left > .nav-pills > li, .tabs-right > .nav-pills > li {
|
|
float: none;
|
|
}
|
|
|
|
.tabs-left > .nav-tabs > li > a, .tabs-right > .nav-tabs > li > a,
|
|
.tabs-left > .nav-pills > li > a, .tabs-right > .nav-pills > li > a {
|
|
min-width: 74px;
|
|
margin-right: 0;
|
|
margin-bottom: 3px;
|
|
}
|
|
|
|
.tabs-left > .nav-tabs, .tabs-left > .nav-pills {
|
|
float: left;
|
|
margin-right: 19px;
|
|
border-right: 1px solid darken($gray-lighter, 7%);
|
|
} .tabs-left > .nav-pills {
|
|
border-right:none;
|
|
}
|
|
|
|
.tabs-left > .nav-tabs > li > a {
|
|
margin-right: -1px;
|
|
}
|
|
|
|
.tabs-left > .nav-tabs > li > a:hover, .tabs-left > .nav-tabs > li > a:focus {
|
|
border-color: $gray-lighter darken($gray-lighter, 10%) $gray-lighter $gray-lighter;
|
|
}
|
|
|
|
.tabs-left > .nav-tabs .active > a, .tabs-left > .nav-tabs .active > a:hover, .tabs-left > .nav-tabs .active > a:focus {
|
|
border-color: darken($gray-lighter, 10%) transparent darken($gray-lighter, 10%) darken($gray-lighter, 7%);
|
|
*border-right-color: $white;
|
|
}
|
|
|
|
.tabs-left > .tab-content {
|
|
margin-left: 109px;
|
|
}
|
|
|
|
.tabs-right > .nav-tabs {
|
|
float: right;
|
|
margin-left: 19px;
|
|
border-left: 1px solid darken($gray-lighter, 7%); /* DDD */
|
|
}
|
|
|
|
.tabs-right > .nav-tabs > li > a {
|
|
margin-left: -1px;
|
|
}
|
|
|
|
.tabs-right > .nav-tabs > li > a:hover, .tabs-right > .nav-tabs > li > a:focus {
|
|
border-color: $gray-lighter $gray-lighter $gray-lighter darken($gray-lighter, 7%);
|
|
}
|
|
|
|
.tabs-right > .nav-tabs .active > a, .tabs-right > .nav-tabs .active > a:hover, .tabs-right > .nav-tabs .active > a:focus {
|
|
border-color: darken($gray-lighter, 7%) darken($gray-lighter, 7%) darken($gray-lighter, 7%) transparent;
|
|
*border-left-color: $white;
|
|
}
|
|
|
|
.tabs-below > .nav-tabs, .tabs-right > .nav-tabs, .tabs-left > .nav-tabs {
|
|
border-bottom: 0;
|
|
}
|
|
|
|
.tab-content > .tab-pane, .pill-content > .pill-pane {
|
|
display: none;
|
|
}
|
|
|
|
.tab-content > .active, .pill-content > .active {
|
|
display: block;
|
|
}
|
|
|
|
.tabs-below > .nav-tabs {
|
|
border-top: 1px solid darken($gray-lighter, 7%);
|
|
}
|
|
|
|
.tabs-below > .nav-tabs > li {
|
|
margin-top: -1px;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.tabs-below > .nav-tabs > li > a:hover, .tabs-below > .nav-tabs > li > a:focus {
|
|
border-top-color: darken($gray-lighter, 7%);
|
|
border-bottom-color: transparent;
|
|
}
|
|
|
|
.tabs-below > .nav-tabs > .active > a, .tabs-below > .nav-tabs > .active > a:hover, .tabs-below > .nav-tabs > .active > a:focus {
|
|
border-color: transparent darken($gray-lighter, 7%) darken($gray-lighter, 7%) darken($gray-lighter, 7%); /* tabs */
|
|
}
|
|
|
|
/* bordered tabs */
|
|
.nav-tabs.bordered {
|
|
background:$white;
|
|
border:1px solid darken($gray-lighter, 7%);
|
|
}
|
|
|
|
.nav-tabs.bordered >:first-child a{
|
|
border-left-width:0px !important;
|
|
}
|
|
|
|
.nav-tabs.bordered + .tab-content {
|
|
border:1px solid darken($gray-lighter, 7%);
|
|
border-top:none;
|
|
}
|
|
|
|
/* bordered tabs top right */
|
|
|
|
.tabs-pull-right.nav-tabs>li, .tabs-pull-right.nav-pills>li {
|
|
float:right;
|
|
}
|
|
|
|
.tabs-pull-right.nav-tabs>li:first-child > a, .tabs-pull-right.nav-pills>li:first-child > a {
|
|
margin-right:1px;
|
|
}
|
|
|
|
.tabs-pull-right.bordered.nav-tabs>li:first-child > a, .tabs-pull-right.bordered.nav-pills>li:first-child > a {
|
|
border-left-width:1px !important;
|
|
margin-right:0px;
|
|
border-right-width:0px;
|
|
}
|
|
|
|
/*
|
|
* DROPDOWN MENU
|
|
*/
|
|
.dropdown-menu-xs {
|
|
min-width:37px;
|
|
}
|
|
|
|
.dropdown-menu-xs>li>a {
|
|
padding: 3px 10px;
|
|
}.dropdown-menu-xs>li>a:hover i {
|
|
color:#fff !important;
|
|
}
|
|
|
|
/* Dropdown menu extended */
|
|
.dropdown-submenu {
|
|
position: relative;
|
|
}
|
|
|
|
.dropdown-submenu>.dropdown-menu {
|
|
top: 0;
|
|
left: 100%;
|
|
margin-top: -6px;
|
|
margin-left: -1px;
|
|
}
|
|
|
|
.dropdown-submenu:hover{
|
|
// show sub menu
|
|
&>.dropdown-menu{
|
|
display: block;
|
|
}
|
|
|
|
&>a{
|
|
// keep "hover" effect on parent item when submenu is open
|
|
background-color: $gray-light;
|
|
color: $gray-darkest
|
|
}
|
|
a:after{
|
|
border-left-color: $green;
|
|
}
|
|
}
|
|
|
|
.dropdown-submenu>a {
|
|
&:after{
|
|
content: " ";
|
|
display: block;
|
|
position: absolute;
|
|
right: 5px;
|
|
top: 7px;
|
|
width: 0;
|
|
height: 0;
|
|
border-color: transparent;
|
|
border-style: solid;
|
|
border-width: 5px 0 5px 5px;
|
|
border-left-color: $gray-darker;
|
|
}
|
|
|
|
&:hover{
|
|
&:after{
|
|
border-left-color: $gray-lighter;
|
|
}
|
|
}
|
|
}
|
|
|
|
.dropdown-submenu.disabled>a:after {
|
|
border-left-color: $gray-light;
|
|
}
|
|
|
|
.dropdown-submenu.pull-left {
|
|
float: none;
|
|
}
|
|
|
|
.dropdown-submenu.pull-left>.dropdown-menu {
|
|
left: -100%;
|
|
margin-left: 10px;
|
|
}
|
|
|
|
/*
|
|
* CUSTOM BUTTON
|
|
*/
|
|
|
|
.pagination > li > a, .pagination > li > span {
|
|
box-shadow: inset 0 -2px 0 rgba(red($black), green($black), blue($black), 0.05);
|
|
-moz-box-shadow: inset 0 -2px 0 rgba(red($black), green($black), blue($black), 0.05);
|
|
-webkit-box-shadow: inset 0 -2px 0 rgba(red($black), green($black), blue($black), 0.05);
|
|
}
|
|
|
|
.disabled {
|
|
//color:$white;
|
|
}
|
|
.btn-default.disabled {
|
|
color: $gray-lighter;
|
|
}
|
|
|
|
.btn {
|
|
font-family: $font-family-bold;
|
|
will-change: background-color, border-color;
|
|
@include border-radius(2px);
|
|
//@include transition( all 0.06s linear );
|
|
@include transition( color 0.18s ease-in-out, background-color 0.18s ease-in-out, border-color 0.18s ease-in-out, box-shadow 0.18s ease-in-out );
|
|
//@include box-shadow(0 1px 3px 0 rgba(red($black), green($black), blue($black), 0.12), 0 1px 2px 0 rgba(red($black), green($black), blue($black), 0.24));
|
|
}
|
|
.btn:active {
|
|
//position: relative; conflict with bootstrap-toggle plugin
|
|
//top:1px;
|
|
//left:1px;
|
|
}
|
|
|
|
.btn.btn-ribbon {
|
|
background-color: #707070;
|
|
background-image: -moz-linear-gradient(top, #777, #666);
|
|
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#777), to(#666));
|
|
background-image: -webkit-linear-gradient(top, #777, #666);
|
|
background-image: -o-linear-gradient(top, #777, #666);
|
|
background-image: linear-gradient(to bottom, #777, #666);
|
|
background-repeat: repeat-x;
|
|
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff777777', endColorstr='#ff666666', GradientType=0);
|
|
color: white;
|
|
padding: 0 5px;
|
|
line-height: 20px;
|
|
vertical-align: middle;
|
|
height: 20px;
|
|
display: block;
|
|
border: none;
|
|
float: left;
|
|
margin: 0 8px 0 0;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.btn.btn-ribbon > i {
|
|
font-size:111%;
|
|
}
|
|
|
|
.ribbon-button-alignment {
|
|
padding-top: 10px;
|
|
display: inline-block;
|
|
}
|
|
|
|
.ribbon-button-alignment.pull-right > .btn.btn-ribbon {
|
|
margin: 0 0 0 8px;
|
|
}
|
|
|
|
|
|
/*
|
|
* Panels
|
|
*/
|
|
.panel-purple {
|
|
border-color:$purple;
|
|
& > .panel-heading {
|
|
color: $white;
|
|
background-color: $purple;
|
|
border-color: $purple;
|
|
}
|
|
}
|
|
.panel-greenLight {
|
|
border-color:$greenLight;
|
|
& > .panel-heading {
|
|
color: $white;
|
|
background-color: $greenLight;
|
|
border-color: $greenLight;
|
|
}
|
|
}
|
|
.panel-greenDark {
|
|
border-color:$greenDark;
|
|
& > .panel-heading {
|
|
color: $white;
|
|
background-color: $greenDark;
|
|
border-color: $greenDark;
|
|
}
|
|
}
|
|
.panel-darken {
|
|
border-color:$gray-dark;
|
|
& > .panel-heading {
|
|
color: $white;
|
|
background-color: #404040;
|
|
border-color: #404040;
|
|
}
|
|
}
|
|
.panel-green {
|
|
border-color:$green;
|
|
& > .panel-heading {
|
|
color: $white;
|
|
background-color: $green;
|
|
border-color: $green;
|
|
}
|
|
}
|
|
.panel-red {
|
|
border-color: $red;
|
|
& > .panel-heading {
|
|
color: $white;
|
|
background-color: $red;
|
|
border-color: $red;
|
|
}
|
|
}
|
|
.panel-teal {
|
|
border-color: $teal-lighter;
|
|
& > .panel-heading {
|
|
color: $white;
|
|
background-color: $teal-lighter;
|
|
border-color: $teal-lighter;
|
|
}
|
|
}
|
|
.panel-orange {
|
|
border-color: $orange;
|
|
& > .panel-heading {
|
|
color: $white;
|
|
background-color: $orange;
|
|
border-color: $orange;
|
|
}
|
|
}
|
|
.panel-blueDark {
|
|
border-color: $blueDark;
|
|
& > .panel-heading {
|
|
color: $white;
|
|
background-color: $blueDark;
|
|
border-color: $blueDark;
|
|
}
|
|
}
|
|
.panel-magenta {
|
|
border-color:$magenta;
|
|
& > .panel-heading {
|
|
color: $white;
|
|
background-color: $magenta;
|
|
border-color: $magenta;
|
|
}
|
|
}
|
|
.panel-blue {
|
|
border-color: $blue;
|
|
& > .panel-heading {
|
|
color: $white;
|
|
background-color: $blue;
|
|
border-color: $blue;
|
|
}
|
|
}
|
|
|
|
|
|
.panel-footer > .btn-block {
|
|
border-radius:0px;
|
|
-moz-border-radius:0px;
|
|
-webkit-border-radius: 0px;
|
|
border-bottom:none;
|
|
border-left:none;
|
|
border-right:none;
|
|
}
|
|
|
|
/*
|
|
* Circle Buttons
|
|
*/
|
|
|
|
.btn-circle {
|
|
width: 30px;
|
|
height: 30px;
|
|
text-align: center;
|
|
padding: 6px 0;
|
|
font-size: 12px;
|
|
line-height: 18px;
|
|
border-radius: 50%;
|
|
-moz-border-radius: 50%;
|
|
-webkit-border-radius: 50%;
|
|
@include box-shadow(0 1px 6px 0 rgba(0, 0, 0, 0.12),0 1px 6px 0 rgba(0, 0, 0, 0.12));
|
|
}
|
|
.btn-circle.btn-sm {
|
|
width: 22px;
|
|
height: 22px;
|
|
padding: 4px 0;
|
|
font-size: 12px;
|
|
line-height: 14px;
|
|
border-radius: 50%;
|
|
-moz-border-radius: 50%;
|
|
-webkit-border-radius: 50%;
|
|
}
|
|
.btn-circle.btn-lg {
|
|
width: 50px;
|
|
height: 50px;
|
|
padding: 10px 15px;
|
|
font-size: 18px;
|
|
line-height: 30px;
|
|
border-radius: 50%;
|
|
-moz-border-radius: 50%;
|
|
-webkit-border-radius: 50%;
|
|
}
|
|
.btn-circle.btn-xl {
|
|
width: 70px;
|
|
height: 70px;
|
|
padding: 10px 15px;
|
|
font-size: 24px;
|
|
line-height: 50px;
|
|
border-radius: 50%;
|
|
-moz-border-radius: 50%;
|
|
-webkit-border-radius: 50%;
|
|
}
|
|
|
|
|
|
/*
|
|
* buttons with labels
|
|
*/
|
|
|
|
.btn-label {
|
|
position: relative;
|
|
left: -8px;
|
|
display: inline-block;
|
|
padding: 5px 8px;
|
|
background: rgba(red($black), green($black), blue($black), 0.15);
|
|
border-radius: 2px 0 0 2px;
|
|
}
|
|
|
|
.btn-labeled {
|
|
padding-top: 0;
|
|
padding-bottom: 0;
|
|
padding-left: 8px;
|
|
}
|
|
|
|
.btn-link {
|
|
box-shadow: none;
|
|
-webkit-box-shadow: none;
|
|
font-size: $font-size-base + 1;
|
|
}
|
|
|
|
|
|
/*
|
|
* Morris Charts
|
|
*/
|
|
|
|
.morris-hover.morris-default-style {
|
|
border-radius: 5px;
|
|
padding: 5px;
|
|
color: #666;
|
|
background: rgba($gray-darkest, 0.85);
|
|
//border: solid 2px $teal-dark;
|
|
font-family: 'Oxygen Bold';
|
|
font-size: 10px;
|
|
text-align: left;
|
|
@include box-shadow(0 6px 12px rgba(0,0,0,.4));
|
|
|
|
|
|
.morris-hover-row-label {
|
|
font-weight: bold;
|
|
// margin: 0.25em 0;
|
|
}
|
|
.morris-hover-point {
|
|
white-space: nowrap;
|
|
// margin: 0.1em 0;
|
|
}
|
|
}
|
|
.morris-hover {
|
|
position: absolute;
|
|
z-index: $morris-hover;
|
|
}
|
|
.fixed-page-footer .morris-hover {
|
|
z-index: $fixed-footer-zindex - 1;
|
|
}
|
|
|
|
|