bulma.scss

// customise colors
$undp_primary: #d12800;
$undp_secondary: #006eb5;
$undp_grey_darker: #232e3d;
$undp_gray_light: hsl(0, 0%, 71%);
// customise font
$undp_font: '"ProximaNova", sans-serif';
$black: #000;

// SDG icons
@use "./sdgs.scss";

@use "bulma/sass/utilities/initial-variables.scss" as iv with (
  // revert basic colors to 0.9.4
  $orange: hsl(14, 100%, 53%),
  $yellow: hsl(44, 100%, 77%),
  $green: hsl(153, 53%, 53%),
  $turquoise: hsl(171, 100%, 41%),
  $cyan: hsl(207, 61%, 53%),
  $purple: hsl(271, 100%, 71%),
  $red: $undp_primary,
  $blue: $undp_secondary,
  $grey-darker: $undp_grey_darker,
  $grey-light: $undp_gray_light,

  // radius
  $radius-small: 0,
  $radius: 0,
  $radius-medium: 0,
  $radius-large: 0,
  // $radius-rounded: 0
);

@use "bulma/sass/utilities/derived-variables.scss" as dv
  with(
    // colors
    $primary: iv.$red,
    $link: iv.$blue,

    $border: $black,

    // font
    $family-primary: $undp_font
  );

// import rest of utilities
@forward "bulma/sass/utilities";

@use "bulma/sass/components/tabs.scss" with (
  // https://github.com/jgthms/bulma/blob/main/sass/components/tabs.scss
  $tabs-link-active-color: dv.$primary,
  $tabs-link-active-border-bottom-color: dv.$primary,
  $tabs-toggle-link-active-background-color: dv.$primary,
  $tabs-toggle-link-active-border-color: dv.$primary,
  $tabs-toggle-link-active-color: white,
  $tabs-boxed-link-radius: 0,
  $tabs-toggle-link-radius: 0,
  $tabs-border-bottom-width: 2px,
  $tabs-border-bottom-color: #edeff0,
  $tabs-link-hover-border-bottom-color: #a9b1b7
);

@use "bulma/sass/components/breadcrumb.scss" with (
  // https://github.com/jgthms/bulma/blob/main/sass/components/breadcrumb.scss
  $breadcrumb-item-color: dv.$primary,
  $breadcrumb-item-hover-color: #ee402d,
  $breadcrumb-item-separator-color: dv.$primary
);

@use "bulma/sass/components/modal.scss" with (
  // https://github.com/jgthms/bulma/blob/main/sass/components/modal.scss
  $modal-background-background-color: rgba(247, 247, 247, 0.8)
);

// import rest of components
@forward "bulma/sass/components";

@use "bulma/sass/form/shared.scss" with (
  // inputs
  // https://github.com/jgthms/bulma/blob/main/sass/form/shared.scss
  $input-radius: iv.$radius,
  // $input-shadow: inset 0.1px 2px rgba($black, 0.1),
  $input-focus-shadow-size: 0 0 0 0.08em,
  $input-icon-color: $undp_gray_light,
  $input-icon-hover-color: $black,
  $input-icon-focus-color: $black,
  $input-border-l: 0,
  $input-focus-h: 0,
  $input-focus-s: 0,
  $input-focus-l: 71
);

// import rest of forms
@forward "bulma/sass/form";

@use "bulma/sass/elements/table.scss" with (
  // https://github.com/jgthms/bulma/blob/main/sass/elements/table.scss
  $table-head-background-color: #edeff0,
  $table-head-cell-border-width: 0,
  $table-foot-background-color: #edeff0
);

@use "bulma/sass/elements/button.scss" with (
  // https://github.com/jgthms/bulma/blob/main/sass/elements/button.scss
  // customizing padding of button class makes button collapse
  // $button-padding-vertical: 1rem,
  $button-padding-horizontal: 1.5rem,
  $button-border-color: $black
);

// import rest of elements
@forward "bulma/sass/elements";

@forward "bulma/sass/base";
@forward "bulma/sass/layout";
@forward "bulma/sass/grid";
@forward "bulma/sass/helpers";

// Import the themes so that all CSS variables have a value
@forward "bulma/sass/themes";

// no input-boder-color and $input-focus-color and $input-hover-border-color in bulma v1,
// so overwrite them forcely
.textarea,
.input {
  &:not(.is-link, .is-primary, .is-info, .is-success, .is-warning, .is-danger) {
    border-color: $black !important;

    &:hover {
      border-color: $black !important;
    }
  }
}

.button {
  // overwrite $button-padding-horizontal to 1.5 rem, but use default 1rem for is-small
  // $button-padding-horizontal = 1rem make button size collapse, so remove it from customized style
  &.is-small {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
}

.select select {
  border-color: $black !important;
}

// load SohneBreit font
@font-face {
  font-display: swap;
  font-family: SohneBreit;
  font-style: normal;
  font-weight: 400;
  src:
    url(./assets/fonts/soehne-breit-web-dreiviertelfett.woff2) format("woff2"),
    url(./assets/fonts/soehne-breit-web-dreiviertelfett.woff) format("woff");
}

// Customise headings to align UNDP design
h1 {
  &.title {
    &.is-1 {
      font-size: 2.938rem;
      font-weight: 700;
      letter-spacing: 0.06rem;
      font-family: SohneBreit, sans-serif;
      text-transform: uppercase;
      margin-bottom: 12px;

      @media (min-width: 48em) {
        font-size: 4.25rem;
        margin-bottom: 16px;
      }
    }
  }
}

h2 {
  &.title {
    &.is-2 {
      font-size: 2.5rem;
      font-weight: 700;
      font-family: ProximaNova, sans-serif;
      margin-bottom: 12px;

      @media (min-width: 48em) {
        font-size: 3.438rem;
        margin-bottom: 16px;
      }
    }
  }
}

h3 {
  &.title {
    &.is-3 {
      font-size: 1.875rem;
      font-weight: 600;
      font-family: ProximaNova, sans-serif;
      margin-bottom: 12px;

      @media (min-width: 48em) {
        font-size: 2.188rem;
        margin-bottom: 16px;
      }
    }
  }
}

h4 {
  &.title {
    &.is-4 {
      font-size: 1.563rem;
      font-weight: 400;
      font-family: ProximaNova, sans-serif;
      margin-bottom: 12px;

      @media (min-width: 48em) {
        font-size: 2.188rem;
        margin-bottom: 16px;
      }
    }
  }
}

h5 {
  &.title {
    &.is-5 {
      font-size: 1.25rem;
      font-weight: 400;
      font-family: ProximaNova, sans-serif;
      margin-bottom: 12px;

      @media (min-width: 48em) {
        font-size: 1.563rem;
        margin-bottom: 16px;
      }
    }
  }
}

h6 {
  &.title {
    &.is-6 {
      font-size: 1rem;
      font-weight: 700;
      font-family: ProximaNova, sans-serif;
      text-transform: uppercase;
      letter-spacing: 0.48px;
      margin-bottom: 12px;

      @media (min-width: 48em) {
        margin-bottom: 16px;
      }
    }
  }
}

button {
  &.delete {
    background-color: #f7f7f7;

    &.is-large {
      --bulma-delete-dimensions: 45px;
    }
  }
  &.delete::before,
  &.delete::after {
    background-color: #232e3d;
  }
}

@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css");
// import Material Icons
// to see this for adding another icon family.
// https://stackoverflow.com/questions/50303454/how-to-use-the-new-material-design-icon-themes-outlined-rounded-two-tone-and
@import url("https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Outlined");
// import Material Symbol Outlined Icons
@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,GRAD@20,400,0");