App.less

/*
 * Copyright (c) 2021 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
*/

//==  Background color for `<body>`.
@body-bg: #f9f9f9;

//== Colors
@brand-primary: #f7941e; // Orange
@brand-secondary: #404040; // Gray
@brand-tertiary: #3f7b96; // Blue
@brand-quaternary: #efefef; // Light Gray
@brand-quinary: @brand-quaternary; // Light Gray (Breadcrumbs)

@brand-info: @brand-tertiary;
@brand-info-light: lighten(@brand-info, 20%);
@brand-warning: @brand-primary;

//== Links
//** Global textual link color.
@link-color: @brand-tertiary;
//** Link hover color set via `darken()` function.
@link-hover-color: darken(@link-color, 10%);
//** Link hover decoration.
@link-hover-decoration: underline;
//** Link visited color
@link-visited-color: #af6e3d;

//== Static colors
// Only use when really necessary
@orange: #f7941e;
@purple: #2c2255;
@blue: rgb(0, 0, 255);
@blue-dark: #2c2255;
@blue-light: #afbbdc;
@blue-lighter: #dfe2ed;
@green-dark: #5a6700;
@green-light: #c0d050;
@green-lighter: #faffd4;
@gray-mid-light: #ccc;
@gray: #2f2f2f;
@white: #fff;
@black: #000000;
@red: #ff0000;

@eclipse-light-grey: #e8e8e8;
@eclipse-highlight-grey: #ececec;

//== Everything related to sizes
@border-radius: 5px;

html {
  font-size: 14px;
}

.dropdown-menu {
  li:last-child {
    cursor: pointer;
    span {
      color: #4c4d4e;
      padding: 3px 20px;
    }
  }
}

.toolbar-no-login {
  a {
    margin-left: 13px;
  }
}

.eclipsefdn-membership-webform {
  .input-group .form-control {
    z-index: unset;
  }
  .error {
    color: @red;
  }

  .orange-star {
    color: @brand-primary;
    font-weight: bold;
    font-size: larger;
  }

  .display-center {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .loadingIcon {
    margin-top: 5rem;
    margin-bottom: 3rem;
  }

  .form-control {
    border-radius: @border-radius;
    box-shadow: none;
    height: 36px;
  }

  label {
    font-weight: unset;
  }

  .form-border-error {
    border-color: @red;
  }

  .btn {
    margin: 10px;
    border-radius: @border-radius;
  }

  .button-container {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  label#effective-date-label {
    display: none;
  }

  select.form-control {
    width: 50%;
  }

  .align-center {
    max-width: 80%;
    margin-left: auto;
    margin-right: auto;
  }

  input[type='checkbox'] {
    display: inline-block;
    width: 30px;
    height: 30px;
    border: 1px solid hsl(0, 0%, 80%);
    border-radius: @border-radius;
    margin-top: 0;
    margin-right: 15px;
  }

  input[type='checkbox']:checked {
    background-color: @brand-primary;
  }

  .verical-center {
    display: flex;
    align-items: center;
  }
  input[type='checkbox']:focus {
    outline: none !important;
  }

  /* Stepper */
  .stepper {
    display: flex;
    flex-wrap: wrap;
    margin-top: 0;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 50px;
  }

  .step {
    & {
      width: calc(100% / 3);
      display: flex;
      flex-direction: column;
      justify-content: center;
      position: relative;
      padding-top: 30px;
      cursor: pointer;
    }
    a {
      text-decoration: none;
      color: inherit;
    }
    a:visited {
      color: inherit;
    }
  }

  .btn {
    a {
      text-decoration: none;
      color: inherit;
    }
    a:visited {
      color: inherit;
    }
  }

  .step-span {
    width: 50px;
    height: 50px;
    background: @brand-primary;
  }

  .step-span-index {
    font-size: xx-large;
    font-weight: 600;
    padding-left: 15px;
  }

  .step-title {
    padding: 10px;
    font-weight: 600;
  }

  .step-title-container {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    min-height: 60px;
    min-width: 100px;
    background-color: #e2e2e2;
    position: relative;
    top: 15px;
    left: 15px;
  }

  .step-title-container-active:extend(.eclipsefdn-membership-webform .step-title-container) {
    // &:extend(.step-title-container);
    background: @brand-secondary 50% no-repeat;
    color: @white;
  }

  .button-container {
    a {
      text-decoration: none;
    }
    button {
      width: 80px;
      margin: 0 14px;
    }
  }

  .msg-popup {
    & {
      z-index: 1000;
      position: fixed;
      top: -70px;
      left: calc(50vw - 200px);
      width: 400px;
      height: 60px;
      background-color: white;
      border-radius: @border-radius;
      display: flex;
      justify-content: center;
      align-items: center;
      box-shadow: 1px 1px 14px rgba(0, 0, 0, 0.15);
      transition: all 0.35s ease-in;
    }
    svg {
      margin: 0 0.5rem;
    }
    span {
      margin: 0 0.5rem;
    }
  }

  .msg-popup-show {
    top: 25px;
    transition: all 0.35s ease-out;
  }

  // Mobile First
  @media (min-width: 992px) {
    .step {
      width: calc(100% / 6);
      padding-top: 10px;
    }
  }
}

.scrollup {
  cursor: pointer;
}

// ********** Portal ********** //