src/newslash_web/css/newslash/form.less

   1 /* form related styles */
   2
   3 @form-element-hover-background: @background-color-weaker;
   4 @form-element-border-color: darkgray;
   5 @form-element-shadow-color: lightgray;
   6
   7 .vue-modal {
   8     display: block;
   9     overflow-y: scroll;
  10 }
  11
  12 .text-form {
  13     padding: 4px;
  14     margin: 4px 0;
  15     border-radius: 4px;
  16     border: 1px solid @form-element-border-color;
  17     box-shadow: 0px 0px 2px 0px @form-element-shadow-color inset;
  18 }
  19
  20 .button-base {
  21     padding: 6px 8px;
  22     margin: 4px 0;
  23     border-radius: 4px;
  24     border: 1px solid @form-element-border-color;
  25     box-shadow: 0px 0px 2px 0px @form-element-shadow-color;
  26     background: inherit;
  27     cursor: pointer;
  28 }
  29
  30 .checkbox-base {
  31     display: inline-box;
  32     margin: 0 4px;
  33 }
  34
  35 .tall    { height: 5em; }
  36 .taller  { height: 10em; }
  37 .tallest { height: 20em; }
  38
  39
  40 form:not(.compact), .form {
  41     .inline {
  42         display: inline-block !important;
  43         width: inherit !important;
  44         margin: 0 4px !important;
  45     }
  46     .block {
  47         display: block !important;
  48         width: 100% !important;
  49     }
  50
  51     label {
  52         display: block;
  53         margin: 0;
  54         padding-right: 10px;
  55     }
  56
  57     input:not([type]),
  58     input[type="text"],
  59     input[type="password"] {
  60         display: block;
  61         width: 100%;
  62         &:extend(.text-form);
  63     }
  64
  65     input[type="checkbox"] {
  66         display: inline-block;
  67         &:extend(.checkbox-base);
  68     }
  69
  70     textarea {
  71         display: block;
  72         width: 100%;
  73         &:extend(.text-form);
  74     }
  75
  76     button { &:extend(.button-base); }
  77     button:disabled { cursor: inherit; }
  78     button:hover:not(:disabled) { background: @form-element-hover-background; }
  79     button.active:not(:disabled) { background: @form-element-hover-background; }
  80
  81     input[type="submit"] { &:extend(.button-base); }
  82     input[type="submit"]:disabled { cursor: inherit; }
  83     input[type="submit"]:hover:not(:disabled) { background: @form-element-hover-background; }
  84
  85
  86     select {
  87         &:extend(.button-base);
  88     }
  89 }