4.8 Bootstrap Material Design CSS

[Celton McGrath]

Hey guys,

I originally generated the CSS for 4.8 Bootstrap Material Design using SASS and source code from this repository:

https://github.com/CeltonMcGrath/bootstr...n/tree/4.8

In this commit, you can see that I made modifications for TACTIC 4.8

https://github.com/CeltonMcGrath/bootstr...dcfe976922
[url=https://github.com/CeltonMcGrath/bootstrap-material-design/commit/dfa64958e2bf8ad64290b4b9d4c507dcfe976922][/url]
(This handled colours, checkbox sizes, and changed the button look.)

I would recommend you use this SASS repo to move forward. 

If that is something you are interested in, let's come up with a process.

Best,

Celton

[remkonoteboom]

How is this related to this file:

src/context/spt_js/bootstrap_material_design/bmd-bs-dark.css

Does it replace it or is it complementary to it?

[Celton McGrath]

Using the sass command

ie. > sass <input file scss file> <output css file>

I generated the css file that was used in the proprietary product.

I assume that was the origin of this file:
src/context/spt_js/bootstrap_material_design/bmd-bs-light.css

This is why the "--primary" variable is blue, and not teal. Note that this blue is not the same as the standard bootstrap 4 blue.

Last I checked, the proprietary product is using a custom css file and custom palette colours.

However, this was NOT the intended final implementation.

What would be ideal IMHO is that there is a common css for all themes (except DARK) that doesn't have any colour overrides.
Then the palette class defines custom TACTIC colour variables (ie. color1, color2, background1 , etc) AND overrides the "--primary" variable.

To make this happen I just need to regenerate the css file without colour overrides, and add the ability to override primary in Palette.

Let me know if you want to do this.

On the other hand, the DARK theme is tricky since our friends at Bootstrap Material Design haven't implemented it yet, even though a DARK theme is specified by standard Material Design.
However, I think it's entirely possible do it ourselves, since we already colour backgrounds using TACTIC Palette variables

[Celton McGrath]

Actually, I now remember why I created a custom CSS and custom palette colours set. It's not so simple to override the --primary colour, since various shades of it are generated by the SCSS, and hardcoded through the Boostrap Material Design css.

I need to think about the best way to do this! The only option on my mind right now is a custom generated CSS for all themes, but not doesn't allow for easy custom theming using Palette

[remkonoteboom]

Yes, I did take the generated css for bmd-bs-dark.css file. I started with both a light and dark file for the themes, however, in reality I have been using just the dark one for all themes since I have found (so far) that you can just use var(--spt-palette-background) in those files. At present the "dark" file can be used for all available themes. I don't think any of the themes that we're currently using will be so drastically different that we need to have more of these files since the themes really just correspond to color changes.

Of course, this may change in the future and it is already possible to use a custom css file for any given project should that be desired. this can be done with the project setting "feature/css_library"