ausybenelux / Ocelot

Ocelot is a theming starter kit for drupal 7.
5 stars 2 forks source link

Review mixins #174

Closed rob-bar closed 8 years ago

rob-bar commented 9 years ago

rhythm

rh()

icons

show-icon

Headings

@mixin h1($font-size: 50, $text-color: $text-color) {
  @include typo(font-family-stack($source, mg($source-type, semibold), $source-stack-tail), $font-size, strip-units(modular-scale(1, $font-size)), $text-color);
  text-transform: uppercase;
  @include heading($font-size);
}

@mixin h2($font-size: 40, $text-color: $text-color) {
  @include typo(font-family-stack($source, mg($source-type, regular), $source-stack-tail), $font-size, strip-units(modular-scale(1, $font-size)), $text-color);
  @include heading($font-size);
}

@mixin h3($font-size: 28, $text-color: $text-color) {
  @include typo(font-family-stack($source, mg($source-type, semibold), $source-stack-tail), $font-size, strip-units(modular-scale(1, $font-size)), $text-color);
  @include heading($font-size);
}

@mixin h4($font-size: 24, $text-color: $text-color) {
  @include typo(font-family-stack($source, mg($source-type, bold), $source-stack-tail), $font-size, strip-units(modular-scale(1, $font-size)), $text-color);
  @include heading($font-size, mg($breakpoint-ratios, tablet));
}

@mixin h5($font-size: 20, $text-color: $text-color) {
  @include typo(font-family-stack($source, mg($source-type, bold), $source-stack-tail), $font-size, strip-units(modular-scale(1, $font-size)), $text-color);
  @include heading($font-size, mg($breakpoint-ratios, tablet));
}

@mixin h6($font-size: 18, $text-color: $text-color) {
  @include typo(font-family-stack($source, mg($source-type, bold), $source-stack-tail), $font-size, strip-units(modular-scale(1, $font-size)), $text-color);
  @include heading($font-size, mg($breakpoint-ratios, tablet));
}

@mixin heading($font-size, $mobileratio: mg($breakpoint-ratios, mobile)) {
  margin: 0 0 #{modular-scale(-2, $font-size)}px 0;
  @include font-size-line-height($font-size * $mobileratio, strip-units(modular-scale(1, $font-size * $mobileratio)));

  @include media (mg($breakpoints, tablet)) {
    @include font-size-line-height($font-size * mg($breakpoint-ratios, tablet), strip-units(modular-scale(1, $font-size * mg($breakpoint-ratios, tablet))));
  }

  @include media (mg($breakpoints, desktop)) {
    @include font-size-line-height($font-size, strip-units(modular-scale(1, $font-size)));
  }
}

link behavior

@mixin link-behavior($inverse: false) {
  @if $inverse {
    text-decoration: underline;

    &.active,
    &:active,
    &:focus,
    &:hover {
      text-decoration: none;
    }
  } @else {
    text-decoration: none;

    &.active,
    &:active,
    &:focus,
    &:hover {
      text-decoration: underline;
    }
  }
}
rob-bar commented 9 years ago
@mixin unselectable {
  @include prefixer(user-select, none, webkit moz spec o);
}
driesd commented 9 years ago

link-more

@mixin link-more {
  @include link-behavior;
  // Insert your own "Read more"-link styles
}
rob-bar commented 9 years ago

preferred bourbon method

Modular Scale

legacy compass method

