Merge branch 'css-refactoring' into 'dev'

Added styles extracted from reForis.

See merge request turris/reforis/foris-js!85

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);
+}

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 */

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;
+}

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([