joshua/dash-website
1
0
Fork 0
mirror of https://github.com/seigler/dash-website synced 2025-07-27 07:16:10 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

(Update) Buttons: Add new button styles

Browse source
This commit is contained in:
0xfff 2016-09-26 00:09:46 +02:00
parent c2f4932e26
commit 159f9797b3
2 changed files with 26 additions and 21 deletions
Download patch file Download diff file Expand all files Collapse all files

40
src/scss/_buttons.scss
View file

@ -1,10 +1,25 @@
.btn {
border-radius: 5px;
border: 2px solid;
padding: 5px 10px;
border-radius: 4px;
border: 0px solid;
padding: 5px 15px;
line-height: 30px;
height: 40px;
display: inline-block;
font-family: $font-heading;
font-weight: 300;
background-color: $blue;
color: $white;
box-shadow: 0px 1px 3px 0px rgba(0,0,0,0.08), 0px 4px 6px 0px rgba(49,49,93,0.13);
transition: all .2s ease;
&:hover {
transform: translateY(-1px);
box-shadow: 0 7px 14px rgba(50,50,93,.1), 0 3px 6px rgba(0,0,0,.08);
}
}
.btn.btn-large {
font-size: 24px;
padding: 10px 25px;
height: 50px;
}
.btn-white-solid {
@ -14,8 +29,6 @@
margin-bottom: 10px;
color: lighten($black, 5) !important;
text-decoration: none;
font-size: 16px;
text-transform: uppercase;
&:hover {
background-color: $white;
}
@ -28,8 +41,6 @@
color: $white !important;
text-decoration: none;
border: none;
font-size: 16px;
text-transform: uppercase;
&:hover {
background-color: darken($green, 3);
color: $white !important;
@ -38,26 +49,19 @@
.btn-blue {
@extend .btn;
border-radius: 5px;
border-color: $blue;
color: $blue !important;
background-color: $blue;
color: $white !important;
text-decoration: none;
&:hover {
background-color: $blue;
color: $white !important;
}
}
.btn-blue-solid {
@extend .btn;
background-color: lighten($blue, 5);
background-color: $blue;
color: $white !important;
text-decoration: none;
border: none;
font-size: 16px;
text-transform: uppercase;
&:hover {
background-color: darken($blue, 3);
background-color: lighten($blue, 3);
color: $white !important;
}
}

7
src/scss/_header.scss
View file

@ -24,12 +24,13 @@
font-weight: 200;
font-size: 24px;
line-height: 1.25;
margin-bottom: 0.5em;
margin-bottom: 34px; /*optical*/
}
.btn-blue-solid {
font-size: 20px;
padding: 5px 25px;
font-size: 24px;
padding: 10px 25px;
height: 50px;
}
}
}