
@import './vars.scss';
@import '../bower_components/bootstrap-sass/assets/stylesheets/_bootstrap.scss';
@import './bootstrap_overrides.scss';
@import './loader.scss';
@import './home.scss';
@import './enode-list.scss';
@import './enode-details.scss';
@import './animation.scss';

/* Global styles
-------------------------------------------------- */

body {
  background-color: $background-color;
  background-image: url($background-image);
}

.primary {
  color: $brand-primary;
}

/* XOS Lib Fix
-------------------------------------------------- */
xos-form{
  button + button {
    margin-left: $form-group-margin-bottom;
  }
}

/* Navigation styles
-------------------------------------------------- */
nav {
  .navbar-brand {
    padding-top: 0;
    img {
      width: 130px;
    }
  }

  @media (max-width: $screen-sm-min){
    .navbar-nav.pull-right{
      float: none !important;
    }
  }

  li:hover,
  li.active {
    border-bottom: 2px solid $brand-primary;
  }

  li {
    border-bottom: 2px solid transparent;

    a {
      padding-top: 10px !important;
      padding-bottom: 10px !important;
      margin-top: 5px;
    }
  }
}

body {
  padding-top: 51px;
  padding-bottom: 30px;
}

#icon-defs {
  display: none;
}

/* Sticky footer styles
-------------------------------------------------- */
html {
  margin: 0px;
  padding: 0px;
}

html, body {
  position: relative;
  min-height: 100%;
  height: 100%;
}

.app-wrapper {
  position: relative;
}

[ui-view] {
  position: absolute;
  width: 100%;
}

[ui-view],
.app-wrapper {
  min-height: 100%;
  height: 100%;
}

[ui-view] .container {
  padding-bottom: 30px;
}

.footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  /* Set the fixed height of the footer here */
  height: 30px;
  line-height: 30px;
  background-color: #f5f5f5;
  z-index: 100;
  box-shadow: 0 10px 5px 10px gray;
}

/* Buttons addictional styles
-------------------------------------------------- */
.btn-primary-border {
  @include button-variant($btn-primary-bg, $btn-primary-color, $btn-primary-border);

  &.active {
    @include button-variant($btn-primary-color, $btn-primary-bg, $btn-primary-border);
  }
}

/* Login page styles
-------------------------------------------------- */
.login {
  background: url('../imgs/login.jpg');
  background-size: contain;
  min-height: 100%;
  background-repeat: no-repeat ;
  background-position: center ;

  display: flex;
  align-items: center;
  justify-content: center;

  .login-wrapper {
    background: rgba(255, 255, 255, 0.7);
    box-shadow: 5px 5px 15px #666;
    width: 260px;
    padding: 20px;
  }

  @media (max-width: $screen-sm-min){
    .login-wrapper{
      width: 100%;
    }
  }
}

/* Bundle page styles
-------------------------------------------------- */
[bundle-available] {
  margin-top: 20px;
}

img {
  animation: fadein 2s ease-in-out;
}

ng-map img {
  animation: none;
}