refactor(Tag): update sass file use variable

exclusion.dic

@@ -56,3 +56,4 @@ Foos
 Localizer
 onchange
 Render
+nowrap

src/BootstrapBlazor.Server/Components/Samples/Timelines.razor

@@ -5,40 +5,30 @@
 
 <h4>@Localizer["TimelinesSubTitle"]</h4>
 
-<DemoBlock Title="@Localizer["TimelinesNormalTitle"]"
-           Introduction="@Localizer["TimelinesNormalIntro"]"
-           Name="Normal">
-    <div class="d-flex mb-3 align-items-center">
+<DemoBlock Title="@Localizer["TimelinesNormalTitle"]" Introduction="@Localizer["TimelinesNormalIntro"]" Name="Normal">
+    <section ignore class="d-flex mb-3 align-items-center">
         <div class="text-nowrap me-1">@Localizer["TimelinesNormalDescription"]</div>
         <RadioList class="flex-fill" TValue="SelectedItem" OnSelectedChanged="@OnStateChanged" Items="@Items1"></RadioList>
-    </div>
+    </section>
     <Timeline Items="TimelineItems" IsReverse="@IsReverse"></Timeline>
 </DemoBlock>
 
-<DemoBlock Title="@Localizer["TimelinesCustomNodeStyleTitle"]"
-           Introduction="@Localizer["TimelinesCustomNodeStyleIntro"]"
-           Name="CustomStyle">
+<DemoBlock Title="@Localizer["TimelinesCustomNodeStyleTitle"]" Introduction="@Localizer["TimelinesCustomNodeStyleIntro"]" Name="CustomStyle">
     <Timeline Items="CustomerTimelineItems" />
 </DemoBlock>
 
-<DemoBlock Title="@Localizer["TimelinesLeftTitle"]"
-           Introduction="@Localizer["TimelinesLeftIntro"]"
-           Name="IsLeft">
-    <p class="mb-3">@((MarkupString)Localizer["TimelinesLeftDescription"].Value)</p>
+<DemoBlock Title="@Localizer["TimelinesLeftTitle"]" Introduction="@Localizer["TimelinesLeftIntro"]" Name="IsLeft">
+    <section ignore class="mb-3">@((MarkupString)Localizer["TimelinesLeftDescription"].Value)</section>
     <Timeline Items="AlternateTimelineItems" IsLeft="true" />
 </DemoBlock>
 
-<DemoBlock Title="@Localizer["TimelinesAlternateTitle"]"
-           Introduction="@Localizer["TimelinesAlternateIntro"]"
-           Name="IsAlternate">
-    <p class="mb-3">@((MarkupString)Localizer["TimelinesAlternateDescription"].Value)</p>
+<DemoBlock Title="@Localizer["TimelinesAlternateTitle"]" Introduction="@Localizer["TimelinesAlternateIntro"]" Name="IsAlternate">
+    <section ignore class="mb-3">@((MarkupString)Localizer["TimelinesAlternateDescription"].Value)</section>
     <Timeline Items="AlternateTimelineItems" IsAlternate="true" />
 </DemoBlock>
 
-<DemoBlock Title="@Localizer["TimelinesDisplayCustomComponentTitle"]"
-           Introduction="@Localizer["TimelinesDisplayCustomComponentIntro"]"
-           Name="CustomComponent">
-    <p class="mb-3">@((MarkupString)Localizer["TimelinesDisplayCustomComponentDescription"].Value)</p>
+<DemoBlock Title="@Localizer["TimelinesDisplayCustomComponentTitle"]" Introduction="@Localizer["TimelinesDisplayCustomComponentIntro"]" Name="CustomComponent">
+    <section ignore class="mb-3">@((MarkupString)Localizer["TimelinesDisplayCustomComponentDescription"].Value)</section>
     <Timeline Items="GetCustomerComponentTimelineItems()" />
 </DemoBlock>
 

src/BootstrapBlazor.Server/Locales/en.json

@@ -3953,7 +3953,7 @@
     "TimelinesTitle": "Timeline",
     "TimelinesSubTitle": "Visualize time flow information",
     "TimelinesNormalTitle": "Basic usage",
-    "TimelinesNormalIntro": "Timeline can be split into multiple activities arranged in positive or reverse order of timestamps, which are an important feature that distinguishes them from other controls, and should be used with care to distinguish them from steps bar.",
+    "TimelinesNormalIntro": "<code>Timeline</code> can be split into multiple <cdoe>activities</code> arranged in positive or reverse order of timestamps, which are an important feature that distinguishes them from other controls, and should be used with care to distinguish them from <code>Step</code> component.",
     "TimelinesNormalDescription": "sort:",
     "TimelinesCustomNodeStyleTitle": "Customize the node style",
     "TimelinesCustomNodeStyleIntro": "You can customize the node color according to the actual scene, or use the icon directly.",

src/BootstrapBlazor.Server/Locales/zh.json

@@ -3953,7 +3953,7 @@
     "TimelinesTitle": "Timeline 时间线",
     "TimelinesSubTitle": "可视化地呈现时间流信息",
     "TimelinesNormalTitle": "基础用法",
-    "TimelinesNormalIntro": "Timeline 可拆分成多个按照时间戳正序或倒序排列的 activity，时间戳是其区分于其他控件的重要特征，使⽤时注意与 Steps 步骤条等区分。",
+    "TimelinesNormalIntro": "<cdoe>Timeline</code> 可拆分成多个按照时间戳正序或倒序排列的 <cdoe>activity</code>，时间戳是其区分于其他控件的重要特征，使⽤时注意与 <cdoe>Steps</code> 步骤条等区分。",
     "TimelinesNormalDescription": "排序：",
     "TimelinesCustomNodeStyleTitle": "⾃定义节点样式",
     "TimelinesCustomNodeStyleIntro": "可根据实际场景⾃定义节点颜⾊，或直接使⽤图标。",

