Add Sass files for reference (#118)

Author: nshahan

CHANGELOG.md

@@ -1,3 +1,12 @@
+## 0.5.3+1
+
+* Add SASS files.
+
+> NOTE: SASS files are not used during the build step of this package and are
+> provided as reference only. These .scss files were used to generate the
+> corresponding .css files in a separate process. We are working on a solution
+> to include CSS generation from SASS files during the build process.
+
 ## 0.5.3
 
  * Add Material Tree component.

lib/src/components/button_decorator/_mixins.scss

@@ -0,0 +1,18 @@
+/*
+ * 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.
+ */
+
+/*
+ * NOTE: SASS files are not used during the build step of this package and are
+ * provided as reference only. These .scss files were used to generate the
+ * corresponding .css files in a separate process. We are working on a solution
+ * to include CSS generation from SASS files during the build process.
+ */
+
+@mixin disabled-cursor($cursor-style) {
+  /deep/ [buttonDecorator].is-disabled {
+    cursor: $cursor-style;
+  }
+}

lib/src/components/button_decorator/button_decorator.scss

@@ -0,0 +1,27 @@
+/*
+ * 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.
+ */
+
+/*
+ * NOTE: SASS files are not used during the build step of this package and are
+ * provided as reference only. These .scss files were used to generate the
+ * corresponding .css files in a separate process. We are working on a solution
+ * to include CSS generation from SASS files during the build process.
+ */
+
+/// Consider using button-base or material-button instead from:
+///     lib/src/components/material_button/_mixins.scss
+/// These mixins provide more of the typical values used in buttons.
+///
+
+/// Default styles that should be provided for all elements that use
+/// the buttonDecorator directive.
+[buttonDecorator] {
+  cursor: pointer;
+
+  &.is-disabled {
+    cursor: not-allowed;
+  }
+}

lib/src/components/focus/focus_trap.scss

@@ -0,0 +1,31 @@
+/*
+ * 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.
+ */
+
+/*
+ * NOTE: SASS files are not used during the build step of this package and are
+ * provided as reference only. These .scss files were used to generate the
+ * corresponding .css files in a separate process. We are working on a solution
+ * to include CSS generation from SASS files during the build process.
+ */
+
+:host {
+  display: block
+}
+
+// These styles allow the contents within the focus-trap component to inherit
+// the height and max-height of the focus-trap component if the height and
+// max-height are set like so:
+//
+// focus-trap {
+//   height: 100px;
+//   max-height: 100px;
+// }
+//
+// These styles are needed by the material-dialog component, which uses the focus-trap component.
+[focusContentWrapper] {
+  height: inherit;
+  max-height: inherit;
+}

lib/src/components/glyph/_mixins.scss

@@ -0,0 +1,49 @@
+/*
+ * 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.
+ */
+
+/*
+ * NOTE: SASS files are not used during the build step of this package and are
+ * provided as reference only. These .scss files were used to generate the
+ * corresponding .css files in a separate process. We are working on a solution
+ * to include CSS generation from SASS files during the build process.
+ */
+
+/// Change the size of a glyph icon.
+///
+/// Only use this mixin if your UI calls for an icon size which is not one of
+/// the presets: {12px, 13px, 16px, 20px, and 24px).
+///
+/// The font-icon CSS has a default font size of 24px, therefore, one must
+/// be more specific to override the default.
+/// Note: The should be scoped to a shimmed selector outside.
+@mixin glyph-size($size) {
+  /deep/ i {
+    font-size: $size;
+    height: 1em;
+    line-height: 1em;
+    width: 1em;
+  }
+}
+
+/// Change the size of a font-icon.
+///
+/// Only use this mixin if your UI calls for an icon size which is not one of
+/// the presets: {12px, 13px, 16px, 20px, and 24px).
+///
+/// The font-icon CSS has a default font size of 24px, therefore, one must
+/// be more specific to override the default.
+/// Please use a very specific selector to avoid collisions ex:
+/// @include glyph-icon-size('material-chip > .delete-icon', 10px);
+/// Note: The selector must select to the `glyph` element.
+/// @Deprecated. Use glyph-size mixin instead.
+@mixin glyph-icon-size($selector, $value) {
+  /deep/ #{$selector} i {
+    font-size: $value;
+    height: 1em;
+    line-height: 1em;
+    width: 1em;
+  }
+}

lib/src/components/glyph/glyph.scss

@@ -0,0 +1,87 @@
+/*
+ * 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.
+ */
+
+/*
+ * NOTE: SASS files are not used during the build step of this package and are
+ * provided as reference only. These .scss files were used to generate the
+ * corresponding .css files in a separate process. We are working on a solution
+ * to include CSS generation from SASS files during the build process.
+ */
+
+@import 'lib/src/css/material/material';
+@import 'compass/css3/flexbox';
+@import 'mixins';
+
+$x-small: $mat-grid-type * 3;  // 12px
+$small: $mat-body-font-size;   // 13px
+$medium: $mat-grid-type * 4;   // 16px
+$large: $mat-grid-type * 4.5;  // 18px
+$x-large: $mat-grid-type * 5;  // 20px
+
+:host {
+  display: inline-flex;
+
+  &[light] {
+    opacity: $mat-icon-opacity;
+  }
+
+  &[size="x-small"] {
+    @include glyph-size($x-small);
+  }
+
+  &[size="small"] {
+    @include glyph-size($small);
+  }
+
+  &[size="medium"] {
+    @include glyph-size($medium);
+  }
+
+  &[size="large"] {
+    @include glyph-size($large);
+  }
+
+  &[size="x-large"] {
+    @include glyph-size($x-large);
+  }
+}
+
+:host-context([dir="rtl"])[flip] .glyph-i {
+  transform: scaleX(-1);
+}
+
+// Add the `baseline` attribute on the glyph element if the glyph needs to be
+// aligned to the baseline.
+//
+// E.g. <glyph baseline icon='add'></glyph>
+//
+// In a flex or inline layout, the baseline of this element by default is
+// the bottom margin since the element doesn't have any displayed text to
+// calculate the baseline from. Thus, the glyph is always positioned too high
+// relative to other baseline-positioned elements. Adding the `baseline`
+// attribute to the glyph HTML element will insert a shim text element that will
+// implicitly set the icon baseline to the slightly below the center of the
+// icon.
+//
+// This issue arises because the material icons extended font sets a descent
+// value of 0, which means the baseline is set to the bottom of the icon.
+:host[baseline] {
+  align-items: center;
+
+  &::before {
+    content: '-';
+    display: inline-block;
+    width: 0;
+    visibility: hidden;
+  }
+
+  .glyph-i {
+    // Set a bottom margin so glyph baseline is near the expected position of a
+    // font rather than through the middle. Use `em` to be glyph
+    // font-size-independent.
+    margin-bottom: .1em;
+  }
+}