css/design40/less/jquery-ui_overrides.less

   1 /* ------------------------------------------------------------- */
   2 /* JQUERY-UI OVERRIDES (jquery-ui_overrides.less)                */
   3 /* ------------------------------------------------------------- */
   4
   5
   6 // ----------------------------------------------------------------------------
   7 //
   8 // jQuery UI CUSTOM
   9 //
  10 // ----------------------------------------------------------------------------
  11 // DESCRIPTION:
  12 // Overrides of jQuery UI LESS or CSS stuff
  13 //
  14 // Contents:
  15 // - UI WIDGETS IN GENERAL
  16 // - TAB WIDGET
  17 //   - DIV-Container with Tabs & Panels
  18 //     - LIST WITH TABS (UL)
  19 //       - SINGLE TAB (LI)
  20 //         - LINKS
  21 //         - STATES (Active, Default, Hover)
  22 //     - UI-TABS-NAV (Class)
  23 //     - UI-TABS-COLLAPSIBLE
  24 //     - DIV (UI-TABS-PANEL)
  25 //       - UI-TABS-PANEL (CLASS)
  26 // UI-AUTOCOMPLETE
  27 // ----------------------------------------------------------------------------
  28
  29
  30
  31
  32 // --------------------------------------
  33 // UI WIDGETS IN GENERAL
  34 // --------------------------------------
  35
  36
  37
  38
  39
  40
  41 // --------------------------------------
  42 // TAB WIDGET
  43 // --------------------------------------
  44 // Container with Tabs & Panels (DIV)
  45
  46 .tabwidget {
  47   width:       100%;
  48   overflow:   hidden;
  49   position:   relative;
  50   zoom:       1;
  51   padding:     0 !important;
  52   border:     0;
  53
  54   color:       @tabs-default-color;
  55   //background: @tabs-bg;
  56   background: transparent;
  57
  58
  59
  60   // -----------------------
  61   // LIST WITH TABS (UL)
  62   // -----------------------
  63   > ul {
  64     display:           block;
  65     list-style:       none;
  66     outline:           0;
  67     margin:           0;
  68     padding:           0.2em 0.2em 0 0;
  69     margin:           0;
  70
  71     font-size:         @font-size-base; // hps
  72     font-weight:       bold;
  73     line-height:       1.3;
  74     text-decoration:  none;
  75
  76     // -----------------------
  77     // SINGLE TAB (LI)
  78     // -----------------------
  79     li {
  80       position:   relative;
  81       top:        1px;
  82       float:      left;
  83       list-style: none;
  84
  85       margin:      1px 0.2em 0 0;
  86       padding:     0;
  87       white-space: nowrap;
  88
  89       border-bottom:           0 !important;
  90       border-top-right-radius: @tabs-border-radius;
  91       border-top-left-radius:  @tabs-border-radius;
  92       border:                  1px solid #cccccc;
  93
  94       background-color:    @tabs-default-bg ;
  95       color:               @tabs-default-color;
  96       font-size:           @font-size-smaller ;
  97       font-weight:         bold;
  98
  99       &.ui-tabs-selected {
 100         margin-bottom:    0;
 101         padding-bottom:   1px;
 102
 103         a { cursor:       pointer; }
 104       }
 105
 106       // -----------------------
 107       // LINKS
 108       // -----------------------
 109       a {
 110         float:           left;
 111         padding:         0.2em 0.7em;
 112         text-decoration: none;
 113         cursor:          pointer;
 114       }
 115
 116       // -----------------------
 117       // STATES (Active, Default, Hover)
 118       // -----------------------
 119       // Outline: 0 ; in anchor to avoid dotted frame after click
 120
 121       &.ui-state-default{
 122         margin:       0 0 0 0.6em;
 123         background:   @tabs-default-bg;
 124         color:         @tabs-default-color;
 125         border:       1px @tabs-border-color solid;
 126         font-weight:   normal;
 127
 128         a,
 129         a:link {
 130           color:       @tabs-default-color;
 131           font-weight: normal;
 132         }
 133       }
 134
 135       &.ui-state-hover{
 136         color:             @tabs-default-hover-color;
 137         background-color: @tabs-default-hover-bg;
 138         a,
 139         a:hover {}
 140       }
 141
 142       &.ui-state-active {
 143         color:               @tabs-active-color;
 144         background-color:   @tabs-active-bg;
 145
 146         a,
 147         a:link,
 148         a:visited {
 149           color:             @tabs-active-color;
 150           outline:           0 ;
 151         }
 152
 153         &.ui-state-hover {
 154           color: @tabs-active-hover-color;
 155           a,
 156           a:hover {}
 157         }
 158       } // /&.ui-state-active
 159
 160       &.ui-state-disabled a {
 161         cursor:   text;
 162         outline:   0 ;
 163       }
 164       &.ui-state-processing a { cursor: text; }
 165       &.ui-state-loading    a { outline: 0 ;  }
 166
 167     }
 168     // /li
 169
 170     // UL
 171     &.ui-widget-header {
 172       //background: transparent;
 173       //border: 0px;
 174       //color: #fe5f14;
 175     }
 176
 177
 178
 179     // -----------------------
 180     // UI-TABS-NAV (Class)
 181     // -----------------------
 182     // UL
 183     &.ui-tabs-nav {
 184       position: fixed;
 185       top: 100px;
 186       width: 100%;
 187       z-index: 1029;
 188
 189       margin: 0 0.4em 0.6em 0;
 190       padding: 0.4em 0.2em 0 0.7em;
 191
 192       background-color: @tabs-bg;
 193       border-bottom: 1px @tabs-border-color solid !important;
 194
 195       li {
 196         margin: 1px 0.2em 0 0;
 197
 198         a { padding: 0.2em 0.7em; }
 199
 200         &.ui-tabs-active {
 201           border-bottom: 1px @tabs-active-bg solid !important ;
 202           margin-bottom: -1px;
 203           padding-bottom: 0;
 204         }
 205       }
 206     } // /.ui-tabs-nav
 207
 208   }
 209   // /ul
 210
 211
 212   // -----------------------
 213   // UI-TABS-COLLAPSIBLE
 214   // -----------------------
 215   &.ui-tabs.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-selected a {
 216      cursor: pointer;
 217   }
 218
 219
 220
 221
 222
 223   // -----------------------
 224   // DIV (UI-Tabs-Panel)
 225   // -----------------------
 226   // Single Panel, selected via Tabs
 227   // Some of the Panels do not have a class PENDENT: loesen!!!
 228
 229   //--------------------------
 230   // UI-Tabs-Panel (DIV WITHOUT CLASS)
 231   // --------------------------
 232   & > div {
 233     display: none;
 234     //border-top: 1px solid #999 !important;
 235     //border-left: 1px solid #999 !important;
 236     //border-right: 1px solid #999 !important;
 237     padding-top: 3.5em !important;
 238     border-bottom: none;
 239     width: 100%;
 240     height: 100%;
 241     min-height: 400px;
 242     overflow: hidden ;
 243
 244     //--------------------------
 245     // UI-Tabs-Panel (DIV WITH CLASS)
 246     // --------------------------
 247     &.ui-tabs-panel{
 248       width: 100%;
 249       overflow: hidden;
 250       //background-color: @tabs-panel-bg;
 251       //background-color: transparent;
 252       display: block;
 253
 254       // further tabwidget within a tabwidget (documents tab etc.)
 255       & > .tabwidget{
 256         position: relative ;
 257
 258         & > .ui-tabs-nav{
 259           position: relative ;
 260           top: auto;
 261           //background: none;
 262           //background-color: @tabs-bg;
 263           background-color: transparent;
 264         }
 265
 266         & > .ui-tabs-panel {
 267           background-color: @tabs-bg ;
 268           background-color: transparent ;
 269           position: relative ;
 270           top: auto;
 271           padding-top: 0 !important ;
 272         }
 273         //.ui-tabs-nav{  }
 274       }
 275
 276       &.ui-widget-content { border: 0 ;}
 277
 278     } //  .ui-tabs-panel
 279   } // /div (.ui-tabs-panel)
 280 } //  /.tabwidget
 281
 282
 283
 284
 285
 286 // --------------------------------------
 287 // UI-DIALOG
 288 // --------------------------------------
 289
 290 //.ui-dialog {
 291 //  border: 1px solid #333333;
 292 //  color: #333333;
 293 //  border-radius: @controlpanel-radius;
 294 //
 295 //  .ui-dialog-titlebar {
 296 //    button.ui-dialog-titlebar-close {
 297 //      background: #bbb !important;
 298 //    }
 299 //  }
 300 //  .ui-widget-header {
 301 //    button.ui-dialog-titlebar-close {
 302 //      right: 0.3em;
 303 //      top: 0;
 304 //      width: 21px;
 305 //      margin: 5px 0 0 0;
 306 //    }
 307 //  }
 308 //}
 309
 310
 311
 312
 313
 314 // --------------------------------------
 315 // AUTOCOMPLETE
 316 // --------------------------------------
 317
 318 //.ui-autocomplete {
 319 //  z-index: 9000 ;
 320 //
 321 //  li{
 322 //    a{
 323 //      display: block ;
 324 //      font-size: 80% ;
 325 //      padding-top: 0.4em !important;
 326 //      padding-bottom: 0.4em !important;
 327 //      &:hover{
 328 //        background-color: #C9C9C9;
 329 //        border: none ;
 330 //        color: #000 ;
 331 //      }
 332 //    }
 333 //  }
 334 //}
 335
 336
 337
 338
 339 // -------------------
 340 // Date_Picker
 341 // Select Date in Popover
 342 // PENDENT: Ausrichtung vertikal in Zelle & wo eingesetzt
 343 //input.datepicker{
 344   //margin: -0.3em 0 0 0 !important;
 345   //padding: 0 !important;
 346 //}
 347
 348
 349
 350 // --------------------------------------
 351 // DATEPICKER
 352 // --------------------------------------
 353
 354 // Forward / Backward Arrows
 355 //.ui-widget-header {
 356 //  .ui-icon {
 357 //    background-image: url(ui-lightne../../images/ui-icons_222222_256x240.png);
 358 //  }
 359 //  .ui-state-hover{
 360 //    .ui-icon{
 361 //      background-image: url(ui-lightne../../images/ui-icons_ef8c08_256x240.png);
 362 //      background: #ffffff;
 363 //    }
 364 //  }
 365 ////  select.ui-datepicker-month,
 366 ////  select.ui-datepicker-year {
 367 ////    width: 48%;
 368 ////  }
 369 //}
 370
 371
 372
 373
 374 // Calendar symbol
 375 //img.ui-datepicker-trigger{
 376 //  vertical-align: middle;
 377 //  margin-left: 0.2em ;
 378 //}
 379 // Calender (Table)
 380 /*
 381 .ui-datepicker-calendar  {
 382   .ui-state-highlight{
 383     color: #ffffff ;
 384     background-color: @gray-standard;
 385     border: 1px @gray-standard solid
 386   }
 387   // Days
 388   td a {
 389     &.ui-state-default {
 390       color: @base-dark;
 391     }
 392     &.ui-state-hover {
 393       color: #ffffff ;
 394       background-color: #000000;
 395       border: #000000 ;
 396     }
 397     &.ui-state-active {
 398       border: 1px solid @base-dark;
 399       background-color: @base-dark;
 400       color: @base-verylight;
 401     }
 402
 403   }
 404
 405 } // /.ui-datepicker-calendar
 406 */
 407 //.ui-state-hover,
 408 //.ui-widget-content .ui-state-hover,
 409 //.ui-widget-header .ui-state-hover,
 410 //.ui-state-focus,
 411 //.ui-widget-content .ui-state-focus,
 412 //.ui-widget-header .ui-state-focus {
 413 //  border: 1px solid #000000;
 414 //  background: #ffffff;
 415 //  color: #000000;
 416 //}
 417 //
 418 //.ui-state-default,
 419 //.ui-state-hover,
 420 //.ui-state-focus,
 421 //.ui-state-active {
 422 //  .ui-icon {
 423 //    background-image: url(ui-lightne../../images/ui-icons_777777_256x240.png) !important;
 424 //  }
 425 //}