discourse/plugins/discourse-details/assets/stylesheets/details.scss
Martin Brennan 4e7a75a7ec
DEV: Single admin plugin page for consistent admin plugin UX (#26024)
This commit adds new plugin show routes (`/admin/plugins/:plugin_id`) as we move
towards every plugin having a consistent UI/landing page.

As part of this, we are introducing a consistent way for plugins
to show an inner sidebar in their config page, via a new plugin
API `register_admin_config_nav_routes`

This accepts an array of links with a label/text, and an
ember route. Once this commit is merged we can start the process
of conforming other plugins to follow this pattern, as well
as supporting a single-page version of this for simpler plugins
that don't require an inner sidebar.

Part of /t/122841 internally
2024-03-13 13:15:12 +10:00

135 lines
2.2 KiB
SCSS

details {
position: relative;
.topic-body .cooked &,
.d-editor-preview,
&.details__boxed {
background-color: var(--primary-very-low);
padding: 0.25rem 0.75rem;
margin-bottom: 0.5rem;
&:not([open]) {
&:hover,
&:focus,
&:focus-within {
background-color: var(--d-hover);
}
}
aside.quote .title,
blockquote,
code {
background-color: rgba(var(--primary-rgb), 0.05);
}
}
}
details.details__boxed {
summary {
font-weight: bold;
}
}
details > *,
details .lightbox-wrapper {
display: none;
}
details,
summary {
outline: none;
}
summary {
> p {
margin-block: 0;
padding-block: 1rem;
}
}
summary:first-of-type {
cursor: pointer;
display: block;
}
summary:before {
content: "\25BA";
margin-right: 0.25em;
}
details[open] > *,
details[open] .lightbox-wrapper {
display: block;
}
details[open] > summary:before,
details.open > summary:before {
content: "\25BC";
}
details[open] > summary:first-of-type ~ *,
details.open > summary:first-of-type ~ * {
display: block;
}
/* hide native indicator */
summary::-webkit-details-marker {
display: none;
}
.topic-body .cooked,
.d-editor-preview {
.elided {
background-color: unset;
padding: 0;
&:not([open]) {
//specificity needed to overrule non-elided
&:hover,
&:focus,
&:focus-within {
background-color: unset;
}
summary:hover {
background: var(--d-hover);
}
}
&[open] {
background: var(--primary-very-low);
padding: 0.5rem 0.75rem;
summary {
padding: 0;
}
}
summary:before {
content: "" !important;
display: none;
}
summary {
@include unselectable;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
box-sizing: border-box;
margin: 0;
padding: 0.5rem 0.75rem;
color: var(--primary-medium);
background: var(--primary-very-low);
width: min-content;
line-height: 1;
&:hover,
&:focus,
&:focus-within {
color: var(--primary);
cursor: pointer;
}
}
}
}