add lit_styling to index.css

This commit is contained in:
viehlieb 2022-09-22 16:18:47 +02:00
parent d9802da6ea
commit f8c82ec912
2 changed files with 45 additions and 0 deletions

1
src/index.css vendored
View file

@ -1,6 +1,7 @@
@tailwind base; @tailwind base;
@tailwind components; @tailwind components;
@tailwind utilities; @tailwind utilities;
@import "./lit_navigation_style.css";
div[tabindex] { div[tabindex] {
flex: 1; flex: 1;

44
src/lit_navigation_style.css vendored Normal file
View file

@ -0,0 +1,44 @@
.litbutton{
color: #755d86;
text-transform: uppercase;
}
.litbutton:before {
content: "[";
margin-right: 10px;
display: inline-block;
opacity: 0;
-webkit-transform: translateX(20px);
-moz-transform: translateX(20px);
transform: translateX(20px);
-webkit-transition: -webkit-transform 0.3s, opacity 0.2s;
-moz-transition: -moz-transform 0.3s, opacity 0.2s;
transition: transform 0.3s, opacity 0.2s;
}
.litbutton:after {
content: "]";
margin-left: 10px;
display: inline-block;
opacity: 0;
-webkit-transition: -webkit-transform 0.3s, opacity 0.2s;
-moz-transition: -moz-transform 0.3s, opacity 0.2s;
transition: transform 0.3s, opacity 0.2s;
-webkit-transform: translateX(-20px);
-moz-transform: translateX(-20px);
transform: translateX(-20px);
}
.litbutton:hover{
color: #3a97a3;
}
.litbutton-active{
color: #3a97a3;
}
.litbutton:hover:before,
.litbutton:hover:after {
color: #3a97a3;
opacity: 1;
-webkit-transform: translateX(0px);
-moz-transform: translateX(0px);
transform: translateX(0px);
}