<commit_before>@import "../pui-variables";
@import "../mixins";
@import '../../../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins';


/*doc
---
title: Panels
name: panel
categories:
  - css_components_panels
---


<code class="pam">
<i class="fa fa-download" alt="Install the Component">
npm install @npmcorp/pui-css-panels --save
</i>
</code>


Panels are often used to group related content. They include box headers, footers, and can be combined with any backgrounds.

Panels are typically a combination of contours, backgrounds, and content including headers and footers. This section describes the contours.

*/

.panel { // resets bootstrap default
  box-shadow: none;
  h1, h2, h3, h4, h5, h6 {
    margin: 0;
  }
  //background-color: transparent; // Bootstrap Override
}

.panel-title {
  font-size: inherit; // Bootstrap Override for React Collapses
}

.panel-title-alt {
  padding: $panel-title-padding;
  border-bottom: $panel-title-border;
  font-weight: $panel-title-font-weight;
  color: $panel-title-text;
}

/*doc
---
title: Shadow
name: panel_shadow
parent: panel
---

Shadow panels add a bottom shadow to the panel.

```html_example_table
<div class="panel panel-shadow-1 bg-neutral-11">
  <div class="panel-body">
    Shadow Panel
  </div>
</div>

<div class="panel panel-shadow-2 bg-neutral-11">
  <div class="panel-body">
    Shadow Panel
  </div>
</div>

<div class="panel panel-shadow-3 bg-neutral-11">
  <div class="panel-body">
    Shadow Panel
  </div>
</div>

<div class="panel panel-shadow-4 bg-neutral-11">
  <div class="panel-body">
    Shadow Panel
  </div>
</div>
```

*/
.panel-shadow {
  border: none; //Bootstrap override
  @include background-clip-fix;
}

.panel-shadow-1 {
  @extend .panel-shadow;
  box-shadow: 0px 4px $shadow-1;
}

.panel-shadow-2 {
  @extend .panel-shadow;
  box-shadow: 0px 4px $shadow-2;
}

.panel-shadow-3 {
  @extend .panel-shadow;
  box-shadow: 0px 4px $shadow-3;
}

.panel-shadow-4 {
  @extend .panel-shadow;
  box-shadow: 0px 4px $shadow-4;
}

/*doc
---
title: Simple
name: panel_simple
parent: panel
---

```html_example
<div class="panel panel-simple bg-neutral-11">
  <div class="panel-body">
    Simple Panel
  </div>
</div>
```

*/

.panel-simple {
  border: $panel-simple-border;
}

/*doc
---
title: Basic Alternate
name: panel_basic_alt
parent: panel
---

Basic alternate panels are panels with a border. You can have a panel-basic-alt with or without a title.

```html_example
<div class="panel panel-basic-alt">
  <div class="panel-header">
    <h5 class="panel-title-alt">Basic Title Alt</h5>
  </div>
  <div class="panel-body">
    Basic Panel
  </div>
</div>

<div class="panel panel-basic-alt">
  <div class="panel-body">
    Basic Panel
  </div>
</div>
```

*/

.panel-basic-alt {
  border: $panel-basic-alt-border;
  border-radius: $panel-basic-alt-border-radius;
  @include background-clip-fix;
  border-bottom: $panel-basic-alt-border-bottom;
  background-color: $panel-basic-alt-background;
}

/*doc
---
title: Scrollable
name: panel_scrollable
parent: panel
---

The scrollable panel sets a fixed height of 183px and scrolls any content that is larger. If you want a different size, set an inline style on the `.panel-scrollable`.

```html_example<commit_msg>.panel-alt clip their contents at the corners<commit_after>@import "../pui-variables";
@import "../mixins";
@import '../../../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins';


/*doc
---
title: Panels
name: panel
categories:
  - css_components_panels
---


<code class="pam">
<i class="fa fa-download" alt="Install the Component">
npm install @npmcorp/pui-css-panels --save
</i>
</code>


Panels are often used to group related content. They include box headers, footers, and can be combined with any backgrounds.

Panels are typically a combination of contours, backgrounds, and content including headers and footers. This section describes the contours.

*/

.panel { // resets bootstrap default
  box-shadow: none;
  h1, h2, h3, h4, h5, h6 {
    margin: 0;
  }
  //background-color: transparent; // Bootstrap Override
}

.panel-title {
  font-size: inherit; // Bootstrap Override for React Collapses
}

.panel-title-alt {
  padding: $panel-title-padding;
  border-bottom: $panel-title-border;
  font-weight: $panel-title-font-weight;
  color: $panel-title-text;
}

/*doc
---
title: Shadow
name: panel_shadow
parent: panel
---

Shadow panels add a bottom shadow to the panel.

```html_example_table
<div class="panel panel-shadow-1 bg-neutral-11">
  <div class="panel-body">
    Shadow Panel
  </div>
</div>

<div class="panel panel-shadow-2 bg-neutral-11">
  <div class="panel-body">
    Shadow Panel
  </div>
</div>

<div class="panel panel-shadow-3 bg-neutral-11">
  <div class="panel-body">
    Shadow Panel
  </div>
</div>

<div class="panel panel-shadow-4 bg-neutral-11">
  <div class="panel-body">
    Shadow Panel
  </div>
</div>
```

*/
.panel-shadow {
  border: none; //Bootstrap override
  @include background-clip-fix;
}

.panel-shadow-1 {
  @extend .panel-shadow;
  box-shadow: 0px 4px $shadow-1;
}

.panel-shadow-2 {
  @extend .panel-shadow;
  box-shadow: 0px 4px $shadow-2;
}

.panel-shadow-3 {
  @extend .panel-shadow;
  box-shadow: 0px 4px $shadow-3;
}

.panel-shadow-4 {
  @extend .panel-shadow;
  box-shadow: 0px 4px $shadow-4;
}

/*doc
---
title: Simple
name: panel_simple
parent: panel
---

```html_example
<div class="panel panel-simple bg-neutral-11">
  <div class="panel-body">
    Simple Panel
  </div>
</div>
```

*/

.panel-simple {
  border: $panel-simple-border;
}

/*doc
---
title: Basic Alternate
name: panel_basic_alt
parent: panel
---

Basic alternate panels are panels with a border. You can have a panel-basic-alt with or without a title.

```html_example
<div class="panel panel-basic-alt">
  <div class="panel-header">
    <h5 class="panel-title-alt">Basic Title Alt</h5>
  </div>
  <div class="panel-body">
    Basic Panel
  </div>
</div>

<div class="panel panel-basic-alt">
  <div class="panel-body">
    Basic Panel
  </div>
</div>
```

*/

.panel-basic-alt {
  border: $panel-basic-alt-border;
  border-radius: $panel-basic-alt-border-radius;
  overflow: hidden;
  @include background-clip-fix;
  border-bottom: $panel-basic-alt-border-bottom;
  background-color: $panel-basic-alt-background;
}

/*doc
---
title: Scrollable
name: panel_scrollable
parent: panel
---

The scrollable panel sets a fixed height of 183px and scrolls any content that is larger. If you want a different size, set an inline style on the `.panel-scrollable`.

```html_example
{'fraction_non_alphanumeric': 0.1551094890510949, 'fraction_numerical': 0.012773722627737226, 'mean_word_length': 3.4409182984469955, 'pattern_counts': {'":': 0, '<': 75, '<?xml version=': 0, '>': 75, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 4, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3511070', 'n_tokens_mistral': 2351, 'n_tokens_neox': 2264, 'n_words': 635}