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 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 anyone 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 ??
If you want to use the px-button-group in the seed-app.html component, then add it to the .scss file which generates the styles for seed-app.html component. If you want to use the px-button-group in the px-button-group in a child component, then add it to the .scss file which generates the styles for that component. Don't forget to import the styles with
<link rel="import" href="../my-styles.html">
And also include the styles in the DOM with
<style include="my-styles"></style>
Hope this helps.