Skip to content

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

Алерты с иконками, инвертированные

parent 4e844302
Hide whitespace changes
Inline Side-by-side
Showing with 173 additions and 11 deletions
src/blocks/alert/alert--danger-invert.less
View file @ cfbec120
...@@ -7,6 +7,15 @@ ...@@ -7,6 +7,15 @@
background-color: @color-danger; background-color: @color-danger;
border: 1px solid darken(@color-danger, 15%); border: 1px solid darken(@color-danger, 15%);
color: #fff; color: #fff;
a {
color: inherit;
text-decoration: underline;
&:hover, &:focus {
text-decoration: none;
}
}
} }
} }
src/blocks/alert/alert--icon.less 0 → 100644
View file @ cfbec120
@import '../../less/variables.less'; // только для удобства обращения к переменным
.alert {
&--icon {
display: flex;
align-items: center;
.alert__icon {
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
View file @ cfbec120
...@@ -7,6 +7,15 @@ ...@@ -7,6 +7,15 @@
background-color: @color-success; background-color: @color-success;
border: 1px solid darken(@color-success, 15%); border: 1px solid darken(@color-success, 15%);
color: #fff; color: #fff;
a {
color: inherit;
text-decoration: underline;
&:hover, &:focus {
text-decoration: none;
}
}
} }
} }
src/blocks/alert/alert.less
View file @ cfbec120
...@@ -26,15 +26,36 @@ ...@@ -26,15 +26,36 @@
margin-bottom: 0; margin-bottom: 0;
} }
&__link {
font-weight: 700;
}
&--danger { &--danger {
background-color: lighten(saturate(spin(@color-danger, 2.2609), 35.5140%), 38%); background-color: lighten(saturate(spin(@color-danger, 2.2609), 35.5140%), 38%);
border: 1px solid lighten(saturate(spin(@color-danger, 8.2609), 6.9426%), 25.4902%); border: 1px solid lighten(saturate(spin(@color-danger, 8.2609), 6.9426%), 25.4902%);
color: @color-danger; color: @color-danger;
a {
color: inherit;
text-decoration: underline;
&:hover, &:focus {
text-decoration: none;
}
}
} }
&--success { &--success {
background-color: lighten(saturate(spin(@color-success, 2.2609), 35.5140%), 38%); background-color: lighten(saturate(spin(@color-success, 2.2609), 35.5140%), 38%);
border: 1px solid lighten(saturate(spin(@color-success, 8.2609), 6.9426%), 25.4902%); border: 1px solid lighten(saturate(spin(@color-success, 8.2609), 6.9426%), 25.4902%);
color: @color-success; color: @color-success;
a {
color: inherit;
text-decoration: underline;
&:hover, &:focus {
text-decoration: none;
}
}
} }
} }
src/blocks_library.html
View file @ cfbec120
...@@ -4637,21 +4637,26 @@ ...@@ -4637,21 +4637,26 @@
<h1 class="blocks-library__item-title">Сообщения</h1> <h1 class="blocks-library__item-title">Сообщения</h1>
<p>Модификаторы <code>alert--danger</code> и <code>alert--success</code> не являются отдельными less-файлами.</p> <p>Модификаторы <code>alert--danger</code> и <code>alert--success</code> не являются отдельными less-файлами.</p>
<p>Заголовки и внутренние ссылки — необязательные БЭМ-элементы. Ссылка внутри может быть акцентирована классом <code>alert__link</code> или оставлена по умолчанию (оба варианта показаны ниже).</p>
<div class="js-font-resizer"> <div class="js-font-resizer">
<div class="row"> <div class="row">
<div class="col-md-6"> <div class="col-md-6">
<div class="alert"> <div class="alert">
<h1 class="alert__header">Нейтральное сообщение</h1> <h1 class="alert__header">Нейтральное сообщение</h1>
<p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Языкового жаренные его сбить живет оксмокс? Города текстами предложения решила ее свое великий вершину семь подпоясал, но. Лучше, взгляд, послушавшись!</p> <p>Далеко-далеко за <a href="" class="alert__link">словесными</a> горами в стране, гласных и согласных живут рыбные тексты. Языкового жаренные его сбить живет оксмокс? Города текстами предложения решила ее свое великий вершину семь подпоясал, но. Лучше, взгляд, <a href="">послушавшись</a>!</p>
<ul>
<li>Да, детка</li>
<li>Да, детка</li>
</ul>
</div> </div>
</div> </div>
<div class="col-md-6"> <div class="col-md-6">
<div class="alert"> <div class="alert">
<p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты.</p> <p>Далеко-далеко за <a href="" class="alert__link">словесными</a> горами в стране, гласных и согласных живут рыбные тексты.</p>
</div> </div>
<div class="alert"> <div class="alert">
<p>Языкового жаренные его сбить живет оксмокс? Города текстами предложения решила ее свое великий вершину семь подпоясал, но. Лучше, взгляд, послушавшись!</p> <p>Языкового жаренные его сбить живет оксмокс? Города текстами предложения решила ее свое великий вершину семь подпоясал, но. Лучше, взгляд, <a href="">послушавшись</a>!</p>
</div> </div>
</div> </div>
</div> </div>
...@@ -4659,15 +4664,19 @@ ...@@ -4659,15 +4664,19 @@
<div class="col-md-6"> <div class="col-md-6">
<div class="alert alert--danger"> <div class="alert alert--danger">
<h1 class="alert__header">Внимание, опасность, отказ</h1> <h1 class="alert__header">Внимание, опасность, отказ</h1>
<p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Языкового жаренные его сбить живет оксмокс? Города текстами предложения решила ее свое великий вершину семь подпоясал, но. Лучше, взгляд, послушавшись!</p> <p>Далеко-далеко за <a href="" class="alert__link">словесными</a> горами в стране, гласных и согласных живут рыбные тексты. Языкового жаренные его сбить живет оксмокс? Города текстами предложения решила ее свое великий вершину семь подпоясал, но. Лучше, взгляд, <a href="">послушавшись</a>!</p>
<ul>
<li>Да, детка</li>
<li>Да, детка</li>
</ul>
</div> </div>
</div> </div>
<div class="col-md-6"> <div class="col-md-6">
<div class="alert alert--danger"> <div class="alert alert--danger">
<p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты.</p> <p>Далеко-далеко за <a href="" class="alert__link">словесными</a> горами в стране, гласных и согласных живут рыбные тексты.</p>
</div> </div>
<div class="alert alert--danger"> <div class="alert alert--danger">
<p>Языкового жаренные его сбить живет оксмокс? Города текстами предложения решила ее свое великий вершину семь подпоясал, но. Лучше, взгляд, послушавшись!</p> <p>Языкового жаренные его сбить живет оксмокс? Города текстами предложения решила ее свое великий вершину семь подпоясал, но. Лучше, взгляд, <a href="">послушавшись</a>!</p>
</div> </div>
</div> </div>
</div> </div>
...@@ -4675,15 +4684,19 @@ ...@@ -4675,15 +4684,19 @@
<div class="col-md-6"> <div class="col-md-6">
<div class="alert alert--success"> <div class="alert alert--success">
<h1 class="alert__header">Успешное действие</h1> <h1 class="alert__header">Успешное действие</h1>
<p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Языкового жаренные его сбить живет оксмокс? Города текстами предложения решила ее свое великий вершину семь подпоясал, но. Лучше, взгляд, послушавшись!</p> <p>Далеко-далеко за <a href="" class="alert__link">словесными</a> горами в стране, гласных и согласных живут рыбные тексты. Языкового жаренные его сбить живет оксмокс? Города текстами предложения решила ее свое великий вершину семь подпоясал, но. Лучше, взгляд, <a href="">послушавшись</a>!</p>
<ul>
<li>Да, детка</li>
<li>Да, детка</li>
</ul>
</div> </div>
</div> </div>
<div class="col-md-6"> <div class="col-md-6">
<div class="alert alert--success"> <div class="alert alert--success">
<p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты.</p> <p>Далеко-далеко за <a href="" class="alert__link">словесными</a> горами в стране, гласных и согласных живут рыбные тексты.</p>
</div> </div>
<div class="alert alert--success"> <div class="alert alert--success">
<p>Языкового жаренные его сбить живет оксмокс? Города текстами предложения решила ее свое великий вершину семь подпоясал, но. Лучше, взгляд, послушавшись!</p> <p>Языкового жаренные его сбить живет оксмокс? Города текстами предложения решила ее свое великий вершину семь подпоясал, но. Лучше, взгляд, <a href="">послушавшись</a>!</p>
</div> </div>
</div> </div>
</div> </div>
...@@ -4716,7 +4729,11 @@ ...@@ -4716,7 +4729,11 @@
<div class="js-font-resizer"> <div class="js-font-resizer">
<div class="alert alert--danger-invert"> <div class="alert alert--danger-invert">
<h1 class="alert__header">Внимание, опасность, отказ</h1> <h1 class="alert__header">Внимание, опасность, отказ</h1>
<p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Языкового жаренные его сбить живет оксмокс? Города текстами предложения решила ее свое великий вершину семь подпоясал, но. Лучше, взгляд, послушавшись!</p> <p>Далеко-далеко за <a href="" class="alert__link">словесными</a> горами в стране, гласных и согласных живут рыбные тексты. Языкового жаренные его сбить живет оксмокс? Города текстами предложения решила ее свое великий вершину семь подпоясал, но. Лучше, взгляд, <a href="">послушавшись</a>!</p>
<ul>
<li>Да, детка</li>
<li>Да, детка</li>
</ul>
</div> </div>
</div> </div>
<div class="blocks-library__code-wrapper"> <div class="blocks-library__code-wrapper">
...@@ -4738,7 +4755,11 @@ ...@@ -4738,7 +4755,11 @@
<div class="js-font-resizer"> <div class="js-font-resizer">
<div class="alert alert--success-invert"> <div class="alert alert--success-invert">
<h1 class="alert__header">Успешное действие</h1> <h1 class="alert__header">Успешное действие</h1>
<p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Языкового жаренные его сбить живет оксмокс? Города текстами предложения решила ее свое великий вершину семь подпоясал, но. Лучше, взгляд, послушавшись!</p> <p>Далеко-далеко за <a href="" class="alert__link">словесными</a> горами в стране, гласных и согласных живут рыбные тексты. Языкового жаренные его сбить живет оксмокс? Города текстами предложения решила ее свое великий вершину семь подпоясал, но. Лучше, взгляд, <a href="">послушавшись</a>!</p>
<ul>
<li>Да, детка</li>
<li>Да, детка</li>
</ul>
</div> </div>
</div> </div>
<div class="blocks-library__code-wrapper"> <div class="blocks-library__code-wrapper">
...@@ -4754,6 +4775,77 @@ ...@@ -4754,6 +4775,77 @@
</div> </div>
</div> </div>
<div class="blocks-library__sub-item">
<h2 class="blocks-library__sub-item-title">Сообщение с иконкой</h2>
<p>Модификатор <code>alert--icon</code>, дополнительные элементы <code>alert__icon</code> и <code>alert__content</code> (чуть другая разметка), отдельный less-файл.</p>
<p>Хорошо сочетается с любыми другими модификаторами. Иконка может быть как до текста, так и после.</p>
<div class="js-font-resizer">
<div class="row">
<div class="col-md-6">
<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">
<h1 class="alert__header">Нейтральное сообщение</h1>
<p>Далеко-далеко за <a href="" class="alert__link">словесными</a> горами в стране, гласных.</p>
</div>
</div>
<div class="alert alert--icon alert--danger">
<div class="alert__icon">
<svg width="3em" height="3em" fill="currentColor"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#block-library-search"></use></svg>
</div>
<div class="alert__content">
<p>Далеко-далеко за <a href="" class="alert__link">словесными</a> горами в стране, гласных и согласных живут рыбные тексты.</p>
</div>
</div>
</div>
<div class="col-md-6">
<div class="alert alert--icon alert--success">
<div class="alert__icon">
<svg width="3em" height="3em" fill="currentColor"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#block-library-folder-open"></use></svg>
</div>
<div class="alert__content">
<p>Далеко-далеко за <a href="" class="alert__link">словесными</a> горами в стране, гласных и согласных живут рыбные тексты.</p>
</div>
</div>
<div class="alert alert--icon alert--success-invert">
<div class="alert__content">
<p>Далеко-далеко за <a href="" class="alert__link">словесными</a> горами в стране, гласных и согласных живут рыбные тексты.</p>
</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-folder-open"></use></svg>
</div>
</div>
</div>
</div>
</div>
<div class="blocks-library__code-wrapper">
<span class="blocks-library__code-show-trigger" title="Показать код"><i class="blocks-library__code-icon"></i></span>
<div class="blocks-library__code">
<pre>
<code class="html">&lt;div class=&quot;alert alert--icon&quot;&gt;</code>
<code class="html"> &lt;div class=&quot;alert__icon&quot;&gt;</code>
<code class="html"> &lt;svg width=&quot;3em&quot; height=&quot;3em&quot; fill=&quot;currentColor&quot;&gt;&lt;use xmlns:xlink=&quot;http://www.w3.org/1999/xlink&quot; xlink:href=&quot;#block-library-camera&quot;&gt;&lt;/use&gt;&lt;/svg&gt;</code>
<code class="html"> &lt;/div&gt;</code>
<code class="html"> &lt;div class=&quot;alert__content&quot;&gt;</code>
<code class="html"> ...</code>
<code class="html"> &lt;/div&gt;</code>
<code class="html">&lt;/div&gt;</code>
<code class="html"> </code>
<code class="html">&lt;div class=&quot;alert alert--icon&quot;&gt;</code>
<code class="html"> &lt;div class=&quot;alert__content&quot;&gt;</code>
<code class="html"> ...</code>
<code class="html"> &lt;/div&gt;</code>
<code class="html"> &lt;div class=&quot;alert__icon&quot;&gt;</code>
<code class="html"> &lt;svg width=&quot;3em&quot; height=&quot;3em&quot; fill=&quot;currentColor&quot;&gt;&lt;use xmlns:xlink=&quot;http://www.w3.org/1999/xlink&quot; xlink:href=&quot;#block-library-camera&quot;&gt;&lt;/use&gt;&lt;/svg&gt;</code>
<code class="html"> &lt;/div&gt;</code>
<code class="html">&lt;/div&gt;</code>
</pre>
</div>
</div>
</div>
</section> </section>
......
src/less/style.less
View file @ cfbec120
...@@ -67,3 +67,4 @@ ...@@ -67,3 +67,4 @@
@import './src/blocks/alert/alert.less'; @import './src/blocks/alert/alert.less';
@import './src/blocks/alert/alert--danger-invert.less'; @import './src/blocks/alert/alert--danger-invert.less';
@import './src/blocks/alert/alert--success-invert.less'; @import './src/blocks/alert/alert--success-invert.less';
@import './src/blocks/alert/alert--icon.less';
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