178 lines
4.0 KiB
SCSS
178 lines
4.0 KiB
SCSS
@import url("../_css_variables.scss");
|
|
|
|
.primary-button {
|
|
position: relative;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border: 0;
|
|
background: var(--button-bg);
|
|
border-radius: 4px;
|
|
color: var(--button-color);
|
|
font-weight: 600;
|
|
font-family: 'Open Sans';
|
|
|
|
&:hover {
|
|
background: linear-gradient(0deg, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.08)), var(--button-bg);
|
|
}
|
|
|
|
&:active {
|
|
background: linear-gradient(0deg, rgba(0, 0, 0, 0.16), rgba(0, 0, 0, 0.16)), var(--button-bg);
|
|
}
|
|
|
|
&:focus {
|
|
box-sizing: border-box;
|
|
border: 2px solid var(--sidebar-text-active-border);
|
|
outline: none;
|
|
}
|
|
|
|
&:disabled {
|
|
background: rgba(var(--center-channel-color-rgb), 0.08);
|
|
color: rgba(var(--center-channel-color-rgb), 0.32);
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
i {
|
|
display: flex;
|
|
font-size: 18px;
|
|
}
|
|
}
|
|
|
|
.primary-button-inverted {
|
|
background: var(--button-color);
|
|
color: var(--denim-button-bg);
|
|
|
|
&:hover {
|
|
background: linear-gradient(0deg, rgba(var(--denim-button-bg-rgb), 0.08), rgba(var(--denim-button-bg-rgb), 0.08)), var(--button-color);
|
|
color: var(--denim-button-bg);
|
|
}
|
|
|
|
&:active {
|
|
background: linear-gradient(0deg, rgba(var(--denim-button-bg-rgb), 0.16), rgba(var(--denim-button-bg-rgb), 0.16)), var(--button-color);
|
|
color: var(--denim-button-bg);
|
|
}
|
|
|
|
&:focus {
|
|
border: 2px solid var(--denim-sidebar-active-border);
|
|
color: var(--denim-button-bg);
|
|
}
|
|
|
|
&:disabled {
|
|
background: rgba(var(--center-channel-text-rgb), 0.08);
|
|
color: rgba(var(--center-channel-text-rgb), 0.32);
|
|
}
|
|
}
|
|
|
|
.primary-large-button {
|
|
height: 48px;
|
|
padding: 0 24px;
|
|
font-size: 16px;
|
|
line-height: 18px;
|
|
|
|
&:focus {
|
|
padding: 0 22px;
|
|
}
|
|
}
|
|
|
|
.primary-medium-button {
|
|
height: 40px;
|
|
padding: 0 20px;
|
|
font-size: 14px;
|
|
line-height: 14px;
|
|
|
|
&:focus {
|
|
padding: 0 20px;
|
|
}
|
|
}
|
|
|
|
.icon-button {
|
|
position: relative;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border: 0;
|
|
background: none;
|
|
border-radius: 4px;
|
|
color: rgba(var(--center-channel-text-rgb), 0.56);
|
|
font-weight: 400;
|
|
|
|
&:hover {
|
|
background: rgba(var(--center-channel-text-rgb), 0.08);
|
|
color: rgba(var(--center-channel-text-rgb), 0.72);
|
|
}
|
|
|
|
&:active {
|
|
background: rgba(var(--denim-button-bg-rgb), 0.08);
|
|
color: var(--denim-button-bg);
|
|
}
|
|
|
|
&:focus-visible {
|
|
box-sizing: border-box;
|
|
border-color: linear-gradient(0deg, rgba(var(--button-color-rgb), 0.32), rgba(var(--button-color-rgb), 0.32)), var(--denim-button-bg);
|
|
outline: none;
|
|
}
|
|
|
|
&:disabled {
|
|
background: none;
|
|
color: rgba(var(--center-channel-text-rgb), 0.32);
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
i {
|
|
display: flex;
|
|
font-style: normal;
|
|
justify-content: center;
|
|
}
|
|
}
|
|
|
|
.icon-button-inverted {
|
|
background: none;
|
|
color: rgba(var(--button-color-rgb), 0.64);
|
|
|
|
&:hover {
|
|
background: rgba(var(--button-color-rgb), 0.08);
|
|
color: var(--button-color);
|
|
}
|
|
|
|
&:active {
|
|
background: rgba(var(--button-color-rgb), 0.16);
|
|
color: var(--button-color);
|
|
}
|
|
|
|
&:focus-visible {
|
|
box-sizing: border-box;
|
|
border-color: linear-gradient(0deg, rgba(var(--button-color-rgb), 0.32), rgba(var(--button-color-rgb), 0.32)), var(--denim-button-bg);
|
|
}
|
|
|
|
&:disabled {
|
|
background: none;
|
|
color: rgba(var(--button-color-rgb), 0.32);
|
|
}
|
|
}
|
|
|
|
.icon-button-small {
|
|
height: 28px;
|
|
padding: 6px;
|
|
font-size: 18px;
|
|
line-height: 18px;
|
|
|
|
&:focus:not(:focus-visible) {
|
|
padding: 6px 8px;
|
|
border: 0;
|
|
}
|
|
|
|
&:focus-visible {
|
|
padding: 4px;
|
|
border: 2px solid;
|
|
}
|
|
|
|
i {
|
|
width: 16px;
|
|
height: 16px;
|
|
|
|
&::before {
|
|
line-height: 16px;
|
|
}
|
|
}
|
|
}
|