mirror of
https://github.com/tenrok/bootstrap.git
synced 2026-06-08 17:22:31 +03:00
Massive cleanup
- Simpler main nav on all pages - Back to purple masthead on homepage instead of dark graphite - Active link styles on the main nav - Cleaned up sidebar nav - New docs layout name - Homepage copy edits - Updated bright purple docs color
This commit is contained in:
Mark Otto
Vendored
+1
-1
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -3,43 +3,14 @@
|
||||
// Custom buttons for the docs.
|
||||
|
||||
.btn-bs {
|
||||
color: $bd-purple;
|
||||
border-color: $bd-purple;
|
||||
color: $bd-purple-bright;
|
||||
border-color: $bd-purple-bright;
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
color: #fff;
|
||||
background-color:$bd-purple;
|
||||
border-color: $bd-purple;
|
||||
background-color:$bd-purple-bright;
|
||||
border-color: $bd-purple-bright;
|
||||
}
|
||||
}
|
||||
|
||||
// .btn-outline {
|
||||
// color: $bd-purple;
|
||||
// background-color: transparent;
|
||||
// border-color: $bd-purple;
|
||||
//
|
||||
// &:hover,
|
||||
// &:focus,
|
||||
// &:active {
|
||||
// color: #fff;
|
||||
// background-color:$bd-purple;
|
||||
// border-color: $bd-purple;
|
||||
// }
|
||||
// }
|
||||
//
|
||||
// .btn-outline-inverse {
|
||||
// color: #fff;
|
||||
// background-color: transparent;
|
||||
// border-color: $bd-purple-light;
|
||||
//
|
||||
// &:hover,
|
||||
// &:focus,
|
||||
// &:active {
|
||||
// color: $bd-purple;
|
||||
// text-shadow: none;
|
||||
// background-color: #fff;
|
||||
// border-color: #fff;
|
||||
// }
|
||||
// }
|
||||
|
||||
@@ -1,38 +1,12 @@
|
||||
//
|
||||
// Home navigation
|
||||
//
|
||||
|
||||
.bd-nav-home {
|
||||
margin-bottom: 0;
|
||||
background-color: #563d7c;
|
||||
border-bottom: 0;
|
||||
|
||||
.navbar-brand > a {
|
||||
font-weight: 500;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
font-weight: 500;
|
||||
color: #cdbfe3;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: #fff;
|
||||
background-color: rgba(0,0,0,.5);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Homepage
|
||||
// Main navbar
|
||||
//
|
||||
|
||||
.bd-navbar {
|
||||
padding: .25rem;
|
||||
padding-top: 1rem;
|
||||
padding-bottom: 1rem;
|
||||
margin-bottom: 0;
|
||||
background-color: $bd-graphite;
|
||||
// background-color: $bd-graphite;
|
||||
|
||||
.nav-link {
|
||||
color: $bd-graphite-light;
|
||||
@@ -40,50 +14,16 @@
|
||||
&.active,
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: #fff;
|
||||
color: $gray-dark;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
&.active {
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// .bd-header {
|
||||
// @include clearfix;
|
||||
// padding-bottom: .5rem;
|
||||
// margin-bottom: 1rem;
|
||||
// border-bottom: 1px solid rgba(255,255,255,.25);
|
||||
//
|
||||
// .bd-header-mark {
|
||||
// float: left;
|
||||
// padding-top: .6rem;
|
||||
// padding-bottom: .6rem;
|
||||
// font-size: 1.25rem;
|
||||
// font-weight: 500;
|
||||
// }
|
||||
// }
|
||||
//
|
||||
// .bd-header-nav {
|
||||
// padding-bottom: 1rem;
|
||||
// margin-bottom: 2rem;
|
||||
// border-bottom: .0625rem solid #eee;
|
||||
//
|
||||
// .nav-link {
|
||||
// display: inline-block;
|
||||
// padding: 1.2rem .75rem;
|
||||
//
|
||||
// &:hover {
|
||||
// background-color: transparent;
|
||||
// }
|
||||
// }
|
||||
//
|
||||
// @include media-breakpoint-up(sm) {
|
||||
// float: right;
|
||||
// padding-bottom: 0;
|
||||
// margin-bottom: 0;
|
||||
// border-bottom: 0;
|
||||
// }
|
||||
// }
|
||||
|
||||
|
||||
//
|
||||
// Masthead (headings and download button)
|
||||
@@ -92,15 +32,15 @@
|
||||
.bd-masthead {
|
||||
position: relative;
|
||||
padding: ($grid-gutter-width / 2);
|
||||
color: $bd-graphite-light;
|
||||
color: $bd-purple-light;
|
||||
text-align: center;
|
||||
background: -webkit-linear-gradient(to bottom, $bd-graphite, lighten($bd-graphite, 7.5%));
|
||||
background: linear-gradient(to bottom, $bd-graphite, lighten($bd-graphite, 7.5%));
|
||||
background: -webkit-linear-gradient(135deg, darken($bd-purple, 15%), $bd-purple, lighten(saturate($bd-purple, 5%), 15%));
|
||||
background: linear-gradient(135deg, darken($bd-purple, 15%), $bd-purple, lighten(saturate($bd-purple, 5%), 15%));
|
||||
|
||||
.bd-booticon {
|
||||
margin: 0 auto 2rem;
|
||||
color: $bd-purple-bright;
|
||||
border-color: $bd-purple-bright;
|
||||
color: $bd-purple-light;
|
||||
border-color: $bd-purple-light;
|
||||
}
|
||||
|
||||
h1 {
|
||||
@@ -112,7 +52,8 @@
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
margin-bottom: 2rem;
|
||||
font-size: 1.25rem;
|
||||
font-size: 1rem;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.version {
|
||||
@@ -174,7 +115,7 @@
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
.lead {
|
||||
width: 80%;
|
||||
width: 85%;
|
||||
font-size: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -3,65 +3,14 @@
|
||||
//
|
||||
|
||||
.bd-sidebar {
|
||||
// padding: 0;
|
||||
// margin-bottom: 0;
|
||||
// background-color: #fafafa;
|
||||
|
||||
// .navbar-toggler {
|
||||
// position: absolute;
|
||||
// top: 1rem;
|
||||
// right: 0;
|
||||
// z-index: 5;
|
||||
// }
|
||||
@include media-breakpoint-up(md) {
|
||||
padding-left: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
// .bd-sidebar .navbar-header {
|
||||
// float: none;
|
||||
// margin-right: -15px;
|
||||
// }
|
||||
//
|
||||
// .bd-sidebar .navbar-collapse {
|
||||
// padding: 0;
|
||||
// border: 0;
|
||||
// }
|
||||
|
||||
// @media (min-width: 992px) {
|
||||
// .bd-docs {
|
||||
// margin-left: 240px;
|
||||
// }
|
||||
// .bd-sidebar {
|
||||
// position: fixed;
|
||||
// top: 3.7rem;
|
||||
// bottom: 0;
|
||||
// left: 0;
|
||||
// width: 240px;
|
||||
// overflow-y: auto;
|
||||
// border-right: 1px solid #eee;
|
||||
// -webkit-transform: translated3d(0,0,0); // Ensure proper scrolling of sidebar
|
||||
// }
|
||||
// }
|
||||
//
|
||||
// .bd-sidebar .navbar-brand {
|
||||
// display: block;
|
||||
// float: none;
|
||||
// height: auto;
|
||||
// padding: 1.55rem 1.25rem;
|
||||
// font-size: 20px;
|
||||
// font-weight: 500;
|
||||
// line-height: 1;
|
||||
// // color: #fff;
|
||||
// }
|
||||
// .bd-sidebar-brand:hover,
|
||||
// .bd-sidebar-brand:focus {
|
||||
// // color: #fff;
|
||||
// text-decoration: none;
|
||||
// }
|
||||
|
||||
.bd-search {
|
||||
position: relative;
|
||||
margin-right: 1.25rem;
|
||||
margin-bottom: 1.5rem;
|
||||
margin-left: 1.25rem;
|
||||
|
||||
.form-control {
|
||||
height: 2.45rem;
|
||||
@@ -108,21 +57,17 @@
|
||||
|
||||
.bd-toc-link {
|
||||
display: block;
|
||||
padding: .25rem 1.25rem;
|
||||
padding: .25rem .75rem;
|
||||
color: $gray;
|
||||
// font-size: 1rem;
|
||||
// color: #fff;
|
||||
}
|
||||
.bd-toc-link:hover,
|
||||
.bd-toc-link:focus {
|
||||
// color: $bd-yellow;
|
||||
color: $brand-primary;
|
||||
text-decoration: none;
|
||||
}
|
||||
.active > .bd-toc-link {
|
||||
font-weight: 500;
|
||||
color: $gray-dark;
|
||||
// color: $bd-yellow;
|
||||
}
|
||||
.active > .bd-sidenav {
|
||||
display: block;
|
||||
@@ -142,14 +87,13 @@
|
||||
// All levels of nav
|
||||
.bd-sidebar .nav > li > a {
|
||||
display: block;
|
||||
padding: .25rem 1.25rem;
|
||||
padding: .25rem .75rem;
|
||||
font-size: 90%;
|
||||
color: #99979c;
|
||||
}
|
||||
.bd-sidebar .nav > li > a:hover,
|
||||
.bd-sidebar .nav > li > a:focus {
|
||||
color: $brand-primary;
|
||||
// color: $bd-yellow;
|
||||
text-decoration: none;
|
||||
background-color: transparent;
|
||||
}
|
||||
@@ -158,34 +102,5 @@
|
||||
.bd-sidebar .nav > .active:focus > a {
|
||||
font-weight: 500;
|
||||
color: $gray-dark;
|
||||
// color: $bd-yellow;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
// Nav: second level (shown on .active)
|
||||
.bd-sidebar .nav .nav {
|
||||
display: none; // Hide by default, but at >768px, show it
|
||||
padding-bottom: .75rem;
|
||||
}
|
||||
.bd-sidebar .nav .nav > li > a {
|
||||
padding-top: 1px;
|
||||
padding-bottom: 1px;
|
||||
padding-left: 2rem;
|
||||
font-size: 75%;
|
||||
font-weight: normal;
|
||||
}
|
||||
.bd-sidebar .nav .nav > .active > a,
|
||||
.bd-sidebar .nav .nav > .active:hover > a,
|
||||
.bd-sidebar .nav .nav > .active:focus > a {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.bd-sidebar .nav > .active > .nav {
|
||||
display: block;
|
||||
}
|
||||
.bd-sidebar .nav .nav > li > a {
|
||||
padding-top: .125rem;
|
||||
padding-bottom: .125rem;
|
||||
padding-left: 2rem;
|
||||
font-size: 80%;
|
||||
}
|
||||
|
||||
@@ -28,7 +28,7 @@
|
||||
|
||||
// Local docs variables
|
||||
$bd-purple: #563d7c;
|
||||
$bd-purple-bright: lighten(saturate($bd-purple, 25%), 25%);
|
||||
$bd-purple-bright: lighten(saturate($bd-purple, 15%), 25%);
|
||||
$bd-purple-light: #cdbfe3;
|
||||
$bd-graphite: #2a2730;
|
||||
$bd-graphite-light: lighten($bd-graphite, 40%);
|
||||
|
||||
Reference in New Issue
Block a user