13hannes11/hugo-coder-timeline
1
0
Fork 0
mirror of https://github.com/13hannes11/hugo-coder-timeline.git synced 2024-09-04 00:50:58 +02:00
Code Issues Projects Releases Wiki Activity

HTML/CSS only tabs (#678)

Browse Source 
* Fix pre tag margin top so it looks good inside containers

* Bind to 0.0.0.0 for docker container support

* Add HTML only tabs shortcode
This commit is contained in:
Codruț Constantin Gușoi
2022-05-29 19:43:09 +01:00
committed by GitHub
parent 9ea82c5c82
commit 5e4e500cdf
19 changed files with 418 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

77
assets/scss/_tabs.scss Normal file
View File

@@ -0,0 +1,77 @@
.tabs {
display: flex;
flex-wrap: wrap;
margin: 2rem 0 2rem 0;
position: relative;
&.tabs-left {
justify-content: flex-start;
label.tab-label {
margin-right: 0.5rem;
}
.tab-content {
border-radius: 0px 4px 4px 4px;
}
}
&.tabs-right {
justify-content: flex-end;
label.tab-label {
margin-left: 0.5rem;
}
.tab-content {
border-radius: 4px 0px 4px 4px;
}
}
input.tab-input {
display: none;
}
label.tab-label {
background-color: $alt-bg-color;
border-color: $darker-alt-bg-color;
border-radius: 4px 4px 0px 0px;
border-style: solid;
border-bottom-style: hidden;
border-width: 1px;
cursor: pointer;
display: inline-block;
order: 1;
padding: 0.3rem 0.6rem;
position: relative;
top: 1px;
user-select: none;
}
input.tab-input:checked + label.tab-label {
background-color: $bg-color;
}
.tab-content {
background-color: $bg-color;
border-color: $darker-alt-bg-color;
border-style: solid;
border-width: 1px;
display: none;
order: 2;
padding: 1rem;
width: 100%;
}
&.tabs-code {
.tab-content {
padding: 0.5rem;
pre {
margin: 0;
}
}
}
}