@mindful-web/marko-web-theme-monorail 1.0.0

package/scss/components/blocks/_callout-cards.scss

@@ -0,0 +1,19 @@
+.callout-cards {
+  &__row {
+    @include make-row();
+  }
+
+  &__col {
+    @include make-col-ready();
+    @include media-breakpoint-up(md) {
+      @include make-col(6);
+    }
+
+    &--last {
+      margin-top: 30px;
+      @include media-breakpoint-up(md) {
+        margin-top: 0;
+      }
+    }
+  }
+}

package/scss/components/blocks/_company-inquiry-form.scss

@@ -0,0 +1,41 @@
+.node-list {
+  $self: &;
+  &.inquiry-form {
+    .marko-web-icon svg {
+      fill: $white;
+    }
+    #{ $self }__header {
+      .inquiry-form-button {
+        &:focus,
+        &:hover {
+          background-color: $primary;
+        }
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+      }
+    }
+    #{ $self }__body {
+      display: none;
+    }
+    &--open {
+      #{ $self }__body {
+        display: block;
+      }
+    }
+  }
+}
+
+.inquiry-form {
+  #privacyConsent,
+  #notificationConsent,
+  #thirdPartyConsent {
+    display: inline;
+    + label {
+      display: inline;
+      .consent-html {
+        display: inline;
+      }
+    }
+  }
+}

package/scss/components/blocks/_company-search.scss

@@ -0,0 +1,57 @@
+/*! purgecss start ignore */
+.company-search {
+  position: relative;
+  &__title {
+    margin-bottom: 18px;
+    font-size: 18px;
+    font-weight: 800;
+    text-transform: uppercase;
+  }
+  .autocomplete-input {
+    display: block;
+    width: 100%;
+    height: calc(1.5em + .75rem + 2px);
+    padding: .375rem .75rem;
+    font-size: 1rem;
+    font-weight: 400;
+    line-height: 1.5;
+    color: #495057;
+    background-color: #fff;
+    background-clip: padding-box;
+    border: 1px solid #ced4da;
+    border-radius: 0;
+    outline: none;
+    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
+    &:focus {
+      border-color: #ebebeb;
+      box-shadow: none;
+    }
+  }
+  .autocomplete-result-list {
+    @include box-shadow($theme-card-box-shadow);
+    position: absolute;
+    z-index: 2;
+    width: 100%;
+    max-height: 10em;
+    padding: map-get($spacers, 2);
+    overflow: scroll;
+    list-style: none;
+    background: $white;
+    border: 1px solid #ebebeb;
+    li {
+      color: $primary;
+      cursor: pointer;
+      .autocomplete-result-error {
+        font-size: 40px;
+        font-weight: 700;
+
+      }
+    }
+  }
+  .errors {
+    li {
+      cursor: initial;
+    }
+  }
+}
+/*! purgecss end ignore */

package/scss/components/blocks/_content-card-deck.scss

