notifications-admin/app/assets/stylesheets/govuk-frontend/overrides.scss

// Overrides for certain GOV.UK Frontend styles to make its components match this application's design

// Additional padding-bottom override, following the GOV.UK Frontend spacing scale:
// https://design-system.service.gov.uk/styles/spacing/#the-responsive-spacing-scale
.govuk-\!-padding-bottom-12 {
  padding-bottom: 70px;

  @include govuk-media-query($from: tablet) {
    padding-bottom: 90px;
  }
}

.govuk-footer__navigation {
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap
}

.govuk-footer__section {
  -webkit-flex-basis: 200px;
  -ms-flex-preferred-size: 200px;
  flex-basis: 100%;
}

@include govuk-media-query($from: tablet) {

  .govuk-footer__navigation {
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap
  }

  .govuk-footer__section {
    -webkit-flex-basis: 200px;
    -ms-flex-preferred-size: 200px;
    flex-basis: 200px;
  }

}

// Make column headings smaller to prevent wrapping
.govuk-footer__heading {
  @include govuk-font($size: 19, $weight: bold);
}

.govuk-button {
  margin-bottom: 0px;
}

// Allow legends that contain the h1 to go full width
.govuk-fieldset__legend.govuk-grid-column-full {
  // $class parameter is deprecated but needed for v2 of GOVUK Frontend. Remove for v3 & above
  @include govuk-grid-column(full, $class: false);
}

// Add override from future version of GOV.UK Frontend
// Todo: remove this once we’ve upgraded past v3.11.0
.govuk-\!-display-none {
  display: none !important;
}

.govuk-header__logotype {
  margin-right: 0px !important;
}

.govuk-header__logotype-text {
  margin-left: 5px !important;
}

// TODO: probably move these to a separate file

.demo-tooltip {
  position: relative;
  color: #FFF;
}

.demo-tooltip a {
  pointer-events: none;
}

.demo-tooltip:before,
.demo-tooltip:after {
  position: absolute;
  content: '';
  opacity: 0;
  transition: all 0.4s ease;
  pointer-events: none;
  color: white;
}

.demo-tooltip:hover:before,
.demo-tooltip:hover:after {
  opacity: 1;
  transform: translateY(-2px);
}

.demo-tooltip:before {
  border-width: 10px 8px 0 8px;
  border-style: solid;
  border-color: red transparent transparent transparent;
  top: -15px;
  transform: translateY(20px);
}

.demo-tooltip:after {
  content: attr(data-demo-tooltip);
  background: red;
  width: 160px;
  height: 40px;
  font-size: 13px;
  font-weight: 300;
  top: -75px;
  left: -10px;
  padding: 10px;
  border-radius: 5px;
  letter-spacing: 1px;
  transform: translateY(20px);
}



// alt tooltip
// .tooltip-demo {
//   position: relative;
// }

// .tooltip-demo:before,
// .tooltip-demo:after {
//   display: block;
//   opacity: 0;
//   pointer-events: none;
//   position: absolute;
//   transform: translate3d(0, -10px, 0);
//   transition: all .15s ease-in-out;
// }

// .tooltip-demo:hover:before,
// .tooltip-demo:hover:after {
//   opacity: 1;
//   transform: translate3d(0, 0, 0);
// }

// .tooltip-demo:after {
//   border-right: 6px solid transparent;
//   border-bottom: 6px solid rgba(0, 0, 0, .75);
//   border-left: 6px solid transparent;
//   content: '';
//   height: 0;
//   top: 20px;
//   left: 20px;
//   width: 0;
// }

// .tooltip-demo:before {
//   background: rgba(0, 0, 0, .75);
//   border-radius: 2px;
//   color: #fff;
//   content: attr(data-demo-tooltip);
//   font-size: 14px;
//   padding: 6px 10px;
//   top: 26px;
//   white-space: nowrap;
// }

@keyframes shake {
  0% {
    transform: rotate(2deg);
  }

  50% {
    transform: rotate(-3deg);
  }

  70% {
    transform: rotate(3deg);
  }

  100% {
    transform: rotate(0deg);
  }
}

.demo-tooltip:hover {
  animation: shake 500ms ease-in-out forwards;
}