diff --git a/src/components/PetRegist/Bars.svg b/src/components/PetRegist/Bars.svg new file mode 100644 index 00000000..3578a776 --- /dev/null +++ b/src/components/PetRegist/Bars.svg @@ -0,0 +1,47 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/components/PetRegist/Ellipse-responsive.svg b/src/components/PetRegist/Ellipse-responsive.svg new file mode 100644 index 00000000..8fb04684 --- /dev/null +++ b/src/components/PetRegist/Ellipse-responsive.svg @@ -0,0 +1,21 @@ + + + + + + + + + + + + + + + + + + + + + diff --git a/src/components/PetRegist/Ellipse.svg b/src/components/PetRegist/Ellipse.svg new file mode 100644 index 00000000..9c35c687 --- /dev/null +++ b/src/components/PetRegist/Ellipse.svg @@ -0,0 +1,21 @@ + + + + + + + + + + + + + + + + + + + + + diff --git a/src/components/PetRegist/Ellipse.svg:Zone.Identifier b/src/components/PetRegist/Ellipse.svg:Zone.Identifier new file mode 100644 index 00000000..bbbaf191 --- /dev/null +++ b/src/components/PetRegist/Ellipse.svg:Zone.Identifier @@ -0,0 +1,3 @@ +[ZoneTransfer] +ZoneId=3 +HostUrl=https://www.figma.com/ diff --git a/src/components/PetRegist/index.css b/src/components/PetRegist/index.css new file mode 100644 index 00000000..d9103ed2 --- /dev/null +++ b/src/components/PetRegist/index.css @@ -0,0 +1,98 @@ +* { + box-sizing: border-box; + width: 100%; +} + +html { + font-size: 10px; +} + +.organize { + width: 100%; + height: auto; + display: flex; + flex-direction: column; + align-items: center; +} + +#bonhoeffer { + display: flex; + flex-direction: column; +} + +.question { + font-family: Montserrat; + font-size: 1.8rem; + font-weight: 500; + line-height: 26px; + letter-spacing: 0px; + text-align: center; + color: #39434F; +} + +#adjuste { + font-family: Montserrat; + font-size: 1.4rem; + font-weight: 400; + line-height: 0; + letter-spacing: 0px; + text-align: center; + color: #606873; +} + +#weight { + font-family: Montserrat; + font-size: 8rem; + font-weight: 700; + line-height: 50px; + letter-spacing: 0px; + text-align: center; + color: #1B85F3; + margin-bottom: 120px; +} + +#rangeSlider { + margin-top: 0; + width: 600px; + -webkit-appearance: none; +} +#rangeSlider:focus { + outline: none; +} +#rangeSlider::-webkit-slider-runnable-track { + width: 10000px; + height: 1px; + cursor: pointer; + box-shadow: none; + background: #606873; + border-radius: 0px; + border: 0px solid #010101; +} +#rangeSlider::-webkit-slider-thumb { + box-shadow: none; + border: 2px solid #1268CC; + height: 42px; + width: 75px; + border-radius: 15px; + background: #1B85F3; + cursor: pointer; + -webkit-appearance: none; + margin-top: -20px; +} + +#Slider-SVG { + position: relative; + display: flex; + flex-direction: column; + width: 100%; + align-items: center; +} + +#bars-svg { + width: 100%; + display: flex; + background-repeat: repeat-x; + position: absolute; + top: -80px; + z-index: -1; +}/*# sourceMappingURL=index.css.map */ \ No newline at end of file diff --git a/src/components/PetRegist/index.css.map b/src/components/PetRegist/index.css.map new file mode 100644 index 00000000..cb83a70e --- /dev/null +++ b/src/components/PetRegist/index.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["index.scss","index.css"],"names":[],"mappings":"AAMA;EACE,sBAAA;EACA,WAAA;ACLF;;ADQA;EACE,eAAA;ACLF;;ADQA;EACE,WAAA;EACA,YAAA;EACA,aAAA;EACA,sBAAA;EACA,mBAAA;ACLF;;ADQA;EACE,aAAA;EACA,sBAAA;ACLF;;ADQA;EACE,uBAAA;EACA,iBAAA;EACA,gBAAA;EACA,iBAAA;EACA,mBAAA;EACA,kBAAA;EACA,cAlCQ;AC6BV;;ADQA;EACE,uBAAA;EACA,iBAAA;EACA,gBAAA;EACA,cAAA;EACA,mBAAA;EACA,kBAAA;EACA,cA3CO;ACsCT;;ADOA;EACE,uBAAA;EACA,eAAA;EACA,gBAAA;EACA,iBAAA;EACA,mBAAA;EACA,kBAAA;EACA,cAtDY;EAuDZ,oBAAA;ACJF;;ADMA;EACE,aAAA;EACA,YAAA;EACA,wBAAA;ACHF;ADIE;EACE,aAAA;ACFJ;ADIE;EACE,cAAA;EACA,WAAA;EACA,eAAA;EACA,gBAAA;EACA,mBAnEK;EAoEL,kBAAA;EACA,yBAAA;ACFJ;ADIE;EACE,gBAAA;EACA,yBAAA;EACA,YAAA;EACA,WAAA;EACA,mBAAA;EACA,mBA3EE;EA4EF,eAAA;EACA,wBAAA;EACA,iBAAA;ACFJ;;ADKA;EACE,kBAAA;EACA,aAAA;EACA,sBAAA;EACA,WAAA;EACA,mBAAA;ACFF;;ADIA;EACE,WAAA;EACA,aAAA;EACA,2BAAA;EACA,kBAAA;EACA,UAAA;EACA,WAAA;ACDF","file":"index.css"} \ No newline at end of file diff --git a/src/components/PetRegist/index.js b/src/components/PetRegist/index.js new file mode 100644 index 00000000..48ba4db9 --- /dev/null +++ b/src/components/PetRegist/index.js @@ -0,0 +1,48 @@ +/* eslint-disable prettier/prettier */ +import { Component } from 'pet-dex-utilities'; +import './index.scss'; +import Bars from './Bars.svg'; + +const html = ` +
+
+

