Skip to content

Instantly share code, notes, and snippets.

@josedaniel
Created October 23, 2020 23:18
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save josedaniel/880953a82c33d9577648c6b1630a3d65 to your computer and use it in GitHub Desktop.
Save josedaniel/880953a82c33d9577648c6b1630a3d65 to your computer and use it in GitHub Desktop.
[type=range]{-webkit-appearance:none;background:transparent;margin:15px 0;width:100%}[type=range]::-moz-focus-outer{border:0}[type=range]:focus{outline:0}[type=range]:focus::-webkit-slider-runnable-track{background:-webkit-gradient(linear,right top,left top,from(#ef3d3a),to(#40b6fa));background:linear-gradient(270deg,#ef3d3a,#40b6fa)}[type=range]:focus::-ms-fill-lower,[type=range]:focus::-ms-fill-upper{background:linear-gradient(270deg,#ef3d3a,#40b6fa)}[type=range]::-webkit-slider-runnable-track{cursor:default;height:16px;-webkit-transition:all .2s ease;transition:all .2s ease;width:100%;-webkit-box-shadow:0 0 0 rgba(0,0,0,.2),0 0 0 rgba(13,13,13,.2);box-shadow:0 0 0 rgba(0,0,0,.2),0 0 0 rgba(13,13,13,.2);background:-webkit-gradient(linear,right top,left top,from(#ef3d3a),to(#40b6fa));background:linear-gradient(270deg,#ef3d3a,#40b6fa);border:0 solid #cfd8dc;border-radius:10px}[type=range]::-webkit-slider-thumb{-webkit-box-shadow:5px 5px 15px rgba(0,0,0,.2),0 0 5px rgba(13,13,13,.2);box-shadow:5px 5px 15px rgba(0,0,0,.2),0 0 5px rgba(13,13,13,.2);background:#ec455a;border:8px solid #fff;border-radius:50%;-webkit-box-sizing:border-box;box-sizing:border-box;cursor:default;height:30px;width:30px;-webkit-appearance:none;margin-top:-7px}[type=range]::-moz-range-track{box-shadow:0 0 0 rgba(0,0,0,.2),0 0 0 rgba(13,13,13,.2);cursor:default;height:16px;-moz-transition:all .2s ease;transition:all .2s ease;width:100%;background:linear-gradient(270deg,#ef3d3a,#40b6fa);border:0 solid #cfd8dc;border-radius:10px;height:8px}[type=range]::-moz-range-thumb{box-shadow:5px 5px 15px rgba(0,0,0,.2),0 0 5px rgba(13,13,13,.2);background:#ec455a;border:8px solid #fff;border-radius:50%;box-sizing:border-box;cursor:default;height:30px;width:30px}[type=range]::-ms-track{cursor:default;height:16px;-ms-transition:all .2s ease;transition:all .2s ease;width:100%;background:transparent;border-color:transparent;border-width:15px 0;color:transparent}[type=range]::-ms-fill-lower,[type=range]::-ms-fill-upper{box-shadow:0 0 0 rgba(0,0,0,.2),0 0 0 rgba(13,13,13,.2);background:linear-gradient(270deg,#ef3d3a,#40b6fa);border:0 solid #cfd8dc;border-radius:20px}[type=range]::-ms-thumb{box-shadow:5px 5px 15px rgba(0,0,0,.2),0 0 5px rgba(13,13,13,.2);background:#ec455a;border:8px solid #fff;border-radius:50%;box-sizing:border-box;cursor:default;height:30px;width:30px;margin-top:4px}[type=range]:disabled::-moz-range-thumb,[type=range]:disabled::-ms-fill-lower,[type=range]:disabled::-ms-fill-upper,[type=range]:disabled::-ms-thumb,[type=range]:disabled::-webkit-slider-runnable-track,[type=range]:disabled::-webkit-slider-thumb{cursor:not-allowed}.entry-header{display:none}.navbar{background-color:#fff}.potential-widget{background:#fff;background:-webkit-gradient(linear,left top,left bottom,from(#fff),to(rgba(64,182,250,.534)));background:-o-linear-gradient(top,#fff 0,rgba(64,182,250,.534) 100%);background:linear-gradient(180deg,#fff,rgba(64,182,250,.534))}.potential-widget>*{-webkit-box-sizing:border-box;box-sizing:border-box}.potential-widget .potential-container{padding:0 20px 30px;max-width:440px;margin:0 auto}@media screen and (min-width:48em){.potential-widget .potential-container{padding-top:150px;padding-bottom:50px}}@media screen and (min-width:64em){.potential-widget .potential-container{max-width:1247px;padding-top:100px}}@media screen and (min-width:78.8125em){.potential-widget .potential-container{padding-top:0}}.potential-widget .potential-container h2{text-align:center;color:#202b57;font-weight:700;line-height:35px;margin-bottom:20px;margin-top:0}@media screen and (min-width:64em){.potential-widget .potential-container h2{font-size:3.75rem;max-width:600px;line-height:55px;margin:0 auto 20px}}.potential-widget .potential-container p{text-align:center;color:#191935;line-height:25px;margin-bottom:50px}@media screen and (min-width:64em){.potential-widget .potential-container p{font-size:1.375rem}}.potential-widget .potential-container .tool{width:100%}@media screen and (min-width:64em){.potential-widget .potential-container .tool{display:grid;grid-template-columns:7fr 5fr;-webkit-column-gap:40px;-moz-column-gap:40px;column-gap:40px}}@media screen and (min-width:78.8125em){.potential-widget .potential-container .tool{-webkit-column-gap:100px;-moz-column-gap:100px;column-gap:100px}}.potential-widget .potential-container .tool .sliders .this_slider{width:100%;margin-bottom:60px}@media screen and (min-width:78.8125em){.potential-widget .potential-container .tool .sliders .this_slider{margin-bottom:50px}}.potential-widget .potential-container .tool .sliders .this_slider .label{text-transform:uppercase;color:#202b57;display:inline-block;width:100%;text-align:center;font-weight:600;letter-spacing:3px}@media screen and (min-width:64em){.potential-widget .potential-container .tool .sliders .this_slider .label{text-align:left;margin-left:-6px}}.potential-widget .potential-container .tool .sliders .this_slider .slider,.potential-widget .potential-container .tool .sliders .this_slider .slider range-slider{width:100%}.potential-widget .potential-container .tool .bars{display:grid;grid-template-columns:1fr 1fr;-webkit-column-gap:20px;-moz-column-gap:20px;column-gap:20px;margin-bottom:50px}@media screen and (min-width:64em){.potential-widget .potential-container .tool .bars{margin-bottom:-10px;-ms-flex-item-align:end;align-self:end;height:100%}}.potential-widget .potential-container .tool .bars .this_bar{width:100%;position:relative;height:400px;text-align:center}@media screen and (min-width:64em){.potential-widget .potential-container .tool .bars .this_bar{height:100%}}.potential-widget .potential-container .tool .bars .this_bar img{max-width:80%;margin-left:10%}.potential-widget .potential-container .tool .bars .this_bar span{display:inline-block;background-color:#202b57;min-height:15%;width:100%;position:absolute;bottom:0;left:0;-webkit-transition:all 1s;-o-transition:all 1s;transition:all 1s;color:#fff;padding:15px;max-height:90%}.potential-widget .potential-container .tool .bars .this_bar.sow img{position:absolute;left:0;bottom:calc(15% + 20px);-webkit-transition:all 1s;-o-transition:all 1s;transition:all 1s}.potential-widget .potential-container .tool .bars .this_bar.sow span{background-color:#ee615f;font-weight:700}.potential-widget .potential-container .tool .result{position:relative}.potential-widget .potential-container .tool .result.large{display:none}@media screen and (min-width:64em){.potential-widget .potential-container .tool .result.large{display:block}}.potential-widget .potential-container .tool .result.small{display:block}@media screen and (min-width:64em){.potential-widget .potential-container .tool .result.small{display:none}}.potential-widget .potential-container .tool .result .rectangle{border:2px solid #ee615f;position:absolute;left:-10px;top:10px;width:100%;height:100%;background-color:#fff}.potential-widget .potential-container .tool .result .result-content{background-color:#fff;padding:40px;border:2px solid #202b57;position:relative;z-index:2}@media screen and (min-width:64em){.potential-widget .potential-container .tool .result .result-content{padding:20px 40px 10px}}.potential-widget .potential-container .tool .result .result-content p{margin-bottom:0;font-size:2rem;line-height:35px}.potential-widget .potential-container .tool .result .result-content p i.disclaimer{font-size:1.375rem;font-style:normal;display:inline-block;margin-top:20px;width:100%}.potential-widget .potential-container .tool .result .result-content p span{display:inline-block;font-weight:700;position:relative}.potential-widget .potential-container .tool .result .result-content p span i.helper{display:inline-block;width:100%;content:" ";background-color:#ee615f;height:5px;bottom:0;left:5%;position:absolute}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment