diff --git a/README.md b/README.md
index 0e046f7fbc10fa7842013211aa0bb36319e77ccf..a625b375bbdaf8389b71cb601d673d2fe3e737d9 100644
--- a/README.md
+++ b/README.md
@@ -17,7 +17,7 @@ Use the component's HTML tag wherever you want:
login-url=""
logout-url=""
session-endpoint=""
- open-right=""
+ open-right
>
</myuw-profile>
```
@@ -32,3 +32,10 @@ Use the component's HTML tag wherever you want:
#### Slots
- **Profile Navigation Item (nav-item):** Add a custom item to the profile button's navigation menu, this slot expects an `<a>` tag
+
+#### CSS Variables
+
+- `--myuw-profile-font`: Set the font stack for this component
+- `--myuw-profile-login-color`: Se the font color for the "Login" button
+
+For more information about CSS variables and how they work with MyUW Web Components, [reference the styles component](https://github.com/myuw-web-components/myuw-app-styles "reference the styles component")
\ No newline at end of file
diff --git a/index.html b/index.html
index 651dfc6607c22dbc75e22b9752a651a69e862600..830c3f94f852b519fd3ba59b82be91ba2cd3a37b 100644
--- a/index.html
+++ b/index.html
@@ -6,6 +6,7 @@
margin: 0;
}
</style>
+ <script src="https://unpkg.com/@myuw-web-components/myuw-app-styles/myuw-app-styles.js"></script>
<link rel="import" href="https://unpkg.com/@myuw-web-components/myuw-app-bar@1.0.0/myuw-app-bar.html">
<link rel="import" href="myuw-profile.html">
diff --git a/myuw-profile.html b/myuw-profile.html
index 9f773def3392f15b634615a2dce7c4aeb6f22908..2201a5fde7ce3f254565a95f47e2ece4da7bf250 100644
--- a/myuw-profile.html
+++ b/myuw-profile.html
@@ -1,132 +1,131 @@
<!DOCTYPE html>
<template id="myuw-profile-template">
<style>
- :host([hidden]) {
- display: none;
- }
+ :host([hidden]) {
+ display: none;
+ }
- #myuw-profile-login {
- font-family: 'Montserrat', 'Roboto', Arial, sans-serif;
- text-transform: uppercase;
- text-decoration: none;
- color: white;
- padding: 10px 13px;
- font-weight: bold;
- letter-spacing: 0px;
- font-size: 14px;
- position: relative;
- display: inline-block;
- }
+ #myuw-profile-login {
+ font-family: var( --myuw-profile-font, var(--myuw-font, 'Montserrat', 'Roboto', Arial, sans-serif) );
+ text-transform: uppercase;
+ text-decoration: none;
+ color: var( --myuw-profile-login-color, var(--myuw-primary-color, white) );
+ padding: 10px 13px;
+ font-weight: bold;
+ letter-spacing: 0px;
+ font-size: 14px;
+ position: relative;
+ display: inline-block;
+ }
- #myuw-profile-login.hidden {
- display: none;
- }
+ #myuw-profile-login.hidden {
+ display: none;
+ }
- #myuw-profile-circle {
- position: relative;
- display: inline-block;
- width: 40px;
- height: 40px;
- border-radius: 100%;
- display: flex;
- justify-content: center;
- align-items: center;
- cursor: pointer;
- }
+ #myuw-profile-circle {
+ position: relative;
+ display: inline-block;
+ width: 40px;
+ height: 40px;
+ border-radius: 100%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ cursor: pointer;
+ }
- #myuw-profile-circle-initial {
- padding: 0;
- margin: 0;
- font-weight: 500;
- font-size: 18px;
- font-family: 'Montserrat', 'Roboto', Arial, sans-serif;
- user-select: none;
- color: white;
- text-transform: capitalize;
- }
+ #myuw-profile-circle-initial {
+ padding: 0;
+ margin: 0;
+ font-weight: 500;
+ font-size: 18px;
+ font-family: var( --myuw-profile-font, var(--myuw-font, 'Montserrat', 'Roboto', Arial, sans-serif) );
+ user-select: none;
+ color: white;
+ text-transform: capitalize;
+ }
- #myuw-profile-wrapper {
- position: relative;
- display: inline-block;
- }
+ #myuw-profile-wrapper {
+ position: relative;
+ display: inline-block;
+ }
- #myuw-profile-wrapper.hidden {
- display: none;
- }
+ #myuw-profile-wrapper.hidden {
+ display: none;
+ }
- #myuw-profile-nav {
- position: absolute;
- top: 45px;
- right: 0;
- background-color:white;
- min-width: 320px;
- color: black;
- list-style: none;
- margin: 0;
- padding: 0;
- font-size: 14px;
-
- transform-origin: top right;
- transform: scale(0);
- opacity: 0;
- transition: opacity .25s cubic-bezier(0.0, 0.0, 0.2, 1), transform .25s cubic-bezier(0.0, 0.0, 0.2, 1);
-
- -webkit-box-shadow: 0px 0px 7px 0px rgba(50, 50, 50, 0.75);
- -moz-box-shadow: 0px 0px 7px 0px rgba(50, 50, 50, 0.75);
- box-shadow: 0px 0px 7px 0px rgba(50, 50, 50, 0.75);
- }
+ #myuw-profile-nav {
+ position: absolute;
+ top: 45px;
+ right: 0;
+ min-width: 320px;
+ color: black;
+ list-style: none;
+ margin: 0;
+ padding: 0;
+ font-size: 14px;
+
+ transform-origin: top right;
+ transform: scale(0);
+ opacity: 0;
+ transition: opacity .25s cubic-bezier(0.0, 0.0, 0.2, 1), transform .25s cubic-bezier(0.0, 0.0, 0.2, 1);
+
+ -webkit-box-shadow: 0px 0px 7px 0px rgba(50, 50, 50, 0.75);
+ -moz-box-shadow: 0px 0px 7px 0px rgba(50, 50, 50, 0.75);
+ box-shadow: 0px 0px 7px 0px rgba(50, 50, 50, 0.75);
+ }
- #myuw-profile-nav.open-right {
- left: 0;
- right: inherit;
- transform-origin: top left;
- }
+ #myuw-profile-nav.open-right {
+ left: 0;
+ right: inherit;
+ transform-origin: top left;
+ }
- #myuw-profile-nav.visible {
- transform: scale(1);
- opacity: 1;
- }
+ #myuw-profile-nav.visible {
+ transform: scale(1);
+ opacity: 1;
+ }
- #myuw-profile-nav p {
- padding: 0;
- margin: 0;
- }
+ #myuw-profile-nav p {
+ padding: 0;
+ margin: 0;
+ }
- #myuw-profile-nav a,
- #myuw-profile-nav p,
- ::slotted(a),
- ::slotted(p){
- transition: all .3s ease;
- position: relative;
- font-size: 15px;
- font-family: 'Montserrat', 'Roboto', Arial, sans-serif;
- display: block;
- padding: 14px 16px;
- color: black;
- text-decoration: none;
- background-color: #f9f9f9;
- border-bottom: solid 1px #e5e5e5;
- user-select: none;
- }
+ #myuw-profile-nav a,
+ #myuw-profile-nav p,
+ ::slotted(a),
+ ::slotted(p){
+ transition: all .3s ease;
+ position: relative;
+ font-size: 15px;
+ font-family: var( --myuw-profile-font, var(--myuw-font, 'Montserrat', 'Roboto', Arial, sans-serif) );
+ display: block;
+ padding: 14px 16px;
+ color: black;
+ text-decoration: none;
+ background-color: #f9f9f9;
+ border-bottom: solid 1px #e5e5e5;
+ user-select: none;
+ }
- #myuw-profile-nav a:first-child,
- #myuw-profile-nav p:first-child {
- padding: 14px 16px;
- font-weight: bold;
- background-color: white;
- }
+ #myuw-profile-nav a:first-child,
+ #myuw-profile-nav p:first-child {
+ padding: 14px 16px;
+ font-weight: bold;
+ background-color: white;
+ }
- #myuw-profile-nav a:first-child:hover,
- #myuw-profile-nav p:first-child:hover {
- background-color: white;
- }
+ #myuw-profile-nav a:first-child:hover,
+ #myuw-profile-nav p:first-child:hover {
+ background-color: white;
+ }
- #myuw-profile-nav a:hover,
- #myuw-profile-nav p:hover,
- ::slotted(a:hover),
- ::slotted(p:hover) {
- background-color: rgba(158,158,158,0.2);
- }
+ #myuw-profile-nav a:hover,
+ #myuw-profile-nav p:hover,
+ ::slotted(a:hover),
+ ::slotted(p:hover) {
+ background-color: rgba(158,158,158,0.2);
+ }
</style>
<a href="#" id="myuw-profile-login" class="hidden">Login</a>