Switch Module – Codelibrary

Light style

A regular switch that switches to an “on” state on click.

<label class="switch">
  <input class="switch-input" type="checkbox">
  <span class="switch-button"></span>
</label>

/* Light switch
   ========================================================================== */

.switch {
    display: inline-block;
    margin-bottom: .5rem;
}

.switch-button {
    /* background color when "off" */
    background: #FFFFFF;

    /* size of switch */
    width: 43px;
    height: 25px;
    border: 2px solid #E6E6E6;
    border-radius: 100px;
    display: block;

    cursor: pointer;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
    outline: 0;
    -webkit-transition: all .4s ease;
    -o-transition: all .4s ease;
    transition: all .4s ease;
}

/* Style of the "bubble" that toggles */
.switch-button::after {
    /* size of bubble */
    width: 21px;
    height: 21px;
    border-radius: 50%;
    background-color: #FFFFFF;
    position: relative;
    display: block;
    content: "";
    -webkit-transition: tranform .4s cubic-bezier(0.175, 0.885, 0.320, 1.275), 
                padding .3s ease, margin .3s ease;
    -o-transition: tranform .4s cubic-bezier(0.175, 0.885, 0.320, 1.275), 
                padding .3s ease, margin .3s ease;
    transition: tranform .4s cubic-bezier(0.175, 0.885, 0.320, 1.275), 
                padding .3s ease, margin .3s ease;
    -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
            transform: translateX(0);
    -webkit-box-shadow: 0 1px 3px rgba(0,0,0,.4);
            box-shadow: 0 1px 3px rgba(0,0,0,.4);
}

.switch-input {
    display: none;
}

.switch-button:hover::after {
    will-change: padding;
}

.switch-button:active::after {
    padding-right: .4rem;
}

/* "On" state
   ========================== */

.switch-input:checked + .switch-button {
    /* border and background color when the button is "on" */
    border-color: var(--highlight); 
    background: var(--highlight);
}

.switch-input:checked + .switch-button::after {
    /* bubble position when "on" */
    -webkit-transform: translateX(18px);
        -ms-transform: translateX(18px);
            transform: translateX(18px);
}

.switch-input:checked + .switch-button:active::after {
    margin-left: -.4rem;
}

/* Checkbox in disabled state
   ========================== */

.switch-input[type="checkbox"]:disabled + .switch-button {
    opacity: .6;
    cursor: not-allowed;
    -webkit-box-shadow: 0 0 0 transparent;
            box-shadow: 0 0 0 transparent;
}

.switch-input[type="checkbox"]:checked:disabled + .switch-button {
    /* border and background color when button is disabled */
    border-color: #cccccc;
    background: #cccccc;
}

Skewed style

To edit the text inside this toggle, you must edit the data-toggle-on and data-toggle-off attributes in the HTML code. Depending on the length of the text, you might need to edit the width of of the .switch-button class in the CSS.

<label class="switch">
  <input class="switch-input"
         type="checkbox">
  <span class="switch-button"
         data-toggle-on="ON"
         data-toggle-off="OFF"></span>
</label>

/* Skewed Switch
   ========================================================================== */

.switch {
    display: inline-block;
    margin-bottom: .5rem;
}

.switch-button {
    /* Change width and height to modify size of switch */
    width: 4rem;
    height: 2rem;

    /* background color when "off" */
    background: #888888;

    display: block;
    position: relative;
    cursor: pointer;
    outline: 0;
    overflow: hidden;
    -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
    -webkit-transform: skew(-10deg);
        -ms-transform: skew(-10deg);
            transform: skew(-10deg);
    -webkit-transition: all .2s ease;
        -o-transition: all .2s ease;
            transition: all .2s ease;
    -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
}

.switch-button::before, 
.switch-button::after {
    /* the line-height must be the same as the height above */
    line-height: 2rem;

    color: #FFFFFF;
    font-weight: bold;
    text-shadow: 0 1px 1px rgba(0,0,0,.3);
    display: inline-block;
    width: 100%;
    text-align: center;
    position: absolute;
    -webkit-transform: skew(10deg);
        -ms-transform: skew(10deg);
            transform: skew(10deg);
    -webkit-transition: all .2s ease;
        -o-transition: all .2s ease;
            transition: all .2s ease;
}

.switch-input {
    display: none;
}

.switch-button::before {
    content: attr(data-toggle-off);
    left: 0;
}

.switch-button::after {
    content: attr(data-toggle-on);
    left: 100%;
}

