kcc-gem-theme-core 0.0.1

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

@@ -0,0 +1,126 @@
+// Rules for styling links
+// =========================================
+
+.links__kcc-logo {
+  display: inline;
+  float: left;
+  width: 120px;
+  height:80px;
+}
+
+// use the 'link__offset' class to offset jump-links via CSS only method.
+// Links need to be offset to clear the fixed navigation bar at the top.
+// =========================================
+
+.links__offset {  // Pointer-events is needed to prevent the .links__offset::before pseudo-element
+  pointer-events: none;  // from "blocking" any anchor tag above from being clicked.
+  & a,
+  & button,
+  & iframe,
+  & .card-body {  // HOWEVER, if there is a child anchor, or button, element,
+    pointer-events: auto; // it obviously needs to be clickable.
+  }
+}
+
+.links__offset::before {
+  // mobile devices get slightly different offset b/c of different sized fixed header
+  content: " ";
+  display: block;
+  height: 171px; // defining a height pushes the element down the page
+  margin-top: -171px; // negative margin is needed to push it back to its original position
+  pointer-events: none; // w/ out this it will interfere with the sites navigation links
+  visibility: hidden;
+}
+
+@media screen and (min-width: 768px) {
+    .links__offset::before {
+      height: 150px;
+      margin-top: -150px;
+  }
+}
+
+.links__darker-link {
+  color: $darker-link;
+}
+
+// Rules to override bootstrap 4's "nav-link" color
+// =========================================
+.links__nav-link--color:not(.btn-primary) { // Ugly (chain of) selectors needed to overide bootstrap's "nav-link" color:
+  color: $primary-blue;
+  &:hover,
+  &:focus {
+    color: $primary-red;
+  }
+}
+
+.navbar-light .navbar-nav .nav-link.links__nav-link--color.btn-primary {
+  color: $white;
+}
+
+.navbar-light .navbar-nav .active>.nav-link {
+  border-bottom-color: $primary-red;
+  border-bottom-style: solid;
+  border-bottom-width: thick;
+  color: $primary-blue;
+  padding-bottom: 0;
+}
+
+.navbar-light .navbar-nav .nav-link:focus,
+.navbar-light .navbar-nav .nav-link:hover {
+  color: $primary-red;
+}
+
+.links__phone--span { // Phone # link in the navigation on landing pages like info.kcc.edu
+  color: $white;
+  position: relative; // Needed to make pseudo-element underlining the right width
+  text-decoration: none;
+  &:visited {
+    color: $white;
+  }
+  &:hover,
+  &:focus {
+    color: $white;  // Remove the Bootstrap primary blue colour on a:hover
+    text-decoration: none; // Prevent underlining
+  }
+}
+
+
+.links__phone--span:focus:after,
+.links__phone--span:hover:after { // mouse-hover effect for phone # in landing pages
+  opacity: 1;  // Make the underline fade in
+  transform: translateY(-.2em); // Move the underline up (along the Y-axis) as it fades-in
+}
+
+.links__phone--span:after { // Pseudo-element to unerline the phone # on mouse-hover
+    background-color: $color-orange;
+    bottom: - .325rem;
+    content: "";
+    display: block;
+    height: .1875rem;
+    opacity: 0;
+    position: absolute;
+    transition: opacity .3s,transform .3s; // mouse-hover effect
+    width: 100%;
+}
+
+.links__no-underline {
+  text-decoration: none;
+  &:hover {
+    text-decoration: none;
+  }
+}
+
+@media screen and (min-width: 992px) {
+  .links__header-global--nav-local {
+    position: relative;
+  }
+  .active .links__header-global--nav-local::after {
+    background-color: $primary-red;
+    bottom: .125rem;
+    content: '';
+    display: block;
+    height: .145rem;
+    position: absolute;
+    width: calc(100% - 1rem);
+  }
+}

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

@@ -0,0 +1,89 @@
+.svg__fill {
+  &--blue {
+    fill: $primary-blue;
+  }
+  &--white {
+    fill: $white;
+  }
+}
+
+.svg {
+  height: 100px;
+  width: 100px;
+  &--none {
+    fill: none;
+  }
+  &--blue {
+    fill: $primary-blue;
+  }
+  &--red {
+    fill: $primary-red;
+  }
+}
+
+.svg--max-width {
+  max-width: 100%;
+}
+
+.svg {
+  &__button {
+    height: 48px;
+    width: 48px;
+  }
+  &--fill-none {
+    fill: none;
+  }
+  &--fill-white {
+    fill: $white;
+  }
+  &--fill-blue {
+    fill: $primary-blue;
+  }
+}
+
+.svg__action--place {
+  margin-left: -2rem;
+}
+
+@media screen and (min-width: 360px) {
+  .svg__action--place {
+    margin-left: -3rem;
+  }
+}
+
+@media screen and (min-width: 768px) {
+  .svg__action--place {
+    margin-left: 0;
+  }
+}
+
+@media screen and (min-width: 360px) {
+  .svg__button {
+    height: 48px;
+    width: 48px;
+  }
+}
+
+@media screen and (min-width: 768px) {
+  .svg__button {
+    height: 36px;
+    width: 36px;
+  }
+}
+
+@media screen and (min-width: 992px) {
+  .svg__button {
+    height: 48px;
+    width: 48px;
+  }
+}
+
+.svg__sync {
+  fill: $color-blue-reboot;
+  transition: fill ease-in-out .2s;
+}
+
+button:hover .svg__sync,
+button:focus .svg__sync {
+  fill: $color-blue-reboot-hover;
+}