451 lines
9.1 KiB
SCSS
451 lines
9.1 KiB
SCSS
/*
|
|
* JQUI STUFF
|
|
*/
|
|
|
|
/* Overlay */
|
|
.ui-widget{
|
|
font-family: 'Oxygen Bold';
|
|
}
|
|
|
|
.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button {
|
|
font-family: 'Oxygen Bold';
|
|
}
|
|
|
|
.ui-widget-overlay {
|
|
background-image: none;
|
|
background: #aaa;
|
|
height: 100%;
|
|
z-index: $ui-widget-overlay !important;
|
|
position: fixed;
|
|
top: 0px;
|
|
left: 0px;
|
|
}
|
|
|
|
/* Slider */
|
|
.slider {
|
|
margin-top: 0px;
|
|
margin-bottom: 30px;
|
|
|
|
&.slider-vertical {
|
|
margin-bottom: 0px;
|
|
margin-right: 5px;
|
|
}
|
|
}
|
|
|
|
/* menu */
|
|
.ui-menu {
|
|
width: 155px;
|
|
padding: 2px;
|
|
-webkit-box-shadow: 0 2px 4px rgba(30, 30, 100, 0.25);
|
|
-moz-box-shadow: 0 2px 4px rgba(30,30,100,0.25);
|
|
box-shadow: 0 2px 4px rgba(30, 30, 100, 0.25);
|
|
background: $white;
|
|
border: 1px solid rgba(red($black), green($black), blue($black), 0.2);
|
|
z-index: 1;
|
|
|
|
.ui-state-disabled {
|
|
margin: .4em 0 .2em !important;
|
|
background: none !important;
|
|
color: #999 !important;
|
|
font-weight: normal !important;
|
|
cursor: default;
|
|
}
|
|
|
|
.ui-menu-item a .ui-menu-icon {
|
|
width: auto;
|
|
height:auto;
|
|
top: 0px;
|
|
left: auto;
|
|
right: auto;
|
|
bottom: auto;
|
|
text-indent: 0px;
|
|
}
|
|
}
|
|
|
|
.ui-icon-carat-1-e:before {
|
|
content: "\f105";
|
|
font-family: FontAwesome;
|
|
font-size: $font-size-base + 1px;
|
|
display: inline;
|
|
}
|
|
|
|
|
|
/* tabs */
|
|
.ui-tabs .ui-tabs-nav li a {
|
|
border-radius: 0px;
|
|
-moz-border-radius: 0px;
|
|
background-color: #F5F5F5;
|
|
border: 1px solid #F5F5F5;
|
|
border-bottom: 1px solid $nav-tabs-border-color;
|
|
color: #838383;
|
|
}
|
|
|
|
.ui-tabs .ui-tabs-nav li {
|
|
margin-right: 3px;
|
|
}
|
|
|
|
.ui-tabs .ui-tabs-nav li.ui-tabs-active a {
|
|
font-weight: bold;
|
|
border-top-width: 0px !important;
|
|
margin-top: 1px !important;
|
|
-webkit-box-shadow: 0 -2px 0 $blue;
|
|
-moz-box-shadow: 0 -2px 0 $blue;
|
|
box-shadow: 0 -2px 0 $blue;
|
|
}
|
|
|
|
.ui-tabs .ui-tabs-panel {
|
|
border: 1px solid $nav-tabs-border-color;
|
|
margin: 0;
|
|
padding: 10px 13px;
|
|
border-top: none;
|
|
}
|
|
|
|
.ui-tabs .ui-tabs-nav {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
/* accordions */
|
|
.ui-accordion .ui-accordion-content {
|
|
padding: 0;
|
|
}
|
|
|
|
.ui-accordion .ui-accordion-header {
|
|
background-color: lighten( $gray-lightest, 3%);
|
|
font-size: $font-size-base + 2px;
|
|
padding: 10px 15px 10px 36px !important;
|
|
}
|
|
|
|
.ui-accordion .ui-accordion-header, .ui-accordion .ui-accordion-content {
|
|
border-radius: 0px;
|
|
-moz-border-radius: 0px;
|
|
-webkit-border-radius: 0px;
|
|
}
|
|
.ui-accordion .ui-accordion-content {
|
|
padding: 15px;
|
|
}
|
|
.ui-accordion-header-active + .ui-accordion-content {
|
|
border-top: 1px solid $nav-tabs-border-color;
|
|
}
|
|
|
|
.ui-accordion .ui-accordion-header {
|
|
margin-top: -2px;
|
|
}
|
|
|
|
.ui-accordion .ui-accordion-header, .ui-accordion-content {
|
|
border-color: darken($gray-lighter, 7%) !important;
|
|
}
|
|
|
|
.ui-accordion-header-icon {
|
|
text-indent: 0px !important;
|
|
background-image: none !important;
|
|
text-align: center;
|
|
line-height: normal;
|
|
left: 12px !important;
|
|
margin-top: -6px !important;
|
|
font-size: 14px !important;
|
|
}
|
|
|
|
/*
|
|
* Calendar
|
|
*/
|
|
.ui-datepicker .ui-datepicker-next, .ui-datepicker .ui-datepicker-prev {
|
|
text-align: center;
|
|
margin-top: 2px;
|
|
}
|
|
.ui-datepicker-next >:first-child, .ui-datepicker-prev >:first-child {
|
|
text-indent: 0px !important;
|
|
}
|
|
.ui-datepicker .ui-datepicker-next span, .ui-datepicker .ui-datepicker-prev span {
|
|
background: none !important;
|
|
}
|
|
|
|
/*
|
|
* JS SLIDER
|
|
* Copied from: js/plugin/noUiSlider/jquery.nouislider.css
|
|
*/
|
|
|
|
/* General CSS resets;
|
|
* The target itself is not affected, allowing
|
|
* the remainder of the document to use an
|
|
* alternate box-sizing model;
|
|
* Support for box-sizing is wide spread:
|
|
* http://caniuse.com/#search=box-sizing
|
|
*/
|
|
.noUi-target * {
|
|
-webkit-box-sizing: border-box;
|
|
-moz-box-sizing: border-box;
|
|
box-sizing: border-box;
|
|
-webkit-touch-callout: none;
|
|
-ms-touch-action: none;
|
|
-webkit-user-select: none;
|
|
-moz-user-select: none;
|
|
-ms-user-select: none;
|
|
cursor: default;
|
|
}
|
|
|
|
/* Main slider bar;
|
|
* Standard styles no longer incorrectly force a
|
|
* width or height on the slider.
|
|
*/
|
|
.noUi-base {
|
|
width: 100%;
|
|
height: 14px;
|
|
position: relative;
|
|
max-width: 100%;
|
|
max-height: 100%;
|
|
border: 1px solid #bfbfbf;
|
|
z-index: 1;
|
|
}
|
|
|
|
.noUi-origin-lower {
|
|
background: lighten($slider-bar-color, 20%);
|
|
}
|
|
|
|
/* Handles + active state;
|
|
* The :after pseudo-element wont inherit
|
|
* box-sizing, so it needs to applied manually.
|
|
*/
|
|
.noUi-handle {
|
|
background: $handle-bg-color;
|
|
height: 30px;
|
|
width: 16px;
|
|
border: 1px solid $white;
|
|
margin: -8px 0 0 -8px;
|
|
cursor: default;
|
|
&:hover { background: darken($handle-bg-color, 10%); }
|
|
}
|
|
.noUi-active {
|
|
cursor: default;
|
|
box-shadow: rgba(red($black), green($black), blue($black), 0.1) 1px 1px 1px 0px;
|
|
background: #686868;
|
|
height: 32px;
|
|
width: 18px;
|
|
margin: -9px 0 0 -8px;
|
|
border: none;
|
|
|
|
&:after {
|
|
-webkit-box-sizing: border-box;
|
|
-moz-box-sizing: border-box;
|
|
box-sizing: border-box;
|
|
content: "";
|
|
display: block;
|
|
height: 100%;
|
|
border: 1px solid $nav-tabs-border-color;
|
|
}
|
|
}
|
|
|
|
/* Styling-only classes;
|
|
* Structured to prevent double declarations
|
|
* for various states of the slider.
|
|
*/
|
|
.noUi-connect {
|
|
background: $slider-bar-color;
|
|
}
|
|
.noUi-background {
|
|
background: $gray-lighter;
|
|
border:none;
|
|
}
|
|
|
|
/* Functional styles for handle positioning;
|
|
* Note that the origins have z-index 0, the base has
|
|
* z-index 1; This fixes a bug where borders become invisible.
|
|
*/
|
|
.noUi-origin {
|
|
position: absolute;
|
|
right: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
z-index: 0;
|
|
}
|
|
.noUi-origin-upper {
|
|
background: inherit !important;
|
|
}
|
|
.noUi-z-index {
|
|
z-index: 10;
|
|
}
|
|
|
|
/* Adaptations for the vertical slider;
|
|
* Some standard styles have been extended to keep
|
|
* exceptions for the vertical slider as minimal as possible.
|
|
*/
|
|
.noUi-vertical {
|
|
width: 10px;
|
|
height: 100%;
|
|
}
|
|
.noUi-vertical .noUi-origin {
|
|
bottom: 0;
|
|
left: 0;
|
|
}
|
|
.noUi-vertical .noUi-handle {
|
|
margin: -8px 0 0 -3px;
|
|
}
|
|
|
|
/* Various alternate slider states;
|
|
* Support for transition is widely available,
|
|
* Only IE7, IE8 and IE9 will ignore these rules.
|
|
* Since this is merely a progressive enhancement,
|
|
* this is no problem at all.
|
|
* http://caniuse.com/#search=transition
|
|
*/
|
|
.noUi-target[disabled] .noUi-base {
|
|
background: $gray-light;
|
|
}
|
|
.noUi-target[disabled] .noUi-connect {
|
|
background: #bbb;
|
|
}
|
|
.noUi-state-tap .noUi-origin {
|
|
-webkit-transition: left 0.3s, top 0.3s;
|
|
transition: left 0.3s, top 0.3s;
|
|
}
|
|
|
|
/*
|
|
* JQUI SPINNERS
|
|
*/
|
|
.ui-spinner-input {
|
|
margin: 0 !important;
|
|
height: 30px;
|
|
padding: 6px 24px 6px 12px;
|
|
}
|
|
|
|
.ui-spinner-input.spinner-left {
|
|
padding: 6px 12px 6px 24px;
|
|
}
|
|
|
|
.ui-spinner {
|
|
width: 100%;
|
|
}
|
|
|
|
.ui-spinner-input.spinner-left + .ui-spinner-button, .ui-spinner-input.spinner-left + .ui-spinner-button + .ui-spinner-button{
|
|
right: auto;
|
|
left: 0px;
|
|
}
|
|
|
|
.ui-spinner-up, .ui-spinner-down {
|
|
background: $brand-success;
|
|
border-radius: 0px;
|
|
}
|
|
.ui-spinner-up:hover, .ui-spinner-up:active, .ui-spinner-up:focus {
|
|
background: darken($brand-success, 10%);
|
|
}
|
|
.ui-spinner-down:hover, .ui-spinner-down:active, .ui-spinner-down:focus {
|
|
background: darken($brand-danger, 10%);
|
|
}
|
|
|
|
.ui-spinner-down {
|
|
background: lighten($brand-danger, 5%);
|
|
}
|
|
|
|
.ui-spinner-up:before, .ui-spinner-down:before {
|
|
display: inline-block;
|
|
font-family: FontAwesome;
|
|
font-style: normal;
|
|
font-weight: normal;
|
|
line-height: 1;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
|
|
content: "\f067";
|
|
color: $white;
|
|
font-size: $font-size-base + 1px;
|
|
margin-top: 1px;
|
|
|
|
}
|
|
.ui-spinner-down:before {
|
|
content: "\f068";
|
|
}
|
|
|
|
.ui-spinner-up >:first-child, .ui-spinner-down >:first-child {
|
|
display: none;
|
|
}
|
|
|
|
|
|
.ui-spinner-button {
|
|
width: 19px;
|
|
}
|
|
|
|
/* spinner both */
|
|
.ui-spinner-input.spinner-both {
|
|
padding: 6px 30px;
|
|
}
|
|
|
|
.ui-spinner-input.spinner-both + .ui-spinner-button + .ui-spinner-button {
|
|
left: 0px;
|
|
right: auto;
|
|
}
|
|
.ui-spinner-input.spinner-both + .ui-spinner-button,
|
|
.ui-spinner-input.spinner-both + .ui-spinner-button + .ui-spinner-button {
|
|
height: 30px;
|
|
width: 25px;
|
|
}
|
|
|
|
.ui-spinner-input.spinner-both + .ui-spinner-up:before, .ui-spinner-input.spinner-both + .ui-spinner-up + .ui-spinner-down:before {
|
|
margin-top: 8px;
|
|
}
|
|
|
|
/*
|
|
* JQUI ADJUSTMENT
|
|
*/
|
|
.ui-dialog {
|
|
-webkit-box-shadow: 0 5px 15px rgba(red($black), green($black), blue($black), 0.5);
|
|
box-shadow: 0 5px 15px rgba(red($black), green($black), blue($black), 0.5);
|
|
|
|
border: 1px solid $gray-light;
|
|
border: 1px solid rgba(red($black), green($black), blue($black), 0.2);
|
|
color: $gray-light;
|
|
background-color: $gray-lighter;
|
|
}
|
|
|
|
.widget-header >:first-child {
|
|
margin: 13px 0;
|
|
}
|
|
|
|
.ui-widget-overlay {
|
|
z-index: 999;
|
|
}
|
|
|
|
.ui-dialog .ui-dialog-titlebar {
|
|
padding: 0 10px;
|
|
background: $gray-dark;
|
|
border-bottom-color: $gray-lighter;
|
|
}
|
|
|
|
.ui-dialog .ui-dialog-title {
|
|
margin: 0;
|
|
color: $gray-lighter;
|
|
}
|
|
|
|
.ui-dialog .ui-dialog-titlebar-close {
|
|
margin-top: -16px;
|
|
margin-right: 4px;
|
|
}
|
|
|
|
.ui-dialog-titlebar-close:before {
|
|
content: "\f00d";
|
|
font-family: FontAwesome;
|
|
font-style: normal;
|
|
font-weight: normal;
|
|
line-height: 1;
|
|
color: $gray-lighter;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
font-size: 13px;
|
|
}
|
|
|
|
|
|
.ui-dialog .ui-dialog-buttonpane button {
|
|
margin: 0 .4em 0 0;
|
|
}
|
|
|
|
.ui-dialog .ui-dialog-buttonpane {
|
|
margin-top: 13px;
|
|
padding: 10px 10px 10px;
|
|
text-align: right;
|
|
border-top: 1px solid $gray-darkest;
|
|
background-color: $gray-light;
|
|
}
|
|
|
|
.ui-autocomplete {
|
|
z-index: $ajax-dropdown-zindex !important;
|
|
}
|
|
|