diff --git a/demo/DemoApp.tsx b/demo/DemoApp.tsx index bc1c6d1..5482323 100644 --- a/demo/DemoApp.tsx +++ b/demo/DemoApp.tsx @@ -32,6 +32,7 @@ import {DemoCurtain} from "./DemoCurtain"; import {DemoModal} from "./DemoModal"; import {useCallableModal} from "../src/Components/Modals/Modals"; import {ModalType} from "../src/Components/Modals/ModalsTypes"; +import {Buttons} from "../src/Components/Buttons/Buttons"; export function DemoApp() { @@ -245,8 +246,10 @@ export function DemoApp() egestas, leo lorem malesuada felis, eu imperdiet orci magna ultrices est.

- - + + + + diff --git a/demo/DemoModal.tsx b/demo/DemoModal.tsx index 5df1b62..9a7f4d0 100644 --- a/demo/DemoModal.tsx +++ b/demo/DemoModal.tsx @@ -1,6 +1,7 @@ import React from "react"; import {Modal, useModal} from "../src/Components/Modals/Modals"; import {ModalType} from "../src/Components/Modals/ModalsTypes"; +import {Buttons} from "../src/Components/Buttons/Buttons"; export function DemoModal({type}: { type: ModalType; }) { @@ -10,7 +11,9 @@ export function DemoModal({type}: { type: ModalType; }) Modal test content - + + + ); } diff --git a/src/Components/Buttons/Buttons.tsx b/src/Components/Buttons/Buttons.tsx new file mode 100644 index 0000000..0a7ca23 --- /dev/null +++ b/src/Components/Buttons/Buttons.tsx @@ -0,0 +1,16 @@ +import React from "react"; +import {classes} from "../../Utils"; + +export function Buttons({placement, children}: React.PropsWithChildren<{ + placement?: "right"|"left"|"center"; +}>) +{ + // Default placement: right. + placement = placement ?? "right"; + + return ( +
+ {children} +
+ ); +} diff --git a/src/styles/components/_button.less b/src/styles/components/_button.less index 35ff306..b3f3bed 100644 --- a/src/styles/components/_button.less +++ b/src/styles/components/_button.less @@ -168,3 +168,30 @@ a.button, button, input[type="submit"], input[type="reset"] margin-right: 0.05em; } } + +div.buttons +{ + display: flex; + flex-direction: row; + gap: 0.5em; + + margin: 0.25em auto; + + &.right + { + justify-content: flex-end; + } + &.left + { + justify-content: flex-start; + } + &.center + { + justify-content: center; + } + + button, .button + { + margin: 0; + } +} diff --git a/src/styles/components/_card.less b/src/styles/components/_card.less index d349abb..14804a3 100644 --- a/src/styles/components/_card.less +++ b/src/styles/components/_card.less @@ -15,21 +15,6 @@ margin: 0.33em 0 0.5em 0; } - button - { - display: block; - margin-left: auto; - } - - > :first-child - { - margin-top: 0; - } - > :last-child - { - margin-bottom: 0; - } - &.floating { width: 20em;