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

  
5 5

  
6 6

  
7
#column-container {
8
  //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 ;
15

  
16
  #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;
22

  
23
    .jstree {
24
      ul li {
25
        line-height: 1.8em;
26
        font-size: 10pt;
27
      }
28
    }
29
  }
30
  #content-column {
31
    float: left;
32
    width: 58em;
33
    padding-left: 3.0em;
34
    background-color: @gray-superlight;
35
  }
36
}
7
//  ------------------------------------------------------------ 
8
//  General page layout 
9
//  ------------------------------------------------------------ 
37 10

  
38 11

  
39
#requirement_spec_tabs{
40
  #function-blocks-tab{
41
    margin-top: 1.4em ;
42
  }
43
}
44 12

  
45
.section-empty-description { color: #bbb; }
46 13

  
47
/* ------------------------------------------------------------ */
48
/* Special things that apply to the tree */
49
/* ------------------------------------------------------------ */
14
// -----------------------
15
// Requirement Spec Version (Title)
16
// -----------------------
50 17

  
51
#tree li.flagged > a > ins {
52
 background-image: url("../image/flag-red.png") !important;
53
 background-position: 0;
18
#requirement_spec_version{
19
  padding: 					@contentbox-padding;
20
  letter-spacing: 	0.16em ;
21
  font-size: 				110% ;
54 22
}
55 23

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

  
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;
77 25

  
78
  .section-header{
79
    display: block ;
80
    overflow: hidden;
81
    width: 90% ;
26
// --------------------------------------
27
// COLUMN-CONTAINER
28
// --------------------------------------
82 29

  
83
    .section-description-heading { font-weight: normal; }
84

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

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

  
31
#column-container {
32
  //width: 100%;
33
  padding-left: 	0;
34
  padding-right: 	0;
35
  margin-left: 		0;
36
  margin-top: 		0.2em ;
37
  margin-right: 	0;
38
  overflow: 			hidden ;
99 39

  
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;
106 40

  
107
    .function-block-content{
108
      overflow: hidden ;
109 41

  
110
      .function-block-header {
111
        clear: both;
112
        overflow: hidden;
42
	// --------------------------------------
43
	// TREE COLUMN (LEFT, JS-TREE)
44
	// --------------------------------------
113 45

  
114
        .function-block-number {
115
          font-weight: bold;
116
          width: 5.0em ;
117
          display: block;
118
          float: left;
119
        }
46
  #tree-column {
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;
120 53

  
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;
54
    .jstree {
55
				& > ul {
56
					width: 342px;
57
					overflow-x: hidden;
58
				}
59
    		
60
      ul li {
61
        line-height: 			1.8em;
62
        padding: 					0 ;
63
        
64
        font-size: 				10pt;
65
        a { 
66
        	border-bottom: 	none; 
67
        	width: 					98% ;
147 68
        }
69
        
148 70
      }
149
    } // /.function-block-content
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;
77
		}    
78
    
79
  } // /#tree-column
80

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

  
151
    .sub-function-block-container {
152
      margin: 1.8em 0 0 72px;
87
  #content-column {
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
					}
165
		
166
					#section-list-empty{
167
						border: 					1px #0C42FF solid ;
168
						background-color: #BBCDFF ;
169
						padding: 					0.6em ;
170
					}
171

  
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.6em;
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;
270

  
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
					}
277

  
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 ;
282

  
283
						.sub-function-block-content {
284
							margin: 0.2em 0 0.2em 0;
285
							padding: 0.2em 0.6em 0.4em 0.6em;
286

  
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
295

  
296
				} // /.sub-function-block-container
297

  
298
			} // /.function-block    	
299
    	
300
    	
301
    	
302
			// --------------------------------------
303
			// FUNCTION BLOCK FORM
304
			// --------------------------------------
305
			
306
			// Form for creating or editing function blocks
307
    	.function-block-form {
308
				&> div { padding: 0.4em; }
309

  
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 { }
315
				
316
			} // /.function-block-form
317
    	
318
    	
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;
329
			}
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

  
339

  
340
			// --------------------------------------
341
			// SELECTION
342
			// --------------------------------------
343

  
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
350
			}
351
 
352
    } // /#column-content
353
    
354
  } // /#content-column
355
  
356
} // /#column-container
357

  
358

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

  
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;
159
      }
160 361

  
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 ;
165

  
166
        .sub-function-block-content {
167
          margin: 0.2em 0 0.2em 0;
168
          padding: 0.2em 0.6em 0.4em 0;
169

  
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 362

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

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

  
184 377

  
185 378

  
186
.function-block-form {
187
  &> div { padding: 0.4em; }
379
// --------------------------------------
380
// TABWIDGET (Tabs)
381
// --------------------------------------
188 382

  
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 { }
383
#requirement_spec_tabs{
384
  #function-blocks-tab{
385
    margin-top: 1.4em ;
386
  }
194 387
}
195 388

  
196 389

  
197 390

  
198 391

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

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

  
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 394

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

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

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

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

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

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

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

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

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

  
250 425
.requirement-spec-text-block-picture-thumbnail {
251 426
  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;
427
  border:        2px solid #ebebeb;
428
  float:         left;
429
  margin-right:  20px;
430
  padding:       5px;
431
  text-align:    center;
432
  width:         130px;
258 433
}
259

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

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

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

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

  
280

  
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
        }
293
      }
294
      span.label { }
295
    }
296
    #section-list-empty{
297
      border: 1px #0C42FF solid ;
298
      background-color: #BBCDFF ;
299
      padding: 0.6em ;
300
    }
301
  }
302
} // /.section
303 444

  
304 445

  
305 446

  
447
// ------------------------------------------------------------ 
448
// TIME/COST ESTIMATION (TABLE)
449
// ------------------------------------------------------------ 
306 450

  
451
#time_cost_estimate  {
452
	p {
453
		margin-top: 0;
454
		margin-bottom: 0;
455
  }
456
  table tbody tr  {
457
  	td { 
458
  		vertical-align: top ; 
459
  	}
460
  	td:first-child { width: 66% ; }
461
  	
462
  	// special rows
463
  	&.section th {
464
  		line-height: 2.2em ;
465
  		background-color: @brand-standard; 
466
  		color: @brand-superdark ;
467
			b { 
468
				font-size: 116% ;
469
			}
470
		}
471
  	&.subtotal {
472
  		td, th { 
473
  			font-weight:      bold ; 
474
				background-color: @gray-standard; // PENDENT: ZEBRA
475
  			border-top:       1px @brand-superdark solid ;
476
  			border-bottom:    1px @brand-superdark solid ;
477
  			text-align:       right;
478
  		}
479
  	}
480
  }
481
}
307 482

  
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 483

  
317
  .function-block-content{
318 484

  
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 485

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

  
349 487

  
350 488

  
351 489

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

  
356 491

  
357 492
//  --------------------------------------
......
363 498
}
364 499

  
365 500

  
501

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

  

Auch abrufbar als: Unified diff