kcc-gem-theme-core 0.0.1

data/assets/scss/1-base/_buttons.scss

@@ -0,0 +1,200 @@
+.navbar-light .navbar-nav .nav-link.buttons__btn-primary-custom {
+  background-color: $primary-red;
+  color: $white;
+  &:hover {
+    background-color: $primary-blue;
+  }
+}
+
+.buttons__yt-subscribe {
+  display: inline-block;
+  height: 1rem;
+  margin-top: -4px;
+  margin-right: 5px;
+  transform: scale(1.8,1.8);
+  vertical-align: middle;
+  width: 1rem;
+}
+
+.buttons__custom-danger {
+  margin-right: 20px;
+}
+
+.buttons__btn-margin-top {
+  margin-top: 20px;
+}
+
+.btn-primary {
+  background-color: $btn-primary-bg;
+  border-color: $btn-primary-border;
+}
+
+.btn-primary:hover {
+  background-color: $btn-hover-bg;
+  border-color: $btn-hover-border;
+}
+
+.buttons__no-decoration {
+  text-decoration: none;
+  &:hover {
+    text-decoration: none;
+  }
+  &:focus {
+    text-decoration: none;
+  }
+  &:visited {
+    text-decoration: none;
+  }
+}
+
+.buttons{
+  display: inline-block;
+  padding-left: .9rem;
+  padding-right: .9rem;
+  padding-top: .125rem;
+  padding-bottom: .125rem;
+  &__my-kcc {
+    border-color: $color-blue-grey;
+    padding-top: .125rem;
+    padding-bottom: .125rem;
+    margin-top: 0.25rem;
+    margin-bottom: .375rem;
+    position: absolute;
+    top: 50px;
+    right: calc(56px + 1rem);
+    z-index: 1;
+  }
+  &__my-kcc--hidden {
+    transition-duration: .2s;
+    transition-property: opacity;
+    transition-timing-function: ease-in-out;
+    transition-delay: .25s;
+    visibility: hidden;
+    opacity: 0;
+  }
+}
+
+@media screen and (min-width: 992px) {
+  .buttons__my-kcc {
+    top: unset;
+    right: unset;
+  }
+}
+
+.header-global__open .buttons__my-kcc--hidden {
+  visibility: visible;
+  opacity: 1;
+}
+
+@media screen and (min-width: 992px) {
+  .buttons__my-kcc:hover,
+  .buttons__my-kcc:focus {
+    //color: $white;
+    background-color: #0c3050;
+  }
+}
+
+@media screen and (max-width: 992px) {
+  .buttons__my-kcc:hover,
+  .buttons__my-kcc:focus {
+    color: $primary-red;
+  }
+}
+
+.buttons__action {
+  color: $white;
+  background-color: $primary-red;
+  border-color: $color-red-darker;
+  font-family: $font-family-headings;
+  font-size: 1.3rem;
+  font-weight: $font-weight-bolder; //dash
+  line-height: 36px;
+  letter-spacing: .075rem;
+  width: 100%;
+  &:hover,
+  &:focus {
+    color: $white;
+    background-color: $primary-blue;
+  }
+}
+
+@media screen and (min-width: 360px) {
+  .buttons__action {
+    font-size: 1.75rem;
+    line-height: 48px;
+  }
+}
+
+@media screen and (min-width: 768px) {
+  .buttons__action {
+    font-size: 1.3rem;
+    line-height: 36px;
+  }
+}
+
+@media screen and (min-width: 992px) {
+  .buttons__action {
+    font-size: 1.75rem;
+    line-height: 48px;
+  }
+}
+
+
+.buttons--sync {
+  // bottom: 1px;
+  padding: .5rem;
+  opacity: 0;
+  // position: absolute;
+  // right: 1px;
+  transition: opacity ease-in-out .25s;
+}
+
+@media screen and (max-width: 991px) {
+  .buttons--sync {
+    bottom: 1px;
+    position: absolute;
+    right: 1px;
+  }
+}
+
+@media screen and (min-width: 992px) {
+  .buttons--sync:hover,
+  .buttons--sync:focus {
+    border-color: rgba(0, 86, 179, .65);
+    border-style: solid;
+    border-width: 1px;
+  }
+}
+
+@keyframes show {
+  0% {
+    opacity: 0;
+  }
+  25% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 1;
+  }
+  75% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+
+.buttons--sync--preview {
+  animation-name: show;
+  animation-duration: 3s;
+  animation-timing-function: ease-in-out;
+}
+
+.alert:hover .buttons--sync,
+.alert:focus .buttons--sync {
+  opacity: 1;
+}
+
+.buttons--sync--visible {
+  opacity: 1;
+}

