designModeToggler.scss 753 Bytes
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 
$off-text: #949494;
$off-color: #EFEFEF;
$blue-color: #36B4F6;
$red-color: #DF3B3A;

body.noosfero-design-on {

    div.content-wrapper {
        opacity: 0.5;
    }
}

.switch {
  @include not-select();
  background-color: $off-color;

  &[on][off] {
    width: 60px;
  }

  &:focus {
    outline: none;
  }

  &.checked small {
      left: initial;
      right: 0px;
  }

  &.blue.checked {
    background: $blue-color;
    border-color: $blue-color;
  }

  &.red.checked {
    background: $red-color;
    border-color: $red-color;
  }

  %switch-label {
    font-weight: bold;
  }

  .on {
    @extend %switch-label;
  }

  .off {
      @extend %switch-label;
      right: 2px;
      top: 25%;
      color: $off-text;
      text-align: center;
  }
}