Skip to content

G
gitlab-ce
Commit 3feae782 authored by Vitaly Slobodin's avatar Vitaly Slobodin
Browse files
Options

Merge branch '326111-remove-ff-in-fe' into 'master' 

Removing the sidebar_refactor FF in the frontend

See merge request gitlab-org/gitlab!64324
parents b4ea0859 7b879280
Hide whitespace changes
Inline Side-by-side
Showing with 446 additions and 2950 deletions
app/assets/javascripts/fly_out_nav.js
View file @ 3feae782
import { GlBreakpointInstance as bp } from '@gitlab/ui/dist/utils';
import { SIDEBAR_COLLAPSED_CLASS } from './contextual_sidebar';
const isRefactoring = document.body.classList.contains('sidebar-refactoring');
const HIDE_INTERVAL_TIMEOUT = 300;
const COLLAPSED_PANEL_WIDTH = isRefactoring ? 48 : 50;
const COLLAPSED_PANEL_WIDTH = 48;
const IS_OVER_CLASS = 'is-over';
const IS_ABOVE_CLASS = 'is-above';
const IS_SHOWING_FLY_OUT_CLASS = 'is-showing-fly-out';
......@@ -89,12 +88,12 @@ export const moveSubItemsToPosition = (el, subItems) => {
const boundingRect = el.getBoundingClientRect();
const left = sidebar ? sidebar.offsetWidth : COLLAPSED_PANEL_WIDTH;
let top = calculateTop(boundingRect, subItems.offsetHeight);
if (isRefactoring && hasSubItems) {
if (hasSubItems) {
top -= header.offsetHeight;
} else if (isRefactoring) {
} else {
top = boundingRect.top;
}
const isAbove = top < boundingRect.top;
const isAbove = top <= boundingRect.top;
subItems.classList.add('fly-out-list');
subItems.style.transform = `translate3d(${left}px, ${Math.floor(top) - getHeaderHeight()}px, 0)`; // eslint-disable-line no-param-reassign
......
app/assets/stylesheets/framework.scss
View file @ 3feae782
......@@ -39,7 +39,7 @@
@import 'framework/selects';
@import 'framework/sidebar';
@import 'framework/contextual_sidebar_header';
@import 'framework/contextual_sidebar_refactoring/contextual_sidebar';
@import 'framework/contextual_sidebar';
@import 'framework/tables';
@import 'framework/notes';
@import 'framework/tabs';
......
app/assets/stylesheets/framework/contextual_sidebar_refactoring/contextual_sidebar_variant.scss → app/assets/stylesheets/framework/contextual_sidebar.scss
View file @ 3feae782
//
// VARIABLES
//
$top-level-item-color: $purple-900;
//
// TEMPORARY OVERRIDES
// Needed while we serve both *_base and *_variant stylesheets
// TODO: These have to be removed during the ':sidebar_refactor' flag rollout
//
&.gl-dark .nav-sidebar li.active {
box-shadow: none;
}
&.gl-dark .nav-sidebar .sidebar-sub-level-items {
box-shadow: none;
border: 1px solid $border-color;
}
&.gl-dark .sidebar-top-level-items .context-header a .avatar-container.rect-avatar .avatar.s32 {
color: $white;
}
&.gl-dark .nav-sidebar li a,
&.gl-dark .toggle-sidebar-button .collapse-text,
&.gl-dark .toggle-sidebar-button .icon-chevron-double-lg-left,
&.gl-dark .toggle-sidebar-button .icon-chevron-double-lg-right,
&.gl-dark .sidebar-top-level-items .context-header a .sidebar-context-title,
&.gl-dark .nav-sidebar-inner-scroll > div.context-header a .sidebar-context-title,
&.gl-dark .nav-sidebar a.has-sub-items + .sidebar-sub-level-items .fly-out-top-item a,
&.gl-dark .nav-sidebar a.has-sub-items + .sidebar-sub-level-items .fly-out-top-item a:hover,
&.gl-dark .nav-sidebar a.has-sub-items + .sidebar-sub-level-items .fly-out-top-item.active a,
&.gl-dark .nav-sidebar a.has-sub-items + .sidebar-sub-level-items .fly-out-top-item .fly-out-top-item-container {
color: $gray-darkest;
}
&.gl-dark .nav-sidebar a.has-sub-items + .sidebar-sub-level-items .fly-out-top-item a,
&.gl-dark .nav-sidebar a.has-sub-items + .sidebar-sub-level-items .fly-out-top-item a:hover,
&.gl-dark .nav-sidebar a.has-sub-items + .sidebar-sub-level-items .fly-out-top-item.active a,
&.gl-dark .nav-sidebar a.has-sub-items + .sidebar-sub-level-items .fly-out-top-item .fly-out-top-item-container {
@include gl-mt-0;
}
&.gl-dark .nav-sidebar a:not(.has-sub-items) + .sidebar-sub-level-items .fly-out-top-item a,
&.gl-dark .nav-sidebar a:not(.has-sub-items) + .sidebar-sub-level-items .fly-out-top-item a:hover,
&.gl-dark .nav-sidebar a:not(.has-sub-items) + .sidebar-sub-level-items .fly-out-top-item.active a,
&.gl-dark .nav-sidebar a:not(.has-sub-items) + .sidebar-sub-level-items .fly-out-top-item .fly-out-top-item-container {
background: $white;
color: $gray-darkest;
&::before {
border-right-color: $white;
}
}
&.gl-dark .nav-sidebar .sidebar-sub-level-items {
background-color: $white;
}
&.ui-indigo .nav-sidebar li.active:not(.fly-out-top-item) > a {
color: $top-level-item-color;
}
&.ui-indigo .nav-sidebar li.active .nav-icon-container svg {
fill: $top-level-item-color;
}
.nav-sidebar {
box-shadow: none;
li.active {
background-color: transparent;
box-shadow: none !important; // TODO: This should be updated in `theme_helper.scss` together with ':sidebar_refactor' rollout
}
}
//
// MIXINS
//
......@@ -112,7 +35,6 @@ $top-level-item-color: $purple-900;
.icon-chevron-double-lg-left {
@include gl-rotate-180;
@include gl-display-block; // TODO: shouldn't be needed after the flag roll out
@include gl-m-0;
}
}
......@@ -219,15 +141,10 @@ $top-level-item-color: $purple-900;
.avatar.s32 {
@extend .rect-avatar.s32;
//color: $gray-900;
box-shadow: $avatar-box-shadow;
}
}
}
.sidebar-context-title {
color: $top-level-item-color;
}
}
@mixin top-level-item {
......@@ -258,8 +175,6 @@ $top-level-item-color: $purple-900;
@include gl-cursor-default;
@include gl-pointer-events-none;
@include gl-font-sm;
background-color: $purple-900;
color: $white;
@if $has-sub-items {
@include gl-mt-0;
......@@ -269,7 +184,8 @@ $top-level-item-color: $purple-900;
@include gl-my-n2;
@include gl-mt-0;
@include gl-relative;
background-color: $black;
@include gl-text-white;
background: var(--black, $black);
strong {
@include gl-font-weight-normal;
......@@ -287,6 +203,7 @@ $top-level-item-color: $purple-900;
border-top: $gl-spacing-scale-2 solid transparent;
border-bottom: $gl-spacing-scale-2 solid transparent;
border-right: $gl-spacing-scale-2 solid $black;
border-right-color: var(--black, $black);
}
}
}
......@@ -343,7 +260,7 @@ $top-level-item-color: $purple-900;
a {
@include gl-text-decoration-none;
color: $top-level-item-color;
color: $gray-900;
}
li {
......@@ -392,13 +309,15 @@ $top-level-item-color: $purple-900;
}
a.has-sub-items + .sidebar-sub-level-items {
@include gl-mt-n2;
.fly-out-top-item {
@include fly-out-top-item($has-sub-items: true);
}
}
a.has-sub-items + .sidebar-sub-level-items.fly-out-list {
@include gl-mt-n2;
}
@media (min-width: map-get($grid-breakpoints, md)) and (max-width: map-get($grid-breakpoints, xl) - 1px) {
&:not(.sidebar-expanded-mobile) {
@include collapse-contextual-sidebar;
......@@ -445,8 +364,8 @@ $top-level-item-color: $purple-900;
}
.badge.badge-pill {
@include gl-font-weight-normal; // TODO: update in `theme_helper.scss`
color: $blue-700; // TODO: update in `theme_helper.scss`
@include gl-font-weight-normal;
color: $blue-700;
}
}
}
......@@ -484,7 +403,6 @@ $top-level-item-color: $purple-900;
@include side-panel-toggle;
background-color: $gray-50;
border-top: 1px solid $border-color;
color: $top-level-item-color;
position: fixed;
bottom: 0;
width: $contextual-sidebar-width;
......@@ -538,14 +456,10 @@ $top-level-item-color: $purple-900;
//
// PANELS-SPECIFIC
// TODO: Check whether we can remove these in favor of the utility-classes
//
.settings-avatar {
background-color: $white;
svg {
fill: $gl-text-color-secondary;
margin: auto;
}
}
......
app/assets/stylesheets/framework/contextual_sidebar_header.scss
View file @ 3feae782
......@@ -32,6 +32,7 @@
.sidebar-context-title {
overflow: hidden;
text-overflow: ellipsis;
color: $gray-900;
&.text-secondary {
font-weight: normal;
......
app/assets/stylesheets/framework/contextual_sidebar_refactoring/contextual_sidebar.scss deleted 100644 → 0
View file @ b4ea0859
body:not(.sidebar-refactoring) {
@import 'contextual_sidebar_base';
}
body.sidebar-refactoring {
@import 'contextual_sidebar_variant';
}
app/assets/stylesheets/framework/contextual_sidebar_refactoring/contextual_sidebar_base.scss deleted 100644 → 0
View file @ b4ea0859
@mixin collapse-contextual-sidebar-content {
@include context-header-collapsed;
.sidebar-top-level-items > li {
.sidebar-sub-level-items {
&:not(.flyout-list) {
display: none;
}
}
}
.nav-icon-container {
margin-right: 0;
}
.toggle-sidebar-button {
padding: 16px;
width: $contextual-sidebar-collapsed-width - 1px;
.collapse-text,
.icon-chevron-double-lg-left {
display: none;
}
.icon-chevron-double-lg-right {
display: block;
margin: 0;
}
}
}
@mixin collapse-contextual-sidebar {
width: $contextual-sidebar-collapsed-width;
.nav-sidebar-inner-scroll {
overflow-x: hidden;
}
.badge.badge-pill:not(.fly-out-badge),
.nav-item-name {
@include gl-sr-only;
}
.sidebar-top-level-items > li > a {
min-height: 45px;
}
.fly-out-top-item {
display: block;
}
.avatar-container {
margin: 0 auto;
}
}
@at-root {
.page-with-contextual-sidebar {
transition: padding-left $sidebar-transition-duration;
@include media-breakpoint-up(md) {
padding-left: $contextual-sidebar-collapsed-width;
}
@include media-breakpoint-up(xl) {
padding-left: $contextual-sidebar-width;
}
.issues-bulk-update.right-sidebar.right-sidebar-expanded .issuable-sidebar-header {
padding: 10px 0 15px;
}
}
.page-with-icon-sidebar {
@include media-breakpoint-up(md) {
padding-left: $contextual-sidebar-collapsed-width;
}
}
.settings-avatar {
background-color: $white;
svg {
fill: $gl-text-color-secondary;
margin: auto;
}
}
.nav-sidebar {
transition: width $sidebar-transition-duration, left $sidebar-transition-duration;
position: fixed;
z-index: 600;
width: $contextual-sidebar-width;
top: $header-height;
bottom: 0;
left: 0;
background-color: $gray-light;
box-shadow: inset -1px 0 0 $border-color;
transform: translate3d(0, 0, 0);
&:not(.sidebar-collapsed-desktop) {
@media (min-width: map-get($grid-breakpoints, sm)) and (max-width: map-get($grid-breakpoints, sm)) {
box-shadow: inset -1px 0 0 $border-color, 2px 1px 3px $dropdown-shadow-color;
}
}
&.sidebar-collapsed-desktop {
@include collapse-contextual-sidebar;
}
&.sidebar-expanded-mobile {
left: 0;
}
a {
text-decoration: none;
}
ul {
padding-left: 0;
list-style: none;
}
li {
white-space: nowrap;
a {
transition: padding $sidebar-transition-duration;
display: flex;
align-items: center;
padding: 12px $gl-padding;
color: $gl-text-color-secondary;
}
.nav-item-name {
flex: 1;
}
&.active {
> a {
font-weight: $gl-font-weight-bold;
}
}
}
@include media-breakpoint-down(sm) {
left: (-$contextual-sidebar-width);
}
.nav-icon-container {
display: flex;
margin-right: 8px;
}
.fly-out-top-item {
display: none;
}
svg {
height: 16px;
width: 16px;
}
@media (min-width: map-get($grid-breakpoints, md)) and (max-width: map-get($grid-breakpoints, xl) - 1px) {
&:not(.sidebar-expanded-mobile) {
@include collapse-contextual-sidebar;
@include collapse-contextual-sidebar-content;
}
}
}
.nav-sidebar-inner-scroll {
height: 100%;
width: 100%;
overflow: auto;
}
.sidebar-sub-level-items {
display: none;
padding-bottom: 8px;
> li {
a {
padding: 8px 16px 8px 40px;
&:hover,
&:focus {
background: $link-active-background;
color: $gl-text-color;
}
}
&.active {
a {
&,
&:hover,
&:focus {
background: $link-active-background;
}
}
}
}
}
.sidebar-top-level-items {
margin-bottom: 60px;
> li {
> a {
@include media-breakpoint-up(sm) {
margin-right: 1px;
}
&:hover {
color: $gl-text-color;
}
}
&.is-showing-fly-out {
> a {
margin-right: 1px;
}
.sidebar-sub-level-items {
@include media-breakpoint-up(sm) {
position: fixed;
top: 0;
left: 0;
min-width: 150px;
margin-top: -1px;
padding: 4px 1px;
background-color: $white;
box-shadow: 2px 1px 3px $dropdown-shadow-color;
border: 1px solid $gray-darker;
border-left: 0;
border-radius: 0 3px 3px 0;
&::before {
content: '';
position: absolute;
top: -30px;
bottom: -30px;
left: -10px;
right: -30px;
z-index: -1;
}
&.is-above {
margin-top: 1px;
}
.divider {
height: 1px;
margin: 4px -1px;
padding: 0;
background-color: $dropdown-divider-bg;
}
> .active {
box-shadow: none;
> a {
background-color: transparent;
}
}
a {
padding: 8px 16px;
color: $gl-text-color;
&:hover,
&:focus {
background-color: $gray-darker;
}
}
}
}
}
.badge.badge-pill {
background-color: $inactive-badge-background;
color: $gl-text-color-secondary;
}
&.active {
background: $link-active-background;
> a {
margin-left: 4px;
// Subtract width of left border on active element
padding-left: $gl-padding-12;
}
.badge.badge-pill {
font-weight: $gl-font-weight-bold;
}
.sidebar-sub-level-items:not(.is-fly-out-only) {
display: block;
}
}
&.active > a:hover,
&.is-over > a {
background-color: $link-hover-background;
}
}
}
// Collapsed nav
.toggle-sidebar-button,
.close-nav-button {
@include side-panel-toggle;
}
.toggle-sidebar-button,
.close-nav-button {
position: fixed;
bottom: 0;
width: $contextual-sidebar-width - 1px;
border-top: 1px solid $border-color;
svg {
margin-right: 8px;
}
.icon-chevron-double-lg-right {
display: none;
}
}
.collapse-text {
white-space: nowrap;
overflow: hidden;
}
.sidebar-collapsed-desktop {
@include collapse-contextual-sidebar-content;
}
.fly-out-top-item {
> a {
display: flex;
}
.fly-out-badge {
margin-left: 8px;
}
}
.fly-out-top-item-name {
flex: 1;
}
// Mobile nav
.close-nav-button {
display: none;
}
@include media-breakpoint-down(sm) {
.close-nav-button {
display: flex;
}
.toggle-sidebar-button {
display: none;
}
.mobile-overlay {
display: none;
&.mobile-nav-open {
display: block;
position: fixed;
background-color: $black-transparent;
height: 100%;
width: 100%;
z-index: $zindex-dropdown-menu;
}
}
}
}
app/assets/stylesheets/startup/startup-dark.scss
View file @ 3feae782
......@@ -13,6 +13,10 @@ body.gl-dark {
--orange-400: #ab6100;
--gl-text-color: #fafafa;
--border-color: #4f4f4f;
--black: #fff;
}
.nav-sidebar li.active {
box-shadow: none;
}
:root {
--white: #333;
......@@ -933,6 +937,7 @@ input {
.context-header .sidebar-context-title {
overflow: hidden;
text-overflow: ellipsis;
color: #fafafa;
}
@media (min-width: 768px) {
.page-with-contextual-sidebar {
......@@ -951,20 +956,14 @@ input {
}
.nav-sidebar {
position: fixed;
bottom: 0;
left: 0;
z-index: 600;
width: 220px;
top: 40px;
bottom: 0;
left: 0;
background-color: #303030;
box-shadow: inset -1px 0 0 #404040;
transform: translate3d(0, 0, 0);
}
@media (min-width: 576px) and (max-width: 576px) {
.nav-sidebar:not(.sidebar-collapsed-desktop) {
box-shadow: inset -1px 0 0 #404040, 2px 1px 3px rgba(0, 0, 0, 0.1);
}
}
.nav-sidebar.sidebar-collapsed-desktop {
width: 48px;
}
......@@ -972,7 +971,8 @@ input {
overflow-x: hidden;
}
.nav-sidebar.sidebar-collapsed-desktop .badge.badge-pill:not(.fly-out-badge),
.nav-sidebar.sidebar-collapsed-desktop .nav-item-name {
.nav-sidebar.sidebar-collapsed-desktop .nav-item-name,
.nav-sidebar.sidebar-collapsed-desktop .collapse-text {
border: 0;
clip: rect(0, 0, 0, 0);
height: 1px;
......@@ -984,479 +984,29 @@ input {
width: 1px;
}
.nav-sidebar.sidebar-collapsed-desktop .sidebar-top-level-items > li > a {
min-height: 45px;
}
.nav-sidebar.sidebar-collapsed-desktop .fly-out-top-item {
display: block;
}
.nav-sidebar.sidebar-collapsed-desktop .avatar-container {
margin: 0 auto;
}
.nav-sidebar a {
text-decoration: none;
}
.nav-sidebar ul {
padding-left: 0;
list-style: none;
}
.nav-sidebar li {
white-space: nowrap;
}
.nav-sidebar li a {
display: flex;
align-items: center;
padding: 12px 16px;
color: #999;
}
.nav-sidebar li .nav-item-name {
flex: 1;
}
.nav-sidebar li.active > a {
font-weight: 600;
}
@media (max-width: 767.98px) {
.nav-sidebar {
left: -220px;
}
}
.nav-sidebar .nav-icon-container {
display: flex;
margin-right: 8px;
}
.nav-sidebar .fly-out-top-item {
display: none;
}
.nav-sidebar svg {
height: 16px;
width: 16px;
}
@media (min-width: 768px) and (max-width: 1199px) {
.nav-sidebar:not(.sidebar-expanded-mobile) {
width: 48px;
}
.nav-sidebar:not(.sidebar-expanded-mobile) .nav-sidebar-inner-scroll {
overflow-x: hidden;
}
.nav-sidebar:not(.sidebar-expanded-mobile)
.badge.badge-pill:not(.fly-out-badge),
.nav-sidebar:not(.sidebar-expanded-mobile) .nav-item-name {
border: 0;
clip: rect(0, 0, 0, 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
white-space: nowrap;
width: 1px;
}
.nav-sidebar:not(.sidebar-expanded-mobile) .sidebar-top-level-items > li > a {
min-height: 45px;
}
.nav-sidebar:not(.sidebar-expanded-mobile) .fly-out-top-item {
display: block;
}
.nav-sidebar:not(.sidebar-expanded-mobile) .avatar-container {
margin: 0 auto;
}
.nav-sidebar:not(.sidebar-expanded-mobile) .context-header {
height: 60px;
width: 48px;
}
.nav-sidebar:not(.sidebar-expanded-mobile) .context-header a {
padding: 10px 4px;
}
.nav-sidebar:not(.sidebar-expanded-mobile) .sidebar-context-title {
border: 0;
clip: rect(0, 0, 0, 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
white-space: nowrap;
width: 1px;
}
.nav-sidebar:not(.sidebar-expanded-mobile)
.sidebar-top-level-items
> li
.sidebar-sub-level-items:not(.flyout-list) {
display: none;
}
.nav-sidebar:not(.sidebar-expanded-mobile) .nav-icon-container {
margin-right: 0;
}
.nav-sidebar:not(.sidebar-expanded-mobile) .toggle-sidebar-button {
padding: 16px;
width: 47px;
}
.nav-sidebar:not(.sidebar-expanded-mobile)
.toggle-sidebar-button
.collapse-text,
.nav-sidebar:not(.sidebar-expanded-mobile)
.toggle-sidebar-button
.icon-chevron-double-lg-left {
display: none;
}
.nav-sidebar:not(.sidebar-expanded-mobile)
.toggle-sidebar-button
.icon-chevron-double-lg-right {
display: block;
margin: 0;
}
}
.nav-sidebar-inner-scroll {
height: 100%;
width: 100%;
overflow: auto;
}
.sidebar-sub-level-items {
display: none;
padding-bottom: 8px;
}
.sidebar-sub-level-items > li a {
padding: 8px 16px 8px 40px;
}
.sidebar-sub-level-items > li.active a {
background: rgba(255, 255, 255, 0.04);
}
.sidebar-top-level-items {
margin-bottom: 60px;
}
@media (min-width: 576px) {
.sidebar-top-level-items > li > a {
margin-right: 1px;
}
}
.sidebar-top-level-items > li .badge.badge-pill {
background-color: rgba(255, 255, 255, 0.08);
color: #999;
}
.sidebar-top-level-items > li.active {
background: rgba(255, 255, 255, 0.04);
}
.sidebar-top-level-items > li.active > a {
margin-left: 4px;
padding-left: 12px;
}
.sidebar-top-level-items > li.active .badge.badge-pill {
font-weight: 600;
}
.sidebar-top-level-items
> li.active
.sidebar-sub-level-items:not(.is-fly-out-only) {
display: block;
}
.toggle-sidebar-button,
.close-nav-button {
height: 48px;
padding: 0 16px;
background-color: #303030;
border: 0;
color: #999;
display: flex;
align-items: center;
}
.toggle-sidebar-button,
.close-nav-button {
position: fixed;
bottom: 0;
width: 219px;
border-top: 1px solid #404040;
}
.toggle-sidebar-button svg,
.close-nav-button svg {
margin-right: 8px;
}
.toggle-sidebar-button .icon-chevron-double-lg-right,
.close-nav-button .icon-chevron-double-lg-right {
display: none;
}
.collapse-text {
white-space: nowrap;
overflow: hidden;
}
.sidebar-collapsed-desktop .context-header {
height: 60px;
width: 48px;
}
.sidebar-collapsed-desktop .context-header a {
padding: 10px 4px;
}
.sidebar-collapsed-desktop .sidebar-context-title {
border: 0;
clip: rect(0, 0, 0, 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
white-space: nowrap;
width: 1px;
}
.sidebar-collapsed-desktop
.sidebar-top-level-items
> li
.sidebar-sub-level-items:not(.flyout-list) {
display: none;
}
.sidebar-collapsed-desktop .nav-icon-container {
margin-right: 0;
}
.sidebar-collapsed-desktop .toggle-sidebar-button {
padding: 16px;
width: 47px;
}
.sidebar-collapsed-desktop .toggle-sidebar-button .collapse-text,
.sidebar-collapsed-desktop .toggle-sidebar-button .icon-chevron-double-lg-left {
display: none;
}
.sidebar-collapsed-desktop
.toggle-sidebar-button
.icon-chevron-double-lg-right {
display: block;
margin: 0;
}
.fly-out-top-item > a {
display: flex;
}
.fly-out-top-item .fly-out-badge {
margin-left: 8px;
}
.fly-out-top-item-name {
flex: 1;
}
.close-nav-button {
display: none;
}
@media (max-width: 767.98px) {
.close-nav-button {
display: flex;
}
.toggle-sidebar-button {
display: none;
}
}
body.sidebar-refactoring.gl-dark .nav-sidebar li.active {
box-shadow: none;
}
body.sidebar-refactoring.gl-dark .nav-sidebar .sidebar-sub-level-items {
box-shadow: none;
border: 1px solid #404040;
}
body.sidebar-refactoring.gl-dark
.sidebar-top-level-items
.context-header
a
.avatar-container.rect-avatar
.avatar.s32 {
color: #333;
}
body.sidebar-refactoring.gl-dark .nav-sidebar li a,
body.sidebar-refactoring.gl-dark .toggle-sidebar-button .collapse-text,
body.sidebar-refactoring.gl-dark
.toggle-sidebar-button
.icon-chevron-double-lg-left,
body.sidebar-refactoring.gl-dark
.toggle-sidebar-button
.icon-chevron-double-lg-right,
body.sidebar-refactoring.gl-dark
.sidebar-top-level-items
.context-header
a
.sidebar-context-title,
body.sidebar-refactoring.gl-dark
.nav-sidebar-inner-scroll
> div.context-header
a
.sidebar-context-title,
body.sidebar-refactoring.gl-dark
.nav-sidebar
a.has-sub-items
+ .sidebar-sub-level-items
.fly-out-top-item
a,
body.sidebar-refactoring.gl-dark
.nav-sidebar
a.has-sub-items
+ .sidebar-sub-level-items
.fly-out-top-item.active
a,
body.sidebar-refactoring.gl-dark
.nav-sidebar
a.has-sub-items
+ .sidebar-sub-level-items
.fly-out-top-item
.fly-out-top-item-container {
color: #c4c4c4;
}
body.sidebar-refactoring.gl-dark
.nav-sidebar
a.has-sub-items
+ .sidebar-sub-level-items
.fly-out-top-item
a,
body.sidebar-refactoring.gl-dark
.nav-sidebar
a.has-sub-items
+ .sidebar-sub-level-items
.fly-out-top-item.active
a,
body.sidebar-refactoring.gl-dark
.nav-sidebar
a.has-sub-items
+ .sidebar-sub-level-items
.fly-out-top-item
.fly-out-top-item-container {
margin-top: 0;
}
body.sidebar-refactoring.gl-dark
.nav-sidebar
a:not(.has-sub-items)
+ .sidebar-sub-level-items
.fly-out-top-item
a,
body.sidebar-refactoring.gl-dark
.nav-sidebar
a:not(.has-sub-items)
+ .sidebar-sub-level-items
.fly-out-top-item.active
a,
body.sidebar-refactoring.gl-dark
.nav-sidebar
a:not(.has-sub-items)
+ .sidebar-sub-level-items
.fly-out-top-item
.fly-out-top-item-container {
background: #333;
color: #c4c4c4;
}
body.sidebar-refactoring.gl-dark
.nav-sidebar
a:not(.has-sub-items)
+ .sidebar-sub-level-items
.fly-out-top-item
a::before,
body.sidebar-refactoring.gl-dark
.nav-sidebar
a:not(.has-sub-items)
+ .sidebar-sub-level-items
.fly-out-top-item.active
a::before,
body.sidebar-refactoring.gl-dark
.nav-sidebar
a:not(.has-sub-items)
+ .sidebar-sub-level-items
.fly-out-top-item
.fly-out-top-item-container::before {
border-right-color: #333;
}
body.sidebar-refactoring.gl-dark .nav-sidebar .sidebar-sub-level-items {
background-color: #333;
}
body.sidebar-refactoring.ui-indigo
.nav-sidebar
li.active:not(.fly-out-top-item)
> a {
color: #2f2a6b;
}
body.sidebar-refactoring.ui-indigo
.nav-sidebar
li.active
.nav-icon-container
svg {
fill: #2f2a6b;
}
body.sidebar-refactoring .nav-sidebar {
box-shadow: none;
}
body.sidebar-refactoring .nav-sidebar li.active {
background-color: transparent;
box-shadow: none !important;
}
@media (min-width: 768px) {
body.sidebar-refactoring .page-with-contextual-sidebar {
padding-left: 48px;
}
}
@media (min-width: 1200px) {
body.sidebar-refactoring .page-with-contextual-sidebar {
padding-left: 220px;
}
}
@media (min-width: 768px) {
body.sidebar-refactoring .page-with-icon-sidebar {
padding-left: 48px;
}
}
body.sidebar-refactoring .nav-sidebar {
position: fixed;
bottom: 0;
left: 0;
z-index: 600;
width: 220px;
top: 40px;
background-color: #303030;
transform: translate3d(0, 0, 0);
}
body.sidebar-refactoring .nav-sidebar.sidebar-collapsed-desktop {
width: 48px;
}
body.sidebar-refactoring
.nav-sidebar.sidebar-collapsed-desktop
.nav-sidebar-inner-scroll {
overflow-x: hidden;
}
body.sidebar-refactoring
.nav-sidebar.sidebar-collapsed-desktop
.badge.badge-pill:not(.fly-out-badge),
body.sidebar-refactoring .nav-sidebar.sidebar-collapsed-desktop .nav-item-name,
body.sidebar-refactoring .nav-sidebar.sidebar-collapsed-desktop .collapse-text {
border: 0;
clip: rect(0, 0, 0, 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
white-space: nowrap;
width: 1px;
}
body.sidebar-refactoring
.nav-sidebar.sidebar-collapsed-desktop
.sidebar-top-level-items
> li
> a {
min-height: unset;
}
body.sidebar-refactoring
.nav-sidebar.sidebar-collapsed-desktop
.fly-out-top-item:not(.divider) {
.nav-sidebar.sidebar-collapsed-desktop .fly-out-top-item:not(.divider) {
display: block !important;
}
body.sidebar-refactoring
.nav-sidebar.sidebar-collapsed-desktop
.avatar-container {
.nav-sidebar.sidebar-collapsed-desktop .avatar-container {
margin: 0 auto;
}
body.sidebar-refactoring
.nav-sidebar.sidebar-collapsed-desktop
li.active:not(.fly-out-top-item)
> a {
.nav-sidebar.sidebar-collapsed-desktop li.active:not(.fly-out-top-item) > a {
background-color: rgba(41, 41, 97, 0.08);
}
body.sidebar-refactoring .nav-sidebar a {
.nav-sidebar a {
text-decoration: none;
color: #2f2a6b;
color: #fafafa;
}
body.sidebar-refactoring .nav-sidebar li {
.nav-sidebar li {
white-space: nowrap;
}
body.sidebar-refactoring .nav-sidebar li .nav-item-name {
.nav-sidebar li .nav-item-name {
flex: 1;
}
body.sidebar-refactoring .nav-sidebar li > a,
body.sidebar-refactoring .nav-sidebar li > .fly-out-top-item-container {
.nav-sidebar li > a,
.nav-sidebar li > .fly-out-top-item-container {
padding-left: 0.75rem;
padding-right: 0.75rem;
padding-top: 0.5rem;
......@@ -1468,49 +1018,42 @@ body.sidebar-refactoring .nav-sidebar li > .fly-out-top-item-container {
line-height: 1rem;
margin: 1px 4px;
}
body.sidebar-refactoring .nav-sidebar li.active > a {
.nav-sidebar li.active > a {
font-weight: 600;
}
body.sidebar-refactoring
.nav-sidebar
li.active:not(.fly-out-top-item)
> a:not(.has-sub-items) {
.nav-sidebar li.active:not(.fly-out-top-item) > a:not(.has-sub-items) {
background-color: rgba(41, 41, 97, 0.08);
}
body.sidebar-refactoring .nav-sidebar ul {
.nav-sidebar ul {
padding-left: 0;
list-style: none;
}
@media (max-width: 767.98px) {
body.sidebar-refactoring .nav-sidebar {
.nav-sidebar {
left: -220px;
}
}
body.sidebar-refactoring .nav-sidebar .nav-icon-container {
.nav-sidebar .nav-icon-container {
display: flex;
margin-right: 8px;
}
body.sidebar-refactoring
.nav-sidebar
.nav-sidebar
a:not(.has-sub-items)
+ .sidebar-sub-level-items
.fly-out-top-item {
display: none;
}
body.sidebar-refactoring
.nav-sidebar
.nav-sidebar
a:not(.has-sub-items)
+ .sidebar-sub-level-items
.fly-out-top-item
a,
body.sidebar-refactoring
.nav-sidebar
.nav-sidebar
a:not(.has-sub-items)
+ .sidebar-sub-level-items
.fly-out-top-item.active
a,
body.sidebar-refactoring
.nav-sidebar
.nav-sidebar
a:not(.has-sub-items)
+ .sidebar-sub-level-items
.fly-out-top-item
......@@ -1522,30 +1065,26 @@ body.sidebar-refactoring
cursor: default;
pointer-events: none;
font-size: 0.75rem;
background-color: #2f2a6b;
color: #333;
margin-top: -0.25rem;
margin-bottom: -0.25rem;
margin-top: 0;
position: relative;
background-color: #fff;
color: #333;
background: var(--black, #fff);
}
body.sidebar-refactoring
.nav-sidebar
.nav-sidebar
a:not(.has-sub-items)
+ .sidebar-sub-level-items
.fly-out-top-item
a
strong,
body.sidebar-refactoring
.nav-sidebar
.nav-sidebar
a:not(.has-sub-items)
+ .sidebar-sub-level-items
.fly-out-top-item.active
a
strong,
body.sidebar-refactoring
.nav-sidebar
.nav-sidebar
a:not(.has-sub-items)
+ .sidebar-sub-level-items
.fly-out-top-item
......@@ -1553,20 +1092,17 @@ body.sidebar-refactoring
strong {
font-weight: 400;
}
body.sidebar-refactoring
.nav-sidebar
.nav-sidebar
a:not(.has-sub-items)
+ .sidebar-sub-level-items
.fly-out-top-item
a::before,
body.sidebar-refactoring
.nav-sidebar
.nav-sidebar
a:not(.has-sub-items)
+ .sidebar-sub-level-items
.fly-out-top-item.active
a::before,
body.sidebar-refactoring
.nav-sidebar
.nav-sidebar
a:not(.has-sub-items)
+ .sidebar-sub-level-items
.fly-out-top-item
......@@ -1582,34 +1118,18 @@ body.sidebar-refactoring
border-top: 0.25rem solid transparent;
border-bottom: 0.25rem solid transparent;
border-right: 0.25rem solid #fff;
border-right-color: var(--black, #fff);
}
body.sidebar-refactoring
.nav-sidebar
a.has-sub-items
+ .sidebar-sub-level-items {
margin-top: -0.25rem;
}
body.sidebar-refactoring
.nav-sidebar
a.has-sub-items
+ .sidebar-sub-level-items
.fly-out-top-item {
.nav-sidebar a.has-sub-items + .sidebar-sub-level-items .fly-out-top-item {
display: none;
}
body.sidebar-refactoring
.nav-sidebar
a.has-sub-items
+ .sidebar-sub-level-items
.fly-out-top-item
a,
body.sidebar-refactoring
.nav-sidebar
.nav-sidebar a.has-sub-items + .sidebar-sub-level-items .fly-out-top-item a,
.nav-sidebar
a.has-sub-items
+ .sidebar-sub-level-items
.fly-out-top-item.active
a,
body.sidebar-refactoring
.nav-sidebar
.nav-sidebar
a.has-sub-items
+ .sidebar-sub-level-items
.fly-out-top-item
......@@ -1621,30 +1141,21 @@ body.sidebar-refactoring
cursor: default;
pointer-events: none;
font-size: 0.75rem;
background-color: #2f2a6b;
color: #333;
margin-top: 0;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
@media (min-width: 768px) and (max-width: 1199px) {
body.sidebar-refactoring .nav-sidebar:not(.sidebar-expanded-mobile) {
.nav-sidebar:not(.sidebar-expanded-mobile) {
width: 48px;
}
body.sidebar-refactoring
.nav-sidebar:not(.sidebar-expanded-mobile)
.nav-sidebar-inner-scroll {
.nav-sidebar:not(.sidebar-expanded-mobile) .nav-sidebar-inner-scroll {
overflow-x: hidden;
}
body.sidebar-refactoring
.nav-sidebar:not(.sidebar-expanded-mobile)
.nav-sidebar:not(.sidebar-expanded-mobile)
.badge.badge-pill:not(.fly-out-badge),
body.sidebar-refactoring
.nav-sidebar:not(.sidebar-expanded-mobile)
.nav-item-name,
body.sidebar-refactoring
.nav-sidebar:not(.sidebar-expanded-mobile)
.collapse-text {
.nav-sidebar:not(.sidebar-expanded-mobile) .nav-item-name,
.nav-sidebar:not(.sidebar-expanded-mobile) .collapse-text {
border: 0;
clip: rect(0, 0, 0, 0);
height: 1px;
......@@ -1655,44 +1166,28 @@ body.sidebar-refactoring
white-space: nowrap;
width: 1px;
}
body.sidebar-refactoring
.nav-sidebar:not(.sidebar-expanded-mobile)
.sidebar-top-level-items
> li
> a {
.nav-sidebar:not(.sidebar-expanded-mobile) .sidebar-top-level-items > li > a {
min-height: unset;
}
body.sidebar-refactoring
.nav-sidebar:not(.sidebar-expanded-mobile)
.fly-out-top-item:not(.divider) {
.nav-sidebar:not(.sidebar-expanded-mobile) .fly-out-top-item:not(.divider) {
display: block !important;
}
body.sidebar-refactoring
.nav-sidebar:not(.sidebar-expanded-mobile)
.avatar-container {
.nav-sidebar:not(.sidebar-expanded-mobile) .avatar-container {
margin: 0 auto;
}
body.sidebar-refactoring
.nav-sidebar:not(.sidebar-expanded-mobile)
.nav-sidebar:not(.sidebar-expanded-mobile)
li.active:not(.fly-out-top-item)
> a {
background-color: rgba(41, 41, 97, 0.08);
}
body.sidebar-refactoring
.nav-sidebar:not(.sidebar-expanded-mobile)
.context-header {
.nav-sidebar:not(.sidebar-expanded-mobile) .context-header {
height: 60px;
width: 48px;
}
body.sidebar-refactoring
.nav-sidebar:not(.sidebar-expanded-mobile)
.context-header
a {
.nav-sidebar:not(.sidebar-expanded-mobile) .context-header a {
padding: 10px 4px;
}
body.sidebar-refactoring
.nav-sidebar:not(.sidebar-expanded-mobile)
.sidebar-context-title {
.nav-sidebar:not(.sidebar-expanded-mobile) .sidebar-context-title {
border: 0;
clip: rect(0, 0, 0, 0);
height: 1px;
......@@ -1703,58 +1198,45 @@ body.sidebar-refactoring
white-space: nowrap;
width: 1px;
}
body.sidebar-refactoring
.nav-sidebar:not(.sidebar-expanded-mobile)
.context-header {
.nav-sidebar:not(.sidebar-expanded-mobile) .context-header {
height: auto;
}
body.sidebar-refactoring
.nav-sidebar:not(.sidebar-expanded-mobile)
.context-header
a {
.nav-sidebar:not(.sidebar-expanded-mobile) .context-header a {
padding: 0.25rem;
}
body.sidebar-refactoring
.nav-sidebar:not(.sidebar-expanded-mobile)
.nav-sidebar:not(.sidebar-expanded-mobile)
.sidebar-top-level-items
> li
.sidebar-sub-level-items:not(.flyout-list) {
display: none;
}
body.sidebar-refactoring
.nav-sidebar:not(.sidebar-expanded-mobile)
.nav-icon-container {
.nav-sidebar:not(.sidebar-expanded-mobile) .nav-icon-container {
margin-right: 0;
}
body.sidebar-refactoring
.nav-sidebar:not(.sidebar-expanded-mobile)
.toggle-sidebar-button {
.nav-sidebar:not(.sidebar-expanded-mobile) .toggle-sidebar-button {
width: 48px;
}
body.sidebar-refactoring
.nav-sidebar:not(.sidebar-expanded-mobile)
.nav-sidebar:not(.sidebar-expanded-mobile)
.toggle-sidebar-button
.collapse-text {
display: none;
}
body.sidebar-refactoring
.nav-sidebar:not(.sidebar-expanded-mobile)
.nav-sidebar:not(.sidebar-expanded-mobile)
.toggle-sidebar-button
.icon-chevron-double-lg-left {
transform: rotate(180deg);
display: block;
margin: 0;
}
}
body.sidebar-refactoring .nav-sidebar-inner-scroll {
.nav-sidebar-inner-scroll {
height: 100%;
width: 100%;
overflow: auto;
}
body.sidebar-refactoring .nav-sidebar-inner-scroll > div.context-header {
.nav-sidebar-inner-scroll > div.context-header {
margin-top: 0.25rem;
}
body.sidebar-refactoring .nav-sidebar-inner-scroll > div.context-header a {
.nav-sidebar-inner-scroll > div.context-header a {
padding-left: 0.75rem;
padding-right: 0.75rem;
padding-top: 0.5rem;
......@@ -1769,78 +1251,46 @@ body.sidebar-refactoring .nav-sidebar-inner-scroll > div.context-header a {
margin-bottom: 0.25rem;
margin-top: 0;
}
body.sidebar-refactoring
.nav-sidebar-inner-scroll
> div.context-header
a
.avatar-container {
.nav-sidebar-inner-scroll > div.context-header a .avatar-container {
font-weight: 400;
flex: none;
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}
body.sidebar-refactoring
.nav-sidebar-inner-scroll
> div.context-header
a
.avatar-container.rect-avatar {
.nav-sidebar-inner-scroll > div.context-header a .avatar-container.rect-avatar {
border-style: none;
}
body.sidebar-refactoring
.nav-sidebar-inner-scroll
.nav-sidebar-inner-scroll
> div.context-header
a
.avatar-container.rect-avatar
.avatar.s32 {
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}
body.sidebar-refactoring
.nav-sidebar-inner-scroll
> div.context-header
a
.sidebar-context-title {
color: #2f2a6b;
}
body.sidebar-refactoring .sidebar-top-level-items {
.sidebar-top-level-items {
margin-top: 0.25rem;
margin-bottom: 60px;
}
body.sidebar-refactoring .sidebar-top-level-items .context-header a {
.sidebar-top-level-items .context-header a {
padding: 0.25rem;
margin-bottom: 0.25rem;
margin-top: 0;
}
body.sidebar-refactoring
.sidebar-top-level-items
.context-header
a
.avatar-container {
.sidebar-top-level-items .context-header a .avatar-container {
font-weight: 400;
flex: none;
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}
body.sidebar-refactoring
.sidebar-top-level-items
.context-header
a
.avatar-container.rect-avatar {
.sidebar-top-level-items .context-header a .avatar-container.rect-avatar {
border-style: none;
}
body.sidebar-refactoring
.sidebar-top-level-items
.sidebar-top-level-items
.context-header
a
.avatar-container.rect-avatar
.avatar.s32 {
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}
body.sidebar-refactoring
.sidebar-top-level-items
.context-header
a
.sidebar-context-title {
color: #2f2a6b;
}
body.sidebar-refactoring .sidebar-top-level-items > li .badge.badge-pill {
.sidebar-top-level-items > li .badge.badge-pill {
border-radius: 0.5rem;
padding-top: 0.125rem;
padding-bottom: 0.125rem;
......@@ -1849,29 +1299,25 @@ body.sidebar-refactoring .sidebar-top-level-items > li .badge.badge-pill {
background-color: #064787;
color: #9dc7f1;
}
body.sidebar-refactoring
.sidebar-top-level-items
.sidebar-top-level-items
> li.active
.sidebar-sub-level-items:not(.is-fly-out-only) {
display: block;
}
body.sidebar-refactoring
.sidebar-top-level-items
> li.active
.badge.badge-pill {
.sidebar-top-level-items > li.active .badge.badge-pill {
font-weight: 400;
color: #9dc7f1;
}
body.sidebar-refactoring .sidebar-sub-level-items {
.sidebar-sub-level-items {
padding-top: 0;
padding-bottom: 0;
display: none;
}
body.sidebar-refactoring .sidebar-sub-level-items:not(.fly-out-list) li > a {
.sidebar-sub-level-items:not(.fly-out-list) li > a {
padding-left: 2.25rem;
}
body.sidebar-refactoring .toggle-sidebar-button,
body.sidebar-refactoring .close-nav-button {
.toggle-sidebar-button,
.close-nav-button {
height: 48px;
padding: 0 16px;
background-color: #303030;
......@@ -1881,31 +1327,30 @@ body.sidebar-refactoring .close-nav-button {
align-items: center;
background-color: #303030;
border-top: 1px solid #404040;
color: #2f2a6b;
position: fixed;
bottom: 0;
width: 220px;
}
body.sidebar-refactoring .toggle-sidebar-button .collapse-text,
body.sidebar-refactoring .toggle-sidebar-button .icon-chevron-double-lg-left,
body.sidebar-refactoring .toggle-sidebar-button .icon-chevron-double-lg-right,
body.sidebar-refactoring .close-nav-button .collapse-text,
body.sidebar-refactoring .close-nav-button .icon-chevron-double-lg-left,
body.sidebar-refactoring .close-nav-button .icon-chevron-double-lg-right {
.toggle-sidebar-button .collapse-text,
.toggle-sidebar-button .icon-chevron-double-lg-left,
.toggle-sidebar-button .icon-chevron-double-lg-right,
.close-nav-button .collapse-text,
.close-nav-button .icon-chevron-double-lg-left,
.close-nav-button .icon-chevron-double-lg-right {
color: inherit;
}
body.sidebar-refactoring .collapse-text {
.collapse-text {
white-space: nowrap;
overflow: hidden;
}
body.sidebar-refactoring .sidebar-collapsed-desktop .context-header {
.sidebar-collapsed-desktop .context-header {
height: 60px;
width: 48px;
}
body.sidebar-refactoring .sidebar-collapsed-desktop .context-header a {
.sidebar-collapsed-desktop .context-header a {
padding: 10px 4px;
}
body.sidebar-refactoring .sidebar-collapsed-desktop .sidebar-context-title {
.sidebar-collapsed-desktop .sidebar-context-title {
border: 0;
clip: rect(0, 0, 0, 0);
height: 1px;
......@@ -1916,47 +1361,39 @@ body.sidebar-refactoring .sidebar-collapsed-desktop .sidebar-context-title {
white-space: nowrap;
width: 1px;
}
body.sidebar-refactoring .sidebar-collapsed-desktop .context-header {
.sidebar-collapsed-desktop .context-header {
height: auto;
}
body.sidebar-refactoring .sidebar-collapsed-desktop .context-header a {
.sidebar-collapsed-desktop .context-header a {
padding: 0.25rem;
}
body.sidebar-refactoring
.sidebar-collapsed-desktop
.sidebar-collapsed-desktop
.sidebar-top-level-items
> li
.sidebar-sub-level-items:not(.flyout-list) {
display: none;
}
body.sidebar-refactoring .sidebar-collapsed-desktop .nav-icon-container {
.sidebar-collapsed-desktop .nav-icon-container {
margin-right: 0;
}
body.sidebar-refactoring .sidebar-collapsed-desktop .toggle-sidebar-button {
.sidebar-collapsed-desktop .toggle-sidebar-button {
width: 48px;
}
body.sidebar-refactoring
.sidebar-collapsed-desktop
.toggle-sidebar-button
.collapse-text {
.sidebar-collapsed-desktop .toggle-sidebar-button .collapse-text {
display: none;
}
body.sidebar-refactoring
.sidebar-collapsed-desktop
.toggle-sidebar-button
.icon-chevron-double-lg-left {
.sidebar-collapsed-desktop .toggle-sidebar-button .icon-chevron-double-lg-left {
transform: rotate(180deg);
display: block;
margin: 0;
}
body.sidebar-refactoring .close-nav-button {
.close-nav-button {
display: none;
}
@media (max-width: 767.98px) {
body.sidebar-refactoring .close-nav-button {
.close-nav-button {
display: flex;
}
body.sidebar-refactoring .toggle-sidebar-button {
.toggle-sidebar-button {
display: none;
}
}
......@@ -2176,14 +1613,12 @@ svg.s16 {
border-radius: 2px;
}
.rect-avatar.s32,
body.sidebar-refactoring
.nav-sidebar-inner-scroll
.nav-sidebar-inner-scroll
> div.context-header
a
.avatar-container.rect-avatar
.avatar.s32,
body.sidebar-refactoring
.sidebar-top-level-items
.sidebar-top-level-items
.context-header
a
.avatar-container.rect-avatar
......@@ -2263,17 +1698,14 @@ body.gl-dark .search .search-input-wrap .search-icon,
body.gl-dark .search .search-input-wrap .clear-icon {
fill: rgba(250, 250, 250, 0.8);
}
body.gl-dark .nav-sidebar li.active {
box-shadow: inset 4px 0 0 #999;
}
body.gl-dark .nav-sidebar li.active > a {
color: #f0f0f0;
}
body.gl-dark .nav-sidebar li.active .nav-icon-container svg {
fill: #f0f0f0;
}
body.gl-dark .sidebar-top-level-items > li.active .badge.badge-pill {
color: #f0f0f0;
body.gl-dark .nav-sidebar .fly-out-top-item a,
body.gl-dark .nav-sidebar .fly-out-top-item.active a,
body.gl-dark .nav-sidebar .fly-out-top-item .fly-out-top-item-container {
background-color: #2f2a6b;
color: #333;
}
body.gl-dark .logo-text svg {
fill: var(--gl-text-color);
......@@ -2373,6 +1805,9 @@ body.gl-dark {
--black: #fff;
--svg-status-bg: #333;
}
.nav-sidebar li.active {
box-shadow: none;
}
.tab-width-8 {
-moz-tab-size: 8;
tab-size: 8;
......
app/assets/stylesheets/startup/startup-general.scss
View file @ 3feae782
......@@ -918,6 +918,7 @@ input {
.context-header .sidebar-context-title {
overflow: hidden;
text-overflow: ellipsis;
color: #303030;
}
@media (min-width: 768px) {
.page-with-contextual-sidebar {
......@@ -936,20 +937,14 @@ input {
}
.nav-sidebar {
position: fixed;
bottom: 0;
left: 0;
z-index: 600;
width: 220px;
top: 40px;
bottom: 0;
left: 0;
background-color: #fafafa;
box-shadow: inset -1px 0 0 #dbdbdb;
background-color: #f0f0f0;
transform: translate3d(0, 0, 0);
}
@media (min-width: 576px) and (max-width: 576px) {
.nav-sidebar:not(.sidebar-collapsed-desktop) {
box-shadow: inset -1px 0 0 #dbdbdb, 2px 1px 3px rgba(0, 0, 0, 0.1);
}
}
.nav-sidebar.sidebar-collapsed-desktop {
width: 48px;
}
......@@ -957,7 +952,8 @@ input {
overflow-x: hidden;
}
.nav-sidebar.sidebar-collapsed-desktop .badge.badge-pill:not(.fly-out-badge),
.nav-sidebar.sidebar-collapsed-desktop .nav-item-name {
.nav-sidebar.sidebar-collapsed-desktop .nav-item-name,
.nav-sidebar.sidebar-collapsed-desktop .collapse-text {
border: 0;
clip: rect(0, 0, 0, 0);
height: 1px;
......@@ -969,362 +965,29 @@ input {
width: 1px;
}
.nav-sidebar.sidebar-collapsed-desktop .sidebar-top-level-items > li > a {
min-height: 45px;
}
.nav-sidebar.sidebar-collapsed-desktop .fly-out-top-item {
display: block;
}
.nav-sidebar.sidebar-collapsed-desktop .avatar-container {
margin: 0 auto;
}
.nav-sidebar a {
text-decoration: none;
}
.nav-sidebar ul {
padding-left: 0;
list-style: none;
}
.nav-sidebar li {
white-space: nowrap;
}
.nav-sidebar li a {
display: flex;
align-items: center;
padding: 12px 16px;
color: #666;
}
.nav-sidebar li .nav-item-name {
flex: 1;
}
.nav-sidebar li.active > a {
font-weight: 600;
}
@media (max-width: 767.98px) {
.nav-sidebar {
left: -220px;
}
}
.nav-sidebar .nav-icon-container {
display: flex;
margin-right: 8px;
}
.nav-sidebar .fly-out-top-item {
display: none;
}
.nav-sidebar svg {
height: 16px;
width: 16px;
}
@media (min-width: 768px) and (max-width: 1199px) {
.nav-sidebar:not(.sidebar-expanded-mobile) {
width: 48px;
}
.nav-sidebar:not(.sidebar-expanded-mobile) .nav-sidebar-inner-scroll {
overflow-x: hidden;
}
.nav-sidebar:not(.sidebar-expanded-mobile)
.badge.badge-pill:not(.fly-out-badge),
.nav-sidebar:not(.sidebar-expanded-mobile) .nav-item-name {
border: 0;
clip: rect(0, 0, 0, 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
white-space: nowrap;
width: 1px;
}
.nav-sidebar:not(.sidebar-expanded-mobile) .sidebar-top-level-items > li > a {
min-height: 45px;
}
.nav-sidebar:not(.sidebar-expanded-mobile) .fly-out-top-item {
display: block;
}
.nav-sidebar:not(.sidebar-expanded-mobile) .avatar-container {
margin: 0 auto;
}
.nav-sidebar:not(.sidebar-expanded-mobile) .context-header {
height: 60px;
width: 48px;
}
.nav-sidebar:not(.sidebar-expanded-mobile) .context-header a {
padding: 10px 4px;
}
.nav-sidebar:not(.sidebar-expanded-mobile) .sidebar-context-title {
border: 0;
clip: rect(0, 0, 0, 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
white-space: nowrap;
width: 1px;
}
.nav-sidebar:not(.sidebar-expanded-mobile)
.sidebar-top-level-items
> li
.sidebar-sub-level-items:not(.flyout-list) {
display: none;
}
.nav-sidebar:not(.sidebar-expanded-mobile) .nav-icon-container {
margin-right: 0;
}
.nav-sidebar:not(.sidebar-expanded-mobile) .toggle-sidebar-button {
padding: 16px;
width: 47px;
}
.nav-sidebar:not(.sidebar-expanded-mobile)
.toggle-sidebar-button
.collapse-text,
.nav-sidebar:not(.sidebar-expanded-mobile)
.toggle-sidebar-button
.icon-chevron-double-lg-left {
display: none;
}
.nav-sidebar:not(.sidebar-expanded-mobile)
.toggle-sidebar-button
.icon-chevron-double-lg-right {
display: block;
margin: 0;
}
}
.nav-sidebar-inner-scroll {
height: 100%;
width: 100%;
overflow: auto;
}
.sidebar-sub-level-items {
display: none;
padding-bottom: 8px;
}
.sidebar-sub-level-items > li a {
padding: 8px 16px 8px 40px;
}
.sidebar-sub-level-items > li.active a {
background: rgba(0, 0, 0, 0.04);
}
.sidebar-top-level-items {
margin-bottom: 60px;
}
@media (min-width: 576px) {
.sidebar-top-level-items > li > a {
margin-right: 1px;
}
}
.sidebar-top-level-items > li .badge.badge-pill {
background-color: rgba(0, 0, 0, 0.08);
color: #666;
}
.sidebar-top-level-items > li.active {
background: rgba(0, 0, 0, 0.04);
}
.sidebar-top-level-items > li.active > a {
margin-left: 4px;
padding-left: 12px;
}
.sidebar-top-level-items > li.active .badge.badge-pill {
font-weight: 600;
}
.sidebar-top-level-items
> li.active
.sidebar-sub-level-items:not(.is-fly-out-only) {
display: block;
}
.toggle-sidebar-button,
.close-nav-button {
height: 48px;
padding: 0 16px;
background-color: #fafafa;
border: 0;
color: #666;
display: flex;
align-items: center;
}
.toggle-sidebar-button,
.close-nav-button {
position: fixed;
bottom: 0;
width: 219px;
border-top: 1px solid #dbdbdb;
}
.toggle-sidebar-button svg,
.close-nav-button svg {
margin-right: 8px;
}
.toggle-sidebar-button .icon-chevron-double-lg-right,
.close-nav-button .icon-chevron-double-lg-right {
display: none;
}
.collapse-text {
white-space: nowrap;
overflow: hidden;
}
.sidebar-collapsed-desktop .context-header {
height: 60px;
width: 48px;
}
.sidebar-collapsed-desktop .context-header a {
padding: 10px 4px;
}
.sidebar-collapsed-desktop .sidebar-context-title {
border: 0;
clip: rect(0, 0, 0, 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
white-space: nowrap;
width: 1px;
}
.sidebar-collapsed-desktop
.sidebar-top-level-items
> li
.sidebar-sub-level-items:not(.flyout-list) {
display: none;
}
.sidebar-collapsed-desktop .nav-icon-container {
margin-right: 0;
}
.sidebar-collapsed-desktop .toggle-sidebar-button {
padding: 16px;
width: 47px;
}
.sidebar-collapsed-desktop .toggle-sidebar-button .collapse-text,
.sidebar-collapsed-desktop .toggle-sidebar-button .icon-chevron-double-lg-left {
display: none;
}
.sidebar-collapsed-desktop
.toggle-sidebar-button
.icon-chevron-double-lg-right {
display: block;
margin: 0;
}
.fly-out-top-item > a {
display: flex;
}
.fly-out-top-item .fly-out-badge {
margin-left: 8px;
}
.fly-out-top-item-name {
flex: 1;
}
.close-nav-button {
display: none;
}
@media (max-width: 767.98px) {
.close-nav-button {
display: flex;
}
.toggle-sidebar-button {
display: none;
}
}
body.sidebar-refactoring.ui-indigo
.nav-sidebar
li.active:not(.fly-out-top-item)
> a {
color: #2f2a6b;
}
body.sidebar-refactoring.ui-indigo
.nav-sidebar
li.active
.nav-icon-container
svg {
fill: #2f2a6b;
}
body.sidebar-refactoring .nav-sidebar {
box-shadow: none;
}
body.sidebar-refactoring .nav-sidebar li.active {
background-color: transparent;
box-shadow: none !important;
}
@media (min-width: 768px) {
body.sidebar-refactoring .page-with-contextual-sidebar {
padding-left: 48px;
}
}
@media (min-width: 1200px) {
body.sidebar-refactoring .page-with-contextual-sidebar {
padding-left: 220px;
}
}
@media (min-width: 768px) {
body.sidebar-refactoring .page-with-icon-sidebar {
padding-left: 48px;
}
}
body.sidebar-refactoring .nav-sidebar {
position: fixed;
bottom: 0;
left: 0;
z-index: 600;
width: 220px;
top: 40px;
background-color: #f0f0f0;
transform: translate3d(0, 0, 0);
}
body.sidebar-refactoring .nav-sidebar.sidebar-collapsed-desktop {
width: 48px;
}
body.sidebar-refactoring
.nav-sidebar.sidebar-collapsed-desktop
.nav-sidebar-inner-scroll {
overflow-x: hidden;
}
body.sidebar-refactoring
.nav-sidebar.sidebar-collapsed-desktop
.badge.badge-pill:not(.fly-out-badge),
body.sidebar-refactoring .nav-sidebar.sidebar-collapsed-desktop .nav-item-name,
body.sidebar-refactoring .nav-sidebar.sidebar-collapsed-desktop .collapse-text {
border: 0;
clip: rect(0, 0, 0, 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
white-space: nowrap;
width: 1px;
}
body.sidebar-refactoring
.nav-sidebar.sidebar-collapsed-desktop
.sidebar-top-level-items
> li
> a {
min-height: unset;
}
body.sidebar-refactoring
.nav-sidebar.sidebar-collapsed-desktop
.fly-out-top-item:not(.divider) {
.nav-sidebar.sidebar-collapsed-desktop .fly-out-top-item:not(.divider) {
display: block !important;
}
body.sidebar-refactoring
.nav-sidebar.sidebar-collapsed-desktop
.avatar-container {
.nav-sidebar.sidebar-collapsed-desktop .avatar-container {
margin: 0 auto;
}
body.sidebar-refactoring
.nav-sidebar.sidebar-collapsed-desktop
li.active:not(.fly-out-top-item)
> a {
.nav-sidebar.sidebar-collapsed-desktop li.active:not(.fly-out-top-item) > a {
background-color: rgba(41, 41, 97, 0.08);
}
body.sidebar-refactoring .nav-sidebar a {
.nav-sidebar a {
text-decoration: none;
color: #2f2a6b;
color: #303030;
}
body.sidebar-refactoring .nav-sidebar li {
.nav-sidebar li {
white-space: nowrap;
}
body.sidebar-refactoring .nav-sidebar li .nav-item-name {
.nav-sidebar li .nav-item-name {
flex: 1;
}
body.sidebar-refactoring .nav-sidebar li > a,
body.sidebar-refactoring .nav-sidebar li > .fly-out-top-item-container {
.nav-sidebar li > a,
.nav-sidebar li > .fly-out-top-item-container {
padding-left: 0.75rem;
padding-right: 0.75rem;
padding-top: 0.5rem;
......@@ -1336,49 +999,42 @@ body.sidebar-refactoring .nav-sidebar li > .fly-out-top-item-container {
line-height: 1rem;
margin: 1px 4px;
}
body.sidebar-refactoring .nav-sidebar li.active > a {
.nav-sidebar li.active > a {
font-weight: 600;
}
body.sidebar-refactoring
.nav-sidebar
li.active:not(.fly-out-top-item)
> a:not(.has-sub-items) {
.nav-sidebar li.active:not(.fly-out-top-item) > a:not(.has-sub-items) {
background-color: rgba(41, 41, 97, 0.08);
}
body.sidebar-refactoring .nav-sidebar ul {
.nav-sidebar ul {
padding-left: 0;
list-style: none;
}
@media (max-width: 767.98px) {
body.sidebar-refactoring .nav-sidebar {
.nav-sidebar {
left: -220px;
}
}
body.sidebar-refactoring .nav-sidebar .nav-icon-container {
.nav-sidebar .nav-icon-container {
display: flex;
margin-right: 8px;
}
body.sidebar-refactoring
.nav-sidebar
.nav-sidebar
a:not(.has-sub-items)
+ .sidebar-sub-level-items
.fly-out-top-item {
display: none;
}
body.sidebar-refactoring
.nav-sidebar
.nav-sidebar
a:not(.has-sub-items)
+ .sidebar-sub-level-items
.fly-out-top-item
a,
body.sidebar-refactoring
.nav-sidebar
.nav-sidebar
a:not(.has-sub-items)
+ .sidebar-sub-level-items
.fly-out-top-item.active
a,
body.sidebar-refactoring
.nav-sidebar
.nav-sidebar
a:not(.has-sub-items)
+ .sidebar-sub-level-items
.fly-out-top-item
......@@ -1390,30 +1046,26 @@ body.sidebar-refactoring
cursor: default;
pointer-events: none;
font-size: 0.75rem;
background-color: #2f2a6b;
color: #fff;
margin-top: -0.25rem;
margin-bottom: -0.25rem;
margin-top: 0;
position: relative;
background-color: #000;
color: #fff;
background: var(--black, #000);
}
body.sidebar-refactoring
.nav-sidebar
.nav-sidebar
a:not(.has-sub-items)
+ .sidebar-sub-level-items
.fly-out-top-item
a
strong,
body.sidebar-refactoring
.nav-sidebar
.nav-sidebar
a:not(.has-sub-items)
+ .sidebar-sub-level-items
.fly-out-top-item.active
a
strong,
body.sidebar-refactoring
.nav-sidebar
.nav-sidebar
a:not(.has-sub-items)
+ .sidebar-sub-level-items
.fly-out-top-item
......@@ -1421,20 +1073,17 @@ body.sidebar-refactoring
strong {
font-weight: 400;
}
body.sidebar-refactoring
.nav-sidebar
.nav-sidebar
a:not(.has-sub-items)
+ .sidebar-sub-level-items
.fly-out-top-item
a::before,
body.sidebar-refactoring
.nav-sidebar
.nav-sidebar
a:not(.has-sub-items)
+ .sidebar-sub-level-items
.fly-out-top-item.active
a::before,
body.sidebar-refactoring
.nav-sidebar
.nav-sidebar
a:not(.has-sub-items)
+ .sidebar-sub-level-items
.fly-out-top-item
......@@ -1450,34 +1099,18 @@ body.sidebar-refactoring
border-top: 0.25rem solid transparent;
border-bottom: 0.25rem solid transparent;
border-right: 0.25rem solid #000;
border-right-color: var(--black, #000);
}
body.sidebar-refactoring
.nav-sidebar
a.has-sub-items
+ .sidebar-sub-level-items {
margin-top: -0.25rem;
}
body.sidebar-refactoring
.nav-sidebar
a.has-sub-items
+ .sidebar-sub-level-items
.fly-out-top-item {
.nav-sidebar a.has-sub-items + .sidebar-sub-level-items .fly-out-top-item {
display: none;
}
body.sidebar-refactoring
.nav-sidebar
a.has-sub-items
+ .sidebar-sub-level-items
.fly-out-top-item
a,
body.sidebar-refactoring
.nav-sidebar
.nav-sidebar a.has-sub-items + .sidebar-sub-level-items .fly-out-top-item a,
.nav-sidebar
a.has-sub-items
+ .sidebar-sub-level-items
.fly-out-top-item.active
a,
body.sidebar-refactoring
.nav-sidebar
.nav-sidebar
a.has-sub-items
+ .sidebar-sub-level-items
.fly-out-top-item
......@@ -1489,30 +1122,21 @@ body.sidebar-refactoring
cursor: default;
pointer-events: none;
font-size: 0.75rem;
background-color: #2f2a6b;
color: #fff;
margin-top: 0;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
@media (min-width: 768px) and (max-width: 1199px) {
body.sidebar-refactoring .nav-sidebar:not(.sidebar-expanded-mobile) {
.nav-sidebar:not(.sidebar-expanded-mobile) {
width: 48px;
}
body.sidebar-refactoring
.nav-sidebar:not(.sidebar-expanded-mobile)
.nav-sidebar-inner-scroll {
.nav-sidebar:not(.sidebar-expanded-mobile) .nav-sidebar-inner-scroll {
overflow-x: hidden;
}
body.sidebar-refactoring
.nav-sidebar:not(.sidebar-expanded-mobile)
.nav-sidebar:not(.sidebar-expanded-mobile)
.badge.badge-pill:not(.fly-out-badge),
body.sidebar-refactoring
.nav-sidebar:not(.sidebar-expanded-mobile)
.nav-item-name,
body.sidebar-refactoring
.nav-sidebar:not(.sidebar-expanded-mobile)
.collapse-text {
.nav-sidebar:not(.sidebar-expanded-mobile) .nav-item-name,
.nav-sidebar:not(.sidebar-expanded-mobile) .collapse-text {
border: 0;
clip: rect(0, 0, 0, 0);
height: 1px;
......@@ -1523,44 +1147,28 @@ body.sidebar-refactoring
white-space: nowrap;
width: 1px;
}
body.sidebar-refactoring
.nav-sidebar:not(.sidebar-expanded-mobile)
.sidebar-top-level-items
> li
> a {
.nav-sidebar:not(.sidebar-expanded-mobile) .sidebar-top-level-items > li > a {
min-height: unset;
}
body.sidebar-refactoring
.nav-sidebar:not(.sidebar-expanded-mobile)
.fly-out-top-item:not(.divider) {
.nav-sidebar:not(.sidebar-expanded-mobile) .fly-out-top-item:not(.divider) {
display: block !important;
}
body.sidebar-refactoring
.nav-sidebar:not(.sidebar-expanded-mobile)
.avatar-container {
.nav-sidebar:not(.sidebar-expanded-mobile) .avatar-container {
margin: 0 auto;
}
body.sidebar-refactoring
.nav-sidebar:not(.sidebar-expanded-mobile)
.nav-sidebar:not(.sidebar-expanded-mobile)
li.active:not(.fly-out-top-item)
> a {
background-color: rgba(41, 41, 97, 0.08);
}
body.sidebar-refactoring
.nav-sidebar:not(.sidebar-expanded-mobile)
.context-header {
.nav-sidebar:not(.sidebar-expanded-mobile) .context-header {
height: 60px;
width: 48px;
}
body.sidebar-refactoring
.nav-sidebar:not(.sidebar-expanded-mobile)
.context-header
a {
.nav-sidebar:not(.sidebar-expanded-mobile) .context-header a {
padding: 10px 4px;
}
body.sidebar-refactoring
.nav-sidebar:not(.sidebar-expanded-mobile)
.sidebar-context-title {
.nav-sidebar:not(.sidebar-expanded-mobile) .sidebar-context-title {
border: 0;
clip: rect(0, 0, 0, 0);
height: 1px;
......@@ -1571,58 +1179,45 @@ body.sidebar-refactoring
white-space: nowrap;
width: 1px;
}
body.sidebar-refactoring
.nav-sidebar:not(.sidebar-expanded-mobile)
.context-header {
.nav-sidebar:not(.sidebar-expanded-mobile) .context-header {
height: auto;
}
body.sidebar-refactoring
.nav-sidebar:not(.sidebar-expanded-mobile)
.context-header
a {
.nav-sidebar:not(.sidebar-expanded-mobile) .context-header a {
padding: 0.25rem;
}
body.sidebar-refactoring
.nav-sidebar:not(.sidebar-expanded-mobile)
.nav-sidebar:not(.sidebar-expanded-mobile)
.sidebar-top-level-items
> li
.sidebar-sub-level-items:not(.flyout-list) {
display: none;
}
body.sidebar-refactoring
.nav-sidebar:not(.sidebar-expanded-mobile)
.nav-icon-container {
.nav-sidebar:not(.sidebar-expanded-mobile) .nav-icon-container {
margin-right: 0;
}
body.sidebar-refactoring
.nav-sidebar:not(.sidebar-expanded-mobile)
.toggle-sidebar-button {
.nav-sidebar:not(.sidebar-expanded-mobile) .toggle-sidebar-button {
width: 48px;
}
body.sidebar-refactoring
.nav-sidebar:not(.sidebar-expanded-mobile)
.nav-sidebar:not(.sidebar-expanded-mobile)
.toggle-sidebar-button
.collapse-text {
display: none;
}
body.sidebar-refactoring
.nav-sidebar:not(.sidebar-expanded-mobile)
.nav-sidebar:not(.sidebar-expanded-mobile)
.toggle-sidebar-button
.icon-chevron-double-lg-left {
transform: rotate(180deg);
display: block;
margin: 0;
}
}
body.sidebar-refactoring .nav-sidebar-inner-scroll {
.nav-sidebar-inner-scroll {
height: 100%;
width: 100%;
overflow: auto;
}
body.sidebar-refactoring .nav-sidebar-inner-scroll > div.context-header {
.nav-sidebar-inner-scroll > div.context-header {
margin-top: 0.25rem;
}
body.sidebar-refactoring .nav-sidebar-inner-scroll > div.context-header a {
.nav-sidebar-inner-scroll > div.context-header a {
padding-left: 0.75rem;
padding-right: 0.75rem;
padding-top: 0.5rem;
......@@ -1637,78 +1232,46 @@ body.sidebar-refactoring .nav-sidebar-inner-scroll > div.context-header a {
margin-bottom: 0.25rem;
margin-top: 0;
}
body.sidebar-refactoring
.nav-sidebar-inner-scroll
> div.context-header
a
.avatar-container {
.nav-sidebar-inner-scroll > div.context-header a .avatar-container {
font-weight: 400;
flex: none;
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
}
body.sidebar-refactoring
.nav-sidebar-inner-scroll
> div.context-header
a
.avatar-container.rect-avatar {
.nav-sidebar-inner-scroll > div.context-header a .avatar-container.rect-avatar {
border-style: none;
}
body.sidebar-refactoring
.nav-sidebar-inner-scroll
.nav-sidebar-inner-scroll
> div.context-header
a
.avatar-container.rect-avatar
.avatar.s32 {
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
}
body.sidebar-refactoring
.nav-sidebar-inner-scroll
> div.context-header
a
.sidebar-context-title {
color: #2f2a6b;
}
body.sidebar-refactoring .sidebar-top-level-items {
.sidebar-top-level-items {
margin-top: 0.25rem;
margin-bottom: 60px;
}
body.sidebar-refactoring .sidebar-top-level-items .context-header a {
.sidebar-top-level-items .context-header a {
padding: 0.25rem;
margin-bottom: 0.25rem;
margin-top: 0;
}
body.sidebar-refactoring
.sidebar-top-level-items
.context-header
a
.avatar-container {
.sidebar-top-level-items .context-header a .avatar-container {
font-weight: 400;
flex: none;
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
}
body.sidebar-refactoring
.sidebar-top-level-items
.context-header
a
.avatar-container.rect-avatar {
.sidebar-top-level-items .context-header a .avatar-container.rect-avatar {
border-style: none;
}
body.sidebar-refactoring
.sidebar-top-level-items
.sidebar-top-level-items
.context-header
a
.avatar-container.rect-avatar
.avatar.s32 {
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
}
body.sidebar-refactoring
.sidebar-top-level-items
.context-header
a
.sidebar-context-title {
color: #2f2a6b;
}
body.sidebar-refactoring .sidebar-top-level-items > li .badge.badge-pill {
.sidebar-top-level-items > li .badge.badge-pill {
border-radius: 0.5rem;
padding-top: 0.125rem;
padding-bottom: 0.125rem;
......@@ -1717,29 +1280,25 @@ body.sidebar-refactoring .sidebar-top-level-items > li .badge.badge-pill {
background-color: #cbe2f9;
color: #0b5cad;
}
body.sidebar-refactoring
.sidebar-top-level-items
.sidebar-top-level-items
> li.active
.sidebar-sub-level-items:not(.is-fly-out-only) {
display: block;
}
body.sidebar-refactoring
.sidebar-top-level-items
> li.active
.badge.badge-pill {
.sidebar-top-level-items > li.active .badge.badge-pill {
font-weight: 400;
color: #0b5cad;
}
body.sidebar-refactoring .sidebar-sub-level-items {
.sidebar-sub-level-items {
padding-top: 0;
padding-bottom: 0;
display: none;
}
body.sidebar-refactoring .sidebar-sub-level-items:not(.fly-out-list) li > a {
.sidebar-sub-level-items:not(.fly-out-list) li > a {
padding-left: 2.25rem;
}
body.sidebar-refactoring .toggle-sidebar-button,
body.sidebar-refactoring .close-nav-button {
.toggle-sidebar-button,
.close-nav-button {
height: 48px;
padding: 0 16px;
background-color: #fafafa;
......@@ -1749,31 +1308,30 @@ body.sidebar-refactoring .close-nav-button {
align-items: center;
background-color: #f0f0f0;
border-top: 1px solid #dbdbdb;
color: #2f2a6b;
position: fixed;
bottom: 0;
width: 220px;
}
body.sidebar-refactoring .toggle-sidebar-button .collapse-text,
body.sidebar-refactoring .toggle-sidebar-button .icon-chevron-double-lg-left,
body.sidebar-refactoring .toggle-sidebar-button .icon-chevron-double-lg-right,
body.sidebar-refactoring .close-nav-button .collapse-text,
body.sidebar-refactoring .close-nav-button .icon-chevron-double-lg-left,
body.sidebar-refactoring .close-nav-button .icon-chevron-double-lg-right {
.toggle-sidebar-button .collapse-text,
.toggle-sidebar-button .icon-chevron-double-lg-left,
.toggle-sidebar-button .icon-chevron-double-lg-right,
.close-nav-button .collapse-text,
.close-nav-button .icon-chevron-double-lg-left,
.close-nav-button .icon-chevron-double-lg-right {
color: inherit;
}
body.sidebar-refactoring .collapse-text {
.collapse-text {
white-space: nowrap;
overflow: hidden;
}
body.sidebar-refactoring .sidebar-collapsed-desktop .context-header {
.sidebar-collapsed-desktop .context-header {
height: 60px;
width: 48px;
}
body.sidebar-refactoring .sidebar-collapsed-desktop .context-header a {
.sidebar-collapsed-desktop .context-header a {
padding: 10px 4px;
}
body.sidebar-refactoring .sidebar-collapsed-desktop .sidebar-context-title {
.sidebar-collapsed-desktop .sidebar-context-title {
border: 0;
clip: rect(0, 0, 0, 0);
height: 1px;
......@@ -1784,47 +1342,39 @@ body.sidebar-refactoring .sidebar-collapsed-desktop .sidebar-context-title {
white-space: nowrap;
width: 1px;
}
body.sidebar-refactoring .sidebar-collapsed-desktop .context-header {
.sidebar-collapsed-desktop .context-header {
height: auto;
}
body.sidebar-refactoring .sidebar-collapsed-desktop .context-header a {
.sidebar-collapsed-desktop .context-header a {
padding: 0.25rem;
}
body.sidebar-refactoring
.sidebar-collapsed-desktop
.sidebar-collapsed-desktop
.sidebar-top-level-items
> li
.sidebar-sub-level-items:not(.flyout-list) {
display: none;
}
body.sidebar-refactoring .sidebar-collapsed-desktop .nav-icon-container {
.sidebar-collapsed-desktop .nav-icon-container {
margin-right: 0;
}
body.sidebar-refactoring .sidebar-collapsed-desktop .toggle-sidebar-button {
.sidebar-collapsed-desktop .toggle-sidebar-button {
width: 48px;
}
body.sidebar-refactoring
.sidebar-collapsed-desktop
.toggle-sidebar-button
.collapse-text {
.sidebar-collapsed-desktop .toggle-sidebar-button .collapse-text {
display: none;
}
body.sidebar-refactoring
.sidebar-collapsed-desktop
.toggle-sidebar-button
.icon-chevron-double-lg-left {
.sidebar-collapsed-desktop .toggle-sidebar-button .icon-chevron-double-lg-left {
transform: rotate(180deg);
display: block;
margin: 0;
}
body.sidebar-refactoring .close-nav-button {
.close-nav-button {
display: none;
}
@media (max-width: 767.98px) {
body.sidebar-refactoring .close-nav-button {
.close-nav-button {
display: flex;
}
body.sidebar-refactoring .toggle-sidebar-button {
.toggle-sidebar-button {
display: none;
}
}
......@@ -2044,14 +1594,12 @@ svg.s16 {
border-radius: 2px;
}
.rect-avatar.s32,
body.sidebar-refactoring
.nav-sidebar-inner-scroll
.nav-sidebar-inner-scroll
> div.context-header
a
.avatar-container.rect-avatar
.avatar.s32,
body.sidebar-refactoring
.sidebar-top-level-items
.sidebar-top-level-items
.context-header
a
.avatar-container.rect-avatar
......
app/assets/stylesheets/themes/_dark.scss
View file @ 3feae782
......@@ -253,3 +253,14 @@ $well-inner-border: $gray-200;
color: $gray-900;
border-color: $gray-800;
}
.nav-sidebar {
li.active {
box-shadow: none;
}
.sidebar-sub-level-items.fly-out-list {
box-shadow: none;
border: 1px solid $border-color;
}
}
app/assets/stylesheets/themes/theme_helper.scss
View file @ 3feae782
......@@ -174,20 +174,20 @@
}
// Sidebar
.nav-sidebar li.active {
box-shadow: inset 4px 0 0 $border-and-box-shadow;
> a {
color: $sidebar-text;
}
.nav-icon-container svg {
fill: $sidebar-text;
}
.nav-sidebar li.active > a {
color: $sidebar-text;
}
.sidebar-top-level-items > li.active .badge.badge-pill {
color: $sidebar-text;
.nav-sidebar {
.fly-out-top-item {
a,
a:hover,
&.active a,
.fly-out-top-item-container {
background-color: $purple-900;
color: $white;
}
}
}
.nav-links li {
......@@ -213,7 +213,6 @@
.ide-sidebar-link {
&.active {
color: $border-and-box-shadow;
box-shadow: inset 3px 0 $border-and-box-shadow;
&.is-right {
box-shadow: inset -3px 0 $border-and-box-shadow;
......
app/assets/stylesheets/themes/theme_indigo.scss
View file @ 3feae782
......@@ -6,7 +6,7 @@ body {
$indigo-200,
$indigo-500,
$indigo-700,
$indigo-800,
$purple-900,
$indigo-900,
$white
);
......
app/views/layouts/application.html.haml
View file @ 3feae782
- page_classes = page_class << @html_class
- page_classes = page_classes.flatten.compact
- body_classes = [user_application_theme, user_tab_width, @body_class, client_class_list]
- body_classes << 'sidebar-refactoring' if sidebar_refactor_enabled?
!!! 5
%html{ lang: I18n.locale, class: page_classes }
......
ee/app/assets/stylesheets/startup/startup-dark.scss
View file @ 3feae782
......@@ -13,6 +13,10 @@ body.gl-dark {
--orange-400: #ab6100;
--gl-text-color: #fafafa;
--border-color: #4f4f4f;
--black: #fff;
}
.nav-sidebar li.active {
box-shadow: none;
}
:root {
--white: #333;
......@@ -933,6 +937,7 @@ input {
.context-header .sidebar-context-title {
overflow: hidden;
text-overflow: ellipsis;
color: #fafafa;
}
@media (min-width: 768px) {
.page-with-contextual-sidebar {
......@@ -951,20 +956,14 @@ input {
}
.nav-sidebar {
position: fixed;
bottom: 0;
left: 0;
z-index: 600;
width: 220px;
top: 40px;
bottom: 0;
left: 0;
background-color: #303030;
box-shadow: inset -1px 0 0 #404040;
transform: translate3d(0, 0, 0);
}
@media (min-width: 576px) and (max-width: 576px) {
.nav-sidebar:not(.sidebar-collapsed-desktop) {
box-shadow: inset -1px 0 0 #404040, 2px 1px 3px rgba(0, 0, 0, 0.1);
}
}
.nav-sidebar.sidebar-collapsed-desktop {
width: 48px;
}
......@@ -972,7 +971,8 @@ input {
overflow-x: hidden;
}
.nav-sidebar.sidebar-collapsed-desktop .badge.badge-pill:not(.fly-out-badge),
.nav-sidebar.sidebar-collapsed-desktop .nav-item-name {
.nav-sidebar.sidebar-collapsed-desktop .nav-item-name,
.nav-sidebar.sidebar-collapsed-desktop .collapse-text {
border: 0;
clip: rect(0, 0, 0, 0);
height: 1px;
......@@ -984,479 +984,29 @@ input {
width: 1px;
}
.nav-sidebar.sidebar-collapsed-desktop .sidebar-top-level-items > li > a {
min-height: 45px;
}
.nav-sidebar.sidebar-collapsed-desktop .fly-out-top-item {
display: block;
}
.nav-sidebar.sidebar-collapsed-desktop .avatar-container {
margin: 0 auto;
}
.nav-sidebar a {
text-decoration: none;
}
.nav-sidebar ul {
padding-left: 0;
list-style: none;
}
.nav-sidebar li {
white-space: nowrap;
}
.nav-sidebar li a {
display: flex;
align-items: center;
padding: 12px 16px;
color: #999;
}
.nav-sidebar li .nav-item-name {
flex: 1;
}
.nav-sidebar li.active > a {
font-weight: 600;
}
@media (max-width: 767.98px) {
.nav-sidebar {
left: -220px;
}
}
.nav-sidebar .nav-icon-container {
display: flex;
margin-right: 8px;
}
.nav-sidebar .fly-out-top-item {
display: none;
}
.nav-sidebar svg {
height: 16px;
width: 16px;
}
@media (min-width: 768px) and (max-width: 1199px) {
.nav-sidebar:not(.sidebar-expanded-mobile) {
width: 48px;
}
.nav-sidebar:not(.sidebar-expanded-mobile) .nav-sidebar-inner-scroll {
overflow-x: hidden;
}
.nav-sidebar:not(.sidebar-expanded-mobile)
.badge.badge-pill:not(.fly-out-badge),
.nav-sidebar:not(.sidebar-expanded-mobile) .nav-item-name {
border: 0;
clip: rect(0, 0, 0, 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
white-space: nowrap;
width: 1px;
}
.nav-sidebar:not(.sidebar-expanded-mobile) .sidebar-top-level-items > li > a {
min-height: 45px;
}
.nav-sidebar:not(.sidebar-expanded-mobile) .fly-out-top-item {
display: block;
}
.nav-sidebar:not(.sidebar-expanded-mobile) .avatar-container {
margin: 0 auto;
}
.nav-sidebar:not(.sidebar-expanded-mobile) .context-header {
height: 60px;
width: 48px;
}
.nav-sidebar:not(.sidebar-expanded-mobile) .context-header a {
padding: 10px 4px;
}
.nav-sidebar:not(.sidebar-expanded-mobile) .sidebar-context-title {
border: 0;
clip: rect(0, 0, 0, 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
white-space: nowrap;
width: 1px;
}
.nav-sidebar:not(.sidebar-expanded-mobile)
.sidebar-top-level-items
> li
.sidebar-sub-level-items:not(.flyout-list) {
display: none;
}
.nav-sidebar:not(.sidebar-expanded-mobile) .nav-icon-container {
margin-right: 0;
}
.nav-sidebar:not(.sidebar-expanded-mobile) .toggle-sidebar-button {
padding: 16px;
width: 47px;
}
.nav-sidebar:not(.sidebar-expanded-mobile)
.toggle-sidebar-button
.collapse-text,
.nav-sidebar:not(.sidebar-expanded-mobile)
.toggle-sidebar-button
.icon-chevron-double-lg-left {
display: none;
}
.nav-sidebar:not(.sidebar-expanded-mobile)
.toggle-sidebar-button
.icon-chevron-double-lg-right {
display: block;
margin: 0;
}
}
.nav-sidebar-inner-scroll {
height: 100%;
width: 100%;
overflow: auto;
}
.sidebar-sub-level-items {
display: none;
padding-bottom: 8px;
}
.sidebar-sub-level-items > li a {
padding: 8px 16px 8px 40px;
}
.sidebar-sub-level-items > li.active a {
background: rgba(255, 255, 255, 0.04);
}
.sidebar-top-level-items {
margin-bottom: 60px;
}
@media (min-width: 576px) {
.sidebar-top-level-items > li > a {
margin-right: 1px;
}
}
.sidebar-top-level-items > li .badge.badge-pill {
background-color: rgba(255, 255, 255, 0.08);
color: #999;
}
.sidebar-top-level-items > li.active {
background: rgba(255, 255, 255, 0.04);
}
.sidebar-top-level-items > li.active > a {
margin-left: 4px;
padding-left: 12px;
}
.sidebar-top-level-items > li.active .badge.badge-pill {
font-weight: 600;
}
.sidebar-top-level-items
> li.active
.sidebar-sub-level-items:not(.is-fly-out-only) {
display: block;
}
.toggle-sidebar-button,
.close-nav-button {
height: 48px;
padding: 0 16px;
background-color: #303030;
border: 0;
color: #999;
display: flex;
align-items: center;
}
.toggle-sidebar-button,
.close-nav-button {
position: fixed;
bottom: 0;
width: 219px;
border-top: 1px solid #404040;
}
.toggle-sidebar-button svg,
.close-nav-button svg {
margin-right: 8px;
}
.toggle-sidebar-button .icon-chevron-double-lg-right,
.close-nav-button .icon-chevron-double-lg-right {
display: none;
}
.collapse-text {
white-space: nowrap;
overflow: hidden;
}
.sidebar-collapsed-desktop .context-header {
height: 60px;
width: 48px;
}
.sidebar-collapsed-desktop .context-header a {
padding: 10px 4px;
}
.sidebar-collapsed-desktop .sidebar-context-title {
border: 0;
clip: rect(0, 0, 0, 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
white-space: nowrap;
width: 1px;
}
.sidebar-collapsed-desktop
.sidebar-top-level-items
> li
.sidebar-sub-level-items:not(.flyout-list) {
display: none;
}
.sidebar-collapsed-desktop .nav-icon-container {
margin-right: 0;
}
.sidebar-collapsed-desktop .toggle-sidebar-button {
padding: 16px;
width: 47px;
}
.sidebar-collapsed-desktop .toggle-sidebar-button .collapse-text,
.sidebar-collapsed-desktop .toggle-sidebar-button .icon-chevron-double-lg-left {
display: none;
}
.sidebar-collapsed-desktop
.toggle-sidebar-button
.icon-chevron-double-lg-right {
display: block;
margin: 0;
}
.fly-out-top-item > a {
display: flex;
}
.fly-out-top-item .fly-out-badge {
margin-left: 8px;
}
.fly-out-top-item-name {
flex: 1;
}
.close-nav-button {
display: none;
}
@media (max-width: 767.98px) {
.close-nav-button {
display: flex;
}
.toggle-sidebar-button {
display: none;
}
}
body.sidebar-refactoring.gl-dark .nav-sidebar li.active {
box-shadow: none;
}
body.sidebar-refactoring.gl-dark .nav-sidebar .sidebar-sub-level-items {
box-shadow: none;
border: 1px solid #404040;
}
body.sidebar-refactoring.gl-dark
.sidebar-top-level-items
.context-header
a
.avatar-container.rect-avatar
.avatar.s32 {
color: #333;
}
body.sidebar-refactoring.gl-dark .nav-sidebar li a,
body.sidebar-refactoring.gl-dark .toggle-sidebar-button .collapse-text,
body.sidebar-refactoring.gl-dark
.toggle-sidebar-button
.icon-chevron-double-lg-left,
body.sidebar-refactoring.gl-dark
.toggle-sidebar-button
.icon-chevron-double-lg-right,
body.sidebar-refactoring.gl-dark
.sidebar-top-level-items
.context-header
a
.sidebar-context-title,
body.sidebar-refactoring.gl-dark
.nav-sidebar-inner-scroll
> div.context-header
a
.sidebar-context-title,
body.sidebar-refactoring.gl-dark
.nav-sidebar
a.has-sub-items
+ .sidebar-sub-level-items
.fly-out-top-item
a,
body.sidebar-refactoring.gl-dark
.nav-sidebar
a.has-sub-items
+ .sidebar-sub-level-items
.fly-out-top-item.active
a,
body.sidebar-refactoring.gl-dark
.nav-sidebar
a.has-sub-items
+ .sidebar-sub-level-items
.fly-out-top-item
.fly-out-top-item-container {
color: #c4c4c4;
}
body.sidebar-refactoring.gl-dark
.nav-sidebar
a.has-sub-items
+ .sidebar-sub-level-items
.fly-out-top-item
a,
body.sidebar-refactoring.gl-dark
.nav-sidebar
a.has-sub-items
+ .sidebar-sub-level-items
.fly-out-top-item.active
a,
body.sidebar-refactoring.gl-dark
.nav-sidebar
a.has-sub-items
+ .sidebar-sub-level-items
.fly-out-top-item
.fly-out-top-item-container {
margin-top: 0;
}
body.sidebar-refactoring.gl-dark
.nav-sidebar
a:not(.has-sub-items)
+ .sidebar-sub-level-items
.fly-out-top-item
a,
body.sidebar-refactoring.gl-dark
.nav-sidebar
a:not(.has-sub-items)
+ .sidebar-sub-level-items
.fly-out-top-item.active
a,
body.sidebar-refactoring.gl-dark
.nav-sidebar
a:not(.has-sub-items)
+ .sidebar-sub-level-items
.fly-out-top-item
.fly-out-top-item-container {
background: #333;
color: #c4c4c4;
}
body.sidebar-refactoring.gl-dark
.nav-sidebar
a:not(.has-sub-items)
+ .sidebar-sub-level-items
.fly-out-top-item
a::before,
body.sidebar-refactoring.gl-dark
.nav-sidebar
a:not(.has-sub-items)
+ .sidebar-sub-level-items
.fly-out-top-item.active
a::before,
body.sidebar-refactoring.gl-dark
.nav-sidebar
a:not(.has-sub-items)
+ .sidebar-sub-level-items
.fly-out-top-item
.fly-out-top-item-container::before {
border-right-color: #333;
}
body.sidebar-refactoring.gl-dark .nav-sidebar .sidebar-sub-level-items {
background-color: #333;
}
body.sidebar-refactoring.ui-indigo
.nav-sidebar
li.active:not(.fly-out-top-item)
> a {
color: #2f2a6b;
}
body.sidebar-refactoring.ui-indigo
.nav-sidebar
li.active
.nav-icon-container
svg {
fill: #2f2a6b;
}
body.sidebar-refactoring .nav-sidebar {
box-shadow: none;
}
body.sidebar-refactoring .nav-sidebar li.active {
background-color: transparent;
box-shadow: none !important;
}
@media (min-width: 768px) {
body.sidebar-refactoring .page-with-contextual-sidebar {
padding-left: 48px;
}
}
@media (min-width: 1200px) {
body.sidebar-refactoring .page-with-contextual-sidebar {
padding-left: 220px;
}
}
@media (min-width: 768px) {
body.sidebar-refactoring .page-with-icon-sidebar {
padding-left: 48px;
}
}
body.sidebar-refactoring .nav-sidebar {
position: fixed;
bottom: 0;
left: 0;
z-index: 600;
width: 220px;
top: 40px;
background-color: #303030;
transform: translate3d(0, 0, 0);
}
body.sidebar-refactoring .nav-sidebar.sidebar-collapsed-desktop {
width: 48px;
}
body.sidebar-refactoring
.nav-sidebar.sidebar-collapsed-desktop
.nav-sidebar-inner-scroll {
overflow-x: hidden;
}
body.sidebar-refactoring
.nav-sidebar.sidebar-collapsed-desktop
.badge.badge-pill:not(.fly-out-badge),
body.sidebar-refactoring .nav-sidebar.sidebar-collapsed-desktop .nav-item-name,
body.sidebar-refactoring .nav-sidebar.sidebar-collapsed-desktop .collapse-text {
border: 0;
clip: rect(0, 0, 0, 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
white-space: nowrap;
width: 1px;
}
body.sidebar-refactoring
.nav-sidebar.sidebar-collapsed-desktop
.sidebar-top-level-items
> li
> a {
min-height: unset;
}
body.sidebar-refactoring
.nav-sidebar.sidebar-collapsed-desktop
.fly-out-top-item:not(.divider) {
.nav-sidebar.sidebar-collapsed-desktop .fly-out-top-item:not(.divider) {
display: block !important;
}
body.sidebar-refactoring
.nav-sidebar.sidebar-collapsed-desktop
.avatar-container {
.nav-sidebar.sidebar-collapsed-desktop .avatar-container {
margin: 0 auto;
}
body.sidebar-refactoring
.nav-sidebar.sidebar-collapsed-desktop
li.active:not(.fly-out-top-item)
> a {
.nav-sidebar.sidebar-collapsed-desktop li.active:not(.fly-out-top-item) > a {
background-color: rgba(41, 41, 97, 0.08);
}
body.sidebar-refactoring .nav-sidebar a {
.nav-sidebar a {
text-decoration: none;
color: #2f2a6b;
color: #fafafa;
}
body.sidebar-refactoring .nav-sidebar li {
.nav-sidebar li {
white-space: nowrap;
}
body.sidebar-refactoring .nav-sidebar li .nav-item-name {
.nav-sidebar li .nav-item-name {
flex: 1;
}
body.sidebar-refactoring .nav-sidebar li > a,
body.sidebar-refactoring .nav-sidebar li > .fly-out-top-item-container {
.nav-sidebar li > a,
.nav-sidebar li > .fly-out-top-item-container {
padding-left: 0.75rem;
padding-right: 0.75rem;
padding-top: 0.5rem;
......@@ -1468,49 +1018,42 @@ body.sidebar-refactoring .nav-sidebar li > .fly-out-top-item-container {
line-height: 1rem;
margin: 1px 4px;
}
body.sidebar-refactoring .nav-sidebar li.active > a {
.nav-sidebar li.active > a {
font-weight: 600;
}
body.sidebar-refactoring
.nav-sidebar
li.active:not(.fly-out-top-item)
> a:not(.has-sub-items) {
.nav-sidebar li.active:not(.fly-out-top-item) > a:not(.has-sub-items) {
background-color: rgba(41, 41, 97, 0.08);
}
body.sidebar-refactoring .nav-sidebar ul {
.nav-sidebar ul {
padding-left: 0;
list-style: none;
}
@media (max-width: 767.98px) {
body.sidebar-refactoring .nav-sidebar {
.nav-sidebar {
left: -220px;
}
}
body.sidebar-refactoring .nav-sidebar .nav-icon-container {
.nav-sidebar .nav-icon-container {
display: flex;
margin-right: 8px;
}
body.sidebar-refactoring
.nav-sidebar
.nav-sidebar
a:not(.has-sub-items)
+ .sidebar-sub-level-items
.fly-out-top-item {
display: none;
}
body.sidebar-refactoring
.nav-sidebar
.nav-sidebar
a:not(.has-sub-items)
+ .sidebar-sub-level-items
.fly-out-top-item
a,
body.sidebar-refactoring
.nav-sidebar
.nav-sidebar
a:not(.has-sub-items)
+ .sidebar-sub-level-items
.fly-out-top-item.active
a,
body.sidebar-refactoring
.nav-sidebar
.nav-sidebar
a:not(.has-sub-items)
+ .sidebar-sub-level-items
.fly-out-top-item
......@@ -1522,30 +1065,26 @@ body.sidebar-refactoring
cursor: default;
pointer-events: none;
font-size: 0.75rem;
background-color: #2f2a6b;
color: #333;
margin-top: -0.25rem;
margin-bottom: -0.25rem;
margin-top: 0;
position: relative;
background-color: #fff;
color: #333;
background: var(--black, #fff);
}
body.sidebar-refactoring
.nav-sidebar
.nav-sidebar
a:not(.has-sub-items)
+ .sidebar-sub-level-items
.fly-out-top-item
a
strong,
body.sidebar-refactoring
.nav-sidebar
.nav-sidebar
a:not(.has-sub-items)
+ .sidebar-sub-level-items
.fly-out-top-item.active
a
strong,
body.sidebar-refactoring
.nav-sidebar
.nav-sidebar
a:not(.has-sub-items)
+ .sidebar-sub-level-items
.fly-out-top-item
......@@ -1553,20 +1092,17 @@ body.sidebar-refactoring
strong {
font-weight: 400;
}
body.sidebar-refactoring
.nav-sidebar
.nav-sidebar
a:not(.has-sub-items)
+ .sidebar-sub-level-items
.fly-out-top-item
a::before,
body.sidebar-refactoring
.nav-sidebar
.nav-sidebar
a:not(.has-sub-items)
+ .sidebar-sub-level-items
.fly-out-top-item.active
a::before,
body.sidebar-refactoring
.nav-sidebar
.nav-sidebar
a:not(.has-sub-items)
+ .sidebar-sub-level-items
.fly-out-top-item
......@@ -1582,34 +1118,18 @@ body.sidebar-refactoring
border-top: 0.25rem solid transparent;
border-bottom: 0.25rem solid transparent;
border-right: 0.25rem solid #fff;
border-right-color: var(--black, #fff);
}
body.sidebar-refactoring
.nav-sidebar
a.has-sub-items
+ .sidebar-sub-level-items {
margin-top: -0.25rem;
}
body.sidebar-refactoring
.nav-sidebar
a.has-sub-items
+ .sidebar-sub-level-items
.fly-out-top-item {
.nav-sidebar a.has-sub-items + .sidebar-sub-level-items .fly-out-top-item {
display: none;
}
body.sidebar-refactoring
.nav-sidebar
a.has-sub-items
+ .sidebar-sub-level-items
.fly-out-top-item
a,
body.sidebar-refactoring
.nav-sidebar
.nav-sidebar a.has-sub-items + .sidebar-sub-level-items .fly-out-top-item a,
.nav-sidebar
a.has-sub-items
+ .sidebar-sub-level-items
.fly-out-top-item.active
a,
body.sidebar-refactoring
.nav-sidebar
.nav-sidebar
a.has-sub-items
+ .sidebar-sub-level-items
.fly-out-top-item
......@@ -1621,30 +1141,21 @@ body.sidebar-refactoring
cursor: default;
pointer-events: none;
font-size: 0.75rem;
background-color: #2f2a6b;
color: #333;
margin-top: 0;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
@media (min-width: 768px) and (max-width: 1199px) {
body.sidebar-refactoring .nav-sidebar:not(.sidebar-expanded-mobile) {
.nav-sidebar:not(.sidebar-expanded-mobile) {
width: 48px;
}
body.sidebar-refactoring
.nav-sidebar:not(.sidebar-expanded-mobile)
.nav-sidebar-inner-scroll {
.nav-sidebar:not(.sidebar-expanded-mobile) .nav-sidebar-inner-scroll {
overflow-x: hidden;
}
body.sidebar-refactoring
.nav-sidebar:not(.sidebar-expanded-mobile)
.nav-sidebar:not(.sidebar-expanded-mobile)
.badge.badge-pill:not(.fly-out-badge),
body.sidebar-refactoring
.nav-sidebar:not(.sidebar-expanded-mobile)
.nav-item-name,
body.sidebar-refactoring
.nav-sidebar:not(.sidebar-expanded-mobile)
.collapse-text {
.nav-sidebar:not(.sidebar-expanded-mobile) .nav-item-name,
.nav-sidebar:not(.sidebar-expanded-mobile) .collapse-text {
border: 0;
clip: rect(0, 0, 0, 0);
height: 1px;
......@@ -1655,44 +1166,28 @@ body.sidebar-refactoring
white-space: nowrap;
width: 1px;
}
body.sidebar-refactoring
.nav-sidebar:not(.sidebar-expanded-mobile)
.sidebar-top-level-items
> li
> a {
.nav-sidebar:not(.sidebar-expanded-mobile) .sidebar-top-level-items > li > a {
min-height: unset;
}
body.sidebar-refactoring
.nav-sidebar:not(.sidebar-expanded-mobile)
.fly-out-top-item:not(.divider) {
.nav-sidebar:not(.sidebar-expanded-mobile) .fly-out-top-item:not(.divider) {
display: block !important;
}
body.sidebar-refactoring
.nav-sidebar:not(.sidebar-expanded-mobile)
.avatar-container {
.nav-sidebar:not(.sidebar-expanded-mobile) .avatar-container {
margin: 0 auto;
}
body.sidebar-refactoring
.nav-sidebar:not(.sidebar-expanded-mobile)
.nav-sidebar:not(.sidebar-expanded-mobile)
li.active:not(.fly-out-top-item)
> a {
background-color: rgba(41, 41, 97, 0.08);
}
body.sidebar-refactoring
.nav-sidebar:not(.sidebar-expanded-mobile)
.context-header {
.nav-sidebar:not(.sidebar-expanded-mobile) .context-header {
height: 60px;
width: 48px;
}
body.sidebar-refactoring
.nav-sidebar:not(.sidebar-expanded-mobile)
.context-header
a {
.nav-sidebar:not(.sidebar-expanded-mobile) .context-header a {
padding: 10px 4px;
}
body.sidebar-refactoring
.nav-sidebar:not(.sidebar-expanded-mobile)
.sidebar-context-title {
.nav-sidebar:not(.sidebar-expanded-mobile) .sidebar-context-title {
border: 0;
clip: rect(0, 0, 0, 0);
height: 1px;
......@@ -1703,58 +1198,45 @@ body.sidebar-refactoring
white-space: nowrap;
width: 1px;
}
body.sidebar-refactoring
.nav-sidebar:not(.sidebar-expanded-mobile)
.context-header {
.nav-sidebar:not(.sidebar-expanded-mobile) .context-header {
height: auto;
}
body.sidebar-refactoring
.nav-sidebar:not(.sidebar-expanded-mobile)
.context-header
a {
.nav-sidebar:not(.sidebar-expanded-mobile) .context-header a {
padding: 0.25rem;
}
body.sidebar-refactoring
.nav-sidebar:not(.sidebar-expanded-mobile)
.nav-sidebar:not(.sidebar-expanded-mobile)
.sidebar-top-level-items
> li
.sidebar-sub-level-items:not(.flyout-list) {
display: none;
}
body.sidebar-refactoring
.nav-sidebar:not(.sidebar-expanded-mobile)
.nav-icon-container {
.nav-sidebar:not(.sidebar-expanded-mobile) .nav-icon-container {
margin-right: 0;
}
body.sidebar-refactoring
.nav-sidebar:not(.sidebar-expanded-mobile)
.toggle-sidebar-button {
.nav-sidebar:not(.sidebar-expanded-mobile) .toggle-sidebar-button {
width: 48px;
}
body.sidebar-refactoring
.nav-sidebar:not(.sidebar-expanded-mobile)
.nav-sidebar:not(.sidebar-expanded-mobile)
.toggle-sidebar-button
.collapse-text {
display: none;
}
body.sidebar-refactoring
.nav-sidebar:not(.sidebar-expanded-mobile)
.nav-sidebar:not(.sidebar-expanded-mobile)
.toggle-sidebar-button
.icon-chevron-double-lg-left {
transform: rotate(180deg);
display: block;
margin: 0;
}
}
body.sidebar-refactoring .nav-sidebar-inner-scroll {
.nav-sidebar-inner-scroll {
height: 100%;
width: 100%;
overflow: auto;
}
body.sidebar-refactoring .nav-sidebar-inner-scroll > div.context-header {
.nav-sidebar-inner-scroll > div.context-header {
margin-top: 0.25rem;
}
body.sidebar-refactoring .nav-sidebar-inner-scroll > div.context-header a {
.nav-sidebar-inner-scroll > div.context-header a {
padding-left: 0.75rem;
padding-right: 0.75rem;
padding-top: 0.5rem;
......@@ -1769,78 +1251,46 @@ body.sidebar-refactoring .nav-sidebar-inner-scroll > div.context-header a {
margin-bottom: 0.25rem;
margin-top: 0;
}
body.sidebar-refactoring
.nav-sidebar-inner-scroll
> div.context-header
a
.avatar-container {
.nav-sidebar-inner-scroll > div.context-header a .avatar-container {
font-weight: 400;
flex: none;
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}
body.sidebar-refactoring
.nav-sidebar-inner-scroll
> div.context-header
a
.avatar-container.rect-avatar {
.nav-sidebar-inner-scroll > div.context-header a .avatar-container.rect-avatar {
border-style: none;
}
body.sidebar-refactoring
.nav-sidebar-inner-scroll
.nav-sidebar-inner-scroll
> div.context-header
a
.avatar-container.rect-avatar
.avatar.s32 {
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}
body.sidebar-refactoring
.nav-sidebar-inner-scroll
> div.context-header
a
.sidebar-context-title {
color: #2f2a6b;
}
body.sidebar-refactoring .sidebar-top-level-items {
.sidebar-top-level-items {
margin-top: 0.25rem;
margin-bottom: 60px;
}
body.sidebar-refactoring .sidebar-top-level-items .context-header a {
.sidebar-top-level-items .context-header a {
padding: 0.25rem;
margin-bottom: 0.25rem;
margin-top: 0;
}
body.sidebar-refactoring
.sidebar-top-level-items
.context-header
a
.avatar-container {
.sidebar-top-level-items .context-header a .avatar-container {
font-weight: 400;
flex: none;
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}
body.sidebar-refactoring
.sidebar-top-level-items
.context-header
a
.avatar-container.rect-avatar {
.sidebar-top-level-items .context-header a .avatar-container.rect-avatar {
border-style: none;
}
body.sidebar-refactoring
.sidebar-top-level-items
.sidebar-top-level-items
.context-header
a
.avatar-container.rect-avatar
.avatar.s32 {
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}
body.sidebar-refactoring
.sidebar-top-level-items
.context-header
a
.sidebar-context-title {
color: #2f2a6b;
}
body.sidebar-refactoring .sidebar-top-level-items > li .badge.badge-pill {
.sidebar-top-level-items > li .badge.badge-pill {
border-radius: 0.5rem;
padding-top: 0.125rem;
padding-bottom: 0.125rem;
......@@ -1849,29 +1299,25 @@ body.sidebar-refactoring .sidebar-top-level-items > li .badge.badge-pill {
background-color: #064787;
color: #9dc7f1;
}
body.sidebar-refactoring
.sidebar-top-level-items
.sidebar-top-level-items
> li.active
.sidebar-sub-level-items:not(.is-fly-out-only) {
display: block;
}
body.sidebar-refactoring
.sidebar-top-level-items
> li.active
.badge.badge-pill {
.sidebar-top-level-items > li.active .badge.badge-pill {
font-weight: 400;
color: #9dc7f1;
}
body.sidebar-refactoring .sidebar-sub-level-items {
.sidebar-sub-level-items {
padding-top: 0;
padding-bottom: 0;
display: none;
}
body.sidebar-refactoring .sidebar-sub-level-items:not(.fly-out-list) li > a {
.sidebar-sub-level-items:not(.fly-out-list) li > a {
padding-left: 2.25rem;
}
body.sidebar-refactoring .toggle-sidebar-button,
body.sidebar-refactoring .close-nav-button {
.toggle-sidebar-button,
.close-nav-button {
height: 48px;
padding: 0 16px;
background-color: #303030;
......@@ -1881,31 +1327,30 @@ body.sidebar-refactoring .close-nav-button {
align-items: center;
background-color: #303030;
border-top: 1px solid #404040;
color: #2f2a6b;
position: fixed;
bottom: 0;
width: 220px;
}
body.sidebar-refactoring .toggle-sidebar-button .collapse-text,
body.sidebar-refactoring .toggle-sidebar-button .icon-chevron-double-lg-left,
body.sidebar-refactoring .toggle-sidebar-button .icon-chevron-double-lg-right,
body.sidebar-refactoring .close-nav-button .collapse-text,
body.sidebar-refactoring .close-nav-button .icon-chevron-double-lg-left,
body.sidebar-refactoring .close-nav-button .icon-chevron-double-lg-right {
.toggle-sidebar-button .collapse-text,
.toggle-sidebar-button .icon-chevron-double-lg-left,
.toggle-sidebar-button .icon-chevron-double-lg-right,
.close-nav-button .collapse-text,
.close-nav-button .icon-chevron-double-lg-left,
.close-nav-button .icon-chevron-double-lg-right {
color: inherit;
}
body.sidebar-refactoring .collapse-text {
.collapse-text {
white-space: nowrap;
overflow: hidden;
}
body.sidebar-refactoring .sidebar-collapsed-desktop .context-header {
.sidebar-collapsed-desktop .context-header {
height: 60px;
width: 48px;
}
body.sidebar-refactoring .sidebar-collapsed-desktop .context-header a {
.sidebar-collapsed-desktop .context-header a {
padding: 10px 4px;
}
body.sidebar-refactoring .sidebar-collapsed-desktop .sidebar-context-title {
.sidebar-collapsed-desktop .sidebar-context-title {
border: 0;
clip: rect(0, 0, 0, 0);
height: 1px;
......@@ -1916,47 +1361,39 @@ body.sidebar-refactoring .sidebar-collapsed-desktop .sidebar-context-title {
white-space: nowrap;
width: 1px;
}
body.sidebar-refactoring .sidebar-collapsed-desktop .context-header {
.sidebar-collapsed-desktop .context-header {
height: auto;
}
body.sidebar-refactoring .sidebar-collapsed-desktop .context-header a {
.sidebar-collapsed-desktop .context-header a {
padding: 0.25rem;
}
body.sidebar-refactoring
.sidebar-collapsed-desktop
.sidebar-collapsed-desktop
.sidebar-top-level-items
> li
.sidebar-sub-level-items:not(.flyout-list) {
display: none;
}
body.sidebar-refactoring .sidebar-collapsed-desktop .nav-icon-container {
.sidebar-collapsed-desktop .nav-icon-container {
margin-right: 0;
}
body.sidebar-refactoring .sidebar-collapsed-desktop .toggle-sidebar-button {
.sidebar-collapsed-desktop .toggle-sidebar-button {
width: 48px;
}
body.sidebar-refactoring
.sidebar-collapsed-desktop
.toggle-sidebar-button
.collapse-text {
.sidebar-collapsed-desktop .toggle-sidebar-button .collapse-text {
display: none;
}
body.sidebar-refactoring
.sidebar-collapsed-desktop
.toggle-sidebar-button
.icon-chevron-double-lg-left {
.sidebar-collapsed-desktop .toggle-sidebar-button .icon-chevron-double-lg-left {
transform: rotate(180deg);
display: block;
margin: 0;
}
body.sidebar-refactoring .close-nav-button {
.close-nav-button {
display: none;
}
@media (max-width: 767.98px) {
body.sidebar-refactoring .close-nav-button {
.close-nav-button {
display: flex;
}
body.sidebar-refactoring .toggle-sidebar-button {
.toggle-sidebar-button {
display: none;
}
}
......@@ -2176,14 +1613,12 @@ svg.s16 {
border-radius: 2px;
}
.rect-avatar.s32,
body.sidebar-refactoring
.nav-sidebar-inner-scroll
.nav-sidebar-inner-scroll
> div.context-header
a
.avatar-container.rect-avatar
.avatar.s32,
body.sidebar-refactoring
.sidebar-top-level-items
.sidebar-top-level-items
.context-header
a
.avatar-container.rect-avatar
......@@ -2263,17 +1698,14 @@ body.gl-dark .search .search-input-wrap .search-icon,
body.gl-dark .search .search-input-wrap .clear-icon {
fill: rgba(250, 250, 250, 0.8);
}
body.gl-dark .nav-sidebar li.active {
box-shadow: inset 4px 0 0 #999;
}
body.gl-dark .nav-sidebar li.active > a {
color: #f0f0f0;
}
body.gl-dark .nav-sidebar li.active .nav-icon-container svg {
fill: #f0f0f0;
}
body.gl-dark .sidebar-top-level-items > li.active .badge.badge-pill {
color: #f0f0f0;
body.gl-dark .nav-sidebar .fly-out-top-item a,
body.gl-dark .nav-sidebar .fly-out-top-item.active a,
body.gl-dark .nav-sidebar .fly-out-top-item .fly-out-top-item-container {
background-color: #2f2a6b;
color: #333;
}
body.gl-dark .logo-text svg {
fill: var(--gl-text-color);
......@@ -2373,6 +1805,9 @@ body.gl-dark {
--black: #fff;
--svg-status-bg: #333;
}
.nav-sidebar li.active {
box-shadow: none;
}
.tab-width-8 {
-moz-tab-size: 8;
tab-size: 8;
......
ee/app/assets/stylesheets/startup/startup-general.scss
View file @ 3feae782
......@@ -918,6 +918,7 @@ input {
.context-header .sidebar-context-title {
overflow: hidden;
text-overflow: ellipsis;
color: #303030;
}
@media (min-width: 768px) {
.page-with-contextual-sidebar {
......@@ -936,20 +937,14 @@ input {
}
.nav-sidebar {
position: fixed;
bottom: 0;
left: 0;
z-index: 600;
width: 220px;
top: 40px;
bottom: 0;
left: 0;
background-color: #fafafa;
box-shadow: inset -1px 0 0 #dbdbdb;
background-color: #f0f0f0;
transform: translate3d(0, 0, 0);
}
@media (min-width: 576px) and (max-width: 576px) {
.nav-sidebar:not(.sidebar-collapsed-desktop) {
box-shadow: inset -1px 0 0 #dbdbdb, 2px 1px 3px rgba(0, 0, 0, 0.1);
}
}
.nav-sidebar.sidebar-collapsed-desktop {
width: 48px;
}
......@@ -957,7 +952,8 @@ input {
overflow-x: hidden;
}
.nav-sidebar.sidebar-collapsed-desktop .badge.badge-pill:not(.fly-out-badge),
.nav-sidebar.sidebar-collapsed-desktop .nav-item-name {
.nav-sidebar.sidebar-collapsed-desktop .nav-item-name,
.nav-sidebar.sidebar-collapsed-desktop .collapse-text {
border: 0;
clip: rect(0, 0, 0, 0);
height: 1px;
......@@ -969,362 +965,29 @@ input {
width: 1px;
}
.nav-sidebar.sidebar-collapsed-desktop .sidebar-top-level-items > li > a {
min-height: 45px;
}
.nav-sidebar.sidebar-collapsed-desktop .fly-out-top-item {
display: block;
}
.nav-sidebar.sidebar-collapsed-desktop .avatar-container {
margin: 0 auto;
}
.nav-sidebar a {
text-decoration: none;
}
.nav-sidebar ul {
padding-left: 0;
list-style: none;
}
.nav-sidebar li {
white-space: nowrap;
}
.nav-sidebar li a {
display: flex;
align-items: center;
padding: 12px 16px;
color: #666;
}
.nav-sidebar li .nav-item-name {
flex: 1;
}
.nav-sidebar li.active > a {
font-weight: 600;
}
@media (max-width: 767.98px) {
.nav-sidebar {
left: -220px;
}
}
.nav-sidebar .nav-icon-container {
display: flex;
margin-right: 8px;
}
.nav-sidebar .fly-out-top-item {
display: none;
}
.nav-sidebar svg {
height: 16px;
width: 16px;
}
@media (min-width: 768px) and (max-width: 1199px) {
.nav-sidebar:not(.sidebar-expanded-mobile) {
width: 48px;
}
.nav-sidebar:not(.sidebar-expanded-mobile) .nav-sidebar-inner-scroll {
overflow-x: hidden;
}
.nav-sidebar:not(.sidebar-expanded-mobile)
.badge.badge-pill:not(.fly-out-badge),
.nav-sidebar:not(.sidebar-expanded-mobile) .nav-item-name {
border: 0;
clip: rect(0, 0, 0, 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
white-space: nowrap;
width: 1px;
}
.nav-sidebar:not(.sidebar-expanded-mobile) .sidebar-top-level-items > li > a {
min-height: 45px;
}
.nav-sidebar:not(.sidebar-expanded-mobile) .fly-out-top-item {
display: block;
}
.nav-sidebar:not(.sidebar-expanded-mobile) .avatar-container {
margin: 0 auto;
}
.nav-sidebar:not(.sidebar-expanded-mobile) .context-header {
height: 60px;
width: 48px;
}
.nav-sidebar:not(.sidebar-expanded-mobile) .context-header a {
padding: 10px 4px;
}
.nav-sidebar:not(.sidebar-expanded-mobile) .sidebar-context-title {
border: 0;
clip: rect(0, 0, 0, 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
white-space: nowrap;
width: 1px;
}
.nav-sidebar:not(.sidebar-expanded-mobile)
.sidebar-top-level-items
> li
.sidebar-sub-level-items:not(.flyout-list) {
display: none;
}
.nav-sidebar:not(.sidebar-expanded-mobile) .nav-icon-container {
margin-right: 0;
}
.nav-sidebar:not(.sidebar-expanded-mobile) .toggle-sidebar-button {
padding: 16px;
width: 47px;
}
.nav-sidebar:not(.sidebar-expanded-mobile)
.toggle-sidebar-button
.collapse-text,
.nav-sidebar:not(.sidebar-expanded-mobile)
.toggle-sidebar-button
.icon-chevron-double-lg-left {
display: none;
}
.nav-sidebar:not(.sidebar-expanded-mobile)
.toggle-sidebar-button
.icon-chevron-double-lg-right {
display: block;
margin: 0;
}
}
.nav-sidebar-inner-scroll {
height: 100%;
width: 100%;
overflow: auto;
}
.sidebar-sub-level-items {
display: none;
padding-bottom: 8px;
}
.sidebar-sub-level-items > li a {
padding: 8px 16px 8px 40px;
}
.sidebar-sub-level-items > li.active a {
background: rgba(0, 0, 0, 0.04);
}
.sidebar-top-level-items {
margin-bottom: 60px;
}
@media (min-width: 576px) {
.sidebar-top-level-items > li > a {
margin-right: 1px;
}
}
.sidebar-top-level-items > li .badge.badge-pill {
background-color: rgba(0, 0, 0, 0.08);
color: #666;
}
.sidebar-top-level-items > li.active {
background: rgba(0, 0, 0, 0.04);
}
.sidebar-top-level-items > li.active > a {
margin-left: 4px;
padding-left: 12px;
}
.sidebar-top-level-items > li.active .badge.badge-pill {
font-weight: 600;
}
.sidebar-top-level-items
> li.active
.sidebar-sub-level-items:not(.is-fly-out-only) {
display: block;
}
.toggle-sidebar-button,
.close-nav-button {
height: 48px;
padding: 0 16px;
background-color: #fafafa;
border: 0;
color: #666;
display: flex;
align-items: center;
}
.toggle-sidebar-button,
.close-nav-button {
position: fixed;
bottom: 0;
width: 219px;
border-top: 1px solid #dbdbdb;
}
.toggle-sidebar-button svg,
.close-nav-button svg {
margin-right: 8px;
}
.toggle-sidebar-button .icon-chevron-double-lg-right,
.close-nav-button .icon-chevron-double-lg-right {
display: none;
}
.collapse-text {
white-space: nowrap;
overflow: hidden;
}
.sidebar-collapsed-desktop .context-header {
height: 60px;
width: 48px;
}
.sidebar-collapsed-desktop .context-header a {
padding: 10px 4px;
}
.sidebar-collapsed-desktop .sidebar-context-title {
border: 0;
clip: rect(0, 0, 0, 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
white-space: nowrap;
width: 1px;
}
.sidebar-collapsed-desktop
.sidebar-top-level-items
> li
.sidebar-sub-level-items:not(.flyout-list) {
display: none;
}
.sidebar-collapsed-desktop .nav-icon-container {
margin-right: 0;
}
.sidebar-collapsed-desktop .toggle-sidebar-button {
padding: 16px;
width: 47px;
}
.sidebar-collapsed-desktop .toggle-sidebar-button .collapse-text,
.sidebar-collapsed-desktop .toggle-sidebar-button .icon-chevron-double-lg-left {
display: none;
}
.sidebar-collapsed-desktop
.toggle-sidebar-button
.icon-chevron-double-lg-right {
display: block;
margin: 0;
}
.fly-out-top-item > a {
display: flex;
}
.fly-out-top-item .fly-out-badge {
margin-left: 8px;
}
.fly-out-top-item-name {
flex: 1;
}
.close-nav-button {
display: none;
}
@media (max-width: 767.98px) {
.close-nav-button {
display: flex;
}
.toggle-sidebar-button {
display: none;
}
}
body.sidebar-refactoring.ui-indigo
.nav-sidebar
li.active:not(.fly-out-top-item)
> a {
color: #2f2a6b;
}
body.sidebar-refactoring.ui-indigo
.nav-sidebar
li.active
.nav-icon-container
svg {
fill: #2f2a6b;
}
body.sidebar-refactoring .nav-sidebar {
box-shadow: none;
}
body.sidebar-refactoring .nav-sidebar li.active {
background-color: transparent;
box-shadow: none !important;
}
@media (min-width: 768px) {
body.sidebar-refactoring .page-with-contextual-sidebar {
padding-left: 48px;
}
}
@media (min-width: 1200px) {
body.sidebar-refactoring .page-with-contextual-sidebar {
padding-left: 220px;
}
}
@media (min-width: 768px) {
body.sidebar-refactoring .page-with-icon-sidebar {
padding-left: 48px;
}
}
body.sidebar-refactoring .nav-sidebar {
position: fixed;
bottom: 0;
left: 0;
z-index: 600;
width: 220px;
top: 40px;
background-color: #f0f0f0;
transform: translate3d(0, 0, 0);
}
body.sidebar-refactoring .nav-sidebar.sidebar-collapsed-desktop {
width: 48px;
}
body.sidebar-refactoring
.nav-sidebar.sidebar-collapsed-desktop
.nav-sidebar-inner-scroll {
overflow-x: hidden;
}
body.sidebar-refactoring
.nav-sidebar.sidebar-collapsed-desktop
.badge.badge-pill:not(.fly-out-badge),
body.sidebar-refactoring .nav-sidebar.sidebar-collapsed-desktop .nav-item-name,
body.sidebar-refactoring .nav-sidebar.sidebar-collapsed-desktop .collapse-text {
border: 0;
clip: rect(0, 0, 0, 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
white-space: nowrap;
width: 1px;
}
body.sidebar-refactoring
.nav-sidebar.sidebar-collapsed-desktop
.sidebar-top-level-items
> li
> a {
min-height: unset;
}
body.sidebar-refactoring
.nav-sidebar.sidebar-collapsed-desktop
.fly-out-top-item:not(.divider) {
.nav-sidebar.sidebar-collapsed-desktop .fly-out-top-item:not(.divider) {
display: block !important;
}
body.sidebar-refactoring
.nav-sidebar.sidebar-collapsed-desktop
.avatar-container {
.nav-sidebar.sidebar-collapsed-desktop .avatar-container {
margin: 0 auto;
}
body.sidebar-refactoring
.nav-sidebar.sidebar-collapsed-desktop
li.active:not(.fly-out-top-item)
> a {
.nav-sidebar.sidebar-collapsed-desktop li.active:not(.fly-out-top-item) > a {
background-color: rgba(41, 41, 97, 0.08);
}
body.sidebar-refactoring .nav-sidebar a {
.nav-sidebar a {
text-decoration: none;
color: #2f2a6b;
color: #303030;
}
body.sidebar-refactoring .nav-sidebar li {
.nav-sidebar li {
white-space: nowrap;
}
body.sidebar-refactoring .nav-sidebar li .nav-item-name {
.nav-sidebar li .nav-item-name {
flex: 1;
}
body.sidebar-refactoring .nav-sidebar li > a,
body.sidebar-refactoring .nav-sidebar li > .fly-out-top-item-container {
.nav-sidebar li > a,
.nav-sidebar li > .fly-out-top-item-container {
padding-left: 0.75rem;
padding-right: 0.75rem;
padding-top: 0.5rem;
......@@ -1336,49 +999,42 @@ body.sidebar-refactoring .nav-sidebar li > .fly-out-top-item-container {
line-height: 1rem;
margin: 1px 4px;
}
body.sidebar-refactoring .nav-sidebar li.active > a {
.nav-sidebar li.active > a {
font-weight: 600;
}
body.sidebar-refactoring
.nav-sidebar
li.active:not(.fly-out-top-item)
> a:not(.has-sub-items) {
.nav-sidebar li.active:not(.fly-out-top-item) > a:not(.has-sub-items) {
background-color: rgba(41, 41, 97, 0.08);
}
body.sidebar-refactoring .nav-sidebar ul {
.nav-sidebar ul {
padding-left: 0;
list-style: none;
}
@media (max-width: 767.98px) {
body.sidebar-refactoring .nav-sidebar {
.nav-sidebar {
left: -220px;
}
}
body.sidebar-refactoring .nav-sidebar .nav-icon-container {
.nav-sidebar .nav-icon-container {
display: flex;
margin-right: 8px;
}
body.sidebar-refactoring
.nav-sidebar
.nav-sidebar
a:not(.has-sub-items)
+ .sidebar-sub-level-items
.fly-out-top-item {
display: none;
}
body.sidebar-refactoring
.nav-sidebar
.nav-sidebar
a:not(.has-sub-items)
+ .sidebar-sub-level-items
.fly-out-top-item
a,
body.sidebar-refactoring
.nav-sidebar
.nav-sidebar
a:not(.has-sub-items)
+ .sidebar-sub-level-items
.fly-out-top-item.active
a,
body.sidebar-refactoring
.nav-sidebar
.nav-sidebar
a:not(.has-sub-items)
+ .sidebar-sub-level-items
.fly-out-top-item
......@@ -1390,30 +1046,26 @@ body.sidebar-refactoring
cursor: default;
pointer-events: none;
font-size: 0.75rem;
background-color: #2f2a6b;
color: #fff;
margin-top: -0.25rem;
margin-bottom: -0.25rem;
margin-top: 0;
position: relative;
background-color: #000;
color: #fff;
background: var(--black, #000);
}
body.sidebar-refactoring
.nav-sidebar
.nav-sidebar
a:not(.has-sub-items)
+ .sidebar-sub-level-items
.fly-out-top-item
a
strong,
body.sidebar-refactoring
.nav-sidebar
.nav-sidebar
a:not(.has-sub-items)
+ .sidebar-sub-level-items
.fly-out-top-item.active
a
strong,
body.sidebar-refactoring
.nav-sidebar
.nav-sidebar
a:not(.has-sub-items)
+ .sidebar-sub-level-items
.fly-out-top-item
......@@ -1421,20 +1073,17 @@ body.sidebar-refactoring
strong {
font-weight: 400;
}
body.sidebar-refactoring
.nav-sidebar
.nav-sidebar
a:not(.has-sub-items)
+ .sidebar-sub-level-items
.fly-out-top-item
a::before,
body.sidebar-refactoring
.nav-sidebar
.nav-sidebar
a:not(.has-sub-items)
+ .sidebar-sub-level-items
.fly-out-top-item.active
a::before,
body.sidebar-refactoring
.nav-sidebar
.nav-sidebar
a:not(.has-sub-items)
+ .sidebar-sub-level-items
.fly-out-top-item
......@@ -1450,34 +1099,18 @@ body.sidebar-refactoring
border-top: 0.25rem solid transparent;
border-bottom: 0.25rem solid transparent;
border-right: 0.25rem solid #000;
border-right-color: var(--black, #000);
}
body.sidebar-refactoring
.nav-sidebar
a.has-sub-items
+ .sidebar-sub-level-items {
margin-top: -0.25rem;
}
body.sidebar-refactoring
.nav-sidebar
a.has-sub-items
+ .sidebar-sub-level-items
.fly-out-top-item {
.nav-sidebar a.has-sub-items + .sidebar-sub-level-items .fly-out-top-item {
display: none;
}
body.sidebar-refactoring
.nav-sidebar
a.has-sub-items
+ .sidebar-sub-level-items
.fly-out-top-item
a,
body.sidebar-refactoring
.nav-sidebar
.nav-sidebar a.has-sub-items + .sidebar-sub-level-items .fly-out-top-item a,
.nav-sidebar
a.has-sub-items
+ .sidebar-sub-level-items
.fly-out-top-item.active
a,
body.sidebar-refactoring
.nav-sidebar
.nav-sidebar
a.has-sub-items
+ .sidebar-sub-level-items
.fly-out-top-item
......@@ -1489,30 +1122,21 @@ body.sidebar-refactoring
cursor: default;
pointer-events: none;
font-size: 0.75rem;
background-color: #2f2a6b;
color: #fff;
margin-top: 0;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
@media (min-width: 768px) and (max-width: 1199px) {
body.sidebar-refactoring .nav-sidebar:not(.sidebar-expanded-mobile) {
.nav-sidebar:not(.sidebar-expanded-mobile) {
width: 48px;
}
body.sidebar-refactoring
.nav-sidebar:not(.sidebar-expanded-mobile)
.nav-sidebar-inner-scroll {
.nav-sidebar:not(.sidebar-expanded-mobile) .nav-sidebar-inner-scroll {
overflow-x: hidden;
}
body.sidebar-refactoring
.nav-sidebar:not(.sidebar-expanded-mobile)
.nav-sidebar:not(.sidebar-expanded-mobile)
.badge.badge-pill:not(.fly-out-badge),
body.sidebar-refactoring
.nav-sidebar:not(.sidebar-expanded-mobile)
.nav-item-name,
body.sidebar-refactoring
.nav-sidebar:not(.sidebar-expanded-mobile)
.collapse-text {
.nav-sidebar:not(.sidebar-expanded-mobile) .nav-item-name,
.nav-sidebar:not(.sidebar-expanded-mobile) .collapse-text {
border: 0;
clip: rect(0, 0, 0, 0);
height: 1px;
......@@ -1523,44 +1147,28 @@ body.sidebar-refactoring
white-space: nowrap;
width: 1px;
}
body.sidebar-refactoring
.nav-sidebar:not(.sidebar-expanded-mobile)
.sidebar-top-level-items
> li
> a {
.nav-sidebar:not(.sidebar-expanded-mobile) .sidebar-top-level-items > li > a {
min-height: unset;
}
body.sidebar-refactoring
.nav-sidebar:not(.sidebar-expanded-mobile)
.fly-out-top-item:not(.divider) {
.nav-sidebar:not(.sidebar-expanded-mobile) .fly-out-top-item:not(.divider) {
display: block !important;
}
body.sidebar-refactoring
.nav-sidebar:not(.sidebar-expanded-mobile)
.avatar-container {
.nav-sidebar:not(.sidebar-expanded-mobile) .avatar-container {
margin: 0 auto;
}
body.sidebar-refactoring
.nav-sidebar:not(.sidebar-expanded-mobile)
.nav-sidebar:not(.sidebar-expanded-mobile)
li.active:not(.fly-out-top-item)
> a {
background-color: rgba(41, 41, 97, 0.08);
}
body.sidebar-refactoring
.nav-sidebar:not(.sidebar-expanded-mobile)
.context-header {
.nav-sidebar:not(.sidebar-expanded-mobile) .context-header {
height: 60px;
width: 48px;
}
body.sidebar-refactoring
.nav-sidebar:not(.sidebar-expanded-mobile)
.context-header
a {
.nav-sidebar:not(.sidebar-expanded-mobile) .context-header a {
padding: 10px 4px;
}
body.sidebar-refactoring
.nav-sidebar:not(.sidebar-expanded-mobile)
.sidebar-context-title {
.nav-sidebar:not(.sidebar-expanded-mobile) .sidebar-context-title {
border: 0;
clip: rect(0, 0, 0, 0);
height: 1px;
......@@ -1571,58 +1179,45 @@ body.sidebar-refactoring
white-space: nowrap;
width: 1px;
}
body.sidebar-refactoring
.nav-sidebar:not(.sidebar-expanded-mobile)
.context-header {
.nav-sidebar:not(.sidebar-expanded-mobile) .context-header {
height: auto;
}
body.sidebar-refactoring
.nav-sidebar:not(.sidebar-expanded-mobile)
.context-header
a {
.nav-sidebar:not(.sidebar-expanded-mobile) .context-header a {
padding: 0.25rem;
}
body.sidebar-refactoring
.nav-sidebar:not(.sidebar-expanded-mobile)
.nav-sidebar:not(.sidebar-expanded-mobile)
.sidebar-top-level-items
> li
.sidebar-sub-level-items:not(.flyout-list) {
display: none;
}
body.sidebar-refactoring
.nav-sidebar:not(.sidebar-expanded-mobile)
.nav-icon-container {
.nav-sidebar:not(.sidebar-expanded-mobile) .nav-icon-container {
margin-right: 0;
}
body.sidebar-refactoring
.nav-sidebar:not(.sidebar-expanded-mobile)
.toggle-sidebar-button {
.nav-sidebar:not(.sidebar-expanded-mobile) .toggle-sidebar-button {
width: 48px;
}
body.sidebar-refactoring
.nav-sidebar:not(.sidebar-expanded-mobile)
.nav-sidebar:not(.sidebar-expanded-mobile)
.toggle-sidebar-button
.collapse-text {
display: none;
}
body.sidebar-refactoring
.nav-sidebar:not(.sidebar-expanded-mobile)
.nav-sidebar:not(.sidebar-expanded-mobile)
.toggle-sidebar-button
.icon-chevron-double-lg-left {
transform: rotate(180deg);
display: block;
margin: 0;
}
}
body.sidebar-refactoring .nav-sidebar-inner-scroll {
.nav-sidebar-inner-scroll {
height: 100%;
width: 100%;
overflow: auto;
}
body.sidebar-refactoring .nav-sidebar-inner-scroll > div.context-header {
.nav-sidebar-inner-scroll > div.context-header {
margin-top: 0.25rem;
}
body.sidebar-refactoring .nav-sidebar-inner-scroll > div.context-header a {
.nav-sidebar-inner-scroll > div.context-header a {
padding-left: 0.75rem;
padding-right: 0.75rem;
padding-top: 0.5rem;
......@@ -1637,78 +1232,46 @@ body.sidebar-refactoring .nav-sidebar-inner-scroll > div.context-header a {
margin-bottom: 0.25rem;
margin-top: 0;
}
body.sidebar-refactoring
.nav-sidebar-inner-scroll
> div.context-header
a
.avatar-container {
.nav-sidebar-inner-scroll > div.context-header a .avatar-container {
font-weight: 400;
flex: none;
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
}
body.sidebar-refactoring
.nav-sidebar-inner-scroll
> div.context-header
a
.avatar-container.rect-avatar {
.nav-sidebar-inner-scroll > div.context-header a .avatar-container.rect-avatar {
border-style: none;
}
body.sidebar-refactoring
.nav-sidebar-inner-scroll
.nav-sidebar-inner-scroll
> div.context-header
a
.avatar-container.rect-avatar
.avatar.s32 {
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
}
body.sidebar-refactoring
.nav-sidebar-inner-scroll
> div.context-header
a
.sidebar-context-title {
color: #2f2a6b;
}
body.sidebar-refactoring .sidebar-top-level-items {
.sidebar-top-level-items {
margin-top: 0.25rem;
margin-bottom: 60px;
}
body.sidebar-refactoring .sidebar-top-level-items .context-header a {
.sidebar-top-level-items .context-header a {
padding: 0.25rem;
margin-bottom: 0.25rem;
margin-top: 0;
}
body.sidebar-refactoring
.sidebar-top-level-items
.context-header
a
.avatar-container {
.sidebar-top-level-items .context-header a .avatar-container {
font-weight: 400;
flex: none;
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
}
body.sidebar-refactoring
.sidebar-top-level-items
.context-header
a
.avatar-container.rect-avatar {
.sidebar-top-level-items .context-header a .avatar-container.rect-avatar {
border-style: none;
}
body.sidebar-refactoring
.sidebar-top-level-items
.sidebar-top-level-items
.context-header
a
.avatar-container.rect-avatar
.avatar.s32 {
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
}
body.sidebar-refactoring
.sidebar-top-level-items
.context-header
a
.sidebar-context-title {
color: #2f2a6b;
}
body.sidebar-refactoring .sidebar-top-level-items > li .badge.badge-pill {
.sidebar-top-level-items > li .badge.badge-pill {
border-radius: 0.5rem;
padding-top: 0.125rem;
padding-bottom: 0.125rem;
......@@ -1717,29 +1280,25 @@ body.sidebar-refactoring .sidebar-top-level-items > li .badge.badge-pill {
background-color: #cbe2f9;
color: #0b5cad;
}
body.sidebar-refactoring
.sidebar-top-level-items
.sidebar-top-level-items
> li.active
.sidebar-sub-level-items:not(.is-fly-out-only) {
display: block;
}
body.sidebar-refactoring
.sidebar-top-level-items
> li.active
.badge.badge-pill {
.sidebar-top-level-items > li.active .badge.badge-pill {
font-weight: 400;
color: #0b5cad;
}
body.sidebar-refactoring .sidebar-sub-level-items {
.sidebar-sub-level-items {
padding-top: 0;
padding-bottom: 0;
display: none;
}
body.sidebar-refactoring .sidebar-sub-level-items:not(.fly-out-list) li > a {
.sidebar-sub-level-items:not(.fly-out-list) li > a {
padding-left: 2.25rem;
}
body.sidebar-refactoring .toggle-sidebar-button,
body.sidebar-refactoring .close-nav-button {
.toggle-sidebar-button,
.close-nav-button {
height: 48px;
padding: 0 16px;
background-color: #fafafa;
......@@ -1749,31 +1308,30 @@ body.sidebar-refactoring .close-nav-button {
align-items: center;
background-color: #f0f0f0;
border-top: 1px solid #dbdbdb;
color: #2f2a6b;
position: fixed;
bottom: 0;
width: 220px;
}
body.sidebar-refactoring .toggle-sidebar-button .collapse-text,
body.sidebar-refactoring .toggle-sidebar-button .icon-chevron-double-lg-left,
body.sidebar-refactoring .toggle-sidebar-button .icon-chevron-double-lg-right,
body.sidebar-refactoring .close-nav-button .collapse-text,
body.sidebar-refactoring .close-nav-button .icon-chevron-double-lg-left,
body.sidebar-refactoring .close-nav-button .icon-chevron-double-lg-right {
.toggle-sidebar-button .collapse-text,
.toggle-sidebar-button .icon-chevron-double-lg-left,
.toggle-sidebar-button .icon-chevron-double-lg-right,
.close-nav-button .collapse-text,
.close-nav-button .icon-chevron-double-lg-left,
.close-nav-button .icon-chevron-double-lg-right {
color: inherit;
}
body.sidebar-refactoring .collapse-text {
.collapse-text {
white-space: nowrap;
overflow: hidden;
}
body.sidebar-refactoring .sidebar-collapsed-desktop .context-header {
.sidebar-collapsed-desktop .context-header {
height: 60px;
width: 48px;
}
body.sidebar-refactoring .sidebar-collapsed-desktop .context-header a {
.sidebar-collapsed-desktop .context-header a {
padding: 10px 4px;
}
body.sidebar-refactoring .sidebar-collapsed-desktop .sidebar-context-title {
.sidebar-collapsed-desktop .sidebar-context-title {
border: 0;
clip: rect(0, 0, 0, 0);
height: 1px;
......@@ -1784,47 +1342,39 @@ body.sidebar-refactoring .sidebar-collapsed-desktop .sidebar-context-title {
white-space: nowrap;
width: 1px;
}
body.sidebar-refactoring .sidebar-collapsed-desktop .context-header {
.sidebar-collapsed-desktop .context-header {
height: auto;
}
body.sidebar-refactoring .sidebar-collapsed-desktop .context-header a {
.sidebar-collapsed-desktop .context-header a {
padding: 0.25rem;
}
body.sidebar-refactoring
.sidebar-collapsed-desktop
.sidebar-collapsed-desktop
.sidebar-top-level-items
> li
.sidebar-sub-level-items:not(.flyout-list) {
display: none;
}
body.sidebar-refactoring .sidebar-collapsed-desktop .nav-icon-container {
.sidebar-collapsed-desktop .nav-icon-container {
margin-right: 0;
}
body.sidebar-refactoring .sidebar-collapsed-desktop .toggle-sidebar-button {
.sidebar-collapsed-desktop .toggle-sidebar-button {
width: 48px;
}
body.sidebar-refactoring
.sidebar-collapsed-desktop
.toggle-sidebar-button
.collapse-text {
.sidebar-collapsed-desktop .toggle-sidebar-button .collapse-text {
display: none;
}
body.sidebar-refactoring
.sidebar-collapsed-desktop
.toggle-sidebar-button
.icon-chevron-double-lg-left {
.sidebar-collapsed-desktop .toggle-sidebar-button .icon-chevron-double-lg-left {
transform: rotate(180deg);
display: block;
margin: 0;
}
body.sidebar-refactoring .close-nav-button {
.close-nav-button {
display: none;
}
@media (max-width: 767.98px) {
body.sidebar-refactoring .close-nav-button {
.close-nav-button {
display: flex;
}
body.sidebar-refactoring .toggle-sidebar-button {
.toggle-sidebar-button {
display: none;
}
}
......@@ -2044,14 +1594,12 @@ svg.s16 {
border-radius: 2px;
}
.rect-avatar.s32,
body.sidebar-refactoring
.nav-sidebar-inner-scroll
.nav-sidebar-inner-scroll
> div.context-header
a
.avatar-container.rect-avatar
.avatar.s32,
body.sidebar-refactoring
.sidebar-top-level-items
.sidebar-top-level-items
.context-header
a
.avatar-container.rect-avatar
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7