docs-v2/assets/styles/layouts/article/_telegraf-plugins.scss

/////////////////////// Styles for Telegraf plugin cards ///////////////////////

.plugin-card {
  position: relative;
  padding: 1rem 1.5rem;
  margin-bottom: .5rem;
  justify-content: center;
  align-items: center;
  background: rgba($body-bg, .4);
  border-radius: $radius;

  h3 {
    padding: 0;
    margin-top: .25rem;
  }

  &.new h3:after {
    content: "New";
    margin-left: .3rem;
    padding: .25rem .5rem;
    font-style: italic;
    color: $nav-active;
    font-size: 1.2rem;
  }

  p {
    &.meta {
      margin: .75rem 0;
      font-weight: $medium;
      line-height: 1.75rem;

      .deprecated {
        margin-left: .5rem;
        font-style: italic;
        color: $article-code-accent7;
      }
    }
  }

  & .info {
    & > p:last-child { margin-bottom: .5rem; }
    & > ul:last-child { margin-bottom: .5rem; }
    & > ol:last-child { margin-bottom: .5rem; }
  }

  .github-link {
    position: absolute;
    top: 0;
    right: 0.5rem;
    opacity: 0.25;
    transition: opacity .2s, background .2s, color .2s;
    @include gradient($article-btn-gradient);

    .icon-github {
      font-size: 1.2rem;
      margin: 0 .25rem 0 0;
    }
  }

  &:hover {
    .github-link {
      opacity: 1;
      @include gradient($article-btn-gradient);
    }
  }

  // Special use-case for using block quotes in the yaml provided by the data file
  blockquote {
    border-color: $article-note-base;
    background: rgba($article-note-base, .12);
    h3,h4,h5,h6 { color: $article-note-heading; }
    p, li {
      color: $article-note-text;
      font-size: 1rem;
      font-style: normal;
    }
    strong { color: inherit; }
    a {
      color: $article-note-link;
      code:after {
        border-color: transparent rgba($article-note-code, .35) transparent transparent;
      }
      &:hover {
        color: $article-note-link-hover;
        code:after {
          border-color: transparent $article-note-link-hover transparent transparent;
        }
      }
    }
    ol li:before { color: $article-note-text; }
    code, pre{
      color: $article-note-code;
      background: $article-note-code-bg;
    }
  }
}

//////////////////////////////// Plugin Filters ////////////////////////////////

#plugin-filters {
  display: flex;
  flex-flow: row wrap;
  align-items: flex-start;

  .filter-category {
    flex: 1 1 200px;
    margin: 0 1.25rem 1.25rem 0;
    max-width: 33%;

    &.two-columns {
      flex: 1 2 400px;
      max-width: 66%;
      .filter-list {
        columns: 2;
      }
    }
  }

  h5 {
    border-bottom: 1px solid rgba($article-text, .25);
    padding-bottom: .65rem;
  }

  .filter-list {
    padding: 0;
    margin: .5rem 0 0;
    list-style: none;
    li {
      margin: 0;
      line-height: 1.35rem;
    }
  }

  label {
    display: block;
    padding: .25rem 0;
    color: $article-text;
    position: relative;

    &:after {
      content: attr(data-count);
      margin-left: 0;
      font-size: .85rem;
      opacity: .5;
    }
  }

  .checkbox {
    display: inline-block;
    position: relative;
    height: 1.15em;
    width: 1.15em;
    background: rgba($article-text, .05);
    margin-right: .3rem;
    vertical-align: text-top;
    border-radius: $radius;
    cursor: pointer;
    border: 1.5px solid rgba($article-text, .2);
    user-select: none;
  }

  input[type='checkbox'] {
    margin-right: -1.1rem ;
    padding: 0;
    vertical-align: top;
    opacity: 0;
    cursor: pointer;

    & + .checkbox:after {
      content: "";
      display: block;
      position: absolute;
      height: .5rem;
      width: .5rem;
      border-radius: 50%;
      background: $article-link;
      top: 50%;
      left: 50%;
      opacity: 0;
      transform: scale(2) translate(-20%, -20%);
      transition: all .2s;
    }

    &:checked + .checkbox:after {
      opacity: 1;
      transform: scale(1) translate(-50%, -50%);
    }
  }
}

////////////////////////////////////////////////////////////////////////////////
///////////////////////////////// MEDIA QUERIES ////////////////////////////////
////////////////////////////////////////////////////////////////////////////////

@media(max-width: 1100px) {
  #plugin-filters {
    .filter-category {
      max-width: 50%;
      &.two-columns, &.three-columns {
        max-width: 100%;
      }
    }
  }
}

@include media(small) {
  #plugin-filters{
    .filter-category {
      max-width: 100%;
    }
  }

  .plugin-card {
    .github-link {
      opacity: 1;
      @include gradient($article-btn-gradient)
      padding: .25rem .35rem .35rem;
      line-height: 0;
      .icon-github { margin: 0; }
      .hide { display: none; }
    }
  }
}