Commit f4ccd948 authored by Nikolay Gromov's avatar Nikolay Gromov

Добавид возможность указать мод. сетку отступы контейнера

parent 5f824c90
...@@ -20,32 +20,67 @@ $grid-gutter-width: 30px !default; ...@@ -20,32 +20,67 @@ $grid-gutter-width: 30px !default;
// Генератор правил для контейнера // Генератор правил для контейнера
//------------------------------------------------------------------------------ //------------------------------------------------------------------------------
@mixin container { @mixin container (
$xs-grid-gutter: $grid-gutter-width,
$sm-grid-gutter: $grid-gutter-width,
$md-grid-gutter: $grid-gutter-width,
$lg-grid-gutter: $grid-gutter-width,
$xl-grid-gutter: $grid-gutter-width,
$xxl-grid-gutter: $grid-gutter-width
) {
display: block; display: block;
width: 100%; width: 100%;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
padding-left: ($grid-gutter-width / 2);
padding-right: ($grid-gutter-width / 2); @if ($xs-grid-gutter != 0) {
padding-left: ($xs-grid-gutter / 2);
padding-right: ($xs-grid-gutter / 2);
}
@media (min-width: $screen-sm) { @media (min-width: $screen-sm) {
width: $container-sm; width: $container-sm;
@if ($sm-grid-gutter != $xs-grid-gutter) {
padding-left: ($sm-grid-gutter / 2);
padding-right: ($sm-grid-gutter / 2);
}
} }
@media (min-width: $screen-md) { @media (min-width: $screen-md) {
width: $container-md; width: $container-md;
@if ($md-grid-gutter != $sm-grid-gutter) {
padding-left: ($md-grid-gutter / 2);
padding-right: ($md-grid-gutter / 2);
}
} }
@media (min-width: $screen-lg) { @media (min-width: $screen-lg) {
width: $container-lg; width: $container-lg;
@if ($lg-grid-gutter != $md-grid-gutter) {
padding-left: ($lg-grid-gutter / 2);
padding-right: ($lg-grid-gutter / 2);
}
} }
@media (min-width: $screen-xl) { @media (min-width: $screen-xl) {
width: $container-xl; width: $container-xl;
@if ($xl-grid-gutter != $lg-grid-gutter) {
padding-left: ($xl-grid-gutter / 2);
padding-right: ($xl-grid-gutter / 2);
}
} }
@media (min-width: $screen-xxl) { @media (min-width: $screen-xxl) {
width: $container-xxl; width: $container-xxl;
@if ($xxl-grid-gutter != $xl-grid-gutter) {
padding-left: ($xxl-grid-gutter / 2);
padding-right: ($xxl-grid-gutter / 2);
}
} }
} }
...@@ -146,6 +181,8 @@ $grid-gutter-width: 30px !default; ...@@ -146,6 +181,8 @@ $grid-gutter-width: 30px !default;
// Принимает: По умолчанию: Пояснение: // Принимает: По умолчанию: Пояснение:
// $column: 1 ширина (кол-во колонок в этой ячейке) // $column: 1 ширина (кол-во колонок в этой ячейке)
// $columns: $grid-columns; количество ячеек в ряду // $columns: $grid-columns; количество ячеек в ряду
//
// Возвращает width.
//------------------------------------------------------------------------------ //------------------------------------------------------------------------------
@mixin get-width ($column: 1, $columns: $grid-columns) { @mixin get-width ($column: 1, $columns: $grid-columns) {
...@@ -163,7 +200,7 @@ $grid-gutter-width: 30px !default; ...@@ -163,7 +200,7 @@ $grid-gutter-width: 30px !default;
// Принимает: По умолчанию: Пояснение: // Принимает: По умолчанию: Пояснение:
// $column: 1 ширина (кол-во колонок для этой ячейки) // $column: 1 ширина (кол-во колонок для этой ячейки)
// $columns: $grid-columns; общее количество ячеек на 1 ряд // $columns: $grid-columns; общее количество ячеек на 1 ряд
// $gutter: $grid-gutter-width промежуток между ячейками или false // $gutter: $grid-gutter-width промежуток между ячейками
//------------------------------------------------------------------------------ //------------------------------------------------------------------------------
@mixin make-col ( @mixin make-col (
...@@ -174,7 +211,7 @@ $grid-gutter-width: 30px !default; ...@@ -174,7 +211,7 @@ $grid-gutter-width: 30px !default;
@include get-width($column, $columns); @include get-width($column, $columns);
// ВНИМАНИЕ! // ВНИМАНИЕ!
// если $gutter == false, правила padding-left и padding-right отсутствуют // если $gutter == false, в CSS не попадут правила padding-left и padding-right
@if ($gutter != false) { @if ($gutter != false) {
padding-left: ($gutter / 2); padding-left: ($gutter / 2);
padding-right: ($gutter / 2); padding-right: ($gutter / 2);
...@@ -189,7 +226,7 @@ $grid-gutter-width: 30px !default; ...@@ -189,7 +226,7 @@ $grid-gutter-width: 30px !default;
// Принимает: По умолчанию: Пояснение: // Принимает: По умолчанию: Пояснение:
// $screen: xs тип сетки [xs|sm|md|lg|xl|xxl] // $screen: xs тип сетки [xs|sm|md|lg|xl|xxl]
// $column: $grid-columns ширина (кол-во колонок для этой ячейки) // $column: $grid-columns ширина (кол-во колонок для этой ячейки)
// $columns: $grid-columns; общее количество колонок // $columns: $grid-columns; общее количество ячеек на 1 ряд
// $gutter: $grid-gutter-width промежуток между ячейками // $gutter: $grid-gutter-width промежуток между ячейками
//------------------------------------------------------------------------------ //------------------------------------------------------------------------------
...@@ -243,13 +280,12 @@ $grid-gutter-width: 30px !default; ...@@ -243,13 +280,12 @@ $grid-gutter-width: 30px !default;
//------------------------------------------------------------------------------ //------------------------------------------------------------------------------
// Генератор правил для отступа одной ячейки с возможностью указать @media, // Генератор правил для отступа одной ячейки с возможностью указать @media
// начиная с ширины которого правила ширины ячейки будут срабатывать
//------------------------------------------------------------------------------ //------------------------------------------------------------------------------
// Принимает: По умолчанию: Пояснение: // Принимает: По умолчанию: Пояснение:
// $screen: xs тип сетки [xs|sm|md|lg|xl|xxl] // $screen: xs тип сетки [xs|sm|md|lg|xl|xxl]
// $column: 1 ширина отступа (кол-во колонок) // $column: 1 ширина отступа (кол-во колонок)
// $columns: $grid-columns; общее количество колонок // $columns: $grid-columns; общее количество ячеек на 1 ряд
//------------------------------------------------------------------------------ //------------------------------------------------------------------------------
@mixin col-offset ( @mixin col-offset (
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment