Merge pull request #28 from csalmeida/themes-v4

Theme rewrite for ProtonMail v4

1 files changed, 920 insertions, 0 deletions

diff --git a/templates/@theme-base/reusable-components/_design-system-layout-modules.scss b/templates/@theme-base/reusable-components/_design-system-layout-modules.scss
new file mode 100644
index 0000000..8b2b5be
--- /dev/null
+++ b/templates/@theme-base/reusable-components/_design-system-layout-modules.scss
@@ -0,0 +1,920 @@
+/**
+ * layout
+ */
+
+/* it depends, it exceeds (french joke) */
+%reset-responsive-height-max-width {
+    height: auto;
+    max-width: 100%;
+}
+
+blockquote,
+code,
+pre,
+textarea,
+input,
+svg {
+    @extend %reset-responsive-height-max-width;
+}
+
+%reset-responsive-max-width-only {
+    max-width: 100%;
+}
+
+@if $use-height-auto-td==true {
+    td {
+        @extend %reset-responsive-height-max-width;
+    }
+}
+@else {
+    td {
+        @extend %reset-responsive-max-width-only;
+    }
+}
+
+@if $use-height-auto-img==true {
+    img {
+        @extend %reset-responsive-height-max-width;
+    }
+}
+@else {
+    img {
+        @extend %reset-responsive-max-width-only;
+    }
+}
+@if $use-height-auto-table==true {
+    table {
+        @extend %reset-responsive-height-max-width;
+    }
+}
+@else {
+    table {
+        @extend %reset-responsive-max-width-only;
+    }
+}
+
+/* no reset on embed, object & video, some players don't like */
+
+
+.hauto {
+    height: auto;
+}
+
+/* useful to manage floats */
+/* containing floats */
+.mod,
+.scroll-if-needed {
+    overflow: auto;
+}
+
+.scroll-horizontal-if-needed {
+    overflow-x: auto;
+}
+
+.mod--hidden,
+.no-scroll {
+    overflow: hidden;
+}
+
+.scroll-smooth-touch {
+    -webkit-overflow-scrolling: touch;
+}
+
+/* some floattings */
+.left {
+    float: left;
+}
+
+.right {
+    float: right;
+}
+
+@if $rtl-option==true {
+
+    /* RTL */
+    [dir="rtl"] .left {
+        float: right;
+    }
+
+    [dir="rtl"] .right {
+        float: left;
+    }
+}
+
+/* clear floats */
+.clear {
+    clear: both;
+}
+
+@if $use-clearleft_right==true {
+    .clearleft {
+        clear: left;
+    }
+
+    .clearright {
+        clear: right;
+    }
+
+    @if $rtl-option==true {
+
+        /* RTL */
+        [dir="rtl"] .clearleft {
+            clear: right;
+        }
+
+        [dir="rtl"] .clearright {
+            clear: left;
+        }
+    }
+}
+
+@if $use-clearhidden==true {
+    .clearhidden {
+        clear: both;
+        margin: 0;
+        padding: 0;
+        visibility: hidden;
+    }
+}
+
+@if $use-clearfix==true {
+    .clearfix:after {
+        content: ".";
+        display: block;
+        height: 0;
+        clear: both;
+        visibility: hidden;
+    }
+}
+
+/* gut: "spacing" empty div */
+.gut {
+    height: 1px;
+}
+
+/* table-design in CSS */
+.row {
+    display: table;
+    table-layout: fixed;
+}
+
+.inline-row {
+    display: inline-table;
+    table-layout: fixed;
+}
+
+.line {
+    display: table-row;
+}
+
+.col {
+    display: table-cell;
+    vertical-align: top;
+}
+
+.col-noalign {
+    display: table-cell;
+}
+
+/* alignments */
+.aligntop {
+    vertical-align: top;
+}
+
+.alignbottom {
+    vertical-align: bottom;
+}
+
+.alignmiddle {
+    vertical-align: middle;
+}
+
+.alignbaseline {
+    vertical-align: baseline;
+}
+
+.alignsub {
+    vertical-align: sub;
+}
+
+/* block */
+.bl {
+    display: block;
+}
+
+.inline {
+	display: inline;
+}
+
+/* inline-block, useful for grids, and not only */
+.inbl {
+    display: inline-block;
+}
+
+/* grid = element of inline-grid */
+.grid {
+    @extend .inbl;
+    @extend .aligntop;
+}
+
+/* to relativize */
+.relative {
+    position: relative;
+}
+
+/* centered block */
+.center {
+    margin-left: auto;
+    margin-right: auto;
+}
+
+/* to absolute */
+.absolute {
+    position: absolute;
+    z-index: 1;
+}
+.z667 {
+	z-index: 667;
+}
+
+/* to centered absolute */
+.centered-absolute {
+	position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+}
+
+.centered-absolute-horizontal {
+	left: 50%;
+    transform: translate(-50%, 0%);
+}
+
+.covered-absolute {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+}
+
+/* to top right */
+.top-right {
+    top: 0;
+    right: 0;
+}
+
+.bottom {
+	bottom: 0;
+}
+
+@if $rtl-option==true {
+    [dir="rtl"] {
+        .top-right {
+            left: 0;
+            right: auto;
+        }
+    }
+}
+
+.right-icon,
+.right-text {
+    top: 0;
+    right: .5em;
+	height: $default-height-fields; // height of field
+	align-content: center;
+}
+.right-text {
+	right: 1em;
+}
+.right-text-inner {
+	padding-bottom: .2rem;
+}
+
+@if $rtl-option==true {
+    [dir="rtl"] {
+        .right-icon,
+		.right-text {
+            left: .5em;
+            right: auto;
+		}
+		.right-text {
+			left: 1em;
+		}
+    }
+}
+
+
+
+.fixed {
+    position: fixed;
+}
+
+
+.sticky {
+	&-top,
+	&-bottom {
+		position: sticky;
+		z-index: 1;
+	}
+
+	&-top {
+		top: 0;
+	}
+
+	&-bottom {
+		bottom: 0;
+	}
+}
+
+/* hardware-acceleration activation */
+.hardware-accelerated {
+    @include vendor-prefix(transform, translateZ(0));
+}
+
+/* block widths */
+.w0 {
+    width: 0;
+}
+
+.w1 {
+    width: 1%;
+}
+
+.w2 {
+    width: 2%;
+}
+
+.w3 {
+    width: 3%;
+}
+
+.w5 {
+    width: 5%;
+}
+
+.w10 {
+    width: 10%;
+}
+
+.w15 {
+    width: 15%;
+}
+
+.w20 {
+    width: 20%;
+}
+
+.w25 {
+    width: 25%;
+}
+
+.w30 {
+    width: 30%;
+}
+
+.w33 {
+    width: 33.333%;
+}
+
+.w40 {
+    width: 40%;
+}
+
+.w45 {
+    width: 45%;
+}
+
+.w49 {
+    width: 49%;
+}
+
+.w50 {
+    width: 50%;
+}
+
+.w60 {
+    width: 60%;
+}
+
+.w66 {
+    width: 66.666%;
+}
+
+.w70 {
+    width: 70%;
+}
+
+.w75 {
+    width: 75%;
+}
+
+.w80 {
+    width: 80%;
+}
+
+.w90 {
+    width: 90%;
+}
+
+.w95 {
+    width: 95%;
+}
+
+.w100 {
+    width: 100%;
+}
+
+/* here you may add px widths */
+$list-width-px: 40, 50, 70, 150, 200, 500 !default;
+// ex .w500p { width: 500px; }
+
+@each $width in $list-width-px {
+    .w#{$width}p {
+        width: #{$width}px;
+    }
+}
+
+/* here you may add rem widths */
+$list-width-rem: 33 !default; // say 33
+// ex .w500p { width: 500px; }
+
+@each $width in $list-width-rem {
+    .w#{$width}r {
+        width: #{$width}rem;
+    }
+}
+
+/* here you may add em widths */
+$list-width-em: 2, 6, 8, 10, 11, 13, 14, 16 !default;
+// ex .w16e { width: 16em; }
+
+@each $width in $list-width-em {
+    .w#{$width}e {
+        width: #{$width}em;
+    }
+}
+
+/* max-block widths */
+
+/* here you may add max-widths % */
+$list-max-widths: 50, 60, 80, 100 !default;
+@each $max-width in $list-max-widths {
+    .mw#{$max-width} {
+        max-width: #{$max-width * 1%};
+    }
+}
+
+/* here you may add pixel max-widths */
+$list-max-width-px: 100, 650 !default;
+
+@each $max-width in $list-max-width-px {
+    .mw#{$max-width}p {
+        max-width: #{$max-width}px;
+    }
+}
+
+/* here you may add ch max-widths */
+$list-max-width-ch: 70 !default;
+
+@each $max-width in $list-max-width-ch {
+    .mw#{$max-width}ch {
+        max-width: #{$max-width}ch;
+    }
+}
+
+/* here you may add em max-widths */
+$list-max-width-em: 5, 7, 8, 13, 15, 18, 30, 37, 40, 50 !default;
+
+@each $max-width in $list-max-width-em {
+    .mw#{$max-width}e {
+        max-width: #{$max-width}em;
+    }
+}
+
+$list-min-width-em: 1.4, 3, 5, 14, 35 !default;
+
+@each $min-width in $list-min-width-em {
+    $fragment-class: str-replace(inspect($min-width), '.', '-'); // inspect to convert to string
+
+    .min-w#{$fragment-class}e {
+        min-width: #{$min-width}em;
+    }
+}
+
+
+$list-min-height-em: 5, 16 !default;
+
+@each $min-height in $list-min-height-em {
+    .min-h#{$min-height}e {
+        min-height: #{$min-height}em;
+    }
+}
+
+
+.h100 {
+    height: 100%;
+}
+
+.h100v {
+    height: 100vh;
+}
+
+/* margins */
+.mt1r {
+    margin-top: 1rem;
+}
+
+.mt0-5r {
+    margin-top: .5rem;
+}
+
+.mr0-5r {
+    margin-right: .5rem;
+}
+
+$list-margins: m, mt, mr, mb, ml !default;
+$list-margins-values: 0, 0.1, 0.25, 0.4, 0.5, 0.6, 0.75, 1, 1.5, 2, 4 !default; // specify 2.5 if needed
+
+@include margin-generator($list-margins, $list-margins-values);
+
+.mtauto {
+    margin-top: auto;
+}
+
+.mrauto {
+    margin-right: auto;
+}
+
+.mbauto {
+    margin-bottom: auto;
+}
+
+.mlauto {
+    margin-left: auto;
+}
+
+.mauto {
+    margin: auto;
+}
+
+@if $rtl-option==true {
+    [dir="rtl"] {
+        .mrauto {
+            margin-right: 0;
+            margin-left: auto;
+        }
+
+        .mlauto {
+            margin-left: 0;
+            margin-right: auto;
+        }
+    }
+}
+
+/* paddings */
+
+$list-paddings: p, pt, pr, pb, pl !default;
+$list-paddings-values: 0, 0.25, 0.5, 0.75, 1, 1.25, 1.5, 2, 3, 4 !default; // specify 2.5 if needed
+
+@include padding-generator($list-paddings, $list-paddings-values);
+
+/* to hide text with accessibility… a11y */
+.invisible,
+.sr-only {
+    border: 0;
+    clip: rect(0 0 0 0);
+    height: 1px;
+    margin: -1px;
+    overflow: hidden;
+    padding: 0;
+    position: absolute;
+	width: 1px;
+	top: 0; // needed for Safari dumb and 💩 behaviour
+}
+
+.nonvisible {
+    visibility: hidden;
+}
+
+.opacity-50 {
+    opacity: 0.5;
+}
+
+.opacity-40 {
+    opacity: 0.4;
+}
+
+.opacity-30 {
+    opacity: 0.3;
+}
+
+.filter-blur {
+    filter: blur(4px);
+}
+
+.hidden,
+[hidden],
+.display-on-darkmode {
+    display: none;
+}
+
+/* hidden everywhere */
+.nodesktop {
+    display: none;
+}
+
+/* hidden on desktop */
+/*.noprint   {} /* hidden on print */
+/*.notablet  {} /* hidden on tablets */
+/*.nomobile  {} /* hidden on mobile */
+
+.list-2columns {
+    -webkit-column-count: 2;
+    -moz-column-count: 2;
+    column-count: 2;
+    -webkit-column-gap: 0;
+    -moz-column-gap: 0;
+    column-gap: 0;
+
+    & > * {
+        -webkit-column-break-inside: avoid;
+        /* Chrome, Safari, Opera */
+        page-break-inside: avoid;
+        /* Firefox */
+        break-inside: avoid;
+        /* IE 10+ */
+        break-inside: avoid-column;
+        /* W3C */
+    }
+}
+
+/*
+ * ratio container (for responsive iframes/videos/etc.)
+ */
+[class*="ratio-container-"] {
+    width: 100%;
+    height: 0;
+    @extend .relative;
+}
+
+.ratio-container-square {
+    padding-top: 100%;
+}
+
+.ratio-container-16-9 {
+    padding-top: 56.25%;
+}
+
+.ratio-container-5-1 {
+    padding-top: 20%;
+}
+
+.inner-ratio-container {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+}
+
+/*
+ * Flexbox helpers, also name tartiflex
+ */
+.inline-flex,
+.inline-flex-vcenter {
+    display: -webkit-inline-box;
+    display: -ms-inline-flexbox;
+    display: inline-flex;
+    -ms-flex-wrap: wrap;
+    flex-wrap: wrap;
+}
+
+.flex,
+.flex-flex-children,
+.flex-noMinChildren {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -ms-flex-wrap: wrap;
+    flex-wrap: wrap;
+}
+
+.flex-row {
+    -webkit-box-orient: horizontal;
+    -webkit-box-direction: normal;
+    -ms-flex-direction: row;
+    flex-direction: row;
+}
+
+.flex-reverse {
+    -webkit-box-orient: horizontal;
+    -webkit-box-direction: reverse;
+    -ms-flex-direction: row-reverse;
+    flex-direction: row-reverse;
+}
+
+.flex-column {
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+    -ms-flex-direction: column;
+    flex-direction: column;
+}
+
+.flex-column-reverse {
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: reverse;
+    -ms-flex-direction: column-reverse;
+    flex-direction: column-reverse;
+}
+
+.flex-spacebetween {
+    -webkit-box-pack: justify;
+    -ms-flex-pack: justify;
+    justify-content: space-between;
+}
+
+.flex-spacearound {
+    -webkit-box-pack: justify;
+    -ms-flex-pack: justify;
+    justify-content: space-around;
+}
+
+.flex-justify-start {
+    -webkit-box-pack: start;
+    -ms-flex-pack: start;
+    justify-content: flex-start;
+}
+
+.flex-justify-end {
+    -webkit-box-pack: end;
+    -ms-flex-pack: end;
+    justify-content: flex-end;
+}
+
+.flex-justify-center {
+    -webkit-box-pack: center;
+    -ms-flex-pack: center;
+    justify-content: center;
+}
+
+.flex-nowrap {
+    -ms-flex-wrap: nowrap;
+    flex-wrap: nowrap;
+}
+
+/* fix aspect ratio */
+.flex > *,
+.no-min-dims {
+  min-height: 0;
+  min-width: 0;
+}
+
+.flex-flex-children > * {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+}
+
+.inline-flex-vcenter > *,
+.flex-item-centered-vert {
+    margin-top: auto;
+    margin-bottom: auto;
+    align-self: center;
+}
+
+.flex-items-center {
+    -webkit-box-align: center;
+    -ms-flex-align: center;
+    -ms-grid-row-align: center;
+    align-items: center;
+}
+
+.flex-items-baseline {
+    -webkit-box-align: baseline;
+    -ms-flex-align: baseline;
+    -ms-grid-row-align: baseline;
+    align-items: baseline;
+}
+
+.flex-items-start {
+    -webkit-box-align: start;
+    -ms-flex-align: start;
+    -ms-grid-row-align: flex-start;
+    align-items: flex-start;
+}
+
+.flex-items-end {
+    -webkit-box-align: end;
+    -ms-flex-align: end;
+    -ms-grid-row-align: flex-end;
+    align-items: flex-end;
+}
+
+.flex-items-stretch {
+    align-items: stretch;
+}
+
+.flex-item-fluid {
+    -webkit-box-flex: 1;
+    -ms-flex: 1 1 0px;
+    flex: 1 1 0px;
+}
+
+.flex-item-fluid-auto {
+    flex: 1 1 auto;
+}
+
+.flex-item-noshrink {
+    -ms-flex-negative: 0;
+    flex-shrink: 0;
+}
+
+.flex-item-nogrow {
+    -webkit-box-flex: 0;
+    -ms-flex-positive: 0;
+    flex-grow: 0;
+}
+
+.flex-item-grow-2 {
+    -webkit-box-flex: 2;
+    -ms-flex-positive: 2;
+    flex-grow: 2;
+}
+
+.flex-item-noflex {
+    -webkit-box-flex: 0;
+    -ms-flex: 0;
+    flex: 0;
+}
+
+.flex-self-vcenter {
+    -ms-flex-item-align: center;
+    align-self: center;
+}
+
+.flex-self-start {
+    -ms-flex-item-align: start;
+    align-self: flex-start;
+}
+
+.flex-self-end {
+    -ms-flex-item-align: end;
+    align-self: flex-end;
+}
+
+.flex-autogrid {
+    margin: 0 -0.5em;
+    @extend .flex;
+    @extend .flex-spacebetween;
+}
+
+.flex-autogrid-item {
+    @extend .flex-item-fluid;
+    padding: 0 0.5em 1em;
+}
+
+.flex-autogrid-item.pb0 {
+    padding-bottom: 0;
+}
+
+.inline-grid-container {
+	display: inline-grid;
+}
+
+/* RTL/others */
+.mirror,
+[dir="rtl"] .on-rtl-mirror {
+    -webkit-transform: rotateY(180deg);
+    transform: rotateY(180deg);
+}
+
+.rotateX-180 {
+    -webkit-transform: rotateX(180deg);
+    transform: rotateX(180deg);
+}
+
+.rotateZ-90 {
+    -webkit-transform: rotateZ(90deg);
+    transform: rotateZ(90deg);
+}
+
+.rotateZ-270 {
+    -webkit-transform: rotateZ(270deg);
+    transform: rotateZ(270deg);
+}
+
+/* increase surface click/tap */
+.increase-surface-click::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+}
+
+.no-pointer-events,
+.no-pointer-events-children * {
+    pointer-events: none;
+}