generator-chisel 1.0.0 → 2.0.0-alpha.1

package/lib/commands/create/creators/app/chisel-starter-theme/src/styles/components/_main-nav.scss

@@ -0,0 +1,305 @@
+@use '~design' as *;
+
+.c-main-nav__items {
+  display: none;
+  padding: 0;
+  margin: 0;
+  list-style-type: none;
+
+  @include bp-down(large) {
+    visibility: hidden;
+    opacity: 0;
+    transition: get-transition('normal');
+
+    &.is-active {
+      position: fixed;
+      inset: 0;
+      z-index: 998;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: flex-start;
+      padding: px-rem(100) 0 px-rem(20);
+      overflow: auto;
+      text-align: center;
+      background-color: get-color('white');
+    }
+
+    &.is-open {
+      visibility: visible;
+      opacity: 1;
+    }
+  }
+
+  @include bp(large) {
+    display: flex;
+  }
+}
+
+.c-main-nav__item {
+  position: relative;
+  margin-bottom: 0;
+}
+
+.c-main-nav__caret {
+  position: relative;
+  top: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: px-rem(20);
+  height: px-rem(20);
+  padding: 0;
+  margin: 0 0 0 get-margin('tiny');
+  line-height: 1;
+  text-align: center;
+  vertical-align: middle;
+  appearance: none;
+  cursor: pointer;
+  background: none;
+  border: 0;
+
+  @include bp-down(large) {
+    top: -2px;
+    width: px-rem(24);
+    height: px-rem(24);
+
+    .c-main-nav__item.is-active & {
+      transform: rotate(180deg);
+    }
+  }
+
+  &::before {
+    display: inline-block;
+    width: 0;
+    height: 0;
+    content: '';
+    border-top: px-rem(5) solid get-color('primary');
+    border-right: px-rem(5) solid transparent;
+    border-left: px-rem(5) solid transparent;
+    transition: get-transition('normal');
+
+    .c-main-nav__subitems & {
+      transform: rotate(-90deg);
+      transform-origin: top center;
+    }
+  }
+
+  .c-main-nav__subitems & {
+    @include bp-down(large) {
+      display: none;
+    }
+  }
+
+  .c-main-nav--columns & {
+    @include bp(large) {
+      display: none;
+    }
+  }
+}
+
+.c-main-nav__link {
+  display: block;
+  padding: get-padding('little') get-padding('small');
+  font-size: get-font-size('large');
+  text-align: center;
+  text-decoration: none;
+
+  @include bp(large) {
+    padding: get-padding('normal');
+    font-size: get-font-size('medium');
+  }
+
+  &:hover,
+  &:focus,
+  .current-menu-item > &,
+  .current-menu-parent > & {
+    color: get-color('secondary');
+    text-decoration: none;
+
+    .c-main-nav__caret::before {
+      border-top-color: get-color('secondary');
+    }
+  }
+}
+
+.c-main-nav__subitems {
+  position: relative;
+  display: none;
+  width: 100%;
+  padding: 0;
+  margin: 0;
+  list-style-type: none;
+  background-color: transparent;
+
+  @include bp-down(large) {
+    .c-main-nav__item.is-active & {
+      display: block;
+    }
+  }
+
+  @include bp(large) {
+    position: absolute;
+    top: calc(100% + px-rem(16));
+    left: px-rem(16);
+    z-index: -999;
+    display: block;
+    width: px-rem(160);
+    padding: get-padding('little') 0;
+    margin-top: get-margin('small');
+    visibility: hidden;
+    box-shadow: none;
+    opacity: 0;
+    transition:
+      opacity 0.3s ease-in-out,
+      visibility 0.3s ease-in-out,
+      margin 0.3s ease-in-out,
+      z-index 0s ease-in-out 0.3s;
+
+    &::after {
+      position: absolute;
+      inset: 0;
+      z-index: 0;
+      content: '';
+      background-color: get-color('white');
+      border-radius: get-border-radius('small');
+      box-shadow: get-box-shadow('3r');
+
+      @include bp(full) {
+        box-shadow: get-box-shadow('3');
+      }
+    }
+
+    &.is-level-3 {
+      top: px-rem(-1);
+      left: -100%;
+
+      @include bp(full) {
+        left: 100%;
+      }
+    }
+
+    .menu-item-has-children:hover > & {
+      z-index: 999;
+      margin-top: 0;
+      visibility: visible;
+      opacity: 1;
+      transition:
+        opacity 0.3s ease-in-out,
+        visibility 0.3s ease-in-out,
+        margin 0.3s ease-in-out,
+        z-index 0s ease-in-out;
+    }
+  }
+}
+
+.c-main-nav__subitem {
+  position: relative;
+  z-index: 1;
+  margin: 0;
+
+  &:last-child {
+    border-bottom: none;
+  }
+}
+
+.c-main-nav__sublink {
+  display: block;
+  padding: get-padding('little') get-padding('small');
+  font-size: get-font-size('large');
+  text-decoration: none;
+
+  @include bp(large) {
+    font-size: get-font-size('normal');
+  }
+
+  &:hover,
+  &:focus,
+  .current-menu-item > & {
+    color: get-color('secondary');
+    text-decoration: none;
+
+    @include bp(large) {
+      background-color: get-color('light-grey');
+    }
+
+    .c-main-nav__caret::before {
+      border-top-color: get-color('secondary');
+    }
+  }
+}
+
+@include bp(large) {
+  .c-main-nav--columns {
+    .c-main-nav__item {
+      position: static;
+    }
+
+    .current-menu-item > .c-main-nav__sublink {
+      background-color: transparent;
+    }
+
+    .c-main-nav__sublink {
+      &:hover,
+      &:focus,
+      .current-menu-item > & {
+        background-color: transparent;
+      }
+    }
+
+    .c-main-nav__subitems {
+      &.is-level-2 {
+        top: calc(100% - px-rem(16));
+        right: 0;
+        left: 0;
+        display: flex;
+        flex-flow: row wrap;
+        gap: get-gap('normal');
+        width: 100%;
+        max-width: 100%;
+        padding-inline: get-padding('small');
+        padding-top: get-padding('large');
+
+        &::after {
+          top: get-margin('normal');
+          box-shadow: get-box-shadow('4');
+
+          // border-top-left-radius: 0;
+          // border-top-right-radius: 0;
+        }
+
+        > .c-main-nav__subitem > .c-main-nav__sublink {
+          font-weight: 700;
+        }
+      }
+
+      &.is-level-3 {
+        position: relative;
+        top: 0;
+        left: 0;
+        z-index: 1;
+        width: 100%;
+        padding: 0;
+        margin-top: 0;
+        visibility: visible;
+        opacity: 1;
+
+        &::after {
+          display: none;
+        }
+      }
+    }
+
+    &.has-2-columns .is-level-2 > .c-main-nav__subitem {
+      width: get-flex-col-width(6, get-gap('normal'));
+    }
+
+    &.has-3-columns .is-level-2 > .c-main-nav__subitem {
+      width: get-flex-col-width(4, get-gap('normal'));
+    }
+
+    &.has-4-columns .is-level-2 > .c-main-nav__subitem {
+      width: get-flex-col-width(3, get-gap('normal'));
+    }
+  }
+}

