Skip to content

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

Добавил .btn

parent c8325224
Hide whitespace changes
Inline Side-by-side
Showing with 125 additions and 169 deletions
package.json
View file @ 73ee98a6
...@@ -23,7 +23,8 @@ ...@@ -23,7 +23,8 @@
"logo": [], "logo": [],
"code": [], "code": [],
"thumb": [], "thumb": [],
"alert": [] "alert": [],
"btn": []
}, },
"addCssBefore": [ "addCssBefore": [
"./src/scss/variables.scss", "./src/scss/variables.scss",
......
src/blocks-demo.html
View file @ 73ee98a6
...@@ -509,6 +509,36 @@ ...@@ -509,6 +509,36 @@
</section> </section>
<section class="blocks-library__item" id="btn" data-name=".btn">
<h2 class="blocks-library__item-title">Кнопки</h2>
<p>
<a class="btn" href="">Cсылка</a>
<input class="btn" type="submit" value="Input">
<button class="btn">Button</button>
<a class="btn btn--disabled" href="">Cсылка</a>
<input class="btn" type="submit" value="Input" disabled>
<button class="btn" disabled>Button</button>
</p>
<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 class="code">
<code>&lt;a class="btn" href="">Cсылка&lt;/a></code>
<code>&lt;input class="btn" type="submit" value="Input"></code>
<code>&lt;button class="btn">Button&lt;/button></code>
<code> </code>
<code>&lt;a class="btn btn--disabled" href="">Cсылка&lt;/a></code>
<code>&lt;input class="btn" type="submit" value="Input" disabled></code>
<code>&lt;button class="btn" disabled>Button&lt;/button></code>
</pre>
</div>
</div>
</section>
</div> </div>
<style> <style>
......
src/blocks/btn/btn.less deleted 100644 → 0
View file @ c8325224
// Для импорта в диспетчер подключений: @import './src/blocks/btn/btn.less';
@import '../../less/variables.less'; // только для удобства обращения к переменным
.btn {
box-sizing: border-box;
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
margin: 0;
padding: @field-padding-top @field-padding-horizontal @field-padding-bottom;
white-space: nowrap;
cursor: pointer;
vertical-align: middle;
user-select: none;
text-align: center;
font-size: 1em;
font-family: inherit;
line-height: @line-height;
text-decoration: none;
text-transform: none;
border-radius: @border-radius;
min-height: 2.125em;
border: 1px solid @gray-light;
color: @text-color;
background-color: @gray-lighter;
background-image: none;
&--hover,
&:hover {
text-decoration: none;
color: @text-color;
background-color: darken(@gray-lighter, 10%);
border-color: darken(@gray-light, 12%);
}
&--active,
&:active,
&:focus {
text-decoration: none;
outline: 0;
box-shadow: none;
color: @text-color;
background-color: darken(@gray-lighter, 15%);
border-color: darken(@gray-light, 17%);
}
&--disabled,
&:disabled {
cursor: not-allowed;
opacity: @opacity;
color: @text-color;
background-color: @gray-lighter;
border-color: @gray-light;
a& {
pointer-events: none;
}
}
&--main {
color: #fff;
background-color: @color-main;
border: 1px solid @color-main;
&--hover,
&:hover {
color: #fff;
background-color: darken(@color-main, 10%);
border-color: darken(@color-main, 12%);
}
&--active,
&:active,
&:focus {
color: #fff;
background-color: darken(@color-main, 15%);
border-color: darken(@color-main, 17%);
}
&--disabled,
&:disabled {
color: #fff;
background-color: @color-main;
border-color: @color-main;
}
}
&--danger {
color: #fff;
background-color: @color-danger;
border: 1px solid @color-danger;
&--hover,
&:hover {
color: #fff;
background-color: darken(@color-danger, 10%);
border-color: darken(@color-danger, 12%);
}
&--active,
&:active,
&:focus {
color: #fff;
background-color: darken(@color-danger, 15%);
border-color: darken(@color-danger, 17%);
}
&--disabled,
&:disabled {
color: #fff;
background-color: @color-danger;
border-color: @color-danger;
}
}
&--success {
color: #fff;
background-color: @color-success;
border: 1px solid @color-success;
&--hover,
&:hover {
color: #fff;
background-color: darken(@color-success, 10%);
border-color: darken(@color-success, 12%);
}
&--active,
&:active,
&:focus {
color: #fff;
background-color: darken(@color-success, 15%);
border-color: darken(@color-success, 17%);
}
&--disabled,
&:disabled {
color: #fff;
background-color: @color-success;
border-color: @color-success;
}
}
&--lg {
font-size: @font-size--h3;
}
&--sm {
font-size: @font-size--small;
padding-top: round((@field-padding-top / 2), 2);
padding-bottom: round((@field-padding-bottom / 2), 2);
}
&--block {
width: 100%;
text-align: center;
justify-content: center;
& + & {
margin-top: (@line-height / 2);
}
}
}
src/blocks/btn/btn.scss 0 → 100644
View file @ 73ee98a6
// В этом файле должны быть стили только для БЭМ-блока alert, его элементов,
// модификаторов, псевдоселекторов, псевдоэлементов, $media-условий...
// Не пишите здесь другие селекторы.
$gray-lighter: hsl(0, 0%, 80%);
$gray-lightest: hsl(0, 0%, 90%);
$text-color: hsl(0, 0%, 10%);
$line-height: 1.375em;
$field-padding-vertical: 0.3em;
$field-padding-horizontal: 0.7em;
$border-radius: 3px;
.btn {
box-sizing: border-box;
display: inline-block;
margin: 0;
padding: $field-padding-vertical $field-padding-horizontal;
white-space: nowrap;
vertical-align: middle;
user-select: none;
text-align: center;
font-size: 1em;
font-family: inherit;
line-height: $line-height;
text-decoration: none;
text-transform: none;
// min-height: 2.125em;
color: $text-color;
border-radius: $border-radius;
border: 1px solid $gray-lighter;
background-color: $gray-lightest;
background-image: none;
cursor: pointer;
&:hover,
&:focus {
text-decoration: none;
color: $text-color;
background-color: darken($gray-lightest, 10%);
border-color: darken($gray-lighter, 12%);
}
&:active,
&:focus {
@include field-focus;
}
&--disabled,
&:disabled {
cursor: not-allowed;
opacity: $opacity;
color: $text-color;
background-color: $gray-lightest;
border-color: $gray-lighter;
@at-root {
a.btn--disabled {
pointer-events: none;
}
}
}
// &--main {
// color: #fff;
// background-color: $color-main;
// border: 1px solid $color-main;
// &:hover,
// &:focus {
// color: #fff;
// background-color: darken($color-main, 10%);
// border-color: darken($color-main, 12%);
// }
// &--disabled,
// &:disabled {
// color: #fff;
// background-color: $color-main;
// border-color: $color-main;
// }
// }
}
src/scss/variables.scss
View file @ 73ee98a6
...@@ -78,6 +78,9 @@ $grid-gutter-width: 30px; ...@@ -78,6 +78,9 @@ $grid-gutter-width: 30px;
// Разное // Разное
$field-padding-vertical: 0.3em;
$field-padding-horizontal: 0.7em;
$border-radius: 3px; $border-radius: 3px;
$opacity: 0.7; $opacity: 0.7;
$transition-time: 0.3s; $transition-time: 0.3s;
......
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