sorb/ThreadNet-Web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 4 Wiki Activity

Make tabs be their own panels

Browse Source
This commit is contained in:
Travis Ralston
2019-01-21 16:51:43 -07:00
parent 5adfc09237
commit 15709040e7
5 changed files with 46 additions and 126 deletions
Download Patch File Download Diff File Expand all files Collapse all files
res/css/structures/_TabbedView.scss
+13 -29
View File
@@ -1,5 +1,6 @@
/*
Copyright 2017 Travis Ralston
Copyright 2019 New Vector Ltd
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
@@ -20,40 +21,22 @@ limitations under the License.
display: flex;
width: 100%;
height: 100%;
background-color: $tab-panel-bg-color;
}
.mx_TabbedView_tabLabels {
width: 300px;
width: 136px;
height: 100%;
background-color: $tab-list-bg-color;
color: $tab-list-fg-color;
border-right: 1px solid $tab-border-color;
border-left: 1px solid $tab-border-color;
}
.mx_TabbedView_tabPanels {
width: calc(100% - 320px);
display: inline-block;
height: 100%;
padding-left: 20px;
scroll-snap-type: block;
color: $tab-label-fg-color;
}
.mx_TabbedView_tabLabel {
text-align: center;
vertical-align: middle;
text-transform: uppercase;
cursor: pointer;
display: block;
padding: 20px;
width: calc(100% - 40px);
border-bottom: 1px solid $tab-border-color;
}
.mx_TabbedView_exit {
padding-top: 10px;
padding-bottom: 10px;
border-radius: 3px;
font-size: 12px;
font-weight: 600;
height: 20px;
}
.mx_TabbedView_tabLabel:hover {
@@ -61,16 +44,17 @@ limitations under the License.
}
.mx_TabbedView_tabLabel_active {
font-weight: 700;
background-color: $tab-list-active-bg-color;
color: $tab-list-active-fg-color;
background-color: $tab-label-active-bg-color;
color: $tab-label-active-fg-color;
}
.mx_TabbedView_tabPanel {
width: calc(100% - 320px);
display: inline-block;
height: 100vh; // 100% of viewport height
scroll-snap-align: start;
margin-left: 20px;
}
.mx_TabbedView_tabPanelContent {
width: 600px;
flex-grow: 1;
}
res/themes/dharma/css/_dharma.scss
+4 -6
View File
@@ -187,12 +187,10 @@ $lightbox-fg-color: #ffffff;
$lightbox-border-color: #ffffff;
// Tabbed views
$tab-list-bg-color: $secondary-accent-color;
$tab-list-fg-color: $accent-color;
$tab-list-active-bg-color: $tertiary-accent-color;
$tab-list-active-fg-color: $accent-color;
$tab-border-color: $tertiary-accent-color;
$tab-panel-bg-color: #fff;
$tab-label-fg-color: #45474a;
$tab-label-active-fg-color: #ffffff;
$tab-label-bg-color: transparent;
$tab-label-active-bg-color: #7ac9a1;
// unused?
$progressbar-color: #000;
res/themes/light/css/_base.scss
+4 -6
View File
@@ -183,12 +183,10 @@ $imagebody-giflabel-border: rgba(0, 0, 0, 0.2);
$imagebody-giflabel-color: rgba(255, 255, 255, 1);
// Tabbed views
$tab-list-bg-color: $secondary-accent-color;
$tab-list-fg-color: $accent-color;
$tab-list-active-bg-color: $tertiary-accent-color;
$tab-list-active-fg-color: $accent-color;
$tab-border-color: $tertiary-accent-color;
$tab-panel-bg-color: #fff;
$tab-label-fg-color: #45474a;
$tab-label-active-fg-color: #ffffff;
$tab-label-bg-color: transparent;
$tab-label-active-bg-color: #7ac9a1;
// unused?
$progressbar-color: #000;