jekyll-theme-centos 2.2.0.pre.true.3 → 2.2.0

data/_includes/breadcrumbs.html

@@ -6,7 +6,7 @@
     {% if forloop.last %}
       <li class="breadcrumb-item active">{{ page.title }}</li>
     {% else %}
-      <li class="breadcrumb-item"><a href="{% assign crumb_limit = forloop.index | plus: 1 %}{% for crumb in crumbs limit: crumb_limit %}{{ crumb | append: '/' | replace:'without-plugin/','without-plugins/' }}{% endfor %}">{{ crumb | replace:'-',' ' | remove:'.html' | capitalize }}</a></li>
+      <li class="breadcrumb-item"><a href="{{ site.baseurl }}{% assign crumb_limit = forloop.index | plus: 1 %}{% for crumb in crumbs limit: crumb_limit %}{{ crumb | append: '/' | replace:'without-plugin/','without-plugins/' }}{% endfor %}">{{ crumb | replace:'-',' ' | remove:'.html' | capitalize }}</a></li>
     {% endif %}
   {% endfor %}
 </ol>

data/_includes/default/header.html

@@ -1,2 +1,10 @@
-<h1 class="display-4 fw-bold">{{ page.title }}</h1>
-<p class="lead">{{ page.title_lead }}</p>
+<div class="bg-dark" style="background: url({{ site.baseurl }}/assets/img/centos-motif.png) right center / cover;">
+  <div class="container py-5 text-light">
+    <div class="row mb-5">
+    <div class="col">
+      <div class="display-4 my-4 fw-bold">{{ page.title }}</div>
+      <div class="lead">{{ page.title_lead }}</div>
+    </div>
+    </div>
+  </div>
+</div>

data/_includes/footer.html

@@ -1,4 +1,4 @@
-<footer class="footer mt-5 pt-3 bg-dark small text-light" style="background: url({{ site.baseurl }}/assets/img/centos-motif.png) right center / cover;">
+<footer class="footer pt-3 bg-dark small text-light" style="background: url({{ site.baseurl }}/assets/img/centos-motif.png) right center / cover;">
 
 <div class="container">
   <div class="row justify-content-between mt-4 pt-4">

data/_includes/head-datatables.html

@@ -2,7 +2,7 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
     <title>{{ page.title }}</title>
-    <link rel="icon" type="image/png" sizes="16x16" href="/assets/img/favicon.png">
-    <link rel="stylesheet" href="/assets/css/stylesheet.css">
-    <link rel="stylesheet" href="/assets/css/dataTables.bootstrap5.min.css">
+    <link rel="icon" type="image/png" sizes="16x16" href="{{ site.baseurl }}/assets/img/favicon.png">
+    <link rel="stylesheet" href="{{ site.baseurl }}/assets/css/stylesheet.css">
+    <link rel="stylesheet" href="{{ site.baseurl }}/assets/css/dataTables.bootstrap5.min.css">
 </head>

data/_includes/head.html

@@ -2,6 +2,6 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
     <title>{{ page.title }}</title>
-    <link rel="icon" type="image/png" sizes="16x16" href="{{ site.baseurl }}/assets/img/favicon.png">
+    {% favicons %}
     <link rel="stylesheet" href="{{ site.baseurl }}/assets/css/stylesheet.min.css">
 </head>

data/_includes/home/distributions.html

@@ -7,7 +7,7 @@
     </div>
   </div>
 
-  <div class="row">
+  <div class="row mt-3">
     {% for item in site.data.centos.distributions limit:2 %}
     <div class="col-sm-6 px-5 mb-3{% if forloop.first %} border-end{% endif %}">
       <img role="img" src="{{ site.baseurl }}/{{ site.data.centos.identity.symbol.image }}" height="64" alt="{{ site.title }}">

data/_includes/home/header.html

@@ -2,8 +2,8 @@
   <div class="container py-5 text-white text-center">
     <div class="row">
       <div class="col">
