291 lines
8.7 KiB
CSS
291 lines
8.7 KiB
CSS
/**
|
|
* 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); }
|