discourse/app/assets/stylesheets/common/base/menu-panel.scss

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

745 lines
14 KiB
SCSS
Raw Normal View History

.menu-panel.slide-in {
position: fixed;
right: 0;
box-shadow: shadow("header");
2015-09-10 12:49:54 -04:00
.panel-body {
width: 100%;
2015-09-10 12:49:54 -04:00
}
}
.header-cloak {
display: none;
}
.menu-panel.drop-down {
position: absolute;
// positions are relative to the .d-header .panel div
top: 100%; // directly underneath .panel
right: -10px; // 10px to the right of .panel - adjust as needed
max-height: 80vh;
}
.menu-panel {
border: 1px solid var(--primary-low);
box-shadow: shadow("menu-panel");
background-color: var(--secondary);
z-index: z("header");
2015-08-29 19:26:02 -04:00
padding: 0.5em;
width: 320px;
overflow: hidden;
display: flex;
flex-direction: column;
box-sizing: border-box;
hr {
margin: 3px 0;
}
.panel-header {
position: absolute;
right: 20px;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
.panel-body {
display: flex;
touch-action: pan-y pinch-zoom;
overflow: hidden;
height: 100%;
}
.panel-body-contents {
max-height: 100%;
width: 100%;
display: flex;
flex-direction: column;
}
.panel-body-bottom {
display: flex;
flex: 1 0 0%; // safari height fix
margin-top: 0.5em;
2020-12-18 10:03:51 -05:00
flex-wrap: wrap;
.show-all {
display: flex;
flex: 1 1 auto;
button {
width: 100%;
}
}
.notifications-dismiss {
margin-left: 0.5em;
}
.btn {
background-color: var(--primary-very-low);
color: var(--primary-high);
&:hover {
background: var(--primary-low);
color: var(--primary);
}
}
}
.badge-notification {
vertical-align: text-bottom;
}
}
.search-menu .menu-panel {
width: 500px;
}
.user-menu.revamped {
right: 0;
width: 320px;
padding: 0;
.panel-body-bottom {
flex: 0;
}
.menu-tabs-container {
display: flex;
flex-direction: column;
border-left: 1px solid var(--primary-low);
padding: 0.75em 0 0;
overflow-y: auto;
overscroll-behavior: contain;
}
.tabs-list {
display: flex;
flex-direction: column;
.btn {
display: flex;
padding: 0.857em;
position: relative;
.d-icon {
color: var(--primary-medium);
}
.badge-notification {
background-color: var(--tertiary-med-or-tertiary);
position: absolute;
right: 6px;
top: 6px;
font-size: var(--font-down-3);
}
&.active {
background-color: var(--d-selected);
}
&:hover {
background-color: var(--d-hover);
}
}
}
.bottom-tabs {
border-top: 1px solid var(--primary-low);
}
.panel-body-contents {
display: flex;
flex-direction: row-reverse;
}
.quick-access-panel {
width: 320px;
padding: 0.75em;
padding-bottom: max(env(safe-area-inset-bottom), 0.75em);
justify-content: space-between;
box-sizing: border-box;
min-width: 0; // makes sure menu tabs don't go off screen
.double-user,
.multi-user {
white-space: unset;
}
.item-label {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
color: var(--primary);
}
li {
background-color: var(--secondary);
&.unread,
&.pending {
background-color: var(--tertiary-low);
}
&:hover {
background-color: var(--d-hover);
outline: none;
}
&:focus-within {
background: var(--d-hover);
a {
// we don't need the link focus because we're styling the parent
outline: 0;
}
}
}
}
#quick-access-profile {
display: inline;
max-height: 99%; // macOS Chrome sometimes adds an unneeded scrollbar at 100%
ul {
flex-wrap: nowrap;
height: 100%;
align-items: center;
overflow-y: auto; // really short viewports
}
li {
flex: 1 1 auto;
max-height: 3em; // prevent buttons from getting too tall
> * {
// button, a, and everything else
height: 100%;
align-items: center;
margin: 0;
padding: 0 0.5em;
}
img.emoji {
height: 1em;
width: 1em;
padding-top: 0.2em;
margin-right: 0.5em;
}
.d-icon {
padding-top: 0;
}
}
.set-user-status {
.emoji {
padding-top: 0;
}
}
.profile-tab-btn {
.relative-date {
font-size: var(--font-down-3);
color: var(--primary-medium);
}
justify-content: unset;
line-height: var(--line-height-large);
width: 100%;
.d-icon {
padding: 0;
}
}
.do-not-disturb {
.d-icon-toggle-on {
color: var(--tertiary);
}
}
}
}
// remove when the widgets-based implementation of the user menu is removed
.user-menu:not(.revamped) {
.quick-access-panel {
li {
span:first-child {
color: var(--primary);
}
}
}
}
.hamburger-panel {
a.widget-link {
width: 100%;
box-sizing: border-box;
@include ellipsis;
}
.panel-body {
overflow-y: auto;
}
span.badge-category {
max-width: 100px;
}
2020-08-12 16:03:08 -04:00
}
2015-09-03 15:57:00 -04:00
.menu-links.columned {
li {
width: 50%;
float: left;
}
}
.menu-panel {
.widget-link,
.categories-link {
padding: 0.25em 0.5em;
display: block;
color: var(--primary);
&:hover,
&:focus {
background-color: var(--d-hover);
outline: none;
}
.d-icon {
color: var(--primary-medium);
}
.new {
font-size: var(--font-down-1);
margin-left: 0.5em;
color: var(--primary-med-or-secondary-med);
}
&.show-help,
&.filter {
color: var(--tertiary);
}
}
li.category-link {
float: left;
background-color: transparent;
display: inline-flex;
2018-08-10 14:00:06 -04:00
align-items: center;
padding: 0.25em 0.5em;
width: 50%;
box-sizing: border-box;
2018-08-03 17:43:07 -04:00
a {
2018-08-07 09:47:01 -04:00
display: inline-flex;
2018-08-03 17:43:07 -04:00
&:hover,
&:focus {
background: transparent;
.category-name {
color: var(--primary);
}
2018-08-03 17:43:07 -04:00
}
}
.badge-notification {
color: var(--primary-med-or-secondary-med);
background-color: transparent;
display: inline;
padding: 0;
font-size: var(--font-down-1);
line-height: var(--line-height-large);
}
.badge-wrapper {
&.bar,
&.bullet {
color: var(--primary);
2018-08-06 11:11:29 -04:00
padding: 0 0 0 0.15em;
}
&.box {
color: var(--secondary);
+ a.badge.badge-notification {
padding-top: 2px;
}
span {
z-index: z("base") * -1;
}
}
}
}
// note these topic counts only appear for anons in the category hamburger drop down
b.topics-count {
color: var(--primary-med-or-secondary-med);
font-weight: normal;
font-size: var(--font-down-1);
}
div.discourse-tags {
font-size: var(--font-down-1);
}
}
.user-menu {
.quick-access-panel {
width: 100%;
display: flex;
flex-direction: column;
min-height: 0;
max-height: 100%;
border-top: 1px solid var(--primary-low);
padding-top: 0.75em;
margin-top: -1px;
&:focus {
outline: none;
}
h3 {
padding: 0 0.4em;
font-weight: bold;
margin: 0.5em 0;
}
.d-icon,
&:hover .d-icon {
color: var(--primary-medium);
}
.icon {
color: var(--primary-high);
}
.btn-primary {
.d-icon {
color: var(--secondary);
}
}
ul {
display: flex;
flex-flow: column wrap;
overflow: hidden;
max-height: 100%;
}
li {
background-color: var(--d-selected);
box-sizing: border-box;
list-style-type: none;
// This is until other languages remove the HTML from within
// notifications. It can then be removed
Upgrade to FontAwesome 5 (take two) (#6673) * Add missing icons to set * Revert FA5 revert This reverts commit 42572ff * use new SVG syntax in locales * Noscript page changes (remove login button, center "powered by" footer text) * Cast wider net for SVG icons in settings - include any _icon setting for SVG registry (offers better support for plugin settings) - let themes store multiple pipe-delimited icons in a setting - also replaces broken onebox image icon with SVG reference in cooked post processor * interpolate icons in locales * Fix composer whisper icon alignment * Add support for stacked icons * SECURITY: enforce hostname to match discourse hostname This ensures that the hostname rails uses for various helpers always matches the Discourse hostname * load SVG sprite with pre-initializers * FIX: enable caching on SVG sprites * PERF: use JSONP for SVG sprites so they are served from CDN This avoids needing to deal with CORS for loading of the SVG Note, added the svg- prefix to the filename so we can quickly tell in dev tools what the file is * Add missing SVG sprite JSONP script to CSP * Upgrade to FA 5.5.0 * Add support for all FA4.7 icons - adds complete frontend and backend for renamed FA4.7 icons - improves performance of SvgSprite.bundle and SvgSprite.all_icons * Fix group avatar flair preview - adds an endpoint at /svg-sprites/search/:keyword - adds frontend ajax call that pulls icon in avatar flair preview even when it is not in subset * Remove FA 4.7 font files
2018-11-26 16:49:57 -05:00
div .fa {
display: none;
}
2020-12-18 10:03:51 -05:00
span.double-user,
// e.g., "username, username2"
span.multi-user
// e.g., "username, username2, and n others"
{
display: inline-flex;
max-width: 100%;
align-items: baseline;
white-space: nowrap;
}
2020-12-18 10:03:51 -05:00
span.multi-user
// e.g., "username, username2, and n others"
{
span.multi-username:nth-of-type(2) {
// margin between username2 and "and n others"
margin-right: 0.25em;
}
}
// truncate when usernames are very long
span.multi-username {
@include ellipsis;
flex: 0 1 auto;
min-width: 1.2em;
max-width: 10em;
&:nth-of-type(2) {
// margin for comma between username and username2
margin-left: 0.25em;
}
}
&:hover {
background-color: var(--d-hover);
outline: none;
}
&:focus-within {
background: var(--d-hover);
a {
// we don't need the link focus because we're styling the parent
outline: 0;
}
.btn-flat:focus {
// undo default btn-flat style
background: transparent;
}
}
a,
.profile-tab-btn {
display: flex;
margin: 0.25em;
padding: 0em 0.25em;
}
button {
padding: 0.25em 0.5em;
}
a,
button {
> div {
overflow: hidden; // clears the text from wrapping below icons
overflow-wrap: anywhere;
2020-03-31 21:57:09 -04:00
@supports not (overflow-wrap: anywhere) {
word-break: break-word;
}
// Truncate items with more than 2 lines.
@include line-clamp(2);
}
}
p {
margin: 0;
overflow: hidden;
}
}
li:not(.show-all) {
padding: 0;
align-self: flex-start;
width: 100%;
Upgrade to FontAwesome 5 (take two) (#6673) * Add missing icons to set * Revert FA5 revert This reverts commit 42572ff * use new SVG syntax in locales * Noscript page changes (remove login button, center "powered by" footer text) * Cast wider net for SVG icons in settings - include any _icon setting for SVG registry (offers better support for plugin settings) - let themes store multiple pipe-delimited icons in a setting - also replaces broken onebox image icon with SVG reference in cooked post processor * interpolate icons in locales * Fix composer whisper icon alignment * Add support for stacked icons * SECURITY: enforce hostname to match discourse hostname This ensures that the hostname rails uses for various helpers always matches the Discourse hostname * load SVG sprite with pre-initializers * FIX: enable caching on SVG sprites * PERF: use JSONP for SVG sprites so they are served from CDN This avoids needing to deal with CORS for loading of the SVG Note, added the svg- prefix to the filename so we can quickly tell in dev tools what the file is * Add missing SVG sprite JSONP script to CSP * Upgrade to FA 5.5.0 * Add support for all FA4.7 icons - adds complete frontend and backend for renamed FA4.7 icons - improves performance of SvgSprite.bundle and SvgSprite.all_icons * Fix group avatar flair preview - adds an endpoint at /svg-sprites/search/:keyword - adds frontend ajax call that pulls icon in avatar flair preview even when it is not in subset * Remove FA 4.7 font files
2018-11-26 16:49:57 -05:00
.d-icon {
padding-top: 0.2em;
margin-right: 0.5em;
}
}
.is-warning {
.d-icon-envelope {
color: var(--danger);
}
}
.read {
background-color: var(--secondary);
}
.none {
padding-top: 5px;
}
.spinner-container {
min-height: 2em;
}
.spinner {
width: 20px;
height: 20px;
border-width: 2px;
margin: 0 auto;
}
.show-all a {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
min-height: 30px;
color: var(--primary-med-or-secondary-high);
background: var(--blend-primary-secondary-5);
&:hover {
color: var(--primary);
background: var(--primary-low);
}
}
/* as a big ol' click target, don't let text inside be selected */
@include unselectable;
&.quick-access-profile {
display: inline;
li:not(.show-all) a {
color: var(--primary);
display: flex;
}
ul button {
line-height: 1.4; // match 'ul a' link height
width: 100%;
display: flex;
}
@media screen and (max-height: 360px) {
// two column grid to avoid scroll
ul {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-gap: 0 1em;
a {
@include ellipsis;
> div {
display: block;
}
}
button {
span:not(.relative-date) {
@include ellipsis;
}
}
}
li:not(.show-all) a {
color: var(--primary);
display: flex;
}
}
}
}
}
div.menu-links-header {
2015-08-29 19:26:02 -04:00
width: 100%;
.menu-links-row {
box-sizing: border-box;
display: flex;
width: 100%;
z-index: 2;
justify-content: space-between;
.glyphs {
display: inline-flex;
align-items: center;
flex-wrap: nowrap;
width: 100%;
justify-content: space-between;
padding: 0;
button {
display: flex;
flex: 1 1 auto;
padding: 0.65em 0.25em 0.75em;
justify-content: center;
svg {
pointer-events: none;
}
}
}
button {
// This is to make sure active and inactive tab icons have the same
// size. `box-sizing` does not work and I have no idea why.
border: 1px solid transparent;
&:not(.active):hover {
border-bottom: 0;
margin-top: -1px;
}
}
button.active {
border: 1px solid var(--primary-low);
border-bottom: 1px solid var(--secondary);
position: relative;
.d-icon {
color: var(--primary-high);
}
&:hover {
background-color: inherit;
}
}
}
button:hover,
button:focus {
background-color: var(--primary-low);
outline: none;
&.active {
background-color: var(--primary-very-low);
}
2015-08-29 19:26:02 -04:00
}
button {
padding: 0.3em 0.5em;
}
.glyphs {
2015-08-29 19:26:02 -04:00
display: table-cell;
width: auto;
text-align: center;
}
.glyphs:first-child {
2015-08-29 19:26:02 -04:00
text-align: left;
}
.glyphs:last-child {
2015-08-29 19:26:02 -04:00
text-align: right;
}
.fa,
button {
color: var(--primary-med-or-secondary-med);
2015-08-30 22:07:30 -04:00
}
2015-08-29 19:26:02 -04:00
}
body.footer-nav-ipad {
.hamburger-panel .revamped,
.menu-panel.slide-in {
margin-top: var(--footer-nav-height);
}
}
.hamburger-panel .menu-panel.slide-in {
left: 0;
.panel-body {
display: block;
}
.panel-body-contents {
max-height: unset;
min-height: 100%;
}
}
.header-cloak {
height: 100%;
width: 100%;
position: fixed;
background-color: black;
--opacity: 0.5;
opacity: var(--opacity);
top: var(--header-top);
left: 0;
display: none;
touch-action: pan-y pinch-zoom;
@media (prefers-reduced-motion: no-preference) {
&.animate {
transition: opacity 0.1s linear;
}
}
}
.menu-panel.slide-in {
top: var(--header-top);
box-sizing: border-box;
// ensure there's always space to click outside on tiny devices
max-width: 90vw;
--100dvh: 100%;
@supports (height: 100dvh) {
--100dvh: 100dvh;
}
2023-03-16 19:23:15 -04:00
--base-height: calc(var(--100dvh) - var(--header-top));
height: var(--base-height);
body.footer-nav-ipad & {
height: calc(var(--base-height) - var(--footer-nav-height));
}
transform: translateX(var(--offset));
@media (prefers-reduced-motion: no-preference) {
&.animate {
transition: transform 0.1s linear;
}
}
&.moving,
&.animate {
// PERF: only render first 20 items in a list to allow for smooth
// pan events
li:nth-child(n + 20) {
display: none;
}
}
}