Files

• _wells.scss
• README.md

Github Page (customers only): https://github.com/esr360/Kayzen/tree/master/assets/modules/elements/wells

Module Overview

Examples

<div class="well">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed scelerisque efficitur sem et porta.</p>
</div>

Well - Dark

<div class="well-dark">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed scelerisque efficitur sem et porta.</p>
</div>

Well - Deep

<div class="well-deep">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed scelerisque efficitur sem et porta.</p>
</div>

Well - Comment

<div class="well-comment">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed scelerisque efficitur sem et porta.</p>
</div>

Well - Thumb

<div class="span-3">
    <div class="well-thumb">
        <img class="well_content" src="../../../images/envato/envato-1.png">
    </div>
</div>
<div class="span-3">
    <div class="well-dark-thumb">
        <img class="well_content" src="../../../images/envato/envato-1.png">
    </div>
</div>

Customizing

The wells can be customized using the following options:

Read the Configuration page to learn more about a module's configuration.

Property Name	Default Value	Description
background	white	The background color for wells.
border	1px solid rgba(black, 0.15)	The well border.
radius	0.4em	The radius for the wells' corners.
padding	1em	The well padding.
color	typography('colors', 'base')	The text color for wells.
dark-background	rgba(black, 0.4)	The background for wells when using the dark modifier.
dark-border	none	The border for wells when using the dark modifier.
dark-color	white	The text color for wells when using the dark modifier.
deep-padding	1.5em 2em	The padding for wells when using the deep modifier.
comment-padding	1.5em	The padding for wells when using the comment modifier.
thumb-height	76px	The height for wells when using the thumb modifier.
hover-background	color('brand', 'primary')	The background for wells when hovered when using the dark modifier.
hover-color	color('greyscale', 'white')	The text-color for wells when hovered when using the dark modifier.

To change one of the above values, pass your new value(s) to the wells() mixin in your theme file (e.g. assets/themes/Kayzen/_kayzen.scss).

@include wells((
    'background' : #9B58B5,
    'border'     : none,
    'radius'     : 0,
    'color'      : white
));