Skip to content

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

Алерты и импорт CSS

parent 4749bfd0
Show whitespace changes
Inline Side-by-side
Showing with 93 additions and 165 deletions
README.md
View file @ 9e8e62af
......@@ -48,6 +48,13 @@
Файл-диспетчер подключений (`.src/scss/style.scss`) формируется автоматически на основании указанных в `./package.json` блоков и доп. файлов. Писать в этот файл что-либо руками бессмысленно: при старте автоматизации файл будет перезаписан.
Используемый постпроцессинг:
1. [autoprefixer](https://github.com/postcss/autoprefixer)
2. [css-mqpacker](https://github.com/hail2u/node-css-mqpacker)
3. [postcss-import](https://github.com/postcss/postcss-import)
3. [gulp-cleancss](https://github.com/mgcrea/gulp-cleancss) (только в режиме сборки без карт кода)
### Блоки
......
gulpfile.js
View file @ 9e8e62af
......@@ -43,6 +43,7 @@ let postCssPlugins = [
mqpacker({
sort: true
}),
atImport()
];
// Очистка папки сборки
......@@ -59,6 +60,7 @@ gulp.task('style', function () {
const sass = require('gulp-sass');
const sourcemaps = require('gulp-sourcemaps');
const wait = require('gulp-wait');
const atImport = require("postcss-import");
console.log('---------- Компиляция стилей');
return gulp.src(dirs.srcPath + 'scss/style.scss')
.pipe(plumber({
......
package.json
View file @ 9e8e62af
......@@ -22,7 +22,8 @@
"main-nav": [],
"logo": [],
"code": [],
"thumb": []
"thumb": [],
"alert": []
},
"addCssBefore": [
"./src/scss/variables.scss",
......@@ -96,6 +97,7 @@
"jquery": "^3.1.1",
"jquery-migrate": "^3.0.0",
"merge-stream": "^1.0.1",
"postcss-import": "^9.1.0",
"svg4everybody": "^2.1.7",
"vinyl-buffer": "^1.0.0"
}
......
src/blocks/alert/alert--danger-invert.less deleted 100644 → 0
View file @ 4749bfd0
// Для импорта в диспетчер подключений: @import './src/blocks/alert/alert--danger-invert.less';
@import '../../less/variables.less'; // только для удобства обращения к переменным
.alert {
&--danger-invert {
background-color: @color-danger;
border: 1px solid darken(@color-danger, 15%);
color: #fff;
a {
color: inherit;
text-decoration: underline;
&:hover,
&:focus {
text-decoration: none;
}
}
}
}
src/blocks/alert/alert--icon.less deleted 100644 → 0
View file @ 4749bfd0
// Для импорта в диспетчер подключений: @import './src/blocks/alert/alert--icon.less';
@import '../../less/variables.less'; // только для удобства обращения к переменным
.alert {
&--icon {
display: flex;
align-items: center;
.alert__icon {
display: flex;
min-width: 3em;
min-height: 3em;
margin-right: 1em;
margin-left: 1em;
& + .alert__content {
padding-left: 1em;
}
}
.alert__content {
flex-grow: 1;
& + .alert__icon {
margin-left: 2em;
}
}
}
}
src/blocks/alert/alert--success-invert.less deleted 100644 → 0
View file @ 4749bfd0
// Для импорта в диспетчер подключений: @import './src/blocks/alert/alert--success-invert.less';
@import '../../less/variables.less'; // только для удобства обращения к переменным
.alert {
&--success-invert {
background-color: @color-success;
border: 1px solid darken(@color-success, 15%);
color: #fff;
a {
color: inherit;
text-decoration: underline;
&:hover,
&:focus {
text-decoration: none;
}
}
}
}
src/blocks/alert/alert.html
View file @ 9e8e62af
......@@ -2,51 +2,17 @@
<div class="alert">
<h1 class="alert__header">Нейтральное сообщение</h1>
<p>...</p>
<p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Рукопись подпоясал деревни всеми ведущими великий, злых lorem собрал переписали лучше речью которой букв, продолжил заголовок переулка себя рукописи! Сих!</p>
</div>
<div class="alert alert--danger">
<h1 class="alert__header">Внимание, опасность, отказ</h1>
<p>...</p>
<h1 class="alert__header">Нейтральное сообщение</h1>
<p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Рукопись подпоясал деревни всеми ведущими великий, злых lorem собрал переписали лучше речью которой букв, продолжил заголовок переулка себя рукописи! Сих!</p>
</div>
<div class="alert alert--success">
<h1 class="alert__header">Успешное действие</h1>
<p>...</p>
</div>
<div class="alert alert--danger-invert">
<h1 class="alert__header">Внимание, опасность, отказ</h1>
<p>...</p>
</div>
<div class="alert alert--success-invert">
<h1 class="alert__header">Успешное действие</h1>
<p>...</p>
</div>
<div class="alert alert--icon">
<div class="alert__icon">
<svg width="3em" height="3em" fill="currentColor"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#block-library-camera"></use></svg>
</div>
<div class="alert__content">
...
</div>
</div>
<div class="alert alert--icon">
<div class="alert__content">
...
</div>
<div class="alert__icon">
<svg width="3em" height="3em" fill="currentColor"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#block-library-camera"></use></svg>
</div>
</div>
<div class="alert">
<button class="alert__close" aria-label="Close">×</button>
<h1 class="alert__header">Заголовок</h1>
...
<h1 class="alert__header">Нейтральное сообщение</h1>
<p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Рукопись подпоясал деревни всеми ведущими великий, злых lorem собрал переписали лучше речью которой букв, продолжил заголовок переулка себя рукописи! Сих!</p>
</div>
-->
src/blocks/alert/alert.less → src/blocks/alert/alert.scss
View file @ 9e8e62af
// Для импорта в диспетчер подключений: @import './src/blocks/alert/alert.less';
@import '../../less/variables.less'; // только для удобства обращения к переменным
// В этом файле должны быть стили только для БЭМ-блока alert, его элементов,
// модификаторов, псевдоселекторов, псевдоэлементов, $media-условий...
// Не пишите здесь другие селекторы.
$gray-lighter: hsl(0, 0%, 80%) !default;
$gray-lightest: hsl(0, 0%, 90%) !default;
$color-success: hsl(120, 39%, 54%) !default;
$color-danger: hsl(2, 64%, 58%) !default;
$text-color: hsl(0, 0%, 10%) !default;
$font-size--h3: 1.5em !default;
$border-radius: 3px !default;
.alert {
position: relative;
padding: 0.7em 1em;
background-color: @gray-lightest;
color: @text-color;
border: 1px solid @gray-lighter;
border-radius: @border-radius;
background-color: $gray-lightest;
color: $text-color;
border: 1px solid $gray-lighter;
border-radius: $border-radius;
margin-top: 1em;
margin-bottom: 1em;
......@@ -25,7 +32,8 @@
}
&__header {
font-size: @font-size--h3;
font-size: $font-size--h3;
color: inherit;
margin-top: 0;
margin-bottom: 0;
......@@ -34,14 +42,10 @@
}
}
&__link {
font-weight: 700;
}
&--danger {
background-color: lighten(saturate(spin(@color-danger, 2.2609), 35.514%), 38%);
border: 1px solid lighten(saturate(spin(@color-danger, 8.2609), 6.9426%), 25.4902%);
color: @color-danger;
background-color: $color-danger;
border: 1px solid darken($color-danger, 10%);
color: #fff;
a {
color: inherit;
......@@ -55,9 +59,9 @@
}
&--success {
background-color: lighten(saturate(spin(@color-success, 2.2609), 35.514%), 38%);
border: 1px solid lighten(saturate(spin(@color-success, 8.2609), 6.9426%), 25.4902%);
color: @color-success;
background-color: $color-success;
border: 1px solid darken($color-success, 10%);
color: #fff;
a {
color: inherit;
......
src/blocks/alert/alert__close.js deleted 100644 → 0
View file @ 4749bfd0
(function(){
// получим все закрывающих элементы в Сообщениях
var alertCloseBtns = [].slice.call(document.querySelectorAll('.alert .alert__close') || []);
// Навесим отслеживание событий клика
alertCloseBtns.forEach(function(item) {
item.addEventListener('click', function(){
// По клику поднимемся к родительскому Сообщению и скроем его
this.closest('.alert').style.display = 'none';
});
});
}());
src/blocks/alert/alert__close.less deleted 100644 → 0
View file @ 4749bfd0
// Для импорта в диспетчер подключений: @import './src/blocks/alert/alert__close.less';
@import '../../less/variables.less'; // только для удобства обращения к переменным
.alert {
&__close {
position: absolute;
display: flex;
justify-content: center;
align-items: center;
min-width: 2em;
min-height: 2em;
margin: 0;
padding: 0.3em;
top: 0;
right: 0;
background: none;
border: 0;
border-radius: @border-radius;
color: inherit;
font-weight: 700;
opacity: 0.7;
& + * {
margin-top: 0;
}
&:hover,
&:focus {
opacity: 1;
background-color: rgba(255, 255, 255, 0.15);
}
}
}
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