3.0.0 • Published 4 years ago

@booleon/modules

Licence

MIT

Version

3.0.0

Deps

Size

153 kB

Vulns

Weekly

Stars

Summary Dependency Versions

booleon/modules

Key value entries of CSS

Booleon modules are a pre-defined entry of css with keys that can be static (string) or dynamic (RegEx).

NPM version

Get Started

Instalation

npm i @booleon/modules

yarn add @booleon/modules

Examples

Key also can be Symbol whose value will be instantiated as a new RegExp() to be matched.

export const background = {
  [sym<'bg_color_COLOR'>('bg_color_(.*)')]: (value: string) =>
    `background-color:${handleColor(value)};`,
  bg_img: (value: string) => `background-image:url(${value});`,
  bg_transparent: () => 'background-color:transparent;',
  bg_repeat: () => 'background-repeat:repeat;',
  bg_norepeat: () => 'background-repeat:no-repeat;',
  bg_auto: () => 'background-size:auto;',
  bg_cover: () => 'background-size:cover;',
  bg_contain: () => 'background-size:contain;',
  bg_fixed: () => 'background-attachment:fixed;',
  bg_local: () => 'background-attachment:local;',
  bg_scroll: () => 'background-attachment:scroll;',
};

Available Modules

animation
background
border
container
cursor
filter
flex
font
gradient
grid
outline
shadow
sizing
spacing
transform
transition

animation

ani_name_`NAME`	ani_duration_`TIME`	ani_iteration_`NUMBER`	ani_iteration_infinite	ani_pause
ani_play	ani_forwards	ani_backwards	ani_linear	ani_ease
ani_ease_in	ani_ease_out	ani_ease_in_out

background

bg_`COLOR`	bg_img	bg_transparent	bg_repeat	bg_norepeat
bg_auto	bg_cover	bg_contain	bg_fixed	bg_local
bg_scroll

border

bd_`SIZE_STYLE_COLOR`	bdt_`SIZE_STYLE_COLOR`	bdb_`SIZE_STYLE_COLOR`	bdl_`SIZE_STYLE_COLOR`	bdr_`SIZE_STYLE_COLOR`
bdx_`SIZE_STYLE_COLOR`	bdy_`SIZE_STYLE_COLOR`	bd_color_`COLOR`	bdt_color_`COLOR`	bdb_color_`COLOR`
bdl_color_`COLOR`	bdr_color_`COLOR`	bdx_color_`COLOR`	bdy_color_`COLOR`	bd_width_`NUMBER`
bdt_width_`NUMBER`	bdb_width_`NUMBER`	bdl_width_`NUMBER`	bdr_width_`NUMBER`	bdx_width_`NUMBER`
bdy_width_`NUMBER`	bd_radius_`VALUE`	bdtr_radius_`VALUE`	bdtl_radius_`VALUE`	bdt_radius_`VALUE`
bdbr_radius_`VALUE`	bdbl_radius_`VALUE`	bdb_radius_`VALUE`	bdl_radius_`VALUE`	bdr_radius_`VALUE`
bd_style_none	bd_style_hidden	bd_style_dotted	bd_style_dashed	bd_style_solid
bd_style_double	bd_style_groove	bd_style_ridge	bd_style_inset	bd_style_outset
bd_style_initial	bd_style_inherit	bdt_style_none	bdt_style_hidden	bdt_style_dotted
bdt_style_dashed	bdt_style_solid	bdt_style_double	bdt_style_groove	bdt_style_ridge
bdt_style_inset	bdt_style_outset	bdt_style_initial	bdt_style_inherit	bdb_style_none
bdb_style_hidden	bdb_style_dotted	bdb_style_dashed	bdb_style_solid	bdb_style_double
bdb_style_groove	bdb_style_ridge	bdb_style_inset	bdb_style_outset	bdb_style_initial
bdb_style_inherit	bdl_style_none	bdl_style_hidden	bdl_style_dotted	bdl_style_dashed
bdl_style_solid	bdl_style_double	bdl_style_groove	bdl_style_ridge	bdl_style_inset
bdl_style_outset	bdl_style_initial	bdl_style_inherit	bdr_style_none	bdr_style_hidden
bdr_style_dotted	bdr_style_dashed	bdr_style_solid	bdr_style_double	bdr_style_groove
bdr_style_ridge	bdr_style_inset	bdr_style_outset	bdr_style_initial	bdr_style_inherit
bdx_style_none	bdx_style_hidden	bdx_style_dotted	bdx_style_dashed	bdx_style_solid
bdx_style_double	bdx_style_groove	bdx_style_ridge	bdx_style_inset	bdx_style_outset
bdx_style_initial	bdx_style_inherit	bdy_style_none	bdy_style_hidden	bdy_style_dotted
bdy_style_dashed	bdy_style_solid	bdy_style_double	bdy_style_groove	bdy_style_ridge
bdy_style_inset	bdy_style_outset	bdy_style_initial	bdy_style_inherit	bd_collapse
bd_separate	bd_none	bdt_none	bdb_none	bdl_none
bdr_none	bdx_none	bdy_none

container

