/*
 * 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
*/

// Classes styles:shapes and Margins
// css shape classes for custom elements.


/* Shapes */
.circle {
  border-radius: 50%;
  background: #fff;
  color: #262626;
  border: none;
  text-align: center;
  font-size: 28px;
  padding-top: 13px;
  height: 110px;
  position: relative;
  width: 110px;
  display: block;
  h3 {
    font-size: 10px;
    position: absolute;
    text-align: center;
    top: 3.3em;
    width: 69%;
  }
}

.circle-dark {
  background: #0b0a0f;
  color: #fff;
  border: 8px solid rgb(73, 71, 86);
  border: 8px solid rgba(73, 71, 86, .8);
  .opacity (0.8);
  &:hover {
    .opacity (0.9);
    border: 8px solid rgb(190, 200, 226);
    border: 8px solid rgba(190, 200, 226, .8);
    background: #494371;
    color: #fff;
  }
}

.circle-gray {
  color: #262626;
  background: #ccc;
}

.circle-icon {
  background: #eee;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  text-align: center;
  vertical-align: middle;
}

.triangle {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 34px 300px 0 300px;
  -moz-transform: scale(.9999);
  border-color: @eclipse-highlight-grey transparent transparent transparent;
  &.triangle-black {
    border-color: #252525 transparent transparent transparent;
  }

  &.triangle-white {
    border-color: #f9f9f9 rgba(249, 249, 249, 0) rgba(249, 249, 249, 0) transparent;
  }
}

// Example: eclipse.org/artwork
.box {
  padding: 15px 10px;
  margin-bottom: 10px;
  margin-top: 1.5em;
}

.blue_box {
  background-color: #114e68;
  h3, p {
    color: #fff;
  }
}

