Fain Component Library

Switch: Large 

<style>
    .index__switch___1lgcV {
        height: 2rem;
        position: relative;
        margin-bottom: 1rem;
        outline: 0;
        font-size: 0.875rem;
        font-weight: bold;
        color: #fefefe;
        user-select: none;
    }
    
    .index__switch-input___2MYgD {
        position: absolute;
        margin-bottom: 0;
        opacity: 0;
    }
    
    .index__switch-paddle___TOshZ {
        position: relative;
        display: block;
        width: 4rem;
        height: 2rem;
        border-radius: 0;
        background: #cacaca;
        transition: all 0.25s ease-out;
        font-weight: inherit;
        color: inherit;
        cursor: pointer;
    }
    
    input+.index__switch-paddle___TOshZ {
        margin: 0;
    }
    
    .index__switch-paddle___TOshZ::after {
        position: absolute;
        top: 0.25rem;
        left: 0.25rem;
        display: block;
        width: 1.5rem;
        height: 1.5rem;
        transform: translate3d(0, 0, 0);
        border-radius: 0;
        background: #fefefe;
        transition: all 0.25s ease-out;
        content: '';
    }
    
    input:checked~.index__switch-paddle___TOshZ {
        background: #1779ba;
    }
    
    input:checked~.index__switch-paddle___TOshZ::after {
        left: 2.25rem;
    }
    
    [data-whatinput='mouse'] input:focus~.index__switch-paddle___TOshZ {
        outline: 0;
    }
    
    .index__switch-active___3hMEa,
    .index__switch-inactive___at5Yh {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
    }
    
    .index__switch-active___3hMEa {
        left: 8%;
        display: none;
    }
    
    input:checked+label>.index__switch-active___3hMEa {
        display: block;
    }
    
    .index__switch-inactive___at5Yh {
        right: 15%;
    }
    
    input:checked+label>.index__switch-inactive___at5Yh {
        display: none;
    }
    
    .index__switch___1lgcV.index__tiny___GBwvq {
        height: 1.5rem;
    }
    
    .index__switch___1lgcV.index__tiny___GBwvq .index__switch-paddle___TOshZ {
        width: 3rem;
        height: 1.5rem;
        font-size: 0.625rem;
    }
    
    .index__switch___1lgcV.index__tiny___GBwvq .index__switch-paddle___TOshZ::after {
        top: 0.25rem;
        left: 0.25rem;
        width: 1rem;
        height: 1rem;
    }
    
    .index__switch___1lgcV.index__tiny___GBwvq input:checked~.index__switch-paddle___TOshZ::after {
        left: 1.75rem;
    }
    
    .index__switch___1lgcV.index__small___3DPOv {
        height: 1.75rem;
    }
    
    .index__switch___1lgcV.index__small___3DPOv .index__switch-paddle___TOshZ {
        width: 3.5rem;
        height: 1.75rem;
        font-size: 0.75rem;
    }
    
    .index__switch___1lgcV.index__small___3DPOv .index__switch-paddle___TOshZ::after {
        top: 0.25rem;
        left: 0.25rem;
        width: 1.25rem;
        height: 1.25rem;
    }
    
    .index__switch___1lgcV.index__small___3DPOv input:checked~.index__switch-paddle___TOshZ::after {
        left: 2rem;
    }
    
    .index__switch___1lgcV.index__large___3jizn {
        height: 2.5rem;
    }
    
    .index__switch___1lgcV.index__large___3jizn .index__switch-paddle___TOshZ {
        width: 5rem;
        height: 2.5rem;
        font-size: 1rem;
    }
    
    .index__switch___1lgcV.index__large___3jizn .index__switch-paddle___TOshZ::after {
        top: 0.25rem;
        left: 0.25rem;
        width: 2rem;
        height: 2rem;
    }
    
    .index__switch___1lgcV.index__large___3jizn input:checked~.index__switch-paddle___TOshZ::after {
        left: 2.75rem;
    }
    
    .index__showForSR___CDz9c {
        position: absolute !important;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
    }
</style>
<p><span>switch--large</span><span class="index__switch___1lgcV index__large___3jizn"><input type="checkbox" name="switch--large" class="index__switch-input___2MYgD" id="switch--large"/><label class="index__switch-paddle___TOshZ" for="switch--large"></label></span></p>
 
import React from 'react';
import Switch from 'fain/controls/Switch';

export default function SwitchExample(props) {
  return (
    <p>
      <span>{props.meta.self.handle}</span>
      <Switch
        activeLabel={props.activeLabel}
        componentClass="span"
        defaultChecked={props.checked}
        inactiveLabel={props.inactiveLabel}
        name={props.meta.self.handle}
        size={props.size}
        srLabel={props.srLabel}
      />
    </p>
  );
}

{
  "size": "large"
}
  • Content: 
    // @flow

import classNames from 'classnames';
import React from 'react';

import styles from './index.scss';

type Props = {
  activeLabel?: string,
  className?: ClassName,
  componentClass: string,
  id?: string,
  inactiveLabel?: string,
  inputClassName?: ClassName,
  labelClassName?: ClassName,
  name: string,
  size: 'tiny' | 'small' | 'large',
  srLabel?: string,
  type: 'checkbox' | 'radio',
};

function renderInnerLabel(label?: string, className: ClassName) {
  if (!label) { return null; }
  return <span aria-hidden="true" className={className}>{label}</span>;
}

function renderContent(srLabel?: string) {
  if (!srLabel) { return null; }
  return <span className={styles.showForSR}>{srLabel}</span>;
}

function Switch(props: Props) {
  const { activeLabel, componentClass: Container, inactiveLabel,
          inputClassName, labelClassName, srLabel, ...other } = props;
  const innerId = props.id || props.name;
  const switchCN = classNames(
    props.className,
    styles.switch,
    {
      [styles.large]: props.size === 'large',
      [styles.small]: props.size === 'small',
      [styles.tiny]: props.size === 'tiny',
    },
  );

  return (
    <Container className={switchCN}>
      <input
        {...other}
        className={classNames(inputClassName, styles.switchInput)}
        id={innerId}
        type={props.type}
        name={props.name}
      />
      <label
        className={classNames(labelClassName, styles.switchPaddle)}
        htmlFor={innerId}
      >
        {renderContent(srLabel)}
        {renderInnerLabel(activeLabel, styles.switchActive)}
        {renderInnerLabel(inactiveLabel, styles.switchInactive)}
      </label>
    </Container>
  );
}

Switch.defaultProps = {
  componentClass: 'div',
  type: 'checkbox',
};

export default Switch;
  • URL: /components/raw/switch/index.jsx
  • Filesystem Path: src/controls/Switch/index.jsx
  • Size: 1.8 KB
  • Content: 
    @import 'fain/styles/base';
@import 'foundation-sites/scss/components/switch';

@include foundation-switch;

// Good candidate for utility placeholder
%show-for-sr {
  @include element-invisible;
}

.showForSR {
  @extend %show-for-sr;
}
  • URL: /components/raw/switch/index.scss
  • Filesystem Path: src/controls/Switch/index.scss
  • Size: 238 Bytes

There are no notes for this item.