CSS pseudo class (selector) root in NGTi

Forum to discuss the new web client version of Servoy.

CSS pseudo class (selector) root in NGTi

Postby huber » Wed Dec 21, 2022 10:56 am

In NG1 I use the root pseudo class to define globally applied variables, like

Code: Select all
:root {
   --selectedRowColor: #e9f2fd !important;
}


In NGTi, the variables are not recognised when defining it like this. Neither works :host.

Is it may be not yet supported in Servoy Developer 202206 which I am using?

Regards,
Robert Huber
7r AG, Switzerland
SAN Developer
http://www.seven-r.ch
User avatar
huber
 
Posts: 516
Joined: Mon May 14, 2012 11:31 pm

Re: CSS pseudo class (selector) root in NGTi

Postby huber » Thu Dec 29, 2022 4:57 pm

Anyone using css variables for NGTi? Any info if it is working is very much appreciated.

Regards,
Robert Huber
7r AG, Switzerland
SAN Developer
http://www.seven-r.ch
User avatar
huber
 
Posts: 516
Joined: Mon May 14, 2012 11:31 pm

Re: CSS pseudo class (selector) root in NGTi

Postby huber » Wed Sep 06, 2023 4:57 pm

I would like to ask again, if anyone could give a hint how to get CSS variables work in the NGTi stylesheet?
Robert Huber
7r AG, Switzerland
SAN Developer
http://www.seven-r.ch
User avatar
huber
 
Posts: 516
Joined: Mon May 14, 2012 11:31 pm

Re: CSS pseudo class (selector) root in NGTi

Postby sean » Wed Sep 06, 2023 5:37 pm

Hi Robert,

This should be supported following the basic instructions for CSS variables:
https://developer.mozilla.org/en-US/doc ... properties

For example, to declare it in the root:
Code: Select all
:root {
  --my-custom: red;
}


Then to use it
Code: Select all
.my-selector
{
   background-color: var(--my-custom);
}
Software Engineer
Servoy USA
sean
 
Posts: 370
Joined: Mon May 21, 2007 6:26 pm
Location: USA

Re: CSS pseudo class (selector) root in NGTi

Postby huber » Thu Sep 07, 2023 4:37 pm

Hi Sean

Thanks for your answer. That's exactly what we have specified in the less file, but it doesn't work in NG2 (NGTi). It works perfectly in NG1.

Servoy Developer 202303_LTS
Robert Huber
7r AG, Switzerland
SAN Developer
http://www.seven-r.ch
User avatar
huber
 
Posts: 516
Joined: Mon May 14, 2012 11:31 pm

Re: CSS pseudo class (selector) root in NGTi

Postby sean » Thu Sep 07, 2023 5:00 pm

Hi Robert,

It works for me in 2023.6. I'm not sure if that is because of a version difference.

Just to rule out anything obvious, can you double check that you have entered your variable in the _ng2.less file of the solution (or one that is included in it) ?
(i.e. not just the default which is currently ng1 only)

Best,
Sean
Software Engineer
Servoy USA
sean
 
Posts: 370
Joined: Mon May 21, 2007 6:26 pm
Location: USA

Re: CSS pseudo class (selector) root in NGTi

Postby huber » Fri Sep 08, 2023 11:53 am

Hi Sean

We have a Modul called HadesBasics which contains a HadesBasics_ng2.less file in a sub folder called styles of the node Media. There we have the selectors to style NG2. These work as expected, except for the variables defined in

Code: Select all
:root {
   --border: 1px solid #f0f0f0;
   --borderDark: 1px solid #e3e3e3;
      
   --borderBottomX: 1px solid #ff0000;
   
   --hoveredRowColor: #f3f9ff;
   --readOnlyColor: #999;
   --selectedRowColor: #e9f2fd !important;
   
   --7rGreen: #8DC43F;
   --darkGrey: #a4998a;
   --green: #8DC43F;
   --grey: #fcfcfc;
   --orange: #ffa500;
   --red: #f00;
   --white: #fff;
}


and the selector

