Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Angular theme suport #2750

Closed
malcomm opened this issue Feb 23, 2019 · 9 comments
Closed

Angular theme suport #2750

malcomm opened this issue Feb 23, 2019 · 9 comments
Assignees
Labels
Angular Related to Angular 2+ investigating This issue is being investigated

Comments

@malcomm
Copy link

malcomm commented Feb 23, 2019

** Which Category is your question related to? **
aws-amplify-angular v2.1.6

** What AWS Services are you utilizing? **
aws-amplify-angular / Cognito

** Provide additional details e.g. code snippets **
I'm just trying to figure out if theme support is there for Angular. React seems to have a ton of support for themes, but Angular seems to have no love.

Getting down to the core, after importing Theme.css it pretty much horks up my entire application's theme:

@import '~aws-amplify-angular/Theme.css';

Should I just be rolling my own here? Or am I just missing something?

Appreciate any help. Thanks.

@LucasRouckhout
Copy link

I had the same issue. I'm building an Angular app and using the and when importing the styling it completely screws up the rest of my styling.

A quick look in the actual CSS reveals why this is so. ~aws-amplify-angular/Theme.css' actually contains three other imports:

@import "~@aws-amplify/ui/src/Theme.css";
@import "~@aws-amplify/ui/src/Angular.css";
@import "~@aws-amplify/ui/dist/style.css";

It is the Angular one that contains most of the irritating css.

...
h1 {
  height: 50px;
  font-weight: 500;
}

h2 {
  height: 42px;
  font-weight: 300;
}

h4 {
  height: 28px;
  font-weight: 400;
}

h5 {
  height: 21px;
  font-weight: 400;
}

p {
  height: 16px;
  font-weight: 300;
}
...

So what I did as a workaround was copying the css that I needed from these files, which would be the authenticator, forms and input groups css, and put it in my styles.css. It clutters up your styles.css a bit but you can remove the unwanted styling and change the parts you want.

@haverchuck haverchuck self-assigned this Feb 25, 2019
@haverchuck haverchuck added the Angular Related to Angular 2+ label Feb 25, 2019
@elorzafe elorzafe added investigating This issue is being investigated and removed investigating This issue is being investigated labels Mar 1, 2019
@jarrettj
Copy link

Hey,

Good day.

Yup, it really does not play nice with Angular Material. Weird why it would have to mess things up. Should the theme not be specific to amplify components only? Instead of changing global styles.

Regards.

@jordanranz
Copy link
Contributor

FYI, we have started an RFC discussion for a proposed Amplify UI Component refactor to increase customizability and flexibility for our components. Please feel free to add any additional comments to the following issue:

#3279

@stale
Copy link

stale bot commented Jun 21, 2019

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

@stale
Copy link

stale bot commented Jun 28, 2019

This issue has been automatically closed because of inactivity. Please open a new issue if are still encountering problems.

@stale stale bot closed this as completed Jun 28, 2019
@kernwig
Copy link

kernwig commented Aug 31, 2019

After some experimentation, I found that adding this to my app's style.scss properly applied the Amplify theme isolated to only where needed:

@import "~@aws-amplify/ui/src/Theme.css";
.amplify-block {
    @import "~@aws-amplify/ui/src/Angular";

    .amplify-container {
        padding-bottom: 2em;
    }
}

Basic usage:

        <div class="amplify-block">
            <amplify-authenticator></amplify-authenticator>
        </div>

The padding-bottom applies some padding to the sign-in/sign-up form under the buttons, which seems like a bug too.

@andrew-aernos
Copy link

andrew-aernos commented Sep 5, 2019

After some experimentation, I found that adding this to my app's style.scss properly applied the Amplify theme isolated to only where needed:

@import "~@aws-amplify/ui/src/Theme.css";
.amplify-block {
    @import "~@aws-amplify/ui/src/Angular";

    .amplify-container {
        padding-bottom: 2em;
    }
}

Basic usage:

        <div class="amplify-block">
            <amplify-authenticator></amplify-authenticator>
        </div>

The padding-bottom applies some padding to the sign-in/sign-up form under the buttons, which seems like a bug too.

My angular app is setup with plain css, what is the way to do this in plan .css? Tried some online scss -> css compiler but it doesn't work,.

@kernwig
Copy link

kernwig commented Sep 14, 2019

@andrew-aernos The advantage of scss is that you can declare styles in a scope. My first suggestion is to convert your app to use scss. If that is not an option, then my second suggestion is to copy the Amplify Angular stylesheet, and manually put .amplify-block in front of every style in it. (That's basically what the above does.)

@github-actions
Copy link

This issue has been automatically locked since there hasn't been any recent activity after it was closed. Please open a new issue for related bugs.

Looking for a help forum? We recommend joining the Amplify Community Discord server *-help channels or Discussions for those types of questions.

@github-actions github-actions bot locked as resolved and limited conversation to collaborators Jun 12, 2021
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Angular Related to Angular 2+ investigating This issue is being investigated
Projects
None yet
Development

No branches or pull requests

8 participants