library fixs

src/blocks/blocks-library/blocks-library.html

@@ -11,6 +11,15 @@
 
     Контент
 
+    <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;input type="text" value="Текстовое поле для сравнения высоты" style="width:70px"&gt;</code>
+        </pre>
+      </div>
+    </div>
+
   </div>
 
 </section>

src/blocks/blocks-library/blocks-library.less

@@ -53,13 +53,13 @@
   &__code-show-trigger {
     display: block;
     width: 3rem;
-    height: 2rem;
+    height: 20px;
     cursor: pointer;
     margin-bottom: 0.3em;
 
     @media (min-width: @screen-md) {
       position: absolute;
-      top: 0;
+      top: -2.9rem;
       left: -4rem;
     }
   }
@@ -67,7 +67,7 @@
   &__code-icon {
     display: block;
     width: 3rem;
-    height: 0.2rem;
+    height: 2px;
     background-color: @gray-light;
 
     &:before,
@@ -75,35 +75,38 @@
       position: absolute;
       background-color: @gray-light;
       width: 3rem;
-      height: 0.2rem;
+      height: 2px;
       left: 0;
       content: '';
     }
 
     &:before {
-      top: 0.8rem;
+      top: 8px;
     }
 
     &:after {
-      top: 1.6rem;
+      top: 16px;
     }
   }
 
   &__code {
-    transition: max-height @transition-time;
     overflow: hidden;
 
     .js & {
       max-height: 0;
+      transition-duration: @transition-time;
+      transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
     }
 
     .js &--shown {
-      max-height: 410px;
+      transition-duration: @transition-time;
+      transition-timing-function: ease-in;
+      max-height: 1000px;
     }
 
     pre {
       margin: 0;
-      max-height: 410px;
+      max-height: 500px;
     }
   }
 }

src/blocks/checked-btn/checked-btn.less

@@ -8,20 +8,5 @@
     top: 0;
     left: 0;
     visibility: hidden;
-
-    &:checked {
-      & ~ .btn {
-        .btn-color--active(@text-color; @gray-lighter; @gray-lighter);
-      }
-      & ~ .btn--main {
-        .btn-color--active(#fff; @color-main; @color-main);
-      }
-      & ~ .btn--success {
-        .btn-color--active(#fff; @color-success; @color-success);
-      }
-      & ~ .btn--danger {
-        .btn-color--active(#fff; @color-danger; @color-danger);
-      }
-    }
   }
 }

src/less/mixins/btn-mixins.less

@@ -53,59 +53,35 @@
 //  Примесь-генератор цветовых стилей
 //------------------------------------------------------------------------------
 
-.btn-color(@color: @text-color; @background: @gray-lighter; @border: @gray-lighter) {
+.btn-color(@color: @text-color; @background: @gray-lighter; @border: @gray-lighter;) {
   color: @color;
   background-color: @background;
   border-color: @border;
 
   &--hover,
   &:hover {
-    .btn-color--hover(@color; @background; @border);
+    .btn-color--mod(@color; darken(@background, 10%); darken(@border, 12%));
   }
 
   &--active,
   &:active,
   &:focus {
-    .btn-color--active(@color; @background; @border);
+    .btn-color--mod(@color; darken(@background, 15%); darken(@border, 17%));
   }
 
   &--disabled,
   &:disabled {
-    .btn-color--disabled(@color; @background; @border);
+    .btn-color--mod(@color; @background; @border);
   }
 }
 
 
 
-//------------------------------------------------------------------------------
-//  Вспомогательная примесь-генератор цветовых стилей для hover
-//------------------------------------------------------------------------------
-
-.btn-color--hover(@color: @text-color; @background: @gray-lighter; @border: @gray-lighter) {
-  color: @color;
-  background-color: darken(@background, 10%);
-  border-color: darken(@border, 12%);
-}
-
-
-
-//------------------------------------------------------------------------------
-//  Вспомогательная примесь-генератор цветовых стилей для active и focus
-//------------------------------------------------------------------------------
-
-.btn-color--active(@color: @text-color; @background: @gray-lighter; @border: @gray-lighter) {
-  color: @color;
-  background-color: darken(@background, 15%);
-  border-color: darken(@border, 17%);
-}
-
-
-
 //------------------------------------------------------------------------------
 //  Вспомогательная примесь-генератор цветовых стилей для disabled
 //------------------------------------------------------------------------------
 
-.btn-color--disabled(@color: @text-color; @background: @gray-lighter; @border: @gray-lighter) {
+.btn-color--mod(@color; @background; @border) {
   color: @color;
   background-color: @background;
   border-color: @border;