barecss-power/less/_table.less

A classless CSS framework (power) http://barecss.com

@import (reference) "config";


// config
@table-marginb: 1.1em;
@th-back:  @def-back;
@th-hback: darken(@def-back, 10%);
@th-text:  @def-text;
@tr-borderc: darken(@def-back, 15%);
@tr-borderb: 0.2em;
@tr-hback:  darken(@def-back, 10%);
@tr-pad: 0.8em;
@td-borderb: 0.1em;


table {
  width: 100%;
  margin-bottom: @table-marginb;
  border-collapse: collapse;
  border-spacing: 0;
  text-align: left;
  overflow: hidden;
  
  th, td {
    border-bottom: @tr-borderb solid @tr-borderc;
    padding: @tr-pad;
  }
  
	th {
		color: @th-text;
		// background: @th-back;
		
		&::before {
			content: "";
			width: 100%;
			height: 10000%;
			position: absolute;
			display: block;
			top: 0;
			left: 0;
			background: @th-hback;
			z-index: -1;
			opacity: 0;
			visibility: hidden;
		}
		
		&:hover::before {
			opacity: 1;
			visibility: visible;
		}
	}
  
  td { border-bottom-width: @td-borderb; }

  tbody > tr:hover { background: @tr-hback; }
}