discourse/app/assets/stylesheets/common/components/navs.scss

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

130 lines
2.3 KiB
SCSS
Raw Normal View History

2013-02-06 03:16:51 +08:00
// --------------------------------------------------
// Navigation menus
// --------------------------------------------------
// Base
// --------------------------------------------------
%nav {
margin-left: 0;
list-style: none;
li a {
2013-02-06 03:16:51 +08:00
display: block;
text-decoration: none;
}
}
// Pill nav
// --------------------------------------------------
.nav-pills {
@extend %nav;
display: flex;
flex-direction: row;
align-items: stretch;
gap: 0.5em;
2013-02-06 03:16:51 +08:00
> li {
display: flex;
> a,
button {
position: relative;
border-radius: var(--d-nav-pill-border-radius);
padding: 0.65em 0.75em;
color: var(--primary);
line-height: var(--line-height-small);
box-sizing: border-box;
min-height: 30px;
display: flex;
align-items: center;
background-color: var(--d-nav-bg-color);
transition: var(--d-button-transition);
.d-icon {
margin-right: 5px;
color: var(--primary-high);
transition: color 0.2s;
}
2013-02-06 03:16:51 +08:00
&:hover {
color: var(--d-nav-color--hover);
background: var(--d-nav-bg-color--hover);
.d-icon {
color: var(--d-nav-color--hover);
}
2013-02-06 03:16:51 +08:00
}
}
a.active,
button.active {
@include nav-active();
2013-02-06 03:16:51 +08:00
}
}
}
// Stacked nav
// --------------------------------------------------
.nav-stacked {
@extend %nav;
padding: 0;
background: var(--primary-low);
2017-08-24 04:16:18 +08:00
li {
border-bottom: 1px solid var(--primary-low);
2017-08-24 04:16:18 +08:00
2013-02-06 03:16:51 +08:00
&:last-of-type {
border-bottom: 0;
}
2017-08-24 04:16:18 +08:00
&.indent {
padding-left: 15px;
}
2013-02-06 03:16:51 +08:00
}
2017-08-24 04:16:18 +08:00
a {
margin: 0;
padding: 0.75em;
line-height: var(--line-height-small);
cursor: pointer;
color: var(--primary);
@include ellipsis;
&.active {
position: relative;
--arrow-thickness: 8px;
&::after {
position: absolute;
right: 0;
top: calc(50% - var(--arrow-thickness));
content: " ";
border: var(--arrow-thickness) solid transparent;
border-left-color: var(--secondary);
}
2017-08-24 04:16:18 +08:00
}
}
2013-02-06 03:16:51 +08:00
.count {
font-size: var(--font-down-1);
2013-02-06 03:16:51 +08:00
}
.glyph {
font-size: var(--font-down-1);
2017-08-24 04:16:18 +08:00
width: 1.25em;
text-align: center;
margin-right: 0.25em;
line-height: var(--line-height-large);
}
}
.user-navigation .nav-pills > li {
a,
button {
border-radius: 0px;
}
}