I am currently working with Angular UI Bootstrap and facing an issue with an accordion component. Everything works perfectly fine in the development environment with the full version of the Bootstrap Cerulean file. However, when I minify the CSS file for production, the accordion loses its borders. Although it still functions correctly, it does not look the same as it did during development.
Upon inspecting the CSS properties in the developer's console, I noticed that they are consistent between the two versions. The only anomaly is that the border-color property does not seem to work in the minified version of the file. Below, you can see the code snippets for both instances:
Development:
.panel-default {
border-color: #dddddd;
}
Production:
.panel-danger,.panel-danger>
.panel-heading, .panel-default, .panel-default>
.panel-heading, .panel-info>
.panel-heading, .panel-primary, .panel-primary>
.panel-heading, .panel-success, .panel-success>
.panel-heading, .panel-warning, .panel-warning>
.panel-heading, .well blockquote {
border-color: #ddd;
}
I utilized Grunt to minimize the CSS file.
The specific HTML section where this issue occurs is displayed below:
<accordion-min heading="Buscar por" class="ng-isolate-scope">
<div class="col-lg-12 hidden-print" ng-init="estado = true">
<accordion>
<div class="panel-group" ng-transclude="">
<div class="panel panel-default ng-isolate-scope" is-open="estado">...</div>
</div>
</accordion>
</div>
</accordion-min>
Please bear with my English, as it is not my native language. I would greatly appreciate any tips or suggestions you might have to help me identify what I am overlooking. Thank you in advance.