cvancau/alapatch
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add start of animation to menu

Browse Source
This commit is contained in:
[poww10s]
2020-11-21 22:43:49 -05:00
parent 3a49cdcec6
commit 813fdd3b38
1 changed files with 69 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/features/timbre/Timbre.module.css
+69 -68
View File
@@ -1,111 +1,112 @@
.timbreStyle { .timbreStyle {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
flex-direction: row; flex-direction: row;
justify-content: center; justify-content: center;
} }
@media screen and (min-width: 1824) { @media screen and (min-width: 1824) {
.lineBreak { .lineBreak {
width: 100%; width: 100%;
} }
} }
.buttonContainer { .buttonContainer {
position: fixed; position: fixed;
top: 0; top: 0;
left: 25%; left: 25%;
} }
.buttonContainer > button:hover { .buttonContainer > button:hover {
background: white; background: white;
color: slateblue; color: slateblue;
border: 2px solid slateblue; border: 2px solid slateblue;
} }
.buttonContainer > button:focus { .buttonContainer > button:focus {
background: slateblue; background: slateblue;
color: white; color: white;
border: 2px solid slateblue; border: 2px solid slateblue;
} }
.tabs { .tabs {
height: 100vh; height: 100vh;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
.tabList { .tabList {
border-bottom: 1px solid black; border-bottom: 1px solid black;
display: inline-flex; display: inline-flex;
flex-direction: row; flex-direction: row;
list-style-type: none; list-style-type: none;
justify-content: center; justify-content: center;
top: 0; top: 0;
padding: 0; padding: 0;
margin: 0; margin: 0;
width: 100vw; width: 100vw;
background: white; background: white;
} }
.tab { .tab {
width: 78px; height: 1.25em;
background: white; width: 4em;
color: slategrey; background: white;
font-size: 0.75em; color: slategrey;
margin: 0.75em 1em; font-size: 0.75em;
padding: 0.25em 1em; margin: 0.75em 1em;
border: 2px solid slategrey; padding: 0.25em 1em;
border-radius: 3px; border: 2px solid slategrey;
outline: none; border-radius: 3px;
-webkit-touch-callout: none; /* iOS Safari */ outline: none;
-webkit-user-select: none; /* Safari */ -webkit-touch-callout: none; /* iOS Safari */
-khtml-user-select: none; /* Konqueror HTML */ -webkit-user-select: none; /* Safari */
-moz-user-select: none; /* Old versions of Firefox */ -khtml-user-select: none; /* Konqueror HTML */
-ms-user-select: none; /* Internet Explorer/Edge */ -moz-user-select: none; /* Old versions of Firefox */
user-select: none; -ms-user-select: none; /* Internet Explorer/Edge */
transition: all 0.2s ease-in-out; user-select: none;
transition: all 0.2s ease-in-out;
} }
.tab:hover { .tab:hover {
background: white; background: white;
color: slateblue; color: slateblue;
border: 2px solid slateblue; border: 2px solid slateblue;
} }
.selected, .selected,
.selected:hover { .selected:hover {
background: slateblue; background: slateblue;
color: white; color: white;
border: 2px solid slateblue; border: 2px solid slateblue;
transition: 0.2s ease-in-out; transition: 0.2s ease-in-out;
} }
@keyframes slideeffect { @keyframes slideeffect {
0% { 0% {
opacity: 0.5; opacity: 0.5;
} }
100% { 100% {
opacity: 1; opacity: 1;
} }
} }
.tabPanel { .tabPanel {
padding: 1em 0; padding: 1em 0;
height: 100%; height: 100%;
animation: slideeffect 0.6s ease-in-out; animation: slideeffect 0.6s ease-in-out;
opacity: 1; opacity: 1;
overflow-y: scroll; overflow-y: scroll;
} }
.tabPanel::-webkit-scrollbar { .tabPanel::-webkit-scrollbar {
width: 0.25em; width: 0.25em;
} }
.tabPanel::-webkit-scrollbar-track, .tabPanel::-webkit-scrollbar-track,
.tabPanel::-webkit-scrollbar-thumb { .tabPanel::-webkit-scrollbar-thumb {
background-color: transparent; background-color: transparent;
} }
.tabPanel:hover::-webkit-scrollbar-track { .tabPanel:hover::-webkit-scrollbar-track {
background-color: lightgray; background-color: lightgray;
} }
.tabPanel:hover::-webkit-scrollbar-thumb { .tabPanel:hover::-webkit-scrollbar-thumb {
background-color: slateblue; background-color: slateblue;
border-radius: 6px; border-radius: 6px;
} }