src/css/index.scss

// Variables

$composer-primary: #00ADEE;
$composer-primary-hover: #008fc5;
$gutter-width: 8px;
$sidebar-border-color: #ddd;
$text-color-secondary: #5f5e5e;
$match-color: #3dcde6;
$match-color-hover: #3dcde624;
$match-gray: #999999;
$match-ignore-color-hover: #ece9e9;
$match-debug-color-dirty: #f7a85e66;
$match-debug-color-inflight: #31a72085;
$match-suggestion-background-color: #228816;
$match-suggestion-background-color-hover: #1e7014;
$match-suggestion-color: #fff;
$match-suggestion-color-hover: #fff;
$match-feedback-background-color: #e9e9e9;
$match-feedback-send-background-color: $composer-primary;
$match-feedback-send-background-color-hover: $composer-primary-hover;
$icon-fill-color-default: #999999;
$font-size-base: 15px;
$font-size-large: 1.1em;
$font-size-small: 0.8em;
$base-border-radius: 3px;
$sidebar-highlight-color:#01adee;

// Mixins
@mixin placeholderAnimation {
  overflow: hidden;
  &::before {
    content: " ";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 50%;
    z-index: 1;
    width: 500%;
    margin-left: -250%;
    animation: placeholderAnimation 0.8s linear infinite;
    background: linear-gradient(
        to right,
        rgba(#fff, 0) 46%,
        rgba(#fff, 0.35) 50%,
        rgba(#fff, 0) 54%
      )
      50% 50%;
  }
}

// Animations;

.animation__pop-in {
  animation-duration: 0.2s;
  animation-name: animation__pop-in;
}

@keyframes animation__pop-in {
  0% { opacity: 0; transform: translate3d(0, -10px, 0); }
  100% { opacity: 1; transform: translate3d(0, 0, 0);  }
}

// Imports
@import "./Controls.scss";
@import "./Sidebar.scss";
@import "./SidebarMatch.scss";
@import "./Suggestion.scss";
@import "./SuggestionList.scss";
@import "./MatchWidget.scss";
@import "./MatchDebug.scss";
@import "./Feedback.scss";

// Elements

hr {
  height: 1px;
  border: initial;
  border-bottom: 1px solid $sidebar-border-color;
  width: 100%;
  margin: 5px 0;
}

// Helpers

.flex-align-right {
  margin-left: auto;
}

.pull-right {
  float: right;
}

.Button {
  padding: 4px 6px;
  border: 1px solid lightgrey;
  border-radius: $base-border-radius;
  font-size: $font-size-base;
  font-weight: normal;
  cursor: pointer;
}

.Button:hover, .Button:disabled {
  background-color: #eee;
}

.Button:disabled {
  color: #888;
}

.Button:active,
.Button:focus {
  outline: none;
}

.MatchDecoration--is-transparent {
  background-color: transparent !important;
}

.TyperighterPlugin__overlay {
  position: absolute;
  top: 0;
  left: 0;
}

.TyperighterPlugin__decoration-container {
  position: absolute;
  // Raise our tooltips above our sidebar content
  z-index: 10;
}