@adobe/spectrum-css/dist/icons/spectrum-icons.styl

The Spectrum CSS top-level backwards compatible package

@require('./sizes.styl')

.spectrum-Icon {
  display: inline-block;

  /* Inherit the text color */
  color: inherit;

  /* Fill should match the current text color */
  fill: currentColor;
}

.spectrum-Icon.is-animated {
  /* Transition any color changes */
  transition: color 150ms ease-in-out,
              fill 150ms ease-in-out;
}

.spectrum-Icon--sizeXXS {
  &,
  img,
  svg {
    height: $spectrum-Icon-xxs-size;
    width: $spectrum-Icon-xxs-size;
  }
}

.spectrum-Icon--sizeXS {
  &,
  img,
  svg {
    height: $spectrum-Icon-xs-size;
    width: $spectrum-Icon-xs-size;
  }
}

.spectrum-Icon--sizeS {
  &,
  img,
  svg {
    height: $spectrum-Icon-s-size;
    width: $spectrum-Icon-s-size;
  }
}

.spectrum-Icon--sizeM {
  &,
  img,
  svg {
    height: $spectrum-Icon-m-size;
    width: $spectrum-Icon-m-size;
  }
}

.spectrum-Icon--sizeL {
  &,
  img,
  svg {
    height: $spectrum-Icon-l-size;
    width: $spectrum-Icon-l-size;
  }
}

.spectrum-Icon--sizeXL {
  &,
  img,
  svg {
    height: $spectrum-Icon-xl-size;
    width: $spectrum-Icon-xl-size;
  }
}

.spectrum-Icon--sizeXXL {
  &,
  img,
  svg {
    height: $spectrum-Icon-xxl-size;
    width: $spectrum-Icon-xxl-size;
  }
}