Commit c5f6c5d9 authored by Thomas Park's avatar Thomas Park
Browse files

paper: tweak button shadows

parent 919147c5
...@@ -38,14 +38,13 @@ ...@@ -38,14 +38,13 @@
@mixin btn($class,$bg){ @mixin btn($class,$bg){
.btn-#{$class} { .btn-#{$class} {
@include gradient-radial($bg 80%, darken($bg, 6%) 81%);
background-size: 200%; background-size: 200%;
background-position: 50%; background-position: 50%;
transition: background-size 2s;
&:hover { &:hover,
background-size: 100%; &:active:hover,
border-color: darken($bg, 6%); &:focus {
background-color: darken($bg, 6%);
} }
&:active { &:active {
......
...@@ -6610,21 +6610,14 @@ button.close { ...@@ -6610,21 +6610,14 @@ button.close {
margin-top: 2px; margin-top: 2px;
} }
.btn-default { .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%; -webkit-background-size: 200% 200%;
background-size: 200%; background-size: 200%;
background-position: 50%; background-position: 50%;
-webkit-transition: background-size 2s;
-o-transition: background-size 2s;
transition: background-size 2s;
} }
.btn-default:hover { .btn-default:hover,
-webkit-background-size: 100% 100%; .btn-default:active:hover,
background-size: 100%; .btn-default:focus {
border-color: #f0f0f0; background-color: #f0f0f0;
} }
.btn-default:active { .btn-default:active {
background-color: #f0f0f0; background-color: #f0f0f0;
...@@ -6638,21 +6631,14 @@ button.close { ...@@ -6638,21 +6631,14 @@ button.close {
box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.3); box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.3);
} }
.btn-primary { .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%; -webkit-background-size: 200% 200%;
background-size: 200%; background-size: 200%;
background-position: 50%; background-position: 50%;
-webkit-transition: background-size 2s;
-o-transition: background-size 2s;
transition: background-size 2s;
} }
.btn-primary:hover { .btn-primary:hover,
-webkit-background-size: 100% 100%; .btn-primary:active:hover,
background-size: 100%; .btn-primary:focus {
border-color: #0d87e9; background-color: #0d87e9;
} }
.btn-primary:active { .btn-primary:active {
background-color: #0d87e9; background-color: #0d87e9;
...@@ -6666,21 +6652,14 @@ button.close { ...@@ -6666,21 +6652,14 @@ button.close {
box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.3); box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.3);
} }
.btn-success { .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%; -webkit-background-size: 200% 200%;
background-size: 200%; background-size: 200%;
background-position: 50%; background-position: 50%;
-webkit-transition: background-size 2s;
-o-transition: background-size 2s;
transition: background-size 2s;
} }
.btn-success:hover { .btn-success:hover,
-webkit-background-size: 100% 100%; .btn-success:active:hover,
background-size: 100%; .btn-success:focus {
border-color: #439a46; background-color: #439a46;
} }
.btn-success:active { .btn-success:active {
background-color: #439a46; background-color: #439a46;
...@@ -6694,21 +6673,14 @@ button.close { ...@@ -6694,21 +6673,14 @@ button.close {
box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.3); box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.3);
} }
.btn-info { .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%; -webkit-background-size: 200% 200%;
background-size: 200%; background-size: 200%;
background-position: 50%; background-position: 50%;
-webkit-transition: background-size 2s;
-o-transition: background-size 2s;
transition: background-size 2s;
} }
.btn-info:hover { .btn-info:hover,
-webkit-background-size: 100% 100%; .btn-info:active:hover,
background-size: 100%; .btn-info:focus {
border-color: #862197; background-color: #862197;
} }
.btn-info:active { .btn-info:active {
background-color: #862197; background-color: #862197;
...@@ -6722,21 +6694,14 @@ button.close { ...@@ -6722,21 +6694,14 @@ button.close {
box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.3); box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.3);
} }
.btn-warning { .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%; -webkit-background-size: 200% 200%;
background-size: 200%; background-size: 200%;
background-position: 50%; background-position: 50%;
-webkit-transition: background-size 2s;
-o-transition: background-size 2s;
transition: background-size 2s;
} }
.btn-warning:hover { .btn-warning:hover,
-webkit-background-size: 100% 100%; .btn-warning:active:hover,
background-size: 100%; .btn-warning:focus {
border-color: #e08600; background-color: #e08600;
} }
.btn-warning:active { .btn-warning:active {
background-color: #e08600; background-color: #e08600;
...@@ -6750,21 +6715,14 @@ button.close { ...@@ -6750,21 +6715,14 @@ button.close {
box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.3); box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.3);
} }
.btn-danger { .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%; -webkit-background-size: 200% 200%;
background-size: 200%; background-size: 200%;
background-position: 50%; background-position: 50%;
-webkit-transition: background-size 2s; }
-o-transition: background-size 2s; .btn-danger:hover,
transition: background-size 2s; .btn-danger:active:hover,
} .btn-danger:focus {
.btn-danger:hover { background-color: #cb171e;
-webkit-background-size: 100% 100%;
background-size: 100%;
border-color: #cb171e;
} }
.btn-danger:active { .btn-danger:active {
background-color: #cb171e; 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 @@ ...@@ -38,14 +38,13 @@
#btn(@class,@bg) { #btn(@class,@bg) {
.btn-@{class} { .btn-@{class} {
#gradient > .radial(@bg 80%, darken(@bg, 6%) 81%);
background-size: 200%; background-size: 200%;
background-position: 50%; background-position: 50%;
transition: background-size 2s;
&:hover { &:hover,
background-size: 100%; &:active:hover,
border-color: darken(@bg, 6%); &:focus {
background-color: darken(@bg, 6%);
} }
&:active { &: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