deblan-mirror/papercss
1
0
Fork 0
mirror of https://github.com/papercss/papercss synced 2024-06-26 09:20:15 +02:00
Code Issues Projects Releases Wiki Activity

Merge pull request #17 from Fraham/Fraham-MoreButtonStyles

Browse source 
More button styles
This commit is contained in:
Rhyne 2017-11-08 07:21:33 -05:00 committed by GitHub
parent dd310fa002 ef5824da81
commit c83c9b1ef6
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 44 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
index.html
View file

@ -257,6 +257,21 @@
<button class="disabled">Disabled</button>
&lt;button disabled&gt;Disabled&lt;/button&gt;</pre>
</div>
<h4>Colors</h4>
<input type="button" class="paper-btn btn-primary" value="Primary"/>
<input type="button" class="btn-secondary" value="Secondary"/>
<button class="btn-success">Success</button>
<button class="btn-warning">Warning</button>
<button class="btn-danger">Danger</button>
<div class="docs">
<pre>
&lt;input type="button" class="paper-btn btn-primary" value="Primary"/&gt;
&lt;input type="button" class="btn-secondary" value="Secondary"/&gt;
&lt;button class="btn-success"&gt;Success&lt;/button&gt;
&lt;button class="btn-warning"&gt;Warning&lt;/button&gt;
&lt;button class="btn-danger"&gt;Danger&lt;/button&gt;
</pre>
</div>
</div>
<div id="forms" class="section">
<h2>Forms</h2>

25
src/buttons.less
View file

@ -1,15 +1,16 @@
button, .paper-btn, input[type="button"] {
button, .paper-btn, [type="button"] {
.shadow;
align-self:center;
background:transparent;
transition:all .5s ease;
transition:all .5s ease, background-color .1s ease;
color: @primary;
display: inline;
outline:none;
border:solid 2px @primary;
.border;
font-size: 1rem;
padding: .75rem .75rem;
cursor: pointer;
.shadow;
&.btn-large {
.shadow-large;
font-size:2rem;
@ -46,4 +47,20 @@ a {
text-decoration: none;
color: @primary;
}
}
}
.make-button-color-classes(@i: length(@colors)) when (@i > 0) {
.make-button-color-classes(@i - 1);
@color: extract(@colors, @i);
button.btn-@{color}, .paper-btn.btn-@{color}, [type="button"].btn-@{color} {
border-color: @@color;
background-color: ~"@{@{color}-light}";
color: ~"@{@{color}-text}";
&:hover:active{
@darkcolour: ~"@{color}-light";
background-color: darken(@@darkcolour, 10%);
}
}
}
.make-button-color-classes();

8
src/colors.less
View file

@ -13,6 +13,14 @@
@danger-light: lighten(@danger, 45%);
@muted-light: lighten(@muted, 35%);
@primary-text: #FFF;
@secondary-text: @primary;
@success-text: @primary;
@warning-text: @primary;
@danger-text: @primary;
@muted-text: @primary;
@white-dark: rgba(0, 0, 0, .03);
@colors: primary, secondary, success, warning, danger, muted;