Signal-Desktop/stylesheets/_mixins.scss

@mixin color-svg($svg, $color) {
  -webkit-mask: url($svg) no-repeat center;
  -webkit-mask-size: 100%;
  background-color: $color;
}
@mixin header-icon-white($svg) {
  @include color-svg($svg, rgba(255, 255, 255, 0.8));
  &:focus,
  &:hover {
    @include color-svg($svg, white);
  }
}
@mixin header-icon-black($svg) {
  @include color-svg($svg, rgba(0, 0, 0, 0.5));
  &:focus,
  &:hover {
    @include color-svg($svg, black);
  }
}
@mixin avatar-colors {
  &.red {
    background-color: $material_red;
  }
  &.pink {
    background-color: $material_pink;
  }
  &.purple {
    background-color: $material_purple;
  }
  &.deep_purple {
    background-color: $material_deep_purple;
  }
  &.indigo {
    background-color: $material_indigo;
  }
  &.blue {
    background-color: $material_blue;
  }
  &.light_blue {
    background-color: $material_light_blue;
  }
  &.cyan {
    background-color: $material_cyan;
  }
  &.teal {
    background-color: $material_teal;
  }
  &.green {
    background-color: $material_green;
  }
  &.light_green {
    background-color: $material_light_green;
  }
  &.orange {
    background-color: $material_orange;
  }
  &.deep_orange {
    background-color: $material_deep_orange;
  }
  &.amber {
    background-color: $material_amber;
  }
  &.blue_grey {
    background-color: $material_blue_grey;
  }
  &.grey {
    background-color: #999999;
  }
  &.default {
    background-color: $blue;
  }
}
@mixin dark-avatar-colors {
  &.red {
    background-color: $dark_material_red;
  }
  &.pink {
    background-color: $dark_material_pink;
  }
  &.purple {
    background-color: $dark_material_purple;
  }
  &.deep_purple {
    background-color: $dark_material_deep_purple;
  }
  &.indigo {
    background-color: $dark_material_indigo;
  }
  &.blue {
    background-color: $dark_material_blue;
  }
  &.light_blue {
    background-color: $dark_material_light_blue;
  }
  &.cyan {
    background-color: $dark_material_cyan;
  }
  &.teal {
    background-color: $dark_material_teal;
  }
  &.green {
    background-color: $dark_material_green;
  }
  &.light_green {
    background-color: $dark_material_light_green;
  }
  &.orange {
    background-color: $dark_material_orange;
  }
  &.deep_orange {
    background-color: $dark_material_deep_orange;
  }
  &.amber {
    background-color: $dark_material_amber;
  }
  &.blue_grey {
    background-color: $dark_material_blue_grey;
  }
  &.grey {
    background-color: #666666;
  }
  &.default {
    background-color: $blue;
  }
}
@mixin twenty-percent-colors {
  &.red {
    background-color: rgba($dark_material_red, 0.2);
  }
  &.pink {
    background-color: rgba($dark_material_pink, 0.2);
  }
  &.purple {
    background-color: rgba($dark_material_purple, 0.2);
  }
  &.deep_purple {
    background-color: rgba($dark_material_deep_purple, 0.2);
  }
  &.indigo {
    background-color: rgba($dark_material_indigo, 0.2);
  }
  &.blue {
    background-color: rgba($dark_material_blue, 0.2);
  }
  &.light_blue {
    background-color: rgba($dark_material_light_blue, 0.2);
  }
  &.cyan {
    background-color: rgba($dark_material_cyan, 0.2);
  }
  &.teal {
    background-color: rgba($dark_material_teal, 0.2);
  }
  &.green {
    background-color: rgba($dark_material_green, 0.2);
  }
  &.light_green {
    background-color: rgba($dark_material_light_green, 0.2);
  }
  &.orange {
    background-color: rgba($dark_material_orange, 0.2);
  }
  &.deep_orange {
    background-color: rgba($dark_material_deep_orange, 0.2);
  }
  &.amber {
    background-color: rgba($dark_material_amber, 0.2);
  }
  &.blue_grey {
    background-color: rgba($dark_material_blue_grey, 0.2);
  }
  &.grey {
    background-color: rgba(#666666, 0.2);
  }
  &.default {
    background-color: rgba($blue, 0.2);
  }
}
@mixin text-colors {
  &.red {
    color: $material_red;
  }
  &.pink {
    color: $material_pink;
  }
  &.purple {
    color: $material_purple;
  }
  &.deep_purple {
    color: $material_deep_purple;
  }
  &.indigo {
    color: $material_indigo;
  }
  &.blue {
    color: $material_blue;
  }
  &.light_blue {
    color: $material_light_blue;
  }
  &.cyan {
    color: $material_cyan;
  }
  &.teal {
    color: $material_teal;
  }
  &.green {
    color: $material_green;
  }
  &.light_green {
    color: $material_light_green;
  }
  &.orange {
    color: $material_orange;
  }
  &.deep_orange {
    color: $material_deep_orange;
  }
  &.amber {
    color: $material_amber;
  }
  &.blue_grey {
    color: $material_blue_grey;
  }
  &.grey {
    color: #999999;
  }
  &.default {
    color: $blue;
  }
}

// TODO: Deduplicate these! Can SASS functions generate property names?
@mixin message-replies-colors {
  &.red {
    border-left-color: $material_red;
  }
  &.pink {
    border-left-color: $material_pink;
  }
  &.purple {
    border-left-color: $material_purple;
  }
  &.deep_purple {
    border-left-color: $material_deep_purple;
  }
  &.indigo {
    border-left-color: $material_indigo;
  }
  &.blue {
    border-left-color: $material_blue;
  }
  &.light_blue {
    border-left-color: $material_light_blue;
  }
  &.cyan {
    border-left-color: $material_cyan;
  }
  &.teal {
    border-left-color: $material_teal;
  }
  &.green {
    border-left-color: $material_green;
  }
  &.light_green {
    border-left-color: $material_light_green;
  }
  &.orange {
    border-left-color: $material_orange;
  }
  &.deep_orange {
    border-left-color: $material_deep_orange;
  }
  &.amber {
    border-left-color: $material_amber;
  }
  &.blue_grey {
    border-left-color: $material_blue_grey;
  }
  &.grey {
    border-left-color: #999999;
  }
  &.default {
    border-left-color: $blue;
  }
}
@mixin dark-message-replies-colors {
  &.red {
    border-left-color: $dark_material_red;
  }
  &.pink {
    border-left-color: $dark_material_pink;
  }
  &.purple {
    border-left-color: $dark_material_purple;
  }
  &.deep_purple {
    border-left-color: $dark_material_deep_purple;
  }
  &.indigo {
    border-left-color: $dark_material_indigo;
  }
  &.blue {
    border-left-color: $dark_material_blue;
  }
  &.light_blue {
    border-left-color: $dark_material_light_blue;
  }
  &.cyan {
    border-left-color: $dark_material_cyan;
  }
  &.teal {
    border-left-color: $dark_material_teal;
  }
  &.green {
    border-left-color: $dark_material_green;
  }
  &.light_green {
    border-left-color: $dark_material_light_green;
  }
  &.orange {
    border-left-color: $dark_material_orange;
  }
  &.deep_orange {
    border-left-color: $dark_material_deep_orange;
  }
  &.amber {
    border-left-color: $dark_material_amber;
  }
  &.blue_grey {
    border-left-color: $dark_material_blue_grey;
  }
  &.grey {
    border-left-color: #666666;
  }
  &.default {
    border-left-color: $blue;
  }
}

@mixin invert-text-color {
  color: white;

  &::selection {
    background: white;
    color: $grey_d;
  }
}