wcfsetup/install/files/style/layout/form.scss

   1 input[type="date"],
   2 input[type="datetime"],
   3 input[type="email"],
   4 input[type="number"],
   5 input[type="password"],
   6 input[type="search"],
   7 input[type="tel"],
   8 input[type="text"],
   9 input[type="url"],
  10 select,
  11 textarea {
  12         margin: 0; /* safari fix */
  13         @include input;
  14 }
  15
  16 /* set placeholder color */
  17 input[type="date"],
  18 input[type="datetime"],
  19 input[type="email"],
  20 input[type="number"],
  21 input[type="password"],
  22 input[type="search"],
  23 input[type="tel"],
  24 input[type="text"],
  25 input[type="url"] {
  26         &::-webkit-input-placeholder {
  27                 /* WebKit browsers */
  28                 color: $wcfInputPlaceholder;
  29         }
  30         &::-moz-placeholder {
  31                 /* Mozilla Firefox 19+ */
  32                 color: $wcfInputPlaceholder;
  33         }
  34         &:-ms-input-placeholder {
  35                 /* Internet Explorer 10+ */
  36                 color: $wcfInputPlaceholder;
  37         }
  38
  39         &:focus,
  40         &:hover {
  41                 &::-webkit-input-placeholder {
  42                         /* WebKit browsers */
  43                         color: $wcfInputPlaceholderActive;
  44                 }
  45                 &::-moz-placeholder {
  46                         /* Mozilla Firefox 19+ */
  47                         color: $wcfInputPlaceholderActive;
  48                 }
  49                 &:-ms-input-placeholder {
  50                         /* Internet Explorer 10+ */
  51                         color: $wcfInputPlaceholderActive;
  52                 }
  53         }
  54
  55         &[disabled],
  56         &[readonly] {
  57                 background-color: $wcfInputDisabledBackground !important;
  58                 border-color: $wcfInputDisabledBorder !important;
  59                 color: $wcfInputDisabledText !important;
  60         }
  61 }
  62
  63 input[type="search"],
  64 input[type="text"] {
  65         -webkit-appearance: none;
  66 }
  67
  68 /* prevent iOS from zooming when focusing inputs */
  69 .iOS {
  70         input[type="date"],
  71         input[type="datetime"],
  72         input[type="email"],
  73         input[type="number"],
  74         input[type="password"],
  75         input[type="search"],
  76         input[type="tel"],
  77         input[type="text"],
  78         input[type="url"],
  79         select,
  80         textarea {
  81                 font-size: 16px;
  82         }
  83 }
  84
  85 textarea {
  86         border-width: 1px;
  87         font-weight: 400;
  88         vertical-align: top;
  89         width: 100%;
  90
  91         @include wcfFontDefault;
  92
  93         &[disabled],
  94         &[readonly] {
  95                 background-color: $wcfInputDisabledBackground !important;
  96                 border-color: $wcfInputDisabledBorder !important;
  97                 color: $wcfInputDisabledText !important;
  98         }
  99 }
 100
 101 input[disabled],
 102 textarea[disabled] {
 103         -webkit-text-fill-color: $wcfInputDisabledText; /* override safari font color change */
 104         -webkit-opacity: 1; /* override mobile safari opacity change affecting text color */
 105 }
 106
 107 select {
 108         // The width is determined by the browser based upon the longest <option> contained,
 109         // but this can cause the <select> to overflow the parent container. This is acceptable
 110         // to some extent, but on mobile it can cause the entire site to have a horizontal
 111         // scrollbar instead. Setting a `max-width` will cause the browser to respect the page
 112         // boundaries and nicely wrap the displayed value instead.
 113         max-width: 100%;
 114
 115         &.fullWidth {
 116                 width: 100%;
 117         }
 118 }
 119
 120 .formSubmit {
 121         text-align: center;
 122
 123         &:not(:first-child) {
 124                 margin-top: 30px;
 125         }
 126
 127         @include screen-xs {
 128                 > .button,
 129                 > button,
 130                 > input {
 131                         display: block;
 132                         padding: 7px 10px;
 133                         width: 100%;
 134
 135                         &:not(:first-child) {
 136                                 margin-top: 10px;
 137                         }
 138                 }
 139         }
 140
 141         @include screen-sm-up {
 142                 /* the `margin-bottom` styles are required to deal with buttons wrapping
 143                    into the next row, also requires some changes to `.dialogFormSubmit`! */
 144                 margin-bottom: -10px;
 145
 146                 > button,
 147                 > input[type="button"],
 148                 > input[type="reset"],
 149                 > input[type="submit"],
 150                 > .button,
 151                 > a.button {
 152                         margin-bottom: 10px;
 153                 }
 154
 155                 > :not(:first-child) {
 156                         margin-left: 10px;
 157                 }
 158         }
 159 }
 160
 161 .inputAddon {
 162         display: flex;
 163
 164         &:not(:last-child) {
 165                 margin-bottom: 5px;
 166         }
 167
 168         > .inputPrefix,
 169         > .inputSuffix {
 170                 align-items: center;
 171                 display: flex;
 172                 flex: 0 0 auto;
 173
 174                 &.button {
 175                         border-radius: 0;
 176                 }
 177
 178                 &:not(.button) {
 179                         background-color: $wcfButtonBackground;
 180                         border: 1px solid $wcfInputBorder;
 181                         color: $wcfButtonText;
 182                         cursor: default;
 183                         padding: 3px 5px;
 184                 }
 185         }
 186
 187         > .inputPrefix {
 188                 border-right-width: 0 !important;
 189         }
 190
 191         > .inputSuffix {
 192                 &.button {
 193                         margin-left: 5px;
 194                 }
 195
 196                 &:not(.button) {
 197                         border-left-width: 0 !important;
 198                 }
 199         }
 200
 201         input {
 202                 flex: 1 auto;
 203
 204                 & + .inputPrefix {
 205                         margin-left: 5px;
 206                 }
 207         }
 208 }
 209
 210 .inputAddonTextarea {
 211         flex-wrap: wrap;
 212
 213         > .inputPrefix.button {
 214                 border-bottom-width: 0;
 215                 border-radius: 0;
 216         }
 217
 218         > textarea {
 219                 flex: 0 0 100%;
 220         }
 221
 222         > .redactor-box {
 223                 flex: 0 0 100%;
 224                 margin-top: 0 !important;
 225         }
 226 }
 227
 228 .inputAddon input,
 229 input {
 230         &.tiny {
 231                 flex-grow: 0;
 232                 width: 80px;
 233         }
 234
 235         &.long {
 236                 width: 100%;
 237         }
 238
 239         @include screen-xs {
 240                 &.short {
 241                         flex-grow: 0;
 242                         width: 150px;
 243                 }
 244
 245                 &.medium {
 246                         width: 100%;
 247                 }
 248         }
 249
 250         @include screen-sm-up {
 251                 &.short {
 252                         flex-grow: 0;
 253                         min-width: 80px;
 254                         width: 10%;
 255                 }
 256
 257                 &.medium {
 258                         flex-grow: 0;
 259                         min-width: 150px;
 260                         width: 30%;
 261                 }
 262         }
 263 }
 264
 265 .formError {
 266         dt {
 267                 color: rgba(204, 0, 1, 1) !important;
 268         }
 269
 270         input,
 271         select,
 272         textarea {
 273                 border-color: rgba(204, 0, 1, 1) !important;
 274         }
 275 }
 276
 277 /* grid-based form controls */
 278 .formGrid {
 279         dt {
 280                 display: none;
 281         }
 282
 283         select {
 284                 width: 100%;
 285         }
 286 }
 287
 288 .formFieldRequired,
 289 .customOptionRequired {
 290         color: rgba(204, 0, 1, 1) !important;
 291 }
 292
 293 /* password strength estimator */
 294 .inputAddonPasswordStrength {
 295         align-items: flex-start;
 296
 297         @include screen-xs {
 298                 flex-direction: column;
 299         }
 300 }
 301
 302 .passwordStrengthRating {
 303         flex: 0 0 auto;
 304
 305         @include screen-sm-up {
 306                 margin-left: 10px;
 307         }
 308
 309         @include screen-xs {
 310                 margin-top: 5px;
 311                 width: 100%;
 312         }
 313 }
 314
 315 .passwordStrengthScore {
 316         background-color: rgb(224, 224, 224);
 317         border-radius: 3px;
 318         display: block;
 319         height: 10px;
 320         overflow: hidden;
 321         position: relative;
 322
 323         &::before {
 324                 background-color: transparent;
 325                 bottom: 0;
 326                 content: "";
 327                 left: 0;
 328                 position: absolute;
 329                 top: 0;
 330                 transition: background-color 0.12s linear, width 0.12s linear;
 331                 width: 0;
 332         }
 333
 334         &[data-score="0"]::before {
 335                 background-color: #dd2c00;
 336                 width: 5%;
 337         }
 338         &[data-score="1"]::before {
 339                 background-color: #ff9100;
 340                 width: 20%;
 341         }
 342         &[data-score="2"]::before {
 343                 background-color: #cddc39;
 344                 width: 50%;
 345         }
 346         &[data-score="3"]::before {
 347                 background-color: #64dd17;
 348                 width: 85%;
 349         }
 350         &[data-score="4"]::before {
 351                 background-color: #2e7d32;
 352                 width: 100%;
 353         }
 354 }