@function rhythm($lines: 1, $font-size: $base-font-size, $offset: 0) {
  $rhythm: convert-length($lines * $base-line-height - $offset, $rhythm-unit, $font-size);
  @if unit($rhythm) == px {
    $rhythm: floor($rhythm);
  }
  @return $rhythm;
}
// Convert any CSS <length> or <percentage> value to any another.
//
// @param $length
//   A css <length> or <percentage> value
//
// @param $to-unit
//   String matching a css unit keyword, e.g. "em", "%", etc.
//
// @param $from-context
//   When converting from relative units, the absolute length (in px) to
//   which $length refers (e.g. for $lengths in em units, would normally be the
//   font-size of the current element).
//
// @param $to-context
//   For converting to relative units, the absolute length in px to which the
//   output value will refer. Defaults to the same as $from-context, since it is
//   rarely needed.
@function convert-length($length, $to-unit, $from-context: $base-font-size, $to-context: $from-context) {
  $from-unit: unit($length);

  // Optimize for cases where `from` and `to` units are accidentally the same.
  @if $from-unit == $to-unit { @return $length; }

  // Context values must be in px so we can determine a conversion ratio for
  // relative units.
  @if unit($from-context) != "px" { @warn "Paremeter $from-context must resolve to a value in pixel units."; }
  @if unit($to-context) != "px" { @warn "Parameter $to-context must resolve to a value in pixel units."; }

  // Convert input length to pixels
  $px-length: $length;

  @if $from-unit != "px" {
    // Convert relative units using the from-context parameter.
    @if      $from-unit == "em"  { $px-length: $length * $from-context / 1em; }
    @else if $from-unit == "rem" { $px-length: $length * $base-font-size / 1rem; }
    @else if $from-unit == "%"   { $px-length: $length * $from-context / 100%; }
    @else if $from-unit == "ex"  { $px-length: $length * $from-context / 2ex; }
    // Convert absolute units using Sass" conversion table.
    @else if $from-unit == "in" or $from-unit == "mm" or $from-unit == "cm" or $from-unit == "pt" or $from-unit == "pc"  { $px-length: 0px + $length; }
    // Certain units can"t be converted.
    @else if $from-unit == "ch" or $from-unit == "vw" or $from-unit == "vh" or $from-unit == "vmin" {
      @warn "#{$from-unit} units cant be reliably converted; Returning original value.";
      @return $length;
    }
    @else {
      @warn "#{$from-unit} is an unknown length unit. Returning original value.";
      @return $length;
    }
  }

  // Convert length in pixels to the output unit
  $output-length: $px-length;
  @if $to-unit != "px" {
    // Relative units
    @if      $to-unit == "em" { $output-length: $px-length * 1em / $to-context; }
    @else if $to-unit == "rem" { $output-length: $px-length * 1rem / $base-font-size; }
    @else if $to-unit == "%" { $output-length: $px-length * 100% / $to-context; }
    @else if $to-unit == "ex" { $output-length: $px-length * 2ex / $to-context; }
    // Absolute units
    @else if $to-unit == "in" { $output-length: 0in + $px-length; }
    @else if $to-unit == "mm" { $output-length: 0mm + $px-length; }
    @else if $to-unit == "cm" { $output-length: 0cm + $px-length; }
    @else if $to-unit == "pt" { $output-length: 0pt + $px-length; }
    @else if $to-unit == "pc" { $output-length: 0pc + $px-length; }
    // Non-convertible units
    @else if $to-unit == "ch" or $to-unit == "vw" or $to-unit == "vh" or $to-unit == "vmin" {
      @warn "#{$to-unit} units can't be reliably converted; Returning original value.";
      @return $length;
    }
    @else {
      @warn "#{$to-unit} is an unknown length unit. Returning original value.";
      @return $length;
    }
  }

  @return $output-length;
}

// @private Get the px/rem versions of a value.
@function rem-fallback-values($value) {
  $_return: (
    px: $value,
    rem: $value,
  );

  @if type-of($value) == number and not unitless($value) {
    @if unit($value) == rem {
      $_return: map-merge($_return, (
        px: round(convert-length($value, px)),
      ));
    } @else if unit($value) == px {
      $_return: map-merge($_return, (
        px: round($value),
        rem: convert-length($value, rem),
      ));
    }
  }

  @return $_return;
}

// @private Get the px/rem versions of a list (or nested lists).
@function list-convert-rems($value) {
  $_empty: (
    px: (),
    rem: (),
  );
  $_return: $_empty;
  $_sep: null;

  @if type-of($value) == list {
    $_sep: list-separator($value);
    @each $sub in $value {
      $_this: list-convert-rems($sub);
      $_return: (
        px: append(map-get($_return, px), map-get($_this, px), $_sep),
        rem: append(map-get($_return, rem), map-get($_this, rem), $_sep),
      );
    }
  } @else {
    $_this: rem-fallback-values($value);
    $_return: map-merge($_return, $_this);
  }

  @return $_return;
}

// Output a given style rule containing rem values along with an (optional)
// fallback rule for older browsers (with rem values converted to px).
//
// @param $property
//   The css property name.
//
// @param $values
//   The value or list of values for the property.
//
// @param $use-px-fallback
//   [ true | false ]
//
@mixin rem($property, $values, $use-px-fallback: $rem-with-px-fallback) {

  // get converted values.
  $values: list-convert-rems($values);
  $px-values: map-get($values, px);
  $values: map-get($values, rem);

  // Use pixel fallback for browsers that don"t understand rem units.
  @if $use-px-fallback and $px-values != $values {
    #{$property}: $px-values;
  }

  // Use rem values for everyone else (overrides pixel values).
  #{$property}: $values;
}