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/requirement_spec.less
1
/* ------------------------------------------------------------ */
2
/* General page layout */
3
/* ------------------------------------------------------------ */
1
/* ------------------------------------------------------------- */
2
/* REQUIREMENT SPEC (requirement_spec.less)                      */
3
/* ------------------------------------------------------------- */
4 4

  
5 5

  
6 6

  
7
//  ------------------------------------------------------------
8
//  General page layout
9
//  ------------------------------------------------------------
10

  
11

  
12

  
13

  
14
// -----------------------
15
// Requirement Spec Version (Title)
16
// -----------------------
17

  
18
#requirement_spec_version{
19
  padding:           @contentbox-padding;
20
  letter-spacing:   0.16em ;
21
  font-size:         110% ;
22
}
23

  
24

  
25

  
26
// --------------------------------------
27
// COLUMN-CONTAINER
28
// --------------------------------------
29

  
30

  
7 31
#column-container {
8 32
  //width: 100%;
9
  padding-left: 0;
10
  padding-right: 0;
11
  margin-left: 0;
12
  margin-top: 0.2em ;
13
  margin-right: 0;
14
  overflow: hidden ;
33
  padding-left:   0;
34
  padding-right:   0;
35
  margin-left:     0;
36
  margin-top:     0.2em ;
37
  margin-right:   0;
38
  overflow:       hidden ;
39

  
40

  
41

  
42
  // --------------------------------------
43
  // TREE COLUMN (LEFT, JS-TREE)
44
  // --------------------------------------
15 45

  
16 46
  #tree-column {
17
    float: left;
18
    width: 25%;
19
    padding: 0.3em 1.2em 2.0em 0.8em;
20
    border-right: 1px #000 solid;
21
    background-color: @gray-superlight;
47
    float:                 left;
48
    width:                 30em;
49
    padding:               0.3em 1.2em 2.0em 0.8em;
50
    border-right:         1px #000 solid;
51
    //background-color:   @gray-superlight;
52
    background-color:     none;
22 53

  
23 54
    .jstree {
55
        & > ul {
56
          width: 342px;
57
          overflow-x: hidden;
58
        }
59

  
24 60
      ul li {
25
        line-height: 1.8em;
26
        font-size: 10pt;
61
        line-height:       1.8em;
62
        padding:           0 ;
63

  
64
        font-size:         10pt;
65
        a {
66
          border-bottom:   none;
67
          width:           98% ;
68
        }
69

  
27 70
      }
71
    } // /.jstree
72

  
73
    //  Special things that apply to the tree
74
    #tree li.flagged > a > ins {
75
      background-image:     url("../image/flag-red.png") !important;
76
      background-position:   0;
28 77
    }
29
  }
78

  
79
  } // /#tree-column
80

  
81

  
82

  
83
  // --------------------------------------
84
  // CONTENT COLUMN (RIGHT, EDITING)
85
  // --------------------------------------
86

  
30 87
  #content-column {
31
    float: left;
32
    width: 58em;
33
    padding-left: 3.0em;
34
    background-color: @gray-superlight;
35
  }
36
}
88
    float:               left;
89
    width:               58em;
90
    padding-left:       3.0em;
91
    //background-color: @gray-superlight;
92
    background-color:   none;
93

  
94
    // just nice to have this helpful container :-)
95
    #column-content {
96

  
97

  
98

  
99
      // --------------------------------------
100
      // SECTIONS
101
      // --------------------------------------
102

  
103
      .section {
104
        border-left:       0;
105
        margin-left:       0;
106

  
107
        .section-header{
108
          display:         block ;
109
          overflow:       hidden;
110
          width:           90% ;
111

  
112
          h3 {
113
            font-size:         140%;
114
            letter-spacing:   0.16em;
115
            span.label {
116
              font-size:       90% ;
117
              font-weight:     bold;
118
              letter-spacing: 0.1em;
119
              color:           @brand-dark;
120
            }
121
          } // /h3
122

  
123
          .section-description {
124
            margin-bottom:   15px;
125
            margin-left:     0;
126

  
127
            div{
128
              padding:       0.3em 0 0.4em 0;
129

  
130
              .section-description-heading {
131
                font-weight:     normal;
132
                font-size:       100% ;
133
                /* margin:       0 0 1.2em 0; */
134
                padding:         0 0 0.0em 0;
135
                display:         block;
136

  
137
              }
138
              span.label{
139
                font-size:       90%;
140
              }
141
              p {
142
                color:           #000;
143
                font-size:       106%;
144
                line-height:     1.5em;
145
                margin:         0 0 0.3em 0;
146
              }
147

  
148
            } // /div
149

  
150
          } // /.section-description
151

  
152
          .section-context-menu {
153
            h3{
154
              background-color: #000;
155
              color:             #000 !important ;
156
              span.label { font-weight: normal;}
157
            }
158
            div.section-description {
159
              div{
160
                span.label section-description-heading {}
161
              }
162
            }
163
            span.label { }
164
          }
37 165

  
166
          #section-list-empty{
167
            border:           1px #0C42FF solid ;
168
            background-color: #BBCDFF ;
169
            padding:           0.6em ;
170
          }
38 171

  
39
#requirement_spec_tabs{
40
  #function-blocks-tab{
41
    margin-top: 1.4em ;
42
  }
