css/design40/less/menu_frame_header.less

   1 /* ------------------------------------------------------------- */
   2 /* MENU FRAME HEADER (menu_frame_header.less)                    */
   3 /* ------------------------------------------------------------- */
   4
   5
   6 // ----------------------------------------------------------------------------
   7 //
   8 // FRAME-HEADER (DASHBOARD)
   9 //
  10 // ----------------------------------------------------------------------------
  11 // DESCRIPTION:
  12 // The Frame-Header is always on top of every Kivitendo-Page visible
  13 // and offers Quick Search functions, a Log Out-Link and more
  14 //
  15 // CONTENTS:
  16 // - FRAME-HEADER
  17 // - FRAME-HEADER-ELEMENTS (Links left & right)
  18 // - AJAX-SPINNER (Beach Ball)
  19 // - QUICK-SEARCH
  20 // ----------------------------------------------------------------------------
  21
  22
  23 #frame-header {
  24
  25     text-align: left;
  26     margin: 0;
  27     padding: 0.2em 0.6em;
  28     border: 0;
  29     overflow: hidden;
  30     height: 28px;
  31     width: 100%;
  32     display: table-cell;
  33     vertical-align: middle;
  34     border-spacing: 0;
  35
  36     background-color: @dashbrd_bg;
  37     line-height: 100%;
  38     font-size: @font-size-smaller ;
  39
  40     + div {
  41         // see main.less
  42     }
  43
  44
  45     // --------------------------------------
  46     // FRAME-HEADER-ELEMENTS (Left & Right)
  47     // --------------------------------------
  48
  49     span.frame-header-element {
  50         color: @dashbrd_text ;
  51         padding-top: 0.2em;
  52
  53         a:link,
  54         a:visited,
  55         a:hover,
  56         a:active {
  57             text-decoration: none;
  58             border-bottom: none;
  59             color: @dashbrd_link ;
  60         }
  61
  62         a:hover{
  63             color: @dashbrd_link_hover ;
  64             text-decoration: @dashbrd_link_deco; /*underline*/
  65         }
  66         span.client{
  67           text-transform: uppercase ;
  68           font-size: 130% ;
  69         }
  70     } // /span.frame-header-element
  71
  72
  73     span.frame-header-left,
  74     span.frame-header-center,
  75     span.frame-header-right    {
  76         border-spacing: 0;
  77         padding: 0;
  78         vertical-align: middle;
  79         height: 100%;
  80         display: table-row;
  81
  82         & > span {
  83           height: 24px;
  84           margin: 0 10px;
  85           display: table-cell ;
  86           vertical-align: middle;
  87         }
  88     }
  89
  90     span.frame-header-left {
  91         float: left;
  92         padding: 0 1.0em 0 0.2em ;
  93         margin-right: 1.0em ;
  94         & > span { padding-right: 1.0em ; }
  95     }
  96     span.frame-header-right {
  97         float: right;
  98         vertical-align: middle;
  99         padding: 0 1.2em 0 1.0em ;
 100         margin-left: 1.0em;
 101         & > span { padding-left: 1.0em ; }
 102     }
 103
 104
 105
 106     // --------------------------------------
 107     // AJAX-SPINNER (Beach Ball)
 108     // --------------------------------------
 109
 110     #ajax-spinner {
 111       display: none;
 112     }
 113
 114
 115
 116     // --------------------------------------
 117     // QUICK-SEARCH
 118     // --------------------------------------
 119
 120     div.frame-header-quicksearch{
 121       display: block;
 122       overflow: hidden;
 123       margin: 0.1em auto 0 auto;
 124       text-align: center;
 125       width: auto;
 126
 127       span.frame-header-quicksearch input {
 128         font-size: @font-size-smaller;
 129         //font-family: @font-family-sans-serif ;
 130         margin-top: 0.1em;
 131         background-color: @dashbrd_input_bg ;
 132         width: auto !important;
 133         min-width: 5em;
 134         max-width: 7em;
 135         padding: 0 0.2em ;
 136         border-width: 1px ;
 137         //border-color: #bcbcbc;
 138         border-style: solid;
 139         border-top-color: #949494;
 140         border-right-color: #BCBCBC;
 141         border-bottom-color: #BCBCBC;
 142         border-left-color: #949494;
 143       }
 144     } // /div.frame-header-quicksearch
 145
 146 } /* /#frame-header  */