git.roojs.org Git - bootswatch/blob - material-kit/sass/material-kit/_inputs.scss

   1 // This file has been autogenerated by grunt task lessToSass. Any changes will be overwritten.
   2
   3 @import '_inputs-size';
   4
   5 // label variations
   6 .label {
   7   border-radius: $border-radius-small;
   8   @include variations(unquote(".label"), unquote(""), background-color, $grey);
   9 }
  10
  11 // must be broken out for reuse - webkit selector breaks firefox
  12 @mixin label-static($label-top, $static-font-size, $static-line-height){
  13   label.control-label {
  14     top: $label-top;
  15     left: 0;
  16     // must repeat because the selector above is more specific than the general label sizing
  17     font-size: $static-font-size;
  18     line-height: $static-line-height;
  19   }
  20 }
  21
  22 @mixin label-size-variant($placeholder-font-size, $vertical-padding, $line-height, $static-font-size, $static-line-height, $help-block-font-size){
  23   .form-control {
  24     @include material-placeholder {
  25       font-size: $placeholder-font-size;
  26       line-height: $line-height;
  27       color: $mdb-input-placeholder-color;
  28       font-weight: 400;
  29
  30 }
  31     // margin-bottom must be specified to give help-block vertical space.
  32     //    $see also form-group padding-bottom (and size variants) re: collapsible margins.  These work together.
  33     margin-bottom: $vertical-padding;
  34   }
  35
  36   // generic labels used anywhere in the form (not control-label)
  37   .checkbox label,
  38   .radio label,
  39   label {
  40     font-size: $placeholder-font-size;
  41     line-height: $line-height;
  42     color: $mdb-input-placeholder-color;
  43     font-weight: 400;
  44   }
  45
  46   // smaller focused or static size
  47   label.control-label {
  48     font-size: $static-font-size;
  49     line-height: $static-line-height;
  50     color: $mdb-input-placeholder-color;
  51     font-weight: 400;
  52     margin: 16px 0 0 0; // std and lg
  53   }
  54
  55   .help-block {
  56     margin-top: 0; // allow the input margin to set-off the top of the help-block
  57     font-size: $help-block-font-size;
  58   }
  59 }
  60
  61 @mixin form-group-validation-state($name, $color){
  62
  63   &.#{$name} { // e.g. has-error
  64     .form-control {
  65       box-shadow: none;
  66     }
  67     &.is-focused .form-control {
  68       background-image: linear-gradient($color, $color), linear-gradient($mdb-input-underline-color, $mdb-input-underline-color);
  69     }
  70     label.control-label,
  71     .help-block {
  72       color: $color;
  73     }
  74   }
  75 }
  76
  77 @mixin form-group-size-variant($parent, $placeholder-font-size, $label-top-margin, $vertical-padding, $line-height, $label-as-placeholder-shim){
  78   $static-font-size: ceil(($mdb-label-static-size-ratio * $placeholder-font-size)) !default;
  79   $static-line-height: ($mdb-label-static-size-ratio * $line-height) !default;
  80
  81   $label-as-placeholder-top: -1 * ($vertical-padding + $label-as-placeholder-shim) !default;
  82   $label-top: $label-as-placeholder-top - ($placeholder-font-size + $vertical-padding) !default;
  83
  84   $help-block-font-size: ceil(($mdb-help-block-size-ratio * $placeholder-font-size)) !default;
  85   $help-block-line-height: ($mdb-help-block-size-ratio * $line-height) !default;
  86
  87   // this is outside a form-group
  88   @if not $parent {
  89     @include label-size-variant($placeholder-font-size, $vertical-padding, $line-height, $static-font-size, $static-line-height, $help-block-font-size);
  90   }
  91
  92   // this is inside a form-group, may be .form-group.form-group-sm or .form-group.form-group-lg
  93   @else {
  94     #{$parent} {
  95       @include label-size-variant($placeholder-font-size, $vertical-padding, $line-height, $static-font-size, $static-line-height, $help-block-font-size);
  96
  97       // form-group padding-bottom
  98       //  upon collapsing margins, the largest margin is honored which collapses the form-control margin-bottom,
  99       //  so the form-control margin-bottom must also be expressed as form-group padding
 100       padding-bottom: $vertical-padding;
 101
 102       // form-group margin-top must be large enough for the label and the label's top padding since label is absolutely positioned
 103       margin: ($label-top-margin + $static-font-size) 0 0 0;
 104
 105       // larger labels as placeholders
 106       &.label-floating,
 107       &.label-placeholder {
 108         label.control-label {
 109           top: $label-as-placeholder-top; // place the floating label to look like a placeholder with input padding
 110           font-size: $placeholder-font-size;
 111           line-height: $line-height;
 112         }
 113       }
 114
 115       // static, focused, or autofill floating labels
 116       &.label-static,
 117       &.label-floating.is-focused,
 118       &.label-floating:not(.is-empty) {
 119         @include label-static($label-top, $static-font-size, $static-line-height);
 120       }
 121       // #559 Fix for webkit/chrome autofill - rule must be separate because it breaks firefox otherwise #731
 122       &.label-floating input.form-control:-webkit-autofill ~ label.control-label {
 123         @include label-static($label-top, $static-font-size, $static-line-height);
 124       }
 125     }
 126   }
 127 }
 128
 129 // -----
 130 // Inputs
 131
 132 .form-control,
 133 .form-group .form-control {
 134   border: 0;
 135   background-image: linear-gradient($brand-primary, $brand-primary), linear-gradient($mdb-input-underline-color, $mdb-input-underline-color);
 136   background-size: 0 2px, 100% 1px;
 137   background-repeat: no-repeat;
 138   background-position: center bottom, center calc(100% - 1px);
 139   background-color: rgba(0, 0, 0, 0);
 140   transition: background 0s ease-out;
 141   float: none;
 142   box-shadow: none;
 143   border-radius: 0;
 144
 145   font-weight: 400;
 146
 147   // Placeholders and and labels-as-placeholders should look the same
 148   @include material-placeholder {
 149     color: $mdb-input-placeholder-color;
 150     font-weight: 400;
 151 }
 152
 153
 154   //&:textarea {    // appears to be an invalid selector
 155   //  height: 40px;
 156   //}
 157
 158   &[readonly],
 159   &[disabled],
 160   fieldset[disabled] & {
 161     background-color: rgba(0, 0, 0, 0);
 162   }
 163
 164   &[disabled],
 165   fieldset[disabled] & {
 166     background-image: none;
 167     border-bottom: 1px dotted $mdb-input-underline-color;
 168   }
 169 }
 170
 171 // -----
 172 // Labels with form-group signalled state
 173 //
 174 // Reference http://www.google.com/design/spec/components/text-fields.html
 175 // MDL implementation: http://www.getmdl.io/components/index.html#textfields-section
 176 //.variations(unquote(" label.control-label"), color, $mdb-input-placeholder-color);  // default label color variations
 177
 178 .form-group {
 179   position: relative;
 180
 181   // -----
 182   // Labels with form-group signalled state
 183   //
 184   // Reference http://www.google.com/design/spec/components/text-fields.html
 185   // MDL implementation: http://www.getmdl.io/components/index.html#textfields-section
 186   &.label-static,
 187   &.label-placeholder,
 188   &.label-floating {
 189     label.control-label {
 190       position: absolute;
 191       pointer-events: none;
 192       transition: 0.3s ease all;
 193     }
 194   }
 195
 196   // hint to browser for optimization
 197   //    TODO: evaluate effectiveness - looking for community feedback
 198   &.label-floating label.control-label {
 199     will-change: left, top, contents;
 200   }
 201
 202   // hide label-placeholders when the field is not empty
 203   &.label-placeholder:not(.is-empty){
 204     label.control-label{
 205       display: none;
 206     }
 207   }
 208
 209   // Help blocks - position: absolute approach - uses no vertical space, text wrapping - not so good.
 210   .help-block {
 211     position: absolute; // do not use position: absolute because width/wrapping isn't automatic and overflows occur
 212     display: none;
 213   }
 214
 215   // form-group is-focused display
 216   &.is-focused {
 217     .form-control {
 218       outline: none;
 219       background-image: linear-gradient($brand-primary, $brand-primary), linear-gradient($mdb-input-underline-color, $mdb-input-underline-color);
 220       background-size: 100% 2px, 100% 1px;
 221       box-shadow: none;
 222       transition-duration: 0.3s;
 223
 224       .material-input:after {
 225         background-color: $brand-primary;
 226       }
 227     }
 228
 229     //.variations(unquote(".is-focused label.control-label"), color, $brand-primary); // focused label color variations
 230     label,
 231     label.control-label {
 232       color: $brand-primary;
 233     }
 234
 235     //.variations(unquote(".is-focused.label-placeholder label.control-label"), color, $mdb-input-placeholder-color);  // default label color variations
 236     &.label-placeholder {
 237       label,
 238       label.control-label {
 239         color: $mdb-input-placeholder-color;
 240       }
 241     }
 242
 243     .help-block {
 244       display: block;
 245     }
 246   }
 247
 248   @include form-group-validation-state(has-warning, $brand-warning);
 249   @include form-group-validation-state(has-error, $brand-danger);
 250   @include form-group-validation-state(has-success, $brand-success);
 251   @include form-group-validation-state(has-info, $brand-info);
 252
 253   textarea {
 254     resize: none;
 255     & ~ .form-control-highlight {
 256       margin-top: -11px;
 257     }
 258   }
 259
 260   select {
 261     appearance: none; // Fix for OS X
 262
 263     & ~ .material-input:after {
 264       display: none;
 265     }
 266   }
 267 }
 268
 269 // default floating size/location without a form-group (will skip form-group styles, and just render default sizing variation)
 270 @include form-group-size-variant(null, $mdb-input-font-size-base, $mdb-label-top-margin-base, $mdb-input-padding-base-vertical, $mdb-input-line-height-base, $mdb-label-as-placeholder-shim-base);
 271
 272 // default floating size/location with a form-group (need margin etc from a default form-group)
 273 @include form-group-size-variant(unquote(".form-group"), $mdb-input-font-size-base, $mdb-label-top-margin-base, $mdb-input-padding-base-vertical, $mdb-input-line-height-base, $mdb-label-as-placeholder-shim-base);
 274
 275 // sm floating size/location
 276 @include form-group-size-variant(unquote(".form-group.form-group-sm"), $mdb-input-font-size-small, $mdb-label-top-margin-small, $mdb-input-padding-small-vertical, $mdb-input-line-height-small, $mdb-label-as-placeholder-shim-small);
 277
 278 // lg floating size/location
 279 @include form-group-size-variant(unquote(".form-group.form-group-lg"), $mdb-input-font-size-large, $mdb-label-top-margin-large, $mdb-input-padding-large-vertical, $mdb-input-line-height-large, $mdb-label-as-placeholder-shim-large);
 280
 281
 282 select.form-control {
 283
 284   border: 0;
 285   box-shadow: none;
 286   border-radius: 0;
 287
 288   .form-group.is-focused & {
 289     box-shadow: none;
 290     border-color: $mdb-input-underline-color;
 291   }
 292
 293   &[multiple] {
 294     &,
 295     .form-group.is-focused & {
 296       height: 85px;
 297     }
 298   }
 299 }
 300
 301 @mixin input-group-button-variation($vertical-padding){
 302   .input-group-btn {
 303     .btn {
 304       margin: 0 0 $vertical-padding 0;
 305     }
 306   }
 307 }
 308
 309 // ----------------
 310 // input group/addon related styles
 311
 312 // default margin - no form-group required
 313 @include input-group-button-variation($mdb-input-padding-base-vertical);
 314
 315 .form-group {
 316   //.form-control {
 317   //  float: none;
 318   //}
 319
 320   // sm margin
 321   &.form-group-sm {
 322     @include input-group-button-variation($mdb-input-padding-small-vertical);
 323   }
 324
 325   // lg margin
 326   &.form-group-lg {
 327     @include input-group-button-variation($mdb-input-padding-large-vertical);
 328   }
 329 }
 330
 331 .input-group {  // may be in or outside of form-group
 332   .input-group-btn {
 333     padding: 0 12px; // match addon spacing
 334   }
 335
 336   .input-group-addon {
 337     border: 0;
 338     background: transparent;
 339     padding: 12px 15px 0px;
 340   }
 341 }
 342
 343 // Input files - hide actual input - requires specific markup in the sample.
 344 .form-group input[type=file] {
 345   opacity: 0;
 346   position: absolute;
 347   top: 0;
 348   right: 0;
 349   bottom: 0;
 350   left: 0;
 351   width: 100%;
 352   height: 100%;
 353   z-index: 100;
 354 }
 355
 356
 357 .form-control-feedback{
 358     opacity: 0;
 359
 360     .has-success &{
 361         color: $green;
 362         opacity: 1;
 363     }
 364
 365     .has-error &{
 366         color: $red;
 367         opacity: 1;
 368     }
 369 }