-        <h1 class="display-1 fw-bold">{{ site.title }}</h1>
-        <p class="lead">{{ site.description }}</p>
+        <div class="display-1 fw-bold">{{ site.title }}</div>
+        <div class="lead">{{ site.description }}</div>
       </div>
     </div>
   </div>

data/_includes/home/news-and-events.html

@@ -9,20 +9,17 @@
     </div>
   </div>
 
-  <div class="row">
+  <div class="row mt-3 text-start">
     <div class="col">
       <div class="list-group shadow mb-3">
         {% for i in entries limit:5 %}
         {%- assign date_format = site.date_format | default: "%b %-d, %Y" -%}
-        <a href="{{ i.link }}" class="list-group-item list-group-item-action d-flex gap-3 py-3" aria-current="true">
-          <i class="text-primary mt-2 fa-solid fa-calendar-days"></i>
-          <div class="d-flex gap-2 w-100 justify-content-between">
-            <div class="text-start">
-              <h5 class="text-primary">{{ i.title }}</h5>
-              <p class="opacity-75">{{ i.excerpt | strip_html | slice: 0,150 }}...</p>
-            </div>
-            <small class="opacity-50 text-nowrap">{{ i.date | date: date_format }}</small>
+        <a href="{{ i.link }}" class="list-group-item list-group-item-action">
+          <div class="d-flex gap-2w-100 justify-content-between">
+            <h5 class="pt-0 mt-1 mb-1 fw-bold text-primary">{{ i.title }}</h5>
+            <small class="text-muted">{{ i.date | date: date_format }}</small>
           </div>
+          <p class="mb-1">{{ i.excerpt | strip_html | slice: 0,150 }}...</p>
         </a>
         {% endfor %}
       </div>

data/_includes/home/planet.html

@@ -7,24 +7,23 @@
     <div class="display-6">Blob posts</div>
     </div>
   </div>
-  <div class="row">
+
+  <div class="row mt-3 text-start">
     <div class="col">
       <div class="list-group shadow mb-3">
         {% for i in entries limit:5 %}
         {%- assign date_format = site.date_format | default: "%b %-d, %Y" -%}
-        <a href="{{ i.link }}" class="list-group-item list-group-item-action d-flex gap-3 py-3" aria-current="true">
-        <i class="text-primary mt-2 fa-solid fa-globe"></i>
-        <div class="d-flex gap-2 w-100 justify-content-between">
-        <div class="text-start">
-          <h5 class="text-primary">{{ i.title }}</h5>
-          <p class="opacity-75">{{ i.summary | strip_html | slice: 0,150 }}...</p>
-        </div>
-        <small class="opacity-50 text-nowrap">{{ i.published | date: date_format }}</small>
-        </div>
+        <a href="{{ i.link }}" class="list-group-item list-group-item-action">
+          <div class="d-flex gap-2w-100 justify-content-between">
+            <h5 class="pt-0 mt-1 mb-1 fw-bold text-primary">{{ i.title }}</h5>
+            <small class="text-muted">{{ i.published | date: date_format }}</small>
+          </div>
+          <p class="mb-1">{{ i.summary | strip_html | slice: 0,150 }}...</p>
         </a>
         {% endfor %}
       </div>
     </div>
+  </div>
 
   </div>
 </div>

data/_includes/home/sponsors.html

@@ -10,7 +10,7 @@
     </div>
   </div>
 
-  <div class="row">
+  <div class="row mt-3">
     <div class="col">
       <div class="content d-flex align-items-center justify-content-center">
         <div class="container rounded">

data/_includes/people/about.html

@@ -1,27 +1,25 @@
-{% assign username = page.username %}
-{% assign person = site.data.centos.people | where: "username", username %}
-
-{% for item in person %}
-<div class="container mt-5 mb-3 text-center">
+{% if page.about.section.visible == true %}
+<div class="container py-5 text-center border-top"{% if page.about.section.highlight == true %} style="background: radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(248,249,250,0) 100%);"{% endif %}>
 
   <div class="row">
     <div class="col">
