@angular2-material/checkbox/checkbox.css

Angular 2 Material checkbox

/**
 * Mixin that creates a new stacking context.
 * see https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context
 */
/**
 * This mixin hides an element visually.
 * That means it's still accessible for screen-readers but not visible in view.
 */
/**
 * Forces an element to grow to fit floated contents; used as as an alternative to
 * `overflow: hidden;` because it doesn't cut off contents.
 */
/**
 * A mixin, which generates temporary ink ripple on a given component.
 * When $bindToParent is set to true, it will check for the focused class on the same selector as you included
 * that mixin.
 * It is also possible to specify the color palette of the temporary ripple. By default it uses the
 * accent palette for its background.
 */
/** The width/height of the checkbox element. */
/** The width of the line used to draw the checkmark / mixedmark. */
/** The width of the checkbox border shown when the checkbox is unchecked. */
/** The color of the checkbox border. */
/** The color of the checkbox's checkmark / mixedmark. */
/** The color that is used as the checkbox background when it is checked. */
/** The base duration used for the majority of transitions for the checkbox. */
/** The amount of spacing between the checkbox and its label. */
/**
 * Fades in the background of the checkbox when it goes from unchecked -> {checked,indeterminate}.
 */
@keyframes md-checkbox-fade-in-background {
  0% {
    opacity: 0; }
  50% {
    opacity: 1; } }

/**
 * Fades out the background of the checkbox when it goes from {checked,indeterminate} -> unchecked.
 */
@keyframes md-checkbox-fade-out-background {
  0%, 50% {
    opacity: 1; }
  100% {
    opacity: 0; } }

/**
 * "Draws" in the checkmark when the checkbox goes from unchecked -> checked.
 */
@keyframes md-checkbox-unchecked-checked-checkmark-path {
  0%, 50% {
    stroke-dashoffset: 22.91026; }
  50% {
    animation-timing-function: cubic-bezier(0, 0, 0.2, 0.1); }
  100% {
    stroke-dashoffset: 0; } }

/**
 * Horizontally expands the mixedmark when the checkbox goes from unchecked -> indeterminate.
 */
@keyframes md-checkbox-unchecked-indeterminate-mixedmark {
  0%, 68.2% {
    transform: scaleX(0); }
  68.2% {
    animation-timing-function: cubic-bezier(0, 0, 0, 1); }
  100% {
    transform: scaleX(1); } }

/**
 * "Erases" the checkmark when the checkbox goes from checked -> unchecked.
 */
@keyframes md-checkbox-checked-unchecked-checkmark-path {
  from {
    animation-timing-function: cubic-bezier(0.4, 0, 1, 1);
    stroke-dashoffset: 0; }
  to {
    stroke-dashoffset: -22.91026; } }

/**
 * Rotates and fades out the checkmark when the checkbox goes from checked -> indeterminate. This
 * animation helps provide the illusion of the checkmark "morphing" into the mixedmark.
 */
@keyframes md-checkbox-checked-indeterminate-checkmark {
  from {
    animation-timing-function: cubic-bezier(0, 0, 0.2, 0.1);
    opacity: 1;
    transform: rotate(0deg); }
  to {
    opacity: 0;
    transform: rotate(45deg); } }

/**
 * Rotates and fades the checkmark back into position when the checkbox goes from indeterminate ->
 * checked. This animation helps provide the illusion that the mixedmark is "morphing" into the
 * checkmark.
 */
@keyframes md-checkbox-indeterminate-checked-checkmark {
  from {
    animation-timing-function: cubic-bezier(0.14, 0, 0, 1);
    opacity: 0;
    transform: rotate(45deg); }
  to {
    opacity: 1;
    transform: rotate(360deg); } }

/**
 * Rotates and fades in the mixedmark when the checkbox goes from checked -> indeterminate. This
 * animation, similar to md-checkbox-checked-indeterminate-checkmark, helps provide an illusion
 * of "morphing" from checkmark -> mixedmark.
 */
