Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Sign in / Register
Toggle navigation
K
kpp
Project
Project
Details
Activity
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Board
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
Alexandr Veselov
kpp
Commits
f4ccd948
Commit
f4ccd948
authored
Mar 18, 2017
by
Nikolay Gromov
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
Добавид возможность указать мод. сетку отступы контейнера
parent
5f824c90
Changes
1
Hide whitespace changes
Inline
Side-by-side
Showing
1 changed file
with
45 additions
and
9 deletions
+45
-9
grid-mixins.scss
src/scss/mixins/grid-mixins.scss
+45
-9
No files found.
src/scss/mixins/grid-mixins.scss
View file @
f4ccd948
...
@@ -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
(
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment