css/design40/less/control_panels.less

   1 /* ------------------------------------------------------------- */
   2 /* CONTROL PANELS (control_panels.less)                          */
   3 /* ------------------------------------------------------------- */
   4
   5 // ----------------------------------------------------------------------------
   6 //
   7 // CONTROL PANELS
   8 //
   9 // ----------------------------------------------------------------------------
  10 // DESCRIPTION: all kind boxes/tools for selecting, including and entering data
  11 //
  12 // CONTENTS:
  13 // - FORM-ADDITION
  14 // - SELECT ITEM
  15 // - FILTER-TOGGLE-PANEL
  16 // - INPUT-PANEL
  17 // - PAGINATE
  18 // - JUMP-TO
  19 // ----------------------------------------------------------------------------
  20
  21
  22
  23 // --------------------------------------
  24 // CONTROL-PANEL
  25 // --------------------------------------
  26 // General Class for all control panels
  27 .control-panel {
  28   border:           @controlpanel-border !important;
  29   background-color: @controlpanel-bg-color;
  30   background:        @controlpanel-bg-style ;
  31   border-radius:    @controlpanel-radius;
  32   //color:            red ;
  33   overflow:         hidden ;
  34
  35   span.label{
  36     padding-right: 0.6em ;
  37   }
  38 }
  39
  40
  41
  42
  43 // --------------------------------------
  44 // FORM-ADDITION
  45 // --------------------------------------
  46 // Settings for including fields in a report
  47 .form-addition{
  48   padding:          @controlpanel-padding-bold !important ;
  49   margin:           @controlpanel-margin !important ;
  50   width:            auto !important ;
  51   display:          inline-block ;
  52
  53   h3{
  54 //    color:          @controlpanel-h3-color  !important;
  55 //    font-size:      @controlpanel-h3-size   !important;
  56 //    font-weight:    @controlpanel-h3-weight !important;
  57     margin:         0.3em 0 0.1em 0 !important;
  58     padding:         0 ;
  59   }
  60   h4{
  61    color:          @controlpanel-h4-color !important;;
  62    font-size:      @controlpanel-h4-size;
  63    font-weight:    @controlpanel-h4-weight;
  64    font-style:     @controlpanel-h4-style;
  65   }
  66
  67   div.list{
  68     margin-top: 0.2em !important ;
  69     &.col{
  70 //       min-width: 130px ;
  71 //       max-width: 240px ;
  72     }
  73   }
  74 } // /.form-addition
  75
  76
  77
  78 // --------------------------------------
  79 // SELECT ITEM
  80 // --------------------------------------
  81 // Panel for selecting a hidden Record (e.g. Contacts, Delivery Address etc.)
  82 .select-item{
  83   display:          inline-block ;
  84   width:            auto ;
  85   height:           auto;
  86   padding:          @controlpanel-select-item-padding ;
  87   margin:           @controlpanel-margin ;
  88   color:            @controlpanel-color ;
  89   font-size:        @font-size-smaller ;
  90   border:           @controlpanel-border ;
  91   border-radius:    @controlpanel-radius ;
  92   background-color: @controlpanel-bg-color ;
  93   background:        @_bg_style_button ; // PENDENT:
  94
  95   input,
  96   select{
  97     margin-left:    0.6em ;
  98   }
  99   span.label{
 100     float:          left ;
 101     color:          @controlpanel-color ;
 102   }
 103   table{
 104     margin: 0 ;
 105     td, th{ color:  @controlpanel-color ; }
 106   }
 107
 108   // see /controller.pl?action=FinancialOverview
 109   // PENDENT: anders loesen oder einfacher benennen
 110   .floating-boxes {
 111     display: table ;
 112     margin: 0.4em 0 0.8em 0 ;
 113
 114     .floating-box {
 115       display: table-cell ;
 116       float: left ;
 117       font-size: @font-size-smaller ;
 118       height: 1.9em ;
 119       vertical-align: middle;
 120       padding: 0 2.0em 0 0 ;
 121       .button, button{
 122         margin: 0 ;
 123       }
 124       label,
 125       span.label{
 126         width: auto;
 127         display: inline-block;
 128         height: 160%;
 129       }
 130       input[type="checkbox"]{ margin: 0 0.4em 0 0 ; }
 131       select { margin: -0.3em 0 0 0; }
 132     }
 133   }
 134
 135 } // /.select-item
 136
 137 // Select function within standard wrapper
 138 .ui-tabs-panel > .select-item {
 139   margin:         @contentbox-margin;
 140   vertical-align: top ;
 141
 142 }
 143 .wrapper > .select-item {
 144   margin:     0.8em 0 1.0em 0 ;
 145 }
 146
 147 // selects with text filters
 148 div.filtered_select input, div.filtered_select select {
 149   display: block;
 150 }
 151
 152 div.filtered_select input {
 153   background-image: url(../../../image/glass14x14.png);
 154   background-repeat: no-repeat;
 155   background-position: 2px 2px;
 156   border-radius: 0px;
 157   border: solid #a0a0a0 1px;
 158   border-bottom: none;
 159   padding: 0px;
 160   padding-left: 20px;
 161   margin: 0;
 162   width: 500px;
 163 }
 164
 165 div.filtered_select select {
 166   width: 522px;
 167 }
 168
 169
 170
 171
 172 // --------------------------------------
 173 // FILTER-TOGGLE-PANEL
 174 // --------------------------------------
 175 // for togglin a filter panel
 176 // see inlcude file /templates/webpages/common/filter-toggle.html
 177 .toggle_panel.control-panel{
 178   border:         none !important;
 179   background:     none !important;
 180   border-radius:   0 !important;
 181   overflow:       visible !important;
 182 }
 183 .toggle_panel{
 184   & > a.button.toggle {
 185     padding:   0.2em 0 0.2em 1.4em;
 186     &:hover {
 187       background-color: @controlpanel-bg-color !important;
 188       text-decoration:   underline ;
 189     }
 190   }
 191   span.summary {
 192     font-size:     @font-size-small;
 193     padding-left: 2.0em;
 194     color:         @controlpanel-color;
 195   }
 196   .toggle_panel_block {
 197     display:          block;
 198     overflow:         hidden;
 199     padding:          @controlpanel-padding ;
 200     margin:            2em 1em 0em 0; ;
 201     background-color: @controlpanel-bg-color;
 202
 203     border:                     @controlpanel-border ;
 204     border-bottom-left-radius:  @controlpanel-radius ;
 205     border-bottom-right-radius: @controlpanel-radius ;
 206     border-top-right-radius:    @controlpanel-radius ;
 207     margin-top: -1px ;
 208
 209     .buttons{
 210       clear:     left ;
 211       padding:   0 !important;
 212       margin:   0;
 213     }
 214   }
 215
 216   // PENDENT: ggf. anpassen an Controlpanel-Farbtoene
 217   .tbl-horizontal {
 218     //th{ color: @base-superdark ; }
 219     margin-right: 1.6em;
 220   }
 221
 222 }
 223
 224
 225
 226
 227 // --------------------------------------
 228 // INPUT-PANEL
 229 // --------------------------------------
 230 // Panel for entering data via jQuery-Scripts etc.
 231 #content .input-panel {
 232   display:                    inline-block;
 233   overflow:                   hidden ;
 234   padding:                    @controlpanel-padding-narrow ;
 235   margin:                     @margin-from-wrapper ;
 236   background-color:           @controlpanel-bg-color;
 237   border:                     @controlpanel-border ;
 238   border-radius:              @controlpanel-radius ;
 239 //  border-bottom-left-radius:  @controlpanel-radius ;
 240 //  border-bottom-right-radius: @controlpanel-radius ;
 241 //  border-top-right-radius:    @controlpanel-radius ;
 242 //  border-top-left-radius:     @controlpanel-radius ;
 243   width:                       auto ;
 244   min-width:                   30% ;
 245   //max-width: 70% ;
 246
 247   & > h3 {
 248     margin-top: 0 ;
 249   }
 250   p      {
 251     font-size:   @font-size-smaller ;
 252     margin:     0 0 0.4em 0 ;
 253   }
 254   table.condensed {
 255     margin-bottom: 0.1em;
 256     caption { padding-top: 0.1em ; }
 257     td span.label {
 258       padding-right: 0.6em ;
 259       &.above{ margin-bottom: 0em ; }
 260     }
 261   }
 262 }
 263 #content .ui-tabs-panel > .input-panel { margin-left: @margin-left-from-content }
 264 #content .input-panel.short { min-width: @wi-mediumsmall; }
 265
 266 // --------------------------------------
 267 // PAGINATE
 268 // --------------------------------------
 269 .paginate {
 270   display:          inline-block ;
 271   width:            auto ;
 272   height:           auto ;
 273   padding:          0 ;
 274   margin:           @controlpanel-margin ;
 275   border:           @controlpanel-border ;
 276   border-radius:    @controlpanel-radius ;
 277   background-color: @controlpanel-bg-color ;
 278   color:            @controlpanel-color ;
 279
 280   & > a,
 281   & > span {
 282     padding: 0.4em 0.6em !important ;
 283     margin-top: -1px ;
 284   }
 285
 286   .paginate-prev {
 287     display:          inline-block ;
 288     &::before{ content: "◄" ; }
 289     &:hover{
 290       border-bottom-left-radius: @controlpanel-radius ;
 291       border-top-left-radius:    @controlpanel-radius ;
 292     }
 293   }
 294   .paginate-next {
 295     display:          inline-block ;
 296     &::after{ content: "►"; }
 297     &:hover{
 298       border-bottom-right-radius: @controlpanel-radius ;
 299       border-top-right-radius:    @controlpanel-radius ;
 300     }
 301   }
 302   .paginate-page {
 303     display:          inline-block ;
 304     padding: 0 ;
 305   }
 306   span.paginate-page {
 307     background-color: @controlpanel-active-bg;
 308     color:            @controlpanel-active-text;
 309   }
 310   a:link, a:visited{  }
 311   a:hover,
 312   a:active{
 313     background-color: @controlpanel-bg-hover;
 314     color:            @controlpanel-bg-hover-text;
 315     text-decoration: none;
 316   }
 317 }
 318
 319
 320
 321 // --------------------------------------
 322 // JUMP-TO
 323 // --------------------------------------
 324 // for jumping e.g. to a address within a browser window
 325 // PENDENT: anders und allgemein loesen
 326 table.jump-to {
 327   &.right { float: right; }
 328
 329   border: @controlpanel-border;
 330   border-radius: @controlpanel-radius ;
 331   background-color: @controlpanel-bg-color;
 332   margin: 0.8em 2.0em 0 1.2em !important;
 333 }
 334
 335
 336
 337 // -------------------
 338 // FLOAT-CELLS TABLE
 339 // Table with left-floating cell
 340 div.float-cells-table{
 341   display: block ;
 342   width: 100% ;
 343   overflow: hidden;
 344   font-size: 80% ;
 345
 346   div.caption{
 347     float: left;
 348     display: block;
 349     width: auto;
 350     padding: 0 2.0em 0 0;
 351     margin: 0;
 352
 353   }
 354   div.cells{
 355     float: left;
 356     display: block;
 357     overflow: hidden;
 358     width: 100%;
 359      background-color: #F66;
 360
 361     div.cell{
 362       float: left;
 363       padding: 0 2.0em 0 0;
 364       border-right: 1px #fff solid;
 365       background-color: #FC6;
 366     }
 367   }
 368 }
 369
 370
 371
 372
 373
 374 // --------------------------------------
 375 // DEZIDIERTE ELEMENTE
 376 // --------------------------------------
 377
 378 .control-panel select#contact_cp_id {
 379
 380 }