601 lines
14 KiB
CSS
601 lines
14 KiB
CSS
/* .bd-button {
|
|
display: inline-flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
background-color: #3E82E5;
|
|
color: #FFFFFF;
|
|
border-radius: 3px;
|
|
padding: 4px 8px;
|
|
transition: background-color 0.17s ease, color 0.17s ease, opacity 250ms ease;
|
|
}
|
|
|
|
.bd-button:hover {
|
|
background-color: #3875CE;
|
|
}
|
|
|
|
.bd-button:active {
|
|
background-color: #3268B7;
|
|
}
|
|
|
|
.bd-button.bd-button-success {
|
|
background-color: #43B581;
|
|
}
|
|
|
|
.bd-button.bd-button-success:hover {
|
|
background-color: #3CA374;
|
|
}
|
|
|
|
.bd-button.bd-button-success:active {
|
|
background-color: #369167;
|
|
}
|
|
|
|
.bd-button.bd-button-warning {
|
|
background-color: #FAA61A;
|
|
}
|
|
|
|
.bd-button.bd-button-warning:hover {
|
|
background-color: #E19517;
|
|
}
|
|
|
|
.bd-button.bd-button-warning:active {
|
|
background-color: #C88515;
|
|
}
|
|
|
|
.bd-button.bd-button-danger {
|
|
background-color: #F04747;
|
|
}
|
|
|
|
.bd-button.bd-button-danger:hover {
|
|
background-color: #D84040;
|
|
}
|
|
|
|
.bd-button.bd-button-danger:active {
|
|
background-color: #C03939;
|
|
}
|
|
|
|
.bd-button-disabled {
|
|
opacity: 0.4;
|
|
}
|
|
|
|
.bd-button-disabled:hover {
|
|
cursor: not-allowed;
|
|
} */
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* Generic Button Styles */
|
|
.bd-button {
|
|
position: relative;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
box-sizing: border-box;
|
|
background: none;
|
|
border: none;
|
|
border-radius: 3px;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
line-height: 16px;
|
|
padding: 2px 16px;
|
|
user-select: none;
|
|
}
|
|
|
|
.bd-button:disabled {
|
|
cursor: not-allowed;
|
|
opacity: 0.5;
|
|
}
|
|
|
|
.bd-button .bd-button-content {
|
|
--button--underline-color: transparent;
|
|
background-image: linear-gradient(0deg, transparent, transparent 1px, var(--button--underline-color) 0, var(--button--underline-color) 2px, transparent 0);
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.bd-button:disabled .bd-button-content {
|
|
background-image: none !important;
|
|
}
|
|
|
|
.bd-button-outlined:disabled {
|
|
background-color: transparent !important;
|
|
}
|
|
|
|
|
|
|
|
/* Button Sizes */
|
|
.bd-button-tiny {
|
|
width: 52px;
|
|
height: 24px;
|
|
min-width: 52px;
|
|
min-height: 24px;
|
|
}
|
|
|
|
.bd-button-small {
|
|
width: 60px;
|
|
height: 32px;
|
|
min-width: 60px;
|
|
min-height: 32px;
|
|
}
|
|
|
|
.bd-button-medium {
|
|
width: 96px;
|
|
height: 38px;
|
|
min-width: 96px;
|
|
min-height: 38px;
|
|
}
|
|
|
|
.bd-button-large {
|
|
width: 130px;
|
|
height: 44px;
|
|
min-width: 130px;
|
|
min-height: 44px;
|
|
}
|
|
|
|
.bd-button-xlarge {
|
|
width: 148px;
|
|
height: 50px;
|
|
min-width: 148px;
|
|
min-height: 50px;
|
|
font-size: 16px;
|
|
line-height: normal;
|
|
padding: 2px 20px;
|
|
}
|
|
|
|
.bd-button-icon {
|
|
height: auto;
|
|
padding: 4px;
|
|
}
|
|
|
|
.bd-button-grow,
|
|
.bd-button-icon {
|
|
width: auto
|
|
}
|
|
|
|
|
|
|
|
/* Button Looks */
|
|
.bd-button-filled {
|
|
-webkit-transition: background-color .17s ease, color .17s ease;
|
|
transition: background-color .17s ease, color .17s ease
|
|
}
|
|
|
|
.bd-button-outlined {
|
|
-webkit-transition: color .17s ease, background-color .17s ease, border-color .17s ease;
|
|
transition: color .17s ease, background-color .17s ease, border-color .17s ease;
|
|
border-width: 1px;
|
|
border-style: solid
|
|
}
|
|
|
|
.bd-button-blank {
|
|
background: transparent;
|
|
color: currentColor;
|
|
border: 0;
|
|
/* padding: 0; */
|
|
margin: 0
|
|
}
|
|
|
|
.bd-button-filled .bd-button-content,
|
|
.bd-button-link .bd-button-content,
|
|
.bd-button-outlined .bd-button-content {
|
|
margin: 0 auto;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
}
|
|
|
|
|
|
/* COLORS */
|
|
|
|
/* Color BD Brand */
|
|
.bd-button-filled.bd-button-color-brand {
|
|
color: var(--white-500);
|
|
background-color: #3E82E5; /* BD Blue */
|
|
}
|
|
|
|
.bd-button-filled.bd-button-color-brand:hover {
|
|
background-color: #3875CE;
|
|
}
|
|
|
|
.bd-button-filled.bd-button-color-brand:active {
|
|
background-color: #3268B7;
|
|
}
|
|
|
|
.bd-button-filled.bd-button-color-brand:disabled {
|
|
background-color: #3E82E5; /* BD Blue */
|
|
opacity: 0.4;
|
|
}
|
|
|
|
.bd-button-outlined.bd-button-color-brand {
|
|
color: var(--button-outline-brand-text);
|
|
border-color: var(--button-outline-brand-border);
|
|
}
|
|
|
|
.bd-button-outlined.bd-button-color-brand:hover {
|
|
background-color: var(--button-outline-brand-background-hover);
|
|
border-color: var(--button-outline-brand-border-hover);
|
|
color: var(--button-outline-brand-text-hover);
|
|
}
|
|
|
|
.bd-button-outlined.bd-button-color-brand:active {
|
|
background-color: var(--button-outline-brand-background-active);
|
|
border-color: var(--button-outline-brand-border-active);
|
|
color: var(--button-outline-brand-text-active);
|
|
}
|
|
|
|
.bd-button-link.bd-button-color-brand {
|
|
color: #3E82E5; /* BD Blue */
|
|
}
|
|
|
|
.bd-button-link.bd-button-color-brand:hover .bd-button-content {
|
|
--button--underline-color: #3E82E5; /* BD Blue */
|
|
}
|
|
|
|
|
|
|
|
/* Color Blurple */
|
|
.bd-button-filled.bd-button-color-blurple {
|
|
color: var(--white-500);
|
|
background-color: var(--brand-experiment)
|
|
}
|
|
|
|
.bd-button-filled.bd-button-color-blurple:hover {
|
|
background-color: var(--brand-experiment-560)
|
|
}
|
|
|
|
.bd-button-filled.bd-button-color-blurple:active {
|
|
background-color: var(--brand-experiment-600)
|
|
}
|
|
|
|
.bd-button-filled.bd-button-color-blurple:disabled {
|
|
background-color: var(--brand-experiment)
|
|
}
|
|
|
|
.bd-button-outlined.bd-button-color-blurple {
|
|
color: var(--button-outline-brand-text);
|
|
border-color: var(--button-outline-brand-border)
|
|
}
|
|
|
|
.bd-button-outlined.bd-button-color-blurple:hover {
|
|
background-color: var(--button-outline-brand-background-hover);
|
|
border-color: var(--button-outline-brand-border-hover);
|
|
color: var(--button-outline-brand-text-hover)
|
|
}
|
|
|
|
.bd-button-outlined.bd-button-color-blurple:active {
|
|
background-color: var(--button-outline-brand-background-active);
|
|
border-color: var(--button-outline-brand-border-active);
|
|
color: var(--button-outline-brand-text-active)
|
|
}
|
|
|
|
.bd-button-link.bd-button-color-blurple {
|
|
color: var(--brand-experiment)
|
|
}
|
|
|
|
.bd-button-link.bd-button-color-blurple:hover .bd-button-content {
|
|
--button--underline-color: var(--brand-experiment)
|
|
}
|
|
|
|
|
|
|
|
/* Color Yellow/Warn */
|
|
.bd-button-filled.bd-button-color-yellow {
|
|
color: var(--white-500);
|
|
background-color: var(--status-warning)
|
|
}
|
|
|
|
.bd-button-filled.bd-button-color-yellow:active,
|
|
.bd-button-filled.bd-button-color-yellow:hover {
|
|
background-color: null;
|
|
}
|
|
|
|
.bd-button-filled.bd-button-color-yellow:disabled {
|
|
background-color: var(--status-warning)
|
|
}
|
|
|
|
.bd-button-outlined.bd-button-color-yellow {
|
|
color: var(--status-warning);
|
|
border-color: var(--status-warning)
|
|
}
|
|
|
|
.bd-button-outlined.bd-button-color-yellow:active {
|
|
background-color: hsl(var(--yellow-300-hsl)/.1)
|
|
}
|
|
|
|
.bd-button-link.bd-button-color-yellow {
|
|
color: var(--status-warning)
|
|
}
|
|
|
|
.bd-button-link.bd-button-color-yellow:hover .bd-button-content {
|
|
--button--underline-color: var(--status-warning)
|
|
}
|
|
|
|
|
|
|
|
/* Color Link */
|
|
.bd-button-filled.bd-button-color-link {
|
|
color: var(--white-500);
|
|
background-color: var(--text-link)
|
|
}
|
|
|
|
.bd-button-filled.bd-button-color-link:active,
|
|
.bd-button-filled.bd-button-color-link:hover {
|
|
background-color: null
|
|
}
|
|
|
|
.bd-button-filled.bd-button-color-link:disabled {
|
|
background-color: var(--text-link)
|
|
}
|
|
|
|
.bd-button-outlined.bd-button-color-link {
|
|
color: var(--text-link);
|
|
border-color: var(--text-link)
|
|
}
|
|
|
|
.bd-button-outlined.bd-button-color-link:active {
|
|
background-color: hsl(var(--text-link-hsl)/.1)
|
|
}
|
|
|
|
.bd-button-link.bd-button-color-link {
|
|
color: var(--text-link)
|
|
}
|
|
|
|
.bd-button-link.bd-button-color-link:hover .bd-button-content {
|
|
--button--underline-color: var(--text-link)
|
|
}
|
|
|
|
|
|
|
|
/* Color White */
|
|
.bd-button-filled.bd-button-color-white {
|
|
color: var(--primary-500);
|
|
background-color: var(--white-500)
|
|
}
|
|
|
|
.bd-button-filled.bd-button-color-white:active,
|
|
.bd-button-filled.bd-button-color-white:hover {
|
|
background-color: null
|
|
}
|
|
|
|
.bd-button-filled.bd-button-color-white:disabled {
|
|
background-color: var(--white-500)
|
|
}
|
|
|
|
.bd-button-outlined.bd-button-color-white {
|
|
color: var(--white-500);
|
|
border-color: var(--white-500)
|
|
}
|
|
|
|
.bd-button-outlined.bd-button-color-white:active {
|
|
background-color: hsl(var(--white-500-hsl)/.1)
|
|
}
|
|
|
|
.bd-button-link.bd-button-color-white {
|
|
color: var(--white-500)
|
|
}
|
|
|
|
.bd-button-link.bd-button-color-white:hover .bd-button-content {
|
|
--button--underline-color: var(--white-500)
|
|
}
|
|
|
|
|
|
|
|
/* Color Red/Danger/Error */
|
|
.bd-button-filled.bd-button-color-red {
|
|
color: var(--white-500);
|
|
background-color: var(--button-danger-background)
|
|
}
|
|
|
|
.bd-button-filled.bd-button-color-red:hover {
|
|
background-color: var(--button-danger-background-hover)
|
|
}
|
|
|
|
.bd-button-filled.bd-button-color-red:active {
|
|
background-color: var(--button-danger-background-active)
|
|
}
|
|
|
|
.bd-button-filled.bd-button-color-red:disabled {
|
|
background-color: var(--button-danger-background-disabled)
|
|
}
|
|
|
|
.bd-button-outlined.bd-button-color-red {
|
|
color: var(--button-outline-danger-text);
|
|
border-color: var(--button-outline-danger-border)
|
|
}
|
|
|
|
.bd-button-outlined.bd-button-color-red:hover {
|
|
background-color: var(--button-outline-danger-background-hover);
|
|
border-color: var(--button-outline-danger-border-hover);
|
|
color: var(--button-outline-danger-text-hover)
|
|
}
|
|
|
|
.bd-button-outlined.bd-button-color-red:active {
|
|
background-color: var(--button-outline-danger-background-active);
|
|
border-color: var(--button-outline-danger-border-active);
|
|
color: var(--button-outline-danger-text-active)
|
|
}
|
|
|
|
.bd-button-link.bd-button-color-red {
|
|
color: var(--text-danger)
|
|
}
|
|
|
|
.bd-button-link.bd-button-color-red:hover .bd-button-content {
|
|
--button--underline-color: var(--text-danger)
|
|
}
|
|
|
|
|
|
/* Color Green Success */
|
|
.bd-button-filled.bd-button-color-green {
|
|
color: var(--white-500);
|
|
background-color: var(--button-positive-background)
|
|
}
|
|
|
|
.bd-button-filled.bd-button-color-green:hover {
|
|
background-color: var(--button-positive-background-hover)
|
|
}
|
|
|
|
.bd-button-filled.bd-button-color-green:active {
|
|
background-color: var(--button-positive-background-active)
|
|
}
|
|
|
|
.bd-button-filled.bd-button-color-green:disabled {
|
|
background-color: var(--button-positive-background-disabled)
|
|
}
|
|
|
|
.bd-button-outlined.bd-button-color-green {
|
|
color: var(--button-outline-positive-text);
|
|
border-color: var(--button-outline-positive-border)
|
|
}
|
|
|
|
.bd-button-outlined.bd-button-color-green:hover {
|
|
background-color: var(--button-outline-positive-background-hover);
|
|
border-color: var(--button-outline-positive-border-hover);
|
|
color: var(--button-outline-positive-text-hover)
|
|
}
|
|
|
|
.bd-button-outlined.bd-button-color-green:active {
|
|
background-color: var(--button-outline-positive-background-active);
|
|
border-color: var(--button-outline-positive-border-active);
|
|
color: var(--button-outline-positive-text-active)
|
|
}
|
|
|
|
.bd-button-link.bd-button-color-green {
|
|
color: var(--green-360)
|
|
}
|
|
|
|
.bd-button-link.bd-button-color-green:hover .bd-button-content {
|
|
--button--underline-color: var(--green-360)
|
|
}
|
|
|
|
|
|
|
|
/* Color Primary/Grey */
|
|
.bd-button-outlined.bd-button-color-primary {
|
|
color: var(--button-outline-primary-text);
|
|
border-color: var(--button-outline-primary-border)
|
|
}
|
|
|
|
.bd-button-outlined.bd-button-color-primary:hover {
|
|
background-color: var(--button-outline-primary-background-hover);
|
|
border-color: var(--button-outline-primary-border-hover);
|
|
color: var(--button-outline-primary-text-hover)
|
|
}
|
|
|
|
.bd-button-outlined.bd-button-color-primary:active {
|
|
background-color: var(--button-outline-primary-background-active);
|
|
border-color: var(--button-outline-primary-border-active);
|
|
color: var(--button-outline-primary-text-active)
|
|
}
|
|
|
|
.bd-button-filled.bd-button-color-primary {
|
|
color: var(--white-500);
|
|
background-color: var(--button-secondary-background)
|
|
}
|
|
|
|
.bd-button-filled.bd-button-color-primary:hover {
|
|
background-color: var(--button-secondary-background-hover)
|
|
}
|
|
|
|
.bd-button-filled.bd-button-color-primary:active {
|
|
background-color: var(--button-secondary-background-active)
|
|
}
|
|
|
|
.bd-button-filled.bd-button-color-primary:disabled {
|
|
background-color: var(--button-secondary-background-disabled)
|
|
}
|
|
|
|
.theme-dark .bd-button-link.bd-button-color-primary {
|
|
color: var(--white-500)
|
|
}
|
|
|
|
.theme-dark .bd-button-link.bd-button-color-primary:hover .bd-button-content {
|
|
--button--underline-color: var(--white-500)
|
|
}
|
|
|
|
.theme-light .bd-button-link.bd-button-color-primary {
|
|
color: var(--primary-400)
|
|
}
|
|
|
|
.theme-light .bd-button-link.bd-button-color-primary:hover .bd-button-content {
|
|
--button--underline-color: var(--primary-400)
|
|
}
|
|
|
|
|
|
|
|
/* Color Transparent */
|
|
.theme-dark .bd-button-filled.bd-button-color-transparent {
|
|
color: var(--primary-100);
|
|
background-color: hsl(var(--white-500-hsl)/.1)
|
|
}
|
|
|
|
.theme-dark .bd-button-filled.bd-button-color-transparent:hover {
|
|
background-color: hsl(var(--white-500-hsl)/.05)
|
|
}
|
|
|
|
.theme-dark .bd-button-filled.bd-button-color-transparent:active {
|
|
background-color: hsl(var(--white-500-hsl)/.01)
|
|
}
|
|
|
|
.theme-dark .bd-button-filled.bd-button-color-transparent:disabled {
|
|
background-color: hsl(var(--white-500-hsl)/.1)
|
|
}
|
|
|
|
.theme-dark .bd-button-outlined.bd-button-color-transparent {
|
|
color: var(--primary-200);
|
|
border-color: var(--primary-200)
|
|
}
|
|
|
|
.theme-dark .bd-button-outlined.bd-button-color-transparent:active {
|
|
background-color: hsl(var(--primary-200-hsl)/.1)
|
|
}
|
|
|
|
.theme-dark .bd-button-link.bd-button-color-transparent {
|
|
color: var(--primary-200)
|
|
}
|
|
|
|
.theme-dark .bd-button-link.bd-button-color-transparent:hover .bd-button-content {
|
|
--button--underline-color: var(--primary-200)
|
|
}
|
|
|
|
.theme-light .bd-button-filled.bd-button-color-transparent {
|
|
color: var(--primary-400);
|
|
background-color: hsl(var(--primary-400-hsl)/.01)
|
|
}
|
|
|
|
.theme-light .bd-button-filled.bd-button-color-transparent:hover {
|
|
background-color: hsl(var(--primary-400-hsl)/.2)
|
|
}
|
|
|
|
.theme-light .bd-button-filled.bd-button-color-transparent:active {
|
|
background-color: hsl(var(--primary-400-hsl)/.25)
|
|
}
|
|
|
|
.theme-light .bd-button-filled.bd-button-color-transparent:disabled {
|
|
background-color: hsl(var(--primary-400-hsl)/.01)
|
|
}
|
|
|
|
.theme-light .bd-button-outlined.bd-button-color-transparent {
|
|
color: var(--primary-400);
|
|
border-color: var(--primary-400)
|
|
}
|
|
|
|
.theme-light .bd-button-outlined.bd-button-color-transparent:active {
|
|
background-color: hsl(var(--primary-400-hsl)/.1)
|
|
}
|
|
|
|
.theme-light .bd-button-link.bd-button-color-transparent {
|
|
color: var(--primary-400)
|
|
}
|
|
|
|
.theme-light .bd-button-link.bd-button-color-transparent:hover .bd-button-content {
|
|
--button--underline-color: var(--primary-400)
|
|
}
|