Commit c5f6c5d9 authored by Thomas Park's avatar Thomas Park

paper: tweak button shadows

parent 919147c5
......@@ -38,14 +38,13 @@
@mixin btn($class,$bg){
.btn-#{$class} {
@include gradient-radial($bg 80%, darken($bg, 6%) 81%);
background-size: 200%;
background-position: 50%;
transition: background-size 2s;
&:hover {
background-size: 100%;
border-color: darken($bg, 6%);
&:hover,
&:active:hover,
&:focus {
background-color: darken($bg, 6%);
}
&:active {
......
......@@ -6610,21 +6610,14 @@ button.close {
margin-top: 2px;
}
.btn-default {
background-image: -webkit-radial-gradient(circle, #ffffff 80%, #f0f0f0 81%);
background-image: -o-radial-gradient(circle, #ffffff 80%, #f0f0f0 81%);
background-image: radial-gradient(circle, #ffffff 80%, #f0f0f0 81%);
background-repeat: no-repeat;
-webkit-background-size: 200% 200%;
background-size: 200%;
background-position: 50%;
-webkit-transition: background-size 2s;
-o-transition: background-size 2s;
transition: background-size 2s;
}
.btn-default:hover {
-webkit-background-size: 100% 100%;
background-size: 100%;
border-color: #f0f0f0;
.btn-default:hover,
.btn-default:active:hover,
.btn-default:focus {
background-color: #f0f0f0;
}
.btn-default:active {
background-color: #f0f0f0;
......@@ -6638,21 +6631,14 @@ button.close {
box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.3);
}
.btn-primary {
background-image: -webkit-radial-gradient(circle, #2196f3 80%, #0d87e9 81%);
background-image: -o-radial-gradient(circle, #2196f3 80%, #0d87e9 81%);
background-image: radial-gradient(circle, #2196f3 80%, #0d87e9 81%);
background-repeat: no-repeat;
-webkit-background-size: 200% 200%;
background-size: 200%;
background-position: 50%;
-webkit-transition: background-size 2s;
-o-transition: background-size 2s;
transition: background-size 2s;
}
.btn-primary:hover {
-webkit-background-size: 100% 100%;
background-size: 100%;
border-color: #0d87e9;
.btn-primary:hover,
.btn-primary:active:hover,
.btn-primary:focus {
background-color: #0d87e9;
}
.btn-primary:active {
background-color: #0d87e9;
......@@ -6666,21 +6652,14 @@ button.close {
box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.3);
}
.btn-success {
background-image: -webkit-radial-gradient(circle, #4caf50 80%, #439a46 81%);
background-image: -o-radial-gradient(circle, #4caf50 80%, #439a46 81%);
background-image: radial-gradient(circle, #4caf50 80%, #439a46 81%);
background-repeat: no-repeat;
-webkit-background-size: 200% 200%;
background-size: 200%;
background-position: 50%;
-webkit-transition: background-size 2s;
-o-transition: background-size 2s;
transition: background-size 2s;
}
.btn-success:hover {
-webkit-background-size: 100% 100%;
background-size: 100%;
border-color: #439a46;
.btn-success:hover,
.btn-success:active:hover,
.btn-success:focus {
background-color: #439a46;
}
.btn-success:active {
background-color: #439a46;
......@@ -6694,21 +6673,14 @@ button.close {
box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.3);
}
.btn-info {
background-image: -webkit-radial-gradient(circle, #9c27b0 80%, #862197 81%);
background-image: -o-radial-gradient(circle, #9c27b0 80%, #862197 81%);
background-image: radial-gradient(circle, #9c27b0 80%, #862197 81%);
background-repeat: no-repeat;
-webkit-background-size: 200% 200%;
background-size: 200%;
background-position: 50%;
-webkit-transition: background-size 2s;
-o-transition: background-size 2s;
transition: background-size 2s;
}
.btn-info:hover {
-webkit-background-size: 100% 100%;
background-size: 100%;
border-color: #862197;
.btn-info:hover,
.btn-info:active:hover,
.btn-info:focus {
background-color: #862197;
}
.btn-info:active {
background-color: #862197;
......@@ -6722,21 +6694,14 @@ button.close {
box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.3);
}
.btn-warning {
background-image: -webkit-radial-gradient(circle, #ff9800 80%, #e08600 81%);
background-image: -o-radial-gradient(circle, #ff9800 80%, #e08600 81%);
background-image: radial-gradient(circle, #ff9800 80%, #e08600 81%);
background-repeat: no-repeat;
-webkit-background-size: 200% 200%;
background-size: 200%;
background-position: 50%;
-webkit-transition: background-size 2s;
-o-transition: background-size 2s;
transition: background-size 2s;
}
.btn-warning:hover {
-webkit-background-size: 100% 100%;
background-size: 100%;
border-color: #e08600;
.btn-warning:hover,
.btn-warning:active:hover,
.btn-warning:focus {
background-color: #e08600;
}
.btn-warning:active {
background-color: #e08600;
......@@ -6750,21 +6715,14 @@ button.close {
box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.3);
}
.btn-danger {
background-image: -webkit-radial-gradient(circle, #e51c23 80%, #cb171e 81%);
background-image: -o-radial-gradient(circle, #e51c23 80%, #cb171e 81%);
background-image: radial-gradient(circle, #e51c23 80%, #cb171e 81%);
background-repeat: no-repeat;
-webkit-background-size: 200% 200%;
background-size: 200%;
background-position: 50%;
-webkit-transition: background-size 2s;
-o-transition: background-size 2s;
transition: background-size 2s;
}
.btn-danger:hover {
-webkit-background-size: 100% 100%;
background-size: 100%;
border-color: #cb171e;
}
.btn-danger:hover,
.btn-danger:active:hover,
.btn-danger:focus {
background-color: #cb171e;
}
.btn-danger:active {
background-color: #cb171e;
......
This source diff could not be displayed because it is too large. You can view the blob instead.
......@@ -38,14 +38,13 @@
#btn(@class,@bg) {
.btn-@{class} {
#gradient > .radial(@bg 80%, darken(@bg, 6%) 81%);
background-size: 200%;
background-position: 50%;
transition: background-size 2s;
&:hover {
background-size: 100%;
border-color: darken(@bg, 6%);
&:hover,
&:active:hover,
&:focus {
background-color: darken(@bg, 6%);
}
&:active {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment