the-djmaze/snappymail
1
1
Fork 0
mirror of https://github.com/the-djmaze/snappymail.git synced 2025-06-03 22:46:37 +08:00
Code Issues Projects Releases Packages Wiki Activity

Improve new .tabs CSS from

Browse source
This commit is contained in:
djmaze 2021-08-26 20:10:14 +02:00
parent d7a30cba79
commit 637ed9a478
4 changed files with 56 additions and 67 deletions
dev/Styles
Ui.less
snappymail/v/0.0.0/app/templates/Views/Common
PopupsKeyboardShortcutsHelp.html
vendors/bootstrap/less
navs.lesstables.less

47
dev/Styles/Ui.less
View file

@ -74,3 +74,50 @@ textarea + .settings-save-trigger {
.list-table {
max-width: 800px;
}
// TABS
// -------------
.tabs {
display: grid;
}
.tabs input[type="radio"] {
position: absolute;
top: 0;
left: -9999px;
display: none;
}
// Actual tabs
.tabs label {
grid-row-start: 1;
color: #555;
margin: 0 2px -1px 0;
line-height: @baseLineHeight;
border: 1px solid transparent;
border-radius: 4px 4px 0 0;
padding: 5px;
&:hover {
border-color: @grayLighter @grayLighter #ddd;
}
}
.tabs [id^="tab"]:checked + label {
color: @gray;
background-color: @white;
border-color: #ddd #ddd transparent #ddd;
z-index: 1;
}
// TABBABLE
// --------
.tabs .tab-content {
grid-column-start: 1;
grid-row-start: 2;
visibility: hidden;
}
.tabs [id^="tab"]:checked + label + .tab-content {
visibility: visible;
}

22
snappymail/v/0.0.0/app/templates/Views/Common/PopupsKeyboardShortcutsHelp.html
View file

@ -14,9 +14,7 @@
aria-controls="panel1"
tabindex="0"
data-i18n="SHORTCUTS_HELP/TAB_MAILBOX"></label>
<div class="tab-content"
role="tabpanel"
aria-hidden="false">
<div class="tab-content" role="tabpanel" aria-hidden="false">
<table class="table table-striped table-bordered">
<tbody>
<tr><td></td><td data-i18n="SHORTCUTS_HELP/LABEL_OPEN_USER_DROPDOWN"></td><td>M, Menu</td></tr>
@ -35,10 +33,8 @@
aria-selected="false"
aria-controls="panel2"
tabindex="0"
data-i18n="SHORTCUTS_HELP/TAB_MESSAGE_LIST"></label>
<div class="tab-content"
role="tabpanel"
aria-hidden="true">
data-i18n="SHORTCUTS_HELP/TAB_MESSAGE_LIST"></label>
<div class="tab-content" role="tabpanel" aria-hidden="true">
<table class="table table-striped table-bordered">
<tbody>
<tr><td class="fontastic">☑</td><td data-i18n="SHORTCUTS_HELP/LABEL_CHECK_ALL"></td><td><!-- ko text: metaKey --><!-- /ko --> + A</td></tr>
@ -64,10 +60,8 @@
aria-selected="false"
aria-controls="panel3"
tabindex="0"
data-i18n="SHORTCUTS_HELP/TAB_MESSAGE_VIEW"></label>
<div class="tab-content"
role="tabpanel"
aria-hidden="true">
data-i18n="SHORTCUTS_HELP/TAB_MESSAGE_VIEW"></label>
<div class="tab-content" role="tabpanel" aria-hidden="true">
<table class="table table-striped table-bordered">
<tbody>
<tr><td data-i18n="SHORTCUTS_HELP/LABEL_FULLSCREEN_TOGGLE"></td><td>Enter, Open</td></tr>
@ -86,10 +80,8 @@
aria-selected="false"
aria-controls="panel4"
tabindex="0"
data-i18n="SHORTCUTS_HELP/TAB_COMPOSE"></label>
<div class="tab-content"
role="tabpanel"
aria-hidden="true">
data-i18n="SHORTCUTS_HELP/TAB_COMPOSE"></label>
<div class="tab-content" role="tabpanel" aria-hidden="true">
<table class="table table-striped table-bordered">
<tbody>
<tr><td data-i18n="SHORTCUTS_HELP/LABEL_OPEN_COMPOSE_POPUP"></td><td>W, C, New</td></tr>

49
vendors/bootstrap/less/navs.less vendored
View file

@ -20,52 +20,3 @@
text-decoration: none;
background-color: @grayLighter;
}
// TABS
// -------------
.tabs {
display: grid;
}
.tabs input[type="radio"] {
position: absolute;
top: 0;
left: -9999px;
display: none;
}
// Actual tabs
.tabs label {
grid-row-start: 1;
color: #555;
margin: 0 2px -1px 0;
line-height: @baseLineHeight;
border: 1px solid transparent;
border-radius: 4px 4px 0 0;
padding: 5px;
&:hover {
border-color: @grayLighter @grayLighter #ddd;
}
}
[id^="tab"]:checked + label {
color: @gray;
background-color: @white;
border-color: #ddd #ddd transparent #ddd;
z-index: 1;
}
// TABBABLE
// --------
.tab-content {
grid-column-start: 1;
grid-row-start: 2;
visibility: hidden;
}
[id^="tab"]:checked + label + .tab-content {
visibility: visible;
}

5
vendors/bootstrap/less/tables.less vendored
View file

@ -47,10 +47,9 @@
.table-bordered {
border: 1px solid @tableBorder;
border-collapse: separate; // Done so we can round those corners!
border-left: 0;
border-radius: 4px;
th,
td {
th + th,
td + td {
border-left: 1px solid @tableBorder;
}
// Prevent a double border