Refactor styles: move SubTags.module.css styles to app.module.css

PalisadoesFoundation · Dec 1, 2024 · 077a960 · 077a960
1 parent f9e10b8
commit 077a960
Show file tree

Hide file tree

Showing 2 changed files with 146 additions and 146 deletions.
diff --git a/src/screens/SubTags/SubTags.module.css b/src/screens/SubTags/SubTags.module.css
diff --git a/src/style/app.module.css b/src/style/app.module.css
@@ -72,7 +72,6 @@
 
 .btnsContainer {
   display: flex;
-  margin: 2.5rem 0;
   align-items: center;
   gap: 10px;
   /* Adjust spacing between items */
@@ -613,3 +612,149 @@ hr {
     transform: rotate(360deg);
   }
 }
+
+.btnsContainer {
+  display: flex;
+  margin: 2rem 0;
+}
+
+.btnsContainer .btnsBlock {
+  display: flex;
+  width: max-content;
+}
+
+.btnsContainer .btnsBlock button {
+  margin-left: 1rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.btnsContainer .input {
+  flex: 1;
+  position: relative;
+  max-width: 60%;
+  justify-content: space-between;
+}
+
+.btnsContainer input {
+  outline: 1px solid var(--bs-gray-400);
+}
+
+.btnsContainer .input button {
+  width: 52px;
+}
+
+@media (max-width: 1020px) {
+  .btnsContainer {
+    flex-direction: column;
+    margin: 1.5rem 0;
+  }
+
+  .btnsContainer .btnsBlock {
+    margin: 1.5rem 0 0 0;
+    justify-content: space-between;
+  }
+
+  .btnsContainer .btnsBlock button {
+    margin: 0;
+  }
+
+  .btnsContainer .btnsBlock div button {
+    margin-right: 1.5rem;
+  }
+}
+
+/* For mobile devices  */
+
+@media (max-width: 520px) {
+  .btnsContainer {
+    margin-bottom: 0;
+  }
+
+  .btnsContainer .btnsBlock {
+    display: block;
+    margin-top: 1rem;
+    margin-right: 0;
+  }
+
+  .btnsContainer .btnsBlock div {
+    flex: 1;
+  }
+
+  .btnsContainer .btnsBlock div[title='Sort organizations'] {
+    margin-right: 0.5rem;
+  }
+
+  .btnsContainer .btnsBlock button {
+    margin-bottom: 1rem;
+    margin-right: 0;
+    width: 100%;
+  }
+}
+
+.errorContainer {
+  min-height: 100vh;
+}
+
+.errorMessage {
+  margin-top: 25%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+}
+
+.errorIcon {
+  transform: scale(1.5);
+  color: var(--bs-danger);
+  margin-bottom: 1rem;
+}
+
+.tableHeader {
+  background-color: var(--bs-primary);
+  color: var(--bs-white);
+  font-size: 1rem;
+}
+.rowBackground {
+  background-color: var(--bs-white);
+  max-height: 120px;
+}
+
+.subTagsLink {
+  color: var(--bs-blue);
+  font-weight: 500;
+  cursor: pointer;
+}
+
+.subTagsLink i {
+  visibility: hidden;
+}
+
+.subTagsLink:hover {
+  font-weight: 600;
+  text-decoration: underline;
+}
+
+.subTagsLink:hover i {
+  visibility: visible;
+}
+
+.tagsBreadCrumbs {
+  color: var(--bs-gray);
+  cursor: pointer;
+}
+
+.tagsBreadCrumbs:hover {
+  color: var(--bs-blue);
+  font-weight: 600;
+  text-decoration: underline;
+}
+
+.subTagsScrollableDiv {
+  scrollbar-width: auto;
+  scrollbar-color: var(--bs-gray-400) var(--bs-white);
+
+  max-height: calc(100vh - 18rem);
+  overflow: auto;
+}