From 85e42980ec134a15fb809cfe183d589351300462 Mon Sep 17 00:00:00 2001
From: Maciej Lenartowicz <maciej.lenartowicz@nic.cz>
Date: Wed, 22 Jan 2020 13:21:46 +0100
Subject: [PATCH] Added styles extracted from reForis.

---
 package-lock.json         |  2 +-
 package.json              |  2 +-
 src/bootstrap/Modal.css   | 15 +++++++++++++++
 src/bootstrap/Modal.js    |  1 +
 src/bootstrap/Spinner.css | 33 +++++++++++++++++++++++++++++++++
 src/bootstrap/Spinner.js  |  2 ++
 6 files changed, 53 insertions(+), 2 deletions(-)
 create mode 100644 src/bootstrap/Modal.css
 create mode 100644 src/bootstrap/Spinner.css

diff --git a/package-lock.json b/package-lock.json
index cecaec2..f2ccb66 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "foris",
-  "version": "3.3.0",
+  "version": "3.4.0",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
diff --git a/package.json b/package.json
index f6f4dee..531f7df 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "foris",
-  "version": "3.3.0",
+  "version": "3.4.0",
   "description": "Set of components and utils for Foris and its plugins.",
   "author": "CZ.NIC, z.s.p.o.",
   "repository": {
diff --git a/src/bootstrap/Modal.css b/src/bootstrap/Modal.css
new file mode 100644
index 0000000..b057caa
--- /dev/null
+++ b/src/bootstrap/Modal.css
@@ -0,0 +1,15 @@
+@keyframes modalFade {
+    from {
+        opacity: 0;
+    }
+    to {
+        opacity: 1;
+    }
+}
+
+.modal.show {
+    display: block;
+    animation-name: modalFade;
+    animation-duration: .3s;
+    background: rgba(0, 0, 0, 0.2);
+}
diff --git a/src/bootstrap/Modal.js b/src/bootstrap/Modal.js
index 00f5c83..42e24f1 100644
--- a/src/bootstrap/Modal.js
+++ b/src/bootstrap/Modal.js
@@ -10,6 +10,7 @@ import PropTypes from "prop-types";
 
 import { Portal } from "../utils/Portal";
 import { useClickOutside } from "../utils/hooks";
+import "./Modal.css";
 
 Modal.propTypes = {
     /** Is modal shown value */
diff --git a/src/bootstrap/Spinner.css b/src/bootstrap/Spinner.css
new file mode 100644
index 0000000..432b529
--- /dev/null
+++ b/src/bootstrap/Spinner.css
@@ -0,0 +1,33 @@
+.spinner-wrapper .spinner-border {
+    width: 4rem;
+    height: 4rem;
+    color: #00a2e2;
+}
+
+.spinner-fs-background {
+    background-color: rgba(2, 2, 2, .5);
+    color: rgb(230, 230, 230);
+    position: fixed;
+    width: 100%;
+    height: 100%;
+    top: 0;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    /*
+     * Set to high value to me sure that it always overlaps all components
+     * https://getbootstrap.com/docs/4.3/layout/overview/#z-index
+     */
+    z-index: 1100;
+}
+
+.spinner-fs-wrapper .spinner-border {
+    width: 6rem;
+    height: 6rem;
+}
+
+.spinner-fs-wrapper .spinner-text {
+    margin: 1rem;
+}
diff --git a/src/bootstrap/Spinner.js b/src/bootstrap/Spinner.js
index 07e856f..5ea2a5d 100644
--- a/src/bootstrap/Spinner.js
+++ b/src/bootstrap/Spinner.js
@@ -8,6 +8,8 @@
 import React from "react";
 import PropTypes from "prop-types";
 
+import "./Spinner.css";
+
 Spinner.propTypes = {
     /** Children components put into `div` with "spinner-text" class. */
     children: PropTypes.oneOfType([