buttons

src/_blocks_library.html

@@ -268,6 +268,26 @@
     <hr>
   </section>
 
+  <section>
+    <h2 id="btn">Исходное: кнопки</h2>
+    <p>
+      <a href="" class="btn">Cсылка</a>
+      <input type="submit" class="btn" value="Input">
+      <button class="btn">Button</button>
+      <a href="" class="btn  btn--main">Cсылка</a>
+      <input type="submit" class="btn  btn--main" value="Input">
+      <button class="btn  btn--main">Button</button>
+      <a href="" class="btn  btn--success">Cсылка</a>
+      <input type="submit" class="btn  btn--success" value="Input">
+      <button class="btn  btn--success">Button</button>
+      <a href="" class="btn  btn--danger">Cсылка</a>
+      <input type="submit" class="btn  btn--danger" value="Input">
+      <button class="btn  btn--danger">Button</button>
+    </p>
+    <p>Приоритетным является подход, в котором вместо классов <code>.btn</code> и их модификаторов используются семантические БЭМ-овские классы и LESS-примеси <code>.btn()</code> и <code>.btn-color-variant(цвет текста; цвет фона; цвет бордюра)</code>.</p>
+    <hr>
+  </section>
+
   <section>
     <h2>Исходное: Модульная сетка на flexbox</h2>
     <p>Вдохновлён сеткой bootstrap 4.</p>

src/less/blocks/btn.less

+.btn {
+  .btn();
+  .btn-color-variant(@text-color; @gray-lighter; @gray-lighter);
+
+  &--main {
+    .btn-color-variant(#fff; @color-main; @color-main);
+  }
+
+  &--danger {
+    .btn-color-variant(#fff; @color-danger; @color-danger);
+  }
+
+  &--success {
+    .btn-color-variant(#fff; @color-success; @color-success);
+  }
+}

src/less/global_scaffolding.less

@@ -391,11 +391,11 @@ input[type="color"],
 input[type="tel"] {
   border: 1px solid @border-color;
   border-radius: @border-radius;
-  display: block;
+  display: inline-block;
   width: 100%;
   height: 2.125em; // 16 × 2.125 = 34
   line-height: @line-height;
-  padding: .5rem .4em .2em; // вебкиты, windows...
+  padding: 0.313em 0.438em 0.188em; // вебкиты, windows...
 }
 
 select[multiple],

src/less/mixins/mixins.less

@@ -326,3 +326,91 @@
     @media (max-width: (@screen-xxl - 1)) { display: none; }
   }
 }
+
+
+//------------------------------------------------------------------------------
+//  Общие стиля любой кнопки
+//------------------------------------------------------------------------------
+//  Закомментированы строки, используемые в случае, если кнопка одна.
+//------------------------------------------------------------------------------
+
+.btn() {
+  display: inline-flex;
+  align-items: center;
+  min-height: 2.125em; // 16 × 2.125 = 34
+  line-height: @line-height;
+  padding: 0.313em 0.438em 0.188em;
+  text-align: center;
+  white-space: nowrap;
+  vertical-align: middle;
+  cursor: pointer;
+  user-select: none;
+  font-weight: 400;
+  font-size: @font-size;
+  border: 1px solid;
+  // border: 1px solid transparent;
+  // background-color: @gray-lighter;
+  // color: @text-color;
+  border-radius: @border-radius;
+
+  // &--hover,
+  &:hover {
+    text-decoration: none;
+    // color: @text-color;
+    // background-color: darken(@gray-lighter, 10%);
+    // border-color: transparent;
+  }
+
+  // &--active,
+  &:active,
+  &:focus {
+    text-decoration: none;
+    // color: @text-color;
+    // background-color: darken(@gray-lighter, 15%);
+    // border-color: transparent;
+  }
+
+  // &--disabled,
+  &:disabled {
+    cursor: not-allowed;
+    opacity: @opacity;
+
+    a& {
+      pointer-events: none;
+    }
+  }
+}
+
+
+
+//------------------------------------------------------------------------------
+//  Примесь-генератор цветовых стилей
+//------------------------------------------------------------------------------
+
+.btn-color-variant(@color: @text-color; @background: @gray-lighter; @border: @gray-lighter) {
+  color: @color;
+  background-color: @background;
+  border-color: @border;
+
+  // &--hover,
+  &:hover {
+    color: @color;
+    background-color: darken(@background, 10%);
+    border-color: darken(@border, 12%);
+  }
+
+  // &--active,
+  &:active,
+  &:focus {
+    color: @color;
+    background-color: darken(@background, 15%);
+    border-color: darken(@border, 17%);
+  }
+
+  // &--disabled,
+  &:disabled {
+    color: @color;
+    background-color: @background;
+    border-color: @border;
+  }
+}

src/less/style.less

@@ -5,3 +5,4 @@
 @import "global_grid.less";
 
 @import "blocks/table-responsive.less";
+@import "blocks/btn.less";

src/less/variables.less

@@ -38,7 +38,7 @@
 @font-size--h6:               1.6rem;
 @font-size--small:            1.1rem;
 
-@line-height:                 1.4em;
+@line-height:                 1.375em;
 
 @font-family:                 -apple-system, BlinkMacSystemFont, "Roboto", "Ubuntu", "Droid Sans", "Helvetica Neue", Arial, sans-serif;
 @font-family--serif:          Georgia, "Times New Roman", Times, serif;
@@ -72,4 +72,7 @@
 
 
 // Разное
+
 @border-radius:               .3rem;
+
+@opacity:                     .7;