@adobe/coral-spectrum/coral-component-status/src/styles/index.css

Coral Spectrum is a JavaScript library of Web Components following Spectrum design patterns.

/**
 * Copyright 2019 Adobe. All rights reserved.
 * This file is licensed to you under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License. You may obtain a copy
 * of the License at http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software distributed under
 * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
 * OF ANY KIND, either express or implied. See the License for the specific language
 * governing permissions and limitations under the License.
 */
._coral-StatusLight {
  min-height: 32px;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: row;
      flex-direction: row;
  -ms-flex-align: start;
      align-items: flex-start;

  padding: 4px 0 6px 0;
  box-sizing: border-box;

  font-size: 14px;
  font-weight: 400;
  line-height: 1.44;
}
._coral-StatusLight::before {
    content: '';
    -ms-flex-positive: 0;
        flex-grow: 0;
    -ms-flex-negative: 0;
        flex-shrink: 0;
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin: 6px 12px 4px 12px;
    -ms-high-contrast-adjust: none;
    forced-color-adjust: none;
  }
._coral-StatusLight--neutral {
  font-style: italic;
}

.coral--large ._coral-StatusLight {
  min-height: 40px;

  padding: 5px 0 7px 0;

  font-size: 17px;
  font-weight: 400;
  line-height: 1.44;
}
.coral--large ._coral-StatusLight::before {
    width: 10px;
    height: 10px;
    margin: 7px 15px 5px 15px;
  }

.coral--light ._coral-StatusLight {
  color: rgb(75, 75, 75);
}
.coral--light ._coral-StatusLight[disabled],
.coral--light ._coral-StatusLight.is-disabled {
    color: rgb(179, 179, 179);
  }
.coral--light ._coral-StatusLight[disabled]::before,
.coral--light ._coral-StatusLight.is-disabled::before {
      background-color: rgb(202, 202, 202);
    }
.coral--light ._coral-StatusLight--negative::before {
  background-color: rgb(227, 72, 80);
}
.coral--light ._coral-StatusLight--notice::before {
  background-color: rgb(230, 134, 25);
}
.coral--light ._coral-StatusLight--positive::before {
  background-color: rgb(45, 157, 120);
}
.coral--light ._coral-StatusLight--info::before,
.coral--light ._coral-StatusLight--active::before {
  background-color: rgb(38, 128, 235);
}
.coral--light ._coral-StatusLight--neutral {
  color: rgb(110, 110, 110);
}
.coral--light ._coral-StatusLight--neutral::before {
    background-color: rgb(179, 179, 179);
  }
.coral--light ._coral-StatusLight--celery::before {
  background-color: rgb(68, 181, 86);
}
.coral--light ._coral-StatusLight--yellow::before {
  background-color: rgb(223, 191, 0);
}
.coral--light ._coral-StatusLight--fuchsia::before {
  background-color: rgb(192, 56, 204);
}
.coral--light ._coral-StatusLight--indigo::before {
  background-color: rgb(103, 103, 236);
}
.coral--light ._coral-StatusLight--seafoam::before {
  background-color: rgb(27, 149, 154);
}
.coral--light ._coral-StatusLight--chartreuse::before {
  background-color: rgb(133, 208, 68);
}
.coral--light ._coral-StatusLight--magenta::before {
  background-color: rgb(216, 55, 144);
}
.coral--light ._coral-StatusLight--purple::before {
  background-color: rgb(146, 86, 217);
}

.coral--lightest ._coral-StatusLight {
  color: rgb(80, 80, 80);
}
.coral--lightest ._coral-StatusLight[disabled],
.coral--lightest ._coral-StatusLight.is-disabled {
    color: rgb(188, 188, 188);
  }
.coral--lightest ._coral-StatusLight[disabled]::before,
.coral--lightest ._coral-StatusLight.is-disabled::before {
      background-color: rgb(211, 211, 211);
    }
.coral--lightest ._coral-StatusLight--negative::before {
  background-color: rgb(236, 91, 98);
}
.coral--lightest ._coral-StatusLight--notice::before {
  background-color: rgb(242, 148, 35);
}
.coral--lightest ._coral-StatusLight--positive::before {
  background-color: rgb(51, 171, 132);
}
.coral--lightest ._coral-StatusLight--info::before,
.coral--lightest ._coral-StatusLight--active::before {
  background-color: rgb(55, 142, 240);
}
.coral--lightest ._coral-StatusLight--neutral {
  color: rgb(116, 116, 116);
}
.coral--lightest ._coral-StatusLight--neutral::before {
    background-color: rgb(188, 188, 188);
  }