z_`NUMBER`	op_`NUMBER`	top_`NUMBER`	bottom_`NUMBER`	left_`NUMBER`
right_`NUMBER`	z_max	z_auto	sc_auto	sc_hidden
sc_visible	scy_auto	scy_hidden	scy_visible	scx_auto
scx_hidden	scx_visible	fixed	absolute	relative
sticky	top	right	bottom	left
inset	inset_x	inset_y	fit_contain	fit_cover
fit_fill	fit_none	hidden	visible	invisible
noappearance	rz_none	rz	rzy	rzx
content

cursor

cr_auto	cr_default	cr_pointer	cr_wait	cr_text
cr_move	cr_disallowed	cr_cross	cr_grabbing	cr_help
cry_resize	cra_resize	crb_resize	crx_resize	cr_no_drop
cr_none	cr_progress	cr_zoom_in	cr_zoom_out	cr_noevents
cr_events	cr_url

filter

fl_blur_`SIZE`	fl_brightness_`SIZE`	fl_contrast_`SIZE`	fl_grayscale_`SIZE`	fl_hue_`SIZE`
fl_opacity_`SIZE`	fl_saturate_`SIZE`	fl_sepia_`SIZE`	fl_sd_`SIZE`	fl_invert

flex

flex	wrap	no_wrap	reverse_wrap	grow
col	row	row_reverse	col_reverse	main_between
main_around	main_evenly	main_center	cross_center	main_stretch
cross_stretch	main_start	cross_start	main_end	cross_end

font

ft_border_`COLOR`	ft_color_`COLOR`	ft_size_`NUMBER`	ft_spacing_`NUMBER`	ft_height_`NUMBER`
ft_family_`FAMILY`	ft_family_sans	ft_family_serif	ft_family_mono	ft_select_none
ft_select_auto	ft_select_text	ft_select_contain	ft_select_all	ft_select_inherit
ft_select_initial	ft_select_unset	ft_align_left	ft_align_right	ft_align_center
ft_align_justify	ft_align_initial	ft_align_inherit	ft_transform_none	ft_transform_normal
ft_transform_capitalize	ft_transform_uppercase	ft_transform_lowercase	ft_transform_initial	ft_transform_inherit
ft_italic	ft_weight_lightest	ft_weight_lighter	ft_weight_light	ft_weight_normal
ft_weight_medium	ft_weight_semibold	ft_weight_bold	ft_weight_bolder	ft_weight_black
li_none	li_disc	li_decimal	li_inside	li_outside
ft_underline	ft_line_through	ft_no_underline	ft_wrap_space	ft_wrap_word
ft_wrap_letter	ft_no_wrap	ft_truncate

gradient

gx_`COLOR`	gy_`COLOR`	gt_`COLOR`	gb_`COLOR`	gl_`COLOR`
gr_`COLOR`

grid

rows_`FRACTIONS`	cols_`FRACTIONS`	area_`AREA`	cols_span_`NUMBER`	rows_span_`NUMBER`
cols_start_`NUMBER`	cols_end_`NUMBER`	rows_start_`NUMBER`	rows_end_`NUMBER`	grid
areas

outline

ol_color_`COLOR`	ol_width_`NUMBER`	ol_none	ol_style_auto	ol_style_none
ol_style_dotted	ol_style_dashed	ol_style_solid	ol_style_double	ol_style_groove
ol_style_ridge	ol_style_inset	ol_style_outset	ol_style_inherit	ol_style_initial
ol_style_unset

shadow

sd_1	sd_2	sd_3	sd_4	sd_6
sd_8	sd_9	sd_12	sd_16	sd_24
sdi_1	sdi_2	sdi_3	sdi_4	sdi_6
sdi_8	sdi_9	sdi_12	sdi_16	sdi_24

sizing

h_`NUMBER`	h_max_`NUMBER`	h_min_`NUMBER`	h_min_`NUMBER`	w_`NUMBER`
w_max_`NUMBER`	w_min_`NUMBER`	w_min_`NUMBER`	h_full	h_max_full
h_min_full	h_auto	h_max_auto	h_min_auto	h_screen
h_max_screen	h_min_screen	w_full	w_max_full	w_min_full
w_auto	w_max_auto	w_min_auto	w_screen	w_max_screen
w_min_screen

spacing

m_`NUMBER`	mt_`NUMBER`	mb_`NUMBER`	ml_`NUMBER`	mr_`NUMBER`
mx_`NUMBER`	my_`NUMBER`	p_`NUMBER`	pt_`NUMBER`	pb_`NUMBER`
pl_`NUMBER`	pr_`NUMBER`	px_`NUMBER`	py_`NUMBER`	m_auto
mt_auto	mb_auto	ml_auto	mr_auto	mx_auto
my_auto

transform

tf_sl_`NUMBER`	tf_slx_`NUMBER`	tf_sly_`NUMBER`	tf_rt_`NUMBER`	tf_sk_`NUMBER`
tf_skx_`NUMBER`	tf_sky_`NUMBER`	tf_tl_`NUMBER`	tf_tlx_`NUMBER`	tf_tly_`NUMBER`
tf_ori_`VALUE`

transition

ts_delay_`TIME`	ts_duration_`TIME`	ts	ts_none	ts_all
ts_colors	ts_opacity	ts_shadow	ts_transform	ts_ease_linear
ts_ease_in	ts_ease_out	ts_ease_in_out