roblib_2023/css/sass/components/_diy.scss

//@format;
%diy-card {
  background: white url(../images/nav-arrow.png) no-repeat 95% 92%;
  color: #333;
  //font-size: 120%;
  width: 200px;
  padding: 20px;
  margin: 15px 5px;
  max-height: 120px;
  min-height: 120px;
  display: block;
  border-top: 4px solid $red;
  border-collapse: separate;
  box-shadow: 4px 4px 6px grey;
  border-bottom-right-radius: 15px;
  text-decoration: none;
  line-height: 1.3;
}
/*
 *page layout
 */
$diy-layout-bp: rem-calc(636);
.diy-layout {
  display: flex;
  flex-direction: column;
  @include breakpoint($diy-layout-bp) {
    flex-direction: row;

    .diy_side {
      flex: 0 0 300px;
    }
  }
  .diy_side {
    //flex: 0 0 300px;
  }
  .diy_content {
  }
}

//$diy-header-height: rem-calc(110);
$diy-header-height: initial;
.diy-main-title {
  border-bottom: 1px solid #ccc !important;
  @include breakpoint($diy-layout-bp) {
    height: $diy-header-height;
  }
  h1 {
    font-size: 2rem;
    border-bottom: none;
    margin-bottom: 0.5rem;
  }
}
.layout__region--first {
  padding-right: calc($global-padding/2);
}
.layout__region--second {
  border-left: 1px solid #ccc;
  padding-left: calc($global-padding/2);
  .field--name-field-guide-body {
    margin-left: $global-margin;
  }
}
.home-link {
  margin: $global-margin;
  a {
    @include button();
    @include button(
      false,
      $button-background,
      $button-background-hover,
      $button-color,
      hollow
    );
  }
}
.related-diys {
  //background: #ccc;
  h2 {
    text-align: center;
  }
  //ul {
  //list-style: none;
  //margin: 0;
  //}
  .item-list a {
    font-family: 'Roboto Condensed', sans-serif;
    text-decoration: none;
  }
  .field-content {
    //display: flex;
    //justify-content: space-around;
  }
}
.diy_content {
  @include breakpoint($diy-layout-bp) {
    padding-left: 1rem;
    border-left: 1px solid #ccc;
  }
}
.diy-guide-title {
  //font-size: 2.4rem;
  @include breakpoint($diy-layout-bp) {
    height: $diy-header-height;
  }
}
.related-diys {
  display: none;
  @include breakpoint($diy-layout-bp) {
    display: block;
  }
}
.related-diys .diy-grid--block a {
  @extend %diy-card;
}

.add-new .views-row {
  //@include button-group($child-selector, $spacing);
  @include button-group();
  display: flex;
  justify-content: flex-end;
}
.add-new a {
  @include button(
    false,
    $button-background,
    $button-background-hover,
    $button-color,
    hollow
  );
  margin-left: 10px;
}
.related-diys .attachment .diy-grid--block a {
  @extend %diy-card;
  @include button(
    false,
    $button-background,
    $button-background-hover,
    $button-color,
    hollow
  );
}
.diy-grid .diy-grid--block {
  display: flex;
  justify-content: space-around;
  a {
    @extend %diy-card;
  }
}
.page-node-type-diy_guide {
  .layout__region--first h1 {
    margin-top: $global-margin;
    //border-bottom: 1px solid #ccc;
  }
}
.page-node-type-diy_guide,
.page-node-type-guide_categories {
  .layout__region--first h2 {
    @extend h1;
    margin-top: $global-margin;
    border-bottom: 1px solid #ccc;
  }
}

.page-node-type-guide_categories,
.page-node-type-front_page {
  nav.tabs,
  h1.page-title {
    display: none;
  }
}
.diy-grid {
  //&--block {
  //a {
  //@extend %diy-card;
  ////padding: 1em;
  ////@include card-container;
  ////border-top: 4px solid #8c2004;
  ////height: 5rem;
  //}
  //}
  .view-content {
    //@include flex-grid-row(null, $grid-row-width, 4, true, 2em);
    @include xy-grid;
    @include xy-grid-layout(1, '.diy-grid--block');
    @include breakpoint(836px) {
      @include xy-grid-layout(2, '.diy-grid--block');
    }
    @include breakpoint(1074px) {
      @include xy-grid-layout(3, '.diy-grid--block');
    }
  }
}
.field--name-field-guide-page-title {
  @extend h1;
  margin-top: $global-margin;
}
.diy-sidebar-title {
  //text-align: center;
}
.add-new-diy-guide {
  text-align: right;
  line-height: 1;
  a {
    font-size: 0.8rem;
    text-decoration: none;
  }
}
.diy-guide-title .field__items {
  //height: 10rem;
  //display: flex;
  .field__item {
    //align-self: flex-end;
  }
}
.field--name-field-guide-title,
.page-node-type-guide_categories .field--name-field-list-title {
  @extend h2;
  text-align: center;
  border-bottom: 1px solid #ccc;
  text-transform: capitalize;
  //padding-bottom: $global-padding;
  line-height: 1.6;
  margin-top: $global-margin;
}
.diy-category-wrapper {
  //height: 106px;
  .diy-category-title {
    text-align: center;
    margin-bottom: 0;
    width: 100%;
  }
}
.diy-home-title h1 {
  line-height: 1.1;
  //height: 106px;
}
.section-lib-diy .content .page_title {
  //display: none;
}
.diy-admin-links {
  float: right;
  a {
    margin-left: 1rem;
  }
}
.panel-pane {
  border: none;
}
.related-diys ul {
  list-style-type: none;
  text-align: center;
  margin: 0;
}
.related-diys ul li a:before {
  content: '> ';
}