diff --git a/monero-wallet-generator.html b/monero-wallet-generator.html
index 33ff882..cef9f87 100644
--- a/monero-wallet-generator.html
+++ b/monero-wallet-generator.html
@@ -3350,7136 +3350,3233 @@
padding: 0 !important;
}
- @font-face {
- font-family: "Material-Design-Icons";
- src: url("../font/material-design-icons/Material-Design-Icons.eot?#iefix") format("embedded-opentype"), url("../font/material-design-icons/Material-Design-Icons.woff2") format("woff2"), 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;
- }
-
- [class^="mdi-"], [class*=" mdi-"] {
- font-family: "Material-Design-Icons";
- speak: none;
- font-style: normal;
- font-weight: normal;
- font-variant: normal;
- text-transform: none;
- text-rendering: auto;
- /* Better Font Rendering =========== */
- -webkit-font-smoothing: antialiased;
- -moz-osx-font-smoothing: grayscale;
- }
-
- .mdi-action-3d-rotation:before {
- content: "\e600";
+ .container {
+ padding: 0 1.5rem;
+ margin: 0 auto;
+ max-width: 1280px;
+ width: 90%;
}
- .mdi-action-accessibility:before {
- content: "\e601";
+ @media only screen and (min-width: 601px) {
+ .container {
+ width: 85%;
+ }
}
- .mdi-action-account-balance:before {
- content: "\e602";
+ @media only screen and (min-width: 993px) {
+ .container {
+ width: 70%;
+ }
}
- .mdi-action-account-balance-wallet:before {
- content: "\e603";
+ .container .row {
+ margin-left: -0.75rem;
+ margin-right: -0.75rem;
}
- .mdi-action-account-box:before {
- content: "\e604";
+ .section {
+ padding-top: 1rem;
+ padding-bottom: 1rem;
}
- .mdi-action-account-child:before {
- content: "\e605";
+ .section.no-pad {
+ padding: 0;
}
- .mdi-action-account-circle:before {
- content: "\e606";
+ .section.no-pad-bot {
+ padding-bottom: 0;
}
- .mdi-action-add-shopping-cart:before {
- content: "\e607";
+ .section.no-pad-top {
+ padding-top: 0;
}
- .mdi-action-alarm:before {
- content: "\e608";
+ .row {
+ margin-left: auto;
+ margin-right: auto;
+ margin-bottom: 20px;
}
- .mdi-action-alarm-add:before {
- content: "\e609";
+ .row:after {
+ content: "";
+ display: table;
+ clear: both;
}
- .mdi-action-alarm-off:before {
- content: "\e60a";
+ .row .col {
+ float: left;
+ -webkit-box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ box-sizing: border-box;
+ padding: 0 0.75rem;
}
- .mdi-action-alarm-on:before {
- content: "\e60b";
+ .row .col.s1 {
+ width: 8.33333%;
+ margin-left: 0;
}
- .mdi-action-android:before {
- content: "\e60c";
+ .row .col.s2 {
+ width: 16.66667%;
+ margin-left: 0;
}
- .mdi-action-announcement:before {
- content: "\e60d";
+ .row .col.s3 {
+ width: 25%;
+ margin-left: 0;
}
- .mdi-action-aspect-ratio:before {
- content: "\e60e";
+ .row .col.s4 {
+ width: 33.33333%;
+ margin-left: 0;
}
- .mdi-action-assessment:before {
- content: "\e60f";
+ .row .col.s5 {
+ width: 41.66667%;
+ margin-left: 0;
}
- .mdi-action-assignment:before {
- content: "\e610";
+ .row .col.s6 {
+ width: 50%;
+ margin-left: 0;
}
- .mdi-action-assignment-ind:before {
- content: "\e611";
+ .row .col.s7 {
+ width: 58.33333%;
+ margin-left: 0;
}
- .mdi-action-assignment-late:before {
- content: "\e612";
+ .row .col.s8 {
+ width: 66.66667%;
+ margin-left: 0;
}
- .mdi-action-assignment-return:before {
- content: "\e613";
+ .row .col.s9 {
+ width: 75%;
+ margin-left: 0;
}
- .mdi-action-assignment-returned:before {
- content: "\e614";
+ .row .col.s10 {
+ width: 83.33333%;
+ margin-left: 0;
}
- .mdi-action-assignment-turned-in:before {
- content: "\e615";
+ .row .col.s11 {
+ width: 91.66667%;
+ margin-left: 0;
}
- .mdi-action-autorenew:before {
- content: "\e616";
+ .row .col.s12 {
+ width: 100%;
+ margin-left: 0;
}
- .mdi-action-backup:before {
- content: "\e617";
+ .row .col.offset-s1 {
+ margin-left: 8.33333%;
}
- .mdi-action-book:before {
- content: "\e618";
+ .row .col.offset-s2 {
+ margin-left: 16.66667%;
}
- .mdi-action-bookmark:before {
- content: "\e619";
+ .row .col.offset-s3 {
+ margin-left: 25%;
}
- .mdi-action-bookmark-outline:before {
- content: "\e61a";
+ .row .col.offset-s4 {
+ margin-left: 33.33333%;
}
- .mdi-action-bug-report:before {
- content: "\e61b";
+ .row .col.offset-s5 {
+ margin-left: 41.66667%;
}
- .mdi-action-cached:before {
- content: "\e61c";
+ .row .col.offset-s6 {
+ margin-left: 50%;
}
- .mdi-action-class:before {
- content: "\e61d";
+ .row .col.offset-s7 {
+ margin-left: 58.33333%;
}
- .mdi-action-credit-card:before {
- content: "\e61e";
+ .row .col.offset-s8 {
+ margin-left: 66.66667%;
}
- .mdi-action-dashboard:before {
- content: "\e61f";
+ .row .col.offset-s9 {
+ margin-left: 75%;
}
- .mdi-action-delete:before {
- content: "\e620";
+ .row .col.offset-s10 {
+ margin-left: 83.33333%;
}
- .mdi-action-description:before {
- content: "\e621";
+ .row .col.offset-s11 {
+ margin-left: 91.66667%;
}
- .mdi-action-dns:before {
- content: "\e622";
+ .row .col.offset-s12 {
+ margin-left: 100%;
}
- .mdi-action-done:before {
- content: "\e623";
- }
+ @media only screen and (min-width: 601px) {
+ .row .col.m1 {
+ width: 8.33333%;
+ margin-left: 0;
+ }
- .mdi-action-done-all:before {
- content: "\e624";
- }
+ .row .col.m2 {
+ width: 16.66667%;
+ margin-left: 0;
+ }
- .mdi-action-event:before {
- content: "\e625";
- }
+ .row .col.m3 {
+ width: 25%;
+ margin-left: 0;
+ }
- .mdi-action-exit-to-app:before {
- content: "\e626";
- }
+ .row .col.m4 {
+ width: 33.33333%;
+ margin-left: 0;
+ }
- .mdi-action-explore:before {
- content: "\e627";
- }
+ .row .col.m5 {
+ width: 41.66667%;
+ margin-left: 0;
+ }
- .mdi-action-extension:before {
- content: "\e628";
- }
+ .row .col.m6 {
+ width: 50%;
+ margin-left: 0;
+ }
- .mdi-action-face-unlock:before {
- content: "\e629";
- }
+ .row .col.m7 {
+ width: 58.33333%;
+ margin-left: 0;
+ }
- .mdi-action-favorite:before {
- content: "\e62a";
- }
+ .row .col.m8 {
+ width: 66.66667%;
+ margin-left: 0;
+ }
- .mdi-action-favorite-outline:before {
- content: "\e62b";
- }
+ .row .col.m9 {
+ width: 75%;
+ margin-left: 0;
+ }
- .mdi-action-find-in-page:before {
- content: "\e62c";
- }
+ .row .col.m10 {
+ width: 83.33333%;
+ margin-left: 0;
+ }
- .mdi-action-find-replace:before {
- content: "\e62d";
- }
+ .row .col.m11 {
+ width: 91.66667%;
+ margin-left: 0;
+ }
- .mdi-action-flip-to-back:before {
- content: "\e62e";
- }
+ .row .col.m12 {
+ width: 100%;
+ margin-left: 0;
+ }
- .mdi-action-flip-to-front:before {
- content: "\e62f";
- }
+ .row .col.offset-m1 {
+ margin-left: 8.33333%;
+ }
- .mdi-action-get-app:before {
- content: "\e630";
- }
+ .row .col.offset-m2 {
+ margin-left: 16.66667%;
+ }
- .mdi-action-grade:before {
- content: "\e631";
- }
+ .row .col.offset-m3 {
+ margin-left: 25%;
+ }
- .mdi-action-group-work:before {
- content: "\e632";
- }
+ .row .col.offset-m4 {
+ margin-left: 33.33333%;
+ }
- .mdi-action-help:before {
- content: "\e633";
- }
+ .row .col.offset-m5 {
+ margin-left: 41.66667%;
+ }
- .mdi-action-highlight-remove:before {
- content: "\e634";
- }
+ .row .col.offset-m6 {
+ margin-left: 50%;
+ }
- .mdi-action-history:before {
- content: "\e635";
- }
+ .row .col.offset-m7 {
+ margin-left: 58.33333%;
+ }
- .mdi-action-home:before {
- content: "\e636";
- }
+ .row .col.offset-m8 {
+ margin-left: 66.66667%;
+ }
- .mdi-action-https:before {
- content: "\e637";
- }
+ .row .col.offset-m9 {
+ margin-left: 75%;
+ }
- .mdi-action-info:before {
- content: "\e638";
- }
+ .row .col.offset-m10 {
+ margin-left: 83.33333%;
+ }
- .mdi-action-info-outline:before {
- content: "\e639";
- }
+ .row .col.offset-m11 {
+ margin-left: 91.66667%;
+ }
- .mdi-action-input:before {
- content: "\e63a";
+ .row .col.offset-m12 {
+ margin-left: 100%;
+ }
}
- .mdi-action-invert-colors:before {
- content: "\e63b";
- }
+ @media only screen and (min-width: 993px) {
+ .row .col.l1 {
+ width: 8.33333%;
+ margin-left: 0;
+ }
- .mdi-action-label:before {
- content: "\e63c";
- }
+ .row .col.l2 {
+ width: 16.66667%;
+ margin-left: 0;
+ }
- .mdi-action-label-outline:before {
- content: "\e63d";
- }
+ .row .col.l3 {
+ width: 25%;
+ margin-left: 0;
+ }
- .mdi-action-language:before {
- content: "\e63e";
- }
+ .row .col.l4 {
+ width: 33.33333%;
+ margin-left: 0;
+ }
- .mdi-action-launch:before {
- content: "\e63f";
- }
+ .row .col.l5 {
+ width: 41.66667%;
+ margin-left: 0;
+ }
- .mdi-action-list:before {
- content: "\e640";
- }
+ .row .col.l6 {
+ width: 50%;
+ margin-left: 0;
+ }
- .mdi-action-lock:before {
- content: "\e641";
- }
+ .row .col.l7 {
+ width: 58.33333%;
+ margin-left: 0;
+ }
- .mdi-action-lock-open:before {
- content: "\e642";
- }
+ .row .col.l8 {
+ width: 66.66667%;
+ margin-left: 0;
+ }
- .mdi-action-lock-outline:before {
- content: "\e643";
- }
-
- .mdi-action-loyalty:before {
- content: "\e644";
- }
+ .row .col.l9 {
+ width: 75%;
+ margin-left: 0;
+ }
- .mdi-action-markunread-mailbox:before {
- content: "\e645";
- }
+ .row .col.l10 {
+ width: 83.33333%;
+ margin-left: 0;
+ }
- .mdi-action-note-add:before {
- content: "\e646";
- }
+ .row .col.l11 {
+ width: 91.66667%;
+ margin-left: 0;
+ }
- .mdi-action-open-in-browser:before {
- content: "\e647";
- }
+ .row .col.l12 {
+ width: 100%;
+ margin-left: 0;
+ }
- .mdi-action-open-in-new:before {
- content: "\e648";
- }
+ .row .col.offset-l1 {
+ margin-left: 8.33333%;
+ }
- .mdi-action-open-with:before {
- content: "\e649";
- }
+ .row .col.offset-l2 {
+ margin-left: 16.66667%;
+ }
- .mdi-action-pageview:before {
- content: "\e64a";
- }
+ .row .col.offset-l3 {
+ margin-left: 25%;
+ }
- .mdi-action-payment:before {
- content: "\e64b";
- }
+ .row .col.offset-l4 {
+ margin-left: 33.33333%;
+ }
- .mdi-action-perm-camera-mic:before {
- content: "\e64c";
- }
+ .row .col.offset-l5 {
+ margin-left: 41.66667%;
+ }
- .mdi-action-perm-contact-cal:before {
- content: "\e64d";
- }
+ .row .col.offset-l6 {
+ margin-left: 50%;
+ }
- .mdi-action-perm-data-setting:before {
- content: "\e64e";
- }
+ .row .col.offset-l7 {
+ margin-left: 58.33333%;
+ }
- .mdi-action-perm-device-info:before {
- content: "\e64f";
- }
+ .row .col.offset-l8 {
+ margin-left: 66.66667%;
+ }
- .mdi-action-perm-identity:before {
- content: "\e650";
- }
+ .row .col.offset-l9 {
+ margin-left: 75%;
+ }
- .mdi-action-perm-media:before {
- content: "\e651";
- }
+ .row .col.offset-l10 {
+ margin-left: 83.33333%;
+ }
- .mdi-action-perm-phone-msg:before {
- content: "\e652";
- }
+ .row .col.offset-l11 {
+ margin-left: 91.66667%;
+ }
- .mdi-action-perm-scan-wifi:before {
- content: "\e653";
+ .row .col.offset-l12 {
+ margin-left: 100%;
+ }
}
- .mdi-action-picture-in-picture:before {
- content: "\e654";
+ nav {
+ color: #fff;
+ background-color: #ee6e73;
+ width: 100%;
+ height: 56px;
+ line-height: 56px;
}
- .mdi-action-polymer:before {
- content: "\e655";
+ nav a {
+ color: #fff;
}
- .mdi-action-print:before {
- content: "\e656";
+ nav .nav-wrapper {
+ position: relative;
+ height: 100%;
}
- .mdi-action-query-builder:before {
- content: "\e657";
+ nav .nav-wrapper i {
+ display: block;
+ font-size: 2rem;
}
- .mdi-action-question-answer:before {
- content: "\e658";
+ @media only screen and (min-width: 993px) {
+ nav a.button-collapse {
+ display: none;
+ }
}
- .mdi-action-receipt:before {
- content: "\e659";
+ nav .button-collapse {
+ float: left;
+ position: relative;
+ z-index: 1;
+ height: 56px;
}
- .mdi-action-redeem:before {
- content: "\e65a";
+ nav .button-collapse i {
+ font-size: 2.7rem;
+ height: 56px;
+ line-height: 56px;
}
- .mdi-action-report-problem:before {
- content: "\e65b";
+ nav .brand-logo {
+ position: absolute;
+ color: #fff;
+ display: inline-block;
+ font-size: 2.1rem;
+ padding: 0;
}
- .mdi-action-restore:before {
- content: "\e65c";
+ nav .brand-logo.center {
+ left: 50%;
+ -webkit-transform: translateX(-50%);
+ -moz-transform: translateX(-50%);
+ -ms-transform: translateX(-50%);
+ -o-transform: translateX(-50%);
+ transform: translateX(-50%);
}
- .mdi-action-room:before {
- content: "\e65d";
+ @media only screen and (max-width: 992px) {
+ nav .brand-logo {
+ left: 50%;
+ -webkit-transform: translateX(-50%);
+ -moz-transform: translateX(-50%);
+ -ms-transform: translateX(-50%);
+ -o-transform: translateX(-50%);
+ transform: translateX(-50%);
+ }
}
- .mdi-action-schedule:before {
- content: "\e65e";
+ nav .brand-logo.right {
+ right: 0.5rem;
+ padding: 0;
}
- .mdi-action-search:before {
- content: "\e65f";
+ nav ul {
+ margin: 0;
}
- .mdi-action-settings:before {
- content: "\e660";
+ nav ul li {
+ -webkit-transition: background-color .3s;
+ -moz-transition: background-color .3s;
+ -o-transition: background-color .3s;
+ -ms-transition: background-color .3s;
+ transition: background-color .3s;
+ float: left;
+ padding: 0;
}
- .mdi-action-settings-applications:before {
- content: "\e661";
+ nav ul li:hover, nav ul li.active {
+ background-color: rgba(0, 0, 0, 0.1);
}
- .mdi-action-settings-backup-restore:before {
- content: "\e662";
+ nav ul a {
+ font-size: 1rem;
+ color: #fff;
+ display: block;
+ padding: 0 15px;
}
- .mdi-action-settings-bluetooth:before {
- content: "\e663";
+ nav ul.left {
+ float: left;
}
- .mdi-action-settings-cell:before {
- content: "\e664";
+ nav .input-field {
+ margin: 0;
}
- .mdi-action-settings-display:before {
- content: "\e665";
+ nav .input-field input {
+ height: 100%;
+ font-size: 1.2rem;
+ border: none;
+ padding-left: 2rem;
}
- .mdi-action-settings-ethernet:before {
- content: "\e666";
+ nav .input-field input:focus, nav .input-field input[type=text]:valid, nav .input-field input[type=password]:valid, nav .input-field input[type=email]:valid, nav .input-field input[type=url]:valid, nav .input-field input[type=date]:valid {
+ border: none;
+ box-shadow: none;
}
- .mdi-action-settings-input-antenna:before {
- content: "\e667";
+ nav .input-field label {
+ top: 0;
+ left: 0;
}
- .mdi-action-settings-input-component:before {
- content: "\e668";
+ nav .input-field label i {
+ color: rgba(255, 255, 255, 0.7);
+ -webkit-transition: color .3s;
+ -moz-transition: color .3s;
+ -o-transition: color .3s;
+ -ms-transition: color .3s;
+ transition: color .3s;
}
- .mdi-action-settings-input-composite:before {
- content: "\e669";
+ nav .input-field label.active i {
+ color: #fff;
}
- .mdi-action-settings-input-hdmi:before {
- content: "\e66a";
+ nav .input-field label.active {
+ -webkit-transform: translateY(0);
+ -moz-transform: translateY(0);
+ -ms-transform: translateY(0);
+ -o-transform: translateY(0);
+ transform: translateY(0);
}
- .mdi-action-settings-input-svideo:before {
- content: "\e66b";
+ .navbar-fixed {
+ position: relative;
+ height: 56px;
+ z-index: 998;
}
- .mdi-action-settings-overscan:before {
- content: "\e66c";
+ .navbar-fixed nav {
+ position: fixed;
}
- .mdi-action-settings-phone:before {
- content: "\e66d";
- }
+ @media only screen and (min-width: 601px) {
+ nav, nav .nav-wrapper i, nav a.button-collapse, nav a.button-collapse i {
+ height: 64px;
+ line-height: 64px;
+ }
- .mdi-action-settings-power:before {
- content: "\e66e";
+ .navbar-fixed {
+ height: 64px;
+ }
}
- .mdi-action-settings-remote:before {
- content: "\e66f";
- }
- .mdi-action-settings-voice:before {
- content: "\e670";
+ a {
+ text-decoration: none;
}
- .mdi-action-shop:before {
- content: "\e671";
+ html {
+ line-height: 1.5;
+ font-family: "Helvetica Neue","Helvetica","Arial", sans-serif;
+ font-weight: normal;
+ color: rgba(0, 0, 0, 0.87);
}
- .mdi-action-shopping-basket:before {
- content: "\e672";
+ @media only screen and (min-width: 0) {
+ html {
+ font-size: 14px;
+ }
}
- .mdi-action-shopping-cart:before {
- content: "\e673";
+ @media only screen and (min-width: 992px) {
+ html {
+ font-size: 14.5px;
+ }
}
- .mdi-action-shop-two:before {
- content: "\e674";
+ @media only screen and (min-width: 1200px) {
+ html {
+ font-size: 15px;
+ }
}
- .mdi-action-speaker-notes:before {
- content: "\e675";
+ h1, h2, h3, h4, h5, h6 {
+ font-weight: 400;
}
- .mdi-action-spellcheck:before {
- content: "\e676";
+ h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
+ font-weight: inherit;
}
- .mdi-action-star-rate:before {
- content: "\e677";
+ h1 {
+ font-size: 4.2rem;
+ line-height: 4.62rem;
+ margin: 2.1rem 0 1.68rem 0;
}
- .mdi-action-stars:before {
- content: "\e678";
+ h2 {
+ font-size: 3.56rem;
+ line-height: 3.916rem;
+ margin: 1.78rem 0 1.424rem 0;
}
- .mdi-action-store:before {
- content: "\e679";
+ h3 {
+ font-size: 2.92rem;
+ line-height: 3.212rem;
+ margin: 1.46rem 0 1.168rem 0;
}
- .mdi-action-subject:before {
- content: "\e67a";
+ h4 {
+ font-size: 2.28rem;
+ line-height: 2.508rem;
+ margin: 1.14rem 0 0.912rem 0;
}
- .mdi-action-swap-horiz:before {
- content: "\e67b";
+ h5 {
+ font-size: 1.64rem;
+ line-height: 1.804rem;
+ margin: 0.82rem 0 0.656rem 0;
}
- .mdi-action-swap-vert:before {
- content: "\e67c";
+ h6 {
+ font-size: 1rem;
+ line-height: 1.1rem;
+ margin: 0.5rem 0 0.4rem 0;
}
- .mdi-action-swap-vert-circle:before {
- content: "\e67d";
+ em {
+ font-style: italic;
}
- .mdi-action-system-update-tv:before {
- content: "\e67e";
+ strong {
+ font-weight: 500;
}
- .mdi-action-tab:before {
- content: "\e67f";
+ small {
+ font-size: 75%;
}
- .mdi-action-tab-unselected:before {
- content: "\e680";
+ .light, footer.page-footer .footer-copyright {
+ font-weight: 300;
}
- .mdi-action-theaters:before {
- content: "\e681";
+ .thin {
+ font-weight: 200;
}
- .mdi-action-thumb-down:before {
- content: "\e682";
+ .flow-text {
+ font-weight: 300;
}
- .mdi-action-thumbs-up-down:before {
- content: "\e683";
+ @media only screen and (min-width: 360px) {
+ .flow-text {
+ font-size: 1.2rem;
+ }
}
- .mdi-action-thumb-up:before {
- content: "\e684";
+ @media only screen and (min-width: 0px) {
+ .flow-text {
+ line-height: .8rem;
+ }
}
- .mdi-action-toc:before {
- content: "\e685";
+ @media only screen and (min-width: 390px) {
+ .flow-text {
+ font-size: 1.224rem;
+ }
}
- .mdi-action-today:before {
- content: "\e686";
- }
-
- .mdi-action-track-changes:before {
- content: "\e687";
- }
-
- .mdi-action-translate:before {
- content: "\e688";
+ @media only screen and (min-width: 30px) {
+ .flow-text {
+ line-height: .904rem;
+ }
}
- .mdi-action-trending-down:before {
- content: "\e689";
+ @media only screen and (min-width: 420px) {
+ .flow-text {
+ font-size: 1.248rem;
+ }
}
- .mdi-action-trending-neutral:before {
- content: "\e68a";
+ @media only screen and (min-width: 60px) {
+ .flow-text {
+ line-height: 1.008rem;
+ }
}
- .mdi-action-trending-up:before {
- content: "\e68b";
+ @media only screen and (min-width: 450px) {
+ .flow-text {
+ font-size: 1.272rem;
+ }
}
- .mdi-action-turned-in:before {
- content: "\e68c";
+ @media only screen and (min-width: 90px) {
+ .flow-text {
+ line-height: 1.112rem;
+ }
}
- .mdi-action-turned-in-not:before {
- content: "\e68d";
+ @media only screen and (min-width: 480px) {
+ .flow-text {
+ font-size: 1.296rem;
+ }
}
- .mdi-action-verified-user:before {
- content: "\e68e";
+ @media only screen and (min-width: 120px) {
+ .flow-text {
+ line-height: 1.216rem;
+ }
}
- .mdi-action-view-agenda:before {
- content: "\e68f";
+ @media only screen and (min-width: 510px) {
+ .flow-text {
+ font-size: 1.32rem;
+ }
}
- .mdi-action-view-array:before {
- content: "\e690";
+ @media only screen and (min-width: 150px) {
+ .flow-text {
+ line-height: 1.32rem;
+ }
}
- .mdi-action-view-carousel:before {
- content: "\e691";
+ @media only screen and (min-width: 540px) {
+ .flow-text {
+ font-size: 1.344rem;
+ }
}
- .mdi-action-view-column:before {
- content: "\e692";
+ @media only screen and (min-width: 180px) {
+ .flow-text {
+ line-height: 1.424rem;
+ }
}
- .mdi-action-view-day:before {
- content: "\e693";
+ @media only screen and (min-width: 570px) {
+ .flow-text {
+ font-size: 1.368rem;
+ }
}
- .mdi-action-view-headline:before {
- content: "\e694";
+ @media only screen and (min-width: 210px) {
+ .flow-text {
+ line-height: 1.528rem;
+ }
}
- .mdi-action-view-list:before {
- content: "\e695";
+ @media only screen and (min-width: 600px) {
+ .flow-text {
+ font-size: 1.392rem;
+ }
}
- .mdi-action-view-module:before {
- content: "\e696";
+ @media only screen and (min-width: 240px) {
+ .flow-text {
+ line-height: 1.632rem;
+ }
}
- .mdi-action-view-quilt:before {
- content: "\e697";
+ @media only screen and (min-width: 630px) {
+ .flow-text {
+ font-size: 1.416rem;
+ }
}
- .mdi-action-view-stream:before {
- content: "\e698";
+ @media only screen and (min-width: 270px) {
+ .flow-text {
+ line-height: 1.736rem;
+ }
}
- .mdi-action-view-week:before {
- content: "\e699";
+ @media only screen and (min-width: 660px) {
+ .flow-text {
+ font-size: 1.44rem;
+ }
}
- .mdi-action-visibility:before {
- content: "\e69a";
+ @media only screen and (min-width: 300px) {
+ .flow-text {
+ line-height: 1.84rem;
+ }
}
- .mdi-action-visibility-off:before {
- content: "\e69b";
+ @media only screen and (min-width: 690px) {
+ .flow-text {
+ font-size: 1.464rem;
+ }
}
- .mdi-action-wallet-giftcard:before {
- content: "\e69c";
+ @media only screen and (min-width: 330px) {
+ .flow-text {
+ line-height: 1.944rem;
+ }
}
- .mdi-action-wallet-membership:before {
- content: "\e69d";
+ @media only screen and (min-width: 720px) {
+ .flow-text {
+ font-size: 1.488rem;
+ }
}
- .mdi-action-wallet-travel:before {
- content: "\e69e";
+ @media only screen and (min-width: 360px) {
+ .flow-text {
+ line-height: 2.048rem;
+ }
}
- .mdi-action-work:before {
- content: "\e69f";
+ @media only screen and (min-width: 750px) {
+ .flow-text {
+ font-size: 1.512rem;
+ }
}
- .mdi-alert-error:before {
- content: "\e6a0";
+ @media only screen and (min-width: 390px) {
+ .flow-text {
+ line-height: 2.152rem;
+ }
}
- .mdi-alert-warning:before {
- content: "\e6a1";
+ @media only screen and (min-width: 780px) {
+ .flow-text {
+ font-size: 1.536rem;
+ }
}
- .mdi-av-album:before {
- content: "\e6a2";
+ @media only screen and (min-width: 420px) {
+ .flow-text {
+ line-height: 2.256rem;
+ }
}
- .mdi-av-timer:before {
- content: "\e6a3";
+ @media only screen and (min-width: 810px) {
+ .flow-text {
+ font-size: 1.56rem;
+ }
}
- .mdi-av-closed-caption:before {
- content: "\e6a4";
+ @media only screen and (min-width: 450px) {
+ .flow-text {
+ line-height: 2.36rem;
+ }
}
- .mdi-av-equalizer:before {
- content: "\e6a5";
+ @media only screen and (min-width: 840px) {
+ .flow-text {
+ font-size: 1.584rem;
+ }
}
- .mdi-av-explicit:before {
- content: "\e6a6";
+ @media only screen and (min-width: 480px) {
+ .flow-text {
+ line-height: 2.464rem;
+ }
}
- .mdi-av-fast-forward:before {
- content: "\e6a7";
+ @media only screen and (min-width: 870px) {
+ .flow-text {
+ font-size: 1.608rem;
+ }
}
- .mdi-av-fast-rewind:before {
- content: "\e6a8";
+ @media only screen and (min-width: 510px) {
+ .flow-text {
+ line-height: 2.568rem;
+ }
}
- .mdi-av-games:before {
- content: "\e6a9";
+ @media only screen and (min-width: 900px) {
+ .flow-text {
+ font-size: 1.632rem;
+ }
}
- .mdi-av-hearing:before {
- content: "\e6aa";
+ @media only screen and (min-width: 540px) {
+ .flow-text {
+ line-height: 2.672rem;
+ }
}
- .mdi-av-high-quality:before {
- content: "\e6ab";
+ @media only screen and (min-width: 930px) {
+ .flow-text {
+ font-size: 1.656rem;
+ }
}
- .mdi-av-loop:before {
- content: "\e6ac";
+ @media only screen and (min-width: 570px) {
+ .flow-text {
+ line-height: 2.776rem;
+ }
}
- .mdi-av-mic:before {
- content: "\e6ad";
+ @media only screen and (min-width: 960px) {
+ .flow-text {
+ font-size: 1.68rem;
+ }
}
- .mdi-av-mic-none:before {
- content: "\e6ae";
+ @media only screen and (min-width: 600px) {
+ .flow-text {
+ line-height: 2.88rem;
+ }
}
- .mdi-av-mic-off:before {
- content: "\e6af";
+ .card-panel {
+ padding: 20px;
+ margin: 0.5rem 0 1rem 0;
+ border-radius: 2px;
+ background-color: #fff;
}
- .mdi-av-movie:before {
- content: "\e6b0";
+ .card {
+ position: relative;
+ overflow: hidden;
+ margin: 0.5rem 0 1rem 0;
+ background-color: #fff;
+ border-radius: 2px;
}
- .mdi-av-my-library-add:before {
- content: "\e6b1";
+ .card .card-title {
+ color: #fff;
+ font-size: 24px;
+ font-weight: 300;
}
- .mdi-av-my-library-books:before {
- content: "\e6b2";
+ .card .card-title.activator {
+ cursor: pointer;
}
- .mdi-av-my-library-music:before {
- content: "\e6b3";
+ .card.small, .card.medium, .card.large {
+ position: relative;
}
- .mdi-av-new-releases:before {
- content: "\e6b4";
+ .card.small .card-image, .card.medium .card-image, .card.large .card-image {
+ overflow: hidden;
}
- .mdi-av-not-interested:before {
- content: "\e6b5";
+ .card.small .card-content, .card.medium .card-content, .card.large .card-content {
+ overflow: hidden;
}
- .mdi-av-pause:before {
- content: "\e6b6";
+ .card.small .card-action, .card.medium .card-action, .card.large .card-action {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
}
- .mdi-av-pause-circle-fill:before {
- content: "\e6b7";
+ .card.small {
+ height: 300px;
}
- .mdi-av-pause-circle-outline:before {
- content: "\e6b8";
+ .card.small .card-image {
+ height: 150px;
}
- .mdi-av-play-arrow:before {
- content: "\e6b9";
+ .card.small .card-content {
+ height: 150px;
}
- .mdi-av-play-circle-fill:before {
- content: "\e6ba";
+ .card.medium {
+ height: 400px;
}
- .mdi-av-play-circle-outline:before {
- content: "\e6bb";
+ .card.medium .card-image {
+ height: 250px;
}
- .mdi-av-playlist-add:before {
- content: "\e6bc";
+ .card.medium .card-content {
+ height: 150px;
}
- .mdi-av-play-shopping-bag:before {
- content: "\e6bd";
+ .card.large {
+ height: 500px;
}
- .mdi-av-queue:before {
- content: "\e6be";
+ .card.large .card-image {
+ height: 330px;
}
- .mdi-av-queue-music:before {
- content: "\e6bf";
+ .card.large .card-content {
+ height: 170px;
}
- .mdi-av-radio:before {
- content: "\e6c0";
+ .card .card-image {
+ position: relative;
}
- .mdi-av-recent-actors:before {
- content: "\e6c1";
+ .card .card-image img {
+ border-radius: 2px 2px 0 0;
+ position: relative;
+ left: 0;
+ right: 0;
+ top: 0;
+ bottom: 0;
+ width: 100%;
}
- .mdi-av-repeat:before {
- content: "\e6c2";
+ .card .card-image .card-title {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ padding: 20px;
}
- .mdi-av-repeat-one:before {
- content: "\e6c3";
+ .card .card-content {
+ padding: 20px;
+ border-radius: 0 0 2px 2px;
}
- .mdi-av-replay:before {
- content: "\e6c4";
+ .card .card-content p {
+ margin: 0;
+ color: inherit;
}
- .mdi-av-shuffle:before {
- content: "\e6c5";
+ .card .card-content .card-title {
+ line-height: 48px;
}
- .mdi-av-skip-next:before {
- content: "\e6c6";
+ .card .card-action {
+ border-top: 1px solid rgba(160, 160, 160, 0.2);
+ padding: 20px;
}
- .mdi-av-skip-previous:before {
- content: "\e6c7";
+ .card .card-action a {
+ color: #ffab40;
+ margin-right: 20px;
+ -webkit-transition: color .3s ease;
+ -moz-transition: color .3s ease;
+ -o-transition: color .3s ease;
+ -ms-transition: color .3s ease;
+ transition: color .3s ease;
+ text-transform: uppercase;
}
- .mdi-av-snooze:before {
- content: "\e6c8";
+ .card .card-action a:hover {
+ color: #ffd8a6;
}
- .mdi-av-stop:before {
- content: "\e6c9";
+ .card .card-reveal {
+ padding: 20px;
+ position: absolute;
+ background-color: #FFF;
+ width: 100%;
+ overflow-y: auto;
+ top: 100%;
+ height: 100%;
+ z-index: 1;
+ display: none;
}
- .mdi-av-subtitles:before {
- content: "\e6ca";
+ .card .card-reveal .card-title {
+ cursor: pointer;
+ display: block;
}
- .mdi-av-surround-sound:before {
- content: "\e6cb";
- }
-
- .mdi-av-videocam:before {
- content: "\e6cc";
+ #toast-container {
+ display: block;
+ position: fixed;
+ z-index: 1001;
}
- .mdi-av-videocam-off:before {
- content: "\e6cd";
+ @media only screen and (max-width: 600px) {
+ #toast-container {
+ min-width: 100%;
+ bottom: 0%;
+ }
}
- .mdi-av-video-collection:before {
- content: "\e6ce";
+ @media only screen and (min-width: 601px) and (max-width: 992px) {
+ #toast-container {
+ min-width: 30%;
+ left: 5%;
+ bottom: 7%;
+ }
}
- .mdi-av-volume-down:before {
- content: "\e6cf";
+ @media only screen and (min-width: 993px) {
+ #toast-container {
+ min-width: 8%;
+ top: 10%;
+ right: 7%;
+ }
}
- .mdi-av-volume-mute:before {
- content: "\e6d0";
+ .toast {
+ border-radius: 2px;
+ top: 0;
+ width: auto;
+ clear: both;
+ margin-top: 10px;
+ position: relative;
+ max-width: 100%;
+ height: 48px;
+ line-height: 48px;
+ background-color: #323232;
+ padding: 0 25px;
+ font-size: 1.1rem;
+ font-weight: 300;
+ color: #fff;
+ display: -webkit-box;
+ display: -moz-box;
+ display: -ms-flexbox;
+ display: -webkit-flex;
+ display: flex;
+ -webkit-flex-align: center;
+ -ms-flex-align: center;
+ -webkit-align-items: center;
+ align-items: center;
+ -webkit-justify-content: space-between;
+ justify-content: space-between;
}
- .mdi-av-volume-off:before {
- content: "\e6d1";
+ .toast .btn, .toast .btn-large, .toast .btn-flat {
+ margin: 0;
+ margin-left: 3rem;
}
- .mdi-av-volume-up:before {
- content: "\e6d2";
+ .toast.rounded {
+ border-radius: 24px;
}
- .mdi-av-web:before {
- content: "\e6d3";
+ @media only screen and (max-width: 600px) {
+ .toast {
+ width: 100%;
+ border-radius: 0;
+ }
}
- .mdi-communication-business:before {
- content: "\e6d4";
+ @media only screen and (min-width: 601px) and (max-width: 992px) {
+ .toast {
+ float: left;
+ }
}
- .mdi-communication-call:before {
- content: "\e6d5";
+ @media only screen and (min-width: 993px) {
+ .toast {
+ float: right;
+ }
}
- .mdi-communication-call-end:before {
- content: "\e6d6";
+ .tabs {
+ position: relative;
+ height: 48px;
+ background-color: #fff;
+ margin: 0 auto;
+ width: 100%;
+ white-space: nowrap;
}
- .mdi-communication-call-made:before {
- content: "\e6d7";
+ .tabs .tab {
+ display: block;
+ float: left;
+ text-align: center;
+ line-height: 48px;
+ height: 48px;
+ padding: 0 20px;
+ margin: 0;
+ text-transform: uppercase;
+ letter-spacing: .8px;
+ width: 15%;
}
- .mdi-communication-call-merge:before {
- content: "\e6d8";
+ .tabs .tab a {
+ color: #ee6e73;
+ display: block;
+ width: 100%;
+ height: 100%;
+ -webkit-transition: color .28s ease;
+ -moz-transition: color .28s ease;
+ -o-transition: color .28s ease;
+ -ms-transition: color .28s ease;
+ transition: color .28s ease;
}
- .mdi-communication-call-missed:before {
- content: "\e6d9";
+ .tabs .tab a:hover {
+ color: #f9c9cb;
}
- .mdi-communication-call-received:before {
- content: "\e6da";
+ .tabs .indicator {
+ position: absolute;
+ bottom: 0;
+ height: 2px;
+ background-color: #f6b2b5;
+ will-change: left, right;
}
- .mdi-communication-call-split:before {
- content: "\e6db";
+ .tabs .tab {
+ padding: 0;
}
- .mdi-communication-chat:before {
- content: "\e6dc";
+ .material-tooltip {
+ padding: 10px 8px;
+ font-size: 1rem;
+ z-index: 1000;
+ background-color: transparent;
+ border-radius: 2px;
+ color: #fff;
+ min-height: 36px;
+ line-height: 1rem;
+ opacity: 0;
+ display: none;
+ position: absolute;
+ text-align: center;
+ overflow: hidden;
+ left: 0;
+ top: 0;
+ will-change: top, left;
}
- .mdi-communication-clear-all:before {
- content: "\e6dd";
+ .backdrop {
+ position: absolute;
+ opacity: 0;
+ display: none;
+ height: 7px;
+ width: 14px;
+ border-radius: 0 0 14px 14px;
+ background-color: #323232;
+ z-index: -1;
+ -webkit-transform-origin: 50% 10%;
+ -moz-transform-origin: 50% 10%;
+ -ms-transform-origin: 50% 10%;
+ -o-transform-origin: 50% 10%;
+ transform-origin: 50% 10%;
+ will-change: transform, opacity;
}
- .mdi-communication-comment:before {
- content: "\e6de";
+ .btn, .btn-large, .btn-flat {
+ border: none;
+ border-radius: 2px;
+ display: inline-block;
+ height: 36px;
+ line-height: 36px;
+ outline: 0;
+ padding: 0 2rem;
+ text-transform: uppercase;
+ vertical-align: middle;
+ -webkit-tap-highlight-color: transparent;
}
- .mdi-communication-contacts:before {
- content: "\e6df";
+ .btn.disabled, .disabled.btn-large, .btn-floating.disabled, .btn-large.disabled, .btn:disabled, .btn-large:disabled, .btn-large:disabled, .btn-floating:disabled {
+ background-color: #DFDFDF;
+ box-shadow: none;
+ color: #9F9F9F;
+ cursor: default;
}
- .mdi-communication-dialer-sip:before {
- content: "\e6e0";
+ .btn.disabled *, .disabled.btn-large *, .btn-floating.disabled *, .btn-large.disabled *, .btn:disabled *, .btn-large:disabled *, .btn-large:disabled *, .btn-floating:disabled * {
+ pointer-events: none;
}
- .mdi-communication-dialpad:before {
- content: "\e6e1";
+ .btn.disabled:hover, .disabled.btn-large:hover, .btn-floating.disabled:hover, .btn-large.disabled:hover, .btn:disabled:hover, .btn-large:disabled:hover, .btn-large:disabled:hover, .btn-floating:disabled:hover {
+ background-color: #DFDFDF;
+ color: #9F9F9F;
}
- .mdi-communication-dnd-on:before {
- content: "\e6e2";
+ .btn i, .btn-large i, .btn-floating i, .btn-large i, .btn-flat i {
+ font-size: 1.3rem;
+ line-height: inherit;
}
- .mdi-communication-email:before {
- content: "\e6e3";
+ .btn, .btn-large {
+ text-decoration: none;
+ color: #FFF;
+ background-color: #26a69a;
+ text-align: center;
+ letter-spacing: .5px;
+ -webkit-transition: .2s ease-out;
+ -moz-transition: .2s ease-out;
+ -o-transition: .2s ease-out;
+ -ms-transition: .2s ease-out;
+ transition: .2s ease-out;
+ cursor: pointer;
}
- .mdi-communication-forum:before {
- content: "\e6e4";
+ .btn:hover, .btn-large:hover {
+ background-color: #2bbbad;
}
- .mdi-communication-import-export:before {
- content: "\e6e5";
+ .btn-floating {
+ display: inline-block;
+ color: #FFF;
+ position: relative;
+ overflow: hidden;
+ z-index: 1;
+ width: 37px;
+ height: 37px;
+ line-height: 37px;
+ padding: 0;
+ background-color: #26a69a;
+ border-radius: 50%;
+ transition: .3s;
+ cursor: pointer;
+ vertical-align: middle;
}
- .mdi-communication-invert-colors-off:before {
- content: "\e6e6";
+ .btn-floating i {
+ width: inherit;
+ display: inline-block;
+ text-align: center;
+ color: #FFF;
+ font-size: 1.6rem;
+ line-height: 37px;
}
- .mdi-communication-invert-colors-on:before {
- content: "\e6e7";
+ .btn-floating:before {
+ border-radius: 0;
}
- .mdi-communication-live-help:before {
- content: "\e6e8";
+ .btn-floating.btn-large {
+ width: 55.5px;
+ height: 55.5px;
}
- .mdi-communication-location-off:before {
- content: "\e6e9";
+ .btn-floating.btn-large i {
+ line-height: 55.5px;
}
- .mdi-communication-location-on:before {
- content: "\e6ea";
+ button.btn-floating {
+ border: none;
}
- .mdi-communication-message:before {
- content: "\e6eb";
+ .fixed-action-btn {
+ position: fixed;
+ right: 23px;
+ bottom: 23px;
+ padding-top: 15px;
+ margin-bottom: 0;
+ z-index: 998;
}
- .mdi-communication-messenger:before {
- content: "\e6ec";
+ .fixed-action-btn ul {
+ left: 0;
+ right: 0;
+ text-align: center;
+ position: absolute;
+ bottom: 64px;
}
- .mdi-communication-no-sim:before {
- content: "\e6ed";
+ .fixed-action-btn ul li {
+ margin-bottom: 15px;
}
- .mdi-communication-phone:before {
- content: "\e6ee";
+ .fixed-action-btn ul a.btn-floating {
+ opacity: 0;
}
- .mdi-communication-portable-wifi-off:before {
- content: "\e6ef";
+ .btn-flat {
+ box-shadow: none;
+ background-color: transparent;
+ color: #343434;
+ cursor: pointer;
}
- .mdi-communication-quick-contacts-dialer:before {
- content: "\e6f0";
+ .btn-flat.disabled {
+ color: #b3b3b3;
+ cursor: default;
}
- .mdi-communication-quick-contacts-mail:before {
- content: "\e6f1";
+ .btn-large {
+ height: 54px;
+ line-height: 56px;
}
- .mdi-communication-ring-volume:before {
- content: "\e6f2";
+ .btn-large i {
+ font-size: 1.6rem;
}
- .mdi-communication-stay-current-landscape:before {
- content: "\e6f3";
+ .dropdown-content {
+ background-color: #FFFFFF;
+ margin: 0;
+ display: none;
+ min-width: 100px;
+ max-height: 650px;
+ overflow-y: auto;
+ opacity: 0;
+ position: absolute;
+ white-space: nowrap;
+ z-index: 1;
+ will-change: width, height;
}
- .mdi-communication-stay-current-portrait:before {
- content: "\e6f4";
+ .dropdown-content li {
+ clear: both;
+ color: rgba(0, 0, 0, 0.87);
+ cursor: pointer;
+ line-height: 1.5rem;
+ width: 100%;
+ text-align: left;
+ text-transform: none;
}
- .mdi-communication-stay-primary-landscape:before {
- content: "\e6f5";
- }
-
- .mdi-communication-stay-primary-portrait:before {
- content: "\e6f6";
- }
-
- .mdi-communication-swap-calls:before {
- content: "\e6f7";
- }
-
- .mdi-communication-textsms:before {
- content: "\e6f8";
- }
-
- .mdi-communication-voicemail:before {
- content: "\e6f9";
+ .dropdown-content li:hover, .dropdown-content li.active {
+ background-color: #eee;
}
- .mdi-communication-vpn-key:before {
- content: "\e6fa";
+ .dropdown-content li > a, .dropdown-content li > span {
+ font-size: 1.2rem;
+ color: #26a69a;
+ display: block;
+ padding: 1rem 1rem;
}
- .mdi-content-add:before {
- content: "\e6fb";
+ /*!
+ * Waves v0.6.0
+ * 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 {
+ position: relative;
+ cursor: pointer;
+ display: inline-block;
+ overflow: hidden;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -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 .3s ease-out;
+ -moz-transition: all .3s ease-out;
+ -o-transition: all .3s ease-out;
+ -ms-transition: all .3s ease-out;
+ transition: all .3s ease-out;
}
- .mdi-content-add-box:before {
- content: "\e6fc";
+ .waves-effect .waves-ripple {
+ position: absolute;
+ border-radius: 50%;
+ width: 20px;
+ height: 20px;
+ margin-top: -10px;
+ margin-left: -10px;
+ opacity: 0;
+ background: rgba(0, 0, 0, 0.2);
+ -webkit-transition: all 0.7s ease-out;
+ -moz-transition: all 0.7s ease-out;
+ -o-transition: all 0.7s ease-out;
+ -ms-transition: all 0.7s ease-out;
+ transition: all 0.7s ease-out;
+ -webkit-transition-property: -webkit-transform, opacity;
+ -moz-transition-property: -moz-transform, opacity;
+ -o-transition-property: -o-transform, opacity;
+ transition-property: transform, opacity;
+ -webkit-transform: scale(0);
+ -moz-transform: scale(0);
+ -ms-transform: scale(0);
+ -o-transform: scale(0);
+ transform: scale(0);
+ pointer-events: none;
}
- .mdi-content-add-circle:before {
- content: "\e6fd";
+ .waves-effect.waves-light .waves-ripple {
+ background-color: rgba(255, 255, 255, 0.45);
}
- .mdi-content-add-circle-outline:before {
- content: "\e6fe";
+ .waves-effect.waves-red .waves-ripple {
+ background-color: rgba(244, 67, 54, 0.7);
}
- .mdi-content-archive:before {
- content: "\e6ff";
+ .waves-effect.waves-yellow .waves-ripple {
+ background-color: rgba(255, 235, 59, 0.7);
}
- .mdi-content-backspace:before {
- content: "\e700";
+ .waves-effect.waves-orange .waves-ripple {
+ background-color: rgba(255, 152, 0, 0.7);
}
- .mdi-content-block:before {
- content: "\e701";
+ .waves-effect.waves-purple .waves-ripple {
+ background-color: rgba(156, 39, 176, 0.7);
}
- .mdi-content-clear:before {
- content: "\e702";
+ .waves-effect.waves-green .waves-ripple {
+ background-color: rgba(76, 175, 80, 0.7);
}
- .mdi-content-content-copy:before {
- content: "\e703";
+ .waves-effect.waves-teal .waves-ripple {
+ background-color: rgba(0, 150, 136, 0.7);
}
- .mdi-content-content-cut:before {
- content: "\e704";
+ .waves-notransition {
+ -webkit-transition: none !important;
+ -moz-transition: none !important;
+ -o-transition: none !important;
+ -ms-transition: none !important;
+ transition: none !important;
}
- .mdi-content-content-paste:before {
- content: "\e705";
+ .waves-circle {
+ -webkit-transform: translateZ(0);
+ -moz-transform: translateZ(0);
+ -ms-transform: translateZ(0);
+ -o-transform: translateZ(0);
+ transform: translateZ(0);
+ -webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%);
}
- .mdi-content-create:before {
- content: "\e706";
+ .waves-input-wrapper {
+ border-radius: 0.2em;
+ vertical-align: bottom;
}
- .mdi-content-drafts:before {
- content: "\e707";
+ .waves-input-wrapper .waves-button-input {
+ position: relative;
+ top: 0;
+ left: 0;
+ z-index: 1;
}
- .mdi-content-filter-list:before {
- content: "\e708";
+ .waves-circle {
+ text-align: center;
+ width: 2.5em;
+ height: 2.5em;
+ line-height: 2.5em;
+ border-radius: 50%;
+ -webkit-mask-image: none;
}
- .mdi-content-flag:before {
- content: "\e709";
+ .waves-block {
+ display: block;
}
- .mdi-content-forward:before {
- content: "\e70a";
+ /* Firefox Bug: link not triggered */
+ a.waves-effect .waves-ripple {
+ z-index: -1;
}
- .mdi-content-gesture:before {
- content: "\e70b";
+ .modal {
+ display: none;
+ position: fixed;
+ left: 0;
+ right: 0;
+ background-color: #fafafa;
+ padding: 0;
+ max-height: 70%;
+ width: 55%;
+ margin: auto;
+ overflow-y: auto;
+ z-index: 1000;
+ border-radius: 2px;
+ -webkit-transform: translate(0);
+ -moz-transform: translate(0);
+ -ms-transform: translate(0);
+ -o-transform: translate(0);
+ transform: translate(0);
+ will-change: top, opacity;
}
- .mdi-content-inbox:before {
- content: "\e70c";
+ @media only screen and (max-width: 992px) {
+ .modal {
+ width: 80%;
+ }
}
- .mdi-content-link:before {
- content: "\e70d";
+ .modal h1, .modal h2, .modal h3, .modal h4 {
+ margin-top: 0;
}
- .mdi-content-mail:before {
- content: "\e70e";
+ .modal .modal-content {
+ padding: 24px;
}
- .mdi-content-markunread:before {
- content: "\e70f";
+ .modal .modal-footer {
+ border-radius: 0 0 2px 2px;
+ background-color: #fafafa;
+ padding: 4px 6px;
+ height: 56px;
+ width: 100%;
}
- .mdi-content-redo:before {
- content: "\e710";
+ .modal .modal-footer .btn, .modal .modal-footer .btn-large, .modal .modal-footer .btn-flat {
+ float: right;
+ margin: 6px 0;
}
- .mdi-content-remove:before {
- content: "\e711";
+ #lean-overlay {
+ position: fixed;
+ z-index: 999;
+ top: 0;
+ left: 0;
+ bottom: 0;
+ right: 0;
+ height: 115%;
+ width: 100%;
+ background: #000;
+ display: none;
+ will-change: opacity;
}
- .mdi-content-remove-circle:before {
- content: "\e712";
+ .modal.modal-fixed-footer {
+ padding: 0;
+ height: 70%;
}
- .mdi-content-remove-circle-outline:before {
- content: "\e713";
+ .modal.modal-fixed-footer .modal-content {
+ position: fixed;
+ max-height: 100%;
+ padding-bottom: 64px;
+ width: 100%;
+ overflow-y: auto;
}
- .mdi-content-reply:before {
- content: "\e714";
+ .modal.modal-fixed-footer .modal-footer {
+ border-top: 1px solid rgba(0, 0, 0, 0.1);
+ position: fixed;
+ bottom: 0;
}
- .mdi-content-reply-all:before {
- content: "\e715";
+ .modal.bottom-sheet {
+ top: auto;
+ bottom: -100%;
+ margin: 0;
+ width: 100%;
+ max-height: 45%;
+ border-radius: 0;
+ will-change: bottom, opacity;
}
- .mdi-content-report:before {
- content: "\e716";
+ .collapsible {
+ border-top: 1px solid #ddd;
+ border-right: 1px solid #ddd;
+ border-left: 1px solid #ddd;
+ margin: 0.5rem 0 1rem 0;
}
- .mdi-content-save:before {
- content: "\e717";
+ .collapsible-header {
+ display: block;
+ cursor: pointer;
+ height: 3rem;
+ line-height: 3rem;
+ padding: 0 1rem;
+ background-color: #fff;
+ border-bottom: 1px solid #ddd;
}
- .mdi-content-select-all:before {
- content: "\e718";
+ .collapsible-header i {
+ width: 2rem;
+ font-size: 1.6rem;
+ line-height: 3rem;
+ display: block;
+ float: left;
+ text-align: center;
+ margin-right: 1rem;
}
- .mdi-content-send:before {
- content: "\e719";
+ .collapsible-body {
+ overflow: hidden;
+ display: none;
+ border-bottom: 1px solid #ddd;
+ -webkit-box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ box-sizing: border-box;
}
- .mdi-content-sort:before {
- content: "\e71a";
+ .collapsible-body p {
+ margin: 0;
+ padding: 2rem;
}
- .mdi-content-text-format:before {
- content: "\e71b";
+ .side-nav .collapsible {
+ border: none;
+ box-shadow: none;
}
- .mdi-content-undo:before {
- content: "\e71c";
+ .side-nav .collapsible li {
+ padding: 0;
}
- .mdi-device-access-alarm:before {
- content: "\e71d";
+ .side-nav .collapsible-header {
+ background-color: transparent;
+ border: none;
+ line-height: inherit;
+ height: inherit;
+ margin: 0 1rem;
}
- .mdi-device-access-alarms:before {
- content: "\e71e";
+ .side-nav .collapsible-header i {
+ line-height: inherit;
}
- .mdi-device-access-time:before {
- content: "\e71f";
+ .side-nav .collapsible-body {
+ border: 0;
+ background-color: #FFF;
}
- .mdi-device-add-alarm:before {
- content: "\e720";
+ .side-nav .collapsible-body li a {
+ margin: 0 1rem 0 2rem;
}
- .mdi-device-airplanemode-off:before {
- content: "\e721";
+ .collapsible.popout {
+ border: none;
+ box-shadow: none;
}
- .mdi-device-airplanemode-on:before {
- content: "\e722";
+ .collapsible.popout > li {
+ box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
+ transform: scaleX(.92) translate3d(0, 0, 0);
+ transition: margin .35s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform .35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
- .mdi-device-battery-20:before {
- content: "\e723";
+ .collapsible.popout > li:hover {
+ will-change: margin, transform;
}
- .mdi-device-battery-30:before {
- content: "\e724";
+ .collapsible.popout > li.active {
+ box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15);
+ margin: 16px 0;
+ transform: scaleX(1) translate3d(0, 0, 0);
}
- .mdi-device-battery-50:before {
- content: "\e725";
+ .materialboxed {
+ cursor: zoom-in;
+ position: relative;
+ -webkit-transition: opacity .4s;
+ -moz-transition: opacity .4s;
+ -o-transition: opacity .4s;
+ -ms-transition: opacity .4s;
+ transition: opacity .4s;
}
- .mdi-device-battery-60:before {
- content: "\e726";
+ .materialboxed:hover {
+ will-change: left, top, width, height;
}
- .mdi-device-battery-80:before {
- content: "\e727";
+ .materialboxed:hover:not(.active) {
+ opacity: .8;
}
- .mdi-device-battery-90:before {
- content: "\e728";
+ .materialboxed.active {
+ cursor: zoom-out;
}
- .mdi-device-battery-alert:before {
- content: "\e729";
+ #materialbox-overlay {
+ position: fixed;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ background-color: #292929;
+ z-index: 999;
+ will-change: opacity;
}
- .mdi-device-battery-charging-20:before {
- content: "\e72a";
+ .materialbox-caption {
+ position: fixed;
+ display: none;
+ color: #fff;
+ line-height: 50px;
+ bottom: 0;
+ width: 100%;
+ text-align: center;
+ padding: 0% 15%;
+ height: 50px;
+ z-index: 1000;
+ -webkit-font-smoothing: antialiased;
}
- .mdi-device-battery-charging-30:before {
- content: "\e72b";
+ /* Remove Focus Boxes */
+ select:focus {
+ outline: 1px solid #c9f3ef;
}
- .mdi-device-battery-charging-50:before {
- content: "\e72c";
+ button:focus {
+ outline: none;
+ background-color: #2ab7a9;
}
- .mdi-device-battery-charging-60:before {
- content: "\e72d";
+ label {
+ font-size: 0.8rem;
+ color: #9e9e9e;
}
- .mdi-device-battery-charging-80:before {
- content: "\e72e";
+ /***************************
+ Text Inputs + Textarea
+****************************/
+ ::-webkit-input-placeholder {
+ color: #d1d1d1;
}
- .mdi-device-battery-charging-90:before {
- content: "\e72f";
+ :-moz-placeholder {
+ /* Firefox 18- */
+ color: #d1d1d1;
}
- .mdi-device-battery-charging-full:before {
- content: "\e730";
+ ::-moz-placeholder {
+ /* Firefox 19+ */
+ color: #d1d1d1;
}
- .mdi-device-battery-full:before {
- content: "\e731";
+ :-ms-input-placeholder {
+ color: #d1d1d1;
}
- .mdi-device-battery-std:before {
- content: "\e732";
+ input[type=text], input[type=password], input[type=email], input[type=url], input[type=time], input[type=date], input[type=datetime-local], input[type=tel], input[type=number], input[type=search], textarea.materialize-textarea {
+ background-color: transparent;
+ border: none;
+ border-bottom: 1px solid #9e9e9e;
+ border-radius: 0;
+ outline: none;
+ height: 3rem;
+ width: 100%;
+ font-size: 1rem;
+ margin: 0 0 15px 0;
+ padding: 0;
+ box-shadow: none;
+ -webkit-box-sizing: content-box;
+ -moz-box-sizing: content-box;
+ box-sizing: content-box;
+ transition: all .3s;
}
- .mdi-device-battery-unknown:before {
- content: "\e733";
+ input[type=text]:disabled, input[type=text][readonly="readonly"], input[type=password]:disabled, input[type=password][readonly="readonly"], input[type=email]:disabled, input[type=email][readonly="readonly"], input[type=url]:disabled, input[type=url][readonly="readonly"], input[type=time]:disabled, input[type=time][readonly="readonly"], input[type=date]:disabled, input[type=date][readonly="readonly"], input[type=datetime-local]:disabled, input[type=datetime-local][readonly="readonly"], input[type=tel]:disabled, input[type=tel][readonly="readonly"], input[type=number]:disabled, input[type=number][readonly="readonly"], input[type=search]:disabled, input[type=search][readonly="readonly"], textarea.materialize-textarea:disabled, textarea.materialize-textarea[readonly="readonly"] {
+ color: rgba(0, 0, 0, 0.26);
+ border-bottom: 1px dotted rgba(0, 0, 0, 0.26);
}
- .mdi-device-bluetooth:before {
- content: "\e734";
+ input[type=text]:disabled + label, input[type=text][readonly="readonly"] + label, input[type=password]:disabled + label, input[type=password][readonly="readonly"] + label, input[type=email]:disabled + label, input[type=email][readonly="readonly"] + label, input[type=url]:disabled + label, input[type=url][readonly="readonly"] + label, input[type=time]:disabled + label, input[type=time][readonly="readonly"] + label, input[type=date]:disabled + label, input[type=date][readonly="readonly"] + label, input[type=datetime-local]:disabled + label, input[type=datetime-local][readonly="readonly"] + label, input[type=tel]:disabled + label, input[type=tel][readonly="readonly"] + label, input[type=number]:disabled + label, input[type=number][readonly="readonly"] + label, input[type=search]:disabled + label, input[type=search][readonly="readonly"] + label, textarea.materialize-textarea:disabled + label, textarea.materialize-textarea[readonly="readonly"] + label {
+ color: rgba(0, 0, 0, 0.26);
}
- .mdi-device-bluetooth-connected:before {
- content: "\e735";
+ input[type=text]:focus:not([readonly]), input[type=password]:focus:not([readonly]), input[type=email]:focus:not([readonly]), input[type=url]:focus:not([readonly]), input[type=time]:focus:not([readonly]), input[type=date]:focus:not([readonly]), input[type=datetime-local]:focus:not([readonly]), input[type=tel]:focus:not([readonly]), input[type=number]:focus:not([readonly]), input[type=search]:focus:not([readonly]), textarea.materialize-textarea:focus:not([readonly]) {
+ border-bottom: 1px solid #26a69a;
+ box-shadow: 0 1px 0 0 #26a69a;
}
- .mdi-device-bluetooth-disabled:before {
- content: "\e736";
+ input[type=text]:focus:not([readonly]) + label, input[type=password]:focus:not([readonly]) + label, input[type=email]:focus:not([readonly]) + label, input[type=url]:focus:not([readonly]) + label, input[type=time]:focus:not([readonly]) + label, input[type=date]:focus:not([readonly]) + label, input[type=datetime-local]:focus:not([readonly]) + label, input[type=tel]:focus:not([readonly]) + label, input[type=number]:focus:not([readonly]) + label, input[type=search]:focus:not([readonly]) + label, textarea.materialize-textarea:focus:not([readonly]) + label {
+ color: #26a69a;
}
- .mdi-device-bluetooth-searching:before {
- content: "\e737";
+ input[type=text].valid, input[type=text]:focus.valid, input[type=password].valid, input[type=password]:focus.valid, input[type=email].valid, input[type=email]:focus.valid, input[type=url].valid, input[type=url]:focus.valid, input[type=time].valid, input[type=time]:focus.valid, input[type=date].valid, input[type=date]:focus.valid, input[type=datetime-local].valid, input[type=datetime-local]:focus.valid, input[type=tel].valid, input[type=tel]:focus.valid, input[type=number].valid, input[type=number]:focus.valid, input[type=search].valid, input[type=search]:focus.valid, textarea.materialize-textarea.valid, textarea.materialize-textarea:focus.valid {
+ border-bottom: 1px solid #4CAF50;
+ box-shadow: 0 1px 0 0 #4CAF50;
}
- .mdi-device-brightness-auto:before {
- content: "\e738";
+ input[type=text].invalid, input[type=text]:focus.invalid, input[type=password].invalid, input[type=password]:focus.invalid, input[type=email].invalid, input[type=email]:focus.invalid, input[type=url].invalid, input[type=url]:focus.invalid, input[type=time].invalid, input[type=time]:focus.invalid, input[type=date].invalid, input[type=date]:focus.invalid, input[type=datetime-local].invalid, input[type=datetime-local]:focus.invalid, input[type=tel].invalid, input[type=tel]:focus.invalid, input[type=number].invalid, input[type=number]:focus.invalid, input[type=search].invalid, input[type=search]:focus.invalid, textarea.materialize-textarea.invalid, textarea.materialize-textarea:focus.invalid {
+ border-bottom: 1px solid #F44336;
+ box-shadow: 0 1px 0 0 #F44336;
}
- .mdi-device-brightness-high:before {
- content: "\e739";
+ .input-field {
+ position: relative;
+ margin-top: 1rem;
}
- .mdi-device-brightness-low:before {
- content: "\e73a";
+ .input-field label {
+ color: #9e9e9e;
+ position: absolute;
+ top: 0.8rem;
+ left: 0.75rem;
+ font-size: 1rem;
+ cursor: text;
+ -webkit-transition: .2s ease-out;
+ -moz-transition: .2s ease-out;
+ -o-transition: .2s ease-out;
+ -ms-transition: .2s ease-out;
+ transition: .2s ease-out;
}
- .mdi-device-brightness-medium:before {
- content: "\e73b";
+ .input-field label.active {
+ font-size: 0.8rem;
+ -webkit-transform: translateY(-140%);
+ -moz-transform: translateY(-140%);
+ -ms-transform: translateY(-140%);
+ -o-transform: translateY(-140%);
+ transform: translateY(-140%);
}
- .mdi-device-data-usage:before {
- content: "\e73c";
+ .input-field .prefix {
+ position: absolute;
+ width: 3rem;
+ font-size: 2rem;
+ -webkit-transition: color .2s;
+ -moz-transition: color .2s;
+ -o-transition: color .2s;
+ -ms-transition: color .2s;
+ transition: color .2s;
}
- .mdi-device-developer-mode:before {
- content: "\e73d";
+ .input-field .prefix.active {
+ color: #26a69a;
}
- .mdi-device-devices:before {
- content: "\e73e";
+ .input-field .prefix ~ input, .input-field .prefix ~ textarea {
+ margin-left: 3rem;
+ width: 92%;
+ width: calc(100% - 3rem);
}
- .mdi-device-dvr:before {
- content: "\e73f";
+ .input-field .prefix ~ textarea {
+ padding-top: .8rem;
}
- .mdi-device-gps-fixed:before {
- content: "\e740";
+ .input-field .prefix ~ label {
+ margin-left: 3rem;
}
- .mdi-device-gps-not-fixed:before {
- content: "\e741";
+ @media only screen and (max-width: 992px) {
+ .input-field .prefix ~ input {
+ width: 86%;
+ width: calc(100% - 3rem);
+ }
}
- .mdi-device-gps-off:before {
- content: "\e742";
+ @media only screen and (max-width: 600px) {
+ .input-field .prefix ~ input {
+ width: 80%;
+ width: calc(100% - 3rem);
+ }
}
- .mdi-device-location-disabled:before {
- content: "\e743";
+ .input-field input[type=search] {
+ display: block;
+ line-height: inherit;
+ padding-left: 4rem;
+ width: calc(100% - 4rem);
}
- .mdi-device-location-searching:before {
- content: "\e744";
+ .input-field input[type=search]:focus {
+ background-color: #FFF;
+ border: 0;
+ box-shadow: none;
+ color: #444;
}
- .mdi-device-multitrack-audio:before {
- content: "\e745";
+ .input-field input[type=search]:focus + label i, .input-field input[type=search]:focus ~ .mdi-navigation-close {
+ color: #444;
}
- .mdi-device-network-cell:before {
- content: "\e746";
+ .input-field input[type=search] + label {
+ left: 1rem;
}
- .mdi-device-network-wifi:before {
- content: "\e747";
+ .input-field input[type=search] ~ .mdi-navigation-close {
+ position: absolute;
+ top: 0;
+ right: 1rem;
+ color: transparent;
+ cursor: pointer;
+ font-size: 2rem;
+ transition: .3s color;
}
- .mdi-device-nfc:before {
- content: "\e748";
+ textarea {
+ width: 100%;
+ height: 3rem;
+ background-color: transparent;
}
- .mdi-device-now-wallpaper:before {
- content: "\e749";
+ textarea.materialize-textarea {
+ overflow-y: hidden;
+ /* prevents scroll bar flash */
+ padding: 1.6rem 0;
+ /* prevents text jump on Enter keypress */
+ resize: none;
+ min-height: 3rem;
}
- .mdi-device-now-widgets:before {
- content: "\e74a";
+ .hiddendiv {
+ display: none;
+ white-space: pre-wrap;
+ word-wrap: break-word;
+ overflow-wrap: break-word;
+ /* future version of deprecated 'word-wrap' */
+ padding-top: 1.2rem;
+ /* prevents text jump on Enter keypress */
}
- .mdi-device-screen-lock-landscape:before {
- content: "\e74b";
+ /***************
+ Radio Buttons
+***************/
+ /* Remove default Radio Buttons */
+ [type="radio"]:not(:checked), [type="radio"]:checked {
+ position: absolute;
+ left: -9999px;
+ visibility: hidden;
}
- .mdi-device-screen-lock-portrait:before {
- content: "\e74c";
+ [type="radio"]:not(:checked) + label, [type="radio"]:checked + label {
+ position: relative;
+ padding-left: 35px;
+ cursor: pointer;
+ display: inline-block;
+ height: 25px;
+ line-height: 25px;
+ font-size: 1rem;
+ -webkit-transition: .28s ease;
+ -moz-transition: .28s ease;
+ -o-transition: .28s ease;
+ -ms-transition: .28s ease;
+ transition: .28s ease;
+ -webkit-user-select: none;
+ /* webkit (safari, chrome) browsers */
+ -moz-user-select: none;
+ /* mozilla browsers */
+ -khtml-user-select: none;
+ /* webkit (konqueror) browsers */
+ -ms-user-select: none;
+ /* IE10+ */
}
- .mdi-device-screen-lock-rotation:before {
- content: "\e74d";
+ [type="radio"] + label:before, [type="radio"] + label:after {
+ content: '';
+ position: absolute;
+ left: 0;
+ top: 0;
+ margin: 4px;
+ width: 16px;
+ height: 16px;
+ z-index: 0;
+ -webkit-transition: .28s ease;
+ -moz-transition: .28s ease;
+ -o-transition: .28s ease;
+ -ms-transition: .28s ease;
+ transition: .28s ease;
}
- .mdi-device-screen-rotation:before {
- content: "\e74e";
+ /* Unchecked styles */
+ [type="radio"]:not(:checked) + label:before {
+ border-radius: 50%;
+ border: 2px solid #5a5a5a;
}
- .mdi-device-sd-storage:before {
- content: "\e74f";
+ [type="radio"]:not(:checked) + label:after {
+ border-radius: 50%;
+ border: 2px solid #5a5a5a;
+ z-index: -1;
+ -webkit-transform: scale(0);
+ -moz-transform: scale(0);
+ -ms-transform: scale(0);
+ -o-transform: scale(0);
+ transform: scale(0);
}
- .mdi-device-settings-system-daydream:before {
- content: "\e750";
+ /* Checked styles */
+ [type="radio"]:checked + label:before {
+ border-radius: 50%;
+ border: 2px solid transparent;
}
- .mdi-device-signal-cellular-0-bar:before {
- content: "\e751";
+ [type="radio"]:checked + label:after {
+ border-radius: 50%;
+ border: 2px solid #26a69a;
+ background-color: #26a69a;
+ z-index: 0;
+ -webkit-transform: scale(1.02);
+ -moz-transform: scale(1.02);
+ -ms-transform: scale(1.02);
+ -o-transform: scale(1.02);
+ transform: scale(1.02);
}
- .mdi-device-signal-cellular-1-bar:before {
- content: "\e752";
+ /* Radio With gap */
+ [type="radio"].with-gap:checked + label:before {
+ border-radius: 50%;
+ border: 2px solid #26a69a;
}
- .mdi-device-signal-cellular-2-bar:before {
- content: "\e753";
+ [type="radio"].with-gap:checked + label:after {
+ border-radius: 50%;
+ border: 2px solid #26a69a;
+ background-color: #26a69a;
+ z-index: 0;
+ -webkit-transform: scale(.5);
+ -moz-transform: scale(.5);
+ -ms-transform: scale(.5);
+ -o-transform: scale(.5);
+ transform: scale(.5);
}
- .mdi-device-signal-cellular-3-bar:before {
- content: "\e754";
+ /* Disabled style */
+ [type="radio"]:disabled:not(:checked) + label:before, [type="radio"]:disabled:checked + label:before {
+ background-color: transparent;
+ border-color: rgba(0, 0, 0, 0.26);
}
- .mdi-device-signal-cellular-4-bar:before {
- content: "\e755";
- }
-
- .mdi-device-signal-cellular-connected-no-internet-0-bar:before {
- content: "\e756";
- }
-
- .mdi-device-signal-cellular-connected-no-internet-1-bar:before {
- content: "\e757";
- }
-
- .mdi-device-signal-cellular-connected-no-internet-2-bar:before {
- content: "\e758";
- }
-
- .mdi-device-signal-cellular-connected-no-internet-3-bar:before {
- content: "\e759";
+ [type="radio"]:disabled + label {
+ color: rgba(0, 0, 0, 0.26);
}
- .mdi-device-signal-cellular-connected-no-internet-4-bar:before {
- content: "\e75a";
+ [type="radio"]:disabled:not(:checked) + label:hover:before {
+ border-color: rgba(0, 0, 0, 0.26);
}
- .mdi-device-signal-cellular-no-sim:before {
- content: "\e75b";
+ /***************
+ Checkboxes
+***************/
+ /* CUSTOM CSS CHECKBOXES */
+ form p {
+ margin-bottom: 10px;
+ text-align: left;
}
- .mdi-device-signal-cellular-null:before {
- content: "\e75c";
+ form p:last-child {
+ margin-bottom: 0;
}
- .mdi-device-signal-cellular-off:before {
- content: "\e75d";
+ /* Remove default checkbox */
+ [type="checkbox"]:not(:checked), [type="checkbox"]:checked {
+ position: absolute;
+ left: -9999px;
}
- .mdi-device-signal-wifi-0-bar:before {
- content: "\e75e";
+ [type="checkbox"] {
+ /* checkbox aspect */
}
- .mdi-device-signal-wifi-1-bar:before {
- content: "\e75f";
+ [type="checkbox"] + label {
+ position: relative;
+ padding-left: 35px;
+ cursor: pointer;
+ display: inline-block;
+ height: 25px;
+ line-height: 25px;
+ font-size: 1rem;
+ -webkit-user-select: none;
+ /* webkit (safari, chrome) browsers */
+ -moz-user-select: none;
+ /* mozilla browsers */
+ -khtml-user-select: none;
+ /* webkit (konqueror) browsers */
+ -ms-user-select: none;
+ /* IE10+ */
}
- .mdi-device-signal-wifi-2-bar:before {
- content: "\e760";
+ [type="checkbox"] + label:before {
+ content: '';
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 18px;
+ height: 18px;
+ z-index: 0;
+ border: 2px solid #5a5a5a;
+ border-radius: 1px;
+ margin-top: 2px;
+ -webkit-transition: 0.2s;
+ -moz-transition: 0.2s;
+ -o-transition: 0.2s;
+ -ms-transition: 0.2s;
+ transition: 0.2s;
}
- .mdi-device-signal-wifi-3-bar:before {
- content: "\e761";
+ [type="checkbox"]:not(:checked):disabled + label:before {
+ border: none;
+ background-color: rgba(0, 0, 0, 0.26);
}
- .mdi-device-signal-wifi-4-bar:before {
- content: "\e762";
+ [type="checkbox"]:checked + label:before {
+ top: -4px;
+ left: -3px;
+ width: 12px;
+ height: 22px;
+ border-top: 2px solid transparent;
+ border-left: 2px solid transparent;
+ border-right: 2px solid #26a69a;
+ border-bottom: 2px solid #26a69a;
+ -webkit-transform: rotate(40deg);
+ -moz-transform: rotate(40deg);
+ -ms-transform: rotate(40deg);
+ -o-transform: rotate(40deg);
+ transform: rotate(40deg);
+ -webkit-backface-visibility: hidden;
+ -webkit-transform-origin: 100% 100%;
+ -moz-transform-origin: 100% 100%;
+ -ms-transform-origin: 100% 100%;
+ -o-transform-origin: 100% 100%;
+ transform-origin: 100% 100%;
}
- .mdi-device-signal-wifi-off:before {
- content: "\e763";
+ [type="checkbox"]:checked:disabled + label:before {
+ border-right: 2px solid rgba(0, 0, 0, 0.26);
+ border-bottom: 2px solid rgba(0, 0, 0, 0.26);
}
- .mdi-device-storage:before {
- content: "\e764";
+ /* Indeterminate checkbox */
+ [type="checkbox"]:indeterminate + label:before {
+ left: -10px;
+ top: -11px;
+ width: 10px;
+ height: 22px;
+ border-top: none;
+ border-left: none;
+ border-right: 2px solid #26a69a;
+ border-bottom: none;
+ -webkit-transform: rotate(90deg);
+ -moz-transform: rotate(90deg);
+ -ms-transform: rotate(90deg);
+ -o-transform: rotate(90deg);
+ transform: rotate(90deg);
+ -webkit-backface-visibility: hidden;
+ -webkit-transform-origin: 100% 100%;
+ -moz-transform-origin: 100% 100%;
+ -ms-transform-origin: 100% 100%;
+ -o-transform-origin: 100% 100%;
+ transform-origin: 100% 100%;
}
- .mdi-device-usb:before {
- content: "\e765";
+ [type="checkbox"]:indeterminate:disabled + label:before {
+ border-right: 2px solid rgba(0, 0, 0, 0.26);
+ background-color: transparent;
}
- .mdi-device-wifi-lock:before {
- content: "\e766";
+ [type="checkbox"].filled-in + label:after {
+ border-radius: 2px;
}
- .mdi-device-wifi-tethering:before {
- content: "\e767";
+ [type="checkbox"].filled-in + label:before, [type="checkbox"].filled-in + label:after {
+ content: '';
+ left: 0;
+ position: absolute;
+ /* .1s delay is for check animation */
+ transition: border .25s, background-color .25s, width .2s .1s, height .2s .1s, top .2s .1s, left .2s .1s;
+ z-index: 1;
}
- .mdi-editor-attach-file:before {
- content: "\e768";
+ [type="checkbox"].filled-in:not(:checked) + label:before {
+ width: 0;
+ height: 0;
+ border: 3px solid transparent;
+ left: 6px;
+ top: 10px;
+ -webkit-transform: rotateZ(37deg);
+ transform: rotateZ(37deg);
+ -webkit-transform-origin: 20% 40%;
+ transform-origin: 100% 100%;
}
- .mdi-editor-attach-money:before {
- content: "\e769";
+ [type="checkbox"].filled-in:not(:checked) + label:after {
+ height: 20px;
+ width: 20px;
+ background-color: transparent;
+ border: 2px solid #5a5a5a;
+ top: 0px;
+ z-index: 0;
}
- .mdi-editor-border-all:before {
- content: "\e76a";
+ [type="checkbox"].filled-in:checked + label:before {
+ top: 0;
+ left: 1px;
+ width: 8px;
+ height: 13px;
+ border-top: 2px solid transparent;
+ border-left: 2px solid transparent;
+ border-right: 2px solid #fff;
+ border-bottom: 2px solid #fff;
+ -webkit-transform: rotateZ(37deg);
+ transform: rotateZ(37deg);
+ -webkit-transform-origin: 100% 100%;
+ transform-origin: 100% 100%;
}
- .mdi-editor-border-bottom:before {
- content: "\e76b";
+ [type="checkbox"].filled-in:checked + label:after {
+ top: 0px;
+ width: 20px;
+ height: 20px;
+ border: 2px solid #26a69a;
+ background-color: #26a69a;
+ z-index: 0;
}
- .mdi-editor-border-clear:before {
- content: "\e76c";
+ [type="checkbox"].filled-in:disabled:not(:checked) + label:before {
+ background-color: transparent;
+ border: 2px solid transparent;
}
- .mdi-editor-border-color:before {
- content: "\e76d";
+ [type="checkbox"].filled-in:disabled:not(:checked) + label:after {
+ border-color: transparent;
+ background-color: #BDBDBD;
}
- .mdi-editor-border-horizontal:before {
- content: "\e76e";
+ [type="checkbox"].filled-in:disabled:checked + label:before {
+ background-color: transparent;
}
- .mdi-editor-border-inner:before {
- content: "\e76f";
+ [type="checkbox"].filled-in:disabled:checked + label:after {
+ background-color: #BDBDBD;
+ border-color: #BDBDBD;
}
- .mdi-editor-border-left:before {
- content: "\e770";
+ /***************
+ Switch
+***************/
+ .switch, .switch * {
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -khtml-user-select: none;
+ -ms-user-select: none;
}
- .mdi-editor-border-outer:before {
- content: "\e771";
+ .switch label {
+ cursor: pointer;
}
- .mdi-editor-border-right:before {
- content: "\e772";
+ .switch label input[type=checkbox] {
+ opacity: 0;
+ width: 0;
+ height: 0;
}
- .mdi-editor-border-style:before {
- content: "\e773";
+ .switch label input[type=checkbox]:checked + .lever {
+ background-color: #84c7c1;
}
- .mdi-editor-border-top:before {
- content: "\e774";
+ .switch label input[type=checkbox]:checked + .lever:after {
+ background-color: #26a69a;
}
- .mdi-editor-border-vertical:before {
- content: "\e775";
+ .switch label .lever {
+ content: "";
+ display: inline-block;
+ position: relative;
+ width: 40px;
+ height: 15px;
+ background-color: #818181;
+ border-radius: 15px;
+ margin-right: 10px;
+ transition: background 0.3s ease;
+ vertical-align: middle;
+ margin: 0 16px;
}
- .mdi-editor-format-align-center:before {
- content: "\e776";
+ .switch label .lever:after {
+ content: "";
+ position: absolute;
+ display: inline-block;
+ width: 21px;
+ height: 21px;
+ background-color: #F1F1F1;
+ border-radius: 21px;
+ box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4);
+ left: -5px;
+ top: -3px;
+ transition: left 0.3s ease, background 0.3s ease, box-shadow 0.1s ease;
}
- .mdi-editor-format-align-justify:before {
- content: "\e777";
+ 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);
}
- .mdi-editor-format-align-left:before {
- content: "\e778";
+ 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);
}
- .mdi-editor-format-align-right:before {
- content: "\e779";
+ .switch label input[type=checkbox]:checked + .lever:after {
+ left: 24px;
}
- .mdi-editor-format-bold:before {
- content: "\e77a";
+ .switch input[type=checkbox][disabled] + .lever {
+ cursor: default;
}
- .mdi-editor-format-clear:before {
- content: "\e77b";
+ .switch label input[type=checkbox][disabled] + .lever:after, .switch label input[type=checkbox][disabled]:checked + .lever:after {
+ background-color: #BDBDBD;
}
- .mdi-editor-format-color-fill:before {
- content: "\e77c";
+ /***************
+ Select Field
+***************/
+ .select-label {
+ position: absolute;
}
- .mdi-editor-format-color-reset:before {
- content: "\e77d";
+ .select-wrapper {
+ position: relative;
}
- .mdi-editor-format-color-text:before {
- content: "\e77e";
+ .select-wrapper input.select-dropdown {
+ position: relative;
+ cursor: pointer;
+ background-color: transparent;
+ border: none;
+ border-bottom: 1px solid #9e9e9e;
+ outline: none;
+ height: 3rem;
+ line-height: 3rem;
+ width: 100%;
+ font-size: 1rem;
+ margin: 0 0 15px 0;
+ padding: 0;
+ display: block;
}
- .mdi-editor-format-indent-decrease:before {
- content: "\e77f";
+ .select-wrapper .mdi-navigation-arrow-drop-down {
+ color: initial;
+ position: absolute;
+ right: 0;
+ top: 0;
+ font-size: 23px;
}
- .mdi-editor-format-indent-increase:before {
- content: "\e780";
+ .select-wrapper .mdi-navigation-arrow-drop-down.disabled {
+ color: rgba(0, 0, 0, 0.26);
}
- .mdi-editor-format-italic:before {
- content: "\e781";
+ .select-wrapper + label {
+ position: absolute;
+ top: -14px;
+ font-size: 0.8rem;
}
- .mdi-editor-format-line-spacing:before {
- content: "\e782";
+ select {
+ display: none;
}
- .mdi-editor-format-list-bulleted:before {
- content: "\e783";
+ select.browser-default {
+ display: block;
}
- .mdi-editor-format-list-numbered:before {
- content: "\e784";
+ select:disabled {
+ color: rgba(0, 0, 0, 0.3);
}
- .mdi-editor-format-paint:before {
- content: "\e785";
- }
-
- .mdi-editor-format-quote:before {
- content: "\e786";
+ .select-wrapper input.select-dropdown:disabled {
+ color: rgba(0, 0, 0, 0.3);
+ cursor: default;
+ -webkit-user-select: none;
+ /* webkit (safari, chrome) browsers */
+ -moz-user-select: none;
+ /* mozilla browsers */
+ -ms-user-select: none;
+ /* IE10+ */
+ border-bottom: 1px solid rgba(0, 0, 0, 0.3);
}
- .mdi-editor-format-size:before {
- content: "\e787";
+ .select-wrapper i {
+ color: rgba(0, 0, 0, 0.3);
}
- .mdi-editor-format-strikethrough:before {
- content: "\e788";
+ .select-dropdown li.disabled {
+ color: rgba(0, 0, 0, 0.3);
+ background-color: transparent;
}
- .mdi-editor-functions:before {
- content: "\e789";
+ /***************************
+ Text Inputs + Textarea
+****************************/
+ select {
+ background-color: rgba(255, 255, 255, 0.9);
+ width: 100%;
+ padding: 5px;
+ border: 1px solid #f2f2f2;
+ border-radius: 2px;
+ height: 3rem;
}
- .mdi-editor-format-textdirection-l-to-r:before {
- content: "\e78a";
+ /***************
+ Nav List
+***************/
+ .table-of-contents.fixed {
+ position: fixed;
}
- .mdi-editor-format-underline:before {
- content: "\e78b";
+ .table-of-contents li {
+ padding: 2px 0;
}
- .mdi-editor-format-textdirection-r-to-l:before {
- content: "\e78c";
+ .table-of-contents a {
+ display: inline-block;
+ font-weight: 300;
+ color: #757575;
+ padding-left: 20px;
+ height: 1.5rem;
+ line-height: 1.5rem;
+ letter-spacing: .4;
+ display: inline-block;
}
- .mdi-editor-insert-chart:before {
- content: "\e78d";
+ .table-of-contents a:hover {
+ color: #a8a8a8;
+ padding-left: 19px;
+ border-left: 1px solid #ea4a4f;
}
- .mdi-editor-insert-comment:before {
- content: "\e78e";
+ .table-of-contents a.active {
+ font-weight: 500;
+ padding-left: 18px;
+ border-left: 2px solid #ea4a4f;
}
- .mdi-editor-insert-drive-file:before {
- content: "\e78f";
+ .side-nav {
+ position: fixed;
+ width: 240px;
+ left: -105%;
+ top: 0;
+ margin: 0;
+ height: 100%;
+ height: calc(100% + 60px);
+ height: -moz-calc(100%);
+ padding-bottom: 60px;
+ background-color: #FFF;
+ z-index: 999;
+ overflow-y: auto;
+ will-change: left;
}
- .mdi-editor-insert-emoticon:before {
- content: "\e790";
+ .side-nav.right-aligned {
+ will-change: right;
+ right: -105%;
+ left: auto;
}
- .mdi-editor-insert-invitation:before {
- content: "\e791";
+ .side-nav .collapsible {
+ margin: 0;
}
- .mdi-editor-insert-link:before {
- content: "\e792";
+ .side-nav li {
+ float: none;
+ padding: 0 15px;
}
- .mdi-editor-insert-photo:before {
- content: "\e793";
+ .side-nav li:hover, .side-nav li.active {
+ background-color: #ddd;
}
- .mdi-editor-merge-type:before {
- content: "\e794";
+ .side-nav a {
+ color: #444;
+ display: block;
+ font-size: 1rem;
+ height: 64px;
+ line-height: 64px;
+ padding: 0 15px;
}
- .mdi-editor-mode-comment:before {
- content: "\e795";
+ .drag-target {
+ height: 100%;
+ width: 10px;
+ position: fixed;
+ top: 0;
+ z-index: 998;
}
- .mdi-editor-mode-edit:before {
- content: "\e796";
+ .side-nav.fixed a {
+ display: block;
+ padding: 0 15px;
+ color: #444;
}
- .mdi-editor-publish:before {
- content: "\e797";
+ .side-nav.fixed {
+ left: 0;
+ position: fixed;
}
- .mdi-editor-vertical-align-bottom:before {
- content: "\e798";
+ .side-nav.fixed.right-aligned {
+ right: 0;
+ left: auto;
}
- .mdi-editor-vertical-align-center:before {
- content: "\e799";
- }
+ @media only screen and (max-width: 992px) {
+ .side-nav.fixed {
+ left: -105%;
+ }
- .mdi-editor-vertical-align-top:before {
- content: "\e79a";
+ .side-nav.fixed.right-aligned {
+ right: -105%;
+ left: auto;
+ }
}
- .mdi-editor-wrap-text:before {
- content: "\e79b";
+ .side-nav .collapsible-body li.active, .side-nav.fixed .collapsible-body li.active {
+ background-color: #ee6e73;
}
- .mdi-file-attachment:before {
- content: "\e79c";
+ .side-nav .collapsible-body li.active a, .side-nav.fixed .collapsible-body li.active a {
+ color: #fff;
}
- .mdi-file-cloud:before {
- content: "\e79d";
+ #sidenav-overlay {
+ position: fixed;
+ top: 0;
+ left: 0;
+ right: 0;
+ height: 120vh;
+ background-color: rgba(0, 0, 0, 0.5);
+ z-index: 997;
+ will-change: opacity;
}
- .mdi-file-cloud-circle:before {
- content: "\e79e";
+ /*
+ @license
+ 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
+ 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
+ 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
+ */
+ /**************************/
+ /* STYLES FOR THE SPINNER */
+ /**************************/
+ /*
+ * Constants:
+ * STROKEWIDTH = 3px
+ * ARCSIZE = 270 degrees (amount of circle the arc takes up)
+ * ARCTIME = 1333ms (time it takes to expand and contract arc)
+ * ARCSTARTROT = 216 degrees (how much the start location of the arc
+ * should rotate each time, 216 gives us a
+ * 5 pointed star shape (it's 360/5 * 3).
+ * For a 7 pointed star, we might do
+ * 360/7 * 3 = 154.286)
+ * CONTAINERWIDTH = 28px
+ * SHRINK_TIME = 400ms
+ */
+ .preloader-wrapper {
+ display: inline-block;
+ position: relative;
+ width: 48px;
+ height: 48px;
}
- .mdi-file-cloud-done:before {
- content: "\e79f";
+ .preloader-wrapper.small {
+ width: 36px;
+ height: 36px;
}
- .mdi-file-cloud-download:before {
- content: "\e7a0";
+ .preloader-wrapper.big {
+ width: 64px;
+ height: 64px;
}
- .mdi-file-cloud-off:before {
- content: "\e7a1";
+ .preloader-wrapper.active {
+ /* duration: 360 * ARCTIME / (ARCSTARTROT + (360-ARCSIZE)) */
+ -webkit-animation: container-rotate 1568ms linear infinite;
+ animation: container-rotate 1568ms linear infinite;
}
- .mdi-file-cloud-queue:before {
- content: "\e7a2";
+ @-webkit-keyframes container-rotate {
+ to {
+ -webkit-transform: rotate(360deg);
+ }
}
- .mdi-file-cloud-upload:before {
- content: "\e7a3";
+ @keyframes container-rotate {
+ to {
+ transform: rotate(360deg);
+ }
}
- .mdi-file-file-download:before {
- content: "\e7a4";
+ .spinner-layer {
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ opacity: 0;
}
- .mdi-file-file-upload:before {
- content: "\e7a5";
+ .spinner-blue, .spinner-blue-only {
+ border-color: #4285f4;
}
- .mdi-file-folder:before {
- content: "\e7a6";
+ .spinner-red, .spinner-red-only {
+ border-color: #db4437;
}
- .mdi-file-folder-open:before {
- content: "\e7a7";
+ .spinner-yellow, .spinner-yellow-only {
+ border-color: #f4b400;
}
- .mdi-file-folder-shared:before {
- content: "\e7a8";
+ .spinner-green, .spinner-green-only {
+ border-color: #0f9d58;
}
- .mdi-hardware-cast:before {
- content: "\e7a9";
+ /**
+ * IMPORTANT NOTE ABOUT CSS ANIMATION PROPERTIES (keanulee):
+ *
+ * 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
+ * animation-delay and instead set custom keyframes for each color (as redundant as it
+ * seems).
+ *
+ * We write out each animation in full (instead of separating animation-name,
+ * animation-duration, etc.) because under the polyfill, Safari does not recognize those
+ * specific properties properly, treats them as -webkit-animation, and overrides the
+ * other animation rules. See https://github.com/Polymer/platform/issues/53.
+ */
+ .active .spinner-layer.spinner-blue {
+ /* durations: 4 * ARCTIME */
+ -webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, blue-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
+ animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, blue-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
}
- .mdi-hardware-cast-connected:before {
- content: "\e7aa";
+ .active .spinner-layer.spinner-red {
+ /* durations: 4 * ARCTIME */
+ -webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, red-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
+ animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, red-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
}
- .mdi-hardware-computer:before {
- content: "\e7ab";
+ .active .spinner-layer.spinner-yellow {
+ /* durations: 4 * ARCTIME */
+ -webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, yellow-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
+ animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, yellow-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
}
- .mdi-hardware-desktop-mac:before {
- content: "\e7ac";
+ .active .spinner-layer.spinner-green {
+ /* durations: 4 * ARCTIME */
+ -webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, green-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
+ animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, green-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
}
- .mdi-hardware-desktop-windows:before {
- content: "\e7ad";
+ .active .spinner-layer.spinner-blue-only, .active .spinner-layer.spinner-red-only, .active .spinner-layer.spinner-yellow-only, .active .spinner-layer.spinner-green-only {
+ /* durations: 4 * ARCTIME */
+ opacity: 1;
+ -webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
+ animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
}
- .mdi-hardware-dock:before {
- content: "\e7ae";
- }
+ @-webkit-keyframes fill-unfill-rotate {
+ /* 0.5 * ARCSIZE */
+ /* 1 * ARCSIZE */
+ /* 1.5 * ARCSIZE */
+ /* 2 * ARCSIZE */
+ /* 2.5 * ARCSIZE */
+ /* 3 * ARCSIZE */
+ /* 3.5 * ARCSIZE */
+ /* 4 * ARCSIZE */
+ 12.5% {
+ -webkit-transform: rotate(135deg);
+ }
- .mdi-hardware-gamepad:before {
- content: "\e7af";
- }
+ 25% {
+ -webkit-transform: rotate(270deg);
+ }
- .mdi-hardware-headset:before {
- content: "\e7b0";
- }
+ 37.5% {
+ -webkit-transform: rotate(405deg);
+ }
- .mdi-hardware-headset-mic:before {
- content: "\e7b1";
- }
+ 50% {
+ -webkit-transform: rotate(540deg);
+ }
- .mdi-hardware-keyboard:before {
- content: "\e7b2";
- }
+ 62.5% {
+ -webkit-transform: rotate(675deg);
+ }
- .mdi-hardware-keyboard-alt:before {
- content: "\e7b3";
- }
+ 75% {
+ -webkit-transform: rotate(810deg);
+ }
- .mdi-hardware-keyboard-arrow-down:before {
- content: "\e7b4";
- }
+ 87.5% {
+ -webkit-transform: rotate(945deg);
+ }
- .mdi-hardware-keyboard-arrow-left:before {
- content: "\e7b5";
+ to {
+ -webkit-transform: rotate(1080deg);
+ }
}
- .mdi-hardware-keyboard-arrow-right:before {
- content: "\e7b6";
- }
-
- .mdi-hardware-keyboard-arrow-up:before {
- content: "\e7b7";
- }
-
- .mdi-hardware-keyboard-backspace:before {
- content: "\e7b8";
- }
-
- .mdi-hardware-keyboard-capslock:before {
- content: "\e7b9";
- }
-
- .mdi-hardware-keyboard-control:before {
- content: "\e7ba";
- }
-
- .mdi-hardware-keyboard-hide:before {
- content: "\e7bb";
- }
-
- .mdi-hardware-keyboard-return:before {
- content: "\e7bc";
- }
-
- .mdi-hardware-keyboard-tab:before {
- content: "\e7bd";
- }
-
- .mdi-hardware-keyboard-voice:before {
- content: "\e7be";
- }
-
- .mdi-hardware-laptop:before {
- content: "\e7bf";
- }
-
- .mdi-hardware-laptop-chromebook:before {
- content: "\e7c0";
- }
-
- .mdi-hardware-laptop-mac:before {
- content: "\e7c1";
- }
-
- .mdi-hardware-laptop-windows:before {
- content: "\e7c2";
- }
-
- .mdi-hardware-memory:before {
- content: "\e7c3";
- }
-
- .mdi-hardware-mouse:before {
- content: "\e7c4";
- }
-
- .mdi-hardware-phone-android:before {
- content: "\e7c5";
- }
-
- .mdi-hardware-phone-iphone:before {
- content: "\e7c6";
- }
-
- .mdi-hardware-phonelink:before {
- content: "\e7c7";
- }
-
- .mdi-hardware-phonelink-off:before {
- content: "\e7c8";
- }
-
- .mdi-hardware-security:before {
- content: "\e7c9";
- }
-
- .mdi-hardware-sim-card:before {
- content: "\e7ca";
- }
-
- .mdi-hardware-smartphone:before {
- content: "\e7cb";
- }
-
- .mdi-hardware-speaker:before {
- content: "\e7cc";
- }
-
- .mdi-hardware-tablet:before {
- content: "\e7cd";
- }
-
- .mdi-hardware-tablet-android:before {
- content: "\e7ce";
- }
-
- .mdi-hardware-tablet-mac:before {
- content: "\e7cf";
- }
-
- .mdi-hardware-tv:before {
- content: "\e7d0";
- }
-
- .mdi-hardware-watch:before {
- content: "\e7d1";
- }
-
- .mdi-image-add-to-photos:before {
- content: "\e7d2";
- }
-
- .mdi-image-adjust:before {
- content: "\e7d3";
- }
-
- .mdi-image-assistant-photo:before {
- content: "\e7d4";
- }
-
- .mdi-image-audiotrack:before {
- content: "\e7d5";
- }
-
- .mdi-image-blur-circular:before {
- content: "\e7d6";
- }
-
- .mdi-image-blur-linear:before {
- content: "\e7d7";
- }
-
- .mdi-image-blur-off:before {
- content: "\e7d8";
- }
-
- .mdi-image-blur-on:before {
- content: "\e7d9";
- }
-
- .mdi-image-brightness-1:before {
- content: "\e7da";
- }
-
- .mdi-image-brightness-2:before {
- content: "\e7db";
- }
-
- .mdi-image-brightness-3:before {
- content: "\e7dc";
- }
-
- .mdi-image-brightness-4:before {
- content: "\e7dd";
- }
-
- .mdi-image-brightness-5:before {
- content: "\e7de";
- }
-
- .mdi-image-brightness-6:before {
- content: "\e7df";
- }
-
- .mdi-image-brightness-7:before {
- content: "\e7e0";
- }
-
- .mdi-image-brush:before {
- content: "\e7e1";
- }
-
- .mdi-image-camera:before {
- content: "\e7e2";
- }
-
- .mdi-image-camera-alt:before {
- content: "\e7e3";
- }
-
- .mdi-image-camera-front:before {
- content: "\e7e4";
- }
-
- .mdi-image-camera-rear:before {
- content: "\e7e5";
- }
-
- .mdi-image-camera-roll:before {
- content: "\e7e6";
- }
-
- .mdi-image-center-focus-strong:before {
- content: "\e7e7";
- }
-
- .mdi-image-center-focus-weak:before {
- content: "\e7e8";
- }
-
- .mdi-image-collections:before {
- content: "\e7e9";
- }
-
- .mdi-image-colorize:before {
- content: "\e7ea";
- }
-
- .mdi-image-color-lens:before {
- content: "\e7eb";
- }
-
- .mdi-image-compare:before {
- content: "\e7ec";
- }
-
- .mdi-image-control-point:before {
- content: "\e7ed";
- }
-
- .mdi-image-control-point-duplicate:before {
- content: "\e7ee";
- }
-
- .mdi-image-crop:before {
- content: "\e7ef";
- }
-
- .mdi-image-crop-3-2:before {
- content: "\e7f0";
- }
-
- .mdi-image-crop-5-4:before {
- content: "\e7f1";
- }
-
- .mdi-image-crop-7-5:before {
- content: "\e7f2";
- }
-
- .mdi-image-crop-16-9:before {
- content: "\e7f3";
- }
-
- .mdi-image-crop-din:before {
- content: "\e7f4";
- }
-
- .mdi-image-crop-free:before {
- content: "\e7f5";
- }
-
- .mdi-image-crop-landscape:before {
- content: "\e7f6";
- }
-
- .mdi-image-crop-original:before {
- content: "\e7f7";
- }
-
- .mdi-image-crop-portrait:before {
- content: "\e7f8";
- }
-
- .mdi-image-crop-square:before {
- content: "\e7f9";
- }
-
- .mdi-image-dehaze:before {
- content: "\e7fa";
- }
-
- .mdi-image-details:before {
- content: "\e7fb";
- }
-
- .mdi-image-edit:before {
- content: "\e7fc";
- }
-
- .mdi-image-exposure:before {
- content: "\e7fd";
- }
-
- .mdi-image-exposure-minus-1:before {
- content: "\e7fe";
- }
-
- .mdi-image-exposure-minus-2:before {
- content: "\e7ff";
- }
-
- .mdi-image-exposure-plus-1:before {
- content: "\e800";
- }
-
- .mdi-image-exposure-plus-2:before {
- content: "\e801";
- }
-
- .mdi-image-exposure-zero:before {
- content: "\e802";
- }
-
- .mdi-image-filter:before {
- content: "\e803";
- }
-
- .mdi-image-filter-1:before {
- content: "\e804";
- }
-
- .mdi-image-filter-2:before {
- content: "\e805";
- }
-
- .mdi-image-filter-3:before {
- content: "\e806";
- }
-
- .mdi-image-filter-4:before {
- content: "\e807";
- }
-
- .mdi-image-filter-5:before {
- content: "\e808";
- }
-
- .mdi-image-filter-6:before {
- content: "\e809";
- }
-
- .mdi-image-filter-7:before {
- content: "\e80a";
- }
-
- .mdi-image-filter-8:before {
- content: "\e80b";
- }
-
- .mdi-image-filter-9:before {
- content: "\e80c";
- }
-
- .mdi-image-filter-9-plus:before {
- content: "\e80d";
- }
-
- .mdi-image-filter-b-and-w:before {
- content: "\e80e";
- }
-
- .mdi-image-filter-center-focus:before {
- content: "\e80f";
- }
-
- .mdi-image-filter-drama:before {
- content: "\e810";
- }
-
- .mdi-image-filter-frames:before {
- content: "\e811";
- }
-
- .mdi-image-filter-hdr:before {
- content: "\e812";
- }
-
- .mdi-image-filter-none:before {
- content: "\e813";
- }
-
- .mdi-image-filter-tilt-shift:before {
- content: "\e814";
- }
-
- .mdi-image-filter-vintage:before {
- content: "\e815";
- }
-
- .mdi-image-flare:before {
- content: "\e816";
- }
-
- .mdi-image-flash-auto:before {
- content: "\e817";
- }
-
- .mdi-image-flash-off:before {
- content: "\e818";
- }
-
- .mdi-image-flash-on:before {
- content: "\e819";
- }
-
- .mdi-image-flip:before {
- content: "\e81a";
- }
-
- .mdi-image-gradient:before {
- content: "\e81b";
- }
-
- .mdi-image-grain:before {
- content: "\e81c";
- }
-
- .mdi-image-grid-off:before {
- content: "\e81d";
- }
-
- .mdi-image-grid-on:before {
- content: "\e81e";
- }
-
- .mdi-image-hdr-off:before {
- content: "\e81f";
- }
-
- .mdi-image-hdr-on:before {
- content: "\e820";
- }
-
- .mdi-image-hdr-strong:before {
- content: "\e821";
- }
-
- .mdi-image-hdr-weak:before {
- content: "\e822";
- }
-
- .mdi-image-healing:before {
- content: "\e823";
- }
-
- .mdi-image-image:before {
- content: "\e824";
- }
-
- .mdi-image-image-aspect-ratio:before {
- content: "\e825";
- }
-
- .mdi-image-iso:before {
- content: "\e826";
- }
-
- .mdi-image-landscape:before {
- content: "\e827";
- }
-
- .mdi-image-leak-add:before {
- content: "\e828";
- }
-
- .mdi-image-leak-remove:before {
- content: "\e829";
- }
-
- .mdi-image-lens:before {
- content: "\e82a";
- }
-
- .mdi-image-looks:before {
- content: "\e82b";
- }
-
- .mdi-image-looks-3:before {
- content: "\e82c";
- }
-
- .mdi-image-looks-4:before {
- content: "\e82d";
- }
-
- .mdi-image-looks-5:before {
- content: "\e82e";
- }
-
- .mdi-image-looks-6:before {
- content: "\e82f";
- }
-
- .mdi-image-looks-one:before {
- content: "\e830";
- }
-
- .mdi-image-looks-two:before {
- content: "\e831";
- }
-
- .mdi-image-loupe:before {
- content: "\e832";
- }
-
- .mdi-image-movie-creation:before {
- content: "\e833";
- }
-
- .mdi-image-nature:before {
- content: "\e834";
- }
-
- .mdi-image-nature-people:before {
- content: "\e835";
- }
-
- .mdi-image-navigate-before:before {
- content: "\e836";
- }
-
- .mdi-image-navigate-next:before {
- content: "\e837";
- }
-
- .mdi-image-palette:before {
- content: "\e838";
- }
-
- .mdi-image-panorama:before {
- content: "\e839";
- }
-
- .mdi-image-panorama-fisheye:before {
- content: "\e83a";
- }
-
- .mdi-image-panorama-horizontal:before {
- content: "\e83b";
- }
-
- .mdi-image-panorama-vertical:before {
- content: "\e83c";
- }
-
- .mdi-image-panorama-wide-angle:before {
- content: "\e83d";
- }
-
- .mdi-image-photo:before {
- content: "\e83e";
- }
-
- .mdi-image-photo-album:before {
- content: "\e83f";
- }
-
- .mdi-image-photo-camera:before {
- content: "\e840";
- }
-
- .mdi-image-photo-library:before {
- content: "\e841";
- }
-
- .mdi-image-portrait:before {
- content: "\e842";
- }
-
- .mdi-image-remove-red-eye:before {
- content: "\e843";
- }
-
- .mdi-image-rotate-left:before {
- content: "\e844";
- }
-
- .mdi-image-rotate-right:before {
- content: "\e845";
- }
-
- .mdi-image-slideshow:before {
- content: "\e846";
- }
-
- .mdi-image-straighten:before {
- content: "\e847";
- }
-
- .mdi-image-style:before {
- content: "\e848";
- }
-
- .mdi-image-switch-camera:before {
- content: "\e849";
- }
-
- .mdi-image-switch-video:before {
- content: "\e84a";
- }
-
- .mdi-image-tag-faces:before {
- content: "\e84b";
- }
-
- .mdi-image-texture:before {
- content: "\e84c";
- }
-
- .mdi-image-timelapse:before {
- content: "\e84d";
- }
-
- .mdi-image-timer:before {
- content: "\e84e";
- }
-
- .mdi-image-timer-3:before {
- content: "\e84f";
- }
-
- .mdi-image-timer-10:before {
- content: "\e850";
- }
-
- .mdi-image-timer-auto:before {
- content: "\e851";
- }
-
- .mdi-image-timer-off:before {
- content: "\e852";
- }
-
- .mdi-image-tonality:before {
- content: "\e853";
- }
-
- .mdi-image-transform:before {
- content: "\e854";
- }
-
- .mdi-image-tune:before {
- content: "\e855";
- }
-
- .mdi-image-wb-auto:before {
- content: "\e856";
- }
-
- .mdi-image-wb-cloudy:before {
- content: "\e857";
- }
-
- .mdi-image-wb-incandescent:before {
- content: "\e858";
- }
-
- .mdi-image-wb-irradescent:before {
- content: "\e859";
- }
-
- .mdi-image-wb-sunny:before {
- content: "\e85a";
- }
-
- .mdi-maps-beenhere:before {
- content: "\e85b";
- }
-
- .mdi-maps-directions:before {
- content: "\e85c";
- }
-
- .mdi-maps-directions-bike:before {
- content: "\e85d";
- }
-
- .mdi-maps-directions-bus:before {
- content: "\e85e";
- }
-
- .mdi-maps-directions-car:before {
- content: "\e85f";
- }
-
- .mdi-maps-directions-ferry:before {
- content: "\e860";
- }
-
- .mdi-maps-directions-subway:before {
- content: "\e861";
- }
-
- .mdi-maps-directions-train:before {
- content: "\e862";
- }
-
- .mdi-maps-directions-transit:before {
- content: "\e863";
- }
-
- .mdi-maps-directions-walk:before {
- content: "\e864";
- }
-
- .mdi-maps-flight:before {
- content: "\e865";
- }
-
- .mdi-maps-hotel:before {
- content: "\e866";
- }
-
- .mdi-maps-layers:before {
- content: "\e867";
- }
-
- .mdi-maps-layers-clear:before {
- content: "\e868";
- }
-
- .mdi-maps-local-airport:before {
- content: "\e869";
- }
-
- .mdi-maps-local-atm:before {
- content: "\e86a";
- }
-
- .mdi-maps-local-attraction:before {
- content: "\e86b";
- }
-
- .mdi-maps-local-bar:before {
- content: "\e86c";
- }
-
- .mdi-maps-local-cafe:before {
- content: "\e86d";
- }
-
- .mdi-maps-local-car-wash:before {
- content: "\e86e";
- }
-
- .mdi-maps-local-convenience-store:before {
- content: "\e86f";
- }
-
- .mdi-maps-local-drink:before {
- content: "\e870";
- }
-
- .mdi-maps-local-florist:before {
- content: "\e871";
- }
-
- .mdi-maps-local-gas-station:before {
- content: "\e872";
- }
-
- .mdi-maps-local-grocery-store:before {
- content: "\e873";
- }
-
- .mdi-maps-local-hospital:before {
- content: "\e874";
- }
-
- .mdi-maps-local-hotel:before {
- content: "\e875";
- }
-
- .mdi-maps-local-laundry-service:before {
- content: "\e876";
- }
-
- .mdi-maps-local-library:before {
- content: "\e877";
- }
-
- .mdi-maps-local-mall:before {
- content: "\e878";
- }
-
- .mdi-maps-local-movies:before {
- content: "\e879";
- }
-
- .mdi-maps-local-offer:before {
- content: "\e87a";
- }
-
- .mdi-maps-local-parking:before {
- content: "\e87b";
- }
-
- .mdi-maps-local-pharmacy:before {
- content: "\e87c";
- }
-
- .mdi-maps-local-phone:before {
- content: "\e87d";
- }
-
- .mdi-maps-local-pizza:before {
- content: "\e87e";
- }
-
- .mdi-maps-local-play:before {
- content: "\e87f";
- }
-
- .mdi-maps-local-post-office:before {
- content: "\e880";
- }
-
- .mdi-maps-local-print-shop:before {
- content: "\e881";
- }
-
- .mdi-maps-local-restaurant:before {
- content: "\e882";
- }
-
- .mdi-maps-local-see:before {
- content: "\e883";
- }
-
- .mdi-maps-local-shipping:before {
- content: "\e884";
- }
-
- .mdi-maps-local-taxi:before {
- content: "\e885";
- }
-
- .mdi-maps-location-history:before {
- content: "\e886";
- }
-
- .mdi-maps-map:before {
- content: "\e887";
- }
-
- .mdi-maps-my-location:before {
- content: "\e888";
- }
-
- .mdi-maps-navigation:before {
- content: "\e889";
- }
-
- .mdi-maps-pin-drop:before {
- content: "\e88a";
- }
-
- .mdi-maps-place:before {
- content: "\e88b";
- }
-
- .mdi-maps-rate-review:before {
- content: "\e88c";
- }
-
- .mdi-maps-restaurant-menu:before {
- content: "\e88d";
- }
-
- .mdi-maps-satellite:before {
- content: "\e88e";
- }
-
- .mdi-maps-store-mall-directory:before {
- content: "\e88f";
- }
-
- .mdi-maps-terrain:before {
- content: "\e890";
- }
-
- .mdi-maps-traffic:before {
- content: "\e891";
- }
-
- .mdi-navigation-apps:before {
- content: "\e892";
- }
-
- .mdi-navigation-arrow-back:before {
- content: "\e893";
- }
-
- .mdi-navigation-arrow-drop-down:before {
- content: "\e894";
- }
-
- .mdi-navigation-arrow-drop-down-circle:before {
- content: "\e895";
- }
-
- .mdi-navigation-arrow-drop-up:before {
- content: "\e896";
- }
-
- .mdi-navigation-arrow-forward:before {
- content: "\e897";
- }
-
- .mdi-navigation-cancel:before {
- content: "\e898";
- }
-
- .mdi-navigation-check:before {
- content: "\e899";
- }
-
- .mdi-navigation-chevron-left:before {
- content: "\e89a";
- }
-
- .mdi-navigation-chevron-right:before {
- content: "\e89b";
- }
-
- .mdi-navigation-close:before {
- content: "\e89c";
- }
-
- .mdi-navigation-expand-less:before {
- content: "\e89d";
- }
-
- .mdi-navigation-expand-more:before {
- content: "\e89e";
- }
-
- .mdi-navigation-fullscreen:before {
- content: "\e89f";
- }
-
- .mdi-navigation-fullscreen-exit:before {
- content: "\e8a0";
- }
-
- .mdi-navigation-menu:before {
- content: "\e8a1";
- }
-
- .mdi-navigation-more-horiz:before {
- content: "\e8a2";
- }
-
- .mdi-navigation-more-vert:before {
- content: "\e8a3";
- }
-
- .mdi-navigation-refresh:before {
- content: "\e8a4";
- }
-
- .mdi-navigation-unfold-less:before {
- content: "\e8a5";
- }
-
- .mdi-navigation-unfold-more:before {
- content: "\e8a6";
- }
-
- .mdi-notification-adb:before {
- content: "\e8a7";
- }
-
- .mdi-notification-bluetooth-audio:before {
- content: "\e8a8";
- }
-
- .mdi-notification-disc-full:before {
- content: "\e8a9";
- }
-
- .mdi-notification-dnd-forwardslash:before {
- content: "\e8aa";
- }
-
- .mdi-notification-do-not-disturb:before {
- content: "\e8ab";
- }
-
- .mdi-notification-drive-eta:before {
- content: "\e8ac";
- }
-
- .mdi-notification-event-available:before {
- content: "\e8ad";
- }
-
- .mdi-notification-event-busy:before {
- content: "\e8ae";
- }
-
- .mdi-notification-event-note:before {
- content: "\e8af";
- }
-
- .mdi-notification-folder-special:before {
- content: "\e8b0";
- }
-
- .mdi-notification-mms:before {
- content: "\e8b1";
- }
-
- .mdi-notification-more:before {
- content: "\e8b2";
- }
-
- .mdi-notification-network-locked:before {
- content: "\e8b3";
- }
-
- .mdi-notification-phone-bluetooth-speaker:before {
- content: "\e8b4";
- }
-
- .mdi-notification-phone-forwarded:before {
- content: "\e8b5";
- }
-
- .mdi-notification-phone-in-talk:before {
- content: "\e8b6";
- }
-
- .mdi-notification-phone-locked:before {
- content: "\e8b7";
- }
-
- .mdi-notification-phone-missed:before {
- content: "\e8b8";
- }
-
- .mdi-notification-phone-paused:before {
- content: "\e8b9";
- }
-
- .mdi-notification-play-download:before {
- content: "\e8ba";
- }
-
- .mdi-notification-play-install:before {
- content: "\e8bb";
- }
-
- .mdi-notification-sd-card:before {
- content: "\e8bc";
- }
-
- .mdi-notification-sim-card-alert:before {
- content: "\e8bd";
- }
-
- .mdi-notification-sms:before {
- content: "\e8be";
- }
-
- .mdi-notification-sms-failed:before {
- content: "\e8bf";
- }
-
- .mdi-notification-sync:before {
- content: "\e8c0";
- }
-
- .mdi-notification-sync-disabled:before {
- content: "\e8c1";
- }
-
- .mdi-notification-sync-problem:before {
- content: "\e8c2";
- }
-
- .mdi-notification-system-update:before {
- content: "\e8c3";
- }
-
- .mdi-notification-tap-and-play:before {
- content: "\e8c4";
- }
-
- .mdi-notification-time-to-leave:before {
- content: "\e8c5";
- }
-
- .mdi-notification-vibration:before {
- content: "\e8c6";
- }
-
- .mdi-notification-voice-chat:before {
- content: "\e8c7";
- }
-
- .mdi-notification-vpn-lock:before {
- content: "\e8c8";
- }
-
- .mdi-social-cake:before {
- content: "\e8c9";
- }
-
- .mdi-social-domain:before {
- content: "\e8ca";
- }
-
- .mdi-social-group:before {
- content: "\e8cb";
- }
-
- .mdi-social-group-add:before {
- content: "\e8cc";
- }
-
- .mdi-social-location-city:before {
- content: "\e8cd";
- }
-
- .mdi-social-mood:before {
- content: "\e8ce";
- }
-
- .mdi-social-notifications:before {
- content: "\e8cf";
- }
-
- .mdi-social-notifications-none:before {
- content: "\e8d0";
- }
-
- .mdi-social-notifications-off:before {
- content: "\e8d1";
- }
-
- .mdi-social-notifications-on:before {
- content: "\e8d2";
- }
-
- .mdi-social-notifications-paused:before {
- content: "\e8d3";
- }
-
- .mdi-social-pages:before {
- content: "\e8d4";
- }
-
- .mdi-social-party-mode:before {
- content: "\e8d5";
- }
-
- .mdi-social-people:before {
- content: "\e8d6";
- }
-
- .mdi-social-people-outline:before {
- content: "\e8d7";
- }
-
- .mdi-social-person:before {
- content: "\e8d8";
- }
-
- .mdi-social-person-add:before {
- content: "\e8d9";
- }
-
- .mdi-social-person-outline:before {
- content: "\e8da";
- }
-
- .mdi-social-plus-one:before {
- content: "\e8db";
- }
-
- .mdi-social-poll:before {
- content: "\e8dc";
- }
-
- .mdi-social-public:before {
- content: "\e8dd";
- }
-
- .mdi-social-school:before {
- content: "\e8de";
- }
-
- .mdi-social-share:before {
- content: "\e8df";
- }
-
- .mdi-social-whatshot:before {
- content: "\e8e0";
- }
-
- .mdi-toggle-check-box:before {
- content: "\e8e1";
- }
-
- .mdi-toggle-check-box-outline-blank:before {
- content: "\e8e2";
- }
-
- .mdi-toggle-radio-button-off:before {
- content: "\e8e3";
- }
-
- .mdi-toggle-radio-button-on:before {
- content: "\e8e4";
- }
-
- .container {
- padding: 0 1.5rem;
- margin: 0 auto;
- max-width: 1280px;
- width: 90%;
- }
-
- @media only screen and (min-width: 601px) {
- .container {
- width: 85%;
- }
- }
-
- @media only screen and (min-width: 993px) {
- .container {
- width: 70%;
- }
- }
-
- .container .row {
- margin-left: -0.75rem;
- margin-right: -0.75rem;
- }
-
- .section {
- padding-top: 1rem;
- padding-bottom: 1rem;
- }
-
- .section.no-pad {
- padding: 0;
- }
-
- .section.no-pad-bot {
- padding-bottom: 0;
- }
-
- .section.no-pad-top {
- padding-top: 0;
- }
-
- .row {
- margin-left: auto;
- margin-right: auto;
- margin-bottom: 20px;
- }
-
- .row:after {
- content: "";
- display: table;
- clear: both;
- }
-
- .row .col {
- float: left;
- -webkit-box-sizing: border-box;
- -moz-box-sizing: border-box;
- box-sizing: border-box;
- padding: 0 0.75rem;
- }
-
- .row .col.s1 {
- width: 8.33333%;
- margin-left: 0;
- }
-
- .row .col.s2 {
- width: 16.66667%;
- margin-left: 0;
- }
-
- .row .col.s3 {
- width: 25%;
- margin-left: 0;
- }
-
- .row .col.s4 {
- width: 33.33333%;
- margin-left: 0;
- }
-
- .row .col.s5 {
- width: 41.66667%;
- margin-left: 0;
- }
-
- .row .col.s6 {
- width: 50%;
- margin-left: 0;
- }
-
- .row .col.s7 {
- width: 58.33333%;
- margin-left: 0;
- }
-
- .row .col.s8 {
- width: 66.66667%;
- margin-left: 0;
- }
-
- .row .col.s9 {
- width: 75%;
- margin-left: 0;
- }
-
- .row .col.s10 {
- width: 83.33333%;
- margin-left: 0;
- }
-
- .row .col.s11 {
- width: 91.66667%;
- margin-left: 0;
- }
-
- .row .col.s12 {
- width: 100%;
- margin-left: 0;
- }
-
- .row .col.offset-s1 {
- margin-left: 8.33333%;
- }
-
- .row .col.offset-s2 {
- margin-left: 16.66667%;
- }
-
- .row .col.offset-s3 {
- margin-left: 25%;
- }
-
- .row .col.offset-s4 {
- margin-left: 33.33333%;
- }
-
- .row .col.offset-s5 {
- margin-left: 41.66667%;
- }
-
- .row .col.offset-s6 {
- margin-left: 50%;
- }
-
- .row .col.offset-s7 {
- margin-left: 58.33333%;
- }
-
- .row .col.offset-s8 {
- margin-left: 66.66667%;
- }
-
- .row .col.offset-s9 {
- margin-left: 75%;
- }
-
- .row .col.offset-s10 {
- margin-left: 83.33333%;
- }
-
- .row .col.offset-s11 {
- margin-left: 91.66667%;
- }
-
- .row .col.offset-s12 {
- margin-left: 100%;
- }
-
- @media only screen and (min-width: 601px) {
- .row .col.m1 {
- width: 8.33333%;
- margin-left: 0;
- }
-
- .row .col.m2 {
- width: 16.66667%;
- margin-left: 0;
- }
-
- .row .col.m3 {
- width: 25%;
- margin-left: 0;
- }
-
- .row .col.m4 {
- width: 33.33333%;
- margin-left: 0;
- }
-
- .row .col.m5 {
- width: 41.66667%;
- margin-left: 0;
- }
-
- .row .col.m6 {
- width: 50%;
- margin-left: 0;
- }
-
- .row .col.m7 {
- width: 58.33333%;
- margin-left: 0;
- }
-
- .row .col.m8 {
- width: 66.66667%;
- margin-left: 0;
- }
-
- .row .col.m9 {
- width: 75%;
- margin-left: 0;
- }
-
- .row .col.m10 {
- width: 83.33333%;
- margin-left: 0;
- }
-
- .row .col.m11 {
- width: 91.66667%;
- margin-left: 0;
- }
-
- .row .col.m12 {
- width: 100%;
- margin-left: 0;
- }
-
- .row .col.offset-m1 {
- margin-left: 8.33333%;
- }
-
- .row .col.offset-m2 {
- margin-left: 16.66667%;
- }
-
- .row .col.offset-m3 {
- margin-left: 25%;
- }
-
- .row .col.offset-m4 {
- margin-left: 33.33333%;
- }
-
- .row .col.offset-m5 {
- margin-left: 41.66667%;
- }
-
- .row .col.offset-m6 {
- margin-left: 50%;
- }
-
- .row .col.offset-m7 {
- margin-left: 58.33333%;
- }
-
- .row .col.offset-m8 {
- margin-left: 66.66667%;
- }
-
- .row .col.offset-m9 {
- margin-left: 75%;
- }
-
- .row .col.offset-m10 {
- margin-left: 83.33333%;
- }
-
- .row .col.offset-m11 {
- margin-left: 91.66667%;
- }
-
- .row .col.offset-m12 {
- margin-left: 100%;
- }
- }
-
- @media only screen and (min-width: 993px) {
- .row .col.l1 {
- width: 8.33333%;
- margin-left: 0;
- }
-
- .row .col.l2 {
- width: 16.66667%;
- margin-left: 0;
- }
-
- .row .col.l3 {
- width: 25%;
- margin-left: 0;
- }
-
- .row .col.l4 {
- width: 33.33333%;
- margin-left: 0;
- }
-
- .row .col.l5 {
- width: 41.66667%;
- margin-left: 0;
- }
-
- .row .col.l6 {
- width: 50%;
- margin-left: 0;
- }
-
- .row .col.l7 {
- width: 58.33333%;
- margin-left: 0;
- }
-
- .row .col.l8 {
- width: 66.66667%;
- margin-left: 0;
- }
-
- .row .col.l9 {
- width: 75%;
- margin-left: 0;
- }
-
- .row .col.l10 {
- width: 83.33333%;
- margin-left: 0;
- }
-
- .row .col.l11 {
- width: 91.66667%;
- margin-left: 0;
- }
-
- .row .col.l12 {
- width: 100%;
- margin-left: 0;
- }
-
- .row .col.offset-l1 {
- margin-left: 8.33333%;
- }
-
- .row .col.offset-l2 {
- margin-left: 16.66667%;
- }
-
- .row .col.offset-l3 {
- margin-left: 25%;
- }
-
- .row .col.offset-l4 {
- margin-left: 33.33333%;
- }
-
- .row .col.offset-l5 {
- margin-left: 41.66667%;
- }
-
- .row .col.offset-l6 {
- margin-left: 50%;
- }
-
- .row .col.offset-l7 {
- margin-left: 58.33333%;
- }
-
- .row .col.offset-l8 {
- margin-left: 66.66667%;
- }
-
- .row .col.offset-l9 {
- margin-left: 75%;
- }
-
- .row .col.offset-l10 {
- margin-left: 83.33333%;
- }
-
- .row .col.offset-l11 {
- margin-left: 91.66667%;
- }
-
- .row .col.offset-l12 {
- margin-left: 100%;
- }
- }
-
- nav {
- color: #fff;
- background-color: #ee6e73;
- width: 100%;
- height: 56px;
- line-height: 56px;
- }
-
- nav a {
- color: #fff;
- }
-
- nav .nav-wrapper {
- position: relative;
- height: 100%;
- }
-
- nav .nav-wrapper i {
- display: block;
- font-size: 2rem;
- }
-
- @media only screen and (min-width: 993px) {
- nav a.button-collapse {
- display: none;
- }
- }
-
- nav .button-collapse {
- float: left;
- position: relative;
- z-index: 1;
- height: 56px;
- }
-
- nav .button-collapse i {
- font-size: 2.7rem;
- height: 56px;
- line-height: 56px;
- }
-
- nav .brand-logo {
- position: absolute;
- color: #fff;
- display: inline-block;
- font-size: 2.1rem;
- padding: 0;
- }
-
- nav .brand-logo.center {
- left: 50%;
- -webkit-transform: translateX(-50%);
- -moz-transform: translateX(-50%);
- -ms-transform: translateX(-50%);
- -o-transform: translateX(-50%);
- transform: translateX(-50%);
- }
-
- @media only screen and (max-width: 992px) {
- nav .brand-logo {
- left: 50%;
- -webkit-transform: translateX(-50%);
- -moz-transform: translateX(-50%);
- -ms-transform: translateX(-50%);
- -o-transform: translateX(-50%);
- transform: translateX(-50%);
- }
- }
-
- nav .brand-logo.right {
- right: 0.5rem;
- padding: 0;
- }
-
- nav ul {
- margin: 0;
- }
-
- nav ul li {
- -webkit-transition: background-color .3s;
- -moz-transition: background-color .3s;
- -o-transition: background-color .3s;
- -ms-transition: background-color .3s;
- transition: background-color .3s;
- float: left;
- padding: 0;
- }
-
- nav ul li:hover, nav ul li.active {
- background-color: rgba(0, 0, 0, 0.1);
- }
-
- nav ul a {
- font-size: 1rem;
- color: #fff;
- display: block;
- padding: 0 15px;
- }
-
- nav ul.left {
- float: left;
- }
-
- nav .input-field {
- margin: 0;
- }
-
- nav .input-field input {
- height: 100%;
- font-size: 1.2rem;
- border: none;
- padding-left: 2rem;
- }
-
- nav .input-field input:focus, nav .input-field input[type=text]:valid, nav .input-field input[type=password]:valid, nav .input-field input[type=email]:valid, nav .input-field input[type=url]:valid, nav .input-field input[type=date]:valid {
- border: none;
- box-shadow: none;
- }
-
- nav .input-field label {
- top: 0;
- left: 0;
- }
-
- nav .input-field label i {
- color: rgba(255, 255, 255, 0.7);
- -webkit-transition: color .3s;
- -moz-transition: color .3s;
- -o-transition: color .3s;
- -ms-transition: color .3s;
- transition: color .3s;
- }
-
- nav .input-field label.active i {
- color: #fff;
- }
-
- nav .input-field label.active {
- -webkit-transform: translateY(0);
- -moz-transform: translateY(0);
- -ms-transform: translateY(0);
- -o-transform: translateY(0);
- transform: translateY(0);
- }
-
- .navbar-fixed {
- position: relative;
- height: 56px;
- z-index: 998;
- }
-
- .navbar-fixed nav {
- position: fixed;
- }
-
- @media only screen and (min-width: 601px) {
- nav, nav .nav-wrapper i, nav a.button-collapse, nav a.button-collapse i {
- height: 64px;
- line-height: 64px;
- }
-
- .navbar-fixed {
- height: 64px;
- }
- }
-
-
- a {
- text-decoration: none;
- }
-
- html {
- line-height: 1.5;
- font-family: "Helvetica Neue","Helvetica","Arial", sans-serif;
- font-weight: normal;
- color: rgba(0, 0, 0, 0.87);
- }
-
- @media only screen and (min-width: 0) {
- html {
- font-size: 14px;
- }
- }
-
- @media only screen and (min-width: 992px) {
- html {
- font-size: 14.5px;
- }
- }
-
- @media only screen and (min-width: 1200px) {
- html {
- font-size: 15px;
- }
- }
-
- h1, h2, h3, h4, h5, h6 {
- font-weight: 400;
- }
-
- h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
- font-weight: inherit;
- }
-
- h1 {
- font-size: 4.2rem;
- line-height: 4.62rem;
- margin: 2.1rem 0 1.68rem 0;
- }
-
- h2 {
- font-size: 3.56rem;
- line-height: 3.916rem;
- margin: 1.78rem 0 1.424rem 0;
- }
-
- h3 {
- font-size: 2.92rem;
- line-height: 3.212rem;
- margin: 1.46rem 0 1.168rem 0;
- }
-
- h4 {
- font-size: 2.28rem;
- line-height: 2.508rem;
- margin: 1.14rem 0 0.912rem 0;
- }
-
- h5 {
- font-size: 1.64rem;
- line-height: 1.804rem;
- margin: 0.82rem 0 0.656rem 0;
- }
-
- h6 {
- font-size: 1rem;
- line-height: 1.1rem;
- margin: 0.5rem 0 0.4rem 0;
- }
-
- em {
- font-style: italic;
- }
-
- strong {
- font-weight: 500;
- }
-
- small {
- font-size: 75%;
- }
-
- .light, footer.page-footer .footer-copyright {
- font-weight: 300;
- }
-
- .thin {
- font-weight: 200;
- }
-
- .flow-text {
- font-weight: 300;
- }
-
- @media only screen and (min-width: 360px) {
- .flow-text {
- font-size: 1.2rem;
- }
- }
-
- @media only screen and (min-width: 0px) {
- .flow-text {
- line-height: .8rem;
- }
- }
-
- @media only screen and (min-width: 390px) {
- .flow-text {
- font-size: 1.224rem;
- }
- }
-
- @media only screen and (min-width: 30px) {
- .flow-text {
- line-height: .904rem;
- }
- }
-
- @media only screen and (min-width: 420px) {
- .flow-text {
- font-size: 1.248rem;
- }
- }
-
- @media only screen and (min-width: 60px) {
- .flow-text {
- line-height: 1.008rem;
- }
- }
-
- @media only screen and (min-width: 450px) {
- .flow-text {
- font-size: 1.272rem;
- }
- }
-
- @media only screen and (min-width: 90px) {
- .flow-text {
- line-height: 1.112rem;
- }
- }
-
- @media only screen and (min-width: 480px) {
- .flow-text {
- font-size: 1.296rem;
- }
- }
-
- @media only screen and (min-width: 120px) {
- .flow-text {
- line-height: 1.216rem;
- }
- }
-
- @media only screen and (min-width: 510px) {
- .flow-text {
- font-size: 1.32rem;
- }
- }
-
- @media only screen and (min-width: 150px) {
- .flow-text {
- line-height: 1.32rem;
- }
- }
-
- @media only screen and (min-width: 540px) {
- .flow-text {
- font-size: 1.344rem;
- }
- }
-
- @media only screen and (min-width: 180px) {
- .flow-text {
- line-height: 1.424rem;
- }
- }
-
- @media only screen and (min-width: 570px) {
- .flow-text {
- font-size: 1.368rem;
- }
- }
-
- @media only screen and (min-width: 210px) {
- .flow-text {
- line-height: 1.528rem;
- }
- }
-
- @media only screen and (min-width: 600px) {
- .flow-text {
- font-size: 1.392rem;
- }
- }
-
- @media only screen and (min-width: 240px) {
- .flow-text {
- line-height: 1.632rem;
- }
- }
-
- @media only screen and (min-width: 630px) {
- .flow-text {
- font-size: 1.416rem;
- }
- }
-
- @media only screen and (min-width: 270px) {
- .flow-text {
- line-height: 1.736rem;
- }
- }
-
- @media only screen and (min-width: 660px) {
- .flow-text {
- font-size: 1.44rem;
- }
- }
-
- @media only screen and (min-width: 300px) {
- .flow-text {
- line-height: 1.84rem;
- }
- }
-
- @media only screen and (min-width: 690px) {
- .flow-text {
- font-size: 1.464rem;
- }
- }
-
- @media only screen and (min-width: 330px) {
- .flow-text {
- line-height: 1.944rem;
- }
- }
-
- @media only screen and (min-width: 720px) {
- .flow-text {
- font-size: 1.488rem;
- }
- }
-
- @media only screen and (min-width: 360px) {
- .flow-text {
- line-height: 2.048rem;
- }
- }
-
- @media only screen and (min-width: 750px) {
- .flow-text {
- font-size: 1.512rem;
- }
- }
-
- @media only screen and (min-width: 390px) {
- .flow-text {
- line-height: 2.152rem;
- }
- }
-
- @media only screen and (min-width: 780px) {
- .flow-text {
- font-size: 1.536rem;
- }
- }
-
- @media only screen and (min-width: 420px) {
- .flow-text {
- line-height: 2.256rem;
- }
- }
-
- @media only screen and (min-width: 810px) {
- .flow-text {
- font-size: 1.56rem;
- }
- }
-
- @media only screen and (min-width: 450px) {
- .flow-text {
- line-height: 2.36rem;
- }
- }
-
- @media only screen and (min-width: 840px) {
- .flow-text {
- font-size: 1.584rem;
- }
- }
-
- @media only screen and (min-width: 480px) {
- .flow-text {
- line-height: 2.464rem;
- }
- }
-
- @media only screen and (min-width: 870px) {
- .flow-text {
- font-size: 1.608rem;
- }
- }
-
- @media only screen and (min-width: 510px) {
- .flow-text {
- line-height: 2.568rem;
- }
- }
-
- @media only screen and (min-width: 900px) {
- .flow-text {
- font-size: 1.632rem;
- }
- }
-
- @media only screen and (min-width: 540px) {
- .flow-text {
- line-height: 2.672rem;
- }
- }
-
- @media only screen and (min-width: 930px) {
- .flow-text {
- font-size: 1.656rem;
- }
- }
-
- @media only screen and (min-width: 570px) {
- .flow-text {
- line-height: 2.776rem;
- }
- }
-
- @media only screen and (min-width: 960px) {
- .flow-text {
- font-size: 1.68rem;
- }
- }
-
- @media only screen and (min-width: 600px) {
- .flow-text {
- line-height: 2.88rem;
- }
- }
-
- .card-panel {
- padding: 20px;
- margin: 0.5rem 0 1rem 0;
- border-radius: 2px;
- background-color: #fff;
- }
-
- .card {
- position: relative;
- overflow: hidden;
- margin: 0.5rem 0 1rem 0;
- background-color: #fff;
- border-radius: 2px;
- }
-
- .card .card-title {
- color: #fff;
- font-size: 24px;
- font-weight: 300;
- }
-
- .card .card-title.activator {
- cursor: pointer;
- }
-
- .card.small, .card.medium, .card.large {
- position: relative;
- }
-
- .card.small .card-image, .card.medium .card-image, .card.large .card-image {
- overflow: hidden;
- }
-
- .card.small .card-content, .card.medium .card-content, .card.large .card-content {
- overflow: hidden;
- }
-
- .card.small .card-action, .card.medium .card-action, .card.large .card-action {
- position: absolute;
- bottom: 0;
- left: 0;
- right: 0;
- }
-
- .card.small {
- height: 300px;
- }
-
- .card.small .card-image {
- height: 150px;
- }
-
- .card.small .card-content {
- height: 150px;
- }
-
- .card.medium {
- height: 400px;
- }
-
- .card.medium .card-image {
- height: 250px;
- }
-
- .card.medium .card-content {
- height: 150px;
- }
-
- .card.large {
- height: 500px;
- }
-
- .card.large .card-image {
- height: 330px;
- }
-
- .card.large .card-content {
- height: 170px;
- }
-
- .card .card-image {
- position: relative;
- }
-
- .card .card-image img {
- border-radius: 2px 2px 0 0;
- position: relative;
- left: 0;
- right: 0;
- top: 0;
- bottom: 0;
- width: 100%;
- }
-
- .card .card-image .card-title {
- position: absolute;
- bottom: 0;
- left: 0;
- padding: 20px;
- }
-
- .card .card-content {
- padding: 20px;
- border-radius: 0 0 2px 2px;
- }
-
- .card .card-content p {
- margin: 0;
- color: inherit;
- }
-
- .card .card-content .card-title {
- line-height: 48px;
- }
-
- .card .card-action {
- border-top: 1px solid rgba(160, 160, 160, 0.2);
- padding: 20px;
- }
-
- .card .card-action a {
- color: #ffab40;
- margin-right: 20px;
- -webkit-transition: color .3s ease;
- -moz-transition: color .3s ease;
- -o-transition: color .3s ease;
- -ms-transition: color .3s ease;
- transition: color .3s ease;
- text-transform: uppercase;
- }
-
- .card .card-action a:hover {
- color: #ffd8a6;
- }
-
- .card .card-reveal {
- padding: 20px;
- position: absolute;
- background-color: #FFF;
- width: 100%;
- overflow-y: auto;
- top: 100%;
- height: 100%;
- z-index: 1;
- display: none;
- }
-
- .card .card-reveal .card-title {
- cursor: pointer;
- display: block;
- }
-
- #toast-container {
- display: block;
- position: fixed;
- z-index: 1001;
- }
-
- @media only screen and (max-width: 600px) {
- #toast-container {
- min-width: 100%;
- bottom: 0%;
- }
- }
-
- @media only screen and (min-width: 601px) and (max-width: 992px) {
- #toast-container {
- min-width: 30%;
- left: 5%;
- bottom: 7%;
- }
- }
-
- @media only screen and (min-width: 993px) {
- #toast-container {
- min-width: 8%;
- top: 10%;
- right: 7%;
- }
- }
-
- .toast {
- border-radius: 2px;
- top: 0;
- width: auto;
- clear: both;
- margin-top: 10px;
- position: relative;
- max-width: 100%;
- height: 48px;
- line-height: 48px;
- background-color: #323232;
- padding: 0 25px;
- font-size: 1.1rem;
- font-weight: 300;
- color: #fff;
- display: -webkit-box;
- display: -moz-box;
- display: -ms-flexbox;
- display: -webkit-flex;
- display: flex;
- -webkit-flex-align: center;
- -ms-flex-align: center;
- -webkit-align-items: center;
- align-items: center;
- -webkit-justify-content: space-between;
- justify-content: space-between;
- }
-
- .toast .btn, .toast .btn-large, .toast .btn-flat {
- margin: 0;
- margin-left: 3rem;
- }
-
- .toast.rounded {
- border-radius: 24px;
- }
-
- @media only screen and (max-width: 600px) {
- .toast {
- width: 100%;
- border-radius: 0;
- }
- }
-
- @media only screen and (min-width: 601px) and (max-width: 992px) {
- .toast {
- float: left;
- }
- }
-
- @media only screen and (min-width: 993px) {
- .toast {
- float: right;
- }
- }
-
- .tabs {
- position: relative;
- height: 48px;
- background-color: #fff;
- margin: 0 auto;
- width: 100%;
- white-space: nowrap;
- }
-
- .tabs .tab {
- display: block;
- float: left;
- text-align: center;
- line-height: 48px;
- height: 48px;
- padding: 0 20px;
- margin: 0;
- text-transform: uppercase;
- letter-spacing: .8px;
- width: 15%;
- }
-
- .tabs .tab a {
- color: #ee6e73;
- display: block;
- width: 100%;
- height: 100%;
- -webkit-transition: color .28s ease;
- -moz-transition: color .28s ease;
- -o-transition: color .28s ease;
- -ms-transition: color .28s ease;
- transition: color .28s ease;
- }
-
- .tabs .tab a:hover {
- color: #f9c9cb;
- }
-
- .tabs .indicator {
- position: absolute;
- bottom: 0;
- height: 2px;
- background-color: #f6b2b5;
- will-change: left, right;
- }
-
- .tabs .tab {
- padding: 0;
- }
-
- .material-tooltip {
- padding: 10px 8px;
- font-size: 1rem;
- z-index: 1000;
- background-color: transparent;
- border-radius: 2px;
- color: #fff;
- min-height: 36px;
- line-height: 1rem;
- opacity: 0;
- display: none;
- position: absolute;
- text-align: center;
- overflow: hidden;
- left: 0;
- top: 0;
- will-change: top, left;
- }
-
- .backdrop {
- position: absolute;
- opacity: 0;
- display: none;
- height: 7px;
- width: 14px;
- border-radius: 0 0 14px 14px;
- background-color: #323232;
- z-index: -1;
- -webkit-transform-origin: 50% 10%;
- -moz-transform-origin: 50% 10%;
- -ms-transform-origin: 50% 10%;
- -o-transform-origin: 50% 10%;
- transform-origin: 50% 10%;
- will-change: transform, opacity;
- }
-
- .btn, .btn-large, .btn-flat {
- border: none;
- border-radius: 2px;
- display: inline-block;
- height: 36px;
- line-height: 36px;
- outline: 0;
- padding: 0 2rem;
- text-transform: uppercase;
- vertical-align: middle;
- -webkit-tap-highlight-color: transparent;
- }
-
- .btn.disabled, .disabled.btn-large, .btn-floating.disabled, .btn-large.disabled, .btn:disabled, .btn-large:disabled, .btn-large:disabled, .btn-floating:disabled {
- background-color: #DFDFDF;
- box-shadow: none;
- color: #9F9F9F;
- cursor: default;
- }
-
- .btn.disabled *, .disabled.btn-large *, .btn-floating.disabled *, .btn-large.disabled *, .btn:disabled *, .btn-large:disabled *, .btn-large:disabled *, .btn-floating:disabled * {
- pointer-events: none;
- }
-
- .btn.disabled:hover, .disabled.btn-large:hover, .btn-floating.disabled:hover, .btn-large.disabled:hover, .btn:disabled:hover, .btn-large:disabled:hover, .btn-large:disabled:hover, .btn-floating:disabled:hover {
- background-color: #DFDFDF;
- color: #9F9F9F;
- }
-
- .btn i, .btn-large i, .btn-floating i, .btn-large i, .btn-flat i {
- font-size: 1.3rem;
- line-height: inherit;
- }
-
- .btn, .btn-large {
- text-decoration: none;
- color: #FFF;
- background-color: #26a69a;
- text-align: center;
- letter-spacing: .5px;
- -webkit-transition: .2s ease-out;
- -moz-transition: .2s ease-out;
- -o-transition: .2s ease-out;
- -ms-transition: .2s ease-out;
- transition: .2s ease-out;
- cursor: pointer;
- }
-
- .btn:hover, .btn-large:hover {
- background-color: #2bbbad;
- }
-
- .btn-floating {
- display: inline-block;
- color: #FFF;
- position: relative;
- overflow: hidden;
- z-index: 1;
- width: 37px;
- height: 37px;
- line-height: 37px;
- padding: 0;
- background-color: #26a69a;
- border-radius: 50%;
- transition: .3s;
- cursor: pointer;
- vertical-align: middle;
- }
-
- .btn-floating i {
- width: inherit;
- display: inline-block;
- text-align: center;
- color: #FFF;
- font-size: 1.6rem;
- line-height: 37px;
- }
-
- .btn-floating:before {
- border-radius: 0;
- }
-
- .btn-floating.btn-large {
- width: 55.5px;
- height: 55.5px;
- }
-
- .btn-floating.btn-large i {
- line-height: 55.5px;
- }
-
- button.btn-floating {
- border: none;
- }
-
- .fixed-action-btn {
- position: fixed;
- right: 23px;
- bottom: 23px;
- padding-top: 15px;
- margin-bottom: 0;
- z-index: 998;
- }
-
- .fixed-action-btn ul {
- left: 0;
- right: 0;
- text-align: center;
- position: absolute;
- bottom: 64px;
- }
-
- .fixed-action-btn ul li {
- margin-bottom: 15px;
- }
-
- .fixed-action-btn ul a.btn-floating {
- opacity: 0;
- }
-
- .btn-flat {
- box-shadow: none;
- background-color: transparent;
- color: #343434;
- cursor: pointer;
- }
-
- .btn-flat.disabled {
- color: #b3b3b3;
- cursor: default;
- }
-
- .btn-large {
- height: 54px;
- line-height: 56px;
- }
-
- .btn-large i {
- font-size: 1.6rem;
- }
-
- .dropdown-content {
- background-color: #FFFFFF;
- margin: 0;
- display: none;
- min-width: 100px;
- max-height: 650px;
- overflow-y: auto;
- opacity: 0;
- position: absolute;
- white-space: nowrap;
- z-index: 1;
- will-change: width, height;
- }
-
- .dropdown-content li {
- clear: both;
- color: rgba(0, 0, 0, 0.87);
- cursor: pointer;
- line-height: 1.5rem;
- width: 100%;
- text-align: left;
- text-transform: none;
- }
-
- .dropdown-content li:hover, .dropdown-content li.active {
- background-color: #eee;
- }
-
- .dropdown-content li > a, .dropdown-content li > span {
- font-size: 1.2rem;
- color: #26a69a;
- display: block;
- padding: 1rem 1rem;
- }
-
- /*!
- * Waves v0.6.0
- * 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 {
- position: relative;
- cursor: pointer;
- display: inline-block;
- overflow: hidden;
- -webkit-user-select: none;
- -moz-user-select: none;
- -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 .3s ease-out;
- -moz-transition: all .3s ease-out;
- -o-transition: all .3s ease-out;
- -ms-transition: all .3s ease-out;
- transition: all .3s ease-out;
- }
-
- .waves-effect .waves-ripple {
- position: absolute;
- border-radius: 50%;
- width: 20px;
- height: 20px;
- margin-top: -10px;
- margin-left: -10px;
- opacity: 0;
- background: rgba(0, 0, 0, 0.2);
- -webkit-transition: all 0.7s ease-out;
- -moz-transition: all 0.7s ease-out;
- -o-transition: all 0.7s ease-out;
- -ms-transition: all 0.7s ease-out;
- transition: all 0.7s ease-out;
- -webkit-transition-property: -webkit-transform, opacity;
- -moz-transition-property: -moz-transform, opacity;
- -o-transition-property: -o-transform, opacity;
- transition-property: transform, opacity;
- -webkit-transform: scale(0);
- -moz-transform: scale(0);
- -ms-transform: scale(0);
- -o-transform: scale(0);
- transform: scale(0);
- pointer-events: none;
- }
-
- .waves-effect.waves-light .waves-ripple {
- background-color: rgba(255, 255, 255, 0.45);
- }
-
- .waves-effect.waves-red .waves-ripple {
- background-color: rgba(244, 67, 54, 0.7);
- }
-
- .waves-effect.waves-yellow .waves-ripple {
- background-color: rgba(255, 235, 59, 0.7);
- }
-
- .waves-effect.waves-orange .waves-ripple {
- background-color: rgba(255, 152, 0, 0.7);
- }
-
- .waves-effect.waves-purple .waves-ripple {
- background-color: rgba(156, 39, 176, 0.7);
- }
-
- .waves-effect.waves-green .waves-ripple {
- background-color: rgba(76, 175, 80, 0.7);
- }
-
- .waves-effect.waves-teal .waves-ripple {
- background-color: rgba(0, 150, 136, 0.7);
- }
-
- .waves-notransition {
- -webkit-transition: none !important;
- -moz-transition: none !important;
- -o-transition: none !important;
- -ms-transition: none !important;
- transition: none !important;
- }
-
- .waves-circle {
- -webkit-transform: translateZ(0);
- -moz-transform: translateZ(0);
- -ms-transform: translateZ(0);
- -o-transform: translateZ(0);
- transform: translateZ(0);
- -webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%);
- }
-
- .waves-input-wrapper {
- border-radius: 0.2em;
- vertical-align: bottom;
- }
-
- .waves-input-wrapper .waves-button-input {
- position: relative;
- top: 0;
- left: 0;
- z-index: 1;
- }
-
- .waves-circle {
- text-align: center;
- width: 2.5em;
- height: 2.5em;
- line-height: 2.5em;
- border-radius: 50%;
- -webkit-mask-image: none;
- }
-
- .waves-block {
- display: block;
- }
-
- /* Firefox Bug: link not triggered */
- a.waves-effect .waves-ripple {
- z-index: -1;
- }
-
- .modal {
- display: none;
- position: fixed;
- left: 0;
- right: 0;
- background-color: #fafafa;
- padding: 0;
- max-height: 70%;
- width: 55%;
- margin: auto;
- overflow-y: auto;
- z-index: 1000;
- border-radius: 2px;
- -webkit-transform: translate(0);
- -moz-transform: translate(0);
- -ms-transform: translate(0);
- -o-transform: translate(0);
- transform: translate(0);
- will-change: top, opacity;
- }
-
- @media only screen and (max-width: 992px) {
- .modal {
- width: 80%;
- }
- }
-
- .modal h1, .modal h2, .modal h3, .modal h4 {
- margin-top: 0;
- }
-
- .modal .modal-content {
- padding: 24px;
- }
-
- .modal .modal-footer {
- border-radius: 0 0 2px 2px;
- background-color: #fafafa;
- padding: 4px 6px;
- height: 56px;
- width: 100%;
- }
-
- .modal .modal-footer .btn, .modal .modal-footer .btn-large, .modal .modal-footer .btn-flat {
- float: right;
- margin: 6px 0;
- }
-
- #lean-overlay {
- position: fixed;
- z-index: 999;
- top: 0;
- left: 0;
- bottom: 0;
- right: 0;
- height: 115%;
- width: 100%;
- background: #000;
- display: none;
- will-change: opacity;
- }
-
- .modal.modal-fixed-footer {
- padding: 0;
- height: 70%;
- }
-
- .modal.modal-fixed-footer .modal-content {
- position: fixed;
- max-height: 100%;
- padding-bottom: 64px;
- width: 100%;
- overflow-y: auto;
- }
-
- .modal.modal-fixed-footer .modal-footer {
- border-top: 1px solid rgba(0, 0, 0, 0.1);
- position: fixed;
- bottom: 0;
- }
-
- .modal.bottom-sheet {
- top: auto;
- bottom: -100%;
- margin: 0;
- width: 100%;
- max-height: 45%;
- border-radius: 0;
- will-change: bottom, opacity;
- }
-
- .collapsible {
- border-top: 1px solid #ddd;
- border-right: 1px solid #ddd;
- border-left: 1px solid #ddd;
- margin: 0.5rem 0 1rem 0;
- }
-
- .collapsible-header {
- display: block;
- cursor: pointer;
- height: 3rem;
- line-height: 3rem;
- padding: 0 1rem;
- background-color: #fff;
- border-bottom: 1px solid #ddd;
- }
-
- .collapsible-header i {
- width: 2rem;
- font-size: 1.6rem;
- line-height: 3rem;
- display: block;
- float: left;
- text-align: center;
- margin-right: 1rem;
- }
-
- .collapsible-body {
- overflow: hidden;
- display: none;
- border-bottom: 1px solid #ddd;
- -webkit-box-sizing: border-box;
- -moz-box-sizing: border-box;
- box-sizing: border-box;
- }
-
- .collapsible-body p {
- margin: 0;
- padding: 2rem;
- }
-
- .side-nav .collapsible {
- border: none;
- box-shadow: none;
- }
-
- .side-nav .collapsible li {
- padding: 0;
- }
-
- .side-nav .collapsible-header {
- background-color: transparent;
- border: none;
- line-height: inherit;
- height: inherit;
- margin: 0 1rem;
- }
-
- .side-nav .collapsible-header i {
- line-height: inherit;
- }
-
- .side-nav .collapsible-body {
- border: 0;
- background-color: #FFF;
- }
-
- .side-nav .collapsible-body li a {
- margin: 0 1rem 0 2rem;
- }
-
- .collapsible.popout {
- border: none;
- box-shadow: none;
- }
-
- .collapsible.popout > li {
- box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
- transform: scaleX(.92) translate3d(0, 0, 0);
- transition: margin .35s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform .35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
- }
-
- .collapsible.popout > li:hover {
- will-change: margin, transform;
- }
-
- .collapsible.popout > li.active {
- box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15);
- margin: 16px 0;
- transform: scaleX(1) translate3d(0, 0, 0);
- }
-
- .materialboxed {
- cursor: zoom-in;
- position: relative;
- -webkit-transition: opacity .4s;
- -moz-transition: opacity .4s;
- -o-transition: opacity .4s;
- -ms-transition: opacity .4s;
- transition: opacity .4s;
- }
-
- .materialboxed:hover {
- will-change: left, top, width, height;
- }
-
- .materialboxed:hover:not(.active) {
- opacity: .8;
- }
-
- .materialboxed.active {
- cursor: zoom-out;
- }
-
- #materialbox-overlay {
- position: fixed;
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
- background-color: #292929;
- z-index: 999;
- will-change: opacity;
- }
-
- .materialbox-caption {
- position: fixed;
- display: none;
- color: #fff;
- line-height: 50px;
- bottom: 0;
- width: 100%;
- text-align: center;
- padding: 0% 15%;
- height: 50px;
- z-index: 1000;
- -webkit-font-smoothing: antialiased;
- }
-
- /* Remove Focus Boxes */
- select:focus {
- outline: 1px solid #c9f3ef;
- }
-
- button:focus {
- outline: none;
- background-color: #2ab7a9;
- }
-
- label {
- font-size: 0.8rem;
- color: #9e9e9e;
- }
-
- /***************************
- Text Inputs + Textarea
-****************************/
- ::-webkit-input-placeholder {
- color: #d1d1d1;
- }
-
- :-moz-placeholder {
- /* Firefox 18- */
- color: #d1d1d1;
- }
-
- ::-moz-placeholder {
- /* Firefox 19+ */
- color: #d1d1d1;
- }
-
- :-ms-input-placeholder {
- color: #d1d1d1;
- }
-
- input[type=text], input[type=password], input[type=email], input[type=url], input[type=time], input[type=date], input[type=datetime-local], input[type=tel], input[type=number], input[type=search], textarea.materialize-textarea {
- background-color: transparent;
- border: none;
- border-bottom: 1px solid #9e9e9e;
- border-radius: 0;
- outline: none;
- height: 3rem;
- width: 100%;
- font-size: 1rem;
- margin: 0 0 15px 0;
- padding: 0;
- box-shadow: none;
- -webkit-box-sizing: content-box;
- -moz-box-sizing: content-box;
- box-sizing: content-box;
- transition: all .3s;
- }
-
- input[type=text]:disabled, input[type=text][readonly="readonly"], input[type=password]:disabled, input[type=password][readonly="readonly"], input[type=email]:disabled, input[type=email][readonly="readonly"], input[type=url]:disabled, input[type=url][readonly="readonly"], input[type=time]:disabled, input[type=time][readonly="readonly"], input[type=date]:disabled, input[type=date][readonly="readonly"], input[type=datetime-local]:disabled, input[type=datetime-local][readonly="readonly"], input[type=tel]:disabled, input[type=tel][readonly="readonly"], input[type=number]:disabled, input[type=number][readonly="readonly"], input[type=search]:disabled, input[type=search][readonly="readonly"], textarea.materialize-textarea:disabled, textarea.materialize-textarea[readonly="readonly"] {
- color: rgba(0, 0, 0, 0.26);
- border-bottom: 1px dotted rgba(0, 0, 0, 0.26);
- }
-
- input[type=text]:disabled + label, input[type=text][readonly="readonly"] + label, input[type=password]:disabled + label, input[type=password][readonly="readonly"] + label, input[type=email]:disabled + label, input[type=email][readonly="readonly"] + label, input[type=url]:disabled + label, input[type=url][readonly="readonly"] + label, input[type=time]:disabled + label, input[type=time][readonly="readonly"] + label, input[type=date]:disabled + label, input[type=date][readonly="readonly"] + label, input[type=datetime-local]:disabled + label, input[type=datetime-local][readonly="readonly"] + label, input[type=tel]:disabled + label, input[type=tel][readonly="readonly"] + label, input[type=number]:disabled + label, input[type=number][readonly="readonly"] + label, input[type=search]:disabled + label, input[type=search][readonly="readonly"] + label, textarea.materialize-textarea:disabled + label, textarea.materialize-textarea[readonly="readonly"] + label {
- color: rgba(0, 0, 0, 0.26);
- }
-
- input[type=text]:focus:not([readonly]), input[type=password]:focus:not([readonly]), input[type=email]:focus:not([readonly]), input[type=url]:focus:not([readonly]), input[type=time]:focus:not([readonly]), input[type=date]:focus:not([readonly]), input[type=datetime-local]:focus:not([readonly]), input[type=tel]:focus:not([readonly]), input[type=number]:focus:not([readonly]), input[type=search]:focus:not([readonly]), textarea.materialize-textarea:focus:not([readonly]) {
- border-bottom: 1px solid #26a69a;
- box-shadow: 0 1px 0 0 #26a69a;
- }
-
- input[type=text]:focus:not([readonly]) + label, input[type=password]:focus:not([readonly]) + label, input[type=email]:focus:not([readonly]) + label, input[type=url]:focus:not([readonly]) + label, input[type=time]:focus:not([readonly]) + label, input[type=date]:focus:not([readonly]) + label, input[type=datetime-local]:focus:not([readonly]) + label, input[type=tel]:focus:not([readonly]) + label, input[type=number]:focus:not([readonly]) + label, input[type=search]:focus:not([readonly]) + label, textarea.materialize-textarea:focus:not([readonly]) + label {
- color: #26a69a;
- }
-
- input[type=text].valid, input[type=text]:focus.valid, input[type=password].valid, input[type=password]:focus.valid, input[type=email].valid, input[type=email]:focus.valid, input[type=url].valid, input[type=url]:focus.valid, input[type=time].valid, input[type=time]:focus.valid, input[type=date].valid, input[type=date]:focus.valid, input[type=datetime-local].valid, input[type=datetime-local]:focus.valid, input[type=tel].valid, input[type=tel]:focus.valid, input[type=number].valid, input[type=number]:focus.valid, input[type=search].valid, input[type=search]:focus.valid, textarea.materialize-textarea.valid, textarea.materialize-textarea:focus.valid {
- border-bottom: 1px solid #4CAF50;
- box-shadow: 0 1px 0 0 #4CAF50;
- }
-
- input[type=text].invalid, input[type=text]:focus.invalid, input[type=password].invalid, input[type=password]:focus.invalid, input[type=email].invalid, input[type=email]:focus.invalid, input[type=url].invalid, input[type=url]:focus.invalid, input[type=time].invalid, input[type=time]:focus.invalid, input[type=date].invalid, input[type=date]:focus.invalid, input[type=datetime-local].invalid, input[type=datetime-local]:focus.invalid, input[type=tel].invalid, input[type=tel]:focus.invalid, input[type=number].invalid, input[type=number]:focus.invalid, input[type=search].invalid, input[type=search]:focus.invalid, textarea.materialize-textarea.invalid, textarea.materialize-textarea:focus.invalid {
- border-bottom: 1px solid #F44336;
- box-shadow: 0 1px 0 0 #F44336;
- }
-
- .input-field {
- position: relative;
- margin-top: 1rem;
- }
-
- .input-field label {
- color: #9e9e9e;
- position: absolute;
- top: 0.8rem;
- left: 0.75rem;
- font-size: 1rem;
- cursor: text;
- -webkit-transition: .2s ease-out;
- -moz-transition: .2s ease-out;
- -o-transition: .2s ease-out;
- -ms-transition: .2s ease-out;
- transition: .2s ease-out;
- }
-
- .input-field label.active {
- font-size: 0.8rem;
- -webkit-transform: translateY(-140%);
- -moz-transform: translateY(-140%);
- -ms-transform: translateY(-140%);
- -o-transform: translateY(-140%);
- transform: translateY(-140%);
- }
-
- .input-field .prefix {
- position: absolute;
- width: 3rem;
- font-size: 2rem;
- -webkit-transition: color .2s;
- -moz-transition: color .2s;
- -o-transition: color .2s;
- -ms-transition: color .2s;
- transition: color .2s;
- }
-
- .input-field .prefix.active {
- color: #26a69a;
- }
-
- .input-field .prefix ~ input, .input-field .prefix ~ textarea {
- margin-left: 3rem;
- width: 92%;
- width: calc(100% - 3rem);
- }
-
- .input-field .prefix ~ textarea {
- padding-top: .8rem;
- }
-
- .input-field .prefix ~ label {
- margin-left: 3rem;
- }
-
- @media only screen and (max-width: 992px) {
- .input-field .prefix ~ input {
- width: 86%;
- width: calc(100% - 3rem);
- }
- }
-
- @media only screen and (max-width: 600px) {
- .input-field .prefix ~ input {
- width: 80%;
- width: calc(100% - 3rem);
- }
- }
-
- .input-field input[type=search] {
- display: block;
- line-height: inherit;
- padding-left: 4rem;
- width: calc(100% - 4rem);
- }
-
- .input-field input[type=search]:focus {
- background-color: #FFF;
- border: 0;
- box-shadow: none;
- color: #444;
- }
-
- .input-field input[type=search]:focus + label i, .input-field input[type=search]:focus ~ .mdi-navigation-close {
- color: #444;
- }
-
- .input-field input[type=search] + label {
- left: 1rem;
- }
-
- .input-field input[type=search] ~ .mdi-navigation-close {
- position: absolute;
- top: 0;
- right: 1rem;
- color: transparent;
- cursor: pointer;
- font-size: 2rem;
- transition: .3s color;
- }
-
- textarea {
- width: 100%;
- height: 3rem;
- background-color: transparent;
- }
-
- textarea.materialize-textarea {
- overflow-y: hidden;
- /* prevents scroll bar flash */
- padding: 1.6rem 0;
- /* prevents text jump on Enter keypress */
- resize: none;
- min-height: 3rem;
- }
-
- .hiddendiv {
- display: none;
- white-space: pre-wrap;
- word-wrap: break-word;
- overflow-wrap: break-word;
- /* future version of deprecated 'word-wrap' */
- padding-top: 1.2rem;
- /* prevents text jump on Enter keypress */
- }
-
- /***************
- Radio Buttons
-***************/
- /* Remove default Radio Buttons */
- [type="radio"]:not(:checked), [type="radio"]:checked {
- position: absolute;
- left: -9999px;
- visibility: hidden;
- }
-
- [type="radio"]:not(:checked) + label, [type="radio"]:checked + label {
- position: relative;
- padding-left: 35px;
- cursor: pointer;
- display: inline-block;
- height: 25px;
- line-height: 25px;
- font-size: 1rem;
- -webkit-transition: .28s ease;
- -moz-transition: .28s ease;
- -o-transition: .28s ease;
- -ms-transition: .28s ease;
- transition: .28s ease;
- -webkit-user-select: none;
- /* webkit (safari, chrome) browsers */
- -moz-user-select: none;
- /* mozilla browsers */
- -khtml-user-select: none;
- /* webkit (konqueror) browsers */
- -ms-user-select: none;
- /* IE10+ */
- }
-
- [type="radio"] + label:before, [type="radio"] + label:after {
- content: '';
- position: absolute;
- left: 0;
- top: 0;
- margin: 4px;
- width: 16px;
- height: 16px;
- z-index: 0;
- -webkit-transition: .28s ease;
- -moz-transition: .28s ease;
- -o-transition: .28s ease;
- -ms-transition: .28s ease;
- transition: .28s ease;
- }
-
- /* Unchecked styles */
- [type="radio"]:not(:checked) + label:before {
- border-radius: 50%;
- border: 2px solid #5a5a5a;
- }
-
- [type="radio"]:not(:checked) + label:after {
- border-radius: 50%;
- border: 2px solid #5a5a5a;
- z-index: -1;
- -webkit-transform: scale(0);
- -moz-transform: scale(0);
- -ms-transform: scale(0);
- -o-transform: scale(0);
- transform: scale(0);
- }
-
- /* Checked styles */
- [type="radio"]:checked + label:before {
- border-radius: 50%;
- border: 2px solid transparent;
- }
-
- [type="radio"]:checked + label:after {
- border-radius: 50%;
- border: 2px solid #26a69a;
- background-color: #26a69a;
- z-index: 0;
- -webkit-transform: scale(1.02);
- -moz-transform: scale(1.02);
- -ms-transform: scale(1.02);
- -o-transform: scale(1.02);
- transform: scale(1.02);
- }
-
- /* Radio With gap */
- [type="radio"].with-gap:checked + label:before {
- border-radius: 50%;
- border: 2px solid #26a69a;
- }
-
- [type="radio"].with-gap:checked + label:after {
- border-radius: 50%;
- border: 2px solid #26a69a;
- background-color: #26a69a;
- z-index: 0;
- -webkit-transform: scale(.5);
- -moz-transform: scale(.5);
- -ms-transform: scale(.5);
- -o-transform: scale(.5);
- transform: scale(.5);
- }
-
- /* Disabled style */
- [type="radio"]:disabled:not(:checked) + label:before, [type="radio"]:disabled:checked + label:before {
- background-color: transparent;
- border-color: rgba(0, 0, 0, 0.26);
- }
-
- [type="radio"]:disabled + label {
- color: rgba(0, 0, 0, 0.26);
- }
-
- [type="radio"]:disabled:not(:checked) + label:hover:before {
- border-color: rgba(0, 0, 0, 0.26);
- }
-
- /***************
- Checkboxes
-***************/
- /* CUSTOM CSS CHECKBOXES */
- form p {
- margin-bottom: 10px;
- text-align: left;
- }
-
- form p:last-child {
- margin-bottom: 0;
- }
-
- /* Remove default checkbox */
- [type="checkbox"]:not(:checked), [type="checkbox"]:checked {
- position: absolute;
- left: -9999px;
- }
-
- [type="checkbox"] {
- /* checkbox aspect */
- }
-
- [type="checkbox"] + label {
- position: relative;
- padding-left: 35px;
- cursor: pointer;
- display: inline-block;
- height: 25px;
- line-height: 25px;
- font-size: 1rem;
- -webkit-user-select: none;
- /* webkit (safari, chrome) browsers */
- -moz-user-select: none;
- /* mozilla browsers */
- -khtml-user-select: none;
- /* webkit (konqueror) browsers */
- -ms-user-select: none;
- /* IE10+ */
- }
-
- [type="checkbox"] + label:before {
- content: '';
- position: absolute;
- top: 0;
- left: 0;
- width: 18px;
- height: 18px;
- z-index: 0;
- border: 2px solid #5a5a5a;
- border-radius: 1px;
- margin-top: 2px;
- -webkit-transition: 0.2s;
- -moz-transition: 0.2s;
- -o-transition: 0.2s;
- -ms-transition: 0.2s;
- transition: 0.2s;
- }
-
- [type="checkbox"]:not(:checked):disabled + label:before {
- border: none;
- background-color: rgba(0, 0, 0, 0.26);
- }
-
- [type="checkbox"]:checked + label:before {
- top: -4px;
- left: -3px;
- width: 12px;
- height: 22px;
- border-top: 2px solid transparent;
- border-left: 2px solid transparent;
- border-right: 2px solid #26a69a;
- border-bottom: 2px solid #26a69a;
- -webkit-transform: rotate(40deg);
- -moz-transform: rotate(40deg);
- -ms-transform: rotate(40deg);
- -o-transform: rotate(40deg);
- transform: rotate(40deg);
- -webkit-backface-visibility: hidden;
- -webkit-transform-origin: 100% 100%;
- -moz-transform-origin: 100% 100%;
- -ms-transform-origin: 100% 100%;
- -o-transform-origin: 100% 100%;
- transform-origin: 100% 100%;
- }
-
- [type="checkbox"]:checked:disabled + label:before {
- border-right: 2px solid rgba(0, 0, 0, 0.26);
- border-bottom: 2px solid rgba(0, 0, 0, 0.26);
- }
-
- /* Indeterminate checkbox */
- [type="checkbox"]:indeterminate + label:before {
- left: -10px;
- top: -11px;
- width: 10px;
- height: 22px;
- border-top: none;
- border-left: none;
- border-right: 2px solid #26a69a;
- border-bottom: none;
- -webkit-transform: rotate(90deg);
- -moz-transform: rotate(90deg);
- -ms-transform: rotate(90deg);
- -o-transform: rotate(90deg);
- transform: rotate(90deg);
- -webkit-backface-visibility: hidden;
- -webkit-transform-origin: 100% 100%;
- -moz-transform-origin: 100% 100%;
- -ms-transform-origin: 100% 100%;
- -o-transform-origin: 100% 100%;
- transform-origin: 100% 100%;
- }
-
- [type="checkbox"]:indeterminate:disabled + label:before {
- border-right: 2px solid rgba(0, 0, 0, 0.26);
- background-color: transparent;
- }
-
- [type="checkbox"].filled-in + label:after {
- border-radius: 2px;
- }
-
- [type="checkbox"].filled-in + label:before, [type="checkbox"].filled-in + label:after {
- content: '';
- left: 0;
- position: absolute;
- /* .1s delay is for check animation */
- transition: border .25s, background-color .25s, width .2s .1s, height .2s .1s, top .2s .1s, left .2s .1s;
- z-index: 1;
- }
-
- [type="checkbox"].filled-in:not(:checked) + label:before {
- width: 0;
- height: 0;
- border: 3px solid transparent;
- left: 6px;
- top: 10px;
- -webkit-transform: rotateZ(37deg);
- transform: rotateZ(37deg);
- -webkit-transform-origin: 20% 40%;
- transform-origin: 100% 100%;
- }
-
- [type="checkbox"].filled-in:not(:checked) + label:after {
- height: 20px;
- width: 20px;
- background-color: transparent;
- border: 2px solid #5a5a5a;
- top: 0px;
- z-index: 0;
- }
-
- [type="checkbox"].filled-in:checked + label:before {
- top: 0;
- left: 1px;
- width: 8px;
- height: 13px;
- border-top: 2px solid transparent;
- border-left: 2px solid transparent;
- border-right: 2px solid #fff;
- border-bottom: 2px solid #fff;
- -webkit-transform: rotateZ(37deg);
- transform: rotateZ(37deg);
- -webkit-transform-origin: 100% 100%;
- transform-origin: 100% 100%;
- }
-
- [type="checkbox"].filled-in:checked + label:after {
- top: 0px;
- width: 20px;
- height: 20px;
- border: 2px solid #26a69a;
- background-color: #26a69a;
- z-index: 0;
- }
-
- [type="checkbox"].filled-in:disabled:not(:checked) + label:before {
- background-color: transparent;
- border: 2px solid transparent;
- }
-
- [type="checkbox"].filled-in:disabled:not(:checked) + label:after {
- border-color: transparent;
- background-color: #BDBDBD;
- }
-
- [type="checkbox"].filled-in:disabled:checked + label:before {
- background-color: transparent;
- }
-
- [type="checkbox"].filled-in:disabled:checked + label:after {
- background-color: #BDBDBD;
- border-color: #BDBDBD;
- }
-
- /***************
- Switch
-***************/
- .switch, .switch * {
- -webkit-user-select: none;
- -moz-user-select: none;
- -khtml-user-select: none;
- -ms-user-select: none;
- }
-
- .switch label {
- cursor: pointer;
- }
-
- .switch label input[type=checkbox] {
- opacity: 0;
- width: 0;
- height: 0;
- }
-
- .switch label input[type=checkbox]:checked + .lever {
- background-color: #84c7c1;
- }
-
- .switch label input[type=checkbox]:checked + .lever:after {
- background-color: #26a69a;
- }
-
- .switch label .lever {
- content: "";
- display: inline-block;
- position: relative;
- width: 40px;
- height: 15px;
- background-color: #818181;
- border-radius: 15px;
- margin-right: 10px;
- transition: background 0.3s ease;
- vertical-align: middle;
- margin: 0 16px;
- }
-
- .switch label .lever:after {
- content: "";
- position: absolute;
- display: inline-block;
- width: 21px;
- height: 21px;
- background-color: #F1F1F1;
- border-radius: 21px;
- box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4);
- left: -5px;
- top: -3px;
- transition: left 0.3s ease, background 0.3s ease, box-shadow 0.1s ease;
- }
-
- 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);
- }
-
- .switch label input[type=checkbox]:checked + .lever:after {
- left: 24px;
- }
-
- .switch input[type=checkbox][disabled] + .lever {
- cursor: default;
- }
-
- .switch label input[type=checkbox][disabled] + .lever:after, .switch label input[type=checkbox][disabled]:checked + .lever:after {
- background-color: #BDBDBD;
- }
-
- /***************
- Select Field
-***************/
- .select-label {
- position: absolute;
- }
-
- .select-wrapper {
- position: relative;
- }
-
- .select-wrapper input.select-dropdown {
- position: relative;
- cursor: pointer;
- background-color: transparent;
- border: none;
- border-bottom: 1px solid #9e9e9e;
- outline: none;
- height: 3rem;
- line-height: 3rem;
- width: 100%;
- font-size: 1rem;
- margin: 0 0 15px 0;
- padding: 0;
- display: block;
- }
-
- .select-wrapper .mdi-navigation-arrow-drop-down {
- color: initial;
- position: absolute;
- right: 0;
- top: 0;
- font-size: 23px;
- }
-
- .select-wrapper .mdi-navigation-arrow-drop-down.disabled {
- color: rgba(0, 0, 0, 0.26);
- }
-
- .select-wrapper + label {
- position: absolute;
- top: -14px;
- font-size: 0.8rem;
- }
-
- select {
- display: none;
- }
-
- select.browser-default {
- display: block;
- }
-
- select:disabled {
- color: rgba(0, 0, 0, 0.3);
- }
-
- .select-wrapper input.select-dropdown:disabled {
- color: rgba(0, 0, 0, 0.3);
- cursor: default;
- -webkit-user-select: none;
- /* webkit (safari, chrome) browsers */
- -moz-user-select: none;
- /* mozilla browsers */
- -ms-user-select: none;
- /* IE10+ */
- border-bottom: 1px solid rgba(0, 0, 0, 0.3);
- }
-
- .select-wrapper i {
- color: rgba(0, 0, 0, 0.3);
- }
-
- .select-dropdown li.disabled {
- color: rgba(0, 0, 0, 0.3);
- background-color: transparent;
- }
-
- /*********************
- File Input
-**********************/
- .file-field {
- position: relative;
- }
-
- .file-field input.file-path {
- margin-left: 100px;
- width: calc(100% - 100px);
- }
-
- .file-field .btn, .file-field .btn-large {
- position: absolute;
- top: 0;
- left: 0;
- height: 3rem;
- line-height: 3rem;
- }
-
- .file-field span {
- cursor: pointer;
- }
-
- .file-field input[type=file] {
- position: absolute;
- top: 0;
- right: 0;
- left: 0;
- bottom: 0;
- width: 100%;
- margin: 0;
- padding: 0;
- font-size: 20px;
- cursor: pointer;
- opacity: 0;
- filter: alpha(opacity=0);
- }
-
- /***************
- Range
-***************/
- .range-field {
- position: relative;
- }
-
- input[type=range], input[type=range] + .thumb {
- cursor: pointer;
- }
-
- input[type=range] {
- position: relative;
- background-color: transparent;
- border: none;
- outline: none;
- width: 100%;
- margin: 15px 0px;
- padding: 0;
- }
-
- input[type=range] + .thumb {
- position: absolute;
- border: none;
- height: 0;
- width: 0;
- border-radius: 50%;
- background-color: #26a69a;
- top: 10px;
- margin-left: -6px;
- -webkit-transform-origin: 50% 50%;
- -moz-transform-origin: 50% 50%;
- -ms-transform-origin: 50% 50%;
- -o-transform-origin: 50% 50%;
- transform-origin: 50% 50%;
- -webkit-transform: rotate(-45deg);
- -moz-transform: rotate(-45deg);
- -ms-transform: rotate(-45deg);
- -o-transform: rotate(-45deg);
- transform: rotate(-45deg);
- }
-
- input[type=range] + .thumb .value {
- display: block;
- width: 30px;
- text-align: center;
- color: #26a69a;
- font-size: 0;
- -webkit-transform: rotate(45deg);
- -moz-transform: rotate(45deg);
- -ms-transform: rotate(45deg);
- -o-transform: rotate(45deg);
- transform: rotate(45deg);
- }
-
- input[type=range] + .thumb.active {
- border-radius: 50% 50% 50% 0;
- }
-
- input[type=range] + .thumb.active .value {
- color: #fff;
- margin-left: -1px;
- margin-top: 8px;
- font-size: 10px;
- }
-
- input[type=range]:focus {
- outline: none;
- }
-
- input[type=range] {
- -webkit-appearance: none;
- }
-
- input[type=range]::-webkit-slider-runnable-track {
- height: 3px;
- background: #c2c0c2;
- border: none;
- }
-
- input[type=range]::-webkit-slider-thumb {
- -webkit-appearance: none;
- border: none;
- height: 14px;
- width: 14px;
- border-radius: 50%;
- background-color: #26a69a;
- transform-origin: 50% 50%;
- margin: -5px 0 0 0;
- -webkit-transition: 0.3s;
- -moz-transition: 0.3s;
- -o-transition: 0.3s;
- -ms-transition: 0.3s;
- transition: 0.3s;
- }
-
- input[type=range]:focus::-webkit-slider-runnable-track {
- background: #ccc;
- }
-
- input[type=range] {
- /* fix for FF unable to apply focus style bug */
- border: 1px solid white;
- /*required for proper track sizing in FF*/
- }
-
- input[type=range]::-moz-range-track {
- height: 3px;
- background: #ddd;
- border: none;
- }
-
- input[type=range]::-moz-range-thumb {
- border: none;
- height: 14px;
- width: 14px;
- border-radius: 50%;
- background: #26a69a;
- margin-top: -5px;
- }
-
- /*hide the outline behind the border*/
- input[type=range]:-moz-focusring {
- outline: 1px solid white;
- outline-offset: -1px;
- }
-
- input[type=range]:focus::-moz-range-track {
- background: #ccc;
- }
-
- input[type=range]::-ms-track {
- height: 3px;
- /*remove bg colour from the track, we'll use ms-fill-lower and ms-fill-upper instead */
- background: transparent;
- /*leave room for the larger thumb to overflow with a transparent border */
- border-color: transparent;
- border-width: 6px 0;
- /*remove default tick marks*/
- color: transparent;
- }
-
- input[type=range]::-ms-fill-lower {
- background: #777;
- }
-
- input[type=range]::-ms-fill-upper {
- background: #ddd;
- }
-
- input[type=range]::-ms-thumb {
- border: none;
- height: 14px;
- width: 14px;
- border-radius: 50%;
- background: #26a69a;
- }
-
- input[type=range]:focus::-ms-fill-lower {
- background: #888;
- }
-
- input[type=range]:focus::-ms-fill-upper {
- background: #ccc;
- }
-
- /***************************
- Text Inputs + Textarea
-****************************/
- select {
- background-color: rgba(255, 255, 255, 0.9);
- width: 100%;
- padding: 5px;
- border: 1px solid #f2f2f2;
- border-radius: 2px;
- height: 3rem;
- }
-
- /***************
- Nav List
-***************/
- .table-of-contents.fixed {
- position: fixed;
- }
-
- .table-of-contents li {
- padding: 2px 0;
- }
-
- .table-of-contents a {
- display: inline-block;
- font-weight: 300;
- color: #757575;
- padding-left: 20px;
- height: 1.5rem;
- line-height: 1.5rem;
- letter-spacing: .4;
- display: inline-block;
- }
-
- .table-of-contents a:hover {
- color: #a8a8a8;
- padding-left: 19px;
- border-left: 1px solid #ea4a4f;
- }
-
- .table-of-contents a.active {
- font-weight: 500;
- padding-left: 18px;
- border-left: 2px solid #ea4a4f;
- }
-
- .side-nav {
- position: fixed;
- width: 240px;
- left: -105%;
- top: 0;
- margin: 0;
- height: 100%;
- height: calc(100% + 60px);
- height: -moz-calc(100%);
- padding-bottom: 60px;
- background-color: #FFF;
- z-index: 999;
- overflow-y: auto;
- will-change: left;
- }
-
- .side-nav.right-aligned {
- will-change: right;
- right: -105%;
- left: auto;
- }
-
- .side-nav .collapsible {
- margin: 0;
- }
-
- .side-nav li {
- float: none;
- padding: 0 15px;
- }
-
- .side-nav li:hover, .side-nav li.active {
- background-color: #ddd;
- }
-
- .side-nav a {
- color: #444;
- display: block;
- font-size: 1rem;
- height: 64px;
- line-height: 64px;
- padding: 0 15px;
- }
-
- .drag-target {
- height: 100%;
- width: 10px;
- position: fixed;
- top: 0;
- z-index: 998;
- }
-
- .side-nav.fixed a {
- display: block;
- padding: 0 15px;
- color: #444;
- }
-
- .side-nav.fixed {
- left: 0;
- position: fixed;
- }
-
- .side-nav.fixed.right-aligned {
- right: 0;
- left: auto;
- }
-
- @media only screen and (max-width: 992px) {
- .side-nav.fixed {
- left: -105%;
- }
-
- .side-nav.fixed.right-aligned {
- right: -105%;
- left: auto;
- }
- }
-
- .side-nav .collapsible-body li.active, .side-nav.fixed .collapsible-body li.active {
- background-color: #ee6e73;
- }
-
- .side-nav .collapsible-body li.active a, .side-nav.fixed .collapsible-body li.active a {
- color: #fff;
- }
-
- #sidenav-overlay {
- position: fixed;
- top: 0;
- left: 0;
- right: 0;
- height: 120vh;
- background-color: rgba(0, 0, 0, 0.5);
- z-index: 997;
- will-change: opacity;
- }
-
- /*
- @license
- 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
- 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
- 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
- */
- /**************************/
- /* STYLES FOR THE SPINNER */
- /**************************/
- /*
- * Constants:
- * STROKEWIDTH = 3px
- * ARCSIZE = 270 degrees (amount of circle the arc takes up)
- * ARCTIME = 1333ms (time it takes to expand and contract arc)
- * ARCSTARTROT = 216 degrees (how much the start location of the arc
- * should rotate each time, 216 gives us a
- * 5 pointed star shape (it's 360/5 * 3).
- * For a 7 pointed star, we might do
- * 360/7 * 3 = 154.286)
- * CONTAINERWIDTH = 28px
- * SHRINK_TIME = 400ms
- */
- .preloader-wrapper {
- display: inline-block;
- position: relative;
- width: 48px;
- height: 48px;
- }
-
- .preloader-wrapper.small {
- width: 36px;
- height: 36px;
- }
-
- .preloader-wrapper.big {
- width: 64px;
- height: 64px;
- }
-
- .preloader-wrapper.active {
- /* duration: 360 * ARCTIME / (ARCSTARTROT + (360-ARCSIZE)) */
- -webkit-animation: container-rotate 1568ms linear infinite;
- animation: container-rotate 1568ms linear infinite;
- }
-
- @-webkit-keyframes container-rotate {
- to {
- -webkit-transform: rotate(360deg);
- }
- }
-
- @keyframes container-rotate {
- to {
- transform: rotate(360deg);
- }
- }
-
- .spinner-layer {
- position: absolute;
- width: 100%;
- height: 100%;
- opacity: 0;
- }
-
- .spinner-blue, .spinner-blue-only {
- border-color: #4285f4;
- }
-
- .spinner-red, .spinner-red-only {
- border-color: #db4437;
- }
-
- .spinner-yellow, .spinner-yellow-only {
- border-color: #f4b400;
- }
-
- .spinner-green, .spinner-green-only {
- border-color: #0f9d58;
- }
-
- /**
- * IMPORTANT NOTE ABOUT CSS ANIMATION PROPERTIES (keanulee):
- *
- * 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
- * animation-delay and instead set custom keyframes for each color (as redundant as it
- * seems).
- *
- * We write out each animation in full (instead of separating animation-name,
- * animation-duration, etc.) because under the polyfill, Safari does not recognize those
- * specific properties properly, treats them as -webkit-animation, and overrides the
- * other animation rules. See https://github.com/Polymer/platform/issues/53.
- */
- .active .spinner-layer.spinner-blue {
- /* durations: 4 * ARCTIME */
- -webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, blue-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
- animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, blue-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
- }
-
- .active .spinner-layer.spinner-red {
- /* durations: 4 * ARCTIME */
- -webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, red-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
- animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, red-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
- }
-
- .active .spinner-layer.spinner-yellow {
- /* durations: 4 * ARCTIME */
- -webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, yellow-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
- animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, yellow-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
- }
-
- .active .spinner-layer.spinner-green {
- /* durations: 4 * ARCTIME */
- -webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, green-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
- animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, green-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
- }
-
- .active .spinner-layer.spinner-blue-only, .active .spinner-layer.spinner-red-only, .active .spinner-layer.spinner-yellow-only, .active .spinner-layer.spinner-green-only {
- /* durations: 4 * ARCTIME */
- opacity: 1;
- -webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
- animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
- }
-
- @-webkit-keyframes fill-unfill-rotate {
- /* 0.5 * ARCSIZE */
- /* 1 * ARCSIZE */
- /* 1.5 * ARCSIZE */
- /* 2 * ARCSIZE */
- /* 2.5 * ARCSIZE */
- /* 3 * ARCSIZE */
- /* 3.5 * ARCSIZE */
- /* 4 * ARCSIZE */
- 12.5% {
- -webkit-transform: rotate(135deg);
- }
-
- 25% {
- -webkit-transform: rotate(270deg);
- }
-
- 37.5% {
- -webkit-transform: rotate(405deg);
- }
-
- 50% {
- -webkit-transform: rotate(540deg);
- }
-
- 62.5% {
- -webkit-transform: rotate(675deg);
- }
-
- 75% {
- -webkit-transform: rotate(810deg);
- }
-
- 87.5% {
- -webkit-transform: rotate(945deg);
- }
-
- to {
- -webkit-transform: rotate(1080deg);
- }
- }
-
- @keyframes fill-unfill-rotate {
- /* 0.5 * ARCSIZE */
- /* 1 * ARCSIZE */
- /* 1.5 * ARCSIZE */
- /* 2 * ARCSIZE */
- /* 2.5 * ARCSIZE */
- /* 3 * ARCSIZE */
- /* 3.5 * ARCSIZE */
- /* 4 * ARCSIZE */
- 12.5% {
- transform: rotate(135deg);
- }
-
- 25% {
- transform: rotate(270deg);
- }
-
- 37.5% {
- transform: rotate(405deg);
- }
-
- 50% {
- transform: rotate(540deg);
- }
-
- 62.5% {
- transform: rotate(675deg);
- }
-
- 75% {
- transform: rotate(810deg);
- }
-
- 87.5% {
- transform: rotate(945deg);
- }
-
- to {
- transform: rotate(1080deg);
- }
- }
-
- @-webkit-keyframes blue-fade-in-out {
- from {
- opacity: 1;
- }
-
- 25% {
- opacity: 1;
- }
-
- 26% {
- opacity: 0;
- }
-
- 89% {
- opacity: 0;
- }
-
- 90% {
- opacity: 1;
- }
-
- 100% {
- opacity: 1;
- }
- }
-
- @keyframes blue-fade-in-out {
- from {
- opacity: 1;
- }
-
- 25% {
- opacity: 1;
- }
-
- 26% {
- opacity: 0;
- }
-
- 89% {
- opacity: 0;
- }
-
- 90% {
- opacity: 1;
- }
-
- 100% {
- opacity: 1;
- }
- }
-
- @-webkit-keyframes red-fade-in-out {
- from {
- opacity: 0;
- }
-
- 15% {
- opacity: 0;
- }
-
- 25% {
- opacity: 1;
- }
-
- 50% {
- opacity: 1;
- }
-
- 51% {
- opacity: 0;
- }
- }
-
- @keyframes red-fade-in-out {
- from {
- opacity: 0;
- }
-
- 15% {
- opacity: 0;
- }
-
- 25% {
- opacity: 1;
- }
-
- 50% {
- opacity: 1;
- }
-
- 51% {
- opacity: 0;
- }
- }
-
- @-webkit-keyframes yellow-fade-in-out {
- from {
- opacity: 0;
- }
-
- 40% {
- opacity: 0;
- }
-
- 50% {
- opacity: 1;
- }
-
- 75% {
- opacity: 1;
- }
-
- 76% {
- opacity: 0;
- }
- }
-
- @keyframes yellow-fade-in-out {
- from {
- opacity: 0;
- }
-
- 40% {
- opacity: 0;
- }
-
- 50% {
- opacity: 1;
- }
-
- 75% {
- opacity: 1;
- }
-
- 76% {
- opacity: 0;
- }
- }
-
- @-webkit-keyframes green-fade-in-out {
- from {
- opacity: 0;
- }
-
- 65% {
- opacity: 0;
- }
-
- 75% {
- opacity: 1;
- }
-
- 90% {
- opacity: 1;
- }
-
- 100% {
- opacity: 0;
- }
- }
-
- @keyframes green-fade-in-out {
- from {
- opacity: 0;
- }
-
- 65% {
- opacity: 0;
- }
-
- 75% {
- opacity: 1;
- }
-
- 90% {
- opacity: 1;
- }
-
- 100% {
- opacity: 0;
- }
- }
-
- /**
- * 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).
- */
- .gap-patch {
- position: absolute;
- top: 0;
- left: 45%;
- width: 10%;
- height: 100%;
- overflow: hidden;
- border-color: inherit;
- }
-
- .gap-patch .circle {
- width: 1000%;
- left: -450%;
- }
-
- .circle-clipper {
- display: inline-block;
- position: relative;
- width: 50%;
- height: 100%;
- overflow: hidden;
- border-color: inherit;
- }
-
- .circle-clipper .circle {
- width: 200%;
- height: 100%;
- border-width: 3px;
- /* STROKEWIDTH */
- border-style: solid;
- border-color: inherit;
- border-bottom-color: transparent !important;
- border-radius: 50%;
- -webkit-animation: none;
- animation: none;
- position: absolute;
- top: 0;
- right: 0;
- bottom: 0;
- }
-
- .circle-clipper.left .circle {
- left: 0;
- border-right-color: transparent !important;
- -webkit-transform: rotate(129deg);
- transform: rotate(129deg);
- }
-
- .circle-clipper.right .circle {
- left: -100%;
- border-left-color: transparent !important;
- -webkit-transform: rotate(-129deg);
- transform: rotate(-129deg);
- }
-
- .active .circle-clipper.left .circle {
- /* duration: ARCTIME */
- -webkit-animation: left-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
- animation: left-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
- }
-
- .active .circle-clipper.right .circle {
- /* duration: ARCTIME */
- -webkit-animation: right-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
- animation: right-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
- }
-
- @-webkit-keyframes left-spin {
- from {
- -webkit-transform: rotate(130deg);
- }
-
- 50% {
- -webkit-transform: rotate(-5deg);
- }
-
- to {
- -webkit-transform: rotate(130deg);
- }
- }
-
- @keyframes left-spin {
- from {
- transform: rotate(130deg);
- }
-
- 50% {
- transform: rotate(-5deg);
- }
-
- to {
- transform: rotate(130deg);
- }
- }
-
- @-webkit-keyframes right-spin {
- from {
- -webkit-transform: rotate(-130deg);
- }
-
- 50% {
- -webkit-transform: rotate(5deg);
+ @keyframes fill-unfill-rotate {
+ /* 0.5 * ARCSIZE */
+ /* 1 * ARCSIZE */
+ /* 1.5 * ARCSIZE */
+ /* 2 * ARCSIZE */
+ /* 2.5 * ARCSIZE */
+ /* 3 * ARCSIZE */
+ /* 3.5 * ARCSIZE */
+ /* 4 * ARCSIZE */
+ 12.5% {
+ transform: rotate(135deg);
}
- to {
- -webkit-transform: rotate(-130deg);
+ 25% {
+ transform: rotate(270deg);
}
- }
- @keyframes right-spin {
- from {
- transform: rotate(-130deg);
+ 37.5% {
+ transform: rotate(405deg);
}
50% {
- transform: rotate(5deg);
- }
-
- to {
- transform: rotate(-130deg);
- }
- }
-
- #spinnerContainer.cooldown {
- /* duration: SHRINK_TIME */
- -webkit-animation: container-rotate 1568ms linear infinite, fade-out 400ms cubic-bezier(0.4, 0, 0.2, 1);
- animation: container-rotate 1568ms linear infinite, fade-out 400ms cubic-bezier(0.4, 0, 0.2, 1);
- }
-
- @-webkit-keyframes fade-out {
- from {
- opacity: 1;
- }
-
- to {
- opacity: 0;
- }
- }
-
- @keyframes fade-out {
- from {
- opacity: 1;
- }
-
- to {
- opacity: 0;
+ transform: rotate(540deg);
}
- }
-
- .slider {
- position: relative;
- height: 440px;
- width: 100%;
- }
-
- .slider.fullscreen {
- height: 100%;
- width: 100%;
- position: absolute;
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
- }
-
- .slider.fullscreen ul.slides {
- height: 100%;
- }
-
- .slider.fullscreen ul.indicators {
- z-index: 2;
- bottom: 30px;
- }
-
- .slider .slides {
- background-color: #9e9e9e;
- margin: 0;
- height: 400px;
- }
-
- .slider .slides li {
- opacity: 0;
- position: absolute;
- top: 0;
- left: 0;
- z-index: 1;
- width: 100%;
- height: inherit;
- overflow: hidden;
- }
-
- .slider .slides li img {
- height: 100%;
- width: 100%;
- background-size: cover;
- background-position: center;
- }
-
- .slider .slides li .caption {
- color: #fff;
- position: absolute;
- top: 15%;
- left: 15%;
- width: 70%;
- opacity: 0;
- }
-
- .slider .slides li .caption p {
- color: #e0e0e0;
- }
-
- .slider .slides li.active {
- z-index: 2;
- }
-
- .slider .indicators {
- position: absolute;
- text-align: center;
- left: 0;
- right: 0;
- bottom: 0;
- margin: 0;
- }
-
- .slider .indicators .indicator-item {
- display: inline-block;
- position: relative;
- cursor: pointer;
- height: 16px;
- width: 16px;
- margin: 0 12px;
- background-color: #e0e0e0;
- -webkit-transition: background-color .3s;
- -moz-transition: background-color .3s;
- -o-transition: background-color .3s;
- -ms-transition: background-color .3s;
- transition: background-color .3s;
- border-radius: 50%;
- }
-
- .slider .indicators .indicator-item.active {
- background-color: #4CAF50;
- }
-
- /* ==========================================================================
- $BASE-PICKER
- ========================================================================== */
- /**
- * Note: the root picker element should *NOT* be styled more than what's here.
- */
- .picker {
- font-size: 16px;
- text-align: left;
- line-height: 1.2;
- color: #000000;
- position: absolute;
- z-index: 10000;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
- }
-
- /**
- * The picker input element.
- */
- .picker__input {
- cursor: default;
- }
-
- /**
- * When the picker is opened, the input element is "activated".
- */
- .picker__input.picker__input--active {
- border-color: #0089ec;
- }
-
- /**
- * The holder is the only "scrollable" top-level container element.
- */
- .picker__holder {
- width: 100%;
- overflow-y: auto;
- -webkit-overflow-scrolling: touch;
- }
-
- /*!
- * Default mobile-first, responsive styling for pickadate.js
- * Demo: http://amsul.github.io/pickadate.js
- */
- /**
- * Note: the root picker element should *NOT* be styled more than what's here.
- */
- /**
- * Make the holder and frame fullscreen.
- */
- .picker__holder, .picker__frame {
- bottom: 0;
- left: 0;
- right: 0;
- top: 100%;
- }
-
- /**
- * The holder should overlay the entire screen.
- */
- .picker__holder {
- position: fixed;
- -webkit-transition: background 0.15s ease-out, top 0s 0.15s;
- -moz-transition: background 0.15s ease-out, top 0s 0.15s;
- transition: background 0.15s ease-out, top 0s 0.15s;
- -webkit-backface-visibility: hidden;
- }
-
- /**
- * The frame that bounds the box contents of the picker.
- */
- .picker__frame {
- position: absolute;
- margin: 0 auto;
- min-width: 256px;
- max-width: 300px;
- max-height: 350px;
- -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
- filter: alpha(opacity=0);
- -moz-opacity: 0;
- opacity: 0;
- -webkit-transition: all 0.15s ease-out;
- -moz-transition: all 0.15s ease-out;
- transition: all 0.15s ease-out;
- }
- @media (min-height: 28.875em) {
- .picker__frame {
- overflow: visible;
- top: auto;
- bottom: -100%;
- max-height: 80%;
+ 62.5% {
+ transform: rotate(675deg);
}
- }
- @media (min-height: 40.125em) {
- .picker__frame {
- margin-bottom: 7.5%;
+ 75% {
+ transform: rotate(810deg);
}
- }
- /**
- * The wrapper sets the stage to vertically align the box contents.
- */
- .picker__wrap {
- display: table;
- width: 100%;
- height: 100%;
- }
+ 87.5% {
+ transform: rotate(945deg);
+ }
- @media (min-height: 28.875em) {
- .picker__wrap {
- display: block;
+ to {
+ transform: rotate(1080deg);
}
}
- /**
- * The box contains all the picker contents.
- */
- .picker__box {
- background: #ffffff;
- display: table-cell;
- vertical-align: middle;
- }
+ @-webkit-keyframes blue-fade-in-out {
+ from {
+ opacity: 1;
+ }
- @media (min-height: 28.875em) {
- .picker__box {
- display: block;
- border: 1px solid #777777;
- border-top-color: #898989;
- border-bottom-width: 0;
- -webkit-border-radius: 5px 5px 0 0;
- -moz-border-radius: 5px 5px 0 0;
- border-radius: 5px 5px 0 0;
- -webkit-box-shadow: 0 12px 36px 16px rgba(0, 0, 0, 0.24);
- -moz-box-shadow: 0 12px 36px 16px rgba(0, 0, 0, 0.24);
- box-shadow: 0 12px 36px 16px rgba(0, 0, 0, 0.24);
+ 25% {
+ opacity: 1;
}
- }
- /**
- * When the picker opens...
- */
- .picker--opened .picker__holder {
- top: 0;
- background: transparent;
- -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#1E000000,endColorstr=#1E000000)";
- zoom: 1;
- background: rgba(0, 0, 0, 0.32);
- -webkit-transition: background 0.15s ease-out;
- -moz-transition: background 0.15s ease-out;
- transition: background 0.15s ease-out;
- }
+ 26% {
+ opacity: 0;
+ }
- .picker--opened .picker__frame {
- top: 0;
- -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
- filter: alpha(opacity=100);
- -moz-opacity: 1;
- opacity: 1;
- }
+ 89% {
+ opacity: 0;
+ }
- @media (min-height: 35.875em) {
- .picker--opened .picker__frame {
- top: 10%;
- bottom: 20% auto;
+ 90% {
+ opacity: 1;
}
- }
- /**
- * For `large` screens, transform into an inline picker.
- */
- /* ==========================================================================
- CUSTOM MATERIALIZE STYLES
- ========================================================================== */
- .picker__input.picker__input--active {
- border-color: #E3F2FD;
+ 100% {
+ opacity: 1;
+ }
}
- .picker__frame {
- margin: 0 auto;
- max-width: 325px;
- }
+ @keyframes blue-fade-in-out {
+ from {
+ opacity: 1;
+ }
- @media (min-height: 38.875em) {
- .picker--opened .picker__frame {
- top: 10%;
- bottom: auto;
+ 25% {
+ opacity: 1;
}
- }
- /* ==========================================================================
- $BASE-DATE-PICKER
- ========================================================================== */
- /**
- * The picker box.
- */
- .picker__box {
- padding: 0 1em;
- }
+ 26% {
+ opacity: 0;
+ }
- /**
- * The header containing the month and year stuff.
- */
- .picker__header {
- text-align: center;
- position: relative;
- margin-top: .75em;
- }
+ 89% {
+ opacity: 0;
+ }
- /**
- * The month and year labels.
- */
- .picker__month, .picker__year {
- display: inline-block;
- margin-left: .25em;
- margin-right: .25em;
- }
+ 90% {
+ opacity: 1;
+ }
- /**
- * The month and year selectors.
- */
- .picker__select--month, .picker__select--year {
- height: 2em;
- padding: 0;
- margin-left: .25em;
- margin-right: .25em;
+ 100% {
+ opacity: 1;
+ }
}
- .picker__select--month.browser-default {
- display: inline;
- background-color: #FFFFFF;
- width: 40%;
- }
+ @-webkit-keyframes red-fade-in-out {
+ from {
+ opacity: 0;
+ }
- .picker__select--year.browser-default {
- display: inline;
- background-color: #FFFFFF;
- width: 25%;
- }
+ 15% {
+ opacity: 0;
+ }
- .picker__select--month:focus, .picker__select--year:focus {
- border-color: rgba(0, 0, 0, 0.05);
- }
+ 25% {
+ opacity: 1;
+ }
- /**
- * The month navigation buttons.
- */
- .picker__nav--prev, .picker__nav--next {
- position: absolute;
- padding: .5em 1.25em;
- width: 1em;
- height: 1em;
- box-sizing: content-box;
- top: -0.25em;
- }
+ 50% {
+ opacity: 1;
+ }
- .picker__nav--prev {
- left: -1em;
- padding-right: 1.25em;
+ 51% {
+ opacity: 0;
+ }
}
- .picker__nav--next {
- right: -1em;
- padding-left: 1.25em;
- }
+ @keyframes red-fade-in-out {
+ from {
+ opacity: 0;
+ }
- .picker__nav--disabled, .picker__nav--disabled:hover, .picker__nav--disabled:before, .picker__nav--disabled:before:hover {
- cursor: default;
- background: none;
- border-right-color: #f5f5f5;
- border-left-color: #f5f5f5;
- }
+ 15% {
+ opacity: 0;
+ }
- /**
- * The calendar table of dates
- */
- .picker__table {
- text-align: center;
- border-collapse: collapse;
- border-spacing: 0;
- table-layout: fixed;
- font-size: 1rem;
- width: 100%;
- margin-top: .75em;
- margin-bottom: .5em;
- }
+ 25% {
+ opacity: 1;
+ }
- .picker__table th, .picker__table td {
- text-align: center;
- }
+ 50% {
+ opacity: 1;
+ }
- .picker__table td {
- margin: 0;
- padding: 0;
+ 51% {
+ opacity: 0;
+ }
}
- /**
- * The weekday labels
- */
- .picker__weekday {
- width: 14.285714286%;
- font-size: .75em;
- padding-bottom: .25em;
- color: #999999;
- font-weight: 500;
- /* Increase the spacing a tad */
- }
+ @-webkit-keyframes yellow-fade-in-out {
+ from {
+ opacity: 0;
+ }
- @media (min-height: 33.875em) {
- .picker__weekday {
- padding-bottom: .5em;
+ 40% {
+ opacity: 0;
}
- }
- /**
- * The days on the calendar
- */
- .picker__day--today {
- position: relative;
- color: #595959;
- letter-spacing: -.3;
- padding: .75rem 0;
- font-weight: 400;
- border: 1px solid transparent;
- }
+ 50% {
+ opacity: 1;
+ }
- .picker__day--disabled:before {
- border-top-color: #aaaaaa;
- }
+ 75% {
+ opacity: 1;
+ }
- .picker__day--infocus:hover {
- cursor: pointer;
- color: #000;
- font-weight: 500;
+ 76% {
+ opacity: 0;
+ }
}
- .picker__day--outfocus {
- display: none;
- padding: .75rem 0;
- color: #fff;
- }
+ @keyframes yellow-fade-in-out {
+ from {
+ opacity: 0;
+ }
- .picker__day--outfocus:hover {
- cursor: pointer;
- color: #dddddd;
- font-weight: 500;
- }
+ 40% {
+ opacity: 0;
+ }
- .picker__day--highlighted:hover, .picker--focused .picker__day--highlighted {
- cursor: pointer;
- }
+ 50% {
+ opacity: 1;
+ }
- .picker__day--selected, .picker__day--selected:hover, .picker--focused .picker__day--selected {
- border-radius: 50%;
- -webkit-transform: scale(.75);
- -moz-transform: scale(.75);
- -ms-transform: scale(.75);
- -o-transform: scale(.75);
- transform: scale(.75);
- background: #0089ec;
- color: #ffffff;
- }
-
- .picker__day--disabled, .picker__day--disabled:hover, .picker--focused .picker__day--disabled {
- background: #f5f5f5;
- border-color: #f5f5f5;
- color: #dddddd;
- cursor: default;
- }
+ 75% {
+ opacity: 1;
+ }
- .picker__day--highlighted.picker__day--disabled, .picker__day--highlighted.picker__day--disabled:hover {
- background: #bbbbbb;
+ 76% {
+ opacity: 0;
+ }
}
- /**
- * The footer containing the "today", "clear", and "close" buttons.
- */
- .picker__footer {
- text-align: center;
- display: flex;
- align-items: center;
- justify-content: space-between;
- }
+ @-webkit-keyframes green-fade-in-out {
+ from {
+ opacity: 0;
+ }
- .picker__button--today, .picker__button--clear, .picker__button--close {
- border: 1px solid #ffffff;
- background: #ffffff;
- font-size: .8em;
- padding: .66em 0;
- font-weight: bold;
- width: 33%;
- display: inline-block;
- vertical-align: bottom;
- }
+ 65% {
+ opacity: 0;
+ }
- .picker__button--today:hover, .picker__button--clear:hover, .picker__button--close:hover {
- cursor: pointer;
- color: #000000;
- background: #b1dcfb;
- border-bottom-color: #b1dcfb;
- }
+ 75% {
+ opacity: 1;
+ }
- .picker__button--today:focus, .picker__button--clear:focus, .picker__button--close:focus {
- background: #b1dcfb;
- border-color: rgba(0, 0, 0, 0.05);
- outline: none;
- }
+ 90% {
+ opacity: 1;
+ }
- .picker__button--today:before, .picker__button--clear:before, .picker__button--close:before {
- position: relative;
- display: inline-block;
- height: 0;
+ 100% {
+ opacity: 0;
+ }
}
- .picker__button--today:before, .picker__button--clear:before {
- content: " ";
- margin-right: .45em;
- }
+ @keyframes green-fade-in-out {
+ from {
+ opacity: 0;
+ }
- .picker__button--today:before {
- top: -0.05em;
- width: 0;
- border-top: 0.66em solid #0059bc;
- border-left: .66em solid transparent;
- }
+ 65% {
+ opacity: 0;
+ }
- .picker__button--clear:before {
- top: -0.25em;
- width: .66em;
- border-top: 3px solid #ee2200;
- }
+ 75% {
+ opacity: 1;
+ }
+
+ 90% {
+ opacity: 1;
+ }
- .picker__button--close:before {
- content: "\D7";
- top: -0.1em;
- vertical-align: top;
- font-size: 1.1em;
- margin-right: .35em;
- color: #777777;
+ 100% {
+ opacity: 0;
+ }
}
- .picker__button--today[disabled], .picker__button--today[disabled]:hover {
- background: #f5f5f5;
- border-color: #f5f5f5;
- color: #dddddd;
- cursor: default;
+ /**
+ * 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).
+ */
+ .gap-patch {
+ position: absolute;
+ top: 0;
+ left: 45%;
+ width: 10%;
+ height: 100%;
+ overflow: hidden;
+ border-color: inherit;
}
- .picker__button--today[disabled]:before {
- border-top-color: #aaaaaa;
+ .gap-patch .circle {
+ width: 1000%;
+ left: -450%;
}
- /* ==========================================================================
- CUSTOM MATERIALIZE STYLES
- ========================================================================== */
- .picker__box {
- border-radius: 2px;
+ .circle-clipper {
+ display: inline-block;
+ position: relative;
+ width: 50%;
+ height: 100%;
overflow: hidden;
+ border-color: inherit;
}
- .picker__date-display {
- text-align: center;
- background-color: #26a69a;
- color: #fff;
- padding-bottom: 15px;
- font-weight: 300;
+ .circle-clipper .circle {
+ width: 200%;
+ height: 100%;
+ border-width: 3px;
+ /* STROKEWIDTH */
+ border-style: solid;
+ border-color: inherit;
+ border-bottom-color: transparent !important;
+ border-radius: 50%;
+ -webkit-animation: none;
+ animation: none;
+ position: absolute;
+ top: 0;
+ right: 0;
+ bottom: 0;
}
- .picker__nav--prev:hover, .picker__nav--next:hover {
- cursor: pointer;
- color: #000000;
- background: #a1ded8;
+ .circle-clipper.left .circle {
+ left: 0;
+ border-right-color: transparent !important;
+ -webkit-transform: rotate(129deg);
+ transform: rotate(129deg);
}
- .picker__weekday-display {
- background-color: #1f897f;
- padding: 10px;
- font-weight: 200;
- letter-spacing: .5;
- font-size: 1rem;
- margin-bottom: 15px;
+ .circle-clipper.right .circle {
+ left: -100%;
+ border-left-color: transparent !important;
+ -webkit-transform: rotate(-129deg);
+ transform: rotate(-129deg);
}
- .picker__month-display {
- text-transform: uppercase;
- font-size: 2rem;
+ .active .circle-clipper.left .circle {
+ /* duration: ARCTIME */
+ -webkit-animation: left-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
+ animation: left-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
}
- .picker__day-display {
- font-size: 4.5rem;
- font-weight: 400;
+ .active .circle-clipper.right .circle {
+ /* duration: ARCTIME */
+ -webkit-animation: right-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
+ animation: right-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
}
- .picker__year-display {
- font-size: 1.8rem;
- color: rgba(255, 255, 255, 0.4);
- }
+ @-webkit-keyframes left-spin {
+ from {
+ -webkit-transform: rotate(130deg);
+ }
- .picker__box {
- padding: 0;
- }
+ 50% {
+ -webkit-transform: rotate(-5deg);
+ }
- .picker__calendar-container {
- padding: 0 1rem;
+ to {
+ -webkit-transform: rotate(130deg);
+ }
}
- .picker__calendar-container thead {
- border: none;
- }
+ @keyframes left-spin {
+ from {
+ transform: rotate(130deg);
+ }
- .picker__table {
- margin-top: 0;
- margin-bottom: .5em;
- }
+ 50% {
+ transform: rotate(-5deg);
+ }
- .picker__day--infocus {
- color: #595959;
- letter-spacing: -.3;
- padding: .75rem 0;
- font-weight: 400;
- border: 1px solid transparent;
+ to {
+ transform: rotate(130deg);
+ }
}
- .picker__day.picker__day--today {
- color: #26a69a;
- }
+ @-webkit-keyframes right-spin {
+ from {
+ -webkit-transform: rotate(-130deg);
+ }
- .picker__day.picker__day--today.picker__day--selected {
- color: #fff;
- }
+ 50% {
+ -webkit-transform: rotate(5deg);
+ }
- .picker__weekday {
- font-size: .9rem;
+ to {
+ -webkit-transform: rotate(-130deg);
+ }
}
- .picker__day--selected, .picker__day--selected:hover, .picker--focused .picker__day--selected {
- border-radius: 50%;
- -webkit-transform: scale(.9);
- -moz-transform: scale(.9);
- -ms-transform: scale(.9);
- -o-transform: scale(.9);
- transform: scale(.9);
- background-color: #26a69a;
- color: #ffffff;
- }
+ @keyframes right-spin {
+ from {
+ transform: rotate(-130deg);
+ }
- .picker__day--selected.picker__day--outfocus, .picker__day--selected:hover.picker__day--outfocus, .picker--focused .picker__day--selected.picker__day--outfocus {
- background-color: #a1ded8;
- }
+ 50% {
+ transform: rotate(5deg);
+ }
- .picker__footer {
- text-align: right;
- padding: 5px 10px;
+ to {
+ transform: rotate(-130deg);
+ }
}
- .picker__close, .picker__today {
- font-size: 1.1rem;
- padding: 0 1rem;
- color: #26a69a;
+ #spinnerContainer.cooldown {
+ /* duration: SHRINK_TIME */
+ -webkit-animation: container-rotate 1568ms linear infinite, fade-out 400ms cubic-bezier(0.4, 0, 0.2, 1);
+ animation: container-rotate 1568ms linear infinite, fade-out 400ms cubic-bezier(0.4, 0, 0.2, 1);
}
- .picker__nav--prev:before, .picker__nav--next:before {
- content: " ";
- border-top: .5em solid transparent;
- border-bottom: .5em solid transparent;
- border-right: 0.75em solid #676767;
- width: 0;
- height: 0;
- display: block;
- margin: 0 auto;
- }
+ @-webkit-keyframes fade-out {
+ from {
+ opacity: 1;
+ }
- .picker__nav--next:before {
- border-right: 0;
- border-left: 0.75em solid #676767;
+ to {
+ opacity: 0;
+ }
}
- button.picker__today:focus, button.picker__clear:focus, button.picker__close:focus {
- background-color: #a1ded8;
- }
+ @keyframes fade-out {
+ from {
+ opacity: 1;
+ }
- /* ==========================================================================
- $BASE-TIME-PICKER
- ========================================================================== */
- /**
- * The list of times.
- */
- .picker__list {
- list-style: none;
- padding: 0.75em 0 4.2em;
- margin: 0;
+ to {
+ opacity: 0;
+ }
}
- /**
- * The times on the clock.
- */
- .picker__list-item {
- border-bottom: 1px solid #dddddd;
- border-top: 1px solid #dddddd;
- margin-bottom: -1px;
+ .slider {
position: relative;
- background: #ffffff;
- padding: .75em 1.25em;
+ height: 440px;
+ width: 100%;
}
- @media (min-height: 46.75em) {
- .picker__list-item {
- padding: .5em 1em;
- }
+ .slider.fullscreen {
+ height: 100%;
+ width: 100%;
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
}
- /* Hovered time */
- .picker__list-item:hover {
- cursor: pointer;
- color: #000000;
- background: #b1dcfb;
- border-color: #0089ec;
- z-index: 10;
+ .slider.fullscreen ul.slides {
+ height: 100%;
}
- /* Highlighted and hovered/focused time */
- .picker__list-item--highlighted {
- border-color: #0089ec;
- z-index: 10;
+ .slider.fullscreen ul.indicators {
+ z-index: 2;
+ bottom: 30px;
}
- .picker__list-item--highlighted:hover, .picker--focused .picker__list-item--highlighted {
- cursor: pointer;
- color: #000000;
- background: #b1dcfb;
+ .slider .slides {
+ background-color: #9e9e9e;
+ margin: 0;
+ height: 400px;
}
- /* Selected and hovered/focused time */
- .picker__list-item--selected, .picker__list-item--selected:hover, .picker--focused .picker__list-item--selected {
- background: #0089ec;
- color: #ffffff;
- z-index: 10;
+ .slider .slides li {
+ opacity: 0;
+ position: absolute;
+ top: 0;
+ left: 0;
+ z-index: 1;
+ width: 100%;
+ height: inherit;
+ overflow: hidden;
}
- /* Disabled time */
- .picker__list-item--disabled, .picker__list-item--disabled:hover, .picker--focused .picker__list-item--disabled {
- background: #f5f5f5;
- border-color: #f5f5f5;
- color: #dddddd;
- cursor: default;
- border-color: #dddddd;
- z-index: auto;
+ .slider .slides li img {
+ height: 100%;
+ width: 100%;
+ background-size: cover;
+ background-position: center;
}
- /**
- * The clear button
- */
- .picker--time .picker__button--clear {
- display: block;
- width: 80%;
- margin: 1em auto 0;
- padding: 1em 1.25em;
- background: none;
- border: 0;
- font-weight: 500;
- font-size: .67em;
- text-align: center;
- text-transform: uppercase;
- color: #666;
+ .slider .slides li .caption {
+ color: #fff;
+ position: absolute;
+ top: 15%;
+ left: 15%;
+ width: 70%;
+ opacity: 0;
}
- .picker--time .picker__button--clear:hover, .picker--time .picker__button--clear:focus {
- color: #000000;
- background: #b1dcfb;
- background: #ee2200;
- border-color: #ee2200;
- cursor: pointer;
- color: #ffffff;
- outline: none;
+ .slider .slides li .caption p {
+ color: #e0e0e0;
}
- .picker--time .picker__button--clear:before {
- top: -0.25em;
- color: #666;
- font-size: 1.25em;
- font-weight: bold;
+ .slider .slides li.active {
+ z-index: 2;
}
- .picker--time .picker__button--clear:hover:before, .picker--time .picker__button--clear:focus:before {
- color: #ffffff;
+ .slider .indicators {
+ position: absolute;
+ text-align: center;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ margin: 0;
}
- /* ==========================================================================
- $DEFAULT-TIME-PICKER
- ========================================================================== */
- /**
- * The frame the bounds the time picker.
- */
- .picker--time .picker__frame {
- min-width: 256px;
- max-width: 320px;
+ .slider .indicators .indicator-item {
+ display: inline-block;
+ position: relative;
+ cursor: pointer;
+ height: 16px;
+ width: 16px;
+ margin: 0 12px;
+ background-color: #e0e0e0;
+ -webkit-transition: background-color .3s;
+ -moz-transition: background-color .3s;
+ -o-transition: background-color .3s;
+ -ms-transition: background-color .3s;
+ transition: background-color .3s;
+ border-radius: 50%;
}
- /**
- * The picker box.
- */
- .picker--time .picker__box {
- font-size: 1em;
- background: #f2f2f2;
- padding: 0;
+ .slider .indicators .indicator-item.active {
+ background-color: #4CAF50;
}
- @media (min-height: 40.125em) {
- .picker--time .picker__box {
- margin-bottom: 5em;
- }
- }
+