Skip to content

GitLab

A
ardublockly
Commit 5e19c8cb authored by carlosperate's avatar carlosperate
Browse files
Options

Updated materialize to latest version. 

Fixes to forms, modals and navigation bar.
parent 8b679eb7
Hide whitespace changes
Inline Side-by-side
Showing with 161 additions and 106 deletions
apps/arduino/materialize/README.md
View file @ 5e19c8cb
......@@ -4,4 +4,4 @@ This folder contains the CSS and Javascript for the Materialize CSS framework.
https://github.com/Dogfalo/materialize
Current version used: >0.95.1 [@9b793030d78f41500fae18e4fb3f8bc70580eada commit](https://github.com/Dogfalo/materialize/commit/9b793030d78f41500fae18e4fb3f8bc70580eada)
\ No newline at end of file
Current version used: >0.95.2 [@6e611105cd599fd12ad8b7b2a6b7c141858734d6 commit](https://github.com/Dogfalo/materialize/commit/6e611105cd599fd12ad8b7b2a6b7c141858734d6)
\ No newline at end of file
apps/arduino/materialize/materialize.css
View file @ 5e19c8cb
......@@ -1956,7 +1956,8 @@ ul {
a {
color: #039be5;
text-decoration: none; }
text-decoration: none;
-webkit-tap-highlight-color: transparent; }
.valign-wrapper {
display: -webkit-box;
......@@ -1967,9 +1968,7 @@ a {
-webkit-flex-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center; }
align-items: center; }
.valign-wrapper .valign {
display: block; }
......@@ -2042,6 +2041,29 @@ img.responsive-img, video.responsive-video {
max-width: 100%;
height: auto; }
.pagination li {
font-size: 1.2rem;
float: left;
width: 30px;
height: 30px;
margin: 0 10px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
background-clip: padding-box;
text-align: center; }
.pagination li a {
color: #444; }
.pagination li.active a {
color: #fff; }
.pagination li.active {
background-color: #ee6e73; }
.pagination li.disabled a {
color: #999; }
.pagination li i {
font-size: 2rem;
line-height: 1.8rem; }
.parallax-container {
position: relative;
overflow: hidden;
......@@ -2058,24 +2080,15 @@ img.responsive-img, video.responsive-video {
display: none;
position: absolute;
bottom: 0;
width: 100%; }
@media only screen and (max-width : 992px) {
.parallax-container {
height: auto; }
.parallax {
position: relative;
width: 100%; }
.parallax img {
position: relative; }
}
width: 100%;
min-height: 100%;
background-position: center; }
.pin-top, .pin-bottom {
position: relative; }
.pinned {
position: fixed; }
position: fixed !important; }
/*********************
Transition Classes
......@@ -2182,7 +2195,10 @@ td, th {
display: table-cell;
text-align: left;
vertical-align: middle;
border-radius: 2px; }
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
background-clip: padding-box; }
@media only screen and (max-width : 992px) {
table.responsive-table {
......@@ -2238,15 +2254,46 @@ td, th {
}
.collection {
background-color: #fff;
background-color: #999;
margin: 0.5rem 0 1rem 0;
border: 1px solid #e0e0e0;
border-radius: 2px; }
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
background-clip: padding-box;
overflow: hidden; }
.collection .collection-item {
background-color: #fff;
line-height: 1.5rem;
padding: 10px 20px;
margin: 0px;
border-bottom: 1px solid #e0e0e0; }
.collection .collection-item.avatar {
height: 84px;
padding-left: 72px;
position: relative; }
.collection .collection-item.avatar .circle {
position: absolute;
width: 42px;
height: 42px;
overflow: hidden;
left: 15px;
display: inline-block;
vertical-align: middle; }
.collection .collection-item.avatar i.circle {
font-size: 18px;
line-height: 42px;
color: #fff;
background-color: #999;
text-align: center; }
.collection .collection-item.avatar .title {
font-size: 16px; }
.collection .collection-item.avatar p {
margin: 0; }
.collection .collection-item.avatar .secondary-content {
position: absolute;
top: 16px;
right: 16px; }
.collection .collection-item:last-child {
border-bottom: none; }
.collection .collection-item.active {
......@@ -2261,31 +2308,13 @@ td, th {
transition: 0.25s;
color: #26a69a; }
.collection a.collection-item:not(.active):hover {
background-color: rgba(0, 0, 0, 0.08); }
background-color: #ddd; }
.collection.with-header .collection-header {
background-color: #fff;
border-bottom: 1px solid #e0e0e0;
padding: 10px 20px; }
.collection.with-header .collection-item {
padding-left: 30px; }
.collection.pagination {
display: inline-block; }
.collection.pagination ul {
background-color: transparent;
font-size: 0;
display: inline-block; }
.collection.pagination li {
display: inline;
font-weight: 500;
margin: 0px;
padding: 0px;
font-size: 1rem; }
.collection.pagination li a {
padding: 0px 5px; }
.collection.pagination li.active {
background-color: #03a9f4;
color: #FFF; }
.collection.pagination li:hover {
background-color: #e1f5fe; }
.secondary-content {
float: right;
......@@ -2506,8 +2535,8 @@ span.badge {
@font-face {
font-family: "Material-Design-Icons";
src: url("../font/material-design-icons/Material-Design-Icons.eot?-g7cqhn");
src: url("../font/material-design-icons/Material-Design-Icons.eot?#iefix-g7cqhn") format("embedded-opentype"), url("../font/material-design-icons/Material-Design-Icons.woff?-g7cqhn") format("woff"), url("../font/material-design-icons/Material-Design-Icons.ttf?-g7cqhn") format("truetype"), url("../font/material-design-icons/Material-Design-Icons.svg?-g7cqhn#Material-Design-Icons") format("svg");
src: url("../font/material-design-icons/Material-Design-Icons.eot");
src: url("../font/material-design-icons/Material-Design-Icons.eot?#iefix") format("embedded-opentype"), url("../font/material-design-icons/Material-Design-Icons.woff") format("woff"), url("../font/material-design-icons/Material-Design-Icons.ttf") format("truetype"), url("../font/material-design-icons/Material-Design-Icons.svg#Material-Design-Icons") format("svg");
font-weight: normal;
font-style: normal; }
......@@ -4784,11 +4813,6 @@ span.badge {
display: table;
clear: both; }
.row .col {
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
-ms-transition: all 0.3s;
transition: all 0.3s;
float: left;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
......@@ -5030,12 +5054,15 @@ nav {
background-color: #ee6e73;
width: 100%;
height: 56px;
line-height: 56px; }
line-height: 56px;
overflow: hidden; }
nav a {
color: #fff; }
nav .nav-wrapper {
position: relative;
height: 100%; }
nav a {
color: #fff; }
nav .nav-wrapper i {
font-size: 2rem; }
@media only screen and (min-width : 993px) {
nav a.button-collapse {
display: none; }
......@@ -5044,7 +5071,8 @@ nav {
float: left;
position: relative;
z-index: 1;
height: 56px; }
height: 56px;
color: #fff; }
nav a.button-collapse i {
font-size: 2.7rem;
height: 56px;
......@@ -5055,25 +5083,36 @@ nav {
display: inline-block;
font-size: 2.1rem;
padding: 0; }
nav .brand-logo.center {
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%); }
@media only screen and (max-width : 992px) {
nav .brand-logo {
left: 0;
width: 100%;
text-align: center;
z-index: 0; } }
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%); } }
nav .brand-logo.right {
right: 0.5rem;
padding: 0; }
nav ul {
margin: 0; }
nav ul li {
float: left;
padding: 0px;
-webkit-transition: background-color 0.3s;
-moz-transition: background-color 0.3s;
-o-transition: background-color 0.3s;
-ms-transition: background-color 0.3s;
transition: background-color 0.3s; }
transition: background-color 0.3s;
float: left;
padding: 0px; }
nav ul li:hover, nav ul li.active {
background-color: rgba(0, 0, 0, 0.1); }
nav ul a {
......@@ -5129,9 +5168,6 @@ nav {
height: 64px;
line-height: 64px; }
nav .nav-wrapper i {
font-size: 2rem; }
.navbar-fixed {
height: 64px; }
}
......@@ -5367,6 +5403,7 @@ small {
.card {
position: relative;
overflow: hidden;
margin: 0.5rem 0 1rem 0;
background-color: #fff;
-webkit-box-sizing: border-box;
......@@ -5778,6 +5815,7 @@ ul.tabs li.tab {
-ms-user-select: none;
user-select: none;
-webkit-tap-highlight-color: transparent;
vertical-align: middle;
z-index: 1;
will-change: opacity, transform;
-webkit-transition: all 0.3s ease-out;
......@@ -6042,7 +6080,7 @@ select:focus {
button:focus {
outline: none;
background-color: #30d0c1; }
background-color: #2ab7a9; }
label {
font-size: 0.8rem;
......@@ -6389,6 +6427,9 @@ form p:last-child {
[type="checkbox"]:disabled:not(:checked) + label:hover:before {
border-color: rgba(0, 0, 0, 0.26); }
/***************
Switch
***************/
.switch, .switch * {
-webkit-user-select: none;
-moz-user-select: none;
......@@ -6397,53 +6438,57 @@ form p:last-child {
.switch label {
cursor: pointer; }
.switch label input[type=checkbox]:first-child {
.switch label input[type=checkbox] {
opacity: 0;
width: 0;
height: 0; }
.switch label input[type=checkbox]:first-child:checked + .lever {
background-color: #7bc5be; }
.switch label input[type=checkbox]:checked + .lever {
background-color: #84c7c1; }
.switch label input[type=checkbox]:first-child:checked + .lever:after {
background-color: #009587; }
.switch label input[type=checkbox]:checked + .lever:after {
background-color: #26a69a; }
.switch label .lever, .switch label input[type=checkbox][disabled]:first-child + .lever {
.switch label .lever {
content: "";
display: inline-block;
width: 45px;
position: relative;
width: 40px;
height: 15px;
background-color: #818181;
border-radius: 15px;
margin-right: 10px;
transition: background 0.3s ease;
vertical-align: middle;
margin-left: 5px; }
margin: 0px 16px; }
.switch label .lever:after {
content: "";
position: absolute;
display: inline-block;
width: 20px;
height: 20px;
width: 21px;
height: 21px;
background-color: #F1F1F1;
border-radius: 20px;
position: relative;
border-radius: 21px;
box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4);
left: -5px;
top: -2px;
top: -3px;
transition: left 0.3s ease, background 0.3s ease, box-shadow 0.1s ease; }
.switch label input[type=checkbox][disabled]:first-child + .lever:after, .switch label input[type=checkbox][disabled]:checked:first-child + .lever:after {
background-color: #BDBDBD; }
input[type=checkbox]:checked:not(:disabled) ~ .lever:active:after {
box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(38, 166, 154, 0.1); }
input[type=checkbox]:not(:disabled) ~ .lever:active:after {
box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(0, 0, 0, 0.08); }
input[type=checkbox]:first-child:checked ~ .lever:active:after {
box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(0, 149, 135, 0.1); }
.switch label input[type=checkbox]:checked + .lever:after {
left: 24px; }
input[type=checkbox]:first-child ~ .lever:active:after, input[type=checkbox][disabled]:first-child ~ .lever:active:after {
box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(0, 0, 0, 0.1); }
.switch input[type=checkbox][disabled] + .lever {
cursor: default; }
.switch label input[type=checkbox]:first-child:checked + .lever:after {
left: 30px; }
.switch label input[type=checkbox][disabled] + .lever:after, .switch label input[type=checkbox][disabled]:checked + .lever:after {
background-color: #BDBDBD; }
/***************
Select Field
......@@ -6484,7 +6529,11 @@ select.browser-default {
select:disabled {
color: rgba(0, 0, 0, 0.3); }
.select-wrapper input.select-dropdown.disabled {
.select-wrapper input.select-dropdown:disabled {
color: rgba(0, 0, 0, 0.3);
border-bottom: 1px solid rgba(0, 0, 0, 0.3); }
.select-wrapper i {
color: rgba(0, 0, 0, 0.3); }
.select-dropdown li.disabled {
......@@ -7223,7 +7272,8 @@ ul.side-nav .collapsible-body li.active, ul.side-nav.fixed .collapsible-body li.
.slider ul.slides li img {
height: 100%;
width: 100%;
background-size: cover; }
background-size: cover;
background-position: center; }
.slider ul.slides li .caption {
color: #fff;
position: absolute;
......@@ -7486,7 +7536,7 @@ ul.side-nav .collapsible-body li.active, ul.side-nav.fixed .collapsible-body li.
width: 22.5%; }
.picker__select--month:focus, .picker__select--year:focus {
border-color: #0089ec; }
border-color: rgba(0, 0, 0, 0.05); }
/**
* The month navigation buttons.
......@@ -7507,11 +7557,6 @@ ul.side-nav .collapsible-body li.active, ul.side-nav.fixed .collapsible-body li.
right: -1em;
padding-left: 1.25em; }
.picker__nav--prev:hover, .picker__nav--next:hover {
cursor: pointer;
color: #000000;
background: #b1dcfb; }
.picker__nav--disabled, .picker__nav--disabled:hover, .picker__nav--disabled:before, .picker__nav--disabled:before:hover {
cursor: default;
background: none;
......@@ -7583,8 +7628,7 @@ ul.side-nav .collapsible-body li.active, ul.side-nav.fixed .collapsible-body li.
font-weight: 500; }
.picker__day--highlighted:hover, .picker--focused .picker__day--highlighted {
cursor: pointer;
color: #000000; }
cursor: pointer; }
.picker__day--selected, .picker__day--selected:hover, .picker--focused .picker__day--selected {
border-radius: 50%;
......@@ -7632,7 +7676,7 @@ ul.side-nav .collapsible-body li.active, ul.side-nav.fixed .collapsible-body li.
.picker__button--today:focus, .picker__button--clear:focus, .picker__button--close:focus {
background: #b1dcfb;
border-color: #0089ec;
border-color: rgba(0, 0, 0, 0.05);
outline: none; }
.picker__button--today:before, .picker__button--clear:before, .picker__button--close:before {
......@@ -7686,8 +7730,13 @@ ul.side-nav .collapsible-body li.active, ul.side-nav.fixed .collapsible-body li.
padding-bottom: 15px;
font-weight: 300; }
.picker__nav--prev:hover, .picker__nav--next:hover {
cursor: pointer;
color: #000000;
background: #a1ded8; }
.picker__weekday-display {
background-color: #00897b;
background-color: #1f897f;
padding: 10px;
font-weight: 200;
letter-spacing: 0.5;
......@@ -7704,7 +7753,7 @@ ul.side-nav .collapsible-body li.active, ul.side-nav.fixed .collapsible-body li.
.picker__year-display {
font-size: 1.8rem;
color: #80cbc4; }
color: rgba(255, 255, 255, 0.4); }
.picker__box {
padding: 0; }
......@@ -7725,23 +7774,26 @@ ul.side-nav .collapsible-body li.active, ul.side-nav.fixed .collapsible-body li.
font-weight: 400;
border: 1px solid transparent; }
.picker--focused .picker__day--highlighted {
.picker__day.picker__day--today {
color: #26a69a; }
.picker__day.picker__day--today.picker__day--selected {
color: #fff; }
.picker__weekday {
font-size: 0.9rem; }
.picker--focused .picker__day--selected {
.picker__day--selected, .picker__day--selected:hover, .picker--focused .picker__day--selected {
border-radius: 50%;
-webkit-transform: scale(0.9);
-moz-transform: scale(0.9);
-ms-transform: scale(0.9);
-o-transform: scale(0.9);
transform: scale(0.9);
background-color: #009688;
background-color: #26a69a;
color: #ffffff; }
.picker--focused .picker__day--selected.picker__day--outfocus {
background-color: #b2dfdb; }
.picker__day--selected.picker__day--outfocus, .picker__day--selected:hover.picker__day--outfocus, .picker--focused .picker__day--selected.picker__day--outfocus {
background-color: #a1ded8; }
.picker__footer {
text-align: right;
......@@ -7766,6 +7818,9 @@ ul.side-nav .collapsible-body li.active, ul.side-nav.fixed .collapsible-body li.
border-right: 0;
border-left: 0.75em solid #676767; }
button.picker__today:focus, button.picker__clear:focus, button.picker__close:focus {
background-color: #a1ded8; }
/* ==========================================================================
$BASE-TIME-PICKER
========================================================================== */
......
apps/arduino/materialize/materialize.js
View file @ 5e19c8cb
This source diff could not be displayed because it is too large. You can view the blob instead.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment