extract remaining mixins to css/_core.scss

Deprecate icon-button and glyph-button in favour of <material-button icon>.

Part of a sequence of CLs refactoring css/material into separate, smaller libraries

PiperOrigin-RevId: 225358623

Author: har79

angular_components/lib/css/_core.scss

@@ -18,3 +18,263 @@ $mat-option-inline-icons: false !default;
     @return url("package:#{$file}")
   }
 }
+
+// Forces an element to take up the same space as its closest, positioned
+// ancestor or, if none exists, the root element.
+@mixin fit {
+  bottom: 0;
+  left: 0;
+  position: absolute;
+  right: 0;
+  top: 0;
+}
+
+// clearfix forces the containing element to contain and be the same height as
+// the floated child elements.
+@mixin clearfix() {
+  &::before,
+  &::after {
+    content: ' ';
+    display: table;
+  }
+
+  &::after {
+    clear: both;
+  }
+}
+
+// Styles text that is used as a floating label over a material component.
+@mixin mat-input-header() {
+  color: $mat-gray-600;
+  // TODO(google): Migrate to extended mixin mat-font-caption
+  font-size: $mat-font-size-caption;
+  font-weight: $mat-font-weight-regular;
+}
+
+@mixin clear-button() {
+  background-color: transparent;
+  border: 0;
+  color: inherit;
+  cursor: pointer;
+  display: block;
+  font-family: inherit;
+  position: relative;
+}
+
+// Note: this only supports square icons.
+@mixin icon-background(
+    $icon-url, $background-size: 6 * $mat-grid, $icon-size: 3 * $mat-grid) {
+
+  box-sizing: border-box;
+  flex-shrink: 0;
+  flex-grow: 0;
+
+  background-image: mat-icon-image($icon-url);
+  background-position: center center;
+  background-repeat: no-repeat;
+  background-size: $icon-size $icon-size;
+  height: $background-size;
+  padding: (($background-size - $icon-size) / 2);
+  width: $background-size;
+}
+
+// TODO(google): remove icon-button and glyph-button in favor of a more
+// standard way of creating glyph buttons (e.g. a glyph button component)
+// DEPRECATED: use <material-button icon> instead.
+@mixin icon-button(
+    $icon-url, $button-size: 6 * $mat-grid, $icon-size: 3 * $mat-grid) {
+
+  @include clear-button();
+  font-size: 0;
+  height: $button-size;
+  outline: none;
+  width: $button-size;
+
+  // Icon is in after pseudo element to isolate opacity fiddling.
+  &::after {
+    @include icon-background($icon-url, $button-size, $icon-size);
+    content: '';
+    display: block;
+    opacity: $mat-icon-opacity;
+    left: 0;
+    position: absolute;
+    top: 0;
+    transition: opacity $mat-transition-standard $mat-transition;
+  }
+
+  // Light theme - default
+  &:focus::after,
+  &:hover::after,
+  &:active::after {
+    opacity: $mat-icon-opacity-hover;
+  }
+
+  &:disabled::after {
+    opacity: $mat-icon-opacity-disabled;
+  }
+
+  // Dark theme
+  &.dark::after {
+    opacity: $mat-icon-dark-opacity;
+  }
+
+  &.dark:focus::after,
+  &.dark:hover::after,
+  &.dark:active::after {
+    opacity: $mat-icon-dark-opacity-hover;
+    outline: none;
+  }
+
+  &.dark:disabled::after {
+    opacity: $mat-icon-dark-opacity-disabled;
+  }
+}
+
+// Similar to icon button, but to be used with a button containing an
+// acx `<glyph>` element.
+// DEPRECATED: use <material-button icon> instead.
+@mixin glyph-button($button-size: 6 * $mat-grid, $circle: false) {
+
+  @include clear-button();
+  height: $button-size;
+  opacity: $mat-icon-opacity;
+  outline: none;
+  padding: 0;
+  transition: opacity $mat-transition-standard $mat-transition;
+  width: $button-size;
+
+  @if $circle {
+    border-radius: $button-size / 2;
+  }
+
+  // Light theme - default
+  &:focus,
+  &:hover,
+  &:active {
+    opacity: $mat-icon-opacity-hover;
+  }
+
+  &:disabled {
+    opacity: $mat-icon-opacity-disabled;
+  }
+
+  // Dark theme
+  &.dark {
+    opacity: $mat-icon-dark-opacity;
+  }
+
+  &.dark:focus,
+  &.dark:hover,
+  &.dark:active {
+    opacity: $mat-icon-dark-opacity-hover;
+    outline: none;
+  }
+
+  &.dark:disabled {
+    opacity: $mat-icon-dark-opacity-disabled;
+  }
+}
+
+// *** Deprecated
+// The following functions are deprecated.
+// The equivalent native CSS is available in all supported browsers.
+
+@mixin box-sizing($type:border-box) {
+  -moz-box-sizing: $type; // Firefox < 29
+  box-sizing: $type;      // Chrome, IE 8+, Opera, Safari 5.1
+}
+
+@mixin flex-block() {
+  display: -ms-flexbox;  // IE 10
+  display: -webkit-flex; // Chrome
+  display: flex;         // Spec
+}
+
+@mixin flex-justify-start() {
+  -ms-flex-pack: start; // IE 10
+  -webkit-flex-align: start;
+  -webkit-justify-content: flex-start; // safari
+  justify-content: flex-start;
+}
+
+@mixin flex-justify-end() {
+  -ms-flex-pack: end; // IE 10
+  -webkit-flex-align: end;
+  -webkit-justify-content: flex-end; // safari
+  justify-content: flex-end;
+}
+
+@mixin flex-justify-center() {
+  -ms-flex-pack: center; // IE 10
+  -webkit-flex-align: center;
+  -webkit-justify-content: center; // safari
+  justify-content: center;
+}
+
+@mixin flex-justify-space-between() {
+  -ms-flex-pack: justify; // IE 10
+  -webkit-flex-align: justify;
+  -webkit-justify-content: space-between; // safari
+  justify-content: space-between;
+}
+
+// DOES NOT WORK IN IE 10, it is the same as 'space-between'
+@mixin flex-justify-space-around() {
+  -ms-flex-pack: justify; // IE 10
+  -webkit-flex-align: justify;
+  justify-content: space-around;
+}
+
+@mixin flex-align-start() {
+  -ms-flex-align: start; // IE 10
+  -webkit-flex-align: start;
+  align-items: flex-start;
+}
+
+@mixin flex-align-end() {
+  -ms-flex-align: end; // IE 10
+  -webkit-flex-align: end;
+  align-items: flex-end;
+}
+
+@mixin flex-align-center() {
+  -ms-flex-align: center; // IE 10
+  -webkit-flex-align: center;
+  align-items: center;
+}
+
+@mixin flex-align-stretch() {
+  -ms-flex-align: stretch; // IE 10
+  -webkit-flex-align: stretch;
+  align-items: stretch;
+}
+
+@mixin flex-align-baseline() {
+  -ms-flex-align: baseline; // IE 10
+  -webkit-flex-align: baseline;
+  align-items: baseline;
+}
+
+@mixin flex-direction($direction) {
+  -ms-flex-direction: $direction; // IE 10
+  -webkit-flex-direction: $direction;
+  flex-direction: $direction;
+}
+
+@mixin flex-grow($amount) {
+  -ms-flex-positive: $amount;  // IE 10
+  -webkit-flex-grow: $amount;
+  flex-grow: $amount;
+}
+
+@mixin flex-shrink($amount) {
+  -ms-flex-negative: $amount;  // IE 10
+  -webkit-flex-shrink: $amount;
+  flex-shrink: $amount;
+}
+
+@mixin flex($values...) {
+  -ms-flex: $values;  // IE 10
+  -webkit-flex: $values;
+  flex: $values;
+}