toggle.scss 2.99 KB
Newer Older
1 2 3 4
/**
* Toggle button
*
* @usage
5 6
*  ### Active and Inactive text should be provided as data attributes:
*  <button type="button" class="project-feature-toggle" data-enabled-text="Enabled" data-disabled-text="Disabled">
7 8 9
*  <i class="fa fa-spinner fa-spin loading-icon hidden"></i>
*  </button>

10 11
*  ### Checked should have `is-checked` class
*  <button type="button" class="project-feature-toggle is-checked" data-enabled-text="Enabled" data-disabled-text="Disabled">
12 13 14
*  <i class="fa fa-spinner fa-spin loading-icon hidden"></i>
*  </button>

15 16
*  ### Disabled should have `is-disabled` class
*  <button type="button" class="project-feature-toggle is-disabled" data-enabled-text="Enabled" data-disabled-text="Disabled" disabled="true">
17 18 19
*  <i class="fa fa-spinner fa-spin loading-icon hidden"></i>
*  </button>

20
*  ### Loading should have `is-loading` and an icon with `loading-icon` class
21 22 23 24 25 26 27 28 29
*  <button type="button" class="project-feature-toggle is-loading" data-enabled-text="Enabled" data-disabled-text="Disabled">
*  <i class="fa fa-spinner fa-spin loading-icon"></i>
*  </button>
*/
.project-feature-toggle {
  position: relative;
  border: 0;
  outline: 0;
  display: block;
30
  width: 50px;
31 32 33
  height: 24px;
  cursor: pointer;
  user-select: none;
34
  background: $gl-gray-400;
35 36 37 38 39 40 41 42 43 44
  border-radius: 12px;
  padding: 3px;
  transition: all .4s ease;

  &::selection,
  &::before::selection,
  &::after::selection {
    background: none;
  }

45 46 47 48
  &:focus {
    outline: none;
  }

49
  .toggle-icon {
50 51 52 53 54 55
    position: relative;
    display: block;
    left: 0;
    border-radius: 9px;
    background: $feature-toggle-color;
    transition: all .2s ease;
56 57 58

    &,
    .toggle-icon-svg {
59 60
      width: $default-icon-size;
      height: $default-icon-size;
61 62 63
    }

    .toggle-icon-svg {
64
      fill: $gl-gray-400;
65 66 67 68 69 70 71 72 73
    }

    .toggle-status-checked {
      display: none;
    }

    .toggle-status-unchecked {
      display: inline;
    }
74 75
  }

76 77 78 79 80 81 82 83 84 85
  .loading-icon {
    display: none;
    font-size: 12px;
    color: $white-light;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

86
  &.is-loading {
87
    .toggle-icon {
88
      display: none;
89 90 91
    }

    .loading-icon {
92
      display: block;
93 94

      &::before {
95 96 97 98
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
99 100
      }
    }
101 102 103 104
  }

  &.is-checked {
    background: $feature-toggle-color-enabled;
105

106 107
    .toggle-icon {
      left: calc(100% - 18px);
108

109 110 111 112 113 114 115 116 117 118 119
      .toggle-icon-svg {
        fill: $feature-toggle-color-enabled;
      }

      .toggle-status-checked {
        display: inline;
      }

      .toggle-status-unchecked {
        display: none;
      }
120 121 122
    }
  }

123
  &.is-disabled {
124 125 126 127
    opacity: 0.4;
    cursor: not-allowed;
  }

Clement Ho's avatar
Clement Ho committed
128
  @include media-breakpoint-down(xs) {
129 130 131
    width: 50px;

    &::before,
132
    &.is-checked::before {
133 134 135 136 137 138 139 140 141 142 143 144 145 146
      display: none;
    }
  }

  @keyframes animate-enabled {
    0%, 35% { opacity: 0; }
    100% { opacity: 1; }
  }

  @keyframes animate-disabled {
    0%, 35% { opacity: 0; }
    100% { opacity: 1; }
  }
}