archived-teslamate/assets/css/app.scss

@charset "utf-8";

@import "~leaflet/dist/leaflet.css";
@import "~leaflet-control-geocoder/dist/Control.Geocoder.css";
@import "~@geoman-io/leaflet-geoman-free/dist/leaflet-geoman.css";

$mdi-font-path: "~@mdi/font/fonts";
@import "~@mdi/font/scss/materialdesignicons.scss";

$notification-padding: 0.75rem 1.25rem 0.75rem 0.75rem;
$widescreen-enabled: false;
$fullhd-enabled: false;

@import "~bulma/sass/utilities/_all";
@import "~bulma/sass/base/_all";
@import "~bulma/sass/helpers/_all.sass";

// Modal customization
$modal-z: 1010;
$modal-content-width: 560px;
$modal-card-head-padding: 15px;
$modal-card-body-padding: 5px 15px 10px;
$modal-card-head-background-color: $white;
$modal-card-head-border-bottom: none;
$modal-card-foot-border-top: none;

@import "~bulma/sass/components/breadcrumb";
@import "~bulma/sass/components/card";
@import "~bulma/sass/components/dropdown";
@import "~bulma/sass/components/message";
@import "~bulma/sass/components/modal";
@import "~bulma/sass/components/navbar";
@import "~bulma/sass/components/tabs";
@import "~bulma/sass/elements/box";
@import "~bulma/sass/elements/button";
@import "~bulma/sass/elements/container";
@import "~bulma/sass/elements/icon";
@import "~bulma/sass/elements/notification";
@import "~bulma/sass/elements/table";
@import "~bulma/sass/elements/tag";
@import "~bulma/sass/elements/title";
@import "~bulma/sass/form/_all";
@import "~bulma/sass/layout/section";
@import "~bulma/sass/grid/_all";

@import "~@creativebulma/bulma-tooltip";
@import "~@creativebulma/bulma-divider";
@import "~bulma-switch";

@import "./vendor/modal-fx";

// @import "../../deps/phoenix_live_view/assets/css/live_view.css";
.phx-disconnected {
  cursor: wait;

  * {
    pointer-events: none;
  }
}

.alert:empty {
  display: none;
}

nav.navbar {
  z-index: 401;

  a.navbar-item,
  a.navbar-link {
    display: flex;
    align-items: center;
  }
}

.car {
  display: flex;
  flex-direction: column;
  margin-bottom: 25px;
  overflow: visible;

  .card-content {
    padding: 0.8rem 0.4rem;
  }

  .content table td,
  .content table th {
    border: none;
  }

  .map {
    display: flex;
    justify-content: center;
    align-items: center;

    .leaflet-control-attribution.leaflet-control {
      display: none;
    }
  }

  .card-content {
    .icons {
      span[data-tooltip] {
        border-bottom: none;
      }
    }

    .media {
      padding: 0 0.25em;
      justify-content: space-between;
    }

    .table {
      &.is-narrow td {
        padding: 0.125em 0.25em;
      }

      th:first-of-type {
        width: 50%;
      }
    }

    @media screen and (max-width: 900px) {
      .duration-extended {
        display: none;
      }
    }
  }

  @media screen and (min-width: $tablet) {
    flex-direction: row;

    .card-image {
      min-width: 300px;
      width: 50%;

      .map {
        position: absolute !important;
        top: 0;
        bottom: 0;
        height: 100% !important;
        width: 100%;
      }
    }

    .card-content {
      width: 100%;
      max-width: 550px;
      padding: 0.75rem 1.5rem;
    }
  }

  button[phx-click="suspend_logging"]:disabled {
    pointer-events: none;
  }
}

.navbar-brand a.navbar-item:hover {
  background-color: transparent !important;
}

.field.is-horizontal {
  &.center-vertically .field {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    .control:not(.addon) {
      flex-grow: 1;
    }
  }

  .field {
    flex-wrap: wrap;

    .help:not(:empty) {
      width: 100%;
    }
  }

  .field-label {
    min-width: 165px;

    .tooltip:before {
      text-align: left !important;
    }

    .icon {
      vertical-align: middle;
    }

    .mdi {
      font-size: 1em;
    }
  }
}

$sizes: (0, 5, 10, 15, 20, 25, 30, 50);
$positions: ("top", "left", "bottom", "right");

@each $size in $sizes {
  @each $position in $positions {
    .m#{str-slice($position, 0, 1)}-#{$size} {
      margin-#{$position}: $size + px !important;
    }
    .p#{str-slice($position, 0, 1)}-#{$size} {
      padding-#{$position}: $size + px;
    }
  }
}

.mdi {
  font-size: 1.25em;
}

@media screen and (orientation: landscape) and (max-width: $desktop - 1) {
  body {
    -webkit-text-size-adjust: none;
  }

  .navbar .navbar-brand,
  .navbar .navbar-end,
  main.section .container {
    max-width: 95%;
  }

  .navbar .navbar-brand,
  .navbar .navbar-end {
    margin: 0 auto;
  }
}

@media screen and (max-width: $tablet) {
  .navbar-item.has-dropdown {
    .navbar-dropdown {
      display: none;
    }

    &.active {
      .navbar-dropdown {
        display: block;
      }
    }
  }
}

@media screen and (max-width: 390px) {
  main.section {
    padding: 1.5rem 0.75rem;
  }
}

.is-truncated {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.title-with-addon {
  display: flex;
  justify-content: space-between;
  align-items: center;

  &:not(:last-child) {
    margin-bottom: 1.5rem;
  }
}

.spinner {
  display: inline-flex;
  justify-content: center;
  height: 1rem;
  width: 1rem;

  .is-loading {
    position: relative;
    pointer-events: none;
    &:after {
      @extend %loader;
      @include center(1em);
      position: absolute !important;
    }
  }
}

.field.is-horizontal .field-label {
  min-width: 200px;
}

main.full-height {
  min-height: calc(100vh - 102px);
  min-height: calc((var(--vh, 1vh) * 100) - 102px);
}

.footer {
  height: 50px;
  opacity: 0.8;

  .button.is-text {
    text-decoration: initial;
  }
}

.about {
  margin-top: 50px;

  th,
  td {
    border: none;
  }
}

.mfa {
  .device .select select[disabled] {
    background-color: initial;
  }
}