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.

Sign up for GitHub

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

Jump to bottom

Button design #298

Merged
merged 5 commits into from
Feb 18, 2017
Merged

Button design #298

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
e0ab6d6
New style for examples pages
Feb 18, 2017
eca4ef9
Correct breadcrumb links
Feb 18, 2017
ad8ea9d
New design for code example pages
Feb 18, 2017
0d46810
Update button design
Feb 18, 2017
77331df
Merge branch 'master' into button-design
Feb 18, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
31 changes: 30 additions & 1 deletion examples/button/button.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,35 @@
<script src="js/button.js" type="text/javascript"></script>
</head>
<body>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="width: 0; height: 0;">
<defs>
<symbol id="icon-mute" viewBox="0 0 75 75">
<polygon
id="polygon1"
points="39.389,13.769 22.235,28.606 6,28.606 6,47.699 21.989,47.699 39.389,62.75 39.389,13.769"
style="stroke:currentColor;stroke-width:5;stroke-linejoin:round;fill:currentColor;" />

<path
id="path3003"
d="M 48.651772,50.269646 69.395223,25.971024"
style="fill:none;stroke:currentColor;stroke-width:5;stroke-linecap:round" />
<path
id="path3003-1"
d="M 69.395223,50.269646 48.651772,25.971024"
style="fill:none;stroke:currentColor;stroke-width:5;stroke-linecap:round"/>
</symbol>
<symbol id="icon-sound" viewBox="0 0 75 75">
<polygon points="39.389,13.769 22.235,28.606 6,28.606 6,47.699 21.989,47.699 39.389,62.75 39.389,13.769"
style="stroke:currentColor;stroke-width:5;stroke-linejoin:round;fill:currentColor;"/>
<path d="M 48.128,49.03 C 50.057,45.934 51.19,42.291 51.19,38.377 C 51.19,34.399 50.026,30.703 48.043,27.577"
style="fill:none;stroke:currentColor;stroke-width:5;stroke-linecap:round"/>
<path d="M 55.082,20.537 C 58.777,25.523 60.966,31.694 60.966,38.377 C 60.966,44.998 58.815,51.115 55.178,56.076"
style="fill:none;stroke:currentColor;stroke-width:5;stroke-linecap:round"/>
<path d="M 61.71,62.611 C 66.977,55.945 70.128,47.531 70.128,38.378 C 70.128,29.161 66.936,20.696 61.609,14.01"
style="fill:none;stroke:currentColor;stroke-width:5;stroke-linecap:round"/>
</symbol>
</defs>
</svg>
<main>
<h1>Button Examples</h1>
<p>
Expand All @@ -34,7 +63,7 @@ <h3>Action Button</h3>
<h3>Toggle Button</h3>
<p>Mute button uses a <code>a</code> element.</p>
<div>
<a tabindex="0" role="button" id="toggle" aria-pressed="false">Mute</a>
<a tabindex="0" role="button" id="toggle" aria-pressed="false">Mute <svg aria-hidden="true"><use xlink:href="#icon-sound"></use></svg></a>
</div>

</div>
Expand Down
85 changes: 75 additions & 10 deletions examples/button/css/button.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,23 +1,88 @@
[role="button"] {
display: inline-block;
padding: 5px 10px;
border: 2px solid #555;
position: relative;
padding: .4em .7em;
border: 1px solid hsl(213, 71%, 49%);
border-radius: 5px;
color: #000;
background: #ddd;
box-shadow: 0 1px 2px hsl(216, 27%, 55%);
overflow: visible;
color: #fff;
text-shadow: 0 -1px 1px hsl(216, 27%, 25%);
background: hsl(216, 82%, 51%);
background-image: linear-gradient(to bottom, hsl(216, 82%, 53%), hsl(216, 82%, 47%));
}

[role="button"]:hover,
[role="button"]:focus {
background-color: #eee;
[role="button"]:hover {
border-color: hsl(213, 71%, 29%);
background: hsl(216, 82%, 31%);
background-image: linear-gradient(to bottom, hsl(216, 82%, 33%), hsl(216, 82%, 27%));
cursor: default;
outline: none;
}

[role="button"]:focus {
outline: none;
}

[role="button"]:focus::before {
position: absolute;
z-index: -1;
/* button border width - outline width - offset */
top: calc(-1px - 3px - 3px);
right: calc(-1px - 3px - 3px);
bottom: calc(-1px - 3px - 3px);
left: calc(-1px - 3px - 3px);
border: 3px solid hsl(213, 71%, 49%);
/* button border radius + outline width + offset */
border-radius: calc(5px + 3px + 3px);
content: '';
}

[role="button"]:active {
background-color: #bbb;
border-color: hsl(213, 71%, 49%);
background: hsl(216, 82%, 31%);
background-image: linear-gradient(to bottom, hsl(216, 82%, 53%), hsl(216, 82%, 47%));
box-shadow: inset 0 3px 5px 1px hsl(216, 82%, 30%);
}

[role="button"][aria-pressed] {
border-color: hsl(261, 71%, 49%);
box-shadow: 0 1px 2px hsl(261, 27%, 55%);
text-shadow: 0 -1px 1px hsl(261, 27%, 25%);
background: hsl(261, 82%, 51%);
background-image: linear-gradient(to bottom, hsl(261, 82%, 53%), hsl(261, 82%, 47%));
}

[role="button"][aria-pressed]:hover {
border-color: hsl(261, 71%, 29%);
background: hsl(261, 82%, 31%);
background-image: linear-gradient(to bottom, hsl(261, 82%, 33%), hsl(261, 82%, 27%));
cursor: default;
}

[role="button"][aria-pressed="true"] {
color: #fff;
background: #333;
padding-top: .5em;
padding-bottom: .3em;
border-color: hsl(261, 71%, 49%);
background: hsl(261, 82%, 31%);
background-image: linear-gradient(to bottom, hsl(261, 82%, 63%), hsl(261, 82%, 57%));
box-shadow: inset 0 3px 5px 1px hsl(261, 82%, 30%);
}

[role="button"][aria-pressed="true"]:hover {
border-color: hsl(261, 71%, 49%);
background: hsl(261, 82%, 31%);
background-image: linear-gradient(to bottom, hsl(261, 82%, 43%), hsl(261, 82%, 37%));
box-shadow: inset 0 3px 5px 1px hsl(261, 82%, 20%);
}

[role="button"][aria-pressed]:focus::before {
border-color: hsl(261, 71%, 49%);
}

[role="button"] svg {
margin: .15em auto -.15em;
height: 1em;
width: 1em;
//vertical-align: middle;
}
6 changes: 6 additions & 0 deletions examples/button/js/button.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,13 +62,19 @@ function toggleButtonState (event) {
var currentState = button.getAttribute('aria-pressed');
var newState = 'true';

var icon = button.getElementsByTagName('use')[0];
var currentIconState = icon.getAttribute('xlink:href');
var newIconState = '#icon-mute';

// If aria-pressed is set to true, set newState to false
if (currentState === 'true') {
newState = 'false';
newIconState = '#icon-sound';
}

// Set the new aria-pressed state on the button
button.setAttribute('aria-pressed', newState);
icon.setAttribute('xlink:href', newIconState);
}

window.onload = init;