refactor(theme-basic): change scss styles to css

npm/ng-packs/packages/theme-basic/src/lib/constants/styles.ts

@@ -73,64 +73,56 @@ export default `
 background-color: rgba(0, 0, 0, 0.6);
 }
 
-.confirmation {
+.confirmation .confirmation-backdrop {
-    .confirmation-backdrop {
+	 background: rgba(0, 0, 0, 0.7) !important;
-        background: rgba(0, 0, 0, 0.7) !important;
+}
-    }
+ .confirmation .confirmation-dialog {
-    .confirmation-dialog {
+	 border: none;
-        border: none;
+	 border-radius: 10px;
-        border-radius: 10px;
+	 background-color: #fff;
-        background-color: #fff;
+	 box-shadow: 0 0 10px -5px rgba(0, 0, 0, 0.5);
-        box-shadow: 0 0 10px -5px rgba(#000, 0.5);
+}
-        .icon-container {
+ .confirmation .confirmation-dialog .icon-container .icon {
-            .icon {
+	 stroke: #fff;
-                stroke: #fff;
+	 color: #fff;
-                color: #fff;
+}
-            }
+ .confirmation .confirmation-dialog .icon-container.info .icon {
-            &.info .icon {
+	 stroke: #2f96b4;
-                stroke: #2f96b4;
+	 color: #2f96b4;
-                color: #2f96b4;
+}
-            }
+ .confirmation .confirmation-dialog .icon-container.success .icon {
-            &.success .icon {
+	 stroke: #51a351;
-                stroke: #51a351;
+	 color: #51a351;
-                color: #51a351;
+}
-            }
+ .confirmation .confirmation-dialog .icon-container.warning .icon {
-            &.warning .icon {
+	 stroke: #f89406;
-                stroke: #f89406;
+	 color: #f89406;
-                color: #f89406;
+}
-            }
+ .confirmation .confirmation-dialog .icon-container.error .icon {
-            &.error .icon {
+	 stroke: #bd362f;
-                stroke: #bd362f;
+	 color: #bd362f;
-                color: #bd362f;
+}
-            }
+ .confirmation .confirmation-dialog .content .title {
-        }
+	 color: #222;
-        .content {
+}
-            .title {
+ .confirmation .confirmation-dialog .content .message {
-                color: #222;
+	 color: #777;
-            }
+}
-            .message {
+ .confirmation .confirmation-dialog .footer {
-                color: #777;
+	 background: transparent;
-            }
+}
-        }
+ .confirmation .confirmation-dialog .footer .confirmation-button {
-        .footer {
+	 background-color: #eee;
-            background: transparent;
+	 color: #777;
-            .confirmation-button {
+}
-                background-color: #eee;
+ .confirmation .confirmation-dialog .footer .confirmation-button:hover, .confirmation .confirmation-dialog .footer .confirmation-button:focus, .confirmation .confirmation-dialog .footer .confirmation-button:active {
-                color: #777;
+	 background-color: #bbb;
-                &:hover, &:focus, &:active {
+}
-                    background-color: #bbb;
+ .confirmation .confirmation-dialog .footer .confirmation-button--confirm {
-                }
+	 background-color: #2f96b4;
-                &--reject {
+	 color: #fff;
-                }
+}
-                &--confirm {
+ .confirmation .confirmation-dialog .footer .confirmation-button--confirm:hover {
-                    background-color: #2f96b4;
+	 background-color: #2e819b;
-                    color: #fff;
-                    &:hover {
-                        background-color: #2e819b;
-                    }
-                }
-            }
-        }
-    }
 }
 `;