@@ -0,0 +1,143 @@
+.node {
+  $self: &;
+
+  &--content-card-deck {
+    padding-bottom: 16px;
+    @include marko-web-node-list-border(border-bottom);
+
+    @include media-breakpoint-up(md) {
+      padding-top: 16px;
+      padding-bottom: 0;
+      border-bottom: none;
+      @include marko-web-node-list-border(border-top);
+    }
+
+    @include media-breakpoint-up(lg) {
+      padding-top: 0;
+      border-top: none;
+    }
+
+    #{ $self } {
+      &__title {
+        width: 100%;
+        @include skin-typography($style: "header-3", $link-style: "primary");
+      }
+
+      &__contents {
+        flex-direction: row-reverse;
+        @include media-breakpoint-up(lg) {
+          flex-direction: column;
+        }
+      }
+
+      $image-size: 112px;
+      &__node-image {
+        width: $image-size;
+        height: $image-size;
+        @include media-breakpoint-up(lg) {
+          width: 100%;
+          height: 100%;
+        }
+      }
+
+      &__image-inner-wrapper--fluid-3by2 {
+        width: $image-size;
+        min-width: $image-size;
+        height: $image-size;
+        @include media-breakpoint-up(lg) {
+          width: 100%;
+          min-width: 100%;
+          height: auto;
+        }
+
+        &::before {
+          // use bp-down (max-width) instead, since the padding is a calculated % at all widths by default
+          @include media-breakpoint-down(md) {
+            padding-top: 0;
+          }
+        }
+      }
+
+      &__image-wrapper + #{ $self }__body {
+        margin-top: 0;
+        margin-right: 15px;
+        @include media-breakpoint-up(lg) {
+          margin-top: 14px;
+          margin-right: 0;
+        }
+      }
+
+      &__website-section-name {
+        @include skin-typography($style: "slug-small", $link-style: "primary");
+      }
+    }
+  }
+}
+
+.content-card-deck {
+  &__header {
+    display: flex;
+    align-items: flex-end;
+    margin-bottom: 24px;
+    justify-content: space-between;
+    @include media-breakpoint-up(md) {
+      margin-bottom: 30px;
+    }
+    @include skin-typography($style: "section-header");
+  }
+
+  &__header-left {
+    display: flex;
+    flex-direction: column;
+  }
+
+  &__description {
+    @include skin-typography($style: "article-text");
+    margin-top: 6px;
+    display: none;
+    @include media-breakpoint-up(md) {
+      display: block;
+    }
+  }
+
+  &__view-more {
+    @include skin-typography($style: "view-more", $link-style: "primary");
+    line-height: 1.7;
+    white-space: nowrap;
+    display: none;
+    @include media-breakpoint-up(md) {
+      display: block;
+    }
+  }
+
+  &__view-more-bottom {
+    @include skin-typography($style: "view-more", $link-style: "primary");
+    display: block;
+    margin-top: 16px;
+    @include media-breakpoint-up(md) {
+      display: none;
+    }
+  }
+  .node {
+    &__website-section-name {
+      @include skin-typography($style: "slug-small", $link-style: "primary");
+    }
+  }
+}
+
+.card-deck-flow {
+  $self: &;
+  &--content-card-deck {
+    #{ $self } {
+      &__node {
+        margin-bottom: 16px;
+        @include media-breakpoint-up(md) {
+          margin-bottom: 0;
+        }
+        &:last-child {
+          margin-bottom: 0;
+        }
+      }
+    }
+  }
+}

package/scss/components/blocks/_directory-facets.scss

@@ -0,0 +1,112 @@
+.directory-facets-toggle {
+  display: flex;
+  padding: 20px;
+  margin-bottom: map-get($spacers, block);
+  background-color: #f1f1f1;
+  &__label {
+    align-self: center;
+  }
+
+  &__button {
+    @include theme-toggle-button();
+    align-self: center;
+    margin-left: auto;
+  }
+}
+
+.directory-facets,
+.directory-country-facets,
+.content-type-facets {
+  @include theme-card();
+  $color: $gray-200;
+  $self: &;
+
+  &--open {
+    display: block;
+  }
+
+  &__title {
+    @include theme-card-header();
+    @include border-top-radius($theme-item-list-border-radius);
+    padding: $marko-web-node-list-padding;
+    margin-bottom: 0;
+    line-height: $line-height-base;
+    &:empty {
+      display: none;
+    }
+
+  }
+
+  &__list {
+    display: flex;
+    flex-direction: column;
+    max-height: 600px;
+    padding: 0;
+    overflow: scroll;
+    #{ $self } {
+      &__list {
+        display: none;
+        max-height: 100%;
+        padding: $marko-web-node-list-padding;
+        padding-bottom: 0;
+        overflow: initial;
+      }
+    }
+  }
+
+  &__link {
+    position: relative;
+    display: inline;
+    color: #333;
+    &:hover {
+      color: #333;
+      text-decoration: underline;
+    }
+    &--active {
+      font-weight: 700;
+      color: $primary;
+    }
+  }
+
+  &__item {
+    position: relative;
+    display: block;
+    padding: ($marko-web-node-list-padding * 0.5);
+    font-size: 18px;
+    line-height: 1.25;
+    &--open {
+      > #{ $self } {
+        &__list {
+          display: flex;
+        }
+      }
+    }
+  }
+
+  &__toggle {
+    @include theme-toggle-button();
+    position: absolute;
+    top: .5rem;
+    right: .75rem;
+    padding: 0;
+    margin-left: auto;
+
+    & > .icon {
+      @include theme-navbar-link-color(( active: $primary, hover: $primary, default: $black ));
+    }
+  }
+}
+
+.directory-country-facets {
+  &__list {
+    max-height: 200px;
+  }
+}
+
+.breadcrumbs {
+  &--directory {
+    .breadcrumb {
+      padding-bottom: 16px;
+    }
+  }
+}