-      {% if item.about.section.icon %}<div class="display-6">{{ item.about.section.icon }}</div>{% endif %}
-      {% if item.about.section.name %}<div class="display-6">{{ item.about.section.name }}</div>{% endif %}
-      {% if item.about.section.preamble %}<p>{{ item.about.section.preamble }}</p>{% endif %}
+      {% if page.about.section.icon %}<div class="display-6">{{ page.about.section.icon }}</div>{% endif %}
+      {% if page.about.section.name %}<div class="display-6">{{ page.about.section.name }}</div>{% endif %}
+      {% if page.about.section.preamble %}<p>{{ page.about.section.preamble }}</p>{% endif %}
     </div>
   </div>
 
-  {% if item.about.content.size > 0 %}
-  <div class="row">
+  <div class="row mt-3">
     <div class="col">
-      {% for p in item.about.content %}
+      {% if page.about.content.size > 0 %}
+      {% for p in page.about.content %}
       <p>{{ p }}</p>
       {% endfor %}
+      {% else %}
+      <div class="alert alert-light border shadow" role="alert">Nothing posted here, yet.</div>
+      {% endif %}
     </div>
   </div>
-  {% endif %}
 
 </div>
-{% endfor %}
-
+{% endif %}

data/_includes/people/posts.html

@@ -1,36 +1,38 @@
 {% assign username = page.username %}
-{% assign entries = site.posts | where: "username", username %}
-{% assign person = site.data.centos.people | where: "username", username %}
+{% assign entries = site.posts | where: "author", username %}
+{% assign limit = page.posts.section.limit %}
 
-{% if entries.size > 0 %}
-{% for item in person %}
-<div class="container">
+{% if page.posts.section.visible == true %}
+<div class="container py-5 text-center border-top"{% if page.posts.section.highlight == true %} style="background: radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(248,249,250,0) 100%);"{% endif %}>
 
-  <div class="row text-center">
+  <div class="row">
     <div class="col">
-      {% if item.posts.section.icon %}<div class="display-6">{{ item.posts.section.icon }}</div>{% endif %}
-      {% if item.posts.section.name %}<div class="display-6">{{ item.posts.section.name }}</div>{% endif %}
-      {% if item.posts.section.preamble %}<p>{{ item.posts.section.preamble }}</p>{% endif %}
+      {% if page.posts.section.icon %}<div class="display-6">{{ page.posts.section.icon }}</div>{% endif %}
+      {% if page.posts.section.name %}<div class="display-6">{{ page.posts.section.name }}</div>{% endif %}
+      {% if page.posts.section.preamble %}<p>{{ page.posts.section.preamble }}</p>{% endif %}
     </div>
   </div>
 
   <div class="row">
     <div class="col">
-      <div class="list-group shadow mb-3">
-        {% for i in entries limit:5 %}
+      {% if entries.size > 0 %}
+      <div class="list-group shadow text-start">
+        {% for i in entries limit: limit %}
         {%- assign date_format = site.date_format | default: "%b %-d, %Y" -%}
-        <a href="{{ i.link }}" class="list-group-item list-group-item-action">
+        <a href="{{ site.baseurl }}{{ i.url }}" class="list-group-item list-group-item-action">
           <div class="d-flex gap-2w-100 justify-content-between">
-            <h5 class="mb-1 text-primary">{{ i.title }}</h5>
+            <h5 class="pt-0 mt-1 mb-1 fw-bold text-primary">{{ i.title }}</h5>
             <small class="text-muted">{{ i.date | date: date_format }}</small>
           </div>
           <p class="mb-1">{{ i.excerpt | strip_html | slice: 0,150 }}...</p>
         </a>
         {% endfor %}
       </div>
+      {% else %}
+      <div class="alert alert-light border shadow" role="alert">Nothing posted here, yet.</div>
+      {% endif %}
     </div>
   </div>
 
 </div>
-{% endfor %}
 {% endif %}

