Switch

There are no notes for this item.

<!-- Default -->
<button class="switch switch--default">
	<span class="switch__bg">
		<span class="switch__toggle">
			<span class="switch__toggle__inner"></span>
		</span>
	</span>
</button>
<span class="atom__text">Off</span>

<script>
    var switchButtons = document.getElementsByClassName("switch");
    var switchButtonOne = switchButtons[0];
    var switchButtonTwo = switchButtons[1];
    switchButtonOne.onclick = function() {
        this.classList.toggle("switch--active");
    };
    switchButtonTwo.onclick = function() {
        this.classList.toggle("switch--active");
    };
</script>

<!-- On -->
<button class="switch switch--active">
	<span class="switch__bg">
		<span class="switch__toggle">
			<span class="switch__toggle__inner"></span>
		</span>
	</span>
</button>
<span class="atom__text">On</span>

<script>
    var switchButtons = document.getElementsByClassName("switch");
    var switchButtonOne = switchButtons[0];
    var switchButtonTwo = switchButtons[1];
    switchButtonOne.onclick = function() {
        this.classList.toggle("switch--active");
    };
    switchButtonTwo.onclick = function() {
        this.classList.toggle("switch--active");
    };
</script>

<!-- Disabled -->
<button class="switch switch--disabled" disabled>
	<span class="switch__bg">
		<span class="switch__toggle">
			<span class="switch__toggle__inner"></span>
		</span>
	</span>
</button>
<span class="atom__text">Disabled</span>

<script>
    var switchButtons = document.getElementsByClassName("switch");
    var switchButtonOne = switchButtons[0];
    var switchButtonTwo = switchButtons[1];
    switchButtonOne.onclick = function() {
        this.classList.toggle("switch--active");
    };
    switchButtonTwo.onclick = function() {
        this.classList.toggle("switch--active");
    };
</script>

  • Content:
    /*------------------------------------*\
        #SWITCH
    \*------------------------------------*/
    
    .switch {
    	margin: 0 1em;
    	padding: 0;
    	border: none;
    	background-color: transparent;
    	position: relative;
    	cursor: pointer;
    	outline: none;
    }
    
    .switch__bg {
    	display: block;
    	border-radius: $radius-default;
    	background-color: $button-default;
    	width: 30px;
    	height: 17px;
    }
    
    .switch--active .switch__bg {
    	background-color: $button-primary;
    }
    
    .switch__toggle {
    	display: block;
      border: 1px solid $button-default;
    	width: 17px;
    	height: 17px;
    	transition: all .125s ease-in-out;
    	border-radius: $radius-default;
    	position: absolute;
    	top: 0;
    	left: 0;
    	background: linear-gradient(to bottom,  rgba(255,255,255,1) 0%,rgba(225,225,225,1) 100%);
    }
    
    .switch__toggle__inner {
    	width: 70%;
    	height: 70%;
    	display: block;
    	margin: 15%;
    	border-radius: $radius-default;
    	background: linear-gradient(to bottom,  rgba(225,225,225,1) 0%,rgba(255,255,255,1) 100%);
    }
    
    // Active state
    .switch--active .switch__toggle {
    	left: 13px;
    	transition: all .125s ease-in-out;
    	border-color: $button-primary;
    }
    
    // Hover state
    .switch:hover .switch__toggle__inner {
    	border: 1px solid $button-primary;
    	margin: 15%;
    }
    
    .switch--active:hover .switch__toggle__inner {
    	border-color: $button-default;
    }
    
    .switch:hover .switch__toggle {
    	border-color: $button-primary;
    }
    
    .switch--active:hover .switch__toggle {
    	border-color:$button-default;
    }
    
    // Focus state
    .switch:active .switch__toggle__inner {
    	border-color: transparent;
    	background-color: $button-primary;
    	width: 60%;
    	height: 70%;
    	margin: 15% 20% 15%;
    }
    
    .switch--active:active .switch__toggle__inner {
    	background-color: $button-default;
    }
    
    // Disabled state
    .switch:disabled,
    .switch--active.switch:disabled {
    	opacity: .5;
    	pointer-events: none;
    }
    
  • URL: /components/raw/switch/switch.scss
  • Filesystem Path: components/02-atoms/06-switch/switch.scss
  • Size: 1.8 KB