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

313 lines
5.6 KiB
SCSS

.menu-panel.slide-in {
position: fixed;
right: 0;
box-shadow: shadow("header");
&.animate {
transition: right 0.2s ease-out, left 0.2s ease-out;
}
.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");
padding: 0.5em;
width: 300px;
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;
}
}
.menu-links.columned {
li {
width: 50%;
float: left;
}
}
.menu-panel {
li,
li.heading {
a {
padding: 0.25em 0.5em;
display: block;
&:hover,
&:focus {
background-color: $highlight-medium;
outline: none;
}
}
.new {
font-size: $font-down-1;
margin-left: 0.5em;
color: dark-light-choose($primary-medium, $secondary-medium);
}
}
li.category-link {
float: left;
background-color: transparent;
display: inline-flex;
align-items: center;
padding: 0.25em 0.5em;
width: 50%;
box-sizing: border-box;
a {
display: inline-flex;
&:hover,
&:focus {
background: transparent;
}
}
.badge-notification {
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;
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 {
color: dark-light-choose($primary-medium, $secondary-medium);
font-weight: normal;
font-size: $font-down-1;
}
span.badge-category {
max-width: 90px;
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 {
background-color: $tertiary-low;
// This is until other languages remove the HTML from within
// notifications. It can then be removed
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;
.d-icon {
float: left;
margin-right: 5px;
padding-top: 0.2em;
}
}
.is-warning {
.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;
}
}
.notifications .logout {
padding: 0.25em;
&:hover {
background-color: $highlight-medium;
}
}
div.menu-links-header {
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 {
background-color: $highlight-medium;
outline: none;
}
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;
}
}
li {
display: table-cell;
width: auto;
text-align: center;
}
li:first-child {
text-align: left;
}
li:last-child {
text-align: right;
}
.fa,
a {
color: dark-light-choose($primary-medium, $secondary-medium);
}
.d-icon-user {
margin-right: 0.2em;
}
}