updated button styling for different states
This commit is contained in:
parent
b2d94cef31
commit
1124aa1b64
@ -109,3 +109,74 @@ button {
|
||||
text-rendering: auto;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
/* button {
|
||||
border: 1px solid #888;
|
||||
color: var(--font-black);
|
||||
border-radius: 3px;
|
||||
background-color: #eeeeee;
|
||||
background-image: -moz-linear-gradient(100% 100% 90deg, #dfdfdf, #ffffff);
|
||||
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ffffff), to(#dfdfdf));
|
||||
background-image: -webkit-linear-gradient(#ffffff, #dfdfdf);
|
||||
background-image: -o-linear-gradient(#ffffff, #dfdfdf);
|
||||
background-image: linear-gradient(to bottom, #ffffff 1%, #dfdfdf 100%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#dfdfdf', GradientType=0);
|
||||
} */
|
||||
button:hover {
|
||||
background-color: #eeeeee;
|
||||
border-color: #007aff;
|
||||
color: var(--font-black);
|
||||
box-shadow: 0 1px 1px #ddd;
|
||||
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
button:active,
|
||||
button:active:hover {
|
||||
border-color: #007aff;
|
||||
background-color: #d5d5d5;
|
||||
color: #007aff;
|
||||
box-shadow: 1px 0 1px #ddd;
|
||||
box-shadow: 1px 0 1px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
button[disabled],
|
||||
button[disabled]:hover,
|
||||
button[disabled]:active {
|
||||
background-image: none;
|
||||
border-style: dashed;
|
||||
background-color: transparent;
|
||||
color: #666;
|
||||
border-color: #666;
|
||||
box-shadow: none;
|
||||
}
|
||||
button:focus {
|
||||
background-color: #eeeeee;
|
||||
}
|
||||
.themeLinkStyle {
|
||||
color: #007aff;
|
||||
}
|
||||
.themeLinkStyle:link,
|
||||
.themeLinkStyle:visited {
|
||||
color: #007aff;
|
||||
}
|
||||
.themeLinkStyle:hover,
|
||||
.themeLinkStyle:focus {
|
||||
color: #ffffff;
|
||||
}
|
||||
.themeLinkStyle:active,
|
||||
.themeLinkStyle:active:hover {
|
||||
background-color: #d5d5d5;
|
||||
}
|
||||
.transparentButtonStyle {
|
||||
background-color: transparent;
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
.transparentButtonStyle:hover {
|
||||
background-color: transparent;
|
||||
border-color: transparent;
|
||||
}
|
||||
.transparentButtonStyle:active {
|
||||
background-color: transparent;
|
||||
}
|
||||
.transparentButtonStyle[disabled] {
|
||||
opacity: 0.6;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user