-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
03273e2
commit d3f12b4
Showing
14 changed files
with
328 additions
and
70 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,9 +1,12 @@ | ||
<script setup lang="ts"> | ||
import SVG from './SVG.vue' | ||
const { size } = defineProps<{ | ||
size?: 'medium' | 'small' | 'mini' | ||
}>() | ||
</script> | ||
|
||
<template> | ||
<SVG> | ||
<SVG :size="size"> | ||
<path fill="currentColor" d="M11 4h2v7h7v2h-7v7h-2v-7H4v-2h7z" /> | ||
</SVG> | ||
</template> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,9 +1,12 @@ | ||
<script setup lang="ts"> | ||
import SVG from './SVG.vue' | ||
const { size } = defineProps<{ | ||
size?: 'medium' | 'small' | 'mini' | ||
}>() | ||
</script> | ||
|
||
<template> | ||
<SVG> | ||
<SVG :size="size"> | ||
<path fill="currentColor" d="M2 4h20v16H2zm2 2v12h16V6zm6 4h8v6h-8zm2 2v2h4v-2z" /> | ||
</SVG> | ||
</template> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,13 +1,30 @@ | ||
<script setup lang="ts"> | ||
const { size = 'small' } = defineProps<{ | ||
size?: 'medium' | 'small' | 'mini' | ||
}>() | ||
</script> | ||
|
||
<template> | ||
<svg id="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> | ||
<svg id="icon" :class="size" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> | ||
<slot /> | ||
</svg> | ||
</template> | ||
|
||
<style> | ||
svg#icon { | ||
width: var(--paragraph); | ||
aspect-ratio: 1 / 1; | ||
fill: currentColor; | ||
} | ||
svg#icon.medium { | ||
width: var(--space-3); | ||
} | ||
svg#icon.small { | ||
width: var(--paragraph); | ||
} | ||
svg#icon.mini { | ||
width: var(--space-atom); | ||
} | ||
</style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,89 @@ | ||
<script setup lang="ts"> | ||
import { ref } from 'vue' | ||
const value = ref(50) | ||
</script> | ||
|
||
<template> | ||
<div class="slider-wrapper"> | ||
<input type="range" min="0" max="100" v-model="value" tabindex="1" /> | ||
<div class="slider"> | ||
<div class="fill"> | ||
<div class="handle"></div> | ||
</div> | ||
</div> | ||
</div> | ||
</template> | ||
|
||
<style scoped lang="scss"> | ||
.slider-wrapper { | ||
--handle-size: var(--block-small); | ||
display: flex; | ||
align-items: center; | ||
justify-content: center; | ||
position: relative; | ||
height: var(--block-big); | ||
background: var(--base-10); | ||
border-radius: var(--radius); | ||
padding: 0px calc(var(--handle-size) / 2); | ||
} | ||
.slider-wrapper input { | ||
opacity: 0; | ||
cursor: pointer; | ||
position: absolute; | ||
z-index: 3; | ||
width: calc(100% - var(--handle-size)); | ||
height: var(--block-big); | ||
} | ||
input[type='range'] { | ||
-webkit-appearance: none; /* Chrome and Safari */ | ||
-moz-appearance: none; /* Firefox */ | ||
appearance: none; /* Standard */ | ||
} | ||
input[type='range']::-webkit-slider-thumb { | ||
height: 5px; | ||
width: 0px; | ||
border: none; | ||
background: blue; | ||
} | ||
input[type='range']::-moz-range-thumb { | ||
height: 5px; | ||
width: 0px; | ||
border: none; | ||
background: blue; | ||
} | ||
.slider-wrapper .slider { | ||
position: relative; | ||
z-index: 1; | ||
display: flex; | ||
align-items: center; | ||
height: calc(var(--block-small) / 2); | ||
width: 100%; | ||
background: var(--accent-60); | ||
border-radius: var(--radius); | ||
} | ||
.slider-wrapper .slider .fill { | ||
position: relative; | ||
display: flex; | ||
align-items: center; | ||
justify-self: flex-end; | ||
height: 100%; | ||
width: calc(v-bind(value) * 1%); | ||
background: var(--accent-100); | ||
border-radius: var(--radius); | ||
} | ||
.slider-wrapper .slider .fill .handle { | ||
position: absolute; | ||
right: calc(0px - var(--handle-size) / 2); | ||
height: var(--handle-size); | ||
aspect-ratio: 1 / 1; | ||
background: var(--base-100); | ||
border-radius: var(--radius); | ||
} | ||
</style> |
Oops, something went wrong.