Code: Select all
.ag-theme-bootstrap .ag-row-selected {
/*   background-color: #e9f2fd !important;*/
   background-color: var(--selectedRowColor);
}


The selector works for the background color with the line in comments, i. e. (/* background-color: #e9f2fd !important;*/), but not with the line containing the variable.

Servoy Developer 2022.03, and 2023.03 LTS
Robert Huber
7r AG, Switzerland
SAN Developer
http://www.seven-r.ch
User avatar
huber
 
Posts: 516
Joined: Mon May 14, 2012 11:31 pm

Re: CSS pseudo class (selector) root in NGTi

Postby paronne » Fri Sep 08, 2023 5:16 pm

Hi Robert,

css variables to style the grid are also used in the Servoy Theme. Therefore i don't see why they should not work.
However in TiNG the ag-theme-bootstrap is not present anymore and is normally replaced by ag-theme-alpine. Can this be the problem for you ? Since you rely on the ag-theme-bootstrap selector.

By the way, there are several CSS variables that you can directly use in TiNG to style some aspect of the grid.
Example below:

.ag-theme-servoy {
--ag-alpine-active-color: #2196f3;
--ag-selected-row-background-color: rgba(33, 150, 243, 0.3);
--ag-row-hover-color: rgba(33, 150, 243, 0.1);
--ag-column-hover-color: rgba(33, 150, 243, 0.1);
--ag-input-focus-border-color: rgba(33, 150, 243, 0.4);
--ag-range-selection-background-color: rgba(33, 150, 243, 0.2);
--ag-range-selection-background-color-2: rgba(33, 150, 243, 0.36);
--ag-range-selection-background-color-3: rgba(33, 150, 243, 0.49);
--ag-range-selection-background-color-4: rgba(33, 150, 243, 0.59);
--ag-background-color: #fff;
--ag-foreground-color: #181d1f;
--ag-border-color: #babfc7;
--ag-secondary-border-color: #dde2eb;
--ag-header-background-color: #f8f8f8;
--ag-tooltip-background-color: #f8f8f8;
--ag-odd-row-background-color: #fcfcfc;
--ag-control-panel-background-color: #f8f8f8;
--ag-subheader-background-color: #fff;
--ag-invalid-color: #e02525;
--ag-checkbox-unchecked-color: #999;
--ag-checkbox-background-color: var(--ag-background-color);
--ag-checkbox-checked-color: var(--ag-alpine-active-color);
--ag-range-selection-border-color: var(--ag-alpine-active-color);
--ag-secondary-foreground-color: var(--ag-foreground-color);
--ag-input-border-color: var(--ag-border-color);
--ag-input-border-color-invalid: var(--ag-invalid-color);
--ag-input-focus-box-shadow: 0 0 2px 0.1rem var(--ag-input-focus-border-color);
--ag-disabled-foreground-color: rgba(24, 29, 31, 0.5);
--ag-chip-background-color: rgba(24, 29, 31, 0.07);
--ag-input-disabled-border-color: rgba(186, 191, 199, 0.3);
--ag-input-disabled-background-color: rgba(186, 191, 199, 0.15);
--ag-borders: solid 1px;
--ag-border-radius: 3px;
--ag-borders-side-button: none;
--ag-side-button-selected-background-color: transparent;
--ag-header-column-resize-handle-display: block;
--ag-header-column-resize-handle-width: 2px;
--ag-header-column-resize-handle-height: 30%;
--ag-grid-size: 6px;
--ag-icon-size: 16px;
--ag-row-height: calc(var(--ag-grid-size) * 7);
--ag-header-height: calc(var(--ag-grid-size) * 8);
--ag-list-item-height: calc(var(--ag-grid-size) * 4);
--ag-column-select-indent-size: var(--ag-icon-size);
--ag-set-filter-indent-size: var(--ag-icon-size);
--ag-cell-horizontal-padding: calc(var(--ag-grid-size) * 3);
--ag-cell-widget-spacing: calc(var(--ag-grid-size) * 2);
--ag-widget-container-vertical-padding: calc(var(--ag-grid-size) * 2);
--ag-widget-container-horizontal-padding: calc(var(--ag-grid-size) * 2);
--ag-widget-vertical-spacing: calc(var(--ag-grid-size) * 1.5);
--ag-toggle-button-height: 18px;
--ag-toggle-button-width: 28px;
--ag-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
--ag-font-size: 13px;
--ag-icon-font-family: agGridAlpine;
--ag-selected-tab-underline-color: var(--ag-alpine-active-color);
--ag-selected-tab-underline-width: 2px;
--ag-selected-tab-underline-transition-speed: 0.3s;
--ag-tab-min-width: 240px;
--ag-card-shadow: 0 1px 4px 1px rgba(186, 191, 199, 0.4);
--ag-popup-shadow: var(--ag-card-shadow);
--ag-side-bar-panel-width: 250px;
}
paronne
 
