Web Toolkit

image/svg+xml GitHub

Callout: Must 

<div class="Callout Callout--must u-text-r-xs" role="note">
    <h2 class="Callout-title u-text-r-l">must</h2>
    <p class="u-layout-prose u-color-grey-90 u-text-p u-padding-r-all">Rerum nemo ipsa voluptate. Sed ut et repellendus et et et ut similique. Et dolorem corrupti dolore quis qui voluptatem.</p>

</div>
  • Content: 
    /** @define Callout; weak; */

:root {
  --Callout-color-must: #f4e6f5;
  --Callout-color-should: #d1e7ff;
  --Callout-color-could: #ebf5ef;
  --Callout-color-example: #e6e5e3;
  --Callout-border-top-color: #aaa;
  --Callout-space-unit: 0.5em;
}

.Callout {
  border-top: 1px solid var(--Callout-border-top-color);
  padding: 1em;
}

.Callout-title {
  background: transparent;
  display: block;
  font-weight: bold;
  margin-bottom: 1em;
  width: 100%;
}

.Callout--must {
  background: var(--Callout-color-must);
  border-top-color: color(var(--Callout-color-must) l(-70%));
}

.Callout--must > .Callout-title {
  color: color(var(--Callout-color-must) l(-70%));
}

.Callout--should {
  background: var(--Callout-color-should);
  border-top-color: color(var(--Callout-color-should) l(-70%));
}

.Callout--should > .Callout-title {
  color: color(var(--Callout-color-should) l(-70%));
}

.Callout--could {
  background: var(--Callout-color-could);
  border-top-color: color(var(--Callout-color-could) l(-70%));
}

.Callout--could > .Callout-title {
  color: color(var(--Callout-color-could) l(-70%));
}

.Callout--example {
  background: var(--Callout-color-example);
  border-top-color: color(var(--Callout-color-example) l(-70%));
}

.Callout--example > .Callout-title {
  color: color(var(--Callout-color-example) l(-70%));
}
  • URL: /components/raw/callout/index.css
  • Filesystem Path: src\components\callout\index.css
  • Size: 1.4 KB

There are no notes for this item.