CodyFrame - Mixins

codyframe-mixins.markdown

CodyFrame - Mixins

A Pen by Matt Daniel Brown on CodePen.

License.

style.scss

// 💬 A look at CodyFrame's mixins 
// 🔗 http://localhost:3000/codyhouse-main/ds/docs/framework/mixins

// --------------------------------

// Typography

// --------------------------------

// edit font rendering -> tip: use for light text on dark backgrounds
@mixin fontSmooth {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

// crop top space on text elements - caused by line height
@mixin lhCrop($line-height, $capital-letter: 1) {
  &::before {
    content: '';
    display: block;
    height: 0;
    width: 0;
    margin-top: calc((#{$capital-letter} - #{$line-height}) * 0.5em);
  }
}

// edit text unit and type scale on a component level
@mixin textUnit($text-unit, $text-scale-ratio: 1.2) { 
  --text-xs: calc((#{$text-unit} / #{$text-scale-ratio}) / #{$text-scale-ratio});
  --text-sm: calc(var(--text-xs) * #{$text-scale-ratio});
  --text-md: calc(var(--text-sm) * #{$text-scale-ratio} * #{$text-scale-ratio});
  --text-lg: calc(var(--text-md) * #{$text-scale-ratio});
  --text-xl: calc(var(--text-lg) * #{$text-scale-ratio});
  --text-xxl: calc(var(--text-xl) * #{$text-scale-ratio});
  --text-xxxl: calc(var(--text-xxl) * #{$text-scale-ratio});
  --text-xxxxl: calc(var(--text-xxxl) * #{$text-scale-ratio});
  font-size: $text-unit;
}

// --------------------------------

// Spacing

// --------------------------------

// edit space unit on a component level
@mixin spaceUnit($space-unit) {
  --space-unit:  #{$space-unit};
  --space-xxxxs: calc(0.125 * #{$space-unit});
  --space-xxxs:  calc(0.25 * #{$space-unit});
  --space-xxs:   calc(0.375 * #{$space-unit});
  --space-xs:    calc(0.5 * #{$space-unit});
  --space-sm:    calc(0.75 * #{$space-unit});
  --space-md:    calc(1.25 * #{$space-unit});
  --space-lg:    calc(2 * #{$space-unit});
  --space-xl:    calc(3.25 * #{$space-unit});
  --space-xxl:   calc(5.25 * #{$space-unit});
  --space-xxxl:  calc(8.5 * #{$space-unit});
  --space-xxxxl: calc(13.75 * #{$space-unit});
  --component-padding: var(--space-md);
}

// --------------------------------

// Reset

// --------------------------------

// reset user agent style
@mixin reset {
  background-color: transparent;
  padding: 0;
  border: 0;
  border-radius: 0;
  color: inherit;
  line-height: inherit;
  appearance: none;
}

// --------------------------------

// Colors

// --------------------------------

// define HSL color variable
@mixin defineColorHSL($color, $hue, $saturation, $lightness){
  #{$color}: unquote("hsl(#{$hue}, #{$saturation}, #{$lightness})");#{$color}-h: #{$hue};#{$color}-s: #{$saturation};#{$color}-l: #{$lightness};
}

// return color with different opacity value
@function alpha($color, $opacity){
  $color: str-replace($color, 'var(');
  $color: str-replace($color, ')');
  $color-h: var(#{$color+'-h'});
  $color-s: var(#{$color+'-s'});
  $color-l: var(#{$color+'-l'});
  @return hsla($color-h, $color-s, $color-l, $opacity);
}

// return color with different lightness value
@function lightness($color, $lightnessMultiplier){
  $color: str-replace($color, 'var(');
  $color: str-replace($color, ')');
  $color-h: var(#{$color+'-h'});
  $color-s: var(#{$color+'-s'});
  $color-l: var(#{$color+'-l'});
  @return hsl($color-h, $color-s, calc(#{$color-l} * #{$lightnessMultiplier}));
}

// replace substring with another string
// credits: https://css-tricks.com/snippets/sass/str-replace-function/
@function str-replace($string, $search, $replace: '') {
  $index: str-index($string, $search);
  @if $index {
    @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
  }
  @return $string;
}

// --------------------------------

// Accessibility

// --------------------------------

// hide - content made available only to screen readers
@mixin srHide {
  position: absolute;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
}

// show
@mixin srShow {
  position: static;
  clip: auto;
  clip-path: none;
}

// --------------------------------

// Grid & Layout

// --------------------------------

$grid-columns: 12 !default;

// used to round width to a number with 2 decimal places - used for IE fallback
@function round-width ($i) {
  $width : floor(100% * $i * 100/ $grid-columns) / 100;
  @return $width;
}

// used to create the auto-size columns of the grid system (.col class)
@mixin autoSizedColumn {
  flex-grow: 1;
  flex-basis: 0;
  max-width: 100%;
}

// CSS Grid Layout fallback
@mixin gridFallback($gap: null) {
  display: flex;
  flex-wrap: wrap;
  @if( $gap == null ) {
    $gap: var(--space-md);
  }

  margin: calc(#{$gap} * -1) 0 0 calc(#{$gap} * -1);

  > * {
    padding: #{$gap} 0 0 #{$gap};
    background-clip: content-box;
  }

  @supports (grid-area: auto) {
    margin: 0;

    > * {
      padding: 0;
      max-width: none!important;
    }
  }
}

@mixin column($width) {
  @if unit($width) != '%' {
    $width: $width * 100%;
  }
  flex-basis: #{$width};
  max-width: #{$width};
}

// --------------------------------

// CSS Triangle

// --------------------------------

@mixin triangle ($direction: up, $width: 12px, $color: red) {
  width: 0;
  height: 0;
  border: $width solid transparent;

  @if( $direction == left ) {
    border-right-color: $color;
  } @else if( $direction == right ) {
    border-left-color: $color;
  } @else if( $direction == down ) {
    border-top-color: $color;
  } @else {
    border-bottom-color: $color;
  }
}

// --------------------------------

// Breakpoints

// --------------------------------

$breakpoints: (
  xs: 32rem, // ~512px
  sm: 48rem, // ~768px
  md: 64rem, // ~1024px
  lg: 80rem, // ~1280px
  xl: 90rem  // ~1440px
) !default;

@mixin breakpoint($breakpoint, $logic: false) {
  @if( $logic ) {
    @media #{$logic} and (min-width: map-get($map: $breakpoints, $key: $breakpoint)) { @content; }
  } @else {
    @media (min-width: map-get($map: $breakpoints, $key: $breakpoint)) { @content; }
  }
}