dlegr250_material_design 0.1.0

data/vendor/assets/stylesheets/layouts/application/appbar.scss

@@ -0,0 +1,93 @@
+//======================================================================
+// EXAMPLE:
+// <div class="appbar">
+//   <div class="appbar-nav-icon">
+//     <i class="zmdi zmdi-menu appbar-button" role="left-sidebar-toggle"></i>
+//   </div>
+//   <div class="appbar-title">
+//     Title...
+//   </div>
+//   <div class="appbar-actions">
+//     <i class="zmdi zmdi-menu appbar-button" role="right-sidebar-toggle"></i>
+//   </div>
+// </div>
+//======================================================================
+
+// appbar - base
+//----------------------------------------------------------------------
+
+.appbar {
+  background-color: $primary-color;
+  bottom: auto;
+  box-sizing: border-box;
+  color: $appbar-text-color;
+  height: $appbar-height;
+  padding: 0 $spacing-small;
+  width: 100%;
+  z-index: $layout-depth + 1;
+  @include box-shadow(0 2px 5px rgba(0, 0, 0, 0.30));
+  @include flex-parent-row();
+}
+
+// appbar - nav icon
+//----------------------------------------------------------------------
+
+.appbar-nav-icon {
+  width: $appbar-button-height;
+  margin-right: $spacing-normal;
+}
+
+// appbar - title
+//----------------------------------------------------------------------
+
+.appbar-title {
+  flex: 1; // To fill empty gaps
+  font-size: $font-size-large;
+  margin-right: $spacing-small;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+// appbar - actions
+//----------------------------------------------------------------------
+
+.appbar-actions {
+  text-align: right;
+
+  // TODO test this in multiple browsers to see if it works everywhere...
+  // Since standard buttons are not as tall as the appbar-button,
+  // there is leftover space and the button clings to the baseline.
+  .button {
+    margin-top: -10px;
+  }
+}
+
+// appbar - buttons
+//----------------------------------------------------------------------
+
+.appbar-button {
+  background-color: $primary-color;
+  box-sizing: border-box;
+  color: $appbar-button-color;
+  cursor: pointer;
+  display: inline-block;
+  font-size: $font-size-icon;
+  height: $appbar-button-height;
+  line-height: $appbar-button-height;
+  width: $appbar-button-height;
+  text-align: center;
+  text-decoration: none;
+
+  @include no-touch-highlight;
+  @include rounded-corners(250px);
+  @include transition(background 0.2s ease-in-out);
+
+  &:hover {
+    background-color: darken($primary-color, 7%);
+  }
+
+  &:active {
+    background-color: darken($primary-color, 12%);
+  }
+}

data/vendor/assets/stylesheets/layouts/application/base.scss

@@ -0,0 +1,27 @@
+//======================================================================
+// Shared styles for all major layout elements.
+//======================================================================
+
+// Layouts - base
+//----------------------------------------------------------------------
+
+#container,
+#appbar,
+#left-sidebar,
+#right-sidebar,
+#main {
+  bottom: 0;
+  left: 0;
+  position: absolute;
+  right: 0;
+  top: 0;
+  @include transition(transform .35s cubic-bezier(0.24, 1, 0.32, 1), visibility 0s);
+}
+
+// Layouts - container
+//----------------------------------------------------------------------
+
+#container {
+  min-width: $application-container-min-width;
+  width: 100%;
+}

data/vendor/assets/stylesheets/layouts/application/main.scss

@@ -0,0 +1,26 @@
+// Main - base
+//----------------------------------------------------------------------
+
+#main {
+  left: 0;
+  overflow-y: auto;
+  padding: 0;
+  top: $main-top;
+  z-index: $layout-depth;
+}
+
+// On large (desktop) size, add padding to main area.
+@media (min-width: $large-width) {
+  #main {
+    left: $main-left;
+    padding: $spacing-normal;
+  }
+
+  // If you have a right sidebar to show on large, you have to
+  // make #main leave a gap for the right sidebar.
+  body.has-right-sidebar {
+    #main {
+      right: $main-left;
+    }
+  }
+}

data/vendor/assets/stylesheets/layouts/application/sidebars.scss

