@import "colors"; #settings-dashboard { height: 100vh; color: $main_black; #settings-container { height: 80%; } .card { min-height: 230px; background-color: white; float: left; margin: 30px; box-shadow: 0 0 10px lighten(black, 40%); padding: 10px; z-index: 2; width: 80%; @media (min-width: 768px) { width: 80%; } @media (min-width: 992px) { width: 40%; } @media (min-width: 1200px) { width: 20%; } hr { width: 100%; border: 0; height: 1px; background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0)); } .setting-message { text-align: center; color: $dark_green; font-size: 18px; font-weight: bolder; z-index: 5; } .card-body-container { display: table; width: 100%; } .card-body { height: 80px; width: 100%; display: table-cell; vertical-align: bottom; } .type-label { font-weight: bolder; -webkit-border-radius: 25px; -moz-border-radius: 25px; border-radius: 25px; background-color: $light_yellow; padding: 5px; box-shadow: 0 0 5px lighten(black, 70%); color: $main_black; font-size: 14px; } .label-container { float: right; } .setting-description { clear: both; padding: 15px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } .value-input { width: 98%; margin-bottom: 10px; height: 20px; font-size: 18px; outline: none; &:focus { box-shadow: 0 0 10px $tangerine; border: 1px solid $tangerine; } } .value-slider { -webkit-appearance: none; width: 100%; height: 15px; border-radius: 5px; background: #d3d3d3; outline: none; opacity: 0.7; -webkit-transition: .2s; transition: opacity .2s; margin-bottom: 10px; &::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 25px; height: 25px; border-radius: 50%; background: $tangerine; cursor: pointer; } &::-moz-range-thumb { width: 25px; height: 25px; border-radius: 50%; background: $tangerine; cursor: pointer; } } .btn-value-submit { width: 100%; height: 35px; text-align: center; font-size: 18px; background-color: $tangerine; border: none; outline: none; &:active { color: $main_black; background-color: lighten($tangerine, 20%); } } .switch { position: relative; display: inline-block; width: 60px; height: 34px; margin-bottom: 10px; float: right; } .switch input {display:none;} .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; -webkit-transition: .4s; transition: .4s; &:before { position: absolute; content: ""; height: 26px; width: 26px; left: 4px; bottom: 4px; background-color: white; -webkit-transition: .4s; transition: .4s; } } input:checked + .slider { background-color: $tangerine; } input:focus + .slider { box-shadow: 0 0 1px $tangerine; } input:checked + .slider:before { -webkit-transform: translateX(26px); -ms-transform: translateX(26px); transform: translateX(26px); } .slider.round { border-radius: 34px; } .slider.round:before { border-radius: 50%; } } }