From 85e42980ec134a15fb809cfe183d589351300462 Mon Sep 17 00:00:00 2001 From: Maciej Lenartowicz 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([