From 56165b254b060d76e28940e134df3fdc5c22f865 Mon Sep 17 00:00:00 2001 From: Alberto Monterroso <14013679+Albermonte@users.noreply.github.com> Date: Sun, 19 May 2024 14:17:31 +0200 Subject: [PATCH 1/3] WIP: arrows --- .vitepress/sidebar.config.ts | 6 +++++ build/ui/utilities/arrows-links.md | 38 ++++++++++++++++++++++++++++++ build/ui/utilities/index.md | 1 + 3 files changed, 45 insertions(+) create mode 100644 build/ui/utilities/arrows-links.md create mode 100644 build/ui/utilities/index.md diff --git a/.vitepress/sidebar.config.ts b/.vitepress/sidebar.config.ts index f6fb064..da42487 100644 --- a/.vitepress/sidebar.config.ts +++ b/.vitepress/sidebar.config.ts @@ -161,6 +161,12 @@ export const sidebar: DefaultTheme.Sidebar = { { text: 'Cards', link: '/build/ui/css-framework/cards' }, ], }, + { + text: 'Utilities', + items: [ + { text: 'Arrow Links', link: '/build/ui/utilities/arrows-links.md' }, + ], + }, ], }, ], diff --git a/build/ui/utilities/arrows-links.md b/build/ui/utilities/arrows-links.md new file mode 100644 index 0000000..f357094 --- /dev/null +++ b/build/ui/utilities/arrows-links.md @@ -0,0 +1,38 @@ +# Arrow Links + +TODO: Write here a description + +::: raw +
+ Arrow back + External link + Internal link +
+::: + +```html +Arrow back +External link +Internal link +``` +
+You can even nest the arrow in a tag element + +::: raw +
+ +

External link

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+ +
+::: +```html + +

+ External link +

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. +

+ +``` diff --git a/build/ui/utilities/index.md b/build/ui/utilities/index.md new file mode 100644 index 0000000..909e9db --- /dev/null +++ b/build/ui/utilities/index.md @@ -0,0 +1 @@ +# Utilities From affb78083f0d66e024a2ea5440418592ddcc97ee Mon Sep 17 00:00:00 2001 From: Alberto Monterroso <14013679+Albermonte@users.noreply.github.com> Date: Tue, 21 May 2024 13:24:33 +0200 Subject: [PATCH 2/3] WIP --- .vitepress/sidebar.config.ts | 10 +- .../{arrows-links.md => arrow-links.md} | 21 ++--- build/ui/utilities/borders.md | 34 +++++++ build/ui/utilities/buttons.md | 17 ++++ build/ui/utilities/curtain.md | 33 +++++++ build/ui/utilities/flex-cards.md | 29 ++++++ build/ui/utilities/index.md | 12 +++ build/ui/utilities/inputs.md | 30 ++++++ build/ui/utilities/pills.md | 92 +++++++++++++++++++ build/ui/utilities/switch.md | 27 ++++++ build/ui/utilities/texts.md | 21 +++++ package.json | 2 +- pnpm-lock.yaml | 8 +- 13 files changed, 319 insertions(+), 17 deletions(-) rename build/ui/utilities/{arrows-links.md => arrow-links.md} (51%) create mode 100644 build/ui/utilities/borders.md create mode 100644 build/ui/utilities/buttons.md create mode 100644 build/ui/utilities/curtain.md create mode 100644 build/ui/utilities/flex-cards.md create mode 100644 build/ui/utilities/inputs.md create mode 100644 build/ui/utilities/pills.md create mode 100644 build/ui/utilities/switch.md create mode 100644 build/ui/utilities/texts.md diff --git a/.vitepress/sidebar.config.ts b/.vitepress/sidebar.config.ts index da42487..c7555f1 100644 --- a/.vitepress/sidebar.config.ts +++ b/.vitepress/sidebar.config.ts @@ -164,7 +164,15 @@ export const sidebar: DefaultTheme.Sidebar = { { text: 'Utilities', items: [ - { text: 'Arrow Links', link: '/build/ui/utilities/arrows-links.md' }, + { text: 'Arrow Links', link: '/build/ui/utilities/arrow-links' }, + { text: 'Borders', link: '/build/ui/utilities/borders' }, + { text: 'Buttons', link: '/build/ui/utilities/buttons' }, + { text: 'Curtain', link: '/build/ui/utilities/curtain' }, + { text: 'Flex Cards', link: '/build/ui/utilities/flex-cards' }, + { text: 'Inputs', link: '/build/ui/utilities/inputs' }, + { text: 'Pills', link: '/build/ui/utilities/pills' }, + { text: 'Switch', link: '/build/ui/utilities/switch' }, + { text: 'Texts', link: '/build/ui/utilities/texts' }, ], }, ], diff --git a/build/ui/utilities/arrows-links.md b/build/ui/utilities/arrow-links.md similarity index 51% rename from build/ui/utilities/arrows-links.md rename to build/ui/utilities/arrow-links.md index f357094..d1c2afe 100644 --- a/build/ui/utilities/arrows-links.md +++ b/build/ui/utilities/arrow-links.md @@ -2,33 +2,32 @@ TODO: Write here a description -::: raw
Arrow back - External link + External link Internal link
-::: ```html Arrow back -External link +External link Internal link ```
-You can even nest the arrow in a tag element +You can even nest the arrow in a `tag` element -::: raw
- -

