//
// Components styling file
// Divide each component with big comment lines
// Indeed, it simplifies writing CSS
//

//====================================
// DASHBOARD COMPONENT
//====================================

#render-target, #dashboard, #dashboard main {
  width: 100%; height: 100%;
}

//====================================
// DRAWER COMPONENT
//====================================

nav {
  position: fixed;
  background-color: $grey-dark;
  width: 100%; height: 70px;
  a {
    font-family: 'Proxima Nova';
    text-decoration: none;
    color: inherit;
  }
  h1 { padding-left: 40px; }
  ul { padding: 25px 40px; }
}

.drawer {
  padding: 0 50px;
  justify-content: space-around;
  display: flex;
}

.drawer .apps-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  max-width: 890px;
  @media (max-width: 890px) {
    justify-content: center;
  }
}

.drawer .apps-list .app {
  border-radius: 3px;
  padding: 40px 23px;
  margin-top: 15px;
  text-align: center;

  .logo {
    width: 120px;
    height: 120px;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    &:hover { cursor: pointer; }
  }

  .name {
    max-width: 120px;
    text-transform: capitalize;
    padding-top: 15px;
    font-size: 1rem;
  }

  &.warning {
    .pulse, .halo { stroke: $yellow; }
    .center { fill: $yellow; }
  }
}

.pulse-container {
  margin-left: 100px;
  margin-top: -15px;
  width: 38px; height: 38px;
  position: absolute;
}

@-webkit-keyframes svg_pulse {
  0% {
    transform: matrix(1,0,1,0,0);
    stroke-width: 1;
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    transform: matrix(4,0,0,4,-120,-120);
    stroke-width: 0.25;
    opacity: 0;
  }
}

.p-svg-pulse {
  .pulse {
    stroke: $brand-info;
    -webkit-animation: svg_pulse 3s ease;
    -webkit-animation-iteration-count: infinite;
  }
  .halo {
    stroke: $brand-info;
  }
  .center {
    fill: $brand-info;
  }
}

//=====================
// Explore drawer, explorable, git sections
//=====================

.module-search {
  width: 100%; height: 60px;
  box-shadow: 5px 0 0 rgba(0,0,0,1);
  left: 0; bottom: 0;
  position: fixed;
  color: #ccc;
  font-size: 20px;
  background: #fff;
  z-index: 10;
  .fa.fa-search { padding-left: 20px; }
  input {
    display: inline;
    color: $grey;
    padding-left: 20px;
    width: 80%; height: 100%;
    border: none;
  }
}

//=====================
// Network app
//=====================
.network-app-badge {
  @extend .pulse-container;
  width: 24px; height: 24px;
  border-radius: 50%;
  background-color: #fff;
  .content {
    display: inline-block;
    padding: 3px;
    color: $grey;
  }
}

//====================================
// Nofications
//====================================

.notifications {
  z-index: 100;
  width: 300px;
  position: fixed;
  text-align: left;
  right: 50px; top: 50px;
  transform: scaleY(-1);
  overflow: scroll;
}

