Merge branch 'dev'

PDIS · May 12, 2022 · 8b0588c · 8b0588c
2 parents 2ace6fd + 73e19a1
commit 8b0588c
Show file tree

Hide file tree

Showing 6 changed files with 44 additions and 49 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/_footer.scss b/scss/_footer.scss
@@ -1,15 +1,15 @@
 footer {
   background-color: var(--surface-variant);
+  margin-top: 1.5rem;
   padding-top: 2.25rem;
   padding-bottom: 2.25rem;
 
-
   .title {
     @extend .title-text;
   }
 
   .nav {
-    margin: 0.5rem 0;
+    margin: 0.25rem 0;
 
     .nav-item {
       margin: 0.25rem 0;
@@ -18,6 +18,10 @@ footer {
       &:last-child {
         margin-right: 0;
       }
+
+      i {
+        font-size: 1.5rem;
+      }
     }
 
     &.nav-secondary {
@@ -48,42 +52,11 @@ footer {
 /*   hr {
     margin: 0.75rem 0;
   } */
-}
-
-// footer {
-// 	.nav {
-// 		justify-content: flex-end;
-
-// 		@media (max-width: 992px) { 
-// 			flex-direction: column;
-// 		}
-// 	}
 
-// 	.top-nav {
-// 		justify-content: center;
-
-// 		@media (max-width: 992px) { 
-// 			flex-direction: row;
-// 			justify-content: start;
-// 		}
-// 	}
-
-// 	.accessibility-container {
-// 		margin:1rem 0.5rem 1rem 0.75rem;
-// 		text-align: end;
-
-// 		@media (max-width: 992px) { 
-// 			text-align: start;
-// 		}
-// 	}
-
-// 	.social-container {
-// 		margin:1rem 0.5rem 1rem 0.75rem;
-// 		text-align: end;
+  &.bg-brand {
+    * {
+      color: var(--on-brand);
+    }
+  }
+}
 
-// 		@media (max-width: 992px) { 
-// 			text-align: start;
-// 		}
-// 	}
-
-// }
diff --git a/site/content/docs/examples/footers/footer1.md b/site/content/docs/examples/footers/footer1.md
@@ -4,6 +4,9 @@ layout: components-example
 
 {{< example >}}
 
+<div class="d-flex justify-content-center">
+  <button type="button" class="btn btn-less-important"><i class="bi bi-arrow-up-circle"></i><span>回到最上方</span</button>
+</div>
 <footer>
   <div class="container">
     <div class="title">便民服務</div>
@@ -17,15 +20,27 @@ layout: components-example
       <li class="nav-item"><a href="#">網站導覽</a></li>
     </ul>
     <hr></hr>
+    <ul class="nav nav-secondary">
+      <li class="nav-item"><a href="#"><i class="bi bi-twitter"></i></a></li>
+      <li class="nav-item"><a href="#"><i class="bi bi-facebook"></i></a></li>
+      <li class="nav-item"><a href="#"><i class="bi bi-youtube"></i></a></li>
+    </ul>
     <p>© 中華民國經濟部 2022</p>
     <p>地址：100009 臺北市中正區忠孝東路1段1號</p>
     <p>總機電話：(02)3356-6500</p>
-    <ul class="nav nav-secondary">
-      <li class="nav-item"><a href="#">網站安全政策</a></li>
-      <li class="nav-item"><a href="#">無障礙聲明</a></li>
-      <li class="nav-item"><a href="#">政府網站資料開放宣告</a></li>
-      <li class="nav-item"><a href="#">隱私權政策</a></li>
-    </ul>
+    <div class="row">
+      <div class="col-12 d-md-flex justify-content-md-between">
+        <ul class="nav nav-secondary">
+          <li class="nav-item"><a href="#">網站安全政策</a></li>
+          <li class="nav-item"><a href="#">無障礙聲明</a></li>
+          <li class="nav-item"><a href="#">政府網站資料開放宣告</a></li>
+          <li class="nav-item"><a href="#">隱私權政策</a></li>
+        </ul>
+        <div class="align-self-md-center" >
+          <img src="/img/accessibility.jpg" alt="accessibility" width="90">
+        </div>
+      </div>
+    </div>
   </div>
 </footer>