data/_includes/people/projects.html

@@ -1,26 +1,28 @@
-{% assign username = page.username %}
-{% assign person = site.data.centos.people | where: "username", username %}
-
-{% for item in person %}
-{% if item.projects.content.size > 0 %}
-<div class="container my-5 text-center">
-
+{% if page.projects.section.visible == true %}
+<div class="container py-5 text-center border-top"{% if page.projects.section.highlight == true %} style="background: radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(248,249,250,0) 100%);"{% endif %}>
   <div class="row">
     <div class="col">
-      {% if item.projects.section.icon %}<div class="display-6">{{ item.projects.section.icon }}</div>{% endif %}
-      {% if item.projects.section.name %}<div class="display-6">{{ item.projects.section.name }}</div>{% endif %}
-      {% if item.projects.section.preamble %}<p>{{ item.projects.section.preamble }}</p>{% endif %}
+      {% if page.projects.section.icon %}<div class="display-6">{{ page.projects.section.icon }}</div>{% endif %}
+      {% if page.projects.section.name %}<div class="display-6">{{ page.projects.section.name }}</div>{% endif %}
+      {% if page.projects.section.preamble %}<p>{{ page.projects.section.preamble }}</p>{% endif %}
     </div>
   </div>
-  <div class="row">
-    {% for project in item.projects.content %}
-    <div class="col-sm-6 {% cycle 'border-end', '' %}">
-      <h3 class="display-6 fw-bold"><a href="{{ project.name }}">{{ project.name }}</a></h3>
-      <p class="lead">{{ project.description }}</p>
+
+  {% if page.projects.content.size > 0 %}
+  <div class="row mt-3">
+    {% for project in page.projects.content %}
+    <div class="col-sm-6{% cycle ' border-end', '' %}">
+      <div class="display-6 pt-3 fw-bold"><a href="{{ project.link }}">{{ project.name }}</a></div>
+      <div class="lead pb-3">{{ project.description }}</div>
     </div>
     {% endfor%}
   </div>
+  {% else %}
+  <div class="row mt-3">
+    <div class="col">
+      <div class="alert alert-light border shadow" role="alert">Nothing posted here, yet.</div>
+    </div>
+  </div>
+  {% endif %}
 </div>
-
 {% endif %}
-{% endfor%}

data/_includes/people/pubkeys.html

@@ -1,30 +1,29 @@
-{% assign username = page.username %}
-{% assign person = site.data.centos.people | where: "username", username %}
-
-{% for item in person %}
-<div class="container mt-5 mb-3 text-center">
+{% if page.pubkeys.section.visible == true %}
+<div class="container py-5 text-center border-top"{% if page.pubkeys.section.highlight == true %} style="background: radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(248,249,250,0) 100%);"{% endif %}>
 
   <div class="row">
     <div class="col">
-      {% if item.pubkeys.section.icon %}<div class="display-6">{{ item.pubkeys.section.icon }}</div>{% endif %}
-      {% if item.pubkeys.section.name %}<div class="display-6">{{ item.pubkeys.section.name }}</div>{% endif %}
-      {% if item.pubkeys.section.preamble %}<p>{{ item.pubkeys.section.preamble }}</p>{% endif %}
+      {% if page.pubkeys.section.icon %}<div class="display-6">{{ page.pubkeys.section.icon }}</div>{% endif %}
+      {% if page.pubkeys.section.name %}<div class="display-6">{{ page.pubkeys.section.name }}</div>{% endif %}
+      {% if page.pubkeys.section.preamble %}<p>{{ page.pubkeys.section.preamble }}</p>{% endif %}
     </div>
   </div>
 
+  {% if page.pubkeys.content.size > 0 %}
   <div class="row">