.switch-button:active::before {
    left: -10%;
}

/* "On" state
   ========================== */

.switch-input:checked + .switch-button {
    /* color of background when "on" */
    background: var(--highlight);
}

.switch-input:checked + .switch-button::before {
    left: -100%;
}

.switch-input:checked + .switch-button::after {
    left: 0;
}

.switch-input:checked + .switch-button:active::after {
    left: 10%;
}

/* Checkbox in disabled state
   ========================== */

.switch-input[type="checkbox"]:disabled + .switch-button {
    opacity: .6;
    cursor: not-allowed;
}

.switch-input[type="checkbox"]:checked:disabled + .switch-button {
    /* border and background color when button is disabled */
    border-color: #cccccc;
    background: #cccccc;
}

Flip style

To edit the text inside this toggle, you must edit the data-toggle-on and data-toggle-off attributes in the HTML code. Depending on the length of the text, you might need to edit the width of of the .switch-button class in the CSS.

<label class="switch">
  <input class="switch-input"
         type="checkbox">
  <span class="switch-button"
         data-toggle-on="ON"
         data-toggle-off="OFF"></span>
</label>

/* Flip Switch
   ========================================================================== */

.switch {
    display: inline-block;
    margin-bottom: .5rem;
}

.switch-button {
    width: 4rem;
    height: 2rem;
    padding: 2px;
    position: relative;
    cursor: pointer;
    outline: 0;
    display: block;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
    -webkit-transition: all .2s ease-out;
         -o-transition: all .2s ease-out;
            transition: all .2s ease-out;
    -webkit-perspective: 100px;
            perspective: 100px;
}

.switch-button::before, 
.switch-button::after {
    line-height: 2rem;
    font-weight: bold;
    color: #FFFFFF;
    text-align: center;
    display: inline-block;
    border-radius: 4px;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
    -webkit-transition: all .4s ease;
         -o-transition: all .4s ease;
            transition: all .4s ease;
}

.switch-input {
    display: none;
}

/* When switch is "off" */
.switch-button::before {
    background: var(--links);
    content: attr(data-toggle-off);
}

/* When switch is "on" */
.switch-button::after {
    background: var(--highlight);
    content: attr(data-toggle-on);
    -webkit-transform: rotateY(-180deg);
            transform: rotateY(-180deg);
}

.switch-button:hover::before {
    -webkit-transform: rotateY(-20deg);
            transform: rotateY(-20deg);
}

/* "On" state
   ========================== */

.switch-input:checked + .switch-button:hover::after {
    -webkit-transform: rotateY(20deg);
            transform: rotateY(20deg);
}

.switch-input:checked + .switch-button::before {
    -webkit-transform: rotateY(180deg);
            transform: rotateY(180deg);
}

.switch-input:checked + .switch-button::after {
    -webkit-transform: rotateY(0);
            transform: rotateY(0);
}

/* Checkbox in disabled
   ========================== */

.switch-input[type="checkbox"]:disabled + .switch-button {
    opacity: .6;
    cursor: not-allowed;
}

.switch-input[type="checkbox"]:checked:disabled + .switch-button {
    border-color: #cccccc;
    background: #cccccc;
}

Button group style

Show both options at once and switch from one to the other on click.

<label class="switch">
    <input class="switch-input"
            type="checkbox">
    <div class="switch-button">
        <span class="switch-button-left">OFF</span> 
        <span class="switch-button-right">ON</span>
    </div>
</label>

/* Button Group Switch
   ========================================================================== */

.switch {
    display: inline-block;
    margin-bottom: 0.5rem;
}

.switch-button {
    /* background and border when in "off" state */
    background: var(--highlight);
    border: 2px solid var(--highlight);
    display: grid; 
    grid-template-columns: 1fr 1fr;
    border-radius: 6px;
    color: #FFFFFF;
    position: relative;
    cursor: pointer;
    outline: 0;
    user-select: none;
}

.switch-input:not(:checked) + .switch-button .switch-button-left {
    /* text color when in "off" state */
    color: var(--highlight);
}

.switch-input {
    display: none;
}

.switch-button span {
    font-size: 1rem;
    padding: 0.2rem .7rem;
    text-align: center;
    z-index: 2;
    color: #FFFFFF;
    transition: color .2s;
}

