bigcapital/client/src/style/App.scss

@import './normalize.scss';

@import './Base.scss';

// Blueprint framework.
@import '@blueprintjs/core/src/blueprint.scss';
@import '@blueprintjs/datetime/src/blueprint-datetime.scss';

@import 'basscss';

// Objects
@import 'objects/form';
@import 'objects/typography';
@import 'objects/buttons';
@import 'objects/Bigcapital';

// Components
@import 'components/CustomScrollbar';
@import 'components/dragzone';
@import 'components/resizer';
@import 'components/CloudSpinner';
@import 'components/Alert';
@import 'components/Card';
@import 'components/Toast';
@import 'components/PageForm';
@import 'components/Tooltip';
@import 'components/Postbox';

// Pages
@import 'pages/view-form';
@import 'pages/register-organizaton';

// Views
@import 'views/filter-dropdown';

// fonts
@import 'pages/fonts';

.App {
  min-width: 960px;
}

// =======

body.hide-scrollbar .Pane2 {
  overflow: hidden;
}

.bp3-fill {

  .bp3-popover-wrapper,
  .bp3-popover-target {
    display: block;
    width: 100%;
  }

  .bp3-button {
    width: 100%;
    justify-content: start;
  }
}

.bp3-datepicker-caption .bp3-html-select::after {
  margin-right: 6px;
}

.bp3-select-popover .bp3-menu {
  max-height: 300px;
  max-width: 400px;
  overflow: auto;
}

.bp3-form-group .bp3-label {
  .hint {
    .bp3-popover-wrapper {
      display: inline;
    }
  }

  &:not(.bp3-inline) .hint .bp3-popover-target {
    display: inline;
    margin-left: 0;
  }
}

.bp3-popover.bp3-tooltip {
  max-width: 300px;
}

.bp3-timezone-picker {
  .bp3-button {
    [icon='caret-down'] {
      display: none;
    }
  }
}

.bp3-progress-bar.bp3-intent-primary .bp3-progress-meter {
  background-color: #0066ff;
}

.bp3-overlay-backdrop {
  background-color: rgba(0, 10, 30, 0.7);
}

.ReactVirtualized__Collection {}

.ReactVirtualized__Collection__innerScrollContainer {}

/* Grid default theme */

.ReactVirtualized__Grid {}

.ReactVirtualized__Grid__innerScrollContainer {}

/* Table default theme */

.ReactVirtualized__Table {}

.ReactVirtualized__Table__Grid {}

.ReactVirtualized__Table__headerRow {
  font-weight: 700;
  text-transform: uppercase;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.ReactVirtualized__Table__row {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.ReactVirtualized__Table__headerTruncatedText {
  display: inline-block;
  max-width: 100%;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.ReactVirtualized__Table__headerColumn,
.ReactVirtualized__Table__rowColumn {
  margin-right: 10px;
  min-width: 0px;
}

.ReactVirtualized__Table__rowColumn {
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ReactVirtualized__Table__headerColumn:first-of-type,
.ReactVirtualized__Table__rowColumn:first-of-type {
  margin-left: 10px;
}

.ReactVirtualized__Table__sortableHeaderColumn {
  cursor: pointer;
}

.ReactVirtualized__Table__sortableHeaderIconContainer {
  display: flex;
  align-items: center;
}

.ReactVirtualized__Table__sortableHeaderIcon {
  flex: 0 0 24px;
  height: 1em;
  width: 1em;
  fill: currentColor;
}

.ReactVirtualized__Grid,
.ReactVirtualized__List {
  direction: inherit !important;
}

/* List default theme */

.ReactVirtualized__List {}


.bp3-drawer {
  box-shadow: 0 0 0;
}

// RTL Icons.
html[dir="rtl"] {
  .bp3-icon-caret-right {
    transform: scaleX(-1);
  }
}

html[lang^="ar"] {
  body {
    letter-spacing: -0.01rem;
  }
}


.sidebar-overlay {
  background: #fff;
  height: 100%;
  width: 225px;
  outline: 0;

  &__scroll-wrapper {
    height: 100%
  }

  .ScrollbarsCustom-Track {

    &.ScrollbarsCustom-TrackY,
    &.ScrollbarsCustom-TrackX {
      background: rgba(0, 0, 0, 0);
    }
  }

  .ScrollbarsCustom-Thumb {

    &.ScrollbarsCustom-ThumbX,
    &.ScrollbarsCustom-ThumbY {
      background: rgba(0, 0, 0, 0);
    }
  }

  .ScrollbarsCustom-Content {
    display: flex;
    flex-direction: column;
    height: 100%;
  }

  &:hover {
    .ScrollbarsCustom-Thumb {

      &.ScrollbarsCustom-ThumbX,
      &.ScrollbarsCustom-ThumbY {
        background: rgba(0, 0, 0, 0.5);
      }
    }
  }

  &__menu {
    margin: 16px 0;
  }

  &__item {
    font-size: 15px;
    color: #00102b;

    a {
      color: inherit;
      display: block;
      padding: 10px 22px;
      text-decoration: none;

      &:hover,
      &:focus{
        background: #f3f3f3;
      }
    }
  }

  &__divider {
    height: 1px;
    margin: 6px 0;
    background: #e2e5ec;
  }

  &__label{
    text-transform: uppercase;
    font-size: 12px;
    padding: 14px 20px 10px;
    letter-spacing: 1px;
    color: #707a85;
  }

  &__label + .sidebar-overlay__divider{
    margin-top: 0;
  }
}

.sidebar-overlay-transition {
  transform: translateX(-100%);

  &.bp3-overlay{
    &-appear,
    &-enter {
      transform: translateX(-100%)
    }
    
    &-appear-active,
    &-enter-active {
      transform: translateX(0) !important;
      transition: all 100ms ease-in-out;
    }
    
    &-appear-done,
    &-enter-done {
      transform: translateX(0) !important;
    }

    &-exit {
      transform: translateX(0) !important;
    }   
    &-exit-active {
      transform: translateX(-100%) !important;
      transition: all 100ms ease-in-out;
    }
    &-exit-done{
      transform: translateX(-100%) !important;
    }
  }

}
.sidebar-overlay-backdrop{
  background-color: rgba(0, 10, 30, 0.15);
}