battery.scss

$batteryWidth: 256px;
$batteryHeight: 60px;
$batteryBorderSize: 4px;
$batteryColor: #fff;
$batteryBorderRadius: 15px;
$nubSize: $batteryHeight * 0.5;

body {
  background: transparent;
}

label {
  color: black;
}

.battery {
  position: relative;
  width: $batteryWidth + 2;
  height: $batteryHeight;
  border: $batteryBorderSize solid $batteryColor;
  border-radius: $batteryBorderRadius;
  position: relative;
  padding: $batteryBorderSize;
  -webkit-transform: scale(0.6); //for retina display
  -webkit-filter: drop-shadow(0 0 10px #000000);
           filter: drop-shadow(0 0 10px #000000);

  &:before {
    content: '';
    display: block;
    position: absolute;
    top: 50%;
    right: -1 * (($nubSize*0.35) + $batteryBorderSize + 2);
    margin-top:-1 * (calc($nubSize/2));
    width: $nubSize;
    height: $nubSize;
    background: $batteryColor;
    clip: rect(0, $nubSize, $nubSize, ($nubSize*0.65));
    border-radius: 35%;
  }
  .level {
    width: 100%;
    height: 100%;
    border-radius: calc($batteryBorderRadius/2);
    text-align: center;
  }
}

.level-message {
  position: absolute;
  top: 30px;
  left: 90px;
  font-size: 32px;
  color: black;
}

.radio-group {
  background-color: white;
  display: block;
  max-width: 310px;
  margin: 20px 20px 0;
  padding: 5px 10px;
  border: 1px black solid;
  border-radius: 5px;
}

.options-group {
  background-color: white;
  display: block;
  max-width: 310px;
  margin: 10px 20px;
  padding: 5px 10px;
  border: 1px black solid;
  border-radius: 5px;
}

.mode-element {
  display: inline-block;
  margin-right: 20px;
  input[type='radio'] {
    margin: 0;
  }
  label {
    margin-left: 0;
  }
}

.charging {
    background: linear-gradient(270deg, #6ee7ff, #0091ff);
    background-size: 400% 400%;

    -webkit-animation: AnimationName 2s ease infinite;
    -moz-animation: AnimationName 2s ease infinite;
    animation: AnimationName 2s ease infinite;
}

@-webkit-keyframes AnimationName {
    0%{background-position:0% 83%}
    50%{background-position:100% 18%}
    100%{background-position:0% 83%}
}
@-moz-keyframes AnimationName {
    0%{background-position:0% 83%}
    50%{background-position:100% 18%}
    100%{background-position:0% 83%}
}
@keyframes AnimationName {
    0%{background-position:0% 83%}
    50%{background-position:100% 18%}
    100%{background-position:0% 83%}
}