Tile

Overview

Basic tile

<div class="tile">
  <div class="tile__header">Tile header</div>
  <div class="tile__body">This is a simple tile.</div>
  <div class="tile__footer">Tile footer</div>
</div>

Files

https://github.com/davidbrooksio/cwf-lite/blob/master/style/modules/tile.css

• Directorystyle

  • Directorymodules

    • tile.css

Stylesheet

@layer cwf-modules {
  .tile {
    --tile-border-width: 1px;
    --tile-border-radius: 0;
    --tile-inner-border-radius: calc(
      var(--tile-border-radius) - var(--tile-border-width)
    );

    background: var(--tile-background, var(--color-background));
    border-color: var(--tile-border-color, var(--color-border));
    border-radius: var(--tile-border-radius);
    border-style: var(--tile-border-style, solid);
    border-width: var(--tile-border-width);

    border-inline-start-color: var(
      --tile-border-left-color,
      var(--color-border)
    );
    border-inline-start-width: var(--tile-border-left-width, var(--size-2));

    color: var(--tile-color, inherit);
    display: var(--tile-display, flex);
    flex-flow: var(--tile-flex-flow, column nowrap);

    margin-block-start: var(--tile-margin-top, 0);
    margin-inline-end: var(--tile-margin-right, 0);
    margin-block-end: var(--tile-margin-bottom, var(--size-3));
    margin-inline-start: var(--tile-margin-left, 0);

    min-width: var(--tile-min-width, 0);
    position: var(--tile-position, relative);
    word-wrap: var(--tile-word-wrap, break-word);

    & > * {
      &:first-child {
        border-start-end-radius: var(--tile-inner-border-radius);
        border-start-start-radius: var(--tile-inner-border-radius);
      }

      &:last-child {
        border-end-end-radius: var(--tile-inner-border-radius);
        border-end-start-radius: var(--tile-inner-border-radius);
      }
    }
  }

  .tile__header {
    background: var(--tile-header-background, inherit);
    border-color: var(--tile-header-border-color, inherit);
    border-style: var(--tile-header-border-style, inherit);
    border-width: var(--tile-header-border-width, 0 0 1px);

    padding-block-start: var(--tile-header-padding-top, var(--size-3));
    padding-inline-end: var(--tile-header-padding-right, var(--size-5));
    padding-block-end: var(--tile-header-padding-bottom, var(--size-3));
    padding-inline-start: var(--tile-header-padding-left, var(--size-5));
  }

  .tile__body {
    flex: var(--tile-body-flex, 1 1 auto);

    padding-block-start: var(--tile-body-padding-top, var(--size-3));
    padding-inline-end: var(--tile-body-padding-right, var(--size-5));
    padding-block-end: var(--tile-body-padding-bottom, var(--size-3));
    padding-inline-start: var(--tile-body-padding-left, var(--size-5));
  }

  .tile__footer {
    background: var(--tile-footer-background, inherit);
    border-color: var(--tile-footer-border-color, inherit);
    border-style: var(--tile-footer-border-style, inherit);
    border-width: var(--tile-footer-border-width, 1px 0 0);
    margin-block-start: var(--tile-footer-margin-top, auto);
    margin-inline-end: var(--tile-footer-margin-right, 0);
    margin-block-end: var(--tile-footer-margin-bottom, 0);
    margin-inline-start: var(--tile-footer-margin-left, 0);

    padding-block-start: var(--tile-footer-padding-top, var(--size-3));
    padding-inline-end: var(--tile-footer-padding-right, var(--size-5));
    padding-block-end: var(--tile-footer-padding-bottom, var(--size-3));
    padding-inline-start: var(--tile-footer-padding-left, var(--size-5));
  }
}