@keyframes md-checkbox-checked-indeterminate-mixedmark {
  from {
    animation-timing-function: cubic-bezier(0, 0, 0.2, 0.1);
    opacity: 0;
    transform: rotate(-45deg); }
  to {
    opacity: 1;
    transform: rotate(0deg); } }

/**
 * Rotates and fades out the mixedmark when the checkbox goes from indeterminate -> checked. This
 * animation, similar to md-checkbox-indeterminate-checked-checkmark, helps provide an illusion
 * of "morphing" from mixedmark -> checkmark.
 */
@keyframes md-checkbox-indeterminate-checked-mixedmark {
  from {
    animation-timing-function: cubic-bezier(0.14, 0, 0, 1);
    opacity: 1;
    transform: rotate(0deg); }
  to {
    opacity: 0;
    transform: rotate(315deg); } }

/**
 * Horizontally collapses and fades out the mixedmark when the checkbox goes from indeterminate ->
 * unchecked.
 */
@keyframes md-checkbox-indeterminate-unchecked-mixedmark {
  0% {
    animation-timing-function: linear;
    opacity: 1;
    transform: scaleX(1); }
  32.8%, 100% {
    opacity: 0;
    transform: scaleX(0); } }

/**
 * Applied to elements that cover the checkbox's entire inner container.
 */
.md-checkbox-frame, .md-checkbox-background, .md-checkbox-checkmark {
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0; }

/**
 * Applied to elements that are considered "marks" within the checkbox, e.g. the checkmark and
 * the mixedmark.
 */
.md-checkbox-checkmark, .md-checkbox-mixedmark {
  width: calc(100% - 4px); }

/**
 * Applied to elements that appear to make up the outer box of the checkmark, such as the frame
 * that contains the border and the actual background element that contains the marks.
 */
.md-checkbox-frame, .md-checkbox-background {
  border-radius: 2px;
  box-sizing: border-box;
  pointer-events: none; }

md-checkbox {
  cursor: pointer; }

.md-checkbox-layout {
  cursor: inherit;
  align-items: baseline;
  display: inline-flex; }

.md-checkbox-inner-container {
  display: inline-block;
  height: 20px;
  line-height: 0;
  margin: auto;
  margin-right: 8px;
  order: 0;
  position: relative;
  vertical-align: middle;
  white-space: nowrap;
  width: 20px; }
  [dir='rtl'] .md-checkbox-inner-container {
    margin-left: 8px;
    margin-right: auto; }

.md-checkbox-layout .md-checkbox-label {
  line-height: 24px; }

.md-checkbox-frame {
  background-color: transparent;
  border: 2px solid rgba(0, 0, 0, 0.54);
  transition: border-color 90ms cubic-bezier(0, 0, 0.2, 0.1);
  will-change: border-color; }

.md-checkbox-background {
  align-items: center;
  display: inline-flex;
  justify-content: center;
  transition: background-color 90ms cubic-bezier(0, 0, 0.2, 0.1), opacity 90ms cubic-bezier(0, 0, 0.2, 0.1);
  will-change: background-color, opacity; }

.md-checkbox-checkmark {
  fill: #fafafa;
  width: 100%; }

.md-checkbox-checkmark-path {
  stroke: #fafafa !important;
  stroke-dashoffset: 22.91026;
  stroke-dasharray: 22.91026;
  stroke-width: 2.66667px; }

.md-checkbox-mixedmark {
  background-color: #fafafa;
  height: 2px;
  opacity: 0;
  transform: scaleX(0) rotate(0deg); }

.md-checkbox-align-end .md-checkbox-inner-container {
  order: 1;
  margin-left: 8px;
  margin-right: auto; }
  [dir='rtl'] .md-checkbox-align-end .md-checkbox-inner-container {
    margin-left: auto;
    margin-right: 8px; }

.md-checkbox-checked .md-checkbox-checkmark {
  opacity: 1; }

