jeans/home-assistant.io
jeans/home-assistant.io
1
0
Fork 0
mirror of https://github.com/home-assistant/home-assistant.io.git synced 2025-07-28 19:57:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

Installation: Add CSS for tabbed-content (#27407)

Browse Source
This commit is contained in:
c0ffeeca7 2023-05-17 13:06:24 +02:00 committed by GitHub
parent 78712eae09
commit 426c64bb57
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 45 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
source/_styles/custom/tabbed-block.css Normal file
View File

@ -0,0 +1,44 @@
.tabbed-content-block {
background-color: #FAFAFA;
margin: 16px 0;
overflow: hidden;
border-radius: 10px;
box-shadow: -1px 0px 0px 0px #dfdfdf, 0px 0px 0px 1px #dfdfdf;
box-sizing: border-box;
}
.tabbed-content-block .tabbed-content-block-tabs {
overflow: hidden;
padding: 0 8px;
}
.tabbed-content-block .tabbed-content-block-tabs label input {
display: none;
}
.tabbed-content-block .tabbed-content-block-tabs label input:checked + div {
opacity: 1;
border-bottom: 2px solid --primary-color;
}
.tabbed-content-block .tabbed-content-block-tabs label div {
float: left;
padding: 8px;
cursor: pointer;
opacity: 0.7;
transition: 0.3s;
border-bottom: 2px solid transparent;
font-size: 0.8em;
}
.tabbed-content-block .tabbed-content-block-tabs label div:hover {
opacity: 1;
}
.tabbed-content-block .tabbed-content-block-content {
padding: 8px 16px 0;
display: none;
animation: fadeEffect 0.5s;
}
@keyframes fadeEffect {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}

1
source/_styles/main.css
View File

@ -11,6 +11,7 @@
@import "./custom/topic.css";
@import "./custom/integrations.css";
@import "./custom/getting-started.css";
@import "./custom/tabbed-block.css";
@import 'home.css';
@import 'post.css';