.switch-button::before {
    content: '';
    position: absolute;
    background-color: #FFFFFF;
    box-shadow: 0 1px 3px rgba(0,0,0,.4);
    border-radius: 4px;
    top: 0;
    left: 0;
    height: 100%;
    width: 50%;
    z-index: 1;
    transition: left .3s cubic-bezier(0.175, 0.885, 0.320, 1), 
                padding .2s ease, margin .2s ease;
}

.switch-button:hover::before {
    will-change: padding;
}

.switch-button:active::before {
    padding-right: .4rem;
}


/* "On" state
   ========================== */

.switch-input:checked + .switch-button {
    /* background and border when in "on" state */
    background-color: var(--links);
    border-color: var(--links);
}

.switch-input:checked + .switch-button .switch-button-right {
    /* text color when in "on" state */
    color: var(--links);
}

.switch-input:checked + .switch-button::before {
    left: 50%;
}

.switch-input:checked + .switch-button:active::before {
    margin-left: -.4rem;
}

/* Checkbox in disabled state
   ========================== */

.switch-input[type="checkbox"]:disabled + .switch-button {
    opacity: 0.6;
    cursor: not-allowed;
}

Active/inactive style

Toggle button to highlight an active or inactive state.

<div class="row">
    <div class="col-xs-4">
        <h2>
            Flat style {{ flatbutton.active ? 'On' : 'Off' }}
        </h2>
        <button ng-click="flatbutton.active = !flatbutton.active"
                ng-class="{'flat-button-active': flatbutton.active == true}" class="flat-button"
                aria-expanded="{{ flatbutton.active == true }}">
            Click me
        </button>
    </div>

    <div class="col-xs-4">
        <h2>
            Press style {{ pressbutton.active ? 'On' : 'Off' }}
        </h2>
        <button ng-click="pressbutton.active = !pressbutton.active"
                ng-class="{'press-button-active': pressbutton.active == true}" class="press-button"
                aria-expanded="{{ pressbutton.active == true }}">
            Click me
        </button>
    </div>

    <div class="col-xs-4">
        <h2>
            Gradient and shadow style {{ shadowbutton.active ? 'On' : 'Off' }}
        </h2>
        <button ng-click="shadowbutton.active = !shadowbutton.active"
                ng-class="{'shadow-button-active': shadowbutton.active == true}" class="shadow-button"
                aria-expanded="{{ shadowbutton.active == true }}">
            Click me
        </button>
    </div>
</div>

/* Flat style
=============================================================================*/
.flat-button {
    font-size: 1rem;
    color: var(--links);
    border: 1px solid var(--links);
    border-radius: 2rem;
    background: #FFF;
    padding: .37rem 1rem;
    margin-right: 6px;
}

.flat-button:hover {
    opacity: 0.65;
}

.flat-button-active {
    background-color: var(--links);
    color: #FFF;
}

/* Press style
=============================================================================*/
.press-button {
    font-size: 1rem;
    color: var(--links);
    border: 1px solid var(--links);
    border-radius: 2rem;
    background: #FFF;
    padding: .37rem 1rem;
    border-bottom-width: 6px;
}

.press-button:hover {
    opacity: 0.65;
}

.press-button-active {
    margin-top: 3px;
    border-bottom-width: 3px;
}

/* Shadow style
=============================================================================*/
.shadow-button {
    font-size: 1rem;
    background: rgb(0, 136, 204);
    background: linear-gradient(0deg, rgba(0, 136, 204, 1) 0%, rgba(6, 168, 249, 1) 100%);
    color: #FFF;
    border: 1px solid var(--links);
    border-radius: 2rem;
    padding: .37rem 1rem;
}

.shadow-button-active {
    background-color: rgba(0, 136, 204, 1);
    box-shadow: -1px 2px 10px 3px rgba(0, 0, 0, 0.3) inset;
    padding-top: .47rem;
    padding-bottom: .27rem;
}

Simple example

A simple usecase to show how this component can be used in your pages.

