DEV: Refactor sidebar components to prepare for integration into hamburger dropdown (#17566)
This commit is contained in:
Alan Guo Xiang Tan
GitHub
parent
a1a960caba
commit
086fb6d6cf
|
|
@ -1,7 +1,5 @@
|
|||
import GlimmerComponent from "discourse/components/glimmer";
|
||||
import { bind } from "discourse-common/utils/decorators";
|
||||
import { customSections as sidebarCustomSections } from "discourse/lib/sidebar/custom-sections";
|
||||
import { cached } from "@glimmer/tracking";
|
||||
|
||||
export default class Sidebar extends GlimmerComponent {
|
||||
constructor() {
|
||||
|
|
@ -38,11 +36,4 @@ export default class Sidebar extends GlimmerComponent {
|
|||
document.removeEventListener("click", this.collapseSidebar);
|
||||
}
|
||||
}
|
||||
|
||||
@cached
|
||||
get customSections() {
|
||||
return sidebarCustomSections.map((customSection) => {
|
||||
return new customSection({ sidebar: this });
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,17 @@
|
|||
import GlimmerComponent from "discourse/components/glimmer";
|
||||
import { customSections as sidebarCustomSections } from "discourse/lib/sidebar/custom-sections";
|
||||
|
||||
export default class SidebarSections extends GlimmerComponent {
|
||||
customSections;
|
||||
|
||||
constructor() {
|
||||
super(...arguments);
|
||||
this.customSections = this._customSections;
|
||||
}
|
||||
|
||||
get _customSections() {
|
||||
return sidebarCustomSections.map((customSection) => {
|
||||
return new customSection({ sidebar: this });
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
@ -1,52 +1,5 @@
|
|||
<DSection @pageClass="has-sidebar" @class="sidebar-container" @scrollTop={{false}}>
|
||||
<div class="sidebar-scroll-wrap">
|
||||
<Sidebar::TopicsSection />
|
||||
<Sidebar::CategoriesSection />
|
||||
|
||||
{{#if this.siteSettings.tagging_enabled}}
|
||||
<Sidebar::TagsSection />
|
||||
{{/if}}
|
||||
|
||||
{{#if this.siteSettings.enable_personal_messages}}
|
||||
<Sidebar::MessagesSection />
|
||||
{{/if}}
|
||||
|
||||
{{#each this.customSections as |customSection|}}
|
||||
<Sidebar::Section
|
||||
@sectionName={{customSection.name}}
|
||||
@headerRoute={{customSection.route}}
|
||||
@headerLinkText={{customSection.text}}
|
||||
@headerLinkTitle={{customSection.title}}
|
||||
@headerActionsIcon={{customSection.actionsIcon}}
|
||||
@headerActions={{customSection.actions}}
|
||||
@willDestroy={{customSection.willDestroy}}>
|
||||
|
||||
{{#each customSection.links as |link|}}
|
||||
<Sidebar::SectionLink
|
||||
@linkName={{link.name}}
|
||||
@route={{link.route}}
|
||||
@model={{link.model}}
|
||||
@title={{link.title}}
|
||||
@prefixColor={{link.prefixColor}}
|
||||
@prefixBadge={{link.prefixBadge}}
|
||||
@prefixType={{link.prefixType}}
|
||||
@prefixValue={{link.prefixValue}}
|
||||
@prefixCSSClass={{link.prefixCSSClass}}
|
||||
@suffixType={{link.suffixType}}
|
||||
@suffixValue={{link.suffixValue}}
|
||||
@suffixCSSClass={{link.suffixCSSClass}}
|
||||
@hoverType={{link.hoverType}}
|
||||
@hoverValue={{link.hoverValue}}
|
||||
@hoverAction={{link.hoverAction}}
|
||||
@hoverTitle={{link.hoverTitle}}
|
||||
@currentWhen={{link.currentWhen}}
|
||||
@content={{link.text}} />
|
||||
{{/each}}
|
||||
</Sidebar::Section>
|
||||
{{/each}}
|
||||
|
||||
{{!-- DO NOT USE, this outlet is temporary and will be removed. --}}
|
||||
{{!-- Outlet will be replaced with sidebar API. --}}
|
||||
<PluginOutlet @name="after-sidebar" />
|
||||
<Sidebar::Sections />
|
||||
</div>
|
||||
</DSection>
|
||||
|
|
|
|||
|
|
@ -12,17 +12,21 @@
|
|||
{{#if (eq @prefixType "image")}}
|
||||
<img src={{@prefixValue}} class="prefix-image">
|
||||
{{/if}}
|
||||
|
||||
{{#if (eq @prefixType "text")}}
|
||||
{{@prefixValue}}
|
||||
{{/if}}
|
||||
|
||||
{{#if (eq @prefixType "icon")}}
|
||||
{{d-icon @prefixValue class="prefix-icon"}}
|
||||
{{/if}}
|
||||
|
||||
{{#if @prefixBadge}}
|
||||
{{d-icon @prefixBadge class="prefix-badge"}}
|
||||
{{/if}}
|
||||
</span>
|
||||
{{/if}}
|
||||
|
||||
<span class="sidebar-section-link-content-text">
|
||||
{{@content}}
|
||||
</span>
|
||||
|
|
@ -41,6 +45,7 @@
|
|||
</span>
|
||||
{{/if}}
|
||||
</Sidebar::SectionLinkTo>
|
||||
|
||||
{{#if @hoverValue}}
|
||||
<span class="sidebar-section-link-hover">
|
||||
<button
|
||||
|
|
|
|||
|
|
@ -0,0 +1,50 @@
|
|||
<div class="sidebar-sections">
|
||||
<Sidebar::TopicsSection />
|
||||
<Sidebar::CategoriesSection />
|
||||
|
||||
{{#if this.siteSettings.tagging_enabled}}
|
||||
<Sidebar::TagsSection />
|
||||
{{/if}}
|
||||
|
||||
{{#if this.siteSettings.enable_personal_messages}}
|
||||
<Sidebar::MessagesSection />
|
||||
{{/if}}
|
||||
|
||||
{{#each this.customSections as |customSection|}}
|
||||
<Sidebar::Section
|
||||
@sectionName={{customSection.name}}
|
||||
@headerRoute={{customSection.route}}
|
||||
@headerLinkText={{customSection.text}}
|
||||
@headerLinkTitle={{customSection.title}}
|
||||
@headerActionsIcon={{customSection.actionsIcon}}
|
||||
@headerActions={{customSection.actions}}
|
||||
@willDestroy={{customSection.willDestroy}}>
|
||||
|
||||
{{#each customSection.links as |link|}}
|
||||
<Sidebar::SectionLink
|
||||
@linkName={{link.name}}
|
||||
@route={{link.route}}
|
||||
@model={{link.model}}
|
||||
@title={{link.title}}
|
||||
@prefixColor={{link.prefixColor}}
|
||||
@prefixBadge={{link.prefixBadge}}
|
||||
@prefixType={{link.prefixType}}
|
||||
@prefixValue={{link.prefixValue}}
|
||||
@prefixCSSClass={{link.prefixCSSClass}}
|
||||
@suffixType={{link.suffixType}}
|
||||
@suffixValue={{link.suffixValue}}
|
||||
@suffixCSSClass={{link.suffixCSSClass}}
|
||||
@hoverType={{link.hoverType}}
|
||||
@hoverValue={{link.hoverValue}}
|
||||
@hoverAction={{link.hoverAction}}
|
||||
@hoverTitle={{link.hoverTitle}}
|
||||
@currentWhen={{link.currentWhen}}
|
||||
@content={{link.text}} />
|
||||
{{/each}}
|
||||
</Sidebar::Section>
|
||||
{{/each}}
|
||||
|
||||
{{!-- DO NOT USE, this outlet is temporary and will be removed. --}}
|
||||
{{!-- Outlet will be replaced with sidebar API. --}}
|
||||
<PluginOutlet @name="after-sidebar" />
|
||||
</div>
|
||||
|
|
@ -45,6 +45,8 @@
|
|||
@import "share_link";
|
||||
@import "shared-drafts";
|
||||
@import "sidebar";
|
||||
@import "sidebar-section";
|
||||
@import "sidebar-section-link";
|
||||
@import "tagging";
|
||||
@import "tooltip";
|
||||
@import "topic-admin-menu";
|
||||
|
|
|
|||
|
|
@ -0,0 +1,132 @@
|
|||
.sidebar-section-link-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.sidebar-section-link {
|
||||
display: inline-flex;
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
padding: 0.35em 0.5em;
|
||||
color: var(--primary-high);
|
||||
font-size: var(--font-down-1);
|
||||
transition: background-color 0.25s;
|
||||
|
||||
&:hover {
|
||||
background: var(--primary-low);
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: var(--primary);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.sidebar-section-link-content-badge {
|
||||
@include ellipsis;
|
||||
padding-left: 0.5em;
|
||||
text-align: right;
|
||||
color: var(--tertiary);
|
||||
font-size: var(--font-down-1);
|
||||
font-weight: normal;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.sidebar-section-link-content-text {
|
||||
@include ellipsis;
|
||||
|
||||
.badge-wrapper {
|
||||
font-size: 100%;
|
||||
width: 100%;
|
||||
|
||||
.category-name {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-section-link-personal-messages-sent,
|
||||
.sidebar-section-link-personal-messages-new,
|
||||
.sidebar-section-link-personal-messages-archive,
|
||||
.sidebar-section-link-personal-messages-unread,
|
||||
.sidebar-section-link-group-messages-new,
|
||||
.sidebar-section-link-group-messages-unread,
|
||||
.sidebar-section-link-group-messages-archive {
|
||||
margin-left: 0.5em;
|
||||
}
|
||||
|
||||
.sidebar-section-link-prefix {
|
||||
&.image {
|
||||
img {
|
||||
border-radius: 50%;
|
||||
width: 20px;
|
||||
aspect-ratio: auto 20 / 20;
|
||||
height: 20px;
|
||||
margin-right: 0.75em;
|
||||
}
|
||||
}
|
||||
|
||||
&.text {
|
||||
border-radius: 3px;
|
||||
background: rgba(var(--primary-rgb), 0.1);
|
||||
text-align: center;
|
||||
font-size: var(--font-down-1);
|
||||
padding: 0.2em 0.5em;
|
||||
margin-right: 0.25em;
|
||||
}
|
||||
|
||||
&.icon {
|
||||
position: relative;
|
||||
margin-right: 0.75em;
|
||||
|
||||
svg.prefix-badge {
|
||||
position: absolute;
|
||||
background-color: var(--secondary);
|
||||
border-radius: 50%;
|
||||
padding: 2px 2px 3px;
|
||||
color: var(--primary-high);
|
||||
height: 0.5rem;
|
||||
width: 0.5rem;
|
||||
margin-left: -0.4rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-section-link-suffix.icon {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
margin-left: 0.5em;
|
||||
}
|
||||
|
||||
.sidebar-section-link-hover {
|
||||
.sidebar-section-hover-button {
|
||||
display: none;
|
||||
color: var(--primary-medium);
|
||||
border: none;
|
||||
background: transparent;
|
||||
padding: 0.35em 0.5em;
|
||||
transition: background-color 0.25s;
|
||||
|
||||
svg {
|
||||
font-size: var(--font-down-1);
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.sidebar-section-hover-button {
|
||||
background: var(--primary-low);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.sidebar-section-hover-button {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#main-outlet-wrapper .sidebar-section-link-wrapper {
|
||||
margin-left: 1.5em;
|
||||
}
|
||||
|
|
@ -0,0 +1,126 @@
|
|||
.sidebar-section-wrapper {
|
||||
margin-bottom: 1em;
|
||||
|
||||
.sidebar-section-header {
|
||||
display: flex;
|
||||
text-transform: uppercase;
|
||||
font-size: 1em;
|
||||
font-weight: bold;
|
||||
align-items: stretch;
|
||||
|
||||
.select-kit {
|
||||
.btn {
|
||||
background: transparent;
|
||||
&:hover {
|
||||
background: var(--primary-low);
|
||||
}
|
||||
}
|
||||
.d-icon {
|
||||
font-size: var(--font-down-1);
|
||||
color: var(--primary-medium);
|
||||
margin-right: 0;
|
||||
}
|
||||
summary {
|
||||
padding: 0.25em 0.5em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-section-header-link,
|
||||
.sidebar-section-header-text {
|
||||
@include ellipsis;
|
||||
flex: 1 1 auto;
|
||||
color: var(--primary);
|
||||
font-size: var(--font-down-1);
|
||||
padding: 0.25em 0.5em;
|
||||
}
|
||||
|
||||
.sidebar-section-header-link {
|
||||
&:visited {
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: var(--primary-low);
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-section-header-button {
|
||||
background: none;
|
||||
border: none;
|
||||
padding: 0.25em 0.5em;
|
||||
|
||||
.d-icon {
|
||||
font-size: $font-down-1;
|
||||
color: var(--primary-medium);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: var(--primary-low);
|
||||
}
|
||||
}
|
||||
.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;
|
||||
}
|
||||
|
||||
.sidebar-section-message {
|
||||
padding: 0.25em 0.5em;
|
||||
font-size: var(--font-down-1);
|
||||
color: var(--primary-high);
|
||||
}
|
||||
|
||||
.sidebar-section-header-caret {
|
||||
flex: 0 0 auto;
|
||||
width: 1.5em;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
border: none;
|
||||
background: transparent;
|
||||
padding: 0;
|
||||
opacity: 0;
|
||||
transition: opacity 0.25s;
|
||||
transition-delay: 0.5s;
|
||||
.discourse-no-touch & {
|
||||
&:hover {
|
||||
svg {
|
||||
color: var(--primary-high);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
svg {
|
||||
display: block;
|
||||
flex: 0 0 auto;
|
||||
transition: color 0.25s;
|
||||
}
|
||||
|
||||
.d-icon {
|
||||
font-size: $font-down-1;
|
||||
color: var(--primary-medium);
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-section-content {
|
||||
hr {
|
||||
margin: 0em 1.5em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#main-outlet-wrapper .sidebar-section-wrapper {
|
||||
.sidebar-section-message-wrapper {
|
||||
margin-left: 1.5em;
|
||||
}
|
||||
}
|
||||
|
|
@ -105,285 +105,4 @@
|
|||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.sidebar-section-wrapper {
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
.sidebar-section-header {
|
||||
display: flex;
|
||||
text-transform: uppercase;
|
||||
font-size: 1em;
|
||||
font-weight: bold;
|
||||
align-items: stretch;
|
||||
|
||||
.select-kit {
|
||||
.btn {
|
||||
background: transparent;
|
||||
&:hover {
|
||||
background: var(--primary-low);
|
||||
}
|
||||
}
|
||||
.d-icon {
|
||||
font-size: var(--font-down-1);
|
||||
color: var(--primary-medium);
|
||||
margin-right: 0;
|
||||
}
|
||||
summary {
|
||||
padding: 0.25em 0.5em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-section-header-link,
|
||||
.sidebar-section-header-text {
|
||||
@include ellipsis;
|
||||
flex: 1 1 auto;
|
||||
color: var(--primary);
|
||||
font-size: var(--font-down-1);
|
||||
padding: 0.25em 0.5em;
|
||||
}
|
||||
|
||||
.sidebar-section-header-link {
|
||||
&:visited {
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: var(--primary-low);
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-section-header-button {
|
||||
background: none;
|
||||
border: none;
|
||||
padding: 0.25em 0.5em;
|
||||
|
||||
.d-icon {
|
||||
font-size: $font-down-1;
|
||||
color: var(--primary-medium);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: var(--primary-low);
|
||||
}
|
||||
}
|
||||
.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-link-wrapper {
|
||||
margin-left: 1.5em;
|
||||
}
|
||||
|
||||
.sidebar-section-link {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0.35em 0.5em;
|
||||
color: var(--primary-high);
|
||||
font-size: var(--font-down-1);
|
||||
transition: background-color 0.25s;
|
||||
|
||||
&:hover {
|
||||
background: var(--primary-low);
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: var(--primary);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.sidebar-section-link-content-badge {
|
||||
@include ellipsis;
|
||||
padding-left: 0.5em;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.sidebar-section-link-content-text {
|
||||
@include ellipsis;
|
||||
|
||||
.badge-wrapper {
|
||||
font-size: 100%;
|
||||
width: 100%;
|
||||
|
||||
.category-name {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-section-message-wrapper {
|
||||
display: flex;
|
||||
margin-left: 1.5em;
|
||||
}
|
||||
|
||||
.sidebar-section-message {
|
||||
padding: 0.25em 0.5em;
|
||||
font-size: var(--font-down-1);
|
||||
color: var(--primary-high);
|
||||
}
|
||||
|
||||
.sidebar-section-link-content-badge {
|
||||
color: var(--tertiary);
|
||||
font-size: var(--font-down-1);
|
||||
font-weight: normal;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.sidebar-section-header-caret {
|
||||
flex: 0 0 auto;
|
||||
width: 1.5em;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
border: none;
|
||||
background: transparent;
|
||||
padding: 0;
|
||||
opacity: 0;
|
||||
transition: opacity 0.25s;
|
||||
transition-delay: 0.5s;
|
||||
.discourse-no-touch & {
|
||||
&:hover {
|
||||
svg {
|
||||
color: var(--primary-high);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
svg {
|
||||
display: block;
|
||||
flex: 0 0 auto;
|
||||
transition: color 0.25s;
|
||||
}
|
||||
|
||||
.d-icon {
|
||||
font-size: $font-down-1;
|
||||
color: var(--primary-medium);
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-section-content {
|
||||
hr {
|
||||
margin: 0em 1.5em;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-section-link-personal-messages-sent,
|
||||
.sidebar-section-link-personal-messages-new,
|
||||
.sidebar-section-link-personal-messages-archive,
|
||||
.sidebar-section-link-personal-messages-unread,
|
||||
.sidebar-section-link-group-messages-new,
|
||||
.sidebar-section-link-group-messages-unread,
|
||||
.sidebar-section-link-group-messages-archive {
|
||||
margin-left: 0.5em;
|
||||
}
|
||||
}
|
||||
|
||||
#main-outlet-wrapper .sidebar-section-wrapper {
|
||||
.sidebar-section-link-prefix {
|
||||
&.image {
|
||||
img {
|
||||
border-radius: 50%;
|
||||
width: 20px;
|
||||
aspect-ratio: auto 20 / 20;
|
||||
height: 20px;
|
||||
margin-right: 0.75em;
|
||||
}
|
||||
&.active img {
|
||||
box-shadow: 0px 0px 0px 1px var(--success);
|
||||
border: 1px solid var(--secondary);
|
||||
}
|
||||
}
|
||||
&.text {
|
||||
display: flex;
|
||||
border-radius: 3px;
|
||||
background: rgba(var(--primary-rgb), 0.1);
|
||||
text-align: center;
|
||||
font-weight: 700;
|
||||
font-size: var(--font-down-1);
|
||||
align-items: center;
|
||||
padding: 0.25rem 0.5rem;
|
||||
margin-right: 0.75em;
|
||||
}
|
||||
&.icon {
|
||||
position: relative;
|
||||
margin-right: 0.75em;
|
||||
svg.prefix-badge {
|
||||
position: absolute;
|
||||
background-color: var(--secondary);
|
||||
border-radius: 50%;
|
||||
padding: 2px 2px 3px;
|
||||
color: var(--primary-high);
|
||||
height: 0.5rem;
|
||||
width: 0.5rem;
|
||||
margin-left: -0.4rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
.sidebar-section-link-suffix.icon {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
margin-left: 0.5em;
|
||||
svg {
|
||||
width: 0.75em;
|
||||
height: 0.75em;
|
||||
}
|
||||
&.urgent svg {
|
||||
color: $success;
|
||||
}
|
||||
&.unread svg {
|
||||
color: var(--tertiary-med-or-tertiary);
|
||||
}
|
||||
}
|
||||
&.sidebar-section-chat-dms {
|
||||
.sidebar-section-content {
|
||||
.sidebar-section-link-wrapper {
|
||||
display: inline-flex;
|
||||
.sidebar-section-hover-button {
|
||||
display: none;
|
||||
color: var(--primary-medium);
|
||||
align-self: center;
|
||||
}
|
||||
.sidebar-section-link-hover {
|
||||
align-self: center;
|
||||
}
|
||||
}
|
||||
.sidebar-section-link-wrapper:hover {
|
||||
background: var(--primary-low);
|
||||
transition: background-color 0.25s;
|
||||
padding-right: 0.5em;
|
||||
.sidebar-section-hover-button {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
a.sidebar-section-link {
|
||||
width: calc(var(--d-sidebar-width) - 50px);
|
||||
&:hover {
|
||||
background: initial;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-section-hover-button {
|
||||
border: none;
|
||||
background: transparent;
|
||||
padding-left: 0.25em;
|
||||
padding-right: 0.25em;
|
||||
margin-left: 0.25em;
|
||||
svg {
|
||||
height: 0.75em;
|
||||
width: 0.75em;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue