feat: basic desktop layout

1 files changed, 256 insertions, 0 deletions

diff --git a/bulma-slider.css b/bulma-slider.css
new file mode 100644
index 0000000..cafa942
--- /dev/null
+++ b/bulma-slider.css
@@ -0,0 +1,256 @@
+input[type=range].slider {
+  height: 25px;
+  -webkit-appearance: none;
+  margin: 10px 0;
+  background-color: inherit;
+}
+
+input[type=range].slider.is-fullwidth {
+  display: block;
+  width: 100%;
+}
+input[type=range].slider:focus {
+  outline: none;
+}
+
+input[type=range].slider.has-output + output {
+  width: 4rem;
+  background-color: #4a4a4a;
+  border-radius: 4px;
+  padding: .4rem .8rem;
+  font-size: .75rem;
+  line-height: .75rem;
+  text-align: center;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: #fff;
+  overflow: hidden;
+  pointer-events: none;
+  z-index:200;
+}
+
+input[type=range].slider.has-output {
+  display: inline-block;
+  vertical-align: middle;
+}
+
+input[type=range].slider.is-fullwidth.has-output {
+  width: calc(100% - 5.2rem);
+}
+
+input[type=range].slider.has-output + output {
+  display: inline-block;
+  margin-left: .75rem;
+  vertical-align: middle;
+}
+
+input[type=range].slider::-webkit-slider-runnable-track {
+  width: 100%;
+  height: 5px;
+  cursor: pointer;
+  animate: 0.2s;
+  box-shadow: 0px 0px 0px #000000;
+  background-color: #dbdbdb;
+  border-radius: 4px;
+  border: 0px solid #000000;
+}
+input[type=range].slider::-webkit-slider-thumb {
+  box-shadow: 0px 0px 0px #000000;
+  border: 1px solid #b5b5b5;
+  height: 18px;
+  width: 18px;
+  border-radius: 25px;
+  background-color: #ffffff;
+  cursor: pointer;
+  -webkit-appearance: none;
+  margin-top: -7px;
+}
+input[type=range].slider:focus::-webkit-slider-runnable-track {
+  background-color: #dbdbdb;
+}
+
+input[type=range].slider::-moz-range-track {
+  width: 100%;
+  height: 5px;
+  cursor: pointer;
+  animate: 0.2s;
+  box-shadow: 0px 0px 0px #000000;
+  background-color: #dbdbdb;
+  border-radius: 4px;
+  border: 0px solid #000000;
+}
+input[type=range].slider::-moz-range-thumb {
+  box-shadow: 0px 0px 0px #000000;
+  border: 1px solid #b5b5b5;
+  height: 18px;
+  width: 18px;
+  border-radius: 25px;
+  background-color: #ffffff;
+  cursor: pointer;
+}
+
+input[type=range].slider::-ms-track {
+  width: 100%;
+  height: 5px;
+  cursor: pointer;
+  animate: 0.2s;
+  background-color: transparent;
+  border-color: transparent;
+  color: transparent;
+}
+input[type=range].slider::-ms-fill-lower {
+  background-color: #dbdbdb;
+  border: 0px solid #000000;
+  border-radius: 8px;
+  box-shadow: 0px 0px 0px #000000;
+}
+input[type=range].slider::-ms-fill-upper {
+  background-color: #dbdbdb;
+  border: 0px solid #000000;
+  border-radius: 4px;
+  box-shadow: 0px 0px 0px #000000;
+}
+input[type=range].slider::-ms-thumb {
+  margin-top: 1px;
+  box-shadow: 0px 0px 0px #000000;
+  border: 1px solid #b5b5b5;
+  height: 18px;
+  width: 18px;
+  border-radius: 25px;
+  background-color: #ffffff;
+  cursor: pointer;
+}
+input[type=range].slider:focus::-ms-fill-lower {
+  background-color: #dbdbdb;
+}
+input[type=range].slider:focus::-ms-fill-upper {
+  background-color: #dbdbdb;
+}
+
+input[type=range].slider.is-primary::-webkit-slider-runnable-track {
+  background-color: #00d1b2 !important;
+}
+input[type=range].slider.is-primary::-moz-range-track {
+  background-color: #00d1b2 !important;
+}
+input[type=range].slider.is-primary::-ms-fill-lower {
+  background-color: #00d1b2 !important;
+}
+input[type=range].slider.is-primary::-ms-fill-upper {
+  background-color: #00d1b2 !important;
+}
+
+input[type=range].slider.is-link::-webkit-slider-runnable-track {
+  background-color: #3273dc !important;
+}
+input[type=range].slider.is-link::-moz-range-track {
+  background-color: #3273dc !important;
+}
+input[type=range].slider.is-link::-ms-fill-lower {
+  background-color: #3273dc !important;
+}
+input[type=range].slider.is-link::-ms-fill-upper {
+  background-color: #3273dc !important;
+}
+
+input[type=range].slider.is-info::-webkit-slider-runnable-track {
+  background-color: #209cee !important;
+}
+input[type=range].slider.is-info::-moz-range-track {
+  background-color: #209cee !important;
+}
+input[type=range].slider.is-info::-ms-fill-lower {
+  background-color: #209cee !important;
+}
+input[type=range].slider.is-info::-ms-fill-upper {
+  background-color: #209cee !important;
+}
+
+input[type=range].slider.is-success::-webkit-slider-runnable-track {
+  background-color: #23d160 !important;
+}
+input[type=range].slider.is-success::-moz-range-track {
+  background-color: #23d160 !important;
+}
+input[type=range].slider.is-success::-ms-fill-lower {
+  background-color: #23d160 !important;
+}
+input[type=range].slider.is-success::-ms-fill-upper {
+  background-color: #23d160 !important;
+}
+
+input[type=range].slider.is-warning::-webkit-slider-runnable-track {
+  background-color: #ffdd57 !important;
+}
+input[type=range].slider.is-warning::-moz-range-track {
+  background-color: #ffdd57 !important;
+}
+input[type=range].slider.is-warning::-ms-fill-lower {
+  background-color: #ffdd57 !important;
+}
+input[type=range].slider.is-warning::-ms-fill-upper {
+  background-color: #ffdd57 !important;
+}
+
+input[type=range].slider.is-danger::-webkit-slider-runnable-track {
+  background-color: #ff3860 !important;
+}
+input[type=range].slider.is-danger::-moz-range-track {
+  background-color: #ff3860 !important;
+}
+input[type=range].slider.is-danger::-ms-fill-lower {
+  background-color: #ff3860 !important;
+}
+input[type=range].slider.is-danger::-ms-fill-upper {
+  background-color: #ff3860 !important;
+}
+
+input[type=range].slider.is-white.has-output + output {
+  background-color: #fff;
+  color: #0a0a0a;
+}
+
+input[type=range].slider.is-black.has-output + output {
+  background-color: #0a0a0a;
+  color: #ffffff;
+}
+
+input[type=range].slider.is-light.has-output + output {
+  background-color: #f5f5f5;
+  color: #363636;
+}
+
+input[type=range].slider.is-dark.has-output + output {
+  background-color: #363636;
+  color: #f5f5f5;
+}
+
+input[type=range].slider.is-primary.has-output + output {
+  background-color: #00d1b2;
+  color: #ffffff;
+}
+
+input[type=range].slider.is-link.has-output + output {
+  background-color: #3273dc;
+  color: #ffffff;
+}
+
+input[type=range].slider.is-info.has-output + output {
+  background-color: #209cee;
+  color: #ffffff;
+}
+
+input[type=range].slider.is-success.has-output + output {
+  background-color: #23d160;
+  color: #ffffff;
+}
+
+input[type=range].slider.is-warning.has-output + output {
+  background-color: #ffdd57;
+  color: rgba(0, 0, 0, .7);
+}
+
+input[type=range].slider.is-danger.has-output + output {
+  background-color: #ff3860;
+  color: #ffffff;
+}