Predix_Logo
  • Categories
    • Questions
    • Predix | Updates
      • Pricing
      • Product
    • Deloitte - Private
    • How-To
    • Accenture-Private
  • Explore
    • Topics
    • Questions
    • Articles
    • Feedback or Feature Requests
  • Sign in
  • Home /
  • Questions /
avatar image
0
Question by jfournie6@gmail.com · May 10, 2017 at 08:17 AM · predix-ui-seedsass

Predix-UI - px-buttons-design

Hi !

I would like to use the predix-ui button (px-buttons-design) in a page, and it's doesn't work. I put the two line :

$inuit-enable-btn--large : true;

@import "px-buttons-design/_objects.buttons.scss";

in predix-seed/public/bower_components/px-starter-kit-design/sass/px-starter-kit-design-demo.scss but i don't know if it's the right place.

Thanks in advance !

Comment
Add comment
10 |1200 characters needed characters left characters exceeded
▼
  • Viewable by all users
  • Viewable by moderators
  • Viewable by moderators and the original poster
  • Advanced visibility
Viewable by all users

3 Replies

  • Sort: 
avatar image
0

Answer by Megha.Gupta12@ge.com · Oct 30, 2018 at 01:34 AM

@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 ??

Comment
Add comment · Share
10 |1200 characters needed characters left characters exceeded
▼
  • Viewable by all users
  • Viewable by moderators
  • Viewable by moderators and the original poster
  • Advanced visibility
Viewable by all users
avatar image
0

Answer by Greg Stroup · May 18, 2017 at 09:49 AM

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.

Comment
Add comment · Share
10 |1200 characters needed characters left characters exceeded
▼
  • Viewable by all users
  • Viewable by moderators
  • Viewable by moderators and the original poster
  • Advanced visibility
Viewable by all users
avatar image
0

Answer by Randy Askin · May 11, 2017 at 09:16 AM

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.

Comment
Add comment · Show 1 · Share
10 |1200 characters needed characters left characters exceeded
▼
  • Viewable by all users
  • Viewable by moderators
  • Viewable by moderators and the original poster
  • Advanced visibility
Viewable by all users
avatar image jfournie6@gmail.com · May 18, 2017 at 01:56 AM 0
Share

Hi !

Thanks for the reply. I understood what you wanted to say about the bower component and where i need to modify saas but when i modify the index-inline.scss nothing happens, the button doesn't change.

I certainly miss something...

Follow this Question

Answers Answers and Comments

71 People are following this question.

avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image

Related Questions

Setting up SASS pipeline with Predix Seed 2 Answers

Multiple Y-axis Scales on px-vis-timeseries 1 Answer

How can i hit my predix-seed application from different machine using IP address 1 Answer

Predix UI Seed app - remove hash from url 1 Answer

predix-webapp-starter context changed event 1 Answer

GE Monogram
  • Legal
  • Cookies
  • Forum Terms
  • Contact Us
  • Copyright © 2017 General Electric Company. All rights reserved.


Enterprise
Social Q&A

  • Anonymous
  • Sign in
  • Create
  • Ask a question
  • Create an article
  • Submit your feedback or feature request
  • Categories
  • Questions
  • Predix | Updates
    • Pricing
    • Product
  • Deloitte - Private
  • How-To
  • Accenture-Private
  • Explore
  • Topics
  • Questions
  • Articles
  • Feedback or Feature Requests