kibana/ui_framework/components/index.scss

// Normal colors
$textColor: #2d2d2d;
$buttonTextColor: #ffffff;
$buttonBackgroundColor: #9c9c9c;
$linkColor: #328CAA;
$linkColor-isHover: #105A73;
$inputTextColor: $textColor;
$inputBackgroundColor: #ffffff;
$inputBorderColor: $inputBackgroundColor;

// Dark theme colors
$textColor--darkTheme: #cecece;
$buttonTextColor--darkTheme: #ffffff;
$buttonBackgroundColor--darkTheme: #777777;
$linkColor--darkTheme: #b7e2ea;
$linkColor-isHover--darkTheme: #def2f6;
$inputTextColor--darkTheme: $textColor--darkTheme;
$inputBackgroundColor--darkTheme: #444444;
$inputBorderColor--darkTheme: $inputBackgroundColor--darkTheme;

// Font
$font: "Open Sans", Helvetica, Arial, sans-serif;
$fontSize: 14px;
$lineHeight: 1.5;

// Button
$buttonBorderRadius: 4px;

// Colors
$successColor: #417505;
$warningColor: #ffac15;
$errorColor: #D86051;
$focusColor: #6EADC1;
$fontColor: #191E23;
$subduedFontColor: #9fa3a7;
$linkColor: #3CAED2;
$linkHoverColor: #006E8A;
$standoutBackgroundColor: #E4E4E4;
$selectedBorderColor: #6EADC1;
$errorBorderColor: $errorColor;

// Borders
$tableBorder: 2px solid $standoutBackgroundColor;
$tableRowBorder: 1px solid $standoutBackgroundColor;

// Timing
$formTransitionTiming: 0.1s linear;

// Bar
$toolBarSectionSpacing: 50px;
$toolBarItsemSpacing: 10px;

@mixin darkTheme {
  .theme-dark & {
    @content;
  }
}

/**
 * 1. Make sure outline doesn't get hidden beneath adjacent elements.
 * 2. Override inherited styles (possibly from Bootstrap).
 */
@mixin focus($color: $focusColor) {
  z-index: 1; /* 1 */
  outline: 1px solid $color !important; /* 2 */
  outline-offset: 2px !important; /* 2 */
}

@mixin formControlFocus {
  outline: none;
  border-color: $selectedBorderColor;
}

@mixin formControl {
  appearance: none;
  padding: 3px 12px 4px;
  font-size: $fontSize;
  font-weight: 400;
  line-height: $lineHeight;
  background-color: #ffffff;
  border: 1px solid #DEDEDE;
  color: $fontColor;
  border-radius: $buttonBorderRadius;
  transition: border-color $formTransitionTiming;

  /**
   * 1. Angular will add an ng-untouched class to an input if it hasn't been touched yet.
   *    We only want invalid inputs to appear invalid after the user has had a chance to interact
   *    with it.
   */
  &:invalid {
    &:not(.ng-untouched) { /* 1 */
      border-color: $errorBorderColor;
    }
  }

  &:focus {
    @include formControlFocus;
  }

  &:disabled {
    opacity: 0.4;
    cursor: not-allowed;
  }
}

/**
 * 1. Setting to inline-block guarantees the same height when applied to both
 *    button elements and anchor tags.
 * 2. Fit MicroButton inside of Table rows without pushing them taller.
 */
@mixin microButton {
  display: inline-block; /* 1 */
  appearance: none;
  cursor: pointer;
  padding: 2px 5px;
  border: 1px solid transparent;
  color: $subduedFontColor;
  background-color: transparent;
  line-height: 1; /* 2 */

  &:hover {
    color: $fontColor;
  }
}

@mixin bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/**
 * 1. Put 10px of space between each child.
 * 2. If there is only one child, align it to the right. If you wanted it aligned right, you
 *    wouldn't use the Bar in the first place.
 */
@mixin barSection {
  display: flex;
  align-items: center;
  margin-left: $toolBarSectionSpacing * 0.5;
  margin-right: $toolBarSectionSpacing * 0.5;

  &:first-child {
    margin-left: 0;
  }

  &:last-child {
    margin-right: 0;
  }

  &:only-child {
    margin-left: auto; /* 1 */
  }

  & > * {
    flex: 1 0 auto;
  }

  & > * + * {
    margin-left: $toolBarItsemSpacing; /* 1 */
  }
}

@mixin buttonOnStandoutBackground {
  .kuiButton--basic {
    color: #5a5a5a;
    background-color: #FFFFFF;

    &:disabled {
      color: #a7a7a7;
      background-color: #F3F3F3;
    }
  }
}

@mixin selectOnStandoutBackground {
  .kuiSelect {
    border-color: #ffffff;

    &:focus {
      @include formControlFocus;
    }
  }
}

* {
  box-sizing: border-box;
}

body {
  font-family: $font;
}

@import "bar/index";
@import "button/index";
@import "form/index";
@import "icon/index";
@import "info_panel/index";
@import "link/index";
@import "loading_items/index";
@import "local_nav/index";
@import "micro_button/index";
@import "modal/index";
@import "no_items/index";
@import "panel/index";
@import "table/index";
@import "tabs/index";
@import "tool_bar/index";