bigbuffet-rw/app/styles/soapbox/_mixins.scss

// NEW GAB SPECIFIC MIXINS

// THEME MIXINS

// 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;
  $light-theme: false !default;
  @if $light-theme {
    @include light-theme-shadow;
    background: $gab-background-container-light;
  }
}

// SHORTCUTS
@mixin input-placeholder($color) {
  &::-webkit-input-placeholder {color: $color;}
  &::-moz-placeholder {color: $color;}
  &:-ms-input-placeholder {color: $color;}
  &:-moz-placeholder {color: $color;}
}

// OLDER MIXINS
@mixin avatar-radius {
  border-radius: 50%;
  background: transparent no-repeat;
  background-position: 50%;
  background-clip: padding-box;
}

@mixin avatar-size($size: 48px) {
  width: $size;
  height: $size;
  background-size: $size $size;
}

@mixin search-input {
  @include font-size(16);
  @include line-height(19);
  outline: 0;
  box-sizing: border-box;
  width: 100%;
  border: 1px $gab-placeholder-accent solid;
  box-shadow: none;
  font-family: inherit;
  background: $nav-ui-search-bg-color;
  color: var(--highlight-text-color);
  margin: 0;
  border-radius: 4px;

  // Chrome does not like these concatinated together
  &::placeholder {color: $gab-placeholder-accent;}
  &:-ms-input-placeholder {color: $gab-placeholder-accent;}
  &::-ms-input-placeholder {color: $gab-placeholder-accent;}

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

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

@mixin search-popout {
  @include font-size(12);
  @include line-height(14);
  @include font-weight(normal);
  background: $gab-background-container;
  border-radius: 4px;
  border: 1px solid $gab-placeholder-accent;
  padding: 8px 10px 17px;
  margin: 4px 0 0;
  color: $gab-secondary-text;
  box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.5);

  h4 {
    @include font-size(14);
    @include line-height(16);
    @include font-weight(bold);
    color: #fff;
  }

  ul {
    margin: 6px 0;

    li {
      margin: 0 0 2px;
      em {color: var(--brand-color);}
    }
  }
}