Move components css files to sass

src/components/dialogHelper/dialoghelper.scss

@@ -0,0 +1,156 @@
+.dialogContainer {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 999999 !important;
+    contain: strict;
+    overflow: hidden;
+    overscroll-behavior: contain;
+}
+
+.dialog {
+    margin: 0;
+    border-radius: 0.2em;
+    -webkit-font-smoothing: antialiased;
+    border: 0;
+    padding: 0;
+    will-change: transform, opacity;
+
+    /* Strict does not work well with actionsheet */
+    contain: style paint;
+    box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.4);
+}
+
+.dialog-fixedSize {
+    border-radius: 0;
+    max-height: none;
+    max-width: none;
+    contain: layout style paint;
+}
+
+.dialog-fullscreen {
+    /* Needed due to formDialog style */
+    position: fixed !important;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    margin: 0;
+    box-shadow: none;
+}
+
+@keyframes scaledown {
+    from {
+        opacity: 1;
+        transform: none;
+    }
+
+    to {
+        opacity: 0;
+        transform: scale(0.5);
+    }
+}
+
+@keyframes scaleup {
+    from {
+        transform: scale(0.5);
+        opacity: 0;
+    }
+
+    to {
+        transform: none;
+        opacity: 1;
+    }
+}
+
+@keyframes fadein {
+    from {
+        opacity: 0;
+    }
+
+    to {
+        opacity: 1;
+    }
+}
+
+@keyframes fadeout {
+    from {
+        opacity: 1;
+    }
+
+    to {
+        opacity: 0;
+    }
+}
+
+@keyframes slideup {
+    from {
+        opacity: 0;
+        transform: translate3d(0, 30%, 0);
+    }
+
+    to {
+        opacity: 1;
+        transform: none;
+    }
+}
+
+@keyframes slidedown {
+    from {
+        opacity: 1;
+        transform: none;
+    }
+
+    to {
+        opacity: 0;
+        transform: translate3d(0, 20%, 0);
+    }
+}
+
+@media all and (max-width: 80em), all and (max-height: 45em) {
+    .dialog-fixedSize,
+    .dialog-fullscreen-lowres {
+        position: fixed !important;
+        top: 0 !important;
+        bottom: 0 !important;
+        left: 0 !important;
+        right: 0 !important;
+        margin: 0 !important;
+        box-shadow: none;
+    }
+}
+
+@media all and (min-width: 80em) and (min-height: 45em) {
+    .dialog-small {
+        width: 60%;
+        height: 80%;
+    }
+}
+
+.noScroll {
+    overflow-x: hidden !important;
+    overflow-y: hidden !important;
+}
+
+.dialogBackdrop {
+    background-color: #000;
+    opacity: 0;
+    position: fixed !important;
+    top: 0 !important;
+    bottom: 0 !important;
+    left: 0 !important;
+    right: 0 !important;
+    margin: 0 !important;
+    z-index: 999999 !important;
+    transition: opacity ease-out 0.2s;
+    will-change: opacity;
+}
+
+.dialogBackdropOpened {
+    opacity: 0.5;
+}