cartodb-4.42/app/assets/stylesheets/old_common/buttons.css.scss

292 lines
6.8 KiB
SCSS
Raw Normal View History

2024-04-06 13:25:13 +08:00
/*
* 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;
}
}
}