add sidebar styles

BasemYahia402 · Aug 25, 2023 · b00ef13 · b00ef13
1 parent e15ebfd
commit b00ef13
Showing 1 changed file with 52 additions and 0 deletions.
diff --git a/Calculator/assets/css/style.css b/Calculator/assets/css/style.css
@@ -102,4 +102,56 @@ button {
 
 #sidebar-toggle {
     height: 20px;
+}
+
+#sidebar {
+    position: fixed;
+    top: 0;
+    left: -250px;
+    width: 250px;
+    height: 100%;
+    background-color: #2E2E2E;
+    transition: left 0.3s ease-in-out;
+    border-radius: 5px;
+    padding: 15px 10px;
+}
+
+#sidebar button {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+}
+
+#sidebar button p {
+    color: white;
+}
+
+#sidebar #sidebar-cancel {
+    padding-left: 5px;
+}
+
+#sidebar .modes {
+    width: 100%;
+    height: 100%;
+    overflow-y: auto;
+}
+
+#sidebar .modes button {
+    width: 100%;
+    text-align: start;
+}
+
+#sidebar .modes button p {
+    width: 100%;
+    margin: 0;
+    padding: 10px 5px;
+    color: white;
+}
+
+#sidebar .modes button p:hover {
+    background-color: #3B3B3B;
+}
+
+#sidebar.show {
+    left: 0;
 }