Style open modal

src/styles/_modal.scss

@@ -0,0 +1,102 @@
+//MODAL
+.maputnik-modal {
+  min-width: 350px;
+  max-width: 600px;
+  background-color: $color-black;
+  box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.3);
+  z-index: 3;
+}
+.maputnik-modal-section {
+  padding-top: $margin-3;
+  padding-bottom: $margin-3;
+}
+.maputnik-modal-header {
+  background-color: $color-gray;
+  display: flex;
+  flex-direction: row;
+  padding: $margin-3;
+}
+.maputnik-modal-header-title {
+  font-size: $font-size-5;
+  margin: 0;
+}
+
+.maputnik-modal-header-toggle {
+  cursor: pointer;
+}
+.maputnik-modal-content {
+  padding: $margin-3;
+}
+
+.maputnik-modal-header-space {
+  @extend .maputnik-space;
+}
+
+//OVERLAY
+.maputnik-overlay-viewport {
+    position: fixed;
+    top: 0px;
+    right: 0px;
+    bottom: 0px;
+    left: 0px;
+    z-index: 2;
+    opacity: 0.875;
+    background-color: rgb(28, 31, 36);
+}
+
+.maputnik-overlay {
+    top: 0px;
+    right: 0px;
+    bottom: 0px;
+    left: 0px;
+    position: fixed;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+}
+
+//OPEN MODAL
+.maputnik-upload-button {
+  @extend .maputnik-big-button;
+}
+.maputnik-public-style {
+  vertical-align: top;
+  margin-top: 10px;
+  margin-right: 10px;
+  background-color: $color-gray;
+  display: inline-block;
+  width: 180px;
+  font-size: $font-size-2;
+  color: $color-lowgray;
+}
+.maputnik-public-style-button {
+  background-color: $color-gray;
+  padding: $margin-3;
+  display: block;
+
+  &:hover {
+    background-color: $color-midgray;
+  }
+}
+.maputnik-public-style-header {
+	display: flex;
+	flex-direction: row;
+}
+
+.maputnik-public-style-thumbnail {
+  display: block;
+  margin-top: $margin-2;
+  max-width: 100%;
+}
+
+//ADD MODAL
+.maputnik-add-layer-button {
+  margin-right: $margin-3;
+  float: right;
+  display: inline-block;
+  margin-top: 3;
+  margin-bottom: $margin-3;
+  text-align: right;
+  @extend .maputnik-big-button;
+}