0

+
+
+ + rangeSlider +
+
+`; + +const events = ['weight']; + +export default function Slider() { + Component.call(this, { html, events }); + this.enable = true; + + this.selected.get('rangeSlider').addEventListener( + 'input', + (event) => { + if (!this.enable) return; + + this.weight(); + this.setValue(event.target.value); + }, + false, + ); +} +Slider.prototype = Object.assign(Slider.prototype, Component.prototype, { + setTitle() { + this.selected.get('weight').textContent = Text; + }, + setValue() { + this.selected.get('weight').textContent = this.selected.get('rangeSlider').value; + }, + weight() { + this.emit('weight'); + }, + disable() { + this.enable = false; + }, +}); diff --git a/src/components/PetRegist/index.scss b/src/components/PetRegist/index.scss new file mode 100644 index 00000000..36435dd6 --- /dev/null +++ b/src/components/PetRegist/index.scss @@ -0,0 +1,174 @@ +.slider { + width: 100%; + height: 50vh; + + display: flex; + flex-direction: column; + + align-items: center; + justify-content: center; + + font-size: 10px; + + box-sizing: border-box; +} + +.slider__text-slider{ + width: 50vw; + height: 30vh; + + display: flex; + flex-direction: column; + + justify-content: center; + + text-align: center; + + margin: 5px; +} + +.slider__weight{ + font-family: Montserrat; + color: #1B85F3; + font-size: 8rem; + font-weight: 700; + line-height: 80px; +} + +.slider__container{ + width: 100%; + + display: flex; + flex-direction: column; + + align-items: center; + + position: relative; +} + +.slider__bars-svg{ + width: 90vw; + + display: flex; + + align-items:center; + + padding-right: 85px; + + position:absolute; + top: -75px; + z-index: -1; +} + +.slider__input{ + width: 600px; + + margin-top: -45px; + + position: relative; + appearance: none; + + &:focus { + outline: none; + } + + &::-webkit-slider-runnable-track { + width: 100%; + height: 0; + + border: 0 solid #010101; + + background: #606873; + box-shadow: none; + border-radius: 0; + + cursor: pointer; + } + + &::-webkit-slider-thumb { + width: 100px; + height: 100px; + + background: url('./Ellipse.svg') no-repeat; + appearance: none; + } +} + +@media only screen and (max-width: 600px){ + *{ + overscroll-behavior-x: none; + } + + .slider { + width: 100vw; + height: 70vh; + overflow: hidden; + + display: flex; + flex-direction: column; + + align-items: center; + justify-content: center; + } + + .slider__weight{ + overflow-y: hidden; + + font-family: 'Montserrat'; + font-size: 8rem; + font-weight: 700; + line-height: 10rem; + } + + .slider__container{ + width: 100vw; + + display: flex; + flex-direction: column; + + align-items: center; + + position: relative; + } + + .slider__bars-svg{ + width: 200vw; + + position:absolute; + top: 5px; + z-index: -1; + } + + .slider__input{ + width: 80vw; + + margin-top: 15px; + + position: relative; + appearance: none; + + &:focus { + outline: none; + } + + &::-webkit-slider-runnable-track { + width: 100%; + height: 0; + + border: 0 solid #010101; + + box-shadow: none; + border-radius: 0; + + cursor: pointer; + } + + &::-webkit-slider-thumb { + width: 100px; + height: 50px; + + background: url('./Ellipse-responsive.svg') no-repeat; + appearance: none; + } + } +} \ No newline at end of file