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 · 8 comments
Closed

Angular theme suport #2750

malcomm opened this issue Feb 23, 2019 · 8 comments

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

This comment has been minimized.

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

This comment has been minimized.

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

This comment has been minimized.

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

This comment has been minimized.

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

This comment has been minimized.

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 Jun 28, 2019
@kernwig

This comment has been minimized.

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

This comment has been minimized.

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

This comment has been minimized.

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.)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
8 participants
You can’t perform that action at this time.