Skip to content

Commit

Permalink
Add hollow button styles
Browse files Browse the repository at this point in the history
  • Loading branch information
@flynnduism
flynnduism committed Nov 15, 2015
1 parent d6d3ba2 commit 1f9286b
Show file tree
Hide file tree
Showing 2 changed files with 195 additions and 15 deletions.
137 changes: 126 additions & 11 deletions assets/css/styleguide.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8422,16 +8422,131 @@ button {
-webkit-border-radius: 1.5rem 1.5rem 1.5rem 1.5rem;
-moz-border-radius: 1.5rem 1.5rem 1.5rem 1.5rem;
border-radius: 1.5rem 1.5rem 1.5rem 1.5rem; }
.button i.fa,
button i.fa {
margin: 0 0.5rem;
.button i,
.button .fa,
button i,
button .fa {
margin: 0 0.5em;
font-size: 0.825em; }
.button i.fa.fa-chevron-left,
button i.fa.fa-chevron-left {
margin: 0 0.5rem 0 -0.25rem; }
.button i.fa.fa-chevron-right,
button i.fa.fa-chevron-right {
margin: 0 -0.25rem 0 0.5rem; }
.button i.left, .button i.fa-chevron-left,
.button .fa.left,
.button .fa.fa-chevron-left,
button i.left,
button i.fa-chevron-left,
button .fa.left,
button .fa.fa-chevron-left {
margin: 0.425em 0.825em 0 -0.825em; }
.button i.right, .button i.fa-chevron-right,
.button .fa.right,
.button .fa.fa-chevron-right,
button i.right,
button i.fa-chevron-right,
button .fa.right,
button .fa.fa-chevron-right {
margin: 0.425em -0.825em 0 0.825em; }
.button.large,
button.large {
font-size: 1.25rem !important; }
.button.small,
button.small {
font-size: 0.8125rem !important; }
.button.tiny,
button.tiny {
font-size: 0.6875rem !important; }
.button.compact,
button.compact {
font-size: 0.6875rem !important;
padding: 0.35em 1.5em 0.4em; }

.hollow {
border: 1px solid #079493 !important;
color: #079493;
background-color: transparent;
font-size: 14.8564px;
-webkit-box-shadow: 0 0 0 transparent;
-moz-box-shadow: 0 0 0 transparent;
box-shadow: 0 0 0 transparent;
font-family: "futura-pt", "futura-regular", Futura, "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: 400;
letter-spacing: 0.0075em;
-webkit-font-smoothing: antialiased;
-webkit-border-radius: 3px 3px 3px 3px;
-moz-border-radius: 3px 3px 3px 3px;
border-radius: 3px 3px 3px 3px;
transition: all 0.3s ease-in-out;
padding: 0.7rem 2.5rem 0.9rem; }
.hollow:hover {
border: 1px solid #056363 !important;
color: #056363 !important;
background-color: rgba(255, 255, 255, 0.2);
-webkit-box-shadow: 0 0 0 transparent;
-moz-box-shadow: 0 0 0 transparent;
box-shadow: 0 0 0 transparent; }
.hollow:active, .hollow:focus {
background-color: white; }
.hollow.primary {
border: 1px solid #079493 !important;
color: #079493;
background-color: transparent;
font-size: 14.8564px;
-webkit-box-shadow: 0 0 0 transparent;
-moz-box-shadow: 0 0 0 transparent;
box-shadow: 0 0 0 transparent;
font-family: "futura-pt", "futura-regular", Futura, "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: 400;
letter-spacing: 0.0075em;
-webkit-font-smoothing: antialiased;
-webkit-border-radius: 3px 3px 3px 3px;
-moz-border-radius: 3px 3px 3px 3px;
border-radius: 3px 3px 3px 3px;
transition: all 0.3s ease-in-out; }
.hollow.primary:hover {
border: 1px solid #056363 !important;
color: #056363 !important;
background-color: rgba(255, 255, 255, 0.2);
-webkit-box-shadow: 0 0 0 transparent;
-moz-box-shadow: 0 0 0 transparent;
box-shadow: 0 0 0 transparent; }
.hollow.primary:active, .hollow.primary:focus {
background-color: white; }
.hollow.primary:hover, .hollow.primary:active {
background-color: #079493;
border-color: transparent !important;
color: white !important; }
.hollow.secondary {
border: 1px solid #ecedf3 !important;
color: #ecedf3;
background-color: transparent;
font-size: 14.8564px;
-webkit-box-shadow: 0 0 0 transparent;
-moz-box-shadow: 0 0 0 transparent;
box-shadow: 0 0 0 transparent;
font-family: "futura-pt", "futura-regular", Futura, "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: 400;
letter-spacing: 0.0075em;
-webkit-font-smoothing: antialiased;
-webkit-border-radius: 3px 3px 3px 3px;
-moz-border-radius: 3px 3px 3px 3px;
border-radius: 3px 3px 3px 3px;
transition: all 0.3s ease-in-out;
border-color: #ecedf3 !important;
color: #969ca3 !important; }
.hollow.secondary:hover {
border: 1px solid #cdcfdf !important;
color: #cdcfdf !important;
background-color: rgba(255, 255, 255, 0.2);
-webkit-box-shadow: 0 0 0 transparent;
-moz-box-shadow: 0 0 0 transparent;
box-shadow: 0 0 0 transparent; }
.hollow.secondary:active, .hollow.secondary:focus {
background-color: white; }
.hollow.secondary:hover {
color: #7c939d !important;
border-color: #bbbcc7 !important;
background-color: transparent; }
.hollow[disabled], .hollow.disabled {
border-color: transparent !important;
cursor: not-allowed; }

button.disabled,
button[disabled],
Expand All @@ -8440,9 +8555,9 @@ button[disabled],
background-color: #dfdfdf;
color: #95a5a6;
opacity: 0.7;
cursor: text;
-webkit-box-shadow: none;
box-shadow: none; }
box-shadow: none;
cursor: not-allowed; }
button.disabled:hover, button.disabled:active,
button[disabled]:hover,
button[disabled]:active,
Expand Down
73 changes: 69 additions & 4 deletions styles.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,9 +57,9 @@ <h1>
<ul>
<li><a href="styles.html#colors">Colors</a></li>
<li><a href="styles.html#typography">Typography</a></li>
<li><a href="styles.html#buttons">Buttons</a></li>
<li><a href="styles.html#forms">Forms</a></li>
<li><a href="styles.html#icons">Icons</a></li>
<li><a href="styles.html#uielements">UI Elements</a></li>
<li><a href="styles.html#charts">Charts</a></li>
</ul>
</li>

