/** 
 *------------------------------------------------------------------------------
 * @package       T3 Framework for Joomla!
 *------------------------------------------------------------------------------
 * @copyright     Copyright (C) 2004-2013 JoomlArt.com. All Rights Reserved.
 * @license       GNU General Public License version 2 or later; see LICENSE.txt
 * @authors       JoomlArt, JoomlaBamboo, (contribute to this project at github 
 *                & Google group to become co-author)
 * @Google group: https://groups.google.com/forum/#!forum/t3fw
 * @Link:         http://t3-framework.org 
 *------------------------------------------------------------------------------
 */


// Prevent Bootstrap Upgrading errors
@import "../bootstrap/less/variables.less";

// Bootstrap mixins
@import "../bootstrap/less/mixins.less";

// T3 Base variables
@import "variables.less";

// T3 Base mixins
@import "mixins.less";


/** 
* Grid system
* --------------------------------------------------*/

//mixins
.legacy-make-grid-columns() {
  // Common styles for all sizes of grid columns, widths 1-12
  .legacy-span(@index) when (@index = 1) { // initial
    @item: ~".span@{index}";
    .legacy-span(@index + 1, @item);
  }
  .legacy-span(@index, @list) when (@index =< @grid-columns) { // general; "=<" isn't a typo
    @item: ~".span@{index}";
    .legacy-span(@index + 1, ~"@{list}, @{item}");
  }
  .legacy-span(@index, @list) when (@index > @grid-columns) { // terminal
    @{list} {
      position: relative;
      // Prevent columns from collapsing when empty
      min-height: 1px;
      // Inner gutter via padding
      padding-left:  (@grid-gutter-width / 2);
      padding-right: (@grid-gutter-width / 2);
    }
  }
  .legacy-span(1); // kickstart it
}

.legacy-calc-grid(@index, @type) when (@type = width) and (@index > 0) {
  .span@{index} {
    width: percentage((@index / @grid-columns));
  }
}

.legacy-calc-grid(@index, @type) when (@type = offset) {
  .offset@{index} {
    margin-left: percentage((@index / @grid-columns));
  }
}

// Basic looping in LESS
.legacy-make-grid(@index, @type) when (@index >= 0) {
  .legacy-calc-grid(@index, @type);
  // next iteration
  .legacy-make-grid(@index - 1, @type);
}

// Style
//----------------------------------------------------------------------
.row-flex {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
}

//same as row
.row-fluid {
	.make-row();
}

// float left all span block
[class*="span"]{
	float:left;
}

// apply grid to span
.legacy-make-grid-columns();
.legacy-make-grid(@grid-columns, width);
.legacy-make-grid(@grid-columns, offset);


// responsive utility
// For desktops
.visible-phone     { display: none !important; }
.visible-tablet    { display: none !important; }
.hidden-phone      { }
.hidden-tablet     { }
.hidden-desktop    { display: none !important; }
.visible-desktop   { display: inherit !important; }

// Tablets & small desktops only
@media (min-width: 768px) and (max-width: 979px) {
  // Hide everything else
  .hidden-desktop    { display: inherit !important; }
  .visible-desktop   { display: none !important ; }
  // Show
  .visible-tablet    { display: inherit !important; }
  // Hide
  .hidden-tablet     { display: none !important; }
}

// Phones only
@media (max-width: 767px) {
  // Hide everything else
  .hidden-desktop    { display: inherit !important; }
  .visible-desktop   { display: none !important; }
  // Show
  .visible-phone     { display: inherit !important; } // Use inherit to restore previous behavior
  // Hide
  .hidden-phone      { display: none !important; }
}


// Specific Joomla! Widths
//----------------------------------------------------------------------

// Specific Joomla! Widths
.width-10 { width: 10px; }
.width-20 { width: 20px; }
.width-30 { width: 30px; }
.width-40 { width: 40px; }
.width-50 { width: 50px; }
.width-60 { width: 60px; }
.width-70 { width: 70px; }
.width-80 { width: 80px; }
.width-90 { width: 90px; }
.width-100 { width: 100px; }

// Specific Joomla! Heights
.height-10 { height: 10px; }
.height-20 { height: 20px; }
.height-30 { height: 30px; }
.height-40 { height: 40px; }
.height-50 { height: 50px; }
.height-60 { height: 60px; }
.height-70 { height: 70px; }
.height-80 { height: 80px; }
.height-90 { height: 90px; }
.height-100 { height: 100px; }