AUI x Design Align Buttons
Pulls in the latest AUI stylesheet and adds in special button styles for WAC
HTML
<script src="https://docs.atlassian.com/aui/5.5.1/sandbox/aui/js/aui-all.js"></script>
<h3>WAC Buttons</h3>
<p>
<button class="wac-button wac-button-primary">Primary disabled</button>
</p>
<p>
<button class="wac-button wac-button-secondary">Secondary disabled</button>
</p>
<p>
<button class="wac-button wac-button-primary" aria-disabled="true" disabled="">Primary button</button>
</p>
<p>
<button class="wac-button wac-button-secondary" aria-disabled="true" disabled="">Secondary button</button>
</p>
<p>
<button class="wac-button wac-button-subtle">Subtle</button>
</p>
<p>
<button class="wac-button wac-button-subtle">Cart<span class="count">2</span></button>
</p>
<p>
<button class="wac-button wac-button-link">Link button</button>
</p>
<br/>
<hr/>
<h3>WAC Alternative Buttons</h3>
<p>
<button class="wac-button-alt wac-button-primary">Primary button</button>
</p>
<p>
<button class="wac-button-alt wac-button-secondary">Secondary button</button>
</p>
<p>
<button class="wac-button-alt wac-button-subtle">Subtle</button>
</p>
<br/>
<hr/>
<h3>Sample Navigation</h3>
<ul>
<li><button class="wac-button wac-button-link">Shop</button></li>
<li><button class="active wac-button wac-button-link">Renew</button></li>
<li><button class="wac-button wac-button-link">Upgrade</button></li>
<li><button class="wac-button wac-button-subtle">Cart<span class="count">2</span></button></li>
</ul>
<br/><br/>
<hr/>
<h3>Button Groups</h3>
<p class="wac-buttons">
<button class="wac-button active">Overview</button>
<button class="wac-button">Features</button>
<button class="wac-button">Pricing</button>
</p>
<p class="wac-buttons-secondary">
<button class="wac-button active">Overview</button>
<button class="wac-button">Features</button>
<button class="wac-button">Pricing</button>
</p>
<p class="wac-buttons-alt">
<button class="wac-button active">Overview</button>
<button class="wac-button">Features</button>
...
CSS
@import url(https://docs.atlassian.com/aui/latest/aui/css/aui.min.css);
@import url(https://docs.atlassian.com/aui/latest/aui/css/aui-experimental.min.css);
html, body {
height:100%;
width:100%;
padding:0;
margin:0;
}
body {
background-color:#FFF;
box-sizing: border-box;
border-top:40px solid #205081;
padding:20px;
}
body:before {
content:'';
position:absolute;
top:10px;
left:20px;
display:block;
background-image: url(http://buttonpresser.com/Atlassian_prototype_logo.png);
background-repeat:no-repeat;
background-position:top left;
width:156px;
height:23px;
}
ul {float:right;list-style:none;margin:0;padding:0;}
ul li {display:inline-block;margin-left:40px;}
ul li:first-child {margin-left:0;}
/*----------------------------------
---- ONLY USE CSS BELOW THIS LINE ---
------------------------------------*/
.wac-button {
font-family: "Helvetica Neue", Helvetica, arial, sans-serif;
font-weight: normal;
font-size: 16px;
line-height:40px;
color: #FFF;
padding: 0 15px;
display: inline-block;
text-align: center;
background-color: #67AB48;
border-color: #67AB48;
border-width: 1px;
border-style: solid;
border-radius: 4px;
cursor: pointer;
}
.wac-button:hover {
background-color: #58923c;
border-color: #58923c;
}
.wac-button[aria-disabled=true],
.wac-button[aria-disabled=true]:active,
.wac-button[aria-disabled=true]:focus,
.wac-button[aria-disabled=true]:hover,
.wac-button[aria-disabled=true][aria-pressed],
.wac-button[disabled],
.wac-button[disabled]:active,
.wac-button[disabled]:focus,
.wac-button[disabled]:hover {
background: #F5F5F5;
border-color: #DDD;
box-shadow: none;
color: #999;
cursor: default;
}
.wac-button-alt {
font-family: "Helvetica Neue", Helvetica, arial, sans-serif;
font-weight: normal;
font-size: 16px;
line-height:40px;
color: #FFF;
padding: 0 15px;
display: inline-block;
...