[FEATURE] improve divider el

t3kit · May 17, 2016 · f5db27f · f5db27f
1 parent 039867c
commit f5db27f
Show file tree

Hide file tree

Showing 4 changed files with 53 additions and 32 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
@@ -45,7 +46,7 @@
 @import "main/contentElements/socialIcons.less";
 @import "main/contentElements/parallax.less";
 
-// wrappers
+// appearance
 @import "main/appearance/wrapperStyle/blueMountainWrp.less";
 @import "main/appearance/wrapperStyle/blueMountainHeader.less";
 @import "main/appearance/wrapperStyle/inverse.less";
@@ -58,11 +59,6 @@
 @import "main/nav/breadcrumbs.less";
 @import "main/nav/subNavigation.less";
 
-// @import "main/custom/grayBackground.less";
-// @import "main/custom/mosaic.less";
-// @import "main/custom/fullWidthImageContent.less";
-// @import "main/custom/dividerIcon.less";
-
 // print styles
 @import "main/print.less";
 

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,23 +7,3 @@
     list-style: none;
     padding-left: 25px;
 }
-
-// Divider
-.ce-div {
-    border-top: 1px solid @border-color;
-}
-
-// Divider Icon
-
-.ce-div.icons {
-    text-align: center;
-}
-
-.ce-div.icons:before{
-    display: inline-block;
-    position: relative;
-    top: -0.6em;
-    font-size: 18px;
-    padding: 0 0.55em;
-    background: white;
-}
diff --git a/dev/templates/parts/content/typicalContent/divider.hbs b/dev/templates/parts/content/typicalContent/divider.hbs
@@ -1,8 +1,9 @@
-{{!-- content example --}}
-{{#if this.iconClass}}
-<div class='dividerIcon'>
-    <span class="icons {{iconClass}}"></span>
-</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">
+    <hr class="ce-div">
 {{/if}}