main.scss

// settings
@import "settings_colors";

$increase-font-size-on-larger-screens: false;
$l-documentation-sidebar-width: 18rem;

// import vanilla-brochure-theme
@import "vanilla-framework/scss/build";

// import cookie policy
@import "@canonical/cookie-policy/build/css/cookie-policy";
@import "@canonical/discourse-rad-parser/build/css/discourse-rad-parser";

// patterns
@import "patterns_strips", "patterns_lists", "patterns_modal",
  "patterns_takeunders", "patterns_tables", "patterns_contact-modal", "patterns_sidenav", "hljs", "patterns_tutorials",
  "patterns_cards";

// patterns
@include maas-p-modal;
@include maas-p-takeunders;
@include maas-p-tables;
@include maas-p-contact-modal;
@include maas-p-strip--dark;
@include maas-p-sidenav;
@include maas-p-tutorials;
@include maas-p-cards;

.row.is-bordered::before {
  left: 0;
  margin-top: -5px;
  width: 100%;
}

.p-heading-icon-block {
  align-items: flex-start;
  display: flex;
  flex-wrap: wrap;
  width: 100%;

  @media only screen and (min-width: $breakpoint-large) {
    margin-bottom: 2rem;
  }
}

.p-heading-icon-block__copy-block {
  margin-top: -0.5rem;
}

.p-heading-icon-block__icon {
  border-radius: 0;
  height: auto;
  margin-bottom: $spv--small;
  margin-right: $sph--large;
  padding-right: $sph--large;
  width: ($sp-unit * 5) + $sph--large;
}

.u-indent {
  @media only screen and (min-width: $breakpoint-large) {
    float: right;
    width: calc(100% - 8.5rem);
  }
}

// header styles
@media only screen and (min-width: $breakpoint-navigation-threshold) {
  .p-navigation__items {
    flex: 1;
  }
}

.global-nav {
  .global-nav__dropdown-toggle {
    margin-left: auto;
    order: 1;
  }
}

.p-navigation__banner {
  padding-left: 0;
}

// TODO: to be removed when properly fixed on Vanilla side
// https://github.com/canonical/vanilla-framework/issues/4898
@media screen and (min-width: $breakpoint-navigation-threshold) {
  // align navigation items with grid in docs layout
  .l-docs__subgrid .p-navigation__row {
    padding-left: 0.5rem;
  }
}

.l-docs__header {
  .p-navigation__banner {
    padding-left: 1.5rem;
  }
}

.l-docs__footer {
  border-top: 1.5px solid #d9d9d9;
}