look-and-feel.md

Look and feel

Look and feel define how your elements (usually atoms) look like in terms of basic styling (border-radius, etc...).

Features

• Let you setting up some look and feel properties like padding-vertical, padding-horizontal, border-radius, etc... that will be used across your components
• em unit based that let you scale your component has you need
• Widely used across shipped components and web components to keep a consistent look across your website
• Use the s-setup mixin to setting up your look and feel
• Use the s-look-and-feel or s-lnf function to set a look and feel:

Available properties

Here's the list of properties that are available for configuration and styling into look and feel:

• padding-vertical {em} : Specify the padding vertical
• padding-horizontal {em} : Specify the padding horizontal
• border-radius {em} : Specify the border radius to use
• disabled-opacity {unitless} : Specify the opacity for disabled elements
• line-height {unitless} : Specify the line-height to use

Setting up your look and feel

To setting up your look and feel, use the s-setup mixin like so:

@include s-setup((
	look-and-feel : (
		border-radius : 0em,
		padding-vertical : 1em,
		padding-horizontal : .8em,
		disabled-opacity : .5,
		line-height : 1.4
	)
));

Usage example

Here's how to use and apply your look and feel across your components:

.my-cool-item {
	padding: s-lnf(padding-vertical) s-lnf(padding-horizontal);
	border-radius: s-lnf(border-radius);
	line-height: s-lnf(line-height);

	&:disabled {
		opacity : s-lnf(disabled-opacity);
	}
}