Projekt

Allgemein

Profil

« Zurück | Weiter » 

Revision 00462921

Von Hans P. Schlaepfer vor mehr als 3 Jahren hinzugefügt

  • ID 0046292193d3f50604eb6ce0c97269cb1566e392
  • Vorgänger 349b5f5c
  • Nachfolger e7f0ef77

css/less -> Geaenderte & Neue Less-Dateien

Unterschiede anzeigen:

css/less/jquery-ui_overrides.less
1
/* ------------------------------------------------------------- */
2
/* JQUERY-UI OVERRIDES (jquery-ui_overrides.less)                */
3
/* ------------------------------------------------------------- */
4

  
5

  
1 6
// ----------------------------------------------------------------------------
2 7
//
3 8
// jQuery UI CUSTOM
4 9
//
5 10
// ----------------------------------------------------------------------------
6 11
// DESCRIPTION:
7
// Overrides of jQuery UI.less stuff
12
// Overrides of jQuery UI LESS or CSS stuff
8 13
//
9 14
// Contents:
10 15
// - UI WIDGETS IN GENERAL
......
28 33
// UI WIDGETS IN GENERAL
29 34
// --------------------------------------
30 35

  
31
.ui-widget-content {
32
  background: white;
33
}
36

  
34 37

  
35 38

  
36 39

  
......
41 44
// Container with Tabs & Panels (DIV)
42 45

  
43 46
.tabwidget {
44
  background: white;
45
  position: relative;
46
  padding: 0 !important; // hps
47
  zoom: 1;
48
  // -webkit-border-radius: 4px;
49
  // border-radius: 4px;
50
  border: 0;
51
  color: #333333;
52
  overflow: hidden;
53
  width: 100%;
47
  width:       100%;
48
  overflow:   hidden;
49
  position:   relative;
50
  zoom:       1;
51
  padding:     0 !important;
52
  border:     0;
54 53

  
54
  color:       @tabs-default-color;
55
  //background: @tabs-bg;
56
  background: transparent;
55 57

  
56 58

  
57 59

  
58
  // --------------------------------------
60
  // -----------------------
59 61
  // LIST WITH TABS (UL)
60
  // --------------------------------------
61

  
62
  // -----------------------
62 63
  > ul {
63
    margin: 0;
64
    padding: 0.2em 0.2em 0 0;
65
    outline: 0;
66
    line-height: 1.3;
67
    text-decoration: none;
68
    font-size: @font-size-base; // hps
69
    font-weight: bold;
70
    list-style: none;
71
    display: block;
72
    background-color: none;
73
    border: 1px #dddddd;
74
    color: #fe5f14;
75
    margin: 0;
76

  
77
    &::after {
78
      content: ".";
79
      display: block;
80
      height: 0;
81
      clear: both;
82
      visibility: hidden;
83
    }
84

  
85

  
86

  
87
    // --------------------------------------
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
    // -----------------------
88 77
    // SINGLE TAB (LI)
89
    // --------------------------------------
90

  
78
    // -----------------------
91 79
    li {
80
      position:   relative;
81
      top:        1px;
82
      float:      left;
92 83
      list-style: none;
93
      float: left;
94
      position: relative;
95
      top: 1px;
96
      //margin: 0 0.4em 1px 0;
97
      margin: 1px 0.2em 0 0;
98
      border-bottom: 0 !important;
99
      border-top-right-radius: 4px;
100
      border-top-left-radius:  4px;
101
      padding: 0;
84

  
85
      margin:      1px 0.2em 0 0;
86
      padding:     0;
102 87
      white-space: nowrap;
103
      border: 1px solid #cccccc;
104
      background: #f6f6f6 url(ui-lightness/images/ui-bg_glass_100_f6f6f6_1x400.png) 50% 50% repeat-x;
105
      font-size: @font-size-smaller ;
106
      font-weight: bold;
107
      color: #1c94c4;
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;
108 98

  
109 99
      &.ui-tabs-selected {
110
        margin-bottom: 0;
111
        padding-bottom: 1px;
100
        margin-bottom:    0;
101
        padding-bottom:   1px;
112 102

  
113
        a { cursor: pointer; }
103
        a { cursor:       pointer; }
114 104
      }
115 105

  
116
      // --------------
106
      // -----------------------
117 107
      // LINKS
118
      //
108
      // -----------------------
119 109
      a {
120
        float: left;
121
        //padding: 0.8em 1.2em;
122
        padding: 0.2em 0.7em;
110
        float:           left;
111
        padding:         0.2em 0.7em;
123 112
        text-decoration: none;
124
        cursor: pointer;
113
        cursor:          pointer;
125 114
      }
126 115

  
127

  
128
      // --------------
116
      // -----------------------
129 117
      // STATES (Active, Default, Hover)
118
      // -----------------------
130 119
      // Outline: 0 ; in anchor to avoid dotted frame after click
131 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 { color: @tabs-default-color; }
130
      }
131

  
132 132
      &.ui-state-hover{
133
        color:             @tabs-default-hover-color;
134
        background-color: @tabs-default-hover-bg;
133 135
        a,
134
        a:hover {
135
          color: @tabs-text-hover;
136
          background-color: @tabs-bg-hover;
137
        }
136
        a:hover {}
138 137
      }
139 138

  
140 139
      &.ui-state-active {
141
        color: #000;
142
        background-color: @tabs-bg;
140
        color:               @tabs-active-color;
141
        background-color:   @tabs-active-bg;
143 142

  
144 143
        a,
145 144
        a:link,
146 145
        a:visited {
147
          color: #000;
148
          background-color: @tabs-bg; // PENDENT: NOETIG???
149
          outline: 0 ;
146
          color:             @tabs-active-color;
147
          outline:           0 ;
150 148
        }
151 149

  
152 150
        &.ui-state-hover {
151
          color: @tabs-active-hover-color;
153 152
          a,
154
          a:hover {
155
            color: #000;
156
            background-color: @brand-light;// PENDENT: NOETIG???
157
          }
153
          a:hover {}
158 154
        }
159
      }
160

  
161
      &.ui-state-default{
162
        border: 1px solid @brand-darkest;
163
        background: #fff;
164
        font-weight: normal;
165
        color: @brand-darkest;
166
        margin: 0 0 0 0.6em;
155
      } // /&.ui-state-active
167 156

  
168
        a,
169
        a:link { color: @brand-darkest; }
170
      }
171

  
172
      &.ui-state-disabled   a {
173
        cursor: text;
174
        outline: 0 ;
157
      &.ui-state-disabled a {
158
        cursor:   text;
159
        outline:   0 ;
175 160
      }
176 161
      &.ui-state-processing a { cursor: text; }
177 162
      &.ui-state-loading    a { outline: 0 ;  }
......
179 164
    }
180 165
    // /li
181 166

  
182

  
183
    // LI (List Elements)
184
    // These statements have been active, probably we can trash them once
185
    //.ui-state-default,
186
    //.ui-widget-content .ui-state-default,
187
    //.ui-widget-header .ui-state-default {
188
    //    border: 1px solid @gray-medium;
189
    //    background: #fff;
190
    //    font-weight: normal;
191
    //    color: #1c94c4;
192
    //    margin: 0 0 0 0.6em;
193
    //}
194
    //.ui-state-active,
195
    //.ui-widget-content .ui-state-active,
196
    //.ui-widget-header .ui-state-active {
197
    //    border: 1px solid @gray-medium; // hps
198
    //    // background: #ffffff url(images/ui-bg_glass_65_ffffff_1x400.png) 50% 50% repeat-x;
199
    //    background: none;
200
    //    background-color: @gray-verylight; // hps
201
    //    font-weight: normal; // hps
202
    //    color: #000; // hps
203
    //}
204

  
205

  
206

  
207 167
    // UL
208 168
    &.ui-widget-header {
209 169
      //background: transparent;
......
213 173

  
214 174

  
215 175

  
216
    // --------------------------------------
176
    // -----------------------
217 177
    // UI-TABS-NAV (Class)
218
    // --------------------------------------
178
    // -----------------------
219 179
    // UL
220 180
    &.ui-tabs-nav {
221
      margin: 0 0.4em 0.6em 0;
222
      padding: 0.4em 0.2em 0 0.7em;
223
      background-color: #ffffff;
224 181
      position: fixed;
225 182
      top: 100px;
226 183
      width: 100%;
227 184
      z-index: 1029;
228
      border-bottom: 1px solid #999 !important;
185

  
186
      margin: 0 0.4em 0.6em 0;
187
      padding: 0.4em 0.2em 0 0.7em;
188

  
189
      background-color: @tabs-bg;
190
      border-bottom: 1px @tabs-border-color solid !important;
229 191

  
230 192
      li {
231 193
        margin: 1px 0.2em 0 0;
......
233 195
        a { padding: 0.2em 0.7em; }
234 196

  
235 197
        &.ui-tabs-active {
236
          border-bottom: 1px @tabs-bg solid !important ;
198
          border-bottom: 1px @tabs-active-bg solid !important ;
237 199
          margin-bottom: -1px;
238 200
          padding-bottom: 0;
239 201
        }
......
244 206
  // /ul
245 207

  
246 208

  
247
  // --------------------------------------
209
  // -----------------------
248 210
  // UI-TABS-COLLAPSIBLE
249
  // --------------------------------------
211
  // -----------------------
250 212
  &.ui-tabs.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-selected a {
251 213
     cursor: pointer;
252 214
  }
......
255 217

  
256 218

  
257 219

  
258
  // --------------------------------------
220
  // -----------------------
259 221
  // DIV (UI-Tabs-Panel)
260
  // --------------------------------------
222
  // -----------------------
261 223
  // Single Panel, selected via Tabs
262
  // Some of the Panels do not have a class
224
  // Some of the Panels do not have a class PENDENT: loesen!!!
263 225

  
226
  //--------------------------
227
  // UI-Tabs-Panel (DIV WITHOUT CLASS)
228
  // --------------------------
264 229
  & > div {
265 230
    display: none;
266 231
    //border-top: 1px solid #999 !important;
......
274 239
    overflow: hidden ;
275 240

  
276 241
    //--------------------------
277
    // UI-Tabs-Panel (CLASS)
242
    // UI-Tabs-Panel (DIV WITH CLASS)
278 243
    // --------------------------
279

  
280 244
    &.ui-tabs-panel{
281 245
      width: 100%;
282 246
      overflow: hidden;
283
      // aus Original oben
284
      //background: none;
285
      background-color: @tabs-bg;
286
      //overflow: hidden; // show scrollbar vertical if overflown
247
      //background-color: @tabs-panel-bg;
248
      //background-color: transparent;
287 249
      display: block;
288 250

  
289 251
      // further tabwidget within a tabwidget (documents tab etc.)
290 252
      & > .tabwidget{
291
        //background-color: rgb(239, 239, 239) ;
292 253
        position: relative ;
293 254

  
294
        .ui-tabs-panel {
295
          //background-color: rgb(239, 239, 239) !important;
255
        & > .ui-tabs-nav{
256
          position: relative ;
257
          top: auto;
258
          //background: none;
259
          //background-color: @tabs-bg;
260
          background-color: transparent;
261
        }
262

  
263
        & > .ui-tabs-panel {
296 264
          background-color: @tabs-bg ;
265
          background-color: transparent ;
297 266
          position: relative ;
298 267
          top: auto;
299 268
          padding-top: 0 !important ;
300 269
        }
301
        .ui-tabs-nav{ background-color: @tabs-bg; }
270
        //.ui-tabs-nav{  }
302 271
      }
303 272

  
304
    }
305
    //  .ui-tabs-panel
273
      &.ui-widget-content { border: 0 ;}
306 274

  
275
    } //  .ui-tabs-panel
307 276
  } // /div (.ui-tabs-panel)
277
} //  /.tabwidget
308 278

  
309 279

  
310 280

  
311
}
312
//  /.tabwidget
313

  
314

  
315
#content > form > .tabwidget > .ui-tabs-panel{
316
  // further tabwidget within a tabwidget (documents tab etc.)
317
  & > .tabwidget{
318
    background-color: rgb(239, 239, 239) ;
319
    position: relative ;
320
    & > .ui-tabs-nav{
321
      position: relative ;
322
      top: auto;
323
      background-color: none;
324
    }
325
    & > .ui-tabs-panel {
326
      background-color: rgb(239, 239, 239);
327
      position: relative ;
328
      top: auto;
329
    }
330
  }
331
}
332

  
333

  
334 281

  
335 282

  
283
// --------------------------------------
284
// UI-DIALOG
285
// --------------------------------------
336 286

  
337
//  Dialog
338
.ui-dialog {
339

  
340
    .ui-dialog-titlebar {
341

  
342
    }
343

  
344
}
345

  
287
//.ui-dialog {
288
//  border: 1px solid #333333;
289
//  color: #333333;
290
//  border-radius: @controlpanel-radius;
291
//
292
//  .ui-dialog-titlebar {
293
//    button.ui-dialog-titlebar-close {
294
//      background: #bbb !important;
295
//    }
296
//  }
297
//  .ui-widget-header {
298
//    button.ui-dialog-titlebar-close {
299
//      right: 0.3em;
300
//      top: 0;
301
//      width: 21px;
302
//      margin: 5px 0 0 0;
303
//    }
304
//  }
305
//}
346 306

  
347 307

  
348
//  jstree
349
.jstree a {
350
  border-bottom: none;
351
}
352 308

  
353 309

  
354 310

  
355
.ui-widget input[type="button"]{
311
// --------------------------------------
312
// AUTOCOMPLETE
313
// --------------------------------------
356 314

  
357
}
315
//.ui-autocomplete {
316
//  z-index: 9000 ;
317
//
318
//  li{
319
//    a{
320
//      display: block ;
321
//      font-size: 80% ;
322
//      padding-top: 0.4em !important;
323
//      padding-bottom: 0.4em !important;
324
//      &:hover{
325
//        background-color: #C9C9C9;
326
//        border: none ;
327
//        color: #000 ;
328
//      }
329
//    }
330
//  }
331
//}
358 332

  
359 333

  
360
// -------------------
361
// Part_Picker
362
// Select Parts in input-fields
363 334

  
364
span.part_picker,
365
span.chart_picker{
366
  margin: 0 !important;
367
  padding: 0 !important;
368
}
369 335

  
370
// -------------------
371
// Part_Picker
372
// Select Customer in input-fields
373
// PENDENT: Ausrichtung vertikal in Zelle
374
span.customer_vendor_picker{
375
  margin: 0 !important;
376
  padding: 0 !important;
377
}
378 336
// -------------------
379 337
// Date_Picker
380 338
// Select Date in Popover
381
// PENDENT: Ausrichtung vertikal in Zelle
382
input.datepicker{
383
  margin: -0.3em 0 0 0 !important;
339
// PENDENT: Ausrichtung vertikal in Zelle & wo eingesetzt
340
//input.datepicker{
341
  //margin: -0.3em 0 0 0 !important;
384 342
  //padding: 0 !important;
385
}
343
//}
386 344

  
387 345

  
388 346

  
389 347
// --------------------------------------
390
// AUTOCOMPLETE
348
// DATEPICKER
391 349
// --------------------------------------
392 350

  
393
.ui-autocomplete {
394
  z-index: 9000 ;
351
// Forward / Backward Arrows
352
//.ui-widget-header {
353
//  .ui-icon {
354
//    background-image: url(ui-lightness/images/ui-icons_222222_256x240.png);
355
//  }
356
//  .ui-state-hover{
357
//    .ui-icon{
358
//      background-image: url(ui-lightness/images/ui-icons_ef8c08_256x240.png);
359
//      background: #ffffff;
360
//    }
361
//  }
362
////  select.ui-datepicker-month,
363
////  select.ui-datepicker-year {
364
////    width: 48%;
365
////  }
366
//}
395 367

  
396
  li{
397 368

  
398
    a{
399
      display: block ;
400
      font-size: 80% ;
401
      padding-top: 0.4em !important;
402
      padding-bottom: 0.4em !important;
403 369

  
404
      &:hover{
405
        background-color: #C9C9C9;
406
        border: none ;
407
        color: #000 ;
408
      }
409
    }
410
  }
411
}
412 370

  
413
// --------------------------------------
414
// DATEPICKER
415
// --------------------------------------
416
// Forward / Backward Arrows
417
.ui-widget-header {
418
  .ui-icon {
419
    background-image: url(ui-lightness/images/ui-icons_222222_256x240.png);
371
// Calendar symbol
372
//img.ui-datepicker-trigger{
373
//  vertical-align: middle;
374
//  margin-left: 0.2em ;
375
//}
376
// Calender (Table)
377
/*
378
.ui-datepicker-calendar  {
379
  .ui-state-highlight{
380
    color: #ffffff ;
381
    background-color: @gray-standard;
382
    border: 1px @gray-standard solid
420 383
  }
421
  .ui-state-hover{
422
    .ui-icon{
423
      background-image: url(ui-lightness/images/ui-icons_ef8c08_256x240.png);
424
      //background: #ffffff !important;
384
  // Days
385
  td a {
386
    &.ui-state-default {
387
      color: @brand-dark;
388
    }
389
    &.ui-state-hover {
390
      color: #ffffff ;
391
      background-color: #000000;
392
      border: #000000 ;
393
    }
394
    &.ui-state-active {
395
      border: 1px solid @brand-dark;
396
      background-color: @brand-dark;
397
      color: @brand-verylight;
425 398
    }
426
  }
427
}
428
// Days
429
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
430
  color: @gray-mediumdark;
431
}
432
// Calendar symbol
433
img.ui-datepicker-trigger{
434
  vertical-align: middle;
435
  margin-left: 0.2em ;
436
}
437

  
438
.ui-datepicker-calendar .ui-state-highlight {
439
  color: #ffffff ;
440
  background-color: @gray-mediumdark;
441
  border: #000000 ;
442
}
443
.ui-datepicker-calendar td a.ui-state-hover {
444
  color: #ffffff ;
445
  background-color: #000000;
446
  border: #000000 ;
447
}
448
.ui-state-hover,
449
.ui-widget-content .ui-state-hover,
450
.ui-widget-header .ui-state-hover,
451
.ui-state-focus,
452
.ui-widget-content .ui-state-focus,
453
.ui-widget-header .ui-state-focus {
454
  border: 1px solid #000000;
455
  background: #ffffff;
456
  color: #000000;
457
}
458
.ui-widget-header .ui-datepicker-header .ui-state-hover .ui-icon {
459
  background: #ffffff; ;
460
}
461
.ui-state-default .ui-icon {
462
  background-image: url(ui-lightness/images/ui-icons_777777_256x240.png) !important;
463
}
464
.ui-state-hover .ui-icon,
465
.ui-state-focus .ui-icon {
466
  background-image: url(ui-lightness/images/ui-icons_777777_256x240.png) !important;
467
}
468
.ui-state-active .ui-icon {
469
  background-image: url(ui-lightness/images/ui-icons_777777_256x240.png) !important;
470
}
471
.ui-datepicker select.ui-datepicker-month,
472
.ui-datepicker select.ui-datepicker-year {
473
  width: 48%;
474
}
475 399

  
476
// --------------------------------------
477
// CKEditor
478
// --------------------------------------
479
.cke_editable {
480
  background-color: white;
481
  padding: 6px;
482
  //margin-left: -0.3em ;
483
  border-top: 1px #999 solid;
484
  border-right: 1px #ddd solid;
485
  border-left: 1px #ddd solid;
486
  overflow: auto ;
487
  font-size: 11pt ;
488
  min-width: @textarea-wi-lightwide ;
489
  min-height: 4.0em ;
490
  &:focus {
491
    outline: none ;
492
    background-color: @formelement-focus-bg ;
493
    border: @formelement-focus-border ;
494 400
  }
495 401

  
496
  p {
497
    font-size: 10pt !important;
498
    padding: 0  ;
499
    margin: 0 0 0.4em 0 ;
500
    font-weight: normal;
501
  }
502
}
503
div.cke_editable.wi-small-wide{
504
  margin-right: 24px !important ;
505
}
506
body > .ui-dialog > .ui-dialog-content > p > .cke_editable {
507
  border: 1px #dcdcdc solid !important;
508
  padding: 0.4em;
509
  margin: 0;
510
  font-size: 100%;
511
  width: 100% !important;
512
}
513
// --------------------------------------
514
// UI-DIALOG
515
// --------------------------------------
516
.ui-dialog-titlebar.ui-widget-header {
517
  button.ui-dialog-titlebar-close {
518
    right: 0.3em;
519
    top: 0;
520
    width: 21px;
521
    margin: 5px 0 0 0;
522
  }
523
}
402
} // /.ui-datepicker-calendar
403
*/
404
//.ui-state-hover,
405
//.ui-widget-content .ui-state-hover,
406
//.ui-widget-header .ui-state-hover,
407
//.ui-state-focus,
408
//.ui-widget-content .ui-state-focus,
409
//.ui-widget-header .ui-state-focus {
410
//  border: 1px solid #000000;
411
//  background: #ffffff;
412
//  color: #000000;
413
//}
414
//
415
//.ui-state-default,
416
//.ui-state-hover,
417
//.ui-state-focus,
418
//.ui-state-active {
419
//  .ui-icon {
420
//    background-image: url(ui-lightness/images/ui-icons_777777_256x240.png) !important;
421
//  }
422
//}
423

  
524 424

  
525 425

  
526 426

  

Auch abrufbar als: Unified diff