Skip to content

Commit

Permalink
feat(scroll.ts): add custom scroll bar generator
Browse files Browse the repository at this point in the history
fix #553
  • Loading branch information
Dun-sin committed Jun 2, 2024
1 parent 52e201a commit eda3e20
Show file tree
Hide file tree
Showing 7 changed files with 2,174 additions and 772 deletions.
109 changes: 109 additions & 0 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -313,6 +313,7 @@ <h1 id="head">Code Magic</h1>
</li>
</ul>
</li>

<li id="random" class="dropdown">
<div>
<div>
Expand Down Expand Up @@ -346,8 +347,22 @@ <h1 id="head">Code Magic</h1>
Convert Your Image to Character Art
</span>
</li>
<li data-gen="scroll">
<iconify-icon
inline
icon="ph:mouse-scroll"
style="color: white"
width="20"
height="20"
></iconify-icon>
<span>Custom ScrollBar</span>
<span class="tooltip"
>Change the color and style of the scrollbar</span
>
</li>
</ul>
</li>

<li id="layout-generator" class="dropdown">
<div>
<div>
Expand Down Expand Up @@ -1303,6 +1318,100 @@ <h1>Input Range</h1>
</div>
</div>
<!-- End of Input Type Range Generator -->

<!-- Custom Scroll Generator -->
<div data-content="scroll">
<div class="input">
<label for="color" class="color">
Track Color
<input
type="text"
data-coloris
placeholder="Tap to pick a color"
id="scroll-color1"
class="scroll-inputs"
/>
</label>

<label for="color" class="color">
Thumb Color
<input
type="text"
data-coloris
placeholder="Tap to pick a color"
id="scroll-color2"
class="scroll-inputs"
/>
</label>

<label for="color" class="color">
Thumb Color on Hover
<input
type="text"
data-coloris
placeholder="Tap to pick a color"
id="scroll-color3"
class="scroll-inputs"
/>
</label>

<label for="width">
Width
<input
type="number"
id="scroll-width"
name="desired-radius"
min="0"
max="10"
placeholder="Enter a number e.g. 50"
class="styled-input scroll-inputs"
autofocus
required
/>
</label>
</div>

<!-- Copy Code Button -->
<div class="btn-container">
<div class="reset" data-reset="scroll">Reset</div>
<div class="btn-dropdown-container">
<button class="btn" data-css-tailwind="scroll-code">
Copy Code
<iconify-icon
inline
icon="material-symbols:arrow-drop-down-rounded"
style="color: white"
width="20"
></iconify-icon>
</button>
<div class="css-tailwind" data-dropdown="scroll-dropdown2">
<!-- dropdown elements go here -->

<div class="dropdown-item" data-download="scroll-code">
<iconify-icon
inline
icon="skill-icons:css"
style="color: white; margin-right: 5px"
width="20"
></iconify-icon>
<span> Get CSS Code </span>
</div>
<!-- <div
class="dropdown-item"
data-download="scroll-tailwind"
>
<iconify-icon
inline
icon="devicon:tailwindcss"
style="color: white; margin-right: 5px"
width="20"
></iconify-icon>
<span> Get Tailwind </span>
</div> -->
</div>
</div>
</div>
</div>
</div>
<!-- End of Input for Generators -->

Expand Down
Loading

0 comments on commit eda3e20

Please sign in to comment.