diff --git a/components/buttons.php b/components/buttons.php index 8036f1e..781d109 100644 --- a/components/buttons.php +++ b/components/buttons.php @@ -26,9 +26,11 @@ public function raisedButton($atts, $content) { ob_start(); ?> + + + + -
- - mode_edit - - - - -
+
+
+ + mode_edit + + + + +
+
+ + + + + + +
">
"> @@ -49,6 +50,7 @@ public function basicCard($atts, $content) {
+
-
"> -
- -
-
-

- -

-
- -
- -
- +
+
"> +
+ +
+
+

+ +

+
+ +
+ +
+ +
+
@@ -165,7 +170,7 @@ public function revealCard($atts, $content) {
- +
+ + + + +
+
+ @@ -42,6 +43,7 @@ public function dropdown($atts, $content) { ?> + - + + + + - " + + + + + -
- -
- -
- -
+
+
+ +
+ +
+ +
+
+
@@ -60,6 +63,7 @@ public function circularPreloader($atts) {
+
+
@@ -108,6 +113,7 @@ public function circularPreloader($atts) {
+
+
+
-
- +
+
+ +
+
+
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); } + + to { + -webkit-transform: rotate(-130deg); } } + +@keyframes right-spin { + from { + transform: rotate(-130deg); } + + 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; } } + +.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%; } } + +@media (min-height: 40.125em) { + .picker__frame { + margin-bottom: 7.5%; } } + +/** + * The wrapper sets the stage to vertically align the box contents. + */ +.picker__wrap { + display: table; + width: 100%; + height: 100%; } + +@media (min-height: 28.875em) { + .picker__wrap { + display: block; } } + +/** + * The box contains all the picker contents. + */ +.picker__box { + background: #ffffff; + display: table-cell; + vertical-align: middle; } + +@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); } } + +/** + * 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; } + +.picker--opened .picker__frame { + top: 0; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; + filter: alpha(opacity=100); + -moz-opacity: 1; + opacity: 1; } + +@media (min-height: 35.875em) { + .picker--opened .picker__frame { + top: 10%; + bottom: 20% auto; } } + +/** + * For `large` screens, transform into an inline picker. + */ +/* ========================================================================== + CUSTOM MATERIALIZE STYLES + ========================================================================== */ +.picker__input.picker__input--active { + border-color: #E3F2FD; } + +.picker__frame { + margin: 0 auto; + max-width: 325px; } + +@media (min-height: 38.875em) { + .picker--opened .picker__frame { + top: 10%; + bottom: auto; } } + +/* ========================================================================== + $BASE-DATE-PICKER + ========================================================================== */ +/** + * The picker box. + */ +.picker__box { + padding: 0 1em; } + +/** + * The header containing the month and year stuff. + */ +.picker__header { + text-align: center; + position: relative; + margin-top: .75em; } + +/** + * The month and year labels. + */ +.picker__month, .picker__year { + display: inline-block; + margin-left: .25em; + margin-right: .25em; } + +/** + * The month and year selectors. + */ +.picker__select--month, .picker__select--year { + height: 2em; + padding: 0; + margin-left: .25em; + margin-right: .25em; } + +.picker__select--month.browser-default { + display: inline; + background-color: #FFFFFF; + width: 40%; } + +.picker__select--year.browser-default { + display: inline; + background-color: #FFFFFF; + width: 25%; } + +.picker__select--month:focus, .picker__select--year:focus { + border-color: rgba(0, 0, 0, 0.05); } + +/** + * 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; } + +.picker__nav--prev { + left: -1em; + padding-right: 1.25em; } + +.picker__nav--next { + right: -1em; + padding-left: 1.25em; } + +.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; } + +/** + * 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; } + +.picker__table th, .picker__table td { + text-align: center; } + +.picker__table td { + margin: 0; + padding: 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 */ } + +@media (min-height: 33.875em) { + .picker__weekday { + padding-bottom: .5em; } } + +/** + * 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; } + +.picker__day--disabled:before { + border-top-color: #aaaaaa; } + +.picker__day--infocus:hover { + cursor: pointer; + color: #000; + font-weight: 500; } + +.picker__day--outfocus { + display: none; + padding: .75rem 0; + color: #fff; } + +.picker__day--outfocus:hover { + cursor: pointer; + color: #dddddd; + font-weight: 500; } + +.picker__day--highlighted:hover, .picker--focused .picker__day--highlighted { + cursor: pointer; } + +.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; } + +.picker__day--highlighted.picker__day--disabled, .picker__day--highlighted.picker__day--disabled:hover { + background: #bbbbbb; } + +/** + * The footer containing the "today", "clear", and "close" buttons. + */ +.picker__footer { + text-align: center; + display: flex; + align-items: center; + justify-content: space-between; } + +.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; } + +.picker__button--today:hover, .picker__button--clear:hover, .picker__button--close:hover { + cursor: pointer; + color: #000000; + background: #b1dcfb; + border-bottom-color: #b1dcfb; } + +.picker__button--today:focus, .picker__button--clear:focus, .picker__button--close:focus { + background: #b1dcfb; + border-color: rgba(0, 0, 0, 0.05); + outline: none; } + +.picker__button--today:before, .picker__button--clear:before, .picker__button--close:before { + position: relative; + display: inline-block; + height: 0; } + +.picker__button--today:before, .picker__button--clear:before { + content: " "; + margin-right: .45em; } + +.picker__button--today:before { + top: -0.05em; + width: 0; + border-top: 0.66em solid #0059bc; + border-left: .66em solid transparent; } + +.picker__button--clear:before { + top: -0.25em; + width: .66em; + border-top: 3px solid #ee2200; } + +.picker__button--close:before { + content: "\D7"; + top: -0.1em; + vertical-align: top; + font-size: 1.1em; + margin-right: .35em; + color: #777777; } + +.picker__button--today[disabled], .picker__button--today[disabled]:hover { + background: #f5f5f5; + border-color: #f5f5f5; + color: #dddddd; + cursor: default; } + +.picker__button--today[disabled]:before { + border-top-color: #aaaaaa; } + +/* ========================================================================== + CUSTOM MATERIALIZE STYLES + ========================================================================== */ +.picker__box { + border-radius: 2px; + overflow: hidden; } + +.picker__date-display { + text-align: center; + background-color: #26a69a; + color: #fff; + padding-bottom: 15px; + font-weight: 300; } + +.picker__nav--prev:hover, .picker__nav--next:hover { + cursor: pointer; + color: #000000; + background: #a1ded8; } + +.picker__weekday-display { + background-color: #1f897f; + padding: 10px; + font-weight: 200; + letter-spacing: .5; + font-size: 1rem; + margin-bottom: 15px; } + +.picker__month-display { + text-transform: uppercase; + font-size: 2rem; } + +.picker__day-display { + font-size: 4.5rem; + font-weight: 400; } + +.picker__year-display { + font-size: 1.8rem; + color: rgba(255, 255, 255, 0.4); } + +.picker__box { + padding: 0; } + +.picker__calendar-container { + padding: 0 1rem; } + .picker__calendar-container thead { + border: none; } + +.picker__table { + margin-top: 0; + margin-bottom: .5em; } + +.picker__day--infocus { + color: #595959; + letter-spacing: -.3; + padding: .75rem 0; + font-weight: 400; + border: 1px solid transparent; } + +.picker__day.picker__day--today { + color: #26a69a; } + +.picker__day.picker__day--today.picker__day--selected { + color: #fff; } + +.picker__weekday { + font-size: .9rem; } + +.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; } + .picker__day--selected.picker__day--outfocus, .picker__day--selected:hover.picker__day--outfocus, .picker--focused .picker__day--selected.picker__day--outfocus { + background-color: #a1ded8; } + +.picker__footer { + text-align: right; + padding: 5px 10px; } + +.picker__close, .picker__today { + font-size: 1.1rem; + padding: 0 1rem; + color: #26a69a; } + +.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; } + +.picker__nav--next:before { + border-right: 0; + border-left: 0.75em solid #676767; } + +button.picker__today:focus, button.picker__clear:focus, button.picker__close:focus { + background-color: #a1ded8; } + +/* ========================================================================== + $BASE-TIME-PICKER + ========================================================================== */ +/** + * The list of times. + */ +.picker__list { + list-style: none; + padding: 0.75em 0 4.2em; + margin: 0; } + +/** + * The times on the clock. + */ +.picker__list-item { + border-bottom: 1px solid #dddddd; + border-top: 1px solid #dddddd; + margin-bottom: -1px; + position: relative; + background: #ffffff; + padding: .75em 1.25em; } + +@media (min-height: 46.75em) { + .picker__list-item { + padding: .5em 1em; } } + +/* Hovered time */ +.picker__list-item:hover { + cursor: pointer; + color: #000000; + background: #b1dcfb; + border-color: #0089ec; + z-index: 10; } + +/* Highlighted and hovered/focused time */ +.picker__list-item--highlighted { + border-color: #0089ec; + z-index: 10; } + +.picker__list-item--highlighted:hover, .picker--focused .picker__list-item--highlighted { + cursor: pointer; + color: #000000; + background: #b1dcfb; } + +/* 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; } + +/* 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; } + +/** + * 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; } + +.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; } + +.picker--time .picker__button--clear:before { + top: -0.25em; + color: #666; + font-size: 1.25em; + font-weight: bold; } + +.picker--time .picker__button--clear:hover:before, .picker--time .picker__button--clear:focus:before { + color: #ffffff; } + +/* ========================================================================== + $DEFAULT-TIME-PICKER + ========================================================================== */ +/** + * The frame the bounds the time picker. + */ +.picker--time .picker__frame { + min-width: 256px; + max-width: 320px; } + +/** + * The picker box. + */ +.picker--time .picker__box { + font-size: 1em; + background: #f2f2f2; + padding: 0; } + +@media (min-height: 40.125em) { + .picker--time .picker__box { + margin-bottom: 5em; } } diff --git a/scripts/src/materializer-entry.js b/scripts/src/materializer-entry.js index d1fd4aa..ab5c5f5 100644 --- a/scripts/src/materializer-entry.js +++ b/scripts/src/materializer-entry.js @@ -6,9 +6,6 @@ define(['materialjs'], function() { - require("materialize"); require("./style.scss"); - console.log('Hello, Materializer!'); - }); diff --git a/scripts/src/style.scss b/scripts/src/style.scss index 4393c4f..5d17894 100644 --- a/scripts/src/style.scss +++ b/scripts/src/style.scss @@ -6,15 +6,24 @@ $icons-font-path: "./node_modules/materialize-css/font/material-design-icons/"; $roboto-font-path: "./node_modules/materialize-css/font/roboto/"; -.dropdown-content, -.fixed-action-btn ul, -ul.collapsible, -ul.collection { - margin-left: 0px; - padding-left: 0px; -} +$material-css: "./_materialize"; + + +.materializer { + + @import "./scripts/src/_materialize"; -.fixed-action-btn ul { - margin-top: 5px; - margin-bottom: 5px; -} \ No newline at end of file + .dropdown-content + , .fixed-action-btn ul + , ul.collapsible + , ul.collection { + margin-left: 0px; + padding-left: 0px; + } + + .fixed-action-btn ul { + margin-top: 5px; + margin-bottom: 5px; + } + +}