From 6f71f2449d8b5c372b8ecf8fd19a2e7e7e4af776 Mon Sep 17 00:00:00 2001 From: devloop01 Date: Wed, 1 Jan 2020 03:50:42 +0530 Subject: [PATCH] Css Files --- css/style.css | 334 ++++++++++++++++++++++++++++++++++++++++++++++ css/style.css.map | 9 ++ css/style.scss | 279 ++++++++++++++++++++++++++++++++++++++ 3 files changed, 622 insertions(+) create mode 100644 css/style.css create mode 100644 css/style.css.map create mode 100644 css/style.scss diff --git a/css/style.css b/css/style.css new file mode 100644 index 0000000..18c0778 --- /dev/null +++ b/css/style.css @@ -0,0 +1,334 @@ +* { + margin: 0; + padding: 0; + -webkit-box-sizing: border-box; + box-sizing: border-box; +} + +body { + width: 100%; + height: 100%; + background-image: -webkit-gradient(linear, left bottom, left top, color-stop(100%, #209cff), color-stop(200%, #68e0cf)); + background-image: linear-gradient(to top, #209cff 100%, #68e0cf 200%); + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} + +button { + border: 0; + outline: 0; +} + +.container { + margin: 40px 0; + width: 400px; + height: 600px; + padding: 10px 25px; + background: #0a0e31; + border-radius: 10px; + -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.45), 0 4px 8px rgba(0, 0, 0, 0.35), 0 8px 12px rgba(0, 0, 0, 0.15); + box-shadow: 0 0 5px rgba(0, 0, 0, 0.45), 0 4px 8px rgba(0, 0, 0, 0.35), 0 8px 12px rgba(0, 0, 0, 0.15); + font-family: "Montserrat"; +} + +.container h2.title { + font-size: 1.75rem; + margin: 10px -5px; + margin-bottom: 30px; + color: #fff; +} + +.result { + position: relative; + width: 100%; + height: 65px; + overflow: hidden; +} + +.result__info { + position: absolute; + bottom: 4px; + color: #fff; + font-size: 0.8rem; + -webkit-transition: all 150ms ease-in-out; + transition: all 150ms ease-in-out; + -webkit-transform: translateY(200%); + transform: translateY(200%); + opacity: 0; +} + +.result__info.right { + right: 8px; +} + +.result__info.left { + left: 8px; +} + +.result__viewbox { + width: 100%; + height: 100%; + background: rgba(255, 255, 255, 0.08); + border-radius: 8px; + color: #fff; + text-align: center; + line-height: 65px; +} + +.result #copy-btn { + position: absolute; + top: var(--y); + left: var(--x); + width: 38px; + height: 38px; + background: #fff; + border-radius: 50%; + opacity: 0; + -webkit-transform: translate(-50%, -50%) scale(0); + transform: translate(-50%, -50%) scale(0); + -webkit-transition: all 350ms cubic-bezier(0.175, 0.885, 0.32, 1.275); + transition: all 350ms cubic-bezier(0.175, 0.885, 0.32, 1.275); + cursor: pointer; + z-index: 2; +} + +.result #copy-btn:active { + -webkit-box-shadow: 0 0 0 200px rgba(255, 255, 255, 0.08); + box-shadow: 0 0 0 200px rgba(255, 255, 255, 0.08); +} + +.result:hover #copy-btn { + opacity: 1; + -webkit-transform: translate(-50%, -50%) scale(1.35); + transform: translate(-50%, -50%) scale(1.35); +} + +.field-title { + position: absolute; + top: -10px; + left: 8px; + -webkit-transform: translateY(-50%); + transform: translateY(-50%); + font-weight: 800; + color: rgba(255, 255, 255, 0.5); + text-transform: uppercase; + font-size: 0.65rem; + pointer-events: none; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} + +.options { + width: 100%; + height: auto; + margin: 50px 0; +} + +.range__slider { + position: relative; + width: 100%; + height: calc(65px - 10px); + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + background: rgba(255, 255, 255, 0.08); + border-radius: 8px; + margin: 30px 0; +} + +.range__slider::before, .range__slider::after { + position: absolute; + color: #fff; + font-size: 0.9rem; + font-weight: bold; +} + +.range__slider::before { + content: attr(data-min); + left: 10px; +} + +.range__slider::after { + content: attr(data-max); + right: 10px; +} + +.range__slider .length__title::after { + content: attr(data-length); + position: absolute; + right: -16px; + font-variant-numeric: tabular-nums; + color: #fff; +} + +#slider { + -webkit-appearance: none; + width: calc(100% - (70px)); + height: 2px; + border-radius: 5px; + background: rgba(255, 255, 255, 0.314); + outline: none; + padding: 0; + margin: 0; + cursor: pointer; +} + +#slider::-webkit-slider-thumb { + -webkit-appearance: none; + width: 20px; + height: 20px; + border-radius: 50%; + background: white; + cursor: pointer; + -webkit-transition: all 0.15s ease-in-out; + transition: all 0.15s ease-in-out; +} + +#slider::-webkit-slider-thumb:hover { + background: #d4d4d4; + -webkit-transform: scale(1.2); + transform: scale(1.2); +} + +#slider::-moz-range-thumb { + width: 20px; + height: 20px; + border: 0; + border-radius: 50%; + background: white; + cursor: pointer; + -webkit-transition: background 0.15s ease-in-out; + transition: background 0.15s ease-in-out; +} + +#slider::-moz-range-thumb:hover { + background: #d4d4d4; +} + +.settings { + position: relative; + height: auto; + widows: 100%; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; +} + +.settings .setting { + position: relative; + width: 100%; + height: calc(65px - 10px); + background: rgba(255, 255, 255, 0.08); + border-radius: 8px; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + padding: 10px 25px; + color: #fff; + margin-bottom: 8px; +} + +.settings .setting input { + opacity: 0; + position: absolute; +} + +.settings .setting input + label { + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} + +.settings .setting input + label::before, .settings .setting input + label::after { + content: ""; + position: absolute; + -webkit-transition: 150ms cubic-bezier(0.24, 0, 0.5, 1); + transition: 150ms cubic-bezier(0.24, 0, 0.5, 1); + -webkit-transform: translateY(-50%); + transform: translateY(-50%); + top: 50%; + right: 10px; + cursor: pointer; +} + +.settings .setting input + label::before { + height: 30px; + width: 50px; + border-radius: 30px; + background: rgba(214, 214, 214, 0.434); +} + +.settings .setting input + label::after { + height: 24px; + width: 24px; + border-radius: 60px; + right: 32px; + background: #fff; +} + +.settings .setting input:checked + label:before { + background: #5d68e2; + -webkit-transition: all 150ms cubic-bezier(0, 0, 0, 0.1); + transition: all 150ms cubic-bezier(0, 0, 0, 0.1); +} + +.settings .setting input:checked + label:after { + right: 14px; +} + +.settings .setting input:focus + label:before { + -webkit-box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.75); + box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.75); +} + +.btn.generate { + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + position: relative; + width: 100%; + height: 50px; + margin: 10px 0; + border-radius: 8px; + color: #fff; + border: none; + background-image: linear-gradient(135deg, #667eea 0%, #764ba2 100%); + letter-spacing: 1px; + font-weight: bold; + text-transform: uppercase; + cursor: pointer; + -webkit-transition: all 150ms ease; + transition: all 150ms ease; +} + +.btn.generate:active { + -webkit-transform: translateY(-3%); + transform: translateY(-3%); + -webkit-box-shadow: 0 4px 8px rgba(255, 255, 255, 0.08); + box-shadow: 0 4px 8px rgba(255, 255, 255, 0.08); +} +/*# sourceMappingURL=style.css.map */ \ No newline at end of file diff --git a/css/style.css.map b/css/style.css.map new file mode 100644 index 0000000..5fd1f78 --- /dev/null +++ b/css/style.css.map @@ -0,0 +1,9 @@ +{ + "version": 3, + "mappings": "AAAA,AAAA,CAAC,CAAC;EACD,MAAM,EAAE,CAAC;EACT,OAAO,EAAE,CAAC;EACV,UAAU,EAAE,UAAU;CACtB;;AACD,AAAA,IAAI,CAAC;EACJ,KAAK,EAAE,IAAI;EACX,MAAM,EAAE,IAAI;EACZ,gBAAgB,EAAE,mDAAmD;EACrE,OAAO,EAAE,IAAI;EACb,eAAe,EAAE,MAAM;EACvB,WAAW,EAAE,MAAM;CACnB;;AACD,AAAA,MAAM,CAAC;EACN,MAAM,EAAE,CAAC;EACT,OAAO,EAAE,CAAC;CACV;;AAED,AAAA,UAAU,CAAC;EACV,MAAM,EAAE,MAAM;EACd,KAAK,EAAE,KAAK;EACZ,MAAM,EAAE,KAAK;EACb,OAAO,EAAE,SAAS;EAClB,UAAU,EAAE,OAAO;EACnB,aAAa,EAAE,IAAI;EACnB,UAAU,EAAE,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,mBAAmB,EAAE,CAAC,CAAC,GAAG,CAAC,GAAG,CAAC,mBAAmB,EACrE,CAAC,CAAC,GAAG,CAAC,IAAI,CAAC,mBAAmB;EAC/B,WAAW,EAAE,YAAY;CAOzB;;AAhBD,AAUC,UAVS,CAUT,EAAE,AAAA,MAAM,CAAC;EACR,SAAS,EAAE,OAAO;EAClB,MAAM,EAAE,SAAS;EACjB,aAAa,EAAE,IAAI;EACnB,KAAK,EAAE,IAAI;CACX;;AAOF,AAAA,OAAO,CAAC;EACP,QAAQ,EAAE,QAAQ;EAClB,KAAK,EAAE,IAAI;EACX,MAAM,EAAE,IAAI;EACZ,QAAQ,EAAE,MAAM;CAgDhB;;AA/CC,AAAD,aAAO,CAAC;EAOP,QAAQ,EAAE,QAAQ;EAClB,MAAM,EAAE,GAAG;EACX,KAAK,EAAE,IAAI;EACX,SAAS,EAAE,MAAM;EACjB,UAAU,EAAE,qBAAqB;EACjC,SAAS,EAAE,gBAAgB;EAC3B,OAAO,EAAE,CAAC;CACV;;AAdA,AACA,aADM,AACL,MAAM,CAAC;EACP,KAAK,EAAE,GAAG;CACV;;AAHD,AAIA,aAJM,AAIL,KAAK,CAAC;EACN,IAAI,EAAE,GAAG;CACT;;AASD,AAAD,gBAAU,CAAC;EACV,KAAK,EAAE,IAAI;EACX,MAAM,EAAE,IAAI;EACZ,UAAU,EA3BE,yBAAyB;EA4BrC,aAAa,EA1BO,GAAG;EA2BvB,KAAK,EAAE,IAAI;EACX,UAAU,EAAE,MAAM;EAClB,WAAW,EAAE,IAAI;CACjB;;AA5BF,AA6BC,OA7BM,CA6BN,SAAS,CAAC;EACT,QAAQ,EAAE,QAAQ;EAClB,GAAG,EAAE,QAAQ;EACb,IAAI,EAAE,QAAQ;EACd,KAAK,EAAE,IAAI;EACX,MAAM,EAAE,IAAI;EACZ,UAAU,EAAE,IAAI;EAChB,aAAa,EAAE,GAAG;EAClB,OAAO,EAAE,CAAC;EACV,SAAS,EAAE,qBAAqB,CAAC,QAAQ;EACzC,UAAU,EAAE,GAAG,CAAC,KAAK,CAAC,uCAAuC;EAC7D,MAAM,EAAE,OAAO;EACf,OAAO,EAAE,CAAC;CAIV;;AA7CF,AA0CE,OA1CK,CA6BN,SAAS,AAaP,OAAO,CAAC;EACR,UAAU,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,yBAAyB;CACjD;;AA5CH,AA+CE,OA/CK,AA8CL,MAAM,CACN,SAAS,CAAC;EACT,OAAO,EAAE,CAAC;EACV,SAAS,EAAE,qBAAqB,CAAC,WAAW;CAC5C;;AAGH,AAAA,YAAY,CAAC;EACZ,QAAQ,EAAE,QAAQ;EAClB,GAAG,EAAE,KAAK;EACV,IAAI,EAAE,GAAG;EACT,SAAS,EAAE,gBAAgB;EAC3B,WAAW,EAAE,GAAG;EAChB,KAAK,EAAE,wBAAwB;EAC/B,cAAc,EAAE,SAAS;EACzB,SAAS,EAAE,OAAO;EAClB,cAAc,EAAE,IAAI;EACpB,WAAW,EAAE,IAAI;CACjB;;AAED,AAAA,QAAQ,CAAC;EACR,KAAK,EAAE,IAAI;EACX,MAAM,EAAE,IAAI;EACZ,MAAM,EAAE,MAAM;CACd;;AACD,AAAA,cAAc,CAAC;EACd,QAAQ,EAAE,QAAQ;EAClB,KAAK,EAAE,IAAI;EACX,MAAM,EAAE,iBAA6B;EACrC,OAAO,EAAE,IAAI;EACb,eAAe,EAAE,MAAM;EACvB,WAAW,EAAE,MAAM;EACnB,UAAU,EAlFG,yBAAyB;EAmFtC,aAAa,EAjFQ,GAAG;EAkFxB,MAAM,EAAE,MAAM;CAwBd;;AAjCD,AAWC,cAXa,AAWZ,QAAQ,EAXV,cAAc,AAYZ,OAAO,CAAC;EACR,QAAQ,EAAE,QAAQ;EAClB,KAAK,EAAE,IAAI;EACX,SAAS,EAAE,MAAM;EACjB,WAAW,EAAE,IAAI;CACjB;;AAjBF,AAkBC,cAlBa,AAkBZ,QAAQ,CAAC;EACT,OAAO,EAAE,cAAc;EACvB,IAAI,EAAE,IAAI;CACV;;AArBF,AAsBC,cAtBa,AAsBZ,OAAO,CAAC;EACR,OAAO,EAAE,cAAc;EACvB,KAAK,EAAE,IAAI;CACX;;AAzBF,AA0BC,cA1Ba,CA0Bb,cAAc,AAAA,OAAO,CAAC;EACrB,OAAO,EAAE,iBAAiB;EAC1B,QAAQ,EAAE,QAAQ;EAClB,KAAK,EAAE,KAAK;EACZ,oBAAoB,EAAE,YAAY;EAClC,KAAK,EAAE,IAAI;CACX;;AAYF,AAAA,OAAO,CAAC;EACP,kBAAkB,EAAE,IAAI;EACxB,KAAK,EAAE,mBAA2C;EAClD,MAAM,EAPc,GAAG;EAQvB,aAAa,EAAE,GAAG;EAClB,UAAU,EAVS,0BAA0B;EAW7C,OAAO,EAAE,IAAI;EACb,OAAO,EAAE,CAAC;EACV,MAAM,EAAE,CAAC;EACT,MAAM,EAAE,OAAO;CA4Bf;;AArCD,AAYC,OAZM,AAYL,sBAAsB,CAAC;EACvB,kBAAkB,EAAE,IAAI;EACxB,KAAK,EArBa,IAAI;EAsBtB,MAAM,EAtBY,IAAI;EAuBtB,aAAa,EAAE,GAAG;EAClB,UAAU,EA1BS,KAAkB;EA2BrC,MAAM,EAAE,OAAO;EACf,UAAU,EAAE,qBAAqB;CAKjC;;AAxBF,AAoBE,OApBK,AAYL,sBAAsB,AAQrB,MAAM,CAAC;EACP,UAAU,EA7Bc,OAAkB;EA8B1C,SAAS,EAAE,UAAU;CACrB;;AAvBH,AAyBC,OAzBM,AAyBL,kBAAkB,CAAC;EACnB,KAAK,EAjCa,IAAI;EAkCtB,MAAM,EAlCY,IAAI;EAmCtB,MAAM,EAAE,CAAC;EACT,aAAa,EAAE,GAAG;EAClB,UAAU,EAvCS,KAAkB;EAwCrC,MAAM,EAAE,OAAO;EACf,UAAU,EAAE,4BAA4B;CAIxC;;AApCF,AAiCE,OAjCK,AAyBL,kBAAkB,AAQjB,MAAM,CAAC;EACP,UAAU,EA1Cc,OAAkB;CA2C1C;;AAIH,AAAA,SAAS,CAAC;EACT,QAAQ,EAAE,QAAQ;EAClB,MAAM,EAAE,IAAI;EACZ,MAAM,EAAE,IAAI;EACZ,OAAO,EAAE,IAAI;EACb,cAAc,EAAE,MAAM;CA0DtB;;AA/DD,AAOC,SAPQ,CAOR,QAAQ,CAAC;EACR,QAAQ,EAAE,QAAQ;EAClB,KAAK,EAAE,IAAI;EACX,MAAM,EAAE,iBAA6B;EACrC,UAAU,EAzKE,yBAAyB;EA0KrC,aAAa,EAxKO,GAAG;EAyKvB,OAAO,EAAE,IAAI;EACb,WAAW,EAAE,MAAM;EACnB,OAAO,EAAE,SAAS;EAClB,KAAK,EAAE,IAAI;EACX,aAAa,EAAE,GAAG;CA6ClB;;AA9DF,AAkBE,SAlBO,CAOR,QAAQ,CAWP,KAAK,CAAC;EACL,OAAO,EAAE,CAAC;EACV,QAAQ,EAAE,QAAQ;CAyClB;;AA7DH,AAqBG,SArBM,CAOR,QAAQ,CAWP,KAAK,GAGF,KAAK,CAAC;EACP,WAAW,EAAE,IAAI;CAwBjB;;AA9CJ,AAuBI,SAvBK,CAOR,QAAQ,CAWP,KAAK,GAGF,KAAK,AAEL,QAAQ,EAvBb,SAAS,CAOR,QAAQ,CAWP,KAAK,GAGF,KAAK,AAGL,OAAO,CAAC;EACR,OAAO,EAAE,EAAE;EACX,QAAQ,EAAE,QAAQ;EAClB,UAAU,EAAE,KAAK,CAAC,6BAA6B;EAC/C,SAAS,EAAE,gBAAgB;EAC3B,GAAG,EAAE,GAAG;EACR,KAAK,EAAE,IAAI;EACX,MAAM,EAAE,OAAO;CACf;;AAhCL,AAiCI,SAjCK,CAOR,QAAQ,CAWP,KAAK,GAGF,KAAK,AAYL,QAAQ,CAAC;EACT,MAAM,EAAE,IAAI;EACZ,KAAK,EAAE,IAAI;EACX,aAAa,EAAE,IAAI;EACnB,UAAU,EAAE,0BAA0B;CACtC;;AAtCL,AAuCI,SAvCK,CAOR,QAAQ,CAWP,KAAK,GAGF,KAAK,AAkBL,OAAO,CAAC;EACR,MAAM,EAAE,IAAI;EACZ,KAAK,EAAE,IAAI;EACX,aAAa,EAAE,IAAI;EACnB,KAAK,EAAE,IAAI;EACX,UAAU,EAAE,IAAI;CAChB;;AA7CL,AAgDI,SAhDK,CAOR,QAAQ,CAWP,KAAK,AA6BH,QAAQ,GACJ,KAAK,AAAA,OAAO,CAAC;EAChB,UAAU,EAAE,OAAO;EACnB,UAAU,EAAE,GAAG,CAAC,KAAK,CAAC,0BAA0B;CAChD;;AAnDL,AAoDI,SApDK,CAOR,QAAQ,CAWP,KAAK,AA6BH,QAAQ,GAKJ,KAAK,AAAA,MAAM,CAAC;EACf,KAAK,EAAE,IAAI;CACX;;AAtDL,AAyDI,SAzDK,CAOR,QAAQ,CAWP,KAAK,AAsCH,MAAM,GACJ,KAAK,AAAA,OAAO,CAAC;EACd,UAAU,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,yBAAyB;CAC/C;;AAML,AAAA,IAAI,AAAA,SAAS,CAAC;EACb,WAAW,EAAE,IAAI;EACjB,QAAQ,EAAE,QAAQ;EAClB,KAAK,EAAE,IAAI;EACX,MAAM,EAAE,IAAI;EACZ,MAAM,EAAE,MAAM;EACd,aAAa,EAnOQ,GAAG;EAoOxB,KAAK,EAAE,IAAI;EACX,MAAM,EAAE,IAAI;EACZ,gBAAgB,EAAE,iDAAiD;EACnE,cAAc,EAAE,GAAG;EACnB,WAAW,EAAE,IAAI;EACjB,cAAc,EAAE,SAAS;EACzB,MAAM,EAAE,OAAO;EACf,UAAU,EAAE,cAAc;CAK1B;;AAnBD,AAeC,IAfG,AAAA,SAAS,AAeX,OAAO,CAAC;EACR,SAAS,EAAE,eAAe;EAC1B,UAAU,EAAE,CAAC,CAAC,GAAG,CAAC,GAAG,CAAC,yBAAyB;CAC/C", + "sources": [ + "style.scss" + ], + "names": [], + "file": "style.css" +} \ No newline at end of file diff --git a/css/style.scss b/css/style.scss new file mode 100644 index 0000000..60063b0 --- /dev/null +++ b/css/style.scss @@ -0,0 +1,279 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} +body { + width: 100%; + height: 100%; + background-image: linear-gradient(to top, #209cff 100%, #68e0cf 200%); + display: flex; + justify-content: center; + align-items: center; +} +button { + border: 0; + outline: 0; +} + +.container { + margin: 40px 0; + width: 400px; + height: 600px; + padding: 10px 25px; + background: #0a0e31; + border-radius: 10px; + box-shadow: 0 0 5px rgba(0, 0, 0, 0.45), 0 4px 8px rgba(0, 0, 0, 0.35), + 0 8px 12px rgba(0, 0, 0, 0.15); + font-family: "Montserrat"; + h2.title { + font-size: 1.75rem; + margin: 10px -5px; + margin-bottom: 30px; + color: #fff; + } +} + +$field-color: rgba(255, 255, 255, 0.08); +$field-height: 65px; +$field-border-radius: 8px; + +.result { + position: relative; + width: 100%; + height: 65px; + overflow: hidden; + &__info { + &.right { + right: 8px; + } + &.left { + left: 8px; + } + position: absolute; + bottom: 4px; + color: #fff; + font-size: 0.8rem; + transition: all 150ms ease-in-out; + transform: translateY(200%); + opacity: 0; + } + &__viewbox { + width: 100%; + height: 100%; + background: $field-color; + border-radius: $field-border-radius; + color: #fff; + text-align: center; + line-height: 65px; + } + #copy-btn { + position: absolute; + top: var(--y); + left: var(--x); + width: 38px; + height: 38px; + background: #fff; + border-radius: 50%; + opacity: 0; + transform: translate(-50%, -50%) scale(0); + transition: all 350ms cubic-bezier(0.175, 0.885, 0.32, 1.275); + cursor: pointer; + z-index: 2; + &:active { + box-shadow: 0 0 0 200px rgba(255, 255, 255, 0.08); + } + } + &:hover { + #copy-btn { + opacity: 1; + transform: translate(-50%, -50%) scale(1.35); + } + } +} +.field-title { + position: absolute; + top: -10px; + left: 8px; + transform: translateY(-50%); + font-weight: 800; + color: rgba(255, 255, 255, 0.5); + text-transform: uppercase; + font-size: 0.65rem; + pointer-events: none; + user-select: none; +} + +.options { + width: 100%; + height: auto; + margin: 50px 0; +} +.range__slider { + position: relative; + width: 100%; + height: calc(#{$field-height} - 10px); + display: flex; + justify-content: center; + align-items: center; + background: $field-color; + border-radius: $field-border-radius; + margin: 30px 0; + + &::before, + &::after { + position: absolute; + color: #fff; + font-size: 0.9rem; + font-weight: bold; + } + &::before { + content: attr(data-min); + left: 10px; + } + &::after { + content: attr(data-max); + right: 10px; + } + .length__title::after { + content: attr(data-length); + position: absolute; + right: -16px; + font-variant-numeric: tabular-nums; + color: #fff; + } +} + +$range-handle-color: rgb(255, 255, 255) !default; +$range-handle-color-hover: rgb(212, 212, 212) !default; +$range-handle-size: 20px !default; + +$range-track-color: rgba(255, 255, 255, 0.314) !default; +$range-track-height: 2px !default; + +$range-label-width: 60px !default; + +#slider { + -webkit-appearance: none; + width: calc(100% - (#{$range-label-width + 10px})); + height: $range-track-height; + border-radius: 5px; + background: $range-track-color; + outline: none; + padding: 0; + margin: 0; + cursor: pointer; + + // Range Handle + &::-webkit-slider-thumb { + -webkit-appearance: none; + width: $range-handle-size; + height: $range-handle-size; + border-radius: 50%; + background: $range-handle-color; + cursor: pointer; + transition: all 0.15s ease-in-out; + &:hover { + background: $range-handle-color-hover; + transform: scale(1.2); + } + } + &::-moz-range-thumb { + width: $range-handle-size; + height: $range-handle-size; + border: 0; + border-radius: 50%; + background: $range-handle-color; + cursor: pointer; + transition: background 0.15s ease-in-out; + &:hover { + background: $range-handle-color-hover; + } + } +} + +.settings { + position: relative; + height: auto; + widows: 100%; + display: flex; + flex-direction: column; + + .setting { + position: relative; + width: 100%; + height: calc(#{$field-height} - 10px); + background: $field-color; + border-radius: $field-border-radius; + display: flex; + align-items: center; + padding: 10px 25px; + color: #fff; + margin-bottom: 8px; + input { + opacity: 0; + position: absolute; + + label { + user-select: none; + &::before, + &::after { + content: ""; + position: absolute; + transition: 150ms cubic-bezier(0.24, 0, 0.5, 1); + transform: translateY(-50%); + top: 50%; + right: 10px; + cursor: pointer; + } + &::before { + height: 30px; + width: 50px; + border-radius: 30px; + background: rgba(214, 214, 214, 0.434); + } + &::after { + height: 24px; + width: 24px; + border-radius: 60px; + right: 32px; + background: #fff; + } + } + &:checked { + & + label:before { + background: #5d68e2; + transition: all 150ms cubic-bezier(0, 0, 0, 0.1); + } + & + label:after { + right: 14px; + } + } + &:focus { + + label:before { + box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.75); + } + } + } + } +} + +.btn.generate { + user-select: none; + position: relative; + width: 100%; + height: 50px; + margin: 10px 0; + border-radius: $field-border-radius; + color: #fff; + border: none; + background-image: linear-gradient(135deg, #667eea 0%, #764ba2 100%); + letter-spacing: 1px; + font-weight: bold; + text-transform: uppercase; + cursor: pointer; + transition: all 150ms ease; + &:active { + transform: translateY(-3%); + box-shadow: 0 4px 8px rgba(255, 255, 255, 0.08); + } +}