react-jam-ui/components/variables.styl

React JAM UI components

/* BreakPoints */
$breakpoints = {//for generate @media and grid + containers
    xs: {
        breakpoint: 480px
        width: 460px
    },
    sm: {
        breakpoint: 750px
        width: 730px
    },
    md: {
        breakpoint: 1200px
        width: 1100px
    },
    xl: {
        breakpoint: 1600px
        width: 1500px
    },
    xxl: {
        breakpoint: 1920px
        width: 1720px
    }
}

/* Layout */ //-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 'sans-serif'
$layout = {
    color: #000000,
    bg: #FFFFFF,
    font-family: "'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 'sans-serif'",
    font-size: 14px,
    link: {
        default: #0f90fd,
        hover: #0f6dbc
    },
    p-gap: 20px
}

/* Grid */
$grid = {
    default: {//required (def row class)
        cols: 12,
        gap: 15px //Important! This used for container padding
    }
}

/* Sizes (Buttons, inputs) */
$sizes = {
    default: {//size without size class, required!
        height: 32px,
        font-size: 14px
    },
    xs: {//extra small
        height: 20px,
        font-size: 12px
    },
    sm: {//small
        height: 26px,
        font-size: 14px
    },
    lg: {//large
        height: 38px,
        font-size: 16px
    },
    xl: {//extra large
        height: 68px,
        font-size: 18px
    }
}

/* Buttons  */
$buttons = {
    default: {
        default: {
            bg: rgba(32, 133, 228, 1),
            color: #FFFFFF,
            border: 1px solid rgba(16, 87, 153, 1),
            radius: 8px,
            textShadow: 0px 1px 0px rgba(0, 0, 0, 0.4)
        },
        hover: {
            bg: linear-gradient(rgba(84, 158, 255, 1) 0%, rgba(46, 109, 210, 1) 100%),
            color: #FFFFFF,
            border: 2px solid rgba(40, 116, 210, 1),
            radius: 8px,
            textShadow: 0px 1px 0px rgba(0, 0, 0, 0.4)
        },
        active: {
            bg: linear-gradient(rgba(57, 140, 243, 1) 0%, rgba(25, 109, 210, 1) 100%),
            color: #FFFFFF,
            border: 2px solid rgba(40, 116, 210, 1),
            radius: 8px,
            shadow: inset 0px 3px 7px 0px rgba(0, 0, 0, 0.35),
            textShadow: 0px 1px 0px rgba(0, 0, 0, 0.4)
        }
    }
}

/* Inputs */
$inputs = {
    default: {
        type: 'default',
        default: {
            bg: #FFFFFF,
            color: #404040,
            border: #d0d0d0,
            radius: 4px
        },
        focus: {
            bg: #FFFFFF,
            color: #40FF40,
            border: green,
            radius: 4px
        },
        valid: {
            bg: lighten(#ebebeb, 20%),
            color: #FF4040,
            border: red,
            radius: 4px
        },
        error: {
            bg: darken(#ebebeb, 20%),
            color: #4040FF,
            border: red,
            radius: 4px
        }
    },    
    material: {
        type: 'material',
        default: {
            bg: #FFFFFF,
            color: #404040,
            border: #2085e4,
            radius: 4px
        },
        focus: {
            bg: #FFFFFF,
            color: #40FF40,
            border: green,
            radius: 4px
        },
        valid: {
            bg: lighten(#ebebeb, 20%),
            color: #FF4040,
            border: red,
            radius: 4px
        },
        error: {
            bg: darken(#ebebeb, 20%),
            color: #4040FF,
            border: red,
            radius: 4px
        }
    }
}

/* Forms */
$forms = {
    gap: 20px,
    hLabel: 200px,
    labelGap: 5px
}

/* Loaders */
$loaders = {
    default: {
        color: #2085e4,
        type: 'cube-grid'
    }
}