The NGClient utilizes unprocessed CSS (3.0) to do all styling of solutions.

...

In the Solution Explorer Tree you can just create a new file (xxxx.css) in your media folder of your solution. Which can then be assigned with the stylesheet property of the solution node itself.

1. Standard component CSS Selectors

StyleSheets for the Servoy Smart and Web Client could make use of Servoy specific type selectors.

In the NGClient, where the stylesheets are interpreted by the browser, these Servoy specific type selectors are not available. Below is a conversion table from the Servoy-specific-type-selectors used in smart / web clients to their NGClient equivalent. equivalent classes used in the default components from NGClient:

Also NGClient will output special classes for default components that can be used from solution css to easily style all components of same time. The name of the class is svy-componentName (so svy-label, svy-button, svy-calendar, svy-textfield...). Also, in NGClient we added two new classes: svy-layoutcontainer (for responsive layout containers) and svy-wrapper for wrapper div of the component (used in absolute layout).

1.1 Grid

The grid is based on UI-grid, there is a customizer that creates a stylesheet.

1.2 Tabpanel

Tabpanel is based on Bootstrap nav-tabs. To target the tabs, the following classes are available:

2. Changes

...

in css when compared to web client / smart client

In NGClient, Sevoy specific selectors such as:that were in smart/web client css similar to

label.bold {
	font-weight: bold;
}

should become:

.bold {
	font-weight: bold;
}

If there are cases where the bold class is defined for two different components and their implementation is also different, then the following example (smart/web client css)

label.bold {
	font-weight: bold;
}
 
field.bold {
	font-weight: 900;
}

should become become in NG Client:

.label_bold {
   font-weight: bold;
}
 
.field_bold {
   font-weight: 900;
}

After that, the styleClass property of the elements should be changed from "bold" to "label_bold" or "field_bold".

2.1 font-size

The "margin" css property from smart/web client should be changed with the "padding" property., so

label {
	margin: 1px 2px 3px 4px; 
}

should become in NG Client:

.label {
	padding: 1px 2px 3px 4px; 
}

...

.label {
	font-size: 15pt;
}

.textfield {
	font-size: 26px;
}

2.2 styleClass precedence over default servoy selectors (.svy-field, .svy-combobox, .svy-textfield, etc...)

In NGClient it is recomended that style classes that are used in the styleClass property of form elements should be added at the end of the css file. This way, if a style class (named myTextfield) has properties that override properties from .svy-textfield, then setting that class as the styleClass property will have the expected outcome. This is because myTextfield is located after .svy-textfield in the css file.

2.3 Using media file from css

In NGClient the css files are not being pre-processed on server, so using background-image: url("media:///<name>") does not work out of the box. However, using background-image: url("mymedia.gif") will work fine, if mymedia.gif exists in media files. 

2.4 Labelfor label in tableview

In WebClient and Smart Client you could use a labelfor label in order to style the table header. In NGClient, only text property and styleClass properties are applied. Using styleClass, you can style the header from solution css (so define border, background-color, background-image ..). For example, if the labelfor label has imageMediaID set to an icon settings.png (media). In NGClient, you should add a styleClass settingsBackground then add in solution css:

...

.settingsBackground
{
 background-image: url("settings.png");
 background-repeat: no-repeat;
 background-position: center;
 background-size: 16px;
}

...

3.  Styling the NG client further with .css

3.1 Reconnecting feedback

When the NGClient detects communication issues with the server, a message is shown. This message can be styled and the text can be set using servoy i18n.

...

.svy-reconnecting-overlay.ng-hide-remove {
  transition-delay: 10s !important;
}

3.2

...

Loading indicator

By default NGClient will set the wait mouse cursor on body and all its elements - when a request to the server takes a while. Starting with Servoy 2019.03 it will also show a default loading animation (bottom of page).

...

yourmodule.factory("loadingIndicator",function($window) 
{
	return {
		showLoading: function() {
			$($window.document.body).css({"cursor":"wait"});
		},
		hideLoading: function() {
			$($window.document.body).css({"cursor":"auto"});
		},
	}
})

...

3.

...

3 File upload

The fileupload dialog uses the following keys for presenting its string values:

...

"servoy.filechooser.error"

Anchor
cssimport cssimport

...

4. Importing other .css files in the main solution .css

In the css file that you choose as a property of the solution you can also reference other .css files from solution media.

...

Note the "t=##last-changed-timestamp##" argument you need to add to the url, in order to discard the browser cached version of the css, when a new WAR is deployed (##last-changed-timestamp## will be replaced during WAR export with the last changed timestamp of the parent CSS)

...

5. Standard NG Client generated css

You might have noticed that when you want to create a new solution css file from solution - properties view, you have the option (default: checked) to create and import a "standard_ngclient.css". This file will contain - if you leave that checked - rules that will be helpful in most cases; they are here - in solution media - so that they can be altered/removed easier.

You don't need to read about this further if you already use it. But in case you already had your css set-up before the standard NG Client css was added (8.2.2) you might need to add some of the rules below (or create a new "standard_ngclient.css" file and reference/import it in your existing css)

...

5.1 Related to responsive layout and nesting of containers

In responsive layouts, when you nest multiple forms using tab panels or other types of container-components it may happen that a tab/child form that has in it directly "row" layout containers (so no root layout "container" or layout "container-fluid") shows unwanted scroll-bars. That happens because bootstrap requires that all 'row' divs must either be put in a 'container', a 'container-fluid' or in a 'column', while in the case of a tabpanel for example the parent DOM Element is just some intermediate div.

...

div:not(.container):not(.container-fluid):not([class^="col-xs-"]):not([class^="col-sm-"]):not([class^="col-md-"]):not([class^="col-lg-"])
 > .row {
    margin-right: 0;
    margin-left: 0;
}

4.2 Hiding autofill on Safari browser.

In order to disable autofill on Safari, the above css code should be placed into solution stylesheet. The following code template can be also found in standard_ngclient.css. 

...