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

313 lines
5.6 KiB
SCSS
Raw Normal View History

.menu-panel.slide-in {
position: fixed;
right: 0;
box-shadow: shadow("header");
&.animate {
transition: right 0.2s ease-out, left 0.2s ease-out;
}
2015-09-10 12:49:54 -04:00
.panel-body {
position: absolute;
top: 3px;
bottom: 37px;
width: 97%;
}
}
.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
}
.menu-panel {
border: 1px solid $primary-low;
box-shadow: shadow("menu-panel");
background-color: $secondary;
z-index: z("header");
2015-08-29 19:26:02 -04:00
padding: 0.5em;
width: 300px;
2015-08-29 19:26:02 -04:00
hr {
margin: 3px 0;
}
.panel-header {
position: absolute;
right: 20px;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
.panel-body {
touch-action: pan-y pinch-zoom;
overflow-y: auto;
overflow-x: hidden;
}
.badge-notification {
vertical-align: text-bottom;
}
}
2015-09-03 15:57:00 -04:00
.menu-links.columned {
li {
width: 50%;
float: left;
}
}
.menu-panel {
2018-08-03 17:43:07 -04:00
li,
li.heading {
a {
2015-08-29 19:26:02 -04:00
padding: 0.25em 0.5em;
display: block;
&:hover,
&:focus {
2017-06-11 22:20:14 -04:00
background-color: $highlight-medium;
outline: none;
}
}
.new {
2018-01-12 17:27:38 -05:00
font-size: $font-down-1;
margin-left: 0.5em;
2017-10-10 16:07:46 -04:00
color: dark-light-choose($primary-medium, $secondary-medium);
}
}
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;
}
}
.badge-notification {
2017-10-10 16:07:46 -04:00
color: dark-light-choose($primary-medium, $secondary-medium);
background-color: transparent;
display: inline;
padding: 0;
font-size: $font-down-1;
line-height: $line-height-large;
}
.badge-wrapper {
overflow: hidden;
text-overflow: ellipsis;
&.bar,
&.bullet {
color: $primary;
2018-08-06 11:11:29 -04:00
padding: 0 0 0 0.15em;
}
&.box {
color: $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 {
2017-10-10 16:07:46 -04:00
color: dark-light-choose($primary-medium, $secondary-medium);
font-weight: normal;
font-size: $font-down-1;
}
span.badge-category {
max-width: 100px;
overflow: hidden;
text-overflow: ellipsis;
}
}
.user-menu {
.notifications {
width: 100%;
display: table;
h3 {
padding: 0 0.4em;
font-weight: bold;
margin: 0.5em 0;
}
.d-icon,
&:hover .d-icon {
color: $primary-medium;
}
.icon {
color: $primary-high;
}
li {
2017-06-11 22:20:14 -04:00
background-color: $tertiary-low;
// 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;
}
span {
color: $primary;
}
&:hover,
&:focus {
background-color: $highlight-medium;
outline: none;
}
a {
padding: 0;
> div {
overflow: hidden; // clears the text from wrapping below icons
}
}
p {
margin: 0;
overflow: hidden;
}
}
li:not(.show-all) {
padding: 0.25em 0.5em;
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 {
float: left;
margin-right: 5px;
padding-top: 0.2em;
}
}
.is-warning {
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-far-envelope {
color: $danger;
}
}
.read {
background-color: $secondary;
}
.none {
padding-top: 5px;
}
.spinner-container.visible {
min-height: 30px;
}
.spinner {
width: 20px;
height: 20px;
border-width: 2px;
margin: 0 auto;
}
.show-all .btn {
width: 100%;
padding: 2px 0;
color: dark-light-choose($primary-medium, $secondary-high);
background: blend-primary-secondary(5%);
&:hover {
color: $primary;
background: dark-light-diff($primary, $secondary, 90%, -80%);
}
}
/* as a big ol' click target, don't let text inside be selected */
@include unselectable;
}
.logout-link,
.dismiss-link {
display: inline-block;
}
.dismiss-link {
float: right;
}
}
2015-08-29 19:26:02 -04:00
.notifications .logout {
padding: 0.25em;
&:hover {
2017-06-11 22:20:14 -04:00
background-color: $highlight-medium;
}
}
div.menu-links-header {
2015-08-29 19:26:02 -04:00
width: 100%;
display: table;
border-collapse: separate;
border-spacing: 0 0.5em;
.menu-links-row {
display: flex;
li {
display: inline-flex;
align-items: center;
flex-wrap: wrap;
&.user {
margin-right: auto;
}
&.glyphs {
flex-wrap: wrap;
text-align: right;
max-width: 65%; //IE11
}
}
}
a:hover,
a:focus {
2017-06-11 22:20:14 -04:00
background-color: $highlight-medium;
outline: none;
2015-08-29 19:26:02 -04:00
}
a {
padding: 0.3em 0.5em;
}
a.user-activity-link {
max-width: 150px;
display: block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin: -0.5em 0;
@media screen and (max-width: 350px) {
max-width: 125px;
}
}
2015-08-29 19:26:02 -04:00
li {
display: table-cell;
width: auto;
text-align: center;
}
li:first-child {
text-align: left;
}
li:last-child {
text-align: right;
}
.fa,
a {
2017-10-10 16:07:46 -04:00
color: dark-light-choose($primary-medium, $secondary-medium);
2015-08-30 22:07:30 -04:00
}
.d-icon-user {
margin-right: 0.2em;
2015-08-29 19:26:02 -04:00
}
}