package/lib/commands/create/creators/app/chisel-starter-theme/src/styles/components/_pagination.scss

@@ -0,0 +1,34 @@
+@use '~design' as *;
+
+.c-pagination {
+  width: 100%;
+  margin: get-padding('large') auto;
+  clear: both;
+}
+
+.c-pagination__items {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  padding: 0;
+  margin: 0;
+  list-style-type: none;
+}
+
+.c-pagination__item {
+  margin: 0;
+
+  &--page {
+    .page-number {
+      display: inline-block;
+      padding: get-padding('tiny') get-padding('little');
+      text-decoration: none;
+
+      &.current {
+        color: get-color('secondary');
+        text-decoration: underline;
+      }
+    }
+  }
+}

package/lib/commands/create/creators/app/chisel-starter-theme/src/styles/components/_post-card.scss

@@ -0,0 +1,12 @@
+@use '~design' as *;
+
+.c-post-card {
+  display: flex;
+  flex-direction: column;
+  gap: get-gap('normal');
+  width: 100%;
+  padding: get-padding('normal');
+  background-color: get-color('white');
+  border: 1px solid get-color('light-grey');
+  border-radius: get-border-radius('small');
+}

package/lib/commands/create/creators/app/chisel-starter-theme/src/styles/components/_post.scss

