diff --git a/README.md b/README.md index 2c5caac3aa0..de50f6b83d5 100644 --- a/README.md +++ b/README.md @@ -155,7 +155,7 @@ Read the documents for more info - [x] Pagination - [x] Progress - [x] Stat -- [ ] Steps +- [x] Steps - [ ] Tag - [x] Table - [x] Tabs @@ -197,7 +197,7 @@ Read the documents for more info [jsdeliver-url]: https://www.jsdelivr.com/package/npm/daisyui [build-url]: https://github.com/saadeghi/daisyui/actions [tweet-url]: https://twitter.com/intent/tweet?text=DaisyUI%20%0D%0AUI%20Components%20for%20Tailwind%20CSS%20%0D%0Ahttps://github.com/saadeghi/daisyui -[number-of-components]: https://badgen.net/badge/components%20added/34/purple +[number-of-components]: https://badgen.net/badge/components%20added/35/purple [docs-url-install]: https://daisyui.com/docs/install [docs-url]: https://daisyui.com/ diff --git a/src/components/base/steps.css b/src/components/base/steps.css new file mode 100644 index 00000000000..be11e98d2a3 --- /dev/null +++ b/src/components/base/steps.css @@ -0,0 +1,9 @@ +.steps { + counter-reset: step; + grid-auto-columns: 1fr; + @apply inline-grid grid-flow-col overflow-hidden overflow-x-auto; + + .step { + @apply grid grid-cols-1 grid-rows-2 place-items-center text-center; + } +} \ No newline at end of file diff --git a/src/components/styled/steps.css b/src/components/styled/steps.css new file mode 100644 index 00000000000..830c9b42d4b --- /dev/null +++ b/src/components/styled/steps.css @@ -0,0 +1,63 @@ +.steps { + .step { + grid-template-rows: 40px 1fr; + min-width: 4rem; + &:before { + @apply bg-base-300 text-base-content h-2 w-full top-0 col-start-1 row-start-1; + content: ''; + margin-left: -100%; + } + &:after { + content: counter(step); + counter-increment: step; + z-index: 1; + @apply relative rounded-full w-8 h-8 bg-base-300 text-base-content block col-start-1 row-start-1 place-self-center grid place-items-center; + } + &:first-child:before{ + content: none; + } + &[data-content]:after{ + content: attr(data-content); + } + } + .step-neutral + .step-neutral:before, + .step-neutral:after{ + @apply bg-neutral text-neutral-content; + } + .step-primary + .step-primary:before, + .step-primary:after{ + @apply bg-primary text-primary-content; + } + .step-secondary + .step-secondary:before, + .step-secondary:after{ + @apply bg-secondary text-secondary-content; + } + .step-accent + .step-accent:before, + .step-accent:after{ + @apply bg-accent text-accent-content; + } + .step-info + .step-info:before{ + @apply bg-info; + } + .step-info:after{ + @apply bg-info text-base-100; + } + .step-success + .step-success:before{ + @apply bg-success; + } + .step-success:after{ + @apply bg-success text-base-100; + } + .step-warning + .step-warning:before{ + @apply bg-warning; + } + .step-warning:after{ + @apply bg-warning text-base-100; + } + .step-error + .step-error:before{ + @apply bg-error; + } + .step-error:after{ + @apply bg-error text-base-100; + } +} \ No newline at end of file diff --git a/src/docs/pages/components/steps.vue b/src/docs/pages/components/steps.vue new file mode 100644 index 00000000000..8d3bc7bebda --- /dev/null +++ b/src/docs/pages/components/steps.vue @@ -0,0 +1,76 @@ +