@@ -0,0 +1,85 @@
+//======================================================================
+// EXAMPLE:
+// <div class="sidebar" id="left-sidebar">
+//   <div class="sidebar-header">Header</div>
+//   Content for sidebar...
+//   <nav id="navigation">
+//     ...list component for navigation...
+//   </nav>
+// </div>
+//======================================================================
+
+// Sidebars - base
+//----------------------------------------------------------------------
+
+.sidebar {
+  background: color("white");
+  max-width: 98%;
+  overflow-y: auto;
+  top: 0;
+  width: $sidebar-width;
+  will-change: transform;
+  z-index: $sidebar-depth;
+}
+
+// Sidebars - header
+//----------------------------------------------------------------------
+
+.sidebar-header {
+  border-bottom: 1px solid color("divider");
+  color: color("hint");
+  font-size: $font-size-large;
+  height: $appbar-height;
+  line-height: $appbar-height;
+  margin-bottom: $spacing-normal;
+  padding: 0 $spacing-normal;
+}
+
+// Sidebars - left sidebar
+//----------------------------------------------------------------------
+
+#left-sidebar {
+  border: none;
+  @include transform(translateX(-100%));
+  @include box-shadow(1px 0 5px rgba(0, 0, 0, 0.2));
+
+  &.visible {
+    @include transform(translateX(0));
+  }
+}
+
+// Sidebars - right sidebar
+//----------------------------------------------------------------------
+
+#right-sidebar {
+  border: none;
+  left: auto;
+  right: 0;
+  @include transform(translateX(100%));
+  @include box-shadow(1px 0 5px rgba(0, 0, 0, 0.2));
+
+  &.visible {
+    @include transform(translateX(0));
+  }
+}
+
+// Sidebars - media queries
+//----------------------------------------------------------------------
+
+@media (min-width: $large-width) {
+  #left-sidebar {
+    border-right: 1px solid color("divider");
+    z-index: $layout-depth;
+    @include transform(translateX(0));
+    @include box-shadow(none);
+  }
+
+  #right-sidebar {
+    border-left: 1px solid color("divider");
+    left: auto;
+    right: 0;
+    z-index: $layout-depth;
+    @include transform(translateX(0));
+    @include box-shadow(none);
+  }
+}

data/vendor/assets/stylesheets/layouts/authentication/base.scss

@@ -0,0 +1,53 @@
+// Authentication - container
+//----------------------------------------------------------------------
+
+#authentication-container {
+  padding: $spacing-normal;
+
+  .authentication-flash {
+    @extend .box;
+    margin-bottom: $spacing-normal;
+  }
+
+  .authentication-flash-notice {
+    @extend .box-green;
+  }
+
+  .authentication-flash-error {
+    @extend .box-red;
+  }
+}
+
+@media (min-width: $medium-width) {
+  #authentication-container {
+    padding-top: $spacing-xlarge * 3;
+  }
+}
+
+// Authentication - branding
+//----------------------------------------------------------------------
+
+#authentication-branding {
+  font-size: $font-size-large;
+  font-weight: bold;
+  margin-bottom: $spacing-normal;
+  text-align: center;
+}
+
+// Authentication - footer links
+//----------------------------------------------------------------------
+
+#authentication-footer {
+  padding: $spacing-large;
+  text-align: center;
+
+  a {
+    color: color("grey");
+    margin: $spacing-xsmall;
+    text-decoration: none;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+}

metadata

