Beam SCSS to CSS Styling Updated - Beam

[crabinak]

I updated all the SCSS to live in a single CSS file, collating all scoped styles into the CSS file as well. The only styles I left scoped were in the ItemCheck.vue file as they seemed completely unique to that single component. I added a few classes names to existing elements for easier reuse in styling and fixed a few issues like replacing spans with divs for block elements.

I also included all variables in a separate _beam-variables.css file for theming.

[Alchez]

@crabinak @agritheory I've rebased this PR with the development branch and this is what it looks like after the rebase:

I hope I didn't mess any of the stylesheets up. Can you guys please confirm?

[agritheory]

While I love the gold color, I think it's not neutral enough to be a default theme. I think there's a couple of changes that we should do to bring this more in line with "grays" default theme.

• Use the table header color as the background where there's currently gold
• Align the lighter colors to be consistent with the default theme (themes/default.css)
• Refactor so the variable naming between the two is also consistent

Overall, this is a remarkable improvement, I am very pleased. Of note, I'd say that the default viewing dimensions are going to be something like 480 x 850 or if used by a tablet, 1280 x 800 landscape.

[crabinak]

@Alchez Still looks good to me! Thanks!

@agritheory No problem, I'll go in and mute this a bit and bring it in line with default.css. I designed this as mobile-first, so it should look good at the 480x850 and 1280x800 sizes.

Do you want the Roboto font the default theme uses or the Arimo font that the docbuilder (and this version of Beam) currently uses?

[agritheory]

@crabinak I am fan of Arimo. It's designed by somebody I'm distantly related to: https://mattesontypographics.com/

[crabinak]

@agritheory I updated the variable names and changed the colors to gray. This should more closely match the gray default theme. I removed the hover effect on list items since the default theme doesn't use it.

I also added some custom variables for the buttons to make them more customizable as the default theme does not style them at all.

[Alchez]

@crabinak @agritheory I've created a merge commit that removes the dist folders from the diff, so the changes should be easier to read now.

[agritheory]

@crabinak This looks great! @Alchez much cleaner, I am glad we got this squared away.