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 investigating pending-close-response-required

Comments

@malcomm
Copy link

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

@LucasRouckhout LucasRouckhout commented Feb 24, 2019

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 label Feb 25, 2019
@elorzafe elorzafe added investigating and removed investigating labels Mar 1, 2019
@jarrettj
Copy link

@jarrettj jarrettj commented Mar 29, 2019

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

@jordanranz jordanranz commented May 22, 2019

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 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 stale bot added the pending-close-response-required label Jun 21, 2019
@stale
Copy link

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

@github-actions github-actions bot commented Jun 12, 2021

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 investigating pending-close-response-required
Projects
None yet
Development

No branches or pull requests

8 participants