css/design40/less/menu_actionbar.less

   1 /* ------------------------------------------------------------- */
   2 /* Menu Actionbar (menu_actionbar.less)                          */
   3 /* ------------------------------------------------------------- */
   4
   5 // ----------------------------------------------------------------------------
   6 //
   7 // ACTIONBAR
   8 //
   9 // ----------------------------------------------------------------------------
  10 // DESCRIPTION:
  11 // Contextual Menu and Buttons for Kivitendo
  12 // Save, Update, Post and Workflow Buttons etc.
  13 //
  14 //
  15 // CONTENTS:
  16 // - layout-actionbar
  17 //   - layout-actionbar-separator
  18 //   - layout-actionbar-action
  19 //   - layout-actionbar-link
  20 //   - layout-actionbar-combobox
  21 //     - layout-actionbar-combobox-head
  22 //     - layout-actionbar-combobox-list
  23 // ----------------------------------------------------------------------------
  24
  25
  26
  27 // --------------------------------------
  28 // Main-Container for Actionbar
  29 // --------------------------------------
  30 //
  31 // for main properties of this container see scaffolding.less
  32 .layout-actionbar {
  33
  34   div.layout-actionbar-separator {
  35     display: block;
  36     width: 0.6em;
  37     height: 0.6em;
  38     float: left;
  39     content: "&nbsp;";
  40     position: relative;
  41     border: none;
  42   }
  43
  44   div.layout-actionbar-action {
  45     -webkit-touch-callout: none;
  46     -webkit-user-select:   none;
  47     -khtml-user-select:    none;
  48     -moz-user-select:      none;
  49     -ms-user-select:       none;
  50     user-select:           none;
  51     height: 25px;
  52     font-size: @font-size-smaller ;
  53
  54     &.layout-actionbar-action-disabled{
  55       color: @actionbar-font-color-disabled !important;
  56       &:hover{ text-decoration: none !important; }
  57     }
  58   }
  59
  60   & > div.layout-actionbar-action{
  61     border-radius: @actionbar-border-radius ;
  62     border: 1px @actionbar-border-color solid;
  63     background-color: @actionbar-bg ;
  64     float: left;
  65     color: @actionbar-font-color;
  66     z-index: @zindex-actionbar-action ;
  67   }
  68
  69   div.layout-actionbar-action-disabled,
  70   div.layout-actionbar-action-disabled:hover{  }
  71
  72
  73
  74   div.layout-actionbar-link,
  75   div.layout-actionbar-submit,
  76   div.layout-actionbar-scriptbutton {
  77     display: block;
  78     min-width: 90px;
  79     width: auto;
  80     box-sizing: border-box;
  81     border-width: 1px;
  82     border-style: solid;
  83     text-align: center;
  84     padding: 4px 10px;
  85     cursor: default;
  86     &:focus{
  87       border-color: darkgray; // PENDENT: Button Border
  88       background-color: @actionbar-bg-active;
  89     }
  90     &:hover {
  91       border-width: 1px;
  92       border-style: solid;
  93     }
  94   }
  95
  96   .layout-actionbar-default-action {
  97     font-weight: normal;
  98   }
  99
 100   div.layout-actionbar-combobox {
 101     position: relative;
 102     display: block;
 103     float: left;
 104     //width: 5.8em;
 105     width: 110px;
 106     z-index: @zindex-actionbar-combobox ;
 107
 108     div.layout-actionbar-combobox-head {
 109       padding-right: 20px;
 110       white-space: nowrap;
 111       display: block;
 112       margin-bottom: -1px;
 113       float: right;
 114       z-index: @zindex-actionbar-combobox-head ;
 115       position: relative;
 116
 117       >div {
 118         //width: 5.4em;
 119         min-width: 90px;
 120         height: 25px;
 121         border-top-left-radius: @actionbar-border-radius ;
 122         border-bottom-left-radius: @actionbar-border-radius ;
 123         border: 1px @actionbar-border-color solid;
 124         background-color: @actionbar-bg;
 125         color: @actionbar-font-color;
 126         position: relative;
 127       }
 128
 129       > span {
 130         display: block;
 131         position: absolute;
 132         top: 0;
 133         right: 0;
 134         width: 24px !important;
 135         height: 25px !important;
 136         border: 1px @actionbar-border-color solid;
 137         border-left: none;
 138         border-top-right-radius: @actionbar-border-radius ;
 139         border-bottom-right-radius: @actionbar-border-radius ;
 140         padding: 4px;
 141         background-color: @actionbar-bg ;
 142         //background-image: url("../../image/select-down.png") no-repeat;
 143         background-image: url("../../image/select-down.png") ;
 144         background-repeat: no-repeat;
 145         background-position: 5px 5px;
 146       }
 147     } // /.layout-actionbar-combobox-head
 148
 149     div.layout-actionbar-combobox-list {
 150       position: relative;
 151       display: none;
 152       min-width: 140px;
 153       float: right;
 154       overflow: hidden;
 155       border: 1px solid @actionbar-border-color ;
 156       border-top-left-radius: @actionbar-border-radius;
 157       border-bottom-left-radius: @actionbar-border-radius;
 158       border-bottom-right-radius: @actionbar-border-radius;
 159       z-index: @zindex-actionbar-combobox-list ;
 160       top: 1px;
 161       //padding-bottom: 0.6em;
 162       background-color: @actionbar-bg ;
 163
 164       div.layout-actionbar-action {
 165         white-space: nowrap;
 166         display: block;
 167         position: relative;
 168         width: 100%;
 169         text-align: left;
 170         padding: 0.6em 0.6em 0.6em 1.0em;
 171         border-bottom: none !important;
 172         background-color: @actionbar-bg ;
 173         color: @actionbar-font-color;
 174
 175         // PENDENT: *-active ersetzen durch -hover
 176         &:hover {
 177           color: @actionbar-font-color-active;
 178           text-decoration: underline;
 179           background-color: @actionbar-bg-active;
 180         }
 181       }
 182     } // /.layout-actionbar-combobox-list
 183
 184     // Combobox active
 185     &.active {
 186       div.layout-actionbar-combobox-head{
 187         height: 29px;
 188         border-bottom: none !important ;
 189
 190         div {
 191           //background-color: @actionbar-bg-active !important ;
 192           border-bottom-left-radius: 0 !important;
 193           border-bottom: none;
 194           height: 30px ;
 195         }
 196         span {
 197           //background-color: @actionbar-bg-active !important ;
 198           border-bottom-right-radius: 0 !important;
 199           border-bottom: none;
 200           height: 30px !important ;
 201         }
 202       } // /div.layout-actionbar-combobox-head
 203       div.layout-actionbar-combobox-list {
 204         display: inline-table; // IMPORTANT
 205         border-top-right-radius: 0 !important;
 206         div.layout-actionbar-action{
 207           border: none !important;
 208         }
 209       }
 210     } // /.active
 211   } // /.layout-actionbar-combobox
 212 }