292 lines
6.8 KiB
SCSS
292 lines
6.8 KiB
SCSS
|
|
||
|
/*
|
||
|
* CartoDB buttons
|
||
|
* - Green, grey and disabled
|
||
|
*/
|
||
|
|
||
|
|
||
|
@import "compass/css3/box-shadow";
|
||
|
@import "compass/css3/border-radius";
|
||
|
@import "compass/css3/inline-block";
|
||
|
@import "compass/css3/images";
|
||
|
@import "compass/css3/transform";
|
||
|
@import "compass/css3/transition";
|
||
|
@import "compass/css3/opacity";
|
||
|
@import "compass/css3/box-sizing";
|
||
|
@import "./vars";
|
||
|
|
||
|
/*
|
||
|
* Green button
|
||
|
* {@hover}
|
||
|
* {@active}
|
||
|
* {@focus}
|
||
|
* {@disabled}
|
||
|
*/
|
||
|
a.button.green,
|
||
|
button.green,
|
||
|
input[type="submit"].green {
|
||
|
padding:12px 13px;
|
||
|
font:bold 19px $text-fonts2;
|
||
|
line-height:normal;
|
||
|
color:white;
|
||
|
text-shadow:0 1px 0 #455D1E;
|
||
|
background:#94BE42; // IE
|
||
|
@include background(linear-gradient(#94BE42,#7FA938));
|
||
|
@include border-radius(3px);
|
||
|
border:1px solid #6A8C2D;
|
||
|
letter-spacing:0;
|
||
|
word-spacing:1px;
|
||
|
@include transform-style("linear");
|
||
|
@include transition-property("box-shadow,border");
|
||
|
@include transition-duration(250ms);
|
||
|
|
||
|
/* TYPES */
|
||
|
// Session type
|
||
|
&.sessions {
|
||
|
width:312px;
|
||
|
padding-left:0;
|
||
|
padding-right:0;
|
||
|
text-align:center;
|
||
|
}
|
||
|
|
||
|
// Small
|
||
|
&.small {
|
||
|
padding:8px 10px;
|
||
|
font-size:15px;
|
||
|
letter-spacing:0;
|
||
|
}
|
||
|
|
||
|
// With radiobutton
|
||
|
&.radiobutton {
|
||
|
padding:10px 10px 12px 25px;
|
||
|
|
||
|
span.radio {
|
||
|
top:1px;
|
||
|
border-color:#4C6720;
|
||
|
&:before {
|
||
|
background-color:#66892B;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
&.selected {
|
||
|
cursor:default;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
// Hover
|
||
|
&:hover {
|
||
|
background:#749C33; // IE
|
||
|
@include background(linear-gradient(#94BE42,#799E33));
|
||
|
text-decoration:none;
|
||
|
cursor:pointer;
|
||
|
}
|
||
|
// Active
|
||
|
&:active {
|
||
|
background:#94BE42; // IE
|
||
|
@include background(linear-gradient(#94BE42,#799E33));
|
||
|
@include box-shadow(rgba(255,255,255,0) 0 0 1px 0,rgba(0,0,0,0.35) 0 1px 4px 0 inset,#fff 0 1px 0 0);
|
||
|
}
|
||
|
// Focus = hover
|
||
|
&:focus {
|
||
|
outline:none;
|
||
|
background:#749C33; // IE
|
||
|
@include background(linear-gradient(#94BE42,#749C33));
|
||
|
}
|
||
|
// Disabled
|
||
|
&.disabled {
|
||
|
@include opacity(0.5);
|
||
|
&:hover, &:active, &:focus {
|
||
|
background:#94BE42; // IE
|
||
|
color:white;
|
||
|
@include background(linear-gradient(#94BE42,#7FA938));
|
||
|
cursor:default;
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
|
||
|
|
||
|
/*
|
||
|
* Grey button
|
||
|
* {@hover}
|
||
|
* {@active}
|
||
|
* {@focus}
|
||
|
* {@disabled}
|
||
|
*/
|
||
|
a.button.grey,
|
||
|
button.grey,
|
||
|
input[type="submit"].grey {
|
||
|
padding:12px 13px;
|
||
|
font:bold 19px $text-fonts2;
|
||
|
line-height:normal;
|
||
|
color:#333333;
|
||
|
text-shadow:0 1px 0 white;
|
||
|
background:#F9F9F9; // IE
|
||
|
@include background(linear-gradient(#F9F9F9,#EBEBEB));
|
||
|
@include border-radius(3px);
|
||
|
border:1px solid #B0B0B0;
|
||
|
letter-spacing:-1px;
|
||
|
@include transform-style("linear");
|
||
|
@include transition-property("box-shadow,border");
|
||
|
@include transition-duration(250ms);
|
||
|
|
||
|
&.small {
|
||
|
padding:9px 10px;
|
||
|
font-size:15px;
|
||
|
letter-spacing:0;
|
||
|
}
|
||
|
|
||
|
&.smaller {
|
||
|
padding:6px 7px;
|
||
|
font-size:13px;
|
||
|
letter-spacing:0;
|
||
|
}
|
||
|
|
||
|
// Hover
|
||
|
&:hover {
|
||
|
background:#DEDEDE; // IE
|
||
|
@include background(linear-gradient(#F9F9F9,#E1E1E1));
|
||
|
text-decoration:none;
|
||
|
cursor:pointer;
|
||
|
}
|
||
|
// Active
|
||
|
&:active {
|
||
|
border-color:#ACACAC;
|
||
|
background:#D3D3D3; // IE
|
||
|
@include background(linear-gradient(#F9F9F9,#E1E1E1));
|
||
|
@include box-shadow(rgba(255,255,255,0) 0 0 1px 0,rgba(130,126,111,0.6) 0 1px 3px 0 inset,#fff 0 1px 0 0);
|
||
|
}
|
||
|
// Focus = hover
|
||
|
&:focus {
|
||
|
border-color:#ACACAC;
|
||
|
outline:none;
|
||
|
background:#DEDEDE; // IE
|
||
|
@include background(linear-gradient(#F9F9F9,#E1E1E1));
|
||
|
}
|
||
|
// Disabled
|
||
|
&.disabled {
|
||
|
color:#333333;
|
||
|
@include opacity(0.5);
|
||
|
&:hover, &:active, &:focus {
|
||
|
background:#F9F9F9; // IE
|
||
|
color:#333333;
|
||
|
@include background(linear-gradient(#F9F9F9,#EBEBEB));
|
||
|
cursor:default;
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
|
||
|
|
||
|
|
||
|
/*
|
||
|
* Blue button
|
||
|
* {@hover}
|
||
|
* {@active}
|
||
|
* {@focus}
|
||
|
* {@disabled}
|
||
|
*/
|
||
|
a.button.blue,
|
||
|
button.blue,
|
||
|
input[type="submit"].blue {
|
||
|
padding:12px 13px;
|
||
|
font:bold 19px $text-fonts2;
|
||
|
line-height:normal;
|
||
|
color:white;
|
||
|
text-shadow:0 1px 0 #2E577B;
|
||
|
background:#53A0DA; // IE
|
||
|
@include background(linear-gradient(#53A0DA,#3B7EBC));
|
||
|
@include border-radius(3px);
|
||
|
border:1px solid #29557B;
|
||
|
letter-spacing:-1px;
|
||
|
word-spacing:1px;
|
||
|
@include transform-style("linear");
|
||
|
@include transition-property("box-shadow,border");
|
||
|
@include transition-duration(250ms);
|
||
|
|
||
|
// Hover
|
||
|
&:hover {
|
||
|
background:#3B7EBC; // IE
|
||
|
@include background(linear-gradient(#53A0DA,#3470A9));
|
||
|
text-decoration:none;
|
||
|
cursor:pointer;
|
||
|
}
|
||
|
// Active
|
||
|
&:active {
|
||
|
background:#3470A9; // IE
|
||
|
@include background(linear-gradient(#53A0DA,#3470A9));
|
||
|
@include box-shadow(rgba(255,255,255,0) 0 0 1px 0,rgba(0,0,0,0.35) 0 1px 4px 0 inset,#fff 0 1px 0 0);
|
||
|
}
|
||
|
// Focus = hover
|
||
|
&:focus {
|
||
|
outline:none;
|
||
|
background:#3470A9; // IE
|
||
|
@include background(linear-gradient(#53A0DA,#3470A9));
|
||
|
}
|
||
|
// Disabled
|
||
|
&.disabled {
|
||
|
@include opacity(0.5);
|
||
|
&:hover, &:active, &:focus {
|
||
|
background:#53A0DA; // IE
|
||
|
color:white;
|
||
|
@include background(linear-gradient(#53A0DA,#3B7EBC));
|
||
|
cursor:default;
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
|
||
|
/*
|
||
|
* Blue button
|
||
|
* {@hover}
|
||
|
* {@active}
|
||
|
* {@focus}
|
||
|
* {@disabled}
|
||
|
*/
|
||
|
a.button.red,
|
||
|
button.red,
|
||
|
input[type="submit"].red {
|
||
|
padding:12px 23px;
|
||
|
font:bold 19px $text-fonts2;
|
||
|
line-height:normal;
|
||
|
color:white;
|
||
|
text-shadow:0 1px 0 #56271C;
|
||
|
background:#FA5D57; // IE
|
||
|
@include background(linear-gradient(#FF7373,#FA5D57));
|
||
|
@include border-radius(3px);
|
||
|
border:1px solid #953C33;
|
||
|
letter-spacing:-1px;
|
||
|
word-spacing:1px;
|
||
|
text-decoration: none;
|
||
|
@include transform-style("linear");
|
||
|
@include transition-property("box-shadow,border");
|
||
|
@include transition-duration(250ms);
|
||
|
|
||
|
// Hover
|
||
|
&:hover {
|
||
|
background:#FA4D45; // IE
|
||
|
@include background(linear-gradient(#FF7373,#FA4D45));
|
||
|
text-decoration:none;
|
||
|
cursor:pointer;
|
||
|
}
|
||
|
// Active
|
||
|
&:active {
|
||
|
background:#FA4D45; // IE
|
||
|
@include background(linear-gradient(#FF7373,#FA4D45));
|
||
|
@include box-shadow(rgba(255,255,255,0) 0 0 1px 0,rgba(0,0,0,0.35) 0 1px 4px 0 inset,#fff 0 1px 0 0);
|
||
|
}
|
||
|
// Focus = hover
|
||
|
&:focus {
|
||
|
outline:none;
|
||
|
background:#FA4D45; // IE
|
||
|
@include background(linear-gradient(#FF7373,#FA4D45));
|
||
|
}
|
||
|
// Disabled
|
||
|
&.disabled {
|
||
|
@include opacity(0.5);
|
||
|
&:hover, &:active, &:focus {
|
||
|
background:#FA4D45; // IE
|
||
|
color:white;
|
||
|
@include background(linear-gradient(#FF7373,#FA4D45));
|
||
|
cursor:default;
|
||
|
}
|
||
|
}
|
||
|
}
|