the-djmaze/snappymail
1
1
Fork 0
mirror of https://github.com/the-djmaze/snappymail.git synced 2025-12-18 21:19:05 +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
Show stats Download patch file Download diff file Expand all files Collapse all files

47
dev/Styles/Ui.less
View file

@ -74,3 +74,50 @@ textarea + .settings-save-trigger {
.list-table { .list-table {
max-width: 800px; 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;
}

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

@ -14,9 +14,7 @@
aria-controls="panel1" aria-controls="panel1"
tabindex="0" tabindex="0"
data-i18n="SHORTCUTS_HELP/TAB_MAILBOX"></label> data-i18n="SHORTCUTS_HELP/TAB_MAILBOX"></label>
<div class="tab-content" <div class="tab-content" role="tabpanel" aria-hidden="false">
role="tabpanel"
aria-hidden="false">
<table class="table table-striped table-bordered"> <table class="table table-striped table-bordered">
<tbody> <tbody>
<tr><td></td><td data-i18n="SHORTCUTS_HELP/LABEL_OPEN_USER_DROPDOWN"></td><td>M, Menu</td></tr> <tr><td></td><td data-i18n="SHORTCUTS_HELP/LABEL_OPEN_USER_DROPDOWN"></td><td>M, Menu</td></tr>
@ -36,9 +34,7 @@
aria-controls="panel2" aria-controls="panel2"
tabindex="0" tabindex="0"
data-i18n="SHORTCUTS_HELP/TAB_MESSAGE_LIST"></label> data-i18n="SHORTCUTS_HELP/TAB_MESSAGE_LIST"></label>
<div class="tab-content" <div class="tab-content" role="tabpanel" aria-hidden="true">
role="tabpanel"
aria-hidden="true">
<table class="table table-striped table-bordered"> <table class="table table-striped table-bordered">
<tbody> <tbody>
<tr><td class="fontastic">☑</td><td data-i18n="SHORTCUTS_HELP/LABEL_CHECK_ALL"></td><td><!-- ko text: metaKey --><!-- /ko --> + A</td></tr> <tr><td class="fontastic">☑</td><td data-i18n="SHORTCUTS_HELP/LABEL_CHECK_ALL"></td><td><!-- ko text: metaKey --><!-- /ko --> + A</td></tr>
@ -65,9 +61,7 @@
aria-controls="panel3" aria-controls="panel3"
tabindex="0" tabindex="0"
data-i18n="SHORTCUTS_HELP/TAB_MESSAGE_VIEW"></label> data-i18n="SHORTCUTS_HELP/TAB_MESSAGE_VIEW"></label>
<div class="tab-content" <div class="tab-content" role="tabpanel" aria-hidden="true">
role="tabpanel"
aria-hidden="true">
<table class="table table-striped table-bordered"> <table class="table table-striped table-bordered">
<tbody> <tbody>
<tr><td data-i18n="SHORTCUTS_HELP/LABEL_FULLSCREEN_TOGGLE"></td><td>Enter, Open</td></tr> <tr><td data-i18n="SHORTCUTS_HELP/LABEL_FULLSCREEN_TOGGLE"></td><td>Enter, Open</td></tr>
@ -87,9 +81,7 @@
aria-controls="panel4" aria-controls="panel4"
tabindex="0" tabindex="0"
data-i18n="SHORTCUTS_HELP/TAB_COMPOSE"></label> data-i18n="SHORTCUTS_HELP/TAB_COMPOSE"></label>
<div class="tab-content" <div class="tab-content" role="tabpanel" aria-hidden="true">
role="tabpanel"
aria-hidden="true">
<table class="table table-striped table-bordered"> <table class="table table-striped table-bordered">
<tbody> <tbody>
<tr><td data-i18n="SHORTCUTS_HELP/LABEL_OPEN_COMPOSE_POPUP"></td><td>W, C, New</td></tr> <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; text-decoration: none;
background-color: @grayLighter; 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 { .table-bordered {
border: 1px solid @tableBorder; border: 1px solid @tableBorder;
border-collapse: separate; // Done so we can round those corners! border-collapse: separate; // Done so we can round those corners!
border-left: 0;
border-radius: 4px; border-radius: 4px;
th, th + th,
td { td + td {
border-left: 1px solid @tableBorder; border-left: 1px solid @tableBorder;
} }
// Prevent a double border // Prevent a double border