Projekt

Allgemein

Profil

« Zurück | Weiter » 

Revision a891045c

Von Hans P. Schlaepfer vor fast 4 Jahren hinzugefügt

  • ID a891045c7071254bca909518795e81c93ed843dc
  • Vorgänger f88ca788
  • Nachfolger f97bb078

css/less -> Geaenderte & Neue Less-Dateien

Unterschiede anzeigen:

css/less/main.less
1
/* ------------------------------------------------------------- */
2
/* MAIN PROPERTIES (main.less)                                   */
3
/* ------------------------------------------------------------- */
4

  
5

  
1 6
// ----------------------------------------------------------------------------
2 7
//
3 8
// MAIN (MAIN PROPERTIES)
......
5 10
// ----------------------------------------------------------------------------
6 11
// DESCRIPTION:
7 12
//
8
//
9
//
10 13
// CONTENTS:
11 14
// - GENERAL FONT SIZES
12
// - HEADING
15
// - HEADINGS (H1-H3)
13 16
//   - H1
14 17
//   - H2
15 18
//   - H3 & Caption
16 19
// - LINKS
20
// - OTHER STANDARD HTML-ELEMENTS (SELECTORS)
21
//   - Lists (UL & OL)
22
//   - Horizontal Rule
17 23
// - COMPONENTS
18
//   - DIVs & SPAN Dimensions
19
//   - SPAN: Labels & Values
20
//   - Select Functions (DIV)
21
//   - Info-Container (DIV)
22
//   - Wrapper
23
//   - File Content (PRE)
24
//   - Dimensions for DIVs & SPANs
25
//   - Long Description
26
//   - Info-Container (description & instructions)
27
//   - Labels & Values (SPAN)
28
//   - Centered Elements
29
//   - Accent
30
//   - File Content
31
//   - Expanded
32
//   - Hidden Elements
33
// - WRAPPER
34
//   - Toggled Wrapper
35
//   - Toggle buttons
36
//   - Columns
37
//   - Paragraph within Wrapper
24 38
// - CATEGORIES
25 39
//   - Plus & Minus / Positive & Negative
26 40
//   - Styled Text
27 41
// - SPECIALIZED PROPERTIES (REDUNANT)
28
// - OTHER STANDARD HTML-ELEMENTS (SELECTORS)
42
//   - Dunned Invoices
43
//   - Bank transactions
44
//   - Diverse Elements
45
// - DEPRACETED STUFF
29 46
// ----------------------------------------------------------------------------
30 47

  
31 48

  
......
41 58
  & > div,
42 59
  & > td,
43 60
  & > th {
44
    font-size: @font-size-small ;
61
    font-size: @font-size-smaller ;
45 62
  }
46 63
  input,
47 64
  select, option,
48 65
  textarea {
49 66
    font-size: @font-size-smaller ;
50 67
  }
68

  
51 69
}
52 70

  
53 71

  
54 72

  
55 73

  
56 74
// --------------------------------------
57
// Headings (H1 - H6)
75
// Headings (H1 - H3)
58 76
// --------------------------------------
77

  
78
// -----------------------
59 79
// H1
60
//
61
h1{
80
// -----------------------
81
h1 {
62 82
  display:       block;
63 83
  text-align:    left;
64 84
  margin:        0;
......
66 86
  font-size:     @h1-size;
67 87
  line-height:   1.2em ;
68 88
}
69
// PENDENT: mit Child-Kombinator > versehen wenn fertig
70 89
// PENDENT: SIEHE AUCH .LISTTOP
71 90
#content > h1 {
72
  position:          fixed;
73
  z-index:           @zindex-h1; //hps:12
74
  top:               60px;
75
  width:             100%;
76
  color:             @brand-h1-color ;
77
  background-color:  @brand-h1-bg;
78
  padding:           @h1-padding;
79

  
91
  position:           fixed;
92
  z-index:            @zindex-h1; //hps:12
93
  top:                60px;
94
  width:              100%;
95
  color:              @brand-h1-color ;
96
  background-color:   @brand-h1-bg;
97
  padding:            @h1-padding;
98
  border-top:         @brand-h1-border-top;
80 99
}
81 100
#content .wrapper h1{
82
  color:             @headings-color;
