resources/src/mediawiki.ui/mixins/forms.less

   1 @import "../settings/colors";
   2
   3 // Font is not included.
   4 // For Vector, that should be layered on top with vector-type
   5 .agora-field-styling() {
   6
   7         border: 1px solid @colorGrayLight;
   8
   9         &:focus {
  10                 // Styling focus of native checkboxes etc on Mac is almost impossible.
  11                 &:not([type=checkbox]):not([type=radio]) {
  12                         outline: 0; // Removes OS field focus
  13                 }
  14
  15                 box-shadow: @colorProgressiveShadow 0 0 5px;
  16
  17                 border-color: @colorProgressiveShadow;
  18         }
  19
  20         color: @colorText;
  21         padding: 0.35em 0.5em 0.35em 0.5em;
  22
  23         // Ensure that buttons and inputs are nicely aligned when they have differing heights
  24         vertical-align: middle;
  25 }
  26
  27 .agora-label-styling() {
  28         //font-weight: bold;
  29         font-size: 0.9em;
  30         color: darken(@colorGrayLight, 50%);
  31
  32         * {
  33                 font-weight: normal;
  34         }
  35 }
  36
  37 .agora-inline-label-styling() {
  38         margin-bottom: 0.5em;
  39         cursor: pointer;
  40         vertical-align: bottom;
  41         line-height: normal;
  42
  43         font-weight: normal;
  44
  45         & > input[type="checkbox"],
  46         & > input[type="radio"] {
  47                 width: auto;
  48                 height: auto;
  49                 margin: 0 0.1em 0 0;
  50                 padding: 0;
  51                 border: 1px solid @colorGrayLight;
  52                 cursor: pointer;
  53         }
  54 }