gab-social/app/javascript/styles/_mixins.scss

@mixin breakpoint($point) {
  @if $point==lg {
    @media screen and (min-width: 1366px) {
      @content;
    }
  }

  @else if $point==md {
    @media screen and (min-width: 1024px) {
      @content;
    }
  }

  @else if $point==sm {
    @media screen and (max-width: 600px) {
      @content;
    }
  }
}

@mixin theme($themes: $themes) {

  @each $theme,
  $map in $themes {
    .theme-#{$theme} & {
      $theme-map: () !global;

      @each $key,
      $submap in $map {
        $value: map-get(map-get($themes, $theme), '#{$key}');
        $theme-map: map-merge($theme-map, ($key: $value)) !global;
      }

      @content;
      $theme-map: null !global;
    }
  }
}

@mixin margin-center($vertical: 0) {
  @if ($vertical !=0) {
    margin: $vertical auto $vertical auto;
  }

  @else {
    margin: {
      left: auto;
      right: auto;
    }
  }
}

@mixin horizontal-margin($left, $right: $left) {
  margin-left: $left;
  margin-right: $right;
}

@mixin vertical-margin($top, $bottom: $top) {
  margin-top: $top;
  margin-bottom: $bottom;
}

@mixin horizontal-padding($left, $right: $left) {
  padding-left: $left;
  padding-right: $right;
}

@mixin vertical-padding($top, $bottom: $top) {
  padding-top: $top;
  padding-bottom: $bottom;
}

@function z($name) {
  @if index($z-indexes, $name) {
    @return (length($z-indexes) - index($z-indexes, $name))+1;
  }

  @else {
    @warn 'There is no item "#{$name}" in this list; choose one of: #{$z-indexes}';
    @return null;
  }
}

@mixin flex($justifyContent: flex-start, $alignItems: stretch, $direction: row, $flexWrap: nowrap) {
  display: flex;

  @if ($justifyContent) {
    justify-content: $justifyContent;
  }

  @if ($alignItems) {
    align-items: $alignItems;
  }

  @if ($direction) {
    flex-direction: $direction;
  }

  @if ($flexWrap) {
    flex-wrap: $flexWrap;
  }
}

@mixin abs-position($top: auto, $right: auto, $bottom: auto, $left: auto, $includeAbsolute:true) {
  @if ($includeAbsolute) {
    position: absolute;
  }

  top: $top;
  left: $left;
  bottom: $bottom;
  right: $right;
}

@mixin border-design($color: #fff, $size: 1px, $radius: 0px) {
  border-radius: $radius;
  border: $size solid $color;
}

@mixin bottom-spacing($margin: 0px, $padding: $margin) {
  margin-bottom: $margin;
  padding-bottom: $padding;
}

@mixin text-sizing($fontSize, $fontWeight, $lineHeight: 1, $textAlign: '', $letterSpacing: '') {
  font-size: $fontSize;
  font-weight: $fontWeight;

  @if ($lineHeight !=1) {
    line-height: $lineHeight;
  }

  @if ($textAlign !='') {
    text-align: $textAlign;
  }

  @if ($letterSpacing !='') {
    letter-spacing: $letterSpacing;
  }
}

@mixin background-image($url: "", $size: cover, $position: center, $repeat: no-repeat) {
  @if ($url !="") {
    background-image: url($url);
  }

  background-size: $size;
  background-position: $position;
  background-repeat: $repeat;
}

@mixin pseudo($content: "", $display: block, $position: absolute) {
  content: $content;
  display: $display;
  position: $position;
}

@mixin circle($size) {
  @include size($size);
  border-radius: $size / 2;
}

@mixin size($width: 100%, $height: $width) {
  width: $width;
  height: $height;
}

@mixin min-size($width: 100%, $height: $width) {
  min-width: $width;
  min-height: $height;
}

@mixin max-size($width: 100%, $height: $width) {
  max-width: $width;
  max-height: $height;
}

@mixin unselectable {
  -webkit-touch-callout: none;
  user-select: none;
}

@mixin text-overflow($whitespace: '', $wordWrap: '') {
  overflow: hidden;
  text-overflow: ellipsis;

  @if ($whitespace !='') {
    white-space: $whitespace;
  }

  @if ($wordWrap !='') {
    word-wrap: $wordWrap;
  }
}

@mixin input-placeholder {
  &.placeholder {
    @content;
  }

  &:-moz-placeholder {
    @content;
  }

  &::-moz-placeholder {
    @content;
  }

  &:-ms-input-placeholder {
    @content;
  }

  &::-webkit-input-placeholder {
    @content;
  }
}

// standard container drop shadow
@mixin light-theme-shadow() {
  box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.1);
}

// common properties for all standard containers
@mixin gab-container-standards() {
  border-radius: 10px;
  background: $gab-background-container;

  body.theme-gabsocial-light & {
    @include light-theme-shadow();
    background: $gab-background-container-light;
  }
}

@mixin avatar-radius() {
  border-radius: 50%;
}

@mixin search-input() {
  outline: 0;
  box-sizing: border-box;
  width: 100%;
  box-shadow: none;
  font-family: inherit;
  background: $gab-background-container;
  color: $gab-text-highlight;
  margin: 0;

  @include text-sizing(16px, 400, 19px);
  @include border-design($gab-placeholder-accent, 1px, 4px);

  @include input-placeholder {
    color: $gab-placeholder-accent;
  }

  &::-moz-focus-inner {
    border: 0;
  }

  &::-moz-focus-inner,
  &:focus,
  &:active {
    outline: 0 !important;
  }
}

// TYPEOGRAPHY MIXINS

// declare the font family using these shortcuts
@mixin font-roboto() {
  font-family: 'Roboto', Arial, sans-serif !important;
}

@mixin font-montserrat() {
  font-family: 'Montserrat', Arial, sans-serif !important;
}

// Declare font weights as a numerical value in rendered output
// Prevents certain browsers which do not play nice with "light, medium" textual declarations
// Numeical values always work more consistently across browsers
// Each font-weight is linked with the @font-face declaration to the actual font file
@mixin font-weight($weight) {
  @if $weight=='light' {
    font-weight: 300;
  }

  @if $weight=='normal' {
    font-weight: 400;
  }

  @if $weight=='medium' {
    font-weight: 500;
  }

  @if $weight=='bold' {
    font-weight: 700;
  }

  @if $weight=='extrabold' {
    font-weight: 800;
  }
}

// Use these mixins to define font-size and line-height
// html and body declaration allows developer to pass px value as argument
// Rendered css will default to "rem" and fall back to "px" for unsupported browsers
@mixin font-size($size) {
  $rem: ($size / 10);
  $px: $size;
  font-size: #{$px + "px"};
  font-size: #{$rem + "rem"};
}

@mixin line-height($size) {
  $rem: ($size / 10);
  $px: $size;
  line-height: #{$px + "px"};
  line-height: #{$rem + "rem"};
}