summaryrefslogtreecommitdiff
path: root/app/assets/stylesheets/framework/contextual_sidebar.scss
diff options
context:
space:
mode:
Diffstat (limited to 'app/assets/stylesheets/framework/contextual_sidebar.scss')
-rw-r--r--app/assets/stylesheets/framework/contextual_sidebar.scss453
1 files changed, 0 insertions, 453 deletions
diff --git a/app/assets/stylesheets/framework/contextual_sidebar.scss b/app/assets/stylesheets/framework/contextual_sidebar.scss
deleted file mode 100644
index 14d1a0663d0..00000000000
--- a/app/assets/stylesheets/framework/contextual_sidebar.scss
+++ /dev/null
@@ -1,453 +0,0 @@
-.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;
- }
-}
-
-.context-header {
- position: relative;
- margin-right: 2px;
- width: $contextual-sidebar-width;
-
- > a,
- > button {
- transition: padding $sidebar-transition-duration;
- font-weight: $gl-font-weight-bold;
- display: flex;
- width: 100%;
- align-items: center;
- padding: 10px 16px 10px 10px;
- color: $gl-text-color;
- background-color: transparent;
- border: 0;
- text-align: left;
-
- &:hover,
- &:focus {
- background-color: $link-hover-background;
- color: $gl-text-color;
- outline: 0;
- }
- }
-
- .avatar-container {
- flex: 0 0 40px;
- background-color: $white;
- }
-
- .sidebar-context-title {
- overflow: hidden;
- text-overflow: ellipsis;
-
- &.text-secondary {
- font-weight: normal;
- font-size: 0.8em;
- }
- }
-}
-
-.settings-avatar {
- background-color: $white;
-
- svg {
- fill: $gl-text-color-secondary;
- margin: auto;
- }
-}
-
-@mixin collapse-contextual-sidebar-content {
- .context-header {
- height: 60px;
- width: $contextual-sidebar-collapsed-width;
-
- a {
- padding: 10px 4px;
- }
- }
-
- .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;
- }
- }
-}
-
-.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;
- }
- }
-
- @mixin collapse-contextual-sidebar {
- width: $contextual-sidebar-collapsed-width;
-
- .nav-sidebar-inner-scroll {
- overflow-x: hidden;
- }
-
- .badge.badge-pill:not(.fly-out-badge),
- .sidebar-context-title,
- .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;
- }
- }
-
- &.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;
-}
-
-.with-performance-bar .nav-sidebar {
- top: $header-height + $performance-bar-height;
-}
-
-.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,
-.toggle-right-sidebar-button {
- transition: width $sidebar-transition-duration;
- height: $toggle-sidebar-height;
- padding: 0 $gl-padding;
- background-color: $gray-light;
- border: 0;
- color: $gl-text-color-secondary;
- display: flex;
- align-items: center;
-
- &:hover {
- background-color: $border-color;
- color: $gl-text-color;
- }
-}
-
-.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;
- }
-}
-
-.toggle-right-sidebar-button {
- border-bottom: 1px solid $border-color;
-}
-
-.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;
- }
- }
-}
View Lorry Controller Status