Commit 8983611c authored by Nikolay Gromov's avatar Nikolay Gromov

Рефакторинг переменных и библиотеки

parent 802dcfdb
......@@ -356,7 +356,7 @@ function serve() {
));
// Стилевые глобальные файлы: все события
watch([`${dir.src}scss/**/*.scss`, `!${dir.src}scss/style.scss`, `!${dir.src}scss/blocks-lib.scss`], { events: ['all'], delay: 100 }, series(
watch([`${dir.src}scss/**/*.scss`, `!${dir.src}scss/style.scss`], { events: ['all'], delay: 100 }, series(
compileSass,
));
......
......@@ -2,28 +2,14 @@
// модификаторов, псевдоселекторов, псевдоэлементов, @media-условий...
// Очередность: http://nicothin.github.io/idiomatic-pre-CSS/#priority
$gray-lighter: hsl(0, 0%, 80%) !default;
$color-success: hsl(120, 39%, 54%) !default;
$color-danger: hsl(2, 64%, 58%) !default;
$color-warning: hsl(35, 84%, 62%) !default;
$text-color: hsl(0, 0%, 10%) !default;
$font-size--h3: rem(24px) !default;
$border-radius: rem(3px) !default;
.alert {
$block-name: &; // #{$block-name}__element
position: relative;
padding: 0.7em 1.5em 0.7em 1.4em;
margin-top: 1em;
margin-bottom: 1em;
border: 1px solid $gray-lighter;
border-radius: $border-radius;
color: $text-color;
background-color: #fff;
background-color: $gray-lightest;
& > * {
margin-top: 0;
......@@ -31,7 +17,7 @@ $border-radius: rem(3px) !default;
}
& > * + * {
margin-top: 1rem;
margin-top: 1em;
}
&__header {
......@@ -57,15 +43,13 @@ $border-radius: rem(3px) !default;
&--warning {
background-color: lighten($color-warning, 30%);
border: 1px solid lighten($color-warning, 20%);
color: $text-color;
}
// &--warning {
// background-color: lighten($color-warning, 30%);
// color: $text-color;
// }
// &--danger {
// background-color: $color-danger;
// border: 1px solid darken($color-danger, 10%);
// color: #fff;
// a {
......@@ -81,7 +65,6 @@ $border-radius: rem(3px) !default;
// &--success {
// background-color: $color-success;
// border: 1px solid darken($color-success, 10%);
// color: #fff;
// a {
......
Кастомный скролл c [baron](https://www.npmjs.com/package/baron) (зависимость берётся в сборку по умолчанию). [Демо кастомного скролла](http://diokuz.github.io/baron/)..
Кастомный скролл c [baron](https://www.npmjs.com/package/baron). [Демо кастомного скролла](http://diokuz.github.io/baron/).
Для каждого блока нужно включать baron в `blocks/baron/baron.js`.
......
require('../main-nav/main-nav.js');
require('../burger/burger.js');
require('../field-file/field-file.js');
require('../scroll-link/scroll-link.js');
require('../to-top/to-top.js');
require('../off-canvas/off-canvas.js');
......
......@@ -18,13 +18,11 @@
@import "../field-select/field-select.scss";
@import "../field-text/field-text.scss";
@import "../field-toggler/field-toggler.scss";
@import "../fields-group/fields-group.scss";
@import "../form/form.scss";
@import "../label/label.scss";
@import "../loader/loader.scss";
@import "../logo/logo.scss";
@import "../main-nav/main-nav.scss";
@import "../menu/menu.scss";
@import "../modal/modal.scss";
@import "../object-fit-polyfill/object-fit-polyfill.scss";
@import "../off-canvas/off-canvas.scss";
......@@ -34,15 +32,11 @@
@import "../page-header/page-header.scss";
@import "../pagination/pagination.scss";
@import "../progress/progress.scss";
@import "../scroll-link/scroll-link.scss";
@import "../sprite-png/sprite-png.scss";
@import "../sprite-svg/sprite-svg.scss";
@import "../table/table.scss";
@import "../table-responsive/table-responsive.scss";
@import "../tabs/tabs.scss";
@import "../thumb/thumb.scss";
@import "../to-top/to-top.scss";
@import "../tooltip/tooltip.scss";
@import "../../scss/print.scss";
......
......@@ -36,7 +36,7 @@ mixin breadcrumbs-item(text, href, mods)
if(typeof(mods) !== 'undefined' && mods) {
var modsList = mods.split(',');
for (var i = 0; i < modsList.length; i++) {
allMods = allMods + ' breadcrumbs--' + modsList[i].trim();
allMods = allMods + ' breadcrumbs__item--' + modsList[i].trim();
}
}
......
......@@ -2,17 +2,11 @@
// модификаторов, псевдоселекторов, псевдоэлементов, @media-условий...
// Очередность: http://nicothin.github.io/idiomatic-pre-CSS/#priority
$text-color: hsl(0, 0%, 10%) !default;
.breadcrumbs {
$block-name: &;
// #{$block-name}__element
padding: 0;
list-style: none;
margin-top: 1rem;
margin-bottom: 1rem;
margin-top: 1em;
margin-bottom: 1em;
color: $text-color;
a {
......@@ -34,7 +28,7 @@ $text-color: hsl(0, 0%, 10%) !default;
&:not(:last-child):after {
content: '>';
display: inline-block;
margin-left: 0.8rem;
margin-left: 0.8em;
color: $gray;
}
}
......
......@@ -2,26 +2,16 @@
// модификаторов, псевдоселекторов, псевдоэлементов, @media-условий...
// Очередность: http://nicothin.github.io/idiomatic-pre-CSS/#priority
$gray-lighter: hsl(0, 0%, 80%) !default;
$gray-lightest: hsl(0, 0%, 90%) !default;
$text-color: hsl(0, 0%, 10%) !default;
$line-height: 1.5 !default;
$field-padding-vertical: 0.3em !default;
$field-padding-horizontal: 0.7em !default;
$border-radius: rem(3px) !default;
.btn {
$block-name: &; // #{$block-name}__element
box-sizing: border-box;
display: inline-block;
max-width: 100%;
vertical-align: middle;
margin: 0;
padding: $field-padding-vertical $field-padding-horizontal;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
user-select: none;
text-align: center;
font-size: 1em;
......@@ -44,9 +34,9 @@ $border-radius: rem(3px) !default;
border-color: darken($gray-lighter, 12%);
}
&:visited {
color: $text-color;
}
// &:visited {
// color: $text-color;
// }
&:active,
&:focus {
......
......@@ -2,15 +2,7 @@
// модификаторов, псевдоселекторов, псевдоэлементов, @media-условий...
// Очередность: http://nicothin.github.io/idiomatic-pre-CSS/#priority
$toggler-part-height: 3px !default;
$toggler-part-bg-color: #000 !default;
$transition-time: 0.3s !default;
.burger {
$block-name: &; // #{$block-name}__element
position: relative;
z-index: 1;
display: inline-block;
......
......@@ -19,5 +19,5 @@ mixin close(label, mods)
}
}
button.close(class=allMods, aria-label=label)&attributes(attributes)
button.close(class=allMods, aria-label=label, title=label)&attributes(attributes)
span= label
......@@ -2,13 +2,7 @@
// модификаторов, псевдоселекторов, псевдоэлементов, @media-условий...
// Очередность: http://nicothin.github.io/idiomatic-pre-CSS/#priority
$toggler-part-height: 3px !default;
$toggler-part-bg-color: #000 !default;
.close {
$block-name: &; // #{$block-name}__element
position: relative;
z-index: 1;
display: inline-block;
......@@ -55,8 +49,8 @@ $toggler-part-bg-color: #000 !default;
$toggler-part-height: 1px;
width: 20px;
line-height: 20px;
width: 30px;
line-height: 30px;
> span {
width: 60%;
......
......@@ -2,15 +2,7 @@
// модификаторов, псевдоселекторов, псевдоэлементов, @media-условий...
// Очередность: http://nicothin.github.io/idiomatic-pre-CSS/#priority
$gray-lighter: hsl(0, 0%, 80%) !default;
$gray-lightest: hsl(0, 0%, 90%) !default;
$border-radius: rem(3px) !default;
.code {
$block-name: &; // #{$block-name}__element
display: block;
width: 100%;
max-height: rem(500px);
......
......@@ -2,19 +2,14 @@
// модификаторов, псевдоселекторов, псевдоэлементов, @media-условий...
// Очередность: http://nicothin.github.io/idiomatic-pre-CSS/#priority
$screen-md: 768px !default;
.comment {
$block-name: &; // #{$block-name}__element
margin-top: 1rem;
margin-bottom: 1rem;
margin-top: 1em;
margin-bottom: 1em;
@media (min-width: $screen-md) {
& & {
padding-left: calc(60px + 1rem);
padding-left: calc(60px + 1em);
}
& & & & {
......@@ -28,7 +23,7 @@ $screen-md: 768px !default;
&__avatar-wrap {
flex-shrink: 0;
margin-right: 1rem;
margin-right: 1em;
img {
display: block;
......@@ -48,5 +43,12 @@ $screen-md: 768px !default;
&__header {}
&__body {
& > *:last-child {
margin-bottom: 0;
}
}
&__footer {}
}
......@@ -2,19 +2,10 @@
// модификаторов, псевдоселекторов, псевдоэлементов, @media-условий...
// Очередность: http://nicothin.github.io/idiomatic-pre-CSS/#priority
$text-color--muted: hsl(0, 0%, 50%) !default;
$font-size--small: 80% !default;
$line-height: 1.5 !default;
.field-actions {
$block-name: &; // #{$block-name}__element
display: block;
margin-top: 1rem;
margin-bottom: 1rem;
margin-top: 1em;
margin-bottom: 1em;
&__text {
display: block;
......
......@@ -2,16 +2,12 @@
// модификаторов, псевдоселекторов, псевдоэлементов, @media-условий...
// Очередность: http://nicothin.github.io/idiomatic-pre-CSS/#priority
$line-height: 1.5 !default;
$border-radius: rem(3px) !default;
.field-checkbox {
$block-name: &; // #{$block-name}__element
display: block;
margin-bottom: 1rem;
margin-bottom: 1em;
&__title {
display: block;
......@@ -23,7 +19,15 @@ $border-radius: rem(3px) !default;
&__input-wrap {
& + & {
margin-top: 1rem;
margin-top: 1em;
}
&--error {
#{$block-name}__name-text,
#{$block-name}__help-text {
color: $color-danger;
}
}
}
......
// В этом файле должны быть стили для БЭМ-блока field-checkbox, его элементов,
// модификаторов, псевдоселекторов, псевдоэлементов, @media-условий...
// Очередность: http://nicothin.github.io/idiomatic-pre-CSS/#priority
$color-danger: hsl(2, 64%, 58%) !default;
.field-checkbox {
$block-name: &; // #{$block-name}__element
&__input-wrap--error {
#{$block-name}__name-text,
#{$block-name}__help-text {
color: $color-danger;
}
}
}
// В этом файле должны быть стили для БЭМ-блока field-file, его элементов,
// модификаторов, псевдоселекторов, псевдоэлементов, @media-условий...
// Очередность: http://nicothin.github.io/idiomatic-pre-CSS/#priority
$color-danger: hsl(2, 64%, 58%) !default;
.field-file {
$block-name: &; // #{$block-name}__element
&--error {
#{$block-name}__name,
#{$block-name}__name-text,
#{$block-name}__input,
#{$block-name}__help-text {
color: $color-danger;
}
#{$block-name}__name-text {
border-color: $color-danger;
background-color: lighten($color-danger, 35%);
}
}
}
......@@ -2,22 +2,12 @@
// модификаторов, псевдоселекторов, псевдоэлементов, @media-условий...
// Очередность: http://nicothin.github.io/idiomatic-pre-CSS/#priority
$gray-lightest: hsl(0, 0%, 90%);
$border-color: hsl(0, 0%, 60%) !default;
$line-height: 1.5 !default;
$field-padding-vertical: 0.3em !default;
$field-padding-horizontal: 0.7em !default;
$border-radius: rem(3px) !default;
.field-file {
$block-name: &; // #{$block-name}__element
display: block;
margin-bottom: 1rem;
margin-bottom: 1em;
&__name {
@include field-name;
......@@ -77,4 +67,21 @@ $border-radius: rem(3px) !default;
&__help-text {
@include field-help-text;
}
&--error {
#{$block-name}__name,
#{$block-name}__name-text,
#{$block-name}__input,
#{$block-name}__help-text {
color: $color-danger;
}
#{$block-name}__name-text {
border-color: $color-danger;
background-color: lighten($color-danger, 35%);
}
}
}
......@@ -2,14 +2,12 @@
// модификаторов, псевдоселекторов, псевдоэлементов, @media-условий...
// Очередность: http://nicothin.github.io/idiomatic-pre-CSS/#priority
$line-height: 1.5 !default;
.field-radio {
$block-name: &; // #{$block-name}__element
display: block;
margin-bottom: 1rem;
margin-bottom: 1em;
&__title {
display: block;
......@@ -21,7 +19,15 @@ $line-height: 1.5 !default;
&__input-wrap {
& + & {
margin-top: 1rem;
margin-top: 1em;
}
&--error {
#{$block-name}__name-text,
#{$block-name}__help-text {
color: $color-danger;
}
}
}
......
// В этом файле должны быть стили для БЭМ-блока field-radio, его элементов,
// модификаторов, псевдоселекторов, псевдоэлементов, @media-условий...
// Очередность: http://nicothin.github.io/idiomatic-pre-CSS/#priority
$color-danger: hsl(2, 64%, 58%) !default;
.field-radio {
$block-name: &; // #{$block-name}__element
&__input-wrap--error {
#{$block-name}__name-text,
#{$block-name}__help-text {
color: $color-danger;
}
}
}
// В этом файле должны быть стили для БЭМ-блока field-select, его элементов,
// модификаторов, псевдоселекторов, псевдоэлементов, @media-условий...
// Очередность: http://nicothin.github.io/idiomatic-pre-CSS/#priority
$color-danger: hsl(2, 64%, 58%) !default;
.field-select {
$block-name: &; // #{$block-name}__element
&--error {
#{$block-name}__name,
#{$block-name}__select,
#{$block-name}__help-text {
color: $color-danger;
}
#{$block-name}__select {
border-color: $color-danger;
background-color: lighten($color-danger, 35%);
}
}
}
......@@ -2,19 +2,12 @@
// модификаторов, псевдоселекторов, псевдоэлементов, @media-условий...
// Очередность: http://nicothin.github.io/idiomatic-pre-CSS/#priority
$gray-lightest: hsl(0, 0%, 90%) !default;
$border-color: hsl(0, 0%, 60%) !default;
$line-height: 1.5 !default;
$border-radius: rem(3px) !default;
.field-select {
$block-name: &; // #{$block-name}__element
display: block;
margin-bottom: 1rem;
margin-bottom: 1em;
&__name {
@include field-name;
......@@ -34,10 +27,6 @@ $border-radius: rem(3px) !default;
border-radius: $border-radius;
appearance: none;
background-color: #fff;
background-image: svg-load('../blocks/field-select/bg-img/select-down.svg');
background-repeat: no-repeat;
background-position: right 0.3em center;
background-size: 1.063em 0.688em;
&[multiple] {
background-image: none;
......@@ -63,4 +52,20 @@ $border-radius: rem(3px) !default;
&__help-text {
@include field-help-text;
}
&--error {
#{$block-name}__name,
#{$block-name}__select,
#{$block-name}__help-text {
color: $color-danger;
}
#{$block-name}__select {
border-color: $color-danger;
background-color: lighten($color-danger, 35%);
}
}
}
// В этом файле должны быть стили для БЭМ-блока field-text, его элементов,
// модификаторов, псевдоселекторов, псевдоэлементов, @media-условий...
// Очередность: http://nicothin.github.io/idiomatic-pre-CSS/#priority
$color-danger: hsl(2, 64%, 58%) !default;
.field-text {
$block-name: &; // #{$block-name}__element
&--error {
#{$block-name}__name,
#{$block-name}__input,
#{$block-name}__help-text {
color: $color-danger;
}
#{$block-name}__input {
border-color: $color-danger;
background-color: lighten($color-danger, 35%);
}
}
}
......@@ -2,24 +2,12 @@
// модификаторов, псевдоселекторов, псевдоэлементов, @media-условий...
// Очередность: http://nicothin.github.io/idiomatic-pre-CSS/#priority
$gray-lighter: hsl(0, 0%, 80%) !default;
$border-color: hsl(0, 0%, 60%) !default;
$text-color--muted: hsl(0, 0%, 50%) !default;
$line-height: 1.5 !default;
$field-padding-vertical: 0.3em !default;
$field-padding-horizontal: 0.7em !default;
$border-radius: rem(3px) !default;
.field-text {
$block-name: &; // #{$block-name}__element
display: block;
margin-bottom: 1rem;
margin-bottom: 1em;
&__name {
@include field-name;
......@@ -86,4 +74,20 @@ $border-radius: rem(3px) !default;
&__help-text {
@include field-help-text;
}
&--error {
#{$block-name}__name,
#{$block-name}__input,
#{$block-name}__help-text {
color: $color-danger;
}
#{$block-name}__input {
border-color: $color-danger;
background-color: lighten($color-danger, 35%);
}
}
}
Текстовые поля любого типа. В том числе, с использованием не `input`, а `textarea`. Стилизация ошибочного состояния вынесена в отдельный файл.
Текстовые поля любого типа. В том числе, с использованием не `input`, а `textarea`.
......@@ -2,17 +2,9 @@
// модификаторов, псевдоселекторов, псевдоэлементов, @media-условий...
// Очередность: http://nicothin.github.io/idiomatic-pre-CSS/#priority
$gray-lightest: hsl(0, 0%, 90%);
$border-color: hsl(0, 0%, 60%) !default;
$line-height: 1.5 !default;
.field-toggler {
$block-name: &; // #{$block-name}__element
display: block;
margin-bottom: 1rem;
margin-bottom: 1em;
&__title {
@include field-name;
......@@ -28,8 +20,8 @@ $line-height: 1.5 !default;
&__name {
position: relative;
display: inline-block;
padding-left: 3.2rem;
margin-right: 0.6rem;
padding-left: 3.2em;
margin-right: 0.6em;
font-weight: 400;
line-height: $line-height;
}
......
//- Все примеси в этом файле должны начинаться c имени блока (fields-group)
mixin fields-group(mods)
//- Принимает:
//- mods {string} - список модификаторов
//- Вызов:
+fields-group()
+field-text({
helpText: 'Подсказка',
attrs: {
placeholder: 'Логин'
}
})
+field-text({
attrs: {
type: 'password',
placeholder: 'Пароль'
},
})
+field-actions()
+btn('Отправить', 'primary')
-
// список модификаторов
var allMods = '';
if(typeof(mods) !== 'undefined' && mods) {
var modsList = mods.split(',');
for (var i = 0; i < modsList.length; i++) {
allMods = allMods + ' fields-group--' + modsList[i].trim();
}
}
.fields-group(class=allMods)&attributes(attributes)
block
// В этом файле должны быть стили для БЭМ-блока fields-group, его элементов,
// модификаторов, псевдоселекторов, псевдоэлементов, @media-условий...
// Очередность: http://nicothin.github.io/idiomatic-pre-CSS/#priority
.fields-group {
$block-name: &; // #{$block-name}__element
display: flex;
flex-wrap: wrap;
align-items: flex-start;
margin-bottom: 1rem;
.btn,
select, // обычно, не участвует в группировке
input {
position: relative;
margin: 0;
// &:hover,
&:focus {
position: relative;
z-index: 1; // фокус должен быть красивым
}
}
.field-actions,
// .field-file, // обычно, не участвует в группировке
// .field-select, // обычно, не участвует в группировке
.field-text {
margin: 0;
}
.field-actions {
&:not(:last-child) .btn {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
&:not(:first-child) .btn {
border-left: 0;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.btn {
// &:hover,
&:focus {
z-index: 1; // фокус должен быть красивым
}
}
}
.field-text {
&:not(:last-child) .field-text__input {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
&:not(:first-child) .field-text__input {
border-left: 0;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
}
// .field-file { // обычно, не участвует в группировке
// input {
// position: absolute;
// }
// &:not(:last-child) .field-file__name-text {
// border-top-right-radius: 0;
// border-bottom-right-radius: 0;
// }
// &:not(:first-child) .field-file__name-text {
// border-left: 0;
// border-top-left-radius: 0;
// border-bottom-left-radius: 0;
// &:before {
// border-top-left-radius: 0;
// border-bottom-left-radius: 0;
// }
// }
// }
// .field-select { // обычно, не участвует в группировке
// &:not(:last-child) .field-select__select {
// border-top-right-radius: 0;
// border-bottom-right-radius: 0;
// }
// &:not(:first-child) .field-select__select {
// border-left: 0;
// border-top-left-radius: 0;
// border-bottom-left-radius: 0;
// }
// }
}
......@@ -2,16 +2,8 @@
// модификаторов, псевдоселекторов, псевдоэлементов, @media-условий...
// Очередность: http://nicothin.github.io/idiomatic-pre-CSS/#priority
$font-family--headings: -apple-system, BlinkMacSystemFont, 'Roboto', 'Ubuntu', 'Droid Sans', 'Helvetica Neue', 'Arial', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol' !default;
$font-size--h3: rem(24px) !default;
$line-height: 1.5 !default;
.form {
$block-name: &; // #{$block-name}__element
&__fieldset {
min-width: 0;
padding: 0;
......@@ -19,7 +11,7 @@ $line-height: 1.5 !default;
border: 0;
&:not(:last-child) {
margin-bottom: 1rem;
margin-bottom: 1em;
}
}
......@@ -27,10 +19,10 @@ $line-height: 1.5 !default;
display: block;
width: 100%;
max-width: 100%; // Привет IE
margin-top: 1rem;
margin-bottom: 1rem;
margin-top: 1em;
margin-bottom: 1em;
font-size: $font-size--h3;
font-family: $font-family--headings;
font-family: $font-family;
font-weight: 700;
line-height: $line-height;
white-space: normal; // Привет IE
......
......@@ -2,18 +2,7 @@
// модификаторов, псевдоселекторов, псевдоэлементов, @media-условий...
// Очередность: http://nicothin.github.io/idiomatic-pre-CSS/#priority
$gray-lightest: hsl(0, 0%, 90%) !default;
$color-main: hsl(208, 98%, 43%) !default;
$text-color: hsl(0, 0%, 10%) !default;
$border-radius: rem(3px) !default;
.label {
$block-name: &; // #{$block-name}__element
display: inline-block;
position: relative;
margin: 0 0.1em;
......
......@@ -2,13 +2,7 @@
// модификаторов, псевдоселекторов, псевдоэлементов, @media-условий...
// Очередность: http://nicothin.github.io/idiomatic-pre-CSS/#priority
$gray-lighter: hsl(0, 0%, 80%) !default;
$gray-lightest: hsl(0, 0%, 90%) !default;
.loader {
$block-name: &; // #{$block-name}__element
display: inline-block;
&:before {
......
......@@ -2,21 +2,6 @@
// модификаторов, псевдоселекторов, псевдоэлементов, @media-условий...
// Очередность: http://nicothin.github.io/idiomatic-pre-CSS/#priority
$gray-lightest: hsl(0, 0%, 90%) !default;
$screen-xs: 0 !default;
$screen-sm: 480px !default;
$screen-md: 768px !default;
$screen-lg: 992px !default;
$screen-xl: 1200px !default;
$screen-xxl: 1800px !default;
$menu-desktop-width: $screen-lg !default;
$toggler-part-height: 3px !default;
$toggler-part-bg-color: #000 !default;
$transition-time: 0.3s !default;
.main-nav {
$block-name: &; // #{$block-name}__element
......@@ -86,6 +71,7 @@ $transition-time: 0.3s !default;
}
&--lvl-2 {
min-width: 200px;
@media (max-width: ($menu-desktop-width - 1)) {
padding-left: 1.2em;
......@@ -93,6 +79,7 @@ $transition-time: 0.3s !default;
}
&--lvl-3 {
min-width: 200px;
@media (max-width: ($menu-desktop-width - 1)) {
padding-left: 2.4em;
......
//- Все примеси в этом файле должны начинаться c имени блока (menu)
mixin menu(menu)
//- Принимает:
//- menu {array} - массив с пунктами меню
//- Вызов:
-
var myMenu = [
{
'text':'Пункт1',
'url':'/',
},
{
'text':'Пункт2',
'url':'/',
'mods': 'separator, active',
},
];
+menu(myMenu)
-
if (typeof(menu) === 'undefined') {
menu = [
{
'text':'Меню по умолчанию, прописанное в примеси menu()',
'url':'/',
},
{
'text':'Пункт списка, после которого следует разделитель',
'url':'/',
'mods': 'separator, active',
},
{
'text':'Пункт меню весьма длинный, такой, что прямо адски длинный, очень много, реально много слов. Пункт меню весьма длинный, такой, что прямо адски длинный, очень много, реально много слов.',
},
]
}
ul.menu&attributes(attributes)
each menuItem in menu
-
// список модификаторов
var allMods = '';
if(typeof(menuItem.mods) !== 'undefined') {
var modsList = menuItem.mods.split(',');
for (var i = 0; i < modsList.length; i++) {
allMods = allMods + ' menu__item--' + modsList[i].trim();
}
}
li.menu__item(class=allMods)
if(typeof(menuItem.url) !== 'undefined')
a.menu__link(href=menuItem.url)!= menuItem.text
else
span.menu__link!= menuItem.text
// В этом файле должны быть стили для БЭМ-блока menu, его элементов,
// модификаторов, псевдоселекторов, псевдоэлементов, @media-условий...
// Очередность: http://nicothin.github.io/idiomatic-pre-CSS/#priority
$text-color: hsl(0, 0%, 10%) !default;
$border-color: hsl(0, 0%, 60%) !default;
.menu {
$block-name: &; // #{$block-name}__element
min-width: 10em;
margin: 0;
padding: 0;
list-style: none;
&__item {
&--separator {
&:not(:last-child) {
padding-bottom: 0.3rem;
margin-bottom: 0.3rem;
border-bottom: 1px solid $border-color;
}
}
}
&__link {
display: block;
white-space: nowrap;
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
padding: 0.5rem 1rem;
color: $text-color;
text-decoration: none;
&:hover,
&:focus {
text-decoration: none;
background-color: $gray-lightest;
}
}
}
......@@ -2,20 +2,6 @@
// модификаторов, псевдоселекторов, псевдоэлементов, @media-условий...
// Очередность: http://nicothin.github.io/idiomatic-pre-CSS/#priority
$font-family: -apple-system, BlinkMacSystemFont, 'Roboto', 'Ubuntu', 'Droid Sans', 'Helvetica Neue', 'Arial', sans-serif !default;
$font-family--headings: $font-family !default;
$font-size--h4: rem(18px) !default;
$line-height: 1.5 !default;
$screen-lg: 992px !default;
$opacity: 0.7 !default;
$transition-time: 0.3s !default;
$z-index-modal: 100 !default;
.js-modal-open {
overflow: hidden;
}
......
......@@ -2,7 +2,4 @@
// модификаторов, псевдоселекторов, псевдоэлементов, @media-условий...
// Очередность: http://nicothin.github.io/idiomatic-pre-CSS/#priority
.page-footer {
$block-name: &; // #{$block-name}__element
}
.page-footer {}
......@@ -2,7 +2,4 @@
// модификаторов, псевдоселекторов, псевдоэлементов, @media-условий...
// Очередность: http://nicothin.github.io/idiomatic-pre-CSS/#priority
.page-header {
$block-name: &; // #{$block-name}__element
}
.page-header {}
......@@ -25,17 +25,12 @@
/* stylelint-enable */
.page { // html
$block-name: &; // #{$block-name}__element
.page {
box-sizing: border-box;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-ms-overflow-style: scrollbar;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
min-width: 320px;
min-height: 100%;
font-size: $font-size--root;
&__inner {
min-height: 100vh;
......@@ -65,14 +60,15 @@
body {
display: flex; // Исправляем баг в IE для min-height and flexbox (flex-direction:column)
flex-direction: column; // и прижимаем footer в IE 10-11
background-color: $body-bg;
margin: 0;
min-height: 100%;
word-break: break-word;
font-family: $font-family;
font-size: $font-size;
line-height: $line-height;
text-align: left;
color: $text-color;
background-color: $body-bg;
}
[tabindex='-1']:focus {
......@@ -85,8 +81,8 @@ body {
}
// Мы любим Сафари (на самом деле, нет).
input[type='search'] {
-webkit-appearance: textfield;
[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
// area,
......@@ -181,6 +177,7 @@ a {
hr {
box-sizing: content-box; // Проблема Firefox
height: 0; // Проблема Firefox
overflow: visible; // Проблема Edge и IE
margin-top: 2rem;
margin-bottom: 2rem;
......@@ -188,63 +185,27 @@ hr {
border-top: 1px solid $border-color;
}
// .h1,
// .h2,
// .h3,
// .h4,
// .h5,
// .h6,
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: $font-family--headings;
margin-top: 1em;
margin-bottom: 0.5em;
font-family: $font-family;
font-weight: 700;
line-height: 1.2;
color: currentColor;
}
// .h1,
// .h2,
// .h3,
h1,
h2,
h3 {
margin-top: 3rem;
margin-bottom: 0.5rem;
}
// .h4,
// .h5,
// .h6,
h4,
h5,
h6 {
margin-top: 1rem;
margin-bottom: 0.5rem;
}
// .h1,
h1 { font-size: $font-size--h1; }
// .h2,
h2 { font-size: $font-size--h2; }
// .h3,
h3 { font-size: $font-size--h3; }
// .h4,
h4 { font-size: $font-size--h4; }
// .h5,
h5 { font-size: $font-size--h5; }
// .h6,
h6 { font-size: $font-size--h6; }
// .p,
p,
ul,
ol,
......@@ -255,7 +216,7 @@ pre,
address,
figure {
margin-top: 0;
margin-bottom: 1rem;
margin-bottom: 1em;
}
address {
......@@ -264,15 +225,13 @@ address {
ul,
ol {
padding-left: 1.5rem;
}
padding-left: 1.5em;
ol ol,
ul ul,
ol ul,
ul ol {
ul,
ol {
margin-top: 0;
margin-bottom: 0;
}
}
li {
......@@ -316,9 +275,9 @@ strong {
font-weight: bolder;
}
abbr[title] {
text-decoration: underline dotted;
}
// abbr[title] {
// text-decoration: underline dotted;
// }
blockquote {
padding: 0;
......
Блок страницы `html class="page"`. Содержит стили `.page`, некоторые глобальные стили и типографику:
Стили страницы (тег `html` имеет класс `page`), глобальные стили, типографика.
В стилизацию блока включена стилизация «прибитого подвала».
......@@ -41,11 +41,11 @@ mixin pagination-item(text, href, active, mods)
if(typeof(mods) !== 'undefined' && mods) {
var modsList = mods.split(',');
for (var i = 0; i < modsList.length; i++) {
allMods = allMods + ' pagination--' + modsList[i].trim();
allMods = allMods + ' pagination__item--' + modsList[i].trim();
}
}
if(typeof(active) !== 'undefined' && active) {
allMods = allMods + ' pagination--active';
allMods = allMods + ' pagination__item--active';
}
if(typeof(href) !== 'undefined' && href)
......
......@@ -2,23 +2,16 @@
// модификаторов, псевдоселекторов, псевдоэлементов, @media-условий...
// Очередность: http://nicothin.github.io/idiomatic-pre-CSS/#priority
$text-color: hsl(0, 0%, 10%) !default;
$border-color: hsl(0, 0%, 60%) !default;
.pagination {
$block-name: &; // #{$block-name}__element
display: flex;
flex-wrap: wrap;
margin-top: 1rem;
margin-bottom: 1rem;
margin-top: 1em;
margin-bottom: 1em;
&__item {
display: block;
padding: 0.5rem;
min-width: 2.5rem;
padding: 0.5em;
min-width: 2.5em;
border: 1px solid $border-color;
text-decoration: none;
text-align: center;
......
......@@ -2,19 +2,9 @@
// модификаторов, псевдоселекторов, псевдоэлементов, @media-условий...
// Очередность: http://nicothin.github.io/idiomatic-pre-CSS/#priority
$gray-lightest: hsl(0, 0%, 90%) !default;
$border-color: hsl(0, 0%, 60%) !default;
$border-radius: rem(3px) !default;
$transition-time: 0.3s !default;
.progress {
$block-name: &; // #{$block-name}__element
margin-top: 1rem;
margin-bottom: 1rem;
margin-top: 1em;
margin-bottom: 1em;
border: 1px solid $border-color;
border-radius: $border-radius;
text-align: center;
......
// В этом файле должны быть стили для БЭМ-блока scroll-link, его элементов,
// модификаторов, псевдоселекторов, псевдоэлементов, @media-условий...
// Очередность: http://nicothin.github.io/idiomatic-pre-CSS/#priority
.scroll-link {}
Из файлов `sprite-png/png/` будет сгенерирован файл спрайта `sprite-png/img/sprite-ЧИСЛОВОЙ_ИНДЕКС.svg`, который будет скопирован в папку сборки.
Из файлов `sprite-png/png/` генерируется файл спрайта `sprite-png/img/sprite-ЧИСЛОВОЙ_ИНДЕКС.svg`.
**Стилевой файл блока генерируется автоматически** и содержит примеси для использования спрайтов.
......@@ -6,7 +6,6 @@
<pre class="code">
<code>.selector {</code>
<code> // $temp-icon-left-arrow — $ИМЯ_ФАЙЛА_КАРТИНКИ ($ в начале)</code>
<code> @include sprite($temp-icon-left-arrow);</code>
<code> @include sprite($icon-left); // $icon-left — $ИМЯ-ФАЙЛА-КАРТИНКИ</code>
<code>}</code>
</pre>
Из файлов `sprite-svg/svg/` будет сгенерирован файл спрайта `sprite-svg/img/sprite.svg`, который будет скопирован в папку сборки. Стилевой файл блока не используется. SVG-файлы будут оптимизированы перед сборкой в спрайт. Сам спрайт имеет вид:
<pre class="code">
<code>&lt;svg xmlns="http://www.w3.org/2000/svg"&gt;</code>
<code> &lt;symbol id="icon-boo" viewBox="0 0 30 30"&gt;&lt;path d="..."/&gt;&lt;/symbol&gt;</code>
<code> &lt;symbol id="icon-bs" viewBox="0 0 28 28"&gt;&lt;path d="..."/&gt;&lt;/symbol&gt;</code>
<code> ...</code>
<code>&lt;/svg&gt;</code>
</pre>
Из файлов `sprite-svg/svg/` генерируется файл спрайта `sprite-svg/img/sprite.svg`.
Для вставки на страницу используйте <code>svg &gt; use</code> со ссылками на <code>id</code> символа:
......
// Этот блок не нуждается ни в какой стилизации.
......@@ -2,20 +2,8 @@
// модификаторов, псевдоселекторов, псевдоэлементов, $media-условий...
// Очередность: http://nicothin.github.io/idiomatic-pre-CSS/#priority
$border-color: hsl(0, 0%, 60%) !default;
$screen-xs: 0 !default;
$screen-sm: 480px !default;
$screen-md: 768px !default;
$screen-lg: 992px !default;
$screen-xl: 1200px !default;
$screen-xxl: 1800px !default;
.table-responsive {
$block-name: &; // #{$block-name}__element
margin-bottom: 1rem;
margin-bottom: 1em;
border-collapse: collapse;
border: 1px solid $border-color;
width: 100%;
......@@ -43,17 +31,13 @@ $screen-xxl: 1800px !default;
}
th {
text-align: left;
text-align: inherit;
}
@media (max-width: ($screen-md - 1)) {
display: block;
border: 0;
caption {
display: none;
}
thead {
display: none;
}
......
На малых ширинах таблица сжимается, а когда перестаёт помещаться по ширине, появляется горизонтальный скролл.
......@@ -28,6 +28,5 @@ mixin table(mods)
}
}
.table(class=allMods)&attributes(attributes)
table
table.table(class=allMods)&attributes(attributes)
block
......@@ -2,23 +2,10 @@
// модификаторов, псевдоселекторов, псевдоэлементов, @media-условий...
// Очередность: http://nicothin.github.io/idiomatic-pre-CSS/#priority
$text-color--muted: hsl(0, 0%, 50%) !default;
$border-color: hsl(0, 0%, 60%) !default;
$font-size--small: 80% !default;
$field-padding-vertical: 0.3em !default;
$field-padding-horizontal: 0.7em !default;
.table {
$block-name: &; // #{$block-name}__element
display: block;
width: 100%;
margin-bottom: 1rem;
overflow-x: auto;
margin-bottom: 1em;
border: 1px solid $border-color;
table {
......@@ -40,7 +27,7 @@ $field-padding-horizontal: 0.7em !default;
}
th {
text-align: left;
text-align: inherit;
}
tbody,
......@@ -61,13 +48,13 @@ $field-padding-horizontal: 0.7em !default;
}
}
caption {
caption-side: top;
text-align: left;
padding: 0.4rem $field-padding-horizontal;
border-bottom: 1px solid $border-color;
font-size: $font-size--small;
line-height: 1em;
color: $text-color--muted;
}
// caption {
// caption-side: top;
// text-align: left;
// padding: 0.4rem $field-padding-horizontal;
// border-bottom: 1px solid $border-color;
// font-size: $font-size--small;
// line-height: 1em;
// color: $text-color--muted;
// }
}
......@@ -2,24 +2,12 @@
// модификаторов, псевдоселекторов, псевдоэлементов, @media-условий...
// Очередность: http://nicothin.github.io/idiomatic-pre-CSS/#priority
$gray-lightest: hsl(0, 0%, 90%) !default;
$text-color: hsl(0, 0%, 10%) !default;
$text-color--muted: hsl(0, 0%, 50%) !default;
$border-color: hsl(0, 0%, 60%) !default;
$line-height: 1.5 !default;
$field-padding-vertical: 0.3em !default;
$field-padding-horizontal: 0.7em !default;
.tabs {
$block-name: &; // #{$block-name}__element
margin-top: 1rem;
margin-bottom: 1rem;
margin-top: 1em;
margin-bottom: 1em;
&__links {
margin: 0;
......
//- Все примеси в этом файле должны начинаться c имени блока (thumb)
mixin thumb(url, alt, width, height)
//- Принимает:
//- url* {string} - источник картинки
//- alt {string} - альтернативный текст
//- width {string} - соотв. атрибут тега картинки
//- height {string} - соотв. атрибут тега картинки
//- Вызов:
+thumb('img/joker.jpg', 'Джокер', 300, 200)
+thumb('img/joker.jpg', 'Джокер', 300)
- if (typeof(url) !== 'undefined')
img.thumb(src=url, alt=alt, width=width, height=height)&attributes(attributes)
- else
// Не передан источник изображения
// В этом файле должны быть стили для БЭМ-блока thumb, его элементов,
// модификаторов, псевдоселекторов, псевдоэлементов, @media-условий...
// Очередность: http://nicothin.github.io/idiomatic-pre-CSS/#priority
$gray-light: hsl(0, 0%, 60%) !default;
$link-color: hsl(208, 98%, 43%) !default;
$line-height: 1.375 !default;
$body-bg: #fff !default;
$border-radius: 3px !default;
$transition-time: 0.3s !default;
.thumb {
$block-name: &; // #{$block-name}__element
display: inline-block;
padding: 0.4rem;
line-height: $line-height;
background-color: $body-bg;
border: 1px solid $gray-light;
border-radius: $border-radius;
transition: all $transition-time;
// a:hover & {
// border-color: $link-color;
// }
}
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 330 330"><path d="M165 0C74.02 0 0 74.02 0 165c0 90.982 74.02 165 165 165s165-74.018 165-165C330 74.02 255.98 0 165 0zm0 300c-74.44 0-135-60.56-135-135C30 90.563 90.56 30 165 30s135 60.562 135 135c0 74.44-60.56 135-135 135z"/><path d="M164.998 70c-11.026 0-19.996 8.976-19.996 20.01 0 11.022 8.97 19.99 19.996 19.99 11.026 0 19.996-8.968 19.996-19.99 0-11.034-8.97-20.01-19.996-20.01zm.002 70c-8.284 0-15 6.716-15 15v90c0 8.284 6.716 15 15 15 8.284 0 15-6.716 15-15v-90c0-8.284-6.716-15-15-15z"/></svg>
\ No newline at end of file
document.addEventListener('DOMContentLoaded', function() {
var allTooltips = document.querySelectorAll('.tooltip');
Array.prototype.forEach.call(allTooltips, function (tooltip) {
var tooltipBtn = tooltip.querySelector('.tooltip__btn');
var messageWrap = document.createElement('span');
var message = tooltipBtn.getAttribute('data-tooltip-content');
messageWrap.setAttribute('role', 'status');
tooltip.appendChild(messageWrap);
tooltipBtn.addEventListener('click', function () {
messageWrap.innerHTML = '';
// window.setTimeout(function() {
messageWrap.innerHTML = '<span class="tooltip__bubble">'+ message +'</span>';
// }, 100);
});
document.addEventListener('click', function (e) {
if (tooltipBtn != e.target) {
messageWrap.innerHTML = '';
}
});
tooltipBtn.addEventListener('keydown', function(e) {
if ((e.keyCode || e.which) === 27)
messageWrap.innerHTML = '';
});
});
});
//- Все примеси в этом файле должны начинаться c имени блока (tooltip)
mixin tooltip(text, mods)
//- Принимает:
//- text {string} - текст
//- mods {string} - список модификаторов
//- Вызов:
+tooltip('Текст подсказки')
p Текст и подсказка: #[+tooltip('<em>внутри</em> <small>можно было</small> <i>использовать</i> <b>разметку</b>')]
-
// список модификаторов
var allMods = '';
if(typeof(mods) !== 'undefined' && mods) {
var modsList = mods.split(',');
for (var i = 0; i < modsList.length; i++) {
allMods = allMods + ' tooltip--' + modsList[i].trim();
}
}
span.tooltip(class=allMods)&attributes(attributes)
button.tooltip__btn(type='button', aria-label='more info', data-tooltip-content!=text) Подсказка
// В этом файле должны быть стили для БЭМ-блока tooltip, его элементов,
// модификаторов, псевдоселекторов, псевдоэлементов, @media-условий...
// Очередность: http://nicothin.github.io/idiomatic-pre-CSS/#priority
$gray: hsl(0, 0%, 50%) !default;
$line-height: 1.5 !default;
.tooltip {
$block-name: &; // #{$block-name}__element
position: relative;
z-index: 1;
&__btn {
display: inline-block;
padding: 0;
width: ($line-height * 1em);
height: ($line-height * 1em);
overflow: hidden;
border: none;
color: transparent;
background: transparent;
background-image: svg-load('../blocks/tooltip/bg-img/info.svg', fill='#{$gray}');
background-repeat: no-repeat;
background-position: center;
background-size: 1em;
}
&__bubble {
position: absolute;
top: calc(100% + 8px);
left: 0;
min-width: rem(150px);
max-width: rem(250px);
padding: 0.8rem 1rem;
background-color: #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
@supports ( filter: drop-shadow(0 0 0) ) {
box-shadow: none;
filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.5));
}
&:before {
content: '';
position: absolute;
top: -5px;
left: 5px;
width: 0;
height: 0;
border-style: solid;
border-width: 0 5px 5px 5px;
border-color: transparent transparent #fff transparent;
}
}
}
......@@ -101,15 +101,15 @@ block content
code &lt;head>...&lt;/head>
code &lt;body>
code &lt;div class="page__inner">
code &lt;div class="page__content">Основное содержимое&lt;/div>
code &lt;div class="page__footer-wrapper">Прибитый «подвал»&lt;/div>
code &lt;div class="page__content">Обёртка основного содержимого&lt;/div>
code &lt;div class="page__footer-wrapper">Обёртка прибитого подвала&lt;/div>
code &lt;/div>
code &lt;/body>
code &lt;/html>
+block-lib('grid-mixins', 'Примеси-генераторы модульной сетки', false, 'grid')
:markdown-it()
В сборку берётся `./src/scss/mixins/grid-mixins.scss` с примесями-генераторами. Отдельного БЭМ-блока для сеток нет, используйте семантические классы и применяйте к ним примеси.
В сборку берётся `./src/scss/mixins/grid-mixins.scss` с примесями-генераторами. Используйте семантические классы и применяйте к ним примеси.
[Пример использования на codepen.io](https://codepen.io/nicothin/pen/aJEOwE?editors=1100).
......@@ -172,7 +172,7 @@ block content
+block-lib('logo', 'Логотип', false)
include:markdown-it(html='true') ../blocks/logo/readme.md
+logo('/')
img(src='img/logo.svg', alt='Logo', width='64', height='15')
img(src='img/temp-logo.svg', alt='Logo', width='64', height='15')
+block-lib-code()
include:show-code(first-line='//- Pug-файл этого блока:') ../blocks/logo/logo.pug
......@@ -211,12 +211,6 @@ block content
+block-lib-code()
include:show-code(first-line='//- Pug-файл этого блока:') ../blocks/code/code.pug
+block-lib('thumb', 'Картинки-миниатюры', false)
include:markdown-it(html='true') ../blocks/thumb/readme.md
+thumb('img/demo-avatar-m.png', 'User', 150, 150)
+block-lib-code()
include:show-code(first-line='//- Pug-файл этого блока:') ../blocks/thumb/thumb.pug
+block-lib('alert', 'Сообщения', false)
include:markdown-it(html='true') ../blocks/alert/readme.md
+alert()
......@@ -228,28 +222,6 @@ block content
+block-lib-code()
include:show-code(first-line='//- Pug-файл этого блока:') ../blocks/alert/alert.pug
+block-lib('menu', 'Меню', false)
include:markdown-it(html='true') ../blocks/menu/readme.md
-
var myMenu = [
{
'text':'Пункт1',
'url':'/',
},
{
'text':'Пункт2',
'url':'/',
'mods': 'separator, active',
},
{
'text':'Пункт3',
'url':'/',
},
];
+menu(myMenu)
+block-lib-code()
include:show-code(first-line='//- Pug-файл этого блока:') ../blocks/menu/menu.pug
+block-lib('label', 'Лейбл', false)
include:markdown-it(html='true') ../blocks/label/readme.md
+label('Текст1')
......@@ -267,7 +239,6 @@ block content
+block-lib('table', 'Таблица', false)
include:markdown-it(html='true') ../blocks/table/readme.md
+table()
caption Таблица
tr
th Имя
th Фамилия
......@@ -393,12 +364,6 @@ block content
+block-lib-code()
include:show-code(first-line='//- Pug-файл этого блока:') ../blocks/embed-responsive/embed-responsive.pug
+block-lib('tooltip', 'Подсказки', true)
include:markdown-it(html='true') ../blocks/tooltip/readme.md
p Текст и подсказка: #[+tooltip('Текст подсказки может быть длинным. Хочется, чтобы <em>внутри</em> <small>можно было</small> <i>использовать</i> <b>разметку</b>.')]
+block-lib-code()
include:show-code(first-line='//- Pug-файл этого блока:') ../blocks/tooltip/tooltip.pug
+block-lib('btn', 'Кнопка', false)
include:markdown-it(html='true') ../blocks/btn/readme.md
p.
......@@ -629,34 +594,13 @@ block content
+block-lib-code()
include:show-code(first-line='//- Pug-файл этого блока:') ../blocks/field-select/field-select.pug
+block-lib('field-actions', 'Кнопки формы', false)
+block-lib('field-actions', 'Действия формы', false)
include:markdown-it(html='true') ../blocks/field-actions/readme.md
+field-actions('* — обязательные поля')
+btn('Отправить')
+block-lib-code()
include:show-code(first-line='//- Pug-файл этого блока:') ../blocks/field-actions/field-actions.pug
+block-lib('fields-group', 'Группа полей', false)
include:markdown-it(html='true') ../blocks/fields-group/readme.md
+fields-group()
+field-text({
helpText: 'Подсказка',
attrs: {
placeholder: 'Логин'
}
})
+field-text({
helpText: 'Подсказка',
attrs: {
type: 'password',
placeholder: 'Пароль',
},
})
+field-actions()
+btn('Отправить', 'primary')
+block-lib-code()
include:show-code(first-line='//- Pug-файл этого блока:') ../blocks/fields-group/fields-group.pug
+block-lib('form', 'Форма', true)
include:markdown-it(html='true') ../blocks/form/readme.md
+form()
......
......@@ -34,25 +34,22 @@ $border-color: $gray-lighten;
// Базовая типографика
$font-size--root: 16px;
$font-size: 16px;
$font-size: 1rem; // rem(16px)
$font-size--h1: rem(40px);
$font-size--h2: rem(32px);
$font-size--h3: rem(24px);
$font-size--h4: rem(18px);
$font-size--h5: rem(16px);
$font-size--h6: rem(16px);
$font-size--h1: 40px;
$font-size--h2: 32px;
$font-size--h3: 24px;
$font-size--h4: 18px;
$font-size--h5: 16px;
$font-size--h6: 16px;
$font-size--small: 80%;
$line-height: 1.5;
$font-family: -apple-system, BlinkMacSystemFont, 'Roboto', 'Ubuntu', 'Droid Sans', 'Helvetica Neue', 'Arial', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
$font-family--serif: 'Georgia', 'Times New Roman', 'Times', serif;
$font-family--monospace: SFMono-Regular, 'Menlo', 'Monaco', 'Consolas', 'Liberation Mono', 'Courier New', monospace;
$font-family--headings: $font-family;
$font-family--monospace: SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;
// Georgia, Times New Roman, Times, serif
......@@ -76,7 +73,7 @@ $container-xxl: $screen-xxl - 30;
// Модульная сетка
$grid-columns: 12;
$grid-gutter-width: rem(30px);
$grid-gutter-width: 30px;
......@@ -85,7 +82,7 @@ $grid-gutter-width: rem(30px);
$field-padding-vertical: 0.3em;
$field-padding-horizontal: 0.7em;
$border-radius: rem(3px);
$border-radius: 3px;
$opacity: 0.7;
$transition-time: 0.3s;
$shadow: 0 4px 2px -2px rgba(0, 0, 0, 0.3);
......
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