mirror of
https://github.com/tenrok/bootstrap.git
synced 2026-06-20 20:00:36 +03:00
Redesign docs layout
- New navbar, no more subnav. Migrated search and version picker into the main navbar and refreshed the design of it all, including the responsive toggles. - New sidebar navigation is always expanded, and now features Bootstrap Icons alongside section headings - Sidebar navigation autoscrolls to active link for better usability - Subnav and navbar padding issues ironed out - Enhanced the version picker in anticipation of v5.2: we can now link right to the same page in the previous version. - Redesign callouts to add more color to our pages - Collapse table of contents on mobile - Cleanup and redesign button styles with CSS variables - Update design for subnav version dropdown - Update highlight and example to be full-width until md - Improve the Added In badges - Turn the ToC into a well on mobile
This commit is contained in:
Mark Otto
@@ -15,6 +15,21 @@
|
||||
(function () {
|
||||
'use strict'
|
||||
|
||||
// Scroll the active sidebar link into view
|
||||
var sidenav = document.querySelector('.bd-links')
|
||||
if (sidenav) {
|
||||
var sidenavHeight = sidenav.clientHeight
|
||||
var sidenavActiveLink = document.querySelector('#bd-docs-nav .active')
|
||||
var sidenavActiveLinkTop = sidenavActiveLink.offsetTop
|
||||
var sidenavActiveLinkHeight = sidenavActiveLink.clientHeight
|
||||
var viewportTop = sidenavActiveLinkTop
|
||||
var viewportBottom = viewportTop - sidenavHeight + sidenavActiveLinkHeight
|
||||
|
||||
if (sidenav.scrollTop > viewportTop || sidenav.scrollTop < viewportBottom) {
|
||||
sidenav.scrollTop = viewportTop - (sidenavHeight / 2) + (sidenavActiveLinkHeight / 2)
|
||||
}
|
||||
}
|
||||
|
||||
// Tooltip and popover demos
|
||||
document.querySelectorAll('.tooltip-demo')
|
||||
.forEach(function (tooltip) {
|
||||
@@ -119,7 +134,8 @@
|
||||
|
||||
// Insert copy to clipboard button before .highlight
|
||||
var btnTitle = 'Copy to clipboard'
|
||||
var btnHtml = '<div class="bd-clipboard"><button type="button" class="btn-clipboard">Copy</button></div>'
|
||||
var btnHtml = '<div class="bd-clipboard"><button type="button" class="btn-clipboard" ><svg class="bi" width="1em" height="1em" fill="currentColor" role="img" aria-label="Copy"><use xlink:href="#clipboard"/></svg></button></div>'
|
||||
|
||||
document.querySelectorAll('div.highlight')
|
||||
.forEach(function (element) {
|
||||
element.insertAdjacentHTML('beforebegin', btnHtml)
|
||||
|
||||
@@ -12,12 +12,15 @@
|
||||
margin: $dropdown-spacer 0 0;
|
||||
@include font-size(.875rem);
|
||||
background-color: $dropdown-bg;
|
||||
background-clip: padding-box;
|
||||
border: $dropdown-border-width solid $dropdown-border-color;
|
||||
@include border-radius($dropdown-border-radius);
|
||||
@include box-shadow($dropdown-box-shadow);
|
||||
box-shadow: $dropdown-box-shadow;
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
width: 400px;
|
||||
width: 500px;
|
||||
margin-top: .5rem;
|
||||
margin-left: -110px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -8,11 +8,14 @@
|
||||
--bs-btn-color: var(--bs-white);
|
||||
--bs-btn-bg: var(--bd-violet);
|
||||
--bs-btn-border-color: var(--bd-violet);
|
||||
--bs-btn-hover-color: var(--bs-white);
|
||||
--bs-btn-hover-bg: #{shade-color($bd-violet, 20%)};
|
||||
--bs-btn-hover-border-color: #{shade-color($bd-violet, 20%)};
|
||||
--bs-btn-focus-shadow-rgb: var(--bd-violet-rgb);
|
||||
--bs-btn-border-radius: .5rem;
|
||||
--bs-btn-hover-color: var(--bs-white);
|
||||
--bs-btn-hover-bg: #{shade-color($bd-violet, 10%)};
|
||||
--bs-btn-hover-border-color: #{shade-color($bd-violet, 10%)};
|
||||
--bs-btn-focus-shadow-rgb: var(--bd-violet-rgb);
|
||||
--bs-btn-active-color: var(--bs-btn-hover-color);
|
||||
--bs-btn-active-bg: #{shade-color($bd-violet, 20%)};
|
||||
--bs-btn-active-border-color: #{shade-color($bd-violet, 20%)};
|
||||
}
|
||||
// scss-docs-end btn-css-vars-example
|
||||
|
||||
@@ -24,13 +27,19 @@
|
||||
--bs-btn-hover-bg: var(--bd-accent);
|
||||
--bs-btn-hover-border-color: var(--bd-accent);
|
||||
--bs-btn-focus-shadow-rgb: var(--bd-accent-rgb);
|
||||
--bs-btn-active-color: var(--bs-btn-hover-color);
|
||||
--bs-btn-active-bg: var(--bs-btn-hover-bg);
|
||||
--bs-btn-active-border-color: var(--bs-btn-hover-border-color);
|
||||
}
|
||||
|
||||
.btn-bd-light {
|
||||
--bs-btn-color: var(--bs-gray-600);
|
||||
--bs-btn-border-color: var(--bs-gray-300);
|
||||
--bs-btn-border-color: var(--bs-gray-400);
|
||||
--bs-btn-hover-color: var(--bd-violet);
|
||||
--bs-btn-hover-border-color: var(--bd-violet);
|
||||
--bs-btn-active-color: var(--bd-violet);
|
||||
--bs-btn-active-bg: var(--bs-white);
|
||||
--bs-btn-active-border-color: var(--bd-violet);
|
||||
--bs-btn-focus-border-color: var(--bd-violet);
|
||||
--bs-btn-focus-shadow-rgb: var(--bd-violet-rgb);
|
||||
}
|
||||
|
||||
@@ -6,9 +6,8 @@
|
||||
padding: 1.25rem;
|
||||
margin-top: 1.25rem;
|
||||
margin-bottom: 1.25rem;
|
||||
border: 1px solid $gray-200;
|
||||
border-left-width: .25rem;
|
||||
@include border-radius();
|
||||
background-color: var(--bd-callout-bg, var(--bs-gray-100));
|
||||
border-left: .25rem solid var(--bd-callout-border, var(--bs-gray-300));
|
||||
|
||||
h4 {
|
||||
margin-bottom: .25rem;
|
||||
@@ -18,24 +17,15 @@
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
code {
|
||||
@include border-radius();
|
||||
}
|
||||
|
||||
+ .bd-callout {
|
||||
margin-top: -.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
// Variations
|
||||
.bd-callout-info {
|
||||
border-left-color: $bd-info;
|
||||
}
|
||||
|
||||
.bd-callout-warning {
|
||||
border-left-color: $bd-warning;
|
||||
}
|
||||
|
||||
.bd-callout-danger {
|
||||
border-left-color: $bd-danger;
|
||||
@each $variant in $bd-callout-variants {
|
||||
.bd-callout-#{$variant} {
|
||||
--bd-callout-bg: rgba(var(--bs-#{$variant}-rgb), .075);
|
||||
--bd-callout-border: rgba(var(--bs-#{$variant}-rgb), .5);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -85,12 +85,12 @@
|
||||
.bd-example {
|
||||
position: relative;
|
||||
padding: 1rem;
|
||||
margin: 1rem ($bd-gutter-x * -1) 0;
|
||||
margin: 1rem ($bd-gutter-x * -.5) 0;
|
||||
border: solid $gray-300;
|
||||
border-width: 1px 0 0;
|
||||
@include clearfix();
|
||||
|
||||
@include media-breakpoint-up(sm) {
|
||||
@include media-breakpoint-up(md) {
|
||||
padding: 1.5rem;
|
||||
margin-right: 0;
|
||||
margin-left: 0;
|
||||
@@ -315,11 +315,11 @@
|
||||
//
|
||||
|
||||
.highlight {
|
||||
padding: .75rem $bd-gutter-x;
|
||||
padding: .75rem ($bd-gutter-x * .5);
|
||||
margin-bottom: 1rem;
|
||||
background-color: $gray-100;
|
||||
|
||||
@include media-breakpoint-up(sm) {
|
||||
@include media-breakpoint-up(md) {
|
||||
padding: .75rem 1.5rem;
|
||||
}
|
||||
|
||||
@@ -345,10 +345,10 @@
|
||||
}
|
||||
|
||||
.bd-content .highlight {
|
||||
margin-right: $bd-gutter-x * -1;
|
||||
margin-left: $bd-gutter-x * -1;
|
||||
margin-right: $bd-gutter-x * -.5;
|
||||
margin-left: $bd-gutter-x * -.5;
|
||||
|
||||
@include media-breakpoint-up(sm) {
|
||||
@include media-breakpoint-up(md) {
|
||||
margin-right: 0;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
@@ -1,44 +1,79 @@
|
||||
.bd-navbar {
|
||||
--bs-gutter-x: $bd-gutter-x;
|
||||
--bs-gutter-y: $bd-gutter-x;
|
||||
|
||||
padding: .75rem 0;
|
||||
background-color: $bd-violet;
|
||||
background-color: transparent;
|
||||
background-image: linear-gradient(to bottom, rgba(var(--bd-violet-rgb), 1), rgba(var(--bd-violet-rgb), .95));
|
||||
box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15), inset 0 -1px 0 rgba(0, 0, 0, .15);
|
||||
|
||||
.container-xxl {
|
||||
--bs-gutter-x: #{$bd-gutter-x};
|
||||
}
|
||||
|
||||
.navbar-toggler {
|
||||
padding: 0;
|
||||
border: 0;
|
||||
|
||||
&:focus {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-nav {
|
||||
.nav-link {
|
||||
padding-right: $spacer * .25;
|
||||
padding-left: $spacer * .25;
|
||||
color: rgba($white, .85);
|
||||
.navbar-brand {
|
||||
transition: .2s ease-in-out transform; // stylelint-disable-line property-disallowed-list
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: $white;
|
||||
}
|
||||
&:hover {
|
||||
transform: rotate(-5deg) scale(1.1);
|
||||
}
|
||||
}
|
||||
|
||||
&.active {
|
||||
font-weight: 600;
|
||||
color: $white;
|
||||
}
|
||||
.navbar-toggler,
|
||||
.nav-link {
|
||||
padding-right: $spacer * .25;
|
||||
padding-left: $spacer * .25;
|
||||
color: rgba($white, .85);
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: $white;
|
||||
}
|
||||
|
||||
&.active {
|
||||
font-weight: 600;
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-nav-svg {
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
display: inline-block;
|
||||
vertical-align: -.125rem;
|
||||
}
|
||||
|
||||
.offcanvas {
|
||||
background-color: $bd-violet;
|
||||
background-color: var(--bd-violet);
|
||||
border-left: 0;
|
||||
|
||||
@include media-breakpoint-down(md) {
|
||||
box-shadow: $box-shadow-lg;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-toggle {
|
||||
&:focus {
|
||||
outline: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
--#{$variable-prefix}dropdown-min-width: 12rem;
|
||||
--#{$variable-prefix}dropdown-link-hover-bg: rgba(var(--bd-violet-rgb), .1);
|
||||
@include rfs(.875rem, --#{$variable-prefix}dropdown-font-size);
|
||||
box-shadow: $dropdown-box-shadow;
|
||||
}
|
||||
|
||||
.dropdown-item.current {
|
||||
font-weight: 600;
|
||||
background-image: escape-svg($dropdown-active-icon);
|
||||
background-repeat: no-repeat;
|
||||
background-position: right $dropdown-item-padding-x top .6rem;
|
||||
background-size: .75rem .75rem;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,48 @@
|
||||
.bd-search {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
|
||||
&::after {
|
||||
position: absolute;
|
||||
top: .4rem;
|
||||
right: .4rem;
|
||||
bottom: .4rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding-right: .3125rem;
|
||||
padding-left: .3125rem;
|
||||
@include font-size(.75rem);
|
||||
color: rgba($white, .65);
|
||||
content: "Ctrl + /";
|
||||
background-color: rgba($white, .1);
|
||||
@include border-radius(.125rem);
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
position: absolute;
|
||||
top: .75rem;
|
||||
left: 50%;
|
||||
width: 100%;
|
||||
width: 280px;
|
||||
margin-left: -140px;
|
||||
}
|
||||
|
||||
.form-control {
|
||||
padding-right: 3.75rem;
|
||||
color: $white;
|
||||
background-color: rgba($black, .1);
|
||||
border-color: rgba($white, .4);
|
||||
transition-property: background-color, border-color, box-shadow;
|
||||
|
||||
&::placeholder {
|
||||
color: rgba($white, .65);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
background-color: rgba($black, .25);
|
||||
border-color: rgba($bd-accent, 1);
|
||||
box-shadow: 0 0 0 .25rem rgba($bd-accent, .4);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -6,7 +6,6 @@
|
||||
|
||||
.bd-links {
|
||||
overflow: auto;
|
||||
font-weight: 600;
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
position: sticky;
|
||||
@@ -14,74 +13,52 @@
|
||||
// Override collapse behaviors
|
||||
// stylelint-disable-next-line declaration-no-important
|
||||
display: block !important;
|
||||
height: subtract(100vh, 7rem);
|
||||
height: subtract(100vh, 6rem);
|
||||
// Prevent focus styles to be cut off:
|
||||
padding-left: .25rem;
|
||||
margin-left: -.25rem;
|
||||
overflow-y: auto;
|
||||
}
|
||||
}
|
||||
|
||||
> ul {
|
||||
@include media-breakpoint-down(md) {
|
||||
padding: 1.5rem .75rem;
|
||||
background-color: $gray-100;
|
||||
border-bottom: 1px solid $gray-200;
|
||||
}
|
||||
.bd-links-nav {
|
||||
@include media-breakpoint-down(md) {
|
||||
padding: 1.5rem 1.25rem;
|
||||
font-size: .875rem;
|
||||
background-color: $gray-100;
|
||||
border-bottom: 1px solid $gray-200;
|
||||
}
|
||||
|
||||
a {
|
||||
padding: .1875rem .5rem;
|
||||
margin-top: .125rem;
|
||||
margin-left: 1.25rem;
|
||||
color: rgba($black, .65);
|
||||
text-decoration: if($link-decoration == none, null, none);
|
||||
@include media-breakpoint-between(xs, md) {
|
||||
column-count: 2;
|
||||
column-gap: 1.5rem;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: rgba($black, .85);
|
||||
text-decoration: if($link-hover-decoration == underline, none, null);
|
||||
background-color: rgba($bd-violet, .1);
|
||||
}
|
||||
}
|
||||
|
||||
.btn {
|
||||
// Custom styles (as we don't have a completely neutral button style)
|
||||
padding: .25rem .5rem;
|
||||
font-weight: 600;
|
||||
color: rgba($black, .65);
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: rgba($black, .85);
|
||||
background-color: rgba($bd-violet, .1);
|
||||
.bd-links-group {
|
||||
break-inside: avoid;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
box-shadow: 0 0 0 1px rgba($bd-violet, .7);
|
||||
.bd-links-span-all {
|
||||
column-span: all;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Add chevron if there's a submenu
|
||||
&::before {
|
||||
width: 1.25em;
|
||||
line-height: 0; // Align in the middle
|
||||
content: escape-svg($sidebar-collapse-icon);
|
||||
@include transition(transform .35s ease);
|
||||
transform-origin: .5em 50%;
|
||||
}
|
||||
.bd-links-link {
|
||||
padding: .1875rem .5rem;
|
||||
margin-top: .125rem;
|
||||
margin-left: 1.125rem;
|
||||
color: rgba($black, .65);
|
||||
text-decoration: if($link-decoration == none, null, none);
|
||||
|
||||
&[aria-expanded="true"] {
|
||||
color: rgba($black, .85);
|
||||
|
||||
&::before {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
}
|
||||
&:hover,
|
||||
&:focus,
|
||||
&.active {
|
||||
color: rgba($black, .85);
|
||||
text-decoration: if($link-hover-decoration == underline, none, null);
|
||||
background-color: rgba(var(--bd-violet-rgb), .1);
|
||||
}
|
||||
|
||||
.active {
|
||||
&.active {
|
||||
font-weight: 600;
|
||||
color: rgba($black, .85);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,82 +0,0 @@
|
||||
.bd-subnavbar {
|
||||
--bs-gutter-x: $bd-gutter-x;
|
||||
--bs-gutter-y: $bd-gutter-x;
|
||||
|
||||
// The position and z-index are needed for the dropdown to stay on top of the content
|
||||
position: relative;
|
||||
z-index: $zindex-sticky;
|
||||
background-color: rgba($white, .95);
|
||||
box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .05), inset 0 -1px 0 rgba(0, 0, 0, .15);
|
||||
|
||||
.dropdown-menu {
|
||||
@include font-size(.875rem);
|
||||
box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .05);
|
||||
}
|
||||
|
||||
.dropdown-item.current {
|
||||
font-weight: 600;
|
||||
background-image: escape-svg($dropdown-active-icon);
|
||||
background-repeat: no-repeat;
|
||||
background-position: right $dropdown-item-padding-x top .6rem;
|
||||
background-size: .75rem .75rem;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.bd-search {
|
||||
position: relative;
|
||||
|
||||
&::after {
|
||||
position: absolute;
|
||||
top: .4rem;
|
||||
right: .4rem;
|
||||
bottom: .4rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding-right: .3125rem;
|
||||
padding-left: .3125rem;
|
||||
@include font-size(.75rem);
|
||||
color: $gray-600;
|
||||
content: "Ctrl + /";
|
||||
background-color: $gray-100;
|
||||
@include border-radius(.125rem);
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(md) {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.form-control {
|
||||
padding-right: 3.75rem;
|
||||
|
||||
&:focus {
|
||||
border-color: $bd-violet;
|
||||
box-shadow: 0 0 0 3px rgba($bd-violet, .25);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bd-sidebar-toggle {
|
||||
color: $text-muted;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: $bd-violet;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
box-shadow: 0 0 0 3px rgba($bd-violet, .25);
|
||||
}
|
||||
|
||||
.bi-collapse { display: none; }
|
||||
|
||||
&:not(.collapsed) {
|
||||
.bi-expand { display: none; }
|
||||
.bi-collapse { display: inline-block; }
|
||||
}
|
||||
}
|
||||
@@ -15,6 +15,7 @@
|
||||
|
||||
ul {
|
||||
padding-left: 0;
|
||||
margin-bottom: 0;
|
||||
list-style: none;
|
||||
|
||||
ul {
|
||||
@@ -40,3 +41,47 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bd-toc-toggle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
@include media-breakpoint-down(sm) {
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(md) {
|
||||
border: 1px solid $border-color;
|
||||
@include border-radius(.4rem);
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active,
|
||||
&[aria-expanded="true"] {
|
||||
color: var(--bd-violet);
|
||||
background-color: $white;
|
||||
border-color: var(--bd-violet);
|
||||
}
|
||||
|
||||
&:focus,
|
||||
&[aria-expanded="true"] {
|
||||
box-shadow: 0 0 0 3px rgba(var(--bd-violet-rgb), .25);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bd-toc-collapse {
|
||||
@include media-breakpoint-down(md) {
|
||||
nav {
|
||||
padding: 1.25rem;
|
||||
background-color: var(--bs-gray-100);
|
||||
border: 1px solid $border-color;
|
||||
@include border-radius(.25rem);
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
display: block !important; // stylelint-disable-line declaration-no-important
|
||||
}
|
||||
}
|
||||
|
||||
@@ -5,13 +5,10 @@ $bd-purple: #4c0bce;
|
||||
$bd-violet: lighten(saturate($bd-purple, 5%), 15%); // stylelint-disable-line function-disallowed-list
|
||||
$bd-purple-light: lighten(saturate($bd-purple, 5%), 45%); // stylelint-disable-line function-disallowed-list
|
||||
$bd-accent: #ffe484;
|
||||
$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-collapse-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>");
|
||||
|
||||
$bd-gutter-x: 1.25rem;
|
||||
$bd-gutter-x: 2rem;
|
||||
$bd-callout-variants: info, warning, danger !default;
|
||||
|
||||
:root {
|
||||
--bd-purple: #{$bd-purple};
|
||||
|
||||
@@ -37,7 +37,7 @@ $enable-cssgrid: true; // stylelint-disable-line scss/dollar-variable-default
|
||||
// Load docs components
|
||||
@import "variables";
|
||||
@import "navbar";
|
||||
@import "subnav";
|
||||
@import "search";
|
||||
@import "masthead";
|
||||
@import "ads";
|
||||
@import "content";
|
||||
|
||||
Reference in New Issue
Block a user