-    {% for pubkey in item.pubkeys.content %}
-    <div class="col-sm-6 px-5 mb-3">
-      <h3 class="display-6 fw-bold">{{ pubkey.name }}</h3>
-
-      <div class="input-group mb-3">
-        <input id="{{ pubkey.name }}-key-{{ forloop.index }}" value="{{ pubkey.content }}" type="text" class="form-control" placeholder="User's key" aria-label="User's key" aria-describedby="{{ pubkey.name }}-button-{{ forloop.index }}" readonly />
+    {% for pubkey in page.pubkeys.content %}
+    <div class="col-sm-6 px-5">
+      <p class="fw-bold">{{ pubkey.name }}</p>
+      <div class="input-group">
+        <textarea id="{{ pubkey.name }}-key-{{ forloop.index }}" class="form-control font-monospace" placeholder="User's key" aria-label="User's key" aria-describedby="{{ pubkey.name }}-button-{{ forloop.index }}" readonly rows="5">{{ pubkey.content }}</textarea>
         <button id="{{ pubkey.name }}-button-{{ forloop.index }}" class="btn btn-clipboard btn-outline-primary" type="button" data-clipboard-target="#{{ pubkey.name }}-key-{{ forloop.index }}" data-bs-toggle="tooltip" data-bs-title="Copy to clipboard"><i class="fa-solid fa-clipboard"></i></button>
       </div>
-
     </div>
     {% endfor %}
   </div>
+  {% else %}
+  <div class="alert alert-light border shadow" role="alert">Nothing posted here, yet.</div>
+  {% endif %}
 
 </div>
-{% endfor%}
+{% endif %}

data/_includes/people/support.html

@@ -1,22 +1,25 @@
-{% assign username = page.username %}
-{% assign person = site.data.centos.people | where: "username", username %}
-
-{% for item in person %}
-<div class="container mt-5 mb-3 text-center">
+{% if page.support.section.visible == true %}
+<div class="container py-5 text-center border-top"{% if page.support.section.highlight == true %} style="background: radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(248,249,250,0) 100%);"{% endif %}>
 
   <div class="row">
     <div class="col">
-      {% if item.support.section.icon %}<div class="display-6">{{ item.support.section.icon }}</div>{% endif %}
-      {% if item.support.section.name %}<div class="display-6">{{ item.support.section.name }}</div>{% endif %}
-      {% if item.support.section.preamble %}<p>{{ item.support.section.preamble }}</p>{% endif %}
+      {% if page.support.section.icon %}<div class="display-6">{{ page.support.section.icon }}</div>{% endif %}
+      {% if page.support.section.name %}<div class="display-6">{{ page.support.section.name }}</div>{% endif %}
+      {% if page.support.section.preamble %}<p>{{ page.support.section.preamble }}</p>{% endif %}
     </div>
   </div>
 
+  {% if page.support.content.size > 0 %}
   <div class="row">
+    {% for support in page.support.content %}
     <div class="col">
-      {{ item.support.content }}
+      {{ support }}
     </div>
+    {% endfor %}
   </div>
+  {% else %}
+  <div class="alert alert-light border shadow" role="alert">Nothing posted here, yet.</div>
+  {% endif %}
 
 </div>
-{% endfor %}
+{% endif %}

data/_includes/post-nav-explorer.html

@@ -11,7 +11,7 @@
     <a href="{{ "/feed.xml" | relative_url }}"><button type="button" class="btn btn-light" data-toggle="tooltip" data-placement="top" title="RSS"><i class="fas fa-rss"></i></button></a>
   </div>
   <div class="post__nav__explorer__index">
-    <a href="/news-and-events/"><button type="button" class="btn btn-light" data-toggle="tooltip" data-placement="top" title="Blog posts"><i class="fas fa-th"></i></button></a>
+    <a href="{{ "/news-and-events/" | relative_url }}"><button type="button" class="btn btn-light" data-toggle="tooltip" data-placement="top" title="Blog posts"><i class="fas fa-th"></i></button></a>
   </div>
   {% if page.next.url %}
   <div class="post__nav__explorer__older">

data/_includes/search.html

@@ -2,8 +2,8 @@
 <div id="search-hits"></div>
 <div id="search-pagination"></div>
 
