296 lines
5.1 KiB
Stylus
296 lines
5.1 KiB
Stylus
// Tâmia © 2013 Artem Sapegin http://sapegin.me
|
||
// Grids and layouts
|
||
|
||
//
|
||
// Configuration
|
||
//
|
||
|
||
// Grid gutter size, in pixels (default: 2×spacer).
|
||
grid_gutter ?= 2*spacer
|
||
|
||
// Number of columns in grid (default: 12).
|
||
grid_columns ?= 12
|
||
|
||
|
||
//
|
||
// Grid
|
||
//
|
||
|
||
/// Inspired by http://zengrids.com
|
||
|
||
// Columns wrapper.
|
||
grid-row()
|
||
clearfix()
|
||
grid-wrapper()
|
||
|
||
// Column (grid).
|
||
//
|
||
// position - Start column number (default: 1).
|
||
// span - Width, in culumns (default: 1).
|
||
// context - Width of parent column (default: null).
|
||
//
|
||
// Example:
|
||
//
|
||
// .row>.col1+.col2
|
||
//
|
||
// .row
|
||
// grid-row()
|
||
// .col1
|
||
// grid-col(1,2)
|
||
// .col2
|
||
// grid-col(3,10)
|
||
grid-col(position=1, span=1, context=null)
|
||
_grid-column(position, span, context)
|
||
_grid-float()
|
||
grid-padding()
|
||
|
||
// Single column.
|
||
//
|
||
// position - Start column number (default: 1).
|
||
// span - Width, in culumns (default: 1).
|
||
// context - Width of parent column (default: null).
|
||
grid-one(position=1, span=1, context=null)
|
||
_grid-column(position, span, context)
|
||
grid-padding()
|
||
|
||
// Single column (without padding, wrapper for child columns).
|
||
//
|
||
// position - Start column number (default: 1).
|
||
// span - Width, in culumns (default: 1).
|
||
// context - Width of parent column (default: null).
|
||
grid-one-container(position=1, span=1, context=null)
|
||
clearfix()
|
||
_grid-column(position, span, context)
|
||
|
||
// Gutter size negative margin to make column with different background.
|
||
// You should adjust padding depending on content.
|
||
grid-explode()
|
||
margin: (-(grid_gutter))
|
||
|
||
// Width of column, in percent.
|
||
//
|
||
// position - Start column number (default: 1).
|
||
// span - Width, in culumns (default: 1).
|
||
//
|
||
// Returns percent.
|
||
grid-width(span=1, context=null)
|
||
context = grid_columns if not context
|
||
unit-width = 100% / context
|
||
span * unit-width
|
||
|
||
// Column left/right padding.
|
||
//
|
||
// full - Padding on all sides if true, left/right otherwise (default: false).
|
||
grid-padding(full=false)
|
||
side-gutter = grid_gutter / 2;
|
||
if full
|
||
padding: side-gutter
|
||
else
|
||
padding-left: side-gutter
|
||
padding-right: side-gutter
|
||
|
||
// Column wrapper left/right negative margin.
|
||
grid-wrapper()
|
||
side-gutter = (-(grid_gutter / 2))
|
||
margin-left: side-gutter
|
||
margin-right: side-gutter
|
||
|
||
_grid-column(position=1, span=1, context=null)
|
||
context = grid_columns if not context
|
||
unit-width = 100% / context
|
||
width: span * unit-width
|
||
margin-left: (position - 1) * unit-width
|
||
|
||
_grid-float()
|
||
float: left
|
||
margin-right: -100%
|
||
|
||
|
||
//
|
||
// Layouts
|
||
//
|
||
|
||
// Layout wrapper.
|
||
layout-row()
|
||
grid-wrapper()
|
||
display: flex
|
||
flex-flow: row wrap
|
||
// flex-direction: row
|
||
/// IE8-9
|
||
.no-flexbox &
|
||
letter-spacing: -0.31em
|
||
|
||
// Column (simple layout).
|
||
//
|
||
// part - 1/Nth part of wrapper.
|
||
//
|
||
// Example:
|
||
//
|
||
// .row>.col+.col
|
||
//
|
||
// .row
|
||
// layout-row()
|
||
// .col
|
||
// layout-nth(2) // Half
|
||
layout-nth(part)
|
||
_layout-col()
|
||
_layout-part(part)
|
||
|
||
// Change number of columns.
|
||
//
|
||
// Use it to change number of columns (defined via layout-nth()) inside media queries.
|
||
//
|
||
// part - 1/Nth part of wrapper.
|
||
layout-change(part)
|
||
_layout-part(part)
|
||
|
||
// Disable columns.
|
||
//
|
||
// Alias for layout-change(1).
|
||
layout-stop()
|
||
_layout-part(1)
|
||
|
||
|
||
// Center element with specified width and hegith.
|
||
center(width, height=null)
|
||
size(width, height)
|
||
left: 50%
|
||
top: 50%
|
||
margin-left: (-(@width / 2))
|
||
margin-top: (-(@height / 2))
|
||
|
||
_layout-col()
|
||
grid-padding()
|
||
// IE8-9
|
||
.no-flexbox &
|
||
display: inline-block
|
||
vertical-align: top
|
||
letter-spacing: normal
|
||
|
||
_layout-part(part)
|
||
width: (100% / part)
|
||
|
||
|
||
//
|
||
// Classes
|
||
//
|
||
|
||
// Column wrapper.
|
||
.l-row
|
||
layout-row()
|
||
|
||
.l-sixth,
|
||
.l-quarter,
|
||
.l-third,
|
||
.l-half,
|
||
.l-three-quarters,
|
||
.l-two-thirds
|
||
_layout-col()
|
||
|
||
// Sixth (to use inside .l-row).
|
||
.l-sixth
|
||
_layout-part(6)
|
||
|
||
// Quarter (to use inside .l-row).
|
||
.l-quarter
|
||
_layout-part(4)
|
||
|
||
// Three quarters (to use inside .l-row).
|
||
.l-three-quarters
|
||
_layout-part(4/3)
|
||
|
||
// Third (to use inside .l-row).
|
||
.l-third
|
||
_layout-part(3)
|
||
|
||
// Two thirds (to use inside .l-row).
|
||
.l-two-thirds
|
||
_layout-part(3/2)
|
||
|
||
// Half (to use inside .l-row).
|
||
.l-half
|
||
_layout-part(2)
|
||
|
||
// Flexible columns with left (.l-left) and right (.l-right) text alignment (to use inside .l-row).
|
||
.l-left,
|
||
.l-right
|
||
flex: 1
|
||
.l-right
|
||
text-align: right
|
||
.no-flexbox
|
||
.l-left
|
||
float: left
|
||
.l-right
|
||
float: right
|
||
|
||
// Centered content (vertically and horizontally).
|
||
//
|
||
// Example:
|
||
//
|
||
// .l-center>.l-center-i>span
|
||
.l-center
|
||
display: table
|
||
width: 100%
|
||
height: 100%
|
||
&-i
|
||
display: table-cell
|
||
text-align: center
|
||
vertical-align: middle
|
||
|
||
|
||
//
|
||
// Spacing
|
||
//
|
||
|
||
// Space after block.
|
||
//
|
||
// rows - Number of “rows” (one row = default spacer).
|
||
space(rows=1)
|
||
margin-bottom: rows*spacer
|
||
|
||
// Standard bottom margin.
|
||
.l-space
|
||
space()
|
||
|
||
// Double bottom margin.
|
||
.l-double-space
|
||
space(2)
|
||
|
||
// Triple bottom margin.
|
||
.l-triple-space
|
||
space(3)
|
||
|
||
// Quadruple bottom margin.
|
||
.l-quad-space
|
||
space(4)
|
||
|
||
|
||
///
|
||
/// Debug stuff
|
||
///
|
||
|
||
if DEBUG
|
||
.g-debug-col
|
||
grid-padding()
|
||
float: left
|
||
width: grid-width()
|
||
|
||
.g-debug-helper
|
||
position: absolute
|
||
left: 0
|
||
right: 0
|
||
height: 100%
|
||
min-height: 3000px
|
||
z-index: 10000
|
||
overflow: hidden
|
||
pointer-events: none
|
||
*
|
||
height: 100%
|
||
[data-component="grid"]
|
||
grid-wrapper()
|
||
.g-debug-col:before
|
||
content: ""
|
||
display: block
|
||
height: inherit
|
||
background: hsla(220,40%,50%,.25)
|