UX: remove default use of quaternary color, update nav pill styles (#27502)
This commit is contained in:
Kris
GitHub
parent
0114c51f4b
commit
e5c0cfcd27
|
|
@ -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", {
|
||||
|
|
|
|||
|
|
@ -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"}}
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -9,9 +9,9 @@ const SIZE = 144;
|
|||
|
||||
const COLORS = [
|
||||
"--tertiary",
|
||||
"--quaternary",
|
||||
"--tertiary-high",
|
||||
"--tertiary-medium",
|
||||
"--quaternary-low",
|
||||
"--tertiary-low",
|
||||
];
|
||||
|
||||
class Particle {
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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."
|
||||
|
|
|
|||
|
|
@ -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) {
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -17,15 +17,6 @@
|
|||
.c-unread-indicator.-urgent {
|
||||
margin-left: 1rem;
|
||||
}
|
||||
|
||||
&.--active {
|
||||
.full-page-chat & {
|
||||
.d-icon,
|
||||
.d-button-label {
|
||||
color: var(--quaternary);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
Loading…
Reference in New Issue