83
  font-size:         @h2-size;
84
  margin:            @margin-from-wrapper ;
101
  color:              @headings-color;
102
  font-size:          @h2-size;
103
  margin:             @margin-from-wrapper ;
85 104
}
86 105
body > h1{
87
  color:             @brand-h1-color ;
88
  background-color:  @brand-h1-bg ;
89
  padding:           @h1-padding;
106
  color:              @brand-h1-color ;
107
  background-color:   @brand-h1-bg ;
108
  padding:            @h1-padding;
90 109
}
91 110

  
92 111

  
93
// --------------
112
// -----------------------
94 113
// H2
95
//
114
// -----------------------
96 115
h2 {
97 116
  color:            @headings-color;
98 117
  font-size:        @h2-size ;
99 118
  border-style:     none;
100 119
  letter-spacing:   0.14em;
101 120
}
121

  
102 122
#content,
103 123
.admin {
104 124
  & > h2 {
......
107 127
  }
108 128
  ui-tabs-panel {
109 129
    .wrapper > h2 {
110
      padding: 0 0.2em 0.6em 0.2em;
111
      margin: @margin-from-wrapper ;
130
      padding: 0 0.2em 0.6em 0.2em ;
131
      margin:  @margin-from-wrapper ;
112 132
    }
113 133
  }
114 134
  .wrapper > h2 {
115
    padding: 0 0.2em 0.6em 0.2em;
135
    padding:      2.0em 0.2em 0.6em 0.2em ;
136
    margin:       0 ;
137
    font-weight:  normal;
138
    clear:        both;
139
    &:first-child{ padding-top: 0 ; }
116 140
  }
117 141
} // /#content /.admin
142

  
118 143
h2.confirm { color: @headings-color-confirm ; }
119 144
h2.error   { color: @headings-color-error ; }
120
// -------------------
121
// H2 RECORD-TITLE (e.g. Customer Name, Article Name)
122
// PENDENT: an verschiedenen Orten einfuegen
145

  
146

  
147
// -----------------------
148
// H2 Record-Title
149
// -----------------------
150
// (e.g. Customer Name, Article Name)
151
// PENDENT: in verschiedenen Templates einfuegen
123 152
h2.record-title {
124
  padding: 0.6em 0 0 0 !important;
125
  font-size: @h2-size ;
126
  color: @headings-color-accent ;
153
  padding:          0.6em 0 0 0 !important;
154
  font-size:        @h2-size ;
155
  color:            @headings-color-accent ;
127 156
  small{
128
    color: @headings-color ;
157
    color:          @headings-color ;
129 158
    letter-spacing: 0 ;
130 159
  }
131 160
}
132 161
.wrapper > h2.record-title{
133
  margin: 0em 1em 1em 0.2em !important;
162
  margin:   0em 1em 1em 0.2em !important;
134 163
}
135 164
.ui-tabs-panel > h2.record-title{
136
  margin: 1em 1em 0.2em @margin-left-from-content !important;
137
  padding: 0.8em 0 0 0.1em !important;
165
  margin:   1em 1em 0.2em @margin-left-from-content !important;
166
  padding:  0.8em 0 0 0.1em !important;
138 167
}
139 168

  
140 169

  
141
// --------------
170
// -----------------------
142 171
// H3
143
//
144
// see also caption in table.less
172
// -----------------------
173
// see also mixin .mx-h3-caption and caption in table.less
145 174
h3 {
146 175
  .mx-h3-caption ; // Mixin
147

  
148 176
  &.caption{
149 177
    margin: 0.6em 0 0.4em 0 !important;
150 178
  }
151 179
}
152 180
#content h3{
153
  color: @headings-color ;
181
  color:        @headings-color ;
154 182
  padding-left: 0 ;
155
  margin: 0.8em 0 0.4em 0 ;
183
  margin:       0.8em 0 0.4em 0 ;
156 184
}
157 185
#content .wrapper h3 {
158
  margin-top: 1.0em ;
186
  margin-top:   1.0em ;
