link+icon: implement (close #771)

bem · Jul 30, 2014 · 4241f39 · 4241f39
1 parent b98d594
commit 4241f39
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 10 deletions.
diff --git a/common.blocks/icon/icon.styl b/common.blocks/icon/icon.styl
@@ -1,27 +1,27 @@
 .icon
 {
-    position: relative;
-
     display: inline-block;
 
+    text-align: center;
+
     background: 50% no-repeat;
 
     /* Hack for correct baseline positioning */
-    &:after
+    &:empty:after
     {
         visibility: hidden;
 
         content: '\00A0';
     }
 
+    /*
+     * Чтобы иконка правильно позиционировалась внутри блочного контекста,
+     * нужно прописать родителю свойство line-height со значением, равным высоте иконки
+     */
     .image
     {
-        position: absolute;
-        top: 0;
-        right: 0;
-        bottom: 0;
-        left: 0;
+        margin: -5.18em 0 -5em; /* 0.18 — magic number, empirically found */
 
-        margin: auto;
+        vertical-align: middle;
     }
 }
diff --git a/common.blocks/icon/icon.tests/simple.bemjson.js b/common.blocks/icon/icon.tests/simple.bemjson.js
@@ -49,7 +49,7 @@
                 'Inline content: ',
                 {
                     block : 'icon',
-                    content : '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><path d="M1 13v2h14v-2h-14zm13-7h-3v-5h-6v5.031l-3-.031 6 6 6-6z"/></svg>'
+                    content : '<svg class="image" xmlns="http://www.w3.org/2000/svg" width="16" height="16"><path d="M1 13v2h14v-2h-14zm13-7h-3v-5h-6v5.031l-3-.031 6 6 6-6z"/></svg>'
                 }
             ]
         }

diff --git a/common.blocks/link/link.tests/simple.bemjson.js b/common.blocks/link/link.tests/simple.bemjson.js
@@ -44,6 +44,30 @@
                     url : 'http://example.com/',
                     tabIndex : -1,
                     content : 'out of tab order'
+                },
+                {
+                    block : 'link',
+                    url : 'http://example.com/',
+                    content : [
+                        {
+                            block : 'icon',
+                            attrs : { style : 'width: 22px' },
+                            mods : { action : 'download' }
+                        },
+                        'with icon'
+                    ]
+                },
+                {
+                    block : 'link',
+                    url : 'http://example.com/',
+                    content : [
+                        {
+                            block : 'icon',
+                            attrs : { style : 'width: 22px' },
+                            content : '<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="1 1 14 14" class="image"><path d="M1 13v2h14v-2h-14zm13-7h-3v-5h-6v5.031l-3-.031 6 6 6-6z"/></svg>'
+                        },
+                        'with icon + image'
+                    ]
                 }
             ].map(function(link, j) {
                 link.mods || (link.mods = {});