[FEATURE] Possibility to add icon in the middle of the divider

t3kit · May 5, 2016 · e1b0452 · e1b0452
1 parent aad6c63
commit e1b0452
Show file tree

Hide file tree

Showing 5 changed files with 74 additions and 13 deletions.
diff --git a/dev/styles/main.less b/dev/styles/main.less
@@ -33,6 +33,7 @@
 // typicalContentElements
 @import "main/typicalContentElements/typicalContentElements.less";
 @import "main/typicalContentElements/lightbox.less";
+@import "main/typicalContentElements/divider.less";
 
 
 // elements

diff --git a/dev/styles/main/typicalContentElements/divider.less b/dev/styles/main/typicalContentElements/divider.less
@@ -0,0 +1,44 @@
+// Divider
+
+.ce-div {
+    border-top: 1px solid tint(@main-text-color, 90%);
+}
+
+
+.divider {
+    position: relative;
+    overflow: hidden;
+    text-align: center;
+    margin: 20px 0;
+}
+.divider__wrp {
+    display: inline-block;
+    position: relative;
+    line-height: 1;
+}
+.divider__icon {
+    color: tint(@main-text-color, 80%);
+    font-size: 26px;
+}
+
+.divider__wrp:before, .divider__wrp:after{
+    content: "";
+    display: block;
+    position: absolute;
+    width: 700px;
+    height: 1px;
+    background: tint(@main-text-color, 90%);
+}
+
+.divider__wrp:before {
+    left: 100%;
+    top: 50%;
+    margin-top: -1px;
+    margin-left: 1.8em;
+}
+.divider__wrp:after {
+    right: 100%;
+    bottom: 50%;
+    margin-bottom: -1px;
+    margin-right: 1.8em;
+}
diff --git a/dev/styles/main/typicalContentElements/typicalContentElements.less b/dev/styles/main/typicalContentElements/typicalContentElements.less
@@ -7,8 +7,3 @@
     list-style: none;
     padding-left: 25px;
 }
-
-// Divider
-.ce-div {
-    border-top: 1px solid @border-color;
-}
diff --git a/dev/templates/pages/index.hbs b/dev/templates/pages/index.hbs
@@ -43,6 +43,16 @@ externalLink: false #just add link (http://link.com) instead of "false" to use t
     </div>
 </div>
 
+<div class="container">
+    <div class="row">
+        <div class="col-md-12">
+            {{ renderContent 'divider'
+                icon="devices"
+            }}
+        </div>
+    </div>
+</div>
+
 <div class="container">
     <div class="row">
         <div class="col-md-4">
@@ -110,6 +120,16 @@ externalLink: false #just add link (http://link.com) instead of "false" to use t
     </div>
 </div>
 
+<div class="container">
+    <div class="row">
+        <div class="col-md-12">
+            {{ renderContent 'divider'
+                icon=false
+            }}
+        </div>
+    </div>
+</div>
+
 <div class="container">
     <div class="row">
         <div class="col-md-6">
@@ -132,13 +152,6 @@ externalLink: false #just add link (http://link.com) instead of "false" to use t
 </div>
 
 
-<div class="container">
-    <div class="row">
-        <div class="col-md-12">
-            {{>divider}}
-        </div>
-    </div>
-</div>
 <div class="container">
     <div class="row">
         <div class="col-md-12">

diff --git a/dev/templates/parts/content/typicalContent/divider.hbs b/dev/templates/parts/content/typicalContent/divider.hbs
@@ -1,3 +1,11 @@
 {{!-- content example --}}
 
-<hr class="ce-div">
+{{#if this.icon}}
+    <div class="divider">
+       <div class="divider__wrp">
+           <span class="divider__icon icons icon-{{icon}}"></span>
+       </div>
+    </div>
+{{else}}
+    <hr class="ce-div">
+{{/if}}