187
  &:first-child { margin-top: 0 ; }
159 188
}
160 189
#content table.tbl-horizontal > tbody > tr > th > h3,
161 190
#content table.tbl-horizontal > tbody > tr > td > h3 { margin-top: 0.2em !important; }
162 191

  
192
// PENDENT: H4
193

  
163 194

  
164 195

  
165 196

  
......
213 244

  
214 245

  
215 246

  
247

  
248
// --------------------------------------
249
// OTHER STANDARD HTML-ELEMENTS (SELECTORS)
250
// --------------------------------------
251

  
252
// -----------------------
253
// Lists (UL & OL)
254
// -----------------------
255
ul,
256
ol {
257
  font-size: @font-size-base ;
258

  
259
  li {
260
    font-size: @font-size-small ;
261
  }
262
}
263
.wrapper .col{
264
  ul {
265
    list-style: circle outside;
266
    padding: 0 ;
267
    margin: 0 ;
268
    li{
269
      padding: 0 0 0 -0.6em ;
270
      margin: 0 0 0 0 ;
271
    }
272
  }
273
}
274

  
275
// -----------------------
276
// Horizontal Rule
277
// -----------------------
278
hr {
279
    background-color: @color-green-light; // #006400
280
    border: none;
281
    height: 1px;
282
}
283

  
284

  
285

  
286

  
287

  
288

  
216 289
// --------------------------------------
217 290
// COMPONENTS
218 291
// --------------------------------------
219
// --------------
220
// DIVs: Dimensions
221
//
292

  
293
// -----------------------
294
// Dimensions for DIVs & SPANs
295
// -----------------------
222 296
div,
223 297
span,
224 298
div.list {
......
233 307
  &.wi-verywide     { width:     @div-wi-verywide    ; } //  36.0em
234 308
}
235 309

  
236
// --------------
310
// -----------------------
237 311
// Long Description
312
// -----------------------
238 313
// (see also TD.longdesc etc.)
239

  
240 314
div.long-description,
241 315
div.long-desc,
242 316
div.longdescription,
......
256 330
  }
