1
0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-13 09:04:14 +02:00

Use translucent box shadow on hr elements; colorize hr elements within alert components

This commit is contained in:
Mark Otto
2013-03-14 23:01:23 -07:00
parent 4c0719ea5f
commit ecfdecea00
3 changed files with 78 additions and 22 deletions

View File

@@ -416,7 +416,13 @@ h2,
h3, h3,
h4, h4,
h5, h5,
h6 { h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
font-family: inherit; font-family: inherit;
font-weight: 500; font-weight: 500;
line-height: 20px; line-height: 20px;
@@ -428,7 +434,13 @@ h2 small,
h3 small, h3 small,
h4 small, h4 small,
h5 small, h5 small,
h6 small { h6 small,
.h1 small,
.h2 small,
.h3 small,
.h4 small,
.h5 small,
.h6 small {
font-weight: normal; font-weight: normal;
line-height: 1; line-height: 1;
color: #999999; color: #999999;
@@ -453,49 +465,59 @@ h6 {
margin-bottom: 10px; margin-bottom: 10px;
} }
h1 { h1,
.h1 {
font-size: 38.5px; font-size: 38.5px;
font-size: 4rem; font-size: 4rem;
} }
h2 { h2,
.h2 {
font-size: 31.5px; font-size: 31.5px;
font-size: 3rem; font-size: 3rem;
} }
h3 { h3,
.h3 {
font-size: 24.5px; font-size: 24.5px;
font-size: 2.5rem; font-size: 2.5rem;
} }
h4 { h4,
.h4 {
font-size: 17.5px; font-size: 17.5px;
font-size: 2rem; font-size: 2rem;
} }
h5 { h5,
.h5 {
font-size: 14px; font-size: 14px;
font-size: 1.6rem; font-size: 1.6rem;
} }
h6 { h6,
.h6 {
font-size: 11.9px; font-size: 11.9px;
font-size: 1.2rem; font-size: 1.2rem;
} }
h1 small { h1 small,
.h1 small {
font-size: 24.5px; font-size: 24.5px;
} }
h2 small { h2 small,
.h2 small {
font-size: 17.5px; font-size: 17.5px;
} }
h3 small { h3 small,
.h3 small {
font-size: 14px; font-size: 14px;
} }
h4 small { h4 small,
.h4 small {
font-size: 14px; font-size: 14px;
} }
@@ -580,6 +602,7 @@ hr {
border: 0; border: 0;
border-top: 1px solid #eeeeee; border-top: 1px solid #eeeeee;
border-bottom: 1px solid #fff; border-bottom: 1px solid #fff;
border-bottom: 1px solid rgba(255, 255, 255, 0.5);
} }
abbr[title], abbr[title],
@@ -740,7 +763,7 @@ pre code {
@media screen and (min-width: 768px) { @media screen and (min-width: 768px) {
.container { .container {
max-width: 758px; max-width: 728px;
} }
[class^="span"] { [class^="span"] {
float: left; float: left;
@@ -821,13 +844,13 @@ pre code {
@media screen and (min-width: 992px) { @media screen and (min-width: 992px) {
.container { .container {
max-width: 970px; max-width: 940px;
} }
} }
@media screen and (min-width: 1200px) { @media screen and (min-width: 1200px) {
.container { .container {
max-width: 1200px; max-width: 1170px;
} }
.row { .row {
margin-right: -15px; margin-right: -15px;
@@ -4139,7 +4162,11 @@ button.close {
color: inherit; color: inherit;
} }
.alert .close { .alert hr {
border-top-color: #f8e5be;
}
.close {
position: relative; position: relative;
top: -2px; top: -2px;
right: -21px; right: -21px;
@@ -4153,6 +4180,10 @@ button.close {
border-color: #d6e9c6; border-color: #d6e9c6;
} }
.alert-success hr {
border-top-color: #c9e2b3;
}
.alert-danger, .alert-danger,
.alert-error { .alert-error {
color: #b94a48; color: #b94a48;
@@ -4160,12 +4191,21 @@ button.close {
border-color: #eed3d7; border-color: #eed3d7;
} }
.alert-danger hr,
.alert-error hr {
border-top-color: #e6c1c7;
}
.alert-info { .alert-info {
color: #3a87ad; color: #3a87ad;
background-color: #d9edf7; background-color: #d9edf7;
border-color: #bce8f1; border-color: #bce8f1;
} }
.alert-info hr {
border-top-color: #a6e1ec;
}
.alert-block { .alert-block {
padding-top: 14px; padding-top: 14px;
padding-bottom: 14px; padding-bottom: 14px;

View File

@@ -13,15 +13,21 @@
background-color: @state-warning-background; background-color: @state-warning-background;
border: 1px solid @state-warning-border; border: 1px solid @state-warning-border;
border-radius: @border-radius-base; border-radius: @border-radius-base;
}
.alert h4 { // Headings for larger alerts
margin-top: 0; h4 {
// Specified for the h4 to prevent conflicts of changing @headingsColor margin-top: 0;
color: inherit; // Specified for the h4 to prevent conflicts of changing @headingsColor
color: inherit;
}
// Match the hr to the border of the alert
hr {
border-top-color: darken(@state-warning-border, 5%);
}
} }
// Adjust close link position // Adjust close link position
.alert .close { .close {
position: relative; position: relative;
top: -2px; top: -2px;
right: -21px; right: -21px;
@@ -36,17 +42,26 @@
background-color: @state-success-background; background-color: @state-success-background;
border-color: @state-success-border; border-color: @state-success-border;
color: @state-success-text; color: @state-success-text;
hr {
border-top-color: darken(@state-success-border, 5%);
}
} }
.alert-danger, .alert-danger,
.alert-error { .alert-error {
background-color: @state-error-background; background-color: @state-error-background;
border-color: @state-error-border; border-color: @state-error-border;
color: @state-error-text; color: @state-error-text;
hr {
border-top-color: darken(@state-error-border, 5%);
}
} }
.alert-info { .alert-info {
background-color: @state-info-background; background-color: @state-info-background;
border-color: @state-info-border; border-color: @state-info-border;
color: @state-info-text; color: @state-info-text;
hr {
border-top-color: darken(@state-info-border, 5%);
}
} }
// Block alerts // Block alerts

View File

@@ -178,6 +178,7 @@ hr {
border: 0; border: 0;
border-top: 1px solid @hr-border; border-top: 1px solid @hr-border;
border-bottom: 1px solid #fff; border-bottom: 1px solid #fff;
border-bottom: 1px solid rgba(255,255,255,.5);
} }
// Abbreviations and acronyms // Abbreviations and acronyms