@import "~vars.scss";

/****************************************************************
                        default / fixes
 ****************************************************************/

html, body, .min-width { min-width: 600px; }

/* Always keep scrollbar */
body { overflow-y: scroll; }

/* Rules for sizing the icon. */
.material-icons.md-18 { font-size: 18px; }
.material-icons.md-24 { font-size: 24px; }
.material-icons.md-36 { font-size: 36px; }
.material-icons.md-48 { font-size: 48px; }

/* Rules for using icons as black on a light background. */
.material-icons.md-dark { color: rgba(0, 0, 0, 0.54); }
.material-icons.md-dark.md-inactive { color: rgba(0, 0, 0, 0.26); }

/* Rules for using icons as white on a dark background. */
.material-icons.md-light { color: rgba(255, 255, 255, 1); }
.material-icons.md-light.md-inactive { color: rgba(255, 255, 255, 0.3); }

/* Fix bad vertical align with icons */
* > i.material-icons { vertical-align: middle; }

/* Boostrap fix: Use pointer when hovering a button */
button, a { cursor: pointer; }

/* Fix firefox outline on focus */
:focus, ::-moz-focus-inner, ::-moz-focus-outer { outline: none; }

/****************************************************************
                        tools
 ****************************************************************/

.custom-left-border {
  border-left: 3px solid transparent;
  transition : border 0.2s ease-in-out, background-color 0.2s ease-in-out;
}

.custom-left-border:hover {
  background-color: rgba($color: #2f7bd9, $alpha: 0.1)
}

.custom-left-border-active {
  border-color: #2f7bd9;
  background-color: rgba($color: #000000, $alpha: 0.2)
}

/****************************************************************
                        side-menu / content
 ****************************************************************/

#side-menu, #content {
  transition: margin 0.8s ease;
  min-height: calc(100vh - #{$media-controls-height});
  margin: 0;
}

#side-menu {
  position: fixed;
  top: 0;
  width: $side-menu-width;
  overflow-y: auto;
  .nav {
    .nav-link, .material-icons {
      font-size: 15px;
    }
    .nav-brand img {
      height: 48px;
    }
  }
}

#content {
  min-width: calc(600px - #{$side-menu-width});
  margin-left: $side-menu-width;
  margin-bottom: $media-controls-height;
}

/* Toggle side-menu */
.hide-side-menu { margin-left: -$side-menu-width !important; }
.expand-content { margin-left: 0 !important; }