@@ -0,0 +1,22 @@
+@use '~design' as *;
+
+.c-post {
+  display: flex;
+  flex-direction: column;
+}
+
+.c-post__inner {
+  margin-bottom: get-margin('medium');
+}
+
+.c-post__meta {
+  margin-bottom: get-margin('medium');
+}
+
+.c-post__image {
+  margin-bottom: get-margin('big');
+}
+
+.c-post__categories + .c-post__tags {
+  margin-top: calc(get-margin('small') * -1);
+}

package/lib/commands/create/creators/app/chisel-starter-theme/src/styles/components/_posts-items.scss

@@ -0,0 +1,90 @@
+@use '~design' as *;
+
+.c-posts-items {
+  margin-bottom: get-padding('big');
+}
+
+.c-post-item {
+  display: flex;
+  flex-direction: column;
+  gap: get-gap('normal');
+  width: 100%;
+  padding: get-padding('normal');
+  background-color: get-color('white');
+  border: 1px solid get-color('light-grey');
+  border-radius: get-border-radius('small');
+}
+
+.c-post-item__content {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  width: 100%;
+}
+
+.c-post-item__category {
+  order: -1;
+}
+
+.c-post-item__image {
+  flex-shrink: 0;
+  order: -1;
+  width: 100%;
+  height: px-rem(200);
+  overflow: hidden;
+  border-radius: get-border-radius('small');
+
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    border-radius: get-border-radius('small');
+    transition: get-transition('slow');
+    transform: scale(1);
+  }
+
+  a:hover img {
+    transform: scale(1.05);
+  }
+}
+
+.c-post-item__title {
+  margin: get-margin('little') 0;
+  font-size: clamp(get-font-size('normal'), calc(1.667vw + 0.5rem), get-font-size('extra-large'));
+  font-weight: 700;
+
+  a {
+    @include link-reverse;
+  }
+
+  .c-sidebar & {
+    font-size: get-font-size('normal');
+  }
+}
+
+.c-post-item__meta {
+  display: block;
+  margin-bottom: get-margin('little');
+}
+
+.c-post-item__excerpt {
+  margin: 0;
+
+  .read-more {
+    text-decoration: underline;
+
+    &:hover,
+    &:focus {
+      text-decoration: none;
+    }
+  }
+}
+
+.c-post-item__tags {
+  display: block;
+  margin-top: get-margin('little');
+}
+
+.c-post-item__tag {
+  text-decoration: none;
+}

package/lib/commands/create/creators/app/chisel-starter-theme/src/styles/components/_select2.scss

@@ -0,0 +1,45 @@
+@use '~design' as *;
+@use '../elements/form' as *;
+
+.select2-container {
+  display: block;
+  line-height: $form-field-line-height;
+
+  .select2-dropdown {
+    border-color: $form-field-focus-border-color;
+  }
+
+  .select2-selection--single {
+    height: auto;
+    transition: $form-field-transition;
+
+    .select2-selection__rendered {
+      padding: 0;
+      line-height: $form-field-line-height;
+    }
+
+    .select2-selection__placeholder {
+      color: $form-field-placeholder-color;
+    }
+
+    .select2-selection__arrow {
+      width: px-rem(32);
+      height: 100%;
+      background-image: $form-select-arrow;
+      background-repeat: no-repeat;
+      background-position: right 0.7rem top 50%;
+      background-size: 0.75rem auto;
+
+      b {
+        display: none;
+      }
+    }
+  }
+
+  &--open,
+  &--focus {
+    .select2-selection--single {
+      border-color: $form-field-focus-border-color;
+    }
+  }
+}

