mirror of
https://github.com/twbs/bootstrap.git
synced 2025-08-31 17:11:48 +02:00
Docs tweaks
- Simplify display headings example markup - Simplify footer styles - Remove z-indices hacks in the docs - Remove redundant modal styling in docs - Use `escape-svg()` to escape docs sidebar chevron - Simplify sidebar chevron code - Cleanup masthead css & fix column width between `md` & `lg` - Easier to download logo's with the `download` attribute. - Changed some color codes into variables - Cleanup brands css
This commit is contained in:
Martijn Cuppens
committed by
XhmikosR
XhmikosR
parent
d6945d5e8f
commit
b6b96c174b
@@ -17,7 +17,7 @@
|
||||
background-color: rgba(0, 0, 0, .05);
|
||||
|
||||
a {
|
||||
color: #333;
|
||||
color: $gray-800;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
@@ -35,5 +35,5 @@
|
||||
.carbon-poweredby {
|
||||
display: block;
|
||||
margin-top: .75rem;
|
||||
color: #777 !important;
|
||||
color: $gray-700 !important;
|
||||
}
|
||||
|
||||
@@ -128,7 +128,7 @@
|
||||
padding: .75rem 1rem 0;
|
||||
@include font-size(.75rem, true);
|
||||
line-height: 1 !important;
|
||||
color: #767676 !important;
|
||||
color: $gray-600 !important;
|
||||
border-top: 1px solid rgba(0, 0, 0, .1);
|
||||
}
|
||||
|
||||
|
||||
@@ -4,13 +4,7 @@
|
||||
|
||||
// Logo series wrapper
|
||||
.bd-brand-logos {
|
||||
display: table;
|
||||
width: 100%;
|
||||
margin-bottom: 1rem;
|
||||
overflow: hidden;
|
||||
color: $bd-purple;
|
||||
background-color: #f9f9f9;
|
||||
@include border-radius();
|
||||
|
||||
.inverse {
|
||||
color: $white;
|
||||
@@ -20,32 +14,18 @@
|
||||
|
||||
// Individual items
|
||||
.bd-brand-item {
|
||||
padding: 4rem 0;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
padding: 4rem 1rem;
|
||||
|
||||
+ .bd-brand-item {
|
||||
border-top: 1px solid $white;
|
||||
}
|
||||
|
||||
// Heading content within
|
||||
h1,
|
||||
h3 {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
display: table-cell;
|
||||
width: 1%;
|
||||
|
||||
+ .bd-brand-item {
|
||||
border-top: 0;
|
||||
border-left: 1px solid $white;
|
||||
}
|
||||
|
||||
h1 {
|
||||
@include font-size(4rem);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -55,8 +35,8 @@
|
||||
//
|
||||
|
||||
.color-swatches {
|
||||
display: flex;
|
||||
margin: 0 -5px;
|
||||
overflow: hidden; // clearfix
|
||||
|
||||
// Docs colors
|
||||
.bd-purple {
|
||||
@@ -74,7 +54,6 @@
|
||||
}
|
||||
|
||||
.color-swatch {
|
||||
float: left;
|
||||
width: 4rem;
|
||||
height: 4rem;
|
||||
margin-right: .25rem;
|
||||
|
||||
@@ -6,7 +6,7 @@
|
||||
padding: 1.25rem;
|
||||
margin-top: 1.25rem;
|
||||
margin-bottom: 1.25rem;
|
||||
border: 1px solid #eee;
|
||||
border: 1px solid $gray-200;
|
||||
border-left-width: .25rem;
|
||||
@include border-radius();
|
||||
|
||||
|
||||
@@ -24,13 +24,13 @@
|
||||
display: block;
|
||||
padding: .25rem .5rem;
|
||||
@include font-size(.75em);
|
||||
color: #818a91;
|
||||
color: $gray-800;
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
@include border-radius();
|
||||
|
||||
&:hover {
|
||||
color: $white;
|
||||
background-color: #027de7;
|
||||
background-color: $primary;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -125,29 +125,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
// Typography
|
||||
.bd-example-type {
|
||||
.table {
|
||||
td {
|
||||
padding: 1rem 0;
|
||||
border-color: #eee;
|
||||
}
|
||||
tr:first-child td {
|
||||
border-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Images
|
||||
.bd-example {
|
||||
> svg + svg,
|
||||
@@ -172,6 +149,7 @@
|
||||
.bd-example > .list-group {
|
||||
max-width: 400px;
|
||||
}
|
||||
|
||||
.bd-example > [class*="list-group-horizontal"] {
|
||||
max-width: 100%;
|
||||
}
|
||||
@@ -183,6 +161,7 @@
|
||||
position: static;
|
||||
margin: -1rem -1rem 1rem;
|
||||
}
|
||||
|
||||
.fixed-bottom {
|
||||
position: static;
|
||||
margin: 1rem -1rem -1rem;
|
||||
@@ -205,38 +184,13 @@
|
||||
margin-bottom: .5rem;
|
||||
}
|
||||
|
||||
// Example modals
|
||||
.modal {
|
||||
z-index: 1072;
|
||||
|
||||
.tooltip,
|
||||
.popover {
|
||||
z-index: 1073;
|
||||
}
|
||||
}
|
||||
|
||||
.modal-backdrop {
|
||||
z-index: 1071;
|
||||
}
|
||||
|
||||
.bd-example-modal {
|
||||
background-color: #fafafa;
|
||||
|
||||
.modal {
|
||||
position: relative;
|
||||
top: auto;
|
||||
right: auto;
|
||||
bottom: auto;
|
||||
left: auto;
|
||||
z-index: 1;
|
||||
position: static;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.modal-dialog {
|
||||
left: auto;
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
}
|
||||
}
|
||||
|
||||
// Tooltips
|
||||
@@ -308,6 +262,7 @@
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
pre code {
|
||||
@include font-size(inherit);
|
||||
color: $gray-900; // Effectively the base text color
|
||||
|
||||
@@ -4,8 +4,6 @@
|
||||
|
||||
.bd-footer {
|
||||
@include font-size(.875rem);
|
||||
text-align: center;
|
||||
background-color: #f7f7f7;
|
||||
|
||||
a {
|
||||
font-weight: 600;
|
||||
@@ -20,10 +18,6 @@
|
||||
p {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(sm) {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
.bd-footer-links {
|
||||
|
||||
@@ -1,8 +1,7 @@
|
||||
// stylelint-disable declaration-no-important
|
||||
|
||||
.bd-masthead {
|
||||
position: relative;
|
||||
padding: 3rem ($grid-gutter-width / 2);
|
||||
padding: 3rem 0;
|
||||
background-image: linear-gradient(45deg, #fafafa, #f5f5f5);
|
||||
|
||||
h1 {
|
||||
@@ -17,27 +16,10 @@
|
||||
.btn {
|
||||
padding: .8rem 2rem;
|
||||
font-weight: 600;
|
||||
@include font-size(1.25rem);
|
||||
}
|
||||
|
||||
.carbonad {
|
||||
margin-top: 0 !important;
|
||||
margin-bottom: -3rem !important;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(sm) {
|
||||
padding-top: 5rem;
|
||||
padding-bottom: 5rem;
|
||||
|
||||
.carbonad {
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
.carbonad {
|
||||
margin-top: 3rem !important;
|
||||
}
|
||||
padding: 5rem 0;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -74,7 +56,3 @@
|
||||
width: 6rem;
|
||||
margin: 2rem 0;
|
||||
}
|
||||
|
||||
.masthead-followup {
|
||||
.bd-clipboard { display: none; }
|
||||
}
|
||||
|
||||
@@ -40,14 +40,9 @@
|
||||
.bd-sidenav-group {
|
||||
&.has-children .bd-sidenav-group-link::before {
|
||||
display: inline-block;
|
||||
width: .875rem;
|
||||
height: .875rem;
|
||||
margin-right: .25rem;
|
||||
content: "";
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 14l6-6-6-6'/%3E%3C/svg%3E");
|
||||
background-repeat: no-repeat;
|
||||
background-position: center center;
|
||||
opacity: .5;
|
||||
line-height: 0; // Align in the middle
|
||||
content: escape-svg($sidebar-colapse-icon);
|
||||
}
|
||||
|
||||
&.active {
|
||||
|
||||
@@ -18,7 +18,7 @@
|
||||
@supports (position: sticky) {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 1071; // over everything in bootstrap
|
||||
z-index: $zindex-sticky;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
.bd-toc nav {
|
||||
padding-top: .125em;
|
||||
padding-bottom: .125em;
|
||||
border-left: .25em solid #eee;
|
||||
border-left: .25em solid $gray-200;
|
||||
|
||||
> ul {
|
||||
padding-left: .5rem;
|
||||
|
||||
@@ -10,6 +10,7 @@ $bd-info: #5bc0de;
|
||||
$bd-warning: #f0ad4e;
|
||||
$bd-danger: #d9534f;
|
||||
$dropdown-active-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'><path fill='#292b2c' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/></svg>");
|
||||
$sidebar-colapse-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'><path fill='none' stroke='rgba(0,0,0,.5)' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 14l6-6-6-6'/></svg>");
|
||||
|
||||
// Enable responsive font sizes for font sizes defined in the docs
|
||||
// The weird if test is made as a workaround to prevent a false fusv error.
|
||||
|
||||
Reference in New Issue
Block a user