data/assets/scss/1-base/_header-global.scss

@@ -0,0 +1,483 @@
+// Styles for the global KCC header
+// ================================
+
+.header-global {
+  padding-left: 0;
+  padding-right: 0;
+  &__brand {
+    left: 1rem;
+    position: absolute;
+    right: 3.25rem;  // clears the search icon/button
+    top: 0;
+    z-index: 1044;
+  }
+  &__navbar--padding {
+    padding: 0;
+  }
+  &__nav-top {
+    background-color: $primary-blue;
+    flex-direction: row;
+    padding-left: 1rem;
+    padding-right: calc(2.5rem + 20px);
+    width: 100%;
+  }
+  &__nav-bottom {
+    background-color: $primary-red;
+    flex-direction: row;
+    padding-left: 1rem;
+    padding-bottom: .3125rem;
+    padding-right: 1rem;
+    padding-top: .3125rem;
+    width: 100%;
+  }
+  &__nav-local {
+    border-bottom-color: $grey-5;
+    flex-direction: row;
+    border-bottom-style: solid;
+    border-bottom-width: 1px;
+    padding-bottom: .5rem;
+    padding-left: 1rem;
+    padding-right: 1rem;
+    padding-top: .5rem;
+    width: 100%;
+  }
+  &__navbar--toggler { // Mostly straight from BOOTSTRAP 4 Styling
+    border-color: rgba(0,0,0,.1);
+    color: rgba(0,0,0,.5);
+    position: absolute;
+    top: 41px;
+    right: 1rem;
+    z-index: 1032;
+    & .navbar-toggler-icon { // Straight from the BOOTSTRAP 4 Styling
+      background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(0, 0, 0, 0.5)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
+    }
+  }
+  &__nav-bottom--after::after {
+    content: '';
+    display: block;
+    position: absolute;
+    top: 41px;
+    left: 0;
+    right: 0;
+    height: 56px;
+    background-color: #f8f9fa;
+    border-bottom-color: #b1b1b1;
+    border-bottom-style: solid;
+    border-bottom-width: 1px;
+  }
+  &__search-icon,
+  &__close-icon {
+    background-color: transparent;
+    border: 1px solid transparent;
+    border-radius: .25rem;
+    display: inline-block;
+    font-size: 1rem;
+    font-weight: 400;
+    line-height: 1.5;
+    padding: .375rem .75rem;
+    position: absolute;
+    text-align: center;
+    top: .125rem;
+    right: .3125rem;
+    user-select: none;
+    vertical-align: middle;
+    transition-property: opacity;
+    transition-timing-function: ease-in-out;
+    transition-duration: .1s;
+    z-index: 1032;
+  }
+}
+
+@media screen and (min-width: 992px) {
+  .header-global__nav-bottom--after::after {
+    content: none;
+  }
+}
+
+.header-global__open {
+  bottom: 0;
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+
+.header-global__search-icon--hidden,
+.header-global__close-icon--hidden {
+  opacity: 0;
+  pointer-events: none;
+  z-index: -1;
+}
+
+@media screen and (max-width: 992px) {
+  #headerGlobalNavbarContent.collapse.show .header-global__nav-top,
+  #headerGlobalNavbarContent.collapsing .header-global__nav-top {
+    padding-right: 1rem;
+  }
+}
+
+@media screen and (max-width: 992px) {
+  #headerGlobalNavbarContent.collapse.show .header-global__navbar-nav--divider::after,
+  #headerGlobalNavbarContent.collapsing .header-global__navbar-nav--divider::after {
+    background-color: $grey-5;
+    content: '';
+    display: block;
+    height: .125rem;
+    margin-bottom: 1rem;
+    width: 100%;
+  }
+  #headerGlobalNavbarContent.collapse.show .header-global__navbar-nav--divider:nth-child(2)::after,
+  #headerGlobalNavbarContent.collapsing .header-global__navbar-nav--divider:nth-child(2)::after {
+    margin-bottom: 0;
+  }
+}
+
+#headerGlobalNavbar.header-global__navbar--search-toggle {
+  top: 3.5rem;
+}
+
+@media screen and (min-width: 992px) {
+  .navbar-expand-lg .navbar-nav .header-global__nav-local--navbar-brand.nav-link {
+    padding-left: 0;
+  }
+}
+
+@media screen and (min-width: 992px) {
+  .header-global__nav-bottom--nav-link {
+    padding-top: .75rem;
+    padding-bottom: .75rem;
+  }
+}
+
+@media screen and (min-width: 992px) {
+  .header-global__nav-top--nav-link {
+    padding-top: .3125rem;
+    padding-bottom: .3125rem;
+  }
+}
+
+@media screen and (min-width: 992px) {
+  .navbar-expand-lg .navbar-nav .header-global__nav-top--nav-link {
+    padding-left: .9rem;
+    padding-right: .9rem;
+  }
+}
+
+@media screen and (min-width: 992px) {
+  a.header-global__nav-top--nav-link {
+    position: relative;
+  }
+  a.header-global__nav-top--nav-link::after,
+  a.header-global__nav-top--nav-link::after {
+    background-color: $orange-heading;
+    bottom: 0;
+    content: '';
+    display: block;
+    height: .125rem;
+    opacity: 0;
+    position: absolute;
+    transition: opacity 0.3s, transform 0.3s;
+    width: calc(100% - 1.8rem); // The `- 1.8rem` in `calc (100% - 1.8rem)` offsets the padding-left/right: .9rem on the links
+  }
+  a.header-global__nav-top--nav-link:hover::after,
+  a.header-global__nav-top--nav-link:focus::after {
+    opacity: 1;
+    transform: translateY(-0.2em);
+  }
+}
+
+@media screen and (min-width: 992px) {
+  .header-global__nav-bottom {
+    border-bottom: solid 1px rgba(0,0,0,.5);
+    padding-bottom: 0;
+    padding-top: 0;
+  }
+}
+
+@media screen and (min-width: 992px) {
+  a.header-global__nav-bottom--nav-link {
+    position: relative;
+  }
+  a.header-global__nav-bottom--nav-link.header-global__nav-bottom--underlined::after {
+    background-color: $orange-heading;
+    color: $orange-heading;
+    bottom: .25rem;
+    border-top-width: .125rem;
+    content: '';
+    display: block;
+    height: .125rem;
+    margin-left: 0;
+    opacity: 0;
+    position: absolute;
+    transition: opacity 0.3s, transform 0.3s;
+    width: calc(100% - 1rem); // The `- 1.8rem` in `calc (100% - 1.8rem)` offsets the padding-left/right: .5rem on the links
+  }
+  a.header-global__nav-bottom--nav-link.header-global__nav-bottom--underlined::after {
+    opacity: 1;
+    transform: translateY(-0.2em);
+  }
+
+}
+
+@media screen and (min-width: 992px) {
+  .header-global__nav-local {
+    padding-bottom: .5rem;
+    padding-top: .5rem;
+  }
+}
+
+.header-global__brand--svg {
+  fill: $white;
+  height: 28px;
+  max-width: 100%;
+  & .st0 {
+    fill: none;
+  }
+}
+
+@media screen and (min-width: 992px) and (max-width: 1040px) { // the KCC word logo needs to shrink a little bit at these screen sizes
+  .header-global__brand--svg {
+    height: 22px;
+  }
+}
+
+@media screen and (min-width: 1041px) {
+  .header-global__brand--svg {
+    height: 26px;
+  }
+}
+
+@media screen and (min-width: 992px) {
+  .header-global__brand {
+    top: 3.125rem;
+    right: auto; // gotta set this to "auto" otherwise, it blocks the other navbar links
+  }
+}
+
+#headerGlobalNavbarContent.collapse.show .typography__nav-heading,
+#headerGlobalNavbarContent.collapsing .typography__nav-heading {
+  font-size: 1.5rem;
+}
+
+#headerGlobalNavbarContent.collapse.show .navbar-nav,
+#headerGlobalNavbarContent.collapsing .navbar-nav {
+  flex-direction: column;
+  background-color: $grey-4;
+}
+
+#headerGlobalNavbarContent.collapse.show .header-global__nav-top, // BOOTSTRAP 4 Selectors for when the menu is open/opening
+#headerGlobalNavbarContent.collapsing .header-global__nav-top { // This rule-group is to pull the menu down, on mobile/tablet and provide a red background for the KCC text-logo & Search Icon.
+  position: relative;
+  top: 2.65rem; // Pull the menu down from its normal spot
+  margin-bottom: 2.5rem;
+  &::before { // Create & position a pseudo-element to make the red background
+    background-color: $primary-red;
+    content: '';
+    display: block;
+    height: 2.65rem;
+    position: absolute;
+    top: -2.65rem;
+    left: 0;
+    right: 0;
+    width: 100%;
+    z-index: -1; // This ensures the pseudo-element is behind when it has position: absolute
+  }
+}
+
+@media screen and (max-width: 991px) {
+  #headerGlobalNavbarContent.collapse:not(.show) {
+    display: block;
+    & .header-global__nav-top {
+      display: none;
+      position: absolute;
+    }
+    & .header-global__nav-bottom .nav-link,
+    .header-global__nav-local .nav-link:not(.navbar-brand) {
+      visibility: hidden;
+    }
+  }
+}
+
+.header-global__nav--search-icon,
+.header-global__nav--close-icon {
+  background-size: 20px 20px;
+  background-position: center;
+  background-repeat: no-repeat;
+  display: block;
+  height: 20px;
+  margin-top: .3125rem;
+  pointer-events: none;
+  width: 20px;
+}
+
+.header-global__search-collapse {
+  left: .5rem;
+  margin-left: auto;
+  margin-right: auto;
+  position: absolute;
+  right: 2rem;
+  top: -56px;
+  width: 95%;
+}
+
+@media screen and (min-width: 360px) {
+  .header-global__search-collapse {
+    left: .55rem;
+  }
+}
+
+@media screen and (min-width: 410px) {
+  .header-global__search-collapse {
+    left: .65rem;
+  }
+}
+
+@media screen and (min-width: 410px) {
+  .header-global__search-collapse {
+    left: 1rem;
+  }
+}
+
+@media screen and (min-width: 768px) {
+  .header-global__search-collapse {
+    left: 1.25rem;
+  }
+}
+
+@media screen and (min-width: 992px) {
+  .header-global__search-collapse {
+    left: 1.5rem;
+  }
+}
+
+.header-global__search-collapse.header-global__search-collapse--visible {
+  top: -46px;
+}
+
+@media screen and (min-width: 992px) {
+  .header-global__search-collapse.header-global__search-collapse--visible {
+    top: -40px;
+  }
+}
+
+.header-global__navbar--search-toggle {
+  top: 50px;
+}
+
+.header-global__navbar--search-toggle::before {
+  background-color: $primary-red;
+  content: '';
+  display: block;
+  height: 64px;
+  position: absolute;
+  top: -60px;
+  width: 100%;
+}
+
+@media screen and (min-width: 992px) {
+.header-global__navbar--search-toggle::before {
+    background-color: $primary-blue;
+  }
+}
+
+@media screen and (min-width: 992px) {
+  .header-global__dropdown.show {
+    background-color: $color-blue-light-nav;
+  }
+}
+
+@keyframes meganav {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+@media screen and (min-width: 992px) {
+  .header-global__nav-bottom .dropdown:hover .dropdown-menu,
+  .header-global__nav-bottom .dropdown .dropdown-menu:hover {
+    animation-duration: .5s;
+    animation-name: meganav;
+    display: block !important; // Because Bootstrap loves to use !important
+  }
+}
+
+.header-global__nav-bottom .dropdown-item {
+  color: $grey-1;
+}
+
+.header-global__nav-bottom .dropdown-item:active {
+  background-color: $primary-blue;
+  color: $white;
+}
+
+.header-global__nav-bottom .dropdown-item:hover,
+.header-global__nav-bottom .dropdown-item:focus {
+  background-color: $color-blue-lighter-nav;
+  border-radius: .175rem;
+}
+
+
+@media screen and (min-width: 992px) {
+  .header-global__nav-bottom .dropdown:hover {
+    background-color: $color-blue-light-nav;
+  }
+}
+
+@media screen and (min-width: 992px) {
+  .nav-item.dropdown.header-global__dropdown--position { // First 2 classes in this selector are to override BS4 styling
+    position: static; // Needed to allow repositioning of the open dropdown menu
+  }
+}
+
+@media screen and (min-width: 992px) {
+  .header-global__dropdown-menu--full-width {
+    left: .75rem;
+    right: .75rem;
+    top: 5.77rem;
+  }
+}
+
+@media screen and (min-width: 1300px) {
+  .header-global__dropdown-menu--full-width {
+    left: 1rem;
+    right: 1rem;
+  }
+}
+
+@media screen and (min-width: 992px) {
+  .header-global__drodpown-menu--img {
+    width: 280px;
+    &--border {
+      border: thin solid $grey-8;
+    }
+  }
+}
+
+// @media screen and (max-width: 991px) {
+//   .header-global__core::after { // This provides the light-gray background for the navbar in mobile on core sites only
+//     content: '';
+//     display: block;
+//     height: 60px;
+//     background-color: $grey-4; // Same light-gray as in Bootstrap
+//     border-bottom-color: $grey-5; // Same border-bottom as in Bootstrap
+//     border-bottom-style: solid;
+//     border-bottom-width: 1px;
+//   }
+// }
+
+@media screen and (min-width: 992px) {
+  #navGlobalTop .header-global__nav-top--nav-link {
+    margin-top: .3125rem;
+  }
+}
+
+.header-global__row--max-width {
+  min-width: 100%;
+}
+
+@media screen and (min-width: 992px) {
+  .header-global__col--column-count {
+    column-count: 2;
+  }
+}

data/assets/scss/1-base/_html.scss

@@ -0,0 +1,4 @@
+
+html {
+  background-color: $color-page-background;
+}

data/assets/scss/1-base/_img.scss

@@ -0,0 +1,17 @@
+// Styles for <img>'s
+.img__responsive--svg {
+  height: auto;
+  max-width: 100%;
+}
+
+.img__full-width {
+  width: 100%;
+}
+
+.img__shadow {
+  filter: drop-shadow(3px 3px 10px rgba(126, 126, 126, .45));
+  &--border {
+    filter: drop-shadow(3px 3px 10px rgba(126, 126, 126, .45));
+    border: 3px solid $primary-blue;
+  }
+}