ref: Delete unused styles from less files (#11802)

src/sentry/static/sentry/app/views/settings/organizationTeams/organizationTeams.jsx

@@ -66,7 +66,7 @@ class OrganizationTeams extends React.Component {
     const otherTeams = allTeams.filter(team => !activeTeamIds.has(team.id));
 
     return (
-      <div className="team-list">
+      <div data-test-id="team-list" className="team-list">
         <SettingsPageHeader title={t('Teams')} action={action} />
         <Panel>
           <PanelHeader>{t('Your Teams')}</PanelHeader>

src/sentry/static/sentry/less/components/broadcasts.less

@@ -1,93 +0,0 @@
-.broadcasts {
-  &.unseen {
-    position: relative;
-
-    &:after {
-      position: absolute;
-      display: block;
-      content: '';
-      top: 8px;
-      right: 26px;
-      .square(8px);
-      border-radius: 50%;
-      background: @red;
-      box-shadow: 0 0 0 3px #515c6f;
-    }
-  }
-
-  &.open.unseen:after {
-    box-shadow: 0 0 0 3px #39414e;
-  }
-
-  .icon-globe {
-    font-size: 18px;
-    position: relative;
-    top: 2px;
-  }
-
-  .dropdown-menu {
-    // ideally we could use 90% but due to parent element
-    // this doesnt work
-    max-height: 500px;
-    width: 240px;
-    padding-top: 0;
-    padding-bottom: 0;
-    overflow: auto;
-
-    > li {
-      color: @gray-dark;
-      padding: 10px;
-      border-bottom: 1px solid #e5e5e5;
-      margin-bottom: 0;
-      line-height: 1.3;
-
-      h4 {
-        font-size: 16px;
-        font-weight: 600;
-        margin-bottom: 10px;
-      }
-
-      .read-more {
-        display: block;
-        margin-top: 10px;
-      }
-
-      a {
-        color: @link-color;
-
-        &:hover {
-          color: @link-color-hover;
-          background: none;
-        }
-      }
-
-      &.empty {
-        text-align: center;
-        color: #7a8188;
-      }
-
-      &.unseen {
-        font-weight: bold;
-      }
-
-      &:last-child {
-        border-bottom: 0;
-        margin-bottom: 0;
-      }
-
-      .loading {
-        margin: 0 auto;
-
-        .loading-message {
-          display: none;
-        }
-      }
-
-      > a {
-        display: inline;
-        padding: 0;
-        color: @link-color;
-      }
-    }
-  }
-}

src/sentry/static/sentry/less/group-detail.less

@@ -30,8 +30,7 @@
     line-height: 1.2;
   }
 
-  .error-level,
-  .event-type {
+  .error-level {
     padding: 0;
     border-radius: 2px;
     margin-right: 8px;

src/sentry/static/sentry/less/layout.less

@@ -319,20 +319,6 @@ body.auth {
     .clearfix;
   }
 
-  .org-name {
-    float: left;
-    font-weight: bold;
-    color: @gray-darker;
-
-    a {
-      color: @gray-darker;
-
-      &:hover {
-        color: @gray-darkest;
-      }
-    }
-  }
-
   .project-header {
     display: flex;
     margin-top: 18px;
@@ -378,15 +364,6 @@ body.auth {
     }
   }
 
-  .logo-logged-in {
-    position: relative;
-    padding-left: 38px;
-    .icon-sentry-logo {
-      position: absolute;
-      left: 0;
-    }
-  }
-
   h1 {
     font-size: 18px;
     font-weight: 600;

src/sentry/static/sentry/less/organization.less

@@ -1,18 +1,3 @@
-.new-team {
-  font-size: 14px;
-  margin-top: -6px;
-  display: block;
-  padding: 3px 9px 4px 7px;
-  border-radius: 2px;
-
-  .icon-plus {
-    position: relative;
-    top: 2px;
-    font-size: 18px;
-    opacity: 0.5;
-  }
-}
-
 .organization-home {
   flex: 1;
 
@@ -37,21 +22,6 @@
   .nav-header {
     padding: 0 0 10px;
     margin: 0;
-
-    &.with-divider {
-      border-top: 1px solid @trim;
-      padding-top: 30px;
-    }
-  }
-
-  .count {
-    font-size: 36px;
-    color: @gray-dark;
-    margin: 10px 0 20px;
-
-    &.rejected {
-      color: @red;
-    }
   }
 
   .page-header {
@@ -170,167 +140,6 @@
   }
 }
 
-/**
-* Team list
-* ============================================================================
-*/
-
-.team-list {
-  list-style: none;
-  padding-left: 0;
-
-  .nav-tabs {
-    li a {
-      padding: 0 0 15px;
-    }
-  }
-
-  .box-header {
-    .actions {
-      a {
-        font-size: 13px;
-        margin-left: 20px;
-        font-weight: bold;
-        padding-top: 7px;
-        display: inline-block;
-        color: @gray;
-
-        &:hover {
-          color: @gray-dark;
-        }
-      }
-
-      .icon-plus {
-        top: 1px;
-        font-size: 16px;
-      }
-
-      .icon-settings {
-        top: 1px;
-      }
-    }
-
-    a {
-      color: @gray;
-      &:hover {
-        color: @gray-dark;
-      }
-    }
-  }
-
-  .box-content {
-    .clearfix();
-    position: relative;
-
-    .project-list-empty {
-      margin: 20px 0;
-      text-align: center;
-
-      a {
-        color: @link-color;
-
-        &:hover {
-          color: @link-color-hover;
-        }
-      }
-    }
-  }
-
-  .loading {
-    display: none;
-  }
-
-  .bookmark {
-    color: @gray-light;
-    margin-right: 6px;
-  }
-
-  .isBookmarked .bookmark {
-    color: @yellow-orange;
-  }
-
-  .project-chart {
-    width: 210px;
-    .barchart {
-      height: 20px;
-    }
-  }
-}
-
-/**
-* Create team
-* ============================================================================
-*/
-
-.create-flow {
-  .help-block {
-    font-size: 14px;
-    color: @gray;
-    line-height: 1.4;
-    margin-bottom: 20px;
-  }
-
-  .control-group {
-    margin-bottom: 20px;
-  }
-
-  input[type='text'] {
-    box-sizing: border-box;
-    -moz-box-sizing: border-box;
-    width: 100%;
-    margin: 0;
-  }
-
-  .actions {
-    text-align: right;
-    border-top: 2px solid darken(#f1f2f3, 0);
-    padding-top: 30px;
-    margin-top: 10px;
-  }
-
-  .steps {
-    .clearfix();
-    list-style-type: none;
-    padding: 0;
-    margin: 30px 0;
-
-    li {
-      width: 35%;
-      float: left;
-      text-align: center;
-      font-size: 24px;
-      color: lighten(@gray, 35);
-
-      &.active {
-        color: @gray;
-      }
-
-      &:first-child {
-        text-align: left;
-      }
-
-      &:last-child {
-        text-align: right;
-      }
-    }
-  }
-}
-
-/**
-* API Keys
-* ============================================================================
-*/
-
-.api-key-list {
-  h5 a {
-    color: @gray;
-
-    &:hover {
-      color: @gray-dark;
-    }
-  }
-}
-
 .api-key-detail .scopes {
   padding-bottom: 20px;
 }
@@ -363,23 +172,6 @@
   }
 }
 
-/**
-* Member list
-* ============================================================================
-*/
-
-.member-list {
-  .status {
-    font-size: 13px;
-  }
-
-  .member-role-highlight {
-    td {
-      background-color: @alert-info-bg-color;
-    }
-  }
-}
-
 /**
 * Stats Column
 * ============================================================================
@@ -392,11 +184,6 @@
   }
 }
 
-.organization-stats {
-  height: 150px;
-  margin-bottom: 20px;
-}
-
 /**
  * Onboarding
  * ============================================================================
@@ -559,15 +346,6 @@
       padding: 0;
     }
   }
-
-  .btn-see-all {
-    display: block;
-    text-align: center;
-    border: 0;
-    border-radius: 0;
-    background: @white-dark;
-    padding: 10px;
-  }
 }
 
 @keyframes animate-stripes {
@@ -602,40 +380,6 @@
     width: 16px;
   }
 
-  .dropdown-menu {
-    display: block;
-    width: 375px;
-    padding: 0;
-    left: 30px;
-    top: auto;
-    bottom: 0;
-    cursor: auto;
-
-    &:before {
-      display: none;
-    }
-
-    &:after {
-      display: none;
-    }
-
-    .onboarding-wrapper {
-      border: 0;
-      margin: 0;
-      box-shadow: none;
-      padding: 20px 15px 0;
-
-      a:not(.btn) {
-        color: @link-color;
-
-        &:hover {
-          color: @link-color-hover;
-          background: #fff;
-        }
-      }
-    }
-  }
-
   &:before {
     display: block;
     content: '';
@@ -685,17 +429,6 @@
   background: rgba(255, 255, 255, 0.3);
 }
 
-/**
-* Member settings / invitations
-* ============================================================================
-*/
-
-.team-choices .team-slug {
-  display: block;
-  font-weight: normal;
-  color: @gray-light;
-}
-
 /**
 * Medium to small screens
 * ============================================================================

src/sentry/static/sentry/less/project-settings.less

@@ -181,54 +181,3 @@
     }
   }
 }
-
-/**
- * Install
- * ============================================================================
- */
-
-.install-language-nav {
-  background-color: @white;
-
-  .list-group {
-    font-size: 14px;
-    border-radius: 3px;
-    border: 1px solid @trim;
-    margin-bottom: 15px;
-
-    .list-group-item {
-      color: @gray-dark;
-      padding: 5px 15px;
-      border: 0;
-      border-top: 1px solid lighten(@trim, 5);
-      border-radius: 0;
-      margin: 0;
-      background: none;
-
-      &.list-group-header {
-        border-top: 0;
-
-        .pull-right {
-          color: @gray;
-          position: relative;
-          top: 1px;
-          right: -2px;
-
-          &:hover {
-            color: @gray-dark;
-          }
-        }
-      }
-
-      &.active {
-        background: @blue;
-        color: #fff;
-        font-weight: 600;
-        box-shadow: inset 0 0 0 1px darken(@blue, 15);
-        border: 0 !important;
-        margin-left: -1px;
-        margin-right: -1px;
-      }
-    }
-  }
-}

src/sentry/static/sentry/less/sentry-hovercard.less

@@ -138,8 +138,7 @@
     white-space: nowrap;
     overflow: hidden;
   }
-  .error-level,
-  .event-type {
+  .error-level {
     padding: 0;
     border-radius: 2px;
     margin-right: 5px;

src/sentry/static/sentry/less/sentry.less

@@ -20,7 +20,6 @@
 @import url('./sentry-list-group.less');
 @import url('./sentry-panel.less');
 @import url('./layout.less');
-@import url('./sidebar.less');
 @import url('./fonts.less');
 @import url('./forms.less');
 @import url('./misc.less');

src/sentry/static/sentry/less/shared-components.less

@@ -1,4 +1,3 @@
-@import url('components/broadcasts.less');
 @import url('components/charts.less');
 @import url('components/statuspage.less');
 
@@ -27,9 +26,6 @@ dl.flat dd {
     padding-left: 30px;
     padding-right: 30px;
   }
-  &.flex-justify-center {
-    justify-content: center;
-  }
   &.flex-justify-right {
     justify-content: flex-end;
   }
@@ -328,10 +324,6 @@ table.table {
     border-width: 1px !important;
   }
 
-  .squash {
-    width: 1%;
-  }
-
   h5 {
     font-weight: 600;
     font-size: 15px;
@@ -384,15 +376,6 @@ pre.plain {
   color: @gray;
 }
 
-table.table.table-no-top-border {
-  tr:first-child {
-    th,
-    td {
-      border: 0 !important;
-    }
-  }
-}
-
 table.table.key-value {
   border: none;
 
@@ -424,36 +407,6 @@ table.table.key-value {
   }
 }
 
-table.integrations {
-  td,
-  th {
-    padding: 20px !important;
-  }
-
-  td:first-child {
-    position: relative;
-    padding-left: 78px !important;
-  }
-
-  h5 {
-    font-size: 16px;
-    margin-bottom: 8px;
-
-    span {
-      color: #babec2;
-    }
-  }
-
-  p {
-    color: #979ba0;
-    margin: 0;
-  }
-
-  a {
-    color: #979ba0;
-  }
-}
-
 .event-list {
   border: 1px solid @trim;
   overflow-x: scroll;
@@ -488,9 +441,6 @@ table.integrations {
     th,
     td {
       white-space: nowrap;
-      // #2d2635;
-      //
-      // fingerprint #3c3644
     }
 
     .table-user-info {
@@ -731,24 +681,6 @@ table.integrations {
   }
 }
 
-.hint-enter {
-  opacity: 0.01;
-}
-
-.hint-enter.hint-enter-active {
-  opacity: 1;
-  transition: opacity 500ms ease-in;
-}
-
-.hint-leave {
-  opacity: 1;
-}
-
-.hint-leave.hint-leave-active {
-  opacity: 0.01;
-  transition: opacity 300ms ease-in;
-}
-
 // Loading Gif
 
 .loading.triangle {
@@ -787,31 +719,6 @@ table.integrations {
   }
 }
 
-/**
-* Filter Grid
-* ============================================================================
-*/
-.inbound-filters-stats {
-  .bar-chart figure a,
-  .bar-chart figure g {
-    height: 50px;
-
-    span,
-    .barchart-rect {
-      &.filtered {
-        background: @gray-lightest;
-      }
-    }
-
-    &:hover span,
-    &:hover .barchart-rect {
-      &.filtered {
-        background: @gray-light;
-      }
-    }
-  }
-}
-
 /**
 * Search
 * ============================================================================
@@ -890,33 +797,6 @@ table.integrations {
   background: #fff;
   z-index: 100;
   overflow: hidden;
-
-  strong {
-    /* highlight */
-    font-weight: normal;
-    background: lighten(@yellow, 15);
-    color: @gray-dark;
-  }
-
-  .nav-tabs {
-    border-bottom: 1px solid lighten(@trim, 6);
-    margin: 0;
-    padding-left: 13px;
-
-    li {
-      margin-right: 12px;
-    }
-  }
-
-  .form-group {
-    padding: 10px 0;
-    border-top: 1px solid #e9ebec;
-    margin: 0;
-
-    &:first-child {
-      border-top: 0;
-    }
-  }
 }
 
 .search-autocomplete-list {
@@ -981,20 +861,6 @@ table.integrations {
         border-color: @trim;
       }
     }
-
-    .remove-saved-search {
-      margin-top: -5px;
-      color: lighten(@gray, 30);
-      &:hover {
-        color: lighten(@gray, 10);
-      }
-
-      .icon-trash {
-        position: static;
-        font-size: 13px;
-        color: inherit;
-      }
-    }
   }
 }
 
@@ -1250,20 +1116,6 @@ ul.faces {
       padding: 2px 5px;
     }
 
-    &.box-header-borderless {
-      border: 0;
-      font-size: 15px;
-      border-radius: 3px;
-
-      h3 {
-        font-weight: 400;
-      }
-      .btn {
-        padding: 0;
-        padding-top: 3px;
-      }
-    }
-
     a {
       color: @gray-dark;
       &:hover {
@@ -1369,11 +1221,6 @@ ul.faces {
     }
   }
 
-  .box-footer,
-  .panel-footer {
-    background: @white-dark;
-  }
-
   &.box-modal {
     box-shadow: 0 1px 12px rgba(0, 0, 0, 0.15);
     border-color: darken(@trim, 9);
@@ -1395,19 +1242,6 @@ ul.faces {
       padding: 10px 10px 0;
     }
   }
-
-  .box-collapse-margins {
-    border-radius: 2px 2px 0 0;
-
-    + .box-collapse-margins {
-      margin-top: -21px;
-      border-radius: 0;
-    }
-
-    &:last-of-type {
-      border-radius: 0 0 2px 2px;
-    }
-  }
 }
 
 .box-clippable {
@@ -1488,8 +1322,7 @@ ul.faces {
     background: @blue-light;
   }
 
-  .alert-error,
-  .alert-danger {
+  .alert-error {
     background: @red;
   }
 }
@@ -1636,22 +1469,6 @@ header + .alert {
   }
 }
 
-.email-alert-button {
-  display: inline;
-  margin: 0;
-
-  button {
-    font-weight: 600;
-    color: inherit;
-    padding: 0;
-    border: 0;
-
-    &:hover {
-      color: inherit;
-    }
-  }
-}
-
 /**
 * Dropdowns
 * ============================================================================
@@ -1783,13 +1600,6 @@ header + .alert {
   background-color: @blue;
 }
 
-.nav-small {
-  &.nav-pills > li > a {
-    padding: 5px 8px;
-    font-size: 12px;
-  }
-}
-
 /**
 * Nav stacked
 * ============================================================================
@@ -2069,10 +1879,6 @@ ul.radio-inputs {
         margin-top: 4px;
         vertical-align: middle;
       }
-
-      .help-block {
-        margin-bottom: 0;
-      }
     }
   }
 }
@@ -2188,22 +1994,6 @@ ul.radio-inputs {
   }
 }
 
-// Sudo Modal
-.sudo-modal.modal {
-  .modal-header {
-    padding: 12px 30px;
-  }
-
-  .form-actions {
-    margin-left: -30px;
-    margin-right: -30px;
-    margin-bottom: -30px;
-    padding-right: 30px;
-    padding-bottom: 20px;
-    padding-top: 20px;
-  }
-}
-
 // Command Palette
 .command-palette.modal {
   .modal-content {
@@ -2242,40 +2032,12 @@ ul.radio-inputs {
     color: @40;
     margin-bottom: 10px;
   }
+
   h5 {
     margin-bottom: 10px;
   }
 }
 
-/**
-* Tag List
-* ============================================================================
-*/
-
-ul.tag-list {
-  list-style: none;
-  padding-left: 0;
-  margin-bottom: 15px;
-
-  li {
-    margin-bottom: 5px;
-    position: relative;
-
-    .progressbar {
-      padding: 5px 0;
-    }
-
-    &:nth-child(even) {
-      background: #f9f9f9;
-    }
-
-    span {
-      position: absolute;
-      right: 10px;
-    }
-  }
-}
-
 /**
 * Client platform list
 * ============================================================================
@@ -2485,11 +2247,6 @@ ul.tag-list {
  * ============================================================================
  */
 
-.event-type {
-  background: @gray-light;
-}
-
-.type-error .event-type,
 .level-error .error-level {
   background: @orange;
 }
@@ -2573,14 +2330,4 @@ ul.tag-list {
       margin-top: -55px;
     }
   }
-
-  .welcome-modal .modal-dialog {
-    width: 720px;
-    margin-top: -300px;
-    margin-left: -360px;
-
-    .modal-content {
-      height: 500px;
-    }
-  }
 }

src/sentry/static/sentry/less/sidebar.less

@@ -1,722 +0,0 @@
-/**
-* Global Sidebar
-* ============================================================================
-*/
-
-.navbar {
-  background-color: @header-bg-color;
-  color: #fff;
-  font-size: 15px;
-  position: fixed;
-  top: 0;
-  left: 0;
-  bottom: 0;
-  width: @sidebar-width;
-  z-index: @zindex-navbar-fixed;
-  padding: 0 14px;
-  .clearfix();
-  display: flex;
-  flex-direction: column;
-
-  .anchor-top {
-    flex: 1;
-    align-self: flex-start;
-  }
-
-  .icon-sentry-logo,
-  .icon-sentry-logo-full {
-    line-height: 40px;
-  }
-
-  .admin-action-message {
-    line-height: 42px;
-    display: block;
-    float: right;
-    font-size: 13px;
-    font-weight: bold;
-    padding-right: 10px;
-    .animated;
-    .animated.infinite;
-    .animated.hinge;
-    .flash-50;
-  }
-
-  .logo {
-    display: block;
-    float: left;
-    text-align: center;
-    font-size: 22px;
-    color: lighten(#b9b2d0, 5) !important;
-    margin: 0;
-
-    &:hover {
-      color: #fff !important;
-    }
-  }
-
-  .global-nav {
-    .list-unstyled();
-    margin: 0;
-
-    li {
-      float: left;
-      margin-right: 16px;
-      margin-left: 15px;
-
-      a {
-        height: 40px;
-        line-height: 42px;
-      }
-    }
-  }
-
-  .org-selector {
-    padding: 15px 0;
-    position: relative;
-
-    .hover-bar-container {
-      position: absolute;
-      width: 32px;
-      height: 3px;
-      bottom: -2px;
-      border-radius: 2px;
-      overflow: hidden;
-
-      .hover-bar {
-        width: 0;
-        height: 3px;
-        background: rgba(255, 255, 255, 0.35);
-        -webkit-transition: width 500ms ease;
-      }
-    }
-
-    &:hover {
-      .hover-bar-container {
-        background: #625c69;
-      }
-      .hover-bar {
-        width: 100%;
-      }
-    }
-
-    &.active {
-      &:before {
-        position: absolute;
-        display: block;
-        content: '';
-        right: -14px;
-        top: 50%;
-        margin-top: -6px;
-        border-top: 7px solid transparent;
-        border-bottom: 7px solid transparent;
-        border-right: 7px solid #f7f8f9;
-      }
-      &:hover {
-        .hover-bar-container {
-          display: none;
-        }
-      }
-    }
-
-    .org-list {
-      > li {
-        padding: 15px 20px 10px 68px;
-        border-bottom: 1px solid @trim;
-        position: relative;
-        background: #fff;
-
-        a {
-          color: @50;
-
-          &:hover {
-            color: @70;
-          }
-        }
-
-        h5,
-        p {
-          margin: 0;
-        }
-
-        h5 {
-          font-size: 16px;
-          margin-bottom: 2px;
-
-          a {
-            color: @80;
-
-            &:hover {
-              color: @90;
-            }
-          }
-        }
-
-        p {
-          font-size: 13px;
-          a {
-            margin-right: 10px;
-          }
-        }
-
-        &.active {
-          background: #f5fafe;
-          border-top: 1px solid #b5d6ed;
-          border-bottom: 1px solid #b5d6ed;
-          margin-top: -1px;
-
-          a {
-            color: desaturate(darken(@blue-dark, 25), 10);
-            opacity: 0.8;
-            .transition(0.2s opacity);
-
-            &:hover {
-              opacity: 1;
-            }
-          }
-
-          p {
-            a {
-              color: desaturate(darken(@blue-dark, 25), 10);
-              opacity: 0.6;
-
-              &:hover {
-                opacity: 0.8;
-              }
-            }
-          }
-        }
-
-        &.org-create {
-          padding: 15px 20px;
-          background: none;
-
-          a {
-            color: @70;
-
-            &:hover {
-              color: @90;
-            }
-          }
-        }
-      }
-
-      .org-avatar {
-        position: absolute;
-        display: block;
-        left: 20px;
-        .square(36px);
-        background-color: @50;
-        border-radius: 3px;
-        text-align: center;
-        line-height: 36px;
-        color: #fff;
-
-        &:hover,
-        &:active,
-        &:focus {
-          color: #fff;
-        }
-      }
-    }
-
-    .active-org {
-      display: block;
-      .square(32px);
-      &:before {
-        display: block;
-        position: absolute;
-        content: '';
-        top: 0;
-        left: -15px;
-        right: -15px;
-        bottom: -5px;
-      }
-
-      img {
-        border-radius: 3px;
-        box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
-      }
-    }
-  }
-
-  .navbar-nav {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-
-    .list-unstyled;
-    padding: 14px 0 6px;
-    margin: 0;
-
-    > li {
-      position: relative;
-      text-align: center;
-      margin: 0 0 5px;
-
-      > a {
-        color: #b9b2d0;
-        display: block;
-        width: 32px;
-        line-height: 32px;
-
-        .icon {
-          display: block;
-          line-height: 30px;
-        }
-
-        &:hover,
-        &:focus,
-        &:active {
-          color: #fff;
-        }
-      }
-
-      &.active {
-        > a {
-          color: #fff;
-        }
-
-        &:before {
-          position: absolute;
-          display: block;
-          content: '';
-          right: -14px;
-          top: 50%;
-          margin-top: -7px;
-          border-top: 7px solid transparent;
-          border-bottom: 7px solid transparent;
-          border-right: 7px solid #f7f8f9;
-        }
-      }
-    }
-
-    > li.onboarding {
-      max-height: 9999em;
-      margin: 12px 0;
-    }
-
-    .icon-home,
-    .icon-user,
-    .icon-star-solid {
-      font-size: 18px;
-    }
-
-    .icon-av_timer {
-      font-size: 25px;
-    }
-
-    .icon-globe,
-    .icon-alert,
-    .icon-support {
-      font-size: 20px;
-    }
-
-    .activity-indicator {
-      position: absolute;
-      top: 2px;
-      right: 3px;
-      .square(8px);
-      background: @red;
-      border-radius: 50%;
-      box-shadow: 0 0 0 3px @header-bg-color;
-    }
-  }
-
-  .divider-top {
-    border-top: 1px solid lighten(#342c3e, 10);
-  }
-
-  .divider-bottom {
-    border-bottom: 1px solid lighten(#342c3e, 10);
-  }
-
-  .org-selector {
-    .dropdown-menu {
-      top: 38px;
-    }
-  }
-
-  .user-settings {
-    .avatar {
-      box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
-    }
-
-    .dropdown-toggle {
-      display: block;
-      margin-top: 5px;
-    }
-
-    .dropdown-menu {
-      left: 34px;
-      top: auto;
-      bottom: -4px;
-      background: @90;
-      border-color: transparent;
-      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
-      color: #fff;
-      border-radius: 4px;
-
-      a {
-        color: @20;
-
-        &:hover {
-          color: @purple-light;
-          background: transparent;
-        }
-      }
-
-      &:before {
-        display: none;
-      }
-
-      &:after {
-        top: auto;
-        left: -18px;
-        bottom: 12px;
-        border: 9px solid transparent;
-        border-right: 9px solid @90;
-      }
-    }
-  }
-
-  .onboarding-progress-bar {
-    margin: 0 8px;
-  }
-
-  .dropdown-toggle {
-    .icon-arrow-down {
-      color: #83899d;
-      font-size: 12px !important;
-      top: 1px;
-      margin-left: 4px;
-    }
-
-    .avatar {
-      border-radius: 2px;
-      position: relative;
-    }
-  }
-
-  .dropdown.open {
-    .dropdown-toggle {
-      color: #fff;
-      background: rgba(0, 0, 0, 0.3);
-    }
-  }
-}
-
-// Status update
-
-.navbar .icon-alert {
-  color: @yellow-orange;
-}
-
-.sidebar-panel {
-  position: fixed;
-  width: @sidebar-panel-width;
-  top: 0;
-  left: @sidebar-width;
-  bottom: 0;
-  background: @white-darker;
-  z-index: @zindex-sidebar-panel;
-  color: @gray-darker;
-  border-right: 1px solid @trim;
-  box-shadow: 1px 0 2px rgba(0, 0, 0, 0.06);
-  text-align: left;
-  line-height: 24px;
-
-  .sidebar-panel-header {
-    border-bottom: 1px solid @trim;
-    padding: 23px 20px 20px;
-    background: #fff;
-    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
-    height: @sidebar-panel-header-height;
-
-    .close {
-      font-size: 22px;
-      position: relative;
-      top: -3px;
-      right: -3px;
-      color: @30;
-
-      &:hover {
-        color: @50;
-      }
-    }
-
-    h2 {
-      font-size: 18px;
-      margin: 0;
-      font-weight: normal;
-    }
-  }
-
-  .sidebar-panel-body {
-    position: absolute;
-    top: @sidebar-panel-header-height;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    overflow: auto;
-
-    .box {
-      border: 0;
-      background: transparent;
-      box-shadow: none;
-
-      .loading-indicator {
-        border-top: 6px solid @gray-lightest;
-        border-right: 6px solid @gray-lightest;
-        border-bottom: 6px solid @gray-lightest;
-        border-left: 6px solid @gray;
-      }
-    }
-
-    .issue-list {
-      border: none;
-      box-shadow: none;
-
-      .issue {
-        border-bottom: 1px solid #e2dee6;
-        background: #fff;
-        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
-      }
-    }
-  }
-
-  .sidebar-panel-item {
-    padding: 15px 20px;
-    line-height: 1.2;
-    border-bottom: 1px solid @trim;
-    background: #fff;
-    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
-    font-size: 14px;
-
-    h3 {
-      font-size: 15px;
-      margin-bottom: 5px;
-      .culprit {
-        font-weight: normal;
-      }
-    }
-
-    p {
-      margin-bottom: 5px;
-
-      &:last-child {
-        margin: 0;
-      }
-    }
-
-    a {
-      color: @50;
-
-      &:hover {
-        color: @70;
-      }
-    }
-
-    .message {
-      color: @gray-dark;
-    }
-
-    &.active {
-      background: @10;
-      border-color: @30;
-      border-top: 1px solid @30;
-      margin-top: -1px;
-    }
-
-    &.has-seen h3 {
-      font-weight: normal;
-    }
-  }
-
-  .sidebar-panel-empty {
-    color: @50;
-    text-align: center;
-    width: 100%;
-    position: absolute;
-    top: 50%;
-    padding: 0 60px;
-    margin-top: (-62px + -16px) / 2; // offset for sidebar-panel-header + font-size
-  }
-}
-
-.incident-list {
-  padding: 20px 20px 0;
-  font-size: 13px;
-
-  h4,
-  p,
-  h6 {
-    margin-bottom: 15px;
-  }
-
-  h4 {
-    font-size: 18px;
-    line-height: 1.2;
-  }
-
-  h6 {
-    color: @60;
-  }
-
-  p {
-    line-height: 1.5;
-  }
-
-  small {
-    color: @60;
-  }
-
-  .incident-item {
-    border-bottom: 1px solid @trim;
-    margin-bottom: 20px;
-    padding-bottom: 5px;
-  }
-}
-
-.range-picker {
-  .dropdown-toggle {
-    font-size: 18px;
-    font-weight: 600;
-
-    .icon-arrow-down {
-      top: 2px;
-      margin-left: 4px;
-    }
-  }
-}
-
-/**
-* Print
-* ============================================================================
-*/
-
-@media print {
-  .navbar {
-    display: none;
-  }
-}
-
-/**
-* Responsive small screens
-* ============================================================================
-*/
-
-@media (max-width: 767px) {
-  @sidebar-panel-offset: 54px;
-
-  body {
-    padding-left: 0;
-  }
-
-  .navbar {
-    flex-direction: row;
-    position: static;
-    width: 100%;
-    max-height: @sidebar-panel-offset;
-    padding-top: 10px;
-    padding-bottom: 10px;
-
-    .navbar-nav {
-      flex-direction: row;
-      padding: 0 6px 0 10px;
-
-      > li {
-        margin: 0 5px 0 0;
-
-        &.active:before {
-          top: auto;
-          right: auto;
-          bottom: -11px;
-          left: 50%;
-          margin-left: -6px;
-          border-bottom: 7px solid #f7f8f9;
-          border-right: 7px solid transparent;
-          border-left: 7px solid transparent;
-          border-top: 7px solid transparent;
-        }
-
-        &.onboarding {
-          display: none;
-        }
-      }
-    }
-
-    .divider-bottom {
-      border: 0;
-      border-right: 1px solid @gray;
-    }
-
-    .anchor-top {
-      display: flex;
-
-      > div {
-        display: flex;
-      }
-
-      .org-selector {
-        padding: 0;
-        padding-right: 14px;
-
-        &.active:before {
-          top: auto;
-          right: auto;
-          bottom: -10px;
-          left: 50%;
-          margin-left: -12px;
-          border-bottom: 7px solid #f7f8f9;
-          border-right: 7px solid transparent;
-          border-left: 7px solid transparent;
-          border-top: 7px solid transparent;
-        }
-      }
-    }
-
-    .anchor-bottom {
-      display: flex;
-
-      .navbar-nav {
-        padding-right: 0;
-
-        > li:last-child {
-          margin: 0;
-        }
-      }
-    }
-
-    .user-settings {
-      display: block;
-      margin-left: 5px;
-
-      .dropdown-toggle {
-        margin-top: 0;
-      }
-
-      .dropdown-menu {
-        left: auto;
-        top: 42px;
-        right: -3px;
-        bottom: auto;
-
-        &:after {
-          top: -16px;
-          right: 10px;
-          left: auto;
-          bottom: auto;
-          border: 9px solid transparent;
-          border-bottom: 9px solid @90;
-        }
-      }
-    }
-  }
-
-  .sidebar-panel {
-    width: auto;
-    top: @sidebar-panel-offset;
-    left: 0;
-    right: 0;
-  }
-}