Initial
This commit is contained in:
Sebastian Seedorf
290
public/stylesheets/mdl-selectfield.css
Normal file
290
public/stylesheets/mdl-selectfield.css
Normal file
@@ -0,0 +1,290 @@
|
||||
/**
|
||||
* Copyright 2015 Google Inc. All Rights Reserved.
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
/*------------------------------------* $CONTENTS
|
||||
\*------------------------------------*/
|
||||
/**
|
||||
* STYLE GUIDE VARIABLES------------------Declarations of Sass variables
|
||||
* -----Typography
|
||||
* -----Colors
|
||||
* -----Textfield
|
||||
* -----Switch
|
||||
* -----Spinner
|
||||
* -----Radio
|
||||
* -----Menu
|
||||
* -----List
|
||||
* -----Layout
|
||||
* -----Icon toggles
|
||||
* -----Footer
|
||||
* -----Column
|
||||
* -----Checkbox
|
||||
* -----Card
|
||||
* -----Button
|
||||
* -----Animation
|
||||
* -----Progress
|
||||
* -----Badge
|
||||
* -----Shadows
|
||||
* -----Grid
|
||||
* -----Data table
|
||||
* -----Dialog
|
||||
* -----Snackbar
|
||||
*
|
||||
* Even though all variables have the `!default` directive, most of them
|
||||
* should not be changed as they are dependent one another. This can cause
|
||||
* visual distortions (like alignment issues) that are hard to track down
|
||||
* and fix.
|
||||
*/
|
||||
/* ========== TYPOGRAPHY ========== */
|
||||
/* We're splitting fonts into "preferred" and "performance" in order to optimize
|
||||
page loading. For important text, such as the body, we want it to load
|
||||
immediately and not wait for the web font load, whereas for other sections,
|
||||
such as headers and titles, we're OK with things taking a bit longer to load.
|
||||
We do have some optional classes and parameters in the mixins, in case you
|
||||
definitely want to make sure you're using the preferred font and don't mind
|
||||
the performance hit.
|
||||
We should be able to improve on this once CSS Font Loading L3 becomes more
|
||||
widely available.
|
||||
*/
|
||||
/* ========== COLORS ========== */
|
||||
/**
|
||||
*
|
||||
* Material design color palettes.
|
||||
* @see http://www.google.com/design/spec/style/color.html
|
||||
*
|
||||
**/
|
||||
/**
|
||||
* Copyright 2015 Google Inc. All Rights Reserved.
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
/* ========== Color Palettes ========== */
|
||||
/* colors.scss */
|
||||
/**
|
||||
* Copyright 2015 Google Inc. All Rights Reserved.
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
/* ========== IMAGES ========== */
|
||||
/* ========== Color & Themes ========== */
|
||||
/* ========== Typography ========== */
|
||||
/* ========== Components ========== */
|
||||
/* ========== Standard Buttons ========== */
|
||||
/* ========== Icon Toggles ========== */
|
||||
/* ========== Radio Buttons ========== */
|
||||
/* ========== Ripple effect ========== */
|
||||
/* ========== Layout ========== */
|
||||
/* ========== Content Tabs ========== */
|
||||
/* ========== Checkboxes ========== */
|
||||
/* ========== Switches ========== */
|
||||
/* ========== Spinner ========== */
|
||||
/* ========== Text fields ========== */
|
||||
/* ========== Card ========== */
|
||||
/* ========== Sliders ========== */
|
||||
/* ========== Progress ========== */
|
||||
/* ========== List ========== */
|
||||
/* ========== Item ========== */
|
||||
/* ========== Dropdown menu ========== */
|
||||
/* ========== Tooltips ========== */
|
||||
/* ========== Footer ========== */
|
||||
/* TEXTFIELD */
|
||||
/* SWITCH */
|
||||
/* SPINNER */
|
||||
/* RADIO */
|
||||
/* MENU */
|
||||
/* LIST */
|
||||
/* LAYOUT */
|
||||
/* ICON TOGGLE */
|
||||
/* FOOTER */
|
||||
/*mega-footer*/
|
||||
/*mini-footer*/
|
||||
/* CHECKBOX */
|
||||
/* CARD */
|
||||
/* Card dimensions */
|
||||
/* Cover image */
|
||||
/* BUTTON */
|
||||
/**
|
||||
*
|
||||
* Dimensions
|
||||
*
|
||||
*/
|
||||
/* ANIMATION */
|
||||
/* PROGRESS */
|
||||
/* BADGE */
|
||||
/* SHADOWS */
|
||||
/* GRID */
|
||||
/* DATA TABLE */
|
||||
/* DIALOG */
|
||||
/* SNACKBAR */
|
||||
/* TOOLTIP */
|
||||
/**
|
||||
* Copyright 2015 Google Inc. All Rights Reserved.
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
/* Typography */
|
||||
/* Shadows */
|
||||
/* Animations */
|
||||
/* Dialog */
|
||||
.mdl-selectfield {
|
||||
position: relative;
|
||||
font-size: 16px;
|
||||
display: inline-block;
|
||||
box-sizing: border-box;
|
||||
width: 300px;
|
||||
max-width: 100%;
|
||||
margin: 0;
|
||||
padding: 20px 0; }
|
||||
|
||||
.mdl-selectfield--align-right {
|
||||
text-align: right; }
|
||||
|
||||
.mdl-selectfield--full-width {
|
||||
width: 100%; }
|
||||
|
||||
.mdl-selectfield__select {
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: 4px 0;
|
||||
margin: 0;
|
||||
color: inherit;
|
||||
background: transparent;
|
||||
font-size: 16px;
|
||||
text-align: left;
|
||||
border: none;
|
||||
border-bottom: 1px solid rgba(0,0,0, 0.12);
|
||||
border-radius: 0;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
-ms-appearance: none;
|
||||
appearance: none; }
|
||||
.mdl-selectfield__select::-ms-expand {
|
||||
display: none; }
|
||||
.mdl-selectfield.is-focused .mdl-selectfield__select {
|
||||
outline: none; }
|
||||
.mdl-selectfield.is-invalid .mdl-selectfield__select {
|
||||
border-color: rgb(222, 50, 38);
|
||||
box-shadow: none; }
|
||||
fieldset[disabled] .mdl-selectfield .mdl-selectfield__select, .mdl-selectfield.is-disabled .mdl-selectfield__select {
|
||||
background-color: transparent;
|
||||
border-bottom: 1px dotted rgba(0,0,0, 0.12);
|
||||
color: rgba(0,0,0, 0.26); }
|
||||
|
||||
.mdl-selectfield__label {
|
||||
bottom: 0;
|
||||
color: rgba(0,0,0, 0.26);
|
||||
font-size: 16px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
display: block;
|
||||
top: 24px;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-align: left; }
|
||||
.mdl-selectfield.is-dirty .mdl-selectfield__label {
|
||||
visibility: hidden; }
|
||||
.mdl-selectfield--floating-label .mdl-selectfield__label {
|
||||
transition-duration: 0.2s;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
|
||||
fieldset[disabled] .mdl-selectfield .mdl-selectfield__label,
|
||||
.mdl-selectfield.is-disabled.is-disabled .mdl-selectfield__label {
|
||||
color: rgba(0,0,0, 0.26); }
|
||||
.mdl-selectfield--floating-label.is-focused .mdl-selectfield__label,
|
||||
.mdl-selectfield--floating-label.is-dirty .mdl-selectfield__label {
|
||||
color: rgb(63,81,181);
|
||||
font-size: 12px;
|
||||
top: 4px;
|
||||
visibility: visible; }
|
||||
.mdl-selectfield--floating-label.is-invalid .mdl-selectfield__label {
|
||||
color: rgb(222, 50, 38);
|
||||
font-size: 12px; }
|
||||
.mdl-selectfield__label:after {
|
||||
background-color: rgb(63,81,181);
|
||||
bottom: 20px;
|
||||
content: '';
|
||||
height: 2px;
|
||||
left: 45%;
|
||||
position: absolute;
|
||||
transition-duration: 0.2s;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
visibility: hidden;
|
||||
width: 10px; }
|
||||
.mdl-selectfield.is-focused .mdl-selectfield__label:after {
|
||||
left: 0;
|
||||
visibility: visible;
|
||||
width: 100%; }
|
||||
.mdl-selectfield.is-invalid .mdl-selectfield__label:after {
|
||||
background-color: rgb(222, 50, 38); }
|
||||
|
||||
.mdl-selectfield__error {
|
||||
color: rgb(222, 50, 38);
|
||||
position: absolute;
|
||||
font-size: 12px;
|
||||
margin-top: 3px;
|
||||
visibility: hidden;
|
||||
display: block; }
|
||||
.mdl-selectfield.is-invalid .mdl-selectfield__error {
|
||||
visibility: visible; }
|
||||
|
||||
.mdl-selectfield__icon {
|
||||
bottom: 20px;
|
||||
cursor: pointer;
|
||||
color: rgba(0,0,0, 0.26);
|
||||
padding: 4px 0;
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
right: 0;
|
||||
pointer-events: none; }
|
||||
.mdl-selectfield__icon > i {
|
||||
outline: 0; }
|
||||
.mdl-selectfield.is-dirty .mdl-selectfield__icon {
|
||||
color: inherit; }
|
||||
fieldset[disabled] .mdl-selectfield .mdl-selectfield__icon,
|
||||
.mdl-selectfield.is-disabled.is-disabled .mdl-selectfield__icon {
|
||||
color: rgba(0,0,0, 0.26); }
|
||||
.mdl-selectfield--floating-label.is-invalid .mdl-selectfield__icon {
|
||||
color: rgb(222, 50, 38); }
|
||||
Reference in New Issue
Block a user