257 331
}
258 332

  
259
// --------------
260
// SPAN: Labels & Values
261
//
262

  
263
span.label{
264
  color: @brand-data-label-color ;
265
  font-size: @font-size-smaller ;
266
  font-style: normal ;
267
  margin: 0 0.3em 0 0 ; // PENDENT: gehoert nicht hierher
268
}
269
span.value{
270
  color: #000 ;
271
  margin: 0 2.6em 0 0 ; // PENDENT: anschauen, margin-top seltsam
272
}
273

  
274

  
275
// --------------
276
// Info-Container (DIV)
277
//
278

  
279
// small info-boxes for the user
333
// -----------------------
334
// Info-Container (description & instructions)
335
// -----------------------
336
// Description
337
// Small info-boxes for the user
280 338
div.description{
281 339
  display: block;
282 340
  float: left ;
......
294 352

  
295 353
}
296 354

  
297
// big info boxes for the user
298
// same as cols
355
// Instructions
356
// Big info boxes for the user, same as cols
299 357
// PENDENT: Mixin fuer Padding, Margin etc. anlegen
300 358
div.instructions {
301 359
  background-color: @instructionbox-bg;
......
309 367
  p { width: 30.0em }
310 368
}
311 369

  
312

  
313

  
314
// --------------
315
// Wrapper
316
//
317
// Wrapper for padding & columns
318
// TEST
319
.wrapper {
320
  overflow:       hidden ;
321
  margin:         @contentbox-margin ;
322
  padding:        0 0 1.0em 0 ;
323
  clear:          both ;
324
  display:        block ;
325
  border:         1px transparent solid ; // for nice alignment with folded wrapper
326

  
327
  .wrapper { margin-left: 0 !important ; }
328

  
329
  &.test {        background-color: #FFE67C        ; }
330

  
331
  &.toggled  {    display: inline-block !important ; }
332
  &.bordered {    border: 1px @brand-strong solid        ; }
333

  
334

  
335
  // Toggle buttons
336
  // must be placed on the first position in .wrapper
337
  // PENDENT: Plazierung
338
  & > .toggles {
339
    display:      inline-block ;
340
    float:        right        ;
341
    position:     relative     ;
342
    top:          0            ;
343
    margin-top:   4px          ;
344
    float:        right        ;
345

  
346
    a.toggle {
347
      display: inline-block;
348
      width:  18px ;
349
      height: 18px ;
350
      background-repeat: no-repeat;
351
      background-position: 50% 50%;
352
      &.min { background-image: url(../image/toggle-down.png); }
353
      &.max { background-image: url(../image/toggle-left.png); }
354
    }
355
  }
356

  
357
  .tbl-horizontal,
358
  .tbl-plain {
359
    float: left ;
360
  }
361

  
362
  // --------------
363
  // Columns
364
  //
365
  // DIV or TABLE
366
  .col {
367
    float: left ;
368
    &.test {
369
      background-color: #FFD7BA;
370
      border: 1px #6CF solid;
371
    }
372
    &.wi-small       { width: @div-wi-small      ; }
373
    &.wi-mediumsmall { width: @div-wi-mediumsmall; }
374
    &.wi-normal      { width: @div-wi-normal     ; }
375
    &.wi-wide        { width: @div-wi-wide       ; }
376
    &.wi-lightwide   { width: @div-wi-lightwide  ; }
377
    &.wi-wider       { width: @div-wi-wider      ; }
378
    &.wi-verywide    { width: @div-wi-verywide   ; }
379

  
380
    .tbl-horizontal,
381
    .tbl-plain {
382
      float: none ;
383
      clear: left ;
384
    }
385
  }
386
  & > p {
387
    max-width:       36.0em ;
388
    overflow:        hidden ;
389
    font-size:       @font-size-smaller ;
390
    line-height:     140%;
391
    //color:           @gray-darker ;
392
    padding-bottom:  1.0em ;
393
  }
370
// -----------------------
371
// Labels & Values (SPAN)
372
// -----------------------
373
span.label{
374
  //color: @brand-data-label-color ;
375
  font-size: @font-size-smaller ;
376
  font-style: normal ;
377
  //margin: 0 0.3em 0 0 ; // PENDENT: gehoert nicht hierher
378
}
379
span.value{
380
  color: #000 ;
381
  //margin: 0 2.6em 0 0 ; // PENDENT: anschauen, margin-top seltsam
394 382
}
395 383

  
396
// --------------
384
// -----------------------
397 385
// Centered Elements
398
//
399
.center{
400
  margin: auto;
401
}
386
// -----------------------
402 387
// Centered blocks
403 388
.center {
404 389
  margin: 0 auto;
405 390
  width: auto;
406 391
}
407 392

  
408

  
393
// -----------------------
394
// Accent
395
// -----------------------
409 396
// PENDENT: Neue Loesung
410 397
.accent{
411 398
  div.label{
412 399
    float: left ;
413
    color: @brand-data-label-color ;
400
    //color: @brand-data-label-color ;
414 401
    font-size: 80% ;
415
    &.wi-mediumsmall{ width: 13.6em; } // PENDENT!
402
    //&.wi-mediumsmall{ width: 13.6em; } // PENDENT!
416 403
    padding-top: 0.8em ;
417 404
  }
418 405
  div.data{
......
421 408
      width: 20em !important ;
422 409
    }
423 410
  }
424
}
411
} // /.accent
425 412

  
426

  
427

  
428

  
429

  
430

  
431

  
432
// --------------
433
// Hidden Elements
434
//
435
.hidden {
436
  display: none ;
437
}
438

  
439

  
440
// --------------
413
// -----------------------
441 414
// File Content
442
//
415
// -----------------------
443 416
// PENDENT: wozu? genügt nicht PRE?
444 417
// /templates/webpages/am/edit_templates.html
445 418
pre.filecontent {
......
448 421
  padding-right: 2px;
449 422
}
450 423

  
451

  
452
// --------------
424
// -----------------------
453 425
// Expanded
454
//
455

  
426
// -----------------------
456 427
// Pendent: wozu einmalig?
457 428
// /templates/webpages/order/tabs/_row.html
458 429
// /templates/webpages/order/tabs/basic_data.html
......
465 436
    max-height: 16px;
