Projekt

Allgemein

Profil

« Zurück | Weiter » 

Revision cd670dfa

Von Hans Peter Schlaepfer vor etwa 5 Jahren hinzugefügt

  • ID cd670dfafdb3560614634765e2a377946ff1809b
  • Vorgänger ff33b093

Erweiterung und Optimierung less und css fuer Design 4.0

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;
......
90 110
}
91 111

  
92 112

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

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

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

  
147

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

  
140 170

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

  
148 177
  &.caption{
149 178
    margin: 0.6em 0 0.4em 0 !important;
150 179
  }
......
156 185
}
157 186
#content .wrapper h3 {
158 187
  margin-top: 1.0em ;
188
  &:first-child { margin-top: 0 ; }
159 189
}
160 190
#content table.tbl-horizontal > tbody > tr > th > h3,
161 191
#content table.tbl-horizontal > tbody > tr > td > h3 { margin-top: 0.2em !important; }
162 192

  
193
// PENDENT: H4
194

  
163 195

  
164 196

  
165 197

  
......
213 245

  
214 246

  
215 247

  
248

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

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

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

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

  
285

  
286

  
287

  
288

  
289

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

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

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

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

  
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
334
// -----------------------
335
// Info-Container (description & instructions)
336
// -----------------------
337
// Description
338
// Small info-boxes for the user
280 339
div.description{
281 340
  display: block;
282 341
  float: left ;
......
294 353

  
295 354
}
296 355

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

  
371
// -----------------------
372
// Labels & Values (SPAN)
373
// -----------------------
374
span.label{
375
  //color: @brand-data-label-color ;
376
  font-size: @font-size-smaller ;
377
  font-style: normal ;
378
  //margin: 0 0.3em 0 0 ; // PENDENT: gehoert nicht hierher
379
}
380
span.value{
381
  color: #000 ;
382
  //margin: 0 2.6em 0 0 ; // PENDENT: anschauen, margin-top seltsam
383
}
384

  
385
// -----------------------
386
// Centered Elements
387
// -----------------------
388
// Centered blocks
389
.center {
390
  margin: 0 auto;
391
  width: auto;
392
}
393

  
394
// -----------------------
395
// Accent
396
// -----------------------
397
// PENDENT: Neue Loesung
398
.accent{
399
  div.label{
400
    float: left ;
401
    //color: @brand-data-label-color ;
402
    font-size: 80% ;
403
    //&.wi-mediumsmall{ width: 13.6em; } // PENDENT!
404
    padding-top: 0.8em ;
405
  }
406
  div.data{
407
    float: left ;
408
    input[type="text"]{
409
      width: 20em !important ;
410
    }
411
  }
412
} // /.accent
413

  
414
// -----------------------
415
// File Content
416
// -----------------------
417
// PENDENT: wozu? genügt nicht PRE?
418
// /templates/webpages/am/edit_templates.html
419
pre.filecontent {
420
  border: 1px solid blue;
421
  padding-left: 2px;
422
  padding-right: 2px;
423
}
424

  
425
// -----------------------
426
// Expanded
427
// -----------------------
428
// Pendent: wozu einmalig?
429
// /templates/webpages/order/tabs/_row.html
430
// /templates/webpages/order/tabs/basic_data.html
431
// /js/kivi.Order.js
432
#expand_all,
433
.expand {
434
    cursor: pointer;
435
    display: block;
436
    max-width: 16px;
437
    max-height: 16px;
438
}
439

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

  
447

  
312 448

  
313 449

  
314
// --------------
450

  
451
// --------------------------------------
315 452
// Wrapper
316
//
317
// Wrapper for padding & columns
318
// TEST
453
// --------------------------------------
454

  
455
// Wrapper for columns & horizontal tables
319 456
.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
457
  overflow:  hidden ;
458
  margin:    @contentbox-margin ;
459
  padding:   0 0 1.0em 0 ;
460
  clear:     both ;
461
  display:   block ;
462
  border:    1px transparent solid ; // for nice alignment with folded wrapper
463
  width:     99%;
326 464

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

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

  
331
  &.toggled  {    display: inline-block !important ; }
332
  &.bordered {    border: 1px @brand-strong solid        ; }
469
  .tbl-horizontal,
470
  .tbl-plain { float: left ; }
471
  
472
	& > table.tbl-horizontal:last-child{
473
		margin-right: 0 ;
474
	}
475

  
476
  
477
	// -----------------------
478
	// Toggled Wrapper
479
	// -----------------------
480
  &.toggled  {     display: inline-block !important ; }
481
  &.bordered {    
482
  	border:        @controlpanel-border ; 
483
  	border-radius: 4px;
333 484

  
485
  }
334 486

  
335
  // Toggle buttons
487
	// -----------------------
488
	// Toggle buttons
489
	// -----------------------
336 490
  // must be placed on the first position in .wrapper
337 491
  // PENDENT: Plazierung
338 492
  & > .toggles {
......
344 498
    float:        right        ;
345 499

  
346 500
    a.toggle {
347
      display: inline-block;
348
      width:  18px ;
349
      height: 18px ;
350
      background-repeat: no-repeat;
351
      background-position: 50% 50%;
501
      display:    inline-block;
502
      width:      18px ;
503
      height:     18px ;
504
      background-repeat:        no-repeat;
505
      background-position:      50% 50%;
352 506
      &.min { background-image: url(../image/toggle-down.png); }
353 507
      &.max { background-image: url(../image/toggle-left.png); }
354 508
    }
355
  }
509
  } // /.toggles
356 510

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

  
362
  // --------------
363
  // Columns
364
  //
511
	// -----------------------
