Discource-C
/
discourse
mirror of https://github.com/discourse/discourse.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

UX: remove default use of quaternary color, update nav pill styles (#27502)

This commit is contained in:
Kris 2024-06-24 09:54:34 -04:00 committed by GitHub
parent 0114c51f4b
commit e5c0cfcd27
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
25 changed files with 169 additions and 220 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/assets/javascripts/admin/addon/components/admin-theme-editor.js
View File

@ -52,7 +52,7 @@ export default class AdminThemeEditor extends Component {
if (fieldName && fieldName === "color_definitions") { if (fieldName && fieldName === "color_definitions") {
const example = const example =
":root {\n" + ":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", { return I18n.t("admin.customize.theme.color_definitions.placeholder", {

2
app/assets/javascripts/admin/addon/templates/dashboard.hbs
View File

@ -19,7 +19,7 @@
@refreshProblems={{action "refreshProblems"}} @refreshProblems={{action "refreshProblems"}}
/> />
<ul class="navigation"> <ul class="nav nav-pills">
<li class="navigation-item general"> <li class="navigation-item general">
<LinkTo @route="admin.dashboard.general" class="navigation-link"> <LinkTo @route="admin.dashboard.general" class="navigation-link">
{{i18n "admin.dashboard.general_tab"}} {{i18n "admin.dashboard.general_tab"}}

2
app/assets/javascripts/discourse/app/static/wizard/components/fields/styling-preview/-preview-base.js
View File

@ -362,7 +362,7 @@ export default Component.extend({
const activeWidth = categoriesSize * (opts.categories ? 0.8 : 0.55); const activeWidth = categoriesSize * (opts.categories ? 0.8 : 0.55);
ctx.beginPath(); ctx.beginPath();
ctx.fillStyle = colors.quaternary; ctx.fillStyle = colors.tertiary;
ctx.rect( ctx.rect(
headerMargin * 2 + categoriesSize, headerMargin * 2 + categoriesSize,
headerHeight + headerMargin, headerHeight + headerMargin,

4
app/assets/javascripts/discourse/app/static/wizard/components/wizard-canvas.gjs
View File

@ -9,9 +9,9 @@ const SIZE = 144;
const COLORS = [ const COLORS = [
"--tertiary", "--tertiary",
"--quaternary", "--tertiary-high",
"--tertiary-medium", "--tertiary-medium",
"--quaternary-low", "--tertiary-low",
]; ];
class Particle { class Particle {

14
app/assets/stylesheets/common/admin/admin_base.scss
View File

@ -497,8 +497,8 @@ $mobile-breakpoint: 700px;
.admin-controls { .admin-controls {
display: flex; display: flex;
background-color: var(--primary-low);
align-items: center; align-items: center;
background: var(--primary-low);
.admin-actions { .admin-actions {
margin-left: auto; margin-left: auto;
@ -551,9 +551,9 @@ $mobile-breakpoint: 700px;
} }
.nav-pills { .nav-pills {
width: calc(100% - 10px); width: 100%;
display: inline-flex; display: inline-flex;
padding: 10px; padding: 0.5em;
margin: 0; margin: 0;
white-space: nowrap; white-space: nowrap;
overflow-x: auto; overflow-x: auto;
@ -566,12 +566,6 @@ $mobile-breakpoint: 700px;
&:before { &:before {
display: none; display: none;
} }
> li {
margin: 0;
a.active {
background: var(--primary-medium);
}
}
} }
h1 { h1 {
font-size: var(--font-up-3); font-size: var(--font-up-3);
@ -700,7 +694,7 @@ $mobile-breakpoint: 700px;
color: var(--primary); color: var(--primary);
background-color: initial; background-color: initial;
font-weight: 700; font-weight: 700;
border-right: 4px solid var(--quaternary); border-right: 4px solid var(--d-nav-color--active);
&::after { &::after {
display: none; // Hides the arrow display: none; // Hides the arrow

47
app/assets/stylesheets/common/admin/customize.scss
View File

@ -232,30 +232,43 @@
.themes-list-header { .themes-list-header {
width: 100%; width: 100%;
display: flex; display: flex;
border: 1px solid var(--primary-low);
.tab { .tab {
border: none; border: none;
padding: 1em; padding: 1em;
width: 50%; width: 50%;
box-sizing: border-box; box-sizing: border-box;
text-align: center; text-align: center;
background: var(--d-nav-bg-color);
&.themes-tab { &.themes-tab {
border-top-right-radius: 0px; border-top-right-radius: 0;
border-bottom-left-radius: 0px; border-bottom-left-radius: 0;
border-bottom-right-radius: 0px; border-bottom-right-radius: 0;
} }
&.components-tab { &.components-tab {
border-top-left-radius: 0px; border-top-left-radius: 0;
border-bottom-left-radius: 0px; border-bottom-left-radius: 0;
border-bottom-right-radius: 0px; 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 { &.active {
background-color: var(--quaternary); position: relative;
color: var(--secondary); @include nav-active();
.d-icon {
color: currentColor;
}
} }
} }
@ -556,11 +569,6 @@
margin: 0; margin: 0;
} }
.edit-main-nav .nav-pills > li a.active {
background-color: var(--quaternary);
color: var(--secondary);
}
.edit-main-nav ul { .edit-main-nav ul {
padding-bottom: 0; padding-bottom: 0;
} }
@ -587,11 +595,6 @@
margin-bottom: 0; margin-bottom: 0;
} }
a.active {
background: var(--primary-medium);
color: var(--secondary);
}
a.blank:not(.active) { a.blank:not(.active) {
color: var(--primary-medium); color: var(--primary-medium);
} }

44
app/assets/stylesheets/common/admin/dashboard.scss
View File

@ -6,55 +6,19 @@
} }
.dashboard-next { .dashboard-next {
.navigation { .nav {
display: flex; display: flex;
margin: 0 0 1em 0; margin: 0 0 2em 0;
border-bottom: 1px solid var(--primary-low-mid); border-bottom: 1px solid var(--primary-low);
font-size: var(--font-up-1);
.navigation-item {
display: inline;
&:hover {
background: var(--primary-very-low);
}
}
.navigation-link { .navigation-link {
display: block;
font-weight: bold;
padding: 0.6em 1em 0.5em 1em;
.emoji { .emoji {
margin-right: 0.5em; 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 { .sections {
display: flex; display: flex;
flex-direction: column; flex-direction: column;

8
app/assets/stylesheets/common/base/discourse.scss
View File

@ -10,6 +10,14 @@
--d-input-bg-color--disabled: var(--primary-low); --d-input-bg-color--disabled: var(--primary-low);
--d-input-text-color--disabled: var(--primary); --d-input-text-color--disabled: var(--primary);
--d-input-border--disabled: 1px solid var(--primary-low); --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); --safe-area-inset-bottom: env(safe-area-inset-bottom);
} }

37
app/assets/stylesheets/common/base/new-user.scss
View File

@ -11,8 +11,6 @@
justify-content: center; justify-content: center;
align-items: center; align-items: center;
position: relative; 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) { @include breakpoint(extra-large) {
font-size: var(--font-0); font-size: var(--font-0);
@ -22,21 +20,6 @@
line-height: normal; line-height: normal;
@include ellipsis; @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-secondary {
--user-navigation__border-width: 2px;
--navigation-secondary-padding-top: 0.5em;
position: relative; position: relative;
display: flex; display: flex;
min-width: 0; min-width: 0;
margin: 0;
gap: 0 0.5em; gap: 0 0.5em;
border-bottom: 1px solid var(--primary-low); font-size: var(--font-down-1);
.select-kit .select-kit-header { .select-kit .select-kit-header {
height: 100%; height: 100%;
padding: 0.5em 1em; padding: 0.5em 1em;
} }
.select-kit-collection {
font-size: var(--font-up-1);
}
.user-nav-messages-dropdown { .user-nav-messages-dropdown {
// manage long group names // manage long group names
max-width: 20vw; max-width: 20vw;
@ -144,27 +129,19 @@
.nav-pills { .nav-pills {
flex: 1 1 auto; flex: 1 1 auto;
font-size: var(--font-down-1);
justify-content: flex-start; justify-content: flex-start;
padding-top: var(--navigation-secondary-padding-top); height: 100%;
li { li {
flex: 1 0 auto; flex: 1 0 auto;
a { a {
padding: 0.5em 0.5em
calc(0.5em + var(--user-navigation__border-width));
span { span {
text-overflow: unset; text-overflow: unset;
} }
} }
} }
} }
[class*="horizontal-overflow-nav__scroll"] {
padding-top: var(--navigation-secondary-padding-top);
}
} }
.empty-state { .empty-state {

2
app/assets/stylesheets/common/components/horizontal-overflow-nav.scss
View File

@ -39,7 +39,7 @@
.d-icon { .d-icon {
pointer-events: none; pointer-events: none;
margin-bottom: 0.2em; margin-bottom: 0.2em;
color: var(--quaternary); color: var(--d-nav-color--active);
} }
&.disabled { &.disabled {
// hiding with opacity so we can transition visibility // hiding with opacity so we can transition visibility

4
app/assets/stylesheets/common/components/keyboard_shortcuts.scss
View File

@ -7,12 +7,12 @@
.topic-list-item.selected td:first-of-type, .topic-list-item.selected td:first-of-type,
.latest-topic-list-item.selected, .latest-topic-list-item.selected,
.search-results .fps-result.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, .featured-topic.selected,
.topic-post.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, .topic-list tr.selected,

27
app/assets/stylesheets/common/components/navs.scss
View File

@ -23,44 +23,43 @@
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: stretch; align-items: stretch;
gap: 0.5em;
> li { > li {
display: flex; display: flex;
margin-right: 0.5em;
> a, > a,
button { button {
border: none; position: relative;
border-radius: var(--d-nav-pill-border-radius); border-radius: var(--d-nav-pill-border-radius);
padding: 6px 12px; padding: 0.65em 0.75em;
color: var(--primary); color: var(--primary);
font-size: var(--font-up-1);
line-height: var(--line-height-small); line-height: var(--line-height-small);
box-sizing: border-box; box-sizing: border-box;
min-height: 30px; min-height: 30px;
display: flex; display: flex;
align-items: center; align-items: center;
background-color: var(--d-nav-bg-color);
transition: var(--d-button-transition); transition: var(--d-button-transition);
.d-icon { .d-icon {
margin-right: 5px; margin-right: 5px;
opacity: 0.65; color: var(--primary-high);
transition: color 0.2s;
} }
&:hover { &:hover {
color: var(--quaternary); color: var(--d-nav-color--hover);
background-color: var(--quaternary-low); background: var(--d-nav-bg-color--hover);
.d-icon {
color: var(--d-nav-color--hover);
}
} }
} }
a.active, a.active,
button.active { button.active {
color: var(--secondary); @include nav-active();
background-color: var(--quaternary);
.d-icon {
opacity: 1;
}
} }
} }
} }
@ -94,8 +93,6 @@
@include ellipsis; @include ellipsis;
&.active { &.active {
color: var(--secondary);
background-color: var(--quaternary);
position: relative; position: relative;
--arrow-thickness: 8px; --arrow-thickness: 8px;

17
app/assets/stylesheets/common/foundation/mixins.scss
View File

@ -263,3 +263,20 @@ $hpad: 0.65em;
text-decoration: none; text-decoration: none;
text-wrap: nowrap; 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);
}
}

9
app/assets/stylesheets/common/select-kit/category-drop.scss
View File

@ -19,12 +19,13 @@
} }
} }
.caret-icon {
color: var(--primary-high);
}
&.has-selection { &.has-selection {
.category-drop-header { .category-drop-header {
border-color: var(--quaternary); border-color: var(--d-nav-border-color--active);
.caret-icon {
color: var(--quaternary);
}
} }
} }

8
app/assets/stylesheets/common/select-kit/tag-drop.scss
View File

@ -16,10 +16,14 @@
} }
} }
.caret-icon {
color: var(--primary-high);
}
&.has-selection { &.has-selection {
.tag-drop-header { .tag-drop-header {
color: var(--quaternary); color: var(--d-nav-border-color--active);
border-color: var(--quaternary); border-color: var(--d-nav-border-color--active);
} }
} }
} }

4
app/assets/stylesheets/desktop/topic-list.scss
View File

@ -62,9 +62,9 @@
line-height: var(--line-height-large); line-height: var(--line-height-large);
padding-left: 0.5em; padding-left: 0.5em;
padding-right: 0.5em; padding-right: 0.5em;
position: relative;
&.active { &.active {
background: var(--quaternary); @include nav-active();
color: var(--secondary);
} }
} }

9
app/assets/stylesheets/mobile/topic-list.scss
View File

@ -566,11 +566,14 @@ td .main-link {
background: none; background: none;
border: none; border: none;
padding: 0.75em; padding: 0.75em;
box-shadow: 0 3px 0 var(--primary-low); position: relative;
&.active { &.active {
color: var(--quaternary); @include nav-active;
box-shadow: 0 3px 0 var(--quaternary); &:after {
height: 0.15em;
bottom: -0.15em;
}
} }
} }
} }

13
app/views/common/_discourse_splash.html.erb
View File

@ -17,7 +17,6 @@
--primary: #<%= ColorScheme.hex_for_name("primary", scheme_id) %>; --primary: #<%= ColorScheme.hex_for_name("primary", scheme_id) %>;
--secondary: #<%= ColorScheme.hex_for_name("secondary", scheme_id) %>; --secondary: #<%= ColorScheme.hex_for_name("secondary", scheme_id) %>;
--tertiary: #<%= ColorScheme.hex_for_name("tertiary", 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) %>; --highlight: #<%= ColorScheme.hex_for_name("highlight", scheme_id) %>;
--success: #<%= ColorScheme.hex_for_name("success", scheme_id) %>; --success: #<%= ColorScheme.hex_for_name("success", scheme_id) %>;
} }
@ -30,7 +29,6 @@
--primary: #<%= ColorScheme.hex_for_name("primary", scheme_id) %>; --primary: #<%= ColorScheme.hex_for_name("primary", scheme_id) %>;
--secondary: #<%= ColorScheme.hex_for_name("secondary", scheme_id) %>; --secondary: #<%= ColorScheme.hex_for_name("secondary", scheme_id) %>;
--tertiary: #<%= ColorScheme.hex_for_name("tertiary", 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) %>; --highlight: #<%= ColorScheme.hex_for_name("highlight", scheme_id) %>;
--success: #<%= ColorScheme.hex_for_name("success", scheme_id) %>; --success: #<%= ColorScheme.hex_for_name("success", scheme_id) %>;
} }
@ -42,7 +40,6 @@
--primary: #<%= ColorScheme.hex_for_name("primary", dark_scheme_id) %>; --primary: #<%= ColorScheme.hex_for_name("primary", dark_scheme_id) %>;
--secondary: #<%= ColorScheme.hex_for_name("secondary", dark_scheme_id) %>; --secondary: #<%= ColorScheme.hex_for_name("secondary", dark_scheme_id) %>;
--tertiary: #<%= ColorScheme.hex_for_name("tertiary", 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) %>; --highlight: #<%= ColorScheme.hex_for_name("highlight", dark_scheme_id) %>;
--success: #<%= ColorScheme.hex_for_name("success", dark_scheme_id) %>; --success: #<%= ColorScheme.hex_for_name("success", dark_scheme_id) %>;
} }
@ -63,29 +60,22 @@
r: max(1vw, 11px); r: max(1vw, 11px);
cy: 50%; cy: 50%;
filter: saturate(2) opacity(0.85); filter: saturate(2) opacity(0.85);
} fill: var(--tertiary);
.dots:first-child {
fill: var(--quaternary);
} }
.dots:nth-child(2) { .dots:nth-child(2) {
fill: var(--quaternary);
animation-delay: 0.15s; animation-delay: 0.15s;
} }
.dots:nth-child(3) { .dots:nth-child(3) {
fill: var(--highlight);
animation-delay: 0.3s; animation-delay: 0.3s;
} }
.dots:nth-child(4) { .dots:nth-child(4) {
fill: var(--tertiary);
animation-delay: 0.45s; animation-delay: 0.45s;
} }
.dots:nth-child(5) { .dots:nth-child(5) {
fill: var(--tertiary);
animation-delay: 0.6s; animation-delay: 0.6s;
} }
@ -177,6 +167,7 @@
} }
#d-splash .preloader-text-wrapper { #d-splash .preloader-text-wrapper {
font-family: sans-serif;
position: absolute; position: absolute;
opacity: 0; opacity: 0;
animation: fade-in 0.5s ease-in-out; animation: fade-in 0.5s ease-in-out;

2
config/locales/client.en.yml
View File

@ -5874,7 +5874,7 @@ en:
description: "Links, some buttons, notifications, and accent color." description: "Links, some buttons, notifications, and accent color."
quaternary: quaternary:
name: "quaternary" name: "quaternary"
description: "Navigation links." description: "For optional use in themes."
header_background: header_background:
name: "header background" name: "header background"
description: "Background color of the site's header." description: "Background color of the site's header."

3
plugins/chat/assets/stylesheets/common/chat-browse.scss
View File

@ -60,7 +60,6 @@
&__filter { &__filter {
display: inline; display: inline;
margin-right: 1em;
&:last-of-type { &:last-of-type {
margin-right: 0; margin-right: 0;
@ -74,7 +73,7 @@
&__filter-link, &__filter-link,
&__filter-link:visited { &__filter-link:visited {
color: var(--primary); color: var(--primary);
font-size: var(--font-up-2); font-size: var(--font-up-1);
padding: 0 0.25rem; padding: 0 0.25rem;
@include breakpoint(tablet) { @include breakpoint(tablet) {

44
plugins/chat/assets/stylesheets/common/chat-footer.scss
View File

@ -27,37 +27,45 @@
padding-block: 0.75rem; padding-block: 0.75rem;
height: 100%; height: 100%;
position: relative; position: relative;
color: var(--primary-medium);
background: var(
--d-nav-bg-color
) !important; // todo: remove need for !important
&.--active { .d-icon {
.d-icon, margin-right: 0;
.d-button-label { font-size: var(--font-up-2);
color: var(--quaternary); margin-bottom: 0.15em;
color: inherit;
&.d-icon-discourse-threads {
font-size: var(--font-up-2); // visual correction
} }
} }
&:hover, &:hover,
&:focus { &:focus {
.discourse-no-touch &, .discourse-no-touch & {
.discourse-touch & { background: var(
.d-icon, --d-nav-bg-color--hover
.d-button-label { ) !important; // todo: remove need for !important
color: var(--quaternary); color: var(--d-nav-color--hover);
.d-icon {
color: var(--d-nav-color--hover);
} }
} }
} }
.d-icon { &.--active,
margin-right: 0; &.--active:hover {
font-size: var(--font-up-4); @include nav-active();
color: var(--primary-medium); background: var(
--d-nav-bg-color--active
&.d-icon-discourse-threads { ) !important; // todo: remove need for !important
font-size: var(--font-up-3); //visual correction
}
} }
.d-button-label { .d-button-label {
font-size: var(--font-down-1-rem); font-size: var(--font-down-1-rem);
color: var(--primary-medium);
} }
.c-unread-indicator { .c-unread-indicator {

8
plugins/chat/assets/stylesheets/common/chat-index.scss
View File

@ -21,8 +21,8 @@
&:focus { &:focus {
@include default-focus; @include default-focus;
border-color: var(--quaternary); border-color: var(--d-nav-color--active);
outline-color: var(--quaternary); outline-color: var(--d-nav-color--active);
} }
} }
@ -83,10 +83,8 @@
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
font-weight: bold;
font-family: var(--heading-font-family); font-family: var(--heading-font-family);
font-size: var(--font-down-1); color: var(--primary);
color: var(--quaternary);
.channel-title { .channel-title {
line-height: var(--line-height-medium); line-height: var(--line-height-medium);

9
plugins/chat/assets/stylesheets/mobile/chat-footer.scss
View File

@ -17,15 +17,6 @@
.c-unread-indicator.-urgent { .c-unread-indicator.-urgent {
margin-left: 1rem; margin-left: 1rem;
} }
&.--active {
.full-page-chat & {
.d-icon,
.d-button-label {
color: var(--quaternary);
}
}
}
} }
} }

54
plugins/poll/assets/javascripts/discourse/components/modal/poll-ui-builder.hbs
View File

@ -5,36 +5,40 @@
class="poll-ui-builder" class="poll-ui-builder"
> >
<:body> <:body>
<div class="input-group poll-type"> <ul class="nav nav-pills poll-type">
<a <li>
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}}
<a <a
href href
{{on "click" (fn this.updatePollType "number")}} {{on "click" (fn this.updatePollType "regular")}}
class="poll-type-value poll-type-value-number class="poll-type-value poll-type-value-regular
{{if this.isNumber 'active'}}" {{if this.isRegular 'active'}}"
> >
{{i18n "poll.ui_builder.poll_type.number"}} {{i18n "poll.ui_builder.poll_type.regular"}}
</a> </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}} {{/if}}
</div> </ul>
{{#if this.showAdvanced}} {{#if this.showAdvanced}}
<div class="input-group poll-title"> <div class="input-group poll-title">

16
plugins/poll/assets/stylesheets/common/poll-ui-builder.scss
View File

@ -50,19 +50,9 @@
} }
.poll-type { .poll-type {
display: block; padding: 0;
margin-top: 0;
.poll-type-value { border: none;
border: none;
color: var(--primary);
display: inline-block;
padding: 6px 12px 3px;
&.active {
background-color: var(--quaternary);
color: var(--secondary);
}
}
} }
.poll-options { .poll-options {