src/BootstrapBlazor/Components/Timeline/Timeline.razor.scss

@@ -1,95 +1,94 @@
-.timeline {
+.timeline {
+    --bb-timeline-item-padding: #{$bb-timeline-item-padding};
+    --bb-timeline-line-width: #{$bb-timeline-line-width};
+    --bb-timeline-node-bg: #{$bb-timeline-node-bg};
+    --bb-timeline-timestamp-color: #{$bb-timeline-timestamp-color};
     margin: 0;
     padding: 0;
     list-style: none;
 }
 
-    .timeline .time-line-item {
-        position: relative;
-        padding-bottom: 1rem;
-    }
-
-        .timeline .time-line-item:last-child {
-            padding-bottom: 0;
-        }
-
-        .timeline .time-line-item .time-line-item-tail {
-            position: absolute;
-            left: 4px;
-            height: 100%;
-            border-left: 2px solid #e4e7ed;
-        }
-
-        .timeline .time-line-item:last-child .time-line-item-tail {
-            display: none
-        }
-
-    .timeline .timeline-item-node-normal {
-        left: -1px;
-        width: 12px;
-        height: 12px;
-    }
-
-    .timeline .timeline-item-node {
-        position: absolute;
-        background-color: #e4e7ed;
-        border-radius: 50%;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-    }
-
-        .timeline .timeline-item-node.is-icon {
-            background-color: transparent;
-        }
-
-    .timeline .timeline-item-wrapper {
-        position: relative;
-        padding-left: 1.5rem;
-        top: -4px;
-    }
-
-    .timeline .timeline-item-content {
-        color: #303133;
-    }
-
-    .timeline .timeline-item-timestamp {
-        margin-top: 0.5rem;
-        color: #909399;
-    }
-
-    .timeline.is-alternate .time-line-item-tail,
-    .timeline.is-alternate .timeline-item-node {
-        left: 50%;
-    }
-
-    .timeline.is-alternate .timeline-item-node {
-        margin-left: -5px;
-    }
-
-    .timeline.is-alternate .time-line-item:nth-child(odd) .timeline-item-wrapper {
-        left: calc(50% - 5px);
-        width: calc(50% - 1rem);
-        text-align: left;
-    }
-
-    .timeline.is-alternate .time-line-item:nth-child(even) .timeline-item-wrapper {
-        width: calc(50% - 1rem);
-        margin: 0;
-        text-align: right;
-    }
-
-    .timeline.is-left .time-line-item-tail,
-    .timeline.is-left .timeline-item-node {
-        left: 100%;
-    }
-
-    .timeline.is-left .timeline-item-node {
-        margin-left: -5px;
-    }
-
-    .timeline.is-left .time-line-item .timeline-item-wrapper {
-        width: calc(100% - 1rem);
-        margin: 0;
-        text-align: right;
-    }
+.timeline .time-line-item {
+    position: relative;
+}
+
+.timeline .time-line-item:not(:last-child) {
+    padding: var(--bb-timeline-item-padding);
+}
+
+.timeline .time-line-item .time-line-item-tail {
+    position: absolute;
+    left: 4px;
+    height: 100%;
+    border-left: var(--bb-timeline-line-width) solid var(--bs-border-color);
+}
+
+.timeline .time-line-item:last-child .time-line-item-tail {
+    display: none
+}
+
+.timeline .timeline-item-node-normal {
+    left: -1px;
+    width: 12px;
+    height: 12px;
+}
+
+.timeline .timeline-item-node {
+    position: absolute;
+    background-color: var(--bb-timeline-node-bg);
+    border-radius: 50%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.timeline .timeline-item-node.is-icon {
+    background-color: transparent;
+}
+
+.timeline .timeline-item-wrapper {
+    position: relative;
+    padding-left: 1.5rem;
+    top: -4px;
+}
+
+.timeline .timeline-item-timestamp {
+    margin-top: 0.5rem;
+    color: var(--bb-timeline-timestamp-color);
+}
+
+.timeline.is-alternate .time-line-item-tail,
+.timeline.is-alternate .timeline-item-node {
+    left: 50%;
+}
+
+.timeline.is-alternate .timeline-item-node {
+    margin-left: -5px;
+}
+
+.timeline.is-alternate .time-line-item:nth-child(odd) .timeline-item-wrapper {
+    left: calc(50% - 5px);
+    width: calc(50% - 1rem);
+    text-align: left;
+}
+
+.timeline.is-alternate .time-line-item:nth-child(even) .timeline-item-wrapper {
+    width: calc(50% - 1rem);
+    margin: 0;
+    text-align: right;
+}
+
+.timeline.is-left .time-line-item-tail,
+.timeline.is-left .timeline-item-node {
+    left: 100%;
+}
+
+.timeline.is-left .timeline-item-node {
+    margin-left: -5px;
+}
+
+.timeline.is-left .time-line-item .timeline-item-wrapper {
+    width: calc(100% - 1rem);
+    margin: 0;
+    text-align: right;
+}

src/BootstrapBlazor/wwwroot/scss/theme/bootstrap.blazor.scss

@@ -569,4 +569,10 @@ $bb-tag-line-height: 30px;
 $bb-tag-font-size: 12px;
 $bb-tag-align: center;
 
+// Timeline
+$bb-timeline-item-padding: 0 0 1rem 0;
+$bb-timeline-line-width: 2px;
+$bb-timeline-node-bg: #e4e7ed;
+$bb-timeline-timestamp-color: #c0c4cc;
+
 @import "../components.scss";