mirrors/TiddlyWiki5
1
0
Fork 0
mirror of https://github.com/Jermolene/TiddlyWiki5 synced 2024-09-27 14:48:19 +00:00
Code Issues Releases Wiki Activity

Use flexbox for vertical tabs

Browse Source 
Thus stepping into a new world:

http://caniuse.com/flexbox

The vertical tabs are now completely reusable, with sensible wrapping
behaviour.
This commit is contained in:
Jermolene 2014-05-12 08:41:47 +01:00
parent b3032d452f
commit 2633247492
2 changed files with 9 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
editions/tw5.com/tiddlers/macros/TabsMacro.tid
View File

@ -26,4 +26,4 @@ Here is an example of the tabs macro:
<<tabs "Docs WikiText Features RoadMap" "WikiText" "$:/state/tab1">>
<<tabs "[tag[tips]]" "GoogleChromeTips" "$:/state/tab1" "tw-vertical">>
<<tabs "[tag[tips]]" "GoogleChromeTips" "$:/state/tab2" "tw-vertical">>

12
themes/tiddlywiki/vanilla/base.tid
View File

@ -960,7 +960,7 @@ canvas.tw-edit-bitmapeditor {
*/
.tw-tab-set.tw-vertical {
white-space: nowrap;
display: flex;
}
.tw-tab-buttons {
@ -970,12 +970,15 @@ canvas.tw-edit-bitmapeditor {
}
.tw-tab-buttons.tw-vertical {
display: inline-block;
padding-top: inherit;
display: block;
padding-top: 14px;
padding-top: 14px;
vertical-align: top;
text-align: right;
margin-bottom: inherit;
margin-right: -1px;
max-width: 33%;
flex: 0 0 auto;
}
.tw-tab-buttons button.tw-tab-selected {
@ -1026,11 +1029,12 @@ canvas.tw-edit-bitmapeditor {
}
.tw-tab-content.tw-vertical {
white-space: normal;
display: inline-block;
vertical-align: top;
padding-top: 0;
padding-left: 14px;
border-left: 1px solid <<colour tab-border>>;
flex: 0 0 70%;
}
.tw-sidebar-lists .tw-tab-buttons button.tw-tab-selected {