hlfcoding/hlf-css

//
// Chrome Helpers
// ==============
// Vendor prefixing not included. You're encouraged to use an auto-prefixing solution.

@import 'grayscale-colors';
@import 'css-helpers';

// Box Shadows
// -----------

// A preset using box-shadow that by default has no offset, where two box
// shadows are applied uniformly, one for an inner shadow, another for an outer
// "edge", to create the appearance of a bevel. You can provide inverted colors
// for the "contour" look, where it's bumpy, not caved in.
// @deprecated
@mixin simple-bevel($shade, $light,
                    $shade-blur: 1px, $light-blur: 0,
                    $shade-size: 0, $light-size: 1px,
                    $shade-x: 0, $shade-y: 0)
{
  box-shadow: inset $shade-x $shade-y $shade-blur $shade-size $shade,
              0 0 $light-blur $light-size $light;
}

// Text Effects
// ------------

// Draws an inset around the text.
// TODO: Document.
// @deprecated
@mixin text-inset($outset-color: $W-5, $inset-color: $b-5, $text-color: #ddd,
                  $offset: 3px, $direction: vertical, $offset-direction: 1)
{
  @if $direction == vertical {
    text-shadow: 0 ($offset-direction * 1px) 0 $outset-color;
  } @else if $direction == horizontal {
    text-shadow: ($offset-direction * 1px) 0 0 $outset-color;
  }
  @if $inset-color != $clear {
    > span[data-title] {
      color: $inset-color;
      position: relative;
      top: 2px - $offset;

      &::before {
        color: $text-color;
        content: attr(data-title);
        height: 100%;
        position: absolute;
        text-shadow: none;
        width: 100%;
        @if $direction == vertical {
          left: 0;
          top: $offset;
        } @else if $direction == horizontal {
          left: $offset;
          top: 0;
        }
      }
    }
  }
}

// Mostly derived from HTML5 Boilerplate. Useful mainly for disabling /
// neutralizing visibly selected text.
@mixin text-selection($color: $b-2, $text-color: #fff) {
  ::selection {
    background: $color;
    color: $text-color;
    text-shadow: none;
  }

  @if $color == transparent {
    cursor: default;
  }
}

// Appends '...' to the end by default. Requires some sort of set width.
@mixin truncated-text ($overflow: ellipsis) {
  text-overflow: $overflow;
  overflow-x: hidden;
  white-space: nowrap;
}

%default-truncated-text {
  @include truncated-text;
}

// Full Styles
// -----------

// Common ruled-list style. This can apply to any group of elements where you want
// lines in between (but not on either edge of the group). The colors and optional
// light source are meant to give the borders a beveled feel. The light source also
// controls the orientation. The edge padding allows padding to each of the edges,
// and the selector can be used to specify what selector (in the context of the
// first and last child), gets the padding. You can pass false for either to omit
// the respective styles.
// TODO: box-shadow implementation support.
// TODO: horizontal support.
@mixin ruled-list($light, $shade, $edge-padding: 0,
                  $edge-padding-selector: '&',
                  $first-item-selector: '&: first-child',
                  $last-item-selector: '&:last-child',
                  $item-selector: '&',
                  $light-source: top)
{
  $start: top;
  $end: bottom;
  @if $light-source == left {
    $start: left;
    $end: right;
  }

  #{$item-selector} {
    border: {
      #{$start}: 1px solid $light;
      #{$end}: 1px solid $shade;
    }
  }

  @if $first-item-selector {
    #{$first-item-selector} {
      border-#{$start}: 0;
      @if $edge-padding > 0 {
        #{$edge-padding-selector} { padding-#{$start}: $edge-padding; }
      }
    }
  }
  @if $last-item-selector {
    #{$last-item-selector} {
      border-#{$end}: 0;
      @if $edge-padding > 0 {
        #{$edge-padding-selector} { padding-#{$end}: $edge-padding; }
      }
    }
  }
}