/*
 * 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>
 *   Zhou Fang <zhou.fang@eclipse-foundation.org>
 * 
 * SPDX-License-Identifier: EPL-2.0
*/

// Classes styles: lists
// css classes for HTML lists.

// Example: eclipse.org/membership/become_a_member
.circles-list {
  list-style-type: none;
  counter-reset: li-counter;
  > li {
    position: relative;
    padding-left: 0.5em;
    min-height: 3em;
    margin-bottom: 10px;
    &:before {
      position: absolute;
      top: 0;
      left: -2em;
      width: 1.8em;
      height: 1.8em;
      font-size: 1.2em;
      padding: 6px 4px;
      line-height: 1.2;
      text-align: center;
      font-weight: bold;
      color: #f5f5f5;
      border-radius: 50%;
      background-color: #b1b9de;
      content: counter(li-counter);
      counter-increment: li-counter;
    }
  }
}

ul.circles-list {
  > li {
    &:before {
      font-family: FontAwesome;
      content: "";
    }
  }
}

// A list using div's'... why?
// @todo: We should change this, we should be
// able to do this with an ol instead of divs.
//
// Example: membership/become_a_member
.container-list {
  counter-reset: list;
  padding-left: 55px;
  > .list-row {
     margin-top: 12px;
     position: relative;
    min-height: 3em;
    &:before {
      position: absolute;
      top: 0;
      left: -2em;
      width: 1.8em;
      height: 1.8em;
      font-size: 1.2em;
      padding: 6px 4px;
      line-height: 1.2;
      text-align: center;
      font-weight: bold;
      color: #f5f5f5;
      border-radius: 50%;
      background-color: #b1b9de;
      content: counter(list);
      counter-increment: list;
      display:block;
    }
    > div:first-child {
      padding-left: .5em;
    }
    .no-wrap {
      white-space:nowrap;
    }
  }
}

/* List checkmark*/
.list-checkmark{
    > li{
        padding-right:40px;
        padding-left:0;
    }
    a{
        &:link,
        &:visited {
            font-weight:bold;
            color:#969696;
        }
        &:hover{
            color:@brand-warning;
        }
    }
}

.list-padding{
  li{
    padding-bottom:25px;
  }
}

.list-border-right li{
  border-right:1px solid;
  &:last-child{
    border:none;
  }
}

ul.list-no-bullets {
    list-style-type: none;
}


// fa-lists
.fa-ul-2x{
  margin-left:3.14286em;
  li{
    padding-bottom:28px;
  }
}

.fa-li{
  top:0.23em;
}

