Quae dolorem earum veritatis oditseno
30 min. ago
1 hr. ago
2 hrs. ago
4 hrs. ago
<div class="row"> <div class="col-lg-6"> <div class="card"> <div class="card-body"> <div class="pt-3"> <label class="switch btn-color-mode-switch"> <input type="checkbox" name="color_mode" id="color_mode" value="1"> <label for="color_mode" data-on="ALL" data-off="Recent" class="btn-color-mode-switch-inner"></label> </label> </div> <div class="pt-3"> <label class="switch btn-color-mode-switch"> <input type="checkbox" name="color_mode" id="color_modes" value="1" checked=""> <label for="color_modes" data-off="Recent" data-on="ALL" class="btn-color-mode-switch-inner"></label> </label> </div> </div> </div> </div> <div class="col-lg-6"> <div class="card"> <div class="card-body"> <div class="pt-3"> <label class="switch btn-color-mode-switch-primary"> <input type="checkbox" name="color_mode" id="color_moder" value="1"> <label for="color_moder" data-on="ALL" data-off="Recent" class="btn-color-mode-switch-inner"></label> </label> </div> <div class="pt-3"> <label class="switch btn-color-mode-switch-primary"> <input type="checkbox" name="color_mode" id="color_moders" value="1" checked=""> <label for="color_moders" data-on="ALL" data-off="Recent" class="btn-color-mode-switch-inner"></label> </label> </div> </div> </div> </div> </div>
.btn-color-mode-switch label { font-size: 12px; font-weight: 700; } .btn-color-mode-switch{ display: inline-block; margin: 0px; position: relative; } .btn-color-mode-switch > label.btn-color-mode-switch-inner{ margin: 0px; width: 140px; height: 30px; background: #167DF5; border-radius: 26px; overflow: hidden; position: relative; transition: all 0.3s ease; display: block; } .btn-color-mode-switch > label.btn-color-mode-switch-inner:before{ content: attr(data-on); position: absolute; font-size: 12px; font-weight: 700; top: 7px; right: 30px; } .btn-color-mode-switch > label.btn-color-mode-switch-inner:after{ content: attr(data-off); width: 70px; height: 26px; background: #fff; border-radius: 26px; position: absolute; left: 2px; top: 2px; text-align: center; transition: all 0.3s ease; box-shadow: 0px 0px 6px -2px #111; padding: 5px 0px; color: #167DF5; } .btn-color-mode-switch > .alert{ display: none; background: #FF9800; border: none; color: #fff; } .btn-color-mode-switch input[type="checkbox"]{ cursor: pointer; width: 50px; height: 25px; opacity: 0; position: absolute; top: 0; z-index: 1; margin: 0px; } .btn-color-mode-switch input[type="checkbox"]:checked + label.btn-color-mode-switch-inner{ background: #167DF5; color: #fff; } .btn-color-mode-switch input[type="checkbox"]:checked + label.btn-color-mode-switch-inner:after{ content: attr(data-on); left: 68px; background: #ffffff; color: #167DF5; } .btn-color-mode-switch input[type="checkbox"]:checked + label.btn-color-mode-switch-inner:before{ content: attr(data-off); right: auto; left: 20px; } .btn-color-mode-switch input[type="checkbox"]:checked ~ .alert{ display: block; } label.switch.btn-color-mode-switch label { color: white; } .btn-color-mode-switch-primary label { font-size: 12px; font-weight: 700; } .btn-color-mode-switch-primary{ display: inline-block; margin: 0px; position: relative; } .btn-color-mode-switch-primary > label.btn-color-mode-switch-inner{ margin: 0px; width: 140px; height: 29px; background: #167DF5; border-radius: 26px; overflow: hidden; position: relative; transition: all 0.3s ease; display: block; } .btn-color-mode-switch-primary > label.btn-color-mode-switch-inner:before{ content: attr(data-on); position: absolute; font-size: 12px; font-weight: 700; top: 4px; right: 30px; } .btn-color-mode-switch-primary > label.btn-color-mode-switch-inner:after{ content: attr(data-off); width: 70px; height: 23px; background: #167DF5; border-radius: 26px; position: absolute; left: 2px; top: 1px; text-align: center; transition: all 0.3s ease; box-shadow: 0px 0px 6px -2px #111111bd; padding: 3px 0px; color: #ffffff; } .btn-color-mode-switch-primary > .alert{ display: none; background: #FF9800; border: none; color: #fff; } .btn-color-mode-switch-primary input[type="checkbox"]{ cursor: pointer; width: 50px; height: 25px; opacity: 0; position: absolute; top: 0; z-index: 1; margin: 0px; } .btn-color-mode-switch-primary input[type="checkbox"]:checked + label.btn-color-mode-switch-inner{ background: #ffffff; color: #167DF5; } .btn-color-mode-switch-primary input[type="checkbox"]:checked + label.btn-color-mode-switch-inner:after{ content: attr(data-on); left: 64px; background: #167DF5; color: white; } .btn-color-mode-switch-primary input[type="checkbox"]:checked + label.btn-color-mode-switch-inner:before{ content: attr(data-off); right: auto; left: 20px; } .btn-color-mode-switch-primary input[type="checkbox"]:checked ~ .alert{ display: block; } label.switch.btn-color-mode-switch-primary label { color: #167DF5; background: white; border: 2px solid #167DF5; }