Predix-UI - px-buttons-design

@Randy Askin : Hello Randy i am using px-button-group design component as per the documentation https://www.predix-ui.com/#/css/visual/buttons/px-button-group-design i installed the component i am using predix webapp starter (1.0.46 release version) as a reference app in my application.

in my project level we have index-inline.scss and seed-theme.scss and also we have scss files inside the elements folder like inside seed-app folder we have seed-app.scss under the seed-footer we have seed-footer.scss .

for our project requirement we have created some more custom polymer elements inside the same elements folder . we have rmd-view.html under the views folder , inside the rmd-view we are using these custom polymer elements which we have created like rotor-view and so on and also we are using the same seed-app.html (as reference app ) for navigating page .

in rotor-view we want to use px-button-group design component for that I installed component and used below code in index-inline.scss in Object layer (as per https://github.com/predixdesignsystem/px-getting-started#import-order)

 $inuit-btn-group-background : #09819c;
 $inuit-btn-disabled-border : true;
 @import "px-button-group-design/_objects.button-group.scss";

and included px-butto-group code as below in rotor-view.html

 <div class="btn-group">
   <input id="id1" name="btn-group" type="radio">
   <label for="id1" class="btn">Label 1</label>
   <input id="id2" name="btn-group" type="radio">
   <label for="id2" class="btn">Label 2</label>
 </div>

but it didnt work then i tried to use import in seed-app.scss then i also didnt work then tried to create new scss file named as rotor-view.scss inside the rotor-view folder (which is inside the elements folder) this also didnt work for all above cases i am getting html radion button no button-group css is applying on above changes.

for testing i tried to use px-button-group-design html code in my seed-app.html then their i am getting proper button but i want to use in rotor-view looks like i am not using scss import on right place. Can you please suggest me if i want to use px-button-group-design in rotor-view . in which scss file i should import button group scss ??

I think you're seeing the way web components work. CSS in one component does not apply to other components. Make sure the CSS is included in the component you're trying to customize.

You should never make changes to anything inside of your bower_components folder because the next time you go to update or install bower components, those changes could be blown away. In the case of the Predix Seed, you'll want to include those two lines in either seed-theme.scss or index-inline.scss.

Be sure to familiarize yourself with the overall sass setup and ITCSS (inverted triangle CSS) layers that we use in Predix UI here so that you know where in the sass file to place those two lines. As the API page for px-buttons-design says, it should go in the Objects layer (around line 16 in index-inline.scss unless you've made changes). If your gulp is not already running and watching for changes to your sass, you'll then need to run a gulp compile:sass and start your server to see your shiny new button.