zoriya/v10
1
0
Fork 0
mirror of https://github.com/zoriya/v10.git synced 2026-08-16 02:45:09 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(html): add element registrations

Browse Source
This commit is contained in:
Rahim
2025-10-30 04:51:51 +00:00
parent 9e4af60361
commit eaaa03c284
54 changed files with 374 additions and 409 deletions
Download Patch File Download Diff File Expand all files Collapse all files
site/src/examples/html/time-slider/snippet-horizontal.html
+2 -2
View File
@@ -1,7 +1,7 @@
<media-time-slider-root orientation="horizontal">
<media-time-slider orientation="horizontal">
<media-time-slider-track>
<media-time-slider-progress></media-time-slider-progress>
<media-time-slider-pointer></media-time-slider-pointer>
</media-time-slider-track>
<media-time-slider-thumb></media-time-slider-thumb>
</media-time-slider-root>
</media-time-slider>
site/src/examples/html/time-slider/snippet-vertical.html
+2 -2
View File
@@ -1,7 +1,7 @@
<media-time-slider-root orientation="vertical">
<media-time-slider orientation="vertical">
<media-time-slider-track>
<media-time-slider-progress></media-time-slider-progress>
<media-time-slider-pointer></media-time-slider-pointer>
</media-time-slider-track>
<media-time-slider-thumb></media-time-slider-thumb>
</media-time-slider-root>
</media-time-slider>
site/src/examples/html/time-slider/time-slider.css
+4 -4
View File
@@ -1,4 +1,4 @@
media-time-slider-root {
media-time-slider {
position: relative;
display: flex;
align-items: center;
@@ -6,14 +6,14 @@ media-time-slider-root {
}
/* Horizontal orientation */
media-time-slider-root[data-orientation='horizontal'] {
media-time-slider[data-orientation='horizontal'] {
width: 100%;
min-width: 100px;
height: 20px;
}
/* Vertical orientation */
media-time-slider-root[data-orientation='vertical'] {
media-time-slider[data-orientation='vertical'] {
width: 20px;
height: 100px;
flex-direction: column;
@@ -59,6 +59,6 @@ media-time-slider-thumb {
transition: transform 150ms ease;
}
media-time-slider-root:hover media-time-slider-thumb {
media-time-slider:hover media-time-slider-thumb {
transform: scale(1.2);
}
site/src/examples/html/volume-slider/snippet-horizontal.html
+3 -3
View File
@@ -1,6 +1,6 @@
<media-volume-slider-root orientation="horizontal">
<media-volume-slider orientation="horizontal">
<media-volume-slider-track>
<media-volume-slider-progress></media-volume-slider-progress>
<media-volume-slider-indicator></media-volume-slider-indicator>
</media-volume-slider-track>
<media-volume-slider-thumb></media-volume-slider-thumb>
</media-volume-slider-root>
</media-volume-slider>
site/src/examples/html/volume-slider/snippet-vertical.html
+3 -3
View File
@@ -1,6 +1,6 @@
<media-volume-slider-root orientation="vertical">
<media-volume-slider orientation="vertical">
<media-volume-slider-track>
<media-volume-slider-progress></media-volume-slider-progress>
<media-volume-slider-indicator></media-volume-slider-indicator>
</media-volume-slider-track>
<media-volume-slider-thumb></media-volume-slider-thumb>
</media-volume-slider-root>
</media-volume-slider>
site/src/examples/html/volume-slider/volume-slider.css
+5 -5
View File
@@ -1,4 +1,4 @@
media-volume-slider-root {
media-volume-slider {
position: relative;
display: flex;
align-items: center;
@@ -6,14 +6,14 @@ media-volume-slider-root {
}
/* Horizontal orientation */
media-volume-slider-root[data-orientation='horizontal'] {
media-volume-slider[data-orientation='horizontal'] {
width: 80px;
min-width: 80px;
height: 20px;
}
/* Vertical orientation */
media-volume-slider-root[data-orientation='vertical'] {
media-volume-slider[data-orientation='vertical'] {
width: 20px;
height: 80px;
flex-direction: column;
@@ -38,7 +38,7 @@ media-volume-slider-track[data-orientation='vertical'] {
height: 100%;
}
media-volume-slider-progress {
media-volume-slider-indicator {
background-color: #007bff;
border-radius: inherit;
position: absolute;
@@ -53,6 +53,6 @@ media-volume-slider-thumb {
transition: transform 150ms ease;
}
media-volume-slider-root:hover media-volume-slider-thumb {
media-volume-slider:hover media-volume-slider-thumb {
transform: scale(1.2);
}