fsfe-website/look/elements/color-box.less

// ============================================================================
// Styles for coloured boxes around normal content
// These can be:
// * coloured border: <div class="color-box border [...]" data-color="...">
// * full-background colour: <div class="color-box background [...]" data-color="...">
// ============================================================================

div.color-box {

  // VARIANT 1: A coloured border around the content
  &.border {
    padding: 1em;
    border: 6px red solid;
    margin: 1em 0;

    & > h2,
    & > div.grid-50-50 > div.box > h2,
    & > section > h2
    {
      margin-top: 0;
    }

    // Pre-defined colours for border box
    &[data-color=fsfe-darkblue] {
      border-color: #202D79;
    }
    &[data-color=fsfe-blue] {
      border-color: #3394CE;
    }
    &[data-color=fsfe-blue] {
      border-color: #4AD2F0;
    }
    &[data-color=fsfe-lime] {
      border-color: #D0F400;
    }
    &[data-color=burnt-sienna] {
      border-color: #F0684A;
    }
    &[data-color=heliotrope] {
      border-color: #BB4AF0;
    }
    &[data-color=screaming-green] {
      border-color: #7FF04A;
    }
  }

  // VARIANT 2: a box with a coloured background, with different sub-variants
  &.background {
    font-weight: 500;
    text-align: center;
    color: white;
    padding: 15px;

    // Move the headline closer to the box top, and thicker
    h2, h3 {
      margin-top: 0;
      font-weight: 700;
    }

    // Define the text inside the box
    p {
      font-size: 120%;
      // no margin-bottom to not distort inner paddings
      margin-bottom: 0;
    }

    // balance missing margin-bottom from p
    a.btn {
      margin-top: 10px;
    }

    // Background variant: a coloured box with round corners
    &.rounded {
      padding: 1em;
      margin: 20px auto;
      border-radius: 15px;

      // center all the things
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;

      @media (min-width: @screen-sm-min) {
        max-width: 70%;
      }
    }

    // Specifics for fullwidth coloured box
    &.fullwidth {
      margin-top: 30px;
      margin-bottom: 30px;
    }

    // Pre-defined colours for background box
    &[data-color=android-lime] {
      background-color: #A4C639;
    }
    &[data-color=android-blue] {
      background-color: #1c68a6;
    }
    &[data-color=dark-green] {
      background-color: #6BB340;
    }
  }
}