minimaterialize 1.0.0

data/_sass/_variables.scss

@@ -0,0 +1,350 @@
+// ==========================================================================
+// 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. Forms
+//  11. Global
+//  12. Grid
+//  13. Navigation Bar
+//  14. Side Navigation
+//  15. Photo Slider
+//  16. Spinners | Loaders
+//  17. Tabs
+//  18. Tables
+//  19. Toasts
+//  20. Typography
+//  21. Footer
+//  22. Flow Text
+//  23. Collections
+//  24. Progress Bar
+
+
+
+// 1. Colors
+// ==========================================================================
+// https://materializecss.com/color.html
+
+$primary-color: color("blue-grey", "darken-1");
+$primary-color-light: lighten($primary-color, 15%);
+$primary-color-dark: darken($primary-color, 15%);
+
+$secondary-color: color("teal", "lighten-1");
+$success-color: color("green", "base");
+$error-color: color("red", "base");
+$link-color: color("light-blue", "darken-1");
+
+
+// 2. Badges
+// ==========================================================================
+
+$badge-bg-color: $secondary-color;
+$badge-height: 22px;
+
+
+// 3. Buttons
+// ==========================================================================
+
+// Shared styles
+$button-border: none;
+$button-background-focus: lighten($secondary-color, 4%);
+$button-font-size: 14px;
+$button-icon-font-size: 1.3rem;
+$button-height: 36px;
+$button-padding: 0 16px;
+$button-radius: 2px;
+
+// Disabled styles
+$button-disabled-background: #DFDFDF;
+$button-disabled-color: #9F9F9F;
+
+// Raised buttons
+$button-raised-background: $secondary-color;
+$button-raised-background-hover: lighten($button-raised-background, 5%);
+$button-raised-color: #fff;
+
+// Large buttons
+$button-large-font-size: 15px;
+$button-large-icon-font-size: 1.6rem;
+$button-large-height: $button-height * 1.5;
+$button-floating-large-size: 56px;
+
+// Small buttons
+$button-small-font-size: 13px;
+$button-small-icon-font-size: 1.2rem;
+$button-small-height: $button-height * .9;
+$button-floating-small-size: $button-height * .9;
+
+// Flat buttons
+$button-flat-color: #343434;
+$button-flat-disabled-color: lighten(#999, 10%);
+
+// Floating buttons
+$button-floating-background: $secondary-color;
+$button-floating-background-hover: $button-floating-background;
+$button-floating-color: #fff;
+$button-floating-size: 40px;
+$button-floating-radius: 50%;
+
+
+// 4. Cards
+// ==========================================================================
+
+$card-padding: 24px;
+$card-bg-color: #fff;
+$card-link-color: color("orange", "accent-2");
+$card-link-color-light: lighten($card-link-color, 20%);
+
+
+// 5. Carousel
+// ==========================================================================
+
+$carousel-height: 400px;
+$carousel-item-height: $carousel-height / 2;
+$carousel-item-width: $carousel-item-height;
+
+
+// 6. Collapsible
+// ==========================================================================
+
+$collapsible-height: 3rem;
+$collapsible-line-height: $collapsible-height;
+$collapsible-header-color: #fff;
+$collapsible-border-color: #ddd;
+
+
+// 7. Chips
+// ==========================================================================
+
+$chip-bg-color: #e4e4e4;
+$chip-border-color: #9e9e9e;
+$chip-selected-color: #26a69a;
+$chip-margin: 5px;
+
+
+// 8. Date + Time Picker
+// ==========================================================================
+
+$datepicker-display-font-size: 2.8rem;
+$datepicker-calendar-header-color: #999;
+$datepicker-weekday-color: rgba(0, 0, 0, .87);
+$datepicker-weekday-bg: darken($secondary-color, 7%);
+$datepicker-date-bg: $secondary-color;
+$datepicker-year: rgba(255, 255, 255, .7);
+$datepicker-focus: rgba(0,0,0, .05);
+$datepicker-selected: $secondary-color;
+$datepicker-selected-outfocus: desaturate(lighten($secondary-color, 35%), 15%);
+$datepicker-day-focus: transparentize(desaturate($secondary-color, 5%), .75);
+$datepicker-disabled-day-color: rgba(0, 0, 0, .3);
+
+$timepicker-clock-color: rgba(0, 0, 0, .87);
+$timepicker-clock-plate-bg: #eee;
+
+
+// 9. Dropdown
+// ==========================================================================
+
+$dropdown-bg-color: #fff;
+$dropdown-hover-bg-color: #eee;
+$dropdown-color: $secondary-color;
+$dropdown-item-height: 50px;
+
+
+// 10. Forms
+// ==========================================================================
+
+// Text Inputs + Textarea
+$input-height: 3rem;
+$input-border-color: color("grey", "base");
+$input-border: 1px solid $input-border-color;
+$input-background: #fff;
+$input-error-color: $error-color;
+$input-success-color: $success-color;
+$input-focus-color: $secondary-color;
+$input-font-size: 16px;
+$input-margin-bottom: 8px;
+$input-margin: 0 0 $input-margin-bottom 0;
+$input-padding: 0;
+$label-font-size: .8rem;
+$input-disabled-color: rgba(0,0,0, .42);
+$input-disabled-solid-color: #949494;
+$input-disabled-border: 1px dotted $input-disabled-color;
+$input-invalid-border: 1px solid $input-error-color;
+$input-icon-size: 2rem;
+$placeholder-text-color: lighten($input-border-color, 20%);
+
+// Radio Buttons
+$radio-fill-color: $secondary-color;
+$radio-empty-color: #5a5a5a;
+$radio-border: 2px solid $radio-fill-color;
+
+// Range
+$range-height: 14px;
+$range-width: 14px;
+$track-height: 3px;
+
+// Select
+$select-border: 1px solid #f2f2f2;
+$select-background: rgba(255, 255, 255, 0.90);
+$select-focus: 1px solid lighten($secondary-color, 47%);
+$select-option-hover: rgba(0,0,0,.08);
+$select-option-focus: rgba(0,0,0,.08);
+$select-option-selected: rgba(0,0,0,.03);
+$select-padding: 5px;
+$select-radius: 2px;
+$select-disabled-color: rgba(0,0,0,.3);
+
+// Switches
+$switch-bg-color: $secondary-color;
+$switch-checked-lever-bg: desaturate(lighten($switch-bg-color, 25%), 25%);
+$switch-unchecked-bg: #F1F1F1;
+$switch-unchecked-lever-bg: rgba(0,0,0,.38);
+$switch-radius: 15px;
+
+
+// 11. Global
+// ==========================================================================
+
+// Media Query Ranges
+$small-screen-up: 601px;
+$medium-screen-up: 993px;
+$large-screen-up: 1201px;
+$small-screen: 600px;
+$medium-screen: 992px;
+$large-screen: 1200px;
+
+$medium-and-up: "only screen and (min-width : #{$small-screen-up})";
+$large-and-up: "only screen and (min-width : #{$medium-screen-up})";
+$extra-large-and-up: "only screen and (min-width : #{$large-screen-up})";
+$small-and-down: "only screen and (max-width : #{$small-screen})";
+$medium-and-down: "only screen and (max-width : #{$medium-screen})";
+$medium-only: "only screen and (min-width : #{$small-screen-up}) and (max-width : #{$medium-screen})";
+
+
+// 12. Grid
+// ==========================================================================
+
+$num-cols: 12;
+$gutter-width: 1.5rem;
+$element-top-margin: $gutter-width/3;
+$element-bottom-margin: ($gutter-width*2)/3;
+
+
+// 13. Navigation Bar
+// ==========================================================================
+
+$navbar-height: 64px;
+$navbar-line-height: $navbar-height;
+$navbar-height-mobile: 56px;
+$navbar-line-height-mobile: $navbar-height-mobile;
+$navbar-font-size: 1rem;
+$navbar-font-color: #fff;
+$navbar-brand-font-size: 2.1rem;
+
+// 14. Side Navigation
+// ==========================================================================
+
+$sidenav-width: 300px;
+$sidenav-font-size: 14px;
+$sidenav-font-color: rgba(0,0,0,.87);
+$sidenav-bg-color: #fff;
+$sidenav-padding: 16px;
+$sidenav-item-height: 48px;
+$sidenav-line-height: $sidenav-item-height;
+
+
+// 15. Photo Slider
+// ==========================================================================
+
+$slider-bg-color: color('grey', 'base');
+$slider-bg-color-light: color('grey', 'lighten-2');
+$slider-indicator-color: color('green', 'base');
+
+
+// 16. Spinners | Loaders
+// ==========================================================================
+
+$spinner-default-color: $secondary-color;
+
+
+// 17. Tabs
+// ==========================================================================
+
+$tabs-underline-color: $primary-color-light;
+$tabs-text-color: $primary-color;
+$tabs-bg-color: #fff;
+
+
+// 18. Tables
+// ==========================================================================
+
+$table-border-color: rgba(0,0,0,.12);
+$table-striped-color: rgba(242, 242, 242, 0.5);
+
+
+// 19. Toasts
+// ==========================================================================
+
+$toast-height: 48px;
+$toast-color: #323232;
+$toast-text-color: #fff;
+$toast-action-color: #eeff41;
+
+
+// 20. Typography
+// ==========================================================================
+
+$font-stack: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+$off-black: rgba(0, 0, 0, 0.87);
+// Header Styles
+$h1-fontsize: 4.2rem;
+$h2-fontsize: 3.56rem;
+$h3-fontsize: 2.92rem;
+$h4-fontsize: 2.28rem;
+$h5-fontsize: 1.64rem;
+$h6-fontsize: 1.15rem;
+
+
+// 21. Footer
+// ==========================================================================
+
+$footer-font-color: #fff;
+$footer-bg-color: $primary-color;
+$footer-copyright-font-color: rgba(255,255,255,.8);
+$footer-copyright-bg-color: rgba(51,51,51,.08);
+
+
+// 22. Flow Text
+// ==========================================================================
+
+$range : $large-screen - $small-screen;
+$intervals: 20;
+$interval-size: $range / $intervals;
+
+
+// 23. Collections
+// ==========================================================================
+
+$collection-border-color: #e0e0e0;
+$collection-bg-color: #fff;
+$collection-active-bg-color: $secondary-color;
+$collection-active-color: lighten($secondary-color, 55%);
+$collection-hover-bg-color: #ddd;
+$collection-link-color: $secondary-color;
+$collection-line-height: 1.5rem;
+
+
+// 24. Progress Bar
+// ==========================================================================
+
+$progress-bar-color: $secondary-color;

data/_sass/materialize.scss

@@ -0,0 +1,41 @@
+@charset "UTF-8";
+
+// Color
+@import "components/color-variables";
+@import "components/color-classes";
+
+// 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/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/datepicker";
+@import "components/timepicker";

data/_sass/minima.scss

@@ -0,0 +1,51 @@
+@charset "utf-8";
+
+// Define defaults for each variable.
+
+$base-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;
+$base-font-size:   16px !default;
+$base-font-weight: 400 !default;
+$small-font-size:  $base-font-size * 0.875 !default;
+$base-line-height: 1.5 !default;
+
+$spacing-unit:     30px !default;
+
+$text-color:       #111 !default;
+$background-color: #fdfdfd !default;
+$brand-color:      #2a7ae2 !default;
+
+$grey-color:       #828282 !default;
+$grey-color-light: lighten($grey-color, 40%) !default;
+$grey-color-dark:  darken($grey-color, 25%) !default;
+
+$table-text-align: left !default;
+
+// Width of the content area
+$content-width:    800px !default;
+
+$on-palm:          600px !default;
+$on-laptop:        800px !default;
+
+// Use media queries like this:
+// @include media-query($on-palm) {
+//   .wrapper {
+//     padding-right: $spacing-unit / 2;
+//     padding-left: $spacing-unit / 2;
+//   }
+// }
+@mixin media-query($device) {
+  @media screen and (max-width: $device) {
+    @content;
+  }
+}
+
+@mixin relative-font-size($ratio) {
+  font-size: $base-font-size * $ratio;
+}
+
+// Import partials.
+@import
+  "minima/base",
+  "minima/layout",
+  "minima/syntax-highlighting"
+;

data/assets/javascript/main.js

@@ -0,0 +1,6 @@
+M.AutoInit();
+
+document.addEventListener('DOMContentLoaded', function() {
+  var elems = document.querySelectorAll('.sidenav');
+  var instances = M.Sidenav.init();
+});