Merge branch 'dev' into main

PDIS · Mar 30, 2022 · 96833ab · 96833ab
2 parents 278e708 + 2a5c118
commit 96833ab
Show file tree

Hide file tree

Showing 8 changed files with 73 additions and 22 deletions.
diff --git a/dist/css/pdis-design-system.css b/dist/css/pdis-design-system.css
diff --git a/dist/css/pdis-design-system.css.map b/dist/css/pdis-design-system.css.map
diff --git a/dist/css/pdis-design-system.min.css b/dist/css/pdis-design-system.min.css
diff --git a/dist/css/pdis-design-system.min.css.map b/dist/css/pdis-design-system.min.css.map
diff --git a/scss/_list.scss b/scss/_list.scss
@@ -4,11 +4,16 @@
     display: flex;
     align-items: center;
     border: none;
-    padding: 1rem;
+    padding: 0.75rem;
 
     .list-group-item-subheader {
       @extend .body-text-sm;
       margin-left: 0.5rem;
+      color: var(--on-surface-variant);
+    }
+
+    .list-group-item-header {
+      min-width: max-content;
     }
 
     i {
@@ -30,9 +35,13 @@
       text-decoration: none;
     }
 
-    &:hover, &:focus, &:active {
+    &:hover {
       background-color: var(--surface);
     }
+
+    &:focus, &:active {
+      background-color: var(--surface-1);
+    }
   }
 
   &.divider {

diff --git a/scss/_tabs.scss b/scss/_tabs.scss
@@ -17,6 +17,7 @@
     margin-right: 0.25rem;
     font-size: 1.125rem;
     font-weight: 500;
+    vertical-align: middle;
 
     &:first-child {
       margin-left: 0;
@@ -26,6 +27,10 @@
       margin-right: 0;
     }
   }
+
+  span {
+    vertical-align: middle;
+  }
 }
 
 .tab-text-sm {
@@ -47,6 +52,7 @@
     margin-right: 0.25rem;
     font-size: 1rem;
     font-weight: 500;
+    vertical-align: middle;
 
     &:first-child {
       margin-left: 0;
@@ -56,6 +62,10 @@
       margin-right: 0;
     }
   }
+
+  span {
+    vertical-align: middle;
+  }
 }
 
 .tab-text-lg {
@@ -77,7 +87,8 @@
     margin-right: 0.25rem;
     font-size: 1.25rem;
     font-weight: 500;
-
+    vertical-align: middle;
+
     &:first-child {
       margin-left: 0;
     }
@@ -86,6 +97,10 @@
       margin-right: 0;
     }
   }
+
+  span {
+    vertical-align: middle;
+  }
 }
 
 
@@ -113,6 +128,7 @@
       &:disabled {
         background: none;
         border-bottom: 2px solid var(--surface);
+        color: var(--outline);
       }
 
       &.active {
@@ -127,22 +143,22 @@
   .nav-link {
     @extend .tab-text;
     text-decoration: none;
-    margin-left: 2px;
-    margin-right: 2px;
-
+    border: 2px solid transparent;
     // &:hover {
     //   color: var(--on-background);
     //   background-color: var(--surface);
     // }
 
     &:disabled {
       background: none;
+      color: var(--outline);
     }
 
     &.active {
       color: var(--on-background);
       background-color: var(--surface-1);
-      //box-shadow: 0 0 0 2px var(--brand-flat-strong);
+      box-shadow: none !important;
+      border: 2px solid var(--brand-flat-strong);
     }
   }
 }

diff --git a/site/content/docs/components/list.md b/site/content/docs/components/list.md
@@ -40,19 +40,23 @@ toc: true
 {{< example >}}
 
 <div class="row">
-  <div class="col">
+  <div class="col-6">
     <ul class="list-group twoline">
       <li class="list-group-item"><i class="bi bi-arrow-counterclockwise"></i><div>列表主要文字<div class="list-group-item-subheader">列表補充文字內容</div></div><i class="bi bi-arrow-counterclockwise"></i></li>
