|
// ----------------------------------------------------------------------------
|
|
//
|
|
// jQuery UI CUSTOM
|
|
//
|
|
// ----------------------------------------------------------------------------
|
|
// DESCRIPTION:
|
|
// Overrides of jQuery UI.less stuff
|
|
//
|
|
// Contents:
|
|
// - UI WIDGETS IN GENERAL
|
|
// - TAB WIDGET
|
|
// - DIV-Container with Tabs & Panels
|
|
// - LIST WITH TABS (UL)
|
|
// - SINGLE TAB (LI)
|
|
// - LINKS
|
|
// - STATES (Active, Default, Hover)
|
|
// - UI-TABS-NAV (Class)
|
|
// - UI-TABS-COLLAPSIBLE
|
|
// - DIV (UI-TABS-PANEL)
|
|
// - UI-TABS-PANEL (CLASS)
|
|
// UI-AUTOCOMPLETE
|
|
// ----------------------------------------------------------------------------
|
|
|
|
|
|
|
|
|
|
// --------------------------------------
|
|
// UI WIDGETS IN GENERAL
|
|
// --------------------------------------
|
|
|
|
.ui-widget-content {
|
|
background: white;
|
|
}
|
|
|
|
|
|
|
|
|
|
// --------------------------------------
|
|
// TAB WIDGET
|
|
// --------------------------------------
|
|
// Container with Tabs & Panels (DIV)
|
|
|
|
.tabwidget {
|
|
background: white;
|
|
position: relative;
|
|
padding: 0 !important; // hps
|
|
zoom: 1;
|
|
// -webkit-border-radius: 4px;
|
|
// border-radius: 4px;
|
|
border: 0;
|
|
color: #333333;
|
|
overflow: hidden;
|
|
width: 100%;
|
|
|
|
|
|
|
|
|
|
// --------------------------------------
|
|
// LIST WITH TABS (UL)
|
|
// --------------------------------------
|
|
|
|
> ul {
|
|
margin: 0;
|
|
padding: 0.2em 0.2em 0 0;
|
|
outline: 0;
|
|
line-height: 1.3;
|
|
text-decoration: none;
|
|
font-size: @font-size-base; // hps
|
|
font-weight: bold;
|
|
list-style: none;
|
|
display: block;
|
|
background-color: none;
|
|
border: 1px #dddddd;
|
|
color: #fe5f14;
|
|
margin: 0;
|
|
|
|
&::after {
|
|
content: ".";
|
|
display: block;
|
|
height: 0;
|
|
clear: both;
|
|
visibility: hidden;
|
|
}
|
|
|
|
|
|
|
|
// --------------------------------------
|
|
// SINGLE TAB (LI)
|
|
// --------------------------------------
|
|
|
|
li {
|
|
list-style: none;
|
|
float: left;
|
|
position: relative;
|
|
top: 1px;
|
|
//margin: 0 0.4em 1px 0;
|
|
margin: 1px 0.2em 0 0;
|
|
border-bottom: 0 !important;
|
|
border-top-right-radius: 4px;
|
|
border-top-left-radius: 4px;
|
|
padding: 0;
|
|
white-space: nowrap;
|
|
border: 1px solid #cccccc;
|
|
background: #f6f6f6 url(ui-lightness/images/ui-bg_glass_100_f6f6f6_1x400.png) 50% 50% repeat-x;
|
|
font-size: @font-size-smaller ;
|
|
font-weight: bold;
|
|
color: #1c94c4;
|
|
|
|
&.ui-tabs-selected {
|
|
margin-bottom: 0;
|
|
padding-bottom: 1px;
|
|
|
|
a { cursor: pointer; }
|
|
}
|
|
|
|
// --------------
|
|
// LINKS
|
|
//
|
|
a {
|
|
float: left;
|
|
//padding: 0.8em 1.2em;
|
|
padding: 0.2em 0.7em;
|
|
text-decoration: none;
|
|
cursor: pointer;
|
|
}
|
|
|
|
|
|
// --------------
|
|
// STATES (Active, Default, Hover)
|
|
// Outline: 0 ; in anchor to avoid dotted frame after click
|
|
|
|
&.ui-state-hover{
|
|
a,
|
|
a:hover {
|
|
color: @tabs-text-hover;
|
|
background-color: @tabs-bg-hover;
|
|
}
|
|
}
|
|
|
|
&.ui-state-active {
|
|
color: #000;
|
|
background-color: @tabs-bg;
|
|
|
|
a,
|
|
a:link,
|
|
a:visited {
|
|
color: #000;
|
|
background-color: @tabs-bg; // PENDENT: NOETIG???
|
|
outline: 0 ;
|
|
}
|
|
|
|
&.ui-state-hover {
|
|
a,
|
|
a:hover {
|
|
color: #000;
|
|
background-color: @brand-light;// PENDENT: NOETIG???
|
|
}
|
|
}
|
|
}
|
|
|
|
&.ui-state-default{
|
|
border: 1px solid @brand-darkest;
|
|
background: #fff;
|
|
font-weight: normal;
|
|
color: @brand-darkest;
|
|
margin: 0 0 0 0.6em;
|
|
|
|
a,
|
|
a:link { color: @brand-darkest; }
|
|
}
|
|
|
|
&.ui-state-disabled a {
|
|
cursor: text;
|
|
outline: 0 ;
|
|
}
|
|
&.ui-state-processing a { cursor: text; }
|
|
&.ui-state-loading a { outline: 0 ; }
|
|
|
|
}
|
|
// /li
|
|
|
|
|
|
// LI (List Elements)
|
|
// These statements have been active, probably we can trash them once
|
|
//.ui-state-default,
|
|
//.ui-widget-content .ui-state-default,
|
|
//.ui-widget-header .ui-state-default {
|
|
// border: 1px solid @gray-medium;
|
|
// background: #fff;
|
|
// font-weight: normal;
|
|
// color: #1c94c4;
|
|
// margin: 0 0 0 0.6em;
|
|
//}
|
|
//.ui-state-active,
|
|
//.ui-widget-content .ui-state-active,
|
|
//.ui-widget-header .ui-state-active {
|
|
// border: 1px solid @gray-medium; // hps
|
|
// // background: #ffffff url(images/ui-bg_glass_65_ffffff_1x400.png) 50% 50% repeat-x;
|
|
// background: none;
|
|
// background-color: @gray-verylight; // hps
|
|
// font-weight: normal; // hps
|
|
// color: #000; // hps
|
|
//}
|
|
|
|
|
|
|
|
// UL
|
|
&.ui-widget-header {
|
|
//background: transparent;
|
|
//border: 0px;
|
|
//color: #fe5f14;
|
|
}
|
|
|
|
|
|
|
|
// --------------------------------------
|
|
// UI-TABS-NAV (Class)
|
|
// --------------------------------------
|
|
// UL
|
|
&.ui-tabs-nav {
|
|
margin: 0 0.4em 0.6em 0;
|
|
padding: 0.4em 0.2em 0 0.7em;
|
|
background-color: #ffffff;
|
|
position: fixed;
|
|
top: 100px;
|
|
width: 100%;
|
|
z-index: 1029;
|
|
border-bottom: 1px solid #999 !important;
|
|
|
|
li {
|
|
margin: 1px 0.2em 0 0;
|
|
|
|
a { padding: 0.2em 0.7em; }
|
|
|
|
&.ui-tabs-active {
|
|
border-bottom: 1px @tabs-bg solid !important ;
|
|
margin-bottom: -1px;
|
|
padding-bottom: 0;
|
|
}
|
|
}
|
|
} // /.ui-tabs-nav
|
|
|
|
}
|
|
// /ul
|
|
|
|
|
|
// --------------------------------------
|
|
// UI-TABS-COLLAPSIBLE
|
|
// --------------------------------------
|
|
&.ui-tabs.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-selected a {
|
|
cursor: pointer;
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
// --------------------------------------
|
|
// DIV (UI-Tabs-Panel)
|
|
// --------------------------------------
|
|
// Single Panel, selected via Tabs
|
|
// Some of the Panels do not have a class
|
|
|
|
& > div {
|
|
display: none;
|
|
//border-top: 1px solid #999 !important;
|
|
//border-left: 1px solid #999 !important;
|
|
//border-right: 1px solid #999 !important;
|
|
padding-top: 1.8em !important;
|
|
border-bottom: none;
|
|
width: 100%;
|
|
height: 100%;
|
|
min-height: 400px;
|
|
overflow: hidden ;
|
|
|
|
//--------------------------
|
|
// UI-Tabs-Panel (CLASS)
|
|
// --------------------------
|
|
|
|
&.ui-tabs-panel{
|
|
width: 100%;
|
|
overflow: hidden;
|
|
// aus Original oben
|
|
//background: none;
|
|
background-color: @tabs-bg;
|
|
//overflow: hidden; // show scrollbar vertical if overflown
|
|
display: block;
|
|
|
|
// further tabwidget within a tabwidget (documents tab etc.)
|
|
& > .tabwidget{
|
|
//background-color: rgb(239, 239, 239) ;
|
|
position: relative ;
|
|
|
|
.ui-tabs-panel {
|
|
//background-color: rgb(239, 239, 239) !important;
|
|
background-color: @tabs-bg ;
|
|
position: relative ;
|
|
top: auto;
|
|
padding-top: 0 !important ;
|
|
}
|
|
.ui-tabs-nav{ background-color: @tabs-bg; }
|
|
}
|
|
|
|
}
|
|
// .ui-tabs-panel
|
|
|
|
} // /div (.ui-tabs-panel)
|
|
|
|
|
|
|
|
}
|
|
// /.tabwidget
|
|
|
|
|
|
#content > form > .tabwidget > .ui-tabs-panel{
|
|
// further tabwidget within a tabwidget (documents tab etc.)
|
|
& > .tabwidget{
|
|
background-color: rgb(239, 239, 239) ;
|
|
position: relative ;
|
|
& > .ui-tabs-nav{
|
|
position: relative ;
|
|
top: auto;
|
|
background-color: none;
|
|
}
|
|
& > .ui-tabs-panel {
|
|
background-color: rgb(239, 239, 239);
|
|
position: relative ;
|
|
top: auto;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
// Dialog
|
|
.ui-dialog {
|
|
|
|
.ui-dialog-titlebar {
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
// jstree
|
|
.jstree a {
|
|
border-bottom: none;
|
|
}
|
|
|
|
|
|
|
|
.ui-widget input[type="button"]{
|
|
|
|
}
|
|
|
|
|
|
// -------------------
|
|
// Part_Picker
|
|
// Select Parts in input-fields
|
|
|
|
span.part_picker,
|
|
span.chart_picker{
|
|
margin: 0 !important;
|
|
padding: 0 !important;
|
|
}
|
|
|
|
// -------------------
|
|
// Part_Picker
|
|
// Select Customer in input-fields
|
|
// PENDENT: Ausrichtung vertikal in Zelle
|
|
span.customer_vendor_picker{
|
|
margin: 0 !important;
|
|
padding: 0 !important;
|
|
}
|
|
// -------------------
|
|
// Date_Picker
|
|
// Select Date in Popover
|
|
// PENDENT: Ausrichtung vertikal in Zelle
|
|
input.datepicker{
|
|
margin: -0.3em 0 0 0 !important;
|
|
//padding: 0 !important;
|
|
}
|
|
|
|
|
|
|
|
// --------------------------------------
|
|
// AUTOCOMPLETE
|
|
// --------------------------------------
|
|
|
|
.ui-autocomplete {
|
|
z-index: 9000 ;
|
|
|
|
li{
|
|
|
|
a{
|
|
display: block ;
|
|
font-size: 80% ;
|
|
padding-top: 0.4em !important;
|
|
padding-bottom: 0.4em !important;
|
|
|
|
&:hover{
|
|
background-color: #C9C9C9;
|
|
border: none ;
|
|
color: #000 ;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// --------------------------------------
|
|
// DATEPICKER
|
|
// --------------------------------------
|
|
// Forward / Backward Arrows
|
|
.ui-widget-header {
|
|
.ui-icon {
|
|
background-image: url(ui-lightness/images/ui-icons_222222_256x240.png);
|
|
}
|
|
.ui-state-hover{
|
|
.ui-icon{
|
|
background-image: url(ui-lightness/images/ui-icons_ef8c08_256x240.png);
|
|
//background: #ffffff !important;
|
|
}
|
|
}
|
|
}
|
|
// Days
|
|
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
|
|
color: @gray-mediumdark;
|
|
}
|
|
// Calendar symbol
|
|
img.ui-datepicker-trigger{
|
|
vertical-align: middle;
|
|
margin-left: 0.2em ;
|
|
}
|
|
|
|
.ui-datepicker-calendar .ui-state-highlight {
|
|
color: #ffffff ;
|
|
background-color: @gray-mediumdark;
|
|
border: #000000 ;
|
|
}
|
|
.ui-datepicker-calendar td a.ui-state-hover {
|
|
color: #ffffff ;
|
|
background-color: #000000;
|
|
border: #000000 ;
|
|
}
|
|
.ui-state-hover,
|
|
.ui-widget-content .ui-state-hover,
|
|
.ui-widget-header .ui-state-hover,
|
|
.ui-state-focus,
|
|
.ui-widget-content .ui-state-focus,
|
|
.ui-widget-header .ui-state-focus {
|
|
border: 1px solid #000000;
|
|
background: #ffffff;
|
|
color: #000000;
|
|
}
|
|
.ui-widget-header .ui-datepicker-header .ui-state-hover .ui-icon {
|
|
background: #ffffff; ;
|
|
}
|
|
.ui-state-default .ui-icon {
|
|
background-image: url(ui-lightness/images/ui-icons_777777_256x240.png) !important;
|
|
}
|
|
.ui-state-hover .ui-icon,
|
|
.ui-state-focus .ui-icon {
|
|
background-image: url(ui-lightness/images/ui-icons_777777_256x240.png) !important;
|
|
}
|
|
.ui-state-active .ui-icon {
|
|
background-image: url(ui-lightness/images/ui-icons_777777_256x240.png) !important;
|
|
}
|
|
.ui-datepicker select.ui-datepicker-month,
|
|
.ui-datepicker select.ui-datepicker-year {
|
|
width: 48%;
|
|
}
|
|
|
|
// --------------------------------------
|
|
// CKEditor
|
|
// --------------------------------------
|
|
.cke_editable {
|
|
background-color: white;
|
|
padding: 6px;
|
|
//margin-left: -0.3em ;
|
|
border-top: 1px #999 solid;
|
|
border-right: 1px #ddd solid;
|
|
border-left: 1px #ddd solid;
|
|
overflow: auto ;
|
|
font-size: 11pt ;
|
|
min-width: @textarea-wi-lightwide ;
|
|
min-height: 4.0em ;
|
|
&:focus {
|
|
outline: none ;
|
|
background-color: @formelement-focus-bg ;
|
|
border: @formelement-focus-border ;
|
|
}
|
|
|
|
p {
|
|
font-size: 10pt !important;
|
|
padding: 0 ;
|
|
margin: 0 0 0.4em 0 ;
|
|
font-weight: normal;
|
|
}
|
|
}
|
|
div.cke_editable.wi-small-wide{
|
|
margin-right: 24px !important ;
|
|
}
|
|
body > .ui-dialog > .ui-dialog-content > p > .cke_editable {
|
|
border: 1px #dcdcdc solid !important;
|
|
padding: 0.4em;
|
|
margin: 0;
|
|
font-size: 100%;
|
|
width: 100% !important;
|
|
}
|
|
// --------------------------------------
|
|
// UI-DIALOG
|
|
// --------------------------------------
|
|
.ui-dialog-titlebar.ui-widget-header {
|
|
button.ui-dialog-titlebar-close {
|
|
right: 0.3em;
|
|
top: 0;
|
|
width: 21px;
|
|
margin: 5px 0 0 0;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
|