diff --git a/CHANGELOG.md b/CHANGELOG.md index 5655da62..f7f8e300 100644 --- a/CHANGELOG.md +++ b/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. diff --git a/lib/src/components/button_decorator/_mixins.scss b/lib/src/components/button_decorator/_mixins.scss new file mode 100644 index 00000000..98119e1b --- /dev/null +++ b/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; + } +} diff --git a/lib/src/components/button_decorator/button_decorator.scss b/lib/src/components/button_decorator/button_decorator.scss new file mode 100644 index 00000000..d8967578 --- /dev/null +++ b/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; + } +} diff --git a/lib/src/components/focus/focus_trap.scss b/lib/src/components/focus/focus_trap.scss new file mode 100644 index 00000000..10f4bd39 --- /dev/null +++ b/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; +} diff --git a/lib/src/components/glyph/_mixins.scss b/lib/src/components/glyph/_mixins.scss new file mode 100644 index 00000000..7de75e72 --- /dev/null +++ b/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; + } +} diff --git a/lib/src/components/glyph/glyph.scss b/lib/src/components/glyph/glyph.scss new file mode 100644 index 00000000..436cf890 --- /dev/null +++ b/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. +// +// 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; + } +} diff --git a/lib/src/components/material_button/_mixins.scss b/lib/src/components/material_button/_mixins.scss new file mode 100644 index 00000000..c916f288 --- /dev/null +++ b/lib/src/components/material_button/_mixins.scss @@ -0,0 +1,237 @@ +/* + * 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', +'compass/css3', +'lib/src/components/glyph/mixins', +'lib/src/components/theme/mixins'; + +@import 'lib/src/components/material_shadow/css/shadow'; +$fab-size: $mat-grid * 7; +$fab-mini-size: $mat-grid * 5; +$fab-icon-size: $mat-grid * 3; + +$button-horizontal-padding: .57em; +$button-vertical-padding: .7em; + +// From spec http://www.google.com/design/spec/components/buttons.html#buttons-flat-raised-buttons +$button-disabled-color: rgba(0, 0, 0, $mat-opacity-lightest); +$button-disabled-background: rgba(0, 0, 0, $mat-divider-opacity); + +$button-hovered-background: rgba(158, 158, 158, .20); + +$button-disabled-color-dark: rgba(255, 255, 255, $mat-dark-opacity-lightest); + +// These styles are based on the 1.0 paper-button styles in +// https://github.com/PolymerElements/paper-button/blob/master/paper-button.html + +// TODO(google): Conform to lint, use shared styles/material colors. + +@mixin button-base { + @include acx-theme-dark { + color: $mat-white; + + &[raised] { + background-color: $mat-blue; + } + } + + @include mat-type-button; + @include material-shadow; + @include user-select(none); + + background: transparent; + border-radius: inherit; + box-sizing: border-box; + cursor: pointer; + display: inline-block; + letter-spacing: .01em; + line-height: normal; + outline: none; + position: relative; + text-align: center; + + &:not([icon]) { + margin: 0 .29em; + } + + &[dense] { + height: $mat-grid * 4; + font-size: $mat-body-font-size; + } + + &[disabled] { + @include acx-theme-dark { + color: $button-disabled-color-dark; + } + + color: $button-disabled-color; + cursor: not-allowed; + + >* { + pointer-events: none; + } + + &[raised] { + background: $button-disabled-background; + + @include acx-theme-dark { + background: $mat-blue; + } + } + } + + &:not([raised]):not([disabled]):not([icon]):hover { + background-color: $button-hovered-background; + } + + &.is-focused::after { + content: ''; + display: block; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-color: currentColor; + opacity: $mat-divider-opacity; + border-radius: inherit; + pointer-events: none; + } + + &:not([raised]), + &[disabled][raised] { + @include shadow-none; + } + + &[no-ink] material-ripple { + display: none; + } + + &[clear-size] { + margin: 0; + } + + .content { + @include display-flex(inline-flex); + @include align-items(center); + } +} + +@mixin material-button { + @include button-base; + + &:not([icon]) { + border-radius: 2px; + min-width: 5.14em; + + .content { + padding: $button-vertical-padding $button-horizontal-padding; + } + } + + &[icon] { + border-radius: 50%; + + .content { + padding: $mat-grid; + } + } + + &[clear-size] { + min-width: 0; + } +} + +@mixin fab-base($size) { + @include button-base; + border-radius: $size / 2; + + .content { + @include justify-content(center); + height: $size; + width: $size; + } +} + +@mixin fab { + @include fab-base($fab-size); +} + +@mixin fab-mini { + @include fab-base($fab-mini-size); +} + +// Allow customized size and icon-size on fab button. +@mixin fab-custom-size($size, $icon-size: $fab-icon-size) { + border-radius: $size / 2; + + /deep/ { + .content { + height: $size; + width: $size; + } + + glyph { + @include glyph-size($icon-size); + } + } +} + +// TODO(google): support dark theme in mixins. +// Apply button color to a button matching the selector. +// +// The color given is not applied to disabled button, as it could otherwise look +// as an enabled button. +@mixin button-color($selector, $color, $hover-color: $color) { + /deep/ #{$selector} { + &:not([disabled]) { + > .content { + color: $color; + } + + &:hover > .content { + color: $hover-color; + } + } + } +} + +@mixin button-background-color($selector, $background-color) { + /deep/ #{$selector} { + &:not([disabled]) { + background-color: $background-color; + } + } +} + +/// Applies letter-spacing to the text of . +@mixin button-letter-spacing($selector, $letter-spacing) { + /deep/ #{$selector} div { + letter-spacing: $letter-spacing; + } +} + +@mixin icon-button-color($selector, $color, $hover-color: $color) { + /deep/ #{$selector} { + &:not([disabled]) { + > .content > glyph { + color: $color; + } + + &:hover > .content > glyph { + color: $hover-color; + } + } + } +} diff --git a/lib/src/components/material_button/material_button.scss b/lib/src/components/material_button/material_button.scss new file mode 100644 index 00000000..06b76198 --- /dev/null +++ b/lib/src/components/material_button/material_button.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. + */ + +@import 'mixins'; + +:host { + @include material-button; +} diff --git a/lib/src/components/material_button/material_fab.scss b/lib/src/components/material_button/material_fab.scss new file mode 100644 index 00000000..1e85618f --- /dev/null +++ b/lib/src/components/material_button/material_fab.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. + */ + +@import 'mixins'; + +:host { + @include fab; + + glyph { + @include glyph-size($fab-icon-size); + } + + &[mini] { + @include fab-mini; + } +} + diff --git a/lib/src/components/material_checkbox/_mixins.scss b/lib/src/components/material_checkbox/_mixins.scss new file mode 100644 index 00000000..5c61c458 --- /dev/null +++ b/lib/src/components/material_checkbox/_mixins.scss @@ -0,0 +1,30 @@ +/* + * 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. + */ + +/// Changes the `$primary-color` of s under the $selector +/// element. +/// +/// Example use: @include material-checkbox-theme( +/// $primary-color: $mat-teal-500, +/// $selector: '.custom-area'); +@mixin material-checkbox-theme($primary-color, $selector: '') { + // Use component's selector with the themeable class to increase theme + // selector's priority. + /deep/ #{$selector} material-checkbox.themeable .icon-container .icon.filled { + color: $primary-color; + } + + /deep/ #{$selector} material-checkbox .icon-container .ripple.filled { + color: $primary-color; + } +} diff --git a/lib/src/components/material_checkbox/material_checkbox.scss b/lib/src/components/material_checkbox/material_checkbox.scss new file mode 100644 index 00000000..a1bae44a --- /dev/null +++ b/lib/src/components/material_checkbox/material_checkbox.scss @@ -0,0 +1,94 @@ +/* + * 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 'lib/src/css/shared/compass_polyfills'; +@import 'compass/css3/flexbox'; + +// Adjust margin to keep icon and ripple centered. +$margin-top: -1px; +$ripple-left: -$mat-grid; +$ripple-top: -$mat-grid; + +:host { + @include align-items(center); + cursor: pointer; + @include display-flex(inline-flex); + margin: $mat-grid; + + &[no-ink] material-ripple { + display: none; + } + + &:focus { + outline: none; + } + + // Checkbox is disabled. + &.disabled { + cursor: not-allowed; + + > .content { + color: $mat-light-transparent-black; + } + + > .icon-container { + opacity: $mat-icon-opacity-disabled; + } + } +} + +.icon-container { + @include display-flex(); + position: relative; + + &.focus::after, + .ripple { + color: $mat-grey-500; + $size: $mat-grid * 5; + border-radius: $size / 2; + height: $size; + left: $ripple-left; + position: absolute; + top: $ripple-top; + width: $size; + } + + &.focus::after { + content: ''; + display: block; + background-color: currentColor; + opacity: $mat-divider-opacity; + } +} + +.icon { + opacity: $mat-icon-opacity; + margin-top: $margin-top; + + // Checked & indeterminate icon styling + &.filled { + color: $mat-blue-500; + opacity: $mat-opacity-strong; + margin-top: $margin-top; + } +} + +.content { + @include align-items(center); + @include flex-grow(1); + @include flex-shrink(1); + // Need auto to work in IE. + @include flex-basis(auto); + margin-left: $mat-grid; +} diff --git a/lib/src/components/material_chips/_mixins.scss b/lib/src/components/material_chips/_mixins.scss new file mode 100644 index 00000000..34f3c499 --- /dev/null +++ b/lib/src/components/material_chips/_mixins.scss @@ -0,0 +1,124 @@ +/* + * 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'; + +/// Changes the colors of s. +/// +/// Available theme options are color and background color of the chip in its +/// native state, hover state, and selected state. Also available is coloring +/// of the delete icon, and max-width for the chip (if it's exceeded, content +/// will be elided) +@mixin material-chip-theme( + $chip-selector: '', + $primary-color : $mat-white, + $primary-bgcolor: $mat-blue-500, + $primary-color-hover: $mat-white, + $primary-bgcolor-hover: $mat-blue-700, + $primary-color-selected: $mat-white, + $primary-bgcolor-selected: $mat-blue-900, + $delete-icon-color: $mat-white, + $max-chip-width: null, + $selector: '') { + /deep/ #{$selector} material-chip.themeable#{$chip-selector} { + background-color: $primary-bgcolor; + color: $primary-color; + @if $max-chip-width { + max-width: $max-chip-width; + } + + &:hover { + background-color: $primary-bgcolor-hover; + color: $primary-color-hover; + } + + &:focus { + background-color: $primary-bgcolor-selected; + color: $primary-color-selected; + } + + &[emphasis]:hover { + background-color: $primary-bgcolor-hover; + } + + &[emphasis]:focus { + background-color: $primary-bgcolor-selected; + } + + .delete-icon { + fill: $delete-icon-color; + } + } +} + +/// Applies a max-width to the material chips. If the max-width exceeded, +/// content will be elided. +@mixin material-chip-max-width($max-chip-width: null) { + /deep/ material-chip { + @if $max-chip-width { + max-width: $max-chip-width; + } + } +} + +$main-hover-bg-color: $mat-gray-400; +$main-selected-bg-color: $mat-gray-600; + +$emphasis-hover-bg-color: $mat-blue-700; +$emphasis-selected-bg-color: $mat-blue-900; + +/// Use this mixin to align the chips container. +@mixin material-chips-margin($margin: 0) { + /deep/ .material-chips-root { + margin: $margin; + } +} + +/// Use this mixin when chips are clickable for cursor, hover, and focus +/// styling. +/// +/// Note: Use [ButtonDecorator] (or similar) to ensure role, tabindex, and a +/// label is set on your clickable chips. +@mixin material-chips-clickable() { + + material-chip { + cursor: pointer; + + &[emphasis]:hover { + background-color: $emphasis-hover-bg-color; + } + + &[emphasis]:focus { + background-color: $emphasis-selected-bg-color; + } + + &:focus { + background-color: $main-selected-bg-color; + color: $mat-white; + outline: none; + + /deep/ .delete-icon { + fill: $mat-white; + } + } + + &:hover { + background-color: $main-hover-bg-color; + color: $mat-white; + + /deep/ .delete-icon { + fill: $mat-white; + } + } + } +} diff --git a/lib/src/components/material_chips/material_chip.scss b/lib/src/components/material_chips/material_chip.scss new file mode 100644 index 00000000..b70a6ad8 --- /dev/null +++ b/lib/src/components/material_chips/material_chip.scss @@ -0,0 +1,106 @@ +/* + * 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'; + +$mat-option-inline-icons: true; + +$chip-height: $mat-grid * 4; +$chip-border-radius: $chip-height / 2; + +$main-bg-color: $mat-gray-300; + +$emphasis-bg-color: $mat-blue-500; + +:host { + @include display-flex(); + @include align-items(center); + border-radius: $chip-border-radius; + height: $chip-height; + margin: $mat-grid / 2; + overflow: hidden; +} + +.content { + margin: 0 $mat-grid * 1.5; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +$delete-icon-size: 19px; +// https://b.corp.google.com/issues/26877587 +$clickable-size: 25px; +$delete-icon-padding: ($clickable-size - $delete-icon-size) / 2; + +.left-icon { + @include display-flex(); + // The margin between chip content and icon should be 4px (that is 12px - 8px) + margin-right: -$mat-grid; + margin-left: $mat-grid-type; + padding: $delete-icon-padding; +} + +.delete-icon { + @include display-flex(); + background-size: $delete-icon-size $delete-icon-size; + border: 0; + cursor: pointer; + height: $delete-icon-size; + // The margin between chip content and icon should be 4px (that is 12px - 8px) + margin-left: -$mat-grid; + margin-right: $mat-grid-type; + min-width: $delete-icon-size; + padding: $delete-icon-padding; + width: $delete-icon-size; + + &:focus { + outline: none; + } +} + +// rules splitted on purpose, as those below only deal with colors +:host { + background-color: $main-bg-color; + color: $mat-black; + + .left-icon { + // make it easy to use either or + color: $mat-gray-500; + fill: $mat-gray-500; + } + + .delete-icon { + fill: $mat-gray-500; + + &:focus { + fill: $mat-white; + } + } +} + +// emphasis colors +:host[emphasis] { + background-color: $emphasis-bg-color; + color: $mat-white; + + .left-icon { + color: $mat-white; + fill: $mat-white; + } + + .delete-icon { + fill: $mat-white; + } +} diff --git a/lib/src/components/material_chips/material_chips.scss b/lib/src/components/material_chips/material_chips.scss new file mode 100644 index 00000000..1854a340 --- /dev/null +++ b/lib/src/components/material_chips/material_chips.scss @@ -0,0 +1,34 @@ +/* + * 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'; + +:host { + @include display-flex(); + @include flex-wrap(wrap); + @include justify-content(flex-start); + @include flex-direction(row); + @include align-items(center); + @include align-content(space-around); + + margin: 0; + padding: 0; + position: relative; + vertical-align: top; +} + +material-chip:last-of-type { + margin-right: $mat-grid * 2; +} diff --git a/lib/src/components/material_dialog/_mixins.scss b/lib/src/components/material_dialog/_mixins.scss new file mode 100644 index 00000000..f6f2e569 --- /dev/null +++ b/lib/src/components/material_dialog/_mixins.scss @@ -0,0 +1,91 @@ +/* + * 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 'lib/src/components/material_shadow/css/shadow'; + +@mixin material-dialog-header-color($color) { + /deep/ .wrapper > header, + &[headered] /deep/ .wrapper > header { + background-color: $color; + } +} + +@mixin material-dialog-header-shadow() { + /deep/ .wrapper > header { + @include shadow-elevation; + } +} + +@mixin material-dialog-header-padding($padding: 0) { + /deep/ .wrapper > header { + padding: $padding; + } +} + +@mixin material-dialog-body-padding($padding: 0) { + /deep/ .wrapper > main { + padding: $padding; + } +} + +@mixin material-dialog-footer-padding($padding: 0) { + /deep/ .wrapper > footer { + padding: $padding; + } +} + +@mixin material-dialog-footer-border-top($border) { + /deep/ .wrapper > footer { + border-top: $border; + } +} + +@mixin material-dialog-header() { + @include box-sizing(border-box); + padding: $mat-grid * 3 $mat-grid * 3 0; + width: 100%; + + /deep/ h3 { + @include mat-type-title; + margin: 0 0 $mat-grid; + } + + /deep/ p { + @include mat-type-caption; + margin: 0; + } +} + +@mixin material-dialog-headered-header() { + @include material-dialog-header; + background: $mat-gray-700; + padding-bottom: $mat-grid * 2; + + /deep/ h3 { + color: $mat-white; + margin-bottom: $mat-grid / 2; + } + + /deep/ p { + color: $mat-transparent-white; + } +} + + +@mixin material-dialog-main-flex($flow) { + /deep/ .wrapper > main { + @include display-flex(); + @include flex-flow($flow); + } +} diff --git a/lib/src/components/material_dialog/material_dialog.scss b/lib/src/components/material_dialog/material_dialog.scss new file mode 100644 index 00000000..15febb81 --- /dev/null +++ b/lib/src/components/material_dialog/material_dialog.scss @@ -0,0 +1,127 @@ +/* + * 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 'lib/src/css/shared/compass_polyfills'; +@import 'lib/src/components/material_shadow/css/shadow'; +@import 'compass/css3/box-sizing'; +@import 'compass/css3/flexbox'; +@import 'mixins'; + +:host { + @include shadow-elevation(24); + background: $mat-white; + border-radius: $mat-grid-type / 2; + display: block; + height: auto; + overflow: hidden; +} + +focus-trap { + height: inherit; + max-height: inherit; + width: 100%; +} + +.wrapper { + @include flexbox(( + display: flex, + flex-direction: column + )); + height: inherit; + max-height: inherit; +} + +.error { + @include box-sizing(border-box); + @include flex-shrink(0); + @include mat-type-body; + background: $mat-gray-200; + color: $mat-red-700; + padding: 0 $mat-grid * 3; + transition: padding $mat-transition $mat-transition-fast-slow 0s; + width: 100%; + + &.expanded { + border-bottom: 1px $mat-gray-300 solid; + border-top: 1px $mat-gray-300 solid; + padding: $mat-grid $mat-grid * 3; + } +} + +main { + @include box-sizing(border-box); + @include flex-grow(1); + @include mat-type-body; + color: $mat-transparent-black; + overflow: auto; + padding: 0 $mat-grid * 3; + width: 100%; + + &.top-scroll-stroke { + border-top: 1px $mat-gray-300 solid; + } + + &.bottom-scroll-stroke { + border-bottom: 1px $mat-gray-300 solid; + } +} + +footer { + @include box-sizing(border-box); + @include flex-shrink(0); + padding: 0 $mat-grid $mat-grid; + width: 100%; +} + +:host .wrapper { + > header { + @include material-dialog-header; + @include flex-shrink(0); + } + + > footer /deep/ [footer] { + @include flexbox(( + display: flex, + flex-shrink: 0, + justify-content: flex-end + )); + } +} + +:host[headered] .wrapper { + > header { + @include material-dialog-headered-header; + } + + > main { + padding-top: $mat-grid; + } +} + +:host[info] .wrapper { + > header { + /deep/ h3 { + line-height: $mat-grid * 5; + margin: 0; + } + + /deep/ material-button { + float: right; + } + } + + > footer { + padding-bottom: $mat-grid * 3; + } +} diff --git a/lib/src/components/material_expansionpanel/_mixins.scss b/lib/src/components/material_expansionpanel/_mixins.scss new file mode 100644 index 00000000..15d09cec --- /dev/null +++ b/lib/src/components/material_expansionpanel/_mixins.scss @@ -0,0 +1,161 @@ +/* + * 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'; + +/// Mixins for Material ExpansionPanel. These mixins should be applied with +/// standard Sass scoping logic, such as: +/// +/// ```scss +/// .dark { +/// @include expansionpanel-dark-theme; +/// } +/// ``` + +// The "styled" class is required to improve specificity of all selectors. +$_panel: 'div.panel.themeable'; + +/// A Dark theme mixin. Applies dark theme colors. +@mixin expansionpanel-dark-theme { + @include expansionpanel-colors($mat-grey-800, $mat-white); + @include expansionpanel-focused-colors($mat-grey-900, $mat-white); +} + +/// A mixin to override the default color scheme. +/// +/// The [$background-color] and [$text-color] must be specified. If +/// [$header-text-color] is not specified, it will default to [$text-color] at +/// 87% opacity ($mat-opacity-strong). +/// +/// This mixin should probably be used in conjunction with +/// [expansionpanel-focused-colors]. +@mixin expansionpanel-colors( + $background-color, + $text-color, + $header-text-color: rgba($text-color, $mat-opacity-strong), + $secondary-text-color: rgba($text-color, $mat-opacity-light), + $expand-button-text-color: rgba($text-color, $mat-opacity-strong)) { + @include expansionpanel-background-color($background-color); + @include expansionpanel-text-color($text-color); + @include expansionpanel-header-text-color($header-text-color); + @include expansionpanel-secondary-text-color($secondary-text-color); + @include expansionpanel-expand-button-text-color($expand-button-text-color); +} + +/// A mixin to override the color scheme of a focused or hovered expansionpanel. +@mixin expansionpanel-focused-colors( + $background-color, + $text-color) { + @include expansionpanel-focused-background-color($background-color); + @include expansionpanel-focused-text-color($text-color); +} + +@mixin expansionpanel-focused-background-color($color) { + /deep/ #{$_panel} header.closed { + &:hover, + &:focus { + background-color: $color; + } + } +} + +@mixin expansionpanel-focused-text-color($color) { + /deep/ #{$_panel} header.closed { + &:hover, + &:focus { + color: $color; + } + } +} + +@mixin expansionpanel-background-color($color) { + /deep/ #{$_panel} { + background-color: $color; + } +} + +@mixin expansionpanel-text-color($color) { + /deep/ #{$_panel} { + color: $color; + } +} + +@mixin expansionpanel-header-text-color($color) { + /deep/ #{$_panel} header { + color: $color; + } +} + +@mixin expansionpanel-secondary-text-color($color) { + /deep/ #{$_panel} header p.secondary-text { + color: $color; + } +} + +@mixin expansionpanel-expand-button-text-color($color) { + /deep/ #{$_panel} glyph.expand-button { + color: $color; + } +} + +@mixin expansionpanel-left-align-action-buttons() { + /deep/ material-yes-no-buttons { + @include flex-direction(row); + } +} + +@mixin expansionpanel-open-border-width($border-width) { + /deep/ .panel.open { + border-width: $border-width; + } +} + +@mixin expansionpanel-border-width($border-width) { + /deep/ .panel { + border-width: $border-width; + } +} + +@mixin expansionpanel-no-content-margin() { + /deep/ .panel .content-wrapper { + margin: 0; + } +} + +@mixin expansionpanel-header-padding($padding) { + /deep/ #{$_panel} header { + padding: $padding; + } +} + +// Disables the header expansion effect when the panel is opened. +@mixin expansionpanel-no-expansion() { + /deep/ #{$_panel} { + transition: none; + + &.open > header { + // Need to override the min-height increase which happens by default. + min-height: $mat-grid * 6; + } + } +} + +// Allows applying a vertical offset to an open panel to account for +// a border that is applied. This prevents the header text from +// suddenly jumping due to the extra border. +@mixin expansionpanel-open-panel-offset($offset-px) { + /deep/ #{$_panel}.open { + margin-top: -$offset-px; + } +} diff --git a/lib/src/components/material_expansionpanel/material_expansionpanel.scss b/lib/src/components/material_expansionpanel/material_expansionpanel.scss new file mode 100644 index 00000000..eb6ae432 --- /dev/null +++ b/lib/src/components/material_expansionpanel/material_expansionpanel.scss @@ -0,0 +1,184 @@ +/* + * 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 'lib/src/components/material_shadow/css/shadow'; +@import 'compass/css3/box-sizing'; +@import 'compass/css3/flexbox'; +@import 'compass/css3/user-interface'; + +.panel { + @include shadow-elevation; + background-color: $mat-white; + margin: 0; + transition: margin $mat-transition-slow $mat-transition-fast-slow; + width: inherit; +} + +:host:not([hidden]) { + display: block; +} + +:host[flat] .panel { + box-shadow: none; + border: 1px solid $mat-border-light; +} + +:host[wide] .panel { + @include shadow-elevation; + background-color: $mat-white; + margin: 0 $mat-grid * 3; + transition: margin $mat-transition-slow $mat-transition-fast-slow; +} + +.panel.open, +:host[wide] .panel.open { + @include shadow-elevation; + background-color: $mat-white; + // When opened, add vertical margins, and remove any horizontal margins. This + // produces the expansion effect. + margin: $mat-grid * 2 0; +} + +:host[flat] .panel.open { + box-shadow: none; + margin: 0; +} + +.expand-button { + @include user-select(none); + color: $mat-lighter-transparent-black; + cursor: pointer; + transition: transform $mat-transition-slow $mat-transition-fast-slow; + + &.expand-more { + transform: rotate(180deg); + } +} + +header { + @include flexbox(( + align-items: center, + display: flex + )); + @include mat-type-subhead; + color: $mat-transparent-black; + cursor: pointer; + min-height: $mat-grid * 6; + outline: none; + padding: 0 $mat-grid * 3; + transition: min-height $mat-transition-slow $mat-transition-fast-slow; + + &.closed { + &:hover, + &:focus { + background-color: $mat-grey-200; + } + } + + &.disable-header-expansion { + cursor: default; + } +} + +.panel.open > header { + min-height: $mat-grid * 8; +} + +.background, +:host[wide] .background { + background-color: $mat-grey-100; +} + +.panel-name { + padding-right: $mat-grid * 2; + min-width: 20%; + + .primary-text { + margin: 0; + } + + .secondary-text { + @include mat-type-caption; + color: $mat-light-transparent-black; + margin: 0; + } +} + +.panel-description { + @include flex-grow(1); + color: $mat-light-transparent-black; + overflow: hidden; + padding-right: $mat-grid * 2; +} + +.hidden { + visibility: hidden; +} + +main { + max-height: 0; + opacity: 0; + overflow: hidden; + width: 100%; +} + +.panel.open > main { + max-height: 100%; + opacity: 1; + width: 100%; +} + +.content-wrapper { + @include display-flex; + margin: 0 $mat-grid * 3 $mat-grid * 2; + + &.hidden-header { + margin-top: $mat-grid * 2; + } + + > .expand-button { + @include flexbox(( + align-self: flex-start, + flex-shrink: 0 + )); + margin-left: $mat-grid * 2; + + &:focus { + outline: none; + } + } +} + +.content { + @include flex-grow(1); + + overflow: hidden; + width: 100%; +} + +%toolbelt { + @include box-sizing(border-box); + border-top: 1px $mat-border-light solid; + padding: $mat-grid * 2 0; + width: 100%; +} + +.toolbelt /deep/ [toolbelt] { + @extend %toolbelt; +} + +.action-buttons { + @extend %toolbelt; + color: $mat-blue; +} diff --git a/lib/src/components/material_input/_mixins.scss b/lib/src/components/material_input/_mixins.scss new file mode 100644 index 00000000..207f8d94 --- /dev/null +++ b/lib/src/components/material_input/_mixins.scss @@ -0,0 +1,136 @@ +/* + * 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/components/material_popup/mixins'; + +// Sass mixins for customizing material-input + +/// Changes the material-input's label which is defined by $selector +/// to be $color +@mixin input-label-color($selector, $color) { + #{$selector} /deep/ .top-section > .input-container > .label > .label-text { + color: $color; + } +} + +@mixin input-leading-glyph-color($selector, $color) { + #{$selector} /deep/ .glyph { + color: $color; + } +} + +/// Changes the padding of the top section (without underline) of material +/// input. +@mixin input-top-section-padding($padding) { + /deep/ .top-section { + padding: $padding; + } +} + +/// Changes the margin of the top section (without underline) of material +/// input. +@mixin input-top-section-margin($margin) { + /deep/ .top-section { + margin: $margin; + } +} + +/// Changes the line-height of the top section (without underline) of material +/// input. +@mixin input-top-section-line-height($line-height) { + /deep/ .top-section { + line-height: $line-height; + } +} + +/// Hides the bottom section of material input. +@mixin input-hide-bottom-section() { + /deep/ .bottom-section { + display: none; + } +} + +/// Changes the padding of the leading text. +@mixin material-input-leading-text-padding($padding) { + /deep/ .leading-text { + padding: $padding; + } +} + +/// Changes the `$primary-color`in the material-input which includes the label +/// text and underline. +/// +/// Optionally specify a `$selector`. Example usage: +/// @include material-input-theme( +/// $primary-color: $mat-teal-500, +/// $selector: '.custom-area'); +@mixin material-input-theme($primary-color, $selector: '') { + #{$selector} /deep/ material-input.themeable .focused.label-text { + color: $primary-color; + } + + #{$selector} /deep/ material-input.themeable .cursor { + background-color: $primary-color; + } + + #{$selector} /deep/ material-input.themeable { + @include material-input-focused-underline-color($primary-color); + } +} + +/// Changes the bottom section of the material input to not wrap. +@mixin error-text-nowrap() { + /deep/ .error-text { + white-space: nowrap; + } +} + +@mixin material-input-no-underline() { + /deep/ .underline { + display: none; + } +} + +@mixin input-enforce-ltr() { + /deep/ { + .input, + .textarea { + /*! @noflip */ + direction: ltr; + + :host-context([dir="rtl"]) & { + /*! @noflip */ + text-align: right; + } + } + } +} + +@mixin material-input-display-focused-underline() { + /deep/ .focused-underline { + transform: scale(1); + visibility: visible; + } +} + +@mixin material-input-focused-underline-color($color) { + /deep/ .focused-underline { + background-color: $color; + } +} + +@mixin material-input-disabled-input-color($color) { + /deep/ .disabledInput { + color: $color; + } +} diff --git a/lib/src/components/material_input/material_input.scss b/lib/src/components/material_input/material_input.scss new file mode 100644 index 00000000..1d9d48fc --- /dev/null +++ b/lib/src/components/material_input/material_input.scss @@ -0,0 +1,292 @@ +/* + * 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'; + +$error-color: $mat-red-700; + +/// Default input width; chosen arbitrarily. +$default-input-width: $mat-grid * 22; + +:host { + @include display-flex(inline-flex); + @include flex-direction(column); + outline: none; + padding: $mat-grid 0; + text-align: inherit; + width: $default-input-width; + line-height: initial; +} + +.baseline { + // On Firefox, we can't have a baseline-aligned inline-flex element unless the + // contents are also inline-flex. Context[1][2]. + // + // [1]http://stackoverflow.com/a/26567760 + // [2]http://kizu.ru/en/blog/flex-baseline/ + @include display-flex(inline-flex); + @include flex-direction(column); + + // But if someone overrode the input to be display:block instead, then handle + // that too. (Otherwise this div will shrink to fit the content) + width: 100%; + + // Prevent div.underline from overlapping with div.top-section when the height + // of the textarea grows but the height of the host element is limited by its + // parent. + :host([multiline]) & { + @include flex-shrink(0); + } +} + +.focused.label-text { + color: $mat-blue-500; +} + +.focused-underline, +.cursor { + background-color: $mat-blue-500; +} + +.top-section { + @include display-flex; + @include flex-direction(row); + @include align-items(baseline); + margin-bottom: $mat-grid; +} + +.input-container { + // Grow/shrink the input really aggressively so that we never crowd out the + // padding around leading/trailing text when the input's stuffed into a space + // narrower than the default width. + @include flex-grow(100); + @include flex-shrink(100); + width: 100%; + position: relative; +} + +// Disable the clear button which only appears in IE and Edge. +// https://developer.mozilla.org/en-US/docs/Web/CSS/::-ms-clear +.input::-ms-clear { + display: none; +} + +.invalid.counter, +.invalid.label-text, +.error-text, +.focused.error-icon { + color: $error-color; +} + +.invalid.unfocused-underline, +.invalid.focused-underline, +.invalid.cursor { + background-color: $error-color; +} + +.right-align { + text-align: right; +} + +.leading-text, +.trailing-text { + padding: 0 $mat-grid-type; + white-space: nowrap; +} + +.glyph { + transform: translateY($mat-grid); + + &.leading { + margin-right: $mat-grid; + } + + &.trailing { + margin-left: $mat-grid; + } + + &[disabled = true] { + opacity: $mat-icon-dark-opacity-disabled; + } +} + +input, +textarea { + font: inherit; + color: inherit; + padding: 0; + background-color: transparent; + border: 0; + outline: none; + width: 100%; +} + +input[type="text"] { + // More specific version of above rule; needed to override AW3 styles for + // dart apps embedded in AW3. + border: 0; + outline: none; + box-shadow: none; +} + +textarea { + // fit to the container for auto-resizing + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + resize: none; + height: 100%; +} + +input:hover, +textarea:hover { + cursor: text; + box-shadow: none; +} + +input:focus, +textarea:focus { + box-shadow: none; +} + +input:invalid, +textarea:invalid { + box-shadow: none; +} + +.disabledInput { + color: $mat-lighter-transparent-black; +} + +// Hide the spinner in webkit based browsers. +input[type=number]::-webkit-inner-spin-button, +input[type=number]::-webkit-outer-spin-button { + -webkit-appearance: none; +} + +// Hide the spinner in moz based browsers. +input[type=number] { + -moz-appearance: textfield; +} + +.invisible { + visibility: hidden; +} + +.animated, +.reset { + transition: opacity $mat-transition $mat-transition-fast-slow, + transform $mat-transition $mat-transition-fast-slow, + font-size $mat-transition $mat-transition-fast-slow; +} + +.animated.label-text { + @include transform(translateY(-100%) translateY(-$mat-grid)); + font-size: $mat-caption-font-size; +} + +.leading-text.floated-label, +.trailing-text.floated-label, +.input-container.floated-label { + margin-top: $mat-grid * 2; +} + +.label { + background: transparent; + bottom: 0; + left: 0; + pointer-events: none; + position: absolute; + right: 0; + top: 0; +} + +.label-text { + @include transform-origin(0%, 0%); + color: $mat-light-transparent-black; + overflow: hidden; + display: inline-block; + max-width: 100%; + + &:not(.multiline) { + text-overflow: ellipsis; + white-space: nowrap; + } +} + +.underline { + height: 1px; + overflow: visible; +} + +.disabled-underline { + @include box-sizing; + height: 1px; + border-bottom: 1px dashed; + color: $mat-border-light; +} + +.unfocused-underline { + height: 1px; + background: $mat-border-light; + border-bottom-color: $mat-border-light; + position: relative; + top: -1px; +} + +.focused-underline { + @include transform(none); + height: 2px; + position: relative; + top: -3px; +} + +.focused-underline.invisible { + @include scale3d(0, 1, 1); +} + +.bottom-section { + @include display-flex; + @include flex-direction(row); + @include justify-content(space-between); + margin-top: $mat-grid / 2; +} + +.counter, +.error-text, +.hint-text, +.spaceholder { + font-size: $mat-caption-font-size; +} + +.spaceholder { + @include flex-grow(1); + outline: none; +} + +.counter { + color: $mat-light-transparent-black; + white-space: nowrap; +} + +.hint-text { + color: $mat-light-transparent-black; +} + +.error-icon { + height: 20px; + width: 20px; +} diff --git a/lib/src/components/material_input/material_input_multiline.scss b/lib/src/components/material_input/material_input_multiline.scss new file mode 100644 index 00000000..93145537 --- /dev/null +++ b/lib/src/components/material_input/material_input_multiline.scss @@ -0,0 +1,23 @@ +/* + * 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. + */ + +.mirror-text { + visibility: hidden; + word-wrap: break-word; + white-space: pre-wrap; +} + +.line-height-measure { + visibility: hidden; + position: absolute; +} diff --git a/lib/src/components/material_list/_mixins.scss b/lib/src/components/material_list/_mixins.scss new file mode 100644 index 00000000..be415989 --- /dev/null +++ b/lib/src/components/material_list/_mixins.scss @@ -0,0 +1,133 @@ +/* + * 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 'lib/src/css/shared/compass_polyfills'; +@import 'compass/css3'; +@import 'size'; + +@mixin list-item-base { + display: block; + font-family: inherit; + font-size: 15px; + line-height: $list-item-height; + padding: 0 $list-item-padding; + position: relative; + white-space: nowrap; + + &.disabled { + pointer-events: none; + } + + // TODO(google): Move /deep/ up to material_list_item.scss. b2/35765850 + /deep/ .material-list-item-primary { + color: $mat-light-transparent-black; + width: $list-item-primary-width; + } + + &.disabled /deep/ .material-list-item-primary { + color: $mat-lighter-transparent-black; + } + + /deep/ .material-list-item-secondary { + color: $mat-light-transparent-black; + margin-left: auto; + } + + &.disabled /deep/ .material-list-item-secondary { + color: $mat-lighter-transparent-black; + } + + /deep/ .submenu-icon { + transform: rotate(-90deg); + } +} + +@mixin list-item-button { + @include list-item-base(); + @include display-flex; + @include align-items(center); + + color: $mat-transparent-black; + cursor: pointer; + + &:not([separator="present"]) { + &:hover, + &:focus, + &.active { + background: $mat-grey-200; + } + + &.disabled { + background: none; + color: $mat-lighter-transparent-black; + cursor: default; + pointer-events: all; + } + } +} + +/// Makes the material-list under the passed $selector display with inline +/// properties. +@mixin inline-material-list($selector: '') { + #{$selector} material-list { + display: inline-block; + } +} + +/// Remove the background on hover for material-list-item. +@mixin flat-material-list() { + /deep/ material-list { + .item:hover { + @include material-item-background(none); + } + } +} + +@mixin material-item-background($background) { + /deep/ { + background: $background !important; + } +} + +/// Sets the padding of the material-list element. +@mixin material-list-padding($padding) { + /deep/ material-list { + padding: $padding; + } +} + +/// Applies the list-size-n class to the material list. This mixin can also be +/// used in situations where a parent element is required to have matching +/// width, e.g. select-suggest-input. +@mixin list-sizes { + &.list-size-1 { + width: $list-width-unit * 1.5; + } + + &.list-size-2 { + width: $list-width-unit * 3; + } + + &.list-size-3 { + width: $list-width-unit * 5; + } + + &.list-size-4 { + width: $list-width-unit * 6; + } + + &.list-size-5 { + width: $list-width-unit * 7; + } +} diff --git a/lib/src/components/material_list/_size.scss b/lib/src/components/material_list/_size.scss new file mode 100644 index 00000000..65c7b780 --- /dev/null +++ b/lib/src/components/material_list/_size.scss @@ -0,0 +1,23 @@ +/* + * 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'; + +$list-item-primary-width: $mat-grid * 5; +$list-item-height: $mat-grid * 4; +$list-item-padding: $mat-grid * 3; + +$sublist-icon-size: $mat-grid * 2; + +$list-width-unit: 64px; + diff --git a/lib/src/components/material_list/material_list.scss b/lib/src/components/material_list/material_list.scss new file mode 100644 index 00000000..9a5883e8 --- /dev/null +++ b/lib/src/components/material_list/material_list.scss @@ -0,0 +1,115 @@ +/* + * 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/transition', + 'compass/css3/flexbox'; + +@import 'mixins'; + +$border-size: 1px; + +/// Multipliers for list widths. +$x-small: 1.5; +$small: 3; +$medium: 5; +$large: 6; +$x-large: 7; + +/// Sets the width style. +@mixin _list-size($multiplier) { + width: $list-width-unit * $multiplier; +} + +/// Sets the min-width. +@mixin _list-min-size($multiplier) { + min-width: $list-width-unit * $multiplier; +} + +:host { + display: block; + background: $mat-white; + margin: 0; + padding: $mat-grid * 2 0; + white-space: nowrap; + + &[size="x-small"] { + @include _list-size($x-small); + } + + &[size="small"] { + @include _list-size($small); + } + + &[size="medium"] { + @include _list-size($medium); + } + + &[size="large"] { + @include _list-size($large); + } + + &[size="x-large"] { + @include _list-size($x-large); + } + + &[min-size="x-small"] { + @include _list-min-size($x-small); + } + + &[min-size="small"] { + @include _list-min-size($small); + } + + &[min-size="medium"] { + @include _list-min-size($medium); + } + + &[min-size="large"] { + @include _list-min-size($large); + } + + &[min-size="x-large"] { + @include _list-min-size($x-large); + } + + // TODO(google): Move these styles into mixins. b2/35765850 + /deep/ { + // Note: script tags bookend content in CSS shimmed deployment. + [group]:not(.empty) + *:not(script):not(template):not(.empty), + :not([group]):not(script):not(template):not(.empty) + [group]:not(.empty) { + border-top: $border-size solid $mat-grey-300; + margin-top: $mat-grid - $border-size; + padding-top: $mat-grid; + } + + [group]:not(.empty) + *:not(script):not(template):not(.empty) { + // Padding makes the hover background too large, so we draw over it to + // compensate. + box-shadow: inset 0 $mat-grid 0 0 $mat-white; + } + + [separator='present'] { + background: $mat-grey-300; + cursor: default; + height: $border-size; + margin: $mat-grid 0; + } + + [label] { + @include list-item-base(); + color: $mat-grey-500; + @include mat-type-caption(); + } + } +} diff --git a/lib/src/components/material_list/material_list_item.scss b/lib/src/components/material_list/material_list_item.scss new file mode 100644 index 00000000..161ac985 --- /dev/null +++ b/lib/src/components/material_list/material_list_item.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. + */ + +/* + * 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 'mixins'; + +:host { + @include list-item-button(); + outline: none; +} diff --git a/lib/src/components/material_popup/_mixins.scss b/lib/src/components/material_popup/_mixins.scss new file mode 100644 index 00000000..f1a757a8 --- /dev/null +++ b/lib/src/components/material_popup/_mixins.scss @@ -0,0 +1,57 @@ +/* + * 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 'lib/src/css/mixins'; + +$popup-border-radius: 2px; +$bg-color: $mat-white; +$bg-color-ink: $mat-grey-700; + +/// Applies custom border radius on . +/// +/// Example Usage: +/// +/// +/// +/// @include popup-border-radius('.my-selector', 4px, 4px, 4px, 4px); +@mixin popup-border-radius($selector: '', + $top-right: $popup-border-radius, + $top-left: $popup-border-radius, + $bottom-right: $popup-border-radius, + $bottom-left: $popup-border-radius) { + /deep/ .popup-wrapper.mixin#{$selector} { + border-radius: $top-left $top-right $bottom-right $bottom-left; + } +} + +/// Applies custom background-color on . +/// +/// Example Usage: +/// +/// +/// +/// @include popup-background-color('.my-selector', $mat-green); +@mixin popup-background-color($selector, $bg-color) { + /deep/ .popup-wrapper.mixin#{$selector}.shadow { + background: $bg-color; + } +} + +/// Themes the primary color for all material-popup, only used for scrollbar +/// thumb so far. +@mixin material-popup-theme($primary-color) { + /deep/ material-popup { + @include material-scrollbar-theme($primary-color); + } +} diff --git a/lib/src/components/material_popup/material_popup.scss b/lib/src/components/material_popup/material_popup.scss new file mode 100644 index 00000000..ce4d44ba --- /dev/null +++ b/lib/src/components/material_popup/material_popup.scss @@ -0,0 +1,99 @@ +/* + * 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/components/material_shadow/css/shadow'; +@import 'lib/src/css/material/material'; +@import 'compass/css3/flexbox'; +@import 'lib/src/css/mixins'; +@import 'mixins'; + +/// To get proper Material styling, the DOM of the component must have a +/// `.shadow` element and toggle the class `visible`. +.shadow { + @include material-shadow; + background: $bg-color; + border-radius: $popup-border-radius; + transition: transform $mat-transition $mat-transition-fast-linear; + /*! @noflip */ + transform-origin: top left; + transform: scale3d(0, 0, 1); + will-change: transform; + + &[slide=x] { + /*! @noflip */ + transform: scale3d(0, 1, 1); + } + + &[slide=y] { + /*! @noflip */ + transform: scale3d(1, 0, 1); + } + + &.visible { + transition: transform $mat-transition $mat-transition-linear-slow; + transform: scale3d(1, 1, 1); + } + + &.ink { + background: $bg-color-ink; + color: $mat-white; + } + + &.full-width { + @include flex-grow(1); + @include flex-shrink(1); + // Need auto to work in IE. + @include flex-basis(auto); + } + + .popup { + border-radius: $popup-border-radius; + @include flex-grow(1); + @include flex-shrink(1); + // Need auto to work in IE. + @include flex-basis(auto); + overflow: hidden; + transition: inherit; + } + + &.visible .popup { + visibility: initial; + } + + header, + footer { + display: block; + } + + main { + @include display-flex(); + @include flex-direction(column); + overflow: auto; + } +} + +:host { + @include material-scrollbar-theme($mat-blue); +} + +.material-popup-content { + max-width: inherit; + max-height: inherit; + position: relative; + @include display-flex(); + @include flex-direction(column); +} + +.popup-wrapper { + width: 100%; +} diff --git a/lib/src/components/material_progress/_mixins.scss b/lib/src/components/material_progress/_mixins.scss new file mode 100644 index 00000000..d576104e --- /dev/null +++ b/lib/src/components/material_progress/_mixins.scss @@ -0,0 +1,40 @@ +/* + * 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. + */ + +/// Changes the `$indeterminate-, @active- and $seconday-color` of s. +/// +/// Example use: @include material-progress-theme( +/// $indeterminate-color: $mat-teal-100, +/// $active-color: $mat-blue-500, +// $secondary-color: $mat-blue-200); +@mixin material-progress-theme($indeterminate-color, $active-color, $secondary-color) { + // Use component's selector with the themeable class to increase theme + // selector's priority. + /deep/ material-progress { + .progress-container.indeterminate { + background-color: $indeterminate-color; + } + + .progress-container.indeterminate > .secondary-progress { + background-color: $active-color; + } + + .active-progress { + background-color: $active-color; + } + + .secondary-progress { + background-color: $secondary-color; + } + } +} diff --git a/lib/src/components/material_progress/material_progress.scss b/lib/src/components/material_progress/material_progress.scss new file mode 100644 index 00000000..1e15ea7a --- /dev/null +++ b/lib/src/components/material_progress/material_progress.scss @@ -0,0 +1,104 @@ +/* + * 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. + */ + +// These styles are based on the original material progress styles in +// go/spec https://spec.googleplex.com/quantum/components/progress-activity.html + +// Leading zeros avoid confusion in the keyframes. +// scss-lint:disable LeadingZero + +@import +'lib/src/css/material/material', +'compass/css3/animation', +'compass/css3/transform'; + +$indeterminate-duration: 2000ms; + +:host { + display: inline-block; + width: 100%; + height: $mat-grid-type; +} + +.progress-container { + position: relative; + height: 100%; + background-color: $mat-grey-300; + overflow: hidden; + + :host-context([dir="rtl"]) & { + transform: scaleX(-1); + } +} + +.progress-container.indeterminate { + background-color: $mat-blue-100; +} + +.progress-container.indeterminate > .secondary-progress { + background-color: $mat-blue-500; +} + +/*! @noflip */ +.active-progress, +.secondary-progress { + @include transform-origin(left, center); + @include transform(scaleX(0)); + + position: absolute; + top: 0; + transition: transform $mat-transition $mat-transition-fast-slow; + right: 0; + bottom: 0; + left: 0; + will-change: transform; +} + +.active-progress { + background-color: $mat-blue-500; +} + +.secondary-progress { + background-color: $mat-blue-200; +} + +.progress-container.indeterminate.fallback > .active-progress { + @include animation-name(indeterminate-active-progress); + @include animation-duration($indeterminate-duration); + @include animation-iteration-count(infinite); + @include animation-timing-function(linear); +} + +.progress-container.indeterminate.fallback > .secondary-progress { + @include animation-name(indeterminate-secondary-progress); + @include animation-duration($indeterminate-duration); + @include animation-iteration-count(infinite); + @include animation-timing-function(linear); +} + +/*! @noflip */ +@include keyframes(indeterminate-active-progress) { + 0% { @include transform(translate(0%) scaleX(0)); } + 25% { @include transform(translate(0%) scaleX(0.5)); } + 50% { @include transform(translate(25%) scaleX(0.75)); } + 75% { @include transform(translate(100%) scaleX(0)); } + 100% { @include transform(translate(100%) scaleX(0)); } +} + +/*! @noflip */ +@include keyframes(indeterminate-secondary-progress) { + 0% { @include transform(translate(0%) scaleX(0)); } + 60% { @include transform(translate(0%) scaleX(0)); } + 80% { @include transform(translate(0%) scaleX(0.6)); } + 100% { @include transform(translate(100%) scaleX(0.1)); } +} diff --git a/lib/src/components/material_radio/_mixins.scss b/lib/src/components/material_radio/_mixins.scss new file mode 100644 index 00000000..217d8576 --- /dev/null +++ b/lib/src/components/material_radio/_mixins.scss @@ -0,0 +1,28 @@ +/* + * 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. + */ + +/// Changes the `$primary-color` in the material-radio. +/// +/// Optionally specify a `$selector`. Example usage: +/// @include material-radio-theme( +/// $primary-color: $mat-teal-500, +/// $selector: '.custom-area'); +@mixin material-radio-theme($primary-color, $selector: '') { + /deep/ #{$selector} material-radio.themeable .icon-container.checked { + .icon, + .ripple { + color: $primary-color; + } + } +} + diff --git a/lib/src/components/material_radio/material_radio.scss b/lib/src/components/material_radio/material_radio.scss new file mode 100644 index 00000000..88790db0 --- /dev/null +++ b/lib/src/components/material_radio/material_radio.scss @@ -0,0 +1,85 @@ +/* + * 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 'lib/src/css/shared/compass_polyfills'; +@import 'compass/css3/flexbox'; + +// Adjust margin to keep icon and ripple centered. +$ripple-left: -$mat-grid; +$ripple-top: -$mat-grid; + +:host { + @include align-items(baseline); + cursor: pointer; + @include display-flex(inline-flex); + margin: $mat-grid; + + &[no-ink] .ripple { + display: none; + } + + &:focus { + outline: none; + } + + // Radio is disabled. + &.disabled { + color: $mat-lightest-transparent-black; + cursor: not-allowed; + } +} + +.icon-container { + @include flex(none); + height: $mat-grid * 3; + position: relative; + color: $mat-light-transparent-black; + + &.checked { + color: $mat-blue-500; + } + + &.disabled { + color: $mat-lightest-transparent-black; + } + + .icon { + display: inline-block; + vertical-align: -$mat-grid; + } + + &.focus::after, + .ripple { + $size: $mat-grid * 5; + border-radius: $size / 2; + height: $size; + left: $ripple-left; + position: absolute; + top: $ripple-top; + width: $size; + } + + &.focus::after { + content: ''; + display: block; + background-color: currentColor; + opacity: $mat-divider-opacity; + } +} + +.content { + @include align-items(center); + @include flex(auto); + margin-left: $mat-grid; +} diff --git a/lib/src/components/material_radio/material_radio_group.scss b/lib/src/components/material_radio/material_radio_group.scss new file mode 100644 index 00000000..9324bbf6 --- /dev/null +++ b/lib/src/components/material_radio/material_radio_group.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. + */ + +/* + * 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/shared/compass_polyfills'; +@import 'compass/css3/flexbox'; + +:host { + outline: none; + @include align-items(flex-start); +} diff --git a/lib/src/components/material_ripple/material_ripple.scss b/lib/src/components/material_ripple/material_ripple.scss new file mode 100644 index 00000000..3eef673e --- /dev/null +++ b/lib/src/components/material_ripple/material_ripple.scss @@ -0,0 +1,70 @@ +/* + * 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 'compass/css3'; +@import 'lib/src/css/material/material'; + +$min-ripple-size: 32px; +$ripple-size: 256px; +$max-ripple-size: 1024px; + +$min-ripple-opacity: 0; +$max-ripple-opacity: $mat-ripple-opacity; + +material-ripple { + display: block; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + overflow: hidden; + border-radius: inherit; + contain: strict; + + // Create a new stacking context so that ripples are contained within + // non-rectangular containers. + transform: translateX(0); +} + +.__acx-ripple { + position: absolute; + width: $ripple-size; + height: $ripple-size; + background-color: currentColor; + border-radius: 50%; + pointer-events: none; + will-change: opacity, transform; + opacity: $min-ripple-opacity; + + &.fallback { + @include animation(__acx-ripple $mat-transition-slow linear); + @include transform(translateZ(0)); + } +} + +@include keyframes(__acx-ripple) { + from { + opacity: $min-ripple-opacity; + @include transform(translateZ(0) scale($min-ripple-size / $ripple-size)); + } + + 20%, 40% { + opacity: $max-ripple-opacity; + } + + to { + opacity: $min-ripple-opacity; + @include transform(translateZ(0) scale($max-ripple-size / $ripple-size)); + } +} diff --git a/lib/src/components/material_select/_mixins.scss b/lib/src/components/material_select/_mixins.scss new file mode 100644 index 00000000..1c92a85c --- /dev/null +++ b/lib/src/components/material_select/_mixins.scss @@ -0,0 +1,77 @@ +/* + * 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 'compass/css3/flexbox'; +@import 'lib/src/css/material/material'; + +/// Shared styles for material-select-item and material-select-dropdown-item. +@mixin select-item-base { + padding: 0 (2 * $mat-grid); + + &:hover, + &.active { + background: $mat-grey-100; + } + + &:not(.multiselect).selected { + background: $mat-grey-200; + } + + .selected-accent { + position: absolute; + top: 0; + left: 0; + bottom: 0; + width: 3px; + background: $mat-grey-500; + } + + material-checkbox { + margin: 0; + } +} + +/// Hides underline for button text from dropdown-button widget and override +/// icon opacity. This makes the dropdown button appears as a button rather +/// than an input. +@mixin button-look { + /deep/ .button.border { + border-bottom: 0; + padding-bottom: 0; + } + + /deep/ .button .icon { + opacity: initial; + } +} + +/// Adds spacing between text and icon in dropdown button. +@mixin dropdown-icon-spacing($spacing) { + /deep/ .icon { + margin-left: $spacing; + } +} + +/// Allow the button text to wrap instead of ellipsis. +@mixin button-text-wrap { + /deep/ .button.border .button-text { + white-space: normal; + } +} + +/// Allow the icon to be shown without truncated. +@mixin icon-overflow-visible { + /deep/ .icon { + overflow: visible; + } +} diff --git a/lib/src/components/material_select/dropdown_button.scss b/lib/src/components/material_select/dropdown_button.scss new file mode 100644 index 00000000..60563424 --- /dev/null +++ b/lib/src/components/material_select/dropdown_button.scss @@ -0,0 +1,88 @@ +/* + * 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 'lib/src/css/shared/compass_polyfills'; +@import 'compass/css3/flexbox'; + +$icon-size: $mat-grid * 3; + +:host { + @include display-flex(inline-flex); + @include flex(1); + min-height: $icon-size; + overflow: hidden; +} + +.button { + @include display-flex; + @include align-items(center); + @include justify-content(space-between); + @include flex(1); + line-height: initial; + overflow: hidden; + + &.border { + border-bottom: 1px solid $mat-border-light; + + // Throw some padding-bottom here so that the underline aligns with that of + // material-input. + padding-bottom: $mat-grid; + + &.is-disabled { + border-bottom-style: dotted; + } + } + + &.is-disabled { + color: $mat-lighter-transparent-black; + } + + .button-text { + @include flex(1); + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } +} + +// OK, so here's the thing. The dropdown arrow icon is actually pretty small, +// but it still takes up 24x24px as far as the DOM is concerned. This isn't an +// issue normally because it's all whitespace, so it looks fine. +// +// But in Chrome, the actual shape will be revealed if you tab into the dropdown +// button, and it's pretty ugly. Setting overflow:hidden on the button will fix +// that -- but then that breaks baseline alignment in Firefox! +// +// So here's a ridiculous hack to make it look nice in both Chrome and Firefox. +@mixin icon-focus-highlight-hack { + // First let's set a smaller size on the glyph for the purposes of layout. + // The icon will still be visible thanks to a visible overflow. + $hacked-height: $icon-size / 2; + height: $hacked-height; + + /deep/ i.material-icons-extended { + // Finally let's adjust the position of the glyph itself to compensate for + // the smaller size of the glyph element. (This assumes center alignment) + position: relative; + top: -($icon-size - $hacked-height) / 2; + } +} + +.icon { + @include icon-focus-highlight-hack; + + opacity: $mat-icon-opacity; + margin-top: -$icon-size / 2; + margin-bottom: -$icon-size / 2; +} diff --git a/lib/src/components/material_select/material_dropdown_select.scss b/lib/src/components/material_select/material_dropdown_select.scss new file mode 100644 index 00000000..e324a53e --- /dev/null +++ b/lib/src/components/material_select/material_dropdown_select.scss @@ -0,0 +1,38 @@ +/* + * 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 'lib/src/css/shared/compass_polyfills'; +@import 'lib/src/components/material_list/mixins'; +@import 'compass/css3/flexbox'; + +:host { + @include display-flex(inline-flex); +} + +/deep/ material-dropdown-select material-list // deep required + material-list-item-dropdown material-list-item > [list-item] { + // offset labels for cascade parent items so that they align with normal + // select items, which have a 36px wide glyph "in front" of their label + margin-left: $list-item-primary-width; +} + +.options-list { + @include display-flex(); + @include flex-direction(column); + @include flex(1 0 auto); + + .options-wrapper { + @include flex-direction(column); + } +} diff --git a/lib/src/components/material_select/material_select.scss b/lib/src/components/material_select/material_select.scss new file mode 100644 index 00000000..617e7e55 --- /dev/null +++ b/lib/src/components/material_select/material_select.scss @@ -0,0 +1,28 @@ +/* + * 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/shared/compass_polyfills'; +@import 'compass/css3/flexbox'; + +:host, +material-list, +.options-wrapper, +div[group] { + @include display-flex(inline-flex); +} + +material-list, +div[group] { + @include flex-grow(1); + @include flex-direction(column); +} diff --git a/lib/src/components/material_select/material_select_dropdown_item.scss b/lib/src/components/material_select/material_select_dropdown_item.scss new file mode 100644 index 00000000..624761a0 --- /dev/null +++ b/lib/src/components/material_select/material_select_dropdown_item.scss @@ -0,0 +1,43 @@ +/* + * 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/shared/compass_polyfills'; +@import 'lib/src/components/material_list/mixins'; +@import 'compass/css3/flexbox'; +@import 'mixins'; + +:host { + @include list-item-base(); + @include select-item-base(); + @include display-flex; + @include align-items(center); + @include transition(background); + + color: $mat-transparent-black; + cursor: pointer; + + &.disabled { + background: none; + color: $mat-lighter-transparent-black; + cursor: default; + } +} + +.check-container { + display: inline-block; + width: $mat-grid * 5; +} + +.dynamic-item { + @include flex-grow(1); +} diff --git a/lib/src/components/material_select/material_select_item.scss b/lib/src/components/material_select/material_select_item.scss new file mode 100644 index 00000000..6e2c93e4 --- /dev/null +++ b/lib/src/components/material_select/material_select_item.scss @@ -0,0 +1,32 @@ +/* + * 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/shared/compass_polyfills'; +@import 'lib/src/components/material_list/mixins'; +@import 'compass/css3/flexbox'; +@import 'mixins'; + +:host { + @include list-item-button(); + @include select-item-base(); + outline: none; +} + +.check-container { + display: inline-block; + width: $mat-grid * 5; +} + +.dynamic-item { + @include flex-grow(1); +} diff --git a/lib/src/components/material_shadow/css/_shadow.scss b/lib/src/components/material_shadow/css/_shadow.scss new file mode 100644 index 00000000..4a6e5434 --- /dev/null +++ b/lib/src/components/material_shadow/css/_shadow.scss @@ -0,0 +1,122 @@ +/* + * 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. + */ + +// A common set of SASS styles to apply MD shadows. +// Evolved from +// https://github.com/PolymerElements/paper-styles/blob/master/shadow.html + + +// Applies a standard transition style for box-shadow to box-shadow. +@mixin shadow-transition() { + transition: box-shadow .28s cubic-bezier(.4, 0, .2, 1); +} + +// Disables box-shadow. +@mixin shadow-none { + box-shadow: none; +} + +// Some opacity values that are common here. Maybe pull this out too? +$keyUmbraOpacity: .2; +$keyPenumbraOpacity: .14; +$ambientShadowOpacity: .12; + +/// Applies a standard shadow to the selected element(s). +/// +/// This rule is great for things that need a static shadow. If the elevation +/// of the shadow needs to be changed dynamically, use the `material-shadow` +/// rule below. +/// +/// Valid values: 2, 3, 4, 6, 8, 16, 24 +@mixin shadow-elevation($dp: 2) { + @if $dp == 2 { + /*! @noflip */ + box-shadow: 0 2px 2px 0 rgba(0, 0, 0, $keyPenumbraOpacity), + 0 3px 1px -2px rgba(0, 0, 0, $ambientShadowOpacity), + 0 1px 5px 0 rgba(0, 0, 0, $keyUmbraOpacity); + } @else if $dp == 3 { + /*! @noflip */ + box-shadow: 0 3px 4px 0 rgba(0, 0, 0, $keyPenumbraOpacity), + 0 3px 3px -2px rgba(0, 0, 0, $ambientShadowOpacity), + 0 1px 8px 0 rgba(0, 0, 0, $keyUmbraOpacity); + } @else if $dp == 4 { + /*! @noflip */ + box-shadow: 0 4px 5px 0 rgba(0, 0, 0, $keyPenumbraOpacity), + 0 1px 10px 0 rgba(0, 0, 0, $ambientShadowOpacity), + 0 2px 4px -1px rgba(0, 0, 0, $keyUmbraOpacity); + } @else if $dp == 6 { + /*! @noflip */ + box-shadow: 0 6px 10px 0 rgba(0, 0, 0, $keyPenumbraOpacity), + 0 1px 18px 0 rgba(0, 0, 0, $ambientShadowOpacity), + 0 3px 5px -1px rgba(0, 0, 0, $keyUmbraOpacity); + } @else if $dp == 8 { + /*! @noflip */ + box-shadow: 0 8px 10px 1px rgba(0, 0, 0, $keyPenumbraOpacity), + 0 3px 14px 2px rgba(0, 0, 0, $ambientShadowOpacity), + 0 5px 5px -3px rgba(0, 0, 0, $keyUmbraOpacity); + } @else if $dp == 16 { + /*! @noflip */ + box-shadow: 0 16px 24px 2px rgba(0, 0, 0, $keyPenumbraOpacity), + 0 6px 30px 5px rgba(0, 0, 0, $ambientShadowOpacity), + 0 8px 10px -5px rgba(0, 0, 0, $keyUmbraOpacity); + } @else if $dp == 24 { + /*! @noflip */ + box-shadow: 0 24px 38px 3px rgba(0, 0, 0, $keyPenumbraOpacity), + 0 9px 46px 8px rgba(0, 0, 0, $ambientShadowOpacity), + 0 11px 15px -7px rgba(0, 0, 0, $keyUmbraOpacity); + } +} + +/// Applies the Material Shadow styles to the selected element. +/// +/// Use the attributes below to control the shadow. +/// +/// - `animated` -- Whether to animate the shadow transition. +/// - `elevation` -- Z-elevation of shadow. Valid Values: 1,2,3,4,5 +/// +/// Example: +/// +/// .shadow-box { +/// @include material-shadow(); +/// } +/// +///
...
+@mixin material-shadow() { + &[animated] { + @include shadow-transition(); + } + + &[elevation="1"] { + @include shadow-elevation(2); + } + + &[elevation="2"] { + @include shadow-elevation(4); + } + + &[elevation="3"] { + @include shadow-elevation(6); + } + + &[elevation="4"] { + @include shadow-elevation(8); + } + + &[elevation="5"] { + @include shadow-elevation(16); + } + + &[elevation="6"] { + @include shadow-elevation(24); + } +} diff --git a/lib/src/components/material_spinner/material_spinner.scss b/lib/src/components/material_spinner/material_spinner.scss new file mode 100644 index 00000000..73648854 --- /dev/null +++ b/lib/src/components/material_spinner/material_spinner.scss @@ -0,0 +1,121 @@ +/* + * 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/shared/compass_polyfills'; +@import 'lib/src/css/material/material'; +@import 'compass/css3/animation'; + +// These styles are based on the Polymer paper spinner: +// https://github.com/Polymer/paper-spinner/blob/master/paper-spinner.css + +$spinner-color: $mat-blue; +$spinner-width: 28px; +$stroke-width: 3px; + +:host { + @include animation(rotate 1568ms linear infinite); + border-color: $spinner-color; + display: inline-block; + height: $spinner-width; + position: relative; + vertical-align: middle; + width: $spinner-width; +} + +.spinner { + @include animation(fill-unfill-rotate 5332ms $mat-transition-fast-slow infinite both); + border-color: inherit; + height: 100%; + display: flex; + position: absolute; + width: 100%; +} + +.circle { + border-color: inherit; + height: 100%; + overflow: hidden; + position: relative; + width: 50%; + + &::before { + border-bottom-color: transparent !important; + border-color: inherit; + border-radius: 50%; + border-style: solid; + border-width: $stroke-width; + bottom: 0; + box-sizing: border-box; + content: ''; + height: 100%; + left: 0; + position: absolute; + right: 0; + top: 0; + width: 200%; + } + + &.left::before { + @include animation(left-spin 1333ms $mat-transition-fast-slow infinite both); + border-right-color: transparent; + transform: rotate(129deg); + } + + &.right::before { + @include animation(right-spin 1333ms $mat-transition-fast-slow infinite both); + border-left-color: transparent; + left: -100%; + transform: rotate(-129deg); + } + + &.gap { + height: 50%; + left: 45%; + position: absolute; + top: 0; + width: 10%; + + &::before { + height: 200%; + left: -450%; + width: 1000%; + } + } +} + +@include keyframes(rotate) { + to { transform: rotate(360deg); } +} + +@include keyframes(fill-unfill-rotate) { + 12.5% { transform: rotate(135deg); } + 25% { transform: rotate(270deg); } + 37.5% { transform: rotate(405deg); } + 50% { transform: rotate(540deg); } + 62.5% { transform: rotate(675deg); } + 75% { transform: rotate(810deg); } + 87.5% { transform: rotate(945deg); } + to { transform: rotate(1080deg); } +} + +@include keyframes(left-spin) { + from { transform: rotate(130deg); } + 50% { transform: rotate(-5deg); } + to { transform: rotate(130deg); } +} + +@include keyframes(right-spin) { + from { transform: rotate(-130deg); } + 50% { transform: rotate(5deg); } + to { transform: rotate(-130deg); } +} diff --git a/lib/src/components/material_tab/_mixins.scss b/lib/src/components/material_tab/_mixins.scss new file mode 100644 index 00000000..f9c3341f --- /dev/null +++ b/lib/src/components/material_tab/_mixins.scss @@ -0,0 +1,122 @@ +/* + * 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. + */ + +// SASS mixins that deal with the material tab panel. + +@import 'lib/src/css/material/material'; + +// Allows users of the tab panel component to define the width and tab +// colors(selected and unselected) for the tabs in the panel. +// +// Example usage: +// +// @include tab-panel-tab-width('component', $tab-width); +// @include tab-panel-color('component', $color, $accent-color); + +$_panelNaviBar: 'material-tab-panel.themeable .navi-bar'; +$_naviBtn: 'material-button.navi-button'; +$_naviBtnSel: 'material-button[aria-selected=true].navi-button'; + +$_fixedStripNaviBar: 'material-tab-strip.themeable .navi-bar'; +$_scrollingStripNaviBar: + 'scrolling-material-tab-strip.themeable .navi-bar'; +$_tabBtnSel: '.tab-button'; +$_activeTabBtnSel: $_tabBtnSel + '.active'; +$_focusTabBtnSel: $_tabBtnSel + '.focus'; + +/// Sets the width of the tab-strip within a tab panel. +@mixin tab-panel-tab-strip-width($selector, $tab-width) { + #{$selector} /deep/ material-tab-strip { + width: $tab-width; + } +} + +// Tab Panel +// Sets the dafault color, selected tab color and selected tab indicator color +// @Deprecated: use tab-strip-color directly instead. +@mixin tab-panel-color($selector, $color, $accent-color) { + @include tab-panel-tab-color($selector, $color); + @include tab-panel-accent-color($selector, $accent-color); +} + +// Sets the selected tab color and selected tab indicator color +// @Deprecated: use tab-strip-accent-color directly. +@mixin tab-panel-accent-color($selector, $accent-color) { + @include tab-strip-accent-color($selector, $accent-color); +} + +// Sets the default tab color +// @Deprecated: use tab-strip-tab-color directly. +@mixin tab-panel-tab-color($selector, $color) { + @include tab-strip-tab-color($selector, $color); +} + +// Sets the selected tab color +// @Deprecated: use tab-strip-selected-tab-color directly. +@mixin tab-panel-selected-tab-color($selector, $color) { + @include tab-strip-selected-tab-color($selector, $color); +} + +// Sets the selected tab indicator color +// @Deprecated: use tab-strip-indicator-color directly. +@mixin tab-panel-indicator-color($selector, $accent-color) { + @include tab-strip-indicator-color($selector, $accent-color); +} + +// Tab Strip +// Sets the dafault color, selected tab color and selected tab indicator color +@mixin tab-strip-color($selector, $color, $accent-color) { + @include tab-strip-tab-color($selector, $color); + @include tab-strip-accent-color($selector, $accent-color); +} + +// Sets the selected tab color and selected tab indicator color +@mixin tab-strip-accent-color($selector, $accent-color) { + @include tab-strip-selected-tab-color($selector, $accent-color); + @include tab-strip-indicator-color($selector, $accent-color); +} + +// Sets the default tab color +@mixin tab-strip-tab-color($selector, $color) { + /deep/ #{$selector} #{$_fixedStripNaviBar} #{$_tabBtnSel} { + color: $color; + } + + /deep/ #{$selector} #{$_scrollingStripNaviBar} #{$_tabBtnSel} { + color: $color; + } +} + +// Sets the selected tab color +@mixin tab-strip-selected-tab-color($selector, $color) { + /deep/ #{$selector} #{$_fixedStripNaviBar} #{$_activeTabBtnSel}, + /deep/ #{$selector} #{$_fixedStripNaviBar} #{$_focusTabBtnSel} { + color: $color; + } + + /deep/ #{$selector} #{$_scrollingStripNaviBar} #{$_activeTabBtnSel}, + /deep/ #{$selector} #{$_scrollingStripNaviBar} #{$_focusTabBtnSel} { + color: $color; + } +} + +// Sets the selected tab indicator color +@mixin tab-strip-indicator-color($selector, $accent-color) { + /deep/ #{$selector} #{$_fixedStripNaviBar} .tab-indicator { + background: $accent-color; + } + + /deep/ #{$selector} #{$_scrollingStripNaviBar} .tab-indicator { + background: $accent-color; + } +} diff --git a/lib/src/components/material_tab/fixed_material_tab_strip.scss b/lib/src/components/material_tab/fixed_material_tab_strip.scss new file mode 100644 index 00000000..b7ca9e6b --- /dev/null +++ b/lib/src/components/material_tab/fixed_material_tab_strip.scss @@ -0,0 +1,53 @@ +/* + * 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 'compass/css3/transform'; + +// TODO(google): Extract and share values with scrolling tab strip. +$tab-indicator-height: $mat-grid * .25; +$navi-bar-margin: -1 * $tab-indicator-height; + +:host { + @include display-flex(); + @include flex-shrink(0); + width: 100%; +} + +.navi-bar { + @include display-flex(); + margin: 0; + overflow: hidden; + padding: 0; + position: relative; + white-space: nowrap; + width: 100%; + + .tab-button { + @include flex(1); + overflow: hidden; + margin: 0; + } +} + +.tab-indicator { + @include transform-origin(left, center); + background: $mat-blue-500; + bottom: 0; + left: 0; + right: 0; + height: $tab-indicator-height; + position: absolute; + transition: transform $mat-transition-fast-slow $mat-transition-slow; +} diff --git a/lib/src/components/material_tab/material_tab.scss b/lib/src/components/material_tab/material_tab.scss new file mode 100644 index 00000000..a44074b2 --- /dev/null +++ b/lib/src/components/material_tab/material_tab.scss @@ -0,0 +1,34 @@ +/* + * 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 'compass/css3/flexbox'; +@import 'lib/src/components/material_shadow/css/shadow'; +@import 'lib/src/css/material/material'; + +:host { + @include display-flex; +} + +:host:focus { + outline: none; +} + +:host(.material-tab) { + padding: $mat-grid * 2; + @include shadow-elevation(); +} + +.tab-content { + @include display-flex(); + @include flex(0 0 100%); +} diff --git a/lib/src/components/material_tab/material_tab_panel.scss b/lib/src/components/material_tab/material_tab_panel.scss new file mode 100644 index 00000000..f17df597 --- /dev/null +++ b/lib/src/components/material_tab/material_tab_panel.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. + */ + +/* + * 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; + + &[centerStrip] > material-tab-strip { + margin: 0 auto; + } +} diff --git a/lib/src/components/material_tab/tab_button.scss b/lib/src/components/material_tab/tab_button.scss new file mode 100644 index 00000000..23f141f4 --- /dev/null +++ b/lib/src/components/material_tab/tab_button.scss @@ -0,0 +1,54 @@ +/* + * 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 'lib/src/components/material_button/mixins'; + +$tab-button-height: $mat-grid * 6; + +:host { + @include button-base(); + @include display-flex(inline-flex); + @include justify-content(center); + @include align-items(center); + + height: $tab-button-height; + font-weight: $mat-font-weight-medium; + color: $mat-gray-700; + + &.active, + &.focus { + color: $mat-blue-500; + } + + &.focus::after { + content: ''; + display: block; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-color: currentColor; + opacity: $mat-ripple-opacity; + pointer-events: none; + } +} + +.content { + display: inline-block; + overflow: hidden; + padding: $mat-grid; + text-overflow: ellipsis; + white-space: nowrap; +} diff --git a/lib/src/components/material_toggle/_mixins.scss b/lib/src/components/material_toggle/_mixins.scss new file mode 100644 index 00000000..99837bc3 --- /dev/null +++ b/lib/src/components/material_toggle/_mixins.scss @@ -0,0 +1,35 @@ +/* + * 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. + */ + +/// Changes the `$off-btn-color` and `$primary-color` of s. +/// +/// Optionally specify a `$selector`. Example use: +/// @include material-toggle-theme( +/// $primary-color: $mat-teal-500, +/// $off-btn-color: $mat-teal-500, +/// $selector: '.custom-area'); +@mixin material-toggle-theme($primary-color, $off-btn-color: null, $selector: '') { + @if $off-btn-color != null { + /deep/ #{$selector} material-toggle.themeable .material-toggle .tgl-btn { + background-color: $off-btn-color; + } + } + + /deep/ #{$selector} material-toggle.themeable .material-toggle.checked .tgl-bar { + background-color: $primary-color; + } + + /deep/ #{$selector} material-toggle.themeable .material-toggle.checked .tgl-btn { + background-color: $primary-color; + } +} diff --git a/lib/src/components/material_toggle/material_toggle.scss b/lib/src/components/material_toggle/material_toggle.scss new file mode 100644 index 00000000..2dff2921 --- /dev/null +++ b/lib/src/components/material_toggle/material_toggle.scss @@ -0,0 +1,129 @@ +/* + * 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 'compass/css3/transform'; +@import 'compass/css3/transition'; +@import 'lib/src/components/material_shadow/css/shadow'; + +$default-on-color: $mat-teal-500; +$off-btn-color: $mat-grey-50; +$off-bar-color: rgba(0, 0, 0, .26); +$disabled-btn-color: $mat-grey-400; +$disabled-bar-color: rgba(0, 0, 0, .12); + +$container-size: $mat-grid * 4.5; +$button-size: $mat-grid * 2.5; +$bar-height: $mat-grid * 1.75; +$vertical-space: $mat-grid * .25; + +:host { + display: inline-block; + text-align: initial; +} + +.material-toggle { + @include display-flex(inline-flex); + @include align-items(center); + @include justify-content(flex-end); + + cursor: pointer; + outline: none; + width: 100%; +} + +.material-toggle.disabled { + pointer-events: none; +} + +.tgl-container { + display: inline-block; + min-width: $container-size; + position: relative; + vertical-align: middle; + width: $container-size; + +} + +.tgl-bar { + @include transition( + background-color $mat-transition-fast $mat-transition-fast-slow, + opacity $mat-transition-fast $mat-transition-fast-slow); + @include material-shadow; + + background-color: $off-bar-color; + border-radius: $mat-grid; + height: $bar-height; + margin: $vertical-space 0; + width: 100%; +} + +.material-toggle.checked .tgl-bar { + background-color: $default-on-color; + opacity: .5; +} + +.tgl-btn-container { + @include display-flex(inline-flex); + @include justify-content(flex-end); + @include transition(width $mat-transition-fast $mat-transition-fast-slow); + margin-top: -2px; + position: absolute; + top: 0; + width: $button-size; +} + +.material-toggle.checked .tgl-btn-container { + width: $container-size; +} + +.tgl-btn { + @include + transition(background-color $mat-transition-fast $mat-transition-fast-slow); + @include material-shadow; + + background-color: $off-btn-color; + border-radius: 50%; + height: $button-size; + position: relative; + width: $button-size; +} + +.material-toggle.checked .tgl-btn { + background-color: $default-on-color; +} + +.tgl-lbl { + @include flex-grow(1); + display: inline-block; + padding: $vertical-space $mat-grid $vertical-space 0; + position: relative; + vertical-align: middle; + white-space: normal; +} + +.material-toggle.disabled .tgl-lbl { + opacity: $mat-opacity-light; +} + + +.material-toggle.disabled .tgl-btn, +.material-toggle.checked.disabled .tgl-btn { + background-color: $disabled-btn-color; +} + +.material-toggle.disabled .tgl-bar, +.material-toggle.checked.disabled .tgl-bar { + background-color: $disabled-bar-color; +} diff --git a/lib/src/components/material_tooltip/_mixins.scss b/lib/src/components/material_tooltip/_mixins.scss new file mode 100644 index 00000000..1e3c2cc0 --- /dev/null +++ b/lib/src/components/material_tooltip/_mixins.scss @@ -0,0 +1,30 @@ +/* + * 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. + */ + +/// Exposes the glyph color of . +@mixin material-icon-tooltip-theme($primary-color, + $active-color: $primary-color) { + + /deep/ material-icon-tooltip { + glyph { + color: $primary-color; + } + + &:hover, + &:focus { + glyph { + color: $active-color; + } + } + } +} diff --git a/lib/src/components/material_tooltip/src/_constants.scss b/lib/src/components/material_tooltip/src/_constants.scss new file mode 100644 index 00000000..642e208a --- /dev/null +++ b/lib/src/components/material_tooltip/src/_constants.scss @@ -0,0 +1,19 @@ +/* + * 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/animation'; + +$tooltip-border-radius: 2px; +$off-page-offset: $mat-grid * -64; +$tooltip-font-size: 12px; diff --git a/lib/src/components/material_tooltip/src/icon_tooltip.scss b/lib/src/components/material_tooltip/src/icon_tooltip.scss new file mode 100644 index 00000000..8c99b0f4 --- /dev/null +++ b/lib/src/components/material_tooltip/src/icon_tooltip.scss @@ -0,0 +1,42 @@ +/* + * 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 'lib/src/components/theme/mixins'; + +:host { + &:hover, + &:focus { + glyph { + color: $mat-blue-700; + } + } + + glyph { + color: $mat-light-transparent-black; + cursor: pointer; + } + + @include acx-theme-dark { + &:hover, + &:focus { + glyph { + color: $mat-white; + } + } + + glyph { + color: $mat-white; + } + } +} diff --git a/lib/src/components/material_tooltip/src/ink_tooltip.scss b/lib/src/components/material_tooltip/src/ink_tooltip.scss new file mode 100644 index 00000000..870c54e0 --- /dev/null +++ b/lib/src/components/material_tooltip/src/ink_tooltip.scss @@ -0,0 +1,41 @@ +/* + * 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 'constants'; + +$tooltip-line-height: $tooltip-font-size + $mat-grid-type; + +:host { + // The element shouldn't take up any space. + position: absolute; +} + +.ink-container { + box-sizing: border-box; + overflow: hidden; + max-width: $mat-grid * 40; + padding: $mat-grid; + font-size: $tooltip-font-size; + font-weight: $mat-font-weight-medium; + line-height: $tooltip-line-height; + text-align: left; + + // For non-breakable strings, truncate with an ellipsis. + text-overflow: ellipsis; +} + +// deep required to style shadow css class in material-popup. +/deep/ .aacmtit-ink-tooltip-shadow { // deep required + margin: $mat-grid; +} diff --git a/lib/src/components/material_tooltip/src/paper_tooltip.scss b/lib/src/components/material_tooltip/src/paper_tooltip.scss new file mode 100644 index 00000000..e513ecf7 --- /dev/null +++ b/lib/src/components/material_tooltip/src/paper_tooltip.scss @@ -0,0 +1,44 @@ +/* + * 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'; + +.paper-container { + background-color: $mat-white; + font-size: $mat-body-font-size; + max-height: $mat-grid * 50; + max-width: $mat-grid * 50; + min-width: $mat-grid * 20; + padding: $mat-grid * 3; + + @include display-flex; + @include flex-direction(column); + + /// Styles for the tooltip content. + .header:not(:empty) { + display: block; + font-weight: bold; + margin-bottom: $mat-grid; + } + + .body { + @include flex-grow(1); + } + + .footer { + material-button { + margin: 0; + } + } +} diff --git a/lib/src/components/material_tree/src/group/material_tree_group.scss b/lib/src/components/material_tree/src/group/material_tree_group.scss new file mode 100644 index 00000000..21745871 --- /dev/null +++ b/lib/src/components/material_tree/src/group/material_tree_group.scss @@ -0,0 +1,43 @@ +/* + * 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 'lib/src/components/material_list/mixins'; + +$tree-item-right-padding: $mat-grid * 2; + +ul { + list-style: none; + margin: 0; + padding: 0; + + .material-tree-item { + @include list-item-button; + padding-right: $tree-item-right-padding; + + .tree-expansion-state { + display: inline-flex; + margin-left: auto; + } + + .tree-selection-state { + @include display-flex(inline-flex); + vertical-align: middle; + width: $list-item-primary-width; + } + + glyph { + opacity: $mat-opacity-light; + } + } +} diff --git a/lib/src/components/material_tree/src/group/material_tree_group_flat_check.scss b/lib/src/components/material_tree/src/group/material_tree_group_flat_check.scss new file mode 100644 index 00000000..cf73b6bc --- /dev/null +++ b/lib/src/components/material_tree/src/group/material_tree_group_flat_check.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. + */ + +@import 'lib/src/components/material_list/mixins'; + +material-checkbox { + @include list-item-button; +} diff --git a/lib/src/components/material_tree/src/group/material_tree_group_flat_list.scss b/lib/src/components/material_tree/src/group/material_tree_group_flat_list.scss new file mode 100644 index 00000000..fe4d6451 --- /dev/null +++ b/lib/src/components/material_tree/src/group/material_tree_group_flat_list.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. + */ + +@import 'lib/src/components/material_list/mixins'; + +div { + @include list-item-base; +} diff --git a/lib/src/components/material_tree/src/group/material_tree_group_flat_radio.scss b/lib/src/components/material_tree/src/group/material_tree_group_flat_radio.scss new file mode 100644 index 00000000..5664434d --- /dev/null +++ b/lib/src/components/material_tree/src/group/material_tree_group_flat_radio.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. + */ + +@import 'lib/src/components/material_list/mixins'; + +material-radio { + @include list-item-button; +} diff --git a/lib/src/components/material_tree/src/material_tree_dropdown.scss b/lib/src/components/material_tree/src/material_tree_dropdown.scss new file mode 100644 index 00000000..b9510f6f --- /dev/null +++ b/lib/src/components/material_tree/src/material_tree_dropdown.scss @@ -0,0 +1,65 @@ +/* + * 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 'lib/src/components/glyph/mixins'; +@import 'lib/src/components/material_list/mixins'; + +$icon-size: $mat-grid * 3; + +:host { + @include display-flex(inline-flex); +} + +.button { + @include display-flex; + @include align-items(center); + @include flex-grow(1); + + cursor: pointer; + + // The icon is absolutely-positioned so that it doesn't factor into layout, so + // we need to account for it here. + padding-right: $icon-size * 2; + position: relative; + + &.border { + border-bottom: 1px solid $mat-border-light; + + // 1px bottom padding so that the underline here matches the underline on + // material-input. (material-input's underline is actually a separate div + // instead of a border, so it's 1px below where it'd otherwise be) + padding-bottom: 1px; + } +} + +.icon { + opacity: $mat-icon-opacity; + + // Positioning hacks to keep the dropselect from being taller than the + // material-input. + // + // The icon "has" to be at its normal 24x24 size, but that's too big for the + // dropselect -- and we know ahead of time that it's mostly empty space + // anyway. Absolutely-positioning it removes it from the layout flow, and + // keeps it from vertically stretching the dropselect. + position: absolute; + right: 0; + + // Because it's absolutely-positioned, we don't get flex centering anymore. + // We can do it ourselves, assuming we know the height of the icon ahead of + // time. We have to bump it up an extra pixel to account for the 1px of + // padding-bottom on the button div. + top: calc(50% - #{$icon-size / 2 + 1px}); +} diff --git a/lib/src/components/material_yes_no_buttons/_mixins.scss b/lib/src/components/material_yes_no_buttons/_mixins.scss new file mode 100644 index 00000000..87ffd388 --- /dev/null +++ b/lib/src/components/material_yes_no_buttons/_mixins.scss @@ -0,0 +1,46 @@ +/* + * 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 color of the yes no buttons. +/// WARNING: be sure to pick a unique selector for the selector argument, as +/// this will be applied to all material-yes-no-buttons that match the given +/// selector. + +/// Change the color of the yes button +@mixin material-yes-button-color($selector, $value) { + /deep/ material-yes-no-buttons#{$selector} .btn-yes[raised], + /deep/ material-yes-no-buttons#{$selector} .btn-yes.btn:not([disabled]).highlighted[raised] { + background-color: $value; + } +} + +/// Change the color of text in the yes button +@mixin material-yes-button-text-color($selector, $value) { + /deep/ material-yes-no-buttons#{$selector} .btn-yes { + color: $value; + } +} + +/// Change the color of the no button +@mixin material-no-button-color($selector, $value) { + /deep/ material-yes-no-buttons#{$selector} .btn-no[raised] { + background-color: $value; + } +} + +/// Change the color of text in the no button +@mixin material-no-button-text-color($selector, $value) { + /deep/ material-yes-no-buttons#{$selector} .btn-no { + color: $value; + } +} diff --git a/lib/src/components/material_yes_no_buttons/material_yes_no_buttons.scss b/lib/src/components/material_yes_no_buttons/material_yes_no_buttons.scss new file mode 100644 index 00000000..c875900e --- /dev/null +++ b/lib/src/components/material_yes_no_buttons/material_yes_no_buttons.scss @@ -0,0 +1,71 @@ +/* + * 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'; + +$button-height: 9 * $mat-grid-type; +$button-min-width: 11 * $mat-grid; + +:host { + @include display-flex(); +} + +// Use two classes to increase specificity to override material-buttons values +.btn.btn-yes, +.btn.btn-no { + height: $button-height; + margin: 0 $mat-grid-type; + min-width: $button-min-width +} + +.btn:not([disabled]).highlighted { + &[raised] { + background-color: $mat-blue-500; + color: $mat-white; + } + + &:not([raised]) { + color: $mat-blue-500; + } +} + +.spinner { + @include flexbox(( + align-items: center, + display: flex + )); + + margin-right: 3 * $mat-grid; + min-width: 2 * $button-min-width; +} + +// TODO(google): remove when Material Button no longer overrides user applied +// margins. +:host(.no-margin) .btn { + margin: 0; + min-width: 0; + padding: 0; + + .content { + padding-right: 0; + } +} + +:host[reverse] { + @include flex-direction(row-reverse); + + .spinner { + @include justify-content(flex-end); + } +} diff --git a/lib/src/components/reorder_list/_mixins.scss b/lib/src/components/reorder_list/_mixins.scss new file mode 100644 index 00000000..a47d6bfe --- /dev/null +++ b/lib/src/components/reorder_list/_mixins.scss @@ -0,0 +1,47 @@ +/* + * 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'; + +$item-border-width: 1px; +$item-border-color: $mat-teal-500; +$item-border-style: dashed; + +/// Changes the `item-selected` in the reorder-list. +/// +/// Optionally specify a `$selector`. Example usage: +/// @include reorder-list-theme( +/// $selector: 'table-view', +/// $item-selected-border-color: $mat-teal-500, +/// $item-selected-border-width: 2px, +/// $item-selected-border-style: solid +/// ); + +@mixin reorder-list-multiselect-theme( + $selector: '', + $selected-border-color: $item-border-color, + $selected-border-width: $item-border-width, + $selected-border-style: $item-border-style + ) { + + #{$selector} /deep/ reorder-list.themeable { + >[draggable] { + outline: none; + } + + .item-selected { + border: $selected-border-width $selected-border-style $selected-border-color; + user-select: none; + } + } +} diff --git a/lib/src/components/reorder_list/reorder_list.scss b/lib/src/components/reorder_list/reorder_list.scss new file mode 100644 index 00000000..14720d55 --- /dev/null +++ b/lib/src/components/reorder_list/reorder_list.scss @@ -0,0 +1,50 @@ +/* + * 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 'compass/css3/user-interface'; +@import 'mixins'; + +:host { + display: block; + + &.vertical { + position: relative; + } + + // Prevent selecting text inside dragging area. + > [draggable] { + // Required for old WebKit + -webkit-user-drag: element; + @include user-select(none); + } + + &.multiselect { + .item-selected { + outline: none; + border: $item-border-width $item-border-style $item-border-color; + } + } +} + +.reorder-list-dragging-active { + cursor: move; +} + +.placeholder { + position: absolute; + z-index: -1; + + &.hidden { + display: none; + } +} diff --git a/lib/src/components/scorecard/_mixins.scss b/lib/src/components/scorecard/_mixins.scss new file mode 100644 index 00000000..94706de8 --- /dev/null +++ b/lib/src/components/scorecard/_mixins.scss @@ -0,0 +1,164 @@ +/* + * 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'; + +// Custom ACX colors +// TODO(google): Migrate to colors from the material spec. +$acx-positive-increase-color: #3d9400; +$acx-positive-decrease-color: #3d9400; +$acx-negative-increase-color: #dd4b39; +$acx-negative-decrease-color: #dd4b39; +$acx-neutral-increase-color: #63656a; +$acx-neutral-decrease-color: #7a6e67; + +// An optional mixin that instead of applying the red/green style of colors on +// the secondary text (as-per the spec on acux-material/components/scorecard) it +// applies the color on the primary text. +// +// May optionally specify a $selector to only affect a certain area, e.g.: +// @include acx-scorecard-apply-change-color-on-primary($selector: '.area'); +@mixin acx-scorecard-apply-change-color-on-primary($selector: '') { + /deep/ #{$selector} { + + // Change the description always to be black/neutral colored. + acx-scorecard .description { + color: $mat-light-transparent-black !important; + } + + // For positive scorecards, change the

