Merge branch 'dev' of https://github.com/ASU/asu-unity-stack into dev

ASU · Apr 20, 2021 · 52679d7 · 52679d7
2 parents 402f4e9 + 6e211e7
commit 52679d7
Show file tree

Hide file tree

Showing 20 changed files with 414 additions and 100 deletions.
diff --git a/packages/bootstrap4-theme/package.json b/packages/bootstrap4-theme/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@asu-design-system/bootstrap4-theme",
-  "version": "3.3.2",
+  "version": "3.3.3",
   "description": "Base Bootstrap 4 UI theme for ASU Web Standards 2.0",
   "main": "index.js",
   "repository": {

diff --git a/packages/bootstrap4-theme/src/scss/extends/_cards.scss b/packages/bootstrap4-theme/src/scss/extends/_cards.scss
@@ -9,6 +9,10 @@ Cards - Table of Contents
 6. Foldable - Desktop Disable
 7. Accordion
 8. Quick Links
+9. Checkbox Stacked Cards
+10. Checkbox Inline Cards
+11. Checkbox Inline Cards
+12. Generic Header Image Overlay
 -------------------------------------------------------------------*/
 
 .row-spaced {
@@ -758,53 +762,75 @@ Cards - Table of Contents
 }
 
 /*------------------------------------------------------------------
-11. Checkbox Stacked Cards
+9. Checkbox Stacked Cards
 --------------------------------------------------------------------*/
 
-.card-story-checkbox-stacked .card-header .card-title:after {
+.card-checkbox-stacked .card-header .card-title:after {
   content: $uds-component-card-degree-title-underline-content;
   width: $uds-component-card-degree-title-underline-width;
   height: $uds-component-card-degree-title-underline-height;
   display: $uds-component-card-degree-title-underline-display;
   margin-top: $uds-component-card-degree-title-underline-margin-top;
 }
 
-.card-story-checkbox-stacked .card-header {
+.card-checkbox-stacked .card-header {
   position: relative;
 }
 
-.card-story-checkbox-stacked .card-form {
-  position: absolute;
-  bottom: $uds-component-card-checkbox-stacked-bottom;
-  color: $white;
-}
-
-.card-story-checkbox-stacked .card-footer {
+.card-checkbox-stacked .card-footer {
   background-color: $white;
 }
 
 /*------------------------------------------------------------------
-12. Checkbox Inline Cards
+10. Checkbox Inline Cards
 --------------------------------------------------------------------*/
 
-.card-story-checkbox-stacked .card-header .card-title:after {
+.card-checkbox-stacked .card-header .card-title:after {
   content: $uds-component-card-degree-title-underline-content;
   width: $uds-component-card-degree-title-underline-width;
   height: $uds-component-card-degree-title-underline-height;
   display: $uds-component-card-degree-title-underline-display;
   margin-top: $uds-component-card-degree-title-underline-margin-top;
 }
 
-.card-story-checkbox-inline .card-header {
+.card-checkbox-inline .card-header {
   position: relative;
 }
 
-.card-story-checkbox-inline .card-form {
+.card-checkbox-inline .card-footer {
+  background-color: $white;
+}
+
+/*------------------------------------------------------------------
+11. Checkbox Inline Cards
+--------------------------------------------------------------------*/
+.media-type-overlay {
+  background-color: white;
+  border: 1px solid $uds-color-base-gray-3;
+  border-radius: 32px;
+  width: 64px;
+  height: 64px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+/*------------------------------------------------------------------
+12. Generic Header Image Overlay
+--------------------------------------------------------------------*/
+.card-image-overlay-content {
   position: absolute;
-  bottom: $uds-component-card-checkbox-inline-bottom;
+  bottom: 0;
   color: $white;
+
+  .fa-video {
+    color: $uds-color-base-gray-7;
+    font-size: 2rem;
+  }
 }
 
-.card-story-checkbox-inline .card-footer {
-  background-color: $white;
-}
+.icon-example {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
diff --git a/packages/bootstrap4-theme/src/scss/extends/_misc.scss b/packages/bootstrap4-theme/src/scss/extends/_misc.scss
@@ -108,3 +108,12 @@ label {
   white-space: nowrap;
   width: 1px;
 }
+
+button:focus,
+a:focus,
+input:focus,
+textarea:focus,
+select:focus {
+  outline: none !important;
+  box-shadow: 0px 0px 0px 2px #ffffff, 0px 0px 0px 4px #191919 !important;
+}
diff --git a/packages/bootstrap4-theme/src/scss/extends/_tabs.scss b/packages/bootstrap4-theme/src/scss/extends/_tabs.scss
@@ -26,18 +26,16 @@
   background-color: #191919;
 }
 .background-smokemode {
-  background-color: #E8E8E8;
+  background-color: #e8e8e8;
 }
 .nav-tabs .nav-link.active {
   border-bottom: 8px solid $uds-color-base-maroon;
-}/* hover - maroon text */
+} /* hover - maroon text */
 .darkmode .nav-tabs .nav-link.active {
   border-bottom: 8px solid #ffc627;
-}/* hover - maroon text */
+} /* hover - maroon text */
 .mobile-tabs {
   flex-wrap: inherit;
-  overflow-x: hidden;
-  overflow-y: hidden;
   white-space: nowrap;
   -webkit-overflow-scrolling: touch;
   box-shadow: inset 0px -2px 0px 0px #cdcdcd;
@@ -48,24 +46,24 @@
   white-space: nowrap;
   display: inline-flex;
   transition: all 0.25s ease 0s;
-  left:0px;
+  left: 0px;
 }
 .mobile-tabs .nav-tabs .nav-link:hover,
-.mobile-tabs .nav-tabs .nav-link:focus, {
+.mobile-tabs .nav-tabs .nav-link:focus {
   color: $uds-color-base-maroon;
 }
 .darkmode.mobile-tabs .nav-tabs .nav-link:hover,
-.darkmode.mobile-tabs .nav-tabs .nav-link:focus, {
+.darkmode.mobile-tabs .nav-tabs .nav-link:focus {
   color: #ffc627;
 }
 .mobile-tabs .nav-tabs::-webkit-scrollbar {
   /*display: none;*/
 }
 .tab-content {
-  padding-top:32px;
+  padding-top: 32px;
 }
 .mobile-tabs {
-  position:relative;
+  position: relative;
 }
 .mobile-tabs .scroll::-webkit-scrollbar {
   display: none;
@@ -88,49 +86,56 @@
   height: 100%;
   top: 0;
   left: 0;
-  background: rgba(0,0,0,0);
-  background: linear-gradient(270deg, rgba(25,25,25,0) 0%, rgba(25,25,25,0.25) 100%);
+  background: rgba(0, 0, 0, 0);
+  background: linear-gradient(
+    270deg,
+    rgba(25, 25, 25, 0) 0%,
+    rgba(25, 25, 25, 0.25) 100%
+  );
 }
 .scroll-control-next {
   position: absolute;
   height: 100%;
-  right:0;
-  top:0;
-  background: rgba(0,0,0,0);
-  background: linear-gradient(90deg, rgba(25,25,25,0) 0%, rgba(25,25,25,0.25) 100%);
+  right: 0;
+  top: 0;
+  background: rgba(0, 0, 0, 0);
+  background: linear-gradient(
+    90deg,
+    rgba(25, 25, 25, 0) 0%,
+    rgba(25, 25, 25, 0.25) 100%
+  );
 }
 
 .scroll-control-prev span.carousel-control-prev-icon,
 .scroll-control-next span.carousel-control-next-icon {
   background-size: 60% 60%;
   display: block;
-  opacity:0;
+  opacity: 0;
   padding: 12px 12px;
   margin: 0 8px;
   position: relative;
   top: 50%;
-  transform: translate(0,-50%);
-  background-color:#f1f1f1;
-  border:solid 1px #d0d0d0;
-  border-radius:200px;
-  color:#000;
+  transform: translate(0, -50%);
+  background-color: #f1f1f1;
+  border: solid 1px #d0d0d0;
+  border-radius: 200px;
+  color: #000;
 }
 .scroll-control-prev span.carousel-control-prev-icon {
-  margin:0 42px 0 12px;
+  margin: 0 42px 0 12px;
 }
-.scroll-control-next span.carousel-control-next-icon
-{
- margin:0 12px 0 42px;
+.scroll-control-next span.carousel-control-next-icon {
+  margin: 0 12px 0 42px;
 }
 .scroll-control-prev:hover span.carousel-control-prev-icon,
 .scroll-control-next:hover span.carousel-control-next-icon {
-  opacity:1;
+  opacity: 1;
 }
 .carousel-control-next-icon {
-    background-image: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512' data-fa-i2svg=''><path fill='currentColor' d='M285.476 272.971L91.132 467.314c-9.373 9.373-24.569 9.373-33.941 0l-22.667-22.667c-9.357-9.357-9.375-24.522-.04-33.901L188.505 256 34.484 101.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L285.475 239.03c9.373 9.372 9.373 24.568.001 33.941z'></path></svg>");
+  background-image: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512' data-fa-i2svg=''><path fill='currentColor' d='M285.476 272.971L91.132 467.314c-9.373 9.373-24.569 9.373-33.941 0l-22.667-22.667c-9.357-9.357-9.375-24.522-.04-33.901L188.505 256 34.484 101.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L285.475 239.03c9.373 9.372 9.373 24.568.001 33.941z'></path></svg>");
   background-position: 80% 50%;
 }
 .carousel-control-prev-icon {
-    background-image: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512' data-fa-i2svg=''><path fill='currentColor' d='M34.52 239.03L228.87 44.69c9.37-9.37 24.57-9.37 33.94 0l22.67 22.67c9.36 9.36 9.37 24.52.04 33.9L131.49 256l154.02 154.75c9.34 9.38 9.32 24.54-.04 33.9l-22.67 22.67c-9.37 9.37-24.57 9.37-33.94 0L34.52 272.97c-9.37-9.37-9.37-24.57 0-33.94z'></path></svg>");
-    background-position: 60% 50%;
+  background-image: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512' data-fa-i2svg=''><path fill='currentColor' d='M34.52 239.03L228.87 44.69c9.37-9.37 24.57-9.37 33.94 0l22.67 22.67c9.36 9.36 9.37 24.52.04 33.9L131.49 256l154.02 154.75c9.34 9.38 9.32 24.54-.04 33.9l-22.67 22.67c-9.37 9.37-24.57 9.37-33.94 0L34.52 272.97c-9.37-9.37-9.37-24.57 0-33.94z'></path></svg>");
+  background-position: 60% 50%;
 }
diff --git a/packages/bootstrap4-theme/src/scss/variables/_cards.scss b/packages/bootstrap4-theme/src/scss/variables/_cards.scss
@@ -1,3 +1 @@
 $card-border-radius: 0;
-$uds-component-card-checkbox-stacked-bottom: 0;
-$uds-component-card-checkbox-inline-bottom: 0;