PHP Classes

File: engine/modules/contrib/foundation/source/scss/grid/_layout.scss

Recommend this page to a friend!
  Classes of Aldo Tripiciano   Quanta CMS   engine/modules/contrib/foundation/source/scss/grid/_layout.scss   Download  
File: engine/modules/contrib/foundation/source/scss/grid/_layout.scss
Role: Auxiliary data
Content type: text/plain
Description: Auxiliary data
Class: Quanta CMS
Manage content that works without a database
Author: By
Last change:
Date: 5 years ago
Size: 2,004 bytes
 

Contents

Class file image Download
// Foundation for Sites by ZURB // foundation.zurb.com // Licensed under MIT Open Source //// /// @group grid //// /// Sizes child elements so that `$n` number of items appear on each row. /// /// @param {Number} $n - Number of elements to display per row. /// @param {String} $selector ['.column'] - Selector(s) to use for child elements. /// @param {Number|List} $gutter /// The gutter to apply to child elements. Accepts multiple values: /// - $grid-column-gutter will use the values in the $grid-column-gutter map, including breakpoint sizes. /// - A fixed numeric value will apply this gutter to all breakpoints. @mixin grid-layout( $n, $selector: '.column', $gutter: null ) { & > #{$selector} { float: $global-left; width: percentage(1/$n); // If a $gutter value is passed @if($gutter) { // Gutters @if type-of($gutter) == 'map' { @each $breakpoint, $value in $gutter { $padding: rem-calc($value) / 2; @include breakpoint($breakpoint) { padding-right: $padding; padding-left: $padding; } } } @else if type-of($gutter) == 'number' and strip-unit($gutter) > 0 { $padding: rem-calc($gutter) / 2; padding-right: $padding; padding-left: $padding; } } &:nth-of-type(1n) { clear: none; } &:nth-of-type(#{$n}n+1) { clear: both; } &:last-child { float: $global-left; } } } /// Adds extra CSS to block grid children so the last items in the row center automatically. Apply this to the columns, not the row. /// /// @param {Number} $n - Number of items that appear in each row. @mixin grid-layout-center-last($n) { @for $i from 1 to $n { @if $i == 1 { &:nth-child(#{$n}n+1):last-child { margin-left: (100 - 100/$n * $i) / 2 * 1%; } } @else { &:nth-child(#{$n}n+1):nth-last-child(#{$i}) { margin-left: (100 - 100/$n * $i) / 2 * 1%; } } } }