Contents

.setting__button {
  height: 50px;
  position: relative;
  width: 62px;
  &::before {
    content: ' ';
    height: 36px;
    width: 36px;
    position: absolute;
    top: 6px;
    left: 12px;
  }
  &--on::before {
    background-image: url('/assets/img/toggle-off.svg');
  }
  &--off::before {
    background-image: url('/assets/img/toggle-on.svg');
    opacity: .75;
  }
}

.setting__video {
  background-color: transparent;
  border: none;
  display: block;
  margin-right: .5rem;
  height: 46px;
  width: 58px;
  position: relative;
  top: 5px;
  margin-bottom: -56px;
  opacity: 0;
  transition: all ease-in-out .25s;
  &::before {
    content: ' ';
    background-image: url('/assets/img/settings.svg');
    background-repeat: no-repeat;
    background-position: center;
    width: 46px;
    height: 46px;
    position: absolute;
    top: 0;
    left: 6px;
  } 
}

.setting__video:hover,
.setting__video:focus {
  opacity: 1 !important;
}

@media screen and (min-width: 400px) {
  .setting__video {
    height: 56px;
    width: 68px;
    &::before {
      background-image: url('/assets/img/settings_56.svg');
      height: 56px;
      width: 56px;
    }
  }
}

@media screen and (min-width: 768px) {
  .setting__video {
    top: -3px;
  } 
}

@media screen and (min-width: 1024px) {
  .setting__video {
    top: -5px;
  } 
}

@media screen and (max-width: 992px) {
  .setting__video.setting__video--visible {
    opacity: 1;
  }
}

Version data entries

1 entries across 1 versions & 1 rubygems

Version	Path
kcc-gem-theme-2.2.2	assets/scss/2-modules/_setting.scss