External link

+ +

External link

Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-::: + ```html - -

+ + + +

External link

diff --git a/build/ui/utilities/borders.md b/build/ui/utilities/borders.md new file mode 100644 index 0000000..de291ba --- /dev/null +++ b/build/ui/utilities/borders.md @@ -0,0 +1,34 @@ +# Borders + +TODO: Write here a description + +If using Tailwind/UnoCSS is recommended to use just `ring-{COLOR}`. For example: `ring-neutral-700` +No need to do `ring-neutral-700 ring-1` + +## Full Border + +

+
Box
+
+ +```html +
Box
+``` + +## One side Border + +
+
Border Top
+
Border Right
+
Border Bottom
+
Border Left
+
+ +```html + + +
Border Top
+
Border Right
+
Border Bottom
+
Border Left
+``` diff --git a/build/ui/utilities/buttons.md b/build/ui/utilities/buttons.md new file mode 100644 index 0000000..ab37f7b --- /dev/null +++ b/build/ui/utilities/buttons.md @@ -0,0 +1,17 @@ +# Buttons + +TODO: Write here a description + +
+ + +
+ +```html + + +``` + +
+ +You can also use [*pills*](pills) as buttons diff --git a/build/ui/utilities/curtain.md b/build/ui/utilities/curtain.md new file mode 100644 index 0000000..a3cc07b --- /dev/null +++ b/build/ui/utilities/curtain.md @@ -0,0 +1,33 @@ +# Curtain + +You can use the class `curtain-y` to add the curtains. You can change the height of the curtain using `--mask-size` + +Only works if the browser supports [animation-timeline](https://developer.mozilla.org/en-US/docs/Web/CSS/animation-timeline#browser_compatibility) + +
+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent imperdiet ligula in tortor suscipit dictum. Etiam aliquet eros est, a varius velit vestibulum imperdiet. Vestibulum pellentesque a est eu accumsan. Mauris sodales lorem vel ipsum tempus vestibulum. Quisque lectus nunc, imperdiet non mattis vitae, dignissim et eros. Ut semper ipsum ut odio euismod dignissim. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nam nec lectus lacus. Phasellus dui mauris, rhoncus in dapibus eget, mollis eget sapien. Suspendisse vel massa orci. Duis lobortis leo ac elementum vulputate. In hac habitasse platea dictumst. Sed feugiat ac nibh ullamcorper venenatis. Praesent pellentesque leo facilisis, auctor augue non, posuere mauris. Cras dignissim condimentum volutpat. Sed pretium mattis quam, in blandit massa finibus eu. + + Suspendisse sed facilisis leo. Cras eu turpis eu turpis pellentesque bibendum. Praesent molestie lorem quis cursus tempus. Vivamus et augue sollicitudin, tincidunt ante sit amet, consequat massa. Nulla lobortis vitae felis ac tristique. Ut sit amet diam malesuada odio vehicula cursus. Nullam interdum nisi quis nibh viverra rutrum. Phasellus tempor at sem vitae elementum. Ut quis aliquam nibh. + + Nulla orci lacus, accumsan sit amet efficitur suscipit, feugiat in nisi. Ut vitae ante tempus, suscipit sapien sit amet, eleifend urna. Quisque dapibus lorem non facilisis blandit. Mauris at sagittis elit. Proin laoreet nec ex ut interdum. Nam maximus dignissim urna. Quisque et diam sit amet felis egestas tincidunt et sit amet velit. Morbi quis facilisis augue, vel egestas risus. Nulla finibus arcu eu convallis tristique. Cras id dui ac massa rutrum egestas ac vel ipsum. + + Curabitur a ex ultrices, tempor mi nec, placerat odio. Suspendisse neque lorem, fringilla ac ligula sed, vehicula suscipit enim. Aliquam ultrices quam in mi commodo, ut dapibus tortor ornare. Aliquam a euismod elit. Duis interdum sapien dapibus nibh fringilla, id condimentum ante semper. Nullam sagittis ac lectus vel semper. Praesent blandit magna quis enim porttitor consequat. Nullam non ante vestibulum, pellentesque nulla in, imperdiet lectus. Nulla eleifend viverra aliquam. Aliquam suscipit aliquet risus ut aliquet. Proin sagittis tellus vel est imperdiet, sit amet molestie lectus maximus. +

+
+ +```html + + +
+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent imperdiet ligula in tortor suscipit dictum. Etiam aliquet eros est, a varius velit vestibulum imperdiet. Vestibulum pellentesque a est eu accumsan. Mauris sodales lorem vel ipsum tempus vestibulum. Quisque lectus nunc, imperdiet non mattis vitae, dignissim et eros. Ut semper ipsum ut odio euismod dignissim. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nam nec lectus lacus. Phasellus dui mauris, rhoncus in dapibus eget, mollis eget sapien. Suspendisse vel massa orci. Duis lobortis leo ac elementum vulputate. In hac habitasse platea dictumst. Sed feugiat ac nibh ullamcorper venenatis. Praesent pellentesque leo facilisis, auctor augue non, posuere mauris. Cras dignissim condimentum volutpat. Sed pretium mattis quam, in blandit massa finibus eu. + + Suspendisse sed facilisis leo. Cras eu turpis eu turpis pellentesque bibendum. Praesent molestie lorem quis cursus tempus. Vivamus et augue sollicitudin, tincidunt ante sit amet, consequat massa. Nulla lobortis vitae felis ac tristique. Ut sit amet diam malesuada odio vehicula cursus. Nullam interdum nisi quis nibh viverra rutrum. Phasellus tempor at sem vitae elementum. Ut quis aliquam nibh. + + Nulla orci lacus, accumsan sit amet efficitur suscipit, feugiat in nisi. Ut vitae ante tempus, suscipit sapien sit amet, eleifend urna. Quisque dapibus lorem non facilisis blandit. Mauris at sagittis elit. Proin laoreet nec ex ut interdum. Nam maximus dignissim urna. Quisque et diam sit amet felis egestas tincidunt et sit amet velit. Morbi quis facilisis augue, vel egestas risus. Nulla finibus arcu eu convallis tristique. Cras id dui ac massa rutrum egestas ac vel ipsum. + + Curabitur a ex ultrices, tempor mi nec, placerat odio. Suspendisse neque lorem, fringilla ac ligula sed, vehicula suscipit enim. Aliquam ultrices quam in mi commodo, ut dapibus tortor ornare. Aliquam a euismod elit. Duis interdum sapien dapibus nibh fringilla, id condimentum ante semper. Nullam sagittis ac lectus vel semper. Praesent blandit magna quis enim porttitor consequat. Nullam non ante vestibulum, pellentesque nulla in, imperdiet lectus. Nulla eleifend viverra aliquam. Aliquam suscipit aliquet risus ut aliquet. Proin sagittis tellus vel est imperdiet, sit amet molestie lectus maximus. +