466 437
}
467 438

  
439
// -----------------------
440
// Hidden Elements
441
// -----------------------
442
.hidden {
443
  display: none ;
444
}
445

  
446

  
447

  
448

  
449

  
450
// --------------------------------------
451
// Wrapper
452
// --------------------------------------
453

  
454
// Wrapper for columns & horizontal tables
455
.wrapper {
456
  overflow:  hidden ;
457
  margin:    @contentbox-margin ;
458
  padding:   0 0 1.0em 0 ;
459
  clear:     both ;
460
  display:   block ;
461
  border:    1px transparent solid ; // for nice alignment with folded/toggled wrapper
462
  width:     98.6%;
463

  
464
  .wrapper { margin-left: 0 !important ; }
465

  
466
  &.test {   background-color: #FFE67C ; }
467

  
468
  .tbl-horizontal,
469
  .tbl-plain { float: left ; }
470

  
471
  & > table.tbl-horizontal:last-child{
472
    margin-right: 0 ;
473
  }
474

  
475

  
476
  // -----------------------
477
  // Toggled Wrapper
478
  // -----------------------
479
  &.toggled  {
480
    display: inline-block !important ;
481
    width: 98.6% ;
482
    & > table.tbl-horizontal,
483
    & > div.col {
484
      margin-top: -1.8em ;
485
    }
486

  
487
    // -----------------------
488
    // Toggle buttons
489
    // -----------------------
490
    // must be placed on the first position in .wrapper
491
    // PENDENT: Plazierung
492
    & > .toggles {
493
      display:      block ;
494
      float:        right        ;
495
      position:     relative     ;
496
      top:          0            ;
497
      margin-top:   4px          ;
498
      float:        right        ;
499
      width:        100% ;
500

  
501
      a.toggle {
502
        //display:    inline-block;
503
        display:      block;
504
        //width:      18px ;
505
        width:      100% ;
506
        height:     18px ;
507
        background-repeat:        no-repeat;
508
        background-position:      50% 50%;
509
        &.min,
510
        &.max { background-position-x: 99% ; }
511
        &.min { background-image: url(../image/toggle-down.png); }
512
        &.max { background-image: url(../image/toggle-left.png); }
513
      }
514
    } // /.toggles
515

  
516

  
517

  
518
  }
519

  
520
  &.bordered {
521
    border:        @controlpanel-border ;
522
    border-radius: 4px ;
523
  }
524

  
525

  
526
  // -----------------------
527
  // Columns
528
  // -----------------------
529
  // DIV or TABLE
530
  .col {
531
    float: left ;
532
    &.test {
533
      background-color: #FFD7BA;
534
      border: 1px #6CF solid;
535
    }
536
    &.wi-small       { width: @div-wi-small      ; }
537
    &.wi-mediumsmall { width: @div-wi-mediumsmall; }
538
    &.wi-normal      { width: @div-wi-normal     ; }
539
    &.wi-wide        { width: @div-wi-wide       ; }
540
    &.wi-lightwide   { width: @div-wi-lightwide  ; }
541
    &.wi-wider       { width: @div-wi-wider      ; }
542
    &.wi-verywide    { width: @div-wi-verywide   ; }
543

  
544
    .tbl-horizontal,
545
    .tbl-plain {
546
      float: none ;
547
      clear: left ;
548
    }
549
  } // /.col
550

  
551
  // -----------------------
552
  // Paragraph within Wrapper
553
  // -----------------------
554
  & > p {
555
    max-width:       36.0em ;
556
    overflow:        hidden ;
557
    font-size:       @font-size-smaller ;
558
    line-height:     140%;
559
    //color:           @gray-darker ;
560
    padding-bottom:  1.0em ;
561
  }
468 562

  
563
} // /.wrapper
469 564

  
470 565

  
471 566

  
......
475 570
// CATEGORIES
476 571
// --------------------------------------
477 572

  
478

  
479
// --------------
573
// -----------------------
480 574
// Plus & Minus / Positive & negative
481
//
575
// -----------------------
482 576
// Inline-Elements
483 577
.plus,
484 578
.minus,
......
493 587
// Positive Values
494 588
.plus ,
495 589
.plus1 { color:     @brand-positive; }
590

  
496 591
// unbalanced Ledger
497 592
// PENDENT: wo eingesetzt?
498 593
span.unbalanced_ledger {
......
500 595
}
501 596

  
502 597

  
503
// --------------
598
// -----------------------
504 599
// Styled Text
505
//
506

  
600
// -----------------------
507 601
// Dimmed Text
508 602
// /templates/webpages/requirement_spec_text_block/_text_block.html
509 603
// /templates/webpages/requirement_spec_item/_section_header.html
510 604
div.dimmed-text,
511 605
span.dimmed-text {
512
  color:        @gray;
606
  color:        @gray-standard;
513 607
  font-style:   italic;
514 608
}
515 609

  
516 610

  
517 611

  
518 612

  
613

  
519 614
// --------------------------------------
520 615
// SPECIALIZED PROPERTIES (REDUNANT)
521 616
// --------------------------------------
522 617

  
523

  
524
//  gemahnte Rechnung
618
// -----------------------
619
// Dunned Invoices
620
// -----------------------
525 621
//  /templates/webpages/is/form_header.html
526 622
//  /templates/webpages/ar/form_header.html
527 623
.dunned_invoice {
528 624
  font-weight: bold;
529 625
  color: #f00;
530 626
}
531
//  gemahnte Rechnung
532 627
//  /templates/webpages/is/form_header.html
533 628
//  /templates/webpages/ar/form_header.html
534 629
.customer_dunning_level {
535 630
  font-weight: bold;
536 631
}
537
// dunning
632
// dunning invoice list
538 633
// /templates/webpages/dunning/show_invoices.html
539 634
#dunning_invoice_list .direct_debit td,
540 635
#dunning_invoice_list .direct_debit a {
541
  color: @gray-medium;
636
  color: @gray-standard;
542 637
}
543 638

  
639
// -----------------------
544 640
// Bank transactions
641
// -----------------------
545 642
// /templates/webpages/bank_transactions/tabs/automatic.html
546 643
#bank_transactions_proposals .invoice_number_highlight a,
547 644
#bank_transactions_proposals span.invoice_number_highlight {
......
549 646
  color: #FFFFFF;