512
	// Columns
513
	// -----------------------
365 514
  // DIV or TABLE
366 515
  .col {
367 516
    float: left ;
......
382 531
      float: none ;
383 532
      clear: left ;
384 533
    }
385
  }
534
  } // /.col
535
  
536
	// -----------------------
537
	// Paragraph within Wrapper
538
	// -----------------------
386 539
  & > p {
387 540
    max-width:       36.0em ;
388 541
    overflow:        hidden ;
......
391 544
    //color:           @gray-darker ;
392 545
    padding-bottom:  1.0em ;
393 546
  }
394
}
395

  
396
// --------------
397
// Centered Elements
398
//
399
.center{
400
  margin: auto;
401
}
402
// Centered blocks
403
.center {
404
  margin: 0 auto;
405
  width: auto;
406
}
407

  
408

  
409
// PENDENT: Neue Loesung
410
.accent{
411
  div.label{
412
    float: left ;
413
    color: @brand-data-label-color ;
414
    font-size: 80% ;
415
    &.wi-mediumsmall{ width: 13.6em; } // PENDENT!
416
    padding-top: 0.8em ;
417
  }
418
  div.data{
419
    float: left ;
420
    input[type="text"]{
421
      width: 20em !important ;
422
    }
423
  }
424
}
425

  
426

  
427

  
428

  
429

  
430

  
431

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

  
439

  
440
// --------------
441
// File Content
442
//
443
// PENDENT: wozu? genügt nicht PRE?
444
// /templates/webpages/am/edit_templates.html
445
pre.filecontent {
446
  border: 1px solid blue;
447
  padding-left: 2px;
448
  padding-right: 2px;
449
}
450

  
451

  
452
// --------------
453
// Expanded
454
//
455

  
456
// Pendent: wozu einmalig?
457
// /templates/webpages/order/tabs/_row.html
458
// /templates/webpages/order/tabs/basic_data.html
459
// /js/kivi.Order.js
460
#expand_all,
461
.expand {
462
    cursor: pointer;
463
    display: block;
464
    max-width: 16px;
465
    max-height: 16px;
466
}
467

  
468 547

  
548
} // /.wrapper
469 549

  
470 550

  
471 551

  
......
475 555
// CATEGORIES
476 556
// --------------------------------------
477 557

  
478

  
479
// --------------
558
// -----------------------
480 559
// Plus & Minus / Positive & negative
481
//
560
// -----------------------
482 561
// Inline-Elements
483 562
.plus,
484 563
.minus,
......
493 572
// Positive Values
494 573
.plus ,
495 574
.plus1 { color:     @brand-positive; }
575

  
496 576
// unbalanced Ledger
497 577
// PENDENT: wo eingesetzt?
498 578
span.unbalanced_ledger {
......
500 580
}
501 581

  
502 582

  
503
// --------------
583
// -----------------------
504 584
// Styled Text
505
//
506

  
585
// -----------------------
507 586
// Dimmed Text
508 587
// /templates/webpages/requirement_spec_text_block/_text_block.html
509 588
// /templates/webpages/requirement_spec_item/_section_header.html
510 589
div.dimmed-text,
511 590
span.dimmed-text {
512
  color:        @gray;
591
  color:        @gray-standard;
513 592
  font-style:   italic;
514 593
}
515 594

  
516 595

  
517 596

  
518 597

  
598

  
519 599
// --------------------------------------
520 600
// SPECIALIZED PROPERTIES (REDUNANT)
521 601
// --------------------------------------
522 602

  
523

  
524
//  gemahnte Rechnung
603
// -----------------------
604
// Dunned Invoices
605
// -----------------------
525 606
//  /templates/webpages/is/form_header.html
526 607
//  /templates/webpages/ar/form_header.html
527 608
.dunned_invoice {
528 609
  font-weight: bold;
529 610
  color: #f00;
530 611
}
531
//  gemahnte Rechnung
532 612
//  /templates/webpages/is/form_header.html
533 613
//  /templates/webpages/ar/form_header.html
534 614
.customer_dunning_level {
535 615
  font-weight: bold;
536 616
}
537
// dunning
617
// dunning invoice list
538 618
// /templates/webpages/dunning/show_invoices.html
539 619
#dunning_invoice_list .direct_debit td,
540 620
#dunning_invoice_list .direct_debit a {
541
  color: @gray-medium;
621
  color: @gray-standard;
542 622
}
543 623

  
624
// -----------------------
544 625
// Bank transactions
626
// -----------------------
545 627
// /templates/webpages/bank_transactions/tabs/automatic.html
546 628
#bank_transactions_proposals .invoice_number_highlight a,
547 629
#bank_transactions_proposals span.invoice_number_highlight {
......
549 631
  color: #FFFFFF;
550 632
}
551 633

  
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 634
// --------------------------------------
586 635
// Diverse Elements
587 636
// --------------------------------------
......
597 646
// --------------------------------------
598 647
// DEPRACETED STUFF (BUT WILL IT BE AVAILABLE FOR A LONGER TIME?)
599 648
// --------------------------------------
600
// PENDENT: Programmmaesig loesen, vor allem primitive Ueberschriften und "Not records Found"-Meldungen
601 649

  
650
// PENDENT: Programmmaesig loesen, vor allem primitive Ueberschriften und "Not records Found"-Meldungen wandeln
602 651
#content {
603 652
  &>p { margin: 0.6em 2.0em 1.0em 0.7em }
604 653
  &>p.message_hint {
......
606 655
  }
607 656
}
608 657

  
609

  
610

  
611

  
612

  
613

  
614

  
615

  
616

  
617

  

Auch abrufbar als: Unified diff