.toast {
  opacity: 0.9;
  transform: scaleY(-1);
  border-width: 0;
  padding: 15px 20px;
  margin: 10px 0;
  background-color: #fff; color: $grey;

  &:hover, &.current { opacity: 1; }
  &--info { background-color: #fff; color: $grey; }
  &--warning { background-color: $brand-warning; color: $grey; }
  &--success { background-color: $brand-success; color: $grey; }
  &--error { background-color: $brand-primary; }
  &__title { text-transform: uppercase; font-weight: bolder; }
  &__body { padding-top: 5px; }
}

.notifications-pod {
  position: fixed;
  color: #fff;
  z-index: 1000;
  top: 25px; right: 150px;
}

//====================================
// App LiveView
//====================================

.app-live {
  width: 100%; height: 100%;
}

//====================================
// NotFound
//====================================

.not-found {
  width: 100%;
  padding-top: 200px;
  text-align: center;
}

//====================================
// DEVICES MAP
//====================================

.popover-content {
  color: $grey;
}

.devices-view {
  height: 100%;
  svg.devices-map {
    width: 100%;
    height: 100%;
  }

  line.connection { opacity: 0.6; }

  .device {
    cursor: pointer;
    pointer-events: all;
    rect { fill: $grey-dark; }
    &:hover rect {
      opacity: 0.05;
      fill: #fff;
      stroke: #fff;
      stroke-width: 0.2;
    }
  }
}

.zoom-pod {
  position: fixed;
  bottom: 50px; left: 50px;
  .zoom-more, .zoom-less {
    border: 2px solid $brand-info;
    color: $brand-info;
    font-weight: bold;
    font-size: 1.4em;
    padding: 5px 10px;
  }
}

.refresh-pod {
  color: #fff;
  float: left;
  padding: 18px 40px;
  font-size: 140%;
}

//===================================
// Devices controls on popovers
//===================================

.switch-button {
  padding: 5px;
  user-select: none;
  .switch-button-layout {
    border: 1px solid $blue;
    color: $blue;
    line-height: 14px;
    border-radius: 14px;
    .fa {
      font-size: 28px;
      vertical-align: middle;
      &.off { padding: 0 0 0 26px; }
      &.on { padding: 0 26px 0 0; }
    }
  }
}

//============================
// notification loader
//============================

.loader {
  margin: 0 5px;
  font-size: 3px;
  border: 1.1em solid rgba(255, 255, 255, 0.2);
  border-left: 1.1em solid #555555;
  transform: translateZ(0);
  display: inline-block;
  animation: loading 1.1s infinite linear;
}

.loader, .loader:after {
  border-radius: 50%;
  width: 6em;
  height: 6em;
}

@keyframes loading {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

//============================
// notification loader
//============================

.history-view {
  text-align: center;
}

.history-data {
  display: inline-block;
  padding: 40px 80px;
  * { vertical-align: top; }
  .chart {
    display: inline-block;
    padding: 15px;
    margin: 15px;
    text-align: left;
    .latest-value {
      top: -2px;
      position: relative;
      font-size: 120%;
      font-weight: bolder;
      color: $blue;
    }
  }
  .topic {
    width: 300px;
    height: 240px;
    overflow: hidden;
    display: inline-block;
    text-overflow: ellipsis;
    padding: 15px;
    margin: 15px;
    color: $grey;
    background-color: #fff;
    border-radius: 4px;
  }
}

//==============================
// User pod
//==============================

.user-pod {
  z-index: 1000;
  position: fixed;
  display: block;
  right: 25px;
  top: 15px;
}

.user-pod-name {
  padding: 10px;
  display: inline-block;
  vertical-align: top;
  float: right;
}

//====================================
// Connection POD to show online status or internet availability
//====================================

.connection-pod {
  z-index: 100;
  position: fixed;
  right: 10px; bottom: 10px;
  display: block;
  width: 12px; height: 12px;
  background-color: $brand-warning;
  border-radius: 50%;
  opacity: 0.8;
  &:hover { opacity: 1; }
  &.green { background-color: $brand-success; }
  &.red { background-color: $brand-primary; color: #fff; }
}

//====================================
// VERSION POD
//====================================

.version-pod {
  position: fixed;
  display: block;
  bottom: 5px; left: 5px;
  opacity: 0.25;
  &:hover {
    cursor: default;
    opacity: 1;
  }
}

//====================================
// FEEDBACK POD
//====================================

.feedback-pod {
  color: inherit;
  position: fixed;
  display: block;
  top: 50%; right: 0;
  margin-top: -10px;
  margin-right: -18px;
  text-decoration: none;
  transform: rotate(-90deg);
  opacity: 0.4;
  &:hover, &:active {
    color: inherit;
    text-decoration: none;
    opacity: 1;
  }
}

//====================================
// USER LOGIN, SIGNUP & SETTINGS FORMS
//====================================

.user-pod__menu {
  font-size: 18px;
  padding: 10px;
  a { color: $brand-primary; }
}

.user-view {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%; height: 100%;
  font-size: 18px;
  a { color: $brand-info; }
}

.user-view form {
  min-width: 500px;
  text-align: center;
  h1 { font-size: 3em; }
}

.user-view input[type=text],
.user-view input[type=password],
.user-view input[type=email] {
  display: block;
  padding: 15px 30px;
  border-radius: 3px;
  width: 100%;
}

.user-view button[type=submit] {
  display: block;
  padding: 15px 30px;
  margin: 5px;
  width: 100%;
}