1.1 --- /dev/null	Thu Jan 01 00:00:00 1970 +0000
     1.2 +++ b/style/mdl/textfield/_textfield.scss	Sun Jul 15 14:07:29 2018 +0200
     1.3 @@ -0,0 +1,223 @@
     1.4 +/**
     1.5 + * Copyright 2015 Google Inc. All Rights Reserved.
     1.6 + *
     1.7 + * Licensed under the Apache License, Version 2.0 (the "License");
     1.8 + * you may not use this file except in compliance with the License.
     1.9 + * You may obtain a copy of the License at
    1.10 + *
    1.11 + *      http://www.apache.org/licenses/LICENSE-2.0
    1.12 + *
    1.13 + * Unless required by applicable law or agreed to in writing, software
    1.14 + * distributed under the License is distributed on an "AS IS" BASIS,
    1.15 + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
    1.16 + * See the License for the specific language governing permissions and
    1.17 + * limitations under the License.
    1.18 + */
    1.19 +
    1.20 +@import "../variables";
    1.21 +@import "../mixins";
    1.22 +
    1.23 +// The container for the whole component.
    1.24 +.mdl-textfield {
    1.25 +  position: relative;
    1.26 +  font-size: $input-text-font-size;
    1.27 +  display: inline-block;
    1.28 +  box-sizing: border-box;
    1.29 +  width: 300px;
    1.30 +  max-width: 100%;
    1.31 +  margin: 0;
    1.32 +  padding: $input-text-vertical-spacing 0;
    1.33 +
    1.34 +  // Align buttons, if used.
    1.35 +  & .mdl-button {
    1.36 +    position: absolute;
    1.37 +    bottom: $input-text-vertical-spacing;
    1.38 +  }
    1.39 +}
    1.40 +
    1.41 +// Optional class to align right.
    1.42 +.mdl-textfield--align-right {
    1.43 +  text-align: right;
    1.44 +}
    1.45 +
    1.46 +// Optional class to display at full width.
    1.47 +.mdl-textfield--full-width {
    1.48 +  width: 100%;
    1.49 +}
    1.50 +
    1.51 +// Optional class to make the text field expandable.
    1.52 +.mdl-textfield--expandable {
    1.53 +  min-width: $input-text-button-size;
    1.54 +  width: auto;
    1.55 +  min-height: $input-text-button-size;
    1.56 +  
    1.57 +  // Align icon button
    1.58 +  .mdl-button--icon {
    1.59 +    top: $input-text-expandable-icon-top;
    1.60 +  }
    1.61 +}
    1.62 +
    1.63 +// Styling for the input element.
    1.64 +.mdl-textfield__input {
    1.65 +  border: none;
    1.66 +  border-bottom: 1px solid $input-text-bottom-border-color;
    1.67 +  display: block;
    1.68 +  font-size: $input-text-font-size;
    1.69 +  font-family: $performance_font;
    1.70 +  margin: 0;
    1.71 +  padding: $input-text-padding 0;
    1.72 +  width: $input-text-width;
    1.73 +  background: none;
    1.74 +  text-align: left;
    1.75 +  color: inherit;
    1.76 +
    1.77 +  &[type="number"] {
    1.78 +    -moz-appearance: textfield;
    1.79 +  }
    1.80 +
    1.81 +  &[type="number"]::-webkit-inner-spin-button,
    1.82 +  &[type="number"]::-webkit-outer-spin-button {
    1.83 +    -webkit-appearance: none;
    1.84 +    margin: 0;
    1.85 +  }
    1.86 +
    1.87 +  .mdl-textfield.is-focused & {
    1.88 +    outline: none;
    1.89 +  }
    1.90 +
    1.91 +  .mdl-textfield.is-invalid & {
    1.92 +    border-color: $input-text-error-color;
    1.93 +    box-shadow: none;
    1.94 +  }
    1.95 +
    1.96 +  fieldset[disabled] .mdl-textfield &,
    1.97 +  .mdl-textfield.is-disabled & {
    1.98 +    background-color: transparent;
    1.99 +    border-bottom: 1px dotted $input-text-disabled-color;
   1.100 +    color: $input-text-disabled-text-color;
   1.101 +  }
   1.102 +}
   1.103 +
   1.104 +.mdl-textfield textarea.mdl-textfield__input {
   1.105 +  display: block;
   1.106 +}
   1.107 +
   1.108 +// Styling for the label / floating label.
   1.109 +.mdl-textfield__label {
   1.110 +  bottom: 0;
   1.111 +  color: $input-text-label-color;
   1.112 +  font-size: $input-text-font-size;
   1.113 +  left: 0;
   1.114 +  right: 0;
   1.115 +  pointer-events: none;
   1.116 +  position: absolute;
   1.117 +  display: block;
   1.118 +  top: ($input-text-padding + $input-text-vertical-spacing);
   1.119 +  width: 100%;
   1.120 +  overflow: hidden;
   1.121 +  white-space: nowrap;
   1.122 +  text-align: left;
   1.123 +
   1.124 +  .mdl-textfield.is-dirty &,
   1.125 +  .mdl-textfield.has-placeholder & {
   1.126 +    visibility: hidden;
   1.127 +  }
   1.128 +
   1.129 +  // Floating Label
   1.130 +  .mdl-textfield--floating-label & {
   1.131 +    @include material-animation-default();
   1.132 +  }
   1.133 +
   1.134 +  .mdl-textfield--floating-label.has-placeholder & {
   1.135 +    transition: none;
   1.136 +  }
   1.137 +
   1.138 +  fieldset[disabled] .mdl-textfield &,
   1.139 +  .mdl-textfield.is-disabled.is-disabled & {
   1.140 +    color: $input-text-disabled-text-color;
   1.141 +  }
   1.142 +
   1.143 +  .mdl-textfield--floating-label.is-focused &,
   1.144 +  .mdl-textfield--floating-label.is-dirty &,
   1.145 +  .mdl-textfield--floating-label.has-placeholder & {
   1.146 +    color: $input-text-highlight-color;
   1.147 +    font-size : $input-text-floating-label-fontsize;
   1.148 +    top: $input-text-vertical-spacing - ($input-text-floating-label-fontsize + $input-text-padding);
   1.149 +    visibility: visible;
   1.150 +  }
   1.151 +
   1.152 +  .mdl-textfield--floating-label.is-focused .mdl-textfield__expandable-holder &,
   1.153 +  .mdl-textfield--floating-label.is-dirty .mdl-textfield__expandable-holder &,
   1.154 +  .mdl-textfield--floating-label.has-placeholder .mdl-textfield__expandable-holder & {
   1.155 +    top: -($input-text-floating-label-fontsize + $input-text-padding);
   1.156 +  }
   1.157 +
   1.158 +  .mdl-textfield--floating-label.is-invalid & {
   1.159 +    color: $input-text-error-color;
   1.160 +    font-size: $input-text-floating-label-fontsize;
   1.161 +  }
   1.162 +
   1.163 +  // The after label is the colored underline for the TextField.
   1.164 +  &:after {
   1.165 +    background-color: $input-text-highlight-color;
   1.166 +    bottom: $input-text-vertical-spacing;
   1.167 +    content: '';
   1.168 +    height: 2px;
   1.169 +    left: 45%;
   1.170 +    position: absolute;
   1.171 +    @include material-animation-default();
   1.172 +    visibility: hidden;
   1.173 +    width: 10px;
   1.174 +  }
   1.175 +
   1.176 +  .mdl-textfield.is-focused &:after {
   1.177 +    left: 0;
   1.178 +    visibility: visible;
   1.179 +    width: 100%;
   1.180 +  }
   1.181 +
   1.182 +  .mdl-textfield.is-invalid &:after {
   1.183 +    background-color: $input-text-error-color;
   1.184 +  }
   1.185 +}
   1.186 +
   1.187 +// TextField Error.
   1.188 +.mdl-textfield__error {
   1.189 +  color: $input-text-error-color;
   1.190 +  position: absolute;
   1.191 +  font-size: $input-text-floating-label-fontsize;
   1.192 +  margin-top: 3px;
   1.193 +  visibility: hidden;
   1.194 +  display: block;
   1.195 +
   1.196 +  .mdl-textfield.is-invalid & {
   1.197 +    visibility: visible;
   1.198 +  }
   1.199 +}
   1.200 +
   1.201 +// Expandable Holder.
   1.202 +.mdl-textfield__expandable-holder {
   1.203 +  display: inline-block;
   1.204 +  position: relative;
   1.205 +  margin-left: $input-text-button-size;
   1.206 +
   1.207 +  @include material-animation-default();
   1.208 +  display: inline-block;
   1.209 +
   1.210 +  // Safari (possibly others) need to be convinced that this field is actually
   1.211 +  // visible, otherwise it cannot be tabbed to nor focused via a <label>.
   1.212 +  // TODO: In some cases (Retina displays), this is big enough to render the
   1.213 +  // inner element :(
   1.214 +  max-width: 0.1px;
   1.215 +
   1.216 +  .mdl-textfield.is-focused &, .mdl-textfield.is-dirty & {
   1.217 +    // This is an unfortunate hack. Animating between widths in percent (%)
   1.218 +    // in many browsers (Chrome, Firefox) only animates the inner visual style
   1.219 +    // of the input - the outer bounding box still 'jumps'.
   1.220 +    // Thus assume a sensible maximum, and animate to/from that value.
   1.221 +    max-width: 600px;
   1.222 +  }
   1.223 +  .mdl-textfield__label:after {
   1.224 +    bottom: 0;
   1.225 +  }
   1.226 +}