43
}
172
        }
173
        // /.section-header
174

  
175
      } // /.section
176

  
177

  
178

  
179
      // --------------------------------------
180
      // FUNCTION BLOCKS
181
      // --------------------------------------
182

  
183
      .function-block {
184
        border-top:   1px solid #bbb;
185
        margin:       0 ;
186
        padding:       0.8em 0 1.8em 0 ;
187
        overflow:     hidden;
188
        display:       block;
189
        clear:         both;
190
        float:         none;
191
        width:         48em;
192

  
193
        .function-block-content{
194
          overflow:   hidden ;
195
          padding:     0 0 0 0.6em;
196

  
197
          .function-block-header {
198
            clear:     both;
199
            overflow: hidden;
200

  
201
            .function-block-number {
202
              font-weight:   normal;
203
              width:         5.0em ;
204
              display:       block;
205
              float:         left;
206
            }
207

  
208
            .function-block-desc {
209
              display:         inline-block;
210
              overflow:       hidden;
211
              float:           left;
212
              width:           80%;
213
              padding-bottom: 1.0em ;
214
              //font-size:       90% ;
215
              font-weight:     normal;
216

  
217
              p {
218
                margin: 0 0 0.6em 0;
219
                padding: 0 ;
220
              }
221
              p:first-child {
222
                font-weight: bold ;
223
              }
224
            }
225
          } // /.function-block-header
226

  
227
          .function-block-properties {
228
            display: block ;
229
            margin: 0 0 0 5.0em;
230
            padding: 0 ;
231
            overflow: hidden;
232
            clear: both;
233
            font-size: 9pt;
234
            span.label,
235
            span.value {
236
              float: left;
237
            }
238
             //vertical adjustment
239
            span.label { width: 110px ;}
240
            span.value {
241
              width: 200px;
242
              padding: 0 30px 0 0;
243
              margin: 0;
244
            }
245
            // horizontal adjustment
246
//            &.list > div {
247
//              width: 300px ;
248
//              float: left;
249
//              display: inline-block ;
250
//              span.label { }
251
//              span.value {
252
//                padding: 0 30px 0 0;
253
//                margin: 0;
254
//              }
255
//            }
256

  
257
          } // /.function-block-properties
258

  
259
        } // /.function-block-content
260

  
261

  
262

  
263
        // --------------------------------------
264
        // FUNCTION BLOCKS
265
        // --------------------------------------
266

  
267
        .sub-function-block-container {
268
          margin: 1.8em 0 0 5.1em;
269
          display: block;
44 270

  
45
.section-empty-description { color: #bbb; }
271
          .sub-function-block-header{
272
            border-top: 1px solid #ccc;
273
            padding: 0.4em 0 0.4em 0.6em ;
274
            font-size: 86% ;
275
            letter-spacing: 0.2em;
276
          }
46 277

  
47
/* ------------------------------------------------------------ */
48
/* Special things that apply to the tree */
49
/* ------------------------------------------------------------ */
278
          .sub-function-block {
279
            border-top: 1px solid #ccc;
280
            margin: 0.2em 0 0.2em 0;
281
            padding: 0.2em 0 0.4em 0 ;
50 282

  
51
#tree li.flagged > a > ins {
52
 background-image: url("../image/flag-red.png") !important;
53
 background-position: 0;
54
}
283
            .sub-function-block-content {
284
              margin: 0.2em 0 0.2em 0;
285
              padding: 0.2em 0.6em 0.4em 0.6em;
55 286

  
56
/* ------------------------------------------------------------ */
57
/* Special things that apply to the context menu */
58
/* ------------------------------------------------------------ */
59

  
60
.context-menu-item.icon-flag   { background-image: url("../image/flag-red.png"); }
61
.context-menu-item.icon-close  { background-image: url("../image/document-close.png"); }
62
.context-menu-item.icon-save   { background-image: url("../image/document-save.png"); }
63
.context-menu-item.icon-revert { background-image: url("../image/edit-undo.png"); }
64
.context-menu-item.icon-pdf    { background-image: url("../image/application-pdf.png"); }
65
.context-menu-item.icon-html   { background-image: url("../image/text-html.png"); }
66
.context-menu-item.icon-add-picture { background-image: url("../image/add-picture.png"); }
67
.context-menu-item.icon-download    { background-image: url("../image/download.png"); }
68
.context-menu-item.icon-renumber    { background-image: url("../image/format-list-ordered.png"); }
69

  
70
/* ------------------------------------------------------------ */
71
/* Sections & function blocks */
72
/* ------------------------------------------------------------ */
73

  
74
.section {
75
  border-left: 0;
76
  margin-left: 0;
287
              .sub-function-block-header {
288
                font-weight: normal;
289
                font-size: 120% ;
290
                color: @gray-dark;
291
                margin-top: 1.0em ;
292
              }
293
            }
294
          }// /.sub-function-block
77 295

  
78
  .section-header{
79
    display: block ;
80
    overflow: hidden;
81
    width: 90% ;
296
        } // /.sub-function-block-container
82 297

  
83
    .section-description-heading { font-weight: normal; }
298
      } // /.function-block
84 299

  
85
    .section-description {
86
      color: #000;
87
      margin-bottom: 15px;
88
      margin-left: 52px;
89
      font-size: 90%;
90 300

  
91
      div{
92
        font-size: 90%;
93
        span.label{  }
94
      }
95
    }
96
  }
97
  // /.section-header
98 301

  
302
      // --------------------------------------
303
      // FUNCTION BLOCK FORM
304
      // --------------------------------------
99 305

  
100
  .function-block {
101
    border-top: 1px solid #bbb;
102
    margin: 0.6em 0 0.6em 0 ;
103
    padding: 0.8em 0 1.0em 0 ;
104
    overflow: hidden;
105
    display: block;
306
      // Form for creating or editing function blocks
307
      .function-block-form {
308
        &> div { padding: 0.4em; }
106 309

  
107
    .function-block-content{
108
      overflow: hidden ;
310
        input.rs_input_field,
311
        select.rs_input_field,
312
        table.rs_input_field input[type=text],
313
        table.rs_input_field input[type=password],
314
        table.rs_input_field select { }
109 315

  
110
      .function-block-header {
111
        clear: both;
112
        overflow: hidden;
316
      } // /.function-block-form
113 317

  
114
        .function-block-number {
115
          font-weight: bold;
116
          width: 5.0em ;
117
          display: block;
118
          float: left;
119
        }
120 318

  
121
        .function-block-desc {
122
          font-weight: normal;
123
          float: left;
124
          width: 80%;
125
          padding-bottom: 1.0em ;
126
          font-size: 90% ;
127
          p {
128
            margin: 0 0 0.6em 0;
129
            padding: 0 ;
130
          }
131
        }
132
      } // /.function-block-header
133

  
134

  
135
      .function-block-properties {
136
        display: block ;
137
        margin: 0 0 0 6.1em;
138
        padding: 0 ;
139
        overflow: hidden;
140
        clear: both;
141
        font-size: 9pt;
142
        span.label { width: 110px ;}
143
        span.value {
144
          width: 200px;
145
          padding: 0 30px 0 0;
146
          margin: 0;
147
        }
319

  
320
      // --------------------------------------
321
      // FLAGGED SECTIONS & BLOCKS
322
      // --------------------------------------
323

  
324
      //  Flagged sections, function blocks, text blocks
325
      .section.flagged .section-description,
326
      .function-block.flagged,
327
      .sub-function-block.flagged {
328
        background-color: @color-blue-light;
148 329
      }
149
    } // /.function-block-content
330
      // Flagged headings or numbers
331
      .section.flagged .section-description > .section-description-heading,
332
      .function-block.flagged > .function-block-content > div > .function-block-number,
333
      .sub-function-block.flagged > .sub-function-block-content > div > .function-block-number {
334
        //background-color: #fe5f14;
335
        color: @color-blue-strong;
336
      }
337

  
338

  
150 339

  
151
    .sub-function-block-container {
152
      margin: 1.8em 0 0 72px;
340
      // --------------------------------------
341
      // SELECTION
342
      // --------------------------------------
153 343

  
154
      .sub-function-block-header{
155
        border-top: 1px solid #ccc;
156
        padding: 0.4em 0 0.4em 0 ;
157
        font-size: 86% ;
158
        letter-spacing: 0.2em;
344
      //  Selected sections, function blocks, text blocks
345
      .section.selected,
346
      .function-block.selected,
347
      .sub-function-block.selected {
348
        margin-left: -3px;
349
        border-left: 3px solid #24D115; //   PENDENT: GREEN STRONG
159 350
      }
160 351

  
161
      .sub-function-block {
162
        border-top: 1px solid #ccc;
163
        margin: 0.2em 0 0.2em 0;
164
        padding: 0.2em 0 0.4em 0 ;
352
    } // /#column-content
165 353

  
166
        .sub-function-block-content {
167
          margin: 0.2em 0 0.2em 0;
168
          padding: 0.2em 0.6em 0.4em 0;
354
  } // /#content-column
355

  
356
} // /#column-container
357

  
358

  
359
.section-empty-description { color: #bbb; }
169 360

  
170
          .sub-function-block-header {
171
            font-weight: normal;
172
            font-size: 120% ;
173
            color: @gray-mediumdark;
174
            margin-top: 1.0em ;
175
          }
176
        }
177
      }// /.sub-function-block
178
    } // /.sub-function-block-container
179
  } // /.function-block
180
} // /.section
181 361

  
182 362

  
363
// --------------------------------------
364
//  CONTEXT MENU
365
// --------------------------------------
183 366

  
367
// Have a look on jquery-ui.less
368
//.context-menu-item.icon-flag        { background-image: url("../image/flag-red.png"); }
369
//.context-menu-item.icon-close       { background-image: url("../image/document-close.png"); }
370
//.context-menu-item.icon-save        { background-image: url("../image/document-save.png"); }
371
//.context-menu-item.icon-revert      { background-image: url("../image/edit-undo.png"); }
372
//.context-menu-item.icon-pdf         { background-image: url("../image/application-pdf.png"); }
373
//.context-menu-item.icon-html        { background-image: url("../image/text-html.png"); }
374
//.context-menu-item.icon-add-picture { background-image: url("../image/add-picture.png"); }
375
//.context-menu-item.icon-download    { background-image: url("../image/download.png"); }
376
//.context-menu-item.icon-renumber    { background-image: url("../image/format-list-ordered.png"); }
184 377

  
185 378

  
186
.function-block-form {
187
  &> div { padding: 0.4em; }
188 379

  
189
  input.rs_input_field,
190
  select.rs_input_field,
191
  table.rs_input_field input[type=text],
192
  table.rs_input_field input[type=password],
193
  table.rs_input_field select { }
380
// --------------------------------------
381
// TABWIDGET (Tabs)
382
// --------------------------------------
383

  
384
#requirement_spec_tabs{
385
  #function-blocks-tab{
386
    margin-top: 1.4em ;
387
  }
