Fain Component Library

Button: Coloring: Disabled 

<style>
    .index__button___1Qw35 {
        appearance: none;
        background: transparent;
        border: 0;
        border-radius: 0;
        line-height: 1;
        padding: 0;
    }
    
    [data-whatinput='mouse'] .index__button___1Qw35 {
        outline: 0;
    }
    
    .index__button___3D3Cg {
        display: inline-block;
        vertical-align: middle;
        margin: 0 0 1rem 0;
        padding: 0.85em 1em;
        -webkit-appearance: none;
        border: 1px solid transparent;
        border-radius: 0;
        transition: background-color 0.25s ease-out, color 0.25s ease-out;
        font-size: 0.9rem;
        line-height: 1;
        text-align: center;
        cursor: pointer;
        background-color: #1779ba;
        color: #fefefe;
    }
    
    [data-whatinput='mouse'] .index__button___3D3Cg {
        outline: 0;
    }
    
    .index__button___3D3Cg:hover,
    .index__button___3D3Cg:focus {
        background-color: #14679e;
        color: #fefefe;
    }
    
    .index__button___3D3Cg.index__tiny___2Sy8s {
        font-size: 0.6rem;
    }
    
    .index__button___3D3Cg.index__small___1dPUD {
        font-size: 0.75rem;
    }
    
    .index__button___3D3Cg.index__large___W9JoR {
        font-size: 1.25rem;
    }
    
    .index__button___3D3Cg.index__expanded___2ZeWM {
        display: block;
        width: 100%;
        margin-right: 0;
        margin-left: 0;
    }
    
    .index__button___3D3Cg.index__primary___1k85F {
        background-color: #1779ba;
        color: #fefefe;
    }
    
    .index__button___3D3Cg.index__primary___1k85F:hover,
    .index__button___3D3Cg.index__primary___1k85F:focus {
        background-color: #126195;
        color: #fefefe;
    }
    
    .index__button___3D3Cg.index__secondary___12AKQ {
        background-color: #767676;
        color: #fefefe;
    }
    
    .index__button___3D3Cg.index__secondary___12AKQ:hover,
    .index__button___3D3Cg.index__secondary___12AKQ:focus {
        background-color: #5e5e5e;
        color: #fefefe;
    }
    
    .index__button___3D3Cg.index__success___1LQ1d {
        background-color: #3adb76;
        color: #0a0a0a;
    }
    
    .index__button___3D3Cg.index__success___1LQ1d:hover,
    .index__button___3D3Cg.index__success___1LQ1d:focus {
        background-color: #22bb5b;
        color: #0a0a0a;
    }
    
    .index__button___3D3Cg.index__warning___1rgyQ {
        background-color: #ffae00;
        color: #0a0a0a;
    }
    
    .index__button___3D3Cg.index__warning___1rgyQ:hover,
    .index__button___3D3Cg.index__warning___1rgyQ:focus {
        background-color: #cc8b00;
        color: #0a0a0a;
    }
    
    .index__button___3D3Cg.index__alert___3q8Rw {
        background-color: #cc4b37;
        color: #fefefe;
    }
    
    .index__button___3D3Cg.index__alert___3q8Rw:hover,
    .index__button___3D3Cg.index__alert___3q8Rw:focus {
        background-color: #a53b2a;
        color: #fefefe;
    }
    
    .index__button___3D3Cg.index__hollow___3pmge {
        border: 1px solid #1779ba;
        color: #1779ba;
    }
    
    .index__button___3D3Cg.index__hollow___3pmge,
    .index__button___3D3Cg.index__hollow___3pmge:hover,
    .index__button___3D3Cg.index__hollow___3pmge:focus {
        background-color: transparent;
    }
    
    .index__button___3D3Cg.index__hollow___3pmge:hover,
    .index__button___3D3Cg.index__hollow___3pmge:focus {
        border-color: #0c3d5d;
        color: #0c3d5d;
    }
    
    .index__button___3D3Cg.index__hollow___3pmge.index__primary___1k85F {
        border: 1px solid #1779ba;
        color: #1779ba;
    }
    
    .index__button___3D3Cg.index__hollow___3pmge.index__primary___1k85F:hover,
    .index__button___3D3Cg.index__hollow___3pmge.index__primary___1k85F:focus {
        border-color: #0c3d5d;
        color: #0c3d5d;
    }
    
    .index__button___3D3Cg.index__hollow___3pmge.index__secondary___12AKQ {
        border: 1px solid #767676;
        color: #767676;
    }
    
    .index__button___3D3Cg.index__hollow___3pmge.index__secondary___12AKQ:hover,
    .index__button___3D3Cg.index__hollow___3pmge.index__secondary___12AKQ:focus {
        border-color: #3b3b3b;
        color: #3b3b3b;
    }
    
    .index__button___3D3Cg.index__hollow___3pmge.index__success___1LQ1d {
        border: 1px solid #3adb76;
        color: #3adb76;
    }
    
    .index__button___3D3Cg.index__hollow___3pmge.index__success___1LQ1d:hover,
    .index__button___3D3Cg.index__hollow___3pmge.index__success___1LQ1d:focus {
        border-color: #157539;
        color: #157539;
    }
    
    .index__button___3D3Cg.index__hollow___3pmge.index__warning___1rgyQ {
        border: 1px solid #ffae00;
        color: #ffae00;
    }
    
    .index__button___3D3Cg.index__hollow___3pmge.index__warning___1rgyQ:hover,
    .index__button___3D3Cg.index__hollow___3pmge.index__warning___1rgyQ:focus {
        border-color: #805700;
        color: #805700;
    }
    
    .index__button___3D3Cg.index__hollow___3pmge.index__alert___3q8Rw {
        border: 1px solid #cc4b37;
        color: #cc4b37;
    }
    
    .index__button___3D3Cg.index__hollow___3pmge.index__alert___3q8Rw:hover,
    .index__button___3D3Cg.index__hollow___3pmge.index__alert___3q8Rw:focus {
        border-color: #67251a;
        color: #67251a;
    }
    
    .index__button___3D3Cg.index__disabled___2nrei,
    .index__button___3D3Cg[disabled] {
        opacity: 0.25;
        cursor: not-allowed;
    }
    
    .index__button___3D3Cg.index__disabled___2nrei:hover,
    .index__button___3D3Cg.index__disabled___2nrei:focus,
    .index__button___3D3Cg[disabled]:hover,
    .index__button___3D3Cg[disabled]:focus {
        background-color: #1779ba;
        color: #fefefe;
    }
    
    .index__button___3D3Cg.index__disabled___2nrei.index__primary___1k85F,
    .index__button___3D3Cg[disabled].index__primary___1k85F {
        opacity: 0.25;
        cursor: not-allowed;
    }
    
    .index__button___3D3Cg.index__disabled___2nrei.index__primary___1k85F:hover,
    .index__button___3D3Cg.index__disabled___2nrei.index__primary___1k85F:focus,
    .index__button___3D3Cg[disabled].index__primary___1k85F:hover,
    .index__button___3D3Cg[disabled].index__primary___1k85F:focus {
        background-color: #1779ba;
        color: #fefefe;
    }
    
    .index__button___3D3Cg.index__disabled___2nrei.index__secondary___12AKQ,
    .index__button___3D3Cg[disabled].index__secondary___12AKQ {
        opacity: 0.25;
        cursor: not-allowed;
    }
    
    .index__button___3D3Cg.index__disabled___2nrei.index__secondary___12AKQ:hover,
    .index__button___3D3Cg.index__disabled___2nrei.index__secondary___12AKQ:focus,
    .index__button___3D3Cg[disabled].index__secondary___12AKQ:hover,
    .index__button___3D3Cg[disabled].index__secondary___12AKQ:focus {
        background-color: #767676;
        color: #fefefe;
    }
    
    .index__button___3D3Cg.index__disabled___2nrei.index__success___1LQ1d,
    .index__button___3D3Cg[disabled].index__success___1LQ1d {
        opacity: 0.25;
        cursor: not-allowed;
    }
    
    .index__button___3D3Cg.index__disabled___2nrei.index__success___1LQ1d:hover,
    .index__button___3D3Cg.index__disabled___2nrei.index__success___1LQ1d:focus,
    .index__button___3D3Cg[disabled].index__success___1LQ1d:hover,
    .index__button___3D3Cg[disabled].index__success___1LQ1d:focus {
        background-color: #3adb76;
        color: #fefefe;
    }
    
    .index__button___3D3Cg.index__disabled___2nrei.index__warning___1rgyQ,
    .index__button___3D3Cg[disabled].index__warning___1rgyQ {
        opacity: 0.25;
        cursor: not-allowed;
    }
    
    .index__button___3D3Cg.index__disabled___2nrei.index__warning___1rgyQ:hover,
    .index__button___3D3Cg.index__disabled___2nrei.index__warning___1rgyQ:focus,
    .index__button___3D3Cg[disabled].index__warning___1rgyQ:hover,
    .index__button___3D3Cg[disabled].index__warning___1rgyQ:focus {
        background-color: #ffae00;
        color: #fefefe;
    }
    
    .index__button___3D3Cg.index__disabled___2nrei.index__alert___3q8Rw,
    .index__button___3D3Cg[disabled].index__alert___3q8Rw {
        opacity: 0.25;
        cursor: not-allowed;
    }
    
    .index__button___3D3Cg.index__disabled___2nrei.index__alert___3q8Rw:hover,
    .index__button___3D3Cg.index__disabled___2nrei.index__alert___3q8Rw:focus,
    .index__button___3D3Cg[disabled].index__alert___3q8Rw:hover,
    .index__button___3D3Cg[disabled].index__alert___3q8Rw:focus {
        background-color: #cc4b37;
        color: #fefefe;
    }
    
    .index__button___3D3Cg.index__dropdown___3ggQf::after {
        display: block;
        width: 0;
        height: 0;
        border: inset 0.4em;
        content: '';
        border-bottom-width: 0;
        border-top-style: solid;
        border-color: #fefefe transparent transparent;
        position: relative;
        top: 0.4em;
        display: inline-block;
        float: right;
        margin-left: 1em;
    }
    
    .index__button___3D3Cg.index__arrow-only___uTRlu::after {
        top: -0.1em;
        float: none;
        margin-left: 0;
    }
