Skip to content

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

Алерты (достилизация, описание)

parent 099ebb01
Show whitespace changes
Inline Side-by-side
Showing with 146 additions and 5 deletions
src/blocks/alert/alert--danger-invert.less 0 → 100644
View file @ 4e844302
@import '../../less/variables.less'; // только для удобства обращения к переменным
.alert {
&--danger-invert {
background-color: @color-danger;
border: 1px solid darken(@color-danger, 15%);
color: #fff;
}
}
src/blocks/alert/alert--success-invert.less 0 → 100644
View file @ 4e844302
@import '../../less/variables.less'; // только для удобства обращения к переменным
.alert {
&--success-invert {
background-color: @color-success;
border: 1px solid darken(@color-success, 15%);
color: #fff;
}
}
src/blocks/alert/alert.less
View file @ 4e844302
...@@ -30,6 +30,11 @@ ...@@ -30,6 +30,11 @@
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;
; }
&--success {
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%);
color: @color-success;
} }
} }
src/blocks_library.html
View file @ 4e844302
...@@ -4636,13 +4636,123 @@ ...@@ -4636,13 +4636,123 @@
<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>
<div class="js-font-resizer"> <div class="js-font-resizer">
<div class="row">
<div class="col-md-6">
<div class="alert">
<h1 class="alert__header">Нейтральное сообщение</h1>
<p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Языкового жаренные его сбить живет оксмокс? Города текстами предложения решила ее свое великий вершину семь подпоясал, но. Лучше, взгляд, послушавшись!</p>
</div>
</div>
<div class="col-md-6">
<div class="alert">
<p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты.</p>
</div>
<div class="alert">
<p>Языкового жаренные его сбить живет оксмокс? Города текстами предложения решила ее свое великий вершину семь подпоясал, но. Лучше, взгляд, послушавшись!</p>
</div>
</div>
</div>
<div class="row">
<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>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Языкового жаренные его сбить живет оксмокс? Города текстами предложения решила ее свое великий вершину семь подпоясал, но. Лучше, взгляд, послушавшись!</p>
</div>
</div>
<div class="col-md-6">
<div class="alert alert--danger">
<p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты.</p>
</div>
<div class="alert alert--danger">
<p>Языкового жаренные его сбить живет оксмокс? Города текстами предложения решила ее свое великий вершину семь подпоясал, но. Лучше, взгляд, послушавшись!</p>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="alert alert--success">
<h1 class="alert__header">Успешное действие</h1>
<p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Языкового жаренные его сбить живет оксмокс? Города текстами предложения решила ее свое великий вершину семь подпоясал, но. Лучше, взгляд, послушавшись!</p> <p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Языкового жаренные его сбить живет оксмокс? Города текстами предложения решила ее свое великий вершину семь подпоясал, но. Лучше, взгляд, послушавшись!</p>
</div> </div>
</div> </div>
<div class="col-md-6">
<div class="alert alert--success">
<p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты.</p>
</div>
<div class="alert alert--success">
<p>Языкового жаренные его сбить живет оксмокс? Города текстами предложения решила ее свое великий вершину семь подпоясал, но. Лучше, взгляд, послушавшись!</p>
</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&quot;&gt;</code>
<code class="html"> &lt;h1 class=&quot;alert__header&quot;&gt;Нейтральное сообщение&lt;/h1&gt; &lt;!-- &#x41d;&#x435;&#x43e;&#x431;&#x44f;&#x437;&#x430;&#x442;&#x435;&#x43b;&#x44c;&#x43d;&#x44b;&#x439; &#x437;&#x430;&#x433;&#x43e;&#x43b;&#x43e;&#x432;&#x43e;&#x43a; --&gt;</code>
<code class="html"> &lt;p&gt;...&lt;/p&gt;</code>
<code class="html">&lt;/div&gt;</code>
<code class="html"> </code>
<code class="html">&lt;div class=&quot;alert alert--danger&quot;&gt;</code>
<code class="html"> &lt;h1 class=&quot;alert__header&quot;&gt;Внимание, опасность, отказ&lt;/h1&gt; &lt;!-- &#x41d;&#x435;&#x43e;&#x431;&#x44f;&#x437;&#x430;&#x442;&#x435;&#x43b;&#x44c;&#x43d;&#x44b;&#x439; &#x437;&#x430;&#x433;&#x43e;&#x43b;&#x43e;&#x432;&#x43e;&#x43a; --&gt;</code>
<code class="html"> &lt;p&gt;...&lt;/p&gt;</code>
<code class="html">&lt;/div&gt;</code>
<code class="html"></code>
<code class="html">&lt;div class=&quot;alert alert--success&quot;&gt;</code>
<code class="html"> &lt;h1 class=&quot;alert__header&quot;&gt;Успешное действие&lt;/h1&gt; &lt;!-- &#x41d;&#x435;&#x43e;&#x431;&#x44f;&#x437;&#x430;&#x442;&#x435;&#x43b;&#x44c;&#x43d;&#x44b;&#x439; &#x437;&#x430;&#x433;&#x43e;&#x43b;&#x43e;&#x432;&#x43e;&#x43a; --&gt;</code>
<code class="html"> &lt;p&gt;...&lt;/p&gt;</code>
<code class="html">&lt;/div&gt;</code>
</pre>
</div>
</div>
<div class="blocks-library__sub-item">
<h2 class="blocks-library__sub-item-title">Инвертированный блок «опасность, внимание»</h2>
<p>Модификатор <code>alert--danger-invert</code>, отдельный less-файл.</p>
<div class="js-font-resizer">
<div class="alert alert--danger-invert">
<h1 class="alert__header">Внимание, опасность, отказ</h1>
<p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Языкового жаренные его сбить живет оксмокс? Города текстами предложения решила ее свое великий вершину семь подпоясал, но. Лучше, взгляд, послушавшись!</p>
</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--danger-invert&quot;&gt;</code>
<code class="html"> &lt;h1 class=&quot;alert__header&quot;&gt;Внимание, опасность, отказ&lt;/h1&gt; &lt;!-- &#x41d;&#x435;&#x43e;&#x431;&#x44f;&#x437;&#x430;&#x442;&#x435;&#x43b;&#x44c;&#x43d;&#x44b;&#x439; &#x437;&#x430;&#x433;&#x43e;&#x43b;&#x43e;&#x432;&#x43e;&#x43a; --&gt;</code>
<code class="html"> &lt;p&gt;...&lt;/p&gt;</code>
<code class="html">&lt;/div&gt;</code>
</pre>
</div>
</div>
</div>
<div class="blocks-library__sub-item">
<h2 class="blocks-library__sub-item-title">Инвертированный блок «успех»</h2>
<p>Модификатор <code>alert--success-invert</code>, отдельный less-файл.</p>
<div class="js-font-resizer">
<div class="alert alert--success-invert">
<h1 class="alert__header">Успешное действие</h1>
<p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Языкового жаренные его сбить живет оксмокс? Города текстами предложения решила ее свое великий вершину семь подпоясал, но. Лучше, взгляд, послушавшись!</p>
</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--success-invert&quot;&gt;</code>
<code class="html"> &lt;h1 class=&quot;alert__header&quot;&gt;Успешное действие&lt;/h1&gt; &lt;!-- &#x41d;&#x435;&#x43e;&#x431;&#x44f;&#x437;&#x430;&#x442;&#x435;&#x43b;&#x44c;&#x43d;&#x44b;&#x439; &#x437;&#x430;&#x433;&#x43e;&#x43b;&#x43e;&#x432;&#x43e;&#x43a; --&gt;</code>
<code class="html"> &lt;p&gt;...&lt;/p&gt;</code>
<code class="html">&lt;/div&gt;</code>
</pre>
</div>
</div>
</div>
</section> </section>
......
src/less/global/global-scaffolding.less
View file @ 4e844302
...@@ -76,7 +76,7 @@ html { ...@@ -76,7 +76,7 @@ html {
body { body {
font-family: @font-family; font-family: @font-family;
font-size: @font-size; font-size: @font-size;
line-height: @line-height; line-height: unit(@line-height);
color: @text-color; color: @text-color;
background-color: @body-bg; background-color: @body-bg;
margin: 0; margin: 0;
......
src/less/style.less
View file @ 4e844302
...@@ -65,3 +65,5 @@ ...@@ -65,3 +65,5 @@
@import './src/blocks/label/label--tag.less'; @import './src/blocks/label/label--tag.less';
@import './src/blocks/label/label--circle.less'; @import './src/blocks/label/label--circle.less';
@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--success-invert.less';
src/less/variables.less
View file @ 4e844302
...@@ -40,7 +40,7 @@ ...@@ -40,7 +40,7 @@
@font-size--small: 0.75em; @font-size--small: 0.75em;
@font-size--small-percent: 75%; @font-size--small-percent: 75%;
@line-height: 1.375; @line-height: 1.375em;
@font-family: -apple-system, BlinkMacSystemFont, 'Roboto', 'Ubuntu', 'Droid Sans', 'Helvetica Neue', Arial, sans-serif; @font-family: -apple-system, BlinkMacSystemFont, 'Roboto', 'Ubuntu', 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
@font-family--serif: Georgia, 'Times New Roman', Times, serif; @font-family--serif: Georgia, 'Times New Roman', Times, serif;
......
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