liquid_feedback_frontend

annotate style/mdl/textfield/_textfield.scss @ 1691:0313770d09ad

find changesets by author, revision, files, or words in the commit message
Fixed behaviour of optional multiselect field
author bsw
date Wed Sep 22 18:21:17 2021 +0200 (2021-09-22)
parents 32cc544d5a5b
children
rev   line source
bsw/jbe@1309 1 /**
bsw/jbe@1309 2 * Copyright 2015 Google Inc. All Rights Reserved.
bsw/jbe@1309 3 *
bsw/jbe@1309 4 * Licensed under the Apache License, Version 2.0 (the "License");
bsw/jbe@1309 5 * you may not use this file except in compliance with the License.
bsw/jbe@1309 6 * You may obtain a copy of the License at
bsw/jbe@1309 7 *
bsw/jbe@1309 8 * http://www.apache.org/licenses/LICENSE-2.0
bsw/jbe@1309 9 *
bsw/jbe@1309 10 * Unless required by applicable law or agreed to in writing, software
bsw/jbe@1309 11 * distributed under the License is distributed on an "AS IS" BASIS,
bsw/jbe@1309 12 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
bsw/jbe@1309 13 * See the License for the specific language governing permissions and
bsw/jbe@1309 14 * limitations under the License.
bsw/jbe@1309 15 */
bsw/jbe@1309 16
bsw/jbe@1309 17 @import "../variables";
bsw/jbe@1309 18 @import "../mixins";
bsw/jbe@1309 19
bsw/jbe@1309 20 // The container for the whole component.
bsw/jbe@1309 21 .mdl-textfield {
bsw/jbe@1309 22 position: relative;
bsw/jbe@1309 23 font-size: $input-text-font-size;
bsw/jbe@1309 24 display: inline-block;
bsw/jbe@1309 25 box-sizing: border-box;
bsw/jbe@1309 26 width: 300px;
bsw/jbe@1309 27 max-width: 100%;
bsw/jbe@1309 28 margin: 0;
bsw/jbe@1309 29 padding: $input-text-vertical-spacing 0;
bsw/jbe@1309 30
bsw/jbe@1309 31 // Align buttons, if used.
bsw/jbe@1309 32 & .mdl-button {
bsw/jbe@1309 33 position: absolute;
bsw/jbe@1309 34 bottom: $input-text-vertical-spacing;
bsw/jbe@1309 35 }
bsw/jbe@1309 36 }
bsw/jbe@1309 37
bsw/jbe@1309 38 // Optional class to align right.
bsw/jbe@1309 39 .mdl-textfield--align-right {
bsw/jbe@1309 40 text-align: right;
bsw/jbe@1309 41 }
bsw/jbe@1309 42
bsw/jbe@1309 43 // Optional class to display at full width.
bsw/jbe@1309 44 .mdl-textfield--full-width {
bsw/jbe@1309 45 width: 100%;
bsw/jbe@1309 46 }
bsw/jbe@1309 47
bsw/jbe@1309 48 // Optional class to make the text field expandable.
bsw/jbe@1309 49 .mdl-textfield--expandable {
bsw/jbe@1309 50 min-width: $input-text-button-size;
bsw/jbe@1309 51 width: auto;
bsw/jbe@1309 52 min-height: $input-text-button-size;
bsw/jbe@1309 53
bsw/jbe@1309 54 // Align icon button
bsw/jbe@1309 55 .mdl-button--icon {
bsw/jbe@1309 56 top: $input-text-expandable-icon-top;
bsw/jbe@1309 57 }
bsw/jbe@1309 58 }
bsw/jbe@1309 59
bsw/jbe@1309 60 // Styling for the input element.
bsw/jbe@1309 61 .mdl-textfield__input {
bsw/jbe@1309 62 border: none;
bsw/jbe@1309 63 border-bottom: 1px solid $input-text-bottom-border-color;
bsw/jbe@1309 64 display: block;
bsw/jbe@1309 65 font-size: $input-text-font-size;
bsw/jbe@1309 66 font-family: $performance_font;
bsw/jbe@1309 67 margin: 0;
bsw/jbe@1309 68 padding: $input-text-padding 0;
bsw/jbe@1309 69 width: $input-text-width;
bsw/jbe@1309 70 background: none;
bsw/jbe@1309 71 text-align: left;
bsw/jbe@1309 72 color: inherit;
bsw/jbe@1309 73
bsw/jbe@1309 74 &[type="number"] {
bsw/jbe@1309 75 -moz-appearance: textfield;
bsw/jbe@1309 76 }
bsw/jbe@1309 77
bsw/jbe@1309 78 &[type="number"]::-webkit-inner-spin-button,
bsw/jbe@1309 79 &[type="number"]::-webkit-outer-spin-button {
bsw/jbe@1309 80 -webkit-appearance: none;
bsw/jbe@1309 81 margin: 0;
bsw/jbe@1309 82 }
bsw/jbe@1309 83
bsw/jbe@1309 84 .mdl-textfield.is-focused & {
bsw/jbe@1309 85 outline: none;
bsw/jbe@1309 86 }
bsw/jbe@1309 87
bsw/jbe@1309 88 .mdl-textfield.is-invalid & {
bsw/jbe@1309 89 border-color: $input-text-error-color;
bsw/jbe@1309 90 box-shadow: none;
bsw/jbe@1309 91 }
bsw/jbe@1309 92
bsw/jbe@1309 93 fieldset[disabled] .mdl-textfield &,
bsw/jbe@1309 94 .mdl-textfield.is-disabled & {
bsw/jbe@1309 95 background-color: transparent;
bsw/jbe@1309 96 border-bottom: 1px dotted $input-text-disabled-color;
bsw/jbe@1309 97 color: $input-text-disabled-text-color;
bsw/jbe@1309 98 }
bsw/jbe@1309 99 }
bsw/jbe@1309 100
bsw/jbe@1309 101 .mdl-textfield textarea.mdl-textfield__input {
bsw/jbe@1309 102 display: block;
bsw/jbe@1309 103 }
bsw/jbe@1309 104
bsw/jbe@1309 105 // Styling for the label / floating label.
bsw/jbe@1309 106 .mdl-textfield__label {
bsw/jbe@1309 107 bottom: 0;
bsw/jbe@1309 108 color: $input-text-label-color;
bsw/jbe@1309 109 font-size: $input-text-font-size;
bsw/jbe@1309 110 left: 0;
bsw/jbe@1309 111 right: 0;
bsw/jbe@1309 112 pointer-events: none;
bsw/jbe@1309 113 position: absolute;
bsw/jbe@1309 114 display: block;
bsw/jbe@1309 115 top: ($input-text-padding + $input-text-vertical-spacing);
bsw/jbe@1309 116 width: 100%;
bsw/jbe@1309 117 overflow: hidden;
bsw/jbe@1309 118 white-space: nowrap;
bsw/jbe@1309 119 text-align: left;
bsw/jbe@1309 120
bsw/jbe@1309 121 .mdl-textfield.is-dirty &,
bsw/jbe@1309 122 .mdl-textfield.has-placeholder & {
bsw/jbe@1309 123 visibility: hidden;
bsw/jbe@1309 124 }
bsw/jbe@1309 125
bsw/jbe@1309 126 // Floating Label
bsw/jbe@1309 127 .mdl-textfield--floating-label & {
bsw/jbe@1309 128 @include material-animation-default();
bsw/jbe@1309 129 }
bsw/jbe@1309 130
bsw/jbe@1309 131 .mdl-textfield--floating-label.has-placeholder & {
bsw/jbe@1309 132 transition: none;
bsw/jbe@1309 133 }
bsw/jbe@1309 134
bsw/jbe@1309 135 fieldset[disabled] .mdl-textfield &,
bsw/jbe@1309 136 .mdl-textfield.is-disabled.is-disabled & {
bsw/jbe@1309 137 color: $input-text-disabled-text-color;
bsw/jbe@1309 138 }
bsw/jbe@1309 139
bsw/jbe@1309 140 .mdl-textfield--floating-label.is-focused &,
bsw/jbe@1309 141 .mdl-textfield--floating-label.is-dirty &,
bsw/jbe@1309 142 .mdl-textfield--floating-label.has-placeholder & {
bsw/jbe@1309 143 color: $input-text-highlight-color;
bsw/jbe@1309 144 font-size : $input-text-floating-label-fontsize;
bsw/jbe@1309 145 top: $input-text-vertical-spacing - ($input-text-floating-label-fontsize + $input-text-padding);
bsw/jbe@1309 146 visibility: visible;
bsw/jbe@1309 147 }
bsw/jbe@1309 148
bsw/jbe@1309 149 .mdl-textfield--floating-label.is-focused .mdl-textfield__expandable-holder &,
bsw/jbe@1309 150 .mdl-textfield--floating-label.is-dirty .mdl-textfield__expandable-holder &,
bsw/jbe@1309 151 .mdl-textfield--floating-label.has-placeholder .mdl-textfield__expandable-holder & {
bsw/jbe@1309 152 top: -($input-text-floating-label-fontsize + $input-text-padding);
bsw/jbe@1309 153 }
bsw/jbe@1309 154
bsw/jbe@1309 155 .mdl-textfield--floating-label.is-invalid & {
bsw/jbe@1309 156 color: $input-text-error-color;
bsw/jbe@1309 157 font-size: $input-text-floating-label-fontsize;
bsw/jbe@1309 158 }
bsw/jbe@1309 159
bsw/jbe@1309 160 // The after label is the colored underline for the TextField.
bsw/jbe@1309 161 &:after {
bsw/jbe@1309 162 background-color: $input-text-highlight-color;
bsw/jbe@1309 163 bottom: $input-text-vertical-spacing;
bsw/jbe@1309 164 content: '';
bsw/jbe@1309 165 height: 2px;
bsw/jbe@1309 166 left: 45%;
bsw/jbe@1309 167 position: absolute;
bsw/jbe@1309 168 @include material-animation-default();
bsw/jbe@1309 169 visibility: hidden;
bsw/jbe@1309 170 width: 10px;
bsw/jbe@1309 171 }
bsw/jbe@1309 172
bsw/jbe@1309 173 .mdl-textfield.is-focused &:after {
bsw/jbe@1309 174 left: 0;
bsw/jbe@1309 175 visibility: visible;
bsw/jbe@1309 176 width: 100%;
bsw/jbe@1309 177 }
bsw/jbe@1309 178
bsw/jbe@1309 179 .mdl-textfield.is-invalid &:after {
bsw/jbe@1309 180 background-color: $input-text-error-color;
bsw/jbe@1309 181 }
bsw/jbe@1309 182 }
bsw/jbe@1309 183
bsw/jbe@1309 184 // TextField Error.
bsw/jbe@1309 185 .mdl-textfield__error {
bsw/jbe@1309 186 color: $input-text-error-color;
bsw/jbe@1309 187 position: absolute;
bsw/jbe@1309 188 font-size: $input-text-floating-label-fontsize;
bsw/jbe@1309 189 margin-top: 3px;
bsw/jbe@1309 190 visibility: hidden;
bsw/jbe@1309 191 display: block;
bsw/jbe@1309 192
bsw/jbe@1309 193 .mdl-textfield.is-invalid & {
bsw/jbe@1309 194 visibility: visible;
bsw/jbe@1309 195 }
bsw/jbe@1309 196 }
bsw/jbe@1309 197
bsw/jbe@1309 198 // Expandable Holder.
bsw/jbe@1309 199 .mdl-textfield__expandable-holder {
bsw/jbe@1309 200 display: inline-block;
bsw/jbe@1309 201 position: relative;
bsw/jbe@1309 202 margin-left: $input-text-button-size;
bsw/jbe@1309 203
bsw/jbe@1309 204 @include material-animation-default();
bsw/jbe@1309 205 display: inline-block;
bsw/jbe@1309 206
bsw/jbe@1309 207 // Safari (possibly others) need to be convinced that this field is actually
bsw/jbe@1309 208 // visible, otherwise it cannot be tabbed to nor focused via a <label>.
bsw/jbe@1309 209 // TODO: In some cases (Retina displays), this is big enough to render the
bsw/jbe@1309 210 // inner element :(
bsw/jbe@1309 211 max-width: 0.1px;
bsw/jbe@1309 212
bsw/jbe@1309 213 .mdl-textfield.is-focused &, .mdl-textfield.is-dirty & {
bsw/jbe@1309 214 // This is an unfortunate hack. Animating between widths in percent (%)
bsw/jbe@1309 215 // in many browsers (Chrome, Firefox) only animates the inner visual style
bsw/jbe@1309 216 // of the input - the outer bounding box still 'jumps'.
bsw/jbe@1309 217 // Thus assume a sensible maximum, and animate to/from that value.
bsw/jbe@1309 218 max-width: 600px;
bsw/jbe@1309 219 }
bsw/jbe@1309 220 .mdl-textfield__label:after {
bsw/jbe@1309 221 bottom: 0;
bsw/jbe@1309 222 }
bsw/jbe@1309 223 }

Impressum / About Us