diff options
Diffstat (limited to 'code/frontpage/assets/scss/common')
| -rw-r--r-- | code/frontpage/assets/scss/common/_dark.scss | 582 | ||||
| -rw-r--r-- | code/frontpage/assets/scss/common/_global.scss | 288 | ||||
| -rw-r--r-- | code/frontpage/assets/scss/common/_variables.scss | 190 |
3 files changed, 1060 insertions, 0 deletions
diff --git a/code/frontpage/assets/scss/common/_dark.scss b/code/frontpage/assets/scss/common/_dark.scss new file mode 100644 index 0000000..2f77262 --- /dev/null +++ b/code/frontpage/assets/scss/common/_dark.scss @@ -0,0 +1,582 @@ +/** Theme variables */ + +// Source: https://material.io/design/color/dark-theme.html + +$body-bg-dark: $gray-900; +$body-overlay-dark: darken($body-bg-dark, 2.5%); + +/* +$border-dark: darken($body-bg-dark, 2.5%); +*/ +$border-dark: $gray-800; +$body-color-dark: $gray-300; +$dots-dark: darken($body-color-dark, 50%); + +$link-color-dark: $blue-300; +$button-color-dark: $link-color-dark; +$focus-color-dark: lighten($link-color-dark, 2.5%); + +$navbar-dark-color: $body-color-dark; +$navbar-dark-hover-color: $link-color-dark; +$navbar-dark-active-color: $link-color-dark; + +/** Theme styles */ + +[data-dark-mode] body { + background: $body-bg-dark; + color: $body-color-dark; +} + +[data-dark-mode] body a { + color: $link-color-dark; +} + +[data-dark-mode] body a.text-body { + color: $body-color-dark !important; +} + +[data-dark-mode] body .btn-primary { + @include button-variant($button-color-dark, $button-color-dark); + + color: $body-bg-dark !important; +} + +[data-dark-mode] body .btn-outline-primary { + @include button-outline-variant($button-color-dark, $button-color-dark); + + color: $link-color-dark; +} + +[data-dark-mode] body .btn-outline-primary:hover { + color: $body-bg-dark; +} + +[data-dark-mode] body .btn-doks-light { + color: $navbar-dark-color; +} + +[data-dark-mode] body .show > .btn-doks-light, +[data-dark-mode] body .btn-doks-light:hover, +[data-dark-mode] body .btn-doks-light:active { + color: $link-color-dark; +} + +[data-dark-mode] body .btn-menu svg { + color: $body-color-dark; +} + +[data-dark-mode] body .doks-sidebar-toggle { + color: $navbar-dark-color; +} + +[data-dark-mode] body .btn-menu:hover, +[data-dark-mode] body .btn-doks-light:hover, +[data-dark-mode] body .doks-sidebar-toggle:hover { + background: $body-overlay-dark; +} + +/* +[data-dark-mode] body .dropdown-menu { + @extend .dropdown-menu-dark; +} +*/ + +[data-dark-mode] body .navbar, +[data-dark-mode] body .doks-subnavbar { + background-color: rgba(33, 37, 41, 0.95); + border-bottom: 1px solid $border-dark; +} + +[data-dark-mode] body.home .navbar { + border-bottom: 0; +} + +[data-dark-mode] body .offcanvas-header { + border-bottom: 1px solid $gray-800; +} + +[data-dark-mode] body .offcanvas .nav-link { + color: $body-color-dark; +} + +[data-dark-mode] body .offcanvas .nav-link:hover, +[data-dark-mode] body .offcanvas .nav-link:focus { + color: $link-color-dark; +} + +[data-dark-mode] body .offcanvas .nav-link.active { + color: $link-color-dark; +} + +[data-dark-mode] body .navbar-light .navbar-brand { + color: $navbar-dark-color !important; +} + +[data-dark-mode] body .navbar-light .navbar-nav .nav-link { + color: $navbar-dark-color; +} + +[data-dark-mode] body .navbar-light .navbar-nav .nav-link:hover, +[data-dark-mode] body .navbar-light .navbar-nav .nav-link:focus { + color: $navbar-dark-hover-color; +} + +[data-dark-mode] body .navbar-light .navbar-nav .nav-link.disabled { + color: $navbar-dark-disabled-color; +} + +[data-dark-mode] body .navbar-light .navbar-nav .show > .nav-link, +[data-dark-mode] body .navbar-light .navbar-nav .active > .nav-link, +[data-dark-mode] body .navbar-light .navbar-nav .nav-link.show, +[data-dark-mode] body .navbar-light .navbar-nav .nav-link.active { + color: $navbar-dark-active-color; +} + +[data-dark-mode] body .navbar-light .navbar-text { + color: $navbar-dark-color; +} + +[data-dark-mode] body .alert-primary a { + color: $body-bg-dark; +} + +[data-dark-mode] body .alert-doks { + background: $body-overlay-dark; + color: $body-color-dark; +} + +[data-dark-mode] body .alert-doks a { + color: $link-color-dark; +} + +[data-dark-mode] body .page-links a { + color: $body-color-dark; +} + +[data-dark-mode] body .btn-toggle-nav a { + color: $body-color-dark; +} + +[data-dark-mode] body .showcase-meta a { + color: $body-color-dark; +} + +[data-dark-mode] body .showcase-meta a:hover, +[data-dark-mode] body .showcase-meta a:focus { + color: $link-color-dark; +} + +[data-dark-mode] body .docs-link:hover, +[data-dark-mode] body .docs-link.active, +[data-dark-mode] body .page-links a:hover { + text-decoration: none; + color: $link-color-dark; +} + +[data-dark-mode] body .btn-toggle { + color: $body-color-dark; + background-color: transparent; + border: 0; +} + +[data-dark-mode] body .btn-toggle:hover, +[data-dark-mode] body .btn-toggle:focus { + color: $body-color-dark; +} + +[data-dark-mode] body .btn-toggle::before { + width: 1.25em; + line-height: 0; + content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='rgba%28222, 226, 230, 0.75%29' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 14l6-6-6-6'/%3e%3c/svg%3e"); + transition: transform 0.35s ease; + transform-origin: 0.5em 50%; + margin-bottom: 0.125rem; +} + +[data-dark-mode] body .btn-toggle[aria-expanded="true"] { + color: $body-color-dark; +} + +[data-dark-mode] body .btn-toggle[aria-expanded="true"]::before { + transform: rotate(90deg); +} + +[data-dark-mode] body .btn-toggle-nav a:hover, +[data-dark-mode] body .btn-toggle-nav a:focus { + color: $link-color-dark; +} + +[data-dark-mode] body .btn-toggle-nav a.active { + color: $link-color-dark; +} + +[data-dark-mode] body .navbar-light .navbar-text a { + color: $navbar-dark-active-color; +} + +[data-dark-mode] body .docs-links h3.sidebar-link a, +[data-dark-mode] body .page-links h3.sidebar-link a { + color: $body-color-dark; +} + +[data-dark-mode] body .navbar-light .navbar-text a:hover, +[data-dark-mode] body .navbar-light .navbar-text a:focus { + color: $navbar-dark-active-color; +} + +[data-dark-mode] body .navbar .btn-link { + color: $navbar-dark-color; +} + +[data-dark-mode] body .content .btn-link { + color: $link-color-dark; +} + +[data-dark-mode] body .content .btn-link:hover { + color: $link-color-dark; +} + +[data-dark-mode] body .content img[src^="https://latex.codecogs.com/svg.latex"] { + filter: invert(1); +} + +[data-dark-mode] body .navbar .btn-link:hover { + color: $navbar-dark-hover-color; +} + +[data-dark-mode] body .navbar .btn-link:active { + color: $navbar-dark-active-color; +} + +[data-dark-mode] body .form-control.is-search { + background: $body-overlay-dark; + border: 1px solid transparent; + color: $gray-300; + + /* + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%236c757d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-search'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E"); + background-repeat: no-repeat; + background-position: right calc(0.375em + 0.1875rem) center; + background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem); + */ +} + +[data-dark-mode] body .form-control.is-search:focus { + border: 1px solid $link-color-dark; +} + +[data-dark-mode] body .doks-search::after { + color: $gray-300; + border: 1px solid $gray-700; +} + +[data-dark-mode] body .text-dark { + color: $body-color-dark !important; +} + +/* +[data-dark-mode] body .navbar-form::after { + color: $gray-600; + border: 1px solid $gray-800; +} +*/ + +[data-dark-mode] body .form-control { + color: $gray-300; +} + +[data-dark-mode] body .form-control::placeholder { + color: $gray-400; + opacity: 1; +} + +[data-dark-mode] body .border-top { + border-top: 1px solid $border-dark !important; +} + +@include media-breakpoint-up(lg) { + [data-dark-mode] body .docs-sidebar { + order: 0; + border-right: 1px solid $border-dark; + } +} + +[data-dark-mode] body .docs-navigation { + border-top: 1px solid $border-dark; +} + +[data-dark-mode] body pre code::-webkit-scrollbar-thumb { + background: $gray-400; +} + +[data-dark-mode] body code:not(.hljs) { + background: $body-overlay-dark; + color: $body-color-dark; +} + +[data-dark-mode] body pre code:hover { + scrollbar-width: thin; + scrollbar-color: $border-dark transparent; +} + +[data-dark-mode] body pre code::-webkit-scrollbar-thumb:hover { + background: $gray-500; +} + +[data-dark-mode] body blockquote { + border-left: 3px solid $border-dark; +} + +[data-dark-mode] body .footer { + border-top: 1px solid $border-dark; +} + +[data-dark-mode] body .docs-links, +[data-dark-mode] body .docs-toc { + scrollbar-width: thin; + scrollbar-color: $body-bg-dark $body-bg-dark; +} + +[data-dark-mode] body .docs-links::-webkit-scrollbar, +[data-dark-mode] body .docs-toc::-webkit-scrollbar { + width: 5px; +} + +[data-dark-mode] body .docs-links::-webkit-scrollbar-track, +[data-dark-mode] body .docs-toc::-webkit-scrollbar-track { + background: $body-bg-dark; +} + +[data-dark-mode] body .docs-links::-webkit-scrollbar-thumb, +[data-dark-mode] body .docs-toc::-webkit-scrollbar-thumb { + background: $body-bg-dark; +} + +[data-dark-mode] body .docs-links:hover, +[data-dark-mode] body .docs-toc:hover { + scrollbar-width: thin; + scrollbar-color: $border-dark $body-bg-dark; +} + +[data-dark-mode] body .docs-links:hover::-webkit-scrollbar-thumb, +[data-dark-mode] body .docs-toc:hover::-webkit-scrollbar-thumb { + background: $border-dark; +} + +[data-dark-mode] body .docs-links::-webkit-scrollbar-thumb:hover, +[data-dark-mode] body .docs-toc::-webkit-scrollbar-thumb:hover { + background: $border-dark; +} + +[data-dark-mode] body .docs-links h3:not(:first-child) { + border-top: 1px solid $border-dark; +} + +[data-dark-mode] body a.docs-link { + color: $body-color-dark; +} + +[data-dark-mode] body .page-links li:not(:first-child) { + border-top: 1px dashed $border-dark; +} + +[data-dark-mode] body .card { + background: $body-bg-dark; + border: 1px solid $border-dark; +} + +[data-dark-mode] body .card.bg-light { + background: $body-overlay-dark !important; +} + +[data-dark-mode] body .navbar .menu-icon .navicon { + background: $navbar-dark-color; +} + +[data-dark-mode] body .navbar .menu-icon .navicon::before, +[data-dark-mode] body .navbar .menu-icon .navicon::after { + background: $navbar-dark-color; +} + +[data-dark-mode] body .logo-light { + display: none !important; +} + +[data-dark-mode] body .logo-dark { + display: inline-block !important; +} + +[data-dark-mode] body .bg-light { + background: darken($body-bg-dark, 1.5%) !important; +} + +[data-dark-mode] body .bg-dots { + background-image: radial-gradient($dots-dark 15%, transparent 15%); +} + +[data-dark-mode] body .text-muted { + color: darken($body-color-dark, 7.5%) !important; +} + +[data-dark-mode] body .alert-primary { + background: $link-color-dark; + color: $body-bg-dark; +} + +[data-dark-mode] body .figure-caption { + color: $body-color-dark; +} + +[data-dark-mode] body table { + @extend .table-dark; +} + +[data-dark-mode] body .copy-status::after { + content: "Copy"; + display: block; + color: $body-color-dark; +} + +[data-dark-mode] body .copy-status:hover::after { + content: "Copy"; + display: block; + color: $link-color-dark; +} + +[data-dark-mode] body .copy-status:focus::after, +[data-dark-mode] body .copy-status:active::after { + content: "Copied"; + display: block; + color: $link-color-dark; +} + +/* +[data-dark-mode] body .dropdown-toggle:focus, +[data-dark-mode] body .doks-sidebar-toggle:focus { + box-shadow: 0 0 0 0.2rem $focus-color-dark; +} +*/ + +[data-dark-mode] body .offcanvas { + background-color: $body-bg-dark; +} + +[data-dark-mode] body .btn-close { + background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiNkZWUyZTYiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBjbGFzcz0iZmVhdGhlciBmZWF0aGVyLXgiPjxsaW5lIHgxPSIxOCIgeTE9IjYiIHgyPSI2IiB5Mj0iMTgiPjwvbGluZT48bGluZSB4MT0iNiIgeTE9IjYiIHgyPSIxOCIgeTI9IjE4Ij48L2xpbmU+PC9zdmc+"); + background-size: 1.5rem; +} + +@include media-breakpoint-up(md) { + [data-dark-mode] body .alert-dismissible .btn-close { + background-size: 1.25rem; + } +} + +/* +[data-dark-mode] body .btn-close:focus { + box-shadow: 0 0 0 0.2rem $focus-color-dark; +} +*/ + +[data-dark-mode] .dropdown-item { + color: $body-bg-dark; +} + +[data-dark-mode] body hr.text-black-50 { + color: $gray-600 !important; +} + +[data-dark-mode] body .email-form .form-control { + background: $body-overlay-dark; + border: 1px solid transparent; +} + +[data-dark-mode] body .email-form .form-control:focus { + border: 1px solid $link-color-dark; +} + +[data-dark-mode] .page-link { + color: $link-color-dark; + background-color: transparent; + border: $pagination-border-width solid $border-dark; + + &:hover { + color: $body-bg-dark; + background-color: $body-color-dark; + border-color: $body-color-dark; + } + + &:focus { + color: $body-bg-dark; + background-color: $body-color-dark; + } +} + +[data-dark-mode] .page-item { + &.active .page-link { + color: $body-bg-dark; + + @include gradient-bg($link-color-dark); + + border-color: $link-color-dark; + } + + &.disabled .page-link { + color: $pagination-disabled-color; + background-color: $body-overlay-dark; + border-color: $border-dark; + } +} + +[data-dark-mode] .dropdown-menu { + background: $body-overlay-dark; +} + +[data-dark-mode] .dropdown-menu .dropdown-item { + color: $body-color-dark; +} + +[data-dark-mode] .dropdown-menu .dropdown-item:hover { + color: $link-color-dark; + background: $body-bg-dark; +} + +[data-dark-mode] .dropdown-menu .dropdown-item.active, +[data-dark-mode] .dropdown-menu .dropdown-item:focus { + color: $link-color-dark; + background: $body-bg-dark; +} + +[data-dark-mode] .doks-navbar .dropdown-item.current, +[data-dark-mode] .doks-subnavbar .dropdown-item.current { + background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23dee2e6' 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'/%3e%3c/svg%3e"); + background-repeat: no-repeat; + background-position: right 1rem top 0.6rem; + background-size: 0.75rem 0.75rem; +} + +[data-dark-mode] details { + border: 1px solid $border-dark; +} + +[data-dark-mode] summary:hover { + background: $body-overlay-dark; +} + +[data-dark-mode] details[open] > summary { + border-bottom: 1px solid $border-dark; +} + +[data-dark-mode] details summary::before { + content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='rgba%28222, 226, 230, 0.75%29' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 14l6-6-6-6'/%3e%3c/svg%3e"); +} + +[data-dark-mode] #toc a.active { + color: $link-color-dark; +} + +[data-dark-mode] .btn-light { + color: $link-color-dark; + background: $body-overlay-dark; + border: 1px solid $body-overlay-dark; +} diff --git a/code/frontpage/assets/scss/common/_global.scss b/code/frontpage/assets/scss/common/_global.scss new file mode 100644 index 0000000..475ca6d --- /dev/null +++ b/code/frontpage/assets/scss/common/_global.scss @@ -0,0 +1,288 @@ +.contributors .content, +.blog .content, +.page .content, +.error404 .content, +.docs.list .content, +.tutorial.list .content, +.showcase.list .content, +.categories.list .content, +.tags.list .content { + padding-top: 1rem; + padding-bottom: 3rem; +} + +.content img { + max-width: 100%; +} + +h1, +h2, +h3, +h4, +h5, +h6, +.h1, +.h2, +.h3, +.h4, +.h5, +.h6 { + margin: 2rem 0 1rem; +} + +.offcanvas-header { + border-bottom: 1px solid $gray-300; + padding-top: 1.0625rem; + padding-bottom: 0.8125rem; +} + +h5.offcanvas-title { + margin: 0; +} + +body.docs { + padding-top: 0 !important; +} + +@include media-breakpoint-up(md) { + body { + font-size: $font-size-md; + + /* + padding-top: 4rem !important; + */ + } + + h1, + h2, + h3, + h4, + h5, + h6, + .h1, + .h2, + .h3, + .h4, + .h5, + .h6 { + margin-bottom: 1.125rem; + } +} + +.home h1 { + /* font-size: calc(1.375rem + 1.5vw); */ + font-size: calc(1.875rem + 1.5vw); +} + +a:hover, +a:focus { + text-decoration: underline; +} + +a.btn:hover, +a.btn:focus { + text-decoration: none; +} + +.section { + padding-top: 5rem; + padding-bottom: 5rem; +} + +.section-md { + padding-top: 3rem; + padding-bottom: 3rem; +} + +.section-sm { + padding-top: 1rem; + padding-bottom: 1rem; +} + +/* +.section svg { + display: inline-block; + width: 2rem; + height: 2rem; + vertical-align: text-top; +} +*/ + +/* +body { + padding-top: 3.5625rem; +} +*/ + +.docs-sidebar { + order: 2; +} + +@include media-breakpoint-up(lg) { + .docs-sidebar { + order: 0; + border-right: 1px solid $gray-200; + } + + @supports ((position:-webkit-sticky) or (position:sticky)) { + .docs-sidebar { + position: -webkit-sticky; + position: sticky; + top: 4rem; + z-index: 1000; + height: calc(100vh - 4rem); + } + + .docs-sidebar-top { + top: 0; + } + } +} + +@include media-breakpoint-up(xl) { + .docs-sidebar { + flex: 0 1 320px; + } +} + +.docs-links { + padding-bottom: 5rem; +} + +@include media-breakpoint-up(lg) { + @supports ((position: -webkit-sticky) or (position: sticky)) { + .docs-links { + max-height: calc(100vh - 4rem); + overflow-y: scroll; + } + } +} + +@include media-breakpoint-up(lg) { + .docs-links { + display: block; + width: auto; + margin-right: -1.5rem; + padding-bottom: 4rem; + } +} + +.docs-toc { + order: 2; +} + +@supports ((position:-webkit-sticky) or (position:sticky)) { + .docs-toc { + position: -webkit-sticky; + position: sticky; + top: 4rem; + height: calc(100vh - 4rem); + overflow-y: auto; + } + + .docs-toc-top { + top: 0; + } +} + +.docs-content { + padding-bottom: 3rem; + order: 1; +} + +.docs-navigation { + border-top: 1px solid $gray-200; + margin-top: 2rem; + margin-bottom: 0; + padding-top: 2rem; +} + +.docs-navigation a { + font-size: $font-size-base * 0.9; +} + +@include media-breakpoint-up(lg) { + .docs-navigation { + margin-bottom: -1rem; + } + + .docs-navigation a { + font-size: $font-size-base; + } +} + +.navbar a:hover, +.navbar a:focus { + text-decoration: none; +} + +#TableOfContents ul, +#toc ul { + padding-left: 0; + list-style: none; +} + +#toc a.active { + color: $primary; + font-weight: 500; +} + +::selection { + background: rgba(212, 53, 159, 0.2); +} + +.bg-dots { + background-image: radial-gradient($gray-300 15%, transparent 15%); + background-position: 0 0; + background-size: 1rem 1rem; + -webkit-mask: linear-gradient(to top, #fff, transparent); + mask: linear-gradient(to top, #fff, transparent); + width: 100%; + height: 9rem; + margin-top: -10rem; + z-index: -1; +} + +.bg-dots-md { + margin-top: -11rem; +} + +.bg-dots-lg { + margin-top: -12rem; +} + +// https://fossheim.io/writing/posts/css-text-gradient/ +.gradient-text { + background-color: $primary; + background-image: linear-gradient(90deg, $primary, $blue-300 50%, $pink-500); + background-size: 100%; + background-repeat: repeat; + -webkit-background-clip: text; + -moz-background-clip: text; + -webkit-text-fill-color: transparent; + -moz-text-fill-color: transparent; +} + +.katex { + font-size: $font-size-md; +} + +.card-bar { + border-top: 4px solid; + border-image-source: linear-gradient(90deg, $primary, #8ed6fb 50%, #d32e9d); + border-image-slice: 1; +} + +.modal-backdrop { + background-color: #fff; +} + +.modal-backdrop.show { + opacity: 0.7; +} + +@include media-breakpoint-up(md) { + .modal-backdrop.show { + opacity: 0; + } +} diff --git a/code/frontpage/assets/scss/common/_variables.scss b/code/frontpage/assets/scss/common/_variables.scss new file mode 100644 index 0000000..2737ce0 --- /dev/null +++ b/code/frontpage/assets/scss/common/_variables.scss @@ -0,0 +1,190 @@ +// Color system + +$white: #fff; +$gray-100: #f8f9fa; +$gray-200: #e9ecef; +$gray-300: #dee2e6; +$gray-400: #ced4da; +$gray-500: #adb5bd; +$gray-600: #6c757d; +$gray-700: #495057; +$gray-800: #343a40; +$gray-900: #212529; +$black: #000; + +$yellow: #ffe000; +$black: #1d2d35; +$beige: #fbf7f0; + +// $red: #e55235; +$purple: #5d2f86; +$brown: #aa9c84; + +$blue-300: #8ed6fb; +$pink-100: #fcfaff; +$pink-500: #d32e9d; + +$primary: $purple; + +$color-btn-bg: $pink-500; +$color-btn-border: darken($pink-500, 5%); +$color-btn-text: $white; + +// Options +// +// Quickly modify global styling by enabling or disabling optional features. + +$enable-caret: true; +$enable-rounded: true; +$enable-shadows: false; +$enable-gradients: false; +$enable-transitions: true; +$enable-reduced-motion: true; +$enable-smooth-scroll: true; +$enable-grid-classes: true; +$enable-button-pointers: true; +$enable-rfs: true; +$enable-validation-icons: true; +$enable-negative-margins: true; +$enable-deprecation-messages: true; +$enable-important-utilities: true; + +/** Bootstrap navbar fix (https://git.io/fADqW) */ +$navbar-dark-toggler-icon-bg: none; +$navbar-light-toggler-icon-bg: none; + +// Options +// +// Quickly modify global styling by enabling or disabling optional features. + +// $enable-responsive-font-sizes: true; + +// Body +// +// Settings for the `<body>` element. + +$body-bg: $white; +$body-color: $black; + +// Links +// +// Style anchor elements. + +$link-color: $primary; +$link-decoration: none; + +// Grid containers +// +// Define the maximum width of `.container` for different screen sizes. + +$container-max-widths: ( + sm: 540px, + md: 720px, + lg: 960px, + xl: 1240px, + xxl: 1320px +); + +@include _assert-ascending($container-max-widths, "$container-max-widths"); + +// Grid columns +// +// Set the number of columns and specify the width of the gutters. + +$grid-columns: 16; +$grid-gutter-width: 48px; +$grid-row-columns: 6; + +// Components +// +// Define common padding and border radius sizes and more. + +$border-color: $gray-200; + +// Typography +// +// Font, line-height, and color for body text, headings, and more. + +// stylelint-disable value-keyword-case +$font-family-sans-serif: -apple-system, blinkmacsystemfont, "Segoe UI", roboto, "Helvetica Neue", arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; +$font-family-monospace: "Jetbrains Mono", sfmono-regular, menlo, monaco, consolas, "Liberation Mono", "Courier New", monospace; +$font-family-base: $font-family-sans-serif; +// stylelint-enable value-keyword-case + +$font-size-base: 1rem; // Assumes the browser default, typically `16px` +$font-size-xl: $font-size-base * 1.375; +$font-size-lg: $font-size-base * 1.25; +$font-size-md: $font-size-base * 1.125; +$font-size-sm: $font-size-base * 0.875; + +// $line-height-base: 1.5; + +$headings-font-family: null; +$headings-font-weight: 700; + +$lead-font-weight: 400; + +// Spacing +// +// Control the default styling of most Bootstrap elements by modifying these +// variables. Mostly focused on spacing. +// You can add more entries to the $spacers map, should you need more variation. + +$spacer: 1rem; + +// Navbar + +$navbar-padding-y: $spacer / 2; +$navbar-padding-x: null; + +$navbar-nav-link-padding-x: 0.5rem; + +$navbar-light-color: $black; +$navbar-light-hover-color: $primary; +$navbar-light-active-color: $primary; + +// Cards + +$card-border-color: $gray-200; + +// Alerts +// +// Define alert colors, border radius, and padding. + +$alert-padding-y: $spacer; +$alert-padding-x: $spacer * 1.5; +$alert-margin-bottom: 0; +$alert-border-radius: 0; +$alert-link-font-weight: $headings-font-weight; +$alert-border-width: 0; + +$alert-bg-scale: 0; +$alert-border-scale: 0; +$alert-color-scale: 0; + +// docsearch +$dropdown-config: ( + main-color: $purple, + layout-type: normal, + layout-width: normal, + layout-alignment: align, + background-color: $white, + border-radius: 4, + border-width: 1, + border-color: $gray-200, + box-shadow: none, + branding-position: bottom, + spacing: normal, + include-desc: yes, + background-category-header: $white, + font-size: normal, + header-color: $black, + title-color: $black, + subtitle-color: $black, + text-color: $black, + highlight-color: $purple, + highlight-opacity: 0.1, + highlight-type: underline +); + +$input-btn-focus-width: 0;
\ No newline at end of file |