Skip to content

Commit

Permalink
feat: indicator positions are now responsive and accept sm:, md:, etc…
Browse files Browse the repository at this point in the history
…. prefixes
  • Loading branch information
saadeghi committed Mar 18, 2022
1 parent 753d4ff commit 5e7ac34
Show file tree
Hide file tree
Showing 3 changed files with 45 additions and 28 deletions.
24 changes: 2 additions & 22 deletions src/components/unstyled/indicator.css
Original file line number Diff line number Diff line change
@@ -1,29 +1,9 @@
.indicator {
@apply relative inline-flex;
width: fit-content;
.indicator-item {
& :where(.indicator-item) {
z-index: 1;
@apply absolute transform;
& {
@apply right-0 left-auto top-0 bottom-auto translate-x-1/2 -translate-y-1/2;
}
&.indicator-start {
@apply right-auto left-0 -translate-x-1/2;
}
&.indicator-center {
@apply right-1/2 left-1/2 -translate-x-1/2;
}
&.indicator-end {
@apply right-0 left-auto translate-x-1/2;
}
&.indicator-bottom {
@apply top-auto bottom-0 translate-y-1/2;
}
&.indicator-middle {
@apply top-1/2 bottom-1/2 -translate-y-1/2;
}
&.indicator-top {
@apply top-0 bottom-auto -translate-y-1/2;
}
}
}

25 changes: 19 additions & 6 deletions src/docs/src/routes/components/indicator.svelte.md
Original file line number Diff line number Diff line change
Expand Up @@ -15,12 +15,12 @@ published: true
data="{[
{ type:'component', class: 'indicator', desc: 'Container element' },
{ type:'component', class: 'indicator-item', desc: 'will be placed on the corner of sibling' },
{ type:'modifier', class: 'indicator-start', desc: 'align horizontally to the left' },
{ type:'modifier', class: 'indicator-center', desc: 'align horizontally to the center' },
{ type:'modifier', class: 'indicator-end', desc: 'align horizontally to the right (default)' },
{ type:'modifier', class: 'indicator-top', desc: 'align vertically to top (default)' },
{ type:'modifier', class: 'indicator-middle', desc: 'align vertically to middle' },
{ type:'modifier', class: 'indicator-bottom', desc: 'align vertically to bottom' },
{ type:'responsive', class: 'indicator-start', desc: 'align horizontally to the left' },
{ type:'responsive', class: 'indicator-center', desc: 'align horizontally to the center' },
{ type:'responsive', class: 'indicator-end', desc: 'align horizontally to the right (default)' },
{ type:'responsive', class: 'indicator-top', desc: 'align vertically to top (default)' },
{ type:'responsive', class: 'indicator-middle', desc: 'align vertically to middle' },
{ type:'responsive', class: 'indicator-bottom', desc: 'align vertically to bottom' },
]}"
/>

Expand Down Expand Up @@ -299,3 +299,16 @@ data="{[
</div>`
}</pre>
</Component>

<Component title="Responsive" desc="changes position based on resolution">
<div class="indicator">
<span class="indicator-item indicator-start sm:indicator-middle md:indicator-bottom lg:indicator-center xl:indicator-end badge badge-secondary"></span>
<div class="grid w-32 h-32 rounded bg-base-300 place-items-center">content</div>
</div>
<pre slot="html" use:replace={{ to: $prefix }}>{
`<div class="$$indicator">
<span class="$$indicator-item $$indicator-start sm:$$indicator-middle md:$$indicator-bottom lg:$$indicator-center xl:$$indicator-end badge badge-secondary"></span>
<div class="grid w-32 h-32 bg-base-300 place-items-center">content</div>
</div>`
}</pre>
</Component>
24 changes: 24 additions & 0 deletions src/utilities/unstyled/indicator.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
.indicator {
& :where(.indicator-item) {
@apply right-0 left-auto top-0 bottom-auto translate-x-1/2 -translate-y-1/2;
}
& :where(.indicator-item.indicator-start) {
@apply right-auto left-0 -translate-x-1/2;
}
& :where(.indicator-item.indicator-center) {
@apply right-1/2 left-1/2 -translate-x-1/2;
}
& :where(.indicator-item.indicator-end) {
@apply right-0 left-auto translate-x-1/2;
}
& :where(.indicator-item.indicator-bottom) {
@apply top-auto bottom-0 translate-y-1/2;
}
& :where(.indicator-item.indicator-middle) {
@apply top-1/2 bottom-1/2 -translate-y-1/2;
}
& :where(.indicator-item.indicator-top) {
@apply top-0 bottom-auto -translate-y-1/2;
}
}

0 comments on commit 5e7ac34

Please sign in to comment.