style: created custom tagify scss file and updated gulp file #10063
Conversation
github-actions
bot
added
CSS
Template::Toolkit
IsaiahLevy
changed the title
IsaiahLevy
changed the title
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## main #10063 +/- ##
==========================================
+ Coverage 49.54% 49.68% +0.13%
==========================================
Files 67 71 +4
Lines 20650 20982 +332
Branches 4980 5026 +46
==========================================
+ Hits 10231 10424 +193
- Misses 9131 9266 +135
- Partials 1288 1292 +4 ☔ View full report in Codecov by Sentry. |
IsaiahLevy
force-pushed
the
add-tagify-scss-customization
branch
from
7709e43 to
9a0467f
Compare
There was a problem hiding this comment.
@IsaiahLevy I still have a rule which does not work (on firefox)
But I found that there is a far better way to handle this:
You can just do:
@import "../node_modules/@yaireo/tagify/src/tagify.scss";
:root {
$tagify-dd-color-primary: #341100 !important;
--tagify-dd-color-primary: #341100 !important;
}and it works (it does not work if I use $chocolate but I don't know why).
Do you want to try with that (there might be another variable to override)
scss/custom-tagify.scss
Outdated
| } | ||
|
|
||
| // Hover state for dropdown items | ||
| .tagify__dropdown__item--active, |
There was a problem hiding this comment.
this rule does not seems to work, but I don't know why.
There was a problem hiding this comment.
Hey thank you for the feedback. Just pushed changes to fix this.
taxonomy: linting (openfoodfacts#10079)
… into add-tagify-scss-customization
github-actions
bot
added
the
API
There was a problem hiding this comment.
@IsaiahLevy your file has merging problems !
gulpfile.ts
Outdated
| @@ -133,16 +134,17 @@ function copyCss() { | |||
| "./node_modules/leaflet/dist/leaflet.css", | |||
| "./node_modules/leaflet.markercluster/dist/MarkerCluster.css", | |||
| "./node_modules/leaflet.markercluster/dist/MarkerCluster.Default.css", | |||
| "./node_modules/@yaireo/tagify/dist/tagify.css", | |||
| // "./node_modules/@yaireo/tagify/dist/tagify.css", // This line should be commented out or removed | |||
There was a problem hiding this comment.
| // "./node_modules/@yaireo/tagify/dist/tagify.css", // This line should be commented out or removed |
| @@ -1,4 +1,6 @@ | |||
| @import "variables"; | |||
| @import "custom-tagify"; | |||
| @import "variables"; | |||
There was a problem hiding this comment.
"variable" is already imported in line 1. Does it have to be included here, again?
| @@ -19,6 +19,7 @@ | |||
| <link rel="stylesheet" href="[% static_subdomain %]/css/dist/app-[% edq(lang('text_direction')) %].css?v=[% css_timestamp %]" data-base-layout="true"> | |||
| <link rel="stylesheet" href="[% static_subdomain %]/css/dist/jqueryui/themes/base/jquery-ui.css" data-base-layout="true"> | |||
| <link rel="stylesheet" href="[% static_subdomain %]/css/dist/select2.min.css"> | |||
| <link rel="stylesheet" href="[% static_subdomain %]/css/dist/custom-tagify.css" data-base-layout="true"> | |||
There was a problem hiding this comment.
We only really need Tagify in
, so this probably needs to be removed, and the import incgi/product_multilingual.pl should be updated.
|
@IsaiahLevy, still you are overriding CSS rule, while I think we should only give values to variables as proposed in my comment |
…-server into add-tagify-scss-customization
|
|
@IsaiahLevy you have to fix linting, your changes to gulp file do not concord with lint policy. make lint might fix it. |
What
Implemented a custom SCSS file for Tagify inputs and modified the Gulpfile to include these styles in the build process, allowing for customizable appearance and integration with the project's frontend.
Related issue(s) and discussion