+
+``` diff --git a/build/ui/utilities/flex-cards.md b/build/ui/utilities/flex-cards.md new file mode 100644 index 0000000..4c7d7ad --- /dev/null +++ b/build/ui/utilities/flex-cards.md @@ -0,0 +1,29 @@ +# Flex Cards + +TODO: Write here a description + +
+

An awesome card

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent imperdiet ligula in tortor suscipit dictum.

+
+ +```html +
+ An awesome card +

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent imperdiet ligula in tortor suscipit dictum.

+
+``` +
+Links can be added to the card, converting the card into a clickable element + + +

An awesome card

+

with a link!

+ + +```html + +

An awesome card

+

with a link!

+ +``` diff --git a/build/ui/utilities/index.md b/build/ui/utilities/index.md index 909e9db..db5e157 100644 --- a/build/ui/utilities/index.md +++ b/build/ui/utilities/index.md @@ -1 +1,13 @@ # Utilities + +Everything works with **dark mode** out of the box + +- [Arrow Links](arrow-links) +- [Borders](borders) +- [Buttons](buttons) +- [Curtain](curtain) +- [Flex Cards](flex-cards) +- [Inputs](inputs) +- [Pills](pills) +- [Switch](switch) +- [Texts](texts) diff --git a/build/ui/utilities/inputs.md b/build/ui/utilities/inputs.md new file mode 100644 index 0000000..b8c6f57 --- /dev/null +++ b/build/ui/utilities/inputs.md @@ -0,0 +1,30 @@ +# Inputs + +TODO: Write here a description + +## Generic Input +
+ +
+ +```html + +``` + +## Invalid Input +
+ +
+ +```html + +``` + +## Textarea +
+