jonasbirkelof / beets Goto Github PK
View Code? Open in Web Editor NEWHome Page: https://jonasbirkelof.github.io/beets/
License: MIT License
Home Page: https://jonasbirkelof.github.io/beets/
License: MIT License
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
.
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
.
The ghost buttons (.btn-ghost-*
) are missing styling for the disabled states:
<button class="btn btn-ghost-primary" disabled>
Button
</button>
Clean up unused comments etc.
Clean up the source files from commented code and other.
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).
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/
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 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.
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.
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.
The License text for the Bootstrap part of the code is for an older verison of Bootstrap. This text needs to be updated.
If you have a callout header with more than one row of text, the icon can shrink causing a couple of problems.
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
.
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.
Update the links in the beets/docs for GitHub.
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 ร).
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 custom colors should follow Bootstrap 5 praxis and be given root vars (--bss-color: #123456) to be used in html, css or sass.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.