diff --git a/webapp/channels/build/emoji/make_emojis.mjs b/webapp/channels/build/emoji/make_emojis.mjs index 64e93d2891..99a535a9ef 100755 --- a/webapp/channels/build/emoji/make_emojis.mjs +++ b/webapp/channels/build/emoji/make_emojis.mjs @@ -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; diff --git a/webapp/channels/src/components/admin_console/billing/billing_subscriptions/billing_subscriptions.scss b/webapp/channels/src/components/admin_console/billing/billing_subscriptions/billing_subscriptions.scss index 570720b149..33571b4ede 100644 --- a/webapp/channels/src/components/admin_console/billing/billing_subscriptions/billing_subscriptions.scss +++ b/webapp/channels/src/components/admin_console/billing/billing_subscriptions/billing_subscriptions.scss @@ -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); diff --git a/webapp/channels/src/components/admin_console/billing/billing_subscriptions/cloud_trial_banner.scss b/webapp/channels/src/components/admin_console/billing/billing_subscriptions/cloud_trial_banner.scss index ccec51e1d9..824a93490e 100644 --- a/webapp/channels/src/components/admin_console/billing/billing_subscriptions/cloud_trial_banner.scss +++ b/webapp/channels/src/components/admin_console/billing/billing_subscriptions/cloud_trial_banner.scss @@ -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; } diff --git a/webapp/channels/src/components/admin_console/billing/billing_subscriptions/limits.scss b/webapp/channels/src/components/admin_console/billing/billing_subscriptions/limits.scss index 83b81691dc..41a14337ce 100644 --- a/webapp/channels/src/components/admin_console/billing/billing_subscriptions/limits.scss +++ b/webapp/channels/src/components/admin_console/billing/billing_subscriptions/limits.scss @@ -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; diff --git a/webapp/channels/src/components/admin_console/billing/billing_subscriptions/to_paid_plan_nudge_banner.scss b/webapp/channels/src/components/admin_console/billing/billing_subscriptions/to_paid_plan_nudge_banner.scss index f49b2f2ab7..ecc9643291 100644 --- a/webapp/channels/src/components/admin_console/billing/billing_subscriptions/to_paid_plan_nudge_banner.scss +++ b/webapp/channels/src/components/admin_console/billing/billing_subscriptions/to_paid_plan_nudge_banner.scss @@ -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); diff --git a/webapp/channels/src/components/admin_console/billing/plan_details/plan_details.scss b/webapp/channels/src/components/admin_console/billing/plan_details/plan_details.scss index bc19766560..2a3c994277 100644 --- a/webapp/channels/src/components/admin_console/billing/plan_details/plan_details.scss +++ b/webapp/channels/src/components/admin_console/billing/plan_details/plan_details.scss @@ -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; diff --git a/webapp/channels/src/components/admin_console/data_grid/data_grid.scss b/webapp/channels/src/components/admin_console/data_grid/data_grid.scss index c5a2307b7e..9c3f5c752c 100644 --- a/webapp/channels/src/components/admin_console/data_grid/data_grid.scss +++ b/webapp/channels/src/components/admin_console/data_grid/data_grid.scss @@ -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; diff --git a/webapp/channels/src/components/admin_console/feature_discovery/feature_discovery.scss b/webapp/channels/src/components/admin_console/feature_discovery/feature_discovery.scss index c039a6438e..83f2488293 100644 --- a/webapp/channels/src/components/admin_console/feature_discovery/feature_discovery.scss +++ b/webapp/channels/src/components/admin_console/feature_discovery/feature_discovery.scss @@ -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 { diff --git a/webapp/channels/src/components/admin_console/license_settings/starter_edition/starter_edition.scss b/webapp/channels/src/components/admin_console/license_settings/starter_edition/starter_edition.scss index b8ef3a45e5..c7bea81381 100644 --- a/webapp/channels/src/components/admin_console/license_settings/starter_edition/starter_edition.scss +++ b/webapp/channels/src/components/admin_console/license_settings/starter_edition/starter_edition.scss @@ -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; } } diff --git a/webapp/channels/src/components/admin_console/license_settings/trial_license_card/trial_license_card.scss b/webapp/channels/src/components/admin_console/license_settings/trial_license_card/trial_license_card.scss index 17d3770c74..fe9fc14b4b 100644 --- a/webapp/channels/src/components/admin_console/license_settings/trial_license_card/trial_license_card.scss +++ b/webapp/channels/src/components/admin_console/license_settings/trial_license_card/trial_license_card.scss @@ -1,4 +1,4 @@ -@import 'utils/variables'; +@use 'utils/variables'; .RenewLicenseCard.TrialLicense { .TrialLicenseCard__text-title { diff --git a/webapp/channels/src/components/admin_console/openid_convert/openid_convert.scss b/webapp/channels/src/components/admin_console/openid_convert/openid_convert.scss index 8387b547b0..dbad0a747d 100644 --- a/webapp/channels/src/components/admin_console/openid_convert/openid_convert.scss +++ b/webapp/channels/src/components/admin_console/openid_convert/openid_convert.scss @@ -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 { diff --git a/webapp/channels/src/components/admin_console/system_roles/system_role/system_role_permissions.scss b/webapp/channels/src/components/admin_console/system_roles/system_role/system_role_permissions.scss index 327ccbc1da..c14d587d0b 100644 --- a/webapp/channels/src/components/admin_console/system_roles/system_role/system_role_permissions.scss +++ b/webapp/channels/src/components/admin_console/system_roles/system_role/system_role_permissions.scss @@ -1,4 +1,4 @@ -@import 'utils/variables'; +@use 'utils/variables'; #SystemRolePermissions { margin-top: 0; diff --git a/webapp/channels/src/components/admin_console/system_user_detail/team_list/abstract_list.scss b/webapp/channels/src/components/admin_console/system_user_detail/team_list/abstract_list.scss index 8ae885e5ea..1baaa909e0 100644 --- a/webapp/channels/src/components/admin_console/system_user_detail/team_list/abstract_list.scss +++ b/webapp/channels/src/components/admin_console/system_user_detail/team_list/abstract_list.scss @@ -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; } } diff --git a/webapp/channels/src/components/admin_console/system_user_detail/team_list/team_row.scss b/webapp/channels/src/components/admin_console/system_user_detail/team_list/team_row.scss index d77002c80c..6a6d218ee7 100644 --- a/webapp/channels/src/components/admin_console/system_user_detail/team_list/team_row.scss +++ b/webapp/channels/src/components/admin_console/system_user_detail/team_list/team_row.scss @@ -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; } } } diff --git a/webapp/channels/src/components/admin_console/system_users/system_users.scss b/webapp/channels/src/components/admin_console/system_users/system_users.scss index adc9595a8d..1d91a57a0a 100644 --- a/webapp/channels/src/components/admin_console/system_users/system_users.scss +++ b/webapp/channels/src/components/admin_console/system_users/system_users.scss @@ -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 diff --git a/webapp/channels/src/components/advanced_text_editor/advanced_text_editor.scss b/webapp/channels/src/components/advanced_text_editor/advanced_text_editor.scss index d282680a9d..d5ea4cba09 100644 --- a/webapp/channels/src/components/advanced_text_editor/advanced_text_editor.scss +++ b/webapp/channels/src/components/advanced_text_editor/advanced_text_editor.scss @@ -1,4 +1,4 @@ -@import 'utils/variables'; +@use 'utils/variables'; .AdvancedTextEditor__skeleton { display: flex; diff --git a/webapp/channels/src/components/announcement_bar/contact_sales/contact_us.scss b/webapp/channels/src/components/announcement_bar/contact_sales/contact_us.scss index 66a2ce5b9d..2929f56ffb 100644 --- a/webapp/channels/src/components/announcement_bar/contact_sales/contact_us.scss +++ b/webapp/channels/src/components/announcement_bar/contact_sales/contact_us.scss @@ -1,4 +1,4 @@ -@import 'utils/variables'; +@use 'utils/variables'; .contact-us { display: block; diff --git a/webapp/channels/src/components/announcement_bar/overage_users_banner/overage_users_banner.scss b/webapp/channels/src/components/announcement_bar/overage_users_banner/overage_users_banner.scss index fb235ebaab..c36988dea7 100644 --- a/webapp/channels/src/components/announcement_bar/overage_users_banner/overage_users_banner.scss +++ b/webapp/channels/src/components/announcement_bar/overage_users_banner/overage_users_banner.scss @@ -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; diff --git a/webapp/channels/src/components/announcement_bar/purchase_link/purchase_link.scss b/webapp/channels/src/components/announcement_bar/purchase_link/purchase_link.scss index 42d8b393a0..6ee247cce4 100644 --- a/webapp/channels/src/components/announcement_bar/purchase_link/purchase_link.scss +++ b/webapp/channels/src/components/announcement_bar/purchase_link/purchase_link.scss @@ -1,4 +1,4 @@ -@import 'utils/variables'; +@use 'utils/variables'; .annnouncementBar__purchaseNow { display: block; diff --git a/webapp/channels/src/components/announcement_bar/renewal_link/renew_link.scss b/webapp/channels/src/components/announcement_bar/renewal_link/renew_link.scss index 27381b035c..b65946b4bb 100644 --- a/webapp/channels/src/components/announcement_bar/renewal_link/renew_link.scss +++ b/webapp/channels/src/components/announcement_bar/renewal_link/renew_link.scss @@ -1,4 +1,4 @@ -@import 'utils/variables'; +@use 'utils/variables'; .annnouncementBar__renewLicense { display: block; diff --git a/webapp/channels/src/components/app_bar/app_bar.scss b/webapp/channels/src/components/app_bar/app_bar.scss index b3d01a5210..8b5abcf966 100644 --- a/webapp/channels/src/components/app_bar/app_bar.scss +++ b/webapp/channels/src/components/app_bar/app_bar.scss @@ -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); diff --git a/webapp/channels/src/components/backstage/components/backstage_list.scss b/webapp/channels/src/components/backstage/components/backstage_list.scss index 769812befb..ba375ac10d 100644 --- a/webapp/channels/src/components/backstage/components/backstage_list.scss +++ b/webapp/channels/src/components/backstage/components/backstage_list.scss @@ -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; diff --git a/webapp/channels/src/components/browse_channels/browse_channels.scss b/webapp/channels/src/components/browse_channels/browse_channels.scss index 64be6392c6..e6f0fd7fbc 100644 --- a/webapp/channels/src/components/browse_channels/browse_channels.scss +++ b/webapp/channels/src/components/browse_channels/browse_channels.scss @@ -1,5 +1,3 @@ -@charset 'UTF-8'; - #browseChannelsModal { .modal-dialog { margin-top: calc(45vh - 240px) !important; diff --git a/webapp/channels/src/components/category_modal.scss b/webapp/channels/src/components/category_modal.scss index e10f71c01d..9c1d73ee72 100644 --- a/webapp/channels/src/components/category_modal.scss +++ b/webapp/channels/src/components/category_modal.scss @@ -1,5 +1,3 @@ -@charset 'UTF-8'; - .edit-category__helpText { color: rgba(var(--center-channel-color-rgb), 0.75); font-size: 12px; diff --git a/webapp/channels/src/components/center_message_lock/index.scss b/webapp/channels/src/components/center_message_lock/index.scss index c201600239..684f0b94e4 100644 --- a/webapp/channels/src/components/center_message_lock/index.scss +++ b/webapp/channels/src/components/center_message_lock/index.scss @@ -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 { diff --git a/webapp/channels/src/components/choose_different_shipping/choose_different_shipping.scss b/webapp/channels/src/components/choose_different_shipping/choose_different_shipping.scss index ab86a14982..906cc95557 100644 --- a/webapp/channels/src/components/choose_different_shipping/choose_different_shipping.scss +++ b/webapp/channels/src/components/choose_different_shipping/choose_different_shipping.scss @@ -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; } diff --git a/webapp/channels/src/components/cloud_usage_modal/limit_line.scss b/webapp/channels/src/components/cloud_usage_modal/limit_line.scss index 10357b206e..b26ad15511 100644 --- a/webapp/channels/src/components/cloud_usage_modal/limit_line.scss +++ b/webapp/channels/src/components/cloud_usage_modal/limit_line.scss @@ -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; diff --git a/webapp/channels/src/components/common/multi_select_cards/multi_select_card.scss b/webapp/channels/src/components/common/multi_select_cards/multi_select_card.scss index 0a5a3fa4af..fbe9b0808b 100644 --- a/webapp/channels/src/components/common/multi_select_cards/multi_select_card.scss +++ b/webapp/channels/src/components/common/multi_select_cards/multi_select_card.scss @@ -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; } } diff --git a/webapp/channels/src/components/do_verify_email/do_verify_email.scss b/webapp/channels/src/components/do_verify_email/do_verify_email.scss index 1100cdea84..b6d1ad7b15 100644 --- a/webapp/channels/src/components/do_verify_email/do_verify_email.scss +++ b/webapp/channels/src/components/do_verify_email/do_verify_email.scss @@ -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; } } } diff --git a/webapp/channels/src/components/external_login_button/external_login_button.scss b/webapp/channels/src/components/external_login_button/external_login_button.scss index c0917b904e..6958369d05 100644 --- a/webapp/channels/src/components/external_login_button/external_login_button.scss +++ b/webapp/channels/src/components/external_login_button/external_login_button.scss @@ -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%; diff --git a/webapp/channels/src/components/feature_restricted_modal/feature_restricted_modal.scss b/webapp/channels/src/components/feature_restricted_modal/feature_restricted_modal.scss index a7ba99330d..708556105b 100644 --- a/webapp/channels/src/components/feature_restricted_modal/feature_restricted_modal.scss +++ b/webapp/channels/src/components/feature_restricted_modal/feature_restricted_modal.scss @@ -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; } } } diff --git a/webapp/channels/src/components/header_footer_route/content_layouts/alternate_link.scss b/webapp/channels/src/components/header_footer_route/content_layouts/alternate_link.scss index 48ab83cfab..9988ed0b55 100644 --- a/webapp/channels/src/components/header_footer_route/content_layouts/alternate_link.scss +++ b/webapp/channels/src/components/header_footer_route/content_layouts/alternate_link.scss @@ -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; } } diff --git a/webapp/channels/src/components/header_footer_route/footer.scss b/webapp/channels/src/components/header_footer_route/footer.scss index ef3daac03e..51f4caf563 100644 --- a/webapp/channels/src/components/header_footer_route/footer.scss +++ b/webapp/channels/src/components/header_footer_route/footer.scss @@ -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; diff --git a/webapp/channels/src/components/header_footer_route/header.scss b/webapp/channels/src/components/header_footer_route/header.scss index e7c76f9861..b25bcc4a29 100644 --- a/webapp/channels/src/components/header_footer_route/header.scss +++ b/webapp/channels/src/components/header_footer_route/header.scss @@ -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; } } diff --git a/webapp/channels/src/components/header_footer_route/header_footer_route.scss b/webapp/channels/src/components/header_footer_route/header_footer_route.scss index 133a14f101..a8e11c40a0 100644 --- a/webapp/channels/src/components/header_footer_route/header_footer_route.scss +++ b/webapp/channels/src/components/header_footer_route/header_footer_route.scss @@ -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; diff --git a/webapp/channels/src/components/info_toast/info_toast.scss b/webapp/channels/src/components/info_toast/info_toast.scss index 2c138163b0..296e09c7e1 100644 --- a/webapp/channels/src/components/info_toast/info_toast.scss +++ b/webapp/channels/src/components/info_toast/info_toast.scss @@ -1,5 +1,3 @@ -@charset 'UTF-8'; - .info-toast { position: fixed; z-index: 99; diff --git a/webapp/channels/src/components/invitation_modal/add_to_channels.scss b/webapp/channels/src/components/invitation_modal/add_to_channels.scss index 5c5a2d1471..d4a604466b 100644 --- a/webapp/channels/src/components/invitation_modal/add_to_channels.scss +++ b/webapp/channels/src/components/invitation_modal/add_to_channels.scss @@ -1,4 +1,4 @@ -@import 'utils/variables'; +@use 'utils/variables'; .AddToChannels { &__messageInput { diff --git a/webapp/channels/src/components/invitation_modal/invite_as.scss b/webapp/channels/src/components/invitation_modal/invite_as.scss index 01b28a82c5..ed2335a9bb 100644 --- a/webapp/channels/src/components/invitation_modal/invite_as.scss +++ b/webapp/channels/src/components/invitation_modal/invite_as.scss @@ -1,4 +1,4 @@ -@import 'components/toggle'; +@use 'components/toggle'; .InviteAs { &__label { diff --git a/webapp/channels/src/components/invitation_modal/invite_view.scss b/webapp/channels/src/components/invitation_modal/invite_view.scss index 5762694ed8..ff3aaaf25f 100644 --- a/webapp/channels/src/components/invitation_modal/invite_view.scss +++ b/webapp/channels/src/components/invitation_modal/invite_view.scss @@ -1,4 +1,4 @@ -@import 'utils/_mixins'; +@use 'utils/_mixins'; .InviteView { &__sectionTitle { diff --git a/webapp/channels/src/components/invitation_modal/overage_users_banner_notice/overage_users_banner_notice.scss b/webapp/channels/src/components/invitation_modal/overage_users_banner_notice/overage_users_banner_notice.scss index 553ce18269..3176119564 100644 --- a/webapp/channels/src/components/invitation_modal/overage_users_banner_notice/overage_users_banner_notice.scss +++ b/webapp/channels/src/components/invitation_modal/overage_users_banner_notice/overage_users_banner_notice.scss @@ -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; diff --git a/webapp/channels/src/components/invitation_modal/result_table.scss b/webapp/channels/src/components/invitation_modal/result_table.scss index 19bb44b860..14fb3005ea 100644 --- a/webapp/channels/src/components/invitation_modal/result_table.scss +++ b/webapp/channels/src/components/invitation_modal/result_table.scss @@ -1,4 +1,4 @@ -@import 'utils/variables'; +@use 'utils/variables'; .InviteResultTable { width: 100%; diff --git a/webapp/channels/src/components/keyboard_shortcuts/keyboard_shortcuts_modal/keyboard_shortcuts_modal.scss b/webapp/channels/src/components/keyboard_shortcuts/keyboard_shortcuts_modal/keyboard_shortcuts_modal.scss index 6051b6b265..5af78e0b2d 100644 --- a/webapp/channels/src/components/keyboard_shortcuts/keyboard_shortcuts_modal/keyboard_shortcuts_modal.scss +++ b/webapp/channels/src/components/keyboard_shortcuts/keyboard_shortcuts_modal/keyboard_shortcuts_modal.scss @@ -1,5 +1,3 @@ -@charset 'UTF-8'; - .modal { .shortcuts-modal { width: 1100px; diff --git a/webapp/channels/src/components/link_tooltip/link_tooltip.scss b/webapp/channels/src/components/link_tooltip/link_tooltip.scss index fb7bdbef60..b8ae719662 100644 --- a/webapp/channels/src/components/link_tooltip/link_tooltip.scss +++ b/webapp/channels/src/components/link_tooltip/link_tooltip.scss @@ -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 { diff --git a/webapp/channels/src/components/login/login.scss b/webapp/channels/src/components/login/login.scss index 1c8b410dca..e64aebccb4 100644 --- a/webapp/channels/src/components/login/login.scss +++ b/webapp/channels/src/components/login/login.scss @@ -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; diff --git a/webapp/channels/src/components/login/login_mfa.scss b/webapp/channels/src/components/login/login_mfa.scss index 200b1294b8..bbb2a3f840 100644 --- a/webapp/channels/src/components/login/login_mfa.scss +++ b/webapp/channels/src/components/login/login_mfa.scss @@ -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; diff --git a/webapp/channels/src/components/markdown_image_expand/markdown_image_expand.scss b/webapp/channels/src/components/markdown_image_expand/markdown_image_expand.scss index b55aec1c09..a33dca0eae 100644 --- a/webapp/channels/src/components/markdown_image_expand/markdown_image_expand.scss +++ b/webapp/channels/src/components/markdown_image_expand/markdown_image_expand.scss @@ -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; } } diff --git a/webapp/channels/src/components/no_results_indicator/no_results_indicator.scss b/webapp/channels/src/components/no_results_indicator/no_results_indicator.scss index 687415f3c4..017f1ecf96 100644 --- a/webapp/channels/src/components/no_results_indicator/no_results_indicator.scss +++ b/webapp/channels/src/components/no_results_indicator/no_results_indicator.scss @@ -1,5 +1,3 @@ -@charset 'UTF-8'; - .no-results__holder { display: grid; width: 100%; diff --git a/webapp/channels/src/components/onboarding_tasks/onboarding_video_modal/onboarding_video_modal.scss b/webapp/channels/src/components/onboarding_tasks/onboarding_video_modal/onboarding_video_modal.scss index 475221e3e1..35092642bc 100644 --- a/webapp/channels/src/components/onboarding_tasks/onboarding_video_modal/onboarding_video_modal.scss +++ b/webapp/channels/src/components/onboarding_tasks/onboarding_video_modal/onboarding_video_modal.scss @@ -1,6 +1,3 @@ - -@charset 'UTF-8'; - .on-boarding-video_modal { .modal & { width: 100%; diff --git a/webapp/channels/src/components/plugin_marketplace/marketplace_modal.scss b/webapp/channels/src/components/plugin_marketplace/marketplace_modal.scss index 68a44b3477..a5e370cc08 100644 --- a/webapp/channels/src/components/plugin_marketplace/marketplace_modal.scss +++ b/webapp/channels/src/components/plugin_marketplace/marketplace_modal.scss @@ -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; } diff --git a/webapp/channels/src/components/post_priority/post_priority_picker.scss b/webapp/channels/src/components/post_priority/post_priority_picker.scss index fa8a1ea451..3448538fec 100644 --- a/webapp/channels/src/components/post_priority/post_priority_picker.scss +++ b/webapp/channels/src/components/post_priority/post_priority_picker.scss @@ -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; } } diff --git a/webapp/channels/src/components/post_view/acknowledgements/post_acknowledgements.scss b/webapp/channels/src/components/post_view/acknowledgements/post_acknowledgements.scss index 2c4d625f49..ff5d40a607 100644 --- a/webapp/channels/src/components/post_view/acknowledgements/post_acknowledgements.scss +++ b/webapp/channels/src/components/post_view/acknowledgements/post_acknowledgements.scss @@ -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; diff --git a/webapp/channels/src/components/post_view/reaction/reaction.scss b/webapp/channels/src/components/post_view/reaction/reaction.scss index ffb4be7512..052718b81f 100644 --- a/webapp/channels/src/components/post_view/reaction/reaction.scss +++ b/webapp/channels/src/components/post_view/reaction/reaction.scss @@ -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); } } diff --git a/webapp/channels/src/components/preparing_workspace/invite_members.scss b/webapp/channels/src/components/preparing_workspace/invite_members.scss index 0e08e15974..0811d71401 100644 --- a/webapp/channels/src/components/preparing_workspace/invite_members.scss +++ b/webapp/channels/src/components/preparing_workspace/invite_members.scss @@ -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 { diff --git a/webapp/channels/src/components/preparing_workspace/invite_members_link.scss b/webapp/channels/src/components/preparing_workspace/invite_members_link.scss index 1e082a538f..9a48f51a06 100644 --- a/webapp/channels/src/components/preparing_workspace/invite_members_link.scss +++ b/webapp/channels/src/components/preparing_workspace/invite_members_link.scss @@ -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; diff --git a/webapp/channels/src/components/preparing_workspace/organization.scss b/webapp/channels/src/components/preparing_workspace/organization.scss index 8363d7920e..f31fd44fa9 100644 --- a/webapp/channels/src/components/preparing_workspace/organization.scss +++ b/webapp/channels/src/components/preparing_workspace/organization.scss @@ -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"); diff --git a/webapp/channels/src/components/preparing_workspace/plugins.scss b/webapp/channels/src/components/preparing_workspace/plugins.scss index 0a5465564e..397cde45c6 100644 --- a/webapp/channels/src/components/preparing_workspace/plugins.scss +++ b/webapp/channels/src/components/preparing_workspace/plugins.scss @@ -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"); diff --git a/webapp/channels/src/components/preparing_workspace/preparing_workspace.scss b/webapp/channels/src/components/preparing_workspace/preparing_workspace.scss index 67f355dacf..b4753c565f 100644 --- a/webapp/channels/src/components/preparing_workspace/preparing_workspace.scss +++ b/webapp/channels/src/components/preparing_workspace/preparing_workspace.scss @@ -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; diff --git a/webapp/channels/src/components/preparing_workspace/progress.scss b/webapp/channels/src/components/preparing_workspace/progress.scss index 8f52aa7e31..f102af22ac 100644 --- a/webapp/channels/src/components/preparing_workspace/progress.scss +++ b/webapp/channels/src/components/preparing_workspace/progress.scss @@ -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%); } } diff --git a/webapp/channels/src/components/product_notices_modal/product_notices_modal.scss b/webapp/channels/src/components/product_notices_modal/product_notices_modal.scss index 0e8c73d272..000d83ee8a 100644 --- a/webapp/channels/src/components/product_notices_modal/product_notices_modal.scss +++ b/webapp/channels/src/components/product_notices_modal/product_notices_modal.scss @@ -1,5 +1,3 @@ -@charset 'UTF-8'; - .productNotices { width: 692px; diff --git a/webapp/channels/src/components/profile_popover/profile_popover.scss b/webapp/channels/src/components/profile_popover/profile_popover.scss index 9e96601e68..467aff2807 100644 --- a/webapp/channels/src/components/profile_popover/profile_popover.scss +++ b/webapp/channels/src/components/profile_popover/profile_popover.scss @@ -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 { diff --git a/webapp/channels/src/components/should_verify_email/should_verify_email.scss b/webapp/channels/src/components/should_verify_email/should_verify_email.scss index 55d495d367..57ce8632f2 100644 --- a/webapp/channels/src/components/should_verify_email/should_verify_email.scss +++ b/webapp/channels/src/components/should_verify_email/should_verify_email.scss @@ -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; } } diff --git a/webapp/channels/src/components/sidebar/unread_channel_indicator/unread_channel_indicator.scss b/webapp/channels/src/components/sidebar/unread_channel_indicator/unread_channel_indicator.scss index 578a672ca1..430745a7c8 100644 --- a/webapp/channels/src/components/sidebar/unread_channel_indicator/unread_channel_indicator.scss +++ b/webapp/channels/src/components/sidebar/unread_channel_indicator/unread_channel_indicator.scss @@ -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; } diff --git a/webapp/channels/src/components/signup/signup.scss b/webapp/channels/src/components/signup/signup.scss index 5ef5326b59..511c31ae08 100644 --- a/webapp/channels/src/components/signup/signup.scss +++ b/webapp/channels/src/components/signup/signup.scss @@ -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; } } } diff --git a/webapp/channels/src/components/threading/common/button/button.scss b/webapp/channels/src/components/threading/common/button/button.scss index 5db44a19f1..4f7dbb47f1 100644 --- a/webapp/channels/src/components/threading/common/button/button.scss +++ b/webapp/channels/src/components/threading/common/button/button.scss @@ -1,4 +1,3 @@ - @mixin leveled-bg($hover, $active) { &:hover { &:not(:disabled) { diff --git a/webapp/channels/src/components/threading/global_threads/thread_item/thread_item.scss b/webapp/channels/src/components/threading/global_threads/thread_item/thread_item.scss index 1029a38809..12f22f9401 100644 --- a/webapp/channels/src/components/threading/global_threads/thread_item/thread_item.scss +++ b/webapp/channels/src/components/threading/global_threads/thread_item/thread_item.scss @@ -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 { diff --git a/webapp/channels/src/components/three_days_left_trial_modal/three_days_left_trial_modal.scss b/webapp/channels/src/components/three_days_left_trial_modal/three_days_left_trial_modal.scss index 6fdd45fa7b..067b04e016 100644 --- a/webapp/channels/src/components/three_days_left_trial_modal/three_days_left_trial_modal.scss +++ b/webapp/channels/src/components/three_days_left_trial_modal/three_days_left_trial_modal.scss @@ -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; diff --git a/webapp/channels/src/components/toast/toast.scss b/webapp/channels/src/components/toast/toast.scss index 138e966349..17e7ae9e28 100644 --- a/webapp/channels/src/components/toast/toast.scss +++ b/webapp/channels/src/components/toast/toast.scss @@ -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) { diff --git a/webapp/channels/src/components/tours/crt_tour/collapsed_reply_threads_modal.scss b/webapp/channels/src/components/tours/crt_tour/collapsed_reply_threads_modal.scss index cab701db87..9203abf021 100644 --- a/webapp/channels/src/components/tours/crt_tour/collapsed_reply_threads_modal.scss +++ b/webapp/channels/src/components/tours/crt_tour/collapsed_reply_threads_modal.scss @@ -1,6 +1,3 @@ - -@charset 'UTF-8'; - .GenericModal.CollapsedReplyThreadsModal { width: 692px; diff --git a/webapp/channels/src/components/trial_benefits_modal/trial_benefits_modal_step.scss b/webapp/channels/src/components/trial_benefits_modal/trial_benefits_modal_step.scss index d14a829d03..b42f51d337 100644 --- a/webapp/channels/src/components/trial_benefits_modal/trial_benefits_modal_step.scss +++ b/webapp/channels/src/components/trial_benefits_modal/trial_benefits_modal_step.scss @@ -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; } diff --git a/webapp/channels/src/components/user_groups_modal/user_groups_modal.scss b/webapp/channels/src/components/user_groups_modal/user_groups_modal.scss index f856e7546e..1683d9d48f 100644 --- a/webapp/channels/src/components/user_groups_modal/user_groups_modal.scss +++ b/webapp/channels/src/components/user_groups_modal/user_groups_modal.scss @@ -1,5 +1,3 @@ -@charset 'UTF-8'; - .user-groups-modal-create, .user-groups-modal-update, .view-user-groups-modal, diff --git a/webapp/channels/src/components/widgets/admin_console/admin_panel.scss b/webapp/channels/src/components/widgets/admin_console/admin_panel.scss index 1d252a7183..362facae9f 100644 --- a/webapp/channels/src/components/widgets/admin_console/admin_panel.scss +++ b/webapp/channels/src/components/widgets/admin_console/admin_panel.scss @@ -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; diff --git a/webapp/channels/src/components/widgets/inputs/channels_input.scss b/webapp/channels/src/components/widgets/inputs/channels_input.scss index aa08091e4d..264a4a574f 100644 --- a/webapp/channels/src/components/widgets/inputs/channels_input.scss +++ b/webapp/channels/src/components/widgets/inputs/channels_input.scss @@ -1,4 +1,4 @@ -@import 'utils/variables'; +@use 'utils/variables'; .ChannelsInput { &.empty { diff --git a/webapp/channels/src/components/widgets/inputs/url_input/url_input.scss b/webapp/channels/src/components/widgets/inputs/url_input/url_input.scss index 747a3b931d..49286003cf 100644 --- a/webapp/channels/src/components/widgets/inputs/url_input/url_input.scss +++ b/webapp/channels/src/components/widgets/inputs/url_input/url_input.scss @@ -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; diff --git a/webapp/channels/src/components/widgets/inputs/users_emails_input.scss b/webapp/channels/src/components/widgets/inputs/users_emails_input.scss index c5b311bdf1..7497c9f291 100644 --- a/webapp/channels/src/components/widgets/inputs/users_emails_input.scss +++ b/webapp/channels/src/components/widgets/inputs/users_emails_input.scss @@ -1,4 +1,4 @@ -@import 'utils/variables'; +@use 'utils/variables'; .UsersEmailsInput { diff --git a/webapp/channels/src/components/widgets/menu/menu_group.scss b/webapp/channels/src/components/widgets/menu/menu_group.scss index eeede817b4..1928c8c4b1 100644 --- a/webapp/channels/src/components/widgets/menu/menu_group.scss +++ b/webapp/channels/src/components/widgets/menu/menu_group.scss @@ -1,5 +1,5 @@ -@import 'utils/variables'; -@import 'utils/functions'; +@use 'utils/variables'; +@use 'utils/functions'; .MenuGroup { &.menu-divider { diff --git a/webapp/channels/src/components/widgets/menu/menu_header.scss b/webapp/channels/src/components/widgets/menu/menu_header.scss index df2d738b8f..c147d7c6d0 100644 --- a/webapp/channels/src/components/widgets/menu/menu_header.scss +++ b/webapp/channels/src/components/widgets/menu/menu_header.scss @@ -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; diff --git a/webapp/channels/src/components/widgets/menu/menu_items/menu_item.scss b/webapp/channels/src/components/widgets/menu/menu_items/menu_item.scss index 09618b9a55..d63b250fc4 100644 --- a/webapp/channels/src/components/widgets/menu/menu_items/menu_item.scss +++ b/webapp/channels/src/components/widgets/menu/menu_items/menu_item.scss @@ -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; } diff --git a/webapp/channels/src/components/widgets/menu/menu_modals/submenu_modal/submenu_modal.scss b/webapp/channels/src/components/widgets/menu/menu_modals/submenu_modal/submenu_modal.scss index 40e02be699..aa2aa37f13 100644 --- a/webapp/channels/src/components/widgets/menu/menu_modals/submenu_modal/submenu_modal.scss +++ b/webapp/channels/src/components/widgets/menu/menu_modals/submenu_modal/submenu_modal.scss @@ -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; } } } diff --git a/webapp/channels/src/components/widgets/menu/menu_wrapper.scss b/webapp/channels/src/components/widgets/menu/menu_wrapper.scss index 271fde0aae..64174f46fe 100644 --- a/webapp/channels/src/components/widgets/menu/menu_wrapper.scss +++ b/webapp/channels/src/components/widgets/menu/menu_wrapper.scss @@ -1,10 +1,10 @@ -@import 'utils/functions'; +@use 'utils/functions'; .MenuWrapper { position: relative; *:first-child { - @include unselectable; + @include functions.unselectable; } } diff --git a/webapp/channels/src/components/widgets/separator/notification-separator.scss b/webapp/channels/src/components/widgets/separator/notification-separator.scss index 15edd7897c..263dfa5c6b 100644 --- a/webapp/channels/src/components/widgets/separator/notification-separator.scss +++ b/webapp/channels/src/components/widgets/separator/notification-separator.scss @@ -1,5 +1,3 @@ -@charset 'UTF-8'; - .NotificationSeparator { .separator__hr { border-color: #ffaf53; diff --git a/webapp/channels/src/components/widgets/separator/separator.scss b/webapp/channels/src/components/widgets/separator/separator.scss index 191f734bea..efdc2c134b 100644 --- a/webapp/channels/src/components/widgets/separator/separator.scss +++ b/webapp/channels/src/components/widgets/separator/separator.scss @@ -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; diff --git a/webapp/channels/src/components/widgets/team_icon/team_icon.scss b/webapp/channels/src/components/widgets/team_icon/team_icon.scss index 2bdf0a76f9..7eabdc6bac 100644 --- a/webapp/channels/src/components/widgets/team_icon/team_icon.scss +++ b/webapp/channels/src/components/widgets/team_icon/team_icon.scss @@ -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%; } diff --git a/webapp/channels/src/sass/admin_console_base/_module.scss b/webapp/channels/src/sass/admin_console_base/_module.scss index deec3e22bd..0a82aeb157 100644 --- a/webapp/channels/src/sass/admin_console_base/_module.scss +++ b/webapp/channels/src/sass/admin_console_base/_module.scss @@ -1,2 +1,2 @@ // Only for combining all the files in this folder -@import 'sys_css_variables'; +@use 'sys_css_variables'; diff --git a/webapp/channels/src/sass/base/_module.scss b/webapp/channels/src/sass/base/_module.scss index d22cc69387..722d45c2b0 100644 --- a/webapp/channels/src/sass/base/_module.scss +++ b/webapp/channels/src/sass/base/_module.scss @@ -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'; diff --git a/webapp/channels/src/sass/base/_structure.scss b/webapp/channels/src/sass/base/_structure.scss index 17cd3c0b50..670560f6b7 100644 --- a/webapp/channels/src/sass/base/_structure.scss +++ b/webapp/channels/src/sass/base/_structure.scss @@ -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; } } } diff --git a/webapp/channels/src/sass/base/_typography.scss b/webapp/channels/src/sass/base/_typography.scss index 4f5a204e6e..40fdaba0e1 100644 --- a/webapp/channels/src/sass/base/_typography.scss +++ b/webapp/channels/src/sass/base/_typography.scss @@ -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; diff --git a/webapp/channels/src/sass/components/_admin-sidebar-header.scss b/webapp/channels/src/sass/components/_admin-sidebar-header.scss index bfb9c8ceed..1f74112d60 100644 --- a/webapp/channels/src/sass/components/_admin-sidebar-header.scss +++ b/webapp/channels/src/sass/components/_admin-sidebar-header.scss @@ -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; } diff --git a/webapp/channels/src/sass/components/_alerts.scss b/webapp/channels/src/sass/components/_alerts.scss index bf630362cf..9d99335f36 100644 --- a/webapp/channels/src/sass/components/_alerts.scss +++ b/webapp/channels/src/sass/components/_alerts.scss @@ -1,5 +1,3 @@ -@charset 'UTF-8'; - .alert { padding: 8px 12px; border-radius: var(--radius-s); diff --git a/webapp/channels/src/sass/components/_announcement-bar.scss b/webapp/channels/src/sass/components/_announcement-bar.scss index 85befaffdc..e46d468f09 100644 --- a/webapp/channels/src/sass/components/_announcement-bar.scss +++ b/webapp/channels/src/sass/components/_announcement-bar.scss @@ -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; } } diff --git a/webapp/channels/src/sass/components/_buttons.scss b/webapp/channels/src/sass/components/_buttons.scss index 705ff8a2a9..9847d88f1c 100644 --- a/webapp/channels/src/sass/components/_buttons.scss +++ b/webapp/channels/src/sass/components/_buttons.scss @@ -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; -} diff --git a/webapp/channels/src/sass/components/_channel-header__icon.scss b/webapp/channels/src/sass/components/_channel-header__icon.scss index 396074b383..14ff30be6d 100644 --- a/webapp/channels/src/sass/components/_channel-header__icon.scss +++ b/webapp/channels/src/sass/components/_channel-header__icon.scss @@ -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 { diff --git a/webapp/channels/src/sass/components/_channel-invite-modal.scss b/webapp/channels/src/sass/components/_channel-invite-modal.scss index b214a115ad..c4aa66f2b5 100644 --- a/webapp/channels/src/sass/components/_channel-invite-modal.scss +++ b/webapp/channels/src/sass/components/_channel-invite-modal.scss @@ -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 { diff --git a/webapp/channels/src/sass/components/_channel-switcher.scss b/webapp/channels/src/sass/components/_channel-switcher.scss index e6728f74fa..73fdc74899 100644 --- a/webapp/channels/src/sass/components/_channel-switcher.scss +++ b/webapp/channels/src/sass/components/_channel-switcher.scss @@ -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); } } diff --git a/webapp/channels/src/sass/components/_color-input.scss b/webapp/channels/src/sass/components/_color-input.scss index 7fcdcd2116..a804483f5e 100644 --- a/webapp/channels/src/sass/components/_color-input.scss +++ b/webapp/channels/src/sass/components/_color-input.scss @@ -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; } diff --git a/webapp/channels/src/sass/components/_day-picker.scss b/webapp/channels/src/sass/components/_day-picker.scss index 476ed6d593..55b66b8888 100644 --- a/webapp/channels/src/sass/components/_day-picker.scss +++ b/webapp/channels/src/sass/components/_day-picker.scss @@ -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; diff --git a/webapp/channels/src/sass/components/_dropdown.scss b/webapp/channels/src/sass/components/_dropdown.scss index ca81b1edfa..6a43c54051 100644 --- a/webapp/channels/src/sass/components/_dropdown.scss +++ b/webapp/channels/src/sass/components/_dropdown.scss @@ -1,5 +1,3 @@ -@charset "utf-8"; - .dropdown-menu { border-radius: 4px; background: var(--center-channel-bg); diff --git a/webapp/channels/src/sass/components/_edit-post-time-limit-button.scss b/webapp/channels/src/sass/components/_edit-post-time-limit-button.scss index fe6ef929ba..52cd77afc1 100644 --- a/webapp/channels/src/sass/components/_edit-post-time-limit-button.scss +++ b/webapp/channels/src/sass/components/_edit-post-time-limit-button.scss @@ -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; } } diff --git a/webapp/channels/src/sass/components/_emoji-picker-tabs.scss b/webapp/channels/src/sass/components/_emoji-picker-tabs.scss index 86e451d56e..13d0f592e5 100644 --- a/webapp/channels/src/sass/components/_emoji-picker-tabs.scss +++ b/webapp/channels/src/sass/components/_emoji-picker-tabs.scss @@ -1,5 +1,3 @@ -@charset "UTF-8"; - .emoji-picker { pointer-events: auto; diff --git a/webapp/channels/src/sass/components/_emojisprite.scss b/webapp/channels/src/sass/components/_emojisprite.scss index 87b88082cb..483efaa469 100644 --- a/webapp/channels/src/sass/components/_emojisprite.scss +++ b/webapp/channels/src/sass/components/_emojisprite.scss @@ -1,6 +1,3 @@ - -@charset "UTF-8"; - .emojisprite-preview { width: 66px; max-width: none; diff --git a/webapp/channels/src/sass/components/_emoticons.scss b/webapp/channels/src/sass/components/_emoticons.scss index b9c822ee07..860496f815 100644 --- a/webapp/channels/src/sass/components/_emoticons.scss +++ b/webapp/channels/src/sass/components/_emoticons.scss @@ -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); } } diff --git a/webapp/channels/src/sass/components/_files.scss b/webapp/channels/src/sass/components/_files.scss index 7988116bc0..8073105022 100644 --- a/webapp/channels/src/sass/components/_files.scss +++ b/webapp/channels/src/sass/components/_files.scss @@ -1,4 +1,6 @@ -@charset 'UTF-8'; +@use "utils/functions"; +@use "utils/mixins"; +@use "utils/variables"; .file-preview__container { position: relative; @@ -16,7 +18,7 @@ } .file-preview { - @include clearfix; + @include mixins.clearfix; position: relative; display: inline-block; @@ -24,7 +26,7 @@ height: 100px; flex-shrink: 0; flex-wrap: nowrap; - border: 1px solid $light-gray; + border: 1px solid variables.$light-gray; margin-right: 10px; .spinner { @@ -49,23 +51,23 @@ align-items: center; justify-content: center; border-radius: 4px; - color: rgba(v(center-channel-color-rgb), 0.75); + color: rgba(functions.v(center-channel-color-rgb), 0.75); font-size: 1.4rem; text-align: center; text-decoration: none; &:focus { - 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 { background: rgba(var(--button-bg-rgb), 0.08); - color: v(button-bg); + color: functions.v(button-bg); } } } @@ -82,48 +84,48 @@ height: 100%; &.text { - @include file-icon('../images/icons/text.svg'); + @include mixins.file-icon('../images/icons/text.svg'); } &.audio { - @include file-icon('../images/icons/audio.svg'); + @include mixins.file-icon('../images/icons/audio.svg'); } &.video { - @include file-icon('../images/icons/video.svg'); + @include mixins.file-icon('../images/icons/video.svg'); } &.ppt { - @include file-icon('../images/icons/ppt.svg'); + @include mixins.file-icon('../images/icons/ppt.svg'); } &.generic, &.other { - @include file-icon('../images/icons/generic.svg'); + @include mixins.file-icon('../images/icons/generic.svg'); } &.code { - @include file-icon('../images/icons/code.svg'); + @include mixins.file-icon('../images/icons/code.svg'); } &.excel { - @include file-icon('../images/icons/excel.svg'); + @include mixins.file-icon('../images/icons/excel.svg'); } &.word { - @include file-icon('../images/icons/word.svg'); + @include mixins.file-icon('../images/icons/word.svg'); } &.pdf { - @include file-icon('../images/icons/pdf.svg'); + @include mixins.file-icon('../images/icons/pdf.svg'); } &.patch { - @include file-icon('../images/icons/patch.svg'); + @include mixins.file-icon('../images/icons/patch.svg'); } &.image { - @include file-icon('../images/icons/image.svg'); + @include mixins.file-icon('../images/icons/image.svg'); } } @@ -152,7 +154,7 @@ } .file__image { - @include pie-clearfix; + @include mixins.pie-clearfix; .image-header { display: flex; @@ -163,7 +165,7 @@ display: inline-block; overflow: hidden; margin: -4px 0 0 0; - color: rgba(v(center-channel-color-rgb), 0.75); + color: rgba(functions.v(center-channel-color-rgb), 0.75); cursor: pointer; font-size: 12px; text-overflow: ellipsis; @@ -175,7 +177,7 @@ } .image-container { - @include pie-clearfix; + @include mixins.pie-clearfix; position: relative; width: 100%; @@ -247,7 +249,7 @@ } &:hover { - box-shadow: 0 2px 5px 0 rgba($black, 0.1), 0 2px 10px 0 rgba($black, 0.1); + box-shadow: 0 2px 5px 0 rgba(variables.$black, 0.1), 0 2px 10px 0 rgba(variables.$black, 0.1); } &.min-preview { @@ -279,7 +281,7 @@ height: inherit; &:hover { - box-shadow: 0 2px 5px 0 rgba($black, 0.1), 0 2px 10px 0 rgba($black, 0.1); + box-shadow: 0 2px 5px 0 rgba(variables.$black, 0.1), 0 2px 10px 0 rgba(variables.$black, 0.1); } } } @@ -331,11 +333,11 @@ max-width: 100%; height: 6.4rem; align-items: center; - border: 1px solid rgba(v(center-channel-color-rgb), 0.16); + border: 1px solid rgba(functions.v(center-channel-color-rgb), 0.16); border-radius: 4px; margin: 4px 12px 4px 0; - background: v(center-channel-bg); - color: v(center-channel-color); + background: functions.v(center-channel-bg); + color: functions.v(center-channel-color); cursor: pointer; transition: box-shadow 0.15s ease; @@ -351,7 +353,7 @@ &:focus-within, &.keep-open { overflow: visible; - box-shadow: 0 2px 3px 0 rgba($black, 0.1), 0 2px 3px 0 rgba($black, 0.1); + box-shadow: 0 2px 3px 0 rgba(variables.$black, 0.1), 0 2px 3px 0 rgba(variables.$black, 0.1); .file-dropdown-icon { display: flex; @@ -363,7 +365,7 @@ } &:hover { - box-shadow: $elevation-1; + box-shadow: variables.$elevation-1; .post-image__download { opacity: 1; @@ -410,7 +412,7 @@ width: 4rem; height: 4rem; border-radius: 4px; - background-color: $white; + background-color: variables.$white; background-repeat: no-repeat; background-size: cover; text-align: center; @@ -448,7 +450,7 @@ } .post-image__thumbnail { - @include cursor(zoom-in); + @include mixins.cursor(zoom-in); z-index: 1; display: flex; @@ -607,22 +609,22 @@ align-items: center; justify-content: center; border-radius: 4px; - color: rgba(v(center-channel-color-rgb), 0.75); + color: rgba(functions.v(center-channel-color-rgb), 0.75); font-size: 1.6rem; text-decoration: none; &:focus { - 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 { background: rgba(var(--button-bg-rgb), 0.08); - color: v(button-bg); + color: functions.v(button-bg); } } @@ -665,13 +667,13 @@ } .post-image__uploadingTxt { - color: rgba(v(center-channel-color-rgb), 0.75); + color: rgba(functions.v(center-channel-color-rgb), 0.75); } } .file-details__container { display: flex; - background: $white; + background: variables.$white; .file-details { width: 320px; @@ -682,20 +684,20 @@ .file-details__name { margin: 5px 0; - color: alpha-color($black, 0.9); + color: functions.alpha-color(variables.$black, 0.9); font-size: 16px; word-break: break-word; } .file-details__info { - color: alpha-color($black, 0.5); + color: functions.alpha-color(variables.$black, 0.5); } } .file-details__preview { width: 320px; height: 270px; - border-right: 1px solid $light-gray; + border-right: 1px solid variables.$light-gray; vertical-align: center; img { @@ -740,10 +742,10 @@ align-items: center; justify-content: center; padding-top: 28px; - background: $black; + background: variables.$black; .fa { - color: $white; + color: variables.$white; font-size: 20px; opacity: 0.73; } @@ -776,7 +778,7 @@ &:hover { z-index: 2; - box-shadow: 0 2px 5px 0 rgba($black, 0.1), 0 2px 5px 0 rgba($black, 0.1); + box-shadow: 0 2px 5px 0 rgba(variables.$black, 0.1), 0 2px 5px 0 rgba(variables.$black, 0.1); transition: all 0.1s linear; } diff --git a/webapp/channels/src/sass/components/_forms.scss b/webapp/channels/src/sass/components/_forms.scss index fdb0740c9b..60c0fab87d 100644 --- a/webapp/channels/src/sass/components/_forms.scss +++ b/webapp/channels/src/sass/components/_forms.scss @@ -1,4 +1,5 @@ -@charset 'UTF-8'; +@use "utils/functions"; +@use "utils/variables"; @use 'sass:color'; @@ -47,7 +48,7 @@ } &.error { - color: color.adjust($red, $lightness: -20%); + color: color.adjust(variables.$red, $lightness: -20%); } } @@ -86,7 +87,7 @@ .help-block { margin: 10px 0 0; - color: $dark-gray; + color: variables.$dark-gray; font-size: 0.95em; } @@ -105,7 +106,7 @@ .checkbox, .radio-inline, .checkbox-inline { - color: $red; + color: variables.$red; } .form__label { @@ -119,7 +120,7 @@ &.radio-inline, &.checkbox-inline { label { - color: $red; + color: variables.$red; } } } @@ -166,9 +167,9 @@ .form-control { border-color: rgba(var(--center-channel-color-rgb), 0.16); border-radius: 4px; - background: v(center-channel-bg); + background: functions.v(center-channel-bg); box-shadow: none; - color: v(center-channel-color); + color: functions.v(center-channel-color); &:focus { border-color: rgba(var(--button-bg-rgb), 1); diff --git a/webapp/channels/src/sass/components/_groups.scss b/webapp/channels/src/sass/components/_groups.scss index 4de5420c1e..57c418eb20 100644 --- a/webapp/channels/src/sass/components/_groups.scss +++ b/webapp/channels/src/sass/components/_groups.scss @@ -1,3 +1,6 @@ +@use "utils/functions"; +@use "utils/variables"; + @use 'sass:color'; #ldap_groups { @@ -16,7 +19,7 @@ position: relative; display: flex; padding: 8px 20px; - background: $white; + background: variables.$white; .group-list-search { position: relative; @@ -27,7 +30,7 @@ border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 15px; margin-top: 2px; - stroke: $dark-gray; + stroke: variables.$dark-gray; input { width: 100%; @@ -83,7 +86,7 @@ display: inline-block; width: 18px; height: 18px; - border: 2px solid $dark-gray; + border: 2px solid variables.$dark-gray; border-radius: 3px; margin-right: 7px; vertical-align: middle; @@ -92,8 +95,8 @@ border: 0; svg { - background: $white; - fill: $primary-color; + background: variables.$white; + fill: variables.$primary-color; } } } @@ -115,7 +118,7 @@ .group-description { display: block; width: 150px; - color: $black; + color: variables.$black; opacity: 1; &.adjusted { @@ -129,7 +132,7 @@ } .groups-list--body { - background: $bg--gray; + background: variables.$bg--gray; cursor: pointer; .groups-list-loading { @@ -139,8 +142,8 @@ .groups-list-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; @@ -161,10 +164,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; @@ -173,7 +176,7 @@ .counter { margin-bottom: 2px; - color: $dark-gray; + color: variables.$dark-gray; font-size: 1.1em; } } @@ -184,7 +187,7 @@ min-height: 18px; align-items: center; justify-content: space-around; - border: 2px solid $dark-gray; + border: 2px solid variables.$dark-gray; border-radius: 3px; margin: 5px 5px 4px 14px; @@ -192,8 +195,8 @@ border: 0; svg { - background: $white; - fill: $primary-color; + background: variables.$white; + fill: variables.$primary-color; } } } @@ -233,16 +236,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; } } } @@ -264,7 +267,7 @@ .group { &.checked { - background-color: color.adjust($primary-color, $lightness: 40%); + background-color: color.adjust(variables.$primary-color, $lightness: 40%); .group-description { opacity: 1; @@ -272,11 +275,11 @@ } &:nth-child(even) { - background: alpha-color($white, 0.5); + background: functions.alpha-color(variables.$white, 0.5); } &.checked:nth-child(even) { - background-color: color.adjust($primary-color, $lightness: 40%); + background-color: color.adjust(variables.$primary-color, $lightness: 40%); } .group-row { @@ -293,11 +296,11 @@ height: 34px; flex-direction: row; align-items: center; - border: 2px solid $transparent; + border: 2px solid variables.$transparent; &: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%); .group-description { opacity: 1; @@ -343,10 +346,10 @@ .group-users--header { padding: 10px 20px; background: #333; - color: $white; + color: variables.$white; a { - color: $white; + color: variables.$white; text-decoration: underline; } } @@ -360,7 +363,7 @@ display: none; width: 100%; height: 100%; - background: $light-gray; + background: variables.$light-gray; text-align: center; &.active { @@ -376,15 +379,15 @@ .group-users-empty { padding: 20px; - background: alpha-color($white, 0.5); - color: $gray; + background: functions.alpha-color(variables.$white, 0.5); + color: variables.$gray; font-size: 1.5em; text-align: center; } .group-users-row { &:nth-child(even) { - background: alpha-color($white, 0.5); + background: functions.alpha-color(variables.$white, 0.5); } display: flex; @@ -407,7 +410,7 @@ .display-name, .email { - color: $gray; + color: variables.$gray; } } @@ -424,7 +427,7 @@ justify-content: flex-end; padding: 5px; margin: 0 15px 15px 15px; - background: $white; + background: variables.$white; &.empty { height: 0; @@ -433,7 +436,7 @@ } .btn-tertiary { - color: $dark-gray; + color: variables.$dark-gray; &.disabled { opacity: 0.5; @@ -442,7 +445,7 @@ .counter { margin-bottom: 2px; - color: $dark-gray; + color: variables.$dark-gray; font-size: 1.1em; } } @@ -462,12 +465,12 @@ } padding: 6px 20px; - border-bottom: solid 1px alpha-color(#ccc, 0.75); + border-bottom: solid 1px functions.alpha-color(#ccc, 0.75); } tr { &:not(:last-child) { - border-bottom: solid 1px alpha-color(#ccc, 0.75); + border-bottom: solid 1px functions.alpha-color(#ccc, 0.75); } &:last-child { @@ -495,7 +498,7 @@ width: 18px; height: 18px; padding: 0; - border: 2px solid $dark-gray; + border: 2px solid variables.$dark-gray; border-radius: 3px; background: none; @@ -504,7 +507,7 @@ } &.disabled { - border-color: $light-gray; + border-color: variables.$light-gray; } &.checked { @@ -527,8 +530,8 @@ .group-teams-and-channels-empty { padding: 20px; - background: alpha-color($white, 0.5); - color: $gray; + background: functions.alpha-color(variables.$white, 0.5); + color: variables.$gray; font-size: 1.5em; text-align: center; } @@ -549,7 +552,7 @@ .group-teams-and-channels-row { &:nth-child(even) { - background: alpha-color($white, 0.5); + background: functions.alpha-color(variables.$white, 0.5); } .team-icon, @@ -626,7 +629,7 @@ .teams-list--header { display: flex; justify-content: space-between; - border-bottom: 1px solid $dark-gray; + border-bottom: 1px solid variables.$dark-gray; font-size: 1.1em; font-weight: bold; } @@ -654,14 +657,14 @@ top: 33px; width: 100%; padding: 5px 8px; - border: 1px solid $gray; + border: 1px solid variables.$gray; border-radius: 2px; - background: $white; + background: variables.$white; a { display: block; padding: 7px; - color: $dark-gray; + color: variables.$dark-gray; } } } diff --git a/webapp/channels/src/sass/components/_icons.scss b/webapp/channels/src/sass/components/_icons.scss index 2957a8b652..a3511633dd 100644 --- a/webapp/channels/src/sass/components/_icons.scss +++ b/webapp/channels/src/sass/components/_icons.scss @@ -1,5 +1,3 @@ -@charset 'UTF-8'; - .icon { display: inline-flex; align-items: center; diff --git a/webapp/channels/src/sass/components/_infinite-scroll.scss b/webapp/channels/src/sass/components/_infinite-scroll.scss index 5852c7eed1..abdc36b4cb 100644 --- a/webapp/channels/src/sass/components/_infinite-scroll.scss +++ b/webapp/channels/src/sass/components/_infinite-scroll.scss @@ -1,5 +1,3 @@ -@charset 'UTF-8'; - .infinite-scroll { width: 100%; overflow-x: hidden; diff --git a/webapp/channels/src/sass/components/_inputs.scss b/webapp/channels/src/sass/components/_inputs.scss index 9ba0fa9b3b..ca47e635a8 100644 --- a/webapp/channels/src/sass/components/_inputs.scss +++ b/webapp/channels/src/sass/components/_inputs.scss @@ -1,4 +1,5 @@ -@charset 'UTF-8'; +@use "utils/mixins"; +@use "utils/variables"; .help-text { display: block; @@ -48,7 +49,7 @@ &[disabled], [readonly] { - @include alpha-property(background, $white, 0.1); + @include mixins.alpha-property(background, variables.$white, 0.1); color: inherit; cursor: auto; @@ -58,7 +59,7 @@ fieldset { &[disabled] { .form-control { - @include alpha-property(background, $white, 0.1); + @include mixins.alpha-property(background, variables.$white, 0.1); color: inherit; cursor: auto; @@ -121,7 +122,7 @@ input::-webkit-file-upload-button { cursor: pointer; &:read-only { - background-color: $white; + background-color: variables.$white; } } } diff --git a/webapp/channels/src/sass/components/_line-switch.scss b/webapp/channels/src/sass/components/_line-switch.scss index 6a73de7599..184545e28d 100644 --- a/webapp/channels/src/sass/components/_line-switch.scss +++ b/webapp/channels/src/sass/components/_line-switch.scss @@ -1,5 +1,3 @@ -@charset 'UTF-8'; - .line-switch { justify-content: space-between; } diff --git a/webapp/channels/src/sass/components/_links.scss b/webapp/channels/src/sass/components/_links.scss index 489d049450..89f23dd0ec 100644 --- a/webapp/channels/src/sass/components/_links.scss +++ b/webapp/channels/src/sass/components/_links.scss @@ -1,16 +1,16 @@ -@charset 'UTF-8'; +@use "utils/variables"; @use 'sass:color'; a { - color: $primary-color; + color: variables.$primary-color; cursor: pointer; text-decoration: none; word-break: break-word; &:hover, &:focus { - color: $primary-color--hover; + color: variables.$primary-color--hover; outline: 0; } } @@ -31,10 +31,10 @@ button.style--link { } .text-danger { - color: color.adjust($red, $saturation: -20%); + color: color.adjust(variables.$red, $saturation: -20%); &:hover, &:focus { - color: color.adjust($red, $saturation: -20%); + color: color.adjust(variables.$red, $saturation: -20%); } } diff --git a/webapp/channels/src/sass/components/_mentions.scss b/webapp/channels/src/sass/components/_mentions.scss index 4d82b5b40d..3e5bb16f49 100644 --- a/webapp/channels/src/sass/components/_mentions.scss +++ b/webapp/channels/src/sass/components/_mentions.scss @@ -1,4 +1,4 @@ -@charset 'UTF-8'; +@use "utils/variables"; del .mention-link, del .group-mention-link { @@ -17,8 +17,8 @@ del .group-mention-link:focus { z-index: 10; padding-bottom: 2px; border-radius: 3px; - background: $primary-color; - color: $white; + background: variables.$primary-color; + color: variables.$white; } .badge { diff --git a/webapp/channels/src/sass/components/_modal.scss b/webapp/channels/src/sass/components/_modal.scss index d640a9e719..ecc4b9368e 100644 --- a/webapp/channels/src/sass/components/_modal.scss +++ b/webapp/channels/src/sass/components/_modal.scss @@ -1,4 +1,6 @@ -@charset "utf-8"; +@use "utils/functions"; +@use "utils/mixins"; +@use "utils/variables"; @use 'sass:color'; @@ -116,7 +118,7 @@ .modal__error { margin-top: 6px; - color: $red; + color: variables.$red; float: left; font-size: 0.95em; font-weight: normal; @@ -129,7 +131,7 @@ .modal { width: 100%; - color: v(center-channel-color); + color: functions.v(center-channel-color); .modal--overflow { .modal-body { @@ -213,7 +215,7 @@ line-height: 0; &:hover { - color: $red; + color: variables.$red; } } @@ -304,13 +306,13 @@ &:active { background: rgba(var(--button-bg-rgb), 0.08); - color: v(button-bg); + color: functions.v(button-bg); } .modal-title { width: 100%; background: transparent; - color: v(center-channel-color); + color: functions.v(center-channel-color); font-size: 22px; line-height: 28px; } @@ -319,7 +321,7 @@ .modal-title { width: 100%; background: transparent; - color: v(center-channel-color); + color: functions.v(center-channel-color); font-size: 22px; line-height: 28px; word-break: break-word; @@ -362,7 +364,7 @@ margin: 0 auto; .modal-body { - @include clearfix; + @include mixins.clearfix; display: table; width: 100%; @@ -547,7 +549,7 @@ height: 100%; padding: 0; border: none; - background: alpha-color($black, 0); + background: functions.alpha-color(variables.$black, 0); box-shadow: none; } @@ -564,7 +566,7 @@ display: block; height: 20px; margin-top: 12px; - color: alpha-color($white, 0.8); + color: functions.alpha-color(variables.$white, 0.8); } .modal-button-bar { @@ -573,7 +575,7 @@ max-width: 100%; justify-content: center; padding: 0 10px; - background-color: $black; + background-color: variables.$black; line-height: 40px; .modal-bar-file-count { @@ -587,7 +589,7 @@ .text { bottom: 0; margin-left: 5px; - color: $white; + color: variables.$white; vertical-align: middle; } @@ -863,7 +865,7 @@ min-height: 65px; align-items: center; padding: 10px 32px; - border-top: 1px solid $light-gray; + border-top: 1px solid variables.$light-gray; &.clickable { cursor: pointer; @@ -1020,7 +1022,7 @@ .team-name { padding-left: 5px; - color: $gray; + color: variables.$gray; } .icon__lock, @@ -1037,7 +1039,7 @@ } .more-modal__row--selected { - background-color: color.adjust($primary-color, $lightness: 40%); + background-color: color.adjust(variables.$primary-color, $lightness: 40%); .more-modal__actions--round { display: block; @@ -1047,7 +1049,7 @@ .no-channel-message { width: 100%; margin-top: 40px; - color: $gray; + color: variables.$gray; font-size: 1.25em; text-align: center; } @@ -1060,7 +1062,7 @@ .filter-control { border: none; background: none; - color: $primary-color; + color: variables.$primary-color; &:hover, &:focus, @@ -1068,7 +1070,7 @@ border: none; background: none; box-shadow: none; - color: $primary-color; + color: variables.$primary-color; } } } diff --git a/webapp/channels/src/sass/components/_module.scss b/webapp/channels/src/sass/components/_module.scss index a4e7f6bcbc..54896e2fd2 100644 --- a/webapp/channels/src/sass/components/_module.scss +++ b/webapp/channels/src/sass/components/_module.scss @@ -1,54 +1,54 @@ // Only for combining all the files in this folder -@import 'forms'; -@import 'alerts'; -@import 'announcement-bar'; -@import 'badge'; -@import 'buttons'; -@import 'action-button'; -@import 'channel-header__icon'; -@import 'channel-invite-modal'; -@import 'channel-switcher'; -@import 'dropdown'; -@import 'emoticons'; -@import 'emojisprite'; -@import 'emoji-picker-tabs'; -@import 'files'; -@import 'icons'; -@import 'inputs'; -@import 'links'; -@import 'mentions'; -@import 'modal'; -@import 'settings-modal'; -@import 'multi-select'; -@import 'oauth'; -@import 'popover'; -@import 'post'; -@import 'post-menu'; -@import 'post-right'; -@import 'react-select'; -@import 'remove-image'; -@import 'save-button'; -@import 'scrollbar'; -@import 'search'; -@import 'status-icon'; -@import 'suggestion-list'; -@import 'tooltip'; -@import 'videos'; -@import 'color-input'; -@import 'system-notice'; -@import 'permissions'; -@import 'edit-post-time-limit-button'; -@import 'edit-post-time-limit-modal'; -@import 'day-picker'; -@import 'groups'; -@import 'select'; -@import 'admin-sidebar-header'; -@import 'sidebar-card'; -@import 'sidebar-header-dropdown-button'; -@import 'single_image_view'; -@import 'sidebar-header'; -@import 'toggle'; -@import 'team-channel-settings'; -@import 'infinite-scroll'; -@import 'line-switch'; -@import 'apps-modal'; +@use 'forms'; +@use 'alerts'; +@use 'announcement-bar'; +@use 'badge'; +@use 'buttons'; +@use 'action-button'; +@use 'channel-header__icon'; +@use 'channel-invite-modal'; +@use 'channel-switcher'; +@use 'dropdown'; +@use 'emoticons'; +@use 'emojisprite'; +@use 'emoji-picker-tabs'; +@use 'files'; +@use 'icons'; +@use 'inputs'; +@use 'links'; +@use 'mentions'; +@use 'modal'; +@use 'settings-modal'; +@use 'multi-select'; +@use 'oauth'; +@use 'popover'; +@use 'post'; +@use 'post-menu'; +@use 'post-right'; +@use 'react-select'; +@use 'remove-image'; +@use 'save-button'; +@use 'scrollbar'; +@use 'search'; +@use 'status-icon'; +@use 'suggestion-list'; +@use 'tooltip'; +@use 'videos'; +@use 'color-input'; +@use 'system-notice'; +@use 'permissions'; +@use 'edit-post-time-limit-button'; +@use 'edit-post-time-limit-modal'; +@use 'day-picker'; +@use 'groups'; +@use 'select'; +@use 'admin-sidebar-header'; +@use 'sidebar-card'; +@use 'sidebar-header-dropdown-button'; +@use 'single_image_view'; +@use 'sidebar-header'; +@use 'toggle'; +@use 'team-channel-settings'; +@use 'infinite-scroll'; +@use 'line-switch'; +@use 'apps-modal'; diff --git a/webapp/channels/src/sass/components/_multi-select.scss b/webapp/channels/src/sass/components/_multi-select.scss index c32121816a..c16acec4e5 100644 --- a/webapp/channels/src/sass/components/_multi-select.scss +++ b/webapp/channels/src/sass/components/_multi-select.scss @@ -1,5 +1,3 @@ -@charset 'UTF-8'; - .multi-select__container { display: flex; width: 100%; diff --git a/webapp/channels/src/sass/components/_oauth.scss b/webapp/channels/src/sass/components/_oauth.scss index 840fd65d62..652fe442e2 100644 --- a/webapp/channels/src/sass/components/_oauth.scss +++ b/webapp/channels/src/sass/components/_oauth.scss @@ -1,18 +1,19 @@ -@charset 'UTF-8'; +@use "utils/functions"; +@use "utils/variables"; .prompt { width: 600px; max-width: 90%; padding: 1em 2em 0; - border: 1px solid $light-gray; + border: 1px solid variables.$light-gray; margin: 50px auto; - background: $white; + background: variables.$white; .prompt__heading { display: table; width: 100%; margin: 1em 0; - font-size: em(18px); + font-size: functions.em(18px); line-height: normal; table-layout: fixed; @@ -32,12 +33,12 @@ .prompt__allow { margin: 1em 0; - font-size: em(20px); + font-size: functions.em(20px); } .prompt__buttons { padding: 1.5em 0; - border-top: 1px solid $light-gray; + border-top: 1px solid variables.$light-gray; text-align: right; } diff --git a/webapp/channels/src/sass/components/_permissions.scss b/webapp/channels/src/sass/components/_permissions.scss index 84fd87e97a..67008b7519 100644 --- a/webapp/channels/src/sass/components/_permissions.scss +++ b/webapp/channels/src/sass/components/_permissions.scss @@ -1,8 +1,11 @@ +@use "utils/functions"; +@use "utils/variables"; + @use 'sass:color'; @keyframes rowhighlight { 0% { - background-color: $transparent; + background-color: variables.$transparent; } 20% { @@ -14,7 +17,7 @@ } 100% { - background-color: $transparent; + background-color: variables.$transparent; } } @@ -38,7 +41,7 @@ padding: 20px; margin: 20px; background: rgba(255, 255, 255, 0.5); - color: $gray; + color: variables.$gray; font-size: 16px; text-align: center; } @@ -50,7 +53,7 @@ .team-override-unavailable__inner { padding: 20px; - background-color: $white; + background-color: variables.$white; } } @@ -113,14 +116,14 @@ .permission-description { display: block; width: 100%; - color: $black; + color: variables.$black; opacity: 1; } } .permissions-tree--body { - background-color: $bg--gray; - background-image: linear-gradient(transparent 50%, alpha-color($white, 0.5) 50%); + background-color: variables.$bg--gray; + background-image: linear-gradient(transparent 50%, functions.alpha-color(variables.$white, 0.5) 50%); background-size: 68px 68px; cursor: pointer; } @@ -148,7 +151,7 @@ min-height: 18px; align-items: center; justify-content: space-around; - border: 2px solid $dark-gray; + border: 2px solid variables.$dark-gray; border-radius: 3px; margin-right: 5px; @@ -157,8 +160,8 @@ border: 0; svg { - background: $white; - fill: $primary-color; + background: variables.$white; + fill: variables.$primary-color; } } } @@ -253,11 +256,11 @@ height: 34px; flex-direction: row; align-items: center; - border: 2px solid $transparent; + border: 2px solid variables.$transparent; &:hover { - border-left: 2px solid $primary-color; - background-color: color.adjust($primary-color, $lightness: 40%); + border-left: 2px solid variables.$primary-color; + background-color: color.adjust(variables.$primary-color, $lightness: 40%); .permission-description { opacity: 1; @@ -272,13 +275,13 @@ &.read-only { .permission-check { border: none; - background-color: $gray; + background-color: variables.$gray; &.checked, &.intermediate { svg { - background: $white; - fill: $gray; + background: variables.$white; + fill: variables.$gray; } } } @@ -288,7 +291,7 @@ .permissions-scheme-summary { padding: 10px 20px 0 20px; - border-left: 2px solid $transparent; + border-left: 2px solid variables.$transparent; margin: 0 20px; cursor: pointer; @@ -305,8 +308,8 @@ } &:hover { - border-left: 2px solid $primary-color; - background-color: color.adjust($primary-color, $lightness: 40%); + border-left: 2px solid variables.$primary-color; + background-color: color.adjust(variables.$primary-color, $lightness: 40%); } .permissions-scheme-summary--header { @@ -343,7 +346,7 @@ margin-right: 10px; margin-bottom: 10px; background: rgba(0, 0, 0, 0.05); - color: alpha-color($black, 0.75); + color: functions.alpha-color(variables.$black, 0.75); font-size: 11px; } } @@ -357,7 +360,7 @@ } .permission-scheme-summary-error-message { - color: $red; + color: variables.$red; } .team-scheme-details { diff --git a/webapp/channels/src/sass/components/_popover.scss b/webapp/channels/src/sass/components/_popover.scss index a4969e5522..7982493251 100644 --- a/webapp/channels/src/sass/components/_popover.scss +++ b/webapp/channels/src/sass/components/_popover.scss @@ -1,4 +1,4 @@ -@charset "utf-8"; +@use "utils/functions"; .header-popover-text-measurer { position: absolute; @@ -231,7 +231,7 @@ text-transform: uppercase; span { - background: v(center-channel-bg); + background: functions.v(center-channel-bg); } &:first-child { @@ -280,7 +280,7 @@ } &::-webkit-scrollbar-thumb { - border: 1px solid v(center-channel-bg); + border: 1px solid functions.v(center-channel-bg); border-radius: 4px; background-color: rgba(var(--center-channel-color-rgb), 0.24) !important; } diff --git a/webapp/channels/src/sass/components/_post-menu.scss b/webapp/channels/src/sass/components/_post-menu.scss index 48b64946f7..f262a46f59 100644 --- a/webapp/channels/src/sass/components/_post-menu.scss +++ b/webapp/channels/src/sass/components/_post-menu.scss @@ -1,4 +1,5 @@ -@charset 'UTF-8'; +@use "utils/functions"; +@use "utils/variables"; .post-menu { position: absolute; @@ -22,15 +23,15 @@ border: none; border-radius: 4px; background: transparent; - color: rgba(v(center-channel-color-rgb), 0.4); - fill: rgba(v(center-channel-color-rgb), 0.4); + color: rgba(functions.v(center-channel-color-rgb), 0.4); + fill: rgba(functions.v(center-channel-color-rgb), 0.4); &: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); } span { @@ -80,35 +81,35 @@ &.a11y--active { .post-menu { border-color: rgba(var(--center-channel-color-rgb), 0.2); - background-color: v(center-channel-bg); - box-shadow: $elevation-1; + background-color: functions.v(center-channel-bg); + box-shadow: variables.$elevation-1; } .search-item__jump { - color: rgba(v(center-channel-color-rgb), 0.75); + color: rgba(functions.v(center-channel-color-rgb), 0.75); &:hover { - color: v(link-color); + color: functions.v(link-color); } } .post-menu__item { display: inline-flex; - color: rgba(v(center-channel-color-rgb), 0.64); - fill: rgba(v(center-channel-color-rgb), 0.64); + color: rgba(functions.v(center-channel-color-rgb), 0.64); + fill: rgba(functions.v(center-channel-color-rgb), 0.64); &:hover { - background: rgba(v(center-channel-color-rgb), 0.08); - color: rgba(v(center-channel-color-rgb), 0.8); - fill: rgba(v(center-channel-color-rgb), 0.8); + background: rgba(functions.v(center-channel-color-rgb), 0.08); + color: rgba(functions.v(center-channel-color-rgb), 0.8); + fill: rgba(functions.v(center-channel-color-rgb), 0.8); } &: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); } } } diff --git a/webapp/channels/src/sass/components/_post-right.scss b/webapp/channels/src/sass/components/_post-right.scss index 8f6be3bc55..190bcec662 100644 --- a/webapp/channels/src/sass/components/_post-right.scss +++ b/webapp/channels/src/sass/components/_post-right.scss @@ -1,4 +1,5 @@ -@charset "utf-8"; +@use "utils/functions"; +@use "utils/variables"; .post-right__container, .ThreadViewer { @@ -24,7 +25,7 @@ left: 0; width: 100%; height: 16px; - background: rgba(v(center-channel-color-rgb), 0.04); + background: rgba(functions.v(center-channel-color-rgb), 0.04); content: ''; } } @@ -48,8 +49,8 @@ z-index: 1; padding: 0 12px; margin-left: 34px; - background: rgba(v(center-channel-bg-rgb), 1); - color: rgba(v(center-channel-color-rgb), 0.72); + background: rgba(functions.v(center-channel-bg-rgb), 1); + color: rgba(functions.v(center-channel-color-rgb), 0.72); font-size: 12px; font-weight: 600; } @@ -240,7 +241,7 @@ .post-right-header { height: 39px; padding: 10px 10px 0 15px; - border-bottom: $border-gray; + border-bottom: variables.$border-gray; color: #999; font-size: 1em; font-weight: 400; @@ -249,7 +250,7 @@ .post-right-root-container { padding: 5px 10px; - border-bottom: $border-gray; + border-bottom: variables.$border-gray; ul { padding-left: 0; diff --git a/webapp/channels/src/sass/components/_post.scss b/webapp/channels/src/sass/components/_post.scss index 847b1c75ba..24bce23364 100644 --- a/webapp/channels/src/sass/components/_post.scss +++ b/webapp/channels/src/sass/components/_post.scss @@ -1,4 +1,6 @@ -@charset "utf-8"; +@use "utils/functions"; +@use "utils/mixins"; +@use "utils/variables"; .app__body { .custom-textarea { @@ -9,7 +11,7 @@ border: none; border-radius: 4px; background: transparent; - box-shadow: inset 0 0 0 1px rgba(v(center-channel-color-rgb), 0.24); + box-shadow: inset 0 0 0 1px rgba(functions.v(center-channel-color-rgb), 0.24); line-height: 20px; resize: none; transition: none; @@ -17,7 +19,7 @@ word-wrap: break-word; &:focus { - box-shadow: inset 0 0 0 2px rgba(v(center-channel-color-rgb), 0.32); + box-shadow: inset 0 0 0 2px rgba(functions.v(center-channel-color-rgb), 0.32); } &.bad-connection { @@ -42,7 +44,7 @@ left: 0; &:focus { - border-color: rgba(v(center-channel-color-rgb), 0.4); + border-color: rgba(functions.v(center-channel-color-rgb), 0.4); } p { @@ -133,22 +135,22 @@ left: 0; width: 100%; height: 100%; - color: $white; - font-size: em(20px); + color: variables.$white; + font-size: functions.em(20px); font-weight: 600; pointer-events: none; text-align: center; .overlay__indent { - @include clearfix; - @include alpha-property(background-color, $black, 0.75); + @include mixins.clearfix; + @include mixins.alpha-property(background-color, variables.$black, 0.75); position: relative; height: 100%; } &.right-file-overlay { - font-size: em(18px); + font-size: functions.em(18px); .overlay__circle { width: 300px; @@ -172,7 +174,7 @@ margin: -185px 0 0 -185px; pointer-events: none; - @include alpha-property(background, $black, 0.7); + @include mixins.alpha-property(background, variables.$black, 0.7); } .overlay__files { @@ -281,7 +283,7 @@ body.enable-animations & { transition-delay: 0s; - transition-duration: $transition-quick; + transition-duration: variables.$transition-quick; transition-property: opacity, visibility; transition-timing-function: ease-in, step-end; } @@ -292,7 +294,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; } @@ -333,7 +335,7 @@ line-height: 25px; text-align: center; - @include font-smoothing(initial); + @include mixins.font-smoothing(initial); } } @@ -465,21 +467,21 @@ border-radius: 4px; margin: 5px 0; background: transparent; - color: rgba(v(center-channel-color-rgb), 0.75); - fill: rgba(v(center-channel-color-rgb), 0.75); + color: rgba(functions.v(center-channel-color-rgb), 0.75); + fill: 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); - fill: 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); + fill: 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); } & + input { @@ -530,7 +532,7 @@ gap: 8px; > button { - @include button-small; + @include mixins.button-small; padding: 10px 16px; border-width: 0; @@ -550,15 +552,15 @@ background: rgba(var(--button-bg-rgb), 0.16); } - @include button-focus; + @include mixins.button-focus; } &.save { - @include primary-button; + @include mixins.primary-button; box-shadow: none; - @include button-focus; + @include mixins.button-focus; } } } @@ -621,7 +623,7 @@ word-wrap: break-word; &:not(.post--editing):not(.post--editing):hover { - background-color: rgba(v(center-channel-color-rgb), 0.04); + background-color: rgba(functions.v(center-channel-color-rgb), 0.04); .PostAttachmentOpenGraph .remove-button { display: flex; @@ -857,7 +859,7 @@ } .auto-responder { - background: alpha-color($white, 0.7); + background: functions.alpha-color(variables.$white, 0.7); } .post__img .status-wrapper { @@ -1007,7 +1009,7 @@ } .post-image__name { - @include clearfix; + @include mixins.clearfix; display: block; width: 100%; @@ -1295,7 +1297,7 @@ } .user-popover { - @include clearfix; + @include mixins.clearfix; text-align: left; text-overflow: ellipsis; @@ -1352,7 +1354,7 @@ text-align: right; .icon { - fill: v(center-channel-color); + fill: functions.v(center-channel-color); svg { width: 32px; @@ -1531,12 +1533,12 @@ top: 0; right: 0; padding: 5px 7px; - background: alpha-color($black, 0.7); - color: $white; + background: functions.alpha-color(variables.$black, 0.7); + color: variables.$white; font-size: 0.9em; a { - color: $white; + color: variables.$white; } } } @@ -1563,8 +1565,8 @@ .post-add-reaction-emoji-picker-open { .Reaction { 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); } } @@ -1638,7 +1640,7 @@ border: 1px solid rgba(var(--center-channel-color-rgb), 0.16); border-radius: 4px; background-color: var(--center-channel-bg); - box-shadow: $elevation-1; + box-shadow: variables.$elevation-1; button.size-aware-image__copy_link, a.size-aware-image__download { @@ -1763,7 +1765,7 @@ .permalink-icon { display: inline-block; - color: $primary-color; + color: variables.$primary-color; visibility: hidden; } @@ -1784,7 +1786,7 @@ position: relative; top: 1px; display: inline-block; - fill: $primary-color; + fill: variables.$primary-color; text-decoration: none; visibility: hidden; @@ -1821,7 +1823,7 @@ .reacticon__container { display: inline-block; - fill: $primary-color; + fill: variables.$primary-color; font-size: 16px; vertical-align: top; visibility: hidden; @@ -1835,14 +1837,13 @@ } .card-icon__container { - @extend %btn-transition; - position: relative; z-index: 1; top: 2px; margin: 0 6px 0 4px; color: rgba(var(--center-channel-color-rgb), 0.3); opacity: 0.24; + transition: all 0.15s ease; vertical-align: top; &:hover { @@ -1867,7 +1868,7 @@ border-radius: 2px; text-overflow: ellipsis; - @include alpha-property(background, $black, 0.05); + @include mixins.alpha-property(background, variables.$black, 0.05); .embed-title { overflow: hidden; diff --git a/webapp/channels/src/sass/components/_remove-image.scss b/webapp/channels/src/sass/components/_remove-image.scss index 85f9033e2d..e076cd5277 100644 --- a/webapp/channels/src/sass/components/_remove-image.scss +++ b/webapp/channels/src/sass/components/_remove-image.scss @@ -1,4 +1,5 @@ -@charset 'UTF-8'; +@use "utils/functions"; +@use "utils/variables"; .remove-image { position: relative; @@ -12,9 +13,9 @@ height: 128px; align-items: center; justify-content: center; - border: 1px solid alpha-color($black, 0.15); + border: 1px solid functions.alpha-color(variables.$black, 0.15); border-radius: 4px; - background: $white; + background: variables.$white; img { max-width: 100%; @@ -33,12 +34,12 @@ justify-content: center; border: none; border-radius: 40px; - background: alpha-color($black, 0.8); + background: functions.alpha-color(variables.$black, 0.8); color: white; font-size: 20px; &:hover { - background: $black; + background: variables.$black; } span { diff --git a/webapp/channels/src/sass/components/_save-button.scss b/webapp/channels/src/sass/components/_save-button.scss index dedef3255c..be5afb5abe 100644 --- a/webapp/channels/src/sass/components/_save-button.scss +++ b/webapp/channels/src/sass/components/_save-button.scss @@ -1,5 +1,3 @@ -@charset 'UTF-8'; - .save-button { .icon { margin-right: 10px; diff --git a/webapp/channels/src/sass/components/_scrollbar.scss b/webapp/channels/src/sass/components/_scrollbar.scss index 67d271772b..ccac91b96e 100644 --- a/webapp/channels/src/sass/components/_scrollbar.scss +++ b/webapp/channels/src/sass/components/_scrollbar.scss @@ -1,5 +1,3 @@ -@charset 'UTF-8'; - ::-webkit-scrollbar { width: 6px; // for vertical scrollbars height: 6px; // for horizontal scrollbars diff --git a/webapp/channels/src/sass/components/_search.scss b/webapp/channels/src/sass/components/_search.scss index 9d5acbc330..fa205b4018 100644 --- a/webapp/channels/src/sass/components/_search.scss +++ b/webapp/channels/src/sass/components/_search.scss @@ -1,4 +1,6 @@ -@charset "utf-8"; +@use "utils/functions"; +@use "utils/mixins"; +@use "utils/variables"; // global header styles .search-bar-container--global { @@ -14,7 +16,7 @@ } .search-item-snippet { - @include clearfix; + @include mixins.clearfix; text-overflow: ellipsis; @@ -47,7 +49,7 @@ height: 14px; body.enable-animations & { - transition: opacity $transition-quick ease-out; + transition: opacity variables.$transition-quick ease-out; } } } @@ -72,7 +74,7 @@ } &:active { - color: v(center-channel-color); + color: functions.v(center-channel-color); } &.visible { @@ -80,7 +82,7 @@ } body.enable-animations & { - transition: opacity $transition-quick ease-out; + transition: opacity variables.$transition-quick ease-out; } } @@ -112,7 +114,7 @@ } &:hover { - background: rgba(v(button-bg-rgb), 0.16); + background: rgba(functions.v(button-bg-rgb), 0.16); } } @@ -156,7 +158,7 @@ &--focused, &--focused:hover { padding: 0; - border: 2px solid v(button-bg); + border: 2px solid functions.v(button-bg); .search__icon { top: 6px; @@ -171,7 +173,7 @@ body.enable-animations .search-bar__container & { transition-delay: 0s; - transition-duration: $transition-quick, 0.3s; + transition-duration: variables.$transition-quick, 0.3s; transition-property: border-color, width; transition-timing-function: ease-in-out, ease-out; } @@ -252,7 +254,7 @@ .search-results-header { height: 44px; padding: 0 10px; - border-bottom: $border-gray; + border-bottom: variables.$border-gray; color: #999; font-size: 1em; font-weight: 400; @@ -356,7 +358,7 @@ } .search-highlight { - background-color: $yellow; + background-color: variables.$yellow; } .search-hint__title { @@ -418,11 +420,11 @@ align-items: center; justify-content: center; padding: 8px 16px; - border: 1px solid v(button-bg); + border: 1px solid functions.v(button-bg); border-radius: 4px; margin: 18px 8px 16px 0; - background: v(center-channel-bg); - color: v(button-bg); + background: functions.v(center-channel-bg); + color: functions.v(button-bg); font-size: 12px; line-height: 1; @@ -433,7 +435,7 @@ &:hover, &.highlighted { - background: rgba(v(button-bg-rgb), 0.04); + background: rgba(functions.v(button-bg-rgb), 0.04); } } } diff --git a/webapp/channels/src/sass/components/_select.scss b/webapp/channels/src/sass/components/_select.scss index 5d602fe2ee..0a17dd96f2 100644 --- a/webapp/channels/src/sass/components/_select.scss +++ b/webapp/channels/src/sass/components/_select.scss @@ -1,5 +1,3 @@ -@charset 'UTF-8'; - .select-suggestion-container { position: relative; margin: 8px 8px 0 0; diff --git a/webapp/channels/src/sass/components/_settings-modal.scss b/webapp/channels/src/sass/components/_settings-modal.scss index b5b356ba10..b71d18c9e9 100644 --- a/webapp/channels/src/sass/components/_settings-modal.scss +++ b/webapp/channels/src/sass/components/_settings-modal.scss @@ -1,4 +1,4 @@ -@charset "utf-8"; +@use "utils/functions"; .app__body { .settings-modal { @@ -41,10 +41,10 @@ &.active { button { background: rgba(var(--button-bg-rgb), 0.08); - color: v(button-bg); + color: functions.v(button-bg); i { - color: v(button-bg); + color: functions.v(button-bg); } } } diff --git a/webapp/channels/src/sass/components/_sidebar-card.scss b/webapp/channels/src/sass/components/_sidebar-card.scss index ca4f121fd7..52702b1726 100644 --- a/webapp/channels/src/sass/components/_sidebar-card.scss +++ b/webapp/channels/src/sass/components/_sidebar-card.scss @@ -1,3 +1,5 @@ +@use "utils/variables"; + .post-card--info { position: fixed; bottom: 0; @@ -7,7 +9,7 @@ align-items: center; justify-content: space-between; padding: 15px; - border-top: $border-gray; + border-top: variables.$border-gray; background: var(--center-channel-bg); white-space: nowrap; diff --git a/webapp/channels/src/sass/components/_sidebar-header-dropdown-button.scss b/webapp/channels/src/sass/components/_sidebar-header-dropdown-button.scss index 949d1fb023..482eb3bfeb 100644 --- a/webapp/channels/src/sass/components/_sidebar-header-dropdown-button.scss +++ b/webapp/channels/src/sass/components/_sidebar-header-dropdown-button.scss @@ -1,3 +1,5 @@ +@use "utils/variables"; + .SidebarHeaderDropdownButton { position: relative; display: flex; @@ -8,7 +10,7 @@ width: 100%; flex-grow: 1; padding: 3px 15px 0 8px; - color: $white; + color: variables.$white; .team__name { overflow: hidden; @@ -45,7 +47,7 @@ } .menu-icon { - fill: $white; + fill: variables.$white; opacity: 0.8; } diff --git a/webapp/channels/src/sass/components/_single_image_view.scss b/webapp/channels/src/sass/components/_single_image_view.scss index e408129280..b2d361ecbf 100644 --- a/webapp/channels/src/sass/components/_single_image_view.scss +++ b/webapp/channels/src/sass/components/_single_image_view.scss @@ -1,3 +1,5 @@ +@use "utils/variables"; + .file-view--single { margin: 0; @@ -50,12 +52,12 @@ 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; line-height: 20px; &:hover { border: 1px solid rgba(var(--center-channel-color-rgb), 0.24); - box-shadow: $elevation-2; + box-shadow: variables.$elevation-2; } } } diff --git a/webapp/channels/src/sass/components/_spinner-button.scss b/webapp/channels/src/sass/components/_spinner-button.scss index feb8c16c17..6f6116432d 100644 --- a/webapp/channels/src/sass/components/_spinner-button.scss +++ b/webapp/channels/src/sass/components/_spinner-button.scss @@ -1,5 +1,3 @@ -@charset 'UTF-8'; - .spinner-button__gif { width: 15px; height: 15px; diff --git a/webapp/channels/src/sass/components/_status-icon.scss b/webapp/channels/src/sass/components/_status-icon.scss index 343882c4c4..c0c43dab6d 100644 --- a/webapp/channels/src/sass/components/_status-icon.scss +++ b/webapp/channels/src/sass/components/_status-icon.scss @@ -1,4 +1,4 @@ -@charset "utf-8"; +@use "utils/variables"; .status-wrapper { position: relative; @@ -114,7 +114,7 @@ .status { 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; } diff --git a/webapp/channels/src/sass/components/_suggestion-list.scss b/webapp/channels/src/sass/components/_suggestion-list.scss index 5a3129d15f..46836e3de4 100644 --- a/webapp/channels/src/sass/components/_suggestion-list.scss +++ b/webapp/channels/src/sass/components/_suggestion-list.scss @@ -1,4 +1,4 @@ -@charset "utf-8"; +@use "utils/functions"; .app__body { .suggestion--selected { @@ -64,7 +64,7 @@ padding-bottom: 12px; border: 1px solid rgba(var(--center-channel-color-rgb), 0.16); border-radius: 4px; - background-color: v(center-channel-bg); + background-color: functions.v(center-channel-bg); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); -webkit-overflow-scrolling: touch; overflow-x: auto; @@ -76,7 +76,7 @@ } &::-webkit-scrollbar-thumb { - border: 1px solid v(center-channel-bg); + border: 1px solid functions.v(center-channel-bg); border-radius: 4px; background-color: rgba(var(--center-channel-color-rgb), 0.24) !important; } @@ -274,7 +274,7 @@ flex: 0 0 1.6rem; align-items: center; justify-content: center; - fill: v(center-channel-color); + fill: functions.v(center-channel-color); opacity: 0.73; &--standard { diff --git a/webapp/channels/src/sass/components/_system-notice.scss b/webapp/channels/src/sass/components/_system-notice.scss index fcf3194936..862f41197e 100644 --- a/webapp/channels/src/sass/components/_system-notice.scss +++ b/webapp/channels/src/sass/components/_system-notice.scss @@ -1,5 +1,3 @@ -@charset 'UTF-8'; - .system-notice { position: absolute; z-index: 9999; diff --git a/webapp/channels/src/sass/components/_team-channel-settings.scss b/webapp/channels/src/sass/components/_team-channel-settings.scss index c2defa4d17..beff8cbb38 100644 --- a/webapp/channels/src/sass/components/_team-channel-settings.scss +++ b/webapp/channels/src/sass/components/_team-channel-settings.scss @@ -1,5 +1,3 @@ -@charset 'UTF-8'; - span.greyed-out { opacity: 0.4; } diff --git a/webapp/channels/src/sass/components/_toggle.scss b/webapp/channels/src/sass/components/_toggle.scss index 5c7b13afb4..950f97b908 100644 --- a/webapp/channels/src/sass/components/_toggle.scss +++ b/webapp/channels/src/sass/components/_toggle.scss @@ -1,14 +1,16 @@ +@use "utils/variables"; + @use 'sass:color'; // Based on https://codepen.io/aanjulena/pen/ZLZjzV // Colors $brand-primary: #2a9fd8; -$gray: #6b7381; -$gray-light: color.adjust($gray, $lightness: 15%); -$gray-lighter: color.adjust($gray, $lightness: 30%); +variables.$gray: #6b7381; +$gray-light: color.adjust(variables.$gray, $lightness: 15%); +$gray-lighter: color.adjust(variables.$gray, $lightness: 30%); // Button Colors -$btn-default-color: $gray; +$btn-default-color: variables.$gray; $btn-default-bg: $gray-lighter; // Toggle Sizes diff --git a/webapp/channels/src/sass/components/_tooltip.scss b/webapp/channels/src/sass/components/_tooltip.scss index eb5d8f2b4e..37c66fdd5c 100644 --- a/webapp/channels/src/sass/components/_tooltip.scss +++ b/webapp/channels/src/sass/components/_tooltip.scss @@ -1,4 +1,3 @@ -@charset 'UTF-8'; .tooltip { z-index: 2000; diff --git a/webapp/channels/src/sass/components/_videos.scss b/webapp/channels/src/sass/components/_videos.scss index 6d9ac35ded..64a299784d 100644 --- a/webapp/channels/src/sass/components/_videos.scss +++ b/webapp/channels/src/sass/components/_videos.scss @@ -1,4 +1,5 @@ -@charset 'UTF-8'; +@use "utils/functions"; +@use "utils/variables"; .post { .video-div { @@ -29,7 +30,7 @@ height: 150px; border-radius: 10px; margin: -75px 0 0 -100px; - background-color: alpha-color($black, 0.5); + background-color: functions.alpha-color(variables.$black, 0.5); } } @@ -51,7 +52,7 @@ right: 51px; width: 100px; height: 100px; - border: 4px solid alpha-color($white, 0.4); + border: 4px solid functions.alpha-color(variables.$white, 0.4); border-radius: 14px; cursor: pointer; @@ -63,7 +64,7 @@ height: 0; border-top: 36px solid transparent; border-bottom: 36px solid transparent; - border-left: 60px solid alpha-color($white, 0.4); + border-left: 60px solid functions.alpha-color(variables.$white, 0.4); } } @@ -77,7 +78,7 @@ transition: all 0.1s linear; &:hover { - box-shadow: 0 2px 5px 0 rgba($black, 0.1), 0 2px 10px 0 rgba($black, 0.1); + box-shadow: 0 2px 5px 0 rgba(variables.$black, 0.1), 0 2px 10px 0 rgba(variables.$black, 0.1); } &.placeholder { diff --git a/webapp/channels/src/sass/layout/_content.scss b/webapp/channels/src/sass/layout/_content.scss index 49cc10602b..8b3ea7e067 100644 --- a/webapp/channels/src/sass/layout/_content.scss +++ b/webapp/channels/src/sass/layout/_content.scss @@ -1,4 +1,3 @@ -@charset 'UTF-8'; .inner-wrap { &.move--left { diff --git a/webapp/channels/src/sass/layout/_footer.scss b/webapp/channels/src/sass/layout/_footer.scss index 2f0ef22397..eaedf1ea1f 100644 --- a/webapp/channels/src/sass/layout/_footer.scss +++ b/webapp/channels/src/sass/layout/_footer.scss @@ -1,15 +1,15 @@ -@charset 'UTF-8'; +@use "utils/variables"; .footer-pane { padding-bottom: 1em; - background: $bg--gray; + background: variables.$bg--gray; .footer-link { padding: 0 1.5em; &.copyright { padding-right: 0; - color: $dark-gray; + color: variables.$dark-gray; } } diff --git a/webapp/channels/src/sass/layout/_headers.scss b/webapp/channels/src/sass/layout/_headers.scss index 622380cb9e..78431ec107 100644 --- a/webapp/channels/src/sass/layout/_headers.scss +++ b/webapp/channels/src/sass/layout/_headers.scss @@ -1,4 +1,6 @@ -@charset "utf-8"; +@use "utils/functions"; +@use "utils/mixins"; +@use "utils/variables"; .channel-header { position: relative; @@ -8,7 +10,7 @@ padding: 12px; border-radius: 12px 12px 0 0; border-bottom: var(--border-default); - background: v(center-channel-bg); + background: functions.v(center-channel-bg); font-size: 14px; #channelHeaderDropdownButton { @@ -26,15 +28,15 @@ margin-right: 2px; &:hover { - background: rgba(v(center-channel-color-rgb), 0.08); + background: rgba(functions.v(center-channel-color-rgb), 0.08); } &.active { - background: rgba(v(button-bg-rgb), 0.08); + background: rgba(functions.v(button-bg-rgb), 0.08); .heading, .header-dropdown-chevron-icon { - color: v(button-bg); + color: functions.v(button-bg); } } @@ -65,7 +67,7 @@ } &:hover { - background: rgba(v(center-channel-color-rgb), 0.08); + background: rgba(functions.v(center-channel-color-rgb), 0.08); i { opacity: 0.8; @@ -74,7 +76,7 @@ &.inactive { .icon { - color: v(center-channel-color); + color: functions.v(center-channel-color); } } @@ -699,7 +701,7 @@ } .team__header { - @include pie-clearfix; + @include mixins.pie-clearfix; position: relative; display: flex; @@ -717,7 +719,7 @@ height: 100%; background: none; content: ""; - transition: all $transition-quick ease-in-out; + transition: all variables.$transition-quick ease-in-out; } &:hover { @@ -807,7 +809,7 @@ height: 100%; padding: 10px; background: none; - color: $white; + color: variables.$white; font-size: 1em; line-height: 1.8; opacity: 0.8; @@ -833,7 +835,7 @@ width: 36px; height: 36px; border-radius: 36px; - fill: $white; + fill: variables.$white; float: right; line-height: 36px; text-align: center; @@ -881,7 +883,7 @@ color: rgba(var(--sidebar-header-text-color-rgb), 0.8); font-size: 14px; font-weight: 400; - transition: all $transition-quick ease-in-out; + transition: all variables.$transition-quick ease-in-out; } .custom-status { diff --git a/webapp/channels/src/sass/layout/_markdown.scss b/webapp/channels/src/sass/layout/_markdown.scss index 10cb93bc54..76cd9e82d7 100644 --- a/webapp/channels/src/sass/layout/_markdown.scss +++ b/webapp/channels/src/sass/layout/_markdown.scss @@ -1,4 +1,6 @@ -@charset "UTF-8"; +@use "utils/animations"; +@use "utils/functions"; +@use "utils/variables"; h1.markdown__heading { font-size: 28px; @@ -108,7 +110,7 @@ h6.markdown__heading { &:hover { z-index: 2; - box-shadow: 0 2px 5px 0 rgba($black, 0.1), 0 2px 5px 0 rgba($black, 0.1); + box-shadow: 0 2px 5px 0 rgba(variables.$black, 0.1), 0 2px 5px 0 rgba(variables.$black, 0.1); transition: all 0.1s linear; } } @@ -124,7 +126,7 @@ h6.markdown__heading { &:hover { z-index: 2; - box-shadow: 0 2px 2px 0 rgba($black, 0.1), 0 2px 2px 0 rgba($black, 0.1); + box-shadow: 0 2px 2px 0 rgba(variables.$black, 0.1), 0 2px 2px 0 rgba(variables.$black, 0.1); transition: all 0.1s linear; } } @@ -164,7 +166,7 @@ h6.markdown__heading { &:hover { z-index: 2; - box-shadow: 0 2px 2px 0 rgba($black, 0.1), 0 2px 2px 0 rgba($black, 0.1); + box-shadow: 0 2px 2px 0 rgba(variables.$black, 0.1), 0 2px 2px 0 rgba(variables.$black, 0.1); transition: all 0.1s linear; } } @@ -240,7 +242,7 @@ h6.markdown__heading { display: flex; flex-direction: row; padding: 8.5px; - border: 1px solid rgba(v(center-channel-color-rgb), 0.2); + border: 1px solid rgba(functions.v(center-channel-color-rgb), 0.2); border-radius: 0.25em; margin: 5px 0; cursor: auto; @@ -253,7 +255,7 @@ h6.markdown__heading { .post-code__context-menu { &.react-contextmenu { - background-color: $white; + background-color: variables.$white; } .react-contextmenu-item { @@ -283,7 +285,7 @@ h6.markdown__heading { height: 36px; padding: 4px 4px 0; border-radius: 0 0 0 2px; - color: $white; + color: variables.$white; user-select: none; >span { @@ -320,7 +322,7 @@ h6.markdown__heading { } .icon-check { - @include fade-in; + @include animations.fade-in; color: #3db887; } diff --git a/webapp/channels/src/sass/layout/_module.scss b/webapp/channels/src/sass/layout/_module.scss index 42659c2902..f2d3b3a9d7 100644 --- a/webapp/channels/src/sass/layout/_module.scss +++ b/webapp/channels/src/sass/layout/_module.scss @@ -1,13 +1,13 @@ // Only for combining all the files in this folder -@import 'content'; -@import 'footer'; -@import 'headers'; -@import 'markdown'; -@import 'navigation'; -@import 'sidebar-left'; -@import 'sidebar-menu'; -@import 'sidebar-right'; -@import 'team-button'; -@import 'team-sidebar'; -@import 'webhooks'; -@import 'channel-icon'; +@use 'content'; +@use 'footer'; +@use 'headers'; +@use 'markdown'; +@use 'navigation'; +@use 'sidebar-left'; +@use 'sidebar-menu'; +@use 'sidebar-right'; +@use 'team-button'; +@use 'team-sidebar'; +@use 'webhooks'; +@use 'channel-icon'; diff --git a/webapp/channels/src/sass/layout/_navigation.scss b/webapp/channels/src/sass/layout/_navigation.scss index 9ee2b209b0..9604b7f898 100644 --- a/webapp/channels/src/sass/layout/_navigation.scss +++ b/webapp/channels/src/sass/layout/_navigation.scss @@ -1,4 +1,4 @@ -@charset "utf-8"; +@use "utils/variables"; .nav > li > a:focus, .nav > li > a:hover { @@ -139,7 +139,7 @@ } .icon--white { - color: $white; + color: variables.$white; } } @@ -218,6 +218,6 @@ } .badge-notify { - background: $red; + background: variables.$red; } } diff --git a/webapp/channels/src/sass/layout/_sidebar-left.scss b/webapp/channels/src/sass/layout/_sidebar-left.scss index 95835c4b34..02eaf1ebee 100644 --- a/webapp/channels/src/sass/layout/_sidebar-left.scss +++ b/webapp/channels/src/sass/layout/_sidebar-left.scss @@ -1,4 +1,4 @@ -@charset "UTF-8"; +@use "utils/variables"; /* Height durations for height and opacity of sidebar channels needs to be different for optimum fps see PR #9732 */ $sidebarHeightTransitionDuration: 0.18s; @@ -213,7 +213,7 @@ $sidebarOpacityAnimationDuration: 0.15s; &--untouched { color: var(--sidebar-unread-text); - font-weight: $font-weight--semibold; + font-weight: variables.$font-weight--semibold; } } @@ -1398,7 +1398,7 @@ $sidebarOpacityAnimationDuration: 0.15s; &:hover { background: #489dfe; - color: $white; + color: variables.$white; } &:focus, diff --git a/webapp/channels/src/sass/layout/_sidebar-menu.scss b/webapp/channels/src/sass/layout/_sidebar-menu.scss index b2a8e79379..eb2dc2ced8 100644 --- a/webapp/channels/src/sass/layout/_sidebar-menu.scss +++ b/webapp/channels/src/sass/layout/_sidebar-menu.scss @@ -1,4 +1,5 @@ -@charset 'UTF-8'; +@use "utils/mixins"; +@use "utils/variables"; .sidebar--menu { position: absolute; @@ -8,7 +9,7 @@ width: 220px; height: 100%; padding: 0 0 2em; - border-right: $border-gray; + border-right: variables.$border-gray; background: var(--sidebar-bg); color: rgba(var(--sidebar-text-rgb), 0.8); -webkit-overflow-scrolling: touch; @@ -31,14 +32,14 @@ } .team__header { - @include pie-clearfix; + @include mixins.pie-clearfix; display: none; padding: 0 15px; background: var(--sidebar-header-bg); a { - color: $white; + color: variables.$white; } .navbar-right { diff --git a/webapp/channels/src/sass/layout/_sidebar-right.scss b/webapp/channels/src/sass/layout/_sidebar-right.scss index 458a30bb7e..70ec535d0a 100644 --- a/webapp/channels/src/sass/layout/_sidebar-right.scss +++ b/webapp/channels/src/sass/layout/_sidebar-right.scss @@ -1,4 +1,6 @@ -@charset "utf-8"; +@use "utils/functions"; +@use "utils/mixins"; +@use "utils/variables"; .sidebar--right--width-holder { @media screen and (max-width: 768px) { @@ -91,7 +93,7 @@ z-index: 5; width: 100%; height: 100%; - background-color: $yellow; + background-color: variables.$yellow; opacity: 0.1; pointer-events: none; } @@ -125,7 +127,7 @@ font-weight: 600; line-height: 1; - @include clearfix; + @include mixins.clearfix; } .sidebar--right__title__channel { @@ -152,7 +154,7 @@ &:active { background: rgba(var(--button-bg-rgb), 0.08); - color: v(button-bg); + color: functions.v(button-bg); } } diff --git a/webapp/channels/src/sass/layout/_webhooks.scss b/webapp/channels/src/sass/layout/_webhooks.scss index 5c7514e40f..a36995ad4e 100644 --- a/webapp/channels/src/sass/layout/_webhooks.scss +++ b/webapp/channels/src/sass/layout/_webhooks.scss @@ -1,4 +1,5 @@ -@charset "utf-8"; +@use "utils/mixins"; +@use "utils/variables"; .webhooks__container { padding: 0 13px 15px; @@ -6,7 +7,7 @@ border-radius: 4px; margin-top: 10px; - @include alpha-property(background, $black, 0.1); + @include mixins.alpha-property(background, variables.$black, 0.1); } .post-attachment-dropdown { diff --git a/webapp/channels/src/sass/responsive/_desktop.scss b/webapp/channels/src/sass/responsive/_desktop.scss index 2c41aa3f24..640cf2a107 100644 --- a/webapp/channels/src/sass/responsive/_desktop.scss +++ b/webapp/channels/src/sass/responsive/_desktop.scss @@ -1,4 +1,4 @@ -@charset "utf-8"; +@use "utils/functions"; @media screen and (min-width: 1680px) { .sidebar--right, @@ -75,7 +75,7 @@ .inner-wrap { &.move--left { .file-overlay { - font-size: em(18px); + font-size: functions.em(18px); .overlay__circle { width: 300px; diff --git a/webapp/channels/src/sass/responsive/_mobile.scss b/webapp/channels/src/sass/responsive/_mobile.scss index 62eb5edec0..a41f92576f 100644 --- a/webapp/channels/src/sass/responsive/_mobile.scss +++ b/webapp/channels/src/sass/responsive/_mobile.scss @@ -1,4 +1,6 @@ -@charset "utf-8"; +@use "utils/functions"; +@use "utils/mixins"; +@use "utils/variables"; @media screen and (max-width: 768px) { #navbar_wrapper { @@ -43,12 +45,12 @@ height: 100%; padding: 2.5em 0 0; padding-bottom: 50px; - background: alpha-color($black, 0.9); + background: functions.alpha-color(variables.$black, 0.9); transition: all 0.35s ease; body.announcement-bar--fixed & { - top: calc(48px + #{$announcement-bar-height}); - height: calc(100% - 48px - #{$announcement-bar-height}); + top: calc(48px + #{variables.$announcement-bar-height}); + height: calc(100% - 48px - #{variables.$announcement-bar-height}); } } @@ -72,10 +74,10 @@ width: 30px; height: 30px; padding-top: 13px; - border: 1px solid $white; + border: 1px solid variables.$white; border-radius: 50%; margin-left: -15px; - color: $white; + color: variables.$white; font-family: 'Open Sans', sans-serif; font-size: 23px; font-weight: 200; @@ -102,7 +104,7 @@ justify-content: center; padding: 0.4rem 2rem; margin: 0 auto; - color: $white; + color: variables.$white; font-weight: 600; line-height: 32px; text-align: center; @@ -121,7 +123,7 @@ } hr { - border-bottom: 1px solid alpha-color($white, 0.3); + border-bottom: 1px solid functions.alpha-color(variables.$white, 0.3); margin: 8px auto; } } @@ -404,7 +406,7 @@ left: 0; width: 100%; height: 100%; - background: alpha-color($black, 0.3); + background: functions.alpha-color(variables.$black, 0.3); content: ''; } @@ -768,7 +770,7 @@ max-width: 100%; height: calc(100% - 50px); border: none; - background: alpha-color($black, 0.9); + background: functions.alpha-color(variables.$black, 0.9); box-shadow: none; transform: translate3d(0, 100%, 0); transition: all 0.35s ease; @@ -787,7 +789,7 @@ .popover-content { padding: 15px 20px 100px; - color: $white; + color: variables.$white; font-size: 15px; >div { @@ -807,10 +809,10 @@ width: 30px; height: 30px; padding-top: 13px; - border: 1px solid $white; + border: 1px solid variables.$white; border-radius: 50%; margin-left: -15px; - color: $white; + color: variables.$white; font-family: 'Open Sans', sans-serif; font-size: 23px; font-weight: 200; @@ -992,7 +994,7 @@ } .post-message--overflow { - @include clearfix; + @include mixins.clearfix; } .status-wrapper { @@ -1265,7 +1267,7 @@ } .file-overlay { - font-size: em(18px); + font-size: functions.em(18px); &.center-file-overlay { .overlay__indent { @@ -1421,7 +1423,7 @@ } .team__header { - @include clearfix; + @include mixins.clearfix; padding: 15px; pointer-events: none; @@ -1513,7 +1515,7 @@ } .team__header { - @include clearfix; + @include mixins.clearfix; padding: 15px; pointer-events: none; @@ -1862,7 +1864,7 @@ .app__body { &.announcement-bar--fixed { .modal { - padding-top: $announcement-bar-height; + padding-top: variables.$announcement-bar-height; } } @@ -2045,8 +2047,8 @@ } .emoji-picker__item { - width: calc(100% / #{$emoji-per-row}); - padding-top: calc(100% / #{$emoji-per-row}); + width: calc(100% / #{variables.$emoji-per-row}); + padding-top: calc(100% / #{variables.$emoji-per-row}); margin: 0; } diff --git a/webapp/channels/src/sass/responsive/_module.scss b/webapp/channels/src/sass/responsive/_module.scss index 3962d80782..d91c3a1e9f 100644 --- a/webapp/channels/src/sass/responsive/_module.scss +++ b/webapp/channels/src/sass/responsive/_module.scss @@ -1,5 +1,3 @@ -@charset "utf-8"; - -@import 'mobile'; -@import 'tablet'; -@import 'desktop'; +@use 'mobile'; +@use 'tablet'; +@use 'desktop'; diff --git a/webapp/channels/src/sass/responsive/_tablet.scss b/webapp/channels/src/sass/responsive/_tablet.scss index 7e6e44daaa..c7f1e5738d 100644 --- a/webapp/channels/src/sass/responsive/_tablet.scss +++ b/webapp/channels/src/sass/responsive/_tablet.scss @@ -1,4 +1,4 @@ -@charset "utf-8"; +@use "utils/mixins"; @media screen and (max-width: 960px) { .system-users__filter-row { @@ -178,7 +178,7 @@ .post { &.post--compact { .post-message--overflow { - @include clearfix; + @include mixins.clearfix; margin-top: 22px; //Any value change to this needs to reflect for MARGIN_CHANGE_FOR_COMPACT_POST variable in show_more component } diff --git a/webapp/channels/src/sass/routes/_about-modal.scss b/webapp/channels/src/sass/routes/_about-modal.scss index 212ecf5865..b9c00c841e 100644 --- a/webapp/channels/src/sass/routes/_about-modal.scss +++ b/webapp/channels/src/sass/routes/_about-modal.scss @@ -1,9 +1,10 @@ -@charset 'UTF-8'; +@use "utils/mixins"; +@use "utils/variables"; .modal { .modal-content { border-radius: var(--radius-s); - box-shadow: 0 0 10px rgba($black, 0.5); + box-shadow: 0 0 10px rgba(variables.$black, 0.5); } .about-modal { @@ -51,7 +52,7 @@ } .about-modal__content { - @include clearfix; + @include mixins.clearfix; display: flex; flex-direction: row; diff --git a/webapp/channels/src/sass/routes/_access-history.scss b/webapp/channels/src/sass/routes/_access-history.scss index ec2f407468..8427ae8174 100644 --- a/webapp/channels/src/sass/routes/_access-history.scss +++ b/webapp/channels/src/sass/routes/_access-history.scss @@ -1,4 +1,3 @@ -@charset 'UTF-8'; .access-history__table { display: table; diff --git a/webapp/channels/src/sass/routes/_activity-log.scss b/webapp/channels/src/sass/routes/_activity-log.scss index 9af40b1a70..f1e5755b07 100644 --- a/webapp/channels/src/sass/routes/_activity-log.scss +++ b/webapp/channels/src/sass/routes/_activity-log.scss @@ -1,4 +1,4 @@ -@charset 'UTF-8'; +@use "utils/variables"; .animation--highlight { &::before { @@ -17,7 +17,7 @@ display: table; width: 100%; padding: 15px 0; - border-top: 1px solid $light-gray; + border-top: 1px solid variables.$light-gray; line-height: 1.8; &:first-child { diff --git a/webapp/channels/src/sass/routes/_admin-console.scss b/webapp/channels/src/sass/routes/_admin-console.scss index 7b6b0479cc..2440984dc1 100644 --- a/webapp/channels/src/sass/routes/_admin-console.scss +++ b/webapp/channels/src/sass/routes/_admin-console.scss @@ -1,4 +1,6 @@ -@charset 'UTF-8'; +@use "utils/functions"; +@use "utils/mixins"; +@use "utils/variables"; @use 'sass:color'; @@ -9,7 +11,7 @@ .admin-console { overflow: auto; height: 100%; - color: v(center-channel-color); + color: functions.v(center-channel-color); grid-area: center; > div { @@ -54,7 +56,7 @@ .admin-console__container { background-color: var(--sys-center-channel-bg); - box-shadow: 0 2px 3px 0 alpha-color($black, 0.08); + box-shadow: 0 2px 3px 0 functions.alpha-color(variables.$black, 0.08); } } @@ -64,19 +66,19 @@ mark { border-radius: 5%; - background-color: $highlight-color; + background-color: variables.$highlight-color; } .btn { &.btn-default { - background: alpha-color($black, 0.7); - color: $white; + background: functions.alpha-color(variables.$black, 0.7); + color: variables.$white; &:hover, &:focus, &:active { - background: alpha-color($black, 0.8); - color: $white; + background: functions.alpha-color(variables.$black, 0.8); + color: variables.$white; } } @@ -150,8 +152,8 @@ } .form-control { - border: 1px solid $light-gray; - background-color: $white; + border: 1px solid variables.$light-gray; + background-color: variables.$white; &:focus:not(.Input) { border-color: #66afe9; @@ -162,11 +164,11 @@ } &.disabled { - background-color: $bg--gray; + background-color: variables.$bg--gray; } .placeholder-text { - color: $gray; + color: variables.$gray; } &.Input { @@ -185,7 +187,7 @@ width: 100%; height: calc(100vh - 280px); padding: 10px; - border: $border-gray; + border: variables.$border-gray; margin-top: 14px; background-color: white; } @@ -261,9 +263,9 @@ &.alert-transparent { width: 100%; padding: 12px 14px; - border: $border-gray; + border: variables.$border-gray; margin: 0; - background: $white; + background: variables.$white; } hr { @@ -283,9 +285,9 @@ .banner { padding: 0.8em 1.5rem; - border: $border-gray; + border: variables.$border-gray; margin: 4px 0 2em; - background: $white; + background: variables.$white; font-size: 0.95em; &.banner--url { @@ -293,7 +295,7 @@ } code { - background: $bg--gray; + background: variables.$bg--gray; } p { @@ -305,7 +307,7 @@ .banner__url { padding: 0.7em 1em; border-radius: 2px; - background: alpha-color($black, 0.07); + background: functions.alpha-color(variables.$black, 0.07); word-break: break-all; } @@ -356,7 +358,7 @@ line-height: 1.5; a { - @include clearfix; + @include mixins.clearfix; display: block; text-decoration: none; @@ -399,7 +401,7 @@ .member-list-holder { overflow: visible; padding: 5px 0; - background: $white; + background: variables.$white; .more-modal__list { overflow: visible; @@ -426,7 +428,7 @@ align-items: center; justify-content: space-between; padding: 12px 20px; - border-bottom: 1px solid alpha-color($black, 0.1); + border-bottom: 1px solid functions.alpha-color(variables.$black, 0.1); background: white; font-family: Metropolis, sans-serif; font-size: 22px; @@ -484,20 +486,20 @@ flex: 0 0 60px; align-items: center; padding: 0 10px; - border-top: 1px solid alpha-color($black, 0.1); + border-top: 1px solid functions.alpha-color(variables.$black, 0.1); background: white; .save-button { min-width: 100px; height: 34px; margin: 0 10px; - background: $light-gray; - color: alpha-color($black, 0.5); + background: variables.$light-gray; + color: functions.alpha-color(variables.$black, 0.5); opacity: 1; &.btn-primary { - background: $primary-color; - color: $white; + background: variables.$primary-color; + color: variables.$white; } } @@ -513,8 +515,8 @@ transition: all 0.15s ease; &:hover { - background-color: $primary-color; - color: $white; + background-color: variables.$primary-color; + color: variables.$white; } } @@ -524,7 +526,7 @@ .control-label { padding: 5px 0 0 0; - @include text-clamp(2, 25); + @include mixins.text-clamp(2, 25); } div:nth-child(2) > .control-label { @@ -565,7 +567,7 @@ .trial-error { margin-top: 10px; - color: $dark-gray; + color: variables.$dark-gray; font-weight: 400; } @@ -573,7 +575,7 @@ .upgrade-legal-terms { margin-top: 10px; margin-bottom: 0; - color: $dark-gray; + color: variables.$dark-gray; font-size: 12px; font-weight: 400; } @@ -592,9 +594,9 @@ min-height: 100px; max-height: 240px; padding: 5px; - border: $border-gray; + border: variables.$border-gray; margin: 20px 0 10px; - background-color: $white; + background-color: variables.$white; } .admin-console__disabled-text { @@ -630,13 +632,13 @@ border-radius: 20px; margin: 8px; background: rgba(255, 255, 255, 0.05); - color: $white; + color: variables.$white; font-size: 14px; outline: none; &:focus, &.active { - border: 2px solid $primary-color; + border: 2px solid variables.$primary-color; margin: 7px; } } @@ -645,7 +647,7 @@ .input-clear-x { position: absolute; right: 16px; - color: $white; + color: variables.$white; font-weight: bold; } } @@ -664,12 +666,12 @@ mark { border-radius: 5%; - background-color: $highlight-color; + background-color: variables.$highlight-color; } body.announcement-bar--fixed & { - top: $announcement-bar-height + $backstage-bar-height; - padding-bottom: $announcement-bar-height; + top: variables.$announcement-bar-height + variables.$backstage-bar-height; + padding-bottom: variables.$announcement-bar-height; } .dropdown-menu { @@ -684,7 +686,7 @@ } .nav-pills__container { - @include font-smoothing(initial); + @include mixins.font-smoothing(initial); position: relative; height: calc(100% - 68px); @@ -706,8 +708,8 @@ .category-title { padding: 10px 12px; - background: alpha-color($white, 0.15); - color: $white; + background: functions.alpha-color(variables.$white, 0.15); + color: variables.$white; line-height: 15.4px; text-transform: uppercase; @@ -755,7 +757,7 @@ &:hover, &:focus { - color: alpha-color($white, 0.5); + color: functions.alpha-color(variables.$white, 0.5); } } } @@ -786,7 +788,7 @@ height: 100%; i { - color: alpha-color($white, 0.5); + color: functions.alpha-color(variables.$white, 0.5); font-size: 14px; line-height: 14px; } @@ -806,7 +808,7 @@ .sidebar-subsection-title { position: relative; display: block; - color: alpha-color($white, 0.5); + color: functions.alpha-color(variables.$white, 0.5); font-size: 13px; &:focus { @@ -814,29 +816,29 @@ } &:hover { - color: color.adjust($primary-color, $lightness: 10%); + color: color.adjust(variables.$primary-color, $lightness: 10%); text-decoration: none; i { - color: color.adjust($primary-color, $lightness: 10%); + color: color.adjust(variables.$primary-color, $lightness: 10%); } } &--active { - background: alpha-color($white, 0.1); - color: $white; + background: functions.alpha-color(variables.$white, 0.1); + color: variables.$white; i { - color: $white; + color: variables.$white; } &:hover, &:focus { - background: alpha-color($white, 0.1); - color: $white; + background: functions.alpha-color(variables.$white, 0.1); + color: variables.$white; i { - color: $white; + color: variables.$white; } } @@ -869,7 +871,7 @@ .fa { position: relative; right: -2px; - color: $white; + color: variables.$white; font-size: 13px; } @@ -944,7 +946,7 @@ } .manage-teams__teams { - border-top: $border-gray; + border-top: variables.$border-gray; margin: 1em 0 32px; margin-top: 1em; @@ -975,7 +977,7 @@ padding: 15px 0 4px; & + div { - border-top: $border-gray; + border-top: variables.$border-gray; } } @@ -1008,7 +1010,7 @@ display: flex; align-items: center; padding: 7px 10px; - border-bottom: $border-gray; + border-bottom: variables.$border-gray; .btn { font-size: 0.9em; @@ -1042,7 +1044,7 @@ .btn-default:focus { border: none; background-color: transparent; - color: $primary-color; + color: variables.$primary-color; } } diff --git a/webapp/channels/src/sass/routes/_backstage.scss b/webapp/channels/src/sass/routes/_backstage.scss index c531e85426..b861d1f67d 100644 --- a/webapp/channels/src/sass/routes/_backstage.scss +++ b/webapp/channels/src/sass/routes/_backstage.scss @@ -1,9 +1,13 @@ +@use "utils/functions"; +@use "utils/mixins"; +@use "utils/variables"; + .backstage-navbar { z-index: 100; - height: $backstage-bar-height; + height: variables.$backstage-bar-height; padding: 10px 20px; - border-bottom: 1px solid $light-gray; - background: $white; + border-bottom: 1px solid variables.$light-gray; + background: variables.$white; grid-area: header; } @@ -27,7 +31,7 @@ .backstage-body { overflow: auto; width: 100%; - background-color: $bg--gray; + background-color: variables.$bg--gray; grid-area: main; } @@ -35,7 +39,7 @@ max-width: 1200px; padding-left: 135px; margin: 46px auto; - background-color: $bg--gray; + background-color: variables.$bg--gray; vertical-align: top; } @@ -51,11 +55,11 @@ } > ul { - @include clearfix; + @include mixins.clearfix; border-radius: 2px; - border-right: 1px solid $light-gray; - border-left: 1px solid $light-gray; + border-right: 1px solid variables.$light-gray; + border-left: 1px solid variables.$light-gray; } } @@ -70,9 +74,9 @@ position: relative; display: block; padding: 0 10px; - border-top: 1px solid $light-gray; - border-bottom: 1px solid $light-gray; - color: $black; + border-top: 1px solid variables.$light-gray; + border-bottom: 1px solid variables.$light-gray; + color: variables.$black; line-height: 35px; .fa { @@ -89,8 +93,8 @@ } .category-title--active { - background-color: $primary-color; - color: $white; + background-color: variables.$primary-color; + color: variables.$white; .fa { opacity: 1; @@ -103,8 +107,8 @@ } .sections { - border-bottom: 1px solid $light-gray; - background: $white; + border-bottom: 1px solid variables.$light-gray; + background: variables.$white; } .section-title, @@ -122,19 +126,19 @@ .section-title--active, .subsection-title--active { - background-color: $primary-color; - color: $white; + background-color: variables.$primary-color; + color: variables.$white; font-weight: 600; } } .backstage-header__divider { margin: 0 10px; - color: $gray; + color: variables.$gray; } .backstage-header { - @include clearfix; + @include mixins.clearfix; display: flex; width: 100%; @@ -188,15 +192,15 @@ input { padding-left: 30px; - background: $white; + background: variables.$white; } } .backstage-list { min-height: 50px; padding: 5px 15px; - border: 1px solid $light-gray; - background-color: $white; + border: 1px solid variables.$light-gray; + background-color: variables.$white; } .backstage-list__help { @@ -207,7 +211,7 @@ .backstage-list__item { position: relative; padding: 20px 15px; - border-bottom: 1px solid $light-gray; + border-bottom: 1px solid variables.$light-gray; &:last-child { border: none; @@ -221,7 +225,7 @@ } .item-details__row + .item-details__row { - @include clearfix; + @include mixins.clearfix; text-overflow: ellipsis; } @@ -260,8 +264,8 @@ .backstage-form { position: relative; padding: 40px 30px 30px; - border: 1px solid $light-gray; - background-color: $white; + border: 1px solid variables.$light-gray; + background-color: variables.$white; &.backstage-form__confirmation { padding: 30px 30px 20px; @@ -287,16 +291,16 @@ } .form-control { - background: $white; + background: variables.$white; &:focus { - border-color: $primary-color; + border-color: variables.$primary-color; } } .form__help { margin-top: 1em; - color: $dark-gray; + color: variables.$dark-gray; font-size: 0.95em; & + .form__help { @@ -308,7 +312,7 @@ .backstage-form__footer { overflow: hidden; padding-top: 1.8em; - border-top: 1px solid $light-gray; + border-top: 1px solid variables.$light-gray; margin-top: 2.5em; text-align: right; @@ -338,10 +342,10 @@ .integration-option { flex: 0 0 30%; padding: 20px; - border: 1px solid $light-gray; + border: 1px solid variables.$light-gray; border-radius: 4px; margin: 0 30px 30px 0; - background-color: $white; + background-color: variables.$white; text-align: center; transition: all 0.2s ease; @@ -360,11 +364,11 @@ .integration-option__title { margin-bottom: 10px; - color: $black; + color: variables.$black; } .integration-option__description { - color: $dark-gray; + color: variables.$dark-gray; } .emoji-list__table { @@ -433,7 +437,7 @@ .bot-list__item { padding: 8px 12px; - background: alpha-color($black, 0.02); + background: functions.alpha-color(variables.$black, 0.02); font-size: 13px; &:first-child { @@ -441,7 +445,7 @@ } &:hover { - background: alpha-color($black, 0.06); + background: functions.alpha-color(variables.$black, 0.06); } &.alert { @@ -519,8 +523,8 @@ align-items: center; justify-content: center; border-radius: 50%; - background: $black; - color: $white; + background: variables.$black; + color: variables.$white; text-decoration: none; transition: all 0.15s ease; @@ -537,7 +541,7 @@ .bot-list__disabled { .item-details { - color: rgba($black, 0.75); + color: rgba(variables.$black, 0.75); } .bot-list { diff --git a/webapp/channels/src/sass/routes/_compliance.scss b/webapp/channels/src/sass/routes/_compliance.scss index dfba5a305d..418be4a59f 100644 --- a/webapp/channels/src/sass/routes/_compliance.scss +++ b/webapp/channels/src/sass/routes/_compliance.scss @@ -1,4 +1,4 @@ -@charset 'UTF-8'; +@use "utils/variables"; .compliance-panel__table, .audit-panel__table, @@ -8,9 +8,9 @@ min-height: 100px; max-height: 70vh; padding: 5px; - border: 1px solid $border-gray; + border: 1px solid variables.$border-gray; margin-top: 10px; - background-color: $white; + background-color: variables.$white; } .compliance-panel, diff --git a/webapp/channels/src/sass/routes/_docs.scss b/webapp/channels/src/sass/routes/_docs.scss index cc0f73cfe9..7d0912f483 100644 --- a/webapp/channels/src/sass/routes/_docs.scss +++ b/webapp/channels/src/sass/routes/_docs.scss @@ -1,5 +1,3 @@ -@charset 'UTF-8'; - .docs__page { padding-bottom: 20px; line-height: 1.7; diff --git a/webapp/channels/src/sass/routes/_error-page.scss b/webapp/channels/src/sass/routes/_error-page.scss index cb0e883e9a..94e7a830f7 100644 --- a/webapp/channels/src/sass/routes/_error-page.scss +++ b/webapp/channels/src/sass/routes/_error-page.scss @@ -1,5 +1,3 @@ -@charset 'UTF-8'; - body { &.error { .container-fluid { diff --git a/webapp/channels/src/sass/routes/_loading.scss b/webapp/channels/src/sass/routes/_loading.scss index c34ecca75f..23521c5a9f 100644 --- a/webapp/channels/src/sass/routes/_loading.scss +++ b/webapp/channels/src/sass/routes/_loading.scss @@ -1,5 +1,3 @@ -@charset 'UTF-8'; - @keyframes move { from { opacity: 1; diff --git a/webapp/channels/src/sass/routes/_module.scss b/webapp/channels/src/sass/routes/_module.scss index c0a5b19bca..abe5d78126 100644 --- a/webapp/channels/src/sass/routes/_module.scss +++ b/webapp/channels/src/sass/routes/_module.scss @@ -1,15 +1,15 @@ // Only for combining all the files in this folder -@import 'about-modal'; -@import 'access-history'; -@import 'activity-log'; -@import 'admin-console'; -@import 'backstage'; -@import 'compliance'; -@import 'docs'; -@import 'error-page'; -@import 'get-app'; -@import 'loading'; -@import 'print'; -@import 'settings'; -@import 'signup'; -@import 'statistics'; +@use 'about-modal'; +@use 'access-history'; +@use 'activity-log'; +@use 'admin-console'; +@use 'backstage'; +@use 'compliance'; +@use 'docs'; +@use 'error-page'; +@use 'get-app'; +@use 'loading'; +@use 'print'; +@use 'settings'; +@use 'signup'; +@use 'statistics'; diff --git a/webapp/channels/src/sass/routes/_print.scss b/webapp/channels/src/sass/routes/_print.scss index 7463306a90..70c00221a0 100644 --- a/webapp/channels/src/sass/routes/_print.scss +++ b/webapp/channels/src/sass/routes/_print.scss @@ -1,5 +1,3 @@ -@charset 'UTF-8'; - @media print { * { background: transparent !important; diff --git a/webapp/channels/src/sass/routes/_settings.scss b/webapp/channels/src/sass/routes/_settings.scss index 1dcd40471c..4e70ea137d 100644 --- a/webapp/channels/src/sass/routes/_settings.scss +++ b/webapp/channels/src/sass/routes/_settings.scss @@ -1,4 +1,6 @@ -@charset 'UTF-8'; +@use "utils/functions"; +@use "utils/mixins"; +@use "utils/variables"; .user-settings { min-height: 300px; @@ -154,8 +156,8 @@ padding: 0; border: none; border-radius: 50%; - background: $black; - color: $white; + background: variables.$black; + color: variables.$white; text-decoration: none; transition: all 0.15s ease; @@ -178,15 +180,15 @@ .img-preview__image { overflow: hidden; - border: 1px solid alpha-color($black, 0.15); + border: 1px solid functions.alpha-color(variables.$black, 0.15); border-radius: 6px; - background-color: $white; + background-color: variables.$white; } div { width: 100%; height: 100%; - background-color: $white; + background-color: variables.$white; background-position: center; background-repeat: no-repeat; background-size: cover; @@ -202,8 +204,8 @@ padding: 0; border: none; border-radius: 50%; - background: $black; - color: $white; + background: variables.$black; + color: variables.$white; line-height: 23px; text-align: center; text-decoration: none; @@ -253,7 +255,7 @@ } .section-max { - @include pie-clearfix; + @include mixins.pie-clearfix; display: flex; flex-direction: column; @@ -340,7 +342,7 @@ } &::before { - @include font-smoothing; + @include mixins.font-smoothing; position: absolute; z-index: 5; @@ -409,7 +411,7 @@ border-bottom: 1px solid; margin: 10px 20px 0 0; cursor: pointer; - font-size: em(13.5px); + font-size: functions.em(13.5px); font-weight: 600; .fa-minus { @@ -441,7 +443,7 @@ overflow-y: hidden; transition: all 0.4s ease-out; - @include pie-clearfix; + @include mixins.pie-clearfix; &.open { max-height: 1200px; @@ -581,7 +583,7 @@ width: 100%; padding: 6px 15px; border-radius: 4px; - color: $gray; + color: variables.$gray; font-weight: 600; text-align: left; text-overflow: ellipsis; @@ -620,7 +622,7 @@ left: 0; width: 5px; height: 100%; - background: $black; + background: variables.$black; content: ''; } } @@ -633,14 +635,14 @@ button { background: rgba(var(--button-bg-rgb), 0.08); - color: v(button-bg); + color: functions.v(button-bg); } } } } h3 { - font-size: em(20px); + font-size: functions.em(20px); } } @@ -724,7 +726,7 @@ border-radius: 4px; cursor: pointer; - @include clearfix; + @include mixins.clearfix; &:hover { background: #f9f9f9; @@ -801,7 +803,7 @@ } .section-min__describe { - @include clearfix; + @include mixins.clearfix; opacity: 0.75; text-overflow: ellipsis; diff --git a/webapp/channels/src/sass/routes/_signup.scss b/webapp/channels/src/sass/routes/_signup.scss index f29b3af9c6..46d13fbd88 100644 --- a/webapp/channels/src/sass/routes/_signup.scss +++ b/webapp/channels/src/sass/routes/_signup.scss @@ -1,4 +1,6 @@ -@charset 'UTF-8'; +@use "utils/functions"; +@use "utils/mixins"; +@use "utils/variables"; @use 'sass:color'; @@ -23,7 +25,7 @@ body { left: 0; width: 100%; padding: 0 1em 0.2em; - background: $bg--gray; + background: variables.$bg--gray; line-height: 33px; .fa { @@ -82,7 +84,7 @@ body { p { width: 100%; margin: 0; - color: color.adjust($black, $lightness: 50%); + color: color.adjust(variables.$black, $lightness: 50%); line-height: 1.6em; white-space: pre-wrap; word-break: break-word; @@ -140,7 +142,7 @@ body { h2 { margin-bottom: 0.8em; - font-size: em(30px); + font-size: functions.em(30px); font-weight: 600; letter-spacing: -0.5px; } @@ -153,12 +155,12 @@ body { h4 { margin-bottom: 1em; - font-size: em(20px); + font-size: functions.em(20px); font-weight: 600; } h5 { - font-size: em(16px); + font-size: functions.em(16px); } hr { @@ -247,7 +249,7 @@ body { } .form-control { - height: em(38px); + height: functions.em(38px); } .or__container { @@ -343,7 +345,7 @@ body { margin: 0 0 20px; .signup-team-dir { - @include pie-clearfix; + @include mixins.pie-clearfix; position: relative; display: flex; @@ -355,7 +357,7 @@ body { background: #fafafa; &:hover { - background: $white; + background: variables.$white; transition: background-color 0.15s ease; } @@ -399,7 +401,7 @@ body { text-decoration: none; &.disabled { - color: $dark-gray; + color: variables.$dark-gray; cursor: default; } } @@ -426,7 +428,7 @@ body { .signup-team__icon { position: relative; - color: $dark-gray; + color: variables.$dark-gray; font-size: 1.5em; &.fa-spin { @@ -449,7 +451,7 @@ body { .authorize-box { width: 500px; height: 280px; - border: 1px solid $black; + border: 1px solid variables.$black; margin: 100px auto; } diff --git a/webapp/channels/src/sass/routes/_statistics.scss b/webapp/channels/src/sass/routes/_statistics.scss index cb027adcf4..6e6c0fef09 100644 --- a/webapp/channels/src/sass/routes/_statistics.scss +++ b/webapp/channels/src/sass/routes/_statistics.scss @@ -1,4 +1,5 @@ -@charset 'UTF-8'; +@use "utils/mixins"; +@use "utils/variables"; .grid-statistics { display: grid; @@ -52,10 +53,10 @@ .total-count { width: 100%; - border: 1px solid $light-gray; + border: 1px solid variables.$light-gray; border-radius: 3px; margin: 1em 0; - background: $white; + background: variables.$white; text-align: center; &--has-message { @@ -64,7 +65,7 @@ .title { padding: 7px 10px; - border-bottom: 1px solid $light-gray; + border-bottom: 1px solid variables.$light-gray; font-size: 13px; font-weight: 400; text-align: left; @@ -103,9 +104,9 @@ width: 760px; height: 275px; padding: 5px 10px 10px; - border: 1px solid $light-gray; + border: 1px solid variables.$light-gray; margin: 10px; - background: $white; + background: variables.$white; clear: both; > div { @@ -134,11 +135,11 @@ } td { - @include clearfix; + @include mixins.clearfix; padding: 5px 5px 6px; - border-top: 1px solid $light-gray; - border-left: 1px solid $light-gray; + border-top: 1px solid variables.$light-gray; + border-left: 1px solid variables.$light-gray; font-size: 13px; font-weight: 400; text-overflow: ellipsis; diff --git a/webapp/channels/src/sass/styles.scss b/webapp/channels/src/sass/styles.scss index b3bc34c722..251df195c4 100644 --- a/webapp/channels/src/sass/styles.scss +++ b/webapp/channels/src/sass/styles.scss @@ -1,15 +1,15 @@ -@charset "utf-8"; +@use "sass:meta"; // Dependencies @import '~bootstrap/dist/css/bootstrap.css'; @import '~font-awesome/css/font-awesome.css'; // styles.scss -@import 'utils/module'; -@import 'base/module'; -@import 'routes/module'; -@import 'layout/module'; -@import 'components/module'; -@import 'responsive/module'; -@import 'widgets/module'; -@import 'admin_console_base/module'; +@include meta.load-css('utils/module'); +@include meta.load-css('base/module'); +@include meta.load-css('routes/module'); +@include meta.load-css('layout/module'); +@include meta.load-css('components/module'); +@include meta.load-css('responsive/module'); +@include meta.load-css('widgets/module'); +@include meta.load-css('admin_console_base/module'); diff --git a/webapp/channels/src/sass/utils/_animations.scss b/webapp/channels/src/sass/utils/_animations.scss index aa8037a2e7..41ce3e3009 100644 --- a/webapp/channels/src/sass/utils/_animations.scss +++ b/webapp/channels/src/sass/utils/_animations.scss @@ -1,4 +1,5 @@ -@charset 'UTF-8'; +@use "mixins"; +@use "variables"; @keyframes spin { from { @@ -12,7 +13,7 @@ @keyframes highlight { from { - @include alpha-property(background, $yellow, 0.5); + @include mixins.alpha-property(background, variables.$yellow, 0.5); } to { diff --git a/webapp/channels/src/sass/utils/_functions.scss b/webapp/channels/src/sass/utils/_functions.scss index 6812272f33..8efd24e390 100644 --- a/webapp/channels/src/sass/utils/_functions.scss +++ b/webapp/channels/src/sass/utils/_functions.scss @@ -1,5 +1,3 @@ -@charset "UTF-8"; - @use "sass:math"; @function em($pixels, $context: 14px) { diff --git a/webapp/channels/src/sass/utils/_mixins.scss b/webapp/channels/src/sass/utils/_mixins.scss index f622bef525..fc66205f0f 100644 --- a/webapp/channels/src/sass/utils/_mixins.scss +++ b/webapp/channels/src/sass/utils/_mixins.scss @@ -1,5 +1,3 @@ -@charset "utf-8"; - @mixin file-icon($path) { background-image: url($path); background-position: center; diff --git a/webapp/channels/src/sass/utils/_modifiers.scss b/webapp/channels/src/sass/utils/_modifiers.scss index 79352cf14c..240cd02873 100644 --- a/webapp/channels/src/sass/utils/_modifiers.scss +++ b/webapp/channels/src/sass/utils/_modifiers.scss @@ -1,4 +1,3 @@ -@charset 'UTF-8'; $positions: 't b l r'; $positions: 't'top, diff --git a/webapp/channels/src/sass/utils/_module.scss b/webapp/channels/src/sass/utils/_module.scss index 02611913b1..146a21f1d1 100644 --- a/webapp/channels/src/sass/utils/_module.scss +++ b/webapp/channels/src/sass/utils/_module.scss @@ -1,7 +1,7 @@ // Only for combining all the files in this folder -@import 'flex'; -@import 'functions'; -@import 'variables'; -@import 'mixins'; -@import 'animations'; -@import 'modifiers'; +@use 'flex'; +@use 'functions'; +@use 'variables'; +@use 'mixins'; +@use 'animations'; +@use 'modifiers'; diff --git a/webapp/channels/src/sass/utils/_variables.scss b/webapp/channels/src/sass/utils/_variables.scss index f530ab4cca..1a74907c7b 100644 --- a/webapp/channels/src/sass/utils/_variables.scss +++ b/webapp/channels/src/sass/utils/_variables.scss @@ -1,5 +1,3 @@ -@charset 'UTF-8'; - @use 'sass:color'; // Color Variables diff --git a/webapp/channels/src/sass/widgets/_module.scss b/webapp/channels/src/sass/widgets/_module.scss index 0eba56d4d1..07509d9b43 100644 --- a/webapp/channels/src/sass/widgets/_module.scss +++ b/webapp/channels/src/sass/widgets/_module.scss @@ -1,3 +1,3 @@ // Only for combining all the files in this folder -@import 'loading/loading-bars'; -@import 'loading/loading-spinner'; +@use 'loading/loading-bars'; +@use 'loading/loading-spinner'; diff --git a/webapp/channels/webpack.config.js b/webapp/channels/webpack.config.js index 71e05f3a70..1dfb85d0fb 100644 --- a/webapp/channels/webpack.config.js +++ b/webapp/channels/webpack.config.js @@ -95,7 +95,7 @@ var config = { loader: 'sass-loader', options: { sassOptions: { - includePaths: ['src/sass'], + loadPaths: ['src/sass'], }, }, }, diff --git a/webapp/package-lock.json b/webapp/package-lock.json index d981df4778..d995573f41 100644 --- a/webapp/package-lock.json +++ b/webapp/package-lock.json @@ -40,8 +40,8 @@ "eslint-plugin-react-hooks": "4.6.0", "mini-css-extract-plugin": "2.7.5", "patch-package": "8.0.0", - "sass": "1.71.1", - "sass-loader": "14.1.1", + "sass": "1.80.5", + "sass-loader": "16.0.2", "strip-ansi": "7.1.0", "style-loader": "4.0.0", "webpack": "5.95.0", @@ -5707,6 +5707,291 @@ "node": ">= 8" } }, + "node_modules/@parcel/watcher": { + "version": "2.4.1", + "resolved": "https://registry.npmjs.org/@parcel/watcher/-/watcher-2.4.1.tgz", + "integrity": "sha512-HNjmfLQEVRZmHRET336f20H/8kOozUGwk7yajvsonjNxbj2wBTK1WsQuHkD5yYh9RxFGL2EyDHryOihOwUoKDA==", + "dev": true, + "dependencies": { + "detect-libc": "^1.0.3", + "is-glob": "^4.0.3", + "micromatch": "^4.0.5", + "node-addon-api": "^7.0.0" + }, + "engines": { + "node": ">= 10.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + }, + "optionalDependencies": { + "@parcel/watcher-android-arm64": "2.4.1", + "@parcel/watcher-darwin-arm64": "2.4.1", + "@parcel/watcher-darwin-x64": "2.4.1", + "@parcel/watcher-freebsd-x64": "2.4.1", + "@parcel/watcher-linux-arm-glibc": "2.4.1", + "@parcel/watcher-linux-arm64-glibc": "2.4.1", + "@parcel/watcher-linux-arm64-musl": "2.4.1", + "@parcel/watcher-linux-x64-glibc": "2.4.1", + "@parcel/watcher-linux-x64-musl": "2.4.1", + "@parcel/watcher-win32-arm64": "2.4.1", + "@parcel/watcher-win32-ia32": "2.4.1", + "@parcel/watcher-win32-x64": "2.4.1" + } + }, + "node_modules/@parcel/watcher-android-arm64": { + "version": "2.4.1", + "resolved": "https://registry.npmjs.org/@parcel/watcher-android-arm64/-/watcher-android-arm64-2.4.1.tgz", + "integrity": "sha512-LOi/WTbbh3aTn2RYddrO8pnapixAziFl6SMxHM69r3tvdSm94JtCenaKgk1GRg5FJ5wpMCpHeW+7yqPlvZv7kg==", + "cpu": [ + "arm64" + ], + "dev": true, + "optional": true, + "os": [ + "android" + ], + "engines": { + "node": ">= 10.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/@parcel/watcher-darwin-arm64": { + "version": "2.4.1", + "resolved": "https://registry.npmjs.org/@parcel/watcher-darwin-arm64/-/watcher-darwin-arm64-2.4.1.tgz", + "integrity": "sha512-ln41eihm5YXIY043vBrrHfn94SIBlqOWmoROhsMVTSXGh0QahKGy77tfEywQ7v3NywyxBBkGIfrWRHm0hsKtzA==", + "cpu": [ + "arm64" + ], + "dev": true, + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": ">= 10.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/@parcel/watcher-darwin-x64": { + "version": "2.4.1", + "resolved": "https://registry.npmjs.org/@parcel/watcher-darwin-x64/-/watcher-darwin-x64-2.4.1.tgz", + "integrity": "sha512-yrw81BRLjjtHyDu7J61oPuSoeYWR3lDElcPGJyOvIXmor6DEo7/G2u1o7I38cwlcoBHQFULqF6nesIX3tsEXMg==", + "cpu": [ + "x64" + ], + "dev": true, + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": ">= 10.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/@parcel/watcher-freebsd-x64": { + "version": "2.4.1", + "resolved": "https://registry.npmjs.org/@parcel/watcher-freebsd-x64/-/watcher-freebsd-x64-2.4.1.tgz", + "integrity": "sha512-TJa3Pex/gX3CWIx/Co8k+ykNdDCLx+TuZj3f3h7eOjgpdKM+Mnix37RYsYU4LHhiYJz3DK5nFCCra81p6g050w==", + "cpu": [ + "x64" + ], + "dev": true, + "optional": true, + "os": [ + "freebsd" + ], + "engines": { + "node": ">= 10.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/@parcel/watcher-linux-arm-glibc": { + "version": "2.4.1", + "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm-glibc/-/watcher-linux-arm-glibc-2.4.1.tgz", + "integrity": "sha512-4rVYDlsMEYfa537BRXxJ5UF4ddNwnr2/1O4MHM5PjI9cvV2qymvhwZSFgXqbS8YoTk5i/JR0L0JDs69BUn45YA==", + "cpu": [ + "arm" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 10.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/@parcel/watcher-linux-arm64-glibc": { + "version": "2.4.1", + "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm64-glibc/-/watcher-linux-arm64-glibc-2.4.1.tgz", + "integrity": "sha512-BJ7mH985OADVLpbrzCLgrJ3TOpiZggE9FMblfO65PlOCdG++xJpKUJ0Aol74ZUIYfb8WsRlUdgrZxKkz3zXWYA==", + "cpu": [ + "arm64" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 10.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/@parcel/watcher-linux-arm64-musl": { + "version": "2.4.1", + "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm64-musl/-/watcher-linux-arm64-musl-2.4.1.tgz", + "integrity": "sha512-p4Xb7JGq3MLgAfYhslU2SjoV9G0kI0Xry0kuxeG/41UfpjHGOhv7UoUDAz/jb1u2elbhazy4rRBL8PegPJFBhA==", + "cpu": [ + "arm64" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 10.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/@parcel/watcher-linux-x64-glibc": { + "version": "2.4.1", + "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-x64-glibc/-/watcher-linux-x64-glibc-2.4.1.tgz", + "integrity": "sha512-s9O3fByZ/2pyYDPoLM6zt92yu6P4E39a03zvO0qCHOTjxmt3GHRMLuRZEWhWLASTMSrrnVNWdVI/+pUElJBBBg==", + "cpu": [ + "x64" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 10.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/@parcel/watcher-linux-x64-musl": { + "version": "2.4.1", + "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-x64-musl/-/watcher-linux-x64-musl-2.4.1.tgz", + "integrity": "sha512-L2nZTYR1myLNST0O632g0Dx9LyMNHrn6TOt76sYxWLdff3cB22/GZX2UPtJnaqQPdCRoszoY5rcOj4oMTtp5fQ==", + "cpu": [ + "x64" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 10.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/@parcel/watcher-win32-arm64": { + "version": "2.4.1", + "resolved": "https://registry.npmjs.org/@parcel/watcher-win32-arm64/-/watcher-win32-arm64-2.4.1.tgz", + "integrity": "sha512-Uq2BPp5GWhrq/lcuItCHoqxjULU1QYEcyjSO5jqqOK8RNFDBQnenMMx4gAl3v8GiWa59E9+uDM7yZ6LxwUIfRg==", + "cpu": [ + "arm64" + ], + "dev": true, + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">= 10.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/@parcel/watcher-win32-ia32": { + "version": "2.4.1", + "resolved": "https://registry.npmjs.org/@parcel/watcher-win32-ia32/-/watcher-win32-ia32-2.4.1.tgz", + "integrity": "sha512-maNRit5QQV2kgHFSYwftmPBxiuK5u4DXjbXx7q6eKjq5dsLXZ4FJiVvlcw35QXzk0KrUecJmuVFbj4uV9oYrcw==", + "cpu": [ + "ia32" + ], + "dev": true, + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">= 10.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/@parcel/watcher-win32-x64": { + "version": "2.4.1", + "resolved": "https://registry.npmjs.org/@parcel/watcher-win32-x64/-/watcher-win32-x64-2.4.1.tgz", + "integrity": "sha512-+DvS92F9ezicfswqrvIRM2njcYJbd5mb9CUgtrHCHmvn7pPPa+nMDRu1o1bYYz/l5IB2NVGNJWiH7h1E58IF2A==", + "cpu": [ + "x64" + ], + "dev": true, + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">= 10.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/@parcel/watcher/node_modules/detect-libc": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-1.0.3.tgz", + "integrity": "sha512-pGjwhsmsp4kL2RTz08wcOlGN83otlqHeD/Z5T8GXZB+/YcpQ/dgo+lbU8ZsGxV0HIvqqxo9l7mqYwyYMD9bKDg==", + "dev": true, + "bin": { + "detect-libc": "bin/detect-libc.js" + }, + "engines": { + "node": ">=0.10" + } + }, "node_modules/@popperjs/core": { "version": "2.11.8", "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz", @@ -20871,6 +21156,12 @@ "node": ">= 10.13" } }, + "node_modules/node-addon-api": { + "version": "7.1.1", + "resolved": "https://registry.npmjs.org/node-addon-api/-/node-addon-api-7.1.1.tgz", + "integrity": "sha512-5m3bsyrjFWE1xf7nz7YXdN4udnVtXK6/Yfgn5qnahL6bCkf2yKt4k3nuTKAtT4r3IG8JNR2ncsIMdZuAzJjHQQ==", + "dev": true + }, "node_modules/node-fetch": { "version": "2.7.0", "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.7.0.tgz", @@ -24054,12 +24345,13 @@ "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==" }, "node_modules/sass": { - "version": "1.71.1", - "resolved": "https://registry.npmjs.org/sass/-/sass-1.71.1.tgz", - "integrity": "sha512-wovtnV2PxzteLlfNzbgm1tFXPLoZILYAMJtvoXXkD7/+1uP41eKkIt1ypWq5/q2uT94qHjXehEYfmjKOvjL9sg==", + "version": "1.80.5", + "resolved": "https://registry.npmjs.org/sass/-/sass-1.80.5.tgz", + "integrity": "sha512-TQd2aoQl/+zsxRMEDSxVdpPIqeq9UFc6pr7PzkugiTx3VYCFPUaa3P4RrBQsqok4PO200Vkz0vXQBNlg7W907g==", "dev": true, "dependencies": { - "chokidar": ">=3.0.0 <4.0.0", + "@parcel/watcher": "^2.4.1", + "chokidar": "^4.0.0", "immutable": "^4.0.0", "source-map-js": ">=0.6.2 <2.0.0" }, @@ -24071,9 +24363,9 @@ } }, "node_modules/sass-loader": { - "version": "14.1.1", - "resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-14.1.1.tgz", - "integrity": "sha512-QX8AasDg75monlybel38BZ49JP5Z+uSKfKwF2rO7S74BywaRmGQMUBw9dtkS+ekyM/QnP+NOrRYq8ABMZ9G8jw==", + "version": "16.0.2", + "resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-16.0.2.tgz", + "integrity": "sha512-Ll6iXZ1EYwYT19SqW4mSBb76vSSi8JgzElmzIerhEGgzB5hRjDQIWsPmuk1UrAXkR16KJHqVY0eH+5/uw9Tmfw==", "dev": true, "dependencies": { "neo-async": "^2.6.2" @@ -24110,6 +24402,34 @@ } } }, + "node_modules/sass/node_modules/chokidar": { + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-4.0.1.tgz", + "integrity": "sha512-n8enUVCED/KVRQlab1hr3MVpcVMvxtZjmEa956u+4YijlmQED223XMSYj2tLuKvr4jcCTzNNMpQDUer72MMmzA==", + "dev": true, + "dependencies": { + "readdirp": "^4.0.1" + }, + "engines": { + "node": ">= 14.16.0" + }, + "funding": { + "url": "https://paulmillr.com/funding/" + } + }, + "node_modules/sass/node_modules/readdirp": { + "version": "4.0.2", + "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-4.0.2.tgz", + "integrity": "sha512-yDMz9g+VaZkqBYS/ozoBJwaBhTbZo3UNYQHNRw1D3UFQB8oHB4uS/tAODO+ZLjGWmUbKnIlOWO+aaIiAxrUWHA==", + "dev": true, + "engines": { + "node": ">= 14.16.0" + }, + "funding": { + "type": "individual", + "url": "https://paulmillr.com/funding/" + } + }, "node_modules/sax": { "version": "1.4.1", "resolved": "https://registry.npmjs.org/sax/-/sax-1.4.1.tgz", diff --git a/webapp/package.json b/webapp/package.json index 9e8d30c8e8..a69570bc57 100644 --- a/webapp/package.json +++ b/webapp/package.json @@ -46,8 +46,8 @@ "eslint-plugin-react-hooks": "4.6.0", "mini-css-extract-plugin": "2.7.5", "patch-package": "8.0.0", - "sass": "1.71.1", - "sass-loader": "14.1.1", + "sass": "1.80.5", + "sass-loader": "16.0.2", "strip-ansi": "7.1.0", "style-loader": "4.0.0", "webpack": "5.95.0", diff --git a/webapp/platform/components/src/footer_pagination/footer_pagination.scss b/webapp/platform/components/src/footer_pagination/footer_pagination.scss index f6e6e30c03..655e2f6bdd 100644 --- a/webapp/platform/components/src/footer_pagination/footer_pagination.scss +++ b/webapp/platform/components/src/footer_pagination/footer_pagination.scss @@ -1,7 +1,49 @@ -// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. -// See LICENSE.txt for license information. +// These mixins are from `src/sass/utils/_mixins.scss in the web app. They've been copied because rollup-plugin-sass +// that we use doesn't properly support @use. -@import '../../../../channels/src/sass/utils/mixins'; +@mixin button-small { + height: 32px; + padding: 0 16px; + font-size: 12px; + line-height: 10px; +} + +@mixin tertiary-button { + display: inline-flex; + align-items: center; + border: 0; + border-radius: 4px; + background: rgba(var(--button-bg-rgb), 0.08); + color: var(--button-bg); + font-weight: 600; + transition: all 0.15s ease-out; + + &:disabled { + background: rgba(var(--center-channel-color-rgb), 0.08); + color: rgba(var(--center-channel-color-rgb), 0.32); + } + + &:hover:enabled { + background: rgba(var(--button-bg-rgb), 0.12); + } + + &:active:enabled { + background: rgba(var(--button-bg-rgb), 0.16); + } + + i { + display: flex; + font-size: 18px; + + &:first-child::before { + margin: 0 7px 0 0; + } + + &:last-child::before { + margin: 0 0 0 7px; + } + } +} .footer-pagination { display: flex; diff --git a/webapp/platform/components/src/generic_modal/generic_modal.scss b/webapp/platform/components/src/generic_modal/generic_modal.scss index fc23585c3e..fd5d9c7ec8 100644 --- a/webapp/platform/components/src/generic_modal/generic_modal.scss +++ b/webapp/platform/components/src/generic_modal/generic_modal.scss @@ -1,11 +1,3 @@ -// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. -// See LICENSE.txt for license information. - -@charset 'UTF-8'; - -@import '../../../../channels/src/sass/utils/variables'; -@import '../../../../channels/src/sass/utils/mixins'; - .console__body .modal .GenericModal, .app__body .modal .GenericModal { &.modal-dialog {