|
|
|
|
@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;
|
|
|
|
|
}
|
|
|
|
|
}
|
