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 {
    background: var(--tile-background, white);
    border-color: var(--tile-border-color, LightGrey);
    border-radius: var(--tile-border-radius, 0);
    border-style: var(--tile-border-style, solid);
    border-width: var(--tile-border-width, 1px);
    border-left-color: var(--tile-border-left-color, LightGrey);
    border-left-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: var(--tile-margin-top, 0) var(--tile-margin-right, 0)
      var(--tile-margin-bottom, var(--size-3)) 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-top-right-radius: var(--tile-inner-border-radius, 0);
        border-top-left-radius: var(--tile-inner-border-radius, 0);
      }

      &:last-child {
        border-bottom-right-radius: var(--tile-inner-border-radius, 0);
        border-bottom-left-radius: var(--tile-inner-border-radius, 0);
      }
    }

    .tile__header,
    .tile__body,
    .tile__footer {
      padding: var(--tile-inner-padding-top, var(--size-3))
        var(--tile-inner-padding-right, var(--size-5))
        var(--tile-inner-padding-bottom, var(--size-3))
        var(--tile-inner-padding-left, var(--size-5));
    }

    .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);
    }

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

    .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: var(--tile-footer-margin, auto 0 0);
    }
  }
}