src/newslash_web/css/newslash/form.less

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