Add core material SCSS files for reference (#63)

Currently SCSS sources are pre-compiled into CSS files. This means you (as a user of Angular components) don't have to add an additional SCSS -> CSS build step, but it also means you only get the generated CSS. 

This commit adds the shared material source SCSS in a separate directory. We plan to actually add the build step, but until then this is a way that you can copy/reuse some of our SCSS.

Author: nshahan

CHANGELOG.md

@@ -1,16 +1,25 @@
+## 0.4.1-alpha
+
+This code is considered production quality, but depends on angular2:
+3.0.0-alpha+1. The alpha tag represents the evolving nature of the AngularDart
+api, not code quality (3.0.0-alpha+1 is used in production Google apps).
+
+ * Add code Material Design .scss files as a reference. Currently not used
+   during build.
+
 ## 0.4.0-alpha
 
-This code is considered production quality, but depends on angular2: 3.0.0-alpha+1.
-The alpha tag represents the evolving nature of the AngularDart api, not
-code quality (3.0.0-alpha+1 is used in production Google apps).
+This code is considered production quality, but depends on angular2:
+3.0.0-alpha+1. The alpha tag represents the evolving nature of the AngularDart
+api, not code quality (3.0.0-alpha+1 is used in production Google apps).
 
 ### Breaking Changes
  * Update for generic syntax and `FutureOr` type introduced in Dart SDK 1.22.0.
  * Material Toggle: Remove the deprecated `color` theme input.
  * Material Button, Fab, Yes/No:
    * Remove is-disabled and is-raised HTML classes used for styling.
-     Custom styles should now use `[disabled]` and `[raised]` instead of `.is-disabled` and
-     `.is-raised` when targeting buttons.
+     Custom styles should now use `[disabled]` and `[raised]` instead of
+     `.is-disabled` and `.is-raised` when targeting buttons.
    * Remove z-index of 0.
 
 ### Other Changes
@@ -22,17 +31,19 @@ code quality (3.0.0-alpha+1 is used in production Google apps).
    * Add new number accessors and validators.
    * Add ability to override/specify error messages.
    * Fix AX_TEXT_01 a11y issue.
- * Material List: 
+ * Material List:
    * Block pointer events for disabled list items.
    * Remove duplicate mixin.
  * Material Popup: Disable animation delay when there is nothing to animate.
  * Material Radio: Fix styling issue, flex for IE11.
- * Material Tab Panel: Fix issue that prevents displaying tabs on initialization.
+ * Material Tab Panel: Fix issue that prevents displaying tabs on
+   initialization.
  * Material Yes/No Buttons: Add submit/cancel buttons.
  * Scorecard:
    * Add support for RTL languages in scrollable scoreboards.
    * Add support for themes.
-   * Prevent exceptions during width calculations when scorecard width is `auto`.
+   * Prevent exceptions during width calculations when scorecard width is
+     `auto`.
  * Compute the ARIA roles only once per instance.
  * Fix dom update issues.
  * Add proper types to injected providers.
@@ -41,9 +52,9 @@ code quality (3.0.0-alpha+1 is used in production Google apps).
 
 ## 0.3.1-alpha
 
-This code is considered production quality, but depends on angular2: 3.0.0-alpha.
-The alpha tag represents the evolving nature of the AngularDart api, not
-code quality (3.0.0-alpha is used in production Google apps).
+This code is considered production quality, but depends on angular2:
+3.0.0-alpha. The alpha tag represents the evolving nature of the AngularDart
+api, not code quality (3.0.0-alpha is used in production Google apps).
 
  * Add Material List.
  * Material Expansionpanel: Add `autoDismissable` directive.
@@ -53,8 +64,9 @@ code quality (3.0.0-alpha is used in production Google apps).
 
 ## 0.3.0-alpha
 
-This code is considered production quality, but depends on angular2: 3.0.0-alpha.
-The alpha tag represents the evolving nature of the AngularDart api.
+This code is considered production quality, but depends on angular2:
+3.0.0-alpha. The alpha tag represents the evolving nature of the AngularDart
+api.
 
  * Add Material Tooltip.
  * Material Ripple:
@@ -63,7 +75,8 @@ The alpha tag represents the evolving nature of the AngularDart api.
  * Internal updates for compatibility with Angular 3.0.0-alpha.
  * Material Expansion Panel:
    * Fix CSS rule that causes header text to turn gray on hover/focus.
-   * Support auto-focus on a content element when the material expansion panel expands.
+   * Support auto-focus on a content element when the material expansion panel
+     expands.
    * Fix Yes/No button ordering.
  * Material Input:
    * Add a blur update value accessor.
@@ -87,8 +100,9 @@ The alpha tag represents the evolving nature of the AngularDart api.
 
  * Add Material Popup, a basic popup component.
  * Update Material Checkbox icon size.
- * Cleanup framework stabilizers since [issue #24843](https://github.com/dart-lang/sdk/issues/24843)
-   in the Dart SDK has been resolved.
+ * Cleanup framework stabilizers since
+   [issue #24843](https://github.com/dart-lang/sdk/issues/24843) in the Dart 
+   SDK has been resolved.
  * Remove unused files.
 
 ## 0.2.1

README.md

@@ -39,10 +39,11 @@ possible.
 * ☐ `<material-menu>`
 * many more, including a fast table
 
-At this time we are not taking pull requests but please file an issue and we will
-work with you.
+At this time we are not taking pull requests but please file an issue and we
+will work with you.
 
-**Officially Supported Browsers:** The last two versions of Chrome, Edge, Firefox, and Safari.
+**Officially Supported Browsers:** The last two versions of Chrome, Edge,
+Firefox, and Safari.
 
 ## Useful links
 
@@ -51,3 +52,15 @@ work with you.
 * [AngularDart documentation](https://angulardart.org/)
 * [Material Design site](https://material.google.com/)
 * [Code Lab: AngularDart Components](https://webdev.dartlang.org/codelabs/angular2_components)
+
+## Custom Component Styles
+
+Get access to the core Material Design SASS files used to style these components
+by copying them and importing
+[lib/src/css/_mixins.scss](https://github.com/dart-lang/angular2_components/blob/master/lib/src/css/_mixins.scss)
+in your SASS files.
+
+
+> NOTE: These .scss files are not used during the build step but we are planning
+> to add this support. See
+> [issue #45](https://github.com/dart-lang/angular2_components/issues/45).

lib/src/css/_mixins.scss

@@ -0,0 +1,51 @@
+/*
+ * Copyright (c) 2016, the Dart project authors.  Please see the AUTHORS file
+ * for details. All rights reserved. Use of this source code is governed by a
+ * BSD-style license that can be found in the LICENSE file.
+ */
+@import 'material/material';
+
+/// Style all scrollbars within the scope to material spec.
+///
+/// $thumb-hover-color should be a Material color matching your app's theme.
+/// $scrollbar-size defines the height of horizontal scrollbars and the width of
+/// vertical scrollbars.
+/// $thumb-min-size defines the min height of vertical scrollbar thumbs and the
+/// min width of horizontal scrollbar thumbs.
+@mixin material-scrollbar-theme(
+    $thumb-hover-color,
+    $scrollbar-size: $mat-grid-type,
+    $thumb-min-size: 6 * $mat-grid) {
+  /deep/ ::-webkit-scrollbar {
+    background-color: $mat-scrollbar-background;
+
+    // Height only applies to horizontal scrollbars.
+    height: $scrollbar-size;
+
+    // Width only applies to vertical scrollbars.
+    width: $scrollbar-size;
+
+    &:hover {
+      background-color: $mat-scrollbar-background-hover;
+    }
+  }
+
+  /deep/ ::-webkit-scrollbar-thumb {
+    background-color: $mat-scrollbar-thumb;
+
+    // min-height only applies to vertical scrollbar thumbs.
+    min-height: $thumb-min-size;
+
+    // min-width only applies to horizontal scrollbar thumbs.
+    min-width: $thumb-min-size;
+
+    &:hover {
+      background-color: $thumb-hover-color;
+    }
+  }
+
+  /deep/ ::-webkit-scrollbar-button {
+    width: 0;
+    height: 0;
+  }
+}

lib/src/css/material/_material.scss

@@ -0,0 +1,20 @@
+/*
+ * Copyright (c) 2016, the Dart project authors.  Please see the AUTHORS file
+ * for details. All rights reserved. Use of this source code is governed by a
+ * BSD-style license that can be found in the LICENSE file.
+ */
+@charset 'UTF-8';
+// Make sure the charset is set appropriately
+
+// How to use me:
+//
+// This set of scss files should never output any css unless sass classes are
+// extended in the importing file. This allows you to import _material without
+// bloating the css files for your components. All variables and components
+// within the material stylesheet are prefixed with "mat-" in order to give a
+// clear distinction between them and the styles in components that are using
+// these material styles.
+
+// Behold, the import of all things:
+@import 'const/global',
+        '../shared/shared';