From 3b8ba01fd96e1a54dfe323ac8bae21918df22251 Mon Sep 17 00:00:00 2001 From: Matthew Birtch Date: Sun, 17 Mar 2024 11:55:37 -0400 Subject: [PATCH] Add css variables for border radius (#26491) --- .../components/widgets/admin_console/admin_panel.scss | 9 ++++++--- webapp/channels/src/sass/base/_css_variables.scss | 8 ++++++++ webapp/channels/src/sass/components/_alerts.scss | 2 +- webapp/channels/src/sass/components/_buttons.scss | 4 ++-- .../src/sass/components/_dnd-pickers-dropdown-menu.scss | 2 +- .../sass/components/_edit-post-time-limit-button.scss | 2 +- webapp/channels/src/sass/components/_emoticons.scss | 3 +-- webapp/channels/src/sass/components/_inputs.scss | 2 +- webapp/channels/src/sass/components/_popover.scss | 2 +- webapp/channels/src/sass/components/_scrollbar.scss | 2 +- webapp/channels/src/sass/routes/_about-modal.scss | 2 +- webapp/channels/src/sass/routes/_admin-console.scss | 2 +- webapp/channels/src/sass/utils/_variables.scss | 1 - 13 files changed, 25 insertions(+), 16 deletions(-) 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 6a80df556a..bee34c8a79 100644 --- a/webapp/channels/src/components/widgets/admin_console/admin_panel.scss +++ b/webapp/channels/src/components/widgets/admin_console/admin_panel.scss @@ -1,11 +1,13 @@ @import 'utils/module'; .AdminPanel { + overflow: hidden; padding: 0; - border: solid 1px alpha-color($black, 0.1); - border-radius: $border-rad; + border: solid 1px rgba(var(--center-channel-color-rgb), 0.12); + border-radius: var(--radius-s); margin: 2em 0 1em; - box-shadow: 0 1px 2px 0 alpha-color($black, 0.5); + background-color: var(--center-channel-bg); + box-shadow: var(--elevation-1); font-size: 0.95em; .AdminPanel__content { @@ -35,6 +37,7 @@ align-items: center; justify-content: space-between; padding: 20px; + border-radius: var(--radius-s) var(--radius-s) 0 0; background: $white; h3 { diff --git a/webapp/channels/src/sass/base/_css_variables.scss b/webapp/channels/src/sass/base/_css_variables.scss index 8c49ca2f43..470744db2e 100644 --- a/webapp/channels/src/sass/base/_css_variables.scss +++ b/webapp/channels/src/sass/base/_css_variables.scss @@ -78,6 +78,14 @@ --elevation-5: 0 12px 32px 0 rgba(0, 0, 0, 0.12); --elevation-6: 0 20px 32px 0 rgba(0, 0, 0, 0.12); + //Corner Radius variables + --radius-xs: 2px; + --radius-s: 4px; + --radius-m: 8px; + --radius-l: 12px; + --radius-xl: 16px; + --radius-full: 50%; + // Global Header variables --global-header-background: var(--sidebar-teambar-bg); --global-header-text: var(--sidebar-header-text-color); diff --git a/webapp/channels/src/sass/components/_alerts.scss b/webapp/channels/src/sass/components/_alerts.scss index 6df079d24f..bf630362cf 100644 --- a/webapp/channels/src/sass/components/_alerts.scss +++ b/webapp/channels/src/sass/components/_alerts.scss @@ -2,7 +2,7 @@ .alert { padding: 8px 12px; - border-radius: $border-rad; + border-radius: var(--radius-s); .alert-transparent { border-color: rgba(var(--center-channel-color-rgb), 0.12); diff --git a/webapp/channels/src/sass/components/_buttons.scss b/webapp/channels/src/sass/components/_buttons.scss index 99ed18476e..5a44068b56 100644 --- a/webapp/channels/src/sass/components/_buttons.scss +++ b/webapp/channels/src/sass/components/_buttons.scss @@ -26,7 +26,7 @@ button { display: inline-block; width: 8px; height: 8px; - border-radius: 50%; + border-radius: var(--radius-full); margin: 0 0 0 40px; background: #f74343; } @@ -40,7 +40,7 @@ button { justify-content: center; padding: 0 20px; border: none; - border-radius: $border-rad * 2; + border-radius: var(--radius-s); font-size: 14px; font-weight: 600; gap: 8px; diff --git a/webapp/channels/src/sass/components/_dnd-pickers-dropdown-menu.scss b/webapp/channels/src/sass/components/_dnd-pickers-dropdown-menu.scss index 11a5379d2b..1bb34cee84 100644 --- a/webapp/channels/src/sass/components/_dnd-pickers-dropdown-menu.scss +++ b/webapp/channels/src/sass/components/_dnd-pickers-dropdown-menu.scss @@ -16,7 +16,7 @@ .btn { height: 4rem; padding: 0 2rem; - border-radius: $border-rad * 2; + border-radius: var(--radius-s); font-size: 14px; font-weight: 600; } 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 c378221ae9..fe6ef929ba 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 @@ -2,7 +2,7 @@ height: 26px; padding: 0 8px; border-color: #5b6672; - border-radius: $border-rad * 2; + border-radius: var(--radius-s); background: transparent; color: #5b6672; transition: all 0.15s ease; diff --git a/webapp/channels/src/sass/components/_emoticons.scss b/webapp/channels/src/sass/components/_emoticons.scss index be6c602201..b9c822ee07 100644 --- a/webapp/channels/src/sass/components/_emoticons.scss +++ b/webapp/channels/src/sass/components/_emoticons.scss @@ -90,8 +90,7 @@ width: 350px; flex-direction: column; border: 1px solid; - border-radius: $border-rad; - border-radius: 4px; + border-radius: var(--radius-s); margin-right: 3px; background: var(--center-channel-bg); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); diff --git a/webapp/channels/src/sass/components/_inputs.scss b/webapp/channels/src/sass/components/_inputs.scss index 062ffcad32..9ba0fa9b3b 100644 --- a/webapp/channels/src/sass/components/_inputs.scss +++ b/webapp/channels/src/sass/components/_inputs.scss @@ -30,7 +30,7 @@ } .form-control { - border-radius: $border-rad; + border-radius: var(--radius-xs); text-align: left; &:focus { diff --git a/webapp/channels/src/sass/components/_popover.scss b/webapp/channels/src/sass/components/_popover.scss index ce84597e75..a1a15779ee 100644 --- a/webapp/channels/src/sass/components/_popover.scss +++ b/webapp/channels/src/sass/components/_popover.scss @@ -14,7 +14,7 @@ .popover { padding: 0; - border-radius: $border-rad * 2; + border-radius: var(--radius-s); background: var(--center-channel-bg); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); color: var(--center-channel-color); diff --git a/webapp/channels/src/sass/components/_scrollbar.scss b/webapp/channels/src/sass/components/_scrollbar.scss index 66b72145c7..67d271772b 100644 --- a/webapp/channels/src/sass/components/_scrollbar.scss +++ b/webapp/channels/src/sass/components/_scrollbar.scss @@ -10,7 +10,7 @@ } ::-webkit-scrollbar-thumb { - border-radius: $border-rad * 2; + border-radius: var(--radius-s); background: rgba(var(--center-channel-color-rgb), 0.4); } diff --git a/webapp/channels/src/sass/routes/_about-modal.scss b/webapp/channels/src/sass/routes/_about-modal.scss index 174ae6af99..212ecf5865 100644 --- a/webapp/channels/src/sass/routes/_about-modal.scss +++ b/webapp/channels/src/sass/routes/_about-modal.scss @@ -2,7 +2,7 @@ .modal { .modal-content { - border-radius: $border-rad; + border-radius: var(--radius-s); box-shadow: 0 0 10px rgba($black, 0.5); } diff --git a/webapp/channels/src/sass/routes/_admin-console.scss b/webapp/channels/src/sass/routes/_admin-console.scss index 52bbaa7813..ed793e70ff 100644 --- a/webapp/channels/src/sass/routes/_admin-console.scss +++ b/webapp/channels/src/sass/routes/_admin-console.scss @@ -491,7 +491,7 @@ height: 34px; align-items: center; justify-content: center; - border-radius: $border-rad; + border-radius: var(--radius-s); margin: 0 10px 0 0; text-decoration: none; transition: all 0.15s ease; diff --git a/webapp/channels/src/sass/utils/_variables.scss b/webapp/channels/src/sass/utils/_variables.scss index 57822d0602..f530ab4cca 100644 --- a/webapp/channels/src/sass/utils/_variables.scss +++ b/webapp/channels/src/sass/utils/_variables.scss @@ -26,7 +26,6 @@ $announcement-bar-height: 40px; $backstage-bar-height: 43px; // Random variables -$border-rad: 2px; $emoji-per-row: 9; // needs to match variable `EMOJI_PER_ROW` in emoji_picker.jsx // Transition timing defaults