From 1223d582790489107bff0122a210378dad53ac1c Mon Sep 17 00:00:00 2001
From: Scott Berg <saberg3@wisc.edu>
Date: Tue, 19 Jun 2018 11:25:39 -0500
Subject: [PATCH] Update component to use CSS variables
---
README.md | 9 ++++++++-
index.html | 1 +
myuw-profile.html | 11 +++++------
3 files changed, 14 insertions(+), 7 deletions(-)
diff --git a/README.md b/README.md
index 0e046f7..a625b37 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 651dfc6..830c3f9 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 bff2d37..5f3eb2c 100644
--- a/myuw-profile.html
+++ b/myuw-profile.html
@@ -1,11 +1,11 @@
<!DOCTYPE html>
<template id="myuw-profile-template">
<style>
- #myuw-profile-login {
- font-family: 'Montserrat', 'Roboto', Arial, sans-serif;
+ #myuw-profile-login {
+ 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;
--
GitLab