gitlab-org--gitlab-foss/app/assets/stylesheets/mailers/highlighted_diff_email.scss
Tim Zallmann 46a1ca2889 Added Stylelint Setup
Added stylelint to static-analysis
Updated yarn dependencies
CSS Fixes and rule adoptions of stylelint
Added stylelint-scss
Deduplicated yarn.lock to clear dependencies

First round of advanced stylelint rules

Mainly Vendor prefix updates related to flex

Updates to more webkit specific vendor prefixes

Finished all vendor specific fixes

Moved now 4 rules to warning

Fixed the new scss lint problems

More stylelint adaptions after rebase
2019-02-25 20:03:33 +01:00

258 lines
6 KiB
SCSS

@import 'framework/variables';
// This file is largely copied from `highlight/white.scss`, but modified to
// avoid all descendant selectors (`table td`). This is because the CSS inlining
// we use performs dramatically worse on descendant selectors than the
// alternatives.
// <https://gitlab.com/gitlab-org/gitlab-ee/issues/490#note_12283632>
//
// DO NOT ADD ANY DESCENDANT SELECTORS TO THIS FILE. Instead, use (in order of
// preference): plain class selectors, type (element name) selectors, or
// explicit child selectors.
/*
* Highlighted Diff Email Syntax Colors
*/
$highlighted-highlight-word: #fafe3d;
$highlighted-hll-bg: #f8f8f8;
$highlighted-c: #998;
$highlighted-err: #a61717;
$highlighted-err-bg: #e3d2d2;
$highlighted-cm: #998;
$highlighted-cp: #999;
$highlighted-c1: #998;
$highlighted-cs: #999;
$highlighted-gd: #000;
$highlighted-gd-bg: #fdd;
$highlighted-gd-x: #000;
$highlighted-gd-x-bg: #faa;
$highlighted-gr: #a00;
$highlighted-gh: #999;
$highlighted-gi: #000;
$highlighted-gi-bg: #dfd;
$highlighted-gi-x: #000;
$highlighted-gi-x-bg: #afa;
$highlighted-go: #888;
$highlighted-gp: #555;
$highlighted-gu: #800080;
$highlighted-gt: #a00;
$highlighted-kt: #458;
$highlighted-m: #099;
$highlighted-s: #d14;
$highlighted-n: #333;
$highlighted-na: #008080;
$highlighted-nb: #0086b3;
$highlighted-nc: #458;
$highlighted-no: #008080;
$highlighted-ni: #800080;
$highlighted-ne: #900;
$highlighted-nf: #900;
$highlighted-nn: #555;
$highlighted-nt: #000080;
$highlighted-nv: #008080;
$highlighted-w: #bbb;
$highlighted-mf: #099;
$highlighted-mh: #099;
$highlighted-mi: #099;
$highlighted-mo: #099;
$highlighted-sb: #d14;
$highlighted-sc: #d14;
$highlighted-sd: #d14;
$highlighted-s2: #d14;
$highlighted-se: #d14;
$highlighted-sh: #d14;
$highlighted-si: #d14;
$highlighted-sx: #d14;
$highlighted-sr: #009926;
$highlighted-s1: #d14;
$highlighted-ss: #990073;
$highlighted-bp: #999;
$highlighted-vc: #008080;
$highlighted-vg: #008080;
$highlighted-vi: #008080;
$highlighted-il: #099;
$highlighted-gc: #999;
$highlighted-gc-bg: #eaf2f5;
.code {
background-color: $white-light;
font-family: monospace;
font-size: $code-font-size;
-premailer-cellpadding: 0;
-premailer-cellspacing: 0;
-premailer-width: 100%;
> tr {
line-height: $code-line-height;
}
}
.diff-line-num {
padding: 0 5px;
text-align: right;
width: 35px;
background-color: $gray-light;
color: $black-transparent;
border-right: 1px solid $white-normal;
&.old {
background-color: $line-number-old;
border-right-color: $line-removed-dark;
}
&.new {
background-color: $line-number-new;
border-right-color: $line-added-dark;
}
}
.line_content {
padding-left: 0.5em;
padding-right: 0.5em;
&.old {
background-color: $line-removed;
> .line > span.idiff,
> .line > span > span.idiff {
background-color: $line-removed-dark;
}
}
&.new {
background-color: $line-added;
> .line > span.idiff,
> .line > span > span.idiff {
background-color: $line-added-dark;
}
}
&.match {
color: $black-transparent;
background-color: $gray-light;
}
}
pre {
margin: 0;
}
blockquote,
.blockquote {
color: $gl-grayish-blue;
padding: 0 0 0 15px;
margin: 0;
border-left: 3px solid $white-dark;
}
span.highlight_word {
background-color: $highlighted-highlight-word !important;
}
.hll { background-color: $highlighted-hll-bg; }
.c { color: $highlighted-c;
font-style: italic; }
.err { color: $highlighted-err;
background-color: $highlighted-err-bg; }
.k { font-weight: $gl-font-weight-bold; }
.o { font-weight: $gl-font-weight-bold; }
.cm { color: $highlighted-cm;
font-style: italic; }
.cp { color: $highlighted-cp;
font-weight: $gl-font-weight-bold; }
.c1 { color: $highlighted-c1;
font-style: italic; }
.cs { color: $highlighted-cs;
font-weight: $gl-font-weight-bold;
font-style: italic; }
.gd {
color: $highlighted-gd;
background-color: $highlighted-gd-bg;
.x {
color: $highlighted-gd;
background-color: $highlighted-gd-x-bg;
}
}
.ge { font-style: italic; }
.gr { color: $highlighted-gr; }
.gh { color: $highlighted-gh; }
.gi {
color: $highlighted-gi;
background-color: $highlighted-gi-bg;
.x {
color: $highlighted-gi;
background-color: $highlighted-gi-x-bg;
}
}
.go { color: $highlighted-go; }
.gp { color: $highlighted-gp; }
.gs { font-weight: $gl-font-weight-bold; }
.gu { color: $highlighted-gu;
font-weight: $gl-font-weight-bold; }
.gt { color: $highlighted-gt; }
.kc { font-weight: $gl-font-weight-bold; }
.kd { font-weight: $gl-font-weight-bold; }
.kn { font-weight: $gl-font-weight-bold; }
.kp { font-weight: $gl-font-weight-bold; }
.kr { font-weight: $gl-font-weight-bold; }
.kt { color: $highlighted-kt;
font-weight: $gl-font-weight-bold; }
.m { color: $highlighted-m; }
.s { color: $highlighted-s; }
.n { color: $highlighted-n; }
.na { color: $highlighted-na; }
.nb { color: $highlighted-nb; }
.nc { color: $highlighted-nc;
font-weight: $gl-font-weight-bold; }
.no { color: $highlighted-no; }
.ni { color: $highlighted-ni; }
.ne { color: $highlighted-ne;
font-weight: $gl-font-weight-bold; }
.nf { color: $highlighted-nf;
font-weight: $gl-font-weight-bold; }
.nn { color: $highlighted-nn; }
.nt { color: $highlighted-nt; }
.nv { color: $highlighted-nv; }
.ow { font-weight: $gl-font-weight-bold; }
.w { color: $highlighted-w; }
.mf { color: $highlighted-mf; }
.mh { color: $highlighted-mh; }
.mi { color: $highlighted-mi; }
.mo { color: $highlighted-mo; }
.sb { color: $highlighted-sb; }
.sc { color: $highlighted-sc; }
.sd { color: $highlighted-sd; }
.s2 { color: $highlighted-s2; }
.se { color: $highlighted-se; }
.sh { color: $highlighted-sh; }
.si { color: $highlighted-si; }
.sx { color: $highlighted-sx; }
.sr { color: $highlighted-sr; }
.s1 { color: $highlighted-s1; }
.ss { color: $highlighted-ss; }
.bp { color: $highlighted-bp; }
.vc { color: $highlighted-vc; }
.vg { color: $highlighted-vg; }
.vi { color: $highlighted-vi; }
.il { color: $highlighted-il; }
.gc { color: $highlighted-gc;
background-color: $highlighted-gc-bg; }