|
.transparent-gradient{ |
|
background-image: linear-gradient(bottom, rgba(0,0,0,0.1) 0%, rgba(255,255,255,0.1) 100%); |
|
background-image: -o-linear-gradient(bottom, rgba(0,0,0,0.1) 0%, rgba(255,255,255,0.1) 100%); |
|
background-image: -moz-linear-gradient(bottom, rgba(0,0,0,0.1) 0%, rgba(255,255,255,0.1) 100%); |
|
background-image: -webkit-linear-gradient(bottom, rgba(0,0,0,0.1) 0%, rgba(255,255,255,0.1) 100%); |
|
background-image: -ms-linear-gradient(bottom, rgba(0,0,0,0.1) 0%, rgba(255,255,255,0.1) 100%); |
|
background-image: -webkit-gradient( |
|
linear, |
|
left bottom, |
|
left top, |
|
color-stop(0, rgba(0,0,0,0.1)), |
|
color-stop(1, rgba(255,255,255,0.1)) |
|
); |
|
} |
|
|
|
.super-clickable-button(@color: 1297c9){ |
|
background: @color; |
|
background-image: linear-gradient(bottom, rgba(0,0,0,0.1) 0%, rgba(255,255,255,0.1) 100%); |
|
background-image: -o-linear-gradient(bottom, rgba(0,0,0,0.1) 0%, rgba(255,255,255,0.1) 100%); |
|
background-image: -moz-linear-gradient(bottom, rgba(0,0,0,0.1) 0%, rgba(255,255,255,0.1) 100%); |
|
background-image: -webkit-linear-gradient(bottom, rgba(0,0,0,0.1) 0%, rgba(255,255,255,0.1) 100%); |
|
background-image: -ms-linear-gradient(bottom, rgba(0,0,0,0.1) 0%, rgba(255,255,255,0.1) 100%); |
|
background-image: -webkit-gradient( |
|
linear, |
|
left bottom, |
|
left top, |
|
color-stop(0, rgba(0,0,0,0.1)), |
|
color-stop(1, rgba(255,255,255,0.1)) |
|
); |
|
cursor: pointer; |
|
outline: none; |
|
padding: 5px 10px; |
|
border: 1px solid darken(@color, 2%); |
|
border-radius: 4px; |
|
box-shadow: inset 0px 1px 1px 1px rgba(255, 255, 255, 0.2), |
|
0px 1px 1px 1px darken(@color, 25%); |
|
/* 0px 1px 1px 1px rgba(25, 84, 114, 1); */ |
|
-webkit-transition: background-color 0.15s linear, box-shadow 0.15s linear; |
|
-moz-transition: background-color 0.15s linear, box-shadow 0.15s linear; |
|
transition: background-color 0.15s linear, box-shadow 0.15s linear; |
|
&:hover{ |
|
background: @color; |
|
} |
|
&:active{ |
|
background: darken(@color, 10%); |
|
box-shadow: inset 0px 1px 2px 1px rgba(0, 0, 0, 0.3); |
|
} |
|
} |