</style>
<button color="disabled" type="button" class="index__button___3D3Cg index__disabled___2nrei index__button___1Qw35">Disabled</button>
 
import React from 'react';
import Button from 'fain/controls/Button';

export default function ButtonExample(props) {
  return (
    <Button
      color={props.color}
      expanded={props.expanded}
      size={props.size}
    >{props.children}</Button>
  );
}

{
  "children": "Disabled",
  "color": "disabled"
}
  • Content: 
    // @flow

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

import BaseButton from '../../globals/Button';

import styles from './index.scss';

type Props = {
  className: ClassName,
  color: string,
  expanded: boolean,
  size: 'tiny' | 'small' | 'default' | 'large',
  type: 'button' | 'submit',
};

function Button(props: Props) {
  const buttonCN = classNames(
    props.className,
    styles.button,
    styles[props.size],
    styles[props.color],
    {
      [styles.expanded]: props.expanded,
    },
  );

  return (
    <BaseButton
      {...props}
      className={buttonCN}
      type={props.type}
    />
  );
}

Button.defaultProps = {
  expanded: false,
  size: 'default',
  type: 'button',
};

export default Button;
  • URL: /components/raw/button/index.jsx
  • Filesystem Path: src/controls/Button/index.jsx
  • Size: 746 Bytes
  • Content: 
    @import 'fain/styles/base';
@import 'foundation-sites/scss/components/button';

@include foundation-button;
  • URL: /components/raw/button/index.scss
  • Filesystem Path: src/controls/Button/index.scss
  • Size: 108 Bytes

There are no notes for this item.