Skip to content

K
kpp
Commit cf238eac authored by Nikolay Gromov's avatar Nikolay Gromov
Browse files
Options

Начал портировать примеси

parent eaffab2d
Hide whitespace changes
Inline Side-by-side
Showing with 385 additions and 1 deletion
package.json
View file @ cf238eac
...@@ -19,7 +19,8 @@ ...@@ -19,7 +19,8 @@
"is-mobile": [] "is-mobile": []
}, },
"addCssBefore": [ "addCssBefore": [
"./src/scss/variables.scss" "./src/scss/variables.scss",
"./src/scss/mixins.scss"
], ],
"addCssAfter": [ "addCssAfter": [
"./src/scss/print.scss" "./src/scss/print.scss"
......
src/scss/mixins.scss 0 → 100644
View file @ cf238eac
@import "./src/scss/mixins/form-mixins.scss";
@import "./src/scss/mixins/grid-mixins.scss";
src/scss/mixins/form-mixins.scss 0 → 100644
View file @ cf238eac
@mixin field-help-text {
$text-color--muted: hsl(0, 0%, 50%) !default;
$font-size--small: 0.75em !default;
display: block;
padding-top: 0.4em;
font-size: $font-size--small;
line-height: 1.2em;
color: $text-color--muted;
&:empty {
display: none;
}
}
@mixin field-focus {
$color-main: hsl(208, 98%, 43%) !default;
$opacity: 0.7 !default;
outline: 0;
box-shadow: 0 0 0 2px rgba($color-main, $opacity);
}
src/scss/mixins/grid-mixins.scss 0 → 100644
View file @ cf238eac
$screen-xs: 0 !default;
$screen-sm: 480px !default;
$screen-md: 768px !default;
$screen-lg: 992px !default;
$screen-xl: 1200px !default;
$screen-xxl: 1800px !default;
$container-sm: 100% !default;
$container-md: 100% !default;
$container-lg: ($screen-lg - 30) !default;
$container-xl: ($screen-xl - 30) !default;
$container-xxl: ($screen-xxl - 30) !default;
$grid-columns: 12 !default;
$grid-gutter-width: 30px !default;
//------------------------------------------------------------------------------
// Генератор правил для контейнера
//------------------------------------------------------------------------------
@mixin container {
display: block;
width: 100%;
margin-left: auto;
margin-right: auto;
padding-left: ($grid-gutter-width / 2);
padding-right: ($grid-gutter-width / 2);
@media (min-width: $screen-sm) {
width: $container-sm;
}
@media (min-width: $screen-md) {
width: $container-md;
}
@media (min-width: $screen-lg) {
width: $container-lg;
}
@media (min-width: $screen-xl) {
width: $container-xl;
}
@media (min-width: $screen-xxl) {
width: $container-xxl;
}
}
//------------------------------------------------------------------------------
// Генератор правил для прямого родителя модульной сетки
//------------------------------------------------------------------------------
// Принимает: По умолчанию: Пояснение:
// $xs-grid-gutter: $grid-gutter-width промежуток между ячейками XS-сетки
// $sm-grid-gutter: $grid-gutter-width промежуток между ячейками SM-сетки
// $md-grid-gutter: $grid-gutter-width промежуток между ячейками MD-сетки
// $lg-grid-gutter: $grid-gutter-width промежуток между ячейками LG-сетки
// $xl-grid-gutter: $grid-gutter-width промежуток между ячейками XL-сетки
// $xxl-grid-gutter: $grid-gutter-width промежуток между ячейками XXL-сетки
//------------------------------------------------------------------------------
// Пример вызова:
// .some-class {
// @include row (
// $xs-grid-gutter: $grid-gutter-width, // отступ по умолчанию
// $sm-grid-gutter: 0, // нет отступа
// $md-grid-gutter: $grid-gutter-width // отступ по умолчанию
// );
// }
//
// Идентичный вызов:
// .some-class {
// @include row ( $grid-gutter-width, 0, $grid-gutter-width );
// }
//------------------------------------------------------------------------------
@mixin row (
$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: flex;
flex-wrap: wrap;
// Если первая переданная переменная не ноль — выводим margin-ы по умолчанию
@if ($xs-grid-gutter != 0) {
margin-left: ($xs-grid-gutter / -2);
margin-right: ($xs-grid-gutter / -2);
}
@if ($sm-grid-gutter != $xs-grid-gutter) {
@media (min-width: $screen-sm) {
margin-left: ($sm-grid-gutter / -2);
margin-right: ($sm-grid-gutter / -2);
}
}
@if ($md-grid-gutter != $sm-grid-gutter) {
@media (min-width: $screen-md) {
margin-left: ($md-grid-gutter / -2);
margin-right: ($md-grid-gutter / -2);
}
}
@if ($lg-grid-gutter != $md-grid-gutter) {
@media (min-width: $screen-lg) {
margin-left: ($lg-grid-gutter / -2);
margin-right: ($lg-grid-gutter / -2);
}
}
@if ($xl-grid-gutter != $lg-grid-gutter) {
@media (min-width: $screen-xl) {
margin-left: ($xl-grid-gutter / -2);
margin-right: ($xl-grid-gutter / -2);
}
}
@if ($xxl-grid-gutter != $xl-grid-gutter) {
@media (min-width: $screen-xxl) {
margin-left: ($xxl-grid-gutter / -2);
margin-right: ($xxl-grid-gutter / -2);
}
}
}
// //------------------------------------------------------------------------------
// // Генератор ширины ячейки
// //------------------------------------------------------------------------------
// // Принимает:
// // @column: 1 - ширина (кол-во колонок в этой ячейке)
// // @columns: @grid-columns; - количество ячеек в ряду
// //
// // Возвращает переменную @width в контекст вызова.
// //------------------------------------------------------------------------------
// .get-width(@column: 1, @columns: @grid-columns) {
// @width: (100% / @columns) * @column;
// }
// //------------------------------------------------------------------------------
// // Генератор правил для одной ячейки
// //------------------------------------------------------------------------------
// // Принимает:
// // @column: 1 - ширина (кол-во колонок для этой ячейки)
// // @columns: @grid-columns; - общее количество ячеек на 1 ряд
// // @gutter: @grid-gutter-width - промежуток между ячейками (для padding-left и padding-right)
// //------------------------------------------------------------------------------
// .make-col(@column: 1, @columns: @grid-columns, @gutter: @grid-gutter-width) {
// .get-width(@column, @columns); // Вернёт @width с шириной в процентах
// display: block;
// flex: 0 0 @width;
// max-width: @width;
// // ВНИМАНИЕ! если @gutter = false, в CSS не попадут правила padding-left и padding-right
// & when not (@gutter = false) {
// padding-left: (@gutter / 2);
// padding-right: (@gutter / 2);
// }
// }
// //------------------------------------------------------------------------------
// // Генератор правил для одной ячейки с возможностью указать @media
// //------------------------------------------------------------------------------
// // Принимает:
// // @screen: xs - тип сетки [xs|sm|md|lg|xl|xxl]
// // @column: 1 - ширина (кол-во колонок для этой ячейки)
// // @columns: @grid-columns; - общее количество ячеек на 1 ряд
// // @gutter: @grid-gutter-width - промежуток между ячейками (для padding-left и padding-right)
// //------------------------------------------------------------------------------
// // Примеры: http://codepen.io/nicothin/pen/obRMgx?editors=1100
// //------------------------------------------------------------------------------
// .col(@screen: xs, @column: 1, @columns: @grid-columns, @gutter: @grid-gutter-width) {
// & when (@screen = xs) {
// .make-col(@column, @columns, @gutter);
// }
// & when (@screen = sm) {
// @media (min-width: @screen-sm) {
// .make-col(@column, @columns, @gutter);
// }
// }
// & when (@screen = md) {
// @media (min-width: @screen-md) {
// .make-col(@column, @columns, @gutter);
// }
// }
// & when (@screen = lg) {
// @media (min-width: @screen-lg) {
// .make-col(@column, @columns, @gutter);
// }
// }
// & when (@screen = xl) {
// @media (min-width: @screen-xl) {
// .make-col(@column, @columns, @gutter);
// }
// }
// & when (@screen = xxl) {
// @media (min-width: @screen-xxl) {
// .make-col(@column, @columns, @gutter);
// }
// }
// }
// //------------------------------------------------------------------------------
// // Генератор правил для отступа одной ячейки с возможностью указать @media
// //------------------------------------------------------------------------------
// // Принимает:
// // @screen: xs - тип сетки [xs|sm|md|lg|xl|xxl]
// // @column: 1 - ширина отступа (кол-во колонок)
// // @columns: @grid-columns; - общее количество ячеек на 1 ряд
// //------------------------------------------------------------------------------
// .col-offset(@screen: xs, @column: 1, @columns: @grid-columns) {
// & when (@screen = xs) {
// margin-left: (@column * 100% / @columns);
// }
// & when (@screen = sm) {
// @media (min-width: @screen-sm) {
// margin-left: (@column * 100% / @columns);
// }
// }
// & when (@screen = md) {
// @media (min-width: @screen-md) {
// margin-left: (@column * 100% / @columns);
// }
// }
// & when (@screen = lg) {
// @media (min-width: @screen-lg) {
// margin-left: (@column * 100% / @columns);
// }
// }
// & when (@screen = xl) {
// @media (min-width: @screen-xl) {
// margin-left: (@column * 100% / @columns);
// }
// }
// & when (@screen = xxl) {
// @media (min-width: @screen-xxl) {
// margin-left: (@column * 100% / @columns);
// }
// }
// }
// //------------------------------------------------------------------------------
// // Генератор списка селекторов .col-[указанный тип]-[] и их общих свойств
// //------------------------------------------------------------------------------
// // Принимает:
// // @screen: xs - тип сетки [xs|sm|md|lg|xl|xxl]
// //------------------------------------------------------------------------------
// .make-column-list-general-rules(@screen: xs) {
// .column-list(@index) {
// @item: ~'.col-@{screen}-@{index}';
// .column-list((@index + 1), @item);
// }
// .column-list(@index, @list) when (@index =< @grid-columns) {
// @item: ~'.col-@{screen}-@{index}';
// .column-list((@index + 1), ~'@{list}, @{item}');
// }
// .column-list(@index, @list) when (@index > @grid-columns) {
// @{list} {
// display: block;
// flex: 0 0 100%;
// width: 100%;
// padding-left: (@grid-gutter-width / 2);
// padding-right: (@grid-gutter-width / 2);
// }
// }
// .column-list(1);
// }
// //------------------------------------------------------------------------------
// // Генератор селекторов .col-[указанный тип]-[] и их индивидуальных свойств (ширин)
// //------------------------------------------------------------------------------
// // Принимает:
// // @n: - количество колонок
// // @screen: - тип сетки [xs|sm|md|lg|xl|xxl]
// //------------------------------------------------------------------------------
// .make-columns(@n: @grid-columns, @screen: xs, @i: 1) when (@i =< @n) {
// .col-@{screen}-@{i} {
// .make-col(@i, @n, false)
// }
// .make-columns(@n, @screen, (@i + 1));
// }
// //------------------------------------------------------------------------------
// // Генератор селекторов .col-[]-offset-[] и их индивидуальных свойств (margin-left)
// //------------------------------------------------------------------------------
// // Принимает:
// // @n: - количество колонок
// // @screen: - тип сетки [xs|sm|md|lg|xl|xxl]
// //------------------------------------------------------------------------------
// .make-offsets(@n: @grid-columns, @screen: xs, @i: 1) when (@i =< @n) {
// .col-@{screen}-offset-@{i} {
// margin-left: (@i * 100% / @n);
// }
// .make-offsets(@n, @screen, (@i + 1));
// }
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