css/design40/less/scaffolding.less

   1 /* ------------------------------------------------------------- */
   2 /* SCAFFOLDING (scaffolding.less)                                */
   3 /* ------------------------------------------------------------- */
   4
   5 // ----------------------------------------------------------------------------
   6 //
   7 // SCAFFOLDING (PAGE & PAGE COMPONENTS)
   8 //
   9 // ----------------------------------------------------------------------------
  10 // DESCRIPTION:
  11 // All main components of a Kivitendo page are defined here
  12 // but not in all details. See therefore in the mentioned specialized
  13 // LESS-files
  14 //
  15 //
  16 // CONTENTS:
  17 // - BODY
  18 // - FRAME-HEADER
  19 // - MENUV3
  20 // - LAYOUT-ACTIONBAR
  21 // - CONTENT
  22 // - COLUMNS
  23 //   - SINGLE COLUMN
  24 // - WRAPPER POSITIONS-TABLE (FULL-WIDTH)
  25 // - DIVERS COMPONENTS (General Wrapper)
  26 // - MEDIA: Print
  27 // ----------------------------------------------------------------------------
  28
  29
  30
  31
  32 // --------------------------------------
  33 // BODY
  34 // --------------------------------------
  35
  36 body {
  37   margin:           0 ;
  38   color:            @base-primary ;
  39   font-family:      @font-family-sans-serif;
  40   font-size:        @font-size-smaller ;
  41
  42 //  background-color: @body-bg;
  43   .bg-body ;
  44
  45
  46   // --------------------------------------
  47   // Frame-Header
  48   // --------------------------------------
  49   // Quicksearch, User, Client, Logout
  50   // see also frame-header.less
  51   #frame-header{
  52     position: fixed;
  53     top: 0;
  54     z-index: @zindex-dashboard;
  55   }
  56
  57
  58
  59   // --------------------------------------
  60   // MENUV3
  61   // --------------------------------------
  62
  63   // admin section &
  64   & #menuv3:first-child{
  65     top: 0 !important;
  66   }
  67   // see also menu.less
  68   #menuv3  {
  69     position:  fixed;
  70     z-index:   @zindex-navbar;
  71     top:       28px ;
  72     width:     100%;
  73     height:    32px;
  74   }
  75
  76
  77
  78   // --------------------------------------
  79   // LAYOUT-ACTIONBAR
  80   // --------------------------------------
  81
  82   // see also menu_actionbar.less
  83   .layout-actionbar  {
  84     display: block;
  85     z-index: @zindex-actionbar;
  86     position: fixed;
  87     //float: left !important;
  88     float: right !important;
  89     width: auto;
  90     top: 68px ;
  91     //left: 656px ;
  92     right: 0.2em ;
  93     margin: 0 0.4em 0 0;
  94     padding: 0;
  95     background: none;
  96
  97     & ~ div:first {
  98       padding-top: 25px;
  99     }
 100
 101     & > div + div {
 102       margin-left: 2px;
 103     }
 104
 105   }
 106
 107
 108
 109
 110   // --------------------------------------
 111   // CONTENT
 112   // --------------------------------------
 113   //& > #content {
 114   & #content {
 115     overflow:         hidden;
 116     display:          block;
 117     padding:          @content-padding;
 118     margin:           @content-margin;
 119
 120     .bg-content ;
 121
 122
 123     // --------------------------------------
 124     // UI-TABS-PANEL
 125     // --------------------------------------
 126     .ui-tabs-panel {
 127        //background-color: @tabs-bg;
 128     }
 129
 130
 131
 132     // --------------------------------------
 133     // Wrapper & Columns
 134     // --------------------------------------
 135     // PENDENT: .cols-no-padding???
 136     .wrapper{
 137       clear:       both;
 138       display:     block;
 139       overflow:    hidden;
 140       width:       97.2%;
 141       height:      auto;
 142
 143
 144       // -----------------------
 145       // Colums (.col)
 146       // -----------------------
 147       // Single Column (DIV or HORIZONTAL TABLE .tbl-horizontal)
 148       & > .col {
 149         display: block;
 150         overflow: hidden;
 151         float: left;
 152         margin-right: 1.6em;
 153         div > label {
 154           font-size: 10pt;
 155           line-height: 12.6pt;
 156         }
 157         p { font-size: @font-size-small }
 158       } // /.col
 159
 160       & > .col,
 161       & > .tbl-horizontal{
 162         float: left;
 163         margin-right: 1.6em;
 164         padding-bottom: 20px ; // required to avoid crops of buttons
 165       }
 166 //      & > .tbl-horizontal:last-child{
 167 //        margin-right: 0 !important ;
 168 //      }
 169
 170
 171
 172       // Centered Column
 173       &.center{
 174         margin: 0 auto;
 175         display: table;
 176         width: auto;
 177       }
 178       // PENDENT: anschauen
 179       &.width-moderate{
 180         width: auto;
 181       }
 182
 183       & > table.tbl-horizontal:last-child{
 184         margin-right: 0 !important ;
 185       }
 186
 187     } // /.wrapper
 188
 189   } // /#content
 190
 191
 192
 193   // --------------------------------------
 194   // WRAPPER POSITIONS-TABLE (FULL-WIDTH)
 195   // --------------------------------------
 196   // Special Container with Full-Width-Table (Positions) and Show/Hide-Buttons
 197   // PENDENT: woanders plazieren
 198   .full-width {
 199     width:   100% ;
 200     padding: 0 0 1.0em 0 ;
 201     margin:  0 0 0 0;
 202
 203     // Use this Selector on the same Level for Show/Hide Details-Buttons
 204     // Edit these Buttons in tables.less
 205     // PENDENT: vielleicht anders loesen
 206     &.positions{ }
 207   }
 208
 209   // zentrierte Elemente
 210   // PENDENT: braucht es das?
 211   div.center{
 212       margin: 0 auto;
 213       display: table;
 214       width: auto;
 215   }
 216
 217
 218 }
 219 // /body