archive/healthchecks_healthchecks
0
0
Fork 0
mirror of https://github.com/healthchecks/healthchecks.git synced 2025-04-03 04:15:29 +00:00
Code Issues Projects Releases Wiki Activity

Eliminate bootstrap's list-group

Browse source
This commit is contained in:
Pēteris Caune 2022-02-01 09:06:35 +02:00
parent c2d6799969
commit ca93e95632
No known key found for this signature in database
GPG key ID: E28D7679E9A9EDE2
4 changed files with 46 additions and 249 deletions
static/css
bootstrap.csspricing.css
stuff/bootstrap
bootstrap.less
templates/payments
pricing.html

206
static/css/bootstrap.css vendored
View file

@ -3913,212 +3913,6 @@ a.badge:focus {
.alert-danger .alert-link {
color: #843534;
}
.list-group {
padding-left: 0;
margin-bottom: 20px;
}
.list-group-item {
position: relative;
display: block;
padding: 10px 15px;
margin-bottom: -1px;
background-color: transparent;
border: 1px solid var(--border-color);
}
.list-group-item:first-child {
border-top-left-radius: 2px;
border-top-right-radius: 2px;
}
.list-group-item:last-child {
margin-bottom: 0;
border-bottom-right-radius: 2px;
border-bottom-left-radius: 2px;
}
.list-group-item.disabled,
.list-group-item.disabled:hover,
.list-group-item.disabled:focus {
color: #777777;
cursor: not-allowed;
background-color: #eeeeee;
}
.list-group-item.disabled .list-group-item-heading,
.list-group-item.disabled:hover .list-group-item-heading,
.list-group-item.disabled:focus .list-group-item-heading {
color: inherit;
}
.list-group-item.disabled .list-group-item-text,
.list-group-item.disabled:hover .list-group-item-text,
.list-group-item.disabled:focus .list-group-item-text {
color: #777777;
}
.list-group-item.active,
.list-group-item.active:hover,
.list-group-item.active:focus {
z-index: 2;
color: #fff;
background-color: #22bc66;
border-color: #22bc66;
}
.list-group-item.active .list-group-item-heading,
.list-group-item.active:hover .list-group-item-heading,
.list-group-item.active:focus .list-group-item-heading,
.list-group-item.active .list-group-item-heading > small,
.list-group-item.active:hover .list-group-item-heading > small,
.list-group-item.active:focus .list-group-item-heading > small,
.list-group-item.active .list-group-item-heading > .small,
.list-group-item.active:hover .list-group-item-heading > .small,
.list-group-item.active:focus .list-group-item-heading > .small {
color: inherit;
}
.list-group-item.active .list-group-item-text,
.list-group-item.active:hover .list-group-item-text,
.list-group-item.active:focus .list-group-item-text {
color: #b8f2d2;
}
a.list-group-item,
button.list-group-item {
color: #555;
}
a.list-group-item .list-group-item-heading,
button.list-group-item .list-group-item-heading {
color: #333;
}
a.list-group-item:hover,
button.list-group-item:hover,
a.list-group-item:focus,
button.list-group-item:focus {
color: #555;
text-decoration: none;
background-color: #f5f5f5;
}
button.list-group-item {
width: 100%;
text-align: left;
}
.list-group-item-success {
color: #3c763d;
background-color: #dff0d8;
}
a.list-group-item-success,
button.list-group-item-success {
color: #3c763d;
}
a.list-group-item-success .list-group-item-heading,
button.list-group-item-success .list-group-item-heading {
color: inherit;
}
a.list-group-item-success:hover,
button.list-group-item-success:hover,
a.list-group-item-success:focus,
button.list-group-item-success:focus {
color: #3c763d;
background-color: #d0e9c6;
}
a.list-group-item-success.active,
button.list-group-item-success.active,
a.list-group-item-success.active:hover,
button.list-group-item-success.active:hover,
a.list-group-item-success.active:focus,
button.list-group-item-success.active:focus {
color: #fff;
background-color: #3c763d;
border-color: #3c763d;
}
.list-group-item-info {
color: #31708f;
background-color: #d9edf7;
}
a.list-group-item-info,
button.list-group-item-info {
color: #31708f;
}
a.list-group-item-info .list-group-item-heading,
button.list-group-item-info .list-group-item-heading {
color: inherit;
}
a.list-group-item-info:hover,
button.list-group-item-info:hover,
a.list-group-item-info:focus,
button.list-group-item-info:focus {
color: #31708f;
background-color: #c4e3f3;
}
a.list-group-item-info.active,
button.list-group-item-info.active,
a.list-group-item-info.active:hover,
button.list-group-item-info.active:hover,
a.list-group-item-info.active:focus,
button.list-group-item-info.active:focus {
color: #fff;
background-color: #31708f;
border-color: #31708f;
}
.list-group-item-warning {
color: #8a6d3b;
background-color: #fcf8e3;
}
a.list-group-item-warning,
button.list-group-item-warning {
color: #8a6d3b;
}
a.list-group-item-warning .list-group-item-heading,
button.list-group-item-warning .list-group-item-heading {
color: inherit;
}
a.list-group-item-warning:hover,
button.list-group-item-warning:hover,
a.list-group-item-warning:focus,
button.list-group-item-warning:focus {
color: #8a6d3b;
background-color: #faf2cc;
}
a.list-group-item-warning.active,
button.list-group-item-warning.active,
a.list-group-item-warning.active:hover,
button.list-group-item-warning.active:hover,
a.list-group-item-warning.active:focus,
button.list-group-item-warning.active:focus {
color: #fff;
background-color: #8a6d3b;
border-color: #8a6d3b;
}
.list-group-item-danger {
color: #a94442;
background-color: #f2dede;
}
a.list-group-item-danger,
button.list-group-item-danger {
color: #a94442;
}
a.list-group-item-danger .list-group-item-heading,
button.list-group-item-danger .list-group-item-heading {
color: inherit;
}
a.list-group-item-danger:hover,
button.list-group-item-danger:hover,
a.list-group-item-danger:focus,
button.list-group-item-danger:focus {
color: #a94442;
background-color: #ebcccc;
}
a.list-group-item-danger.active,
button.list-group-item-danger.active,
a.list-group-item-danger.active:hover,
button.list-group-item-danger.active:hover,
a.list-group-item-danger.active:focus,
button.list-group-item-danger.active:focus {
color: #fff;
background-color: #a94442;
border-color: #a94442;
}
.list-group-item-heading {
margin-top: 0;
margin-bottom: 5px;
}
.list-group-item-text {
margin-bottom: 0;
line-height: 1.3;
}
.panel {
margin-bottom: 20px;
background-color: var(--panel-bg);

23
static/css/pricing.css
View file

@ -13,6 +13,17 @@
text-shadow: 0px 1px var(--panel-bg), -1px 1px var(--panel-bg), 1px 1px var(--panel-bg), -1px 0px var(--panel-bg);
}
.panel.plan ul {
margin: 0;
padding: 0;
list-style: none;
}
.panel.plan li {
border-top: 1px solid var(--border-color);
padding: 10px 8px;
}
.hobbyist h1 {
color: var(--plan-hobbyist-color);
border-bottom: 3px solid var(--plan-hobbyist-border);
@ -54,15 +65,6 @@
border-color: #22bc66;
}
.plan .list-group-item {
padding: 10px 8px;
}
.plan .list-group-item:last-child {
border-bottom: 0;
}
.error-message {
font-family: monospace;
}
@ -88,11 +90,12 @@
#plans .panel-footer {
background: transparent;
border-top: 0;
}
#annual-note {
margin: 10px 0;
color: #AAA;
color: var(--text-muted);
}
.page-pricing span[data-help] {

2
stuff/bootstrap/bootstrap.less vendored
View file

@ -39,7 +39,7 @@
@import "alerts.less";
// @import "progress-bars.less";
// @import "media.less";
@import "list-group.less";
// @import "list-group.less";
@import "panels.less";
// @import "responsive-embed.less";
// @import "wells.less";

64
templates/payments/pricing.html
View file

@ -77,20 +77,20 @@
<h1>Hobbyist</h1>
<h2>$0 <span class="mo">/ month</span></h2>
</div>
<ul class="list-group text-center">
<li class="list-group-item"><i class="fa fa-check"></i> 20 checks</li>
<li class="list-group-item">
<ul class="text-center">
<li><i class="fa fa-check"></i> 20 checks</li>
<li>
<span data-help="team-size-help">3 team members</span>
</li>
<li class="list-group-item">
<li>
<span data-help="log-limit-help">100 log entries per check</span>
</li>
<li class="list-group-item">API access</li>
<li class="list-group-item">
<li>API access</li>
<li>
<span data-help="sms-help">5 SMS &amp; WhatsApp credits</span>
</li>
<li class="list-group-item">&nbsp;</li>
<li class="list-group-item">&nbsp;</li>
<li>&nbsp;</li>
<li>&nbsp;</li>
</ul>
{% if not request.user.is_authenticated %}
@ -111,22 +111,22 @@
<span class="mo">/ month</span>
</h2>
</div>
<ul class="list-group text-center">
<li class="list-group-item"><i class="fa fa-check"></i> 20 checks</li>
<li class="list-group-item">
<ul class="text-center">
<li><i class="fa fa-check"></i> 20 checks</li>
<li>
<span data-help="team-size-help">3 team members</span>
</li>
<li class="list-group-item">
<li>
<span data-help="log-limit-help">1000 log entries per check</span>
</li>
<li class="list-group-item">API access</li>
<li class="list-group-item">
<li>API access</li>
<li>
<span data-help="sms-help">5 SMS &amp; WhatsApp credits</span>
</li>
<li class="list-group-item">
<li>
<span data-help="phone-call-help">5 phone call credits</span>
</li>
<li class="list-group-item">Email support</li>
<li>Email support</li>
</ul>
{% if not request.user.is_authenticated %}
@ -150,22 +150,22 @@
</h2>
</div>
<ul class="list-group text-center">
<li class="list-group-item">100 checks</li>
<li class="list-group-item">
<ul class="text-center">
<li>100 checks</li>
<li>
<span data-help="team-size-help">10 team members</span>
</li>
<li class="list-group-item">
<li>
<span data-help="log-limit-help">1000 log entries per check</span>
</li>
<li class="list-group-item">API access</li>
<li class="list-group-item">
<li>API access</li>
<li>
<span data-help="sms-help">50 SMS &amp; WhatsApp credits</span>
</li>
<li class="list-group-item">
<li>
<span data-help="phone-call-help">20 phone call credits</span>
</li>
<li class="list-group-item">Email support</li>
<li>Email support</li>
</ul>
{% if not request.user.is_authenticated %}
@ -189,22 +189,22 @@
</h2>
</div>
<ul class="list-group text-center">
<li class="list-group-item">1000 checks</li>
<li class="list-group-item">
<ul class="text-center">
<li>1000 checks</li>
<li>
<span data-help="team-size-help">Unlimited team members</span>
</li>
<li class="list-group-item">
<li>
<span data-help="log-limit-help">1000 log entries per check</span>
</li>
<li class="list-group-item">API access</li>
<li class="list-group-item">
<li>API access</li>
<li>
<span data-help="sms-help">500 SMS &amp; WhatsApp credits</span>
</li>
<li class="list-group-item">
<li>
<span data-help="phone-call-help">100 phone call credits</span>
</li>
<li class="list-group-item">Priority email support</li>
<li>Priority email support</li>
</ul>
{% if not request.user.is_authenticated %}