css/design40/less/requirement_spec.less

   1 /* ------------------------------------------------------------- */
   2 /* REQUIREMENT SPEC (requirement_spec.less)                      */
   3 /* ------------------------------------------------------------- */
   4
   5
   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
  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 ;
  39
  40
  41
  42   // --------------------------------------
  43   // TREE COLUMN (LEFT, JS-TREE)
  44   // --------------------------------------
  45
  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;
  53
  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% ;
  68         }
  69
  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;
  77     }
  78
  79   } // /#tree-column
  80
  81
  82
  83   // --------------------------------------
  84   // CONTENT COLUMN (RIGHT, EDITING)
  85   // --------------------------------------
  86
  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:           @base-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.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;
 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; }
 360
 361
 362
 363 // --------------------------------------
 364 //  CONTEXT MENU
 365 // --------------------------------------
 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"); }
 377
 378
 379
 380 // --------------------------------------
 381 // TABWIDGET (Tabs)
 382 // --------------------------------------
 383
 384 #requirement_spec_tabs{
 385   #function-blocks-tab{
 386     margin-top: 1.4em ;
 387   }
 388 }
 389
 390
 391
 392
 393
 394
 395
 396
 397
 398
 399 // --------------------------------------
 400 //  Text blocks
 401 // --------------------------------------
 402
 403 .requirement-spec-text-block {
 404   border-left: 0;
 405   margin-left: 3px;
 406   margin-top: 10px;
 407
 408   & > h2 { margin-top: 0px; }
 409
 410   &.flagged {
 411     //background-color: #feece3;
 412     //  border: 1px solid #fe5f14;
 413     &> h2 {
 414       //background-color: #fe5f14;
 415       color: #fff;
 416     }
 417   } // /.flagged
 418
 419   &.selected {
 420     border-left: 3px solid #cbb120;
 421     margin-left: 0;
 422   }
 423
 424 }
 425
 426 .requirement-spec-text-block-picture-thumbnail {
 427   border-radius: 5px;
 428   border:        2px solid #ebebeb;
 429   float:         left;
 430   margin-right:  20px;
 431   padding:       5px;
 432   text-align:    center;
 433   width:         130px;
 434 }
 435 .requirement-spec-text-block-picture-thumbnail-img-container {
 436   height:  64px;
 437   margin:  auto;
 438   padding: 0;
 439   width:   64px;
 440 }
 441 .requirement-spec-text-block-picture-thumbnail.selected {
 442   border: 2px solid #cbb120;
 443 }
 444
 445
 446
 447
 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: @base-standard;
 467       color: @base-superdark ;
 468       b {
 469         font-size: 116% ;
 470       }
 471     }
 472     &.subtotal {
 473       td, th {
 474         font-weight:      bold ;
 475         background-color: @gray-standard; // PENDENT: ZEBRA
 476         border-top:       1px @base-superdark solid ;
 477         border-bottom:    1px @base-superdark solid ;
 478         text-align:       right;
 479       }
 480     }
 481   }
 482 }
 483
 484
 485
 486
 487
 488
 489
 490
 491
 492
 493 //  --------------------------------------
 494 //  TABLES in Requirement Specs
 495 //  --------------------------------------
 496
 497 div.function-block * table.tbl-horizontal td {
 498   font-size: 66% !important ;
 499 }
 500
 501
 502
 503 // --------------------------------------
 504 // OVERRIDES
 505 // --------------------------------------
 506 .jstree-requirement-spec .jstree-clicked {
 507   background: @gray-lighter !important;
 508   border: 0 !important;
 509 }
 510