latest
This commit is contained in:
AlexanderRebai
parent
de2e39c4eb
commit
98d061b24a
4 changed files with 40 additions and 29 deletions
1
assets/svg/elevator_wheelchair.svg
Normal file
1
assets/svg/elevator_wheelchair.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 228.57 239.29"><defs><style>.cls-1{fill:#1d1d1b;}</style></defs><path class="cls-1" d="M208.18,119.08V11.93c0-5.24,0-5.24,5.15-5.24,2.43,0,4.87,0,7.31,0,2.05,0,3.12.76,3,2.92-.07,1.13,0,2.27,0,3.4q0,106.5,0,213c0,.69-.06,1.39,0,2.09.13,1.9-.73,2.68-2.62,2.64-3.39-.05-6.79,0-10.19,0-1.84,0-2.73-.76-2.66-2.67s0-4,0-6Z"/><path class="cls-1" d="M20,119.06V226.75c0,3.9,0,3.92-3.91,4-3,0-5.93-.05-8.89,0-1.76,0-2.58-.7-2.55-2.47s0-3.31,0-5q0-106.12,0-212.25c0-4.17.22-4.39,4.45-4.36,2.52,0,5.05.08,7.58,0,2.26-.09,3.47.67,3.32,3.13-.1,1.47,0,3,0,4.44q0,52.41,0,104.82Z"/><path class="cls-1" d="M135.46,156.52a4.35,4.35,0,0,0-4.86-3.21,12.64,12.64,0,0,0-2.44.73c-2.07.72-4.13,1.47-6.22,2.21l-.26-.54q-1.94-4.52-3.88-9c-1.77-4.11-3.53-8.22-5.32-12.31a4.21,4.21,0,0,0-4.06-2.71c-4.84-.06-9.68-.07-14.52-.11L81,131.46c-.18,0-.5-.09-.52-.19-.16-.78-.27-1.58-.4-2.42H99.2c.35,0,.69,0,1,0a4.41,4.41,0,0,0,3.41-6.75,4.58,4.58,0,0,0-4.22-2.1q-10,0-20,0h-.72c-.52-3.24-1-6.39-1.54-9.56h-9c.55,3.45,1.11,6.9,1.66,10.35.83,5.11,1.71,10.2,2.47,15.32a4.76,4.76,0,0,0,4.92,4.29c9.22,0,18.45.11,27.68.15a.86.86,0,0,1,.91.61q4.72,11.05,9.48,22.08a4.49,4.49,0,0,0,6.12,2.69c3.69-1.31,7.39-2.61,11.07-3.95a6.74,6.74,0,0,0,1.67-1,4.71,4.71,0,0,0,1.49-2.56v-1.48C135.55,156.8,135.5,156.66,135.46,156.52Z"/><path class="cls-1" d="M53.61,145.09c.2-1.23.33-2.47.59-3.69a26.58,26.58,0,0,1,6.42-12.56,4.42,4.42,0,0,1,6.63,5.85,18.7,18.7,0,0,0-4.46,8.95,18.32,18.32,0,0,0,34.75,10.84,4.62,4.62,0,0,1,3.67-3,4.41,4.41,0,0,1,4.76,5.84,23.53,23.53,0,0,1-3.45,6.12,26.77,26.77,0,0,1-14.83,10c-1.46.38-3,.53-4.47.79l-.56.11H78.9c-.14,0-.29-.08-.43-.1a34.79,34.79,0,0,1-3.7-.6c-11-2.89-17.86-9.91-20.58-20.95-.29-1.19-.39-2.43-.58-3.64Z"/><ellipse class="cls-1" cx="72.62" cy="109.74" rx="4.51" ry="3.94"/><circle class="cls-1" cx="71.76" cy="95.49" r="8.93"/><path class="cls-1" d="M157.33,131.79H154v1.75q0,18,0,36c0,2.4-1,3.89-2.94,4.52a4.17,4.17,0,0,1-5.43-3.17,10.86,10.86,0,0,1-.13-2q0-31,0-61.93v-2.49h-2c0,.48-.07,1-.07,1.47,0,7.32,0,14.65,0,22,0,2.28-1.42,3.66-3.4,3.39a3,3,0,0,1-2.63-3.33c0-5.24,0-10.47,0-15.7,0-4.38,0-8.75,0-13.13,0-5.09,2.76-7.89,7.83-7.92q10.48-.06,21,0c4.89,0,7.67,2.88,7.67,7.77q0,14.49,0,29c0,2.3-1.56,3.7-3.6,3.31-1.57-.3-2.41-1.44-2.41-3.35q0-10.84,0-21.69v-1.76h-2v1.76q0,31.32,0,62.64a10.81,10.81,0,0,1-.17,2.13,4.23,4.23,0,0,1-4.41,3.27,4.18,4.18,0,0,1-3.9-4c0-2.95,0-5.9,0-8.84V131.79Z"/><path class="cls-1" d="M155.74,89.56a9,9,0,0,1-9.1-9,9,9,0,0,1,18,0A9,9,0,0,1,155.74,89.56Z"/><path class="cls-1" d="M191.93,36.94h-71V24.12h10l-17-17-17,17h10V36.94h-71a5.83,5.83,0,0,0-5.83,5.83V197.05a5.83,5.83,0,0,0,5.83,5.83h71V215.7h-10l17,17,17-17h-10V202.88h71a5.83,5.83,0,0,0,5.83-5.83V42.77A5.83,5.83,0,0,0,191.93,36.94Zm-7.5,147a5.83,5.83,0,0,1-5.83,5.84H49.22a5.83,5.83,0,0,1-5.83-5.84V56a5.83,5.83,0,0,1,5.83-5.83H178.6A5.83,5.83,0,0,1,184.43,56Z"/></svg>
|
||||
|
After Width: | Height: | Size: 2.9 KiB |
|
|
@ -397,6 +397,16 @@
|
|||
"https://commons.wikimedia.org/wiki/File:HZM_elevator_icon.svg"
|
||||
]
|
||||
},
|
||||
{
|
||||
"path": "elevator_wheelchair.svg",
|
||||
"license": "CC-BY-SA",
|
||||
"authors": [
|
||||
"Robin Julien"
|
||||
],
|
||||
"sources": [
|
||||
"https://www.ctsteward.com/"
|
||||
]
|
||||
},
|
||||
{
|
||||
"path": "envelope.svg",
|
||||
"license": "CC0; trivial",
|
||||
|
|
|
|||
50
index.css
50
index.css
|
|
@ -233,36 +233,36 @@ input[type="range"].vertical {
|
|||
writing-mode: bt-lr; /* IE */
|
||||
-webkit-appearance: slider-vertical; /* Chromium */
|
||||
width: 8px;
|
||||
height: 310px;
|
||||
height: 180px;
|
||||
padding: 0 5px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.elevatorslider::-webkit-slider-thumb {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
border: 0;
|
||||
background-color: #00000000 !important;
|
||||
background-image: url("/assets/svg/elevator.svg");
|
||||
background-size: contain;
|
||||
background-position: center center;
|
||||
background-repeat: no-repeat;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
@-moz-document url-prefix() {
|
||||
input[type="range"].vertical {
|
||||
height: 280px !important;
|
||||
width: 65px !important;
|
||||
padding-top: 25px;
|
||||
}
|
||||
.valuesContainer {
|
||||
padding-top: 30px;
|
||||
}
|
||||
input[type="range"].vertical::-moz-range-thumb {
|
||||
width: 60px;
|
||||
height: 50px;
|
||||
border: 2px;
|
||||
border-style: solid;
|
||||
border-width: 50px;
|
||||
background-color: #00000000 !important;
|
||||
background-image: url("/assets/svg/elevator_wheelchair.svg");
|
||||
background-size: contain;
|
||||
background-position: center center;
|
||||
background-repeat: no-repeat;
|
||||
cursor: pointer;
|
||||
border-image: linear-gradient(to right, red 50%, transparent 50%) 100% 1;
|
||||
}
|
||||
}
|
||||
|
||||
.elevatorslider::-moz-range-thumb {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
border: 0;
|
||||
background-color: #00000000 !important;
|
||||
background-image: url("/assets/svg/elevator.svg");
|
||||
background-size: contain;
|
||||
background-position: center center;
|
||||
background-repeat: no-repeat;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.border-detail {
|
||||
border-color: var(--foreground-color);
|
||||
}
|
||||
|
|
|
|||
8
test.ts
8
test.ts
|
|
@ -10,7 +10,9 @@ import Toggle, { ClickableToggle } from "./UI/Input/Toggle";
|
|||
const testData = ["-1", "0", "0.5", "1", "1.5", "2"]
|
||||
let slider = new Slider(0, testData.length - 1, {vertical: true});
|
||||
|
||||
const toggleClass = "flex border-2 border-blue-500 rounded-full w-10 h-10 place-content-center items-center"
|
||||
slider.SetClass("flex m-1 elevatorslider mb-0 mt-8").SetStyle("height: "+2.5*testData.length+"rem ")
|
||||
|
||||
const toggleClass = "flex border-2 border-blue-500 w-10 h-10 place-content-center items-center"
|
||||
|
||||
const values = testData.map((data, i) => new ClickableToggle(
|
||||
new FixedUiElement(data).SetClass("active bg-subtle " + toggleClass), new FixedUiElement(data).SetClass(toggleClass), slider.GetValue().sync(
|
||||
|
|
@ -23,10 +25,8 @@ const values = testData.map((data, i) => new ClickableToggle(
|
|||
}
|
||||
))
|
||||
.ToggleOnClick()
|
||||
.SetClass("flex flex-column bg-slate-200 m-2 w-10 h-10"))
|
||||
.SetClass("flex flex-column ml-5 bg-slate-200 w-10 h-10 valuesContainer"))
|
||||
|
||||
const valCombine = new Combine(values.reverse())
|
||||
|
||||
slider.SetClass("flex m-4 elevatorslider mb-0").SetStyle("height: "+3.25*testData.length+"rem")
|
||||
|
||||
new Combine([valCombine.SetClass("mt-8"), slider]).SetClass("flex flex-row h-14").AttachTo("extradiv")
|
||||
|
|
|
|||
Loading…
Reference in a new issue