dlegr250_material_design 0.1.0

data/vendor/assets/stylesheets/base/mixins.scss

@@ -0,0 +1,202 @@
+//======================================================================
+// SCSS mixins accessible in every SCSS file imported after this one.
+// Mixins abstract browser-specific vendor prefixes when applicable.
+//======================================================================
+
+// Default values for mixins
+//----------------------------------------------------------------------
+
+$default-rounded-corners-radius: 3px;
+
+// Rounded corners
+//----------------------------------------------------------------------
+
+@mixin rounded-corners($radius: $default-rounded-corners-radius) {
+  behavior: url(border-radius.htc);
+  border-radius: $radius;
+  -moz-border-radius: $radius;
+  -webkit-border-radius: $radius;
+}
+
+@mixin rounded-top-corners($radius: $default-rounded-corners-radius) {
+  behavior: url(border-radius.htc);
+  border-radius: $radius $radius 0 0;
+  -moz-border-radius: $radius $radius 0 0;
+  -webkit-border-radius: $radius $radius 0 0;
+}
+
+@mixin rounded-right-corners($radius: $default-rounded-corners-radius) {
+  behavior: url(border-radius.htc);
+  border-radius: 0 $radius $radius 0;
+  -moz-border-radius: 0 $radius $radius 0;
+  -webkit-border-radius: 0 $radius $radius 0;
+}
+
+@mixin rounded-bottom-corners($radius: $default-rounded-corners-radius) {
+  behavior: url(border-radius.htc);
+  border-radius: 0 0 $radius $radius;
+  -moz-border-radius: 0 0 $radius $radius;
+  -webkit-border-radius: 0 0 $radius $radius;
+}
+
+@mixin rounded-left-corners($radius: $default-rounded-corners-radius) {
+  behavior: url(border-radius.htc);
+  border-radius: $radius 0 0 $radius;
+  -moz-border-radius: $radius 0 0 $radius;
+  -webkit-border-radius: $radius 0 0 $radius;
+}
+
+@mixin rounded-top-left-corner($radius: $default-rounded-corners-radius) {
+  behavior: url(border-radius.htc);
+  border-radius: $radius 0 0 0;
+  -moz-border-radius: $radius 0 0 0;
+  -webkit-border-radius: $radius 0 0 0;
+}
+
+@mixin rounded-top-right-corner($radius: $default-rounded-corners-radius) {
+  behavior: url(border-radius.htc);
+  border-radius: 0 $radius 0 0;
+  -moz-border-radius: 0 $radius 0 0;
+  -webkit-border-radius: 0 $radius 0 0;
+}
+
+@mixin rounded-bottom-left-corner($radius: $default-rounded-corners-radius) {
+  behavior: url(border-radius.htc);
+  border-radius: 0 0 0 $radius;
+  -moz-border-radius: 0 0 0 $radius;
+  -webkit-border-radius: 0 0 0 $radius;
+}
+
+@mixin rounded-bottom-right-corner($radius: $default-rounded-corners-radius) {
+  behavior: url(border-radius.htc);
+  border-radius: 0 0 $radius 0;
+  -moz-border-radius: 0 0 $radius 0;
+  -webkit-border-radius: 0 0 $radius 0;
+}
+
+// Gradient
+//----------------------------------------------------------------------
+
+@mixin linear-gradient($from, $to) {
+  background-color: $from;
+  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from($from), to($to));
+  background-image: -moz-linear-gradient(top, $from, $to);
+  background-image: -ms-linear-gradient(top, $from, $to);
+  background-image: -o-linear-gradient(top, $from, $to);
+  background-image: linear-gradient(top, $from, $to);
+}
+
+// Effects
+//----------------------------------------------------------------------
+
+@mixin transition($effect...) {
+  @if length($effect) == 0 {
+    $effect: all 0.20s ease;
+  }
+
+  transition: $effect;
+  -moz-transition: $effect;
+  -o-transition: $effect;
+  -webkit-transition: $effect;
+}
+
+@mixin transform($text...) {
+  -webkit-transform: $text;
+  -moz-transform: $text;
+  -ms-transform: $text;
+  transform: $text;
+}
+
+// Visibility
+//----------------------------------------------------------------------
+
+@mixin visibility($text) {
+  visibility: $text;
+  -webkit-backface-visibility: $text;
+  -moz-backface-visibility: $text;
+  backface-visibility: $text;
+}
+
+// See: css-tricks.com/css-transparency-settings-for-all-broswers
+@mixin transparency($value: 0.5) {
+  filter: alpha(opacity=($value * 100));
+  opacity: $value;
+  zoom: 1;
+}
+
+// Shadows
+//----------------------------------------------------------------------
+
+@mixin box-shadow($text...) {
+  @if length($text) == 0 {
+    $text: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.16);
+  }
+
+  box-shadow: $text;
+  -moz-box-shadow: $text;
+  -webkit-box-shadow: $text;
+}
+
+@mixin text-shadow($text) {
+  text-shadow: $text;
+  -moz-text-shadow: $text;
+  -webkit-text-shadow: $text;
+}
+
+// Flexbox
+//----------------------------------------------------------------------
+
+// For a row of flex elements, such as the appbar.
+@mixin flex-parent-row() {
+  align-items: center;
+  -ms-flex-align: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  display: flex;
+  display: -ms-flexbox;
+  display: -webkit-flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+}
+
+// Center elements vertically and horizontally
+@mixin flex-center() {
+  align-items: center;
+  -ms-flex-align: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  display: flex;
+  display: -ms-flexbox;
+  display: -webkit-flex;
+  flex-direction: column;
+  flex-wrap: nowrap;
+  justify-content: center;
+  height: 100%;
+  width: 100%;
+}
+
+// Boxes
+//----------------------------------------------------------------------
+
+// Using border-box takes element's padding into consideration
+@mixin full-width() {
+  box-sizing: border-box !important;
+  -moz-box-sizing: border-box !important;
+  -webkit-box-sizing: border-box !important;
+  width: 100% !important;
+}
+
+// Touch
+//----------------------------------------------------------------------
+
+// By default, touch devices highlight elements when selected
+@mixin no-touch-highlight() {
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  -webkit-tap-highlight-color: transparent;
+}

