sass-useful.mixins.scss

/**
 * Sets a media query for the specified breakpoint
 *
 * Accepts:
 * - $at-query: {String} Breakpoint variable (list found in variables.scss)
 *
 * Usage:
 * .selector {
 *   @include at-query($medium) {
 *     color: red;
 *   }
 * }
 */

$minWidth: min-width;
$maxWidth: max-width;

@mixin at-query($_viewport, $_constraint: $maxWidth) {
  @media screen and ($_constraint: $_viewport) {
    @content;
  }
}

/**
 * Hide element but make it accessible to screen readers
 *
 * Usage:
 * .selector {
 *   @include visually-hidden;
 * }
 */

@mixin visually-hidden() {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute !important;
  width: 1px;
}

/**
 * Reverse the properties applied by @mixin visually-hidden
 *
 * Accepts:
 * - $position: {String} Positioning method for element
 *
 * Usage:
 * .selector {
 *   @include visually-shown(relative);
 * }
 */

@mixin visually-shown($_position: inherit) {
  // stylelint-disable-next-line
  clip: auto;
  height: auto;
  margin: 0;
  overflow: auto;
  position: $_position !important;
  width: auto;
}

@mixin clearfix() {
  &::after {
    clear: both;
    content: '';
    display: block;
  }
}

$gridOffsets: 20px;

@mixin block-row($_offsets) {
  @include clearfix();

  display: block;
  margin-left: -$_offsets;
  margin-right: -$_offsets;
  width: auto;
}

@mixin block-col($_factor: 1, $_offset) {
  display: block;
  float: left;
  padding-left: $_offset;
  padding-right: $_offset;
  width: $_factor * 100%;
}

@mixin flex-row($_offsets, $_wrap: 'true') {
  display: flex;
  flex-wrap: wrap;
  margin-left: -$_offsets;
  margin-right: -$_offsets;
  width: auto;

  @if $_wrap == 'false' {
    flex-wrap: nowrap;
  }
}

@mixin flex-col($_factor: 1, $_offset) {
  display: flex;
  flex-basis: calc(100% * #{$_factor} - #{$_offset} * 2);
  margin-left: $_offset;
  margin-right: $_offset;
}

@mixin container($_width, $_pad) {
  margin-left: auto;
  margin-right: auto;
  max-width: $_width;
  padding-left: $_pad;
  padding-right: $_pad;
  width: 100%;
}

@mixin button($_bgColor, $_color, $_height, $_pad) {
  align-items: center;
  appearance: none;
  background: $_bgColor;
  border: 1px solid $_bgColor;
  color: $_color;
  display: flex;
  height: $_height - 2px;
  justify-content: center;
  padding-left: $_pad;
  padding-right: $_pad;
  text-align: center;
  text-decoration: none;
  user-select: none;
  vertical-align: middle;
  white-space: nowrap;
  width: fit-content;

  &:hover {
    opacity: 0.8;
  }
}

@mixin button-bordered($_color, $_height) {
  @include button(transparent, $_color, $_height);

  border-color: $_color;
  color: $_color;

  &:hover {
    background-color: $_color;
    color: $colorWhite;
    opacity: 1;
  }
}

@mixin hide-on($_query) {
  @include at-query($_query) {
    display: none;
  }
}

@mixin show-on($_query) {
  @include at-query($_query, $minWidth) {
    display: none;
  }
}

@mixin list-default {
  margin: 0;
  list-style-type: none;

  li {
    margin: 0;
  }
}

@mixin ratio ($_ratio, $_type: 'after') {
  &:{#$_type} {
    content: '';
    visibility: hidden;
    display: block;
    padding-bottom: ($_ratio) * 100%;
  }
}

@mixin center () {
  display: block;
  margin-right: auto;
  margin-left: auto;
  float: none;
}

// TODO: inputs, select, triangles,

sass-useful.variables.scss

// Text colors
$colorMain: #f04f36;
$colorBlack: #333838;
$colorWhite: #fff;
$colorBodyText: $colorBlack;
$colorGrey: #333838;
$colorLightGrey: #f2f2f2;
$colorBorderGrey: #f8f6f5;
$colorNoActive: #acacac;
$colorGrayDark: #727272;

// Transitions
$transition-duration: 0.25s;
$transition-timing: ease-in-out;

$gridGutter: 30px;

$small: 576px; // Smartphones
$medium: 768px; // Small tablets and large smartphones (landscape view)
$large: 992px; // Tablets and small desktops
$xLarge: 1200px; // Large tablets and desktops
$xxLarge: 1400px; // XX-large tablets and desktops

// Content width
$pageWidth : $xLarge;

// Z-index order
$zIndexNormal: 1;
$zIndexMedium: 5;
$zIndexLarge: 9;
$zIndexSubMenu: 49;
$zIndexMenu: 99;
$zIndexDropdown: 499;
$zIndexModal: 999;
$zIndexMax: 9999;