-<script src="/assets/js/instantsearch.min.js"></script>
-<script src="/assets/js/moment.min.js"></script>
+<script src="{{ site.baseurl }}/assets/js/instantsearch.min.js"></script>
+<script src="{{ site.baseurl }}/assets/js/moment.min.js"></script>
 <script>
   const search = instantsearch({
     appId: '{{ site.algolia.application_id }}',

data/_layouts/blog.html

@@ -7,7 +7,7 @@ layout: default
   <div class="blog__content">
 
   <ol class="blog__content__breadcrumb">
-    <li class="blog__content__breadcrumb__item"><a href="/">Home</a></li>
+    <li class="blog__content__breadcrumb__item"><a href="{{ site.baseurl }}">Home</a></li>
     <li class="blog__content__breadcrumb__item--active">{{ page.title | capitalize }}</li>
   </ol>
 

data/_layouts/default.html

@@ -9,17 +9,9 @@
 
     <main class="bg-light">
 
-      <div class="bg-dark" style="background: url({{ site.baseurl }}/assets/img/centos-motif.png) right center / cover;">
-        <div class="container py-5 text-light">
-          <div class="row mb-5">
-          <div class="col">
-            {% include header.html -%}
-          </div>
-          </div>
-        </div>
-      </div>
+      {% include header.html -%}
 
-      <div class="container shadow-lg bg-body p-5 mt-n5 rounded">
+      <div class="container shadow-lg bg-body p-5 mt-n5 rounded-top">
         <div class="row">
           <div class="col-sm-8">{% include breadcrumbs.html %}</div>
           <div class="col-sm-4 text-end">{% include editbar.html %}</div>

data/_layouts/home.html

@@ -13,7 +13,6 @@
       {% include home/distributions.html %}
       {% include home/news-and-events.html %}
       {% include home/planet.html %}
-      {% include home/sponsors.html %}
 
       {% include footer.html -%}
 

data/_sass/bootstrap/_accordion.scss

@@ -0,0 +1,149 @@
+//
+// Base styles
+//
+
+.accordion {
+  // scss-docs-start accordion-css-vars
+  --#{$prefix}accordion-color: #{$accordion-color};
+  --#{$prefix}accordion-bg: #{$accordion-bg};
+  --#{$prefix}accordion-transition: #{$accordion-transition};
+  --#{$prefix}accordion-border-color: #{$accordion-border-color};
+  --#{$prefix}accordion-border-width: #{$accordion-border-width};
+  --#{$prefix}accordion-border-radius: #{$accordion-border-radius};
+  --#{$prefix}accordion-inner-border-radius: #{$accordion-inner-border-radius};
+  --#{$prefix}accordion-btn-padding-x: #{$accordion-button-padding-x};
+  --#{$prefix}accordion-btn-padding-y: #{$accordion-button-padding-y};
+  --#{$prefix}accordion-btn-color: #{$accordion-button-color};
+  --#{$prefix}accordion-btn-bg: #{$accordion-button-bg};
+  --#{$prefix}accordion-btn-icon: #{escape-svg($accordion-button-icon)};
+  --#{$prefix}accordion-btn-icon-width: #{$accordion-icon-width};
+  --#{$prefix}accordion-btn-icon-transform: #{$accordion-icon-transform};
+  --#{$prefix}accordion-btn-icon-transition: #{$accordion-icon-transition};
+  --#{$prefix}accordion-btn-active-icon: #{escape-svg($accordion-button-active-icon)};
+  --#{$prefix}accordion-btn-focus-border-color: #{$accordion-button-focus-border-color};
+  --#{$prefix}accordion-btn-focus-box-shadow: #{$accordion-button-focus-box-shadow};
+  --#{$prefix}accordion-body-padding-x: #{$accordion-body-padding-x};
+  --#{$prefix}accordion-body-padding-y: #{$accordion-body-padding-y};
+  --#{$prefix}accordion-active-color: #{$accordion-button-active-color};
+  --#{$prefix}accordion-active-bg: #{$accordion-button-active-bg};
+  // scss-docs-end accordion-css-vars
+}
+
+.accordion-button {
+  position: relative;
+  display: flex;
+  align-items: center;
+  width: 100%;
+  padding: var(--#{$prefix}accordion-btn-padding-y) var(--#{$prefix}accordion-btn-padding-x);
+  @include font-size($font-size-base);
+  color: var(--#{$prefix}accordion-btn-color);
+  text-align: left; // Reset button style
+  background-color: var(--#{$prefix}accordion-btn-bg);
+  border: 0;
+  @include border-radius(0);
+  overflow-anchor: none;
+  @include transition(var(--#{$prefix}accordion-transition));
+
+  &:not(.collapsed) {
+    color: var(--#{$prefix}accordion-active-color);
+    background-color: var(--#{$prefix}accordion-active-bg);
+    box-shadow: inset 0 calc(-1 * var(--#{$prefix}accordion-border-width)) 0 var(--#{$prefix}accordion-border-color); // stylelint-disable-line function-disallowed-list
+
+    &::after {
+      background-image: var(--#{$prefix}accordion-btn-active-icon);
+      transform: var(--#{$prefix}accordion-btn-icon-transform);
+    }
+  }
+
+  // Accordion icon
+  &::after {
+    flex-shrink: 0;
+    width: var(--#{$prefix}accordion-btn-icon-width);
+    height: var(--#{$prefix}accordion-btn-icon-width);
+    margin-left: auto;
+    content: "";
+    background-image: var(--#{$prefix}accordion-btn-icon);
+    background-repeat: no-repeat;
+    background-size: var(--#{$prefix}accordion-btn-icon-width);
+    @include transition(var(--#{$prefix}accordion-btn-icon-transition));
+  }
+
+  &:hover {
+    z-index: 2;
+  }
+
+  &:focus {
+    z-index: 3;
+    border-color: var(--#{$prefix}accordion-btn-focus-border-color);
+    outline: 0;
+    box-shadow: var(--#{$prefix}accordion-btn-focus-box-shadow);
+  }
+}
+
+.accordion-header {
+  margin-bottom: 0;
+}
+
+.accordion-item {
+  color: var(--#{$prefix}accordion-color);
+  background-color: var(--#{$prefix}accordion-bg);
+  border: var(--#{$prefix}accordion-border-width) solid var(--#{$prefix}accordion-border-color);
+
+  &:first-of-type {
+    @include border-top-radius(var(--#{$prefix}accordion-border-radius));
+
+    .accordion-button {
+      @include border-top-radius(var(--#{$prefix}accordion-inner-border-radius));
+    }
+  }
+
+  &:not(:first-of-type) {
+    border-top: 0;
+  }
+
+  // Only set a border-radius on the last item if the accordion is collapsed
+  &:last-of-type {
+    @include border-bottom-radius(var(--#{$prefix}accordion-border-radius));
+
+    .accordion-button {
+      &.collapsed {
+        @include border-bottom-radius(var(--#{$prefix}accordion-inner-border-radius));
+      }
+    }
+
+    .accordion-collapse {
+      @include border-bottom-radius(var(--#{$prefix}accordion-border-radius));
+    }
+  }
+}
+
+.accordion-body {
+  padding: var(--#{$prefix}accordion-body-padding-y) var(--#{$prefix}accordion-body-padding-x);
+}
+
+
+// Flush accordion items
+//
+// Remove borders and border-radius to keep accordion items edge-to-edge.
+
+.accordion-flush {
+  .accordion-collapse {
+    border-width: 0;
+  }
+
+  .accordion-item {
+    border-right: 0;
+    border-left: 0;
+    @include border-radius(0);
+
+    &:first-child { border-top: 0; }
+    &:last-child { border-bottom: 0; }
+
+    .accordion-button {
+      &,
+      &.collapsed {
+        @include border-radius(0);
+      }
+    }
+  }
+}