diff --git a/src/css/Modals.css b/src/css/Modals.css new file mode 100644 index 0000000..d29963e --- /dev/null +++ b/src/css/Modals.css @@ -0,0 +1,43 @@ +.standard-modal { + color: var(--forth-color); + margin: 1rem 0rem; +} +.modals { + background-color: var(--ternary-color); + padding: 0.2rem; +} +.top { + display: flex; + border-bottom: 0.1px rgb(109, 109, 109) solid; +} + +.card-title { + flex-grow: 1; +} + +.middle { + padding-top: 16px; + padding-bottom: 16px; +} + +.bottom { + display: flex; + gap: 10px; + justify-content: flex-end; +} +.child-one { + background-color: rgb(52, 158, 190); + padding: 8px; + color: var(--ternary-color); + border-radius: 4px; + width: 40px; + text-align: center; +} +.child-two { + background-color: rgb(52, 158, 190); + padding: 8px; + color: var(--ternary-color); + border-radius: 4px; + width: 40px; + text-align: center; +} diff --git a/src/pages/Modals.jsx b/src/pages/Modals.jsx new file mode 100644 index 0000000..2226fe4 --- /dev/null +++ b/src/pages/Modals.jsx @@ -0,0 +1,63 @@ +const Modals = ({ funcAside }) => { + return ( + <> + {funcAside(true)} +
+
+

MODALS

+

+ Use Bootstrap’s JavaScript modal plugin to add dialogs to your site + for lightboxes, user notifications, or completely custom content. +

+
+
+ +
+
+
+

Standard Modals

+
+ +
+
+
+
Card Title
+
X
+
+
+ Lorem, ipsum dolor sit amet consectetur adipisicing elit. Autem + sequi magni est culpa consequatur sunt id praesentium + accusantium aspernatur cumque, ullam nesciunt illum, tempora + animi quo pariatur, veritatis nostrum vitae? +
+
+
Yes
+
No
+
+
+
+
+
+ + +
+ +
+ + + ); +}; +export default Modals;