moving side buttons within a ToolBar component

2025-12-07 15:22:33 +01:00
parent 7adc584199
commit 22921f3da1
4 changed files with 167 additions and 160 deletions
@@ -0,0 +1,97 @@
+.eventsButtons {
+    overflow: visible;
+    position: fixed;
+    top: 10rem;
+    right: 2rem;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+    width: fit-content;
+    height: fit-content;
+    gap: 1rem;
+}
+
+
+.filterContainer{
+    padding: 0;
+    border-radius: 30px;
+    overflow: visible;
+}
+
+.filterMenu{
+    padding: 5px 5px 5px 5px;
+}
+
+.createButton, .searchButton, .sortButton {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: none;
+    border-radius: 50%;
+    width: 55px;
+    height: 55px;
+    transition: all 0.5s ease;
+}
+
+.createButton {
+    font-size: 2rem;
+    color: #019AFF;
+}
+
+.createButton:hover, .searchButton:hover, .mobileFilter:hover {
+    transform: translateY(-5px);
+    cursor: pointer;
+}
+
+
+.searchBarOverlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 100;
+    background-color: rgba(0, 0, 0, 0.3);
+    backdrop-filter: blur(4px);
+}
+.searchBarContainer{
+    display: flex;
+    justify-content: center;
+}
+
+.sortButton svg, .searchButton svg {
+    transform: scale(0.8);
+    fill: #019AFF;
+}
+
+
+.sortButton:focus, .searchButton:focus {
+    outline: none;
+}
+
+
+
+@media screen and (max-width: 768px) {
+    .eventsButtons {
+        flex-direction: row;
+        position: relative;
+        top: 0;
+        right: 0;
+        align-items: flex-start;
+        width: 100%;
+        margin-top: 16px;
+    }
+
+    .filterContainer{
+        display: flex;
+        width: fit-content;
+    }
+
+    .filterMenu{
+        width: fit-content;
+    }
+
+    .createButton:hover, .searchButton:hover, .mobileFilter:hover {
+        transform: none !important;
+    }
+}