i2p-styleguide/assets/styles/layout.scss

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
    font-weight: 700 !important;
    font-family: $header-font;
}

.sidebar {
  min-height: 100vh;
  height: 100%;
  width: 100%;
  background-color: var(--sidebar-inner-bg);

  // position: fixed;

  & .list-group {
    position: fixed;
    // width: 23vw;
  }

  & .list-group-item {
    background-color: transparent;
    border: 0;
    border-radius: 0 !important;
    padding: 1.25rem 1.5rem !important;
    font-size: 1rem;
    font-weight: 400 !important;

    &:hover {
      background-color: var(--sidebar-bg);
    }

    &.active  {
      background-color: var(--sidebar-bg);
    }
  }
}

.sidebar-wrapper {
  background-color: $gray-300;
}

.sidebar__link__light {
  color: var(--sidebar-text) !important;

  &:hover {
    color: $black !important;
    transition-timing-function: linear;
    -webkit-transition-timing-function: linear;
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
  }

  &.active {
    color: var(--primary-2nd);
    background-color: var(--sidebar-bg);
  }
}

.rb-sidebar__2 {
  background-color: var(--sidebar-inner-bg) !important;
  color: var(--sidebar-text) !important;
}

.row {
  margin: auto !important;
}

.active,
.active:hover {
 // background-color: $gray-3 !important;
//	box-shadow: inset 5px 0 $primary;

  & * {
    color: $primary !important;
  }
}

.navbar__top {
  background-color: var(--navbar-bg);
}

// bootstrap navbar-light class is not working, overwriting classes to fix this
//TODO fix this issue

.navbar-dark .navbar-toggler {
	border-color: rgba(255,255,255,.75) !important;
}

.navbar-light .navbar-toggler-icon {
 	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(0, 0, 0, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

.navbar-nav .nav-item .nav-link {
	color: rgba(255,255,255,.75) !important;
	
	&:hover {
		color: $white;
	}
}

.rb-contain {
  height: auto;
  max-height: 100%;
}

.max-width-150 {
  max-width: 150px;
}

.padding-top-35 {
  padding-top: 35px !important;
}

.padding-top-18 {
  padding-top: 18px;
}

.align-horizontally {
  display: flex;
  align-items: center;
}

.flex-space-between {
  justify-content: space-between;
}

.hidden-sm {
  display: block;
}

@media screen and (max-width: 991px) {
  .hidden-sm {
    display: none !important;
  }
}

.sidebar-fill {
  width: 12.45%;
}

.list-group-item:focus,
.list-group-item:hover {

	 & * {
		 color: $primary;
	 }
}

.list-group-item.active {
	color: $primary;
}

.bg-box {
  border: 1px solid var(--box);
  background: var(--box-bg);
  padding: 20px;
}

.bg {
	&-primary {
		background-color: $primary !important;
	}
	&-secondary {
		background-color: $secondary !important;
	}
}

.b-border {
  border-bottom: 2px solid lightgrey !important;
}

.typo-text {
  display: inline-block;
}

.curved {
  border-radius: 10px;
  width: 75px;
  height: 75px;
  display: inline-block;
  vertical-align: bottom;
  float: left;
}

.bg-smallest {
  padding: 15px;
  border: 1px solid var(--box);
  background: var(--box-bg);
  box-sizing: border-box;
}

.font-20 {
  font-size: 20px;
}

.image {
  max-height: 160px;
  height: 100%;
  object-fit: contain;
  overflow: hidden;
  text-align: center;
}

// Colors

.colors {
  &:first-child {
    .color-overview {
      border-top-right-radius: $border-radius;
      border-top-left-radius: $border-radius;
    }
  }

  &:last-child {
    .color-overview {
      border-bottom-right-radius: $border-radius;
      border-bottom-left-radius: $border-radius;
    }

    &:hover {
      .color-overview {
        border-bottom-left-radius: 0;
      }
    }
  }

  .color-overview {
    transition: .1s linear;
    display: flex;

    .variable {
      flex-grow: 2;
      color: $gray-900;
    }

    .hex {
      transition: .15s linear;
      opacity: 0;
      color: $gray-900;
    }
  }

  .color-details {
    display: none;
    flex-wrap: wrap;

    .color-details--section {
      flex-grow: 2;
      flex-basis: 50%;

      .pass { color: $indigo-700; }
      .fail { color: $orange-500; }
    }
  }

  // color-overview height + color-details height
  .color-priority {
    height: 128px;
  }

  &:hover {
    .color-overview {
      margin: 0 -8px 0 0;
      border-top-right-radius: $border-radius;
      border-bottom-right-radius: $border-radius;
      transition: .15s linear;
    }

    > .color-details {
      display: flex;
    }

  }
}

.palette {
  &:hover {
    .color-priority {
      height: auto;
    }
    .hex {
      opacity: 1;
    }
  }
}

.inverted {
  color: $white !important;
}