@saooti/octopus-sdk 1.0.0 → 1.1.1

package/src/assets/modal.scss

@@ -1,56 +1,49 @@
 //Modal
-.modal-mask {
-	position: fixed;
-	z-index: 9998;
-	top: 0;
-	left: 0;
-	width: 100%;
-	height: 100%;
-	background-color: rgba(0, 0, 0, .5);
-	display: table;
-	transition: opacity .3s ease;
-}
-  
-.modal-wrapper {
-	display: table-cell;
-	vertical-align: middle;
-}
-.modal-dialog {
-	box-shadow: 0 0.2rem 0.5rem rgba(40,40,40,.3);
-	border-radius: 15px;
-	max-height: 75vh;
-	max-width: 640px;
-	padding: 0 .8rem;
-	width: 100%;
-	background: white;
-	display: flex;
-	@media (max-width: 500px){
-		width: 95%;
-		margin: 2.5% !important;
+.octopus-app{
+	.modal{
+		display: block;
 	}
-}
-.modal-body{
-	overflow-x: auto;
-	@media (max-width: 500px){
-		padding: 0;
+	.modal-backdrop {
+		opacity: 0.5;
+		z-index: 0;
+	}
+
+	.modal-dialog {
+		max-height: 75vh;
+		max-width: 640px;
+		width: 100%;
+		display: flex;
+		color: #353535 !important;
+		@media (max-width: 500px){
+			width: 95%;
+			margin: 2.5% !important;
+		}
+	}
+	.modal-header { 
+		border: 0;
+		border-radius: 0.8rem 0.8rem 0 0;
+		background: $octopus-primary-dark;
+		color: white;
+    }
+	.modal-body{
 		overflow-x: auto;
+		.scroller-vertical {
+			min-height: 200px;
+			height: 200px;
+		}
+	}
+	.modal-dialog, .modal-content {
+		min-height: 300px;
+	}
+	.modal-content{
+		border: 0;
+		height: auto !important;
+		max-height: calc(100vh - 250px) !important;
+		border-radius: 0.8rem;
+		box-shadow: 0 0.2rem 0.5rem rgba(40,40,40,.3);
 	}
-}
-.modal-content{
-	border: 0;
-	.close{
-		outline: none !important;
+	.modal-footer{
+		border: 0;
+		flex-wrap: initial;
 	}
-	height: auto !important;
-    max-height: calc(100vh - 250px) !important;
-}
-.modal-header{
-	border: 0;
-}
-.modal-footer{
-	border: 0;
-	flex-wrap: initial;
-}
-.modal-dialog, .modal-content {
-	min-height: 300px;
 }