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">Delectus dolor culpa cum. Veniam nobis impedit expedita eos eius. Autem ut optio corporis alias. Modi perferendis dolor aut iste eligendi. Delectus qui natus saepe voluptas velit aliquid qui reiciendis velit. Qui qui et consequuntur et possimus sed.</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.3 KB

There are no notes for this item.