yuuvis® styles

If you are creating a new application intended to handle specific data of the yuuvis® backends and you only need the CSS files, you can use the npm package: https://www.npmjs.com/package/@yuuvis/styles.

Shortly, we will publish a website that shows all styles used as an example application on https://yuuvis-cc.yuuvis.org/

Changing appearance of form controls

As with most of the components from @yuuvis/framework you are able to overwrite styling using CSS. For globally changing the lok and feel of components we would recomment to create a new *.scss file that you them import in your projects styles.scss (Make sure to palce the import after imported styles from @yuuvis/framework). The following code snipped is changing position of labels in the form:

yuv-object-form .yuv-form-input:not(.checkbox) .fe-wrapper {
  > label {
    order: 0;
  }
  > .control {
    order: 1;
  }
  > .tag {
    order: 2;
  }
}

You could also position the labels at the top of the input:

yuv-object-form .yuv-form-input:not(.checkbox) .fe-wrapper {
  display: grid;
  grid-template-rows: auto 1fr;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    'label tag'
    'fe fe';

  > label {
    grid-area: label;
  }
  > .control {
    grid-area: fe;
  }
  > .tag {
    grid-area: tag;
  }
}