add different variables for navigation height, border radius, background and maybe others

[camilokawerin]

Is your feature request related to a problem? Please describe.

The current rule for navigation buttons is:

.carousel__prev,
.carousel__next {
  background-color: var(--vc-nav-background-color);
  border-radius: var(--vc-nav-width);
  width: var(--vc-nav-width);
  height: var(--vc-nav-width);
  text-align: center;
  font-size: calc(var(--vc-nav-width) * 2 / 3);
  padding: 0;
  color: var(--vc-nav-color);
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  border: 0;
  cursor: pointer;
}

This limits the possibilities to customize the buttons by setting different variable values in a component instead of override the CSS.

• Having only a variable for width prevents to set a custom height
• Using the width for border-radius makes the button always a circle
• Using background-color instead of background prevents to add a gradient

Describe the solution you'd like

To have different variables for these properties.

Describe alternatives you've considered

Change the variable definition to this:

:root {
  /* Color */
  --vc-clr-primary: #642afb;
  --vc-clr-secondary: #8e98f3;
  --vc-clr-contrast: #ffffff;

  /* Icon */
  --vc-icn-width: 1.2em;

  /* Navigation */
  --vc-nav-width: 30px;
  --vc-nav-height: var(--vc-nav-width);
  --vc-nav-border-radius: var(--vc-nav-width);
  --vc-nav-color: var(--vc-clr-contrast);
  --vc-nav-background: var(--vc-clr-primary);

  /* Pagination */
  --vc-pgn-width: 10px;
  --vc-pgn-height: 5px;
  --vc-pgn-margin: 5px;
  --vc-pgn-border-radius: 0;
  --vc-pgn-background-color: var(--vc-clr-secondary);
  --vc-pgn-active-color: var(--vc-clr-primary);
}

And change the rule to this:

.carousel__prev,
.carousel__next {
  background: var(--vc-nav-background);
  border-radius: var(--vc-border-radius);
  width: var(--vc-nav-width);
  height: var(--vc-nav-height);
  text-align: center;
  font-size: calc(var(--vc-nav-width) * 2 / 3);
  padding: 0;
  color: var(--vc-nav-color);
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  border: 0;
  cursor: pointer;
}

Additional context

It would be also useful to have variables for padding, border and font-size.

[camilokawerin]

@ismail9k if you can't add this in the short time I can send a pull request. Let me know please!

[ismail9k]

feature added in v0.1.48