194 388
}
195 389

  
196 390

  
197 391

  
198 392

  
199
/* Flagged sections, function blocks, text blocks */
200 393

  
201
.section.flagged .section-description,
202
.function-block.flagged,
203
.sub-function-block.flagged {
204
  //background-color: #feece3;
205
}
206 394

  
207
.section.flagged .section-description > .section-description-heading,
208
.function-block.flagged > .function-block-content > div > .function-block-number,
209
.sub-function-block.flagged > .sub-function-block-content > div > .function-block-number {
210
  //background-color: #fe5f14;
211
  color: #fff;
212
}
213 395

  
214
/* Selected sections, function blocks, text blocks */
215 396

  
216
.section.selected,
217
.function-block.selected,
218
.sub-function-block.selected {
219
  margin-left: -3px;
220
  border-left: 3px solid #cbb120;
221
}
222 397

  
223
/* ------------------------------------------------------------ */
224
/* Text blocks */
225
/* ------------------------------------------------------------ */
398

  
399
// --------------------------------------
400
//  Text blocks
401
// --------------------------------------
226 402

  
227 403
.requirement-spec-text-block {
228 404
  border-left: 0;
229 405
  margin-left: 3px;
230 406
  margin-top: 10px;
231
}
232 407

  
233
.requirement-spec-text-block > h2 { margin-top: 0px; }
408
  & > h2 { margin-top: 0px; }
