Merge pull request #8 from vuesence/feature/issue-7/add-scss-support

refactor: add SCSS for better CE support

package.json

@@ -1,7 +1,7 @@
 {
   "name": "release-timeline",
   "type": "module",
-  "version": "0.5.4",
+  "version": "0.5.6",
   "private": false,
   "source": "src/index.ts",
   "author": "Ruslan Makarov",

src/ReleaseTimeline.ce.vue

@@ -17,8 +17,8 @@ if (!options) {
 </template>
 
 <style lang="scss">
-@import "./css/user-badge.css";
-@import "./css/timeline-item.css";
-@import "./css/timeline-item-issues.css";
-@import "./css/release-timeline.css";
+@import "./css/user-badge.scss";
+@import "./css/timeline-item.scss";
+@import "./css/timeline-item-issues.scss";
+@import "./css/release-timeline.scss";
 </style>

src/ReleaseTimeline.vue

@@ -78,8 +78,5 @@ onMounted(async () => {
 </template>
 
 <style lang="scss">
-@import "./css/user-badge.css";
-@import "./css/timeline-item.css";
-@import "./css/timeline-item-issues.css";
-@import "./css/release-timeline.css";
+@import "./css/release-timeline.scss";
 </style>

src/TimelineItem.vue

@@ -35,4 +35,5 @@ function formatDate(inputDate: string): string {
 </template>
 
 <style>
+@import "./css/timeline-item.scss";
 </style>

src/TimelineItemIssues.vue

@@ -28,6 +28,9 @@ const tabs = [
   },
 ];
 
+const tabsMobile = tabs;
+tabsMobile[1].title = "pulls";
+
 if (props.options.display.release.defaultOpenTab) {
   curTab.value = props.options.display.release.defaultOpenTab;
 }
@@ -44,7 +47,7 @@ function toggle(_tab: string) {
 <template>
   <div class="issue-tabs">
     <button
-      v-for="tab in tabs"
+      v-for="tab in tabsMobile"
       :key="tab.name"
       class="tab"
       :class="{ active: curTab === tab.name }"
@@ -99,5 +102,6 @@ function toggle(_tab: string) {
   </div>
 </template>
 
-<style>
+<style lang="scss">
+@import "./css/timeline-item-issues.scss";
 </style>

src/UserBadge.vue

@@ -14,3 +14,7 @@ defineProps<{
     </span>
   </a>
 </template>
+
+<style lang="scss">
+@import "./css/user-badge.scss";
+</style>

src/css/timeline-item-issues.scss

@@ -0,0 +1,112 @@
+.release-timeline {
+  a {
+    text-decoration: none;
+    color: var(--rt-c-brand-1);
+  }
+
+  .issues h1,
+  .issues h2,
+  .issues h3,
+  .issues h4,
+  .issues h5,
+  .issues h6 {
+    margin: 7px 0 10px 0;
+    border-top: none;
+    padding: 0;
+  }
+
+  .issue p {
+    margin: 5px 0 3px 0;
+    line-height: .9rem;
+  }
+
+  .commits .issue p,
+  .pulls .issue p {
+    margin: 1px 0 0 0;
+    /* line-height: .9rem; */
+  }
+
+  .tab {
+    text-wrap: nowrap;
+    background-color: inherit;
+    color: var(--rt-c-text-3);
+    cursor: pointer;
+    padding: 2px 5px;
+    text-align: left;
+    border: solid 1px var(--rt-c-border);
+    border-radius: 3px;
+    transition: 0.4s;
+    margin: 7px 7px 0 0;
+    font-size: 0.7rem;
+    text-transform: lowercase;
+    letter-spacing: 0.3px;
+    font-weight: 400;
+    line-height: 0.8rem;
+
+    &.active,
+    &:hover {
+      color: var(--rt-c-text-2);
+      border-color: var(--rt-c-text-2);
+      background-color: var(--rt-c-bg-alt)
+    }
+  }
+
+  .issues {
+    padding-top: 5px;
+    background-color: var(--rt-c-bg-issues);
+    overflow: hidden;
+    max-height: 0;
+    /* transition: all 0.5s cubic-bezier(0, 1, 0, 1); */
+    transition: max-height 0.6s ease-in-out, opacity 0.4s ease-in-out;
+
+
+    section {
+      opacity: 0;
+      display: none;
+      transition: max-height 0.4s ease-in-out, opacity 0.4s ease-in-out;
+
+      &.open {
+        opacity: 1;
+        display: block;
+        transition: max-height 0.4s ease-in-out, opacity 0.4s ease-in-out;
+      }
+    }
+
+    .issue {
+      font-size: 0.8rem;
+      letter-spacing: -0.3px;
+      color: var(--rt-c-text-2);
+      line-height: 0.8rem;
+      display: block;
+      border-style: dashed;
+      border-width: 1px;
+      padding: 3px 4px;
+      border-color: var(--rt-c-border);
+      margin-top: 5px;
+      font-weight: 400;
+
+      h1 {
+        font-size: 1.2rem;
+      }
+
+      h2 {
+        font-size: 1.05rem;
+      }
+
+      h3 {
+        font-size: 1rem;
+      }
+    }
+  }
+}
+
+@media screen and (max-width: 440px) {
+  .issues {
+    margin-left: -20px;
+  }
+
+  .left .issues {
+    margin-right: -20px;
+    text-align: right;
+  }
+}