css/design40/less/buttons.less

   1 /* ------------------------------------------------------------- */
   2 /* BUTTONS (buttons.less)                                        */
   3 /* ------------------------------------------------------------- */
   4
   5 // ----------------------------------------------------------------------------
   6 //
   7 // BUTTONS (FORM BUTTONS & LINKS AS BUTTONS)
   8 //
   9 // ----------------------------------------------------------------------------
  10 // DESCRIPTION: all kind of buttons
  11 //
  12 // CONTENTS:
  13 // - FORM BUTTONS
  14 //   - input, button
  15 //     - .clear
  16 //     - Dimensions
  17 //   - button.icon
  18 //   - Action STRONG (submission to server page)
  19 //   - Action SOFT/NEUTRAL (no submission to server page)
  20 //   - button
  21 //     - .below
  22 // - LINK AND LABELS DESIGNED AS BUTTONS
  23 // - BUTTONS CONTAINER
  24 // - IMAGE-BUTTONS
  25 // ----------------------------------------------------------------------------
  26
  27
  28
  29 // --------------------------------------
  30 // FORM BUTTONS
  31 // --------------------------------------
  32 // At first we tried to nest the buttons within the form element,
  33 // but it is not possible because some forms do not have a form element
  34 // (e.g. print dialog)
  35
  36 // A lot of buttons are outside of a form, so let be this tag deactivated
  37 //form {
  38
  39   // General
  40   input[type="button"],
  41   input[type="submit"],
  42   input[type="reset"],
  43   button {
  44
  45     .mx-button ; // Mixin
  46
  47     &.clear { clear: left; }
  48
  49     // DIMENSIONS
  50     &.wi-verysmall   { min-width: @input-wi-verysmall   ; }
  51     &.wi-small       { min-width: @input-wi-small       ; }
  52     &.wi-mediumsmall { min-width: @input-wi-mediumsmall ; }
  53     &.wi-normal      { min-width: @input-wi-normal      ; }
  54     &.wi-lightwide   { width:     @input-wi-lightwide   ; }
  55     &.wi-wide        { width:     @input-wi-wide        ; }
  56     &.wi-wider       { width:     @input-wi-wider       ; }
  57     &.wi-verywide    { width:     @input-wi-verywide    ; }
  58     &.wi-tiny {
  59       width:        auto ;
  60       padding:      0.16em 0.2em 0.1em 0.2em;
  61       margin:      -0.3em 0 0 0.2em;
  62       //float:      right;
  63       display:      inline-block;
  64       font-size:    84% ;
  65       min-height:   23px;
  66       max-height:   23px;
  67     }
  68     &.wi-verytiny{
  69       font-size:    8pt !important;
  70       padding:      0.0em 0.3em 0.1em 0.3em;
  71       display:      inline-block;
  72       min-height:   17px;
  73       max-height:   17px;
  74     }
  75
  76   } // /input[type="button etc."]
  77
  78   button.icon{
  79     padding:      0 ;
  80     margin:       0 ;
  81     background:   none !important;
  82     border:       0 !important;
  83     display:      inline-block;
  84     img { vertical-align: middle ; }
  85   }
  86
  87   // -------------------
  88   // Action STRONG (submission to server page)
  89   input[type="submit"],
  90   input[type="button"],
  91   input[type="button"].button,
  92   button[type="submit"],
  93   button[type="button"] {
  94     color:                  @button-strong-color ;
  95     background-color:       @button-strong-bg;
  96     border:                 @button-strong-border ;
  97     &:hover{
  98       color:                @button-strong-hover-color ;
  99       background-color:     @button-strong-hover-bg;
 100       border:               @button-strong-hover-border ;
 101     }
 102     &:active,
 103     &:focus{
 104       color:                @button-strong-active-color ;
 105       background-color:     @button-strong-active-bg;
 106       border:               @button-strong-active-border ;
 107     }
 108   }
 109
 110   // -------------------
 111   // Action SOFT/NEUTRAL (no submission to server page)
 112   input[type="button"].neutral,
 113   input[type="submit"].neutral,
 114   input[type="reset"],
 115   input[type="reset"].neutral,
 116   button.neutral,
 117   button[type="reset"] {
 118     color:              @button-neutral-color ;
 119     background-color:   @button-neutral-bg;
 120     border:             @button-neutral-border ;
 121     &:hover {
 122       color:            @button-neutral-hover-color ;
 123       background-color: @button-neutral-hover-bg;
 124       border:           @button-neutral-hover-border ;
 125     }
 126     &:active,
 127     &:focus {
 128       color:            @button-neutral-active-color;
 129       background-color: @button-neutral-active-bg;
 130       border:           @button-neutral-active-border ;
 131     }
 132
 133     // Toggle-Button (e.g. for position details in tables)
 134     &.positions {
 135       padding-right:    1.2em ;
 136       // ::after does not work in buttons
 137 //       input#cb_show_details {
 138 //         &::after {
 139 //           content:      "▸" !important ;
 140 //         }
 141 //       }
 142 //       input#cb_hide_details::after {
 143 //         content:        "▾" !important ;
 144 //       }
 145     } // /.positions
 146
 147   } // /input[type="*"].neutral
 148
 149   // PENDENT: Neu
 150   input[type="button"]{
 151     &.below{
 152       clear: both !important;
 153       float: none;
 154       //margin-top: 0.3em;
 155       overflow: hidden ;
 156     }
 157   }
 158 //} // /form
 159
 160
 161
 162
 163
 164
 165
 166 // --------------------------------------
 167 // LINKS DESIGNED AS BUTTONS
 168 // They may be placed inside or outside a form
 169 // --------------------------------------
 170 a {
 171   &.button {
 172
 173     .mx-button ;
 174
 175     &.below { clear: both !important; }
 176
 177     // STANDARD colors
 178     .mx-button-standard ;
 179     .mx-button-standard-hover-focus ;
 180
 181     // NEUTRAL (no Submission)
 182     &.neutral {
 183       &:link,
 184       &:visited{
 185         .mx-button-neutral ; // Mixin
 186       }
 187       .mx-button-neutral-hover-focus ; // Mixin
 188     } // /.neutral
 189
 190     &.wi-smallest     { width:     @input-wi-smallest    ; }
 191     &.wi-verysmall    { width:     @input-wi-verysmall   ; }
 192     &.wi-small        { width:     @input-wi-small       ; }
 193     &.wi-mediumsmall  { width:     @input-wi-mediumsmall ; }
 194     &.wi-normal       { width:     @input-wi-normal      ; }
 195     &.wi-lightwide    { width:     @input-wi-lightwide   ; }
 196     &.wi-wide         { width:     @input-wi-wide        ; }
 197     &.wi-wider        { min-width: @input-wi-wider       ; }
 198     &.wi-verywide     { min-width: @input-wi-verywide    ; }
 199     // Tiny button (one letter button)
 200     &.wi-tiny {
 201       display:    inline-block;
 202       width:      auto ;
 203       padding:    0.16em 0.2em 0.1em 0.2em;
 204       margin:     -0.3em 0 0 0.2em;
 205       font-size:  84% ;
 206     }
 207
 208     // Toggle (for filters e.g.)
 209     &.toggle {
 210       background-color: @controlpanel-bg-color !important ;
 211
 212       &.off::after{
 213         content:                    " ▸";
 214         padding-right:              1.0em;
 215       }
 216       &.on::after {
 217         content:                    " ▾";
 218         padding-right:              1.0em;
 219       }
 220       &.with-panel{
 221         margin-bottom:              0 ;
 222         border-bottom: none;
 223         border-bottom-left-radius:  0px ;
 224         border-bottom-right-radius: 0px ;
 225         &:hover {
 226           border-top:               @controlpanel-border !important ;
 227           border-right:             @controlpanel-border !important ;
 228           border-bottom:            0 !important;
 229           border-left:              @controlpanel-border !important ;
 230         }
 231       }
 232       &:hover{
 233         background-color:           @button-neutral-bg !important;
 234         border:                     @controlpanel-border !important ;
 235         color:                      @button-neutral-color;
 236         text-decoration:            none;
 237       }
 238     } // /.toggle
 239   } // /.button
 240 }// /a
 241
 242
 243
 244 // --------------------------------------
 245 // LABELS DESIGNED AS BUTTONS
 246 // They may be placed inside or outside a form
 247 // --------------------------------------
 248 #content label.button {
 249
 250   .mx-button ; // Mixin
 251
 252   // STANDARD colors
 253   .mx-button-standard ; // Mixin
 254
 255   .mx-button-standard-hover-focus ; // Mixin
 256
 257   // NEUTRAL (no Submission)
 258   &.neutral {
 259     .mx-button-neutral ; // Mixin
 260     .mx-button-neutral-hover-focus ; // Mixin
 261   } // /.neutral
 262
 263 } // /.button
 264
 265
 266
 267 // --------------------------------------
 268 // BUTTONS CONTAINER
 269 // --------------------------------------
 270 // Container fuer Buttons
 271 div.buttons {
 272   padding:            1.0em ;
 273   clear:              left ;
 274   display:            block;
 275   // PENDENT: anschauen, steht fuer Anzeige von Positionsdetails in Listen-Tabellen
 276   &.positions {
 277     margin:           0 0 -1.7em 26.0em;
 278     padding:          0em;
 279     label.button.neutral,
 280     input.positions {
 281       border-bottom-left-radius: 0 !important;
 282       border-bottom-right-radius: 0 !important;
 283       padding-bottom: 0.6em !important;
 284       margin-bottom: -0.8em !important;
 285       background: none !important;
 286       border-bottom: none !important;
 287     }
 288     input.positions{
 289
 290     }
 291   }
 292   &.below {
 293     padding:          0 ;
 294     margin:           0 ;
 295   }
 296 }
 297 .col > .buttons,
 298 .wrapper * .buttons {
 299   padding:            1.0em 1.0em 1.0em 0 !important;
 300 }
 301
 302
 303
 304 // --------------------------------------
 305 // IMAGE BUTTONS ()
 306 // --------------------------------------
 307 .button-image {
 308   display: inline-block ;
 309   // Info or details button
 310   &.info {  }
 311   // Delete (cross) button
 312   &.delete {  }
 313   // Edit (pencil) button
 314   &.edit {  }
 315   // Map (globus / planet earth) button
 316   &.map { }
 317 }
 318 td,
 319 th {
 320   .button-image { vertical-align: middle; }
 321 }
 322 input[type="button"].button-image{
 323   &.delete {
 324     background-image:     url("image/cross2.png");
 325     background-repeat:     no-repeat;
 326     background-position:   0 0;
 327     color:                 #fff;
 328     background-color:      transparent;
 329     border-color:         none;
 330     border-width:         0;
 331   }
 332 }