234 409

  
235
.requirement-spec-text-block.flagged {
236
  //background-color: #feece3;
237
  /* border: 1px solid #fe5f14; */
238
}
410
  &.flagged {
411
    //background-color: #feece3;
412
    //  border: 1px solid #fe5f14;
413
    &> h2 {
414
      //background-color: #fe5f14;
415
      color: #fff;
416
    }
417
  } // /.flagged
239 418

  
240
.requirement-spec-text-block.flagged > h2 {
241
  //background-color: #fe5f14;
242
  color: #fff;
243
}
419
  &.selected {
420
    border-left: 3px solid #cbb120;
421
    margin-left: 0;
422
  }
244 423

  
245
.requirement-spec-text-block.selected {
246
  border-left: 3px solid #cbb120;
247
  margin-left: 0;
248 424
}
249 425

  
250 426
.requirement-spec-text-block-picture-thumbnail {
251 427
  border-radius: 5px;
252
  border: 2px solid #ebebeb;
253
  float: left;
254
  margin-right: 20px;
255
  padding: 5px;
256
  text-align: center;
257
  width: 130px;
428
  border:        2px solid #ebebeb;
429
  float:         left;
430
  margin-right:  20px;
431
  padding:       5px;
432
  text-align:    center;
433
  width:         130px;
258 434
}
259

  
260 435
.requirement-spec-text-block-picture-thumbnail-img-container {
261
  height: 64px;
262
  margin: auto;
436
  height:  64px;
437
  margin:  auto;
263 438
  padding: 0;
264
  width: 64px;
439
  width:   64px;
265 440
}
266

  
267 441
.requirement-spec-text-block-picture-thumbnail.selected {
268 442
  border: 2px solid #cbb120;
269 443
}
270 444

  
271
/* ------------------------------------------------------------ */
272
/* Time/cost estimation */
273
/* ------------------------------------------------------------ */
274 445

  
275
#time_cost_estimate p {
276
  margin-top: 0;