Posts: 202
Joined: Fri Nov 02, 2012 3:21 pm

Re: CSS pseudo class (selector) root in NGTi

Postby huber » Tue Sep 12, 2023 9:33 am

Hi Paulo

For the NG2, I replaced the selectors containing bootstrap with alpine, but I have still no success by using variables. Setting directly a color for example works though.

Thanks for the list of CSS variables. Do I understand you correctly that we can use these variables without having a corresponding selector. i. e. for example instead of using the selector

Code: Select all
.ag-theme-alpine .ag-row-selected {
  background-color: #f00;
}


I just can set

Code: Select all
.ag-theme-servoy {
  --ag-selected-row-background-color: #f00);
}
Robert Huber
7r AG, Switzerland
SAN Developer
http://www.seven-r.ch
User avatar
huber
 
Posts: 516
Joined: Mon May 14, 2012 11:31 pm

Re: CSS pseudo class (selector) root in NGTi

Postby paronne » Tue Sep 12, 2023 2:38 pm

Hi Robert,

i tried in TiNG ( 2023.3 ) to use your original variable with the alpine class and works as expected.

Code: Select all
:root {
   --selectedRowColor: #f00 !important;
}

.ag-theme-alpine .ag-row-selected {
   background-color: var(--selectedRowColor);
}


