From e5c0cfcd27d6844669fcdbcb88d6c4e289d537aa Mon Sep 17 00:00:00 2001
From: Kris <kris.aubuchon@discourse.org>
Date: Mon, 24 Jun 2024 09:54:34 -0400
Subject: [PATCH] UX: remove default use of quaternary color, update nav pill
styles (#27502)
---
.../addon/components/admin-theme-editor.js | 2 +-
.../admin/addon/templates/dashboard.hbs | 2 +-
.../fields/styling-preview/-preview-base.js | 2 +-
.../wizard/components/wizard-canvas.gjs | 4 +-
.../stylesheets/common/admin/admin_base.scss | 14 ++---
.../stylesheets/common/admin/customize.scss | 47 ++++++++--------
.../stylesheets/common/admin/dashboard.scss | 44 ++-------------
.../stylesheets/common/base/discourse.scss | 8 +++
.../stylesheets/common/base/new-user.scss | 37 +++----------
.../components/horizontal-overflow-nav.scss | 2 +-
.../common/components/keyboard_shortcuts.scss | 4 +-
.../stylesheets/common/components/navs.scss | 27 +++++-----
.../stylesheets/common/foundation/mixins.scss | 17 ++++++
.../common/select-kit/category-drop.scss | 9 ++--
.../common/select-kit/tag-drop.scss | 8 ++-
.../stylesheets/desktop/topic-list.scss | 4 +-
app/assets/stylesheets/mobile/topic-list.scss | 9 ++--
app/views/common/_discourse_splash.html.erb | 13 +----
config/locales/client.en.yml | 2 +-
.../stylesheets/common/chat-browse.scss | 3 +-
.../stylesheets/common/chat-footer.scss | 44 ++++++++-------
.../assets/stylesheets/common/chat-index.scss | 8 ++-
.../stylesheets/mobile/chat-footer.scss | 9 ----
.../components/modal/poll-ui-builder.hbs | 54 ++++++++++---------
.../stylesheets/common/poll-ui-builder.scss | 16 ++----
25 files changed, 169 insertions(+), 220 deletions(-)
diff --git a/app/assets/javascripts/admin/addon/components/admin-theme-editor.js b/app/assets/javascripts/admin/addon/components/admin-theme-editor.js
index 4330acf9549..0ffdd46a55c 100644
--- a/app/assets/javascripts/admin/addon/components/admin-theme-editor.js
+++ b/app/assets/javascripts/admin/addon/components/admin-theme-editor.js
@@ -52,7 +52,7 @@ export default class AdminThemeEditor extends Component {
if (fieldName && fieldName === "color_definitions") {
const example =
":root {\n" +
- " --mytheme-tertiary-or-quaternary: #{dark-light-choose($tertiary, $quaternary)};\n" +
+ " --mytheme-tertiary-or-highlight: #{dark-light-choose($tertiary, $highlight)};\n" +
"}";
return I18n.t("admin.customize.theme.color_definitions.placeholder", {
diff --git a/app/assets/javascripts/admin/addon/templates/dashboard.hbs b/app/assets/javascripts/admin/addon/templates/dashboard.hbs
index fabca7301b5..a8e9c1c0edd 100644
--- a/app/assets/javascripts/admin/addon/templates/dashboard.hbs
+++ b/app/assets/javascripts/admin/addon/templates/dashboard.hbs
@@ -19,7 +19,7 @@
@refreshProblems={{action "refreshProblems"}}
/>
-<ul class="navigation">
+<ul class="nav nav-pills">
<li class="navigation-item general">
<LinkTo @route="admin.dashboard.general" class="navigation-link">
{{i18n "admin.dashboard.general_tab"}}
diff --git a/app/assets/javascripts/discourse/app/static/wizard/components/fields/styling-preview/-preview-base.js b/app/assets/javascripts/discourse/app/static/wizard/components/fields/styling-preview/-preview-base.js
index 2e3447e47c3..8a6c83ec8bf 100644
--- a/app/assets/javascripts/discourse/app/static/wizard/components/fields/styling-preview/-preview-base.js
+++ b/app/assets/javascripts/discourse/app/static/wizard/components/fields/styling-preview/-preview-base.js
@@ -362,7 +362,7 @@ export default Component.extend({
const activeWidth = categoriesSize * (opts.categories ? 0.8 : 0.55);
ctx.beginPath();
- ctx.fillStyle = colors.quaternary;
+ ctx.fillStyle = colors.tertiary;
ctx.rect(
headerMargin * 2 + categoriesSize,
headerHeight + headerMargin,
diff --git a/app/assets/javascripts/discourse/app/static/wizard/components/wizard-canvas.gjs b/app/assets/javascripts/discourse/app/static/wizard/components/wizard-canvas.gjs
index f9c46d33fce..d715be3c215 100644
--- a/app/assets/javascripts/discourse/app/static/wizard/components/wizard-canvas.gjs
+++ b/app/assets/javascripts/discourse/app/static/wizard/components/wizard-canvas.gjs
@@ -9,9 +9,9 @@ const SIZE = 144;
const COLORS = [
"--tertiary",
- "--quaternary",
+ "--tertiary-high",
"--tertiary-medium",
- "--quaternary-low",
+ "--tertiary-low",
];
class Particle {
diff --git a/app/assets/stylesheets/common/admin/admin_base.scss b/app/assets/stylesheets/common/admin/admin_base.scss
index 08b0dcfbf15..8be8be7242d 100644
--- a/app/assets/stylesheets/common/admin/admin_base.scss
+++ b/app/assets/stylesheets/common/admin/admin_base.scss
@@ -497,8 +497,8 @@ $mobile-breakpoint: 700px;
.admin-controls {
display: flex;
- background-color: var(--primary-low);
align-items: center;
+ background: var(--primary-low);
.admin-actions {
margin-left: auto;
@@ -551,9 +551,9 @@ $mobile-breakpoint: 700px;
}
.nav-pills {
- width: calc(100% - 10px);
+ width: 100%;
display: inline-flex;
- padding: 10px;
+ padding: 0.5em;
margin: 0;
white-space: nowrap;
overflow-x: auto;
@@ -566,12 +566,6 @@ $mobile-breakpoint: 700px;
&:before {
display: none;
}
- > li {
- margin: 0;
- a.active {
- background: var(--primary-medium);
- }
- }
}
h1 {
font-size: var(--font-up-3);
@@ -700,7 +694,7 @@ $mobile-breakpoint: 700px;
color: var(--primary);
background-color: initial;
font-weight: 700;
- border-right: 4px solid var(--quaternary);
+ border-right: 4px solid var(--d-nav-color--active);
&::after {
display: none; // Hides the arrow
diff --git a/app/assets/stylesheets/common/admin/customize.scss b/app/assets/stylesheets/common/admin/customize.scss
index ffe99244aed..bedb64baf12 100644
--- a/app/assets/stylesheets/common/admin/customize.scss
+++ b/app/assets/stylesheets/common/admin/customize.scss
@@ -232,30 +232,43 @@
.themes-list-header {
width: 100%;
display: flex;
-
+ border: 1px solid var(--primary-low);
.tab {
border: none;
padding: 1em;
width: 50%;
box-sizing: border-box;
text-align: center;
+ background: var(--d-nav-bg-color);
&.themes-tab {
- border-top-right-radius: 0px;
- border-bottom-left-radius: 0px;
- border-bottom-right-radius: 0px;
+ border-top-right-radius: 0;
+ border-bottom-left-radius: 0;
+ border-bottom-right-radius: 0;
}
&.components-tab {
- border-top-left-radius: 0px;
- border-bottom-left-radius: 0px;
- border-bottom-right-radius: 0px;
+ border-top-left-radius: 0;
+ border-bottom-left-radius: 0;
+ border-bottom-right-radius: 0;
+ }
+
+ .discourse-no-touch & {
+ &:focus,
+ &:hover {
+ color: var(--d-nav-color--hover);
+ background: var(--d-nav-bg-color--hover);
+ &.active {
+ color: var(--d-nav-color--active);
+ background: var(--d-nav-bg-color--active);
+ }
+ .d-icon {
+ color: inherit;
+ }
+ }
}
&.active {
- background-color: var(--quaternary);
- color: var(--secondary);
- .d-icon {
- color: currentColor;
- }
+ position: relative;
+ @include nav-active();
}
}
@@ -556,11 +569,6 @@
margin: 0;
}
- .edit-main-nav .nav-pills > li a.active {
- background-color: var(--quaternary);
- color: var(--secondary);
- }
-
.edit-main-nav ul {
padding-bottom: 0;
}
@@ -587,11 +595,6 @@
margin-bottom: 0;
}
- a.active {
- background: var(--primary-medium);
- color: var(--secondary);
- }
-
a.blank:not(.active) {
color: var(--primary-medium);
}
diff --git a/app/assets/stylesheets/common/admin/dashboard.scss b/app/assets/stylesheets/common/admin/dashboard.scss
index 0b6df1bf63e..604a1250b42 100644
--- a/app/assets/stylesheets/common/admin/dashboard.scss
+++ b/app/assets/stylesheets/common/admin/dashboard.scss
@@ -6,55 +6,19 @@
}
.dashboard-next {
- .navigation {
+ .nav {
display: flex;
- margin: 0 0 1em 0;
- border-bottom: 1px solid var(--primary-low-mid);
-
- .navigation-item {
- display: inline;
- &:hover {
- background: var(--primary-very-low);
- }
- }
+ margin: 0 0 2em 0;
+ border-bottom: 1px solid var(--primary-low);
+ font-size: var(--font-up-1);
.navigation-link {
- display: block;
- font-weight: bold;
- padding: 0.6em 1em 0.5em 1em;
-
.emoji {
margin-right: 0.5em;
}
}
}
- @mixin active-navigation-item {
- .navigation-link {
- border-bottom: 0.4em solid var(--tertiary);
- }
- }
-
- &.dashboard-moderation .navigation-item.moderation {
- @include active-navigation-item;
- }
-
- &.dashboard-security .navigation-item.security {
- @include active-navigation-item;
- }
-
- &.dashboard-reports .navigation-item.reports {
- @include active-navigation-item;
- }
-
- &.dashboard-new-features .navigation-item.new-features {
- @include active-navigation-item;
- }
-
- &.general .navigation-item.general {
- @include active-navigation-item;
- }
-
.sections {
display: flex;
flex-direction: column;
diff --git a/app/assets/stylesheets/common/base/discourse.scss b/app/assets/stylesheets/common/base/discourse.scss
index addc134419e..0507344392d 100644
--- a/app/assets/stylesheets/common/base/discourse.scss
+++ b/app/assets/stylesheets/common/base/discourse.scss
@@ -10,6 +10,14 @@
--d-input-bg-color--disabled: var(--primary-low);
--d-input-text-color--disabled: var(--primary);
--d-input-border--disabled: 1px solid var(--primary-low);
+ --d-nav-color: var(--primary);
+ --d-nav-bg-color: transparent;
+ --d-nav-color--hover: var(--primary);
+ --d-nav-bg-color--hover: var(--d-hover);
+ --d-nav-color--active: var(--tertiary);
+ --d-nav-bg-color--active: transparent;
+ --d-nav-border-color--active: var(--d-nav-color--active);
+ --d-nav-underline-height: 0.125em;
--safe-area-inset-bottom: env(safe-area-inset-bottom);
}
diff --git a/app/assets/stylesheets/common/base/new-user.scss b/app/assets/stylesheets/common/base/new-user.scss
index bae2aaa0b49..17b025d7c27 100644
--- a/app/assets/stylesheets/common/base/new-user.scss
+++ b/app/assets/stylesheets/common/base/new-user.scss
@@ -11,8 +11,6 @@
justify-content: center;
align-items: center;
position: relative;
- border-bottom: var(--user-navigation__border-width) solid transparent;
- padding: calc(0.75em + var(--user-navigation__border-width)) 0.5em 0.75em;
@include breakpoint(extra-large) {
font-size: var(--font-0);
@@ -22,21 +20,6 @@
line-height: normal;
@include ellipsis;
}
-
- &:hover,
- &:focus {
- background: transparent;
- color: var(--quaternary);
- border-bottom: var(--user-navigation__border-width) solid
- var(--quaternary-low);
- }
-
- &.active {
- color: var(--quaternary);
- background: transparent;
- border-bottom: var(--user-navigation__border-width) solid
- var(--quaternary);
- }
}
}
}
@@ -92,20 +75,22 @@
}
.user-navigation-secondary {
- --user-navigation__border-width: 2px;
- --navigation-secondary-padding-top: 0.5em;
position: relative;
display: flex;
min-width: 0;
- margin: 0;
+
gap: 0 0.5em;
- border-bottom: 1px solid var(--primary-low);
+ font-size: var(--font-down-1);
.select-kit .select-kit-header {
height: 100%;
padding: 0.5em 1em;
}
+ .select-kit-collection {
+ font-size: var(--font-up-1);
+ }
+
.user-nav-messages-dropdown {
// manage long group names
max-width: 20vw;
@@ -144,27 +129,19 @@
.nav-pills {
flex: 1 1 auto;
- font-size: var(--font-down-1);
justify-content: flex-start;
- padding-top: var(--navigation-secondary-padding-top);
+ height: 100%;
li {
flex: 1 0 auto;
a {
- padding: 0.5em 0.5em
- calc(0.5em + var(--user-navigation__border-width));
-
span {
text-overflow: unset;
}
}
}
}
-
- [class*="horizontal-overflow-nav__scroll"] {
- padding-top: var(--navigation-secondary-padding-top);
- }
}
.empty-state {
diff --git a/app/assets/stylesheets/common/components/horizontal-overflow-nav.scss b/app/assets/stylesheets/common/components/horizontal-overflow-nav.scss
index e50c91dfdfc..beb664c51ae 100644
--- a/app/assets/stylesheets/common/components/horizontal-overflow-nav.scss
+++ b/app/assets/stylesheets/common/components/horizontal-overflow-nav.scss
@@ -39,7 +39,7 @@
.d-icon {
pointer-events: none;
margin-bottom: 0.2em;
- color: var(--quaternary);
+ color: var(--d-nav-color--active);
}
&.disabled {
// hiding with opacity so we can transition visibility
diff --git a/app/assets/stylesheets/common/components/keyboard_shortcuts.scss b/app/assets/stylesheets/common/components/keyboard_shortcuts.scss
index c4cc797a227..c226d3deeab 100644
--- a/app/assets/stylesheets/common/components/keyboard_shortcuts.scss
+++ b/app/assets/stylesheets/common/components/keyboard_shortcuts.scss
@@ -7,12 +7,12 @@
.topic-list-item.selected td:first-of-type,
.latest-topic-list-item.selected,
.search-results .fps-result.selected {
- box-shadow: inset 3px 0 0 var(--quaternary);
+ box-shadow: inset 3px 0 0 var(--d-nav-color--active);
}
.featured-topic.selected,
.topic-post.selected {
- box-shadow: -3px 0 0 var(--quaternary);
+ box-shadow: -3px 0 0 var(--d-nav-color--active);
}
.topic-list tr.selected,
diff --git a/app/assets/stylesheets/common/components/navs.scss b/app/assets/stylesheets/common/components/navs.scss
index eb4efd3a7b1..c5d4ce9fc22 100644
--- a/app/assets/stylesheets/common/components/navs.scss
+++ b/app/assets/stylesheets/common/components/navs.scss
@@ -23,44 +23,43 @@
display: flex;
flex-direction: row;
align-items: stretch;
+ gap: 0.5em;
> li {
display: flex;
- margin-right: 0.5em;
> a,
button {
- border: none;
+ position: relative;
border-radius: var(--d-nav-pill-border-radius);
- padding: 6px 12px;
+ padding: 0.65em 0.75em;
color: var(--primary);
- font-size: var(--font-up-1);
line-height: var(--line-height-small);
box-sizing: border-box;
min-height: 30px;
display: flex;
align-items: center;
+ background-color: var(--d-nav-bg-color);
transition: var(--d-button-transition);
.d-icon {
margin-right: 5px;
- opacity: 0.65;
+ color: var(--primary-high);
+ transition: color 0.2s;
}
&:hover {
- color: var(--quaternary);
- background-color: var(--quaternary-low);
+ color: var(--d-nav-color--hover);
+ background: var(--d-nav-bg-color--hover);
+ .d-icon {
+ color: var(--d-nav-color--hover);
+ }
}
}
a.active,
button.active {
- color: var(--secondary);
- background-color: var(--quaternary);
-
- .d-icon {
- opacity: 1;
- }
+ @include nav-active();
}
}
}
@@ -94,8 +93,6 @@
@include ellipsis;
&.active {
- color: var(--secondary);
- background-color: var(--quaternary);
position: relative;
--arrow-thickness: 8px;
diff --git a/app/assets/stylesheets/common/foundation/mixins.scss b/app/assets/stylesheets/common/foundation/mixins.scss
index 7b4a676c1c7..aed5ce8dc2b 100644
--- a/app/assets/stylesheets/common/foundation/mixins.scss
+++ b/app/assets/stylesheets/common/foundation/mixins.scss
@@ -263,3 +263,20 @@ $hpad: 0.65em;
text-decoration: none;
text-wrap: nowrap;
}
+
+@mixin nav-active() {
+ color: var(--d-nav-color--active);
+ background: var(--d-nav-bg-color--active);
+ .d-icon {
+ color: var(--d-nav-color--active);
+ }
+ &:after {
+ content: "";
+ position: absolute;
+ left: 0;
+ bottom: 0;
+ right: 0;
+ height: var(--d-nav-underline-height);
+ background: var(--d-nav-color--active);
+ }
+}
diff --git a/app/assets/stylesheets/common/select-kit/category-drop.scss b/app/assets/stylesheets/common/select-kit/category-drop.scss
index 23ad61d75d0..2638a7efc9b 100644
--- a/app/assets/stylesheets/common/select-kit/category-drop.scss
+++ b/app/assets/stylesheets/common/select-kit/category-drop.scss
@@ -19,12 +19,13 @@
}
}
+ .caret-icon {
+ color: var(--primary-high);
+ }
+
&.has-selection {
.category-drop-header {
- border-color: var(--quaternary);
- .caret-icon {
- color: var(--quaternary);
- }
+ border-color: var(--d-nav-border-color--active);
}
}
diff --git a/app/assets/stylesheets/common/select-kit/tag-drop.scss b/app/assets/stylesheets/common/select-kit/tag-drop.scss
index 115dd416148..685993835ea 100644
--- a/app/assets/stylesheets/common/select-kit/tag-drop.scss
+++ b/app/assets/stylesheets/common/select-kit/tag-drop.scss
@@ -16,10 +16,14 @@
}
}
+ .caret-icon {
+ color: var(--primary-high);
+ }
+
&.has-selection {
.tag-drop-header {
- color: var(--quaternary);
- border-color: var(--quaternary);
+ color: var(--d-nav-border-color--active);
+ border-color: var(--d-nav-border-color--active);
}
}
}
diff --git a/app/assets/stylesheets/desktop/topic-list.scss b/app/assets/stylesheets/desktop/topic-list.scss
index 7f55a03e462..2a538e54d24 100644
--- a/app/assets/stylesheets/desktop/topic-list.scss
+++ b/app/assets/stylesheets/desktop/topic-list.scss
@@ -62,9 +62,9 @@
line-height: var(--line-height-large);
padding-left: 0.5em;
padding-right: 0.5em;
+ position: relative;
&.active {
- background: var(--quaternary);
- color: var(--secondary);
+ @include nav-active();
}
}
diff --git a/app/assets/stylesheets/mobile/topic-list.scss b/app/assets/stylesheets/mobile/topic-list.scss
index 02f8cf739f5..5385a86b64c 100644
--- a/app/assets/stylesheets/mobile/topic-list.scss
+++ b/app/assets/stylesheets/mobile/topic-list.scss
@@ -566,11 +566,14 @@ td .main-link {
background: none;
border: none;
padding: 0.75em;
- box-shadow: 0 3px 0 var(--primary-low);
+ position: relative;
&.active {
- color: var(--quaternary);
- box-shadow: 0 3px 0 var(--quaternary);
+ @include nav-active;
+ &:after {
+ height: 0.15em;
+ bottom: -0.15em;
+ }
}
}
}
diff --git a/app/views/common/_discourse_splash.html.erb b/app/views/common/_discourse_splash.html.erb
index 44013c98244..e5e378ded98 100644
--- a/app/views/common/_discourse_splash.html.erb
+++ b/app/views/common/_discourse_splash.html.erb
@@ -17,7 +17,6 @@
--primary: #<%= ColorScheme.hex_for_name("primary", scheme_id) %>;
--secondary: #<%= ColorScheme.hex_for_name("secondary", scheme_id) %>;
--tertiary: #<%= ColorScheme.hex_for_name("tertiary", scheme_id) %>;
- --quaternary: #<%= ColorScheme.hex_for_name("quaternary", scheme_id) %>;
--highlight: #<%= ColorScheme.hex_for_name("highlight", scheme_id) %>;
--success: #<%= ColorScheme.hex_for_name("success", scheme_id) %>;
}
@@ -30,7 +29,6 @@
--primary: #<%= ColorScheme.hex_for_name("primary", scheme_id) %>;
--secondary: #<%= ColorScheme.hex_for_name("secondary", scheme_id) %>;
--tertiary: #<%= ColorScheme.hex_for_name("tertiary", scheme_id) %>;
- --quaternary: #<%= ColorScheme.hex_for_name("quaternary", scheme_id) %>;
--highlight: #<%= ColorScheme.hex_for_name("highlight", scheme_id) %>;
--success: #<%= ColorScheme.hex_for_name("success", scheme_id) %>;
}
@@ -42,7 +40,6 @@
--primary: #<%= ColorScheme.hex_for_name("primary", dark_scheme_id) %>;
--secondary: #<%= ColorScheme.hex_for_name("secondary", dark_scheme_id) %>;
--tertiary: #<%= ColorScheme.hex_for_name("tertiary", dark_scheme_id) %>;
- --quaternary: #<%= ColorScheme.hex_for_name("quaternary", dark_scheme_id) %>;
--highlight: #<%= ColorScheme.hex_for_name("highlight", dark_scheme_id) %>;
--success: #<%= ColorScheme.hex_for_name("success", dark_scheme_id) %>;
}
@@ -63,29 +60,22 @@
r: max(1vw, 11px);
cy: 50%;
filter: saturate(2) opacity(0.85);
- }
-
- .dots:first-child {
- fill: var(--quaternary);
+ fill: var(--tertiary);
}
.dots:nth-child(2) {
- fill: var(--quaternary);
animation-delay: 0.15s;
}
.dots:nth-child(3) {
- fill: var(--highlight);
animation-delay: 0.3s;
}
.dots:nth-child(4) {
- fill: var(--tertiary);
animation-delay: 0.45s;
}
.dots:nth-child(5) {
- fill: var(--tertiary);
animation-delay: 0.6s;
}
@@ -177,6 +167,7 @@
}
#d-splash .preloader-text-wrapper {
+ font-family: sans-serif;
position: absolute;
opacity: 0;
animation: fade-in 0.5s ease-in-out;
diff --git a/config/locales/client.en.yml b/config/locales/client.en.yml
index 978528e4a05..8eeab0f02bd 100644
--- a/config/locales/client.en.yml
+++ b/config/locales/client.en.yml
@@ -5874,7 +5874,7 @@ en:
description: "Links, some buttons, notifications, and accent color."
quaternary:
name: "quaternary"
- description: "Navigation links."
+ description: "For optional use in themes."
header_background:
name: "header background"
description: "Background color of the site's header."
diff --git a/plugins/chat/assets/stylesheets/common/chat-browse.scss b/plugins/chat/assets/stylesheets/common/chat-browse.scss
index a48ffa96d27..a598ce921da 100644
--- a/plugins/chat/assets/stylesheets/common/chat-browse.scss
+++ b/plugins/chat/assets/stylesheets/common/chat-browse.scss
@@ -60,7 +60,6 @@
&__filter {
display: inline;
- margin-right: 1em;
&:last-of-type {
margin-right: 0;
@@ -74,7 +73,7 @@
&__filter-link,
&__filter-link:visited {
color: var(--primary);
- font-size: var(--font-up-2);
+ font-size: var(--font-up-1);
padding: 0 0.25rem;
@include breakpoint(tablet) {
diff --git a/plugins/chat/assets/stylesheets/common/chat-footer.scss b/plugins/chat/assets/stylesheets/common/chat-footer.scss
index 017c4b70fb9..57a1f0e6a27 100644
--- a/plugins/chat/assets/stylesheets/common/chat-footer.scss
+++ b/plugins/chat/assets/stylesheets/common/chat-footer.scss
@@ -27,37 +27,45 @@
padding-block: 0.75rem;
height: 100%;
position: relative;
+ color: var(--primary-medium);
+ background: var(
+ --d-nav-bg-color
+ ) !important; // todo: remove need for !important
- &.--active {
- .d-icon,
- .d-button-label {
- color: var(--quaternary);
+ .d-icon {
+ margin-right: 0;
+ font-size: var(--font-up-2);
+ margin-bottom: 0.15em;
+ color: inherit;
+
+ &.d-icon-discourse-threads {
+ font-size: var(--font-up-2); // visual correction
}
}
+
&:hover,
&:focus {
- .discourse-no-touch &,
- .discourse-touch & {
- .d-icon,
- .d-button-label {
- color: var(--quaternary);
+ .discourse-no-touch & {
+ background: var(
+ --d-nav-bg-color--hover
+ ) !important; // todo: remove need for !important
+ color: var(--d-nav-color--hover);
+ .d-icon {
+ color: var(--d-nav-color--hover);
}
}
}
- .d-icon {
- margin-right: 0;
- font-size: var(--font-up-4);
- color: var(--primary-medium);
-
- &.d-icon-discourse-threads {
- font-size: var(--font-up-3); //visual correction
- }
+ &.--active,
+ &.--active:hover {
+ @include nav-active();
+ background: var(
+ --d-nav-bg-color--active
+ ) !important; // todo: remove need for !important
}
.d-button-label {
font-size: var(--font-down-1-rem);
- color: var(--primary-medium);
}
.c-unread-indicator {
diff --git a/plugins/chat/assets/stylesheets/common/chat-index.scss b/plugins/chat/assets/stylesheets/common/chat-index.scss
index f357ae66712..0ad92d5a5cd 100644
--- a/plugins/chat/assets/stylesheets/common/chat-index.scss
+++ b/plugins/chat/assets/stylesheets/common/chat-index.scss
@@ -21,8 +21,8 @@
&:focus {
@include default-focus;
- border-color: var(--quaternary);
- outline-color: var(--quaternary);
+ border-color: var(--d-nav-color--active);
+ outline-color: var(--d-nav-color--active);
}
}
@@ -83,10 +83,8 @@
display: flex;
align-items: center;
justify-content: space-between;
- font-weight: bold;
font-family: var(--heading-font-family);
- font-size: var(--font-down-1);
- color: var(--quaternary);
+ color: var(--primary);
.channel-title {
line-height: var(--line-height-medium);
diff --git a/plugins/chat/assets/stylesheets/mobile/chat-footer.scss b/plugins/chat/assets/stylesheets/mobile/chat-footer.scss
index 9b05d79dceb..f97637a059a 100644
--- a/plugins/chat/assets/stylesheets/mobile/chat-footer.scss
+++ b/plugins/chat/assets/stylesheets/mobile/chat-footer.scss
@@ -17,15 +17,6 @@
.c-unread-indicator.-urgent {
margin-left: 1rem;
}
-
- &.--active {
- .full-page-chat & {
- .d-icon,
- .d-button-label {
- color: var(--quaternary);
- }
- }
- }
}
}
diff --git a/plugins/poll/assets/javascripts/discourse/components/modal/poll-ui-builder.hbs b/plugins/poll/assets/javascripts/discourse/components/modal/poll-ui-builder.hbs
index 6fe2a959506..3768ad21668 100644
--- a/plugins/poll/assets/javascripts/discourse/components/modal/poll-ui-builder.hbs
+++ b/plugins/poll/assets/javascripts/discourse/components/modal/poll-ui-builder.hbs
@@ -5,36 +5,40 @@
class="poll-ui-builder"
>
<:body>
- <div class="input-group poll-type">
- <a
- href
- {{on "click" (fn this.updatePollType "regular")}}
- class="poll-type-value poll-type-value-regular
- {{if this.isRegular 'active'}}"
- >
- {{i18n "poll.ui_builder.poll_type.regular"}}
- </a>
-
- <a
- href
- {{on "click" (fn this.updatePollType "multiple")}}
- class="poll-type-value poll-type-value-multiple
- {{if this.isMultiple 'active'}}"
- >
- {{i18n "poll.ui_builder.poll_type.multiple"}}
- </a>
-
- {{#if this.showNumber}}
+ <ul class="nav nav-pills poll-type">
+ <li>
<a
href
- {{on "click" (fn this.updatePollType "number")}}
- class="poll-type-value poll-type-value-number
- {{if this.isNumber 'active'}}"
+ {{on "click" (fn this.updatePollType "regular")}}
+ class="poll-type-value poll-type-value-regular
+ {{if this.isRegular 'active'}}"
>
- {{i18n "poll.ui_builder.poll_type.number"}}
+ {{i18n "poll.ui_builder.poll_type.regular"}}
</a>
+ </li>
+ <li>
+ <a
+ href
+ {{on "click" (fn this.updatePollType "multiple")}}
+ class="poll-type-value poll-type-value-multiple
+ {{if this.isMultiple 'active'}}"
+ >
+ {{i18n "poll.ui_builder.poll_type.multiple"}}
+ </a>
+ </li>
+ {{#if this.showNumber}}
+ <li>
+ <a
+ href
+ {{on "click" (fn this.updatePollType "number")}}
+ class="poll-type-value poll-type-value-number
+ {{if this.isNumber 'active'}}"
+ >
+ {{i18n "poll.ui_builder.poll_type.number"}}
+ </a>
+ </li>
{{/if}}
- </div>
+ </ul>
{{#if this.showAdvanced}}
<div class="input-group poll-title">
diff --git a/plugins/poll/assets/stylesheets/common/poll-ui-builder.scss b/plugins/poll/assets/stylesheets/common/poll-ui-builder.scss
index 3c8f71e6389..074b2dfb886 100644
--- a/plugins/poll/assets/stylesheets/common/poll-ui-builder.scss
+++ b/plugins/poll/assets/stylesheets/common/poll-ui-builder.scss
@@ -50,19 +50,9 @@
}
.poll-type {
- display: block;
-
- .poll-type-value {
- border: none;
- color: var(--primary);
- display: inline-block;
- padding: 6px 12px 3px;
-
- &.active {
- background-color: var(--quaternary);
- color: var(--secondary);
- }
- }
+ padding: 0;
+ margin-top: 0;
+ border: none;
}
.poll-options {