Updated timeline styles to prevent line from overlapping first and la…

…st entry; Closes #1491
luyadev · Sep 19, 2017 · dd4960e · dd4960e
1 parent 959a896
commit dd4960e
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 71 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -20,6 +20,7 @@ All notable changes to this project will be documented in this file. This projec
 
 ### Fixed
 
+- [#1491](https://github.com/luyadev/luya/issues/1491) Updated tab styling to support nested tab contents (tab-content, tab-pane)
 - [#1490](https://github.com/luyadev/luya/issues/1490) Updated tab styling to support nested tab contents (tab-content, tab-pane)
 - [#1489](https://github.com/luyadev/luya/issues/1489) Changed default checkbox styles and updated checkbox html in all files
 - [#1455](https://github.com/luyadev/luya/issues/1455) Re-Implemented the group function for crud; Updated card styles to support toggle icon

diff --git a/modules/admin/src/resources/dist/css/admin.css b/modules/admin/src/resources/dist/css/admin.css
diff --git a/modules/admin/src/resources/scss/components/_timeline.scss b/modules/admin/src/resources/scss/components/_timeline.scss
@@ -2,104 +2,77 @@
     display: block;
     position: relative;
     @include clearfix;
+}
+
+.timeline-item {
+    display: block;
+    padding-left: 20px;
+    position: relative;
 
     &:before {
-        background-color: theme-color(primary);
+        background-color: darken(#F7F7F7, 20);
         bottom: 0;
         content: "";
+        left: 4px;
         position: absolute;
         top: 0;
         width: 2px;
+        z-index: 10;
     }
-
-    &-center {
-        &:before {
-            left: 50%;
-            transform: translateX(-50%);
-        }
-    }
-    &-left {
-        &:before {
-            left: 4px;
-            transform: none;
-        }
-    }
-    &-right {
-        &:before {
-            right: 4px;
-            transform: none;
-        }
-    }
-}
-
-.timeline-item {
-    display: block;
-    position: relative;
-
-    &:not(:first-of-type) {
-        margin-top: 25px;
-    }
-    .timeline-compact > &:not(:first-of-type) {
-        margin-top: 10px;
-    }
-    .timeline-center.timeline-compact > &:not(:first-of-type) {
-        margin-top: 20px;
-    }
-
-    &:before {
+    &:after {
         background-color: theme-color(light);
-        border: 2px solid theme-color(primary);
+        border: 2px solid darken(#F7F7F7, 20);
         border-radius: 50%;
         content: "";
         height: 10px;
+        left: 0;
         position: absolute;
-        top: 0;
+        top: 3px;
         width: 10px;
-    }
-    &-center-point:before {
-        top: 50%;
-        transform: translateY(-50%);
+        z-index: 20;
     }
 
-    .timeline-center > & {
-        clear: both;
+    &:first-of-type:before {
+        top: 5px;
+    }
 
-        &:nth-of-type(odd) {
-            float: left;
-            padding-right: 20px;
-            text-align: right;
-            width: 50%;
+    &:not(:first-of-type) {
+        margin-top: 25px;
 
-            &:before {
-                right: -5px;
-            }
+        &:before {
+            top: -25px;
         }
-        &:nth-of-type(even) {
-            float: right;
-            padding-left: 20px;
-            width: 50%;
-
-            &:before {
-                left: -5px;
-            }
+        &:last-of-type:before {
+            bottom: auto;
+            height: 30px;
         }
     }
 
-    .timeline-left > & {
-        padding-left: 20px;
-        text-align: left;
+    .timeline-compact > &:not(:first-of-type) {
+        margin-top: 10px;
 
         &:before {
-            left: 0;
+            top: -10px;
+        }
+        &:last-of-type:before {
+            bottom: auto;
+            height: 15px;
         }
     }
 
-    .timeline-right > & {
-        padding-right: 20px;
-        text-align: right;
+    .timeline-compact &-center-point,
+    &-center-point {
+        &:after {
+            top: 50%;
+            transform: translateY(-50%);
+        }
 
-        &:before {
-            right: 0;
+        &:first-of-type:before {
+            top: 50%;
+        }
+        &:last-of-type:before {
+            bottom: 50% !important;
+            height: auto !important;
         }
     }
 }