package/scss/components/blocks/_hero-card.scss

@@ -0,0 +1,59 @@
+.hero-card {
+  &__header {
+    @include skin-typography($style: "section-header");
+  }
+
+  &__description-wrapper {
+    display: flex;
+    align-items: baseline;
+    justify-content: space-between;
+    margin-top: 6px;
+    margin-bottom: 24px;
+    @include media-breakpoint-up(md) {
+      margin-bottom: 30px;
+    }
+  }
+
+  &__description {
+    @include skin-typography($style: "article-text");
+  }
+
+  &__view-more {
+    @include skin-typography($style: "view-more", $link-style: "primary");
+
+    display: none;
+    @include media-breakpoint-up(md) {
+      display: block;
+    }
+  }
+
+  &__view-more-bottom {
+    @include skin-typography($style: "view-more", $link-style: "primary");
+
+    display: block;
+    margin-top: 4px;
+    @include media-breakpoint-up(md) {
+      display: none;
+    }
+  }
+  .card-deck-flow {
+    .node {
+      padding: 0;
+      &__title {
+        font-weight: $font-weight-bold;
+      }
+      &__website-section-name {
+        @include skin-typography($style: "slug-small", $link-style: "primary");
+      }
+    }
+    &--hero {
+      .node {
+        @include media-breakpoint-up(md) {
+          &__title {
+            @include skin-typography($style: "header-2", $link-style: "primary");
+          }
+        }
+      }
+    }
+  }
+}

package/scss/components/blocks/_latest-content-list.scss

@@ -0,0 +1,13 @@
+.node-list {
+  $self: &;
+  &--latest-content-list {
+    #{ $self }__header {
+      @include skin-typography($style: "header-2");
+    }
+    .node {
+      &__website-section-name {
+        @include skin-typography($style: "slug-small", $link-style: "primary");
+      }
+    }
+  }
+}

package/scss/components/blocks/_latest-podcast.scss

@@ -0,0 +1,69 @@
+.latest-podcast {
+  $padding: 24px;
+  $button-spacer: 8px;
+
+  height: 100%;
+  padding: $padding;
+  padding-bottom: $padding - $button-spacer;
+  background-color: $gray-100;
+  border-radius: 4px;
+
+  &__header {
+    margin-bottom: 24px;
+    @include skin-typography($style: "section-header-small");
+  }
+
+  &__btn {
+    margin-right: $button-spacer;
+    margin-bottom: $button-spacer;
+  }
+}
+
+.marko-web-icon {
+  $self: &;
+  &--latest-podcast {
+    margin-right: 5px;
+    svg {
+      width: 20px;
+      height: 20px;
+      fill: map-deep-get($typography, "section-header-small", "color");
+    }
+  }
+}
+
+.node {
+  $self: &;
+
+  &--latest-podcast {
+    background-color: $gray-100;
+
+    #{ $self } {
+      &__title {
+        margin-bottom: 20px;
+        @include skin-typography($style: "header-3", $link-style: "primary");
+      }
+
+      &__header {
+        margin-bottom: 10px;
+      }
+
+      &__header-left {
+        @include skin-typography($style: "slug-small");
+        color: $gray-700;
+      }
+
+      &__contents--body {
+        margin-bottom: 0;
+      }
+
+      &__text--more-episodes {
+        @include skin-typography($style: "view-more", $link-style: "primary");
+      }
+
+      &__footer-left--buttons {
+        max-width: 85%;
+        margin-top: 24px;
+      }
+    }
+  }
+}

