Skip to content
Snippets Groups Projects
Unverified Commit b99e38e2 authored by Scott Berg's avatar Scott Berg Committed by GitHub
Browse files

Merge pull request #6 from saberg3/master 

Update component to use CSS variables
parents e3c9f9f8 ea2ed415
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
README.md
+ 8
− 1
View file @ b99e38e2
......@@ -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
index.html
+ 1
− 0
View file @ b99e38e2
......@@ -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">
......
myuw-profile.html
+ 111
− 112
View file @ b99e38e2
<!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>
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment