feat: [Request] QTimeline always one-sided quasarframework#2324

Author: rstoenescu

src/components/timeline/timeline.ios.styl

@@ -97,62 +97,64 @@
   margin 0
 
 @media (min-width $breakpoint-md-min) and (max-width $breakpoint-md-max)
-  .q-timeline-heading
-    display table-row
-    font-size 200%
-    > div
+  .q-timeline-responsive
+    .q-timeline-heading
+      display table-row
+      font-size 200%
+      > div
+        display table-cell
+    .q-timeline-heading-title
+      margin-left -50px
+    .q-timeline
+      display table
+    .q-timeline-entry
+      display table-row
+      padding 0
+    .q-timeline-subtitle, .q-timeline-dot, .q-timeline-content
       display table-cell
-  .q-timeline-heading-title
-    margin-left -50px
-  .q-timeline
-    display table
-  .q-timeline-entry
-    display table-row
-    padding 0
-  .q-timeline-subtitle, .q-timeline-dot, .q-timeline-content
-    display table-cell
-    vertical-align top
-  .q-timeline-subtitle
-    text-align right
-    width 35%
-  .q-timeline-dot
-    position relative
-  .q-timeline-content
-    padding-left 30px
-  .q-timeline-entry-with-icon .q-timeline-content
-    padding-top 8px
-  .q-timeline-subtitle
-    padding-right 30px
+      vertical-align top
+    .q-timeline-subtitle
+      text-align right
+      width 35%
+    .q-timeline-dot
+      position relative
+    .q-timeline-content
+      padding-left 30px
+    .q-timeline-entry-with-icon .q-timeline-content
+      padding-top 8px
+    .q-timeline-subtitle
+      padding-right 30px
 
 @media (min-width $breakpoint-lg-min)
-  .q-timeline-heading-title
-    text-align center
-    margin-left 0
-  .q-timeline-entry, .q-timeline-subtitle, .q-timeline-dot, .q-timeline-content
-    display block
-    margin 0
-    padding 0
-  .q-timeline-dot
-    position absolute
-    left 50%
-    margin-left -7.15px
-  .q-timeline-entry-with-icon .q-timeline-dot
-    left 50%
-    margin-left -15px
-  .q-timeline-subtitle, .q-timeline-content
-    width 50%
-  .q-timeline-entry-left .q-timeline-content,
-  .q-timeline-entry-right .q-timeline-subtitle
-    float left
-    padding-right 30px
-    text-align right
-  .q-timeline-entry-left .q-timeline-subtitle,
-  .q-timeline-entry-right .q-timeline-content
-    float right
-    text-align left
-    padding-left 30px
-  .q-timeline-entry-with-icon .q-timeline-content
-    padding-top 8px
-  .q-timeline-entry
-    padding-bottom 24px
-    overflow hidden
+  .q-timeline-responsive
+    .q-timeline-heading-title
+      text-align center
+      margin-left 0
+    .q-timeline-entry, .q-timeline-subtitle, .q-timeline-dot, .q-timeline-content
+      display block
+      margin 0
+      padding 0
+    .q-timeline-dot
+      position absolute
+      left 50%
+      margin-left -7.15px
+    .q-timeline-entry-with-icon .q-timeline-dot
+      left 50%
+      margin-left -15px
+    .q-timeline-subtitle, .q-timeline-content
+      width 50%
+    .q-timeline-entry-left .q-timeline-content,
+    .q-timeline-entry-right .q-timeline-subtitle
+      float left
+      padding-right 30px
+      text-align right
+    .q-timeline-entry-left .q-timeline-subtitle,
+    .q-timeline-entry-right .q-timeline-content
+      float right
+      text-align left
+      padding-left 30px
+    .q-timeline-entry-with-icon .q-timeline-content
+      padding-top 8px
+    .q-timeline-entry
+      padding-bottom 24px
+      overflow hidden