package/scss/components/blocks/_latest-products-feed.scss

@@ -0,0 +1,97 @@
+.product-feed-content-node {
+  $image-size: 112px;
+  $image-desktop-width: 176px;
+  $image-desktop-height: 176px;
+
+  display: flex;
+  width: 100%;
+
+  padding: 16px;
+  background-color: $gray-100;
+  border-radius: 4px;
+
+  &__contents {
+    width: 100%;
+  }
+
+  &__body {
+    @include media-breakpoint-up(md) {
+      max-width: 700px;
+    }
+  }
+
+  &__image-wrapper {
+    width: $image-size;
+    min-width: $image-size;
+    height: $image-size;
+    margin-left: 15px;
+    @include media-breakpoint-up(md) {
+      width: $image-desktop-width;
+      min-width: $image-desktop-width;
+      height: $image-desktop-height;
+    }
+  }
+
+  &__image {
+    width: $image-size;
+    height: $image-size;
+    object-fit: cover;
+    object-position: left;
+    @include media-breakpoint-up(md) {
+      width: $image-desktop-width;
+      height: $image-desktop-height;
+    }
+  }
+
+  &__website-section-name {
+    margin-bottom: 6px;
+    @include skin-typography($style: "slug-small", $link-style: "primary", $breakpoint: sm);
+  }
+
+  &__content-short-name {
+    width: 100%;
+    @include skin-typography($style: "header-1.5", $link-style: "primary", $breakpoint: sm);
+  }
+
+  &__content-teaser {
+    display: none;
+    margin-top: 10px;
+    @include skin-typography($style: "teaser-text-1", $link-style: "primary", $breakpoint: sm);
+    @include media-breakpoint-up(md) {
+      display: block;
+    }
+  }
+}
+
+.node-list {
+  $self: &;
+  $node-spacer: 12px;
+  &--latest-products-feed {
+    #{ $self } {
+      &__node {
+        padding-top: $node-spacer;
+        padding-bottom: $node-spacer;
+        border-bottom: none;
+
+        &:first-child {
+          padding-top: 0;
+        }
+        &:last-child {
+          padding-bottom: 0;
+        }
+      }
+
+      &__node--ad {
+        @media (min-width: 980px) {
+          padding-top: 0;
+          padding-bottom: 0;
+        }
+      }
+
+      &__nodes {
+        padding-top: 0;
+        padding-bottom: 0;
+      }
+    }
+  }
+}

package/scss/components/blocks/_magazine-publication-card.scss

@@ -0,0 +1,30 @@
+.magazine-publication-card-block {
+  @include theme-card();
+  &__header {
+    @include theme-card-header();
+    @include border-top-radius($theme-card-border-radius);
+    padding: $theme-item-padding ($theme-item-padding + $theme-item-contents-padding);
+    margin-bottom: 0;
+
+    &:empty {
+      display: none;
+    }
+
+    &:last-child {
+      @include border-bottom-radius(0);
+    }
+
+    a {
+      @include theme-card-header-link();
+    }
+  }
+
+  &__body {
+    padding: $marko-web-node-padding;
+  }
+
+  &--flush {
+    border-radius: 0;
+    box-shadow: none;
+  }
+}

package/scss/components/blocks/_more-products.scss

@@ -0,0 +1,35 @@
+.more-products {
+  &__header-wrapper {
+    display: flex;
+    align-items: baseline;
+    justify-content: space-between;
+    margin-bottom: 30px;
+  }
+
+  &__header {
+    margin-bottom: 6px;
+    @include skin-typography($style: "section-header");
+  }
+
+  &__view-more {
+    @include skin-typography($style: "view-more", $link-style: "primary");
+  }
+}
+
+.node {
+  $self: &;
+
+  &--more-products {
+    padding: 16px;
+    background-color: $gray-100;
+    border-radius: 4px;
+    #{ $self } {
+      &__title {
+        @include skin-typography($style: "header-3", $link-style: "primary", $max-lines: 4);
+      }
+      &__website-section-name {
+        @include skin-typography($style: "slug-small", $link-style: "primary");
+      }
+    }
+  }
+}