jekyll-theme-pga-default 0.1.0 → 0.2.0

data/_sass/_components.scss

@@ -0,0 +1,577 @@
+section {
+  padding: 50px 0;
+}
+
+body,
+html {
+  height: 100%;
+  margin: 0;
+  opacity: 1;
+  transition: opacity 0.5s ease-in;
+}
+
+.wrapper {
+  @include media-breakpoint-up(md) {
+    min-height: calc(100vh - 315px);
+  }
+}
+
+.content-default {
+  background-color: $white;
+  box-shadow: 0 5px 10px 0 rgba(0, 35, 75, 0.15);
+  margin: 80px 0;
+  padding: 50px 10px;
+  @include media-breakpoint-up(md) {
+    padding: 50px;
+  }
+}
+
+.section-indent {
+  margin-top: -100px;
+  @include media-breakpoint-down(md) {
+    margin-top: 0;
+  }
+}
+
+.bg-navy {
+  color: $white;
+}
+
+.image-center-container {
+  height: 100%;
+  text-align: center;
+
+  img {
+    min-height: 100%;
+    min-width: 100%;
+  }
+  @include media-breakpoint-down(md) {
+    img {
+      max-width: 100%;
+      min-width: 0;
+    }
+  }
+}
+
+.modal-open {
+  position: fixed;
+}
+
+.program {
+  align-items: center;
+  display: -webkit-flex;
+  display: -ms-flex;
+  display: flex;
+  @include media-breakpoint-down(xs) {
+    flex-wrap: wrap;
+  }
+}
+
+.program-body {
+  border-top: solid 1px $blue-grey;
+  margin-top: 1rem;
+  padding-top: 1rem;
+  @include media-breakpoint-up(sm) {
+    border-left: solid 1px $blue-grey;
+    border-top: 0;
+    flex: 1;
+    margin-left: 30px;
+    margin-top: 0;
+    padding-left: 30px;
+    padding-top: 0;
+  }
+}
+
+.program-image {
+  flex-basis: 92px;
+  min-width: 92px;
+  @include media-breakpoint-down(xs) {
+    flex-basis: 100%;
+    margin-bottom: 1rem;
+    min-width: 100%;
+    text-align: center;
+  }
+}
+
+.section-dark {
+  background-color: #e4e8ea;
+}
+
+.timeline-section {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.timeline-section li {
+  list-style: none;
+  position: relative;
+  text-align: left;
+  width: 100%;
+  @extend .clearfix;
+
+  .timeline-item {
+    padding: 0 50px;
+    position: relative;
+
+    &:before {
+      background-color: #e2e2e2;
+      border: 1px solid theme-color("primary");
+      border-radius: 50%;
+      content: "";
+      display: block;
+      height: 1rem;
+      position: absolute;
+      top: 6px;
+      width: 1rem;
+      z-index: 10;
+    }
+  }
+
+  &:nth-child(2n) {
+    padding-right: 50%;
+    text-align: right;
+
+    .timeline-item {
+      &:before {
+        right: -0.5rem;
+      }
+    }
+  }
+
+  &:nth-child(2n+1) {
+    padding-left: 50%;
+
+    .timeline-item {
+      &:before {
+        left: -0.5rem;
+      }
+    }
+  }
+}
+
+.timeline-wrapper {
+  min-height: 400px;
+  position: relative;
+}
+
+.timeline-section {
+  padding: 0;
+}
+
+.timeline-nested {
+  max-height: 0;
+  position: absolute;
+  top: 0;
+  transform: scale(0);
+  transition: all ease-in;
+  transition-delay: 0s;
+  transition-duration: 0.2s;
+
+  &:after {
+    border-left: 1px solid theme-color("primary");
+    bottom: 0;
+    content: "";
+    left: 50%;
+    margin-left: -0.5px;
+    position: absolute;
+    top: -10px;
+  }
+
+  &.collapse-show {
+    max-height: 900px;
+    position: relative;
+    transform: scale(1);
+    transition-delay: 0.2s;
+    transition-duration: 0.5s;
+  }
+}
+
+.timeline {
+  max-height: 450px;
+  transform: scale(1);
+  transition: all ease-in;
+  transition-delay: 0.2s;
+  transition-duration: 0.5s;
+
+  &:after {
+    border-left: 1px solid theme-color("primary");
+    bottom: 0;
+    content: "";
+    left: 50%;
+    margin-left: -0.5px;
+    position: absolute;
+    top: -10px;
+  }
+
+  &.collapse-hide {
+    max-height: 0;
+    transform: scale(0);
+    transition-delay: 0s;
+    transition-duration: 0.2s;
+  }
+}
+
+.timeline-nested-close {
+  position: absolute;
+  top: 0;
+  z-index: 10;
+}
+
+.timeline-nested-title {
+  align-items: center;
+  background-color: theme-color("primary");
+  border-radius: 50%;
+  color: $white;
+  display: flex;
+  height: 100px;
+  justify-content: center;
+  margin: 0 auto 40px;
+  position: relative;
+  width: 100px;
+  z-index: 20;
+
+  h4 {
+    margin-bottom: 0;
+  }
+}
+
+.card {
+  background-color: $white;
+  box-shadow: 0 5px 10px 0 rgba(0, 35, 75, 0.15);
+  margin-bottom: 30px;
+}
+
+.card-horizontal {
+  @include media-breakpoint-up(md) {
+    flex-direction: row;
+  }
+
+  .card-body {
+    margin-left: 10px;
+  }
+}
+
+.section-footer {
+  padding: 30px 0 80px;
+}
+
+.section-bio {
+  margin-top: 50px;
+}
+
+.bio-wrapper {
+  background-color: $white;
+  box-shadow: 0 5px 10px 0 rgba(0, 35, 75, 0.15);
+  margin-top: 20px;
+  padding: 50px;
+}
+
+.editor-link {
+  display: none;
+}
+
+.cms-editor-active .editor-link {
+  background-color: #f7e064;
+  display: block;
+  margin: 0 auto;
+  padding: 10px 20px;
+}
+
+.btn-link {
+  @extend .text-primary;
+}
+
+.fill-blue g,
+.fill-blue path {
+  fill: #546c7e;
+}
+// Modal
+
+.modal-open {
+  bottom: 0;
+  left: 0;
+  right: 0;
+  top: 0;
+}
+
+.modal-title {
+  color: $navy;
+  line-height: 1;
+}
+
+.modal-header {
+  padding: 1.5rem 2.5rem;
+}
+
+.modal-body {
+  max-height: 500px;
+  overflow: scroll;
+  padding: 0;
+}
+
+.modal-content {
+  border-radius: 0;
+  box-shadow: 0 5px 10px 0 rgba(0, 35, 75, 0.15);
+
+  &:after {
+    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.78) 61%, $white);
+    bottom: 0;
+    content: "";
+    height: 53px;
+    left: 0;
+    pointer-events: none;
+    position: absolute;
+    right: 0;
+  }
+}
+
+.modal-header .close {
+  padding: 0;
+}
+
+.modal-nav {
+  align-items: center;
+  display: -webkit-flex;
+  display: -ms-flex;
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 1rem;
+  padding: 0 2.5rem;
+
+  .breadcrumb {
+    margin-bottom: 0;
+  }
+}
+@media (max-width: 768px) {
+  .modal-body {
+    padding: 0 40px;
+  }
+}
+// Breadcrumb
+
+.breadcrumb {
+  font-size: 12px;
+  font-weight: 500;
+}
+
+.breadcrumb-item {
+  a {
+    @extend .text-info;
+  }
+}
+// Dropdown
+
+.dropdown-toggle {
+  font-size: 12px;
+}
+
+.dropdown-menu {
+  box-shadow: 0 5px 10px 0 rgba(0, 35, 75, 0.15);
+}
+
+.dropdown-item {
+  font-size: 12px;
+  @extend .text-info;
+  font-weight: 500;
+}
+
+.dropdown-toggle {
+  white-space: nowrap;
+}
+
+.dropdown-toggle:after {
+  background-image: url("data:image/svg+xml;base64, PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIGlkPSJDYXBhXzEiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iNTEyIiBoZWlnaHQ9IjUxMiIgdmlld0JveD0iMCAwIDQ1MS44NDcgNDUxLjg0NyIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDUxLjg0NyA0NTEuODQ3OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgY2xhc3M9IiI+PGc+PGc+Cgk8cGF0aCBkPSJNMjI1LjkyMywzNTQuNzA2Yy04LjA5OCwwLTE2LjE5NS0zLjA5Mi0yMi4zNjktOS4yNjNMOS4yNywxNTEuMTU3Yy0xMi4zNTktMTIuMzU5LTEyLjM1OS0zMi4zOTcsMC00NC43NTEgICBjMTIuMzU0LTEyLjM1NCwzMi4zODgtMTIuMzU0LDQ0Ljc0OCwwbDE3MS45MDUsMTcxLjkxNWwxNzEuOTA2LTE3MS45MDljMTIuMzU5LTEyLjM1NCwzMi4zOTEtMTIuMzU0LDQ0Ljc0NCwwICAgYzEyLjM2NSwxMi4zNTQsMTIuMzY1LDMyLjM5MiwwLDQ0Ljc1MUwyNDguMjkyLDM0NS40NDlDMjQyLjExNSwzNTEuNjIxLDIzNC4wMTgsMzU0LjcwNiwyMjUuOTIzLDM1NC43MDZ6IiBkYXRhLW9yaWdpbmFsPSIjMDAwMDAwIiBjbGFzcz0iYWN0aXZlLXBhdGgiIHN0eWxlPSJmaWxsOiMwMDIzNEIiIGRhdGEtb2xkX2NvbG9yPSIjMDAyMzRiIj48L3BhdGg+CjwvZz48L2c+IDwvc3ZnPg==");
+  background-repeat: no-repeat;
+  background-size: contain;
+  border: 0;
+  height: 8px;
+  vertical-align: 0;
+  width: 9px;
+}
+// Alerts
+@each $color, $value in $theme-colors {
+  .alert-#{$color} {
+    .alert-close {
+      @include alert-close-variant($value)
+    }
+  }
+}
+
+.alert {
+  .close {
+    position: absolute;
+    right: 1.25rem;
+    top: 50%;
+    transform: translateY(-50%);
+  }
+}
+// Map
+
+#map {
+  height: 450px;
+  width: 100%;
+}
+
+.map-wrapper {
+  position: relative;
+  @include media-breakpoint-up(md) {
+    .tiles-wrapper {
+      max-width: 400px;
+      position: absolute;
+      right: 50px;
+      top: 50%;
+      transform: translateY(-50%);
+      z-index: 100;
+    }
+  }
+}
+
+.sub-category-content {
+  img {
+    display: block;
+    height: auto;
+    margin-bottom: 1rem;
+    max-width: 100%;
+  }
+}
+
+.content-main {
+  a {
+    text-decoration: underline;
+  }
+}
+// Sidebar
+
+.sidebar {
+  background-color: $white;
+  box-shadow: 0 5px 10px 0 rgba(0, 35, 75, 0.15);
+  margin-bottom: 1rem;
+}
+
+.category {
+  .list-group-item {
+    border: 0;
+  }
+
+  > a {
+    color: $blue-grey;
+    display: block;
+    font-size: 16px;
+    font-weight: 600;
+    letter-spacing: -0.2px;
+    line-height: 1.75;
+    padding: 20px 21px;
+    text-transform: capitalize;
+    @include media-breakpoint-up(lg) {
+      font-size: 20px;
+      padding: 28px 30px;
+    }
+
+    &[data-toggle="collapse"] {
+      position: relative;
+
+      &:after {
+        content: "\e903";
+        font-size: 12px;
+        position: absolute;
+        top: 50%;
+        right: 20px;
+        transform: translateY(-50%);
+        font-family: 'icomoon' !important;
+      }
+
+      &.collapsed {
+        position: relative;
+
+        &:after {
+          content: "\e902";
+        }
+      }
+    }
+  }
+
+  &:not(.active) {
+    position: relative;
+    margin-top: -1px;
+
+    [data-toggle="collapse"] {
+      &:after {
+        color: theme-color("secondary");
+      }
+    }
+
+    .category-inactive {
+      border-bottom: solid 1px #dee2e3;
+    }
+  }
+
+  & + .category:not(.active) {
+    position: relative;
+
+    &:before {
+      border-top: solid 1px #dee2e3;
+      content: "";
+      display: block;
+      position: absolute;
+      right: 0;
+      left: 0;
+      top: 0;
+      z-index: 10;
+      @include media-breakpoint-up(lg) {
+        right: 20px;
+        left: 20px;
+      }
+    }
+  }
+
+  &.active {
+    .category-active {
+      background-color: theme-color("primary");
+      color: $white;
+    }
+  }
+}
+
+.sub-category {
+  padding: 20px 0;
+
+  .list-group-item {
+    border: none;
+    border: 0;
+    color: theme-color("secondary");
+    font-weight: 500;
+    font-size: 14px;
+    line-height: 1.5;
+    padding: 11px 40px;
+    text-transform: capitalize;
+    @include media-breakpoint-up(lg) {
+      color: $blue-grey;
+      font-size: 16px;
+      padding: 11px 30px;
+    }
+
+    &.sub-category-active {
+      color: theme-color("secondary");
+      position: relative;
+
+      &:before {
+        background-color: theme-color("primary");
+        bottom: 5px;
+        content: "";
+        display: block;
+        left: 0;
+        position: absolute;
+        top: 5px;
+        width: 5px;
+      }
+    }
+  }
+}
+
+.component__body {
+  padding: 1rem;
+  margin: 1rem 0 0;
+  border: solid #f7f7f9;
+  border-width: 0.2rem 0 0;
+  border-width: 0.2rem;
+}