-      <li class="list-group-item"><div>列表主要文字<div class="list-group-item-subheader">列表補充文字內容</div></div></li>
+      <li class="list-group-item"><div class="d-grid"><div class="text-truncate">列表主要文字列表主要文字列表主要文字列表主要文字</div><div class="list-group-item-subheader text-truncate">列表補充文字內容列表補充文字內容列表補充文字內容列表補充文字內容列表補充文字內容列表補充文字內容</div></div></li>
       <li class="list-group-item"><span class="badge">badge</span><div>列表主要文字<div class="list-group-item-subheader">列表補充文字內容</div></div></li>
+      <li class="list-group-item"><span class="badge bg-accent-flat">04-22</span><div>列表主要文字</div><i class="bi bi-exclamation-triangle-fill"></i></li>
     </ul>
   </div>
 </div>
 <br/>
 <div class="row">
   <div class="col">
+   <ul class="list-group twoline">
+      	<li class="list-group-item">列表主要文字<div class="list-group-item-subheader">列表補充文字內容</div></li>
+      </ul>
     <ul class="list-group">
-      <li class="list-group-item">標題</li>
+          	<li class="list-group-item"><div class="list-group-item-header">列表主要文字</div><div class="list-group-item-subheader d-inline-block text-truncate">列表補充文字內容列表補充文字內容列表補充文字內容列表補充文字內容列表補充文字內容列表補充文字內容列表補充文字內容</div></li>
       <li class="list-group-item">標題</li>
       <li class="list-group-item">標題</li>
     </ul>
@@ -61,8 +65,8 @@ toc: true
 <div class="row">
   <div class="col">
     <ul class="list-group">
-      <li class="list-group-item"><span>標題</span><i class="bi bi-arrow-counterclockwise"></i></li>
-      <li class="list-group-item"><i class="bi bi-arrow-counterclockwise"></i><span>標題</span></li>
+      <a href="#" class="list-group-item"><span>標題</span><i class="bi bi-arrow-counterclockwise"></i></a>
+      <a href="#" class="list-group-item"><i class="bi bi-arrow-counterclockwise"></i><span>標題</span></a>
       <li class="list-group-item"><span class="badge">badge</span><span>標題</span></li>
     </ul>
   </div>

diff --git a/site/content/docs/components/tabs.md b/site/content/docs/components/tabs.md
@@ -63,7 +63,7 @@ group: components
         <button class="nav-link" id="tab2" data-bs-toggle="tab" data-bs-target="#content2" type="button" role="tab" aria-controls="tab2" aria-selected="false">頁籤項目</button>
       </li>
       <li class="nav-item" role="presentation">
-        <button class="nav-link" id="tab3" data-bs-toggle="tab" data-bs-target="#content3" type="button" role="tab" aria-controls="tab3" aria-selected="false">頁籤項目</button>
+        <button class="nav-link" disabled id="tab3" data-bs-toggle="tab" data-bs-target="#content3" type="button" role="tab" aria-controls="tab3" aria-selected="false">頁籤項目</button>
       </li>
     </ul>
     <div class="tab-content" id="tabContent">
@@ -157,10 +157,10 @@ group: components
   <div class="col-12">
     <ul class="nav nav-tabs" id="tab-icon" role="tablist">
       <li class="nav-item" role="presentation">
-        <button class="nav-link active" id="tab1-icon" data-bs-toggle="tab" data-bs-target="#content1-icon" type="button" role="tab" aria-controls="tab1-icon" aria-selected="true"><i class="bi bi-box-seam icon"></i>寄包裹</button>
+        <button class="nav-link active" id="tab1-icon" data-bs-toggle="tab" data-bs-target="#content1-icon" type="button" role="tab" aria-controls="tab1-icon" aria-selected="true"><i class="bi bi-house-door"></i><span>寄包裹</span></button>
       </li>
       <li class="nav-item" role="presentation">
-        <button class="nav-link" id="tab2-icon" data-bs-toggle="tab" data-bs-target="#content2-icon" type="button" role="tab" aria-controls="tab2-icon" aria-selected="false"><i class="bi bi-envelope icon"></i>寄信件</button>
+        <button class="nav-link" id="tab2-icon" data-bs-toggle="tab" data-bs-target="#content2-icon" type="button" role="tab" aria-controls="tab2-icon" aria-selected="false"><i class="bi bi-info-circle"></i><span>寄信件</span></button>
       </li>
     </ul>
     <div class="tab-content" id="tabContent-icon">