wcfsetup/install/files/style/button.less

   1 /* default values */
   2 button,
   3 input[type='reset'],
   4 input[type='submit'],
   5 input[type='button'],
   6 .button {
   7         border-style: solid;
   8         border-width: 1px;
   9         cursor: pointer;
  10         display: inline-block;
  11         margin: 0 2px;
  12         padding: 5px 13px;
  13         position: relative;
  14
  15         .borderRadius(15px);
  16 }
  17
  18 /* normal state */
  19 .button,
  20 input[type='reset']:not([disabled]),
  21 input[type='submit']:not([disabled]),
  22 input[type='button']:not([disabled]),
  23 button:not([disabled]) {
  24         background-color: @wcfButtonBackgroundColor;
  25         border-color: @wcfButtonBorderColor;
  26         color: @wcfButtonColor;
  27         text-decoration: none;
  28
  29         .textShadow(@wcfButtonBackgroundColor);
  30 }
  31
  32 /* primary */
  33 .button.buttonPrimary,
  34 input[type='submit']:not([disabled]),
  35 input[type='button']:not([disabled]).buttonPrimary,
  36 button:not([disabled]).buttonPrimary {
  37         background-color: @wcfButtonPrimaryBackgroundColor;
  38         border-color: @wcfButtonPrimaryBorderColor;
  39         color: @wcfButtonPrimaryColor;
  40         font-weight: bold;
  41
  42         .textShadow(@wcfButtonPrimaryBackgroundColor);
  43
  44         .icon {
  45                 color: @wcfButtonPrimaryColor;
  46         }
  47 }
  48
  49 /* hover */
  50 .button:hover,
  51 input[type='reset']:not([disabled]):hover,
  52 input[type='submit']:not([disabled]):hover,
  53 input[type='button']:not([disabled]):hover,
  54 button:not([disabled]):hover {
  55         background-color: @wcfButtonHoverBackgroundColor;
  56         border-color: @wcfButtonHoverBorderColor;
  57         color: @wcfButtonHoverColor;
  58         text-decoration: none;
  59         z-index: 100;
  60
  61         .textShadow(@wcfButtonHoverBackgroundColor);
  62
  63         .icon {
  64                 color: @wcfButtonHoverColor;
  65         }
  66 }
  67
  68 /* primary hover */
  69 .button.buttonPrimary:hover,
  70 input[type='submit']:not([disabled]):hover,
  71 input[type='button']:not([disabled]).buttonPrimary:hover,
  72 button:not([disabled]).buttonPrimary:hover {
  73         background-color: @wcfButtonPrimaryHoverBackgroundColor;
  74         border-color: @wcfButtonPrimaryHoverBorderColor;
  75         color: @wcfButtonPrimaryHoverColor;
  76
  77         .textShadow(@wcfButtonPrimaryHoverBackgroundColor);
  78
  79         .icon {
  80                 color: @wcfButtonPrimaryHoverColor;
  81         }
  82 }
  83
  84 /* disabled state */
  85 input[type='reset']:disabled,
  86 input[type='submit']:disabled,
  87 input[type='button']:disabled,
  88 button:disabled {
  89         background-color: @wcfButtonBackgroundColor;
  90         border-color: @wcfButtonBorderColor;
  91         color: lighten(@wcfButtonColor, 10%);
  92         cursor: not-allowed;
  93         text-decoration: none;
  94
  95         .textShadow(@wcfButtonBackgroundColor);
  96 }
  97
  98 /* active (permanently) */
  99 .button.active,
 100 input[type='button'].active,
 101 button.active,
 102 .button.active:hover,
 103 input[type='button'].active:hover,
 104 button.active:hover {
 105         background-color: @wcfButtonColor;
 106         border-color: darken(@wcfButtonColor, 5%);
 107         color: @wcfButtonBackgroundColor;
 108
 109         .boxShadowInset(0, 1px, rgba(0, 0, 0, .1), 1px);
 110         .textShadow(@wcfButtonColor);
 111
 112         .icon {
 113                 color: @wcfButtonBackgroundColor;
 114
 115                 .textShadow(@wcfButtonColor);
 116         }
 117 }
 118
 119 /* button list */
 120 .buttonList {
 121         > li {
 122                 display: inline-block;
 123
 124                 > .button {
 125                         margin: 0;
 126                 }
 127         }
 128 }
 129
 130 /* button group */
 131 .buttonGroup {
 132         > li {
 133                 display: inline-block;
 134
 135                 > .button {
 136                         margin: 0 0 0 -1px;
 137
 138                         .borderRadius(0);
 139                 }
 140
 141                 &:first-child {
 142                         > .button {
 143                                 border-top-left-radius: 15px;
 144                                 border-bottom-left-radius: 15px;
 145                         }
 146                 }
 147
 148                 &:last-child {
 149                         > .button {
 150                                 border-top-right-radius: 15px;
 151                                 border-bottom-right-radius: 15px;
 152                         }
 153                 }
 154         }
 155 }
 156
 157 /* sidebar buttons */
 158 .sidebar {
 159         button,
 160         input[type='reset'],
 161         input[type='submit'],
 162         input[type='button'],
 163         .button {
 164                 font-size: @wcfSmallFontSize;
 165                 padding: 5px 11px;
 166         }
 167 }
 168
 169 /* small buttons */
 170 button.small,
 171 .button.small {
 172         font-size: @wcfSmallFontSize;
 173         min-height: 13px;
 174         padding: 5px 11px;
 175
 176         .borderRadius(3px);
 177 }
 178
 179 /* button icons */
 180 .button > .icon {
 181         margin: -1px -5px;
 182         vertical-align: -1px;
 183
 184         + span {
 185                 margin-left: 6px;
 186         }
 187 }