mirror of
https://github.com/home-assistant/home-assistant.io.git
synced 2025-05-14 15:08:59 +00:00
90 lines
1.8 KiB
SCSS
90 lines
1.8 KiB
SCSS
@if $use-matrix == true{
|
|
|
|
/*------------------------------------*\
|
|
$MATRIX
|
|
\*------------------------------------*/
|
|
/**
|
|
* Create a grid of items out of a single list, e.g.:
|
|
*
|
|
<ul class="matrix three-cols">
|
|
<li class=all-cols>Lorem</li>
|
|
<li>Ipsum <a href=#>dolor</a></li>
|
|
<li><a href=# class=matrix__link>Sit</a></li>
|
|
<li>Amet</li>
|
|
<li class=all-cols>Consectetuer</li>
|
|
</ul>
|
|
*
|
|
* Extend this object in your theme stylesheet.
|
|
*
|
|
* Demo: jsfiddle.net/inuitcss/Y2zrU
|
|
*
|
|
*/
|
|
.matrix{
|
|
@extend .block-list;
|
|
border-left-width:1px;
|
|
@extend .cf;
|
|
|
|
> li{
|
|
float:left;
|
|
border-right-width:1px;
|
|
@if $global-border-box == false{
|
|
@include vendor(box-sizing, border-box);
|
|
}
|
|
}
|
|
}
|
|
.matrix__link{
|
|
@extend .block-list__link;
|
|
}
|
|
|
|
|
|
/**
|
|
* The `.multi-list` object is a lot like the `.matrix` object only without the
|
|
* blocky borders and padding.
|
|
*
|
|
<ul class="multi-list four-cols">
|
|
<li>Lorem</li>
|
|
<li>Ipsum</li>
|
|
<li>Dolor</li>
|
|
<li>Sit</li>
|
|
</ul>
|
|
*
|
|
* Demo: jsfiddle.net/inuitcss/Y2zrU
|
|
*
|
|
*/
|
|
.multi-list{
|
|
list-style:none;
|
|
margin-left:0;
|
|
@extend .cf;
|
|
}
|
|
.multi-list > li{
|
|
float:left;
|
|
}
|
|
|
|
|
|
/**
|
|
* Apply these classes alongside the `.matrix` or `.multi-list` classes on
|
|
* lists to determine how wide their columns are.
|
|
*/
|
|
.two-cols > li{
|
|
width:50%;
|
|
}
|
|
.three-cols > li{
|
|
width:33.333%;
|
|
}
|
|
.four-cols > li{
|
|
width:25%;
|
|
}
|
|
.five-cols > li{
|
|
width:20%;
|
|
}
|
|
/**
|
|
* Unfortunately we have to qualify this selector in order to bring its
|
|
* specificity above the `.[number]-cols > li` selectors above.
|
|
*/
|
|
.matrix > .all-cols,
|
|
.multi-list > .all-cols{
|
|
width:100%;
|
|
}
|
|
|
|
}//endif
|