Issue #3208860 by DanielVeza, gareth.poole: Sector Blog integration

themes/sector_radix_starter/dist/components/comment/comment-form.css

@@ -0,0 +1 @@
+.comment-form{border:1px #dee2e6 solid;background-color:#f8f9fa;border-radius:.25rem;padding:1rem}*+.comment-form{margin-top:2rem}

themes/sector_radix_starter/sector_radix_starter.libraries.yml

@@ -320,6 +320,20 @@ webform:
   dependencies:
     - sector_radix_starter/forms
     - sector_radix_starter/bootstrap-forms
+
+
+# Sector Add-ons
+promotion--blog-archive:
+  css:
+    component:
+      dist/components/promotion/promotion--blog-archive.css: {}
+comments:
+  css:
+    component:
+      dist/components/comment/comment.css: { }
+      dist/components/comment/comment-form.css: { media: 'screen' }
+
+
 # Glitter. Mainly demo CSS that can be removed for most sites.
 glitter:
   css:

themes/sector_radix_starter/src/components/comment/comment-form.scss

@@ -0,0 +1,12 @@
+@import 'src/bootstrap/custom-bootstrap-variables';
+
+.comment-form {
+  border: 1px $border-color solid;
+  background-color: $light;
+  border-radius: $btn-border-radius;;
+  padding: $spacer;
+
+  * + & {
+    margin-top: $spacer * 2;
+  }
+}

themes/sector_radix_starter/src/components/comment/comment.scss

@@ -0,0 +1,40 @@
+@import 'src/bootstrap/custom-bootstrap-variables';
+@import 'bootstrap/scss/mixins/gradients';
+@import 'bootstrap/scss/mixins/box-shadow';
+@import 'bootstrap/scss/mixins/hover';
+@import 'bootstrap/scss/mixins/buttons';
+
+.comment {
+
+
+  + .comment,
+  + .indented {
+    margin-top: $spacer * 1.25;
+  }
+
+  + .indented {
+    padding-left: $spacer;
+    border-left: 8px $gray-200 solid;
+  }
+
+  * + .links {
+    margin-top: $spacer * 0.5;
+  }
+
+  .links {
+    font-size: 90%;
+
+    > li:first-child > .nav-link {
+      border-top-left-radius: $btn-border-radius;
+      border-bottom-left-radius: $btn-border-radius;
+    }
+    > li:last-child > .nav-link {
+      border-top-right-radius: $btn-border-radius;
+      border-bottom-right-radius: $btn-border-radius;
+    }
+
+    .nav-link {
+      @include button-variant($primary, $primary);
+    }
+  }
+}

themes/sector_radix_starter/src/components/promotion/promotion--blog-archive.scss

@@ -0,0 +1,27 @@
+@import 'src/bootstrap/custom-bootstrap-variables';
+@import 'mixins/type';
+
+.promotion--blog-archive {
+
+  ul {
+    margin: 0;
+    display: flex;
+    flex-wrap: wrap;
+    list-style: none;
+    padding: 0;
+    @include font-smoothing;
+
+    > li {
+      margin-right: .75rem;
+    }
+
+    a {
+      font-weight: $font-weight-bold;
+    }
+  }
+
+  // dont need a pager here
+  nav {
+    display: none;
+  }
+}