github-mirror/discourse
2
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2024-12-14 19:53:47 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity
428b0c91ac
discourse/app/assets/stylesheets/common/base/sidebar-section.scss

Ignoring revisions in .git-blame-ignore-revs. Click here to bypass and see the normal blame view.

143 lines
2.9 KiB
SCSS
Raw Normal View History

UX: Add icons to all section links in Sidebar (#18378) This commit introduces an icon to all links in the sidebar. If an icon has not been configured, we will fall back to a generic "link" icon. As part of this commit, we also standardised the size of each prefix to 20px by 20px and set a fix margin. This is to allow sufficient space for text prefixes and image prefixes to be displayed. Tests have been intentionally left out for now as I don't feel like asserting for the icons will bring much value at this point. Time shall prove me wrong. Co-authored-by: awesomerobot <kris.aubuchon@discourse.org>
2022-09-29 12:28:01 +08:00
:root {
--d-sidebar-section-header-text-font-size: var(--font-up-1);
}
DEV: Refactor sidebar components to prepare for integration into hamburger dropdown (#17566)
2022-07-19 14:37:07 +08:00
.sidebar-section-wrapper {
UX: Add icons to all section links in Sidebar (#18378) This commit introduces an icon to all links in the sidebar. If an icon has not been configured, we will fall back to a generic "link" icon. As part of this commit, we also standardised the size of each prefix to 20px by 20px and set a fix margin. This is to allow sufficient space for text prefixes and image prefixes to be displayed. Tests have been intentionally left out for now as I don't feel like asserting for the icons will bring much value at this point. Time shall prove me wrong. Co-authored-by: awesomerobot <kris.aubuchon@discourse.org>
2022-09-29 12:28:01 +08:00
.discourse-no-touch & {
&:hover {
.sidebar-section-header-wrapper {
.btn.dropdown-select-box-header,
.sidebar-section-header-button {
opacity: 1;
}
}
}
}
UX: Revamp styling of sidebar The following changes are made in this commit: 1. Move caret icon in sidebar section header to the right. 1. Each row in sidebar takes the full width which enables us to do a full width highlight on hover and when sidebar link is active. 1. Ensure each row in Sidebar is of the same height. Internal refs: /t/70546, /t/72196, /t/71820
2022-08-18 15:03:28 +08:00
.sidebar-section-header-wrapper {
DEV: Refactor sidebar components to prepare for integration into hamburger dropdown (#17566)
2022-07-19 14:37:07 +08:00
display: flex;
UX: Add icons to all section links in Sidebar (#18378) This commit introduces an icon to all links in the sidebar. If an icon has not been configured, we will fall back to a generic "link" icon. As part of this commit, we also standardised the size of each prefix to 20px by 20px and set a fix margin. This is to allow sufficient space for text prefixes and image prefixes to be displayed. Tests have been intentionally left out for now as I don't feel like asserting for the icons will bring much value at this point. Time shall prove me wrong. Co-authored-by: awesomerobot <kris.aubuchon@discourse.org>
2022-09-29 12:28:01 +08:00
improve sidebar header sub-hovers (#18083)
2022-08-25 09:14:55 +08:00
.discourse-no-touch & {
&:hover {
background: var(--d-sidebar-highlight-color);
DEV: Refactor sidebar components to prepare for integration into hamburger dropdown (#17566)
2022-07-19 14:37:07 +08:00
}
improve sidebar header sub-hovers (#18083)
2022-08-25 09:14:55 +08:00
}
UX: Add icons to all section links in Sidebar (#18378) This commit introduces an icon to all links in the sidebar. If an icon has not been configured, we will fall back to a generic "link" icon. As part of this commit, we also standardised the size of each prefix to 20px by 20px and set a fix margin. This is to allow sufficient space for text prefixes and image prefixes to be displayed. Tests have been intentionally left out for now as I don't feel like asserting for the icons will bring much value at this point. Time shall prove me wrong. Co-authored-by: awesomerobot <kris.aubuchon@discourse.org>
2022-09-29 12:28:01 +08:00
improve sidebar header sub-hovers (#18083)
2022-08-25 09:14:55 +08:00
&:focus-within {
background: var(--d-sidebar-highlight-color);
}
.btn.dropdown-select-box-header,
.sidebar-section-header-button {
UX: Add icons to all section links in Sidebar (#18378) This commit introduces an icon to all links in the sidebar. If an icon has not been configured, we will fall back to a generic "link" icon. As part of this commit, we also standardised the size of each prefix to 20px by 20px and set a fix margin. This is to allow sufficient space for text prefixes and image prefixes to be displayed. Tests have been intentionally left out for now as I don't feel like asserting for the icons will bring much value at this point. Time shall prove me wrong. Co-authored-by: awesomerobot <kris.aubuchon@discourse.org>
2022-09-29 12:28:01 +08:00
.discourse-no-touch & {
transition: all 0.25s;
opacity: 0;
UX: ensures we don't focus invisible button in sidebar (#18502) Prior to this fix pressing tab multiple times in the sidebar, you would end up focusing invisible "sidebar-section-header-button". This change ensures the button will become visible when tabbing even if not hovering this section. The `background: transparent change` is to avoid a flashing background due to different transition timing on the collapsable button.
2022-10-06 20:35:06 +08:00
&:focus {
opacity: 1;
}
UX: Add icons to all section links in Sidebar (#18378) This commit introduces an icon to all links in the sidebar. If an icon has not been configured, we will fall back to a generic "link" icon. As part of this commit, we also standardised the size of each prefix to 20px by 20px and set a fix margin. This is to allow sufficient space for text prefixes and image prefixes to be displayed. Tests have been intentionally left out for now as I don't feel like asserting for the icons will bring much value at this point. Time shall prove me wrong. Co-authored-by: awesomerobot <kris.aubuchon@discourse.org>
2022-09-29 12:28:01 +08:00
}
improve sidebar header sub-hovers (#18083)
2022-08-25 09:14:55 +08:00
background: transparent;
border: none;
UX: Add icons to all section links in Sidebar (#18378) This commit introduces an icon to all links in the sidebar. If an icon has not been configured, we will fall back to a generic "link" icon. As part of this commit, we also standardised the size of each prefix to 20px by 20px and set a fix margin. This is to allow sufficient space for text prefixes and image prefixes to be displayed. Tests have been intentionally left out for now as I don't feel like asserting for the icons will bring much value at this point. Time shall prove me wrong. Co-authored-by: awesomerobot <kris.aubuchon@discourse.org>
2022-09-29 12:28:01 +08:00
margin-right: calc(var(--d-sidebar-row-horizontal-padding) / 3 * -1);
improve sidebar header sub-hovers (#18083)
2022-08-25 09:14:55 +08:00
padding: calc(var(--d-sidebar-row-horizontal-padding) / 5)
calc(var(--d-sidebar-row-horizontal-padding) / 3);
UX: Add icons to all section links in Sidebar (#18378) This commit introduces an icon to all links in the sidebar. If an icon has not been configured, we will fall back to a generic "link" icon. As part of this commit, we also standardised the size of each prefix to 20px by 20px and set a fix margin. This is to allow sufficient space for text prefixes and image prefixes to be displayed. Tests have been intentionally left out for now as I don't feel like asserting for the icons will bring much value at this point. Time shall prove me wrong. Co-authored-by: awesomerobot <kris.aubuchon@discourse.org>
2022-09-29 12:28:01 +08:00
DEV: Refactor sidebar components to prepare for integration into hamburger dropdown (#17566)
2022-07-19 14:37:07 +08:00
.d-icon {
font-size: var(--font-down-1);
color: var(--primary-medium);
improve sidebar header sub-hovers (#18083)
2022-08-25 09:14:55 +08:00
margin: 0;
DEV: Refactor sidebar components to prepare for integration into hamburger dropdown (#17566)
2022-07-19 14:37:07 +08:00
}
UX: Add icons to all section links in Sidebar (#18378) This commit introduces an icon to all links in the sidebar. If an icon has not been configured, we will fall back to a generic "link" icon. As part of this commit, we also standardised the size of each prefix to 20px by 20px and set a fix margin. This is to allow sufficient space for text prefixes and image prefixes to be displayed. Tests have been intentionally left out for now as I don't feel like asserting for the icons will bring much value at this point. Time shall prove me wrong. Co-authored-by: awesomerobot <kris.aubuchon@discourse.org>
2022-09-29 12:28:01 +08:00
improve sidebar header sub-hovers (#18083)
2022-08-25 09:14:55 +08:00
&:focus {
outline: none;
background: var(--primary-medium);
.d-icon {
color: var(--primary-very-low);
}
}
UX: Add icons to all section links in Sidebar (#18378) This commit introduces an icon to all links in the sidebar. If an icon has not been configured, we will fall back to a generic "link" icon. As part of this commit, we also standardised the size of each prefix to 20px by 20px and set a fix margin. This is to allow sufficient space for text prefixes and image prefixes to be displayed. Tests have been intentionally left out for now as I don't feel like asserting for the icons will bring much value at this point. Time shall prove me wrong. Co-authored-by: awesomerobot <kris.aubuchon@discourse.org>
2022-09-29 12:28:01 +08:00
improve sidebar header sub-hovers (#18083)
2022-08-25 09:14:55 +08:00
.discourse-no-touch & {
UX: sidebar styling, spacing consistency, etc (#18059)
2022-08-24 09:33:15 +08:00
&:hover {
improve sidebar header sub-hovers (#18083)
2022-08-25 09:14:55 +08:00
background: var(--primary-medium);
UX: sidebar styling, spacing consistency, etc (#18059)
2022-08-24 09:33:15 +08:00
.d-icon {
improve sidebar header sub-hovers (#18083)
2022-08-25 09:14:55 +08:00
color: var(--primary-very-low);
UX: sidebar styling, spacing consistency, etc (#18059)
2022-08-24 09:33:15 +08:00
}
}
DEV: Refactor sidebar components to prepare for integration into hamburger dropdown (#17566)
2022-07-19 14:37:07 +08:00
}
}
}
UX: Revamp styling of sidebar The following changes are made in this commit: 1. Move caret icon in sidebar section header to the right. 1. Each row in sidebar takes the full width which enables us to do a full width highlight on hover and when sidebar link is active. 1. Ensure each row in Sidebar is of the same height. Internal refs: /t/70546, /t/72196, /t/71820
2022-08-18 15:03:28 +08:00
.sidebar-section-header {
DEV: Refactor sidebar components to prepare for integration into hamburger dropdown (#17566)
2022-07-19 14:37:07 +08:00
flex: 1 1 auto;
color: var(--primary);
UX: Revamp styling of sidebar The following changes are made in this commit: 1. Move caret icon in sidebar section header to the right. 1. Each row in sidebar takes the full width which enables us to do a full width highlight on hover and when sidebar link is active. 1. Ensure each row in Sidebar is of the same height. Internal refs: /t/70546, /t/72196, /t/71820
2022-08-18 15:03:28 +08:00
align-items: center;
UX: sidebar styling, spacing consistency, etc (#18059)
2022-08-24 09:33:15 +08:00
min-width: 0;
UX: Add icons to all section links in Sidebar (#18378) This commit introduces an icon to all links in the sidebar. If an icon has not been configured, we will fall back to a generic "link" icon. As part of this commit, we also standardised the size of each prefix to 20px by 20px and set a fix margin. This is to allow sufficient space for text prefixes and image prefixes to be displayed. Tests have been intentionally left out for now as I don't feel like asserting for the icons will bring much value at this point. Time shall prove me wrong. Co-authored-by: awesomerobot <kris.aubuchon@discourse.org>
2022-09-29 12:28:01 +08:00
padding: 0;
DEV: Refactor sidebar components to prepare for integration into hamburger dropdown (#17566)
2022-07-19 14:37:07 +08:00
UX: Revamp styling of sidebar The following changes are made in this commit: 1. Move caret icon in sidebar section header to the right. 1. Each row in sidebar takes the full width which enables us to do a full width highlight on hover and when sidebar link is active. 1. Ensure each row in Sidebar is of the same height. Internal refs: /t/70546, /t/72196, /t/71820
2022-08-18 15:03:28 +08:00
&.sidebar-section-header-collapsable {
DEV: Use button for sidebar section header Buttons can be focused and action triggered via the enter key compared to a span.
2022-08-18 20:14:44 +08:00
justify-content: flex-start;
UX: ensures we don't focus invisible button in sidebar (#18502) Prior to this fix pressing tab multiple times in the sidebar, you would end up focusing invisible "sidebar-section-header-button". This change ensures the button will become visible when tabbing even if not hovering this section. The `background: transparent change` is to avoid a flashing background due to different transition timing on the collapsable button.
2022-10-06 20:35:06 +08:00
&:focus {
background: transparent;
}
DEV: Refactor sidebar components to prepare for integration into hamburger dropdown (#17566)
2022-07-19 14:37:07 +08:00
}
}
UX: Revamp styling of sidebar The following changes are made in this commit: 1. Move caret icon in sidebar section header to the right. 1. Each row in sidebar takes the full width which enables us to do a full width highlight on hover and when sidebar link is active. 1. Ensure each row in Sidebar is of the same height. Internal refs: /t/70546, /t/72196, /t/71820
2022-08-18 15:03:28 +08:00
.sidebar-section-header-text {
UX: Fix cut-off accents in sidebar headings (#18349)
2022-09-24 08:18:58 +08:00
line-height: normal;
UX: Revamp styling of sidebar The following changes are made in this commit: 1. Move caret icon in sidebar section header to the right. 1. Each row in sidebar takes the full width which enables us to do a full width highlight on hover and when sidebar link is active. 1. Ensure each row in Sidebar is of the same height. Internal refs: /t/70546, /t/72196, /t/71820
2022-08-18 15:03:28 +08:00
margin-right: 0.25em;
UX: Add icons to all section links in Sidebar (#18378) This commit introduces an icon to all links in the sidebar. If an icon has not been configured, we will fall back to a generic "link" icon. As part of this commit, we also standardised the size of each prefix to 20px by 20px and set a fix margin. This is to allow sufficient space for text prefixes and image prefixes to be displayed. Tests have been intentionally left out for now as I don't feel like asserting for the icons will bring much value at this point. Time shall prove me wrong. Co-authored-by: awesomerobot <kris.aubuchon@discourse.org>
2022-09-29 12:28:01 +08:00
font-size: var(--d-sidebar-section-header-text-font-size);
UX: sidebar styling, spacing consistency, etc (#18059)
2022-08-24 09:33:15 +08:00
@include ellipsis;
UX: Revamp styling of sidebar The following changes are made in this commit: 1. Move caret icon in sidebar section header to the right. 1. Each row in sidebar takes the full width which enables us to do a full width highlight on hover and when sidebar link is active. 1. Ensure each row in Sidebar is of the same height. Internal refs: /t/70546, /t/72196, /t/71820
2022-08-18 15:03:28 +08:00
}
.sidebar-section-header-caret {
UX: Add icons to all section links in Sidebar (#18378) This commit introduces an icon to all links in the sidebar. If an icon has not been configured, we will fall back to a generic "link" icon. As part of this commit, we also standardised the size of each prefix to 20px by 20px and set a fix margin. This is to allow sufficient space for text prefixes and image prefixes to be displayed. Tests have been intentionally left out for now as I don't feel like asserting for the icons will bring much value at this point. Time shall prove me wrong. Co-authored-by: awesomerobot <kris.aubuchon@discourse.org>
2022-09-29 12:28:01 +08:00
display: flex;
UX: sidebar styling, spacing consistency, etc (#18059)
2022-08-24 09:33:15 +08:00
flex: 0 0 auto;
UX: Add icons to all section links in Sidebar (#18378) This commit introduces an icon to all links in the sidebar. If an icon has not been configured, we will fall back to a generic "link" icon. As part of this commit, we also standardised the size of each prefix to 20px by 20px and set a fix margin. This is to allow sufficient space for text prefixes and image prefixes to be displayed. Tests have been intentionally left out for now as I don't feel like asserting for the icons will bring much value at this point. Time shall prove me wrong. Co-authored-by: awesomerobot <kris.aubuchon@discourse.org>
2022-09-29 12:28:01 +08:00
width: var(--d-sidebar-section-link-prefix-width);
height: var(--d-sidebar-section-link-prefix-width);
margin-right: var(--d-sidebar-section-link-prefix-margin-right);
align-items: center;
justify-content: center;
svg {
font-size: var(--font-down-1);
color: var(--primary-medium);
}
UX: Revamp styling of sidebar The following changes are made in this commit: 1. Move caret icon in sidebar section header to the right. 1. Each row in sidebar takes the full width which enables us to do a full width highlight on hover and when sidebar link is active. 1. Ensure each row in Sidebar is of the same height. Internal refs: /t/70546, /t/72196, /t/71820
2022-08-18 15:03:28 +08:00
}
DEV: Refactor sidebar components to prepare for integration into hamburger dropdown (#17566)
2022-07-19 14:37:07 +08:00
.select-kit-collection {
.texts {
font-size: var(--font-0);
text-transform: none;
line-height: var(--line-height-medium);
.name {
font-size: var(--font-0);
}
}
}
.sidebar-section-message-wrapper {
display: flex;
minor sidebar description styling for anons (#18332)
2022-09-23 01:05:32 +08:00
padding-top: 0;
UX: Correct padding and height for sidebar section message (#18410) Follow-up to f1cbc23f1ecbfff3bd4c6c1c1dfde057184122ba
2022-09-29 14:06:28 +08:00
height: initial;
DEV: Refactor sidebar components to prepare for integration into hamburger dropdown (#17566)
2022-07-19 14:37:07 +08:00
}
.sidebar-section-message {
minor sidebar description styling for anons (#18332)
2022-09-23 01:05:32 +08:00
color: var(--primary);
DEV: Fix lint (#18412)
2022-09-29 14:44:23 +08:00
padding-left: calc(
var(--d-sidebar-section-link-prefix-width) +
var(--d-sidebar-section-link-prefix-margin-right)
);
DEV: Refactor sidebar components to prepare for integration into hamburger dropdown (#17566)
2022-07-19 14:37:07 +08:00
}
.sidebar-section-content {
UX: Add icons to all section links in Sidebar (#18378) This commit introduces an icon to all links in the sidebar. If an icon has not been configured, we will fall back to a generic "link" icon. As part of this commit, we also standardised the size of each prefix to 20px by 20px and set a fix margin. This is to allow sufficient space for text prefixes and image prefixes to be displayed. Tests have been intentionally left out for now as I don't feel like asserting for the icons will bring much value at this point. Time shall prove me wrong. Co-authored-by: awesomerobot <kris.aubuchon@discourse.org>
2022-09-29 12:28:01 +08:00
padding-bottom: 1em;
A11Y: Improve the accessibility of sidebar content (#19131)
2022-11-22 05:32:43 +08:00
margin: 0;
DEV: Refactor sidebar components to prepare for integration into hamburger dropdown (#17566)
2022-07-19 14:37:07 +08:00
hr {
margin: 0em 1.5em;
}
}
}
Reference in New Issue Copy Permalink