src/less/donate.less

/*
 * Copyright (c) 2022 Eclipse Foundation, Inc.
 *
 * This program and the accompanying materials are made available under the
 * terms of the Eclipse Public License v. 2.0 which is available at
 * http://www.eclipse.org/legal/epl-2.0.
 *
 * Contributors:
 *   Christopher Guindon <chris.guindon@eclipse-foundation.org>
 *
 * SPDX-License-Identifier: EPL-2.0
*/

//@import '~eclipsefdn-solstice-assets/less/_components/eclipse_org/donate/credit.less';

/*
 * Copyright (c) 2018 Eclipse Foundation, Inc.
 *
 * This program and the accompanying materials are made available under the
 * terms of the Eclipse Public License v. 2.0 which is available at
 * http://www.eclipse.org/legal/epl-2.0.
 *
 * Contributors:
 *   Christopher Guindon <chris.guindon@eclipse-foundation.org>
 *
 * SPDX-License-Identifier: EPL-2.0
*/

@import '~rangeslider.js/dist/rangeslider.css';

// Styles for eclipse.org/donate/credit.php
.container-credit {
  .jumbotron {
    background-image: url(images/header.jpg);
    background-size: cover;
    padding: 50px 0 20px;
    margin-bottom: 0;
    .container {
      min-height: 200px;
    }
    h1,
    p {
      color: #fff;
    }
    h1 {
      font-size: 39px;
    }
    p {
      font-size: 21px;
      a {
        color: #f7941e;
      }
    }
  }
  .accomplished,
  .thankyou,
  .friends {
    margin-bottom: 40px;
    .section-title {
      background-color: #3e3e3f;
      margin-bottom: 40px;
      h2 {
        color: #fff;
        padding: 40px 0;
        margin: 0;
        &:before {
          content: ' ';
          display: table;
          position: absolute;
          bottom: -10px;
          left: 15px;
          width: 0;
          height: 0;
          border-left: 10px solid transparent;
          border-right: 10px solid transparent;
          border-top: 10px solid #3e3e3f;
        }
      }
    }
    img {
      margin: 0 20px 20px 0;
    }
  }
  .accomplished {
    p {
      font-size: 21px;
      position: relative;
      top: 6px;
      color: #2c2255;
    }
  }
  .thankyou,
  .friends {
    header {
      h2 {
        sup {
          font-size: 20px;
        }
      }
    }
    p {
      margin: 10px 0px 0px;
    }
  }
  .friends {
    .col-sm-12 {
      border-right: 1px solid #dedede;
      &:last-child {
        border: none;
      }
    }
  }
}

// Donation Slider
.donate-container {
  @media (max-width: 768px) {
    max-width: 355px;
    margin: 0 auto;
  }

  .form-inline .input-group > .form-control {
    @media (min-width: 768px) {
      width: 120px;
    }
  }

  .donate-container-content {
    background-repeat: no-repeat;
    background-position: bottom center;
    background-size: 100%;
    position: relative;
    margin-bottom: 30px;
    padding-bottom:30px;

  }

  .donate-container-content-intro{
    h1 {
      font-size: 24px;
      @media (min-width: 768px) {
        font-size: 36px;
      }
    }
    display:flex;
    align-items:center;
    padding-bottom:20px;
    text-align: center;
    @media (min-width: 768px) {
      text-align: left;
    }
    .donate-container-content-intro-img{
      padding:0 30px;
    }
  }

  @media (max-width: 768px) {
    .btn-donate {
      margin-top: 20px;
    }
  }
  .donate-bar {
    position: absolute;
    bottom: 0;
  }
  .list-donate-amount {
    font-size: 18px;
    display: flex;
    position: relative;
    @media (min-width: 768px) {
      font-size: 24px;
    }
    color: #9d9fa1;
    li {
      padding: 0;
      width: 20%;
    }
    li.one {
      margin-left: 20px;
    }
    li.two {
      margin-left: 10px;
    }
    li.four {
      margin-right: 20px;
    }
    @media (min-width: 768px) {
      li.two {
        margin-left: 50px;
      }
      li.four {
        margin-right: 60px;
      }
    }
  }
  .grey-link {
    font-weight: normal;
    text-decoration: underline;
    color: #9d9fa1;
    &:hover {
      text-decoration: none;
    }
  }
  .rangeslider {
    position: absolute;
    bottom: -7px;
  }

  .rangeslider__handle,
  .rangeslider__handle:after,
  .rangeslider__handle:active {
    background-image: url('images/donate-icon.png');
    background-repeat: no-repeat;
    width: 50px;
    height: 51px;
    border: none;
  }

  .rangeslider--horizontal .rangeslider__handle {
    top: -12px;
  }

  .rangeslider__fill {
    background: #ccc;
  }
}

// Donation Modal
#donationModal{
  .donate-modal {
    .modal-content {
      background-image: url(images/donate_modal_bg.jpg);
      background-position: bottom center;
      background-repeat: no-repeat;
      border-radius: 0;
      h4 {
        font-size: 1.2em;
      }
    }
    .modal-footer {
      border-top: none;
    }
    .modal-header {
      border-bottom: none;
      padding-bottom: 0;
    }
    .recognition-text {
      color: #999;
      font-size: 0.9em;
    }
    .donate-modal-footer {
      text-align: center;
      padding-top: 0;
    }
  }
}

// Thank you
.container-thankyou {
  .thankyou {
    padding-bottom: 20px;
    .thankyou-title {
      color: #3F3B60;
      font-size: 35px;
      padding-top: 0px;
      font-style: normal;
      span {
        font-weight: bold;
      }
    }
    .direct-link .download-link-msg {
      padding-top: 10px;
      color: #7C7A8F;
      font-size: 15px;
      a {
        color: #3F3B60;
      }
    }
  }
}