commit 878f4718c430dc63177fd61c02068791d9ae4903
parent 7e44aef760df98bd18b45b62ecba2d9d05444fef
Author: Lou Woell <lou.woell@posteo.de>
Date:   Sat,  1 Mar 2025 00:22:07 +0100

tabbedContainer css to scss

Diffstat:
Dassets/css/tabbedContainer.css | 42------------------------------------------
Aassets/css/tabbedContainer.scss | 44++++++++++++++++++++++++++++++++++++++++++++
2 files changed, 44 insertions(+), 42 deletions(-)

diff --git a/assets/css/tabbedContainer.css b/assets/css/tabbedContainer.css @@ -1,42 +0,0 @@ -.tabContainer > .tabs > div:not(:first-child) { - display: none; -} - -.tabContainer > .tabs * { - margin-top: 0px; - padding-top: 0.25em; -} - -.tabContainer > .tabBar { - overflow: hidden; - width: 100%; - margin: 0; - padding: 0; - list-style: none; - display: flex; -} - -.tabContainer > .tabBar button { - border: 0px solid $background; - border-bottom: 1px solid $background; - text-decoration: none; - color: mix($background, $color, 60%); - margin: 0 .1em 0 0; - font: inherit; - font-weight: normal; - font-size: 1em; - flex: 1; - transition: all .35s ease; - background: $background; -} - -.tabContainer > .tabBar button.active { - border-bottom: 1px solid $accent; - background: inherit; - color: mix($color, $background, 60%) -} - -.tabContainer > .tabBar button:hover { - background: inherit; - color: $accent; -} diff --git a/assets/css/tabbedContainer.scss b/assets/css/tabbedContainer.scss @@ -0,0 +1,44 @@ +.tabContainer > .tabs > div:not(:first-child) { + display: none; +} + +.tabContainer > .tabs * { + margin-top: 0px; + padding-top: 0.25em; +} + +.tabContainer > .tabBar { + overflow: hidden; + width: 100%; + margin: 0; + padding: 0; + list-style: none; + display: flex; +} + +.tabContainer > .tabBar button { + color: $color; + opacity: .5; + border: 0px solid $background; + border-bottom: 1px solid $background; + text-decoration: none; + margin: 0 .1em 0 0; + font: inherit; + font-weight: normal; + font-size: 1em; + flex: 1; + transition: all .35s ease; + background: $background; +} + +.tabContainer > .tabBar button.active { + border-bottom: 1px solid $accent; + background: inherit; + opacity: .5; +} + +.tabContainer > .tabBar button:hover { + background: inherit; + color: $accent; + opacity: 1; +}