library to sexy (wip)

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

+<!--DEV
+
+Нужно убрать пробел между @-ами:
+
+@ @include('blocks/blocks-library/blocks-library.html')
+
+-->
+<div class="blocks-library">content</div>

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

+@import "../../less/variables.less";     // только для удобства обращения к переменным
+@import "../../less/mixins/mixins.less"; // только для удобства обращения к примесям
+
+
+.blocks-library {
+  &__item {
+    position: relative;
+    padding: 1.5rem 2rem 1.5rem 5rem;
+    border: 2px dashed @gray-lighter;
+    margin-bottom: 2rem;
+    min-height: 18rem;
+
+    &:before {
+      content: attr(data-name);
+      position: absolute;
+      text-transform: lowercase;
+      left: 2.5rem;
+      top: 14rem;
+      color: @gray;
+      display: block;
+      font-size: 1.7rem;
+      line-height: 2rem;
+      height: 2rem;
+      text-align: right;
+      white-space: nowrap;
+      width: 15rem;
+      transform: rotate(-90deg);
+      transform-origin: 0 100%;
+    }
+  }
+
+  &__title {
+    margin-top: 0;
+  }
+}

src/less/global-scaffolding.less

@@ -211,7 +211,7 @@ abbr[title] {
 }
 
 blockquote {
-  padding: .5em 0 .5em 1.8em;
+  padding: 0 0 0 1.8em;
   margin-left: 0;
   border-left: 5px solid @border-color;
 

src/less/style.less

@@ -6,6 +6,7 @@
 @import "./src/less/global-grid.less";
 @import "./src/less/global-forms.less";
 
+@import "./src/blocks/blocks-library/blocks-library.less";
 @import "./src/blocks/btn/btn.less";
 @import "./src/blocks/table-responsive/table-responsive.less";
 @import "./src/blocks/field-text/field-text.less";