data/vendor/assets/stylesheets/base/normalize.scss

@@ -0,0 +1,229 @@
+//======================================================================
+// DO NOT TOUCH THIS FILE!
+//
+// File: base/normalize.css.scss
+// Desc: Reset file that other styles build upon.
+//
+// See:  http://nicolasgallagher.com/about-normalize-css/
+//
+// normalize.css v3.0.0 | MIT License | git.io/normalize
+//======================================================================
+
+html {
+  font-family: sans-serif;
+  -ms-text-size-adjust: 100%;
+  -webkit-text-size-adjust: 100%;
+}
+
+body {
+  margin: 0;
+}
+
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+main,
+nav,
+section,
+summary {
+  display: block;
+}
+
+audio,
+canvas,
+progress,
+video {
+  display: inline-block;
+  vertical-align: baseline;
+}
+
+audio:not([controls]) {
+  display: none;
+  height: 0;
+}
+
+[hidden],
+template {
+  display: none;
+}
+
+a {
+  background: transparent;
+}
+
+a:active,
+a:hover {
+  outline: 0;
+}
+
+abbr[title] {
+  border-bottom: 1px dotted;
+}
+
+b,
+strong {
+  font-weight: bold;
+}
+
+dfn {
+  font-style: italic;
+}
+
+h1 {
+  font-size: 2em;
+  margin: 0.67em 0;
+}
+
+mark {
+  background: #ff0;
+  color: #000;
+}
+
+small {
+  font-size: 80%;
+}
+
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sup {
+  top: -0.5em;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+img {
+  border: 0;
+}
+
+svg:not(:root) {
+  overflow: hidden;
+}
+
+figure {
+  margin: 1em 40px;
+}
+
+hr {
+  -moz-box-sizing: content-box;
+  box-sizing: content-box;
+  height: 0;
+}
+
+pre {
+  overflow: auto;
+}
+
+code,
+kbd,
+pre,
+samp {
+  font-family: monospace, monospace;
+  font-size: 1em;
+}
+
+button,
+input,
+optgroup,
+select,
+textarea {
+  color: inherit;
+  font: inherit;
+  margin: 0;
+}
+
+button {
+  overflow: visible;
+}
+
+button,
+select {
+  text-transform: none;
+}
+
+button,
+html input[type="button"],
+input[type="reset"],
+input[type="submit"] {
+  -webkit-appearance: button;
+  cursor: pointer;
+}
+
+button[disabled],
+html input[disabled] {
+  cursor: default;
+}
+
+button::-moz-focus-inner,
+input::-moz-focus-inner {
+  border: 0;
+  padding: 0;
+}
+
+input {
+  line-height: normal;
+}
+
+input[type="checkbox"],
+input[type="radio"] {
+  box-sizing: border-box;
+  padding: 0;
+}
+
+input[type="number"]::-webkit-inner-spin-button,
+input[type="number"]::-webkit-outer-spin-button {
+  height: auto;
+}
+
+input[type="search"] {
+  -webkit-appearance: textfield;
+  -moz-box-sizing: content-box;
+  -webkit-box-sizing: content-box;
+  box-sizing: content-box;
+}
+
+input[type="search"]::-webkit-search-cancel-button,
+input[type="search"]::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+fieldset {
+  border: 1px solid #c0c0c0;
+  margin: 0 2px;
+  padding: 0.35em 0.625em 0.75em;
+}
+
+legend {
+  border: 0;
+  padding: 0;
+}
+
+textarea {
+  overflow: auto;
+}
+
+optgroup {
+  font-weight: bold;
+}
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+td,
+th {
+  padding: 0;
+}

data/vendor/assets/stylesheets/base/variables.scss

@@ -0,0 +1,177 @@
+//======================================================================
+// SCSS variables accessible in every SCSS file imported after this one.
+//======================================================================
+
+// Dimensions - application
+//----------------------------------------------------------------------
+
+$application-container-min-width: 300px;
+
+// Dimensions - appbar
+//----------------------------------------------------------------------
+
+$appbar-height: 64px;
+$appbar-button-height: 46px;
+
+// Dimensions - sidebars
+//----------------------------------------------------------------------
+
+$sidebar-width: 300px;
+
+// Dimensions - main
+//----------------------------------------------------------------------
+
+$main-top: $appbar-height;
+$main-left: $sidebar-width + 1; // Allows for 1px border
+
+// Dimensions - cards
+//----------------------------------------------------------------------
+
+$card-width-xsmall: 180px;
+$card-width-small: 220px;
+$card-width: 280px;
+$card-width-large: 360px;
+$card-width-xlarge: 420px;
+
+// Dimensions - menus
+//----------------------------------------------------------------------
+
+$menu-width: 56px;
+$menu-width-factors: 1, 2, 3, 4, 5, 6, 7;
+
+// Dimensions - tabs
+//----------------------------------------------------------------------
+
+$tab-height: 48px;
+
+// Dimensions - buttons
+//----------------------------------------------------------------------
+
+$button-height-dense: 32px;
+$button-height: 36px;
+$button-height-large: 56px;
+
+$button-icon-height: 40px;
+
+$button-fab-mini-height: $button-icon-height;
+$button-fab-height: 56px;
+
+// Dimensions - inputs (text-fields, etc...)
+//----------------------------------------------------------------------
+
+$input-height: 40px;
+
+// Font sizes
+//----------------------------------------------------------------------
+
+$font-size-xsmall: 10px;
+$font-size-small: 12px;
+$font-size-normal: 14px;
+$font-size-large: 20px;
+$font-size-xlarge: 34px;
+
+$font-size-text-field: 16px;
+
+$font-size-icon: 24px;
+
+// Spacing
+//----------------------------------------------------------------------
+
+$spacing-xsmall: 4px;
+$spacing-small: 8px;
+$spacing-normal: 16px;
+$spacing-large: 24px;
+$spacing-xlarge: 32px;
+
+// Depth (z-index)
+//----------------------------------------------------------------------
+
+$layout-depth: 10;
+$menu-depth: 20;
+$overlay-depth: 30;
+$sidebar-depth: 40;
+$dialog-depth: 50;
+
+// Device breakpoints
+//----------------------------------------------------------------------
+
+$small-width: 400px;
+$medium-width: 750px;
+$large-width: 1000px;
+
+// Convenience variables
+//----------------------------------------------------------------------
+
+
+
+// Color variables
+// See: http://www.google.com/design/spec/style/color.html
+//----------------------------------------------------------------------
+
+$colors: (
+  "red"        : #db4437,
+  "blue"       : #2196f3,
+  "dark-blue"  : darken(#2196f3, 10%),
+  "grey"       : #9e9e9e,
+  "black"      : #000000,
+  "white"      : #ffffff,
+  "pink"       : #e91e63,
+  "purple"     : #9c27b0,
+  "deep-purple": #673ab7,
+  "indigo"     : #3f51b5,
+  "light-blue" : #03a9f4,
+  "cyan"       : #00bcd4,
+  "teal"       : #009688,
+  "green"      : #4caf50,
+  "light-green": #8bc34a,
+  "lime"       : #cddc39,
+  "yellow"     : #ffeb3b,
+  "highlight"  : #ffffcc,
+  "amber"      : #ffc107,
+  "orange"     : #ff9800,
+  "dark-orange": #ef6c00,
+  "deep-orange": #ff5722,
+  "brown"      : #795548,
+  "blue-grey"  : #607d8b,
+  "icon"       : #737373,
+  "helper"     : rgba(0, 0, 0, 0.54),
+  "hint"       : rgba(0, 0, 0, 0.54),
+  "text"       : rgb(51, 51, 51),
+  "divider"    : rgba(0, 0, 0, 0.12),
+  "hover"      : #eceff1,
+  "snackbar"   : #323232
+);
+
+// Easier way to reference $colors map
+@function color($color-name) {
+  @return map-get($colors, $color-name);
+}
+
+// Defaults - Application colors (user can override)
+//----------------------------------------------------------------------
+
+// Body
+$body-background-color: #eee !default;
+
+// appbar and any colored component
+$primary-color: color("blue") !default;
+$secondary-color: color("red") !default;
+
+// Hover color for lists, menus, etc...
+$hover-color: color("hover") !default;
+
+// Appbar only
+$appbar-text-color: color("white") !default;
+$appbar-button-color: color("hint") !default;
+
+// Merge defaults back into globals to use in colored components.
+// Having this here allows access to the color helpers already created
+// in the $colors global so you can do color("primary") instead of #fff.
+//----------------------------------------------------------------------
+
+$app-config: (
+  "primary": $primary-color,
+  "secondary": $secondary-color,
+  "hover": $hover-color
+);
+$colors: map-merge(($colors), ($app-config));