@@ -0,0 +1,155 @@
+--- !ruby/object:Gem::Specification
+name: dlegr250_material_design
+version: !ruby/object:Gem::Version
+  version: 0.1.0
+platform: ruby
+authors:
+- Daniel LeGrand
+autorequire: 
+bindir: exe
+cert_chain: []
+date: 2016-02-16 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: bundler
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '1.10'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '1.10'
+- !ruby/object:Gem::Dependency
+  name: rake
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '10.0'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '10.0'
+- !ruby/object:Gem::Dependency
+  name: rspec
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+description: Implement Google Material Design spec with modern browsers in mind.
+email:
+- dan.legrand@gmail.com
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- ".gitignore"
+- ".rspec"
+- ".travis.yml"
+- Gemfile
+- README.md
+- Rakefile
+- app/controllers/styleguide_controller.rb
+- app/views/styleguide/_buttons.html.erb
+- app/views/styleguide/_menus.html.erb
+- app/views/styleguide/_navigation.html.erb
+- app/views/styleguide/index.html.erb
+- bin/console
+- bin/setup
+- dlegr250_material_design.gemspec
+- lib/dlegr250_material_design.rb
+- lib/dlegr250_material_design/version.rb
+- vendor/assets/javascripts/base/init.js.coffee
+- vendor/assets/javascripts/components/dialog.coffee
+- vendor/assets/javascripts/components/forms.coffee
+- vendor/assets/javascripts/components/layout.coffee
+- vendor/assets/javascripts/components/menus.coffee
+- vendor/assets/javascripts/components/snackbar_handler.coffee
+- vendor/assets/javascripts/components/tabs.coffee
+- vendor/assets/javascripts/components/utility.coffee
+- vendor/assets/javascripts/dlegr250_material_design.js
+- vendor/assets/javascripts/extensions/coffeescript.js.coffee
+- vendor/assets/javascripts/extensions/jquery.js.coffee
+- vendor/assets/javascripts/third_party/hammer.min.js
+- vendor/assets/javascripts/third_party/handlebars.latest.js
+- vendor/assets/javascripts/third_party/jquery.hammer.js
+- vendor/assets/javascripts/third_party/snackbarlight.js
+- vendor/assets/stylesheets/base/base.scss
+- vendor/assets/stylesheets/base/global_classes.scss
+- vendor/assets/stylesheets/base/mixins.scss
+- vendor/assets/stylesheets/base/normalize.scss
+- vendor/assets/stylesheets/base/variables.scss
+- vendor/assets/stylesheets/components/badges.scss
+- vendor/assets/stylesheets/components/blank_slates.scss
+- vendor/assets/stylesheets/components/boxes.scss
+- vendor/assets/stylesheets/components/buttons.scss
+- vendor/assets/stylesheets/components/cards.scss
+- vendor/assets/stylesheets/components/code.scss
+- vendor/assets/stylesheets/components/dialogs.scss
+- vendor/assets/stylesheets/components/dividers.scss
+- vendor/assets/stylesheets/components/forms/error_messages.scss
+- vendor/assets/stylesheets/components/forms/fields.scss
+- vendor/assets/stylesheets/components/forms/labels.scss
+- vendor/assets/stylesheets/components/forms/radios.scss
+- vendor/assets/stylesheets/components/forms/selects.scss
+- vendor/assets/stylesheets/components/forms/text_fields.scss
+- vendor/assets/stylesheets/components/forms/toggles.scss
+- vendor/assets/stylesheets/components/lists.scss
+- vendor/assets/stylesheets/components/menus.scss
+- vendor/assets/stylesheets/components/overlay.scss
+- vendor/assets/stylesheets/components/snackbarlight.scss
+- vendor/assets/stylesheets/components/spinners.scss
+- vendor/assets/stylesheets/components/tabs.scss
+- vendor/assets/stylesheets/components/tooltips.scss
+- vendor/assets/stylesheets/dlegr250_material_design.scss
+- vendor/assets/stylesheets/fonts/material_design_iconic_font.scss
+- vendor/assets/stylesheets/fonts/material_design_iconic_font/Material-Design-Iconic-Font.eot
+- vendor/assets/stylesheets/fonts/material_design_iconic_font/Material-Design-Iconic-Font.svg
+- vendor/assets/stylesheets/fonts/material_design_iconic_font/Material-Design-Iconic-Font.ttf
+- vendor/assets/stylesheets/fonts/material_design_iconic_font/Material-Design-Iconic-Font.woff
+- vendor/assets/stylesheets/fonts/material_design_iconic_font/Material-Design-Iconic-Font.woff2
+- vendor/assets/stylesheets/layouts/application/appbar.scss
+- vendor/assets/stylesheets/layouts/application/base.scss
+- vendor/assets/stylesheets/layouts/application/main.scss
+- vendor/assets/stylesheets/layouts/application/sidebars.scss
+- vendor/assets/stylesheets/layouts/authentication/base.scss
+homepage: http://www.github.com/dlegr250/dlegr250_material_design
+licenses: []
+metadata: {}
+post_install_message: 
+rdoc_options: []
+require_paths:
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+required_rubygems_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+requirements: []
+rubyforge_project: 
+rubygems_version: 2.4.5.1
+signing_key: 
+specification_version: 4
+summary: Customized implementation of Google Material Design User Interface.
+test_files: []