github/directus
1
0
Fork 0
mirror of https://github.com/directus/directus.git synced 2026-01-27 04:08:09 -05:00
Code Issues Packages Projects Releases Wiki Activity

Add bottom margin to Slider interface to account for field note (#17024)

Browse Source 
* add margin when thumb label is always visible

* add z-index to thumb label for field note

Co-authored-by: Rijk van Zanten <rijkvanzanten@me.com>
This commit is contained in:
Azri Kahar
2023-01-05 21:31:15 +08:00
committed by GitHub
parent 9f60b0f31d
commit 0122c4da4b
1 changed files with 6 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
app/src/components/v-slider.vue
View File

@@ -3,7 +3,7 @@
<div v-if="$slots.prepend" class="prepend">
<slot name="prepend" :value="modelValue" />
</div>
<div class="slider" :class="{ disabled }">
<div class="slider" :class="{ disabled, 'thumb-label-visible': showThumbLabel && alwaysShowValue }">
<input
:disabled="disabled"
type="range"
@@ -113,6 +113,10 @@ body {
--v-slider-fill-color: var(--foreground-subdued);
}
&.thumb-label-visible {
margin-bottom: 30px;
}
input {
width: 100%;
height: 4px;
@@ -219,6 +223,7 @@ body {
}
.thumb-label {
z-index: 1;
position: absolute;
top: 0px;
left: calc(var(--_v-slider-percentage) * 1%);