New Stylesheet resource

Ignition Early Access
,
22

What if you're using a parent project to create several similar instances, which all use the same classes ?
Not being able to inherit the style sheet would be very frustrating, especially when you're already inheriting the style classes that go with it.

2 Likes
23

I'm guessing this is the bug:

Inheritable and overridable would be ideal.

24

My previous post was less than clear.

The bug is that the resource may not be overridden.

The impending fix allows for child projects to override the inherited resource. If your expectation is that each project should have its own, then you're free to not supply any stylesheet.css resource to the inheritable project.

25

The idea is to inherit the parent stylesheet with overwrite option and expose a brand new stylesheet as well for each project.
As I told it is a very special case.
We need to define some global classes in the Parent project as our library and at the same time, each project should be able to have its own class too.

3 Likes
26

So Nader, I think what you're saying is:

  • you want all parent project StyleSheets to be inherited by all children
  • you also want to be able to create StyleSheets in child projects where the new stylesheet resource itself doesn't override the inherited stylesheets, but are extensions of inherited stylesheets
  • if child stylesheets include styles that are defined in parent stylesheets, then the child styles should prevail.

This is definitely how I would expect these to work, which is exactly how CSS themes work at the moment. If you consider the light theme to be the parent, then your own theme extends these, and any styles defined in the light theme can be overridden in your own theme. But any that you don't override are still inherited

6 Likes
27

Yes exactly but when I overwrite the stylesheet and add something to it there is no way if the parent add anything new class it pass to child any more as you overwrite it

1 Like
28

Currently it follows the same approach to overriding as every other resource does, but this approach doesn't work very well for a single CSS stylesheet.

29

That's why I still use editing global CSS files. With global file editing, I put every project in a separate file and all projects inherit some basic class from my main CSS.

30

Is there a way to define variable in the stylesheet similar to the themes?

Something like this,

:root {
	
	--my-color-1: #555555;
	--my-color-2: green;
	--my-color-3: red;
	--my-color-4: #C50A14;
	--my-color-5: #FA6D75;
	
}

Referencing them as we would with themes, var(--my-color-1) doesn't work.

31

It actually does work, but it looks like the Designer doesn't recognize the named color until after a restart.

You'll find that sessions do indeed use the named color as expected, and after a restart of my Designer even the Designer View resource picked up the new color. I'll reach out to Dev to see why this might be and if we can improve the experience.

Update:
Actually, it appears simply re-opening the View in use is enough to pick up the changes.

9 Likes
32

@jlandwerlen and @nader.chinichian: The nightly builds now have the fix which treats the stylesheet.css resource as being an inheritable resource. The changelogs don't have it listed yet, but I've verified the fix is present.

9 Likes
33

Since there is only one stylesheet, it can become a pain to wade through all of the styles once a bunch have been added. Would there by a way to add regions or some way to create categories for organizational sake?

6 Likes
34

A way to efficiently search through the CSS file would also help out a lot.
@cmallonee

3 Likes
35

@cmallonee perhaps I misunderstood, but wasn't IA going to add a means to open a read only stylesheet? Updated to 8.1.26 today and I only see a way to override the resource.

Also, not sure if you saw one of my previous posts, but how hard would it be to add a way to manage styles in the stylesheet, maybe regions or even a way to search?

36

We never had any plans to open the resource in a read-only format. I'll look into opening that as a feature request.

We do have an open feature request already to make managing and organizing rules within the stylesheet resource easier.

5 Likes
37

Looking forward to the managing and organizing feature!

38

Added idea,

39

Can these advanced stylesheet be dependant on the selected theme at all? For example, can we define a colour variable that would be different under light vs. dark?

1 Like
40

I've really tried to think creatively on this, and I can't really think of anything.

Would be nice if the theme applied a class (i.e. theme-dark or theme-light-warm) to the app-container wrapping the entire app.

This would allow you to write some simple selectors to accomplish this in the advanced style sheet.

.theme-dark {
  --callToAction: peachpuff;
}

Vs needing to go into the actual app CSS directly.

1 Like
41

It would need to be a difference resource per theme for it to work nicely. We could have a global stylesheet that just applies to all themes, and then have the ability to add one per theme as needed.