Update component to use CSS variables

1223d582 · Scott Berg · 174e652f · 1223d582 · 1223d582 · 1223d582
Commit 1223d582 authored 6 years ago by Scott Berg
--- 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
--- 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">

--- a/myuw-profile.html
+++ b/myuw-profile.html
 <!DOCTYPE html>
 <template id="myuw-profile-template">
    <style>
-        #myuw-profile-login {
+    #myuw-profile-login {
-        font-family: 'Montserrat', 'Roboto', Arial, sans-serif;
+        font-family: var( --myuw-profile-font, var(--myuw-font, 'Montserrat', 'Roboto', Arial, sans-serif) );
        text-transform: uppercase;
        text-decoration: none;
-        color: white;
+        color: var( --myuw-profile-login-color, var(--myuw-primary-color, white) );
        padding: 10px 13px;
        font-weight: bold;
        letter-spacing: 0px;
@@ -35,7 +35,7 @@
        margin: 0;
        font-weight: 500;
        font-size: 18px;
-        font-family: 'Montserrat', 'Roboto', Arial, sans-serif;
+        font-family: var( --myuw-profile-font, var(--myuw-font, 'Montserrat', 'Roboto', Arial, sans-serif) );
        user-select: none;
        color: white;
        text-transform: capitalize;
@@ -54,7 +54,6 @@
        position: absolute;
        top: 45px;
        right: 0;
-        background-color:white;
        min-width: 320px;
        color: black;
        list-style: none;
@@ -95,7 +94,7 @@
        transition: all .3s ease;
        position: relative;
        font-size: 15px;
-        font-family: 'Montserrat', 'Roboto', Arial, sans-serif;
+        font-family: var( --myuw-profile-font, var(--myuw-font, 'Montserrat', 'Roboto', Arial, sans-serif) );
        display: block;
        padding: 14px 16px;
        color: black;