The ag-theme-alpine is now the default in TiNG; you can of course change that by changing the default styleClass of the table.
It very much depends on your grid's styleClass property which you can fully control.
ag-theme-servoy is a selector used by the Servoy Less Theme which allow a certain level of customizations ( https://wiki.servoy.com/pages/viewpage. ... d=31752222 ); note that the Servoy Theme does not affect only the grid but affects all the common Servoy elements.

Also to use the CSS from the grid, much depends from the styleClass selector your grid has in use.
This also works for me ( using the defaul styleClass )

Code: Select all
.ag-theme-alpine {
   --ag-selected-row-background-color: #f00 !important;
}


Regards,
Paolo
paronne
 
Posts: 202
Joined: Fri Nov 02, 2012 3:21 pm

Re: CSS pseudo class (selector) root in NGTi

Postby huber » Wed Sep 13, 2023 11:11 am

Hi Paolo, hi Sean

Thank you both for your support. I found that the behaviour I described in this thread is caused by importing the "custom_servoy_theme_properties_ng2.less" file into our HadesBasics_ng2.less file (solution is HadesBasics).

I was of the opinion, that the styles defined in our HadesBasics_ng2.less would override the style definitions of the imported "custom_servoy_theme_properties_ng2.less" file.

This seems not to be the case. For example, the color set in "Table row selected bg color" of the "Table Properties" in the "custom_servoy_theme_properties_ng2.less" file is NOT overridden by

Code: Select all
:root {
   --selectedRowColor: #f00 !important;
}

.ag-theme-alpine .ag-row-selected {
   background-color: var(--selectedRowColor);
}


Interestingly, the selector

Code: Select all
.ag-theme-alpine {
   --ag-selected-row-background-color: #f00 !important;
}

in the HadesBasics_ng2.less file DOES override the "Table row selected bg color" of the "Table Properties".

Does that mean one can't/should not combine styles set in "custom_servoy_theme_properties_ng2.less" and self defined styles in a <solution>_ng2.less file?
Robert Huber
7r AG, Switzerland
SAN Developer
http://www.seven-r.ch
User avatar
huber
 
Posts: 516
Joined: Mon May 14, 2012 11:31 pm

Re: CSS pseudo class (selector) root in NGTi

Postby paronne » Wed Sep 13, 2023 2:58 pm

Hi Robert,

it is possible to combine your own style with the "custom_servoy_theme_properties_ng2.less".
However you have to keep in mind that since the custom_servoy_theme_properties_ng2 comes with his styles & rules, the applied color depends on the rule Specificity ( https://developer.mozilla.org/en-US/doc ... pecificity ).

In your setup, the rule

Code: Select all
:root {
   --selectedRowColor: #f00 !important;
}

.ag-theme-alpine .ag-row-selected {
   background-color: var(--selectedRowColor);
}


have a lowe specificity compared to the Rules coming from the theme and compared to:

Code: Select all
.ag-theme-alpine {
   --ag-selected-row-background-color: #f00 !important;
}


To investigate which rule is applied to the element you can use the Dev Tools of the Browser ( e.g. Chrome Inspector ) which shows all the CSS rules applied to an html element, sorted by specificity.

Regards,
Paolo
paronne
 
Posts: 202
Joined: Fri Nov 02, 2012 3:21 pm

Re: CSS pseudo class (selector) root in NGTi

Postby huber » Wed Sep 13, 2023 6:05 pm

Hi Paolo

Thanks for the info and link about the rule specificity, which clarifies some of the problems described.

Reading further about CSS, we moved the variables and selectors in the HadesBasics_ng2.less file into a separate CSS file and imported that file into our HadesBasics_ng2.less file. Now, the variables got visible (in the Safari or Chrome inspector) and work as expected. I am not quite sure why it works this way, but it does.

The content of the HadesBasics_ng2.less file now consists of only 2 import statements

Code: Select all
@import 'custom_servoy_theme_properties_ng2.less?t=##last-changed-timestamp##"';

@import 'hadesNG2.css?t=##last-changed-timestamp##"';


If there is an explanation for this, I am very interested in it of course.

Thanks,
Robert Huber
7r AG, Switzerland
SAN Developer
http://www.seven-r.ch
User avatar
huber
 
Posts: 516
Joined: Mon May 14, 2012 11:31 pm

Re: CSS pseudo class (selector) root in NGTi

Postby paronne » Thu Sep 14, 2023 12:32 pm

Hi Robert,

the order of rules and imported files has also impact on the specificity. If 2 rules with the same specificity are set, the last rule will be applied.
Therefore is the custom_servoy_theme_properties_ng2.less and the hadesNG2.css use the same rule:

Code: Select all
// just as example, assuming this rule exists in custom_servoy_theme_properties_ng2.less
.ag-theme-alpine {
   --ag-selected-row-background-color: green !important;
}


Code: Select all
// your rule in hadesNG2
.ag-theme-alpine {
   --ag-selected-row-background-color: #f00 !important;
}


since they both have the same specificity ( .ag-theme-alpine ) the last one, in order, will be applied as result.
So if you changed the order of rules/import in your HadesBasics_ng2, that would have an impact.
paronne
 
Posts: 202
Joined: Fri Nov 02, 2012 3:21 pm

Re: CSS pseudo class (selector) root in NGTi

Postby huber » Thu Sep 14, 2023 1:28 pm

As the import is exact at the same position where the definitions of variables (…root { }) followed by the selectors in HadesBasics_ng2 started, made me think how can that be? I still assume importing a file with variables and selectors at the same position where otherwise (the same) definitions start in the file should lead to the same result, as order of rules and specificity is the same (wether the definitions are in a separate file or directly in the file). But that's not true, somewhere is a difference.
Robert Huber
7r AG, Switzerland
SAN Developer
http://www.seven-r.ch
User avatar
huber
 
Posts: 516
Joined: Mon May 14, 2012 11:31 pm


Return to Servoy NGClient

Who is online

Users browsing this forum: No registered users and 6 guests

cron