package/lib/commands/create/creators/app/chisel-starter-theme/src/styles/components/_sidebar.scss

@@ -0,0 +1,20 @@
+@use '~design' as *;
+
+.c-sidebar {
+  padding-bottom: get-padding('large');
+
+  .c-post & {
+    padding-top: get-padding('large');
+  }
+
+  &--left {
+    order: -1;
+  }
+}
+
+.c-sidebar__inner {
+  padding: get-padding('normal');
+  background-color: get-color('white');
+  border: 1px solid get-color('light-grey');
+  border-radius: get-border-radius('small');
+}

package/lib/commands/create/creators/app/chisel-starter-theme/src/styles/components/_slider.scss

@@ -0,0 +1,122 @@
+@use '~design' as *;
+@use 'node_modules/swiper/swiper-bundle';
+
+.swiper {
+  opacity: 0;
+  transition: get-transition('slow');
+}
+
+.swiper-initialized {
+  opacity: 1;
+}
+
+.swiper-slide {
+  height: auto;
+
+  img {
+    @include object-fit-cover;
+  }
+}
+
+.swiper-navigation-wrapper {
+  position: absolute;
+  top: 50%;
+  right: 0;
+  left: 0;
+  z-index: 10;
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+  transform: translateY(-50%);
+
+  .swiper-button {
+    width: px-rem(48);
+    height: px-rem(48);
+    appearance: none;
+    background-color: rgba(255, 255, 255, 30%);
+    border: none;
+    opacity: 1;
+    transition: get-transition('normal');
+
+    &::after {
+      font-size: px-rem(24);
+      color: get-color('primary');
+      transition: get-transition('normal');
+    }
+
+    &:hover {
+      background-color: rgba(255, 255, 255, 100%);
+
+      &::after {
+        color: get-color('secondary');
+      }
+    }
+  }
+
+  .swiper-button-prev {
+    left: 0;
+  }
+
+  .swiper-button-next {
+    right: 0;
+  }
+}
+
+.swiper-pagination-wrapper {
+  position: absolute;
+  bottom: 10px;
+  left: 50%;
+  z-index: 10;
+  display: flex;
+  justify-content: center;
+  padding: get-padding('tiny');
+  background-color: rgba(255, 255, 255, 30%);
+  border-radius: get-border-radius('tiny');
+  transition: get-transition('normal');
+  transform: translateX(-50%);
+
+  &:hover {
+    background-color: rgba(255, 255, 255, 100%);
+  }
+}
+
+.swiper-pagination.swiper-pagination-horizontal {
+  position: relative;
+  inset: auto;
+  transform: none;
+}
+
+.swiper-pagination-bullet {
+  width: px-rem(10);
+  height: px-rem(10);
+  background-color: get-color('primary');
+  opacity: 0.3;
+}
+
+.swiper-pagination-bullet-active-main,
+.swiper-pagination:not(.swiper-pagination-dots-dynamic) .swiper-pagination-bullet-active {
+  background-color: get-color('secondary');
+  opacity: 1;
+}
+
+.swiper-thumbs {
+  padding: get-padding('small') 0;
+
+  .swiper-slide {
+    cursor: pointer;
+    background-color: get-color('white');
+
+    img {
+      @include object-fit-cover;
+
+      border: 2px solid get-color('primary');
+      opacity: 0.7;
+      transition: get-transition('normal');
+    }
+
+    &.swiper-slide-thumb-active img {
+      border: 2px solid get-color('secondary');
+      opacity: 1;
+    }
+  }
+}

package/lib/commands/create/creators/app/chisel-starter-theme/src/styles/editor.scss

@@ -0,0 +1,4 @@
+/* Gutenberg editor custom styles */
+
+@use 'wp-editor';
+@use 'blocks';