Update Materialize

This commit is contained in:
Sebastien 2018-09-05 09:17:08 +03:00
parent 026b1afdce
commit 5106dd5098
4 changed files with 967 additions and 834 deletions

View File

@ -1,8 +1,8 @@
/*! /*!
* Materialize v1.0.0-beta (http://materializecss.com) * Materialize v1.0.0-rc.2 (http://materializecss.com)
* Copyright 2014-2017 Materialize * Copyright 2014-2017 Materialize
* MIT License (https://raw.githubusercontent.com/Dogfalo/materialize/master/LICENSE) * MIT License (https://raw.githubusercontent.com/Dogfalo/materialize/master/LICENSE)
*/ */
.materialize-red { .materialize-red {
background-color: #e51c23 !important; background-color: #e51c23 !important;
} }
@ -4982,7 +4982,6 @@ small {
height: auto; height: auto;
min-height: 48px; min-height: 48px;
line-height: 1.5em; line-height: 1.5em;
word-break: break-all;
background-color: #323232; background-color: #323232;
padding: 10px 25px; padding: 10px 25px;
font-size: 1.1rem; font-size: 1.1rem;
@ -5190,8 +5189,8 @@ small {
.btn-small:disabled, .btn-small:disabled,
.btn-flat:disabled, .btn-flat:disabled,
.btn[disabled], .btn[disabled],
[disabled].btn-large, .btn-large[disabled],
[disabled].btn-small, .btn-small[disabled],
.btn-floating[disabled], .btn-floating[disabled],
.btn-large[disabled], .btn-large[disabled],
.btn-small[disabled], .btn-small[disabled],
@ -5217,8 +5216,8 @@ small {
.btn-small:disabled:hover, .btn-small:disabled:hover,
.btn-flat:disabled:hover, .btn-flat:disabled:hover,
.btn[disabled]:hover, .btn[disabled]:hover,
[disabled].btn-large:hover, .btn-large[disabled]:hover,
[disabled].btn-small:hover, .btn-small[disabled]:hover,
.btn-floating[disabled]:hover, .btn-floating[disabled]:hover,
.btn-large[disabled]:hover, .btn-large[disabled]:hover,
.btn-small[disabled]:hover, .btn-small[disabled]:hover,
@ -5512,7 +5511,7 @@ button.btn-floating {
background-color: rgba(0, 0, 0, 0.1); background-color: rgba(0, 0, 0, 0.1);
} }
.btn-flat.disabled { .btn-flat.disabled, .btn-flat.btn-flat[disabled] {
background-color: transparent !important; background-color: transparent !important;
color: #b3b2b2 !important; color: #b3b2b2 !important;
cursor: default; cursor: default;
@ -5578,7 +5577,6 @@ button.btn-floating {
.dropdown-content li:focus { .dropdown-content li:focus {
outline: none; outline: none;
background-color: #dadada;
} }
.dropdown-content li.divider { .dropdown-content li.divider {
@ -5608,6 +5606,10 @@ button.btn-floating {
width: 24px; width: 24px;
} }
body.keyboard-focused .dropdown-content li:focus {
background-color: #dadada;
}
.input-field.col .dropdown-content [type="checkbox"] + label { .input-field.col .dropdown-content [type="checkbox"] + label {
top: 1px; top: 1px;
left: 0; left: 0;
@ -5616,13 +5618,17 @@ button.btn-floating {
transform: none; transform: none;
} }
/*! .dropdown-trigger {
* Waves v0.6.0 cursor: pointer;
* http://fian.my.id/Waves }
*
* Copyright 2014 Alfiana E. Sibuea and other contributors /*!
* Released under the MIT license * Waves v0.6.0
* https://github.com/fians/Waves/blob/master/LICENSE * http://fian.my.id/Waves
*
* Copyright 2014 Alfiana E. Sibuea and other contributors
* Released under the MIT license
* https://github.com/fians/Waves/blob/master/LICENSE
*/ */
.waves-effect { .waves-effect {
position: relative; position: relative;
@ -5757,6 +5763,10 @@ button.btn-floating {
will-change: top, opacity; will-change: top, opacity;
} }
.modal:focus {
outline: none;
}
@media only screen and (max-width: 992px) { @media only screen and (max-width: 992px) {
.modal { .modal {
width: 80%; width: 80%;
@ -5851,6 +5861,10 @@ button.btn-floating {
border-bottom: 1px solid #ddd; border-bottom: 1px solid #ddd;
} }
.collapsible-header:focus {
outline: 0;
}
.collapsible-header i { .collapsible-header i {
width: 2rem; width: 2rem;
font-size: 1.6rem; font-size: 1.6rem;
@ -5859,6 +5873,10 @@ button.btn-floating {
margin-right: 1rem; margin-right: 1rem;
} }
.keyboard-focused .collapsible-header:focus {
background-color: #eee;
}
.collapsible-body { .collapsible-body {
display: none; display: none;
border-bottom: 1px solid #ddd; border-bottom: 1px solid #ddd;
@ -6095,6 +6113,9 @@ label {
:-ms-input-placeholder { :-ms-input-placeholder {
color: #d1d1d1; color: #d1d1d1;
} }
::-ms-input-placeholder {
color: #d1d1d1;
}
::placeholder { ::placeholder {
color: #d1d1d1; color: #d1d1d1;
} }
@ -6275,28 +6296,28 @@ textarea.materialize-textarea.validate + label {
/* Validation Sass Placeholders */ /* Validation Sass Placeholders */
input.valid:not([type]), input.valid:not([type]):focus, input.valid:not([type]), input.valid:not([type]):focus,
input[type=text].valid:not(.browser-default), input.valid[type=text]:not(.browser-default),
input[type=text].valid:not(.browser-default):focus, input.valid[type=text]:not(.browser-default):focus,
input[type=password].valid:not(.browser-default), input.valid[type=password]:not(.browser-default),
input[type=password].valid:not(.browser-default):focus, input.valid[type=password]:not(.browser-default):focus,
input[type=email].valid:not(.browser-default), input.valid[type=email]:not(.browser-default),
input[type=email].valid:not(.browser-default):focus, input.valid[type=email]:not(.browser-default):focus,
input[type=url].valid:not(.browser-default), input.valid[type=url]:not(.browser-default),
input[type=url].valid:not(.browser-default):focus, input.valid[type=url]:not(.browser-default):focus,
input[type=time].valid:not(.browser-default), input.valid[type=time]:not(.browser-default),
input[type=time].valid:not(.browser-default):focus, input.valid[type=time]:not(.browser-default):focus,
input[type=date].valid:not(.browser-default), input.valid[type=date]:not(.browser-default),
input[type=date].valid:not(.browser-default):focus, input.valid[type=date]:not(.browser-default):focus,
input[type=datetime].valid:not(.browser-default), input.valid[type=datetime]:not(.browser-default),
input[type=datetime].valid:not(.browser-default):focus, input.valid[type=datetime]:not(.browser-default):focus,
input[type=datetime-local].valid:not(.browser-default), input.valid[type=datetime-local]:not(.browser-default),
input[type=datetime-local].valid:not(.browser-default):focus, input.valid[type=datetime-local]:not(.browser-default):focus,
input[type=tel].valid:not(.browser-default), input.valid[type=tel]:not(.browser-default),
input[type=tel].valid:not(.browser-default):focus, input.valid[type=tel]:not(.browser-default):focus,
input[type=number].valid:not(.browser-default), input.valid[type=number]:not(.browser-default),
input[type=number].valid:not(.browser-default):focus, input.valid[type=number]:not(.browser-default):focus,
input[type=search].valid:not(.browser-default), input.valid[type=search]:not(.browser-default),
input[type=search].valid:not(.browser-default):focus, input.valid[type=search]:not(.browser-default):focus,
textarea.materialize-textarea.valid, textarea.materialize-textarea.valid,
textarea.materialize-textarea.valid:focus, .select-wrapper.valid > input.select-dropdown { textarea.materialize-textarea.valid:focus, .select-wrapper.valid > input.select-dropdown {
border-bottom: 1px solid #4CAF50; border-bottom: 1px solid #4CAF50;
@ -6305,28 +6326,28 @@ textarea.materialize-textarea.valid:focus, .select-wrapper.valid > input.select-
} }
input.invalid:not([type]), input.invalid:not([type]):focus, input.invalid:not([type]), input.invalid:not([type]):focus,
input[type=text].invalid:not(.browser-default), input.invalid[type=text]:not(.browser-default),
input[type=text].invalid:not(.browser-default):focus, input.invalid[type=text]:not(.browser-default):focus,
input[type=password].invalid:not(.browser-default), input.invalid[type=password]:not(.browser-default),
input[type=password].invalid:not(.browser-default):focus, input.invalid[type=password]:not(.browser-default):focus,
input[type=email].invalid:not(.browser-default), input.invalid[type=email]:not(.browser-default),
input[type=email].invalid:not(.browser-default):focus, input.invalid[type=email]:not(.browser-default):focus,
input[type=url].invalid:not(.browser-default), input.invalid[type=url]:not(.browser-default),
input[type=url].invalid:not(.browser-default):focus, input.invalid[type=url]:not(.browser-default):focus,
input[type=time].invalid:not(.browser-default), input.invalid[type=time]:not(.browser-default),
input[type=time].invalid:not(.browser-default):focus, input.invalid[type=time]:not(.browser-default):focus,
input[type=date].invalid:not(.browser-default), input.invalid[type=date]:not(.browser-default),
input[type=date].invalid:not(.browser-default):focus, input.invalid[type=date]:not(.browser-default):focus,
input[type=datetime].invalid:not(.browser-default), input.invalid[type=datetime]:not(.browser-default),
input[type=datetime].invalid:not(.browser-default):focus, input.invalid[type=datetime]:not(.browser-default):focus,
input[type=datetime-local].invalid:not(.browser-default), input.invalid[type=datetime-local]:not(.browser-default),
input[type=datetime-local].invalid:not(.browser-default):focus, input.invalid[type=datetime-local]:not(.browser-default):focus,
input[type=tel].invalid:not(.browser-default), input.invalid[type=tel]:not(.browser-default),
input[type=tel].invalid:not(.browser-default):focus, input.invalid[type=tel]:not(.browser-default):focus,
input[type=number].invalid:not(.browser-default), input.invalid[type=number]:not(.browser-default),
input[type=number].invalid:not(.browser-default):focus, input.invalid[type=number]:not(.browser-default):focus,
input[type=search].invalid:not(.browser-default), input.invalid[type=search]:not(.browser-default),
input[type=search].invalid:not(.browser-default):focus, input.invalid[type=search]:not(.browser-default):focus,
textarea.materialize-textarea.invalid, textarea.materialize-textarea.invalid,
textarea.materialize-textarea.invalid:focus, .select-wrapper.invalid > input.select-dropdown, textarea.materialize-textarea.invalid:focus, .select-wrapper.invalid > input.select-dropdown,
.select-wrapper.invalid > input.select-dropdown:focus { .select-wrapper.invalid > input.select-dropdown:focus {
@ -6530,6 +6551,7 @@ textarea.materialize-textarea + label:after, .select-wrapper + label:after {
transform-origin: 0 0; transform-origin: 0 0;
} }
.input-field > input[type]:-webkit-autofill:not(.browser-default) + label,
.input-field > input[type=date]:not(.browser-default) + label, .input-field > input[type=date]:not(.browser-default) + label,
.input-field > input[type=time]:not(.browser-default) + label { .input-field > input[type=time]:not(.browser-default) + label {
-webkit-transform: translateY(-14px) scale(0.8); -webkit-transform: translateY(-14px) scale(0.8);
@ -7016,7 +7038,7 @@ textarea.materialize-textarea {
border-color: #949494; border-color: #949494;
} }
/* Switch /* Switch
========================================================================== */ ========================================================================== */
.switch, .switch,
.switch * { .switch * {
@ -7219,6 +7241,10 @@ select:disabled {
background-color: transparent; background-color: transparent;
} }
body.keyboard-focused .select-dropdown.dropdown-content li:focus {
background-color: rgba(0, 0, 0, 0.08);
}
.select-dropdown.dropdown-content li:hover { .select-dropdown.dropdown-content li:hover {
background-color: rgba(0, 0, 0, 0.08); background-color: rgba(0, 0, 0, 0.08);
} }
@ -7227,10 +7253,6 @@ select:disabled {
background-color: rgba(0, 0, 0, 0.03); background-color: rgba(0, 0, 0, 0.03);
} }
.select-dropdown.dropdown-content li:focus {
background-color: rgba(0, 0, 0, 0.08);
}
.prefix ~ .select-wrapper { .prefix ~ .select-wrapper {
margin-left: 3rem; margin-left: 3rem;
width: 92%; width: 92%;
@ -7264,7 +7286,7 @@ select:disabled {
padding-left: 1rem; padding-left: 1rem;
} }
/* File Input /* File Input
========================================================================== */ ========================================================================== */
.file-field { .file-field {
position: relative; position: relative;
@ -7397,7 +7419,7 @@ input[type=range]::-webkit-slider-thumb {
margin: -5px 0 0 0; margin: -5px 0 0 0;
} }
input[type=range].focused:focus:not(.active)::-webkit-slider-thumb { .keyboard-focused input[type=range]:focus:not(.active)::-webkit-slider-thumb {
-webkit-box-shadow: 0 0 0 10px rgba(38, 166, 154, 0.26); -webkit-box-shadow: 0 0 0 10px rgba(38, 166, 154, 0.26);
box-shadow: 0 0 0 10px rgba(38, 166, 154, 0.26); box-shadow: 0 0 0 10px rgba(38, 166, 154, 0.26);
} }
@ -7436,7 +7458,7 @@ input[type=range]:-moz-focusring {
outline-offset: -1px; outline-offset: -1px;
} }
input[type=range].focused:focus:not(.active)::-moz-range-thumb { .keyboard-focused input[type=range]:focus:not(.active)::-moz-range-thumb {
box-shadow: 0 0 0 10px rgba(38, 166, 154, 0.26); box-shadow: 0 0 0 10px rgba(38, 166, 154, 0.26);
} }
@ -7469,7 +7491,7 @@ input[type=range]::-ms-thumb {
transition: box-shadow .3s, -webkit-box-shadow .3s; transition: box-shadow .3s, -webkit-box-shadow .3s;
} }
input[type=range].focused:focus:not(.active)::-ms-thumb { .keyboard-focused input[type=range]:focus:not(.active)::-ms-thumb {
box-shadow: 0 0 0 10px rgba(38, 166, 154, 0.26); box-shadow: 0 0 0 10px rgba(38, 166, 154, 0.26);
} }
@ -7730,30 +7752,30 @@ input[type=range].focused:focus:not(.active)::-ms-thumb {
display: none; display: none;
} }
/* /*
@license @license
Copyright (c) 2014 The Polymer Project Authors. All rights reserved. Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
*/ */
/**************************/ /**************************/
/* STYLES FOR THE SPINNER */ /* STYLES FOR THE SPINNER */
/**************************/ /**************************/
/* /*
* Constants: * Constants:
* STROKEWIDTH = 3px * STROKEWIDTH = 3px
* ARCSIZE = 270 degrees (amount of circle the arc takes up) * ARCSIZE = 270 degrees (amount of circle the arc takes up)
* ARCTIME = 1333ms (time it takes to expand and contract arc) * ARCTIME = 1333ms (time it takes to expand and contract arc)
* ARCSTARTROT = 216 degrees (how much the start location of the arc * ARCSTARTROT = 216 degrees (how much the start location of the arc
* should rotate each time, 216 gives us a * should rotate each time, 216 gives us a
* 5 pointed star shape (it's 360/5 * 3). * 5 pointed star shape (it's 360/5 * 3).
* For a 7 pointed star, we might do * For a 7 pointed star, we might do
* 360/7 * 3 = 154.286) * 360/7 * 3 = 154.286)
* CONTAINERWIDTH = 28px * CONTAINERWIDTH = 28px
* SHRINK_TIME = 400ms * SHRINK_TIME = 400ms
*/ */
.preloader-wrapper { .preloader-wrapper {
display: inline-block; display: inline-block;
@ -7819,18 +7841,18 @@ input[type=range].focused:focus:not(.active)::-ms-thumb {
border-color: #0f9d58; border-color: #0f9d58;
} }
/** /**
* IMPORTANT NOTE ABOUT CSS ANIMATION PROPERTIES (keanulee): * IMPORTANT NOTE ABOUT CSS ANIMATION PROPERTIES (keanulee):
* *
* iOS Safari (tested on iOS 8.1) does not handle animation-delay very well - it doesn't * iOS Safari (tested on iOS 8.1) does not handle animation-delay very well - it doesn't
* guarantee that the animation will start _exactly_ after that value. So we avoid using * guarantee that the animation will start _exactly_ after that value. So we avoid using
* animation-delay and instead set custom keyframes for each color (as redundant as it * animation-delay and instead set custom keyframes for each color (as redundant as it
* seems). * seems).
* *
* We write out each animation in full (instead of separating animation-name, * We write out each animation in full (instead of separating animation-name,
* animation-duration, etc.) because under the polyfill, Safari does not recognize those * animation-duration, etc.) because under the polyfill, Safari does not recognize those
* specific properties properly, treats them as -webkit-animation, and overrides the * specific properties properly, treats them as -webkit-animation, and overrides the
* other animation rules. See https://github.com/Polymer/platform/issues/53. * other animation rules. See https://github.com/Polymer/platform/issues/53.
*/ */
.active .spinner-layer.spinner-blue { .active .spinner-layer.spinner-blue {
/* durations: 4 * ARCTIME */ /* durations: 4 * ARCTIME */
@ -8095,9 +8117,9 @@ input[type=range].focused:focus:not(.active)::-ms-thumb {
} }
} }
/** /**
* Patch the gap that appear between the two adjacent div.circle-clipper while the * Patch the gap that appear between the two adjacent div.circle-clipper while the
* spinner is rotating (appears on Chrome 38, Safari 7.1, and IE 11). * spinner is rotating (appears on Chrome 38, Safari 7.1, and IE 11).
*/ */
.gap-patch { .gap-patch {
position: absolute; position: absolute;
@ -8464,10 +8486,10 @@ input[type=range].focused:focus:not(.active)::-ms-thumb {
visibility: visible; visibility: visible;
-webkit-animation: pulse-animation 1s cubic-bezier(0.24, 0, 0.38, 1) infinite; -webkit-animation: pulse-animation 1s cubic-bezier(0.24, 0, 0.38, 1) infinite;
animation: pulse-animation 1s cubic-bezier(0.24, 0, 0.38, 1) infinite; animation: pulse-animation 1s cubic-bezier(0.24, 0, 0.38, 1) infinite;
-webkit-transition: opacity .3s, visibility 0s 1s, -webkit-transform .3s; -webkit-transition: opacity .3s, visibility 0s 1s, -webkit-transform .3s;
transition: opacity .3s, visibility 0s 1s, -webkit-transform .3s; transition: opacity .3s, visibility 0s 1s, -webkit-transform .3s;
transition: opacity .3s, transform .3s, visibility 0s 1s; transition: opacity .3s, transform .3s, visibility 0s 1s;
transition: opacity .3s, transform .3s, visibility 0s 1s, -webkit-transform .3s; transition: opacity .3s, transform .3s, visibility 0s 1s, -webkit-transform .3s;
} }
.tap-target { .tap-target {
@ -8520,10 +8542,10 @@ input[type=range].focused:focus:not(.active)::-ms-thumb {
.tap-target-wave::after { .tap-target-wave::after {
visibility: hidden; visibility: hidden;
-webkit-transition: opacity .3s, visibility 0s, -webkit-transform .3s; -webkit-transition: opacity .3s, visibility 0s, -webkit-transform .3s;
transition: opacity .3s, visibility 0s, -webkit-transform .3s; transition: opacity .3s, visibility 0s, -webkit-transform .3s;
transition: opacity .3s, transform .3s, visibility 0s; transition: opacity .3s, transform .3s, visibility 0s;
transition: opacity .3s, transform .3s, visibility 0s, -webkit-transform .3s; transition: opacity .3s, transform .3s, visibility 0s, -webkit-transform .3s;
z-index: -1; z-index: -1;
} }
@ -8808,6 +8830,12 @@ input[type=range].focused:focus:not(.active)::-ms-thumb {
-ms-flex-direction: row; -ms-flex-direction: row;
flex-direction: row; flex-direction: row;
} }
.datepicker-date-display {
-webkit-box-flex: 0;
-webkit-flex: 0 1 270px;
-ms-flex: 0 1 270px;
flex: 0 1 270px;
}
.datepicker-controls, .datepicker-controls,
.datepicker-table, .datepicker-table,
.datepicker-footer { .datepicker-footer {

File diff suppressed because one or more lines are too long

File diff suppressed because it is too large Load Diff

File diff suppressed because one or more lines are too long