/*
 * 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: Grid
// css classes for grid layout.

// Box-sizing resets
//
// Reset individual elements or override regions to avoid conflicts due to
// global box model settings of Bootstrap. Two options, individual overrides and
// region resets, are available as plain CSS and uncompiled Less formats.
.reset-box-sizing {
  & , * , *:before , *:after {
    .box-sizing (content-box);
  }
}

// Vertical alignment
.vcenter {
  display: inline-block;
  vertical-align: middle;
  float: none;
}

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

// Float
.float-right {
  float: right;
}

.float-left {
  float: left;
}

.float-sm-right {
  @media (min-width: @screen-sm-min) {
    .float-right;
  }
}
// Visibility
.visible-thin {
  .hidden;
}


// Five Column Bootstrap Implementation
.col-xs-5-eclipse ,
.col-sm-5-eclipse ,
.col-md-5-eclipse ,
.col-lg-5-eclipse {
  position: relative;
  min-height: 1px;
  padding-right: 10px;
  padding-left: 10px;
}

.col-xs-5-eclipse {
  width: 20%;
  float: left;
}

@media (min-width: 768px) {
  .col-sm-5-eclipse {
    width: 20%;
    float: left;
  }
}

@media (min-width: 992px) {
  .col-md-5-eclipse {
    width: 20%;
    float: left;
  }
}

@media (min-width: 1200px) {
  .col-lg-5-eclipse {
    width: 20%;
    float: left;
  }
}

.centered-container {
    width: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%);
    min-height: 100px;
}

@media (min-width: @screen-sm-min) {
  .justify-left-desktop {
    justify-content: left;
  }
}

@media (max-width: @screen-xs-max) {
  .justify-left-mobile {
    justify-content: left;
  }
}

// Responsive Text Alignment
@media (min-width: @screen-sm-min) {
  .text-sm-left {
    text-align: left;
  }

  .text-sm-center {
    text-align: center;
  }
}

@media (min-width: @screen-md-min) {
  .text-md-left {
    text-align: left;
  }

  .text-md-center {
    text-align: center;
  }
}

@media (min-width: @screen-lg-min) {
  .text-lg-left {
    text-align: left;    
  }

  .text-lg-center {
    text-align: center;    
  }
}
