base.scss

/*!
 * Copyright 2014-2018 the original author or authors.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
@import "utilities";
// Import the rest of Bulma
@import "~bulma/bulma";
@import "~bulma-badge/dist/bulma-badge";

html {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

body {
  flex-grow: 1;
  display: flex;
  flex-direction: column;

  & > div {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
  }
}

.is-breakable {
  word-break: break-all;
}

.is-muted {
  color: $grey-light;
}

.is-selectable {
  cursor: pointer;
}

.button.is-icon {
  background: transparent;
  border-color: transparent;
}

//navbar color fixes
.navbar-item .button.is-icon {
  color: $navbar-item-color;
  &:hover {
    color: $navbar-item-hover-color;
  }

}

.navbar .badge {
  &[data-badge]::after {
    box-shadow: 0 0 0 $badge-border-size $navbar-background-color;
  }
}

//Loading spinner
.section.is-loading,
.content.is-loading {
  &::after {
    @include loader;
    height: 5rem;
    width: 5rem;
    left: calc(50% - 2.5em);
    top: calc(50% - 2.5em);
    border-width: 0.5rem;
  }
}

p.is-loading {
  &::before {
    display: inline-block;
    right: 0.25em;
    @include loader;
  }
}

//hero as card-header
.card .hero {
  padding: 0.75rem;
}

//Bullets
.has-bullet::before {
  background: currentColor;
  content: '';
  width: 0.75em;
  height: 0.75em;
  display: inline-block;
  margin-right: 0.25em;
}

@each $name, $pair in $colors {
  .has-bullet.has-bullet-#{$name}::before {
    $color: nth($pair, 1);
    background-color: $color;
  }
}

//D3 Charts
.tick {
  & line {
    stroke: currentColor;
  }
  & text {
    fill: currentColor;
    font-size: $size-7;
  }
}

path.domain {
  stroke: currentColor;
}

//for login.html
.login {
  background-color: $black-ter;

  &--logo {
    margin-left: auto;
    margin-right: auto;
  }
}