550 647
}
551 648

  
552

  
553

  
554
// --------------------------------------
555
// OTHER STANDARD HTML-ELEMENTS (SELECTORS)
556
// --------------------------------------
557

  
558
hr {
559
    background-color: @color-green-light; // #006400
560
    border: none;
561
    //color: #79B61B;
562
    height: 1px;
563
}
564

  
565
ul,
566
ol {
567
  font-size: @font-size-base ;
568

  
569
  li {
570
    font-size: @font-size-small ;
571
  }
572
}
573
.wrapper .col{
574
  ul {
575
    list-style: circle outside;
576
    padding: 0 ;
577
    margin: 0 ;
578
    li{
579
      padding: 0 0 0 -0.6em ;
580
      margin: 0 0 0 0 ;
581
    }
582
  }
583
}
584

  
585 649
// --------------------------------------
586 650
// Diverse Elements
587 651
// --------------------------------------
......
597 661
// --------------------------------------
598 662
// DEPRACETED STUFF (BUT WILL IT BE AVAILABLE FOR A LONGER TIME?)
599 663
// --------------------------------------
600
// PENDENT: Programmmaesig loesen, vor allem primitive Ueberschriften und "Not records Found"-Meldungen
601 664

  
665
// PENDENT: Programmmaesig loesen, vor allem primitive Ueberschriften und "Not records Found"-Meldungen wandeln
602 666
#content {
603 667
  &>p { margin: 0.6em 2.0em 1.0em 0.7em }
604 668
  &>p.message_hint {
......
606 670
  }
607 671
}
608 672

  
609

  
610

  
611

  
612

  
613

  
614

  
615

  
616

  
617

  

Auch abrufbar als: Unified diff