jonasbirkelof / beets-css Goto Github PK

Update the links in the beets/docs for GitHub.

The ghost buttons (.btn-ghost-*) are missing styling for the disabled states:

<button class="btn btn-ghost-primary" disabled>
    Button
</button>

The custom colors should follow Bootstrap 5 praxis and be given root vars (--bss-color: #123456) to be used in html, css or sass.

If you have a callout header with more than one row of text, the icon can shrink causing a couple of problems.

1. Since the icon is set as a background-image it cam be repeated. To fix this, add background-repeat: no-repeat to the .callout-header::before for both fa-icons and bs-icons in mixins/_bcss-callout.scss.

2. The use of rems to set the width makes it possible to shrink. Instead of using width, use min-width for the .callout-header::before in _bcss-callout.scss.

Now we can style callouts using the Bootstrap contextual classes. We could eventually keep this functionality, but better is to use a set of callout types with own colors and build in icons (see issue #11).

Inspiration:
https://help.obsidian.md/How+to/Use+callouts#Types

When a ghost button (.btn-ghost-*) has the active state, tha background color is using the tint-color() mixin to give it a lighter golor than the theme color. This works on light/white backgrounds but on darker backgrounds it is just to bright.

The active background color should be transparent just like the hover background color.

I will make a PR with this change, but the quick fick for the source files is to change:

@mixin button-ghost-variant(
   $bg-color-active: tint-color($theme-color, 85%),
) {

to...

@mixin button-ghost-variant(
   $bg-color-active: #{$theme-color}2a,
) {

...in the file mixins\_bcss-buttons.scss.

The submenu items should get the accent color while active. This has to do with the .nav-main-link.active:not(.nav-main-link-submenu).

.callout-no-img sets the width of callout-header::before to 0, but it should be using min-width instead.

To standardize and simplify Callouts, we can use the Bootstrap Icons to generate a standard set of icons for the different callout types. Depending on the type (.callout .callout-info) an appropriate icon should be selected by adding the class .callout-icon. If the user wants to add a custom icon or no icon at all, the .callout-icon class could be left out.

Inspiration:
https://squidfunk.github.io/mkdocs-material/reference/admonitions/
https://help.obsidian.md/How+to/Use+callouts#Types

Bootstrap Icons:
https://icons.getbootstrap.com/

The example code for dissmissible alerts contains errors with the close button. The class should be "btn-close" and the button tag should be empty (no ×).

Since the naming convention has changed a litte for the entire Beets project, the compiled css file should be named beets-css.css instead of beets.scss. The change will work better with other components like the beets-layout.css.

Clean up the source files from commented code and other.

There are responsive classes like .btn-aspect-lg to activate the square funcion while on a large viewport, but no class to activate it on smaller view ports only. There needs to be .btn-aspect-none, .btn-aspect-lg-none, etc.

The License text for the Bootstrap part of the code is for an older verison of Bootstrap. This text needs to be updated.

Clean up unused comments etc.

When the dark theme for the sidebar is used and when there are submenues, the arrow indicating the submenu is too dark. It should be lighter so that it is visible. Look at previous version of Beets to get the right color.

When uploading the next release, a bundled zip-file containing all the source files (.scss-files) should be added together with the dist-file. Look at how it's done with Beets Layout.

Then a card is styled with contextual colors (primary, etc) the header and footer is still white. They should be a slightly darker color than the body. Probobly has something to do with the alpha channel in the rgba().

The border between <tbody> and <tfoot> is not removed when using the table-borderless class.