Tabs mobile background

[bembelimen]

https://github.com/joomla-projects/custom-elements/blob/master/src/scss/tab/tab.scss#L53

Being in mobile view activating a tab the background becomes semi-transparent:

Without active everything is ok:

CC @dgrammatiko

[dgrammatiko]

I think it's coming from

custom-elements/src/scss/tab/tab.scss

Line 46 in 1cc751e

background-color: transparent;

[helper-uttam]

Hey @bembelimen !
Can I work on this issue?

[bembelimen]

Sure

[helper-uttam]

Hey @bembelimen ! Can I work on this issue?

Can you provide me some resource to setup this project into my machine for testing purposes. I have gone through the docs but still not able to set it up.

What I have done-

npm install joomla-ui-custom-elements
npm install -g grunt-cli
npm install grunt
After these installation I am tring to use Joomla custom elements by linking <link href="joomla-alert.min.css" rel="stylesheet"> and <script src="joomla-alert.min.js"></script> to my html file.

[dgrammatiko]

Can you provide me some resource to setup this project into my machine for testing purposes.

• clone the repo git clone [email protected]:joomla-projects/custom-elements.git
• Install npm dependencies npm install
• Run npm run build to compile js and CSS

Probably you need a server to check the changes, you can have one with this command npx http-server

Before making a PR please lint your code and make sure that tests are still green. All the available command are here:

custom-elements/package.json

Lines 54 to 61 in fd4bbc7

	"scripts": {
	"build": "rimraf dist && node ./node_modules/rollup/dist/bin/rollup -c rollup.config.js",
	"lint:js": "node ./node_modules/eslint/bin/eslint.js src",
	"lint:css": "stylelint --config .stylelintrc.json -s scss \"src/scss/**/*.scss\"",
	"test": "node node_modules/karma/bin/karma start --single-run --browsers ChromeHeadless karma.conf.js",
	"lint": "npm run lint:css && npm run lint:js",
	"ci-test": "node node_modules/karma/bin/karma start karma-ci.conf.js --single-run"
	}