Expand Down Expand Up @@ -530,13 +530,13 @@ <h3 id="uielements">UI Elements</h3>

<p>Thanks too to <a href="https://github.com/pineconellc/">Pinecone</a> for their <a href="http://pineconellc.github.io/angular-foundation/">angular-foundation</a> project.</p>
</div>
<div class="small-3 large-3 columns hide-for-small left">
<div id="buttons" class="small-3 large-3 columns hide-for-small left">
<img src="assets/img/foundation.svg" class="right">
</div>
</div>
</section>

<p>Button Examples:</p>
<p>Standard Button Examples:</p>

<div class="row">

Expand All @@ -556,6 +556,71 @@ <h3 id="uielements">UI Elements</h3>
</div>

<p>&nbsp;</p>
<p>Custom Border Buttons:</p>

<div class="row">

<div class="large-6 columns">
<a href="" class="button hollow">
A Regular Border Button
</a>
<br>
<a href="" class="button hollow primary">
<i class="fa fa-paper-plane left"></i>
A Primary Border Button
</a>
<br>
<a href="" class="button hollow secondary">
A Secondary Border Button
<i class="fa fa-chevron-right right"></i>
</a>
</div>

<div class="large-6 columns">
<a href="" class="button hollow disabled">
Disabled Border Button
</a>
<br>
<a href="" class="button hollow primary disabled">
<i class="fa fa-paper-plane left"></i>
Disabled Primary Border
</a>
<br>
<button class="button hollow secondary" disabled>
Disabled Secondary Border
<i class="fa fa-chevron-right right"></i>
</button>
</div>
</div>

<p>Sizes:</p>

<a href="" class="large button hollow">Large Button</a>
&nbsp;&nbsp;
<a href="" class="large button hollow secondary">Large Button</a>
<br>
<a href="" class="button hollow">Regular Button</a>
&nbsp;&nbsp;
<a href="" class="button hollow secondary">Regular Button</a>
<br>
<a href="" class="button hollow small">Small Button</a>
&nbsp;&nbsp;
<a href="" class="button hollow small secondary">Small Button</a>
<br>
<a href="" class="button hollow tiny">Tiny Button</a>
&nbsp;&nbsp;
<a href="" class="button hollow tiny secondary">Tiny Button</a>
<br>
<a href="" class="button hollow compact">Compact Button</a>
&nbsp;&nbsp;
<a href="" class="button hollow compact secondary">Compact Button</a>
<a href="" class="button hollow compact secondary">
Filter
<i class="fa fa-filter right"></i>
</a>
</p>

<p id="forms">&nbsp;</p>

<p>Form Examples:</p>

Expand Down

0 comments on commit 1f9286b

Please sign in to comment.