Merge pull request #28 from csalmeida/themes-v4

Theme rewrite for ProtonMail v4

1 files changed, 63 insertions, 0 deletions

diff --git a/templates/@theme-base/pm-styles/_pm-tabs.scss b/templates/@theme-base/pm-styles/_pm-tabs.scss
new file mode 100644
index 0000000..b726541
--- /dev/null
+++ b/templates/@theme-base/pm-styles/_pm-tabs.scss
@@ -0,0 +1,63 @@
+.tabs-list {
+  margin: 0;
+  padding: 0;
+  @extend .unstyled;
+  @extend .flex;
+  @extend .relative;
+  white-space: nowrap;
+}
+
+.tabs-list-item {
+  margin-right: 1rem;
+  color: var(--text-sub-header, $text-sub-header);
+  min-width: auto;
+}
+
+.tabs-list-link {
+  @extend .flex;
+  color: inherit;
+  border-bottom: 2px solid transparent;
+  padding: .5em;
+  @extend .nodecoration;
+  @extend .relative;
+  top: 1px;
+  transition: color 0.15s ease-out, border-bottom 0.15s ease-out;
+  &:focus,
+  &:hover {
+    @extend .nodecoration;
+    color: var(--color-main-area, $pm-global-grey);
+    border-bottom: 2px solid var(--bordercolor-input, $pm-global-border);
+  }
+  &[disabled] {
+    opacity: .4;
+    cursor: default;
+    pointer-events: none;
+  }
+}
+
+[aria-selected="true"].tabs-list-link {
+  border-bottom: 2px solid $pm-primary;
+  color: var(--color-main-area, $pm-global-grey);
+}
+
+.tabs-container {
+  border-bottom: 1px solid var(--bordercolor-input, $pm-global-border);
+
+  &[class*='sticky'] {
+    background: var(--bgcolor-main-area, $white);
+  }
+}
+
+.tabs-indicator {
+  position: absolute;
+  border-bottom: 2px solid $pm-primary;
+  content: "";
+  height: 0;
+  bottom: -1px;
+  left: 0;
+  right: 0;
+  transform-origin: left center;
+  transition: transform .15s ease-out;
+  transform: translateX(var(--translate)) scaleX(var(--scale));
+}
+/* hidden state for content is not necessary for React, added in exception for Design system website */