Reduce compiled css file size

[crftwrk]

Had a look to the compiled CSS and file size is big, too big. It's overall 455kb which includes 200kb Bootstrap, 30kb theme and the rest is the WC part. This PR reduces compiled minified CSS to 275kb which is absolute ok compared to other themes.

Figured out that using @extend on forms and buttons is a bad idea, because they have all this disabled, focus, focus-within, isvalid, is-invalid etc. states. This states creates in combination with the very bad WC classes huge selector strings which are only visible if you check one of this states. We do not need this states here.

Where possible, I readded the filters, but they do not catch all forms and buttons. For the rest i created custom form, custom check/radio with only :focus state and custom buttons with only :hover state and assigned them to the WC classes. This custom components are built with Bootstrap variables. Values can be changed as usual in _bscore_variables.scss.

The SCSS looks ugly but works and reduces 180kb file size. Tested in on several live shops and works fine, already live on bootscore.me as well.

Test: Check forms, checks and radios in cart, checkout and dashboard. Not each file must be reviewed, viewing the frontend is enough.

PR will have a conflict with #635, but I can fix this later. This one here seems to more important for me.

@justinkruit think this is an serious issue, IYLIMI ;-)

ps. Using @extend on other elements like badges or alerts have no negative effect.

[justinkruit]

The colors of the Coupon input don't seem to match, and the box shadow misses the animation.

Current	Docs

Other than that I can't spot anything.

[crftwrk]

Thank you for pointing this out, it has been fixed a68442a. Please check the cart coupon input https://bootscore.me/cart/.

[justinkruit]

Just spotted that the disabled outline button is also different, WC is setting a background color. Tbh not really intrusive, unless we want to force the Bootstrap style on it completely. Up to you if we also want to change that.

[crftwrk]

Fixed 40761c4, please check the cart.

[justinkruit]

It's overall 455kb which includes 200kb Bootstrap, 30kb theme and the rest is the WC part. This PR reduces compiled minified CSS to 275kb which is absolute ok compared to other themes.

Is this comparison with expanded style, or with compressed? Just wondering. Reference:

bootscore/inc/scss-compiler.php

Lines 51 to 61 in cfbc068

	if ($is_environment_dev) {
	$compiler->setSourceMap(Compiler::SOURCE_MAP_FILE);
	$compiler->setSourceMapOptions([
	'sourceMapURL' => site_url('', 'relative') . '/' . substr(str_replace(ABSPATH, '', $css_file), 0, - 3) . 'map',
	'sourceMapBasepath' => substr(str_replace('\\', '/', ABSPATH), 0, - 1),
	'sourceRoot' => site_url('', 'relative') . '/',
	]);
	$compiler->setOutputStyle(\ScssPhp\ScssPhp\OutputStyle::EXPANDED);
	} else {
	$compiler->setOutputStyle(\ScssPhp\ScssPhp\OutputStyle::COMPRESSED);
	}

[crftwrk]

It's the compressed one.

Before	After

Pushed 2 more commits, one fixes the coupon bg in dark mode and the other one replaces the product comment jQuery checkbox with the new SCSS. I found no more bugs, seems to work well...

[justinkruit]

All seems well.