to positive style. + acx-scorecard.is-change-positive h2 { + color: $acx-positive-increase-color; + } + + // For negative scorecards, change the

to negative style. + acx-scorecard.is-change-negative h2 { + color: $acx-negative-decrease-color; + } + } +} + +// A mixin for applying styles to the title of a scorecard. +@mixin acx-scorecard-title($selector: '') { + /deep/ #{$selector} { + acx-scorecard h3 { + @content; + } + } +} + +// A mixin for applying styles to the value of a scorecard. +@mixin acx-scorecard-value($selector: '') { + /deep/ #{$selector} { + acx-scorecard h2 { + @content; + } + } +} + +// A mixin for applying customized color to the description of a scorecard. +// Optionally specify a '$glyph-color' and a `$text-color`. +@mixin acx-scorecard-description-color($glyph-color: null, $text-color: null, $selector: '') { + /deep/ #{$selector} { + @if ($glyph-color != null) { + acx-scorecard .change-glyph { + color: $glyph-color; + } + } + + @if ($text-color != null) { + // Adding specific css selector to make sure it's not overwritten by other + // classes. + acx-scorecard:not(.selected).themeable .description { + color: $text-color; + } + } + } +} + +// A mixin for customizing the colors used for positive and negative styles. +@mixin acx-scorecard-description-positive-negative-colors( + $positive-color: null, + $negative-color: null, + $selector: '') { + /deep/ #{$selector} { + @if ($positive-color != null) { + acx-scorecard:not(.selected).themeable.is-change-positive .description { + color: $positive-color; + } + } + + @if ($negative-color != null) { + acx-scorecard:not(.selected).themeable.is-change-negative .description { + color: $negative-color; + } + } + } +} + +// A mixin for applying customized color to the suggestion of a scorecard. +@mixin acx-scorecard-suggestion-color($color, $selector: '') { + /deep/ #{$selector} { + acx-scorecard .suggestion { + color: $color; + } + } +} + +// A mixin for setting the suggestion of a scorecard on a separate line than the +// description. +@mixin acx-scorecard-suggestion-to-separate-line($selector: '') { + /deep/ #{$selector} { + acx-scorecard .suggestion { + display: block; + } + } +} + +// A mixin for changing the padding of a scorecard. +@mixin acx-scorecard-padding($top: null, $right: null, $bottom: null, $left: null) { + :host /deep/ acx-scorecard { + @if ($top != null) { + padding-top: $top; + } + @if ($right != null) { + padding-right: $right; + } + @if ($bottom != null) { + padding-bottom: $bottom; + } + @if ($left != null) { + padding-left: $left; + } + } +} + +// A mixin for adding vertical alignment to scorecards. +@mixin acx-scorecard-vertical-align($vertical-align, $selector: '') { + /deep/ #{$selector} { + acx-scorecard { + vertical-align: $vertical-align; + } + } +} + +// A mixin for applying a min height on the description to allow for empty +// space. +@mixin acx-scorecard-description-min-height($min-height, $selector: '') { + /deep/ #{$selector} { + .description { + display: block; + min-height: $min-height; + } + } +} diff --git a/lib/src/components/scorecard/scoreboard.scss b/lib/src/components/scorecard/scoreboard.scss new file mode 100644 index 00000000..02e93560 --- /dev/null +++ b/lib/src/components/scorecard/scoreboard.scss @@ -0,0 +1,98 @@ +/* + * 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/shared/compass_polyfills'; +@import 'lib/src/css/material/material'; +@import 'lib/src/components/glyph/mixins'; +@import 'compass/css3'; + +.acx-scoreboard { + display: block; + overflow: hidden; + position: relative; + + .scroll-button { + @include display-flex(); + @include flex-shrink(0); + + &.hide { + display: none; + } + + &:not([icon]) { + border-radius: 0; + min-width: inherit; + } + + background: rgba($mat-white, $mat-opacity-strong); + color: $mat-light-transparent-black; + margin: 0; + padding: 0 $mat-grid; + position: absolute; + z-index: 1; + } +} + +.scorecard-bar { + // TODO(google): Use flexbox for horizontal displays as well as vertical ones. + // "inline-block" counts whitespace as content in HTML, resulting in gaps + // between scorecards. + display: inline-block; + margin: 0; + padding: 0; + position: relative; + transition: transform $mat-transition-fast-slow $mat-transition-slow; + white-space: nowrap; +} + +.acx-scoreboard-horizontal { + .scroll-button { + height: 100%; + min-width: inherit; + top: 0; + } + + .scroll-forward-button { + right: 0; + } + + .scroll-back-button { + left: 0; + } +} + +.acx-scoreboard-vertical { + display: inline-block; + height: 100%; + + .scroll-button { + @include justify-content(center); + width: 100%; + } + + .scroll-forward-button { + bottom: 0; + } + + .scroll-back-button { + top: 0; + } + + .scorecard-bar { + // TODO(google): Use flexbox for horizontal displays as well as vertical + // ones. "inline-block" counts whitespace as content in HTML, resulting in + // gaps between scorecards. + @include display-flex(); + @include flex-direction(column); + } +} diff --git a/lib/src/components/scorecard/scorecard.scss b/lib/src/components/scorecard/scorecard.scss new file mode 100644 index 00000000..ee5cae04 --- /dev/null +++ b/lib/src/components/scorecard/scorecard.scss @@ -0,0 +1,128 @@ +/* + * 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/shared/compass_polyfills'; +@import 'mixins'; +@import 'lib/src/css/material/material'; +@import 'compass/css3'; + +// Colors. +// -------- +// 6% Black. +$color-hover-grey: rgba(0, 0, 0, .06); + +// Fonts. +$font-size-app: $mat-body-font-size; +$font-size-app-big: $mat-button-font-size; +$font-size-heading: 32px; +$font-size-heading-big: $mat-display-1-font-size; + +:host { + @include display-flex(); + @include flex-direction(column); + + color: $mat-transparent-black; + display: inline-block; + font-size: $font-size-app; + padding: $mat-grid * 3; + position: relative; + + &:hover { + &.selectable { + cursor: pointer; + } + + &:not(.selected) { + background: $color-hover-grey; + } + } + + &:not(.selected) { + &.is-change-positive { + .description { + color: $acx-positive-increase-color; + } + } + + &.is-change-negative { + .description { + color: $acx-negative-decrease-color; + } + } + } + + &.selected { + color: $mat-white; + + .description, + .suggestion { + color: $mat-white; + } + } + + &.right-align { + text-align: right; + } + + &.extra-big { + padding: 0; + margin: $mat-grid * 3; + + h3 { + font-size: $font-size-app-big; + padding-bottom: $mat-grid / 2; + } + + h2 { + font-size: $font-size-heading-big; + } + + .description { + padding-top: $mat-grid / 2; + font-size: $font-size-app-big; + display: block; + } + } +} + +h3, +h2 { + clear: both; + color: inherit; + font-weight: normal; + line-height: initial; + margin: 0; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +h3 { + font-size: $font-size-app; + padding-bottom: $mat-grid; +} + +h2 { + font-size: $font-size-heading; +} + +.description, +.suggestion { + color: $mat-light-transparent-black; + padding-top: $mat-grid; +} + +.change-glyph { + color: $acx-neutral-increase-color; + display: inline-block; +} diff --git a/lib/src/components/theme/_mixins.scss b/lib/src/components/theme/_mixins.scss new file mode 100644 index 00000000..fd16b6ad --- /dev/null +++ b/lib/src/components/theme/_mixins.scss @@ -0,0 +1,34 @@ +/* + * 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. + */ + + +/// Nests styles for dark theme inside the dark theme class. +/// +/// Use in conjunction with [AcxTheme#theme]: +/// +/// code: +/// +/// acxTheme.theme(myElementRef); +/// +/// sass: +/// +/// :host { +/// @include acx-theme-dark { +/// # set styles for dark theme +/// } +/// } +@mixin acx-theme-dark() { + &.acx-theme-dark { + @content + } +} diff --git a/lib/src/css/_mixins.scss b/lib/src/css/_mixins.scss index 03ccb1bd..9f41295f 100644 --- a/lib/src/css/_mixins.scss +++ b/lib/src/css/_mixins.scss @@ -3,6 +3,14 @@ * 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 'material/material'; /// Style all scrollbars within the scope to material spec. diff --git a/lib/src/css/material/_material.scss b/lib/src/css/material/_material.scss index 0240f761..1200b395 100644 --- a/lib/src/css/material/_material.scss +++ b/lib/src/css/material/_material.scss @@ -3,6 +3,14 @@ * 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. + */ + @charset 'UTF-8'; // Make sure the charset is set appropriately diff --git a/lib/src/css/material/const/_color.scss b/lib/src/css/material/const/_color.scss index 86ba30dc..19222485 100644 --- a/lib/src/css/material/const/_color.scss +++ b/lib/src/css/material/const/_color.scss @@ -3,6 +3,14 @@ * 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. + */ + // ############################################################################# // // WARNING: DO NOT IMPORT DIRECTLY OUTSIDE OF LIB/SRC/CSS/MATERIAL diff --git a/lib/src/css/material/const/_functions.scss b/lib/src/css/material/const/_functions.scss index 717a7157..f25f0cf9 100644 --- a/lib/src/css/material/const/_functions.scss +++ b/lib/src/css/material/const/_functions.scss @@ -3,6 +3,14 @@ * 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. + */ + // ############################################################################# // // WARNING: DO NOT IMPORT DIRECTLY OUTSIDE OF LIB/SRC/CSS/MATERIAL diff --git a/lib/src/css/material/const/_global.scss b/lib/src/css/material/const/_global.scss index fbb62585..ed28bb0a 100644 --- a/lib/src/css/material/const/_global.scss +++ b/lib/src/css/material/const/_global.scss @@ -3,6 +3,14 @@ * 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. + */ + // ############################################################################# // // WARNING: DO NOT IMPORT DIRECTLY OUTSIDE OF LIB/SRC/CSS/MATERIAL diff --git a/lib/src/css/material/const/_mixins.scss b/lib/src/css/material/const/_mixins.scss index bf35e062..70a53772 100644 --- a/lib/src/css/material/const/_mixins.scss +++ b/lib/src/css/material/const/_mixins.scss @@ -3,6 +3,14 @@ * 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. + */ + // ############################################################################# // // WARNING: DO NOT IMPORT DIRECTLY OUTSIDE OF LIB/SRC/CSS/MATERIAL diff --git a/lib/src/css/material/const/_palette.scss b/lib/src/css/material/const/_palette.scss index c8d9166e..0926c720 100644 --- a/lib/src/css/material/const/_palette.scss +++ b/lib/src/css/material/const/_palette.scss @@ -3,6 +3,14 @@ * 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. + */ + // ############################################################################# // // WARNING: DO NOT IMPORT DIRECTLY OUTSIDE OF LIB/SRC/CSS/MATERIAL diff --git a/lib/src/css/material/const/_settings.scss b/lib/src/css/material/const/_settings.scss index 9d0dbb11..2c553d2e 100644 --- a/lib/src/css/material/const/_settings.scss +++ b/lib/src/css/material/const/_settings.scss @@ -3,6 +3,14 @@ * 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. + */ + // ############################################################################# // // WARNING: DO NOT IMPORT DIRECTLY OUTSIDE OF LIB/SRC/CSS/MATERIAL diff --git a/lib/src/css/material/const/_typography.scss b/lib/src/css/material/const/_typography.scss index 17d6c849..f24a84f1 100644 --- a/lib/src/css/material/const/_typography.scss +++ b/lib/src/css/material/const/_typography.scss @@ -3,6 +3,14 @@ * 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. + */ + // ############################################################################# // // WARNING: DO NOT IMPORT DIRECTLY OUTSIDE OF LIB/SRC/CSS/MATERIAL diff --git a/lib/src/css/shared/_compass_polyfills.scss b/lib/src/css/shared/_compass_polyfills.scss new file mode 100644 index 00000000..8bc5f4e7 --- /dev/null +++ b/lib/src/css/shared/_compass_polyfills.scss @@ -0,0 +1,221 @@ +/* + * 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. + */ + +// Polyfills of Compass builtin functions for SassC compatibility. +// +// (SassC is a C++ port of Ruby Sass, roughly 20x faster) +// +// Note: unfortunately, we cannot define a function inside a +// `@if not function-exists(prefix-usage)` branch, which means we can't have +// transparently-defined polyfills included in both Compass & SassC contexts. + +/// Whether a given capability should be prefixed for evergreen browsers. +$_capability-needs-prefixing: ( + // http://shouldiprefix.com/#animations + css-animation: ( + -moz: true, + -webkit: true, + ), + // http://shouldiprefix.com/#box-shadow + css-boxshadow: ( + -moz: true, + -webkit: true, + ), + // http://shouldiprefix.com/#filters + css-filters: ( + -webkit: true, + ), + // http://shouldiprefix.com/#placeholder + css-placeholder: ( + -moz: true, + -ms: true, + -webkit: true, + ), + // http://shouldiprefix.com/#transitions + css-transitions: ( + -moz: true, + -o: true, + -webkit: true, + ), + // http://shouldiprefix.com/#box-sizing + css3-boxsizing: ( + -moz: true, + -webkit: true, + ), + // http://shouldiprefix.com/#flexbox + flexbox: ( + -webkit: true, + ), + // http://shouldiprefix.com/#transforms + transforms2d: ( + -moz: true, + -ms: true, + -webkit: true, + ), + transforms3d: ( + -moz: true, + -webkit: true, + ), + // http://caniuse.com/#feat=user-select-none + user-select-none: ( + -moz: true, + -ms: true, + -webkit: true, + ), +); + +/// The percent of users relying on a particular prefix (between 0 and 1). +/// +/// This is used by Compass' vendor-specific prefix heuristics. +/// +/// (see compass/core/sass_extensions/functions/cross_browser_support.rb) +@function prefix-usage($prefix, $capability, $capability-options) { + $needs: map-get($_capability-needs-prefixing, $capability); + @if not $needs { + @error 'TODO: please hard-code prefix-usage for #{$capability}.'; + } + @return if(map-get($needs, $prefix), 1, 0); +} + +$_prefixes-by-browser: ( + android: -webkit, + android-chrome: -webkit, + android-firefox: -moz, + blackberry: -webkit, + chrome: -webkit, + firefox: -moz, + ie: -ms, + ie-mobile: -ms, + ios-safari: -webkit, + opera: (-o, -webkit), + opera-mini: -o, + opera-mobile: (-o, -webkit), + safari: -webkit, +); + +/// Note: this is trivial to get from $_prefixes-by-browser, but we try and keep +/// the computational cost of these polyfills to a minimum. +$browsers-by-prefix: ( + -moz: (android-firefox, firefox), + -ms: (ie, ie-mobile), + -o: (opera, opera-mini, opera-mobile), + -webkit: (android, android-chrome, blackberry, chrome, ios-safari, opera, opera-mobile, safari), +); + +/// The known browsers. +/// +/// If prefix is given, limits the returned browsers to those using the specified prefix. +/// +/// (see compass/core/sass_extensions/functions/cross_browser_support.rb) +@function browsers($prefix: '') { + @if $prefix == '' { + @return map-keys($_prefixes-by-browser); + } @else { + @return map-get($browsers-by-prefix, $prefix); + } +} + +@function _unique-values($list, $sorting-order: ()) { + $set: (); + @each $value in $list { + $set: map-merge($set, ($value: true)); + } + $result: (); + @each $value in $sorting-order { + @if map-has-key($set, $value) { + $result: append($result, $value, comma); + $set: map-remove($set, $value); + } + } + @return join($result, map-keys($set), comma); +} + +/// The prefixes used by the given browsers. +/// +/// We sort the resulting prefixes to make testing easier +/// +/// (see compass/core/sass_extensions/functions/cross_browser_support.rb) +@function browser-prefixes($browsers) { + $values: (); + @each $browser in $browsers { + $values: join($values, map-get($_prefixes-by-browser, $browser), comma); + } + @return _unique-values($values, map-keys($browsers-by-prefix)); +} + +/// Returns a new list after removing any non-true values. +/// +/// (see compass/core/sass_extensions/functions/lists.rb) +@function compact($args...) { + $result: (); + @each $arg in $args { + @if $arg { + $result: append($result, $arg, comma); + } + } + @return $result; +} + +$_min-supported-browser-version: ( + android: 0, + // Fine-tuned for inline-block support + // (see compass-core/stylesheets/compass/css3/_inline-block.scss). + firefox: 3, + ie: 0, +); + +$_digits-to-numbers: ("0": 0, "1": 1, "2": 2, "3": 3, "4": 4, "5": 5, "6": 6, "7": 7, "8": 8, "9": 9); + +/// Dirty string -> number parsing. This is slow, only handles positive ints, etc. +@function to-number($s) { + $l: str_length($s); + @if $l == 0 { + @return 0; + } @else { + $d: map-get($_digits-to-numbers, str_slice($s, $l, $l)); + @if $l == 1 { + @return $d; + } @else { + @return $d + 10 * to-number(str_slice($s, 1, $l - 1)); + } + } +} + +/// How many users would be omitted if support for the given browser starts +/// with the given version. +/// +/// (see compass/core/lib/compass/core/caniuse.rb) +@function omitted-usage($browser, $min_version, $max_version: nil) { + $min_supported_versions: map-get($_min-supported-browser-version, $browser); + @if not $min_supported_versions { + @error 'TODO: please hard-code min-supported-browser-version for #{$browser}.'; + } + @return if(to-number($min_version) >= $min_supported_versions, 1, 0); +} + +/// Fallbacks for using linear-gradient with SassC and Compass stylesheets. +/// +/// compass/core/stylesheets/compass/css3/_images.scss defines SassScript +/// function @linear-gradient that depends on Ruby code providing +/// _linear-gradient_legacy and _linear-gradient functions. When using SassC +/// using linear-gradient would result in generating invalid CSS instead. +/// +/// Having simple SassScript implementation of these does not give prefixed +/// cross-browser functionality but stops SassC from generating garbage. +@function _linear-gradient_legacy($angle, $arguments...) { + @return #{'linear-gradient(#{$angle}, #{$arguments})'}; +} + +@function _linear-gradient($angle, $arguments...) { + @return #{'linear-gradient(#{$angle}, #{$arguments})'}; +} diff --git a/lib/src/css/shared/_shared.scss b/lib/src/css/shared/_shared.scss index c62c9628..c7b989b3 100644 --- a/lib/src/css/shared/_shared.scss +++ b/lib/src/css/shared/_shared.scss @@ -3,6 +3,14 @@ * 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. + */ + // How to use me: // // This set of scss files should never output any css unless sass classes are diff --git a/pubspec.yaml b/pubspec.yaml index 3150521e..2fb845da 100644 --- a/pubspec.yaml +++ b/pubspec.yaml @@ -1,5 +1,5 @@ name: angular_components -version: 0.5.3 +version: 0.5.3+1 description: > The official Material Design components for AngularDart. Used at Google in production apps.