Contents

// Generate the grid for a particular size
@mixin make-cols($size) {

  @for $i from 1 through susy-get(columns) {
    .col-#{$size}-#{$i} {
      @include span($i);
      @include trailer(susy-get(gutters));

      > .row {
        margin: 0 (- gutter()) (- gutter());
      }
    }
  }
}

// Generate bottom arrow to header panels
@mixin arrow($size, $color, $offset) {
  position: relative;

  &:after {
    @include output-rhythm(border-width, $size);
    @include output-rhythm(bottom, -1.8 * $size);
    @include translateX(-$offset);
    border: {
      color: transparent;
      style: solid;
      top-color: $color;
    }
    content: '';
    height: 0;
    left: $offset;
    pointer-events: none;
    position: absolute;
    visibility: visible;
    width: 0;
  }
}

// Generate panel
@mixin panel($header-bg-color, $header-text-color, $content-bg-color: transparent, $content-border-color: transparent, $padding: .4rem) {
  @include trailer(1);

  .panel-header {
    @include output-rhythm(padding, $padding);
    background-color: $header-bg-color;
    color: $header-text-color;
    font-size: 1.2em;
    font-weight: bold;

    &.arrow {
      @include arrow(rhythm(.4), $header-bg-color, 20%);
    }

    &.border-bottom {
      @include output-rhythm(border-bottom, rhythm(.4));
      border-bottom: {
        color: adjust-color($header-bg-color, $hue: -2, $saturation: 48%, $lightness: -38%);
        style: solid;
      }
    }
  }

  .panel-content {
    @include output-rhythm(padding, $padding);
    background-color: $content-bg-color;
    border: 1px solid $content-border-color;
    border-top: 0;
  }
}

Version data entries

2 entries across 2 versions & 1 rubygems

Version	Path
psique-0.1.1	assets/stylesheets/psique/_mixins.scss
psique-0.1.0	assets/stylesheets/psique/_mixins.scss