mirror of
https://github.com/papercss/papercss
synced 2024-05-19 06:06:35 +02:00
Added list group component support
This commit is contained in:
Bayarjargal Jargalsaikhan
parent
6a682d685e
commit
9e709d9339
97
dist/paper.css
vendored
97
dist/paper.css
vendored
|
|
@ -3323,4 +3323,101 @@ nav .collapsible > label {
|
|||
nav .collapsible > label {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.list-group {
|
||||
border-bottom-left-radius: 15px 255px;
|
||||
border-bottom-right-radius: 225px 15px;
|
||||
border-top-left-radius: 255px 15px;
|
||||
border-top-right-radius: 15px 225px;
|
||||
border: 1px solid #868e96;
|
||||
padding: 0;
|
||||
}
|
||||
.list-group li::before {
|
||||
content: "";
|
||||
}
|
||||
.list-group li,
|
||||
.list-group .list-group-item {
|
||||
border-bottom-left-radius: 15px 255px;
|
||||
border-bottom-right-radius: 225px 15px;
|
||||
border-top-left-radius: 255px 15px;
|
||||
border-top-right-radius: 15px 225px;
|
||||
padding: 0.5rem;
|
||||
padding-left: 1rem;
|
||||
}
|
||||
.list-group .active {
|
||||
border-bottom-left-radius: 15px 255px;
|
||||
border-bottom-right-radius: 225px 15px;
|
||||
border-top-left-radius: 255px 15px;
|
||||
border-top-right-radius: 15px 225px;
|
||||
background: #0b74d5;
|
||||
color: white;
|
||||
padding: 0.5rem;
|
||||
padding-left: 1rem;
|
||||
}
|
||||
.list-group .list-group-item-primary,
|
||||
.list-group .paper-list-group-item-primary {
|
||||
border-bottom-left-radius: 15px 255px;
|
||||
border-bottom-right-radius: 225px 15px;
|
||||
border-top-left-radius: 255px 15px;
|
||||
border-top-right-radius: 15px 225px;
|
||||
background: #41403e;
|
||||
color: white;
|
||||
padding: 0.5rem;
|
||||
padding-left: 1rem;
|
||||
}
|
||||
.list-group .list-group-item-secondary,
|
||||
.list-group .paper-list-group-item-secondary {
|
||||
border-bottom-left-radius: 15px 255px;
|
||||
border-bottom-right-radius: 225px 15px;
|
||||
border-top-left-radius: 255px 15px;
|
||||
border-top-right-radius: 15px 225px;
|
||||
background: #0b74d5;
|
||||
color: white;
|
||||
padding: 0.5rem;
|
||||
padding-left: 1rem;
|
||||
}
|
||||
.list-group .list-group-item-success,
|
||||
.list-group .paper-list-group-item-success {
|
||||
border-bottom-left-radius: 15px 255px;
|
||||
border-bottom-right-radius: 225px 15px;
|
||||
border-top-left-radius: 255px 15px;
|
||||
border-top-right-radius: 15px 225px;
|
||||
background: #86a361;
|
||||
color: white;
|
||||
padding: 0.5rem;
|
||||
padding-left: 1rem;
|
||||
}
|
||||
.list-group .list-group-item-warning,
|
||||
.list-group .paper-list-group-item-warning {
|
||||
border-bottom-left-radius: 15px 255px;
|
||||
border-bottom-right-radius: 225px 15px;
|
||||
border-top-left-radius: 255px 15px;
|
||||
border-top-right-radius: 15px 225px;
|
||||
background: #ddcd45;
|
||||
color: white;
|
||||
padding: 0.5rem;
|
||||
padding-left: 1rem;
|
||||
}
|
||||
.list-group .list-group-item-danger,
|
||||
.list-group .paper-list-group-item-danger {
|
||||
border-bottom-left-radius: 15px 255px;
|
||||
border-bottom-right-radius: 225px 15px;
|
||||
border-top-left-radius: 255px 15px;
|
||||
border-top-right-radius: 15px 225px;
|
||||
background: #a7342d;
|
||||
color: white;
|
||||
padding: 0.5rem;
|
||||
padding-left: 1rem;
|
||||
}
|
||||
.list-group .list-group-item-muted,
|
||||
.list-group .paper-list-group-item-muted {
|
||||
border-bottom-left-radius: 15px 255px;
|
||||
border-bottom-right-radius: 225px 15px;
|
||||
border-top-left-radius: 255px 15px;
|
||||
border-top-right-radius: 15px 225px;
|
||||
background: #868e96;
|
||||
color: white;
|
||||
padding: 0.5rem;
|
||||
padding-left: 1rem;
|
||||
}
|
||||
2
dist/paper.min.css
vendored
2
dist/paper.min.css
vendored
File diff suppressed because one or more lines are too long
123
docs/content/docs/components/list-group.md
Normal file
123
docs/content/docs/components/list-group.md
Normal file
|
|
@ -0,0 +1,123 @@
|
|||
---
|
||||
title: List group
|
||||
description: PaperCSS list groups
|
||||
---
|
||||
### Simple list group example
|
||||
|
||||
<ul class="list-group">
|
||||
<li>
|
||||
List item #1
|
||||
</li>
|
||||
<li>
|
||||
List item #2
|
||||
</li>
|
||||
<li>
|
||||
List item #3
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
### Code
|
||||
|
||||
```html
|
||||
<ul class="list-group">
|
||||
<li>List item #1</li>
|
||||
<li>List item #2</li>
|
||||
<li>List item #3</li>
|
||||
</ul>
|
||||
```
|
||||
|
||||
### With an active element
|
||||
|
||||
<ul class="list-group">
|
||||
<li class="active">
|
||||
List item #1
|
||||
</li>
|
||||
<li>
|
||||
List item #2
|
||||
</li>
|
||||
<li>
|
||||
List item #3
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
### Code
|
||||
```html
|
||||
<ul class="list-group">
|
||||
<li class="active">
|
||||
List item #1
|
||||
</li>
|
||||
<li>
|
||||
List item #2
|
||||
</li>
|
||||
<li>
|
||||
List item #3
|
||||
</li>
|
||||
</ul>
|
||||
```
|
||||
### Colors
|
||||
|
||||
<ul class="list-group">
|
||||
<li class="list-group-item-secondary">
|
||||
List item secondary
|
||||
</li>
|
||||
<li class="list-group-item-success">
|
||||
List item success
|
||||
</li>
|
||||
<li class="list-group-item-danger">
|
||||
List item danger
|
||||
</li>
|
||||
<li class="list-group-item-warning">
|
||||
List item warning
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
### Code
|
||||
|
||||
```html
|
||||
<ul class="list-group">
|
||||
<li class="list-group-item-success">
|
||||
List item success
|
||||
</li>
|
||||
<li class="list-group-item-danger">
|
||||
List item danger
|
||||
</li>
|
||||
<li class="list-group-item-warning">
|
||||
List item warning
|
||||
</li>
|
||||
</ul>
|
||||
```
|
||||
### Custom content
|
||||
|
||||
<div class="list-group">
|
||||
<div class="list-group-item active">
|
||||
<h4>Heading #1</h4>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
|
||||
</div>
|
||||
<div class="list-group-item">
|
||||
<h4>Heading #2</h4>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
|
||||
</div>
|
||||
<div class="list-group-item-success">
|
||||
<h4>Heading #3</h4>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
### Code
|
||||
|
||||
```html
|
||||
<div class="list-group">
|
||||
<div class="list-group-item active">
|
||||
<h4>Heading #1</h4>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
|
||||
</div>
|
||||
<div class="list-group-item">
|
||||
<h4>Heading #2</h4>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
|
||||
</div>
|
||||
<div class="list-group-item-success">
|
||||
<h4>Heading #3</h4>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
40
src/components/_list-group.scss
Normal file
40
src/components/_list-group.scss
Normal file
|
|
@ -0,0 +1,40 @@
|
|||
.list-group {
|
||||
@include border-style(1);
|
||||
border: 1px solid $muted;
|
||||
padding: 0;
|
||||
|
||||
& li::before {
|
||||
content: '';
|
||||
}
|
||||
|
||||
& li,
|
||||
.list-group-item {
|
||||
@include border-style(1);
|
||||
padding: 0.5rem;
|
||||
padding-left: 1rem;
|
||||
}
|
||||
|
||||
.active {
|
||||
@include border-style(1);
|
||||
background: $secondary;
|
||||
color: $white;
|
||||
padding: 0.5rem;
|
||||
padding-left: 1rem;
|
||||
}
|
||||
|
||||
@each $colorName,
|
||||
$color,
|
||||
$color-light,
|
||||
$color-text in $colors {
|
||||
|
||||
.list-group-item-#{$colorName},
|
||||
.paper-list-group-item-#{$colorName} {
|
||||
@include border-style(1);
|
||||
background: $color;
|
||||
color: $white;
|
||||
padding: 0.5rem;
|
||||
padding-left: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -35,6 +35,7 @@
|
|||
@import 'components/tabs';
|
||||
@import 'components/utilities';
|
||||
@import 'components/navbar';
|
||||
@import 'components/list-group';
|
||||
|
||||
// @media print {
|
||||
// @import 'layout/print';
|
||||
|
|
|
|||
Loading…
Reference in a new issue