coriolis-web/src/components/Switch/Switch.scss

/*
Copyright (C) 2017  Cloudbase Solutions SRL

This program is free software: you can redistribute it and/or modify
it under the terms of the GNU Affero General Public License as
published by the Free Software Foundation, either version 3 of the
License, or (at your option) any later version.

This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
GNU Affero General Public License for more details.

You should have received a copy of the GNU Affero General Public License
along with this program.  If not, see <http://www.gnu.org/licenses/>.
*/

@import '../variables.scss';

.root {
  display: flex;
  align-items: center;
  position: relative;

    .label {
      margin-left: 16px;
      color: $gray-dark;
      font-weight: $weight-light;
    }

    input[type="checkbox"] {
      width: 32px;
      height: 16px;
      cursor: pointer;
    }

    input[type="checkbox"]:global(.tinyswitch.ios-switch) + div {
      width: 30px;	
      height: 14px;
      background-color: $task-gray-light;
      border: 1px solid $task-gray-light;
    }

    input[type="checkbox"]:global(.ios-switch):checked + div {
      background-color: $blue;
      border: 1px solid $blue;
      box-shadow: none;
    }

    input[type="checkbox"]:global(.ios-switch) + div { 
      transition-duration: 0.2s;
    }
    
    input[type="checkbox"]:global(.ios-switch) + div > div {
      transition-timing-function: ease;
      transition-duration: 0.2s;
    }

    input[type="checkbox"]:global(.tinyswitch.ios-switch) + div > div {
      height: 14px;
      width: 14px;
      margin-left: 0px;
      margin-top: 0px;
      box-shadow: none;
    }
}