.md-checkbox-checked .md-checkbox-checkmark-path {
  stroke-dashoffset: 0; }

.md-checkbox-checked .md-checkbox-mixedmark {
  transform: scaleX(1) rotate(-45deg); }

.md-checkbox-checked .md-checkbox-background {
  background-color: #9c27b0; }

.md-checkbox-indeterminate .md-checkbox-background {
  background-color: #9c27b0; }

.md-checkbox-indeterminate .md-checkbox-checkmark {
  opacity: 0;
  transform: rotate(45deg); }

.md-checkbox-indeterminate .md-checkbox-checkmark-path {
  stroke-dashoffset: 0; }

.md-checkbox-indeterminate .md-checkbox-mixedmark {
  opacity: 1;
  transform: scaleX(1) rotate(0deg); }

.md-checkbox-unchecked .md-checkbox-background {
  background-color: transparent; }

.md-checkbox-disabled {
  cursor: default; }
  .md-checkbox-disabled.md-checkbox-checked .md-checkbox-background, .md-checkbox-disabled.md-checkbox-indeterminate .md-checkbox-background {
    background-color: #b0b0b0; }
  .md-checkbox-disabled:not(.md-checkbox-checked) .md-checkbox-frame {
    border-color: #b0b0b0; }

.md-checkbox-anim-unchecked-checked .md-checkbox-background {
  animation: 180ms linear 0ms md-checkbox-fade-in-background; }

.md-checkbox-anim-unchecked-checked .md-checkbox-checkmark-path {
  animation: 180ms linear 0ms md-checkbox-unchecked-checked-checkmark-path; }

.md-checkbox-anim-unchecked-indeterminate .md-checkbox-background {
  animation: 180ms linear 0ms md-checkbox-fade-in-background; }

.md-checkbox-anim-unchecked-indeterminate .md-checkbox-mixedmark {
  animation: 90ms linear 0ms md-checkbox-unchecked-indeterminate-mixedmark; }

.md-checkbox-anim-checked-unchecked .md-checkbox-background {
  animation: 180ms linear 0ms md-checkbox-fade-out-background; }

.md-checkbox-anim-checked-unchecked .md-checkbox-checkmark-path {
  animation: 90ms linear 0ms md-checkbox-checked-unchecked-checkmark-path; }

.md-checkbox-anim-checked-indeterminate .md-checkbox-checkmark {
  animation: 90ms linear 0ms md-checkbox-checked-indeterminate-checkmark; }

.md-checkbox-anim-checked-indeterminate .md-checkbox-mixedmark {
  animation: 90ms linear 0ms md-checkbox-checked-indeterminate-mixedmark; }

.md-checkbox-anim-indeterminate-checked .md-checkbox-checkmark {
  animation: 500ms linear 0ms md-checkbox-indeterminate-checked-checkmark; }

.md-checkbox-anim-indeterminate-checked .md-checkbox-mixedmark {
  animation: 500ms linear 0ms md-checkbox-indeterminate-checked-mixedmark; }

.md-checkbox-anim-indeterminate-unchecked .md-checkbox-background {
  animation: 180ms linear 0ms md-checkbox-fade-out-background; }

.md-checkbox-anim-indeterminate-unchecked .md-checkbox-mixedmark {
  animation: 300ms linear 0ms md-checkbox-indeterminate-unchecked-mixedmark; }

.md-checkbox-input {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  text-transform: none;
  width: 1px; }

.md-ink-ripple {
  border-radius: 50%;
  opacity: 0;
  height: 48px;
  left: 50%;
  overflow: hidden;
  pointer-events: none;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  transition: opacity ease 280ms, background-color ease 280ms;
  width: 48px; }

.md-checkbox-focused .md-ink-ripple {
  opacity: 1;
  background-color: rgba(156, 39, 176, 0.26); }

.md-checkbox-disabled .md-ink-ripple {
  background-color: #000; }

/*# sourceMappingURL=checkbox.css.map */