The list of all the available CSS properties for customizing the Avarda Checkout

aco-custom-css-styles-list.php

/**
 * The list of all the available CSS properties for customizing the Avarda Checkout.
 * This list can be used as reference when customizing the Avarda Checkout.
 */
$styles = array(
		'buttons'       =>
		array(
			'primary'   =>
			array(
				'base'         =>
				array(
					'backgroundColor' => '#4c4c4c',
					'borderColor'     => '#3f3f3f',
					'color'           => '#fff',
				),
				'minHeight'    => 48,
				'lineHeight'   => 24,
				'fontWeight'   => 700,
				'fontSize'     => 18,
				'borderWidth'  => 1,
				'boxShadow'    =>
				array(
					'hOffset' => 0,
					'vOffset' => 7,
					'blur'    => 3,
					'spread'  => -3,
					'color'   => '#000',
				),
				'padding'      =>
				array(
					'top'    => 10,
					'right'  => 16,
					'bottom' => 10,
					'left'   => 16,
				),
				'hover'        =>
				array(
					'backgroundColor' => '#333333',
					'borderColor'     => '#212121',
					'color'           => '#fff',
				),
				'disabled'     =>
				array(
					'backgroundColor' => '#25B5BC',
					'borderColor'     => '#25B5BC',
					'color'           => '#FFFFFF',
				),
				'borderRadius' =>
				array(
					'topLeft'     => 4,
					'topRight'    => 4,
					'bottomLeft'  => 4,
					'bottomRight' => 4,
				),
			),
			'secondary' =>
			array(
				'base'         =>
				array(
					'backgroundColor' => '#fff',
					'borderColor'     => '#dcdcdc',
					'color'           => '#333',
				),
				'minHeight'    => 48,
				'lineHeight'   => 24,
				'fontWeight'   => 500,
				'borderWidth'  => 1,
				'fontSize'     => 16,
				'boxShadow'    =>
				array(
					'hOffset' => 0,
					'vOffset' => 7,
					'blur'    => 3,
					'spread'  => -3,
					'color'   => '#000',
				),
				'padding'      =>
				array(
					'top'    => 10,
					'right'  => 16,
					'bottom' => 10,
					'left'   => 16,
				),
				'hover'        =>
				array(
					'backgroundColor' => '#e6e6e6',
					'borderColor'     => '#adadad',
					'color'           => '#000',
				),
				'disabled'     =>
				array(
					'backgroundColor' => '#25B5BC',
					'borderColor'     => '#25B5BC',
					'color'           => '#FFFFFF',
				),
				'borderRadius' =>
				array(
					'topLeft'     => 4,
					'topRight'    => 4,
					'bottomLeft'  => 4,
					'bottomRight' => 4,
				),
			),
		),
		'fontFamilies'  =>
		array(
			0 => 'Lato',
			1 => 'Helvetica',
		),
		'headings'      =>
		array(
			'h1' =>
			array(
				'fontSize'   => 26,
				'lineHeight' => 30,
				'display'    => 'block',
				'fontWeight' => 700,
				'color'      => '#000',
			),
			'h2' =>
			array(
				'fontSize'   => 22,
				'lineHeight' => 26,
				'display'    => 'block',
				'fontWeight' => 700,
				'color'      => '#000',
			),
			'h3' =>
			array(
				'fontSize'   => 18,
				'lineHeight' => 20,
				'display'    => 'block',
				'fontWeight' => 700,
				'color'      => '#000',
			),
			'h4' =>
			array(
				'fontSize'   => 16,
				'lineHeight' => 16,
				'display'    => 'block',
				'fontWeight' => 700,
				'color'      => '#000',
			),
		),
		'input'         =>
		array(
			'height'                 => 50,
			'fontSize'               => 16,
			'fontWeight'             => 400,
			'backgroundColorValid'   => '#fff',
			'backgroundColorInvalid' => '#fee7e7',
			'backgroundBorderColor'  => '#dcdcdc',
			'borderRadius'           =>
			array(
				'topLeft'     => 0,
				'topRight'    => 0,
				'bottomLeft'  => 0,
				'bottomRight' => 0,
			),
			'borderWidth'            => 1,
			'borderStyle'            => 'solid',
		),
		'footer'        =>
		array(
			'fontSize'   => 12,
			'fontWeight' => 400,
			'color'      => '#777777',
		),
		'links'         =>
		array(
			'default'           =>
			array(
				'fontSize'       => 13,
				'fontWeight'     => 400,
				'color'          => '#4c4c4c',
				'textDecoration' => 'underline',
				'hover'          =>
				array(
					'color'          => '#262626',
					'textDecoration' => 'underline',
				),
			),
			'blue'              =>
			array(
				'fontSize'       => 13,
				'fontWeight'     => 400,
				'color'          => '#009fe3',
				'textDecoration' => 'underline',
				'hover'          =>
				array(
					'color'          => '#006996',
					'textDecoration' => 'underline',
				),
			),
			'biggerBlue'        =>
			array(
				'fontSize'       => 16,
				'fontWeight'     => 400,
				'color'          => '#009fe3',
				'textDecoration' => 'underline',
				'hover'          =>
				array(
					'color'          => '#006996',
					'textDecoration' => 'underline',
				),
			),
			'smallNoDecoration' =>
			array(
				'fontSize'       => 11,
				'fontWeight'     => 400,
				'color'          => '#4c4c4c',
				'textDecoration' => 'none',
				'hover'          =>
				array(
					'color'          => '#262626',
					'textDecoration' => 'none',
				),
			),
			'smallBlack'        =>
			array(
				'fontSize'       => 11,
				'fontWeight'     => 400,
				'color'          => '#4c4c4c',
				'textDecoration' => 'underline',
				'hover'          =>
				array(
					'color'          => '#262626',
					'textDecoration' => 'underline',
				),
			),
		),
		'icons'         =>
		array(
			'card' =>
			array(
				'backgroundUrl' => 'https://avdonl0p0documentation.blob.core.windows.net/static/Svg_example3.svg.png',
				'width'         => 30,
				'height'        => 30,
			),
		),
		'checkbox'      =>
		array(
			'primary' =>
			array(
				'width'                => 20,
				'height'               => 20,
				'checkedUrl'           => 'https://avdonl0p0documentation.blob.core.windows.net/static/ae71d5d08b.png',
				'uncheckedUrl'         => 'https://avdonl0p0documentation.blob.core.windows.net/static/891e5ce08b.png',
				'checkedDisabledUrl'   => 'https://avdonl0p0documentation.blob.core.windows.net/static/ae71d5d08b_disabled.png',
				'uncheckedDisabledUrl' => 'https://avdonl0p0documentation.blob.core.windows.net/static/891e5ce08b_disabled.png',
			),
		),
		'paymentMethod' =>
		array(
			'checkbox'                      =>
			array(
				'width'                => 20,
				'height'               => 20,
				'checkedUrl'           => 'https://avdonl0p0documentation.blob.core.windows.net/static/ae71d5d08b.png',
				'uncheckedUrl'         => 'https://avdonl0p0documentation.blob.core.windows.net/static/891e5ce08b.png',
				'checkedDisabledUrl'   => 'https://avdonl0p0documentation.blob.core.windows.net/static/ae71d5d08b_disabled.png',
				'uncheckedDisabledUrl' => 'https://avdonl0p0documentation.blob.core.windows.net/static/891e5ce08b_disabled.png',
			),
			'activePaymentMethodLabelColor' => '#25B5BC',
		),
		'select'        =>
		array(
			'borderRadius'   =>
			array(
				'topLeft'     => 0,
				'topRight'    => 0,
				'bottomLeft'  => 0,
				'bottomRight' => 0,
			),
			'boxShadow'      =>
			array(
				'hOffset' => 0,
				'vOffset' => 1,
				'blur'    => 4,
				'spread'  => 0,
				'color'   => '#00000014',
			),
			'fontSize'       => 16,
			'lineHeight'     => 20,
			'height'         => 30,
			'color'          => '#000000',
			'borderWidth'    => 0,
			'borderStyle'    => 'solid',
			'borderColor'    => '#000000',
			'padding'        =>
			array(
				'top'    => 1,
				'right'  => 5,
				'bottom' => 1,
				'left'   => 5,
			),
			'margin'         =>
			array(
				'top'    => 5,
				'right'  => 0,
				'bottom' => 5,
				'left'   => 0,
			),
			'fontWeight'     => 100,
			'selectArrowUrl' => 'https://avdonl0p0documentation.blob.core.windows.net/static/aea6a3749caaa.png',
		),
	);