277
  margin-bottom: 0;
278
}
279 446

  
280 447

  
281
.section{
282
  .section-header {
283
    .section-context-menu {
284
      h3{
285
        background-color: #000;
286
        color: #000 !important ;
287
        span.label { font-weight: normal;}
288
      }
289
      div.section-description {
290
        div{
291
          span.label section-description-heading {}
292
        }
448
// ------------------------------------------------------------
449
// TIME/COST ESTIMATION (TABLE)
450
// ------------------------------------------------------------
451

  
452
#time_cost_estimate  {
453
  p {
454
    margin-top: 0;
455
    margin-bottom: 0;
456
  }
457
  table tbody tr  {
458
    td {
459
      vertical-align: top ;
460
    }
461
    td:first-child { width: 66% ; }
462

  
463
    // special rows
464
    &.section th {
465
      line-height: 2.2em ;
466
      //background-color: @brand-standard;
467
      color: @brand-superdark ;
468
      b {
469
        font-size: 116% ;
293 470
      }
294
      span.label { }
295 471
    }
296
    #section-list-empty{
297
      border: 1px #0C42FF solid ;
298
      background-color: #BBCDFF ;
299
      padding: 0.6em ;
472
    &.subtotal {
473
      td, th {
474
        font-weight:      bold ;
475
        background-color: @gray-standard; // PENDENT: ZEBRA
476
        border-top:       1px @brand-superdark solid ;
477
        border-bottom:    1px @brand-superdark solid ;
478
        text-align:       right;
479
      }
300 480
    }
301 481
  }
302
} // /.section
303

  
304

  
305

  
306

  
482
}
307 483

  
308
.function-block{
309
  clear: both;
310
  float: none;
311
  display: block;
312
  border-top: 1px #000 solid;
313
  overflow: hidden;
314
  margin: 0 0 1.8em 0 ;
315
  width: 48em;
316 484

  
317
  .function-block-content{
318 485

  
319
    .function-block-header{
320
      .function-block-number{
321
        font-weight: bold;
322
        display: inline-block;
323
        float: left;
324
        width: 8em ;
325
      }
326
      .function-block-desc{
327
        display: inline-block;
328
        overflow: hidden;
329
        float: left;
330
        width: 39.8em;
331
      }
332
    } // /..function-block-header
333
    .function-block-properties{
334
      display: block;
335
      clear: left;
336
      .label{ float: left;}
337
      .value{float: left}
338
    } // /..function-block-properties
339
    .sub-function-block-container{
340
      display: block;
341
      margin-top: 1.0 em ;
342
      .sub-function-block-header{
343 486

  
344
      }
345
    } // /..sub-function-block-container
346
  } // /..function-block-content
347
} // /.function-block
348 487

  
349 488

  
350 489

  
351 490

  
352
#requirement_spec_version{
353
  padding: @contentbox-padding;
354
}
355 491

  
356 492

  
357 493
//  --------------------------------------
......
363 499
}
364 500

  
365 501

  
502

  
503
// --------------------------------------
504
// OVERRIDES
505
// --------------------------------------
506
.jstree-requirement-spec .jstree-clicked {
507
  background: @gray-lighter !important;
508
  border: 0 !important;
509
}
510

  

Auch abrufbar als: Unified diff