From 3e8b34be2fdeccf16c8b46f1ee518f970853768d Mon Sep 17 00:00:00 2001 From: Mitch Riedstra Date: Tue, 24 Oct 2017 16:59:48 -0400 Subject: Adding in materialize source and templates --- .../materialize.scssc | Bin 0 -> 5434 bytes .../_badges.scssc | Bin 0 -> 14169 bytes .../_buttons.scssc | Bin 0 -> 59473 bytes .../_cards.scssc | Bin 0 -> 38906 bytes .../_carousel.scssc | Bin 0 -> 19212 bytes .../_chips.scssc | Bin 0 -> 21385 bytes .../_collapsible.scssc | Bin 0 -> 25137 bytes .../_color.scssc | Bin 0 -> 85547 bytes .../_dropdown.scssc | Bin 0 -> 16746 bytes .../_global.scssc | Bin 0 -> 162359 bytes .../_grid.scssc | Bin 0 -> 35534 bytes .../_icons-material-design.scssc | Bin 0 -> 2090 bytes .../_materialbox.scssc | Bin 0 -> 9838 bytes .../_modal.scssc | Bin 0 -> 19557 bytes .../_navbar.scssc | Bin 0 -> 43376 bytes .../_normalize.scssc | Bin 0 -> 50921 bytes .../_preloader.scssc | Bin 0 -> 105035 bytes .../_pulse.scssc | Bin 0 -> 8710 bytes .../_roboto.scssc | Bin 0 -> 14975 bytes .../_sideNav.scssc | Bin 0 -> 50707 bytes .../_slider.scssc | Bin 0 -> 18427 bytes .../_table_of_contents.scssc | Bin 0 -> 8305 bytes .../_tabs.scssc | Bin 0 -> 19697 bytes .../_tapTarget.scssc | Bin 0 -> 27481 bytes .../_toast.scssc | Bin 0 -> 13436 bytes .../_tooltip.scssc | Bin 0 -> 8278 bytes .../_transitions.scssc | Bin 0 -> 4342 bytes .../_typography.scssc | Bin 0 -> 24981 bytes .../_variables.scssc | Bin 0 -> 67720 bytes .../_waves.scssc | Bin 0 -> 27241 bytes .../_checkboxes.scssc | Bin 0 -> 51667 bytes .../_file-input.scssc | Bin 0 -> 9584 bytes .../_forms.scssc | Bin 0 -> 4357 bytes .../_input-fields.scssc | Bin 0 -> 73488 bytes .../_radio-buttons.scssc | Bin 0 -> 30751 bytes .../_range.scssc | Bin 0 -> 32380 bytes .../_select.scssc | Bin 0 -> 37576 bytes .../_switches.scssc | Bin 0 -> 26212 bytes .../_default.date.scssc | Bin 0 -> 85280 bytes .../_default.scssc | Bin 0 -> 41663 bytes .../_default.time.scssc | Bin 0 -> 61982 bytes .../materialize/sass/components/_badges.scss | 47 ++ .../materialize/sass/components/_buttons.scss | 291 ++++++++ .../static/materialize/sass/components/_cards.scss | 196 ++++++ .../materialize/sass/components/_carousel.scss | 90 +++ .../static/materialize/sass/components/_chips.scss | 89 +++ .../materialize/sass/components/_collapsible.scss | 84 +++ .../static/materialize/sass/components/_color.scss | 412 ++++++++++++ .../materialize/sass/components/_dropdown.scss | 68 ++ .../materialize/sass/components/_global.scss | 734 +++++++++++++++++++++ .../static/materialize/sass/components/_grid.scss | 156 +++++ .../sass/components/_icons-material-design.scss | 5 + .../materialize/sass/components/_materialbox.scss | 43 ++ .../static/materialize/sass/components/_modal.scss | 90 +++ .../materialize/sass/components/_navbar.scss | 208 ++++++ .../materialize/sass/components/_normalize.scss | 424 ++++++++++++ .../materialize/sass/components/_preloader.scss | 334 ++++++++++ .../static/materialize/sass/components/_pulse.scss | 34 + .../materialize/sass/components/_roboto.scss | 39 ++ .../materialize/sass/components/_sideNav.scss | 214 ++++++ .../materialize/sass/components/_slider.scss | 92 +++ .../sass/components/_table_of_contents.scss | 33 + .../static/materialize/sass/components/_tabs.scss | 93 +++ .../materialize/sass/components/_tapTarget.scss | 103 +++ .../static/materialize/sass/components/_toast.scss | 59 ++ .../materialize/sass/components/_tooltip.scss | 31 + .../materialize/sass/components/_transitions.scss | 13 + .../materialize/sass/components/_typography.scss | 61 ++ .../materialize/sass/components/_variables.scss | 353 ++++++++++ .../static/materialize/sass/components/_waves.scss | 114 ++++ .../sass/components/date_picker/_default.date.scss | 456 +++++++++++++ .../sass/components/date_picker/_default.scss | 212 ++++++ .../sass/components/date_picker/_default.time.scss | 267 ++++++++ .../sass/components/forms/_checkboxes.scss | 210 ++++++ .../sass/components/forms/_file-input.scss | 44 ++ .../materialize/sass/components/forms/_forms.scss | 22 + .../sass/components/forms/_input-fields.scss | 333 ++++++++++ .../sass/components/forms/_radio-buttons.scss | 115 ++++ .../materialize/sass/components/forms/_range.scss | 160 +++++ .../materialize/sass/components/forms/_select.scss | 182 +++++ .../sass/components/forms/_switches.scss | 89 +++ .../static/materialize/sass/materialize.scss | 42 ++ 82 files changed, 6642 insertions(+) create mode 100644 app/dispatch/static/materialize/sass/.sass-cache/219915314f96ba592393ee0f91ebc5ca040988d6/materialize.scssc create mode 100644 app/dispatch/static/materialize/sass/.sass-cache/c522ec0bcae4f1e3f64a0b94f19496ba10ebb5e3/_badges.scssc create mode 100644 app/dispatch/static/materialize/sass/.sass-cache/c522ec0bcae4f1e3f64a0b94f19496ba10ebb5e3/_buttons.scssc create mode 100644 app/dispatch/static/materialize/sass/.sass-cache/c522ec0bcae4f1e3f64a0b94f19496ba10ebb5e3/_cards.scssc create mode 100644 app/dispatch/static/materialize/sass/.sass-cache/c522ec0bcae4f1e3f64a0b94f19496ba10ebb5e3/_carousel.scssc create mode 100644 app/dispatch/static/materialize/sass/.sass-cache/c522ec0bcae4f1e3f64a0b94f19496ba10ebb5e3/_chips.scssc create mode 100644 app/dispatch/static/materialize/sass/.sass-cache/c522ec0bcae4f1e3f64a0b94f19496ba10ebb5e3/_collapsible.scssc create mode 100644 app/dispatch/static/materialize/sass/.sass-cache/c522ec0bcae4f1e3f64a0b94f19496ba10ebb5e3/_color.scssc create mode 100644 app/dispatch/static/materialize/sass/.sass-cache/c522ec0bcae4f1e3f64a0b94f19496ba10ebb5e3/_dropdown.scssc create mode 100644 app/dispatch/static/materialize/sass/.sass-cache/c522ec0bcae4f1e3f64a0b94f19496ba10ebb5e3/_global.scssc create mode 100644 app/dispatch/static/materialize/sass/.sass-cache/c522ec0bcae4f1e3f64a0b94f19496ba10ebb5e3/_grid.scssc create mode 100644 app/dispatch/static/materialize/sass/.sass-cache/c522ec0bcae4f1e3f64a0b94f19496ba10ebb5e3/_icons-material-design.scssc create mode 100644 app/dispatch/static/materialize/sass/.sass-cache/c522ec0bcae4f1e3f64a0b94f19496ba10ebb5e3/_materialbox.scssc create mode 100644 app/dispatch/static/materialize/sass/.sass-cache/c522ec0bcae4f1e3f64a0b94f19496ba10ebb5e3/_modal.scssc create mode 100644 app/dispatch/static/materialize/sass/.sass-cache/c522ec0bcae4f1e3f64a0b94f19496ba10ebb5e3/_navbar.scssc create mode 100644 app/dispatch/static/materialize/sass/.sass-cache/c522ec0bcae4f1e3f64a0b94f19496ba10ebb5e3/_normalize.scssc create mode 100644 app/dispatch/static/materialize/sass/.sass-cache/c522ec0bcae4f1e3f64a0b94f19496ba10ebb5e3/_preloader.scssc create mode 100644 app/dispatch/static/materialize/sass/.sass-cache/c522ec0bcae4f1e3f64a0b94f19496ba10ebb5e3/_pulse.scssc create mode 100644 app/dispatch/static/materialize/sass/.sass-cache/c522ec0bcae4f1e3f64a0b94f19496ba10ebb5e3/_roboto.scssc create mode 100644 app/dispatch/static/materialize/sass/.sass-cache/c522ec0bcae4f1e3f64a0b94f19496ba10ebb5e3/_sideNav.scssc create mode 100644 app/dispatch/static/materialize/sass/.sass-cache/c522ec0bcae4f1e3f64a0b94f19496ba10ebb5e3/_slider.scssc create mode 100644 app/dispatch/static/materialize/sass/.sass-cache/c522ec0bcae4f1e3f64a0b94f19496ba10ebb5e3/_table_of_contents.scssc create mode 100644 app/dispatch/static/materialize/sass/.sass-cache/c522ec0bcae4f1e3f64a0b94f19496ba10ebb5e3/_tabs.scssc create mode 100644 app/dispatch/static/materialize/sass/.sass-cache/c522ec0bcae4f1e3f64a0b94f19496ba10ebb5e3/_tapTarget.scssc create mode 100644 app/dispatch/static/materialize/sass/.sass-cache/c522ec0bcae4f1e3f64a0b94f19496ba10ebb5e3/_toast.scssc create mode 100644 app/dispatch/static/materialize/sass/.sass-cache/c522ec0bcae4f1e3f64a0b94f19496ba10ebb5e3/_tooltip.scssc create mode 100644 app/dispatch/static/materialize/sass/.sass-cache/c522ec0bcae4f1e3f64a0b94f19496ba10ebb5e3/_transitions.scssc create mode 100644 app/dispatch/static/materialize/sass/.sass-cache/c522ec0bcae4f1e3f64a0b94f19496ba10ebb5e3/_typography.scssc create mode 100644 app/dispatch/static/materialize/sass/.sass-cache/c522ec0bcae4f1e3f64a0b94f19496ba10ebb5e3/_variables.scssc create mode 100644 app/dispatch/static/materialize/sass/.sass-cache/c522ec0bcae4f1e3f64a0b94f19496ba10ebb5e3/_waves.scssc create mode 100644 app/dispatch/static/materialize/sass/.sass-cache/c5fe6b1ff8ebce8ce8ec438cba3aee9dc1dabb9a/_checkboxes.scssc create mode 100644 app/dispatch/static/materialize/sass/.sass-cache/c5fe6b1ff8ebce8ce8ec438cba3aee9dc1dabb9a/_file-input.scssc create mode 100644 app/dispatch/static/materialize/sass/.sass-cache/c5fe6b1ff8ebce8ce8ec438cba3aee9dc1dabb9a/_forms.scssc create mode 100644 app/dispatch/static/materialize/sass/.sass-cache/c5fe6b1ff8ebce8ce8ec438cba3aee9dc1dabb9a/_input-fields.scssc create mode 100644 app/dispatch/static/materialize/sass/.sass-cache/c5fe6b1ff8ebce8ce8ec438cba3aee9dc1dabb9a/_radio-buttons.scssc create mode 100644 app/dispatch/static/materialize/sass/.sass-cache/c5fe6b1ff8ebce8ce8ec438cba3aee9dc1dabb9a/_range.scssc create mode 100644 app/dispatch/static/materialize/sass/.sass-cache/c5fe6b1ff8ebce8ce8ec438cba3aee9dc1dabb9a/_select.scssc create mode 100644 app/dispatch/static/materialize/sass/.sass-cache/c5fe6b1ff8ebce8ce8ec438cba3aee9dc1dabb9a/_switches.scssc create mode 100644 app/dispatch/static/materialize/sass/.sass-cache/e0864ff7f170a251ba7aabdfd152ea3a177e4500/_default.date.scssc create mode 100644 app/dispatch/static/materialize/sass/.sass-cache/e0864ff7f170a251ba7aabdfd152ea3a177e4500/_default.scssc create mode 100644 app/dispatch/static/materialize/sass/.sass-cache/e0864ff7f170a251ba7aabdfd152ea3a177e4500/_default.time.scssc create mode 100644 app/dispatch/static/materialize/sass/components/_badges.scss create mode 100644 app/dispatch/static/materialize/sass/components/_buttons.scss create mode 100644 app/dispatch/static/materialize/sass/components/_cards.scss create mode 100644 app/dispatch/static/materialize/sass/components/_carousel.scss create mode 100644 app/dispatch/static/materialize/sass/components/_chips.scss create mode 100644 app/dispatch/static/materialize/sass/components/_collapsible.scss create mode 100644 app/dispatch/static/materialize/sass/components/_color.scss create mode 100644 app/dispatch/static/materialize/sass/components/_dropdown.scss create mode 100644 app/dispatch/static/materialize/sass/components/_global.scss create mode 100644 app/dispatch/static/materialize/sass/components/_grid.scss create mode 100644 app/dispatch/static/materialize/sass/components/_icons-material-design.scss create mode 100644 app/dispatch/static/materialize/sass/components/_materialbox.scss create mode 100644 app/dispatch/static/materialize/sass/components/_modal.scss create mode 100644 app/dispatch/static/materialize/sass/components/_navbar.scss create mode 100644 app/dispatch/static/materialize/sass/components/_normalize.scss create mode 100644 app/dispatch/static/materialize/sass/components/_preloader.scss create mode 100644 app/dispatch/static/materialize/sass/components/_pulse.scss create mode 100644 app/dispatch/static/materialize/sass/components/_roboto.scss create mode 100644 app/dispatch/static/materialize/sass/components/_sideNav.scss create mode 100644 app/dispatch/static/materialize/sass/components/_slider.scss create mode 100644 app/dispatch/static/materialize/sass/components/_table_of_contents.scss create mode 100644 app/dispatch/static/materialize/sass/components/_tabs.scss create mode 100644 app/dispatch/static/materialize/sass/components/_tapTarget.scss create mode 100644 app/dispatch/static/materialize/sass/components/_toast.scss create mode 100644 app/dispatch/static/materialize/sass/components/_tooltip.scss create mode 100644 app/dispatch/static/materialize/sass/components/_transitions.scss create mode 100644 app/dispatch/static/materialize/sass/components/_typography.scss create mode 100644 app/dispatch/static/materialize/sass/components/_variables.scss create mode 100644 app/dispatch/static/materialize/sass/components/_waves.scss create mode 100644 app/dispatch/static/materialize/sass/components/date_picker/_default.date.scss create mode 100644 app/dispatch/static/materialize/sass/components/date_picker/_default.scss create mode 100644 app/dispatch/static/materialize/sass/components/date_picker/_default.time.scss create mode 100644 app/dispatch/static/materialize/sass/components/forms/_checkboxes.scss create mode 100644 app/dispatch/static/materialize/sass/components/forms/_file-input.scss create mode 100644 app/dispatch/static/materialize/sass/components/forms/_forms.scss create mode 100644 app/dispatch/static/materialize/sass/components/forms/_input-fields.scss create mode 100644 app/dispatch/static/materialize/sass/components/forms/_radio-buttons.scss create mode 100644 app/dispatch/static/materialize/sass/components/forms/_range.scss create mode 100644 app/dispatch/static/materialize/sass/components/forms/_select.scss create mode 100644 app/dispatch/static/materialize/sass/components/forms/_switches.scss create mode 100644 app/dispatch/static/materialize/sass/materialize.scss (limited to 'app/dispatch/static/materialize/sass') diff --git a/app/dispatch/static/materialize/sass/.sass-cache/219915314f96ba592393ee0f91ebc5ca040988d6/materialize.scssc b/app/dispatch/static/materialize/sass/.sass-cache/219915314f96ba592393ee0f91ebc5ca040988d6/materialize.scssc new file mode 100644 index 0000000..e6019a1 Binary files /dev/null and b/app/dispatch/static/materialize/sass/.sass-cache/219915314f96ba592393ee0f91ebc5ca040988d6/materialize.scssc differ diff --git a/app/dispatch/static/materialize/sass/.sass-cache/c522ec0bcae4f1e3f64a0b94f19496ba10ebb5e3/_badges.scssc b/app/dispatch/static/materialize/sass/.sass-cache/c522ec0bcae4f1e3f64a0b94f19496ba10ebb5e3/_badges.scssc new file mode 100644 index 0000000..52d5398 Binary files /dev/null and b/app/dispatch/static/materialize/sass/.sass-cache/c522ec0bcae4f1e3f64a0b94f19496ba10ebb5e3/_badges.scssc differ diff --git a/app/dispatch/static/materialize/sass/.sass-cache/c522ec0bcae4f1e3f64a0b94f19496ba10ebb5e3/_buttons.scssc b/app/dispatch/static/materialize/sass/.sass-cache/c522ec0bcae4f1e3f64a0b94f19496ba10ebb5e3/_buttons.scssc new file mode 100644 index 0000000..973967a Binary files /dev/null and b/app/dispatch/static/materialize/sass/.sass-cache/c522ec0bcae4f1e3f64a0b94f19496ba10ebb5e3/_buttons.scssc differ diff --git a/app/dispatch/static/materialize/sass/.sass-cache/c522ec0bcae4f1e3f64a0b94f19496ba10ebb5e3/_cards.scssc b/app/dispatch/static/materialize/sass/.sass-cache/c522ec0bcae4f1e3f64a0b94f19496ba10ebb5e3/_cards.scssc new file mode 100644 index 0000000..41f89d0 Binary files /dev/null and b/app/dispatch/static/materialize/sass/.sass-cache/c522ec0bcae4f1e3f64a0b94f19496ba10ebb5e3/_cards.scssc differ diff --git a/app/dispatch/static/materialize/sass/.sass-cache/c522ec0bcae4f1e3f64a0b94f19496ba10ebb5e3/_carousel.scssc b/app/dispatch/static/materialize/sass/.sass-cache/c522ec0bcae4f1e3f64a0b94f19496ba10ebb5e3/_carousel.scssc new file mode 100644 index 0000000..a1b1b0e Binary files /dev/null and b/app/dispatch/static/materialize/sass/.sass-cache/c522ec0bcae4f1e3f64a0b94f19496ba10ebb5e3/_carousel.scssc differ diff --git a/app/dispatch/static/materialize/sass/.sass-cache/c522ec0bcae4f1e3f64a0b94f19496ba10ebb5e3/_chips.scssc b/app/dispatch/static/materialize/sass/.sass-cache/c522ec0bcae4f1e3f64a0b94f19496ba10ebb5e3/_chips.scssc new file mode 100644 index 0000000..4a6b423 Binary files /dev/null and b/app/dispatch/static/materialize/sass/.sass-cache/c522ec0bcae4f1e3f64a0b94f19496ba10ebb5e3/_chips.scssc differ diff --git a/app/dispatch/static/materialize/sass/.sass-cache/c522ec0bcae4f1e3f64a0b94f19496ba10ebb5e3/_collapsible.scssc b/app/dispatch/static/materialize/sass/.sass-cache/c522ec0bcae4f1e3f64a0b94f19496ba10ebb5e3/_collapsible.scssc new file mode 100644 index 0000000..2be8526 Binary files /dev/null and b/app/dispatch/static/materialize/sass/.sass-cache/c522ec0bcae4f1e3f64a0b94f19496ba10ebb5e3/_collapsible.scssc differ diff --git a/app/dispatch/static/materialize/sass/.sass-cache/c522ec0bcae4f1e3f64a0b94f19496ba10ebb5e3/_color.scssc b/app/dispatch/static/materialize/sass/.sass-cache/c522ec0bcae4f1e3f64a0b94f19496ba10ebb5e3/_color.scssc new file mode 100644 index 0000000..a23f441 Binary files /dev/null and b/app/dispatch/static/materialize/sass/.sass-cache/c522ec0bcae4f1e3f64a0b94f19496ba10ebb5e3/_color.scssc differ diff --git a/app/dispatch/static/materialize/sass/.sass-cache/c522ec0bcae4f1e3f64a0b94f19496ba10ebb5e3/_dropdown.scssc b/app/dispatch/static/materialize/sass/.sass-cache/c522ec0bcae4f1e3f64a0b94f19496ba10ebb5e3/_dropdown.scssc new file mode 100644 index 0000000..1801314 Binary files /dev/null and b/app/dispatch/static/materialize/sass/.sass-cache/c522ec0bcae4f1e3f64a0b94f19496ba10ebb5e3/_dropdown.scssc differ diff --git a/app/dispatch/static/materialize/sass/.sass-cache/c522ec0bcae4f1e3f64a0b94f19496ba10ebb5e3/_global.scssc b/app/dispatch/static/materialize/sass/.sass-cache/c522ec0bcae4f1e3f64a0b94f19496ba10ebb5e3/_global.scssc new file mode 100644 index 0000000..746886f Binary files /dev/null and b/app/dispatch/static/materialize/sass/.sass-cache/c522ec0bcae4f1e3f64a0b94f19496ba10ebb5e3/_global.scssc differ diff --git a/app/dispatch/static/materialize/sass/.sass-cache/c522ec0bcae4f1e3f64a0b94f19496ba10ebb5e3/_grid.scssc b/app/dispatch/static/materialize/sass/.sass-cache/c522ec0bcae4f1e3f64a0b94f19496ba10ebb5e3/_grid.scssc new file mode 100644 index 0000000..aacd3dc Binary files /dev/null and b/app/dispatch/static/materialize/sass/.sass-cache/c522ec0bcae4f1e3f64a0b94f19496ba10ebb5e3/_grid.scssc differ diff --git a/app/dispatch/static/materialize/sass/.sass-cache/c522ec0bcae4f1e3f64a0b94f19496ba10ebb5e3/_icons-material-design.scssc b/app/dispatch/static/materialize/sass/.sass-cache/c522ec0bcae4f1e3f64a0b94f19496ba10ebb5e3/_icons-material-design.scssc new file mode 100644 index 0000000..72cbc7a Binary files /dev/null and b/app/dispatch/static/materialize/sass/.sass-cache/c522ec0bcae4f1e3f64a0b94f19496ba10ebb5e3/_icons-material-design.scssc differ diff --git a/app/dispatch/static/materialize/sass/.sass-cache/c522ec0bcae4f1e3f64a0b94f19496ba10ebb5e3/_materialbox.scssc b/app/dispatch/static/materialize/sass/.sass-cache/c522ec0bcae4f1e3f64a0b94f19496ba10ebb5e3/_materialbox.scssc new file mode 100644 index 0000000..0fdedbc Binary files /dev/null and b/app/dispatch/static/materialize/sass/.sass-cache/c522ec0bcae4f1e3f64a0b94f19496ba10ebb5e3/_materialbox.scssc differ diff --git a/app/dispatch/static/materialize/sass/.sass-cache/c522ec0bcae4f1e3f64a0b94f19496ba10ebb5e3/_modal.scssc b/app/dispatch/static/materialize/sass/.sass-cache/c522ec0bcae4f1e3f64a0b94f19496ba10ebb5e3/_modal.scssc new file mode 100644 index 0000000..ac1a7a7 Binary files /dev/null and b/app/dispatch/static/materialize/sass/.sass-cache/c522ec0bcae4f1e3f64a0b94f19496ba10ebb5e3/_modal.scssc differ diff --git a/app/dispatch/static/materialize/sass/.sass-cache/c522ec0bcae4f1e3f64a0b94f19496ba10ebb5e3/_navbar.scssc b/app/dispatch/static/materialize/sass/.sass-cache/c522ec0bcae4f1e3f64a0b94f19496ba10ebb5e3/_navbar.scssc new file mode 100644 index 0000000..3d2fc63 Binary files /dev/null and b/app/dispatch/static/materialize/sass/.sass-cache/c522ec0bcae4f1e3f64a0b94f19496ba10ebb5e3/_navbar.scssc differ diff --git a/app/dispatch/static/materialize/sass/.sass-cache/c522ec0bcae4f1e3f64a0b94f19496ba10ebb5e3/_normalize.scssc b/app/dispatch/static/materialize/sass/.sass-cache/c522ec0bcae4f1e3f64a0b94f19496ba10ebb5e3/_normalize.scssc new file mode 100644 index 0000000..785d767 Binary files /dev/null and b/app/dispatch/static/materialize/sass/.sass-cache/c522ec0bcae4f1e3f64a0b94f19496ba10ebb5e3/_normalize.scssc differ diff --git a/app/dispatch/static/materialize/sass/.sass-cache/c522ec0bcae4f1e3f64a0b94f19496ba10ebb5e3/_preloader.scssc b/app/dispatch/static/materialize/sass/.sass-cache/c522ec0bcae4f1e3f64a0b94f19496ba10ebb5e3/_preloader.scssc new file mode 100644 index 0000000..7b0cc05 Binary files /dev/null and b/app/dispatch/static/materialize/sass/.sass-cache/c522ec0bcae4f1e3f64a0b94f19496ba10ebb5e3/_preloader.scssc differ diff --git a/app/dispatch/static/materialize/sass/.sass-cache/c522ec0bcae4f1e3f64a0b94f19496ba10ebb5e3/_pulse.scssc b/app/dispatch/static/materialize/sass/.sass-cache/c522ec0bcae4f1e3f64a0b94f19496ba10ebb5e3/_pulse.scssc new file mode 100644 index 0000000..2e1c01d Binary files /dev/null and b/app/dispatch/static/materialize/sass/.sass-cache/c522ec0bcae4f1e3f64a0b94f19496ba10ebb5e3/_pulse.scssc differ diff --git a/app/dispatch/static/materialize/sass/.sass-cache/c522ec0bcae4f1e3f64a0b94f19496ba10ebb5e3/_roboto.scssc b/app/dispatch/static/materialize/sass/.sass-cache/c522ec0bcae4f1e3f64a0b94f19496ba10ebb5e3/_roboto.scssc new file mode 100644 index 0000000..1a21d7e Binary files /dev/null and b/app/dispatch/static/materialize/sass/.sass-cache/c522ec0bcae4f1e3f64a0b94f19496ba10ebb5e3/_roboto.scssc differ diff --git a/app/dispatch/static/materialize/sass/.sass-cache/c522ec0bcae4f1e3f64a0b94f19496ba10ebb5e3/_sideNav.scssc b/app/dispatch/static/materialize/sass/.sass-cache/c522ec0bcae4f1e3f64a0b94f19496ba10ebb5e3/_sideNav.scssc new file mode 100644 index 0000000..0acb5af Binary files /dev/null and b/app/dispatch/static/materialize/sass/.sass-cache/c522ec0bcae4f1e3f64a0b94f19496ba10ebb5e3/_sideNav.scssc differ diff --git a/app/dispatch/static/materialize/sass/.sass-cache/c522ec0bcae4f1e3f64a0b94f19496ba10ebb5e3/_slider.scssc b/app/dispatch/static/materialize/sass/.sass-cache/c522ec0bcae4f1e3f64a0b94f19496ba10ebb5e3/_slider.scssc new file mode 100644 index 0000000..67982c4 Binary files /dev/null and b/app/dispatch/static/materialize/sass/.sass-cache/c522ec0bcae4f1e3f64a0b94f19496ba10ebb5e3/_slider.scssc differ diff --git a/app/dispatch/static/materialize/sass/.sass-cache/c522ec0bcae4f1e3f64a0b94f19496ba10ebb5e3/_table_of_contents.scssc b/app/dispatch/static/materialize/sass/.sass-cache/c522ec0bcae4f1e3f64a0b94f19496ba10ebb5e3/_table_of_contents.scssc new file mode 100644 index 0000000..aa18a43 Binary files /dev/null and b/app/dispatch/static/materialize/sass/.sass-cache/c522ec0bcae4f1e3f64a0b94f19496ba10ebb5e3/_table_of_contents.scssc differ diff --git a/app/dispatch/static/materialize/sass/.sass-cache/c522ec0bcae4f1e3f64a0b94f19496ba10ebb5e3/_tabs.scssc b/app/dispatch/static/materialize/sass/.sass-cache/c522ec0bcae4f1e3f64a0b94f19496ba10ebb5e3/_tabs.scssc new file mode 100644 index 0000000..e626372 Binary files /dev/null and b/app/dispatch/static/materialize/sass/.sass-cache/c522ec0bcae4f1e3f64a0b94f19496ba10ebb5e3/_tabs.scssc differ diff --git a/app/dispatch/static/materialize/sass/.sass-cache/c522ec0bcae4f1e3f64a0b94f19496ba10ebb5e3/_tapTarget.scssc b/app/dispatch/static/materialize/sass/.sass-cache/c522ec0bcae4f1e3f64a0b94f19496ba10ebb5e3/_tapTarget.scssc new file mode 100644 index 0000000..751bfa7 Binary files /dev/null and b/app/dispatch/static/materialize/sass/.sass-cache/c522ec0bcae4f1e3f64a0b94f19496ba10ebb5e3/_tapTarget.scssc differ diff --git a/app/dispatch/static/materialize/sass/.sass-cache/c522ec0bcae4f1e3f64a0b94f19496ba10ebb5e3/_toast.scssc b/app/dispatch/static/materialize/sass/.sass-cache/c522ec0bcae4f1e3f64a0b94f19496ba10ebb5e3/_toast.scssc new file mode 100644 index 0000000..b1b9ff8 Binary files /dev/null and b/app/dispatch/static/materialize/sass/.sass-cache/c522ec0bcae4f1e3f64a0b94f19496ba10ebb5e3/_toast.scssc differ diff --git a/app/dispatch/static/materialize/sass/.sass-cache/c522ec0bcae4f1e3f64a0b94f19496ba10ebb5e3/_tooltip.scssc b/app/dispatch/static/materialize/sass/.sass-cache/c522ec0bcae4f1e3f64a0b94f19496ba10ebb5e3/_tooltip.scssc new file mode 100644 index 0000000..e613511 Binary files /dev/null and b/app/dispatch/static/materialize/sass/.sass-cache/c522ec0bcae4f1e3f64a0b94f19496ba10ebb5e3/_tooltip.scssc differ diff --git a/app/dispatch/static/materialize/sass/.sass-cache/c522ec0bcae4f1e3f64a0b94f19496ba10ebb5e3/_transitions.scssc b/app/dispatch/static/materialize/sass/.sass-cache/c522ec0bcae4f1e3f64a0b94f19496ba10ebb5e3/_transitions.scssc new file mode 100644 index 0000000..7e789b8 Binary files /dev/null and b/app/dispatch/static/materialize/sass/.sass-cache/c522ec0bcae4f1e3f64a0b94f19496ba10ebb5e3/_transitions.scssc differ diff --git a/app/dispatch/static/materialize/sass/.sass-cache/c522ec0bcae4f1e3f64a0b94f19496ba10ebb5e3/_typography.scssc b/app/dispatch/static/materialize/sass/.sass-cache/c522ec0bcae4f1e3f64a0b94f19496ba10ebb5e3/_typography.scssc new file mode 100644 index 0000000..f59df2c Binary files /dev/null and b/app/dispatch/static/materialize/sass/.sass-cache/c522ec0bcae4f1e3f64a0b94f19496ba10ebb5e3/_typography.scssc differ diff --git a/app/dispatch/static/materialize/sass/.sass-cache/c522ec0bcae4f1e3f64a0b94f19496ba10ebb5e3/_variables.scssc b/app/dispatch/static/materialize/sass/.sass-cache/c522ec0bcae4f1e3f64a0b94f19496ba10ebb5e3/_variables.scssc new file mode 100644 index 0000000..9cd75cd Binary files /dev/null and b/app/dispatch/static/materialize/sass/.sass-cache/c522ec0bcae4f1e3f64a0b94f19496ba10ebb5e3/_variables.scssc differ diff --git a/app/dispatch/static/materialize/sass/.sass-cache/c522ec0bcae4f1e3f64a0b94f19496ba10ebb5e3/_waves.scssc b/app/dispatch/static/materialize/sass/.sass-cache/c522ec0bcae4f1e3f64a0b94f19496ba10ebb5e3/_waves.scssc new file mode 100644 index 0000000..802d462 Binary files /dev/null and b/app/dispatch/static/materialize/sass/.sass-cache/c522ec0bcae4f1e3f64a0b94f19496ba10ebb5e3/_waves.scssc differ diff --git a/app/dispatch/static/materialize/sass/.sass-cache/c5fe6b1ff8ebce8ce8ec438cba3aee9dc1dabb9a/_checkboxes.scssc b/app/dispatch/static/materialize/sass/.sass-cache/c5fe6b1ff8ebce8ce8ec438cba3aee9dc1dabb9a/_checkboxes.scssc new file mode 100644 index 0000000..ec1450f Binary files /dev/null and b/app/dispatch/static/materialize/sass/.sass-cache/c5fe6b1ff8ebce8ce8ec438cba3aee9dc1dabb9a/_checkboxes.scssc differ diff --git a/app/dispatch/static/materialize/sass/.sass-cache/c5fe6b1ff8ebce8ce8ec438cba3aee9dc1dabb9a/_file-input.scssc b/app/dispatch/static/materialize/sass/.sass-cache/c5fe6b1ff8ebce8ce8ec438cba3aee9dc1dabb9a/_file-input.scssc new file mode 100644 index 0000000..f1ced8f Binary files /dev/null and b/app/dispatch/static/materialize/sass/.sass-cache/c5fe6b1ff8ebce8ce8ec438cba3aee9dc1dabb9a/_file-input.scssc differ diff --git a/app/dispatch/static/materialize/sass/.sass-cache/c5fe6b1ff8ebce8ce8ec438cba3aee9dc1dabb9a/_forms.scssc b/app/dispatch/static/materialize/sass/.sass-cache/c5fe6b1ff8ebce8ce8ec438cba3aee9dc1dabb9a/_forms.scssc new file mode 100644 index 0000000..5972264 Binary files /dev/null and b/app/dispatch/static/materialize/sass/.sass-cache/c5fe6b1ff8ebce8ce8ec438cba3aee9dc1dabb9a/_forms.scssc differ diff --git a/app/dispatch/static/materialize/sass/.sass-cache/c5fe6b1ff8ebce8ce8ec438cba3aee9dc1dabb9a/_input-fields.scssc b/app/dispatch/static/materialize/sass/.sass-cache/c5fe6b1ff8ebce8ce8ec438cba3aee9dc1dabb9a/_input-fields.scssc new file mode 100644 index 0000000..c8a71bd Binary files /dev/null and b/app/dispatch/static/materialize/sass/.sass-cache/c5fe6b1ff8ebce8ce8ec438cba3aee9dc1dabb9a/_input-fields.scssc differ diff --git a/app/dispatch/static/materialize/sass/.sass-cache/c5fe6b1ff8ebce8ce8ec438cba3aee9dc1dabb9a/_radio-buttons.scssc b/app/dispatch/static/materialize/sass/.sass-cache/c5fe6b1ff8ebce8ce8ec438cba3aee9dc1dabb9a/_radio-buttons.scssc new file mode 100644 index 0000000..9914aa5 Binary files /dev/null and b/app/dispatch/static/materialize/sass/.sass-cache/c5fe6b1ff8ebce8ce8ec438cba3aee9dc1dabb9a/_radio-buttons.scssc differ diff --git a/app/dispatch/static/materialize/sass/.sass-cache/c5fe6b1ff8ebce8ce8ec438cba3aee9dc1dabb9a/_range.scssc b/app/dispatch/static/materialize/sass/.sass-cache/c5fe6b1ff8ebce8ce8ec438cba3aee9dc1dabb9a/_range.scssc new file mode 100644 index 0000000..bbe3f8b Binary files /dev/null and b/app/dispatch/static/materialize/sass/.sass-cache/c5fe6b1ff8ebce8ce8ec438cba3aee9dc1dabb9a/_range.scssc differ diff --git a/app/dispatch/static/materialize/sass/.sass-cache/c5fe6b1ff8ebce8ce8ec438cba3aee9dc1dabb9a/_select.scssc b/app/dispatch/static/materialize/sass/.sass-cache/c5fe6b1ff8ebce8ce8ec438cba3aee9dc1dabb9a/_select.scssc new file mode 100644 index 0000000..134a162 Binary files /dev/null and b/app/dispatch/static/materialize/sass/.sass-cache/c5fe6b1ff8ebce8ce8ec438cba3aee9dc1dabb9a/_select.scssc differ diff --git a/app/dispatch/static/materialize/sass/.sass-cache/c5fe6b1ff8ebce8ce8ec438cba3aee9dc1dabb9a/_switches.scssc b/app/dispatch/static/materialize/sass/.sass-cache/c5fe6b1ff8ebce8ce8ec438cba3aee9dc1dabb9a/_switches.scssc new file mode 100644 index 0000000..22f59dc Binary files /dev/null and b/app/dispatch/static/materialize/sass/.sass-cache/c5fe6b1ff8ebce8ce8ec438cba3aee9dc1dabb9a/_switches.scssc differ diff --git a/app/dispatch/static/materialize/sass/.sass-cache/e0864ff7f170a251ba7aabdfd152ea3a177e4500/_default.date.scssc b/app/dispatch/static/materialize/sass/.sass-cache/e0864ff7f170a251ba7aabdfd152ea3a177e4500/_default.date.scssc new file mode 100644 index 0000000..70279c6 Binary files /dev/null and b/app/dispatch/static/materialize/sass/.sass-cache/e0864ff7f170a251ba7aabdfd152ea3a177e4500/_default.date.scssc differ diff --git a/app/dispatch/static/materialize/sass/.sass-cache/e0864ff7f170a251ba7aabdfd152ea3a177e4500/_default.scssc b/app/dispatch/static/materialize/sass/.sass-cache/e0864ff7f170a251ba7aabdfd152ea3a177e4500/_default.scssc new file mode 100644 index 0000000..1d1ce58 Binary files /dev/null and b/app/dispatch/static/materialize/sass/.sass-cache/e0864ff7f170a251ba7aabdfd152ea3a177e4500/_default.scssc differ diff --git a/app/dispatch/static/materialize/sass/.sass-cache/e0864ff7f170a251ba7aabdfd152ea3a177e4500/_default.time.scssc b/app/dispatch/static/materialize/sass/.sass-cache/e0864ff7f170a251ba7aabdfd152ea3a177e4500/_default.time.scssc new file mode 100644 index 0000000..bdbaf39 Binary files /dev/null and b/app/dispatch/static/materialize/sass/.sass-cache/e0864ff7f170a251ba7aabdfd152ea3a177e4500/_default.time.scssc differ diff --git a/app/dispatch/static/materialize/sass/components/_badges.scss b/app/dispatch/static/materialize/sass/components/_badges.scss new file mode 100644 index 0000000..ed8f185 --- /dev/null +++ b/app/dispatch/static/materialize/sass/components/_badges.scss @@ -0,0 +1,47 @@ +// Badges +span.badge { + min-width: 3rem; + padding: 0 6px; + margin-left: 14px; + text-align: center; + font-size: 1rem; + line-height: $badge-height; + height: $badge-height; + color: color('grey', 'darken-1'); + float: right; + box-sizing: border-box; + + &.new { + font-weight: 300; + font-size: 0.8rem; + color: #fff; + background-color: $badge-bg-color; + border-radius: 2px; + } + &.new:after { + content: " new"; + } + + &[data-badge-caption]::after { + content: " " attr(data-badge-caption); + } +} +nav ul a span.badge { + display: inline-block; + float: none; + margin-left: 4px; + line-height: $badge-height; + height: $badge-height; + -webkit-font-smoothing: auto; +} + +// Line height centering +.collection-item span.badge { + margin-top: calc(#{$collection-line-height / 2} - #{$badge-height / 2}); +} +.collapsible span.badge { + margin-left: auto; +} +.side-nav span.badge { + margin-top: calc(#{$sidenav-line-height / 2} - #{$badge-height / 2}); +} diff --git a/app/dispatch/static/materialize/sass/components/_buttons.scss b/app/dispatch/static/materialize/sass/components/_buttons.scss new file mode 100644 index 0000000..42730dd --- /dev/null +++ b/app/dispatch/static/materialize/sass/components/_buttons.scss @@ -0,0 +1,291 @@ +// shared styles +.btn, +.btn-flat { + border: $button-border; + border-radius: $button-radius; + display: inline-block; + height: $button-height; + line-height: $button-height; + padding: $button-padding; + text-transform: uppercase; + vertical-align: middle; + // Gets rid of tap active state + -webkit-tap-highlight-color: transparent; +} + +// Disabled shared style +.btn.disabled, +.btn-floating.disabled, +.btn-large.disabled, +.btn-flat.disabled, +.btn:disabled, +.btn-floating:disabled, +.btn-large:disabled, +.btn-flat:disabled, +.btn[disabled], +.btn-floating[disabled], +.btn-large[disabled], +.btn-flat[disabled] { + pointer-events: none; + background-color: $button-disabled-background !important; + box-shadow: none; + color: $button-disabled-color !important; + cursor: default; + + &:hover { + background-color: $button-disabled-background !important; + color: $button-disabled-color !important; + } +} + +// Shared icon styles +.btn, +.btn-floating, +.btn-large, +.btn-flat { + font-size: $button-font-size; + outline: 0; + + i { + font-size: $button-icon-font-size; + line-height: inherit; + } +} + +// Shared focus button style +.btn, +.btn-floating { + &:focus { + background-color: darken($button-raised-background, 10%); + } +} + +// Raised Button +.btn { + text-decoration: none; + color: $button-raised-color; + background-color: $button-raised-background; + text-align: center; + letter-spacing: .5px; + @extend .z-depth-1; + transition: .2s ease-out; + cursor: pointer; + + &:hover { + background-color: $button-raised-background-hover; + @extend .z-depth-1-half; + } +} + +// Floating button +.btn-floating { + &:hover { + background-color: $button-floating-background-hover; + @extend .z-depth-1-half; + } + + &:before { + border-radius: 0; + } + + &.btn-large { + &.halfway-fab { + bottom: -$button-floating-large-size / 2; + } + + width: $button-floating-large-size; + height: $button-floating-large-size; + i { + line-height: $button-floating-large-size; + } + } + + &.halfway-fab { + &.left { + right: auto; + left: 24px; + } + + position: absolute; + right: 24px; + bottom: -$button-floating-size / 2; + } + + display: inline-block; + color: $button-floating-color; + position: relative; + overflow: hidden; + z-index: 1; + width: $button-floating-size; + height: $button-floating-size; + line-height: $button-floating-size; + padding: 0; + background-color: $button-floating-background; + border-radius: $button-floating-radius; + @extend .z-depth-1; + transition: .3s; + cursor: pointer; + vertical-align: middle; + + i { + width: inherit; + display: inline-block; + text-align: center; + color: $button-floating-color; + font-size: $button-large-icon-font-size; + line-height: $button-floating-size; + } +} + +// button fix +button.btn-floating { + border: $button-border; +} + +// Fixed Action Button +.fixed-action-btn { + &.active { + ul { + visibility: visible; + } + } + + &.horizontal { + padding: 0 0 0 15px; + + ul { + text-align: right; + right: 64px; + top: 50%; + transform: translateY(-50%); + height: 100%; + left: auto; + width: 500px; /*width 100% only goes to width of button container */ + + li { + display: inline-block; + margin: 15px 15px 0 0; + } + } + } + + &.toolbar { + &.active { + & > a i { + opacity: 0; + } + } + + padding: 0; + height: $button-floating-large-size; + + ul { + display: flex; + top: 0; + bottom: 0; + z-index: 1; + + li { + flex: 1; + display: inline-block; + margin: 0; + height: 100%; + transition: none; + + a { + display: block; + overflow: hidden; + position: relative; + width: 100%; + height: 100%; + background-color: transparent; + box-shadow: none; + color: #fff; + line-height: $button-floating-large-size; + z-index: 1; + + i { + line-height: inherit; + } + } + } + } + } + + position: fixed; + right: 23px; + bottom: 23px; + padding-top: 15px; + margin-bottom: 0; + z-index: 997; + + ul { + left: 0; + right: 0; + text-align: center; + position: absolute; + bottom: 64px; + margin: 0; + visibility: hidden; + + li { + margin-bottom: 15px; + } + + a.btn-floating { + opacity: 0; + } + } + + .fab-backdrop { + position: absolute; + top: 0; + left: 0; + z-index: -1; + width: $button-floating-size; + height: $button-floating-size; + background-color: $button-floating-background; + border-radius: $button-floating-radius; + transform: scale(0); + } +} + +// Flat button +.btn-flat { + box-shadow: none; + background-color: transparent; + color: $button-flat-color; + cursor: pointer; + transition: background-color .2s; + + &:focus, + &:hover { + box-shadow: none; + } + + &:focus { + background-color: rgba(0,0,0,.1); + } + + &.disabled { + background-color: transparent !important; + color: $button-flat-disabled-color !important; + cursor: default; + } +} + +// Large button +.btn-large { + @extend .btn; + height: $button-large-height; + line-height: $button-large-height; + + i { + font-size: $button-large-icon-font-size; + } +} + +// Block button +.btn-block { + display: block; +} diff --git a/app/dispatch/static/materialize/sass/components/_cards.scss b/app/dispatch/static/materialize/sass/components/_cards.scss new file mode 100644 index 0000000..c9b0216 --- /dev/null +++ b/app/dispatch/static/materialize/sass/components/_cards.scss @@ -0,0 +1,196 @@ + + +.card-panel { + transition: box-shadow .25s; + padding: $card-padding; + margin: $element-top-margin 0 $element-bottom-margin 0; + border-radius: 2px; + @extend .z-depth-1; + background-color: $card-bg-color; +} + +.card { + position: relative; + margin: $element-top-margin 0 $element-bottom-margin 0; + background-color: $card-bg-color; + transition: box-shadow .25s; + border-radius: 2px; + @extend .z-depth-1; + + + .card-title { + font-size: 24px; + font-weight: 300; + &.activator { + cursor: pointer; + } + } + + // Card Sizes + &.small, &.medium, &.large { + position: relative; + + .card-image { + max-height: 60%; + overflow: hidden; + } + .card-image + .card-content { + max-height: 40%; + } + .card-content { + max-height: 100%; + overflow: hidden; + } + .card-action { + position: absolute; + bottom: 0; + left: 0; + right: 0; + } + } + + &.small { + height: 300px; + } + + &.medium { + height: 400px; + } + + &.large { + height: 500px; + } + + // Horizontal Cards + &.horizontal { + &.small, &.medium, &.large { + .card-image { + height: 100%; + max-height: none; + overflow: visible; + + img { + height: 100%; + } + } + } + + display: flex; + + .card-image { + max-width: 50%; + img { + border-radius: 2px 0 0 2px; + max-width: 100%; + width: auto; + } + } + + .card-stacked { + display: flex; + flex-direction: column; + flex: 1; + position: relative; + + .card-content { + flex-grow: 1; + } + } + } + + // Sticky Action Section + &.sticky-action { + .card-action { + z-index: 2; + } + + .card-reveal { + z-index: 1; + padding-bottom: 64px; + } + } + + + + + .card-image { + position: relative; + + // Image background for content + img { + display: block; + border-radius: 2px 2px 0 0; + position: relative; + left: 0; + right: 0; + top: 0; + bottom: 0; + width: 100%; + } + + .card-title { + color: $card-bg-color; + position: absolute; + bottom: 0; + left: 0; + max-width: 100%; + padding: $card-padding; + } + } + + .card-content { + padding: $card-padding; + border-radius: 0 0 2px 2px; + + p { + margin: 0; + color: inherit; + } + .card-title { + display: block; + line-height: 32px; + margin-bottom: 8px; + + i { + line-height: 32px; + } + } + } + + .card-action { + &:last-child { + border-radius: 0 0 2px 2px; + } + position: relative; + background-color: inherit; + border-top: 1px solid rgba(160,160,160,.2); + padding: 16px $card-padding; + + a:not(.btn):not(.btn-large):not(.btn-floating) { + color: $card-link-color; + margin-right: $card-padding; + transition: color .3s ease; + text-transform: uppercase; + + &:hover { color: $card-link-color-light; } + } + } + + .card-reveal { + padding: $card-padding; + position: absolute; + background-color: $card-bg-color; + width: 100%; + overflow-y: auto; + left: 0; + top: 100%; + height: 100%; + z-index: 3; + display: none; + + .card-title { + cursor: pointer; + display: block; + } + } +} diff --git a/app/dispatch/static/materialize/sass/components/_carousel.scss b/app/dispatch/static/materialize/sass/components/_carousel.scss new file mode 100644 index 0000000..fccdc82 --- /dev/null +++ b/app/dispatch/static/materialize/sass/components/_carousel.scss @@ -0,0 +1,90 @@ +.carousel { + &.carousel-slider { + top: 0; + left: 0; + + .carousel-fixed-item { + &.with-indicators { + bottom: 68px; + } + + position: absolute; + left: 0; + right: 0; + bottom: 20px; + z-index: 1; + } + + .carousel-item { + width: 100%; + height: 100%; + min-height: $carousel-height; + position: absolute; + top: 0; + left: 0; + + h2 { + font-size: 24px; + font-weight: 500; + line-height: 32px; + } + + p { + font-size: 15px; + } + } + } + + overflow: hidden; + position: relative; + width: 100%; + height: $carousel-height; + perspective: 500px; + transform-style: preserve-3d; + transform-origin: 0% 50%; + + .carousel-item { + display: none; + width: $carousel-item-width; + height: $carousel-item-height; + position: absolute; + top: 0; + left: 0; + + & > img { + width: 100%; + } + } + + .indicators { + position: absolute; + text-align: center; + left: 0; + right: 0; + bottom: 0; + margin: 0; + + .indicator-item { + &.active { + background-color: #fff; + } + + display: inline-block; + position: relative; + cursor: pointer; + height: 8px; + width: 8px; + margin: 24px 4px; + background-color: rgba(255,255,255,.5); + + transition: background-color .3s; + border-radius: 50%; + } + } + + // Materialbox compatibility + &.scrolling .carousel-item .materialboxed, + .carousel-item:not(.active) .materialboxed { + pointer-events: none; + } +} diff --git a/app/dispatch/static/materialize/sass/components/_chips.scss b/app/dispatch/static/materialize/sass/components/_chips.scss new file mode 100644 index 0000000..c291578 --- /dev/null +++ b/app/dispatch/static/materialize/sass/components/_chips.scss @@ -0,0 +1,89 @@ +.chip { + display: inline-block; + height: 32px; + font-size: 13px; + font-weight: 500; + color: rgba(0,0,0,.6); + line-height: 32px; + padding: 0 12px; + border-radius: 16px; + background-color: $chip-bg-color; + margin-bottom: $chip-margin; + margin-right: $chip-margin; + + > img { + float: left; + margin: 0 8px 0 -12px; + height: 32px; + width: 32px; + border-radius: 50%; + } + + .close { + cursor: pointer; + float: right; + font-size: 16px; + line-height: 32px; + padding-left: 8px; + } +} + +.chips { + border: none; + border-bottom: 1px solid $chip-border-color; + box-shadow: none; + margin: $input-margin; + min-height: 45px; + outline: none; + transition: all .3s; + + &.focus { + border-bottom: 1px solid $chip-selected-color; + box-shadow: 0 1px 0 0 $chip-selected-color; + } + + &:hover { + cursor: text; + } + + .chip.selected { + background-color: $chip-selected-color; + color: #fff; + } + + .input { + background: none; + border: 0; + color: rgba(0,0,0,.6); + display: inline-block; + font-size: $input-font-size; + height: $input-height; + line-height: 32px; + outline: 0; + margin: 0; + padding: 0 !important; + width: 120px !important; + } + + .input:focus { + border: 0 !important; + box-shadow: none !important; + } + + // Autocomplete + .autocomplete-content { + margin-top: 0; + margin-bottom: 0; + } +} + +// Form prefix +.prefix ~ .chips { + margin-left: 3rem; + width: 92%; + width: calc(100% - 3rem); +} +.chips:empty ~ label { + font-size: 0.8rem; + transform: translateY(-140%); +} diff --git a/app/dispatch/static/materialize/sass/components/_collapsible.scss b/app/dispatch/static/materialize/sass/components/_collapsible.scss new file mode 100644 index 0000000..ef59d96 --- /dev/null +++ b/app/dispatch/static/materialize/sass/components/_collapsible.scss @@ -0,0 +1,84 @@ +.collapsible { + border-top: 1px solid $collapsible-border-color; + border-right: 1px solid $collapsible-border-color; + border-left: 1px solid $collapsible-border-color; + margin: $element-top-margin 0 $element-bottom-margin 0; + @extend .z-depth-1; +} + +.collapsible-header { + display: flex; + cursor: pointer; + -webkit-tap-highlight-color: transparent; + line-height: 1.5; + padding: 1rem; + background-color: $collapsible-header-color; + border-bottom: 1px solid $collapsible-border-color; + + i { + width: 2rem; + font-size: 1.6rem; + display: inline-block; + text-align: center; + margin-right: 1rem; + } +} + +.collapsible-body { + display: none; + border-bottom: 1px solid $collapsible-border-color; + box-sizing: border-box; + padding: 2rem; +} + +// sideNav collapsible styling +.side-nav, +.side-nav.fixed { + + .collapsible { + border: none; + box-shadow: none; + + li { padding: 0; } + } + + .collapsible-header { + background-color: transparent; + border: none; + line-height: inherit; + height: inherit; + padding: 0 $sidenav-padding; + + &:hover { background-color: rgba(0,0,0,.05); } + i { line-height: inherit; } + } + + .collapsible-body { + border: 0; + background-color: $collapsible-header-color; + + li a { + padding: 0 (7.5px + $sidenav-padding) + 0 (15px + $sidenav-padding); + } + } + +} + +// Popout Collapsible + +.collapsible.popout { + border: none; + box-shadow: none; + > 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); + margin: 0 24px; + transition: margin .35s cubic-bezier(0.250, 0.460, 0.450, 0.940); + } + > 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); + } +} diff --git a/app/dispatch/static/materialize/sass/components/_color.scss b/app/dispatch/static/materialize/sass/components/_color.scss new file mode 100644 index 0000000..bf4b123 --- /dev/null +++ b/app/dispatch/static/materialize/sass/components/_color.scss @@ -0,0 +1,412 @@ +// Utility Color Classes + +//.success { +// +//} + +// Google Color Palette defined: http://www.google.com/design/spec/style/color.html + + +$materialize-red: ( + "base": #e51c23, + "lighten-5": #fdeaeb, + "lighten-4": #f8c1c3, + "lighten-3": #f3989b, + "lighten-2": #ee6e73, + "lighten-1": #ea454b, + "darken-1": #d0181e, + "darken-2": #b9151b, + "darken-3": #a21318, + "darken-4": #8b1014, +); + +$red: ( + "base": #F44336, + "lighten-5": #FFEBEE, + "lighten-4": #FFCDD2, + "lighten-3": #EF9A9A, + "lighten-2": #E57373, + "lighten-1": #EF5350, + "darken-1": #E53935, + "darken-2": #D32F2F, + "darken-3": #C62828, + "darken-4": #B71C1C, + "accent-1": #FF8A80, + "accent-2": #FF5252, + "accent-3": #FF1744, + "accent-4": #D50000 +); + +$pink: ( + "base": #e91e63, + "lighten-5": #fce4ec, + "lighten-4": #f8bbd0, + "lighten-3": #f48fb1, + "lighten-2": #f06292, + "lighten-1": #ec407a, + "darken-1": #d81b60, + "darken-2": #c2185b, + "darken-3": #ad1457, + "darken-4": #880e4f, + "accent-1": #ff80ab, + "accent-2": #ff4081, + "accent-3": #f50057, + "accent-4": #c51162 +); + +$purple: ( + "base": #9c27b0, + "lighten-5": #f3e5f5, + "lighten-4": #e1bee7, + "lighten-3": #ce93d8, + "lighten-2": #ba68c8, + "lighten-1": #ab47bc, + "darken-1": #8e24aa, + "darken-2": #7b1fa2, + "darken-3": #6a1b9a, + "darken-4": #4a148c, + "accent-1": #ea80fc, + "accent-2": #e040fb, + "accent-3": #d500f9, + "accent-4": #aa00ff +); + +$deep-purple: ( + "base": #673ab7, + "lighten-5": #ede7f6, + "lighten-4": #d1c4e9, + "lighten-3": #b39ddb, + "lighten-2": #9575cd, + "lighten-1": #7e57c2, + "darken-1": #5e35b1, + "darken-2": #512da8, + "darken-3": #4527a0, + "darken-4": #311b92, + "accent-1": #b388ff, + "accent-2": #7c4dff, + "accent-3": #651fff, + "accent-4": #6200ea +); + +$indigo: ( + "base": #3f51b5, + "lighten-5": #e8eaf6, + "lighten-4": #c5cae9, + "lighten-3": #9fa8da, + "lighten-2": #7986cb, + "lighten-1": #5c6bc0, + "darken-1": #3949ab, + "darken-2": #303f9f, + "darken-3": #283593, + "darken-4": #1a237e, + "accent-1": #8c9eff, + "accent-2": #536dfe, + "accent-3": #3d5afe, + "accent-4": #304ffe +); + +$blue: ( + "base": #2196F3, + "lighten-5": #E3F2FD, + "lighten-4": #BBDEFB, + "lighten-3": #90CAF9, + "lighten-2": #64B5F6, + "lighten-1": #42A5F5, + "darken-1": #1E88E5, + "darken-2": #1976D2, + "darken-3": #1565C0, + "darken-4": #0D47A1, + "accent-1": #82B1FF, + "accent-2": #448AFF, + "accent-3": #2979FF, + "accent-4": #2962FF +); + +$light-blue: ( + "base": #03a9f4, + "lighten-5": #e1f5fe, + "lighten-4": #b3e5fc, + "lighten-3": #81d4fa, + "lighten-2": #4fc3f7, + "lighten-1": #29b6f6, + "darken-1": #039be5, + "darken-2": #0288d1, + "darken-3": #0277bd, + "darken-4": #01579b, + "accent-1": #80d8ff, + "accent-2": #40c4ff, + "accent-3": #00b0ff, + "accent-4": #0091ea +); + +$cyan: ( + "base": #00bcd4, + "lighten-5": #e0f7fa, + "lighten-4": #b2ebf2, + "lighten-3": #80deea, + "lighten-2": #4dd0e1, + "lighten-1": #26c6da, + "darken-1": #00acc1, + "darken-2": #0097a7, + "darken-3": #00838f, + "darken-4": #006064, + "accent-1": #84ffff, + "accent-2": #18ffff, + "accent-3": #00e5ff, + "accent-4": #00b8d4 +); + +$teal: ( + "base": #009688, + "lighten-5": #e0f2f1, + "lighten-4": #b2dfdb, + "lighten-3": #80cbc4, + "lighten-2": #4db6ac, + "lighten-1": #26a69a, + "darken-1": #00897b, + "darken-2": #00796b, + "darken-3": #00695c, + "darken-4": #004d40, + "accent-1": #a7ffeb, + "accent-2": #64ffda, + "accent-3": #1de9b6, + "accent-4": #00bfa5 +); + +$green: ( + "base": #4CAF50, + "lighten-5": #E8F5E9, + "lighten-4": #C8E6C9, + "lighten-3": #A5D6A7, + "lighten-2": #81C784, + "lighten-1": #66BB6A, + "darken-1": #43A047, + "darken-2": #388E3C, + "darken-3": #2E7D32, + "darken-4": #1B5E20, + "accent-1": #B9F6CA, + "accent-2": #69F0AE, + "accent-3": #00E676, + "accent-4": #00C853 +); + +$light-green: ( + "base": #8bc34a, + "lighten-5": #f1f8e9, + "lighten-4": #dcedc8, + "lighten-3": #c5e1a5, + "lighten-2": #aed581, + "lighten-1": #9ccc65, + "darken-1": #7cb342, + "darken-2": #689f38, + "darken-3": #558b2f, + "darken-4": #33691e, + "accent-1": #ccff90, + "accent-2": #b2ff59, + "accent-3": #76ff03, + "accent-4": #64dd17 +); + +$lime: ( + "base": #cddc39, + "lighten-5": #f9fbe7, + "lighten-4": #f0f4c3, + "lighten-3": #e6ee9c, + "lighten-2": #dce775, + "lighten-1": #d4e157, + "darken-1": #c0ca33, + "darken-2": #afb42b, + "darken-3": #9e9d24, + "darken-4": #827717, + "accent-1": #f4ff81, + "accent-2": #eeff41, + "accent-3": #c6ff00, + "accent-4": #aeea00 +); + +$yellow: ( + "base": #ffeb3b, + "lighten-5": #fffde7, + "lighten-4": #fff9c4, + "lighten-3": #fff59d, + "lighten-2": #fff176, + "lighten-1": #ffee58, + "darken-1": #fdd835, + "darken-2": #fbc02d, + "darken-3": #f9a825, + "darken-4": #f57f17, + "accent-1": #ffff8d, + "accent-2": #ffff00, + "accent-3": #ffea00, + "accent-4": #ffd600 +); + +$amber: ( + "base": #ffc107, + "lighten-5": #fff8e1, + "lighten-4": #ffecb3, + "lighten-3": #ffe082, + "lighten-2": #ffd54f, + "lighten-1": #ffca28, + "darken-1": #ffb300, + "darken-2": #ffa000, + "darken-3": #ff8f00, + "darken-4": #ff6f00, + "accent-1": #ffe57f, + "accent-2": #ffd740, + "accent-3": #ffc400, + "accent-4": #ffab00 +); + +$orange: ( + "base": #ff9800, + "lighten-5": #fff3e0, + "lighten-4": #ffe0b2, + "lighten-3": #ffcc80, + "lighten-2": #ffb74d, + "lighten-1": #ffa726, + "darken-1": #fb8c00, + "darken-2": #f57c00, + "darken-3": #ef6c00, + "darken-4": #e65100, + "accent-1": #ffd180, + "accent-2": #ffab40, + "accent-3": #ff9100, + "accent-4": #ff6d00 +); + +$deep-orange: ( + "base": #ff5722, + "lighten-5": #fbe9e7, + "lighten-4": #ffccbc, + "lighten-3": #ffab91, + "lighten-2": #ff8a65, + "lighten-1": #ff7043, + "darken-1": #f4511e, + "darken-2": #e64a19, + "darken-3": #d84315, + "darken-4": #bf360c, + "accent-1": #ff9e80, + "accent-2": #ff6e40, + "accent-3": #ff3d00, + "accent-4": #dd2c00 +); + +$brown: ( + "base": #795548, + "lighten-5": #efebe9, + "lighten-4": #d7ccc8, + "lighten-3": #bcaaa4, + "lighten-2": #a1887f, + "lighten-1": #8d6e63, + "darken-1": #6d4c41, + "darken-2": #5d4037, + "darken-3": #4e342e, + "darken-4": #3e2723 +); + +$blue-grey: ( + "base": #607d8b, + "lighten-5": #eceff1, + "lighten-4": #cfd8dc, + "lighten-3": #b0bec5, + "lighten-2": #90a4ae, + "lighten-1": #78909c, + "darken-1": #546e7a, + "darken-2": #455a64, + "darken-3": #37474f, + "darken-4": #263238 +); + +$grey: ( + "base": #9e9e9e, + "lighten-5": #fafafa, + "lighten-4": #f5f5f5, + "lighten-3": #eeeeee, + "lighten-2": #e0e0e0, + "lighten-1": #bdbdbd, + "darken-1": #757575, + "darken-2": #616161, + "darken-3": #424242, + "darken-4": #212121 +); + +$shades: ( + "black": #000000, + "white": #FFFFFF, + "transparent": transparent +); + +$colors: ( + "materialize-red": $materialize-red, + "red": $red, + "pink": $pink, + "purple": $purple, + "deep-purple": $deep-purple, + "indigo": $indigo, + "blue": $blue, + "light-blue": $light-blue, + "cyan": $cyan, + "teal": $teal, + "green": $green, + "light-green": $light-green, + "lime": $lime, + "yellow": $yellow, + "amber": $amber, + "orange": $orange, + "deep-orange": $deep-orange, + "brown": $brown, + "blue-grey": $blue-grey, + "grey": $grey, + "shades": $shades +) !default; + + +// Color Classes + +@each $color_name, $color in $colors { + @each $color_type, $color_value in $color { + @if $color_type == "base" { + .#{$color_name} { + background-color: $color_value !important; + } + .#{$color_name}-text { + color: $color_value !important; + } + } + @else if $color_name != "shades" { + .#{$color_name}.#{$color_type} { + background-color: $color_value !important; + } + .#{$color_name}-text.text-#{$color_type} { + color: $color_value !important; + } + } + } +} + +// Shade classes +@each $color, $color_value in $shades { + .#{$color} { + background-color: $color_value !important; + } + .#{$color}-text { + color: $color_value !important; + } +} + + +// usage: color("name_of_color", "type_of_color") +// to avoid to repeating map-get($colors, ...) + +@function color($color, $type) { + @if map-has-key($colors, $color) { + $curr_color: map-get($colors, $color); + @if map-has-key($curr_color, $type) { + @return map-get($curr_color, $type); + } + } + @warn "Unknown `#{$color}` - `#{$type}` in $colors."; + @return null; +} + diff --git a/app/dispatch/static/materialize/sass/components/_dropdown.scss b/app/dispatch/static/materialize/sass/components/_dropdown.scss new file mode 100644 index 0000000..27131b5 --- /dev/null +++ b/app/dispatch/static/materialize/sass/components/_dropdown.scss @@ -0,0 +1,68 @@ +.dropdown-content { + @extend .z-depth-1; + background-color: $dropdown-bg-color; + margin: 0; + display: none; + min-width: 100px; + max-height: 650px; + overflow-y: auto; + opacity: 0; + position: absolute; + z-index: 999; + will-change: width, height; + + li { + clear: both; + color: $off-black; + cursor: pointer; + min-height: $dropdown-item-height; + line-height: 1.5rem; + width: 100%; + text-align: left; + text-transform: none; + + &:hover, &.active, &.selected { + background-color: $dropdown-hover-bg-color; + } + + &.active.selected { + background-color: darken($dropdown-hover-bg-color, 5%); + } + + &.divider { + min-height: 0; + height: 1px; + } + + & > a, & > span { + font-size: 16px; + color: $dropdown-color; + display: block; + line-height: 22px; + padding: (($dropdown-item-height - 22) / 2) 16px; + } + + & > span > label { + top: 1px; + left: 0; + height: 18px; + } + + // Icon alignment override + & > a > i { + height: inherit; + line-height: inherit; + float: left; + margin: 0 24px 0 0; + width: 24px; + } + } +} + +// Input field specificity bugfix +.input-field.col .dropdown-content [type="checkbox"] + label { + top: 1px; + left: 0; + height: 18px; +} + diff --git a/app/dispatch/static/materialize/sass/components/_global.scss b/app/dispatch/static/materialize/sass/components/_global.scss new file mode 100644 index 0000000..5a7709f --- /dev/null +++ b/app/dispatch/static/materialize/sass/components/_global.scss @@ -0,0 +1,734 @@ +//Default styles + +html { + box-sizing: border-box; +} +*, *:before, *:after { + box-sizing: inherit; +} + +body { + // display: flex; + // min-height: 100vh; + // flex-direction: column; +} + +main { + // flex: 1 0 auto; +} + +ul { + &:not(.browser-default) { + padding-left: 0; + list-style-type: none; + + & > li { + list-style-type: none; + } + } +} + +a { + color: $link-color; + text-decoration: none; + + // Gets rid of tap active state + -webkit-tap-highlight-color: transparent; +} + + +// Positioning +.valign-wrapper { + display: flex; + align-items: center; +} + + +// classic clearfix +.clearfix { + clear: both; +} + + +// Z-levels +.z-depth-0 { + box-shadow: none !important; +} +.z-depth-1 { + box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2); +} +.z-depth-1-half { + box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.14), 0 1px 7px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -1px rgba(0, 0, 0, 0.2); +} +.z-depth-2 { + box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.3); +} +.z-depth-3 { + box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12), 0 3px 5px -1px rgba(0, 0, 0, 0.3); +} +.z-depth-4 { + box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 5px 5px -3px rgba(0, 0, 0, 0.3); +} +.z-depth-5 { + box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.3); +} + +.hoverable { + transition: box-shadow .25s; + + &:hover { + box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); + } +} + +// Dividers + +.divider { + height: 1px; + overflow: hidden; + background-color: color("grey", "lighten-2"); +} + + +// Blockquote + +blockquote { + margin: 20px 0; + padding-left: 1.5rem; + border-left: 5px solid $primary-color; +} + +// Icon Styles + +i { + line-height: inherit; + + &.left { + float: left; + margin-right: 15px; + } + &.right { + float: right; + margin-left: 15px; + } + &.tiny { + font-size: 1rem; + } + &.small { + font-size: 2rem; + } + &.medium { + font-size: 4rem; + } + &.large { + font-size: 6rem; + } +} + +// Images +img.responsive-img, +video.responsive-video { + max-width: 100%; + height: auto; +} + + +// Pagination + +.pagination { + + li { + display: inline-block; + border-radius: 2px; + text-align: center; + vertical-align: top; + height: 30px; + + a { + color: #444; + display: inline-block; + font-size: 1.2rem; + padding: 0 10px; + line-height: 30px; + } + + &.active a { color: #fff; } + + &.active { background-color: $primary-color; } + + &.disabled a { + cursor: default; + color: #999; + } + + i { + font-size: 2rem; + } + } + + + li.pages ul li { + display: inline-block; + float: none; + } +} +@media #{$medium-and-down} { + .pagination { + width: 100%; + + li.prev, + li.next { + width: 10%; + } + + li.pages { + width: 80%; + overflow: hidden; + white-space: nowrap; + } + } +} + +// Breadcrumbs +.breadcrumb { + font-size: 18px; + color: rgba(255,255,255, .7); + + i, + [class^="mdi-"], [class*="mdi-"], + i.material-icons { + display: inline-block; + float: left; + font-size: 24px; + } + + &:before { + content: '\E5CC'; + color: rgba(255,255,255, .7); + vertical-align: top; + display: inline-block; + font-family: 'Material Icons'; + font-weight: normal; + font-style: normal; + font-size: 25px; + margin: 0 10px 0 8px; + -webkit-font-smoothing: antialiased; + } + + &:first-child:before { + display: none; + } + + &:last-child { + color: #fff; + } +} + +// Parallax +.parallax-container { + position: relative; + overflow: hidden; + height: 500px; + + .parallax { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + z-index: -1; + + img { + display: none; + position: absolute; + left: 50%; + bottom: 0; + min-width: 100%; + min-height: 100%; + transform: translate3d(0,0,0); + transform: translateX(-50%); + } + } +} + +// Pushpin +.pin-top, .pin-bottom { + position: relative; +} +.pinned { + position: fixed !important; +} + +/********************* + Transition Classes +**********************/ + +ul.staggered-list li { + opacity: 0; +} + +.fade-in { + opacity: 0; + transform-origin: 0 50%; +} + + +/********************* + Media Query Classes +**********************/ +.hide-on-small-only, .hide-on-small-and-down { + @media #{$small-and-down} { + display: none !important; + } +} +.hide-on-med-and-down { + @media #{$medium-and-down} { + display: none !important; + } +} +.hide-on-med-and-up { + @media #{$medium-and-up} { + display: none !important; + } +} +.hide-on-med-only { + @media only screen and (min-width: $small-screen) and (max-width: $medium-screen) { + display: none !important; + } +} +.hide-on-large-only { + @media #{$large-and-up} { + display: none !important; + } +} +.show-on-large { + @media #{$large-and-up} { + display: block !important; + } +} +.show-on-medium { + @media only screen and (min-width: $small-screen) and (max-width: $medium-screen) { + display: block !important; + } +} +.show-on-small { + @media #{$small-and-down} { + display: block !important; + } +} +.show-on-medium-and-up { + @media #{$medium-and-up} { + display: block !important; + } +} +.show-on-medium-and-down { + @media #{$medium-and-down} { + display: block !important; + } +} + + +// Center text on mobile +.center-on-small-only { + @media #{$small-and-down} { + text-align: center; + } +} + +// Footer +.page-footer { + padding-top: 20px; + color: $footer-font-color; + background-color: $footer-bg-color; + + .footer-copyright { + overflow: hidden; + min-height: 50px; + display: flex; + align-items: center; + padding: 10px 0px; + color: $footer-copyright-font-color; + background-color: $footer-copyright-bg-color; + @extend .light; + } +} + +// Tables +table, th, td { + border: none; +} + +table { + width:100%; + display: table; + + &.bordered > thead > tr, + &.bordered > tbody > tr { + border-bottom: 1px solid $table-border-color; + } + + &.striped > tbody { + > tr:nth-child(odd) { + background-color: $table-striped-color; + } + + > tr > td { + border-radius: 0; + } + } + + &.highlight > tbody > tr { + transition: background-color .25s ease; + &:hover { + background-color: $table-striped-color; + } + } + + &.centered { + thead tr th, tbody tr td { + text-align: center; + } + } + +} + +thead { + border-bottom: 1px solid $table-border-color; +} + +td, th{ + padding: 15px 5px; + display: table-cell; + text-align: left; + vertical-align: middle; + border-radius: 2px; +} + +// Responsive Table +@media #{$medium-and-down} { + + table.responsive-table { + width: 100%; + border-collapse: collapse; + border-spacing: 0; + display: block; + position: relative; + + td:empty:before { + content: '\00a0'; + } + + th, + td { + margin: 0; + vertical-align: top; + } + + th { text-align: left; } + thead { + display: block; + float: left; + + tr { + display: block; + padding: 0 10px 0 0; + + th::before { + content: "\00a0"; + } + } + } + tbody { + display: block; + width: auto; + position: relative; + overflow-x: auto; + white-space: nowrap; + + tr { + display: inline-block; + vertical-align: top; + } + } + th { + display: block; + text-align: right; + } + td { + display: block; + min-height: 1.25em; + text-align: left; + } + tr { padding: 0 10px; } + + /* sort out borders */ + thead { + border: 0; + border-right: 1px solid $table-border-color; + } + + &.bordered { + th { border-bottom: 0; border-left: 0; } + td { border-left: 0; border-right: 0; border-bottom: 0; } + tr { border: 0; } + tbody tr { border-right: 1px solid $table-border-color; } + } + + } + +} + + +// Collections +.collection { + margin: $element-top-margin 0 $element-bottom-margin 0; + border: 1px solid $collection-border-color; + border-radius: 2px; + overflow: hidden; + position: relative; + + .collection-item { + background-color: $collection-bg-color; + line-height: $collection-line-height; + padding: 10px 20px; + margin: 0; + border-bottom: 1px solid $collection-border-color; + + // Avatar Collection + &.avatar { + min-height: 84px; + padding-left: 72px; + position: relative; + + // Don't style circles inside preloader classes. + &:not(.circle-clipper) > .circle, + :not(.circle-clipper) > .circle { + position: absolute; + width: 42px; + height: 42px; + overflow: hidden; + left: 15px; + display: inline-block; + vertical-align: middle; + } + i.circle { + font-size: 18px; + line-height: 42px; + color: #fff; + background-color: #999; + text-align: center; + } + + + .title { + font-size: 16px; + } + + p { + margin: 0; + } + + .secondary-content { + position: absolute; + top: 16px; + right: 16px; + } + + } + + + &:last-child { + border-bottom: none; + } + + &.active { + background-color: $collection-active-bg-color; + color: $collection-active-color; + + .secondary-content { + color: #fff; + } + } + } + a.collection-item{ + display: block; + transition: .25s; + color: $collection-link-color; + &:not(.active) { + &:hover { + background-color: $collection-hover-bg-color; + } + } + } + + &.with-header { + .collection-header { + background-color: $collection-bg-color; + border-bottom: 1px solid $collection-border-color; + padding: 10px 20px; + } + .collection-item { + padding-left: 30px; + } + .collection-item.avatar { + padding-left: 72px; + } + } + +} +// Made less specific to allow easier overriding +.secondary-content { + float: right; + color: $secondary-color; +} +.collapsible .collection { + margin: 0; + border: none; +} + + + +// Responsive Videos +.video-container { + position: relative; + padding-bottom: 56.25%; + height: 0; + overflow: hidden; + + iframe, object, embed { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + } +} + +// Progress Bar +.progress { + position: relative; + height: 4px; + display: block; + width: 100%; + background-color: lighten($progress-bar-color, 40%); + border-radius: 2px; + margin: $element-top-margin 0 $element-bottom-margin 0; + overflow: hidden; + .determinate { + position: absolute; + top: 0; + left: 0; + bottom: 0; + background-color: $progress-bar-color; + transition: width .3s linear; + } + .indeterminate { + background-color: $progress-bar-color; + &:before { + content: ''; + position: absolute; + background-color: inherit; + top: 0; + left:0; + bottom: 0; + will-change: left, right; + // Custom bezier + animation: indeterminate 2.1s cubic-bezier(0.650, 0.815, 0.735, 0.395) infinite; + + } + &:after { + content: ''; + position: absolute; + background-color: inherit; + top: 0; + left:0; + bottom: 0; + will-change: left, right; + // Custom bezier + animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.840, 0.440, 1.000) infinite; + animation-delay: 1.15s; + } + } +} +@keyframes indeterminate { + 0% { + left: -35%; + right:100%; + } + 60% { + left: 100%; + right: -90%; + } + 100% { + left: 100%; + right: -90%; + } +} + +@keyframes indeterminate-short { + 0% { + left: -200%; + right: 100%; + } + 60% { + left: 107%; + right: -8%; + } + 100% { + left: 107%; + right: -8%; + } +} + + +/******************* + Utility Classes +*******************/ + +.hide { + display: none !important; +} + +// Text Align +.left-align { + text-align: left; +} +.right-align { + text-align: right +} +.center, .center-align { + text-align: center; +} + +.left { + float: left !important; +} +.right { + float: right !important; +} + +// No Text Select +.no-select { + user-select: none; +} + +.circle { + border-radius: 50%; +} + +.center-block { + display: block; + margin-left: auto; + margin-right: auto; +} + +.truncate { + display: block; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +.no-padding { + padding: 0 !important; +} diff --git a/app/dispatch/static/materialize/sass/components/_grid.scss b/app/dispatch/static/materialize/sass/components/_grid.scss new file mode 100644 index 0000000..7aa9e8f --- /dev/null +++ b/app/dispatch/static/materialize/sass/components/_grid.scss @@ -0,0 +1,156 @@ +.container { + margin: 0 auto; + max-width: 1280px; + width: 90%; +} +@media #{$medium-and-up} { + .container { + width: 85%; + } +} +@media #{$large-and-up} { + .container { + width: 70%; + } +} +.container .row { + margin-left: (-1 * $gutter-width / 2); + margin-right: (-1 * $gutter-width / 2); +} + +.section { + padding-top: 1rem; + padding-bottom: 1rem; + + &.no-pad { + padding: 0; + } + &.no-pad-bot { + padding-bottom: 0; + } + &.no-pad-top { + padding-top: 0; + } +} + + +// Mixins to eliminate code repitition +@mixin reset-offset { + margin-left: auto; + left: auto; + right: auto; +} +@mixin grid-classes($size, $i, $perc) { + &.offset-#{$size}#{$i} { + margin-left: $perc; + } + &.pull-#{$size}#{$i} { + right: $perc; + } + &.push-#{$size}#{$i} { + left: $perc; + } +} + + +.row { + margin-left: auto; + margin-right: auto; + margin-bottom: 20px; + + // Clear floating children + &:after { + content: ""; + display: table; + clear: both; + } + + .col { + float: left; + box-sizing: border-box; + padding: 0 $gutter-width / 2; + min-height: 1px; + + &[class*="push-"], + &[class*="pull-"] { + position: relative; + } + + $i: 1; + @while $i <= $num-cols { + $perc: unquote((100 / ($num-cols / $i)) + "%"); + &.s#{$i} { + width: $perc; + @include reset-offset; + } + $i: $i + 1; + } + + $i: 1; + @while $i <= $num-cols { + $perc: unquote((100 / ($num-cols / $i)) + "%"); + @include grid-classes("s", $i, $perc); + $i: $i + 1; + } + + @media #{$medium-and-up} { + + $i: 1; + @while $i <= $num-cols { + $perc: unquote((100 / ($num-cols / $i)) + "%"); + &.m#{$i} { + width: $perc; + @include reset-offset; + } + $i: $i + 1 + } + + $i: 1; + @while $i <= $num-cols { + $perc: unquote((100 / ($num-cols / $i)) + "%"); + @include grid-classes("m", $i, $perc); + $i: $i + 1; + } + } + + @media #{$large-and-up} { + + $i: 1; + @while $i <= $num-cols { + $perc: unquote((100 / ($num-cols / $i)) + "%"); + &.l#{$i} { + width: $perc; + @include reset-offset; + } + $i: $i + 1; + } + + $i: 1; + @while $i <= $num-cols { + $perc: unquote((100 / ($num-cols / $i)) + "%"); + @include grid-classes("l", $i, $perc); + $i: $i + 1; + } + } + + @media #{$extra-large-and-up} { + + $i: 1; + @while $i <= $num-cols { + $perc: unquote((100 / ($num-cols / $i)) + "%"); + &.xl#{$i} { + width: $perc; + @include reset-offset; + } + $i: $i + 1; + } + + $i: 1; + @while $i <= $num-cols { + $perc: unquote((100 / ($num-cols / $i)) + "%"); + @include grid-classes("xl", $i, $perc); + $i: $i + 1; + } + } + } +} diff --git a/app/dispatch/static/materialize/sass/components/_icons-material-design.scss b/app/dispatch/static/materialize/sass/components/_icons-material-design.scss new file mode 100644 index 0000000..2aa6a4a --- /dev/null +++ b/app/dispatch/static/materialize/sass/components/_icons-material-design.scss @@ -0,0 +1,5 @@ +/* This is needed for some mobile phones to display the Google Icon font properly */ +.material-icons { + text-rendering: optimizeLegibility; + font-feature-settings: 'liga'; +} diff --git a/app/dispatch/static/materialize/sass/components/_materialbox.scss b/app/dispatch/static/materialize/sass/components/_materialbox.scss new file mode 100644 index 0000000..3027667 --- /dev/null +++ b/app/dispatch/static/materialize/sass/components/_materialbox.scss @@ -0,0 +1,43 @@ +.materialboxed { + &:hover { + &:not(.active) { + opacity: .8; + } + } + + display: block; + cursor: zoom-in; + position: relative; + transition: opacity .4s; + -webkit-backface-visibility: hidden; + + &.active { + cursor: zoom-out; + } +} + +#materialbox-overlay { + position:fixed; + top: 0; + right: 0; + bottom: 0; + left: 0; + background-color: #292929; + z-index: 1000; + will-change: opacity; +} + +.materialbox-caption { + position: fixed; + display: none; + color: #fff; + line-height: 50px; + bottom: 0; + left: 0; + width: 100%; + text-align: center; + padding: 0% 15%; + height: 50px; + z-index: 1000; + -webkit-font-smoothing: antialiased; +} \ No newline at end of file diff --git a/app/dispatch/static/materialize/sass/components/_modal.scss b/app/dispatch/static/materialize/sass/components/_modal.scss new file mode 100644 index 0000000..82445b4 --- /dev/null +++ b/app/dispatch/static/materialize/sass/components/_modal.scss @@ -0,0 +1,90 @@ +.modal { + @extend .z-depth-4; + + display: none; + position: fixed; + left: 0; + right: 0; + background-color: #fafafa; + padding: 0; + max-height: 70%; + width: 55%; + margin: auto; + overflow-y: auto; + + border-radius: 2px; + will-change: top, opacity; + + @media #{$medium-and-down} { + width: 80%; + } + + h1,h2,h3,h4 { + margin-top: 0; + } + + .modal-content { + padding: 24px; + } + .modal-close { + cursor: pointer; + } + + .modal-footer { + border-radius: 0 0 2px 2px; + background-color: #fafafa; + padding: 4px 6px; + height: 56px; + width: 100%; + text-align: right; + + .btn, .btn-flat { + margin: 6px 0; + } + } +} +.modal-overlay { + position: fixed; + z-index: 999; + top: -25%; + left: 0; + bottom: 0; + right: 0; + height: 125%; + width: 100%; + background: #000; + display: none; + + will-change: opacity; +} + +// Modal with fixed action footer +.modal.modal-fixed-footer { + padding: 0; + height: 70%; + + .modal-content { + position: absolute; + height: calc(100% - 56px); + max-height: 100%; + width: 100%; + overflow-y: auto; + } + + .modal-footer { + border-top: 1px solid rgba(0,0,0,.1); + position: absolute; + bottom: 0; + } +} + +// Modal Bottom Sheet Style +.modal.bottom-sheet { + top: auto; + bottom: -100%; + margin: 0; + width: 100%; + max-height: 45%; + border-radius: 0; + will-change: bottom, opacity; +} diff --git a/app/dispatch/static/materialize/sass/components/_navbar.scss b/app/dispatch/static/materialize/sass/components/_navbar.scss new file mode 100644 index 0000000..d6fb2f1 --- /dev/null +++ b/app/dispatch/static/materialize/sass/components/_navbar.scss @@ -0,0 +1,208 @@ +nav { + &.nav-extended { + height: auto; + + .nav-wrapper { + min-height: $navbar-height-mobile; + height: auto; + } + + .nav-content { + position: relative; + line-height: normal; + } + } + + color: $navbar-font-color; + @extend .z-depth-1; + background-color: $primary-color; + width: 100%; + height: $navbar-height-mobile; + line-height: $navbar-line-height-mobile; + + a { color: $navbar-font-color; } + + i, + [class^="mdi-"], [class*="mdi-"], + i.material-icons { + display: block; + font-size: 24px; + height: $navbar-height-mobile; + line-height: $navbar-line-height-mobile; + } + + .nav-wrapper { + position: relative; + height: 100%; + } + + @media #{$large-and-up} { + a.button-collapse { display: none; } + } + + + // Collapse button + .button-collapse { + float: left; + position: relative; + z-index: 1; + height: $navbar-height-mobile; + margin: 0 18px; + + i { + height: $navbar-height-mobile; + line-height: $navbar-line-height-mobile; + } + } + + + // Logo + .brand-logo { + position: absolute; + color: $navbar-font-color; + display: inline-block; + font-size: $navbar-brand-font-size; + padding: 0; + + &.center { + left: 50%; + transform: translateX(-50%); + } + + @media #{$medium-and-down} { + left: 50%; + transform: translateX(-50%); + + &.left, &.right { + padding: 0; + transform: none; + } + + &.left { left: 0.5rem; } + &.right { + right: 0.5rem; + left: auto; + } + } + + &.right { + right: 0.5rem; + padding: 0; + } + + i, + [class^="mdi-"], [class*="mdi-"], + i.material-icons { + float: left; + margin-right: 15px; + } + } + + + // Title + .nav-title { + display: inline-block; + font-size: 32px; + padding: 28px 0; + } + + + // Navbar Links + ul { + margin: 0; + + li { + transition: background-color .3s; + float: left; + padding: 0; + + &.active { + background-color: rgba(0,0,0,.1); + } + } + a { + transition: background-color .3s; + font-size: $navbar-font-size; + color: $navbar-font-color; + display: block; + padding: 0 15px; + cursor: pointer; + + &.btn, &.btn-large, &.btn-flat, &.btn-floating { + margin-top: -2px; + margin-left: 15px; + margin-right: 15px; + + & > .material-icons { + height: inherit; + line-height: inherit; + } + } + + &:hover { + background-color: rgba(0,0,0,.1); + } + } + + &.left { + float: left; + } + } + + // Navbar Search Form + form { + height: 100%; + } + + .input-field { + margin: 0; + height: 100%; + + input { + height: 100%; + font-size: 1.2rem; + border: none; + padding-left: 2rem; + + &:focus, &[type=text]:valid, &[type=password]:valid, + &[type=email]:valid, &[type=url]:valid, &[type=date]:valid { + border: none; + box-shadow: none; + } + } + + label { + top: 0; + left: 0; + + i { + color: rgba(255,255,255,.7); + transition: color .3s; + } + &.active i { color: $navbar-font-color; } + } + } +} + +// Fixed Navbar +.navbar-fixed { + position: relative; + height: $navbar-height-mobile; + z-index: 997; + + nav { + position: fixed; + } +} +@media #{$medium-and-up} { + nav.nav-extended .nav-wrapper { + min-height: $navbar-height; + } + nav, nav .nav-wrapper i, nav a.button-collapse, nav a.button-collapse i { + height: $navbar-height; + line-height: $navbar-line-height; + } + .navbar-fixed { + height: $navbar-height; + } +} diff --git a/app/dispatch/static/materialize/sass/components/_normalize.scss b/app/dispatch/static/materialize/sass/components/_normalize.scss new file mode 100644 index 0000000..d6d3c19 --- /dev/null +++ b/app/dispatch/static/materialize/sass/components/_normalize.scss @@ -0,0 +1,424 @@ +/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */ + +/** + * 1. Set default font family to sans-serif. + * 2. Prevent iOS and IE text size adjust after device orientation change, + * without disabling user zoom. + */ + +html { + font-family: sans-serif; /* 1 */ + -ms-text-size-adjust: 100%; /* 2 */ + -webkit-text-size-adjust: 100%; /* 2 */ +} + +/** + * Remove default margin. + */ + +body { + margin: 0; +} + +/* HTML5 display definitions + ========================================================================== */ + +/** + * Correct `block` display not defined for any HTML5 element in IE 8/9. + * Correct `block` display not defined for `details` or `summary` in IE 10/11 + * and Firefox. + * Correct `block` display not defined for `main` in IE 11. + */ + +article, +aside, +details, +figcaption, +figure, +footer, +header, +hgroup, +main, +menu, +nav, +section, +summary { + display: block; +} + +/** + * 1. Correct `inline-block` display not defined in IE 8/9. + * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera. + */ + +audio, +canvas, +progress, +video { + display: inline-block; /* 1 */ + vertical-align: baseline; /* 2 */ +} + +/** + * Prevent modern browsers from displaying `audio` without controls. + * Remove excess height in iOS 5 devices. + */ + +audio:not([controls]) { + display: none; + height: 0; +} + +/** + * Address `[hidden]` styling not present in IE 8/9/10. + * Hide the `template` element in IE 8/9/10/11, Safari, and Firefox < 22. + */ + +[hidden], +template { + display: none; +} + +/* Links + ========================================================================== */ + +/** + * Remove the gray background color from active links in IE 10. + */ + +a { + background-color: transparent; +} + +/** + * Improve readability of focused elements when they are also in an + * active/hover state. + */ + +a:active, +a:hover { + outline: 0; +} + +/* Text-level semantics + ========================================================================== */ + +/** + * Address styling not present in IE 8/9/10/11, Safari, and Chrome. + */ + +abbr[title] { + border-bottom: 1px dotted; +} + +/** + * Address style set to `bolder` in Firefox 4+, Safari, and Chrome. + */ + +b, +strong { + font-weight: bold; +} + +/** + * Address styling not present in Safari and Chrome. + */ + +dfn { + font-style: italic; +} + +/** + * Address variable `h1` font-size and margin within `section` and `article` + * contexts in Firefox 4+, Safari, and Chrome. + */ + +h1 { + font-size: 2em; + margin: 0.67em 0; +} + +/** + * Address styling not present in IE 8/9. + */ + +mark { + background: #ff0; + color: #000; +} + +/** + * Address inconsistent and variable font size in all browsers. + */ + +small { + font-size: 80%; +} + +/** + * Prevent `sub` and `sup` affecting `line-height` in all browsers. + */ + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sup { + top: -0.5em; +} + +sub { + bottom: -0.25em; +} + +/* Embedded content + ========================================================================== */ + +/** + * Remove border when inside `a` element in IE 8/9/10. + */ + +img { + border: 0; +} + +/** + * Correct overflow not hidden in IE 9/10/11. + */ + +svg:not(:root) { + overflow: hidden; +} + +/* Grouping content + ========================================================================== */ + +/** + * Address margin not present in IE 8/9 and Safari. + */ + +figure { + margin: 1em 40px; +} + +/** + * Address differences between Firefox and other browsers. + */ + +hr { + box-sizing: content-box; + height: 0; +} + +/** + * Contain overflow in all browsers. + */ + +pre { + overflow: auto; +} + +/** + * Address odd `em`-unit font size rendering in all browsers. + */ + +code, +kbd, +pre, +samp { + font-family: monospace, monospace; + font-size: 1em; +} + +/* Forms + ========================================================================== */ + +/** + * Known limitation: by default, Chrome and Safari on OS X allow very limited + * styling of `select`, unless a `border` property is set. + */ + +/** + * 1. Correct color not being inherited. + * Known issue: affects color of disabled elements. + * 2. Correct font properties not being inherited. + * 3. Address margins set differently in Firefox 4+, Safari, and Chrome. + */ + +button, +input, +optgroup, +select, +textarea { + color: inherit; /* 1 */ + font: inherit; /* 2 */ + margin: 0; /* 3 */ +} + +/** + * Address `overflow` set to `hidden` in IE 8/9/10/11. + */ + +button { + overflow: visible; +} + +/** + * Address inconsistent `text-transform` inheritance for `button` and `select`. + * All other form control elements do not inherit `text-transform` values. + * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera. + * Correct `select` style inheritance in Firefox. + */ + +button, +select { + text-transform: none; +} + +/** + * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` + * and `video` controls. + * 2. Correct inability to style clickable `input` types in iOS. + * 3. Improve usability and consistency of cursor style between image-type + * `input` and others. + */ + +button, +html input[type="button"], /* 1 */ +input[type="reset"], +input[type="submit"] { + -webkit-appearance: button; /* 2 */ + cursor: pointer; /* 3 */ +} + +/** + * Re-set default cursor for disabled elements. + */ + +button[disabled], +html input[disabled] { + cursor: default; +} + +/** + * Remove inner padding and border in Firefox 4+. + */ + +button::-moz-focus-inner, +input::-moz-focus-inner { + border: 0; + padding: 0; +} + +/** + * Address Firefox 4+ setting `line-height` on `input` using `!important` in + * the UA stylesheet. + */ + +input { + line-height: normal; +} + +/** + * It's recommended that you don't attempt to style these elements. + * Firefox's implementation doesn't respect box-sizing, padding, or width. + * + * 1. Address box sizing set to `content-box` in IE 8/9/10. + * 2. Remove excess padding in IE 8/9/10. + */ + +input[type="checkbox"], +input[type="radio"] { + box-sizing: border-box; /* 1 */ + padding: 0; /* 2 */ +} + +/** + * Fix the cursor style for Chrome's increment/decrement buttons. For certain + * `font-size` values of the `input`, it causes the cursor style of the + * decrement button to change from `default` to `text`. + */ + +input[type="number"]::-webkit-inner-spin-button, +input[type="number"]::-webkit-outer-spin-button { + height: auto; +} + +/** + * 1. Address `appearance` set to `searchfield` in Safari and Chrome. + * 2. Address `box-sizing` set to `border-box` in Safari and Chrome. + */ + +input[type="search"] { + -webkit-appearance: textfield; /* 1 */ + box-sizing: content-box; /* 2 */ +} + +/** + * Remove inner padding and search cancel button in Safari and Chrome on OS X. + * Safari (but not Chrome) clips the cancel button when the search input has + * padding (and `textfield` appearance). + */ + +input[type="search"]::-webkit-search-cancel-button, +input[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; +} + +/** + * Define consistent border, margin, and padding. + */ + +fieldset { + border: 1px solid #c0c0c0; + margin: 0 2px; + padding: 0.35em 0.625em 0.75em; +} + +/** + * 1. Correct `color` not being inherited in IE 8/9/10/11. + * 2. Remove padding so people aren't caught out if they zero out fieldsets. + */ + +legend { + border: 0; /* 1 */ + padding: 0; /* 2 */ +} + +/** + * Remove default vertical scrollbar in IE 8/9/10/11. + */ + +textarea { + overflow: auto; +} + +/** + * Don't inherit the `font-weight` (applied by a rule above). + * NOTE: the default cannot safely be changed in Chrome and Safari on OS X. + */ + +optgroup { + font-weight: bold; +} + +/* Tables + ========================================================================== */ + +/** + * Remove most spacing between table cells. + */ + +table { + border-collapse: collapse; + border-spacing: 0; +} + +td, +th { + padding: 0; +} diff --git a/app/dispatch/static/materialize/sass/components/_preloader.scss b/app/dispatch/static/materialize/sass/components/_preloader.scss new file mode 100644 index 0000000..cfe2993 --- /dev/null +++ b/app/dispatch/static/materialize/sass/components/_preloader.scss @@ -0,0 +1,334 @@ +/* + @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: 50px; + height: 50px; + + &.small { + width: 36px; + height: 36px; + } + + &.big { + width: 64px; + height: 64px; + } + + &.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; + border-color: $spinner-default-color; +} + +.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, 0.2, 1) infinite both, blue-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both; + animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both, blue-fade-in-out 5332ms cubic-bezier(0.4, 0.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, 0.2, 1) infinite both, red-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both; + animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both, red-fade-in-out 5332ms cubic-bezier(0.4, 0.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, 0.2, 1) infinite both, yellow-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both; + animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both, yellow-fade-in-out 5332ms cubic-bezier(0.4, 0.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, 0.2, 1) infinite both, green-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both; + animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both, green-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both; +} + +.active .spinner-layer, +.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, 0.2, 1) infinite both; + animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both; +} + +@-webkit-keyframes fill-unfill-rotate { + 12.5% { -webkit-transform: rotate(135deg); } /* 0.5 * ARCSIZE */ + 25% { -webkit-transform: rotate(270deg); } /* 1 * ARCSIZE */ + 37.5% { -webkit-transform: rotate(405deg); } /* 1.5 * ARCSIZE */ + 50% { -webkit-transform: rotate(540deg); } /* 2 * ARCSIZE */ + 62.5% { -webkit-transform: rotate(675deg); } /* 2.5 * ARCSIZE */ + 75% { -webkit-transform: rotate(810deg); } /* 3 * ARCSIZE */ + 87.5% { -webkit-transform: rotate(945deg); } /* 3.5 * ARCSIZE */ + to { -webkit-transform: rotate(1080deg); } /* 4 * ARCSIZE */ +} + +@keyframes fill-unfill-rotate { + 12.5% { transform: rotate(135deg); } /* 0.5 * ARCSIZE */ + 25% { transform: rotate(270deg); } /* 1 * ARCSIZE */ + 37.5% { transform: rotate(405deg); } /* 1.5 * ARCSIZE */ + 50% { transform: rotate(540deg); } /* 2 * ARCSIZE */ + 62.5% { transform: rotate(675deg); } /* 2.5 * ARCSIZE */ + 75% { transform: rotate(810deg); } /* 3 * ARCSIZE */ + 87.5% { transform: rotate(945deg); } /* 3.5 * ARCSIZE */ + to { transform: rotate(1080deg); } /* 4 * ARCSIZE */ +} + +@-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 { + 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; + } + + &.left .circle { + left: 0; + border-right-color: transparent !important; + -webkit-transform: rotate(129deg); + transform: rotate(129deg); + } + &.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, 0.2, 1) infinite both; + animation: left-spin 1333ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both; +} + +.active .circle-clipper.right .circle { + /* duration: ARCTIME */ + -webkit-animation: right-spin 1333ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both; + animation: right-spin 1333ms cubic-bezier(0.4, 0.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, 0.2, 1); + animation: container-rotate 1568ms linear infinite, fade-out 400ms cubic-bezier(0.4, 0.0, 0.2, 1); +} + +@-webkit-keyframes fade-out { + from { opacity: 1; } + to { opacity: 0; } +} + +@keyframes fade-out { + from { opacity: 1; } + to { opacity: 0; } +} diff --git a/app/dispatch/static/materialize/sass/components/_pulse.scss b/app/dispatch/static/materialize/sass/components/_pulse.scss new file mode 100644 index 0000000..a3b7d9f --- /dev/null +++ b/app/dispatch/static/materialize/sass/components/_pulse.scss @@ -0,0 +1,34 @@ +.pulse { + &::before { + content: ''; + display: block; + position: absolute; + width: 100%; + height: 100%; + top: 0; + left: 0; + background-color: inherit; + border-radius: inherit; + transition: opacity .3s, transform .3s; + animation: pulse-animation 1s cubic-bezier(0.24, 0, 0.38, 1) infinite; + z-index: -1; + } + + overflow: initial; + position: relative; +} + +@keyframes pulse-animation { + 0% { + opacity: 1; + transform: scale(1); + } + 50% { + opacity: 0; + transform: scale(1.5); + } + 100% { + opacity: 0; + transform: scale(1.5); + } +} diff --git a/app/dispatch/static/materialize/sass/components/_roboto.scss b/app/dispatch/static/materialize/sass/components/_roboto.scss new file mode 100644 index 0000000..a4ec3cb --- /dev/null +++ b/app/dispatch/static/materialize/sass/components/_roboto.scss @@ -0,0 +1,39 @@ +@font-face { + font-family: "Roboto"; + src: local(Roboto Thin), + url("#{$roboto-font-path}Roboto-Thin.woff2") format("woff2"), + url("#{$roboto-font-path}Roboto-Thin.woff") format("woff"); + + font-weight: 100; +} +@font-face { + font-family: "Roboto"; + src: local(Roboto Light), + url("#{$roboto-font-path}Roboto-Light.woff2") format("woff2"), + url("#{$roboto-font-path}Roboto-Light.woff") format("woff"); + font-weight: 300; +} + +@font-face { + font-family: "Roboto"; + src: local(Roboto Regular), + url("#{$roboto-font-path}Roboto-Regular.woff2") format("woff2"), + url("#{$roboto-font-path}Roboto-Regular.woff") format("woff"); + font-weight: 400; +} + +@font-face { + font-family: "Roboto"; + src: local(Roboto Medium), + url("#{$roboto-font-path}Roboto-Medium.woff2") format("woff2"), + url("#{$roboto-font-path}Roboto-Medium.woff") format("woff"); + font-weight: 500; +} + +@font-face { + font-family: "Roboto"; + src: local(Roboto Bold), + url("#{$roboto-font-path}Roboto-Bold.woff2") format("woff2"), + url("#{$roboto-font-path}Roboto-Bold.woff") format("woff"); + font-weight: 700; +} diff --git a/app/dispatch/static/materialize/sass/components/_sideNav.scss b/app/dispatch/static/materialize/sass/components/_sideNav.scss new file mode 100644 index 0000000..051e1f3 --- /dev/null +++ b/app/dispatch/static/materialize/sass/components/_sideNav.scss @@ -0,0 +1,214 @@ +.side-nav { + position: fixed; + width: 300px; + left: 0; + top: 0; + margin: 0; + transform: translateX(-100%); + height: 100%; + height: calc(100% + 60px); + height: -moz-calc(100%); //Temporary Firefox Fix + padding-bottom: 60px; + background-color: $sidenav-bg-color; + z-index: 999; + overflow-y: auto; + will-change: transform; + backface-visibility: hidden; + transform: translateX(-105%); + + @extend .z-depth-1; + + // Right Align + &.right-aligned { + right: 0; + transform: translateX(105%); + left: auto; + transform: translateX(100%); + } + + .collapsible { + margin: 0; + } + + + li { + float: none; + line-height: $sidenav-line-height; + + &.active { background-color: rgba(0,0,0,.05); } + } + + li > a { + color: $sidenav-font-color; + display: block; + font-size: $sidenav-font-size; + font-weight: 500; + height: $sidenav-item-height; + line-height: $sidenav-line-height; + padding: 0 ($sidenav-padding * 2); + + &:hover { background-color: rgba(0,0,0,.05);} + + &.btn, &.btn-large, &.btn-flat, &.btn-floating { + margin: 10px 15px; + } + + &.btn, + &.btn-large, + &.btn-floating { color: $button-raised-color; } + &.btn-flat { color: $button-flat-color; } + + &.btn:hover, + &.btn-large:hover { background-color: lighten($button-raised-background, 5%); } + &.btn-floating:hover { background-color: $button-raised-background; } + + & > i, + & > [class^="mdi-"], li > a > [class*="mdi-"], + & > i.material-icons { + float: left; + height: $sidenav-item-height; + line-height: $sidenav-line-height; + margin: 0 ($sidenav-padding * 2) 0 0; + width: $sidenav-item-height / 2; + color: rgba(0,0,0,.54); + } + } + + + .divider { + margin: ($sidenav-padding / 2) 0 0 0; + } + + .subheader { + &:hover { + background-color: transparent; + } + + cursor: initial; + pointer-events: none; + color: rgba(0,0,0,.54); + font-size: $sidenav-font-size; + font-weight: 500; + line-height: $sidenav-line-height; + } + + .user-view, + .userView { + position: relative; + padding: ($sidenav-padding * 2) ($sidenav-padding * 2) 0; + margin-bottom: $sidenav-padding / 2; + + & > a { + &:hover { background-color: transparent; } + height: auto; + padding: 0; + } + + .background { + overflow: hidden; + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + z-index: -1; + } + + .circle, .name, .email { + display: block; + } + + .circle { + height: 64px; + width: 64px; + } + + .name, + .email { + font-size: $sidenav-font-size; + line-height: $sidenav-line-height / 2; + } + + .name { + margin-top: 16px; + font-weight: 500; + } + + .email { + padding-bottom: 16px; + font-weight: 400; + } + } +} + + +// Touch interaction +.drag-target { + height: 100%; + width: 10px; + position: fixed; + top: 0; + z-index: 998; +} + + +// Fixed side-nav shown +.side-nav.fixed { + left: 0; + transform: translateX(0); + position: fixed; + + // Right Align + &.right-aligned { + right: 0; + left: auto; + } +} + +// Fixed sideNav hide on smaller +@media #{$medium-and-down} { + .side-nav { + &.fixed { + transform: translateX(-105%); + + &.right-aligned { + transform: translateX(105%); + } + } + + a { + padding: 0 $sidenav-padding; + } + + .user-view, + .userView { + padding: $sidenav-padding $sidenav-padding 0; + } + } +} + + +.side-nav .collapsible-body > ul:not(.collapsible) > li.active, +.side-nav.fixed .collapsible-body > ul:not(.collapsible) > li.active { + background-color: $primary-color; + a { + color: $sidenav-bg-color; + } +} +.side-nav .collapsible-body { + padding: 0; +} + + +#sidenav-overlay { + position: fixed; + top: 0; + left: 0; + right: 0; + + height: 120vh; + background-color: rgba(0,0,0,.5); + z-index: 997; + + will-change: opacity; +} diff --git a/app/dispatch/static/materialize/sass/components/_slider.scss b/app/dispatch/static/materialize/sass/components/_slider.scss new file mode 100644 index 0000000..5d7c27e --- /dev/null +++ b/app/dispatch/static/materialize/sass/components/_slider.scss @@ -0,0 +1,92 @@ +.slider { + position: relative; + height: 400px; + width: 100%; + + // Fullscreen slider + &.fullscreen { + height: 100%; + width: 100%; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + + ul.slides { + height: 100%; + } + + ul.indicators { + z-index: 2; + bottom: 30px; + } + } + + .slides { + background-color: $slider-bg-color; + margin: 0; + height: 400px; + + li { + opacity: 0; + position: absolute; + top: 0; + left: 0; + z-index: 1; + width: 100%; + height: inherit; + overflow: hidden; + + img { + height: 100%; + width: 100%; + background-size: cover; + background-position: center; + } + + .caption { + color: #fff; + position: absolute; + top: 15%; + left: 15%; + width: 70%; + opacity: 0; + + p { color: $slider-bg-color-light; } + } + + &.active { + z-index: 2; + } + } + } + + + .indicators { + position: absolute; + text-align: center; + left: 0; + right: 0; + bottom: 0; + margin: 0; + + .indicator-item { + display: inline-block; + position: relative; + cursor: pointer; + height: 16px; + width: 16px; + margin: 0 12px; + background-color: $slider-bg-color-light; + + transition: background-color .3s; + border-radius: 50%; + + &.active { + background-color: $slider-indicator-color; + } + } + } + +} \ No newline at end of file diff --git a/app/dispatch/static/materialize/sass/components/_table_of_contents.scss b/app/dispatch/static/materialize/sass/components/_table_of_contents.scss new file mode 100644 index 0000000..dde6090 --- /dev/null +++ b/app/dispatch/static/materialize/sass/components/_table_of_contents.scss @@ -0,0 +1,33 @@ +/*************** + Nav List +***************/ +.table-of-contents { + &.fixed { + position: fixed; + } + + li { + padding: 2px 0; + } + 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; + + &:hover { + color: lighten(#757575, 20%); + padding-left: 19px; + border-left: 1px solid $primary-color; + } + &.active { + font-weight: 500; + padding-left: 18px; + border-left: 2px solid $primary-color; + } + } +} diff --git a/app/dispatch/static/materialize/sass/components/_tabs.scss b/app/dispatch/static/materialize/sass/components/_tabs.scss new file mode 100644 index 0000000..5a1a459 --- /dev/null +++ b/app/dispatch/static/materialize/sass/components/_tabs.scss @@ -0,0 +1,93 @@ +.tabs { + &.tabs-transparent { + background-color: transparent; + + .tab a, + .tab.disabled a, + .tab.disabled a:hover { + color: rgba(255,255,255,0.7); + } + + .tab a:hover, + .tab a.active { + color: #fff; + } + + .indicator { + background-color: #fff; + } + } + + &.tabs-fixed-width { + display: flex; + + .tab { + flex-grow: 1; + } + } + + position: relative; + overflow-x: auto; + overflow-y: hidden; + height: 48px; + width: 100%; + background-color: $tabs-bg-color; + margin: 0 auto; + white-space: nowrap; + + .tab { + display: inline-block; + text-align: center; + line-height: 48px; + height: 48px; + padding: 0; + margin: 0; + text-transform: uppercase; + + a { + &:hover, + &.active { + background-color: transparent; + color: $tabs-text-color; + } + + color: rgba($tabs-text-color, .7); + display: block; + width: 100%; + height: 100%; + padding: 0 24px; + font-size: 14px; + text-overflow: ellipsis; + overflow: hidden; + transition: color .28s ease; + } + + &.disabled a, + &.disabled a:hover { + color: rgba($tabs-text-color, .7); + cursor: default; + } + } + .indicator { + position: absolute; + bottom: 0; + height: 2px; + background-color: $tabs-underline-color; + will-change: left, right; + } +} + +// Fixed sideNav hide on smaller +@media #{$medium-and-down} { + .tabs { + display: flex; + + .tab { + flex-grow: 1; + + a { + padding: 0 12px; + } + } + } +} diff --git a/app/dispatch/static/materialize/sass/components/_tapTarget.scss b/app/dispatch/static/materialize/sass/components/_tapTarget.scss new file mode 100644 index 0000000..49aecd5 --- /dev/null +++ b/app/dispatch/static/materialize/sass/components/_tapTarget.scss @@ -0,0 +1,103 @@ +.tap-target-wrapper { + width: 800px; + height: 800px; + position: fixed; + z-index: 1000; + visibility: hidden; + transition: visibility 0s .3s; +} + +.tap-target-wrapper.open { + visibility: visible; + transition: visibility 0s; + + .tap-target { + transform: scale(1); + opacity: .95; + transition: + transform .3s cubic-bezier(.42,0,.58,1), + opacity .3s cubic-bezier(.42,0,.58,1); + } + + .tap-target-wave::before { + transform: scale(1); + } + .tap-target-wave::after { + visibility: visible; + animation: pulse-animation 1s cubic-bezier(0.24, 0, 0.38, 1) infinite; + transition: + opacity .3s, + transform .3s, + visibility 0s 1s; + } +} + +.tap-target { + position: absolute; + font-size: 1rem; + border-radius: 50%; + background-color: $primary-color; + box-shadow: 0 20px 20px 0 rgba(0,0,0,0.14), 0 10px 50px 0 rgba(0,0,0,0.12), 0 30px 10px -20px rgba(0,0,0,0.2); + width: 100%; + height: 100%; + opacity: 0; + transform: scale(0); + transition: + transform .3s cubic-bezier(.42,0,.58,1), + opacity .3s cubic-bezier(.42,0,.58,1); +} + +.tap-target-content { + position: relative; + display: table-cell; +} + +.tap-target-wave { + &::before, + &::after { + content: ''; + display: block; + position: absolute; + width: 100%; + height: 100%; + border-radius: 50%; + background-color: #ffffff; + } + &::before { + transform: scale(0); + transition: transform .3s; + } + &::after { + visibility: hidden; + transition: + opacity .3s, + transform .3s, + visibility 0s; + z-index: -1; + } + + position: absolute; + border-radius: 50%; + z-index: 10001; +} + +.tap-target-origin { + &:not(.btn), + &:not(.btn):hover { + background: none; + } + + top: 50%; + left: 50%; + transform: translate(-50%,-50%); + + z-index: 10002; + position: absolute !important; +} + +@media only screen and (max-width: 600px) { + .tap-target, .tap-target-wrapper { + width: 600px; + height: 600px; + } +} diff --git a/app/dispatch/static/materialize/sass/components/_toast.scss b/app/dispatch/static/materialize/sass/components/_toast.scss new file mode 100644 index 0000000..3772d44 --- /dev/null +++ b/app/dispatch/static/materialize/sass/components/_toast.scss @@ -0,0 +1,59 @@ +#toast-container { + display:block; + position: fixed; + z-index: 10000; + + @media #{$small-and-down} { + min-width: 100%; + bottom: 0%; + } + @media #{$medium-only} { + left: 5%; + bottom: 7%; + max-width: 90%; + } + @media #{$large-and-up} { + top: 10%; + right: 7%; + max-width: 86%; + } +} + +.toast { + @extend .z-depth-1; + border-radius: 2px; + top: 35px; + width: auto; + margin-top: 10px; + position: relative; + max-width:100%; + height: auto; + min-height: $toast-height; + line-height: 1.5em; + word-break: break-all; + background-color: $toast-color; + padding: 10px 25px; + font-size: 1.1rem; + font-weight: 300; + color: $toast-text-color; + display: flex; + align-items: center; + justify-content: space-between; + cursor: default; + + .toast-action { + color: $toast-action-color; + font-weight: 500; + margin-right: -25px; + margin-left: 3rem; + } + + &.rounded{ + border-radius: 24px; + } + + @media #{$small-and-down} { + width: 100%; + border-radius: 0; + } +} diff --git a/app/dispatch/static/materialize/sass/components/_tooltip.scss b/app/dispatch/static/materialize/sass/components/_tooltip.scss new file mode 100644 index 0000000..21ea6a7 --- /dev/null +++ b/app/dispatch/static/materialize/sass/components/_tooltip.scss @@ -0,0 +1,31 @@ +.material-tooltip { + padding: 10px 8px; + font-size: 1rem; + z-index: 2000; + background-color: transparent; + border-radius: 2px; + color: #fff; + min-height: 36px; + line-height: 120%; + opacity: 0; + position: absolute; + text-align: center; + max-width: calc(100% - 4px); + overflow: hidden; + left: 0; + top: 0; + pointer-events: none; + visibility: hidden; +} + +.backdrop { + position: absolute; + opacity: 0; + height: 7px; + width: 14px; + border-radius: 0 0 50% 50%; + background-color: #323232; + z-index: -1; + transform-origin: 50% 0%; + visibility: hidden; +} diff --git a/app/dispatch/static/materialize/sass/components/_transitions.scss b/app/dispatch/static/materialize/sass/components/_transitions.scss new file mode 100644 index 0000000..cb9f60d --- /dev/null +++ b/app/dispatch/static/materialize/sass/components/_transitions.scss @@ -0,0 +1,13 @@ +// Scale transition +.scale-transition { + &.scale-out { + transform: scale(0); + transition: transform .2s !important; + } + + &.scale-in { + transform: scale(1); + } + + transition: transform .3s cubic-bezier(0.53, 0.01, 0.36, 1.63) !important; +} \ No newline at end of file diff --git a/app/dispatch/static/materialize/sass/components/_typography.scss b/app/dispatch/static/materialize/sass/components/_typography.scss new file mode 100644 index 0000000..a773afd --- /dev/null +++ b/app/dispatch/static/materialize/sass/components/_typography.scss @@ -0,0 +1,61 @@ + +a { + text-decoration: none; +} + +html{ + line-height: 1.5; + + @media only screen and (min-width: 0) { + font-size: 14px; + } + + @media only screen and (min-width: $medium-screen) { + font-size: 14.5px; + } + + @media only screen and (min-width: $large-screen) { + font-size: 15px; + } + + font-family: "Roboto", sans-serif; + font-weight: normal; + color: $off-black; +} +h1, h2, h3, h4, h5, h6 { + font-weight: 400; + line-height: 1.1; +} + +// Header Styles +h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { font-weight: inherit; } +h1 { font-size: $h1-fontsize; line-height: 110%; margin: ($h1-fontsize / 2) 0 ($h1-fontsize / 2.5) 0;} +h2 { font-size: $h2-fontsize; line-height: 110%; margin: ($h2-fontsize / 2) 0 ($h2-fontsize / 2.5) 0;} +h3 { font-size: $h3-fontsize; line-height: 110%; margin: ($h3-fontsize / 2) 0 ($h3-fontsize / 2.5) 0;} +h4 { font-size: $h4-fontsize; line-height: 110%; margin: ($h4-fontsize / 2) 0 ($h4-fontsize / 2.5) 0;} +h5 { font-size: $h5-fontsize; line-height: 110%; margin: ($h5-fontsize / 2) 0 ($h5-fontsize / 2.5) 0;} +h6 { font-size: $h6-fontsize; line-height: 110%; margin: ($h6-fontsize / 2) 0 ($h6-fontsize / 2.5) 0;} + +// Text Styles +em { font-style: italic; } +strong { font-weight: 500; } +small { font-size: 75%; } +.light { font-weight: 300; } +.thin { font-weight: 200; } + + +.flow-text{ + font-weight: 300; + $i: 0; + @while $i <= $intervals { + @media only screen and (min-width : 360 + ($i * $interval-size)) { + font-size: 1.2rem * (1 + (.02 * $i)); + } + $i: $i + 1; + } + + // Handle below 360px screen + @media only screen and (max-width: 360px) { + font-size: 1.2rem; + } +} \ No newline at end of file diff --git a/app/dispatch/static/materialize/sass/components/_variables.scss b/app/dispatch/static/materialize/sass/components/_variables.scss new file mode 100644 index 0000000..297191a --- /dev/null +++ b/app/dispatch/static/materialize/sass/components/_variables.scss @@ -0,0 +1,353 @@ +// ========================================================================== +// Materialize variables +// ========================================================================== +// +// Table of Contents: +// +// 1. Colors +// 2. Badges +// 3. Buttons +// 4. Cards +// 5. Carousel +// 6. Collapsible +// 7. Chips +// 8. Date + Time Picker +// 9. Dropdown +// 10. Fonts +// 11. Forms +// 12. Global +// 13. Grid +// 14. Navigation Bar +// 15. Side Navigation +// 16. Photo Slider +// 17. Spinners | Loaders +// 18. Tabs +// 19. Tables +// 20. Toasts +// 21. Typography +// 22. Footer +// 23. Flow Text +// 24. Collections +// 25. Progress Bar + + + +// 1. Colors +// ========================================================================== + +$primary-color: color("materialize-red", "lighten-2") !default; +$primary-color-light: lighten($primary-color, 15%) !default; +$primary-color-dark: darken($primary-color, 15%) !default; + +$secondary-color: color("teal", "lighten-1") !default; +$success-color: color("green", "base") !default; +$error-color: color("red", "base") !default; +$link-color: color("light-blue", "darken-1") !default; + + +// 2. Badges +// ========================================================================== + +$badge-bg-color: $secondary-color !default; +$badge-height: 22px !default; + + +// 3. Buttons +// ========================================================================== + +// Shared styles +$button-border: none !default; +$button-background-focus: lighten($secondary-color, 4%) !default; +$button-font-size: 1rem !default; +$button-icon-font-size: 1.3rem !default; +$button-height: 36px !default; +$button-padding: 0 2rem !default; +$button-radius: 2px !default; + +// Disabled styles +$button-disabled-background: #DFDFDF !default; +$button-disabled-color: #9F9F9F !default; + +// Raised buttons +$button-raised-background: $secondary-color !default; +$button-raised-background-hover: lighten($button-raised-background, 5%) !default; +$button-raised-color: #fff !default; + +// Large buttons +$button-large-icon-font-size: 1.6rem !default; +$button-large-height: $button-height * 1.5 !default; + +// Flat buttons +$button-flat-color: #343434 !default; +$button-flat-disabled-color: lighten(#999, 10%) !default; + +// Floating buttons +$button-floating-background: $secondary-color !default; +$button-floating-background-hover: $button-floating-background !default; +$button-floating-color: #fff !default; +$button-floating-size: 40px !default; +$button-floating-large-size: 56px !default; +$button-floating-radius: 50% !default; + + +// 4. Cards +// ========================================================================== + +$card-padding: 24px !default; +$card-bg-color: #fff !default; +$card-link-color: color("orange", "accent-2") !default; +$card-link-color-light: lighten($card-link-color, 20%) !default; + + +// 5. Carousel +// ========================================================================== + +$carousel-height: 400px !default; +$carousel-item-height: $carousel-height / 2 !default; +$carousel-item-width: $carousel-item-height !default; + + +// 6. Collapsible +// ========================================================================== + +$collapsible-height: 3rem !default; +$collapsible-line-height: $collapsible-height !default; +$collapsible-header-color: #fff !default; +$collapsible-border-color: #ddd !default; + + +// 7. Chips +// ========================================================================== + +$chip-bg-color: #e4e4e4 !default; +$chip-border-color: #9e9e9e !default; +$chip-selected-color: #26a69a !default; +$chip-margin: 5px !default; + + +// 8. Date + Time Picker +// ========================================================================== + +$datepicker-display-font-size: 2.8rem; +$datepicker-weekday-color: rgba(0, 0, 0, .87) !default; +$datepicker-weekday-bg: darken($secondary-color, 7%) !default; +$datepicker-date-bg: $secondary-color !default; +$datepicker-year: rgba(255, 255, 255, .7) !default; +$datepicker-focus: rgba(0,0,0, .05) !default; +$datepicker-selected: $secondary-color !default; +$datepicker-selected-outfocus: desaturate(lighten($secondary-color, 35%), 15%) !default; + +$timepicker-clock-color: rgba(0, 0, 0, .87) !default; +$timepicker-clock-plate-bg: #eee; + + +// 9. Dropdown +// ========================================================================== + +$dropdown-bg-color: #fff !default; +$dropdown-hover-bg-color: #eee !default; +$dropdown-color: $secondary-color !default; +$dropdown-item-height: 50px !default; + + +// 10. Fonts +// ========================================================================== + +$roboto-font-path: "../fonts/roboto/" !default; + + +// 11. Forms +// ========================================================================== + +// Text Inputs + Textarea +$input-height: 3rem !default; +$input-border-color: color("grey", "base") !default; +$input-border: 1px solid $input-border-color !default; +$input-background: #fff !default; +$input-error-color: $error-color !default; +$input-success-color: $success-color !default; +$input-focus-color: $secondary-color !default; +$input-font-size: 1rem !default; +$input-margin-bottom: 20px; +$input-margin: 0 0 $input-margin-bottom 0 !default; +$input-padding: 0 !default; +$input-transition: all .3s !default; +$label-font-size: .8rem !default; +$input-disabled-color: rgba(0,0,0, .42) !default; +$input-disabled-solid-color: #949494 !default; +$input-disabled-border: 1px dotted $input-disabled-color !default; +$input-invalid-border: 1px solid $input-error-color !default; +$placeholder-text-color: lighten($input-border-color, 20%) !default; + +// Radio Buttons +$radio-fill-color: $secondary-color !default; +$radio-empty-color: #5a5a5a !default; +$radio-border: 2px solid $radio-fill-color !default; + +// Range +$range-height: 14px !default; +$range-width: 14px !default; +$track-height: 3px !default; + +// Select +$select-border: 1px solid #f2f2f2 !default; +$select-background: rgba(255, 255, 255, 0.90) !default; +$select-focus: 1px solid lighten($secondary-color, 47%) !default; +$select-option-hover: rgba(0,0,0,.06) !default; +$select-option-focus: rgba(0,0,0,.03) !default; +$select-padding: 5px !default; +$select-radius: 2px !default; +$select-disabled-color: rgba(0,0,0,.3) !default; + +// Switches +$switch-bg-color: $secondary-color !default; +$switch-checked-lever-bg: desaturate(lighten($switch-bg-color, 25%), 25%) !default; +$switch-unchecked-bg: #F1F1F1 !default; +$switch-unchecked-lever-bg: rgba(0,0,0,.38) !default; +$switch-radius: 15px !default; + + +// 12. Global +// ========================================================================== + +// Media Query Ranges +$small-screen-up: 601px !default; +$medium-screen-up: 993px !default; +$large-screen-up: 1201px !default; +$small-screen: 600px !default; +$medium-screen: 992px !default; +$large-screen: 1200px !default; + +/* +$medium-and-up: "only screen and (min-width : #{$small-screen-up})" !default; +$large-and-up: "only screen and (min-width : #{$medium-screen-up})" !default; +$extra-large-and-up: "only screen and (min-width : #{$large-screen-up})" !default; +$small-and-down: "only screen and (max-width : #{$small-screen})" !default; +$medium-and-down: "only screen and (max-width : #{$medium-screen})" !default; +$medium-only: "only screen and (min-width : #{$small-screen-up}) and (max-width : #{$medium-screen})" !default; +*/ + +$medium-and-up: "(min-width : #{$small-screen-up})" !default; +$large-and-up: "(min-width : #{$medium-screen-up})" !default; +$extra-large-and-up: "(min-width : #{$large-screen-up})" !default; +$small-and-down: "(max-width : #{$small-screen})" !default; +$medium-and-down: "(max-width : #{$medium-screen})" !default; +$medium-only: "(min-width : #{$small-screen-up}) and (max-width : #{$medium-screen})" !default; + + + +// 13. Grid +// ========================================================================== + +$num-cols: 12 !default; +$gutter-width: 1.5rem !default; +$element-top-margin: $gutter-width/3 !default; +$element-bottom-margin: ($gutter-width*2)/3 !default; + + +// 14. Navigation Bar +// ========================================================================== + +$navbar-height: 64px !default; +$navbar-line-height: $navbar-height !default; +$navbar-height-mobile: 56px !default; +$navbar-line-height-mobile: $navbar-height-mobile !default; +$navbar-font-size: 1rem !default; +$navbar-font-color: #fff !default; +$navbar-brand-font-size: 2.1rem !default; + +// 15. Side Navigation +// ========================================================================== + +$sidenav-font-size: 14px !default; +$sidenav-font-color: rgba(0,0,0,.87) !default; +$sidenav-bg-color: #fff !default; +$sidenav-padding: 16px !default; +$sidenav-item-height: 48px !default; +$sidenav-line-height: $sidenav-item-height !default; + + +// 16. Photo Slider +// ========================================================================== + +$slider-bg-color: color('grey', 'base') !default; +$slider-bg-color-light: color('grey', 'lighten-2') !default; +$slider-indicator-color: color('green', 'base') !default; + + +// 17. Spinners | Loaders +// ========================================================================== + +$spinner-default-color: $secondary-color !default; + + +// 18. Tabs +// ========================================================================== + +$tabs-underline-color: $primary-color-light !default; +$tabs-text-color: $primary-color !default; +$tabs-bg-color: #fff !default; + + +// 19. Tables +// ========================================================================== + +$table-border-color: #d0d0d0 !default; +$table-striped-color: #f2f2f2 !default; + + +// 20. Toasts +// ========================================================================== + +$toast-height: 48px !default; +$toast-color: #323232 !default; +$toast-text-color: #fff !default; +$toast-action-color: #eeff41; + + +// 21. Typography +// ========================================================================== + +$off-black: rgba(0, 0, 0, 0.87) !default; +// Header Styles +$h1-fontsize: 4.2rem !default; +$h2-fontsize: 3.56rem !default; +$h3-fontsize: 2.92rem !default; +$h4-fontsize: 2.28rem !default; +$h5-fontsize: 1.64rem !default; +$h6-fontsize: 1rem !default; + + +// 22. Footer +// ========================================================================== + +$footer-font-color: #fff !default; +$footer-bg-color: $primary-color !default; +$footer-copyright-font-color: rgba(255,255,255,.8) !default; +$footer-copyright-bg-color: rgba(51,51,51,.08) !default; + + +// 23. Flow Text +// ========================================================================== + +$range : $large-screen - $small-screen !default; +$intervals: 20 !default; +$interval-size: $range / $intervals !default; + + +// 24. Collections +// ========================================================================== + +$collection-border-color: #e0e0e0 !default; +$collection-bg-color: #fff !default; +$collection-active-bg-color: $secondary-color !default; +$collection-active-color: lighten($secondary-color, 55%) !default; +$collection-hover-bg-color: #ddd !default; +$collection-link-color: $secondary-color !default; +$collection-line-height: 1.5rem !default; + + +// 25. Progress Bar +// ========================================================================== + +$progress-bar-color: $secondary-color !default; diff --git a/app/dispatch/static/materialize/sass/components/_waves.scss b/app/dispatch/static/materialize/sass/components/_waves.scss new file mode 100644 index 0000000..b36c718 --- /dev/null +++ b/app/dispatch/static/materialize/sass/components/_waves.scss @@ -0,0 +1,114 @@ + +/*! + * 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; + user-select: none; + -webkit-tap-highlight-color: transparent; + vertical-align: middle; + z-index: 1; + transition: .3s ease-out; + + .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); + transition: all 0.7s ease-out; + transition-property: transform, opacity; + transform: scale(0); + pointer-events: none; + } + + // Waves Colors + &.waves-light .waves-ripple { + background-color: rgba(255, 255, 255, 0.45); + } + &.waves-red .waves-ripple { + background-color: rgba(244, 67, 54, .70); + } + &.waves-yellow .waves-ripple { + background-color: rgba(255, 235, 59, .70); + } + &.waves-orange .waves-ripple { + background-color: rgba(255, 152, 0, .70); + } + &.waves-purple .waves-ripple { + background-color: rgba(156, 39, 176, 0.70); + } + &.waves-green .waves-ripple { + background-color: rgba(76, 175, 80, 0.70); + } + &.waves-teal .waves-ripple { + background-color: rgba(0, 150, 136, 0.70); + } + + // Style input button bug. + input[type="button"], input[type="reset"], input[type="submit"] { + border: 0; + font-style: normal; + font-size: inherit; + text-transform: inherit; + background: none; + } + + img { + position: relative; + z-index: -1; + } +} + +.waves-notransition { + transition: none #{"!important"}; +} + +.waves-circle { + 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-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 */ +.waves-effect .waves-ripple { + z-index: -1; +} \ No newline at end of file diff --git a/app/dispatch/static/materialize/sass/components/date_picker/_default.date.scss b/app/dispatch/static/materialize/sass/components/date_picker/_default.date.scss new file mode 100644 index 0000000..39ca1f2 --- /dev/null +++ b/app/dispatch/static/materialize/sass/components/date_picker/_default.date.scss @@ -0,0 +1,456 @@ +/* ========================================================================== + $BASE-DATE-PICKER + ========================================================================== */ +/** + * The picker box. + */ +.picker__box { + padding: 0; + border-radius: 2px; + overflow: hidden; +} +/** + * 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 { +// font-weight: 500; + 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; +} + +// Modified +.picker__select--month.browser-default { + display: inline; + background-color: #FFFFFF; + width: 40%; +} +.picker__select--year.browser-default { + display: inline; + background-color: #FFFFFF; + width: 26%; +} +.picker__select--month:focus, +.picker__select--year:focus { + border-color: $datepicker-focus; +} +/** + * 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; +} +//@media (min-width: 24.5em) { +// .picker__nav--prev, +// .picker__nav--next { +// top: -0.33em; +// } +//} +.picker__nav--prev { + left: -1em; + padding-right: 1.25em; +} +//@media (min-width: 24.5em) { +// .picker__nav--prev { +// padding-right: 1.5em; +// } +//} +.picker__nav--next { + right: -1em; + padding-left: 1.25em; +} +//@media (min-width: 24.5em) { +// .picker__nav--next { +// padding-left: 1.5em; +// } +//} + +.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--today:before { +// content: " "; +// position: absolute; +// top: 2px; +// right: 2px; +// width: 0; +// height: 0; +// border-top: 0.5em solid #0059bc; +// border-left: .5em 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; +// background: #b1dcfb; + font-weight: 500; +} + + +.picker__day--highlighted { +// border-color: #0089ec; +} +.picker__day--highlighted:hover, +.picker--focused .picker__day--highlighted { + cursor: pointer; +// color: #000000; +// background: #b1dcfb; +// font-weight: 500; +} +.picker__day--selected, +.picker__day--selected:hover, +.picker--focused .picker__day--selected { + + +// Circle background + border-radius: 50%; + 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: right; +} +.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: $datepicker-focus; + 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: left; + background-color: $datepicker-date-bg; + color: #fff; + padding: 18px; + font-weight: 300; +} + +@media only screen and (min-width: 601px) { + .picker__date-display { + flex:1; + } + .picker__weekday-display { + display:block; + } + .picker__container__wrapper { + flex:2 + } +} + +.picker__nav--prev:hover, +.picker__nav--next:hover { + cursor: pointer; + color: #000000; + background: $datepicker-selected-outfocus; +} + +.picker__weekday-display { + font-weight: 500; + font-size: $datepicker-display-font-size; + margin-right: 5px; + margin-top: 4px; +} + +.picker__month-display { + //text-transform: uppercase; + font-size: $datepicker-display-font-size; + font-weight: 500; +} +.picker__day-display { + font-size: $datepicker-display-font-size; + font-weight: 500; + margin-right: 5px; +} +.picker__year-display { + font-size: 1.5rem; + font-weight: 500; + color: $datepicker-year; +} + +/*.picker__box { + padding: 0; +}*/ +.picker__calendar-container { + padding: 0 1rem; + + thead { + border: none; + } +} + +// Calendar +.picker__table { + margin-top: 0; + margin-bottom: .5em; +} + +.picker__day--infocus { + color: $datepicker-weekday-color; + letter-spacing: -.3px; + padding: 0.75rem 0; + font-weight: 400; + border: 1px solid transparent; +} +@media only screen and (min-width: 601px) { + .picker__day--infocus { + padding: 1.1rem 0; + } +} + + +//Today style +.picker__day.picker__day--today { + color: $datepicker-selected; +} + +.picker__day.picker__day--today.picker__day--selected { + color: #fff; +} + +// Table Header +.picker__weekday { + font-size: .9rem; +} + + +.picker__day--selected, +.picker__day--selected:hover, +.picker--focused .picker__day--selected { + // Circle background + border-radius: 50%; + transform: scale(.9); + background-color: $datepicker-selected; + &.picker__day--outfocus { + background-color: $datepicker-selected-outfocus; + } + color: #ffffff; +} + +.picker__footer { + text-align: right; + padding: 5px 10px; +} + +// Materialize modified +.picker__close, .picker__today, .picker__clear { + font-size: 1.1rem; + padding: 0 1rem; + color: $datepicker-selected; +} +.picker__clear { + color:#f44336; + float:left; +} + +//month nav buttons +.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: $datepicker-selected-outfocus; +} diff --git a/app/dispatch/static/materialize/sass/components/date_picker/_default.scss b/app/dispatch/static/materialize/sass/components/date_picker/_default.scss new file mode 100644 index 0000000..b091e55 --- /dev/null +++ b/app/dispatch/static/materialize/sass/components/date_picker/_default.scss @@ -0,0 +1,212 @@ +/* ========================================================================== + $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; + outline: 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; + +// picker width + 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: 26.5em) { +// .picker__box { +//// font-size: 1.25em; +// } +//} +@media (min-height: 28.875em) { + .picker__box { + display: block; + +// picker header font-size +// font-size: 1rem; + + 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); + } +} +//@media (min-height: 40.125em) { +// .picker__box { +// font-size: 1.1rem; +// border-bottom-width: 1px; +// -webkit-border-radius: 5px; +// -moz-border-radius: 5px; +// border-radius: 5px; +// } +//} +/** + * 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: auto; + } +} +/** + * For `large` screens, transform into an inline picker. + */ + +/* ========================================================================== + CUSTOM MATERIALIZE STYLES + ========================================================================== */ + +.picker__input.picker__input--active { + border-color: color("blue", "lighten-5"); +} + +.picker__frame { + margin: 0 auto; + max-width: 325px; +} + +@media (min-height: 38.875em) { + .picker--opened .picker__frame { + top: 10%; + bottom: auto; + } +} + +@media only screen and (min-width: 601px) { + .picker__box { + display:flex; + } + .picker__frame { + width: 80%; + max-width:600px; + } +} diff --git a/app/dispatch/static/materialize/sass/components/date_picker/_default.time.scss b/app/dispatch/static/materialize/sass/components/date_picker/_default.time.scss new file mode 100644 index 0000000..ae0b778 --- /dev/null +++ b/app/dispatch/static/materialize/sass/components/date_picker/_default.time.scss @@ -0,0 +1,267 @@ +/* ========================================================================== + $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 #ddd; + border-top: 1px solid #ddd; + margin-bottom: -1px; + position: relative; + background: #fff; + padding: .75em 1.25em; +} +@media (min-height: 46.75em) { + .picker__list-item { + padding: .5em 1em; + } +} +/* Hovered time */ +.picker__list-item:hover { + cursor: pointer; + color: #000; + 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: #000; + 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: #fff; + 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: #ddd; + cursor: default; + border-color: #ddd; + 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: $timepicker-clock-color; +} +.picker--time .picker__button--clear:hover, +.picker--time .picker__button--clear:focus { + color: #000; + background: #b1dcfb; + background: #ee2200; + border-color: #ee2200; + cursor: pointer; + color: #fff; + outline: none; +} +.picker--time .picker__button--clear:before { + top: -0.25em; + color: $timepicker-clock-color; + font-size: 1.25em; + font-weight: bold; +} +.picker--time .picker__button--clear:hover:before, +.picker--time .picker__button--clear:focus:before { + color: #fff; +} + +/* ========================================================================== + $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; + } +} + +/* ========================================================================== + $DEFAULT-TIME-PICKER + ========================================================================== */ +.clockpicker-display { + font-size: 4rem; + font-weight: bold; + text-align: center; + color: rgba(255, 255, 255, 0.6); + font-weight: 400; + clear: both; + position: relative; +} + +.clockpicker-span-am-pm { + font-size: 1.3rem; + position: absolute; + right: 1rem; + bottom: 0.3rem; + line-height: 2rem; + font-weight: 500; +} +@media only screen and (min-width: 601px) { + .clockpicker-display { + top: 32%; + } + .clockpicker-span-am-pm { + position: relative; + right: auto; + bottom: auto; + text-align: center; + margin-top: 1.2rem; + } +} + + +.text-primary{ + color: rgba(255, 255, 255, 1) +} +.clockpicker-span-hours { + margin-right: 3px; +} +.clockpicker-span-minutes { + margin-left: 3px; +} + +.clockpicker-span-hours, +.clockpicker-span-minutes, +.clockpicker-span-am-pm div { + cursor: pointer; +} +.clockpicker-moving { + cursor: move; +} +.clockpicker-plate { + background-color: $timepicker-clock-plate-bg; + border-radius: 50%; + width: 270px; + height: 270px; + overflow: visible; + position: relative; + margin: auto; + margin-top: 25px; + margin-bottom: 5px; + user-select: none; +} +.clockpicker-canvas, +.clockpicker-dial { + width: 270px; + height: 270px; + position: absolute; + left: -1px; + top: -1px; +} +.clockpicker-minutes { + visibility: hidden; +} +.clockpicker-tick { + border-radius: 50%; + color: $timepicker-clock-color; + line-height: 40px; + text-align: center; + width: 40px; + height: 40px; + position: absolute; + cursor: pointer; +} +.clockpicker-tick.active, +.clockpicker-tick:hover { + background-color: transparentize($secondary-color, .75); +} +.clockpicker-dial { + -webkit-transition: -webkit-transform 350ms, opacity 350ms; + -moz-transition: -moz-transform 350ms, opacity 350ms; + -ms-transition: -ms-transform 350ms, opacity 350ms; + -o-transition: -o-transform 350ms, opacity 350ms; + transition: transform 350ms, opacity 350ms; +} +.clockpicker-dial-out { + opacity: 0; +} +.clockpicker-hours.clockpicker-dial-out { + -webkit-transform: scale(1.2, 1.2); + -moz-transform: scale(1.2, 1.2); + -ms-transform: scale(1.2, 1.2); + -o-transform: scale(1.2, 1.2); + transform: scale(1.2, 1.2); +} +.clockpicker-minutes.clockpicker-dial-out { + -webkit-transform: scale(.8, .8); + -moz-transform: scale(.8, .8); + -ms-transform: scale(.8, .8); + -o-transform: scale(.8, .8); + transform: scale(.8, .8); +} +.clockpicker-canvas { + -webkit-transition: opacity 175ms; + -moz-transition: opacity 175ms; + -ms-transition: opacity 175ms; + -o-transition: opacity 175ms; + transition: opacity 175ms; +} +.clockpicker-canvas-out { + opacity: 0.25; +} +.clockpicker-canvas-bearing { + stroke: none; + fill: $secondary-color; +} +.clockpicker-canvas-bg { + stroke: none; + fill: $secondary-color; +} +.clockpicker-canvas-bg-trans { + fill: $secondary-color; +} +.clockpicker-canvas line { + stroke: $secondary-color; + stroke-width: 4; + stroke-linecap: round; + /*shape-rendering: crispEdges;*/ +} diff --git a/app/dispatch/static/materialize/sass/components/forms/_checkboxes.scss b/app/dispatch/static/materialize/sass/components/forms/_checkboxes.scss new file mode 100644 index 0000000..60334b2 --- /dev/null +++ b/app/dispatch/static/materialize/sass/components/forms/_checkboxes.scss @@ -0,0 +1,210 @@ +/* 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; + opacity: 0; + pointer-events: none; +} + +// Checkbox Styles +[type="checkbox"] { + // Text Label Style + + label { + position: relative; + padding-left: 35px; + cursor: pointer; + display: inline-block; + height: 25px; + line-height: 25px; + font-size: 1rem; + user-select: none; + } + + /* checkbox aspect */ + + label:before, + &:not(.filled-in) + label:after { + content: ''; + position: absolute; + top: 0; + left: 0; + width: 18px; + height: 18px; + z-index: 0; + border: 2px solid $radio-empty-color; + border-radius: 1px; + margin-top: 2px; + transition: .2s; + } + + &:not(.filled-in) + label:after { + border: 0; + transform: scale(0); + } + + &:not(:checked):disabled + label:before { + border: none; + background-color: $input-disabled-color; + } + + // Focused styles + &.tabbed:focus + label:after { + transform: scale(1); + border: 0; + border-radius: 50%; + box-shadow: 0 0 0 10px rgba(0,0,0,.1); + background-color: rgba(0,0,0,.1); + } +} + +[type="checkbox"]:checked { + + label:before { + top: -4px; + left: -5px; + width: 12px; + height: 22px; + border-top: 2px solid transparent; + border-left: 2px solid transparent; + border-right: $radio-border; + border-bottom: $radio-border; + transform: rotate(40deg); + backface-visibility: hidden; + transform-origin: 100% 100%; + } + + &:disabled + label:before { + border-right: 2px solid $input-disabled-color; + border-bottom: 2px solid $input-disabled-color; + } +} + +/* Indeterminate checkbox */ +[type="checkbox"]:indeterminate { + +label:before { + top: -11px; + left: -12px; + width: 10px; + height: 22px; + border-top: none; + border-left: none; + border-right: $radio-border; + border-bottom: none; + transform: rotate(90deg); + backface-visibility: hidden; + transform-origin: 100% 100%; + } + + // Disabled indeterminate + &:disabled + label:before { + border-right: 2px solid $input-disabled-color; + background-color: transparent; + } +} + +// Filled in Style +[type="checkbox"].filled-in { + // General + + label:after { + border-radius: 2px; + } + + + label:before, + + label:after { + content: ''; + left: 0; + position: absolute; + /* .1s delay is for check animation */ + transition: border .25s, background-color .25s, width .20s .1s, height .20s .1s, top .20s .1s, left .20s .1s; + z-index: 1; + } + + // Unchecked style + &:not(:checked) + label:before { + width: 0; + height: 0; + border: 3px solid transparent; + left: 6px; + top: 10px; + transform: rotateZ(37deg); + transform-origin: 100% 100%; + } + + &:not(:checked) + label:after { + height: 20px; + width: 20px; + background-color: transparent; + border: 2px solid $radio-empty-color; + top: 0px; + z-index: 0; + } + + // Checked style + &: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 $input-background; + border-bottom: 2px solid $input-background; + transform: rotateZ(37deg); + transform-origin: 100% 100%; + } + + + label:after { + top: 0; + width: 20px; + height: 20px; + border: 2px solid $secondary-color; + background-color: $secondary-color; + z-index: 0; + } + } + + // Focused styles + &.tabbed:focus + label:after { + border-radius: 2px; + border-color: $radio-empty-color; + background-color: rgba(0,0,0,.1); + } + + &.tabbed:checked:focus + label:after { + border-radius: 2px; + background-color: $secondary-color; + border-color: $secondary-color; + } + + // Disabled style + &:disabled:not(:checked) + label:before { + background-color: transparent; + border: 2px solid transparent; + } + + &:disabled:not(:checked) + label:after { + border-color: transparent; + background-color: $input-disabled-solid-color; + } + + &:disabled:checked + label:before { + background-color: transparent; + } + + &:disabled:checked + label:after { + background-color: $input-disabled-solid-color; + border-color: $input-disabled-solid-color; + } +} diff --git a/app/dispatch/static/materialize/sass/components/forms/_file-input.scss b/app/dispatch/static/materialize/sass/components/forms/_file-input.scss new file mode 100644 index 0000000..e0f7ef7 --- /dev/null +++ b/app/dispatch/static/materialize/sass/components/forms/_file-input.scss @@ -0,0 +1,44 @@ +/* File Input + ========================================================================== */ + +.file-field { + position: relative; + + .file-path-wrapper { + overflow: hidden; + padding-left: 10px; + } + + input.file-path { width: 100%; } + + .btn { + float: left; + height: $input-height; + line-height: $input-height; + } + + span { + cursor: pointer; + } + + input[type=file] { + + // Needed to override webkit button + &::-webkit-file-upload-button { + display: none; + } + + 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); + } +} diff --git a/app/dispatch/static/materialize/sass/components/forms/_forms.scss b/app/dispatch/static/materialize/sass/components/forms/_forms.scss new file mode 100644 index 0000000..4c19f4c --- /dev/null +++ b/app/dispatch/static/materialize/sass/components/forms/_forms.scss @@ -0,0 +1,22 @@ +// Remove Focus Boxes +select:focus { + outline: $select-focus; +} + +button:focus { + outline: none; + background-color: $button-background-focus; +} + +label { + font-size: $label-font-size; + color: $input-border-color; +} + +@import 'input-fields'; +@import 'radio-buttons'; +@import 'checkboxes'; +@import 'switches'; +@import 'select'; +@import 'file-input'; +@import 'range'; diff --git a/app/dispatch/static/materialize/sass/components/forms/_input-fields.scss b/app/dispatch/static/materialize/sass/components/forms/_input-fields.scss new file mode 100644 index 0000000..ffdf522 --- /dev/null +++ b/app/dispatch/static/materialize/sass/components/forms/_input-fields.scss @@ -0,0 +1,333 @@ +/* Text Inputs + Textarea + ========================================================================== */ + +/* Style Placeholders */ + +::placeholder { + color: $placeholder-text-color; +} + +/* Text inputs */ + +input:not([type]), +input[type=text]:not(.browser-default), +input[type=password]:not(.browser-default), +input[type=email]:not(.browser-default), +input[type=url]:not(.browser-default), +input[type=time]:not(.browser-default), +input[type=date]:not(.browser-default), +input[type=datetime]:not(.browser-default), +input[type=datetime-local]:not(.browser-default), +input[type=tel]:not(.browser-default), +input[type=number]:not(.browser-default), +input[type=search]:not(.browser-default), +textarea.materialize-textarea { + + // General Styles + background-color: transparent; + border: none; + border-bottom: $input-border; + border-radius: 0; + outline: none; + height: $input-height; + width: 100%; + font-size: $input-font-size; + margin: $input-margin; + padding: $input-padding; + box-shadow: none; + box-sizing: content-box; + transition: $input-transition; + + // Disabled input style + &:disabled, + &[readonly="readonly"] { + color: $input-disabled-color; + border-bottom: $input-disabled-border; + } + + // Disabled label style + &:disabled+label, + &[readonly="readonly"]+label { + color: $input-disabled-color; + } + + // Focused input style + &:focus:not([readonly]) { + border-bottom: 1px solid $input-focus-color; + box-shadow: 0 1px 0 0 $input-focus-color; + } + + // Focused label style + &:focus:not([readonly])+label { + color: $input-focus-color; + } + + // Valid Input Style + &.valid, + &:focus.valid { + @extend %valid-input-style; + } + + // Custom Success Message + &.valid + label:after, + &:focus.valid + label:after { + @extend %custom-success-message; + } + + // Invalid Input Style + &.invalid, + &:focus.invalid { + @extend %invalid-input-style; + } + + // Custom Error message + &.invalid + label:after, + &:focus.invalid + label:after { + @extend %custom-error-message; + } + + // Full width label when using validate for error messages + &.validate + label { + width: 100%; + } + + // Form Message Shared Styles + & + label:after { + @extend %input-after-style; + } + + // TODO: Remove once input fields are reworked to support validation messages better + &.invalid + label:after, + &.valid + label:after{ + display: none; + } + + &.invalid + label.active:after, + &.valid + label.active:after{ + display: block; + } +} + + +/* Validation Sass Placeholders */ +%valid-input-style { + border-bottom: 1px solid $input-success-color; + box-shadow: 0 1px 0 0 $input-success-color; +} +%invalid-input-style { + border-bottom: $input-invalid-border; + box-shadow: 0 1px 0 0 $input-error-color; +} +%custom-success-message { + content: attr(data-success); + color: $input-success-color; + opacity: 1; + transform: translateY(9px); +} +%custom-error-message { + content: attr(data-error); + color: $input-error-color; + opacity: 1; + transform: translateY(9px); +} +%input-after-style { + display: block; + content: ""; + position: absolute; + top: 100%; + left: 0; + opacity: 0; + transition: .2s opacity ease-out, .2s color ease-out; +} + + +// Styling for input field wrapper +.input-field { + // Inline styles + &.inline { + display: inline-block; + vertical-align: middle; + margin-left: 5px; + + input, + .select-dropdown { + margin-bottom: 1rem; + } + } + + // Gutter spacing + &.col { + label { + left: $gutter-width / 2; + } + + .prefix ~ label, + .prefix ~ .validate ~ label { + width: calc(100% - 3rem - #{$gutter-width}); + } + } + + position: relative; + margin-top: 1rem; + + label { + color: $input-border-color; + position: absolute; + top: 0; + left: 0; + height: 100%; + font-size: 1rem; + cursor: text; + transition: transform .2s ease-out; + transform-origin: 0% 100%; + text-align: initial; + transform: translateY(12px); + pointer-events: none; + + &:not(.label-icon).active { + transform: translateY(-14px) scale(.8); + transform-origin: 0 0; + } + } + + // Prefix Icons + .prefix { + position: absolute; + width: $input-height; + font-size: 2rem; + transition: color .2s; + + &.active { color: $input-focus-color; } + } + + .prefix ~ input, + .prefix ~ textarea, + .prefix ~ label, + .prefix ~ .validate ~ label, + .prefix ~ .autocomplete-content { + margin-left: 3rem; + width: 92%; + width: calc(100% - 3rem); + } + + .prefix ~ label { margin-left: 3rem; } + + @media #{$medium-and-down} { + .prefix ~ input { + width: 86%; + width: calc(100% - 3rem); + } + } + + @media #{$small-and-down} { + .prefix ~ input { + width: 80%; + width: calc(100% - 3rem); + } + } +} + + +/* Search Field */ + +.input-field input[type=search] { + display: block; + line-height: inherit; + + .nav-wrapper & { + height: inherit; + padding-left: 4rem; + width: calc(100% - 4rem); + border: 0; + box-shadow: none; + } + + &:focus { + background-color: $input-background; + border: 0; + box-shadow: none; + color: #444; + + & + label i, + & ~ .mdi-navigation-close, + & ~ .material-icons { + color: #444; + } + } + + & + label { + left: 1rem; + } + + & ~ .mdi-navigation-close, + & ~ .material-icons { + position: absolute; + top: 0; + right: 1rem; + color: transparent; + cursor: pointer; + font-size: 2rem; + transition: .3s color; + } +} + + +/* Textarea */ + +// Default textarea +textarea { + width: 100%; + height: $input-height; + background-color: transparent; + + &.materialize-textarea { + // Fixes validation messages for dynamic textareas + &.validate + label { + &::after { + top: calc(100% - 12px); + } + &:not(.label-icon).active { + transform: translateY(-25px); + } + height: 100%; + } + + overflow-y: hidden; /* prevents scroll bar flash */ + padding: .8rem 0 1.6rem 0; /* prevents text jump on Enter keypress */ + resize: none; + min-height: $input-height; + } +} + +// For textarea autoresize +.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 */ + + // Reduces repaints + position: absolute; + top: 0; +} + + +/* Autocomplete */ +.autocomplete-content { + margin-top: -1 * $input-margin-bottom; + margin-bottom: $input-margin-bottom; + display: block; + opacity: 1; + position: static; + + li { + .highlight { color: #444; } + + img { + height: $dropdown-item-height - 10; + width: $dropdown-item-height - 10; + margin: 5px 15px; + } + } +} diff --git a/app/dispatch/static/materialize/sass/components/forms/_radio-buttons.scss b/app/dispatch/static/materialize/sass/components/forms/_radio-buttons.scss new file mode 100644 index 0000000..ca82a96 --- /dev/null +++ b/app/dispatch/static/materialize/sass/components/forms/_radio-buttons.scss @@ -0,0 +1,115 @@ +/* Radio Buttons + ========================================================================== */ + +// Remove default Radio Buttons +[type="radio"]:not(:checked), +[type="radio"]:checked { + position: absolute; + opacity: 0; + pointer-events: none; +} + +[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; + transition: .28s ease; + user-select: none; +} + +[type="radio"] + label:before, +[type="radio"] + label:after { + content: ''; + position: absolute; + left: 0; + top: 0; + margin: 4px; + width: 16px; + height: 16px; + z-index: 0; + transition: .28s ease; +} + +/* Unchecked styles */ +[type="radio"]:not(:checked) + label:before, +[type="radio"]:not(:checked) + label:after, +[type="radio"]:checked + label:before, +[type="radio"]:checked + label:after, +[type="radio"].with-gap:checked + label:before, +[type="radio"].with-gap:checked + label:after { + border-radius: 50%; +} + +[type="radio"]:not(:checked) + label:before, +[type="radio"]:not(:checked) + label:after { + border: 2px solid $radio-empty-color; +} + +[type="radio"]:not(:checked) + label:after { + transform: scale(0); +} + +/* Checked styles */ +[type="radio"]:checked + label:before { + border: 2px solid transparent; +} + +[type="radio"]:checked + label:after, +[type="radio"].with-gap:checked + label:before, +[type="radio"].with-gap:checked + label:after { + border: $radio-border; +} + +[type="radio"]:checked + label:after, +[type="radio"].with-gap:checked + label:after { + background-color: $radio-fill-color; +} + +[type="radio"]:checked + label:after { + transform: scale(1.02); +} + +/* Radio With gap */ +[type="radio"].with-gap:checked + label:after { + transform: scale(.5); +} + +/* Focused styles */ +[type="radio"].tabbed:focus + label:before { + box-shadow: 0 0 0 10px rgba(0,0,0,.1); +} + +/* Disabled Radio With gap */ +[type="radio"].with-gap:disabled:checked + label:before { + border: 2px solid $input-disabled-color; +} + +[type="radio"].with-gap:disabled:checked + label:after { + border: none; + background-color: $input-disabled-color; +} + +/* Disabled style */ +[type="radio"]:disabled:not(:checked) + label:before, +[type="radio"]:disabled:checked + label:before { + background-color: transparent; + border-color: $input-disabled-color; +} + +[type="radio"]:disabled + label { + color: $input-disabled-color; +} + +[type="radio"]:disabled:not(:checked) + label:before { + border-color: $input-disabled-color; +} + +[type="radio"]:disabled:checked + label:after { + background-color: $input-disabled-color; + border-color: $input-disabled-solid-color; +} diff --git a/app/dispatch/static/materialize/sass/components/forms/_range.scss b/app/dispatch/static/materialize/sass/components/forms/_range.scss new file mode 100644 index 0000000..d37ff7e --- /dev/null +++ b/app/dispatch/static/materialize/sass/components/forms/_range.scss @@ -0,0 +1,160 @@ +/* Range + ========================================================================== */ + +.range-field { + position: relative; +} + +input[type=range], +input[type=range] + .thumb { + @extend .no-select; + cursor: pointer; +} + +input[type=range] { + position: relative; + background-color: transparent; + border: none; + outline: none; + width: 100%; + margin: 15px 0; + padding: 0; + + &:focus { + outline: none; + } +} + +input[type=range] + .thumb { + position: absolute; + top: 10px; + left: 0; + border: none; + height: 0; + width: 0; + border-radius: 50%; + background-color: $radio-fill-color; + margin-left: 7px; + + transform-origin: 50% 50%; + transform: rotate(-45deg); + + .value { + display: block; + width: 30px; + text-align: center; + color: $radio-fill-color; + font-size: 0; + transform: rotate(45deg); + } + + &.active { + border-radius: 50% 50% 50% 0; + + .value { + color: $input-background; + margin-left: -1px; + margin-top: 8px; + font-size: 10px; + } + } +} + +// WebKit +input[type=range] { + -webkit-appearance: none; +} + +input[type=range]::-webkit-slider-runnable-track { + height: $track-height; + background: #c2c0c2; + border: none; +} + +input[type=range]::-webkit-slider-thumb { + -webkit-appearance: none; + border: none; + height: $range-height; + width: $range-width; + border-radius: 50%; + background-color: $radio-fill-color; + transform-origin: 50% 50%; + margin: -5px 0 0 0; + transition: .3s; +} + +input[type=range]:focus::-webkit-slider-runnable-track { + background: #ccc; +} + +// FireFox +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: $track-height; + background: #ddd; + border: none; +} + +input[type=range]::-moz-range-thumb { + border: none; + height: $range-height; + width: $range-width; + border-radius: 50%; + background: $radio-fill-color; + margin-top: -5px; +} + +// hide the outline behind the border +input[type=range]:-moz-focusring { + outline: 1px solid #fff; + outline-offset: -1px; +} + +input[type=range]:focus::-moz-range-track { + background: #ccc; +} + +// IE 10+ +input[type=range]::-ms-track { + height: $track-height; + + // 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: $range-height; + width: $range-width; + border-radius: 50%; + background: $radio-fill-color; +} + +input[type=range]:focus::-ms-fill-lower { + background: #888; +} + +input[type=range]:focus::-ms-fill-upper { + background: #ccc; +} diff --git a/app/dispatch/static/materialize/sass/components/forms/_select.scss b/app/dispatch/static/materialize/sass/components/forms/_select.scss new file mode 100644 index 0000000..bc7208e --- /dev/null +++ b/app/dispatch/static/materialize/sass/components/forms/_select.scss @@ -0,0 +1,182 @@ +/* Select Field + ========================================================================== */ + +select { display: none; } +select.browser-default { display: block; } + +select { + background-color: $select-background; + width: 100%; + padding: $select-padding; + border: $select-border; + border-radius: $select-radius; + height: $input-height; +} + + +.input-field { + & > select { + display: block; + position: absolute; + width: 0; + pointer-events: none; + height: 0; + top: 0; + left: 0; + opacity: 0; + } +} + +.select-label { + position: absolute; +} + +.select-wrapper { + &.valid { + & > input.select-dropdown { + @extend %valid-input-style; + } + + & + label:after { + @extend %custom-success-message; + } + } + + &.invalid { + & > input.select-dropdown { + @extend %invalid-input-style; + } + + & + label:after { + @extend %custom-error-message; + } + } + + &.valid + label, + &.invalid + label { + width: 100%; + pointer-events: none; + } + + & + label:after { + @extend %input-after-style; + } + + position: relative; + + input.select-dropdown { + position: relative; + cursor: pointer; + background-color: transparent; + border: none; + border-bottom: $input-border; + outline: none; + height: $input-height; + line-height: $input-height; + width: 100%; + font-size: $input-font-size; + margin: $input-margin; + padding: 0; + display: block; + user-select:none; + } + + span.caret { + color: initial; + position: absolute; + right: 0; + top: 0; + bottom: 0; + height: 10px; + margin: auto 0; + font-size: 10px; + line-height: 10px; + } + + & + label { + position: absolute; + top: -26px; + font-size: $label-font-size; + } +} + +// Disabled styles +select:disabled { + color: $input-disabled-color; +} + +.select-wrapper.disabled { + span.caret, + & + label { + color: $input-disabled-color; + } +} + +.select-wrapper input.select-dropdown:disabled { + color: $input-disabled-color; + cursor: default; + user-select: none; +} + +.select-wrapper i { + color: $select-disabled-color; +} + +.select-dropdown li.disabled, +.select-dropdown li.disabled > span, +.select-dropdown li.optgroup { + color: $select-disabled-color; + background-color: transparent; +} + +.select-dropdown.dropdown-content { + li { + &.active { + background-color: transparent; + } + + &:hover { + background-color: $select-option-hover; + } + + &.selected { + background-color: $select-option-focus; + } + } +} + +// Prefix Icons +.prefix ~ .select-wrapper { + margin-left: 3rem; + width: 92%; + width: calc(100% - 3rem); +} + +.prefix ~ label { margin-left: 3rem; } + +// Icons +.select-dropdown li { + img { + height: $dropdown-item-height - 10; + width: $dropdown-item-height - 10; + margin: 5px 15px; + float: right; + } +} + +// Optgroup styles +.select-dropdown li.optgroup { + border-top: 1px solid $dropdown-hover-bg-color; + + &.selected > span { + color: rgba(0, 0, 0, .7); + } + + & > span { + color: rgba(0, 0, 0, .4); + } + + & ~ li.optgroup-option { + padding-left: 1rem; + } +} diff --git a/app/dispatch/static/materialize/sass/components/forms/_switches.scss b/app/dispatch/static/materialize/sass/components/forms/_switches.scss new file mode 100644 index 0000000..3296b12 --- /dev/null +++ b/app/dispatch/static/materialize/sass/components/forms/_switches.scss @@ -0,0 +1,89 @@ +/* Switch + ========================================================================== */ + +.switch, +.switch * { + -webkit-tap-highlight-color: transparent; + user-select: none; +} + +.switch label { + cursor: pointer; +} + +.switch label input[type=checkbox] { + opacity: 0; + width: 0; + height: 0; + + &:checked + .lever { + background-color: $switch-checked-lever-bg; + + &:before, &:after { + left: 18px; + } + + &:after { + background-color: $switch-bg-color; + } + } +} + +.switch label .lever { + content: ""; + display: inline-block; + position: relative; + width: 36px; + height: 14px; + background-color: $switch-unchecked-lever-bg; + border-radius: $switch-radius; + margin-right: 10px; + transition: background 0.3s ease; + vertical-align: middle; + margin: 0 16px; + + &:before, &:after { + content: ""; + position: absolute; + display: inline-block; + width: 20px; + height: 20px; + border-radius: 50%; + left: 0; + top: -3px; + transition: left 0.3s ease, background .3s ease, box-shadow 0.1s ease, transform .1s ease; + } + + &:before { + background-color: transparentize($switch-bg-color, .85); + } + + &:after { + background-color: $switch-unchecked-bg; + box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12); + } +} + +// Switch active style +input[type=checkbox]:checked:not(:disabled) ~ .lever:active::before, +input[type=checkbox]:checked:not(:disabled).tabbed:focus ~ .lever::before { + transform: scale(2.4); + background-color: transparentize($switch-bg-color, .85); +} + +input[type=checkbox]:not(:disabled) ~ .lever:active:before, +input[type=checkbox]:not(:disabled).tabbed:focus ~ .lever::before { + transform: scale(2.4); + background-color: rgba(0,0,0,.08); +} + +// Disabled Styles +.switch input[type=checkbox][disabled] + .lever { + cursor: default; + background-color: rgba(0,0,0,.12); +} + +.switch label input[type=checkbox][disabled] + .lever:after, +.switch label input[type=checkbox][disabled]:checked + .lever:after { + background-color: $input-disabled-solid-color; +} diff --git a/app/dispatch/static/materialize/sass/materialize.scss b/app/dispatch/static/materialize/sass/materialize.scss new file mode 100644 index 0000000..8eafa35 --- /dev/null +++ b/app/dispatch/static/materialize/sass/materialize.scss @@ -0,0 +1,42 @@ +@charset "UTF-8"; + +// Colors +@import "components/color"; + +// Variables; +@import "components/variables"; + +// Reset +@import "components/normalize"; + +// components +@import "components/global"; +@import "components/badges"; +@import "components/icons-material-design"; +@import "components/grid"; +@import "components/navbar"; +@import "components/roboto"; +@import "components/typography"; +@import "components/transitions"; +@import "components/cards"; +@import "components/toast"; +@import "components/tabs"; +@import "components/tooltip"; +@import "components/buttons"; +@import "components/dropdown"; +@import "components/waves"; +@import "components/modal"; +@import "components/collapsible"; +@import "components/chips"; +@import "components/materialbox"; +@import "components/forms/forms"; +@import "components/table_of_contents"; +@import "components/sideNav"; +@import "components/preloader"; +@import "components/slider"; +@import "components/carousel"; +@import "components/tapTarget"; +@import "components/pulse"; +@import "components/date_picker/default"; +@import "components/date_picker/default.date"; +@import "components/date_picker/default.time"; -- cgit v1.2.3