<div class="content-card"
     ng-init="view = 'map'">
    <div class="row">
        <div class="col-sm-3">
            <h2 class="content-card-title">
                France departments
            </h2>
            <p class="content-card-description">
                Cardano could be many technical analysis since Nexo data mining a fundamental analysis.
            </p>
            <p class="content-card-description">
                Ravencoin generates a amazing fish of lots of market cap, and Waves serves many quick anti-money laundering! Solidity allowed lots of fast peer-to-peer network.
            </p>
            <div class="switch-container">
                <strong>View : </strong>
                <label class="switch">
                    <input ng-model="view"
                           ng-true-value="'map'"
                           ng-false-value="'table'"
                           ng-checked="view == 'map'"
                           class="switch-input"
                           type="checkbox">
                    <div class="switch-button">
                        <span class="switch-button-left">TABLE</span>
                        <span class="switch-button-right">MAP</span>
                    </div>
                </label>
            </div>
        </div>
        <div class="col-sm-9">
            <ods-dataset-context context="countoursgeographiques"
                                 countoursgeographiques-dataset="contours-geographiques-simplifies-des-nouvelles-regions-metropole"
                                 countoursgeographiques-domain="userclub"
                                 countoursgeographiques-parameters="{}">
                <div ng-if="view == 'map'">
                    <ods-map context="countoursgeographiques"
                             scroll-wheel-zoom="false"></ods-map>
                </div>
                <div ng-if="view == 'table'">
                    <ods-table context="countoursgeographiques"></ods-table>
                </div>
            </ods-dataset-context>
        </div>
    </div>
</div>

/* Content Card
   ========================================================================== */
   
.content-card {
	background-color: var(--boxes-background);
	padding: 26px;
	border-radius: 4px;
	margin-bottom: 20px;
	height: 100%;
}
.content-card-title {
	color: var(--titles);
	font-size: 1.2rem;
	line-height: 1.5;
	font-weight: normal;
	margin-top: 0;
	margin-bottom: 13px;
	max-width: 100%;
}
.content-card-description {
	color: var(--text);
	font-size: 1rem;
	line-height: 1.5;
	font-weight: normal;
	margin-top: 0;
	margin-bottom: 26px;
	max-width: 100%;
}
.content-card-icon {
	color: var(--highlight);
	font-size: 2rem;
	margin-bottom: 13px;
	max-width: 100%;
}
.content-card-link {
	color: var(--links);
	font-weight: bold;
	transition: all .2s;
	opacity: 1;
	max-width: 100%;
}
.content-card-link:hover {
	opacity: .7;
	text-decoration: none;
}
.content-card-button {
	color: var(--highlight);
	border: 1px solid var(--highlight);
    background: transparent;
	display: inline-block;
	text-align: center;
	font-size: .867rem;
    border-radius: 4px;
    padding: .5rem 1.15rem;
    text-decoration: none;
    transition: all .2s;
}
.content-card-button:hover {
	background-color: var(--highlight);
	color: #FFFFFF;
	text-decoration: none;
}

.switch-container {
    display: flex;
    align-items: center;
}

/* Button Group Switch
   ========================================================================== */

.switch {
    display: inline-block;
    margin-bottom: 0;
    margin-left: 0.5rem;
}

.switch-button {
    /* background and border when in "off" state */
    background: var(--highlight);
    border: 2px solid var(--highlight);
    display: grid; 
    grid-template-columns: 1fr 1fr;
    border-radius: 6px;
    color: #FFFFFF;
    position: relative;
    cursor: pointer;
    outline: 0;
    user-select: none;
}

.switch-input:not(:checked) + .switch-button .switch-button-left {
    /* text color when in "off" state */
    color: var(--highlight);
}

.switch-input {
    display: none;
}

.switch-button span {
    font-size: 1rem;
    padding: 0.2rem .7rem;
    text-align: center;
    z-index: 2;
    color: #FFFFFF;
    transition: color .2s;
}

.switch-button::before {
    content: '';
    position: absolute;
    background-color: #FFFFFF;
    box-shadow: 0 1px 3px rgba(0,0,0,.4);
    border-radius: 4px;
    top: 0;
    left: 0;
    height: 100%;
    width: 50%;
    z-index: 1;
    transition: left .3s cubic-bezier(0.175, 0.885, 0.320, 1), 
                padding .2s ease, margin .2s ease;
}

.switch-button:hover::before {
    will-change: padding;
}

.switch-button:active::before {
    padding-right: .4rem;
}


/* "On" state
   ========================== */

.switch-input:checked + .switch-button {
    /* background and border when in "on" state */
    background-color: var(--links);
    border-color: var(--links);
}

.switch-input:checked + .switch-button .switch-button-right {
    /* text color when in "on" state */
    color: var(--links);
}

.switch-input:checked + .switch-button::before {
    left: 50%;
}

.switch-input:checked + .switch-button:active::before {
    margin-left: -.4rem;
}

/* Checkbox in disabled state
   ========================== */

.switch-input[type="checkbox"]:disabled + .switch-button {
    opacity: 0.6;
    cursor: not-allowed;
}

Components - Switch Module