.coral--lightest ._coral-StatusLight--celery::before {
  background-color: rgb(75, 195, 95);
}
.coral--lightest ._coral-StatusLight--yellow::before {
  background-color: rgb(237, 204, 0);
}
.coral--lightest ._coral-StatusLight--fuchsia::before {
  background-color: rgb(207, 62, 220);
}
.coral--lightest ._coral-StatusLight--indigo::before {
  background-color: rgb(117, 117, 241);
}
.coral--lightest ._coral-StatusLight--seafoam::before {
  background-color: rgb(32, 163, 168);
}
.coral--lightest ._coral-StatusLight--chartreuse::before {
  background-color: rgb(142, 222, 73);
}
.coral--lightest ._coral-StatusLight--magenta::before {
  background-color: rgb(226, 73, 157);
}
.coral--lightest ._coral-StatusLight--purple::before {
  background-color: rgb(157, 100, 225);
}

.coral--dark ._coral-StatusLight {
  color: rgb(227, 227, 227);
}
.coral--dark ._coral-StatusLight[disabled],
.coral--dark ._coral-StatusLight.is-disabled {
    color: rgb(110, 110, 110);
  }
.coral--dark ._coral-StatusLight[disabled]::before,
.coral--dark ._coral-StatusLight.is-disabled::before {
      background-color: rgb(90, 90, 90);
    }
.coral--dark ._coral-StatusLight--negative::before {
  background-color: rgb(227, 72, 80);
}
.coral--dark ._coral-StatusLight--notice::before {
  background-color: rgb(230, 134, 25);
}
.coral--dark ._coral-StatusLight--positive::before {
  background-color: rgb(45, 157, 120);
}
.coral--dark ._coral-StatusLight--info::before,
.coral--dark ._coral-StatusLight--active::before {
  background-color: rgb(38, 128, 235);
}
.coral--dark ._coral-StatusLight--neutral {
  color: rgb(185, 185, 185);
}
.coral--dark ._coral-StatusLight--neutral::before {
    background-color: rgb(110, 110, 110);
  }
.coral--dark ._coral-StatusLight--celery::before {
  background-color: rgb(68, 181, 86);
}
.coral--dark ._coral-StatusLight--yellow::before {
  background-color: rgb(223, 191, 0);
}
.coral--dark ._coral-StatusLight--fuchsia::before {
  background-color: rgb(192, 56, 204);
}
.coral--dark ._coral-StatusLight--indigo::before {
  background-color: rgb(103, 103, 236);
}
.coral--dark ._coral-StatusLight--seafoam::before {
  background-color: rgb(27, 149, 154);
}
.coral--dark ._coral-StatusLight--chartreuse::before {
  background-color: rgb(133, 208, 68);
}
.coral--dark ._coral-StatusLight--magenta::before {
  background-color: rgb(216, 55, 144);
}
.coral--dark ._coral-StatusLight--purple::before {
  background-color: rgb(146, 86, 217);
}

.coral--darkest ._coral-StatusLight {
  color: rgb(200, 200, 200);
}
.coral--darkest ._coral-StatusLight[disabled],
.coral--darkest ._coral-StatusLight.is-disabled {
    color: rgb(92, 92, 92);
  }
.coral--darkest ._coral-StatusLight[disabled]::before,
.coral--darkest ._coral-StatusLight.is-disabled::before {
      background-color: rgb(73, 73, 73);
    }
.coral--darkest ._coral-StatusLight--negative::before {
  background-color: rgb(215, 55, 63);
}
.coral--darkest ._coral-StatusLight--notice::before {
  background-color: rgb(218, 123, 17);
}
.coral--darkest ._coral-StatusLight--positive::before {
  background-color: rgb(38, 142, 108);
}
.coral--darkest ._coral-StatusLight--info::before,
.coral--darkest ._coral-StatusLight--active::before {
  background-color: rgb(20, 115, 230);
}
.coral--darkest ._coral-StatusLight--neutral {
  color: rgb(162, 162, 162);
}
.coral--darkest ._coral-StatusLight--neutral::before {
    background-color: rgb(92, 92, 92);
  }
.coral--darkest ._coral-StatusLight--celery::before {
  background-color: rgb(61, 167, 78);
}
.coral--darkest ._coral-StatusLight--yellow::before {
  background-color: rgb(210, 178, 0);
}
.coral--darkest ._coral-StatusLight--fuchsia::before {
  background-color: rgb(177, 48, 189);
}
.coral--darkest ._coral-StatusLight--indigo::before {
  background-color: rgb(92, 92, 224);
}
.coral--darkest ._coral-StatusLight--seafoam::before {
  background-color: rgb(22, 135, 140);
}
.coral--darkest ._coral-StatusLight--chartreuse::before {
  background-color: rgb(124, 195, 63);
}
.coral--darkest ._coral-StatusLight--magenta::before {
  background-color: rgb(202, 41, 150);
}
.coral--darkest ._coral-StatusLight--purple::before {
  background-color: rgb(134, 76, 204);
}