bemified scss

Author: Sine Jespersen

src/stories/Library/Modals/modal-loan/ModalLoan.tsx

@@ -171,7 +171,7 @@ export const ModalLoan: React.FC<ModalLoanProps> = ({
         shoulShowModal ? "modal-show" : ""
       }`}
     >
-      <div className="modal-screen-reader-description">
+      <div className="modal__screen-reader-description">
         Denne modal dækker sidens indhold, og er en demo
       </div>
       <ModalCloseButton toggleModal={toggleModal} />

src/styles/scss/shared.scss

@@ -15,15 +15,7 @@
  *
  * https://git.drupalcode.org/project/drupal/-/blob/9.2.x/core/modules/system/css/components/hidden.module.css#L18-33
  */
-.hide-visually {
-  position: absolute;
-  left: -10000px;
-  width: 1px;
-  height: 1px;
-  overflow: hidden;
-}
-
-.modal-screen-reader-description {
+@mixin hide-visually {
   position: absolute;
   clip: rect(1px, 1px, 1px, 1px);
   padding: 0;
@@ -58,6 +50,10 @@
   transition: opacity 0.3s;
   min-height: 100vh;
   height: 100%;
+
+  &__screen-reader-description {
+    @include hide-visually;
+  }
 }
 
 .modal-padding {