Fixathon: Web app dependency updates part 2 (Sass) (#29037)
* Update sass-loader@16.0.2 * Update sass part 1 (actually update it) * Update scss files to remove at-charset and use at-use instead of at-import at-charset hasn't been needed since we switched to dart-sass, and at-import is now deprecated. Most of this was done using sass-migrator. We still use at-import for files imported from node_modules, but sass doesn't seem to complain about that * Inline at-extend rule that was causing an error * Remove or inline at-use rules in components package
Этот коммит содержится в:
Harrison Healey
коммит произвёл
GitHub
GitHub
родитель
11ac1f4d19
Коммит
c519bee236
@@ -433,10 +433,7 @@ for (const key of emojiFilePositions.keys()) {
|
||||
cssEmojis.push(`.emoji-${key} { background-position: ${emojiFilePositions.get(key)} }`);
|
||||
}
|
||||
|
||||
const cssRules = `
|
||||
@charset "UTF-8";
|
||||
|
||||
.emojisprite-preview {
|
||||
const cssRules = `.emojisprite-preview {
|
||||
width: ${EMOJI_SIZE_PADDED}px;
|
||||
max-width: none;
|
||||
height: ${EMOJI_SIZE_PADDED}px;
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
@import 'utils/_mixins';
|
||||
@import './mixins';
|
||||
@use 'utils/_mixins' as utils-mixins;
|
||||
@use 'mixins';
|
||||
|
||||
.BillingSubscriptions {
|
||||
.BillingSubscriptions__topWrapper {
|
||||
@@ -121,7 +121,7 @@
|
||||
}
|
||||
|
||||
.PrivateCloudCard {
|
||||
@include cloud-card;
|
||||
@include mixins.cloud-card;
|
||||
|
||||
display: flex;
|
||||
|
||||
@@ -137,7 +137,7 @@
|
||||
}
|
||||
|
||||
.PrivateCloudCard__text-title {
|
||||
@include cloud-card-title;
|
||||
@include mixins.cloud-card-title;
|
||||
}
|
||||
|
||||
.PrivateCloudCard__text-description {
|
||||
@@ -165,7 +165,7 @@
|
||||
font-weight: 600;
|
||||
line-height: 14px;
|
||||
|
||||
@include fit-content;
|
||||
@include utils-mixins.fit-content;
|
||||
|
||||
&:hover:not(.disabled) {
|
||||
background: rgba(var(--sys-button-bg-rgb), 0.04);
|
||||
@@ -219,7 +219,7 @@
|
||||
font-weight: 600;
|
||||
line-height: 9.5px;
|
||||
|
||||
@include fit-content;
|
||||
@include utils-mixins.fit-content;
|
||||
|
||||
&:hover:not(.disabled) {
|
||||
background: rgba(var(--sys-dnd-indicator-rgb), 0.04);
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
@import 'utils/mixins';
|
||||
@use 'utils/mixins';
|
||||
|
||||
.upgradeLink {
|
||||
@include primary-button;
|
||||
@include button-medium;
|
||||
@include mixins.primary-button;
|
||||
@include mixins.button-medium;
|
||||
}
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
@import 'utils/variables';
|
||||
@import './mixins';
|
||||
@use 'utils/variables';
|
||||
@use 'mixins';
|
||||
|
||||
.ProductLimitsPanel {
|
||||
@include cloud-card;
|
||||
@include mixins.cloud-card;
|
||||
|
||||
&--left-panel {
|
||||
max-width: 568px;
|
||||
@@ -14,7 +14,7 @@
|
||||
}
|
||||
|
||||
&__title {
|
||||
@include cloud-card-title;
|
||||
@include mixins.cloud-card-title;
|
||||
|
||||
padding-bottom: 8px;
|
||||
}
|
||||
@@ -40,8 +40,8 @@
|
||||
padding: 11px 16px;
|
||||
border-radius: 4px;
|
||||
margin-right: 8px;
|
||||
background: $primary-color;
|
||||
color: $white;
|
||||
background: variables.$primary-color;
|
||||
color: variables.$white;
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
line-height: 9.5px;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@import 'utils/mixins';
|
||||
@use 'utils/mixins';
|
||||
|
||||
.ToPaidNudgeBanner {
|
||||
&__actions {
|
||||
@@ -8,7 +8,7 @@
|
||||
&__primary {
|
||||
font-size: 12px;
|
||||
|
||||
@include primary-button;
|
||||
@include mixins.primary-button;
|
||||
|
||||
&:hover {
|
||||
color: var(--button-color);
|
||||
@@ -19,7 +19,7 @@
|
||||
margin-left: 4px;
|
||||
font-size: 12px;
|
||||
|
||||
@include tertiary-button;
|
||||
@include mixins.tertiary-button;
|
||||
|
||||
&:hover {
|
||||
color: var(--button-bg);
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@import 'utils/variables';
|
||||
@use 'utils/variables';
|
||||
|
||||
.PlanDetails {
|
||||
width: 568px;
|
||||
@@ -37,8 +37,8 @@
|
||||
&.btn {
|
||||
padding: 11px 16px;
|
||||
border-radius: 4px;
|
||||
background: $primary-color;
|
||||
color: $white;
|
||||
background: variables.$primary-color;
|
||||
color: variables.$white;
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
line-height: 9.5px;
|
||||
|
||||
@@ -1,11 +1,11 @@
|
||||
@use 'sass:color';
|
||||
|
||||
@import 'utils/variables';
|
||||
@use 'utils/variables';
|
||||
|
||||
.DataGrid {
|
||||
width: 100%;
|
||||
padding: 2rem 2rem 2rem 2rem;
|
||||
background: $bg--gray;
|
||||
background: variables.$bg--gray;
|
||||
color: var(--sys-center-channel-color);
|
||||
|
||||
.DataGrid_search {
|
||||
@@ -14,7 +14,7 @@
|
||||
flex-direction: row;
|
||||
padding: 0.5em 0;
|
||||
border-bottom: solid 1px rgba(0, 0, 0, 0.1);
|
||||
background: $white;
|
||||
background: variables.$white;
|
||||
font-weight: bold;
|
||||
|
||||
.DataGrid_searchBar {
|
||||
@@ -43,7 +43,7 @@
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
left: 10px;
|
||||
color: $dark-gray;
|
||||
color: variables.$dark-gray;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
@@ -91,12 +91,12 @@
|
||||
border-left: 2px solid transparent;
|
||||
|
||||
&:nth-child(odd) {
|
||||
background-color: $bg--gray;
|
||||
background-color: variables.$bg--gray;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border-left: 2px solid $primary-color;
|
||||
background-color: color.adjust($primary-color, $lightness: 45%);
|
||||
border-left: 2px solid variables.$primary-color;
|
||||
background-color: color.adjust(variables.$primary-color, $lightness: 45%);
|
||||
}
|
||||
|
||||
.DataGrid_cell {
|
||||
@@ -143,7 +143,7 @@
|
||||
padding: 8px;
|
||||
border-top: solid 1px rgba(0, 0, 0, 0.1);
|
||||
border-bottom: solid 1px rgba(0, 0, 0, 0.1);
|
||||
background: $white;
|
||||
background: variables.$white;
|
||||
color: rgba(0, 0, 0, 0.5);
|
||||
font-size: 1.1em;
|
||||
text-align: right;
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
@import 'utils/variables';
|
||||
@use 'utils/variables';
|
||||
|
||||
.FeatureDiscovery {
|
||||
display: grid;
|
||||
padding: 20px;
|
||||
border-radius: 8px;
|
||||
background: $white;
|
||||
background: variables.$white;
|
||||
box-shadow: 0 2px 3px rgba(0, 0, 0, 0.08);
|
||||
font-family: Open Sans;
|
||||
font-style: normal;
|
||||
@@ -47,8 +47,8 @@
|
||||
padding: 14px 0;
|
||||
border-radius: 4px;
|
||||
margin-right: 8px;
|
||||
background: $primary-color;
|
||||
color: $white;
|
||||
background: variables.$primary-color;
|
||||
color: variables.$white;
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
line-height: 16px;
|
||||
@@ -62,8 +62,8 @@
|
||||
|
||||
&:disabled {
|
||||
border-color: transparent;
|
||||
background: $light-gray;
|
||||
color: $dark-gray;
|
||||
background: variables.$light-gray;
|
||||
color: variables.$dark-gray;
|
||||
}
|
||||
|
||||
&.btn-inactive {
|
||||
@@ -72,9 +72,9 @@
|
||||
}
|
||||
|
||||
&.btn-secondary {
|
||||
border: 1px solid $primary-color;
|
||||
background: $white;
|
||||
color: $primary-color;
|
||||
border: 1px solid variables.$primary-color;
|
||||
background: variables.$white;
|
||||
color: variables.$primary-color;
|
||||
}
|
||||
|
||||
&.btn-primary {
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
@import 'utils/variables';
|
||||
@import 'utils/mixins';
|
||||
@use 'utils/variables';
|
||||
@use 'utils/mixins';
|
||||
|
||||
.StarterEditionRightPannel {
|
||||
.svg-image {
|
||||
@@ -87,7 +87,7 @@
|
||||
margin-left: auto;
|
||||
|
||||
&.btn {
|
||||
@include tertiary-button;
|
||||
@include mixins.tertiary-button;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@import 'utils/variables';
|
||||
@use 'utils/variables';
|
||||
|
||||
.RenewLicenseCard.TrialLicense {
|
||||
.TrialLicenseCard__text-title {
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@import 'utils/variables';
|
||||
@use 'utils/variables';
|
||||
|
||||
.OpenIdConvert {
|
||||
display: grid;
|
||||
@@ -21,8 +21,8 @@
|
||||
height: 32px;
|
||||
border-radius: 4px;
|
||||
margin-right: 10px;
|
||||
background: $primary-color;
|
||||
color: $white;
|
||||
background: variables.$primary-color;
|
||||
color: variables.$white;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
line-height: 9px;
|
||||
@@ -46,8 +46,8 @@
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
background-color: $primary-color;
|
||||
color: $white;
|
||||
background-color: variables.$primary-color;
|
||||
color: variables.$white;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -61,7 +61,7 @@
|
||||
flex: 0 0 60px;
|
||||
align-items: center;
|
||||
padding: 4 0 4px;
|
||||
border-top: 1px solid alpha-color($black, 0.1);
|
||||
border-top: 1px solid alpha-color(variables.$black, 0.1);
|
||||
}
|
||||
|
||||
.OpenIdConvert_copyWrapper {
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@import 'utils/variables';
|
||||
@use 'utils/variables';
|
||||
|
||||
#SystemRolePermissions {
|
||||
margin-top: 0;
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
@import 'utils/variables';
|
||||
@import 'utils/functions';
|
||||
@use 'utils/variables';
|
||||
@use 'utils/functions';
|
||||
|
||||
.AbstractList {
|
||||
padding: 1rem 2rem 2rem 2rem;
|
||||
@@ -19,7 +19,7 @@
|
||||
}
|
||||
|
||||
.AbstractList__body {
|
||||
background: $bg--gray;
|
||||
background: variables.$bg--gray;
|
||||
|
||||
.AbstractList__loading {
|
||||
padding: 40px;
|
||||
@@ -28,8 +28,8 @@
|
||||
|
||||
.AbstractList__empty {
|
||||
margin-top: 1rem;
|
||||
background: alpha-color($white, 0.5);
|
||||
color: $gray;
|
||||
background: functions.alpha-color(variables.$white, 0.5);
|
||||
color: variables.$gray;
|
||||
font-size: 1.6rem;
|
||||
text-align: center;
|
||||
|
||||
@@ -50,10 +50,10 @@
|
||||
justify-content: flex-end;
|
||||
padding: 5px;
|
||||
border-top: solid 1px rgba(0, 0, 0, 0.1);
|
||||
background: $white;
|
||||
background: variables.$white;
|
||||
|
||||
.btn-tertiary {
|
||||
color: $dark-gray;
|
||||
color: variables.$dark-gray;
|
||||
|
||||
&.disabled {
|
||||
opacity: 0.5;
|
||||
@@ -62,7 +62,7 @@
|
||||
|
||||
.counter {
|
||||
margin-bottom: 2px;
|
||||
color: $dark-gray;
|
||||
color: variables.$dark-gray;
|
||||
font-size: 1.1em;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
@import 'utils/variables';
|
||||
@use 'utils/variables';
|
||||
|
||||
.TeamRow {
|
||||
&:nth-child(odd) {
|
||||
background: alpha-color($white, 0.5);
|
||||
background: alpha-color(variables.$white, 0.5);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -11,7 +11,7 @@
|
||||
height: 80px;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
border: 2px solid $transparent;
|
||||
border: 2px solid variables.$transparent;
|
||||
}
|
||||
|
||||
.TeamRow__row .TeamRow__team-name {
|
||||
@@ -52,16 +52,16 @@
|
||||
|
||||
> a {
|
||||
padding: 3px 5px;
|
||||
color: $black;
|
||||
color: variables.$black;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
border-radius: 3px;
|
||||
background-color: $light-gray;
|
||||
background-color: variables.$light-gray;
|
||||
}
|
||||
|
||||
&.warning {
|
||||
color: $red;
|
||||
color: variables.$red;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@import 'utils/_mixins';
|
||||
@use 'utils/_mixins';
|
||||
|
||||
table.systemUsersTable {
|
||||
thead {
|
||||
@@ -47,7 +47,7 @@ table.systemUsersTable {
|
||||
font-weight: 600;
|
||||
grid-area: displayName;
|
||||
|
||||
@include textEllipsis;
|
||||
@include mixins.textEllipsis;
|
||||
|
||||
.icon {
|
||||
color: rgba(var(--sys-denim-center-channel-text-rgb), 0.8);
|
||||
@@ -58,7 +58,7 @@ table.systemUsersTable {
|
||||
align-self: start;
|
||||
grid-area: userName;
|
||||
|
||||
@include textEllipsis;
|
||||
@include mixins.textEllipsis;
|
||||
}
|
||||
|
||||
.error {
|
||||
@@ -66,7 +66,7 @@ table.systemUsersTable {
|
||||
align-self: start;
|
||||
grid-area: error;
|
||||
|
||||
@include textEllipsis;
|
||||
@include mixins.textEllipsis;
|
||||
|
||||
// this need to be here, after textEllipsis because
|
||||
// we need to override white-space property coming from the mixing
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@import 'utils/variables';
|
||||
@use 'utils/variables';
|
||||
|
||||
.AdvancedTextEditor__skeleton {
|
||||
display: flex;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@import 'utils/variables';
|
||||
@use 'utils/variables';
|
||||
|
||||
.contact-us {
|
||||
display: block;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@import 'utils/mixins';
|
||||
@use 'utils/mixins';
|
||||
|
||||
.overage_users_banner {
|
||||
&__description {
|
||||
@@ -9,7 +9,7 @@
|
||||
}
|
||||
|
||||
&__button {
|
||||
@include link;
|
||||
@include mixins.link;
|
||||
|
||||
background: transparent;
|
||||
font-size: 14px;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@import 'utils/variables';
|
||||
@use 'utils/variables';
|
||||
|
||||
.annnouncementBar__purchaseNow {
|
||||
display: block;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@import 'utils/variables';
|
||||
@use 'utils/variables';
|
||||
|
||||
.annnouncementBar__renewLicense {
|
||||
display: block;
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
|
||||
// See LICENSE.txt for license information.
|
||||
|
||||
@import 'utils/mixins';
|
||||
@use 'utils/mixins';
|
||||
|
||||
$app-bar-icon-size: 24px;
|
||||
$app-bar-width: 44px;
|
||||
@@ -140,8 +140,8 @@ $app-bar-width: 44px;
|
||||
padding-bottom: 36px;
|
||||
|
||||
.app_bar__marketplace_button {
|
||||
@include icon-button;
|
||||
@include icon-button-small-compact;
|
||||
@include mixins.icon-button;
|
||||
@include mixins.icon-button-small-compact;
|
||||
|
||||
color: rgba(var(--sidebar-text-rgb), 0.64);
|
||||
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
@use 'sass:color';
|
||||
|
||||
@import 'utils/variables';
|
||||
@use 'utils/variables';
|
||||
|
||||
#searchInput {
|
||||
flex: none;
|
||||
@@ -11,9 +11,9 @@
|
||||
height: auto;
|
||||
flex-direction: row;
|
||||
padding: 8px;
|
||||
border: 1px solid $light-gray;
|
||||
border: 1px solid variables.$light-gray;
|
||||
border-top: none;
|
||||
background: $white;
|
||||
background: variables.$white;
|
||||
color: rgba(0, 0, 0, 0.5);
|
||||
font-size: 1.1em;
|
||||
text-align: right;
|
||||
|
||||
@@ -1,5 +1,3 @@
|
||||
@charset 'UTF-8';
|
||||
|
||||
#browseChannelsModal {
|
||||
.modal-dialog {
|
||||
margin-top: calc(45vh - 240px) !important;
|
||||
|
||||
@@ -1,5 +1,3 @@
|
||||
@charset 'UTF-8';
|
||||
|
||||
.edit-category__helpText {
|
||||
color: rgba(var(--center-channel-color-rgb), 0.75);
|
||||
font-size: 12px;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@import 'utils/mixins';
|
||||
@use 'utils/mixins';
|
||||
|
||||
.CenterMessageLock {
|
||||
display: flex;
|
||||
@@ -28,7 +28,7 @@
|
||||
padding-top: 12px;
|
||||
|
||||
.btn {
|
||||
@include tertiary-button;
|
||||
@include mixins.tertiary-button;
|
||||
|
||||
font-size: 12px;
|
||||
|
||||
@@ -42,7 +42,7 @@
|
||||
}
|
||||
|
||||
&.is-admin {
|
||||
@include primary-button;
|
||||
@include mixins.primary-button;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@import '../payment_form/mixins';
|
||||
@use '../payment_form/mixins';
|
||||
|
||||
.shipping-address-section {
|
||||
display: flex;
|
||||
@@ -39,5 +39,5 @@
|
||||
}
|
||||
|
||||
.PurchaseModal .shipping-address-section {
|
||||
@include payment-form-padding;
|
||||
@include mixins.payment-form-padding;
|
||||
}
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
@import 'utils/variables';
|
||||
@use 'utils/variables';
|
||||
|
||||
.WorkspaceLimitLine {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-bottom: 16px;
|
||||
font-weight: $font-weight--semibold;
|
||||
font-weight: variables.$font-weight--semibold;
|
||||
|
||||
&:last-child {
|
||||
padding-bottom: 0;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@import 'utils/variables';
|
||||
@use 'utils/variables';
|
||||
|
||||
.MultiSelectCard {
|
||||
position: relative;
|
||||
@@ -12,7 +12,7 @@
|
||||
border-radius: 8px;
|
||||
margin-right: 16px;
|
||||
background: var(--center-channel-bg);
|
||||
box-shadow: $elevation-3;
|
||||
box-shadow: variables.$elevation-3;
|
||||
cursor: pointer;
|
||||
list-style-type: none;
|
||||
outline: 1px solid rgba(var(--center-channel-color-rgb), 0.16);
|
||||
@@ -21,7 +21,7 @@
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
box-shadow: $elevation-4;
|
||||
box-shadow: variables.$elevation-4;
|
||||
outline: 1px solid rgba(var(--center-channel-color-rgb), 0.32);
|
||||
}
|
||||
|
||||
@@ -44,18 +44,18 @@
|
||||
}
|
||||
|
||||
&--checked {
|
||||
box-shadow: $elevation-2;
|
||||
box-shadow: variables.$elevation-2;
|
||||
outline: 2px solid var(--button-bg);
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
box-shadow: $elevation-2;
|
||||
box-shadow: variables.$elevation-2;
|
||||
outline: 2px solid var(--button-bg);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
box-shadow: $elevation-4;
|
||||
box-shadow: variables.$elevation-4;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
|
||||
// See LICENSE.txt for license information.
|
||||
|
||||
@import 'utils/mixins';
|
||||
@use 'utils/mixins';
|
||||
|
||||
.do-verify-body {
|
||||
display: flex;
|
||||
@@ -21,8 +21,8 @@
|
||||
justify-content: center;
|
||||
|
||||
.do-verify-body-content-button-return {
|
||||
@include primary-button;
|
||||
@include button-medium;
|
||||
@include mixins.primary-button;
|
||||
@include mixins.button-medium;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,11 +1,11 @@
|
||||
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
|
||||
// See LICENSE.txt for license information.
|
||||
|
||||
@import 'utils/mixins';
|
||||
@use 'utils/mixins';
|
||||
|
||||
.external-login-button {
|
||||
@include secondary-button;
|
||||
@include button-medium;
|
||||
@include mixins.secondary-button;
|
||||
@include mixins.button-medium;
|
||||
|
||||
min-width: 136px;
|
||||
flex: 1 1 0%;
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
|
||||
// See LICENSE.txt for license information.
|
||||
|
||||
@import 'utils/mixins';
|
||||
@use 'utils/mixins';
|
||||
|
||||
.FeatureRestrictedModal {
|
||||
&__description {
|
||||
@@ -19,7 +19,7 @@
|
||||
line-height: 16px;
|
||||
|
||||
a {
|
||||
@include link;
|
||||
@include mixins.link;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -29,20 +29,20 @@
|
||||
padding: 24px 0;
|
||||
|
||||
.button-plans {
|
||||
@include tertiary-button;
|
||||
@include button-medium;
|
||||
@include mixins.tertiary-button;
|
||||
@include mixins.button-medium;
|
||||
}
|
||||
|
||||
.button-trial {
|
||||
@include primary-button;
|
||||
@include button-medium;
|
||||
@include mixins.primary-button;
|
||||
@include mixins.button-medium;
|
||||
}
|
||||
|
||||
&.single {
|
||||
justify-content: flex-end;
|
||||
|
||||
.button-plans {
|
||||
@include primary-button;
|
||||
@include mixins.primary-button;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
|
||||
// See LICENSE.txt for license information.
|
||||
|
||||
@import 'utils/mixins';
|
||||
@use 'utils/mixins';
|
||||
|
||||
.alternate-link {
|
||||
margin-left: auto;
|
||||
@@ -15,7 +15,7 @@
|
||||
&__link {
|
||||
padding-left: 4px;
|
||||
|
||||
@include link;
|
||||
@include mixins.link;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
|
||||
// See LICENSE.txt for license information.
|
||||
|
||||
@import 'utils/mixins';
|
||||
@use 'utils/mixins';
|
||||
|
||||
.hfroute-footer {
|
||||
display: flex;
|
||||
@@ -15,7 +15,7 @@
|
||||
padding: 0 40px;
|
||||
|
||||
.footer-link {
|
||||
@include link;
|
||||
@include mixins.link;
|
||||
|
||||
color: rgba(var(--center-channel-color-rgb), 0.75);
|
||||
font-size: 11px;
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
|
||||
// See LICENSE.txt for license information.
|
||||
|
||||
@import 'utils/mixins';
|
||||
@use 'utils/mixins';
|
||||
|
||||
.hfroute-header {
|
||||
position: relative;
|
||||
@@ -21,7 +21,7 @@
|
||||
justify-content: space-between;
|
||||
|
||||
.header-logo-link {
|
||||
@include link;
|
||||
@include mixins.link;
|
||||
|
||||
display: flex;
|
||||
color: rgba(var(--center-channel-color-rgb), 0.75);
|
||||
@@ -68,7 +68,7 @@
|
||||
background: none;
|
||||
|
||||
a {
|
||||
@include link;
|
||||
@include mixins.link;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
|
||||
// See LICENSE.txt for license information.
|
||||
|
||||
@import 'utils/mixins';
|
||||
@use 'utils/mixins';
|
||||
|
||||
.header-footer-route {
|
||||
position: relative;
|
||||
|
||||
@@ -1,5 +1,3 @@
|
||||
@charset 'UTF-8';
|
||||
|
||||
.info-toast {
|
||||
position: fixed;
|
||||
z-index: 99;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@import 'utils/variables';
|
||||
@use 'utils/variables';
|
||||
|
||||
.AddToChannels {
|
||||
&__messageInput {
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@import 'components/toggle';
|
||||
@use 'components/toggle';
|
||||
|
||||
.InviteAs {
|
||||
&__label {
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@import 'utils/_mixins';
|
||||
@use 'utils/_mixins';
|
||||
|
||||
.InviteView {
|
||||
&__sectionTitle {
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@import 'utils/mixins';
|
||||
@use 'utils/mixins';
|
||||
|
||||
.overage_users_banner {
|
||||
margin-top: 16px;
|
||||
@@ -11,7 +11,7 @@
|
||||
}
|
||||
|
||||
&__button {
|
||||
@include link;
|
||||
@include mixins.link;
|
||||
|
||||
background: transparent;
|
||||
font-size: 14px;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@import 'utils/variables';
|
||||
@use 'utils/variables';
|
||||
|
||||
.InviteResultTable {
|
||||
width: 100%;
|
||||
|
||||
@@ -1,5 +1,3 @@
|
||||
@charset 'UTF-8';
|
||||
|
||||
.modal {
|
||||
.shortcuts-modal {
|
||||
width: 1100px;
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
@import 'utils/variables';
|
||||
@use 'utils/variables';
|
||||
|
||||
.tooltip-container {
|
||||
opacity: 0;
|
||||
transition: opacity $transition-quick ease-in;
|
||||
transition: opacity variables.$transition-quick ease-in;
|
||||
visibility: hidden;
|
||||
|
||||
&.visible {
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
|
||||
// See LICENSE.txt for license information.
|
||||
|
||||
@import 'utils/mixins';
|
||||
@use 'utils/mixins';
|
||||
|
||||
.login-body {
|
||||
display: flex;
|
||||
@@ -101,7 +101,7 @@
|
||||
box-shadow: var(--elevation-5);
|
||||
|
||||
&.with-error {
|
||||
@include shake-horizontally;
|
||||
@include mixins.shake-horizontally;
|
||||
}
|
||||
|
||||
.login-body-card-content {
|
||||
@@ -144,13 +144,13 @@
|
||||
margin-top: 17px;
|
||||
|
||||
a {
|
||||
@include link;
|
||||
@include mixins.link;
|
||||
}
|
||||
}
|
||||
|
||||
.login-body-card-form-button-submit {
|
||||
@include primary-button;
|
||||
@include button-large;
|
||||
@include mixins.primary-button;
|
||||
@include mixins.button-large;
|
||||
|
||||
width: 100%;
|
||||
margin-top: 30px;
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
|
||||
// See LICENSE.txt for license information.
|
||||
|
||||
@import 'utils/mixins';
|
||||
@use 'utils/mixins';
|
||||
|
||||
.login-mfa-form {
|
||||
display: flex;
|
||||
@@ -19,8 +19,8 @@
|
||||
background-color: var(--center-channel-bg);
|
||||
|
||||
.login-mfa-form-button-submit {
|
||||
@include primary-button;
|
||||
@include button-large;
|
||||
@include mixins.primary-button;
|
||||
@include mixins.button-large;
|
||||
|
||||
flex: 1;
|
||||
margin: 0;
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
@import 'utils/functions';
|
||||
@import 'utils/variables';
|
||||
@use 'utils/functions';
|
||||
@use 'utils/variables';
|
||||
|
||||
.markdown-image-expand {
|
||||
position: relative;
|
||||
@@ -18,7 +18,7 @@
|
||||
border: 1px solid rgba(var(--center-channel-color-rgb), 0.16);
|
||||
border-radius: 16px;
|
||||
background-color: var(--center-channel-bg);
|
||||
box-shadow: $elevation-1;
|
||||
box-shadow: variables.$elevation-1;
|
||||
color: rgba(var(--center-channel-color-rgb), 0.64);
|
||||
font-size: 18px;
|
||||
line-height: 21px;
|
||||
@@ -34,7 +34,7 @@
|
||||
|
||||
&:hover {
|
||||
border: 1px solid rgba(var(--center-channel-color-rgb), 0.24);
|
||||
box-shadow: $elevation-2;
|
||||
box-shadow: variables.$elevation-2;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -1,5 +1,3 @@
|
||||
@charset 'UTF-8';
|
||||
|
||||
.no-results__holder {
|
||||
display: grid;
|
||||
width: 100%;
|
||||
|
||||
@@ -1,6 +1,3 @@
|
||||
|
||||
@charset 'UTF-8';
|
||||
|
||||
.on-boarding-video_modal {
|
||||
.modal & {
|
||||
width: 100%;
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
@import 'utils/variables';
|
||||
@import 'utils/mixins';
|
||||
@use 'utils/variables';
|
||||
@use 'utils/mixins';
|
||||
|
||||
.marketplace-modal {
|
||||
width: 832px;
|
||||
@@ -145,14 +145,14 @@
|
||||
|
||||
.plugin-configure,
|
||||
.app-installed {
|
||||
@include secondary-button;
|
||||
@include button-medium;
|
||||
@include mixins.secondary-button;
|
||||
@include mixins.button-medium;
|
||||
}
|
||||
|
||||
.plugin-install,
|
||||
.app-install {
|
||||
@include primary-button;
|
||||
@include button-medium;
|
||||
@include mixins.primary-button;
|
||||
@include mixins.button-medium;
|
||||
}
|
||||
|
||||
a {
|
||||
@@ -177,7 +177,7 @@
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 50%;
|
||||
background-color: $white;
|
||||
background-color: variables.$white;
|
||||
|
||||
svg,
|
||||
img {
|
||||
@@ -242,7 +242,7 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 10px 15px;
|
||||
border-bottom: 1px solid $light-gray;
|
||||
border-bottom: 1px solid variables.$light-gray;
|
||||
|
||||
&.clickable {
|
||||
cursor: pointer;
|
||||
@@ -273,8 +273,8 @@
|
||||
}
|
||||
|
||||
&__action {
|
||||
@include primary-button;
|
||||
@include button-medium;
|
||||
@include mixins.primary-button;
|
||||
@include mixins.button-medium;
|
||||
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
@@ -1,17 +1,15 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
@import 'utils/mixins';
|
||||
@use 'utils/mixins';
|
||||
|
||||
.PostPriorityPicker {
|
||||
width: 324px;
|
||||
|
||||
&__apply {
|
||||
@include button-small;
|
||||
@include primary-button;
|
||||
@include mixins.button-small;
|
||||
@include mixins.primary-button;
|
||||
}
|
||||
|
||||
&__cancel {
|
||||
@include button-small;
|
||||
@include tertiary-button;
|
||||
@include mixins.button-small;
|
||||
@include mixins.tertiary-button;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,10 +1,8 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
@import 'utils/mixins';
|
||||
@import 'utils/variables';
|
||||
@use 'utils/mixins';
|
||||
@use 'utils/variables';
|
||||
|
||||
.AcknowledgementButton {
|
||||
@include button-xsmall;
|
||||
@include mixins.button-xsmall;
|
||||
|
||||
position: relative;
|
||||
display: flex;
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
@import 'utils/mixins';
|
||||
@import 'utils/functions';
|
||||
@use 'utils/mixins';
|
||||
@use 'utils/functions';
|
||||
|
||||
.reaction-emoji--large img {
|
||||
width: 48px;
|
||||
@@ -10,7 +10,7 @@
|
||||
}
|
||||
|
||||
.Reaction {
|
||||
@include button-style--none;
|
||||
@include mixins.button-style--none;
|
||||
|
||||
display: inline-flex;
|
||||
min-width: 28px;
|
||||
@@ -40,15 +40,15 @@
|
||||
&:not(.Reaction--reacted) {
|
||||
&:hover {
|
||||
border-color: rgba(var(--center-channel-color-rgb), 0.16);
|
||||
background-color: v(center-channel-bg);
|
||||
background-color: functions.v(center-channel-bg);
|
||||
color: rgba(var(--center-channel-color-rgb), 0.75);
|
||||
fill: rgba(var(--center-channel-color-rgb), 0.75);
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: rgba(var(--button-bg-rgb), 0.08);
|
||||
color: v(button-bg);
|
||||
fill: v(button-bg);
|
||||
color: functions.v(button-bg);
|
||||
fill: functions.v(button-bg);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -90,19 +90,19 @@
|
||||
|
||||
&.Reaction--reacted,
|
||||
&.Reaction--reacting {
|
||||
border-color: v(button-bg);
|
||||
border-color: functions.v(button-bg);
|
||||
background-color: rgba(var(--button-bg-rgb), 0.08);
|
||||
color: v(button-bg);
|
||||
color: functions.v(button-bg);
|
||||
|
||||
&:hover {
|
||||
border-color: v(button-bg);
|
||||
background: v(center-channel-bg);
|
||||
border-color: functions.v(button-bg);
|
||||
background: functions.v(center-channel-bg);
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: rgba(var(--button-bg-rgb), 0.08);
|
||||
color: v(button-bg);
|
||||
fill: v(button-bg);
|
||||
color: functions.v(button-bg);
|
||||
fill: functions.v(button-bg);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@import 'utils/mixins';
|
||||
@use 'utils/mixins';
|
||||
|
||||
// UX decision to show no more than about 5 1/4 lines of users/emails at a time.
|
||||
$less-than-6-user-lines-height: 227px;
|
||||
@@ -65,7 +65,7 @@ $less-than-6-user-lines-height: 227px;
|
||||
}
|
||||
}
|
||||
|
||||
@include simple-in-and-out-before("InviteMembers");
|
||||
@include mixins.simple-in-and-out-before("InviteMembers");
|
||||
|
||||
.ChannelsPreview--enter-from-after {
|
||||
&-enter {
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@import 'utils/mixins';
|
||||
@use 'utils/mixins';
|
||||
|
||||
.InviteMembersLink {
|
||||
display: flex;
|
||||
@@ -55,7 +55,7 @@
|
||||
}
|
||||
|
||||
&__button--single {
|
||||
@include tertiary-button;
|
||||
@include mixins.tertiary-button;
|
||||
|
||||
height: 40px;
|
||||
border-radius: 4px;
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
@import 'utils/variables';
|
||||
@import 'utils/mixins';
|
||||
@import './mixins';
|
||||
@use 'utils/variables';
|
||||
@use 'utils/mixins' as utils-mixins;
|
||||
@use 'mixins';
|
||||
|
||||
.Organization-body {
|
||||
display: flex;
|
||||
@@ -23,7 +23,7 @@
|
||||
|
||||
.Organization {
|
||||
&__input {
|
||||
@include input;
|
||||
@include mixins.input;
|
||||
}
|
||||
|
||||
&__status {
|
||||
@@ -60,4 +60,4 @@
|
||||
}
|
||||
}
|
||||
|
||||
@include simple-in-and-out("Organization");
|
||||
@include utils-mixins.simple-in-and-out("Organization");
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@import 'utils/mixins';
|
||||
@use 'utils/mixins';
|
||||
|
||||
.Plugins__marketplace {
|
||||
margin-top: 24px;
|
||||
@@ -52,4 +52,4 @@
|
||||
}
|
||||
}
|
||||
|
||||
@include simple-in-and-out("Plugins");
|
||||
@include mixins.simple-in-and-out("Plugins");
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
@import 'utils/variables';
|
||||
@import 'utils/mixins';
|
||||
@import 'mixins';
|
||||
@use 'utils/variables';
|
||||
@use 'utils/mixins' as utils-mixins;
|
||||
@use 'mixins';
|
||||
|
||||
.PreparingWorkspace {
|
||||
width: 100vw;
|
||||
@@ -38,7 +38,7 @@
|
||||
padding: 10px;
|
||||
border-radius: 4px;
|
||||
background-color: var(--dnd-indicator);
|
||||
box-shadow: $elevation-3;
|
||||
box-shadow: variables.$elevation-3;
|
||||
color: var(--center-channel-bg);
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
@@ -55,15 +55,15 @@
|
||||
}
|
||||
|
||||
.tertiary-button {
|
||||
@include tertiary-button;
|
||||
@include button-medium;
|
||||
@include utils-mixins.tertiary-button;
|
||||
@include utils-mixins.button-medium;
|
||||
|
||||
margin-left: 16px;
|
||||
}
|
||||
|
||||
.primary-button {
|
||||
@include primary-button;
|
||||
@include button-medium;
|
||||
@include utils-mixins.primary-button;
|
||||
@include utils-mixins.button-medium;
|
||||
|
||||
box-sizing: border-box;
|
||||
border: 2px solid var(--button-bg);
|
||||
@@ -75,7 +75,7 @@
|
||||
}
|
||||
|
||||
.link-style {
|
||||
@include link;
|
||||
@include utils-mixins.link;
|
||||
|
||||
background: transparent;
|
||||
font-size: 14px;
|
||||
@@ -95,7 +95,7 @@
|
||||
animation-fill-mode: forwards;
|
||||
animation-timing-function: ease-in-out;
|
||||
|
||||
@include sideIllustrationKeyframe(invitation, -651, 0);
|
||||
@include mixins.sideIllustrationKeyframe(invitation, -651, 0);
|
||||
|
||||
&.enter {
|
||||
animation-name: invitationSlideInRight;
|
||||
@@ -138,7 +138,7 @@
|
||||
|
||||
@media screen and (min-width: 1200px) and (max-width: 1500px) {
|
||||
.PreparingWorkspace__invite-members-illustration {
|
||||
@include sideIllustrationKeyframe(invitation, -651, -200);
|
||||
@include mixins.sideIllustrationKeyframe(invitation, -651, -200);
|
||||
|
||||
&.enter {
|
||||
animation-name: invitationSlideInRight;
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
@use 'sass:color';
|
||||
|
||||
@import 'utils/variables';
|
||||
@import 'utils/mixins';
|
||||
@use 'utils/variables';
|
||||
@use 'utils/mixins';
|
||||
|
||||
.PreparingWorkspaceProgress {
|
||||
position: fixed;
|
||||
@@ -25,12 +25,12 @@
|
||||
height: 6px;
|
||||
border-radius: 6px;
|
||||
margin: 5px 0;
|
||||
background: $primary-color;
|
||||
background: variables.$primary-color;
|
||||
opacity: 0.2;
|
||||
|
||||
&.active {
|
||||
opacity: 1;
|
||||
outline: 3px solid color.adjust($primary-color, $lightness: 50%);
|
||||
outline: 3px solid color.adjust(variables.$primary-color, $lightness: 50%);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -1,5 +1,3 @@
|
||||
@charset 'UTF-8';
|
||||
|
||||
.productNotices {
|
||||
width: 692px;
|
||||
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@import 'utils/mixins';
|
||||
@use 'utils/mixins';
|
||||
|
||||
.user-profile-popover-floating-overlay {
|
||||
// 99 being the z-index of the global header
|
||||
@@ -109,7 +109,7 @@
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
line-height: 28px;
|
||||
@include textEllipsis;
|
||||
@include mixins.textEllipsis;
|
||||
}
|
||||
|
||||
i.shared-user-icon {
|
||||
@@ -129,7 +129,7 @@
|
||||
padding-inline-start: 16px;
|
||||
text-align: center;
|
||||
|
||||
@include textEllipsis;
|
||||
@include mixins.textEllipsis;
|
||||
}
|
||||
|
||||
hr {
|
||||
@@ -163,14 +163,14 @@
|
||||
font-weight: 400;
|
||||
line-height: 20px;
|
||||
|
||||
@include textEllipsis;
|
||||
@include mixins.textEllipsis;
|
||||
}
|
||||
}
|
||||
|
||||
.user-profile-popover-pluggables {
|
||||
&:not(:empty) {
|
||||
padding: 0 16px 12px 16px;
|
||||
@include textEllipsis;
|
||||
@include mixins.textEllipsis;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -190,7 +190,7 @@
|
||||
flex-direction: column;
|
||||
padding: 0 16px 12px 16px;
|
||||
|
||||
@include textEllipsis;
|
||||
@include mixins.textEllipsis;
|
||||
|
||||
.user-popover__subtitle {
|
||||
display: flex;
|
||||
@@ -199,7 +199,7 @@
|
||||
font-weight: 600;
|
||||
gap: 4px;
|
||||
line-height: 16px;
|
||||
@include textEllipsis;
|
||||
@include mixins.textEllipsis;
|
||||
}
|
||||
|
||||
.user-popover__subtitle-text {
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
|
||||
// See LICENSE.txt for license information.
|
||||
|
||||
@import 'utils/mixins';
|
||||
@use 'utils/mixins';
|
||||
|
||||
.should-verify-body {
|
||||
display: flex;
|
||||
@@ -27,18 +27,18 @@
|
||||
justify-content: center;
|
||||
|
||||
.should-verify-body-content-button-resend {
|
||||
@include tertiary-button;
|
||||
@include mixins.tertiary-button;
|
||||
}
|
||||
|
||||
.should-verify-body-content-button-return {
|
||||
@include primary-button;
|
||||
@include mixins.primary-button;
|
||||
|
||||
margin-left: 16px;
|
||||
}
|
||||
|
||||
.should-verify-body-content-button-resend,
|
||||
.should-verify-body-content-button-return {
|
||||
@include button-large;
|
||||
@include mixins.button-large;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -1,6 +1,4 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
@import 'utils/variables';
|
||||
@use 'utils/variables';
|
||||
|
||||
.nav-pills__unread-indicator {
|
||||
position: absolute;
|
||||
@@ -34,7 +32,7 @@
|
||||
|
||||
body.enable-animations & {
|
||||
transition-delay: 0s;
|
||||
transition-duration: $transition-quick;
|
||||
transition-duration: variables.$transition-quick;
|
||||
transition-property: opacity, visibility;
|
||||
transition-timing-function: ease-out, step-start;
|
||||
}
|
||||
@@ -63,7 +61,7 @@
|
||||
|
||||
body.enable-animations & {
|
||||
transition-delay: 0s;
|
||||
transition-duration: $transition-quick;
|
||||
transition-duration: variables.$transition-quick;
|
||||
transition-property: opacity, visibility;
|
||||
transition-timing-function: ease-out, step-start;
|
||||
}
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
|
||||
// See LICENSE.txt for license information.
|
||||
|
||||
@import 'utils/mixins';
|
||||
@use 'utils/mixins';
|
||||
|
||||
.signup-body {
|
||||
display: flex;
|
||||
@@ -130,7 +130,7 @@
|
||||
box-shadow: var(--elevation-5);
|
||||
|
||||
&.with-error {
|
||||
@include shake-horizontally;
|
||||
@include mixins.shake-horizontally;
|
||||
}
|
||||
|
||||
.signup-body-card-content {
|
||||
@@ -183,8 +183,8 @@
|
||||
}
|
||||
|
||||
.signup-body-card-form-button-submit {
|
||||
@include primary-button;
|
||||
@include button-large;
|
||||
@include mixins.primary-button;
|
||||
@include mixins.button-large;
|
||||
|
||||
width: 100%;
|
||||
margin-top: 30px;
|
||||
@@ -230,7 +230,7 @@
|
||||
line-height: 16px;
|
||||
|
||||
a {
|
||||
@include link;
|
||||
@include mixins.link;
|
||||
|
||||
font-size: 11px;
|
||||
}
|
||||
@@ -273,8 +273,8 @@
|
||||
justify-content: center;
|
||||
|
||||
.signup-body-content-button-return {
|
||||
@include primary-button;
|
||||
@include button-medium;
|
||||
@include mixins.primary-button;
|
||||
@include mixins.button-medium;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,4 +1,3 @@
|
||||
|
||||
@mixin leveled-bg($hover, $active) {
|
||||
&:hover {
|
||||
&:not(:disabled) {
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
|
||||
// See LICENSE.txt for license information.
|
||||
|
||||
@import 'utils/_mixins';
|
||||
@use 'utils/_mixins';
|
||||
|
||||
.ThreadItem {
|
||||
position: relative;
|
||||
@@ -28,7 +28,7 @@
|
||||
}
|
||||
|
||||
&__author {
|
||||
@include clearfix;
|
||||
@include mixins.clearfix;
|
||||
|
||||
overflow: hidden;
|
||||
max-width: 100%;
|
||||
@@ -124,7 +124,7 @@
|
||||
margin: 0 0 10px;
|
||||
color: rgba(var(--center-channel-color-rgb), 1);
|
||||
|
||||
@include text-clamp(2, 20);
|
||||
@include mixins.text-clamp(2, 20);
|
||||
}
|
||||
|
||||
time {
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
@import 'utils/variables';
|
||||
@import 'utils/mixins';
|
||||
@use 'utils/variables';
|
||||
@use 'utils/mixins';
|
||||
|
||||
// since the modal is kind of tall, this makes it look more aligned to the top and the content better distributed
|
||||
.GenericModal.modal-dialog {
|
||||
@@ -100,8 +100,8 @@
|
||||
margin-top: 24px;
|
||||
margin-left: auto;
|
||||
|
||||
@include primary-button;
|
||||
@include button-medium;
|
||||
@include mixins.primary-button;
|
||||
@include mixins.button-medium;
|
||||
|
||||
&:focus-visible {
|
||||
outline: none !important;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@import 'utils/variables';
|
||||
@use 'utils/variables';
|
||||
|
||||
.toast {
|
||||
position: absolute;
|
||||
@@ -92,7 +92,7 @@
|
||||
}
|
||||
|
||||
.toast__red {
|
||||
background-color: $red;
|
||||
background-color: variables.$red;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
|
||||
@@ -1,6 +1,3 @@
|
||||
|
||||
@charset 'UTF-8';
|
||||
|
||||
.GenericModal.CollapsedReplyThreadsModal {
|
||||
width: 692px;
|
||||
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
@import 'utils/variables';
|
||||
@import 'utils/mixins';
|
||||
@use 'utils/variables';
|
||||
@use 'utils/mixins';
|
||||
|
||||
.TrialBenefitsModalStep {
|
||||
&.slide-container {
|
||||
@@ -70,16 +70,16 @@
|
||||
margin-top: 10px;
|
||||
|
||||
.tertiary-button {
|
||||
@include tertiary-button;
|
||||
@include button-medium;
|
||||
@include mixins.tertiary-button;
|
||||
@include mixins.button-medium;
|
||||
|
||||
height: 32px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.primary-button {
|
||||
@include primary-button;
|
||||
@include button-small;
|
||||
@include mixins.primary-button;
|
||||
@include mixins.button-small;
|
||||
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
@@ -1,5 +1,3 @@
|
||||
@charset 'UTF-8';
|
||||
|
||||
.user-groups-modal-create,
|
||||
.user-groups-modal-update,
|
||||
.view-user-groups-modal,
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@import 'utils/variables';
|
||||
@use 'utils/variables';
|
||||
|
||||
.AdminPanel {
|
||||
padding: 0;
|
||||
@@ -17,7 +17,7 @@
|
||||
width: 100%;
|
||||
|
||||
th {
|
||||
border-bottom: solid 1px alpha-color($black, 0.1);
|
||||
border-bottom: solid 1px alpha-color(variables.$black, 0.1);
|
||||
}
|
||||
|
||||
td,
|
||||
@@ -37,7 +37,7 @@
|
||||
justify-content: space-between;
|
||||
padding: 20px;
|
||||
border-radius: var(--radius-s) var(--radius-s) 0 0;
|
||||
background: $white;
|
||||
background: variables.$white;
|
||||
|
||||
h3 {
|
||||
padding: 0;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@import 'utils/variables';
|
||||
@use 'utils/variables';
|
||||
|
||||
.ChannelsInput {
|
||||
&.empty {
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
|
||||
// See LICENSE.txt for license information.
|
||||
|
||||
@import 'utils/mixins';
|
||||
@use 'utils/mixins';
|
||||
|
||||
.url-input-main {
|
||||
display: flex;
|
||||
@@ -42,7 +42,7 @@
|
||||
}
|
||||
|
||||
.url-input-button {
|
||||
@include link;
|
||||
@include mixins.link;
|
||||
|
||||
padding: 0;
|
||||
border: none;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@import 'utils/variables';
|
||||
@use 'utils/variables';
|
||||
|
||||
.UsersEmailsInput {
|
||||
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
@import 'utils/variables';
|
||||
@import 'utils/functions';
|
||||
@use 'utils/variables';
|
||||
@use 'utils/functions';
|
||||
|
||||
.MenuGroup {
|
||||
&.menu-divider {
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@import 'utils/variables';
|
||||
@use 'utils/variables';
|
||||
|
||||
.Menu {
|
||||
.MenuHeader {
|
||||
@@ -11,7 +11,7 @@
|
||||
clear: both;
|
||||
color: inherit;
|
||||
cursor: default;
|
||||
font-weight: $font-weight--semibold;
|
||||
font-weight: variables.$font-weight--semibold;
|
||||
text-align: left;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@import 'utils/variables';
|
||||
@use 'utils/variables';
|
||||
|
||||
.Menu {
|
||||
.MenuItem {
|
||||
@@ -394,6 +394,6 @@
|
||||
}
|
||||
|
||||
.MenuItem__divider {
|
||||
border-top: $border-gray;
|
||||
border-top: variables.$border-gray;
|
||||
margin: 8px 0;
|
||||
}
|
||||
|
||||
@@ -1,6 +1,4 @@
|
||||
@charset 'UTF-8';
|
||||
|
||||
@import 'utils/variables';
|
||||
@use 'utils/variables';
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
#submenuModal {
|
||||
@@ -84,7 +82,7 @@
|
||||
|
||||
.MenuGroup {
|
||||
&.menu-divider {
|
||||
background: $white;
|
||||
background: variables.$white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
@import 'utils/functions';
|
||||
@use 'utils/functions';
|
||||
|
||||
.MenuWrapper {
|
||||
position: relative;
|
||||
|
||||
*:first-child {
|
||||
@include unselectable;
|
||||
@include functions.unselectable;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -1,5 +1,3 @@
|
||||
@charset 'UTF-8';
|
||||
|
||||
.NotificationSeparator {
|
||||
.separator__hr {
|
||||
border-color: #ffaf53;
|
||||
|
||||
@@ -1,6 +1,4 @@
|
||||
@charset 'UTF-8';
|
||||
|
||||
@import 'utils/functions';
|
||||
@use 'utils/functions';
|
||||
|
||||
.Separator {
|
||||
position: relative;
|
||||
@@ -58,8 +56,8 @@
|
||||
display: inline-block;
|
||||
padding: 0 1em;
|
||||
border-radius: 50px;
|
||||
background: v(center-channel-bg);
|
||||
color: v(center-channel-color);
|
||||
background: functions.v(center-channel-bg);
|
||||
color: functions.v(center-channel-color);
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
line-height: 2em;
|
||||
|
||||
@@ -1,7 +1,5 @@
|
||||
@charset 'UTF-8';
|
||||
|
||||
@import 'utils/mixins';
|
||||
@import 'utils/variables';
|
||||
@use 'utils/mixins';
|
||||
@use 'utils/variables';
|
||||
|
||||
.TeamIcon__content {
|
||||
display: flex;
|
||||
@@ -109,11 +107,11 @@
|
||||
}
|
||||
|
||||
.TeamIcon__image {
|
||||
@include clearfix;
|
||||
@include mixins.clearfix;
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: $white;
|
||||
background-color: variables.$white;
|
||||
background-repeat: unset;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
@@ -1,2 +1,2 @@
|
||||
// Only for combining all the files in this folder
|
||||
@import 'sys_css_variables';
|
||||
@use 'sys_css_variables';
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
// Only for combining all the files in this folder
|
||||
@import 'typography';
|
||||
@import 'structure';
|
||||
@import 'css_variables';
|
||||
@use 'typography';
|
||||
@use 'structure';
|
||||
@use 'css_variables';
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
@charset 'UTF-8';
|
||||
@use "utils/mixins";
|
||||
@use "utils/variables";
|
||||
|
||||
html,
|
||||
body {
|
||||
@@ -8,7 +9,7 @@ body {
|
||||
body {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
background: $bg--gray;
|
||||
background: variables.$bg--gray;
|
||||
|
||||
&.sticky {
|
||||
.container-fluid {
|
||||
@@ -29,7 +30,7 @@ body {
|
||||
}
|
||||
|
||||
.sticky {
|
||||
background: $white;
|
||||
background: variables.$white;
|
||||
|
||||
> .channel-view {
|
||||
overflow: auto;
|
||||
@@ -73,14 +74,14 @@ body {
|
||||
}
|
||||
|
||||
.container-fluid {
|
||||
@include pie-clearfix;
|
||||
@include mixins.pie-clearfix;
|
||||
|
||||
position: relative;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.channel-view {
|
||||
@include clearfix;
|
||||
@include mixins.clearfix;
|
||||
|
||||
position: relative;
|
||||
height: 100%;
|
||||
@@ -102,7 +103,7 @@ body.admin-onboarding #root {
|
||||
.app__body {
|
||||
#root.channel-view {
|
||||
&:has(.backstage-body) {
|
||||
background-color: $bg--gray;
|
||||
background-color: variables.$bg--gray;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
@charset 'UTF-8';
|
||||
@use "utils/mixins";
|
||||
@use "utils/variables";
|
||||
|
||||
b,
|
||||
strong {
|
||||
@@ -6,19 +7,19 @@ strong {
|
||||
}
|
||||
|
||||
a {
|
||||
color: $primary-color;
|
||||
color: variables.$primary-color;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
word-break: break-word;
|
||||
|
||||
&:focus,
|
||||
&:hover {
|
||||
color: $primary-color--hover;
|
||||
color: variables.$primary-color--hover;
|
||||
}
|
||||
}
|
||||
|
||||
.color--link {
|
||||
color: $link-color;
|
||||
color: variables.$link-color;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover,
|
||||
@@ -28,7 +29,7 @@ a {
|
||||
}
|
||||
|
||||
body {
|
||||
@include font-smoothing;
|
||||
@include mixins.font-smoothing;
|
||||
|
||||
font-family: 'Open Sans', sans-serif;
|
||||
}
|
||||
@@ -49,7 +50,7 @@ h1 {
|
||||
|
||||
label {
|
||||
&.has-error {
|
||||
color: $red;
|
||||
color: variables.$red;
|
||||
font-weight: normal;
|
||||
}
|
||||
}
|
||||
@@ -227,7 +228,7 @@ ol {
|
||||
|
||||
.color--link--adminack {
|
||||
padding-left: 20px;
|
||||
color: $white;
|
||||
color: variables.$white;
|
||||
cursor: pointer;
|
||||
text-decoration: underline;
|
||||
|
||||
|
||||
@@ -1,3 +1,6 @@
|
||||
@use "utils/mixins";
|
||||
@use "utils/variables";
|
||||
|
||||
.AdminSidebarHeader {
|
||||
background: #333;
|
||||
|
||||
@@ -17,13 +20,13 @@
|
||||
}
|
||||
|
||||
.header__info {
|
||||
@include clearfix;
|
||||
@include mixins.clearfix;
|
||||
|
||||
position: relative;
|
||||
width: 100%;
|
||||
flex-grow: 1;
|
||||
padding: 3px 15px 0 8px;
|
||||
color: $white;
|
||||
color: variables.$white;
|
||||
|
||||
.team__name {
|
||||
overflow: hidden;
|
||||
@@ -43,7 +46,7 @@
|
||||
|
||||
.menu-icon {
|
||||
margin-right: 10px;
|
||||
fill: $white;
|
||||
fill: variables.$white;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
|
||||
@@ -1,5 +1,3 @@
|
||||
@charset 'UTF-8';
|
||||
|
||||
.alert {
|
||||
padding: 8px 12px;
|
||||
border-radius: var(--radius-s);
|
||||
|
||||
@@ -1,15 +1,15 @@
|
||||
@charset 'UTF-8';
|
||||
@use "utils/variables";
|
||||
|
||||
.announcement-bar {
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
width: 100vw;
|
||||
min-height: $announcement-bar-height;
|
||||
max-height: $announcement-bar-height;
|
||||
min-height: variables.$announcement-bar-height;
|
||||
max-height: variables.$announcement-bar-height;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: #579eff;
|
||||
color: $white;
|
||||
color: variables.$white;
|
||||
text-align: center;
|
||||
|
||||
.announcement-bar__text {
|
||||
@@ -48,7 +48,7 @@
|
||||
}
|
||||
|
||||
.annnouncementBar__renewLicense {
|
||||
border-color: $white;
|
||||
border-color: variables.$white;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -66,14 +66,14 @@
|
||||
top: 5px;
|
||||
right: 0;
|
||||
padding: 0 10px;
|
||||
color: $white;
|
||||
color: variables.$white;
|
||||
font-family: 'Open Sans', sans-serif;
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
color: $white;
|
||||
color: variables.$white;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@charset 'UTF-8';
|
||||
@use "utils/variables";
|
||||
|
||||
.style--none {
|
||||
padding: 0;
|
||||
@@ -313,22 +313,22 @@ button {
|
||||
|
||||
&.btn-danger {
|
||||
background: var(--error-text);
|
||||
color: $white;
|
||||
color: variables.$white;
|
||||
|
||||
.app__body & {
|
||||
color: $white;
|
||||
color: variables.$white;
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
color: $white;
|
||||
color: variables.$white;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
color: $white;
|
||||
color: variables.$white;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -340,8 +340,8 @@ button {
|
||||
|
||||
&.btn-inactive {
|
||||
border-color: transparent;
|
||||
background: $light-gray;
|
||||
color: $white;
|
||||
background: variables.$light-gray;
|
||||
color: variables.$white;
|
||||
}
|
||||
|
||||
.fa {
|
||||
@@ -356,7 +356,3 @@ button {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
%btn-transition {
|
||||
transition: all 0.15s ease;
|
||||
}
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
@use "utils/functions";
|
||||
|
||||
.channel-header__icon {
|
||||
position: relative;
|
||||
z-index: 5;
|
||||
@@ -43,23 +45,23 @@
|
||||
&--active.btn.btn-icon,
|
||||
&--active:hover {
|
||||
background: rgba(var(--button-bg-rgb), 0.08);
|
||||
color: v(button-bg);
|
||||
fill: v(button-bg);
|
||||
color: functions.v(button-bg);
|
||||
fill: functions.v(button-bg);
|
||||
|
||||
.icon__text {
|
||||
color: v(button-bg);
|
||||
color: functions.v(button-bg);
|
||||
}
|
||||
|
||||
.icon {
|
||||
color: v(button-bg);
|
||||
color: functions.v(button-bg);
|
||||
}
|
||||
}
|
||||
|
||||
&--active-inverted,
|
||||
&--active-inverted:hover {
|
||||
background: v(button-bg);
|
||||
color: v(button-color);
|
||||
fill: v(button-color);
|
||||
background: functions.v(button-bg);
|
||||
color: functions.v(button-color);
|
||||
fill: functions.v(button-color);
|
||||
}
|
||||
|
||||
.icon__text {
|
||||
|
||||
@@ -1,7 +1,5 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
@import 'utils/variables';
|
||||
@import 'utils/mixins';
|
||||
@use 'utils/variables';
|
||||
@use 'utils/mixins';
|
||||
|
||||
.modal .channel-invite__content,
|
||||
.modal .user-groups-modal__content {
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@charset "UTF-8";
|
||||
@use "utils/functions";
|
||||
|
||||
.modal {
|
||||
.channel-switcher,
|
||||
@@ -55,7 +55,7 @@
|
||||
|
||||
&:focus {
|
||||
padding: 0 33px;
|
||||
border: 1px solid v(button-bg);
|
||||
border: 1px solid functions.v(button-bg);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@charset 'UTF-8';
|
||||
@use "utils/functions";
|
||||
|
||||
.color-input {
|
||||
position: relative;
|
||||
@@ -21,7 +21,7 @@
|
||||
padding: 5px;
|
||||
border-color: rgba(var(--center-channel-color-rgb), 0.32) !important;
|
||||
border-radius: 0 2px 2px 0;
|
||||
background: v(center-channel-bg) !important;
|
||||
background: functions.v(center-channel-bg) !important;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
@use "utils/functions";
|
||||
|
||||
.app__body {
|
||||
.DayPicker {
|
||||
width: 100%;
|
||||
@@ -100,7 +102,7 @@
|
||||
border: 1px solid rgba(var(--center-channel-color-rgb), 0.08);
|
||||
border-radius: 4px;
|
||||
background: rgba(var(--center-channel-bg-rgb), 1);
|
||||
box-shadow: 0 8px 24px 0 alpha-color(black, 0.12);
|
||||
box-shadow: 0 8px 24px 0 functions.alpha-color(black, 0.12);
|
||||
|
||||
& .DayPicker {
|
||||
margin-top: 8px;
|
||||
|
||||
@@ -1,5 +1,3 @@
|
||||
@charset "utf-8";
|
||||
|
||||
.dropdown-menu {
|
||||
border-radius: 4px;
|
||||
background: var(--center-channel-bg);
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
@use "utils/variables";
|
||||
|
||||
.edit-post-time-limit-button {
|
||||
height: 26px;
|
||||
padding: 0 8px;
|
||||
@@ -16,8 +18,8 @@
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border-color: $primary-color;
|
||||
background: $primary-color;
|
||||
color: $white;
|
||||
border-color: variables.$primary-color;
|
||||
background: variables.$primary-color;
|
||||
color: variables.$white;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,5 +1,3 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
.emoji-picker {
|
||||
pointer-events: auto;
|
||||
|
||||
|
||||
@@ -1,6 +1,3 @@
|
||||
|
||||
@charset "UTF-8";
|
||||
|
||||
.emojisprite-preview {
|
||||
width: 66px;
|
||||
max-width: none;
|
||||
|
||||
@@ -1,4 +1,6 @@
|
||||
@charset "UTF-8";
|
||||
@use "utils/functions";
|
||||
@use "utils/mixins";
|
||||
@use "utils/variables";
|
||||
|
||||
.reacticon {
|
||||
position: relative;
|
||||
@@ -54,7 +56,7 @@
|
||||
}
|
||||
|
||||
.emoticon-suggestion {
|
||||
@include clearfix;
|
||||
@include mixins.clearfix;
|
||||
|
||||
width: 100%;
|
||||
height: 30px;
|
||||
@@ -96,7 +98,7 @@
|
||||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
|
||||
user-select: none;
|
||||
|
||||
@include clearfix;
|
||||
@include mixins.clearfix;
|
||||
|
||||
.emoji-picker__header {
|
||||
background: var(--sidebar-header-bg);
|
||||
@@ -208,7 +210,7 @@
|
||||
|
||||
&:active {
|
||||
color: var(--button-bg);
|
||||
color: v(center-channel-color);
|
||||
color: functions.v(center-channel-color);
|
||||
}
|
||||
|
||||
&--selected {
|
||||
@@ -235,8 +237,8 @@
|
||||
display: none; // only visible < 480px width screen
|
||||
width: 100%;
|
||||
padding: 13px 10px 13px 15px;
|
||||
border: 1px solid $light-gray;
|
||||
background: $primary-color;
|
||||
border: 1px solid variables.$light-gray;
|
||||
background: variables.$primary-color;
|
||||
color: var(--sidebar-header-text-color);
|
||||
|
||||
.emoji-picker__header-title {
|
||||
@@ -252,7 +254,7 @@
|
||||
opacity: 1;
|
||||
|
||||
&:hover {
|
||||
background: rgba($black, 0.1);
|
||||
background: rgba(variables.$black, 0.1);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -361,7 +363,7 @@
|
||||
border-radius: 4px;
|
||||
|
||||
&:focus-within {
|
||||
border: 2px solid v(button-bg);
|
||||
border: 2px solid functions.v(button-bg);
|
||||
|
||||
& .emoji-picker__search-icon {
|
||||
padding-top: 7px;
|
||||
@@ -398,19 +400,19 @@
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
background: none;
|
||||
color: rgba(v(center-channel-color-rgb), 0.75);
|
||||
color: rgba(functions.v(center-channel-color-rgb), 0.75);
|
||||
|
||||
&:hover {
|
||||
background: rgba(v(center-channel-color-rgb), 0.08);
|
||||
color: rgba(v(center-channel-color-rgb), 0.75);
|
||||
background: rgba(functions.v(center-channel-color-rgb), 0.08);
|
||||
color: rgba(functions.v(center-channel-color-rgb), 0.75);
|
||||
}
|
||||
|
||||
&:active,
|
||||
&--active,
|
||||
&--active:hover {
|
||||
background: rgba(var(--button-bg-rgb), 0.08);
|
||||
color: v(button-bg);
|
||||
fill: v(button-bg);
|
||||
color: functions.v(button-bg);
|
||||
fill: functions.v(button-bg);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Некоторые файлы не были показаны из-за слишком большого количества измененных файлов Показать больше
Ссылка в новой задаче
Block a user