diff --git a/src/screens/SubTags/SubTags.module.css b/src/screens/SubTags/SubTags.module.css deleted file mode 100644 index 0a210bdfa4..0000000000 --- a/src/screens/SubTags/SubTags.module.css +++ /dev/null @@ -1,145 +0,0 @@ -.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; -} diff --git a/src/style/app.module.css b/src/style/app.module.css index fc8a389145..5e3475f539 100644 --- a/src/style/app.module.css +++ b/src/style/app.module.css @@ -77,11 +77,10 @@ .btnsContainer { display: flex; + /* Adjust spacing between items */ margin: 2.5rem 0; align-items: center; gap: 10px; - /* Adjust spacing between items */ - margin: 2.5rem 0; } .btnsContainer .btnsBlock { @@ -347,6 +346,11 @@ transform: scale(1.5); color: var(--bs-danger); margin-bottom: 1rem; + /* Add error icon for non-color indication */ + &::before { + content: '⚠️'; + margin-right: 0.5rem; + } } .subTagsLink { @@ -359,13 +363,15 @@ visibility: hidden; } -.subTagsLink:hover { +.subTagsLink:hover, +.subTagsLink:focus { color: var(--subtle-blue-grey-hover); font-weight: 600; text-decoration: underline; } -.subTagsLink:hover i { +.subTagsLink:hover i, +.subTagsLink:focus i { visibility: visible; } @@ -669,3 +675,145 @@ hr { transform: rotate(360deg); } } + +.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%; + } +} + +.errorMessage { + margin-top: 25%; + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; +} + +.tableHeader { + background-color: var(--bs-primary-text-emphasis); + color: var(--bs-white); + font-size: 1rem; +} +.rowBackground { + background-color: var(--bs-white); + max-height: 120px; + overflow-y: auto; +} + +.subTagsLink { + color: var(--bs-blue); + font-weight: 500; + cursor: pointer; + /* Prevent layout shift */ + &::after { + display: block; + content: attr(data-text); + font-weight: 600; + height: 0; + overflow: hidden; + visibility: hidden; + } +} + +.subTagsLink i { + visibility: hidden; +} + +.tagsBreadCrumbs { + color: var(--bs-gray); + cursor: pointer; + /* Prevent layout shift */ + &::after { + display: block; + content: attr(data-text); + font-weight: 600; + height: 0; + overflow: hidden; + visibility: hidden; + } +} + +.tagsBreadCrumbs:hover, +.tagsBreadCrumbs:focus { + 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; +}