├── .gitignore ├── CONTRIBUTING.md ├── LICENSE ├── README.md ├── archetypes └── default.md ├── assets ├── js │ ├── libs │ │ └── library.js │ ├── pages │ │ └── services.js │ └── scripts.js └── scss │ ├── _bootstrap-variables.scss │ ├── bootstrap │ ├── _accordion.scss │ ├── _alert.scss │ ├── _badge.scss │ ├── _breadcrumb.scss │ ├── _button-group.scss │ ├── _buttons.scss │ ├── _card.scss │ ├── _carousel.scss │ ├── _close.scss │ ├── _containers.scss │ ├── _dropdown.scss │ ├── _forms.scss │ ├── _functions.scss │ ├── _grid.scss │ ├── _helpers.scss │ ├── _images.scss │ ├── _list-group.scss │ ├── _maps.scss │ ├── _mixins.scss │ ├── _modal.scss │ ├── _nav.scss │ ├── _navbar.scss │ ├── _offcanvas.scss │ ├── _pagination.scss │ ├── _placeholders.scss │ ├── _popover.scss │ ├── _progress.scss │ ├── _reboot.scss │ ├── _root.scss │ ├── _spinners.scss │ ├── _tables.scss │ ├── _toasts.scss │ ├── _tooltip.scss │ ├── _transitions.scss │ ├── _type.scss │ ├── _utilities.scss │ ├── _variables-dark.scss │ ├── _variables.scss │ ├── bootstrap-grid.scss │ ├── bootstrap-reboot.scss │ ├── bootstrap-utilities.scss │ ├── bootstrap.scss │ ├── forms │ │ ├── _floating-labels.scss │ │ ├── _form-check.scss │ │ ├── _form-control.scss │ │ ├── _form-range.scss │ │ ├── _form-select.scss │ │ ├── _form-text.scss │ │ ├── _input-group.scss │ │ ├── _labels.scss │ │ └── _validation.scss │ ├── helpers │ │ ├── _clearfix.scss │ │ ├── _color-bg.scss │ │ ├── _colored-links.scss │ │ ├── _focus-ring.scss │ │ ├── _icon-link.scss │ │ ├── _position.scss │ │ ├── _ratio.scss │ │ ├── _stacks.scss │ │ ├── _stretched-link.scss │ │ ├── _text-truncation.scss │ │ ├── _visually-hidden.scss │ │ └── _vr.scss │ ├── mixins │ │ ├── _alert.scss │ │ ├── _backdrop.scss │ │ ├── _banner.scss │ │ ├── _border-radius.scss │ │ ├── _box-shadow.scss │ │ ├── _breakpoints.scss │ │ ├── _buttons.scss │ │ ├── _caret.scss │ │ ├── _clearfix.scss │ │ ├── _color-mode.scss │ │ ├── _color-scheme.scss │ │ ├── _container.scss │ │ ├── _deprecate.scss │ │ ├── _forms.scss │ │ ├── _gradients.scss │ │ ├── _grid.scss │ │ ├── _image.scss │ │ ├── _list-group.scss │ │ ├── _lists.scss │ │ ├── _pagination.scss │ │ ├── _reset-text.scss │ │ ├── _resize.scss │ │ ├── _table-variants.scss │ │ ├── _text-truncate.scss │ │ ├── _transition.scss │ │ ├── _utilities.scss │ │ └── _visually-hidden.scss │ ├── tests │ │ ├── jasmine.js │ │ ├── mixins │ │ │ ├── _color-modes.test.scss │ │ │ ├── _media-query-color-mode-full.test.scss │ │ │ └── _utilities.test.scss │ │ ├── sass-true │ │ │ ├── register.js │ │ │ └── runner.js │ │ └── utilities │ │ │ └── _api.test.scss │ ├── utilities │ │ └── _api.scss │ └── vendor │ │ └── _rfs.scss │ ├── components │ ├── _bg.scss │ ├── _buttons.scss │ ├── _call.scss │ ├── _content.scss │ ├── _feature.scss │ ├── _footer.scss │ ├── _hamburger.scss │ ├── _header.scss │ ├── _hero-image.scss │ ├── _intro.scss │ ├── _logo.scss │ ├── _main-menu-mobile.scss │ ├── _main-menu.scss │ ├── _page.scss │ ├── _reset.scss │ ├── _social.scss │ ├── _strip.scss │ ├── _sub-footer.scss │ ├── _sub-menu.scss │ ├── _title.scss │ ├── _type.scss │ └── _whitebox.scss │ ├── libraries │ └── hamburgers │ │ ├── _base.scss │ │ ├── hamburgers.scss │ │ └── types │ │ ├── _3dx-r.scss │ │ ├── _3dx.scss │ │ ├── _3dxy-r.scss │ │ ├── _3dxy.scss │ │ ├── _3dy-r.scss │ │ ├── _3dy.scss │ │ ├── _arrow-r.scss │ │ ├── _arrow.scss │ │ ├── _arrowalt-r.scss │ │ ├── _arrowalt.scss │ │ ├── _arrowturn-r.scss │ │ ├── _arrowturn.scss │ │ ├── _boring.scss │ │ ├── _collapse-r.scss │ │ ├── _collapse.scss │ │ ├── _elastic-r.scss │ │ ├── _elastic.scss │ │ ├── _emphatic-r.scss │ │ ├── _emphatic.scss │ │ ├── _minus.scss │ │ ├── _slider-r.scss │ │ ├── _slider.scss │ │ ├── _spin-r.scss │ │ ├── _spin.scss │ │ ├── _spring-r.scss │ │ ├── _spring.scss │ │ ├── _squeeze.scss │ │ ├── _stand-r.scss │ │ ├── _stand.scss │ │ ├── _vortex-r.scss │ │ └── _vortex.scss │ ├── pages │ ├── services │ │ ├── _page-services-list.scss │ │ ├── _page-services-single.scss │ │ └── _service-summary.scss │ └── work │ │ ├── _page-work-list.scss │ │ ├── _page-work-single.scss │ │ └── _work-summary.scss │ └── style.scss ├── exampleSite ├── archetypes │ ├── default.md │ ├── services.md │ └── work.md ├── config.toml ├── content │ ├── 404 │ │ └── _index.md │ ├── _index.md │ ├── contact │ │ └── _index.md │ ├── homepage │ │ ├── about.md │ │ ├── index.md │ │ └── work.md │ ├── pages │ │ ├── about │ │ │ ├── content1.md │ │ │ ├── content2.md │ │ │ ├── content3.md │ │ │ └── index.md │ │ └── history │ │ │ ├── content1.md │ │ │ ├── content2.md │ │ │ ├── content3.md │ │ │ └── index.md │ ├── services │ │ ├── _index.md │ │ ├── accounting.md │ │ ├── business-advisory.md │ │ ├── business-sales.md │ │ ├── mergers.md │ │ ├── superannuation.md │ │ └── tax-filing.md │ └── work │ │ ├── _index.md │ │ ├── cargo-terminal.md │ │ ├── fall-plaza.md │ │ └── modern-hospital.md ├── data │ ├── contact.yaml │ └── social.json └── static │ ├── favicon.png │ ├── features │ ├── noun_3d modeling_1885342.svg │ ├── noun_The Process_1885341.svg │ ├── noun_branding_1885335.svg │ └── noun_visual effect_1885325.svg │ ├── services │ ├── service-icon-1.png │ ├── service-icon-2.png │ ├── service-icon-3.png │ ├── service-icon-4.png │ ├── service-icon-5.png │ ├── service-icon-6.png │ ├── service.jpg │ ├── service1.jpg │ └── service2.jpg │ ├── social │ ├── github.svg │ └── twitter.svg │ └── work │ ├── work1-thumbnail.jpg │ └── work1.jpg ├── images ├── screenshot.png └── tn.png ├── layouts ├── 404 │ └── 404.html ├── .DS_Store ├── _default │ ├── baseof.html │ ├── list.html │ ├── single.html │ └── summary.html ├── contact │ └── contact.html ├── index.html ├── pages │ ├── about.html │ └── single.html ├── partials │ ├── footer.html │ ├── google-analytics.html │ ├── hamburger.html │ ├── header.html │ ├── hero-image-fullscreen.html │ ├── hero-image-setheight.html │ ├── main-menu-mobile.html │ ├── main-menu.html │ ├── social.html │ └── sub-footer.html ├── services │ ├── list.html │ ├── single.html │ └── summary.html ├── shortcodes │ ├── bundle-content.html │ ├── bundle-inspect.html │ ├── content-strip-center.html │ ├── content-strip-left.html │ └── content-strip-right.html └── work │ ├── list.html │ ├── single.html │ └── summary.html ├── netlify.toml ├── static └── images │ ├── jason-blackeye-1191801-unsplash.jpg │ ├── kevin-bhagat-461952-unsplash.jpg │ ├── logo-mobile.svg │ ├── logo.svg │ └── noun_chevron down_730206.svg └── theme.toml /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | .idea 4 | public 5 | resources 6 | local_git_config.sh 7 | .hugo_build.lock -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contributing 2 | 3 | I welcome contributions to help improve this theme. Bug reports, feature requests and PR's are all super helpful! 4 | 5 | ## Bugs 6 | 7 | If you find a bug in this template you can: 8 | 9 | * Report it as an issue 10 | * Feel free to submit a PR fixing the bug 🤩 11 | 12 | ## Pull Requests 13 | 14 | * Pull requests for new features and improvements are welcome, there doesnt have to be an existing issue. 15 | * Please fork this theme, create a new branch and create a Pull Request when finished 16 | * Be clear and descriptive in your PR 17 | * PR's will be built automatically using Netlify branch deploys, so make sure your PR passes that check 18 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) Robert Austin - rob@zerostatic.io - github.com/zerostaticthemes 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /archetypes/default.md: -------------------------------------------------------------------------------- 1 | +++ 2 | +++ 3 | -------------------------------------------------------------------------------- /assets/js/libs/library.js: -------------------------------------------------------------------------------- 1 | console.log('Library') 2 | -------------------------------------------------------------------------------- /assets/js/pages/services.js: -------------------------------------------------------------------------------- 1 | console.log('Services') 2 | -------------------------------------------------------------------------------- /assets/js/scripts.js: -------------------------------------------------------------------------------- 1 | var body = document.querySelector('body') 2 | var menuTrigger = document.querySelector('#toggle-main-menu-mobile'); 3 | var menuContainer = document.querySelector('#main-menu-mobile'); 4 | 5 | menuTrigger.onclick = function() { 6 | menuContainer.classList.toggle('open'); 7 | menuTrigger.classList.toggle('is-active') 8 | body.classList.toggle('lock-scroll') 9 | } 10 | -------------------------------------------------------------------------------- /assets/scss/_bootstrap-variables.scss: -------------------------------------------------------------------------------- 1 | $grid-breakpoints: ( 2 | xs: 0, 3 | sm: 576px, 4 | md: 768px, 5 | lg: 992px, 6 | xl: 1300px, 7 | ); 8 | 9 | $container-max-widths: ( 10 | sm: 540px, 11 | md: 720px, 12 | lg: 960px, 13 | xl: 1140px, 14 | ); 15 | 16 | $grid-gutter-width: 20px; 17 | 18 | $white: #ffffff; 19 | $black: #000000; 20 | $primary: #1c3ed3; 21 | $secondary: #43454d; 22 | 23 | // Links 24 | $link-color: $primary; 25 | $link-decoration: none; 26 | $link-hover-color: lighten($primary, 20%); 27 | $link-hover-decoration: underline; 28 | 29 | // Fonts 30 | $font-family-base: 'Open Sans', 'Helvetica Neue', Arial, sans-serif, -apple-system; 31 | $font-family-heading: 'Lato', 'Helvetica Neue', Arial, sans-serif, -apple-system; 32 | $font-size-base: 1rem; // Assumes the browser default, typically `16px` 33 | $font-weight-thin: 200; 34 | $font-weight-light: 300; 35 | $font-weight-normal: 400; 36 | $font-weight-bold: 700; 37 | $font-weight-base: $font-weight-normal; 38 | $line-height-base: 1.6; 39 | 40 | $headings-font-weight: 400; 41 | 42 | $spacer: 1rem; 43 | $spacers: (); 44 | $spacers: map-merge( 45 | ( 46 | 0: 0, 47 | 1: 10px, 48 | 2: 20px, 49 | 3: 30px, 50 | 4: 40px, 51 | 5: 50px, 52 | 6: 60px, 53 | 7: 70px, 54 | 8: 80px, 55 | 9: 90px, 56 | 10: 100px, 57 | 11: 110px, 58 | 12: 120px, 59 | 13: 130px, 60 | 14: 140px, 61 | 15: 150px, 62 | 16: 160px, 63 | 17: 170px, 64 | 18: 180px, 65 | 19: 190px, 66 | 20: 200px, 67 | ), 68 | $spacers 69 | ); 70 | -------------------------------------------------------------------------------- /assets/scss/bootstrap/_alert.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Base styles 3 | // 4 | 5 | .alert { 6 | // scss-docs-start alert-css-vars 7 | --#{$prefix}alert-bg: transparent; 8 | --#{$prefix}alert-padding-x: #{$alert-padding-x}; 9 | --#{$prefix}alert-padding-y: #{$alert-padding-y}; 10 | --#{$prefix}alert-margin-bottom: #{$alert-margin-bottom}; 11 | --#{$prefix}alert-color: inherit; 12 | --#{$prefix}alert-border-color: transparent; 13 | --#{$prefix}alert-border: #{$alert-border-width} solid var(--#{$prefix}alert-border-color); 14 | --#{$prefix}alert-border-radius: #{$alert-border-radius}; 15 | --#{$prefix}alert-link-color: inherit; 16 | // scss-docs-end alert-css-vars 17 | 18 | position: relative; 19 | padding: var(--#{$prefix}alert-padding-y) var(--#{$prefix}alert-padding-x); 20 | margin-bottom: var(--#{$prefix}alert-margin-bottom); 21 | color: var(--#{$prefix}alert-color); 22 | background-color: var(--#{$prefix}alert-bg); 23 | border: var(--#{$prefix}alert-border); 24 | @include border-radius(var(--#{$prefix}alert-border-radius)); 25 | } 26 | 27 | // Headings for larger alerts 28 | .alert-heading { 29 | // Specified to prevent conflicts of changing $headings-color 30 | color: inherit; 31 | } 32 | 33 | // Provide class for links that match alerts 34 | .alert-link { 35 | font-weight: $alert-link-font-weight; 36 | color: var(--#{$prefix}alert-link-color); 37 | } 38 | 39 | 40 | // Dismissible alerts 41 | // 42 | // Expand the right padding and account for the close button's positioning. 43 | 44 | .alert-dismissible { 45 | padding-right: $alert-dismissible-padding-r; 46 | 47 | // Adjust close link position 48 | .btn-close { 49 | position: absolute; 50 | top: 0; 51 | right: 0; 52 | z-index: $stretched-link-z-index + 1; 53 | padding: $alert-padding-y * 1.25 $alert-padding-x; 54 | } 55 | } 56 | 57 | 58 | // scss-docs-start alert-modifiers 59 | // Generate contextual modifier classes for colorizing the alert 60 | @each $state in map-keys($theme-colors) { 61 | .alert-#{$state} { 62 | --#{$prefix}alert-color: var(--#{$prefix}#{$state}-text-emphasis); 63 | --#{$prefix}alert-bg: var(--#{$prefix}#{$state}-bg-subtle); 64 | --#{$prefix}alert-border-color: var(--#{$prefix}#{$state}-border-subtle); 65 | --#{$prefix}alert-link-color: var(--#{$prefix}#{$state}-text-emphasis); 66 | } 67 | } 68 | // scss-docs-end alert-modifiers 69 | -------------------------------------------------------------------------------- /assets/scss/bootstrap/_badge.scss: -------------------------------------------------------------------------------- 1 | // Base class 2 | // 3 | // Requires one of the contextual, color modifier classes for `color` and 4 | // `background-color`. 5 | 6 | .badge { 7 | // scss-docs-start badge-css-vars 8 | --#{$prefix}badge-padding-x: #{$badge-padding-x}; 9 | --#{$prefix}badge-padding-y: #{$badge-padding-y}; 10 | @include rfs($badge-font-size, --#{$prefix}badge-font-size); 11 | --#{$prefix}badge-font-weight: #{$badge-font-weight}; 12 | --#{$prefix}badge-color: #{$badge-color}; 13 | --#{$prefix}badge-border-radius: #{$badge-border-radius}; 14 | // scss-docs-end badge-css-vars 15 | 16 | display: inline-block; 17 | padding: var(--#{$prefix}badge-padding-y) var(--#{$prefix}badge-padding-x); 18 | @include font-size(var(--#{$prefix}badge-font-size)); 19 | font-weight: var(--#{$prefix}badge-font-weight); 20 | line-height: 1; 21 | color: var(--#{$prefix}badge-color); 22 | text-align: center; 23 | white-space: nowrap; 24 | vertical-align: baseline; 25 | @include border-radius(var(--#{$prefix}badge-border-radius)); 26 | @include gradient-bg(); 27 | 28 | // Empty badges collapse automatically 29 | &:empty { 30 | display: none; 31 | } 32 | } 33 | 34 | // Quick fix for badges in buttons 35 | .btn .badge { 36 | position: relative; 37 | top: -1px; 38 | } 39 | -------------------------------------------------------------------------------- /assets/scss/bootstrap/_breadcrumb.scss: -------------------------------------------------------------------------------- 1 | .breadcrumb { 2 | // scss-docs-start breadcrumb-css-vars 3 | --#{$prefix}breadcrumb-padding-x: #{$breadcrumb-padding-x}; 4 | --#{$prefix}breadcrumb-padding-y: #{$breadcrumb-padding-y}; 5 | --#{$prefix}breadcrumb-margin-bottom: #{$breadcrumb-margin-bottom}; 6 | @include rfs($breadcrumb-font-size, --#{$prefix}breadcrumb-font-size); 7 | --#{$prefix}breadcrumb-bg: #{$breadcrumb-bg}; 8 | --#{$prefix}breadcrumb-border-radius: #{$breadcrumb-border-radius}; 9 | --#{$prefix}breadcrumb-divider-color: #{$breadcrumb-divider-color}; 10 | --#{$prefix}breadcrumb-item-padding-x: #{$breadcrumb-item-padding-x}; 11 | --#{$prefix}breadcrumb-item-active-color: #{$breadcrumb-active-color}; 12 | // scss-docs-end breadcrumb-css-vars 13 | 14 | display: flex; 15 | flex-wrap: wrap; 16 | padding: var(--#{$prefix}breadcrumb-padding-y) var(--#{$prefix}breadcrumb-padding-x); 17 | margin-bottom: var(--#{$prefix}breadcrumb-margin-bottom); 18 | @include font-size(var(--#{$prefix}breadcrumb-font-size)); 19 | list-style: none; 20 | background-color: var(--#{$prefix}breadcrumb-bg); 21 | @include border-radius(var(--#{$prefix}breadcrumb-border-radius)); 22 | } 23 | 24 | .breadcrumb-item { 25 | // The separator between breadcrumbs (by default, a forward-slash: "/") 26 | + .breadcrumb-item { 27 | padding-left: var(--#{$prefix}breadcrumb-item-padding-x); 28 | 29 | &::before { 30 | float: left; // Suppress inline spacings and underlining of the separator 31 | padding-right: var(--#{$prefix}breadcrumb-item-padding-x); 32 | color: var(--#{$prefix}breadcrumb-divider-color); 33 | content: var(--#{$prefix}breadcrumb-divider, escape-svg($breadcrumb-divider)) #{"/* rtl:"} var(--#{$prefix}breadcrumb-divider, escape-svg($breadcrumb-divider-flipped)) #{"*/"}; 34 | } 35 | } 36 | 37 | &.active { 38 | color: var(--#{$prefix}breadcrumb-item-active-color); 39 | } 40 | } 41 | -------------------------------------------------------------------------------- /assets/scss/bootstrap/_close.scss: -------------------------------------------------------------------------------- 1 | // Transparent background and border properties included for button version. 2 | // iOS requires the button element instead of an anchor tag. 3 | // If you want the anchor version, it requires `href="#"`. 4 | // See https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile 5 | 6 | .btn-close { 7 | // scss-docs-start close-css-vars 8 | --#{$prefix}btn-close-color: #{$btn-close-color}; 9 | --#{$prefix}btn-close-bg: #{ escape-svg($btn-close-bg) }; 10 | --#{$prefix}btn-close-opacity: #{$btn-close-opacity}; 11 | --#{$prefix}btn-close-hover-opacity: #{$btn-close-hover-opacity}; 12 | --#{$prefix}btn-close-focus-shadow: #{$btn-close-focus-shadow}; 13 | --#{$prefix}btn-close-focus-opacity: #{$btn-close-focus-opacity}; 14 | --#{$prefix}btn-close-disabled-opacity: #{$btn-close-disabled-opacity}; 15 | --#{$prefix}btn-close-white-filter: #{$btn-close-white-filter}; 16 | // scss-docs-end close-css-vars 17 | 18 | box-sizing: content-box; 19 | width: $btn-close-width; 20 | height: $btn-close-height; 21 | padding: $btn-close-padding-y $btn-close-padding-x; 22 | color: var(--#{$prefix}btn-close-color); 23 | background: transparent var(--#{$prefix}btn-close-bg) center / $btn-close-width auto no-repeat; // include transparent for button elements 24 | border: 0; // for button elements 25 | @include border-radius(); 26 | opacity: var(--#{$prefix}btn-close-opacity); 27 | 28 | // Override 's hover style 29 | &:hover { 30 | color: var(--#{$prefix}btn-close-color); 31 | text-decoration: none; 32 | opacity: var(--#{$prefix}btn-close-hover-opacity); 33 | } 34 | 35 | &:focus { 36 | outline: 0; 37 | box-shadow: var(--#{$prefix}btn-close-focus-shadow); 38 | opacity: var(--#{$prefix}btn-close-focus-opacity); 39 | } 40 | 41 | &:disabled, 42 | &.disabled { 43 | pointer-events: none; 44 | user-select: none; 45 | opacity: var(--#{$prefix}btn-close-disabled-opacity); 46 | } 47 | } 48 | 49 | @mixin btn-close-white() { 50 | filter: var(--#{$prefix}btn-close-white-filter); 51 | } 52 | 53 | .btn-close-white { 54 | @include btn-close-white(); 55 | } 56 | 57 | @if $enable-dark-mode { 58 | @include color-mode(dark) { 59 | .btn-close { 60 | @include btn-close-white(); 61 | } 62 | } 63 | } 64 | -------------------------------------------------------------------------------- /assets/scss/bootstrap/_containers.scss: -------------------------------------------------------------------------------- 1 | // Container widths 2 | // 3 | // Set the container width, and override it for fixed navbars in media queries. 4 | 5 | @if $enable-container-classes { 6 | // Single container class with breakpoint max-widths 7 | .container, 8 | // 100% wide container at all breakpoints 9 | .container-fluid { 10 | @include make-container(); 11 | } 12 | 13 | // Responsive containers that are 100% wide until a breakpoint 14 | @each $breakpoint, $container-max-width in $container-max-widths { 15 | .container-#{$breakpoint} { 16 | @extend .container-fluid; 17 | } 18 | 19 | @include media-breakpoint-up($breakpoint, $grid-breakpoints) { 20 | %responsive-container-#{$breakpoint} { 21 | max-width: $container-max-width; 22 | } 23 | 24 | // Extend each breakpoint which is smaller or equal to the current breakpoint 25 | $extend-breakpoint: true; 26 | 27 | @each $name, $width in $grid-breakpoints { 28 | @if ($extend-breakpoint) { 29 | .container#{breakpoint-infix($name, $grid-breakpoints)} { 30 | @extend %responsive-container-#{$breakpoint}; 31 | } 32 | 33 | // Once the current breakpoint is reached, stop extending 34 | @if ($breakpoint == $name) { 35 | $extend-breakpoint: false; 36 | } 37 | } 38 | } 39 | } 40 | } 41 | } 42 | -------------------------------------------------------------------------------- /assets/scss/bootstrap/_forms.scss: -------------------------------------------------------------------------------- 1 | @import "forms/labels"; 2 | @import "forms/form-text"; 3 | @import "forms/form-control"; 4 | @import "forms/form-select"; 5 | @import "forms/form-check"; 6 | @import "forms/form-range"; 7 | @import "forms/floating-labels"; 8 | @import "forms/input-group"; 9 | @import "forms/validation"; 10 | -------------------------------------------------------------------------------- /assets/scss/bootstrap/_grid.scss: -------------------------------------------------------------------------------- 1 | // Row 2 | // 3 | // Rows contain your columns. 4 | 5 | :root { 6 | @each $name, $value in $grid-breakpoints { 7 | --#{$prefix}breakpoint-#{$name}: #{$value}; 8 | } 9 | } 10 | 11 | @if $enable-grid-classes { 12 | .row { 13 | @include make-row(); 14 | 15 | > * { 16 | @include make-col-ready(); 17 | } 18 | } 19 | } 20 | 21 | @if $enable-cssgrid { 22 | .grid { 23 | display: grid; 24 | grid-template-rows: repeat(var(--#{$prefix}rows, 1), 1fr); 25 | grid-template-columns: repeat(var(--#{$prefix}columns, #{$grid-columns}), 1fr); 26 | gap: var(--#{$prefix}gap, #{$grid-gutter-width}); 27 | 28 | @include make-cssgrid(); 29 | } 30 | } 31 | 32 | 33 | // Columns 34 | // 35 | // Common styles for small and large grid columns 36 | 37 | @if $enable-grid-classes { 38 | @include make-grid-columns(); 39 | } 40 | -------------------------------------------------------------------------------- /assets/scss/bootstrap/_helpers.scss: -------------------------------------------------------------------------------- 1 | @import "helpers/clearfix"; 2 | @import "helpers/color-bg"; 3 | @import "helpers/colored-links"; 4 | @import "helpers/focus-ring"; 5 | @import "helpers/icon-link"; 6 | @import "helpers/ratio"; 7 | @import "helpers/position"; 8 | @import "helpers/stacks"; 9 | @import "helpers/visually-hidden"; 10 | @import "helpers/stretched-link"; 11 | @import "helpers/text-truncation"; 12 | @import "helpers/vr"; 13 | -------------------------------------------------------------------------------- /assets/scss/bootstrap/_images.scss: -------------------------------------------------------------------------------- 1 | // Responsive images (ensure images don't scale beyond their parents) 2 | // 3 | // This is purposefully opt-in via an explicit class rather than being the default for all ``s. 4 | // We previously tried the "images are responsive by default" approach in Bootstrap v2, 5 | // and abandoned it in Bootstrap v3 because it breaks lots of third-party widgets (including Google Maps) 6 | // which weren't expecting the images within themselves to be involuntarily resized. 7 | // See also https://github.com/twbs/bootstrap/issues/18178 8 | .img-fluid { 9 | @include img-fluid(); 10 | } 11 | 12 | 13 | // Image thumbnails 14 | .img-thumbnail { 15 | padding: $thumbnail-padding; 16 | background-color: $thumbnail-bg; 17 | border: $thumbnail-border-width solid $thumbnail-border-color; 18 | @include border-radius($thumbnail-border-radius); 19 | @include box-shadow($thumbnail-box-shadow); 20 | 21 | // Keep them at most 100% wide 22 | @include img-fluid(); 23 | } 24 | 25 | // 26 | // Figures 27 | // 28 | 29 | .figure { 30 | // Ensures the caption's text aligns with the image. 31 | display: inline-block; 32 | } 33 | 34 | .figure-img { 35 | margin-bottom: $spacer * .5; 36 | line-height: 1; 37 | } 38 | 39 | .figure-caption { 40 | @include font-size($figure-caption-font-size); 41 | color: $figure-caption-color; 42 | } 43 | -------------------------------------------------------------------------------- /assets/scss/bootstrap/_mixins.scss: -------------------------------------------------------------------------------- 1 | // Toggles 2 | // 3 | // Used in conjunction with global variables to enable certain theme features. 4 | 5 | // Vendor 6 | @import "vendor/rfs"; 7 | 8 | // Deprecate 9 | @import "mixins/deprecate"; 10 | 11 | // Helpers 12 | @import "mixins/breakpoints"; 13 | @import "mixins/color-mode"; 14 | @import "mixins/color-scheme"; 15 | @import "mixins/image"; 16 | @import "mixins/resize"; 17 | @import "mixins/visually-hidden"; 18 | @import "mixins/reset-text"; 19 | @import "mixins/text-truncate"; 20 | 21 | // Utilities 22 | @import "mixins/utilities"; 23 | 24 | // Components 25 | @import "mixins/backdrop"; 26 | @import "mixins/buttons"; 27 | @import "mixins/caret"; 28 | @import "mixins/pagination"; 29 | @import "mixins/lists"; 30 | @import "mixins/forms"; 31 | @import "mixins/table-variants"; 32 | 33 | // Skins 34 | @import "mixins/border-radius"; 35 | @import "mixins/box-shadow"; 36 | @import "mixins/gradients"; 37 | @import "mixins/transition"; 38 | 39 | // Layout 40 | @import "mixins/clearfix"; 41 | @import "mixins/container"; 42 | @import "mixins/grid"; 43 | -------------------------------------------------------------------------------- /assets/scss/bootstrap/_placeholders.scss: -------------------------------------------------------------------------------- 1 | .placeholder { 2 | display: inline-block; 3 | min-height: 1em; 4 | vertical-align: middle; 5 | cursor: wait; 6 | background-color: currentcolor; 7 | opacity: $placeholder-opacity-max; 8 | 9 | &.btn::before { 10 | display: inline-block; 11 | content: ""; 12 | } 13 | } 14 | 15 | // Sizing 16 | .placeholder-xs { 17 | min-height: .6em; 18 | } 19 | 20 | .placeholder-sm { 21 | min-height: .8em; 22 | } 23 | 24 | .placeholder-lg { 25 | min-height: 1.2em; 26 | } 27 | 28 | // Animation 29 | .placeholder-glow { 30 | .placeholder { 31 | animation: placeholder-glow 2s ease-in-out infinite; 32 | } 33 | } 34 | 35 | @keyframes placeholder-glow { 36 | 50% { 37 | opacity: $placeholder-opacity-min; 38 | } 39 | } 40 | 41 | .placeholder-wave { 42 | mask-image: linear-gradient(130deg, $black 55%, rgba(0, 0, 0, (1 - $placeholder-opacity-min)) 75%, $black 95%); 43 | mask-size: 200% 100%; 44 | animation: placeholder-wave 2s linear infinite; 45 | } 46 | 47 | @keyframes placeholder-wave { 48 | 100% { 49 | mask-position: -200% 0%; 50 | } 51 | } 52 | -------------------------------------------------------------------------------- /assets/scss/bootstrap/_progress.scss: -------------------------------------------------------------------------------- 1 | // Disable animation if transitions are disabled 2 | 3 | // scss-docs-start progress-keyframes 4 | @if $enable-transitions { 5 | @keyframes progress-bar-stripes { 6 | 0% { background-position-x: $progress-height; } 7 | } 8 | } 9 | // scss-docs-end progress-keyframes 10 | 11 | .progress, 12 | .progress-stacked { 13 | // scss-docs-start progress-css-vars 14 | --#{$prefix}progress-height: #{$progress-height}; 15 | @include rfs($progress-font-size, --#{$prefix}progress-font-size); 16 | --#{$prefix}progress-bg: #{$progress-bg}; 17 | --#{$prefix}progress-border-radius: #{$progress-border-radius}; 18 | --#{$prefix}progress-box-shadow: #{$progress-box-shadow}; 19 | --#{$prefix}progress-bar-color: #{$progress-bar-color}; 20 | --#{$prefix}progress-bar-bg: #{$progress-bar-bg}; 21 | --#{$prefix}progress-bar-transition: #{$progress-bar-transition}; 22 | // scss-docs-end progress-css-vars 23 | 24 | display: flex; 25 | height: var(--#{$prefix}progress-height); 26 | overflow: hidden; // force rounded corners by cropping it 27 | @include font-size(var(--#{$prefix}progress-font-size)); 28 | background-color: var(--#{$prefix}progress-bg); 29 | @include border-radius(var(--#{$prefix}progress-border-radius)); 30 | @include box-shadow(var(--#{$prefix}progress-box-shadow)); 31 | } 32 | 33 | .progress-bar { 34 | display: flex; 35 | flex-direction: column; 36 | justify-content: center; 37 | overflow: hidden; 38 | color: var(--#{$prefix}progress-bar-color); 39 | text-align: center; 40 | white-space: nowrap; 41 | background-color: var(--#{$prefix}progress-bar-bg); 42 | @include transition(var(--#{$prefix}progress-bar-transition)); 43 | } 44 | 45 | .progress-bar-striped { 46 | @include gradient-striped(); 47 | background-size: var(--#{$prefix}progress-height) var(--#{$prefix}progress-height); 48 | } 49 | 50 | .progress-stacked > .progress { 51 | overflow: visible; 52 | } 53 | 54 | .progress-stacked > .progress > .progress-bar { 55 | width: 100%; 56 | } 57 | 58 | @if $enable-transitions { 59 | .progress-bar-animated { 60 | animation: $progress-bar-animation-timing progress-bar-stripes; 61 | 62 | @if $enable-reduced-motion { 63 | @media (prefers-reduced-motion: reduce) { 64 | animation: none; 65 | } 66 | } 67 | } 68 | } 69 | -------------------------------------------------------------------------------- /assets/scss/bootstrap/_spinners.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Rotating border 3 | // 4 | 5 | .spinner-grow, 6 | .spinner-border { 7 | display: inline-block; 8 | width: var(--#{$prefix}spinner-width); 9 | height: var(--#{$prefix}spinner-height); 10 | vertical-align: var(--#{$prefix}spinner-vertical-align); 11 | // stylelint-disable-next-line property-disallowed-list 12 | border-radius: 50%; 13 | animation: var(--#{$prefix}spinner-animation-speed) linear infinite var(--#{$prefix}spinner-animation-name); 14 | } 15 | 16 | // scss-docs-start spinner-border-keyframes 17 | @keyframes spinner-border { 18 | to { transform: rotate(360deg) #{"/* rtl:ignore */"}; } 19 | } 20 | // scss-docs-end spinner-border-keyframes 21 | 22 | .spinner-border { 23 | // scss-docs-start spinner-border-css-vars 24 | --#{$prefix}spinner-width: #{$spinner-width}; 25 | --#{$prefix}spinner-height: #{$spinner-height}; 26 | --#{$prefix}spinner-vertical-align: #{$spinner-vertical-align}; 27 | --#{$prefix}spinner-border-width: #{$spinner-border-width}; 28 | --#{$prefix}spinner-animation-speed: #{$spinner-animation-speed}; 29 | --#{$prefix}spinner-animation-name: spinner-border; 30 | // scss-docs-end spinner-border-css-vars 31 | 32 | border: var(--#{$prefix}spinner-border-width) solid currentcolor; 33 | border-right-color: transparent; 34 | } 35 | 36 | .spinner-border-sm { 37 | // scss-docs-start spinner-border-sm-css-vars 38 | --#{$prefix}spinner-width: #{$spinner-width-sm}; 39 | --#{$prefix}spinner-height: #{$spinner-height-sm}; 40 | --#{$prefix}spinner-border-width: #{$spinner-border-width-sm}; 41 | // scss-docs-end spinner-border-sm-css-vars 42 | } 43 | 44 | // 45 | // Growing circle 46 | // 47 | 48 | // scss-docs-start spinner-grow-keyframes 49 | @keyframes spinner-grow { 50 | 0% { 51 | transform: scale(0); 52 | } 53 | 50% { 54 | opacity: 1; 55 | transform: none; 56 | } 57 | } 58 | // scss-docs-end spinner-grow-keyframes 59 | 60 | .spinner-grow { 61 | // scss-docs-start spinner-grow-css-vars 62 | --#{$prefix}spinner-width: #{$spinner-width}; 63 | --#{$prefix}spinner-height: #{$spinner-height}; 64 | --#{$prefix}spinner-vertical-align: #{$spinner-vertical-align}; 65 | --#{$prefix}spinner-animation-speed: #{$spinner-animation-speed}; 66 | --#{$prefix}spinner-animation-name: spinner-grow; 67 | // scss-docs-end spinner-grow-css-vars 68 | 69 | background-color: currentcolor; 70 | opacity: 0; 71 | } 72 | 73 | .spinner-grow-sm { 74 | --#{$prefix}spinner-width: #{$spinner-width-sm}; 75 | --#{$prefix}spinner-height: #{$spinner-height-sm}; 76 | } 77 | 78 | @if $enable-reduced-motion { 79 | @media (prefers-reduced-motion: reduce) { 80 | .spinner-border, 81 | .spinner-grow { 82 | --#{$prefix}spinner-animation-speed: #{$spinner-animation-speed * 2}; 83 | } 84 | } 85 | } 86 | -------------------------------------------------------------------------------- /assets/scss/bootstrap/_toasts.scss: -------------------------------------------------------------------------------- 1 | .toast { 2 | // scss-docs-start toast-css-vars 3 | --#{$prefix}toast-zindex: #{$zindex-toast}; 4 | --#{$prefix}toast-padding-x: #{$toast-padding-x}; 5 | --#{$prefix}toast-padding-y: #{$toast-padding-y}; 6 | --#{$prefix}toast-spacing: #{$toast-spacing}; 7 | --#{$prefix}toast-max-width: #{$toast-max-width}; 8 | @include rfs($toast-font-size, --#{$prefix}toast-font-size); 9 | --#{$prefix}toast-color: #{$toast-color}; 10 | --#{$prefix}toast-bg: #{$toast-background-color}; 11 | --#{$prefix}toast-border-width: #{$toast-border-width}; 12 | --#{$prefix}toast-border-color: #{$toast-border-color}; 13 | --#{$prefix}toast-border-radius: #{$toast-border-radius}; 14 | --#{$prefix}toast-box-shadow: #{$toast-box-shadow}; 15 | --#{$prefix}toast-header-color: #{$toast-header-color}; 16 | --#{$prefix}toast-header-bg: #{$toast-header-background-color}; 17 | --#{$prefix}toast-header-border-color: #{$toast-header-border-color}; 18 | // scss-docs-end toast-css-vars 19 | 20 | width: var(--#{$prefix}toast-max-width); 21 | max-width: 100%; 22 | @include font-size(var(--#{$prefix}toast-font-size)); 23 | color: var(--#{$prefix}toast-color); 24 | pointer-events: auto; 25 | background-color: var(--#{$prefix}toast-bg); 26 | background-clip: padding-box; 27 | border: var(--#{$prefix}toast-border-width) solid var(--#{$prefix}toast-border-color); 28 | box-shadow: var(--#{$prefix}toast-box-shadow); 29 | @include border-radius(var(--#{$prefix}toast-border-radius)); 30 | 31 | &.showing { 32 | opacity: 0; 33 | } 34 | 35 | &:not(.show) { 36 | display: none; 37 | } 38 | } 39 | 40 | .toast-container { 41 | --#{$prefix}toast-zindex: #{$zindex-toast}; 42 | 43 | position: absolute; 44 | z-index: var(--#{$prefix}toast-zindex); 45 | width: max-content; 46 | max-width: 100%; 47 | pointer-events: none; 48 | 49 | > :not(:last-child) { 50 | margin-bottom: var(--#{$prefix}toast-spacing); 51 | } 52 | } 53 | 54 | .toast-header { 55 | display: flex; 56 | align-items: center; 57 | padding: var(--#{$prefix}toast-padding-y) var(--#{$prefix}toast-padding-x); 58 | color: var(--#{$prefix}toast-header-color); 59 | background-color: var(--#{$prefix}toast-header-bg); 60 | background-clip: padding-box; 61 | border-bottom: var(--#{$prefix}toast-border-width) solid var(--#{$prefix}toast-header-border-color); 62 | @include border-top-radius(calc(var(--#{$prefix}toast-border-radius) - var(--#{$prefix}toast-border-width))); 63 | 64 | .btn-close { 65 | margin-right: calc(-.5 * var(--#{$prefix}toast-padding-x)); // stylelint-disable-line function-disallowed-list 66 | margin-left: var(--#{$prefix}toast-padding-x); 67 | } 68 | } 69 | 70 | .toast-body { 71 | padding: var(--#{$prefix}toast-padding-x); 72 | word-wrap: break-word; 73 | } 74 | -------------------------------------------------------------------------------- /assets/scss/bootstrap/_transitions.scss: -------------------------------------------------------------------------------- 1 | .fade { 2 | @include transition($transition-fade); 3 | 4 | &:not(.show) { 5 | opacity: 0; 6 | } 7 | } 8 | 9 | // scss-docs-start collapse-classes 10 | .collapse { 11 | &:not(.show) { 12 | display: none; 13 | } 14 | } 15 | 16 | .collapsing { 17 | height: 0; 18 | overflow: hidden; 19 | @include transition($transition-collapse); 20 | 21 | &.collapse-horizontal { 22 | width: 0; 23 | height: auto; 24 | @include transition($transition-collapse-width); 25 | } 26 | } 27 | // scss-docs-end collapse-classes 28 | -------------------------------------------------------------------------------- /assets/scss/bootstrap/_type.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Headings 3 | // 4 | .h1 { 5 | @extend h1; 6 | } 7 | 8 | .h2 { 9 | @extend h2; 10 | } 11 | 12 | .h3 { 13 | @extend h3; 14 | } 15 | 16 | .h4 { 17 | @extend h4; 18 | } 19 | 20 | .h5 { 21 | @extend h5; 22 | } 23 | 24 | .h6 { 25 | @extend h6; 26 | } 27 | 28 | 29 | .lead { 30 | @include font-size($lead-font-size); 31 | font-weight: $lead-font-weight; 32 | } 33 | 34 | // Type display classes 35 | @each $display, $font-size in $display-font-sizes { 36 | .display-#{$display} { 37 | @include font-size($font-size); 38 | font-family: $display-font-family; 39 | font-style: $display-font-style; 40 | font-weight: $display-font-weight; 41 | line-height: $display-line-height; 42 | } 43 | } 44 | 45 | // 46 | // Emphasis 47 | // 48 | .small { 49 | @extend small; 50 | } 51 | 52 | .mark { 53 | @extend mark; 54 | } 55 | 56 | // 57 | // Lists 58 | // 59 | 60 | .list-unstyled { 61 | @include list-unstyled(); 62 | } 63 | 64 | // Inline turns list items into inline-block 65 | .list-inline { 66 | @include list-unstyled(); 67 | } 68 | .list-inline-item { 69 | display: inline-block; 70 | 71 | &:not(:last-child) { 72 | margin-right: $list-inline-padding; 73 | } 74 | } 75 | 76 | 77 | // 78 | // Misc 79 | // 80 | 81 | // Builds on `abbr` 82 | .initialism { 83 | @include font-size($initialism-font-size); 84 | text-transform: uppercase; 85 | } 86 | 87 | // Blockquotes 88 | .blockquote { 89 | margin-bottom: $blockquote-margin-y; 90 | @include font-size($blockquote-font-size); 91 | 92 | > :last-child { 93 | margin-bottom: 0; 94 | } 95 | } 96 | 97 | .blockquote-footer { 98 | margin-top: -$blockquote-margin-y; 99 | margin-bottom: $blockquote-margin-y; 100 | @include font-size($blockquote-footer-font-size); 101 | color: $blockquote-footer-color; 102 | 103 | &::before { 104 | content: "\2014\00A0"; // em dash, nbsp 105 | } 106 | } 107 | -------------------------------------------------------------------------------- /assets/scss/bootstrap/bootstrap-grid.scss: -------------------------------------------------------------------------------- 1 | @import "mixins/banner"; 2 | @include bsBanner(Grid); 3 | 4 | $include-column-box-sizing: true !default; 5 | 6 | @import "functions"; 7 | @import "variables"; 8 | @import "variables-dark"; 9 | @import "maps"; 10 | 11 | @import "mixins/breakpoints"; 12 | @import "mixins/container"; 13 | @import "mixins/grid"; 14 | @import "mixins/utilities"; 15 | 16 | @import "vendor/rfs"; 17 | 18 | @import "containers"; 19 | @import "grid"; 20 | 21 | @import "utilities"; 22 | // Only use the utilities we need 23 | // stylelint-disable-next-line scss/dollar-variable-default 24 | $utilities: map-get-multiple( 25 | $utilities, 26 | ( 27 | "display", 28 | "order", 29 | "flex", 30 | "flex-direction", 31 | "flex-grow", 32 | "flex-shrink", 33 | "flex-wrap", 34 | "justify-content", 35 | "align-items", 36 | "align-content", 37 | "align-self", 38 | "margin", 39 | "margin-x", 40 | "margin-y", 41 | "margin-top", 42 | "margin-end", 43 | "margin-bottom", 44 | "margin-start", 45 | "negative-margin", 46 | "negative-margin-x", 47 | "negative-margin-y", 48 | "negative-margin-top", 49 | "negative-margin-end", 50 | "negative-margin-bottom", 51 | "negative-margin-start", 52 | "padding", 53 | "padding-x", 54 | "padding-y", 55 | "padding-top", 56 | "padding-end", 57 | "padding-bottom", 58 | "padding-start", 59 | ) 60 | ); 61 | 62 | @import "utilities/api"; 63 | -------------------------------------------------------------------------------- /assets/scss/bootstrap/bootstrap-reboot.scss: -------------------------------------------------------------------------------- 1 | @import "mixins/banner"; 2 | @include bsBanner(Reboot); 3 | 4 | @import "functions"; 5 | @import "variables"; 6 | @import "variables-dark"; 7 | @import "maps"; 8 | @import "mixins"; 9 | @import "root"; 10 | @import "reboot"; 11 | -------------------------------------------------------------------------------- /assets/scss/bootstrap/bootstrap-utilities.scss: -------------------------------------------------------------------------------- 1 | @import "mixins/banner"; 2 | @include bsBanner(Utilities); 3 | 4 | // Configuration 5 | @import "functions"; 6 | @import "variables"; 7 | @import "variables-dark"; 8 | @import "maps"; 9 | @import "mixins"; 10 | @import "utilities"; 11 | 12 | // Layout & components 13 | @import "root"; 14 | 15 | // Helpers 16 | @import "helpers"; 17 | 18 | // Utilities 19 | @import "utilities/api"; 20 | -------------------------------------------------------------------------------- /assets/scss/bootstrap/bootstrap.scss: -------------------------------------------------------------------------------- 1 | @import "mixins/banner"; 2 | @include bsBanner(""); 3 | 4 | 5 | // scss-docs-start import-stack 6 | // Configuration 7 | @import "functions"; 8 | @import "variables"; 9 | @import "variables-dark"; 10 | @import "maps"; 11 | @import "mixins"; 12 | @import "utilities"; 13 | 14 | // Layout & components 15 | @import "root"; 16 | @import "reboot"; 17 | @import "type"; 18 | @import "images"; 19 | @import "containers"; 20 | @import "grid"; 21 | @import "tables"; 22 | @import "forms"; 23 | @import "buttons"; 24 | @import "transitions"; 25 | @import "dropdown"; 26 | @import "button-group"; 27 | @import "nav"; 28 | @import "navbar"; 29 | @import "card"; 30 | @import "accordion"; 31 | @import "breadcrumb"; 32 | @import "pagination"; 33 | @import "badge"; 34 | @import "alert"; 35 | @import "progress"; 36 | @import "list-group"; 37 | @import "close"; 38 | @import "toasts"; 39 | @import "modal"; 40 | @import "tooltip"; 41 | @import "popover"; 42 | @import "carousel"; 43 | @import "spinners"; 44 | @import "offcanvas"; 45 | @import "placeholders"; 46 | 47 | // Helpers 48 | @import "helpers"; 49 | 50 | // Utilities 51 | @import "utilities/api"; 52 | // scss-docs-end import-stack 53 | -------------------------------------------------------------------------------- /assets/scss/bootstrap/forms/_floating-labels.scss: -------------------------------------------------------------------------------- 1 | .form-floating { 2 | position: relative; 3 | 4 | > .form-control, 5 | > .form-control-plaintext, 6 | > .form-select { 7 | height: $form-floating-height; 8 | min-height: $form-floating-height; 9 | line-height: $form-floating-line-height; 10 | } 11 | 12 | > label { 13 | position: absolute; 14 | top: 0; 15 | left: 0; 16 | z-index: 2; 17 | height: 100%; // allow textareas 18 | padding: $form-floating-padding-y $form-floating-padding-x; 19 | overflow: hidden; 20 | text-align: start; 21 | text-overflow: ellipsis; 22 | white-space: nowrap; 23 | pointer-events: none; 24 | border: $input-border-width solid transparent; // Required for aligning label's text with the input as it affects inner box model 25 | transform-origin: 0 0; 26 | @include transition($form-floating-transition); 27 | } 28 | 29 | > .form-control, 30 | > .form-control-plaintext { 31 | padding: $form-floating-padding-y $form-floating-padding-x; 32 | 33 | &::placeholder { 34 | color: transparent; 35 | } 36 | 37 | &:focus, 38 | &:not(:placeholder-shown) { 39 | padding-top: $form-floating-input-padding-t; 40 | padding-bottom: $form-floating-input-padding-b; 41 | } 42 | // Duplicated because `:-webkit-autofill` invalidates other selectors when grouped 43 | &:-webkit-autofill { 44 | padding-top: $form-floating-input-padding-t; 45 | padding-bottom: $form-floating-input-padding-b; 46 | } 47 | } 48 | 49 | > .form-select { 50 | padding-top: $form-floating-input-padding-t; 51 | padding-bottom: $form-floating-input-padding-b; 52 | } 53 | 54 | > .form-control:focus, 55 | > .form-control:not(:placeholder-shown), 56 | > .form-control-plaintext, 57 | > .form-select { 58 | ~ label { 59 | color: rgba(var(--#{$prefix}body-color-rgb), #{$form-floating-label-opacity}); 60 | transform: $form-floating-label-transform; 61 | 62 | &::after { 63 | position: absolute; 64 | inset: $form-floating-padding-y ($form-floating-padding-x * .5); 65 | z-index: -1; 66 | height: $form-floating-label-height; 67 | content: ""; 68 | background-color: $input-bg; 69 | @include border-radius($input-border-radius); 70 | } 71 | } 72 | } 73 | // Duplicated because `:-webkit-autofill` invalidates other selectors when grouped 74 | > .form-control:-webkit-autofill { 75 | ~ label { 76 | color: rgba(var(--#{$prefix}body-color-rgb), #{$form-floating-label-opacity}); 77 | transform: $form-floating-label-transform; 78 | } 79 | } 80 | 81 | > .form-control-plaintext { 82 | ~ label { 83 | border-width: $input-border-width 0; // Required to properly position label text - as explained above 84 | } 85 | } 86 | 87 | > :disabled ~ label { 88 | color: $form-floating-label-disabled-color; 89 | 90 | &::after { 91 | background-color: $input-disabled-bg; 92 | } 93 | } 94 | } 95 | -------------------------------------------------------------------------------- /assets/scss/bootstrap/forms/_form-range.scss: -------------------------------------------------------------------------------- 1 | // Range 2 | // 3 | // Style range inputs the same across browsers. Vendor-specific rules for pseudo 4 | // elements cannot be mixed. As such, there are no shared styles for focus or 5 | // active states on prefixed selectors. 6 | 7 | .form-range { 8 | width: 100%; 9 | height: add($form-range-thumb-height, $form-range-thumb-focus-box-shadow-width * 2); 10 | padding: 0; // Need to reset padding 11 | background-color: transparent; 12 | appearance: none; 13 | 14 | &:focus { 15 | outline: 0; 16 | 17 | // Pseudo-elements must be split across multiple rulesets to have an effect. 18 | // No box-shadow() mixin for focus accessibility. 19 | &::-webkit-slider-thumb { box-shadow: $form-range-thumb-focus-box-shadow; } 20 | &::-moz-range-thumb { box-shadow: $form-range-thumb-focus-box-shadow; } 21 | } 22 | 23 | &::-moz-focus-outer { 24 | border: 0; 25 | } 26 | 27 | &::-webkit-slider-thumb { 28 | width: $form-range-thumb-width; 29 | height: $form-range-thumb-height; 30 | margin-top: ($form-range-track-height - $form-range-thumb-height) * .5; // Webkit specific 31 | @include gradient-bg($form-range-thumb-bg); 32 | border: $form-range-thumb-border; 33 | @include border-radius($form-range-thumb-border-radius); 34 | @include box-shadow($form-range-thumb-box-shadow); 35 | @include transition($form-range-thumb-transition); 36 | appearance: none; 37 | 38 | &:active { 39 | @include gradient-bg($form-range-thumb-active-bg); 40 | } 41 | } 42 | 43 | &::-webkit-slider-runnable-track { 44 | width: $form-range-track-width; 45 | height: $form-range-track-height; 46 | color: transparent; // Why? 47 | cursor: $form-range-track-cursor; 48 | background-color: $form-range-track-bg; 49 | border-color: transparent; 50 | @include border-radius($form-range-track-border-radius); 51 | @include box-shadow($form-range-track-box-shadow); 52 | } 53 | 54 | &::-moz-range-thumb { 55 | width: $form-range-thumb-width; 56 | height: $form-range-thumb-height; 57 | @include gradient-bg($form-range-thumb-bg); 58 | border: $form-range-thumb-border; 59 | @include border-radius($form-range-thumb-border-radius); 60 | @include box-shadow($form-range-thumb-box-shadow); 61 | @include transition($form-range-thumb-transition); 62 | appearance: none; 63 | 64 | &:active { 65 | @include gradient-bg($form-range-thumb-active-bg); 66 | } 67 | } 68 | 69 | &::-moz-range-track { 70 | width: $form-range-track-width; 71 | height: $form-range-track-height; 72 | color: transparent; 73 | cursor: $form-range-track-cursor; 74 | background-color: $form-range-track-bg; 75 | border-color: transparent; // Firefox specific? 76 | @include border-radius($form-range-track-border-radius); 77 | @include box-shadow($form-range-track-box-shadow); 78 | } 79 | 80 | &:disabled { 81 | pointer-events: none; 82 | 83 | &::-webkit-slider-thumb { 84 | background-color: $form-range-thumb-disabled-bg; 85 | } 86 | 87 | &::-moz-range-thumb { 88 | background-color: $form-range-thumb-disabled-bg; 89 | } 90 | } 91 | } 92 | -------------------------------------------------------------------------------- /assets/scss/bootstrap/forms/_form-select.scss: -------------------------------------------------------------------------------- 1 | // Select 2 | // 3 | // Replaces the browser default select with a custom one, mostly pulled from 4 | // https://primer.github.io/. 5 | 6 | .form-select { 7 | --#{$prefix}form-select-bg-img: #{escape-svg($form-select-indicator)}; 8 | 9 | display: block; 10 | width: 100%; 11 | padding: $form-select-padding-y $form-select-indicator-padding $form-select-padding-y $form-select-padding-x; 12 | font-family: $form-select-font-family; 13 | @include font-size($form-select-font-size); 14 | font-weight: $form-select-font-weight; 15 | line-height: $form-select-line-height; 16 | color: $form-select-color; 17 | background-color: $form-select-bg; 18 | background-image: var(--#{$prefix}form-select-bg-img), var(--#{$prefix}form-select-bg-icon, none); 19 | background-repeat: no-repeat; 20 | background-position: $form-select-bg-position; 21 | background-size: $form-select-bg-size; 22 | border: $form-select-border-width solid $form-select-border-color; 23 | @include border-radius($form-select-border-radius, 0); 24 | @include box-shadow($form-select-box-shadow); 25 | @include transition($form-select-transition); 26 | appearance: none; 27 | 28 | &:focus { 29 | border-color: $form-select-focus-border-color; 30 | outline: 0; 31 | @if $enable-shadows { 32 | @include box-shadow($form-select-box-shadow, $form-select-focus-box-shadow); 33 | } @else { 34 | // Avoid using mixin so we can pass custom focus shadow properly 35 | box-shadow: $form-select-focus-box-shadow; 36 | } 37 | } 38 | 39 | &[multiple], 40 | &[size]:not([size="1"]) { 41 | padding-right: $form-select-padding-x; 42 | background-image: none; 43 | } 44 | 45 | &:disabled { 46 | color: $form-select-disabled-color; 47 | background-color: $form-select-disabled-bg; 48 | border-color: $form-select-disabled-border-color; 49 | } 50 | 51 | // Remove outline from select box in FF 52 | &:-moz-focusring { 53 | color: transparent; 54 | text-shadow: 0 0 0 $form-select-color; 55 | } 56 | } 57 | 58 | .form-select-sm { 59 | padding-top: $form-select-padding-y-sm; 60 | padding-bottom: $form-select-padding-y-sm; 61 | padding-left: $form-select-padding-x-sm; 62 | @include font-size($form-select-font-size-sm); 63 | @include border-radius($form-select-border-radius-sm); 64 | } 65 | 66 | .form-select-lg { 67 | padding-top: $form-select-padding-y-lg; 68 | padding-bottom: $form-select-padding-y-lg; 69 | padding-left: $form-select-padding-x-lg; 70 | @include font-size($form-select-font-size-lg); 71 | @include border-radius($form-select-border-radius-lg); 72 | } 73 | 74 | @if $enable-dark-mode { 75 | @include color-mode(dark) { 76 | .form-select { 77 | --#{$prefix}form-select-bg-img: #{escape-svg($form-select-indicator-dark)}; 78 | } 79 | } 80 | } 81 | -------------------------------------------------------------------------------- /assets/scss/bootstrap/forms/_form-text.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Form text 3 | // 4 | 5 | .form-text { 6 | margin-top: $form-text-margin-top; 7 | @include font-size($form-text-font-size); 8 | font-style: $form-text-font-style; 9 | font-weight: $form-text-font-weight; 10 | color: $form-text-color; 11 | } 12 | -------------------------------------------------------------------------------- /assets/scss/bootstrap/forms/_labels.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Labels 3 | // 4 | 5 | .form-label { 6 | margin-bottom: $form-label-margin-bottom; 7 | @include font-size($form-label-font-size); 8 | font-style: $form-label-font-style; 9 | font-weight: $form-label-font-weight; 10 | color: $form-label-color; 11 | } 12 | 13 | // For use with horizontal and inline forms, when you need the label (or legend) 14 | // text to align with the form controls. 15 | .col-form-label { 16 | padding-top: add($input-padding-y, $input-border-width); 17 | padding-bottom: add($input-padding-y, $input-border-width); 18 | margin-bottom: 0; // Override the `` default 19 | @include font-size(inherit); // Override the `` default 20 | font-style: $form-label-font-style; 21 | font-weight: $form-label-font-weight; 22 | line-height: $input-line-height; 23 | color: $form-label-color; 24 | } 25 | 26 | .col-form-label-lg { 27 | padding-top: add($input-padding-y-lg, $input-border-width); 28 | padding-bottom: add($input-padding-y-lg, $input-border-width); 29 | @include font-size($input-font-size-lg); 30 | } 31 | 32 | .col-form-label-sm { 33 | padding-top: add($input-padding-y-sm, $input-border-width); 34 | padding-bottom: add($input-padding-y-sm, $input-border-width); 35 | @include font-size($input-font-size-sm); 36 | } 37 | -------------------------------------------------------------------------------- /assets/scss/bootstrap/forms/_validation.scss: -------------------------------------------------------------------------------- 1 | // Form validation 2 | // 3 | // Provide feedback to users when form field values are valid or invalid. Works 4 | // primarily for client-side validation via scoped `:invalid` and `:valid` 5 | // pseudo-classes but also includes `.is-invalid` and `.is-valid` classes for 6 | // server-side validation. 7 | 8 | // scss-docs-start form-validation-states-loop 9 | @each $state, $data in $form-validation-states { 10 | @include form-validation-state($state, $data...); 11 | } 12 | // scss-docs-end form-validation-states-loop 13 | -------------------------------------------------------------------------------- /assets/scss/bootstrap/helpers/_clearfix.scss: -------------------------------------------------------------------------------- 1 | .clearfix { 2 | @include clearfix(); 3 | } 4 | -------------------------------------------------------------------------------- /assets/scss/bootstrap/helpers/_color-bg.scss: -------------------------------------------------------------------------------- 1 | // All-caps `RGBA()` function used because of this Sass bug: https://github.com/sass/node-sass/issues/2251 2 | @each $color, $value in $theme-colors { 3 | $color-rgb: to-rgb($value); 4 | .text-bg-#{$color} { 5 | color: color-contrast($value) if($enable-important-utilities, !important, null); 6 | background-color: RGBA($color-rgb, var(--#{$prefix}bg-opacity, 1)) if($enable-important-utilities, !important, null); 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /assets/scss/bootstrap/helpers/_colored-links.scss: -------------------------------------------------------------------------------- 1 | // All-caps `RGBA()` function used because of this Sass bug: https://github.com/sass/node-sass/issues/2251 2 | @each $color, $value in $theme-colors { 3 | .link-#{$color} { 4 | color: RGBA(var(--#{$prefix}#{$color}-rgb), var(--#{$prefix}link-opacity, 1)) if($enable-important-utilities, !important, null); 5 | text-decoration-color: RGBA(var(--#{$prefix}#{$color}-rgb), var(--#{$prefix}link-underline-opacity, 1)) if($enable-important-utilities, !important, null); 6 | 7 | @if $link-shade-percentage != 0 { 8 | &:hover, 9 | &:focus { 10 | $hover-color: if(color-contrast($value) == $color-contrast-light, shade-color($value, $link-shade-percentage), tint-color($value, $link-shade-percentage)); 11 | color: RGBA(#{to-rgb($hover-color)}, var(--#{$prefix}link-opacity, 1)) if($enable-important-utilities, !important, null); 12 | text-decoration-color: RGBA(to-rgb($hover-color), var(--#{$prefix}link-underline-opacity, 1)) if($enable-important-utilities, !important, null); 13 | } 14 | } 15 | } 16 | } 17 | 18 | // One-off special link helper as a bridge until v6 19 | .link-body-emphasis { 20 | color: RGBA(var(--#{$prefix}emphasis-color-rgb), var(--#{$prefix}link-opacity, 1)) if($enable-important-utilities, !important, null); 21 | text-decoration-color: RGBA(var(--#{$prefix}emphasis-color-rgb), var(--#{$prefix}link-underline-opacity, 1)) if($enable-important-utilities, !important, null); 22 | 23 | @if $link-shade-percentage != 0 { 24 | &:hover, 25 | &:focus { 26 | color: RGBA(var(--#{$prefix}emphasis-color-rgb), var(--#{$prefix}link-opacity, .75)) if($enable-important-utilities, !important, null); 27 | text-decoration-color: RGBA(var(--#{$prefix}emphasis-color-rgb), var(--#{$prefix}link-underline-opacity, .75)) if($enable-important-utilities, !important, null); 28 | } 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /assets/scss/bootstrap/helpers/_focus-ring.scss: -------------------------------------------------------------------------------- 1 | .focus-ring:focus { 2 | outline: 0; 3 | // By default, there is no `--bs-focus-ring-x`, `--bs-focus-ring-y`, or `--bs-focus-ring-blur`, but we provide CSS variables with fallbacks to initial `0` values 4 | box-shadow: var(--#{$prefix}focus-ring-x, 0) var(--#{$prefix}focus-ring-y, 0) var(--#{$prefix}focus-ring-blur, 0) var(--#{$prefix}focus-ring-width) var(--#{$prefix}focus-ring-color); 5 | } 6 | -------------------------------------------------------------------------------- /assets/scss/bootstrap/helpers/_icon-link.scss: -------------------------------------------------------------------------------- 1 | .icon-link { 2 | display: inline-flex; 3 | gap: $icon-link-gap; 4 | align-items: center; 5 | text-decoration-color: rgba(var(--#{$prefix}link-color-rgb), var(--#{$prefix}link-opacity, .5)); 6 | text-underline-offset: $icon-link-underline-offset; 7 | backface-visibility: hidden; 8 | 9 | > .bi { 10 | flex-shrink: 0; 11 | width: $icon-link-icon-size; 12 | height: $icon-link-icon-size; 13 | fill: currentcolor; 14 | @include transition($icon-link-icon-transition); 15 | } 16 | } 17 | 18 | .icon-link-hover { 19 | &:hover, 20 | &:focus-visible { 21 | > .bi { 22 | transform: var(--#{$prefix}icon-link-transform, $icon-link-icon-transform); 23 | } 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /assets/scss/bootstrap/helpers/_position.scss: -------------------------------------------------------------------------------- 1 | // Shorthand 2 | 3 | .fixed-top { 4 | position: fixed; 5 | top: 0; 6 | right: 0; 7 | left: 0; 8 | z-index: $zindex-fixed; 9 | } 10 | 11 | .fixed-bottom { 12 | position: fixed; 13 | right: 0; 14 | bottom: 0; 15 | left: 0; 16 | z-index: $zindex-fixed; 17 | } 18 | 19 | // Responsive sticky top and bottom 20 | @each $breakpoint in map-keys($grid-breakpoints) { 21 | @include media-breakpoint-up($breakpoint) { 22 | $infix: breakpoint-infix($breakpoint, $grid-breakpoints); 23 | 24 | .sticky#{$infix}-top { 25 | position: sticky; 26 | top: 0; 27 | z-index: $zindex-sticky; 28 | } 29 | 30 | .sticky#{$infix}-bottom { 31 | position: sticky; 32 | bottom: 0; 33 | z-index: $zindex-sticky; 34 | } 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /assets/scss/bootstrap/helpers/_ratio.scss: -------------------------------------------------------------------------------- 1 | // Credit: Nicolas Gallagher and SUIT CSS. 2 | 3 | .ratio { 4 | position: relative; 5 | width: 100%; 6 | 7 | &::before { 8 | display: block; 9 | padding-top: var(--#{$prefix}aspect-ratio); 10 | content: ""; 11 | } 12 | 13 | > * { 14 | position: absolute; 15 | top: 0; 16 | left: 0; 17 | width: 100%; 18 | height: 100%; 19 | } 20 | } 21 | 22 | @each $key, $ratio in $aspect-ratios { 23 | .ratio-#{$key} { 24 | --#{$prefix}aspect-ratio: #{$ratio}; 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /assets/scss/bootstrap/helpers/_stacks.scss: -------------------------------------------------------------------------------- 1 | // scss-docs-start stacks 2 | .hstack { 3 | display: flex; 4 | flex-direction: row; 5 | align-items: center; 6 | align-self: stretch; 7 | } 8 | 9 | .vstack { 10 | display: flex; 11 | flex: 1 1 auto; 12 | flex-direction: column; 13 | align-self: stretch; 14 | } 15 | // scss-docs-end stacks 16 | -------------------------------------------------------------------------------- /assets/scss/bootstrap/helpers/_stretched-link.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Stretched link 3 | // 4 | 5 | .stretched-link { 6 | &::#{$stretched-link-pseudo-element} { 7 | position: absolute; 8 | top: 0; 9 | right: 0; 10 | bottom: 0; 11 | left: 0; 12 | z-index: $stretched-link-z-index; 13 | content: ""; 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /assets/scss/bootstrap/helpers/_text-truncation.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Text truncation 3 | // 4 | 5 | .text-truncate { 6 | @include text-truncate(); 7 | } 8 | -------------------------------------------------------------------------------- /assets/scss/bootstrap/helpers/_visually-hidden.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Visually hidden 3 | // 4 | 5 | .visually-hidden, 6 | .visually-hidden-focusable:not(:focus):not(:focus-within) { 7 | @include visually-hidden(); 8 | } 9 | -------------------------------------------------------------------------------- /assets/scss/bootstrap/helpers/_vr.scss: -------------------------------------------------------------------------------- 1 | .vr { 2 | display: inline-block; 3 | align-self: stretch; 4 | width: 1px; 5 | min-height: 1em; 6 | background-color: currentcolor; 7 | opacity: $hr-opacity; 8 | } 9 | -------------------------------------------------------------------------------- /assets/scss/bootstrap/mixins/_alert.scss: -------------------------------------------------------------------------------- 1 | @include deprecate("`alert-variant()`", "v5.3.0", "v6.0.0"); 2 | 3 | // scss-docs-start alert-variant-mixin 4 | @mixin alert-variant($background, $border, $color) { 5 | --#{$prefix}alert-color: #{$color}; 6 | --#{$prefix}alert-bg: #{$background}; 7 | --#{$prefix}alert-border-color: #{$border}; 8 | --#{$prefix}alert-link-color: #{shade-color($color, 20%)}; 9 | 10 | @if $enable-gradients { 11 | background-image: var(--#{$prefix}gradient); 12 | } 13 | 14 | .alert-link { 15 | color: var(--#{$prefix}alert-link-color); 16 | } 17 | } 18 | // scss-docs-end alert-variant-mixin 19 | -------------------------------------------------------------------------------- /assets/scss/bootstrap/mixins/_backdrop.scss: -------------------------------------------------------------------------------- 1 | // Shared between modals and offcanvases 2 | @mixin overlay-backdrop($zindex, $backdrop-bg, $backdrop-opacity) { 3 | position: fixed; 4 | top: 0; 5 | left: 0; 6 | z-index: $zindex; 7 | width: 100vw; 8 | height: 100vh; 9 | background-color: $backdrop-bg; 10 | 11 | // Fade for backdrop 12 | &.fade { opacity: 0; } 13 | &.show { opacity: $backdrop-opacity; } 14 | } 15 | -------------------------------------------------------------------------------- /assets/scss/bootstrap/mixins/_banner.scss: -------------------------------------------------------------------------------- 1 | @mixin bsBanner($file) { 2 | /*! 3 | * Bootstrap #{$file} v5.3.0 (https://getbootstrap.com/) 4 | * Copyright 2011-2023 The Bootstrap Authors 5 | * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE) 6 | */ 7 | } 8 | -------------------------------------------------------------------------------- /assets/scss/bootstrap/mixins/_border-radius.scss: -------------------------------------------------------------------------------- 1 | // stylelint-disable property-disallowed-list 2 | // Single side border-radius 3 | 4 | // Helper function to replace negative values with 0 5 | @function valid-radius($radius) { 6 | $return: (); 7 | @each $value in $radius { 8 | @if type-of($value) == number { 9 | $return: append($return, max($value, 0)); 10 | } @else { 11 | $return: append($return, $value); 12 | } 13 | } 14 | @return $return; 15 | } 16 | 17 | // scss-docs-start border-radius-mixins 18 | @mixin border-radius($radius: $border-radius, $fallback-border-radius: false) { 19 | @if $enable-rounded { 20 | border-radius: valid-radius($radius); 21 | } 22 | @else if $fallback-border-radius != false { 23 | border-radius: $fallback-border-radius; 24 | } 25 | } 26 | 27 | @mixin border-top-radius($radius: $border-radius) { 28 | @if $enable-rounded { 29 | border-top-left-radius: valid-radius($radius); 30 | border-top-right-radius: valid-radius($radius); 31 | } 32 | } 33 | 34 | @mixin border-end-radius($radius: $border-radius) { 35 | @if $enable-rounded { 36 | border-top-right-radius: valid-radius($radius); 37 | border-bottom-right-radius: valid-radius($radius); 38 | } 39 | } 40 | 41 | @mixin border-bottom-radius($radius: $border-radius) { 42 | @if $enable-rounded { 43 | border-bottom-right-radius: valid-radius($radius); 44 | border-bottom-left-radius: valid-radius($radius); 45 | } 46 | } 47 | 48 | @mixin border-start-radius($radius: $border-radius) { 49 | @if $enable-rounded { 50 | border-top-left-radius: valid-radius($radius); 51 | border-bottom-left-radius: valid-radius($radius); 52 | } 53 | } 54 | 55 | @mixin border-top-start-radius($radius: $border-radius) { 56 | @if $enable-rounded { 57 | border-top-left-radius: valid-radius($radius); 58 | } 59 | } 60 | 61 | @mixin border-top-end-radius($radius: $border-radius) { 62 | @if $enable-rounded { 63 | border-top-right-radius: valid-radius($radius); 64 | } 65 | } 66 | 67 | @mixin border-bottom-end-radius($radius: $border-radius) { 68 | @if $enable-rounded { 69 | border-bottom-right-radius: valid-radius($radius); 70 | } 71 | } 72 | 73 | @mixin border-bottom-start-radius($radius: $border-radius) { 74 | @if $enable-rounded { 75 | border-bottom-left-radius: valid-radius($radius); 76 | } 77 | } 78 | // scss-docs-end border-radius-mixins 79 | -------------------------------------------------------------------------------- /assets/scss/bootstrap/mixins/_box-shadow.scss: -------------------------------------------------------------------------------- 1 | @mixin box-shadow($shadow...) { 2 | @if $enable-shadows { 3 | $result: (); 4 | 5 | @each $value in $shadow { 6 | @if $value != null { 7 | $result: append($result, $value, "comma"); 8 | } 9 | @if $value == none and length($shadow) > 1 { 10 | @warn "The keyword 'none' must be used as a single argument."; 11 | } 12 | } 13 | 14 | @if (length($result) > 0) { 15 | box-shadow: $result; 16 | } 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /assets/scss/bootstrap/mixins/_caret.scss: -------------------------------------------------------------------------------- 1 | // scss-docs-start caret-mixins 2 | @mixin caret-down($width: $caret-width) { 3 | border-top: $width solid; 4 | border-right: $width solid transparent; 5 | border-bottom: 0; 6 | border-left: $width solid transparent; 7 | } 8 | 9 | @mixin caret-up($width: $caret-width) { 10 | border-top: 0; 11 | border-right: $width solid transparent; 12 | border-bottom: $width solid; 13 | border-left: $width solid transparent; 14 | } 15 | 16 | @mixin caret-end($width: $caret-width) { 17 | border-top: $width solid transparent; 18 | border-right: 0; 19 | border-bottom: $width solid transparent; 20 | border-left: $width solid; 21 | } 22 | 23 | @mixin caret-start($width: $caret-width) { 24 | border-top: $width solid transparent; 25 | border-right: $width solid; 26 | border-bottom: $width solid transparent; 27 | } 28 | 29 | @mixin caret( 30 | $direction: down, 31 | $width: $caret-width, 32 | $spacing: $caret-spacing, 33 | $vertical-align: $caret-vertical-align 34 | ) { 35 | @if $enable-caret { 36 | &::after { 37 | display: inline-block; 38 | margin-left: $spacing; 39 | vertical-align: $vertical-align; 40 | content: ""; 41 | @if $direction == down { 42 | @include caret-down($width); 43 | } @else if $direction == up { 44 | @include caret-up($width); 45 | } @else if $direction == end { 46 | @include caret-end($width); 47 | } 48 | } 49 | 50 | @if $direction == start { 51 | &::after { 52 | display: none; 53 | } 54 | 55 | &::before { 56 | display: inline-block; 57 | margin-right: $spacing; 58 | vertical-align: $vertical-align; 59 | content: ""; 60 | @include caret-start($width); 61 | } 62 | } 63 | 64 | &:empty::after { 65 | margin-left: 0; 66 | } 67 | } 68 | } 69 | // scss-docs-end caret-mixins 70 | -------------------------------------------------------------------------------- /assets/scss/bootstrap/mixins/_clearfix.scss: -------------------------------------------------------------------------------- 1 | // scss-docs-start clearfix 2 | @mixin clearfix() { 3 | &::after { 4 | display: block; 5 | clear: both; 6 | content: ""; 7 | } 8 | } 9 | // scss-docs-end clearfix 10 | -------------------------------------------------------------------------------- /assets/scss/bootstrap/mixins/_color-mode.scss: -------------------------------------------------------------------------------- 1 | // scss-docs-start color-mode-mixin 2 | @mixin color-mode($mode: light, $root: false) { 3 | @if $color-mode-type == "media-query" { 4 | @if $root == true { 5 | @media (prefers-color-scheme: $mode) { 6 | :root { 7 | @content; 8 | } 9 | } 10 | } @else { 11 | @media (prefers-color-scheme: $mode) { 12 | @content; 13 | } 14 | } 15 | } @else { 16 | [data-bs-theme="#{$mode}"] { 17 | @content; 18 | } 19 | } 20 | } 21 | // scss-docs-end color-mode-mixin 22 | -------------------------------------------------------------------------------- /assets/scss/bootstrap/mixins/_color-scheme.scss: -------------------------------------------------------------------------------- 1 | // scss-docs-start mixin-color-scheme 2 | @mixin color-scheme($name) { 3 | @media (prefers-color-scheme: #{$name}) { 4 | @content; 5 | } 6 | } 7 | // scss-docs-end mixin-color-scheme 8 | -------------------------------------------------------------------------------- /assets/scss/bootstrap/mixins/_container.scss: -------------------------------------------------------------------------------- 1 | // Container mixins 2 | 3 | @mixin make-container($gutter: $container-padding-x) { 4 | --#{$prefix}gutter-x: #{$gutter}; 5 | --#{$prefix}gutter-y: 0; 6 | width: 100%; 7 | padding-right: calc(var(--#{$prefix}gutter-x) * .5); // stylelint-disable-line function-disallowed-list 8 | padding-left: calc(var(--#{$prefix}gutter-x) * .5); // stylelint-disable-line function-disallowed-list 9 | margin-right: auto; 10 | margin-left: auto; 11 | } 12 | -------------------------------------------------------------------------------- /assets/scss/bootstrap/mixins/_deprecate.scss: -------------------------------------------------------------------------------- 1 | // Deprecate mixin 2 | // 3 | // This mixin can be used to deprecate mixins or functions. 4 | // `$enable-deprecation-messages` is a global variable, `$ignore-warning` is a variable that can be passed to 5 | // some deprecated mixins to suppress the warning (for example if the mixin is still be used in the current version of Bootstrap) 6 | @mixin deprecate($name, $deprecate-version, $remove-version, $ignore-warning: false) { 7 | @if ($enable-deprecation-messages != false and $ignore-warning != true) { 8 | @warn "#{$name} has been deprecated as of #{$deprecate-version}. It will be removed entirely in #{$remove-version}."; 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /assets/scss/bootstrap/mixins/_gradients.scss: -------------------------------------------------------------------------------- 1 | // Gradients 2 | 3 | // scss-docs-start gradient-bg-mixin 4 | @mixin gradient-bg($color: null) { 5 | background-color: $color; 6 | 7 | @if $enable-gradients { 8 | background-image: var(--#{$prefix}gradient); 9 | } 10 | } 11 | // scss-docs-end gradient-bg-mixin 12 | 13 | // scss-docs-start gradient-mixins 14 | // Horizontal gradient, from left to right 15 | // 16 | // Creates two color stops, start and end, by specifying a color and position for each color stop. 17 | @mixin gradient-x($start-color: $gray-700, $end-color: $gray-800, $start-percent: 0%, $end-percent: 100%) { 18 | background-image: linear-gradient(to right, $start-color $start-percent, $end-color $end-percent); 19 | } 20 | 21 | // Vertical gradient, from top to bottom 22 | // 23 | // Creates two color stops, start and end, by specifying a color and position for each color stop. 24 | @mixin gradient-y($start-color: $gray-700, $end-color: $gray-800, $start-percent: null, $end-percent: null) { 25 | background-image: linear-gradient(to bottom, $start-color $start-percent, $end-color $end-percent); 26 | } 27 | 28 | @mixin gradient-directional($start-color: $gray-700, $end-color: $gray-800, $deg: 45deg) { 29 | background-image: linear-gradient($deg, $start-color, $end-color); 30 | } 31 | 32 | @mixin gradient-x-three-colors($start-color: $blue, $mid-color: $purple, $color-stop: 50%, $end-color: $red) { 33 | background-image: linear-gradient(to right, $start-color, $mid-color $color-stop, $end-color); 34 | } 35 | 36 | @mixin gradient-y-three-colors($start-color: $blue, $mid-color: $purple, $color-stop: 50%, $end-color: $red) { 37 | background-image: linear-gradient($start-color, $mid-color $color-stop, $end-color); 38 | } 39 | 40 | @mixin gradient-radial($inner-color: $gray-700, $outer-color: $gray-800) { 41 | background-image: radial-gradient(circle, $inner-color, $outer-color); 42 | } 43 | 44 | @mixin gradient-striped($color: rgba($white, .15), $angle: 45deg) { 45 | background-image: linear-gradient($angle, $color 25%, transparent 25%, transparent 50%, $color 50%, $color 75%, transparent 75%, transparent); 46 | } 47 | // scss-docs-end gradient-mixins 48 | -------------------------------------------------------------------------------- /assets/scss/bootstrap/mixins/_image.scss: -------------------------------------------------------------------------------- 1 | // Image Mixins 2 | // - Responsive image 3 | // - Retina image 4 | 5 | 6 | // Responsive image 7 | // 8 | // Keep images from scaling beyond the width of their parents. 9 | 10 | @mixin img-fluid { 11 | // Part 1: Set a maximum relative to the parent 12 | max-width: 100%; 13 | // Part 2: Override the height to auto, otherwise images will be stretched 14 | // when setting a width and height attribute on the img element. 15 | height: auto; 16 | } 17 | -------------------------------------------------------------------------------- /assets/scss/bootstrap/mixins/_list-group.scss: -------------------------------------------------------------------------------- 1 | @include deprecate("`list-group-item-variant()`", "v5.3.0", "v6.0.0"); 2 | 3 | // List Groups 4 | 5 | // scss-docs-start list-group-mixin 6 | @mixin list-group-item-variant($state, $background, $color) { 7 | .list-group-item-#{$state} { 8 | color: $color; 9 | background-color: $background; 10 | 11 | &.list-group-item-action { 12 | &:hover, 13 | &:focus { 14 | color: $color; 15 | background-color: shade-color($background, 10%); 16 | } 17 | 18 | &.active { 19 | color: $white; 20 | background-color: $color; 21 | border-color: $color; 22 | } 23 | } 24 | } 25 | } 26 | // scss-docs-end list-group-mixin 27 | -------------------------------------------------------------------------------- /assets/scss/bootstrap/mixins/_lists.scss: -------------------------------------------------------------------------------- 1 | // Lists 2 | 3 | // Unstyled keeps list items block level, just removes default browser padding and list-style 4 | @mixin list-unstyled { 5 | padding-left: 0; 6 | list-style: none; 7 | } 8 | -------------------------------------------------------------------------------- /assets/scss/bootstrap/mixins/_pagination.scss: -------------------------------------------------------------------------------- 1 | // Pagination 2 | 3 | // scss-docs-start pagination-mixin 4 | @mixin pagination-size($padding-y, $padding-x, $font-size, $border-radius) { 5 | --#{$prefix}pagination-padding-x: #{$padding-x}; 6 | --#{$prefix}pagination-padding-y: #{$padding-y}; 7 | @include rfs($font-size, --#{$prefix}pagination-font-size); 8 | --#{$prefix}pagination-border-radius: #{$border-radius}; 9 | } 10 | // scss-docs-end pagination-mixin 11 | -------------------------------------------------------------------------------- /assets/scss/bootstrap/mixins/_reset-text.scss: -------------------------------------------------------------------------------- 1 | @mixin reset-text { 2 | font-family: $font-family-base; 3 | // We deliberately do NOT reset font-size or overflow-wrap / word-wrap. 4 | font-style: normal; 5 | font-weight: $font-weight-normal; 6 | line-height: $line-height-base; 7 | text-align: left; // Fallback for where `start` is not supported 8 | text-align: start; 9 | text-decoration: none; 10 | text-shadow: none; 11 | text-transform: none; 12 | letter-spacing: normal; 13 | word-break: normal; 14 | white-space: normal; 15 | word-spacing: normal; 16 | line-break: auto; 17 | } 18 | -------------------------------------------------------------------------------- /assets/scss/bootstrap/mixins/_resize.scss: -------------------------------------------------------------------------------- 1 | // Resize anything 2 | 3 | @mixin resizable($direction) { 4 | overflow: auto; // Per CSS3 UI, `resize` only applies when `overflow` isn't `visible` 5 | resize: $direction; // Options: horizontal, vertical, both 6 | } 7 | -------------------------------------------------------------------------------- /assets/scss/bootstrap/mixins/_table-variants.scss: -------------------------------------------------------------------------------- 1 | // scss-docs-start table-variant 2 | @mixin table-variant($state, $background) { 3 | .table-#{$state} { 4 | $color: color-contrast(opaque($body-bg, $background)); 5 | $hover-bg: mix($color, $background, percentage($table-hover-bg-factor)); 6 | $striped-bg: mix($color, $background, percentage($table-striped-bg-factor)); 7 | $active-bg: mix($color, $background, percentage($table-active-bg-factor)); 8 | $table-border-color: mix($color, $background, percentage($table-border-factor)); 9 | 10 | --#{$prefix}table-color: #{$color}; 11 | --#{$prefix}table-bg: #{$background}; 12 | --#{$prefix}table-border-color: #{$table-border-color}; 13 | --#{$prefix}table-striped-bg: #{$striped-bg}; 14 | --#{$prefix}table-striped-color: #{color-contrast($striped-bg)}; 15 | --#{$prefix}table-active-bg: #{$active-bg}; 16 | --#{$prefix}table-active-color: #{color-contrast($active-bg)}; 17 | --#{$prefix}table-hover-bg: #{$hover-bg}; 18 | --#{$prefix}table-hover-color: #{color-contrast($hover-bg)}; 19 | 20 | color: var(--#{$prefix}table-color); 21 | border-color: var(--#{$prefix}table-border-color); 22 | } 23 | } 24 | // scss-docs-end table-variant 25 | -------------------------------------------------------------------------------- /assets/scss/bootstrap/mixins/_text-truncate.scss: -------------------------------------------------------------------------------- 1 | // Text truncate 2 | // Requires inline-block or block for proper styling 3 | 4 | @mixin text-truncate() { 5 | overflow: hidden; 6 | text-overflow: ellipsis; 7 | white-space: nowrap; 8 | } 9 | -------------------------------------------------------------------------------- /assets/scss/bootstrap/mixins/_transition.scss: -------------------------------------------------------------------------------- 1 | // stylelint-disable property-disallowed-list 2 | @mixin transition($transition...) { 3 | @if length($transition) == 0 { 4 | $transition: $transition-base; 5 | } 6 | 7 | @if length($transition) > 1 { 8 | @each $value in $transition { 9 | @if $value == null or $value == none { 10 | @warn "The keyword 'none' or 'null' must be used as a single argument."; 11 | } 12 | } 13 | } 14 | 15 | @if $enable-transitions { 16 | @if nth($transition, 1) != null { 17 | transition: $transition; 18 | } 19 | 20 | @if $enable-reduced-motion and nth($transition, 1) != null and nth($transition, 1) != none { 21 | @media (prefers-reduced-motion: reduce) { 22 | transition: none; 23 | } 24 | } 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /assets/scss/bootstrap/mixins/_visually-hidden.scss: -------------------------------------------------------------------------------- 1 | // stylelint-disable declaration-no-important 2 | 3 | // Hide content visually while keeping it accessible to assistive technologies 4 | // 5 | // See: https://www.a11yproject.com/posts/2013-01-11-how-to-hide-content/ 6 | // See: https://kittygiraudel.com/2016/10/13/css-hide-and-seek/ 7 | 8 | @mixin visually-hidden() { 9 | width: 1px !important; 10 | height: 1px !important; 11 | padding: 0 !important; 12 | margin: -1px !important; // Fix for https://github.com/twbs/bootstrap/issues/25686 13 | overflow: hidden !important; 14 | clip: rect(0, 0, 0, 0) !important; 15 | white-space: nowrap !important; 16 | border: 0 !important; 17 | 18 | // Fix for positioned table caption that could become anonymous cells 19 | &:not(caption) { 20 | position: absolute !important; 21 | } 22 | } 23 | 24 | // Use to only display content when it's focused, or one of its child elements is focused 25 | // (i.e. when focus is within the element/container that the class was applied to) 26 | // 27 | // Useful for "Skip to main content" links; see https://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G1 28 | 29 | @mixin visually-hidden-focusable() { 30 | &:not(:focus):not(:focus-within) { 31 | @include visually-hidden(); 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /assets/scss/bootstrap/tests/jasmine.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable camelcase */ 2 | 3 | 'use strict' 4 | 5 | const path = require('node:path') 6 | 7 | module.exports = { 8 | spec_dir: 'scss', 9 | // Make Jasmine look for `.test.scss` files 10 | spec_files: ['**/*.{test,spec}.scss'], 11 | // Compile them into JS scripts running `sass-true` 12 | requires: [path.join(__dirname, 'sass-true/register')], 13 | // Ensure we use `require` so that the require.extensions works 14 | // as `import` completely bypasses it 15 | jsLoader: 'require' 16 | } 17 | -------------------------------------------------------------------------------- /assets/scss/bootstrap/tests/mixins/_color-modes.test.scss: -------------------------------------------------------------------------------- 1 | // stylelint-disable selector-attribute-quotes 2 | 3 | @import "../../functions"; 4 | @import "../../variables"; 5 | @import "../../variables-dark"; 6 | @import "../../maps"; 7 | @import "../../mixins"; 8 | 9 | @include describe("global $color-mode-type: data") { 10 | @include it("generates data attribute selectors for dark mode") { 11 | @include assert() { 12 | @include output() { 13 | @include color-mode(dark) { 14 | .element { 15 | color: var(--bs-primary-text-emphasis); 16 | background-color: var(--bs-primary-bg-subtle); 17 | } 18 | } 19 | @include color-mode(dark, true) { 20 | --custom-color: #{mix($indigo, $blue, 50%)}; 21 | } 22 | } 23 | @include expect() { 24 | [data-bs-theme=dark] .element { 25 | color: var(--bs-primary-text-emphasis); 26 | background-color: var(--bs-primary-bg-subtle); 27 | } 28 | [data-bs-theme=dark] { 29 | --custom-color: #3a3ff8; 30 | } 31 | } 32 | } 33 | } 34 | } 35 | 36 | @include describe("global $color-mode-type: media-query") { 37 | @include it("generates media queries for dark mode") { 38 | $color-mode-type: media-query !global; 39 | 40 | @include assert() { 41 | @include output() { 42 | @include color-mode(dark) { 43 | .element { 44 | color: var(--bs-primary-text-emphasis); 45 | background-color: var(--bs-primary-bg-subtle); 46 | } 47 | } 48 | @include color-mode(dark, true) { 49 | --custom-color: #{mix($indigo, $blue, 50%)}; 50 | } 51 | } 52 | @include expect() { 53 | @media (prefers-color-scheme: dark) { 54 | .element { 55 | color: var(--bs-primary-text-emphasis); 56 | background-color: var(--bs-primary-bg-subtle); 57 | } 58 | } 59 | @media (prefers-color-scheme: dark) { 60 | :root { 61 | --custom-color: #3a3ff8; 62 | } 63 | } 64 | } 65 | } 66 | 67 | $color-mode-type: data !global; 68 | } 69 | } 70 | -------------------------------------------------------------------------------- /assets/scss/bootstrap/tests/mixins/_media-query-color-mode-full.test.scss: -------------------------------------------------------------------------------- 1 | $color-mode-type: media-query; 2 | 3 | @import "../../bootstrap"; 4 | 5 | @include describe("global $color-mode-type: media-query") { 6 | @include it("compiles entirely Bootstrap CSS with media-query color mode") { // stylelint-disable-line block-no-empty 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /assets/scss/bootstrap/tests/sass-true/register.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | 3 | const path = require('node:path') 4 | 5 | const runnerPath = path.join(__dirname, 'runner').replace(/\\/g, '/') 6 | 7 | require.extensions['.scss'] = (module, filename) => { 8 | const normalizedFilename = filename.replace(/\\/g, '/') 9 | 10 | return module._compile(` 11 | const runner = require('${runnerPath}') 12 | runner('${normalizedFilename}', { describe, it }) 13 | `, filename) 14 | } 15 | -------------------------------------------------------------------------------- /assets/scss/bootstrap/tests/sass-true/runner.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | 3 | const fs = require('node:fs') 4 | const path = require('node:path') 5 | const { runSass } = require('sass-true') 6 | 7 | module.exports = (filename, { describe, it }) => { 8 | const data = fs.readFileSync(filename, 'utf8') 9 | const TRUE_SETUP = '$true-terminal-output: false; @import "true";' 10 | const sassString = TRUE_SETUP + data 11 | 12 | runSass( 13 | { describe, it, sourceType: 'string' }, 14 | sassString, 15 | { loadPaths: [path.dirname(filename)] } 16 | ) 17 | } 18 | -------------------------------------------------------------------------------- /assets/scss/bootstrap/tests/utilities/_api.test.scss: -------------------------------------------------------------------------------- 1 | @import "../../functions"; 2 | @import "../../variables"; 3 | @import "../../variables-dark"; 4 | @import "../../maps"; 5 | @import "../../mixins"; 6 | 7 | $utilities: (); 8 | 9 | @include describe("utilities/api") { 10 | @include it("generates utilities for each breakpoints") { 11 | $utilities: ( 12 | margin: ( 13 | property: margin, 14 | values: auto 15 | ), 16 | padding: ( 17 | property: padding, 18 | responsive: true, 19 | values: 1rem 20 | ), 21 | font-size: ( 22 | property: font-size, 23 | values: (large: 1.25rem), 24 | print: true 25 | ) 26 | ) !global; 27 | 28 | $grid-breakpoints: ( 29 | xs: 0, 30 | sm: 333px, 31 | md: 666px 32 | ) !global; 33 | 34 | @include assert() { 35 | @include output() { 36 | @import "../../utilities/api"; 37 | } 38 | 39 | @include expect() { 40 | // margin is not set to responsive 41 | .margin-auto { 42 | margin: auto !important; 43 | } 44 | 45 | // padding is, though 46 | .padding-1rem { 47 | padding: 1rem !important; 48 | } 49 | 50 | .font-size-large { 51 | font-size: 1.25rem !important; 52 | } 53 | 54 | @media (min-width: 333px) { 55 | .padding-sm-1rem { 56 | padding: 1rem !important; 57 | } 58 | } 59 | 60 | @media (min-width: 666px) { 61 | .padding-md-1rem { 62 | padding: 1rem !important; 63 | } 64 | } 65 | 66 | @media print { 67 | .font-size-print-large { 68 | font-size: 1.25rem !important; 69 | } 70 | } 71 | } 72 | 73 | } 74 | } 75 | } 76 | -------------------------------------------------------------------------------- /assets/scss/bootstrap/utilities/_api.scss: -------------------------------------------------------------------------------- 1 | // Loop over each breakpoint 2 | @each $breakpoint in map-keys($grid-breakpoints) { 3 | 4 | // Generate media query if needed 5 | @include media-breakpoint-up($breakpoint) { 6 | $infix: breakpoint-infix($breakpoint, $grid-breakpoints); 7 | 8 | // Loop over each utility property 9 | @each $key, $utility in $utilities { 10 | // The utility can be disabled with `false`, thus check if the utility is a map first 11 | // Only proceed if responsive media queries are enabled or if it's the base media query 12 | @if type-of($utility) == "map" and (map-get($utility, responsive) or $infix == "") { 13 | @include generate-utility($utility, $infix); 14 | } 15 | } 16 | } 17 | } 18 | 19 | // RFS rescaling 20 | @media (min-width: $rfs-mq-value) { 21 | @each $breakpoint in map-keys($grid-breakpoints) { 22 | $infix: breakpoint-infix($breakpoint, $grid-breakpoints); 23 | 24 | @if (map-get($grid-breakpoints, $breakpoint) < $rfs-breakpoint) { 25 | // Loop over each utility property 26 | @each $key, $utility in $utilities { 27 | // The utility can be disabled with `false`, thus check if the utility is a map first 28 | // Only proceed if responsive media queries are enabled or if it's the base media query 29 | @if type-of($utility) == "map" and map-get($utility, rfs) and (map-get($utility, responsive) or $infix == "") { 30 | @include generate-utility($utility, $infix, true); 31 | } 32 | } 33 | } 34 | } 35 | } 36 | 37 | 38 | // Print utilities 39 | @media print { 40 | @each $key, $utility in $utilities { 41 | // The utility can be disabled with `false`, thus check if the utility is a map first 42 | // Then check if the utility needs print styles 43 | @if type-of($utility) == "map" and map-get($utility, print) == true { 44 | @include generate-utility($utility, "-print"); 45 | } 46 | } 47 | } 48 | -------------------------------------------------------------------------------- /assets/scss/components/_bg.scss: -------------------------------------------------------------------------------- 1 | .bg-contain { 2 | background-size: contain; 3 | } 4 | .bg-cover { 5 | background-size: cover; 6 | } 7 | .bg-position-center { 8 | background-position: center; 9 | } 10 | .bg-position-bottom { 11 | background-position: bottom; 12 | } 13 | .bg-position-top { 14 | background-position: top; 15 | } 16 | .bg-overlay { 17 | background-blend-mode: overlay; 18 | } 19 | .bg-primary { 20 | background-color: $primary; 21 | } 22 | .bg-secondary { 23 | background-color: $secondary; 24 | } 25 | -------------------------------------------------------------------------------- /assets/scss/components/_buttons.scss: -------------------------------------------------------------------------------- 1 | .button { 2 | white-space: nowrap; 3 | display: inline-block; 4 | padding: 7px 15px; 5 | background: $primary; 6 | font-size: 15px; 7 | font-weight: 600; 8 | text-transform: uppercase; 9 | letter-spacing: 0.025em; 10 | color: #fff; 11 | text-decoration: none; 12 | -webkit-transition: all 0.15s ease; 13 | transition: all 0.15s ease; 14 | &:hover { 15 | color: #fff; 16 | background-color: lighten($primary, 10%); 17 | text-decoration: none; 18 | } 19 | } 20 | .button-white { 21 | background: none; 22 | color: #fff; 23 | border: 2px solid #fff; 24 | } 25 | -------------------------------------------------------------------------------- /assets/scss/components/_call.scss: -------------------------------------------------------------------------------- 1 | .call { 2 | position: relative; 3 | overflow: hidden; 4 | background-color: #ffffff; 5 | border-radius: 4px; 6 | box-shadow: 0 15px 35px rgba(50, 50, 93, 0.1), 0 5px 15px rgba(0, 0, 0, 0.07); 7 | width: 100%; 8 | color: $secondary; 9 | display: flex; 10 | align-items: flex-start; 11 | flex-direction: column; 12 | @include media-breakpoint-up(sm) { 13 | align-items: center; 14 | flex-direction: row; 15 | width: 90%; 16 | } 17 | @include media-breakpoint-up(md) { 18 | width: 70%; 19 | } 20 | @include media-breakpoint-up(lg) { 21 | width: 50%; 22 | } 23 | .call-box-top { 24 | flex: 1 0 auto; 25 | padding: 20px; 26 | @include media-breakpoint-up(md) { 27 | padding: 20px; 28 | } 29 | } 30 | .call-box-bottom { 31 | flex: 0 0 auto; 32 | padding: 0 20px 20px 20px; 33 | @include media-breakpoint-up(sm) { 34 | padding: 20px; 35 | } 36 | } 37 | .call-name { 38 | font-size: 1.1rem; 39 | font-weight: bold; 40 | } 41 | svg { 42 | fill: lighten($secondary, 40%); 43 | position: absolute; 44 | bottom: -9px; 45 | right: 0; 46 | width: 100px; 47 | height: 100px; 48 | @include media-breakpoint-up(sm) { 49 | width: 120px; 50 | height: 120px; 51 | } 52 | } 53 | } 54 | -------------------------------------------------------------------------------- /assets/scss/components/_content.scss: -------------------------------------------------------------------------------- 1 | .content { 2 | ul, 3 | ol { 4 | margin-top: 10px; 5 | margin-bottom: 20px; 6 | li { 7 | margin-bottom: 5px; 8 | margin-left: 20px; 9 | } 10 | } 11 | a { 12 | text-decoration: underline; 13 | } 14 | p { 15 | color: rgb(78, 78, 78); 16 | font-family: $font-family-base; 17 | } 18 | h1 { 19 | font-family: $font-family-heading; 20 | line-height: 1.2; 21 | font-weight: $font-weight-light; 22 | color: #333333; 23 | @include media-breakpoint-up(md) { 24 | line-height: 1.2; 25 | font-weight: $font-weight-light; 26 | } 27 | } 28 | h2 { 29 | font-family: $font-family-heading; 30 | line-height: 1.4; 31 | font-weight: 400; 32 | color: #333333; 33 | @include media-breakpoint-up(md) { 34 | line-height: 1.4; 35 | } 36 | } 37 | // Subheading 38 | h3 { 39 | color: $primary; 40 | line-height: 1.4; 41 | font-weight: $font-weight-thin; 42 | letter-spacing: 1px; 43 | @include media-breakpoint-up(md) { 44 | line-height: 1.4; 45 | letter-spacing: 1.8px; 46 | font-weight: $font-weight-thin; 47 | } 48 | } 49 | } 50 | -------------------------------------------------------------------------------- /assets/scss/components/_feature.scss: -------------------------------------------------------------------------------- 1 | .feature { 2 | height: 100%; 3 | border: 2px solid #eaeaea; 4 | padding: 20px; 5 | background-color: #ffffff; 6 | display: flex; 7 | align-items: center; 8 | flex-direction: column; 9 | text-align: center; 10 | .feature-image { 11 | flex: 0 0 auto; 12 | width: 80px; 13 | height: 80px; 14 | display: flex; 15 | margin-bottom: 20px; 16 | text-align: center; 17 | } 18 | img { 19 | width: 100%; 20 | height: auto; 21 | } 22 | .feature-title { 23 | font-size: 1.5rem; 24 | line-height: 1.2; 25 | } 26 | .feature-content { 27 | margin-bottom: 0; 28 | margin-top: auto; 29 | p { 30 | margin: 0; 31 | strong { 32 | color: $secondary; 33 | text-transform: uppercase; 34 | font-size: 0.8rem; 35 | font-weight: 700; 36 | } 37 | em { 38 | color: $primary; 39 | font-style: normal; 40 | } 41 | } 42 | } 43 | } 44 | -------------------------------------------------------------------------------- /assets/scss/components/_footer.scss: -------------------------------------------------------------------------------- 1 | .footer { 2 | background: $secondary; 3 | padding-top: 20px; 4 | padding-bottom: 20px; 5 | .footer-inner { 6 | display: flex; 7 | justify-content: space-between; 8 | flex-direction: column; 9 | align-items: center; 10 | 11 | @include media-breakpoint-up(sm) { 12 | justify-content: space-between; 13 | flex-direction: row; 14 | align-items: center; 15 | } 16 | } 17 | .footer-title { 18 | color: #ffffff; 19 | font-size: 1.3rem; 20 | font-family: $font-family-heading; 21 | margin-bottom: 10px; 22 | flex: 0; 23 | @include media-breakpoint-up(sm) { 24 | margin: 0; 25 | flex: 0 0 120px; 26 | } 27 | } 28 | .footer-menu { 29 | margin-top: 16px; 30 | display: flex; 31 | align-items: center; 32 | @include media-breakpoint-up(sm) { 33 | margin-top: 0; 34 | } 35 | } 36 | ul { 37 | list-style: none; 38 | margin: 0; 39 | padding: 0; 40 | flex: 1; 41 | li { 42 | display: block; 43 | margin-right: 10px; 44 | color: lighten($secondary, 50%); 45 | font-size: 0.9rem; 46 | line-height: 1.8; 47 | &:last-of-type { 48 | margin-right: 0; 49 | } 50 | a { 51 | color: lighten($secondary, 50%); 52 | text-decoration: none; 53 | &:hover { 54 | text-decoration: underline; 55 | } 56 | } 57 | &.copyright { 58 | font-weight: bold; 59 | color: lighten($secondary, 50%); 60 | display: none; 61 | @include media-breakpoint-up(md) { 62 | display: inline-block; 63 | } 64 | } 65 | } 66 | @include media-breakpoint-up(sm) { 67 | height: inherit; 68 | display: flex; 69 | list-style: none; 70 | margin: 0; 71 | padding: 0; 72 | align-items: center; 73 | justify-content: flex-end; 74 | li { 75 | list-style: none; 76 | a { 77 | display: inline-block; 78 | padding: 10px 8px 10px 8px; 79 | font-weight: 300; 80 | } 81 | } 82 | } 83 | } 84 | } 85 | -------------------------------------------------------------------------------- /assets/scss/components/_hamburger.scss: -------------------------------------------------------------------------------- 1 | .hamburger { 2 | padding: 10px 0 10px 10px; 3 | outline: none; 4 | z-index: 30; 5 | cursor: pointer; 6 | @include media-breakpoint-up(md) { 7 | display: none; 8 | } 9 | &:focus { 10 | outline: none; 11 | } 12 | .hamburger-inner, 13 | .hamburger-inner::before, 14 | .hamburger-inner::after { 15 | background: $primary; 16 | } 17 | .hamburger-inner::after { 18 | width: 18px; 19 | right: 0; 20 | } 21 | &.is-active { 22 | .hamburger-inner::after { 23 | width: inherit; 24 | right: unset; 25 | } 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /assets/scss/components/_header.scss: -------------------------------------------------------------------------------- 1 | .header { 2 | color: $primary; 3 | background-color: #ffffff; 4 | display: flex; 5 | justify-content: space-between; 6 | align-items: center; 7 | box-shadow: 0 1px 15px rgba(50, 50, 93, 0.2); 8 | height: 60px; 9 | .container { 10 | display: flex; 11 | justify-content: space-between; 12 | align-items: center; 13 | } 14 | &.header-absolute { 15 | position: absolute; 16 | z-index: 100; 17 | width: 100%; 18 | } 19 | } 20 | // .lock-scroll { 21 | // .header { 22 | // &.header-absolute { 23 | // position: static; 24 | // } 25 | // } 26 | // } 27 | -------------------------------------------------------------------------------- /assets/scss/components/_hero-image.scss: -------------------------------------------------------------------------------- 1 | .hero-image { 2 | background-size: cover; 3 | background-repeat: no-repeat; 4 | // background-position: top center; 5 | background-blend-mode: overlay; 6 | background-color: $primary; 7 | height: 400px; 8 | position: relative; 9 | padding-top: 60px; 10 | .container { 11 | height: 100%; 12 | display: flex; 13 | justify-content: center; 14 | flex-direction: column; 15 | } 16 | .row { 17 | height: inherit; 18 | } 19 | .hero-text { 20 | flex: 0; 21 | color: #ffffff; 22 | margin: auto 0; 23 | h1 { 24 | font-size: 3rem; 25 | @include media-breakpoint-up(md) { 26 | font-size: 4rem; 27 | width: 80%; 28 | } 29 | } 30 | h2 { 31 | font-size: 2.2rem; 32 | @include media-breakpoint-up(md) { 33 | font-size: 2.4rem; 34 | } 35 | } 36 | p { 37 | font-size: 1.6rem; 38 | line-height: 1.3; 39 | @include media-breakpoint-up(md) { 40 | font-size: 1.6rem; 41 | width: 60%; 42 | } 43 | } 44 | } 45 | .hero-down { 46 | flex: 0; 47 | text-align: center; 48 | opacity: 0.7; 49 | &:hover { 50 | opacity: 1; 51 | } 52 | } 53 | .hero-section { 54 | text-transform: uppercase; 55 | font-weight: normal; 56 | } 57 | } 58 | .hero-image-fullscreen { 59 | height: 100vh; 60 | } 61 | .hero-image-setheight { 62 | height: 460px; 63 | } 64 | .hero-image-blend-overlay { 65 | background-blend-mode: overlay; 66 | } 67 | 68 | // Enable smooth scrolling (on hero-down click) 69 | html { 70 | scroll-behavior: smooth; 71 | } 72 | -------------------------------------------------------------------------------- /assets/scss/components/_intro.scss: -------------------------------------------------------------------------------- 1 | .intro { 2 | display: flex; 3 | justify-content: flex-start; 4 | align-items: center; 5 | padding-top: 200px; 6 | padding-bottom: 100px; 7 | @include media-breakpoint-up(sm) { 8 | padding-top: 160px; 9 | padding-bottom: 80px; 10 | } 11 | @include media-breakpoint-up(md) { 12 | padding-top: 160px; 13 | padding-bottom: 80px; 14 | } 15 | @include media-breakpoint-up(lg) { 16 | padding-top: 200px; 17 | padding-bottom: 100px; 18 | } 19 | h1 { 20 | color: $primary; 21 | font-size: 2.4rem; 22 | line-height: 1.2; 23 | font-family: $font-family-heading; 24 | width: 70%; 25 | @include media-breakpoint-up(sm) { 26 | width: 70%; 27 | } 28 | @include media-breakpoint-up(md) { 29 | font-size: 3rem; 30 | width: 70%; 31 | } 32 | @include media-breakpoint-up(lg) { 33 | font-size: 3rem; 34 | width: 50%; 35 | } 36 | } 37 | p { 38 | width: 80%; 39 | font-size: 1.2rem; 40 | font-weight: light; 41 | line-height: 1.5; 42 | color: $secondary; 43 | @include media-breakpoint-up(sm) { 44 | width: 70%; 45 | } 46 | @include media-breakpoint-up(md) { 47 | width: 60%; 48 | } 49 | @include media-breakpoint-up(lg) { 50 | width: 55%; 51 | } 52 | @include media-breakpoint-up(xl) { 53 | width: 45%; 54 | } 55 | } 56 | } 57 | .intro-small { 58 | padding-top: 100px; 59 | padding-bottom: 30px; 60 | } 61 | -------------------------------------------------------------------------------- /assets/scss/components/_logo.scss: -------------------------------------------------------------------------------- 1 | .logo { 2 | display: none; 3 | @include media-breakpoint-up(sm) { 4 | display: block; 5 | width: 120px; 6 | } 7 | img { 8 | width: 100%; 9 | height: auto; 10 | } 11 | a { 12 | display: block; 13 | width: 100%; 14 | height: 100%; 15 | } 16 | } 17 | .logo-mobile { 18 | display: block; 19 | width: 40px; 20 | padding: 10px 0 10px 0; 21 | @include media-breakpoint-up(sm) { 22 | display: none; 23 | } 24 | img { 25 | width: 100%; 26 | height: auto; 27 | } 28 | a { 29 | display: block; 30 | width: 100%; 31 | height: 100%; 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /assets/scss/components/_main-menu-mobile.scss: -------------------------------------------------------------------------------- 1 | $color-main: $primary; 2 | $color-active: #ffffff; 3 | $color-link: #ffffff; 4 | 5 | $button-height: 27px; 6 | $button-width: 35px; 7 | 8 | .main-menu-mobile { 9 | position: fixed; 10 | background: $color-main; 11 | top: 0; 12 | left: 0; 13 | width: 100%; 14 | height: 100vh; 15 | opacity: 0; 16 | visibility: hidden; 17 | transition: opacity 0.35s, visibility 0.35s, height 0.35s; 18 | overflow: hidden; 19 | display: flex; 20 | justify-content: center; 21 | align-items: center; 22 | flex-direction: column; 23 | &.open { 24 | opacity: 0.9; 25 | visibility: visible; 26 | height: 100%; 27 | z-index: 20; 28 | li { 29 | animation: fadeInRight 0.5s ease forwards; 30 | animation-delay: 0.35s; 31 | &:nth-of-type(2) { 32 | animation-delay: 0.4s; 33 | } 34 | &:nth-of-type(3) { 35 | animation-delay: 0.45s; 36 | } 37 | &:nth-of-type(4) { 38 | animation-delay: 0.5s; 39 | } 40 | &:nth-of-type(5) { 41 | animation-delay: 0.55s; 42 | } 43 | &:nth-of-type(6) { 44 | animation-delay: 0.6s; 45 | } 46 | } 47 | } 48 | ul { 49 | font-size: 2rem; 50 | font-family: $font-family-heading; 51 | text-align: center; 52 | list-style: none; 53 | padding: 0; 54 | margin: 0; 55 | flex: 0; 56 | li { 57 | display: block; 58 | position: relative; 59 | opacity: 0; 60 | a { 61 | display: block; 62 | position: relative; 63 | color: $color-link; 64 | text-decoration: none; 65 | overflow: hidden; 66 | &:hover::after, 67 | &:focus::after, 68 | &:active::after { 69 | width: 100%; 70 | } 71 | &::after { 72 | content: ''; 73 | position: absolute; 74 | bottom: 0; 75 | left: 50%; 76 | width: 0%; 77 | transform: translateX(-50%); 78 | height: 3px; 79 | background: $color-link; 80 | transition: 0.35s; 81 | } 82 | } 83 | } 84 | } 85 | } 86 | @keyframes fadeInRight { 87 | 0% { 88 | opacity: 0; 89 | left: 20%; 90 | } 91 | 100% { 92 | opacity: 1; 93 | left: 0; 94 | } 95 | } 96 | .lock-scroll { 97 | overflow: hidden; 98 | } 99 | -------------------------------------------------------------------------------- /assets/scss/components/_main-menu.scss: -------------------------------------------------------------------------------- 1 | .main-menu { 2 | display: none; 3 | @include media-breakpoint-up(md) { 4 | display: block; 5 | } 6 | > ul { 7 | display: flex; 8 | align-items: center; 9 | justify-content: flex-start; 10 | > li { 11 | list-style: none; 12 | font-size: 0.9rem; 13 | > a { 14 | padding: 10px 14px 10px 14px; 15 | display: inline-block; 16 | font-weight: regular; 17 | text-transform: uppercase; 18 | text-decoration: none; 19 | color: $primary; 20 | &:hover { 21 | background: $primary; 22 | color: #ffffff; 23 | text-decoration: none; 24 | } 25 | } 26 | &.active { 27 | > a { 28 | background: $primary; 29 | text-decoration: none; 30 | color: #ffffff; 31 | &:hover { 32 | text-decoration: none; 33 | background: $primary; 34 | transition: all 225ms ease-in 0s; 35 | color: #ffffff; 36 | } 37 | } 38 | } 39 | } 40 | } 41 | } 42 | -------------------------------------------------------------------------------- /assets/scss/components/_page.scss: -------------------------------------------------------------------------------- 1 | .page { 2 | display: flex; 3 | min-height: 100vh; 4 | flex-direction: column; 5 | .wrapper { 6 | flex: 1; 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /assets/scss/components/_reset.scss: -------------------------------------------------------------------------------- 1 | ul, 2 | ol { 3 | margin: 0; 4 | padding: 0; 5 | list-style: none; 6 | } 7 | -------------------------------------------------------------------------------- /assets/scss/components/_social.scss: -------------------------------------------------------------------------------- 1 | ul.social { 2 | height: inherit; 3 | display: flex; 4 | list-style: none; 5 | margin: 0; 6 | padding: 0; 7 | align-items: center; 8 | justify-content: flex-start; 9 | 10 | li { 11 | margin: 0; 12 | padding: 0; 13 | list-style: none; 14 | display: inline-block; 15 | margin-right: 10px; 16 | &:last-of-type { 17 | margin: 0; 18 | } 19 | a { 20 | background-repeat: no-repeat; 21 | background-position: center center; 22 | background-size: auto; 23 | display: block; 24 | span { 25 | font-size: 24px; 26 | } 27 | } 28 | } 29 | } -------------------------------------------------------------------------------- /assets/scss/components/_strip.scss: -------------------------------------------------------------------------------- 1 | .strip { 2 | background-repeat: no-repeat; 3 | } 4 | .strip-white { 5 | background-color: white; 6 | } 7 | .strip-grey { 8 | background-color: #f4f5fb; 9 | } 10 | .strip-diagonal { 11 | transform: skewY(5deg); 12 | padding-bottom: 50px; 13 | margin-bottom: 65px; 14 | > div { 15 | transform: skewY(-5deg); 16 | } 17 | } 18 | .strip-primary-gradient { 19 | background-image: linear-gradient(to right, $primary, $secondary); 20 | } 21 | .strip-primary-gradient-top-bottom { 22 | background-image: linear-gradient(to bottom, $primary, $secondary); 23 | } 24 | .strip-primary { 25 | background-color: $primary; 26 | } 27 | .strip-secondary { 28 | background-color: $secondary; 29 | } 30 | 31 | .strip-diagonal-right { 32 | margin-top: -100px; 33 | transform: skewY(-5deg); 34 | padding-bottom: 100px; 35 | > div { 36 | transform: skewY(5deg); 37 | } 38 | } 39 | 40 | .strip-diagonal-left { 41 | margin-top: -100px; 42 | transform: skewY(5deg); 43 | padding-bottom: 100px; 44 | > div { 45 | transform: skewY(-5deg); 46 | } 47 | } 48 | 49 | .strip-bg-contain { 50 | background-size: contain; 51 | } 52 | 53 | .strip-bg-cover { 54 | background-size: cover; 55 | } 56 | -------------------------------------------------------------------------------- /assets/scss/components/_sub-footer.scss: -------------------------------------------------------------------------------- 1 | .sub-footer { 2 | background: darken($secondary, 10%); 3 | padding-top: 20px; 4 | padding-bottom: 20px; 5 | @include media-breakpoint-up(md) { 6 | padding-top: 10px; 7 | padding-bottom: 10px; 8 | } 9 | .sub-footer-inner { 10 | display: flex; 11 | flex-direction: column; 12 | justify-content: space-between; 13 | @include media-breakpoint-up(md) { 14 | flex-direction: row; 15 | } 16 | ul { 17 | list-style: none; 18 | margin: 0; 19 | padding: 0; 20 | li { 21 | list-style: none; 22 | display: block; 23 | color: lighten($secondary, 40%); 24 | font-size: 0.9rem; 25 | line-height: 1.8; 26 | strong { 27 | font-weight: bold; 28 | color: #ffffff; 29 | } 30 | a { 31 | color: lighten($secondary, 40%); 32 | text-decoration: none; 33 | &:hover { 34 | text-decoration: underline; 35 | } 36 | } 37 | span { 38 | display: inline-block; 39 | height: 40px; 40 | padding: 10px 0 10px 8px; 41 | font-weight: bold; 42 | color: #ffffff; 43 | } 44 | &.zerostatic { 45 | a { 46 | color: #ffffff; 47 | } 48 | } 49 | } 50 | @include media-breakpoint-up(sm) { 51 | li { 52 | display: inline-block; 53 | margin-left: 10px; 54 | &:first-of-type { 55 | margin-left: 0; 56 | } 57 | } 58 | } 59 | } 60 | } 61 | } 62 | -------------------------------------------------------------------------------- /assets/scss/components/_sub-menu.scss: -------------------------------------------------------------------------------- 1 | .sub-menu { 2 | display: none; 3 | position: absolute; 4 | top: 50px; 5 | left: 0; 6 | width: 100%; 7 | background: #ccc; 8 | list-style: none; 9 | margin: 0; 10 | padding: 0; 11 | align-items: center; 12 | justify-content: center; 13 | color: $white; 14 | z-index: 10; 15 | li { 16 | display: inline-block; 17 | list-style: none; 18 | flex: 0 0 auto; 19 | a { 20 | display: block; 21 | padding: 0 10px 0 10px; 22 | font-size: 12px; 23 | line-height: 28px; 24 | font-weight: 400; 25 | text-transform: uppercase; 26 | color: inherit; 27 | &:hover { 28 | color: $primary; 29 | text-decoration: none; 30 | } 31 | } 32 | } 33 | li.active { 34 | > a { 35 | font-weight: $font-weight-thin; 36 | border-bottom: 2px solid $primary; 37 | } 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /assets/scss/components/_title.scss: -------------------------------------------------------------------------------- 1 | .title-1 { 2 | color: $primary; 3 | font-size: 2.4rem; 4 | line-height: 1.2; 5 | font-family: $font-family-heading; 6 | @include media-breakpoint-up(md) { 7 | font-size: 3rem; 8 | } 9 | &.black { 10 | color: #222222; 11 | } 12 | } 13 | .title-2 { 14 | font-family: $font-family-base; 15 | font-weight: light; 16 | color: #333333; 17 | font-size: 2.4rem; 18 | @include media-breakpoint-up(md) { 19 | font-size: 4rem; 20 | } 21 | a { 22 | display: block; 23 | } 24 | } 25 | .title-3 { 26 | font-family: $font-family-base; 27 | font-weight: 600; 28 | color: #2b2b39; 29 | font-size: 1.9rem; 30 | letter-spacing: -1px; 31 | @include media-breakpoint-up(sm) { 32 | font-size: 2.1rem; 33 | } 34 | @include media-breakpoint-up(md) { 35 | font-size: 2.2rem; 36 | } 37 | a { 38 | display: block; 39 | } 40 | } 41 | -------------------------------------------------------------------------------- /assets/scss/components/_type.scss: -------------------------------------------------------------------------------- 1 | ul, 2 | ol { 3 | margin: 0; 4 | padding: 0; 5 | li { 6 | padding: 0; 7 | margin: 0; 8 | } 9 | } 10 | p { 11 | color: rgb(78, 78, 78); 12 | font-family: $font-family-base; 13 | } 14 | h1 { 15 | font-size: 20px; 16 | font-family: $font-family-heading; 17 | line-height: 1.2; 18 | font-weight: $font-weight-light; 19 | color: #333333; 20 | @include media-breakpoint-up(md) { 21 | font-size: 30px; 22 | line-height: 1.2; 23 | font-weight: $font-weight-light; 24 | } 25 | } 26 | h2 { 27 | font-size: 20px; 28 | font-family: $font-family-heading; 29 | line-height: 1.4; 30 | font-weight: 400; 31 | color: #333333; 32 | @include media-breakpoint-up(md) { 33 | font-size: 24px; 34 | line-height: 1.4; 35 | } 36 | } 37 | h3 { 38 | color: $primary; 39 | font-size: 16px; 40 | line-height: 1.4; 41 | font-weight: $font-weight-thin; 42 | letter-spacing: 1px; 43 | @include media-breakpoint-up(md) { 44 | font-size: 20px; 45 | line-height: 1.4; 46 | letter-spacing: 1.8px; 47 | font-weight: $font-weight-thin; 48 | } 49 | } 50 | .display-1 { 51 | font-size: 50px; 52 | letter-spacing: 4.5px; 53 | font-weight: $font-weight-light; 54 | @include media-breakpoint-down(sm) { 55 | font-size: 20px; 56 | letter-spacing: 1.7px; 57 | } 58 | } 59 | -------------------------------------------------------------------------------- /assets/scss/components/_whitebox.scss: -------------------------------------------------------------------------------- 1 | @mixin whitebox($padding: 10px) { 2 | border: 1px solid #dcdcdc; 3 | border-radius: 3px; 4 | box-shadow: 0 1px 18px rgba(0, 0, 0, 0.2); 5 | background: #ffffff; 6 | padding: $padding; 7 | } 8 | .whitebox { 9 | @include whitebox(); 10 | } 11 | -------------------------------------------------------------------------------- /assets/scss/libraries/hamburgers/_base.scss: -------------------------------------------------------------------------------- 1 | // Hamburger 2 | // ================================================== 3 | .hamburger { 4 | padding: $hamburger-padding-y $hamburger-padding-x; 5 | display: inline-block; 6 | cursor: pointer; 7 | 8 | transition-property: opacity, filter; 9 | transition-duration: 0.15s; 10 | transition-timing-function: linear; 11 | 12 | // Normalize ( -------------------------------------------------------------------------------- /layouts/partials/header.html: -------------------------------------------------------------------------------- 1 |
2 |
3 | 6 |
7 | {{ .Site.Params.logo.alt }} 8 |
9 | {{ partial "main-menu.html" . }} 10 | {{ partial "hamburger.html" . }} 11 |
12 |
-------------------------------------------------------------------------------- /layouts/partials/hero-image-fullscreen.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 | {{ .section }} 5 |

{{ .heading }}

6 |

{{ .subheading }}

7 |
8 |
9 | 10 | 11 | 13 | 15 | 16 | 17 | 18 |
19 |
20 |
-------------------------------------------------------------------------------- /layouts/partials/hero-image-setheight.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 | {{ .section }} 5 |

{{ .heading }}

6 |

{{ .subheading }}

7 |
8 |
9 |
10 | -------------------------------------------------------------------------------- /layouts/partials/main-menu-mobile.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /layouts/partials/main-menu.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /layouts/partials/social.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /layouts/partials/sub-footer.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 |
5 |
6 |
    7 | {{ if .Site.Data.contact.phone }} 8 |
  • Phone: {{ .Site.Data.contact.phone }}
    • 9 | {{ end }} 10 | {{ if .Site.Data.contact.email }} 11 |
  • Email: 12 | {{ .Site.Data.contact.email }}
    • 13 | {{ end }} 14 |
15 | 18 |
19 |
20 |
21 |
22 |
-------------------------------------------------------------------------------- /layouts/services/list.html: -------------------------------------------------------------------------------- 1 | {{ define "header_css" }}{{ end }} 2 | {{ define "body_classes" }}page-services-list{{ end }} 3 | {{ define "header_classes" }}{{ end }} 4 | 5 | {{ define "main" }} 6 | 7 | {{ partial "hero-image-setheight.html" (dict "background" .Params.heroBackground "heading" .Params.heroHeading "subheading" .Params.heroSubHeading "content" .)}} 8 | {{ if .Content }} 9 |
10 |
11 |
12 |
13 | {{ .Content }} 14 |
15 |
16 |
17 |
18 | {{ end }} 19 | 20 | 21 |
22 |
23 | {{ range .Pages.ByWeight }} 24 |
{{ .Render "summary" }}
25 | {{ end }} 26 |
27 |
28 | {{ end }} -------------------------------------------------------------------------------- /layouts/services/single.html: -------------------------------------------------------------------------------- 1 | {{ define "header_css" }}{{ end }} 2 | {{ define "body_classes" }}page-services-single{{ end }} 3 | {{ define "header_classes" }}{{ end }} 4 | 5 | {{ define "main" }} 6 | {{ partial "hero-image-setheight.html" (dict "background" .Params.heroBackground "heading" .Params.heroHeading "subheading" .Params.heroSubHeading "section" .Section "content" .)}} 7 |
8 |
9 |
10 |
11 |
{{.Content}}
12 |
13 |
14 |
15 |
16 | {{ end }} 17 | 18 | {{ define "footer_js" }} 19 | {{ $library := resources.Get "js/libs/library.js" }} 20 | {{ $services := resources.Get "js/pages/services.js" }} 21 | {{ $servicesJS := slice $library $services |resources.Concat "js/services.js" }} 22 | {{ if hugo.IsServer }} 23 | 24 | {{ else }} 25 | 26 | {{ end }} 27 | {{ end }} -------------------------------------------------------------------------------- /layouts/services/summary.html: -------------------------------------------------------------------------------- 1 |
2 | {{ if .Params.icon }} 3 |
4 | {{ .Title }} 5 |
6 | {{ end }} 7 |
8 |

9 | {{ .Title }} 10 |

11 | {{ .Content | truncate 120 "..." }} 12 |
13 |
-------------------------------------------------------------------------------- /layouts/shortcodes/bundle-content.html: -------------------------------------------------------------------------------- 1 | 2 | {{ $bundle := .Get 0 }} 3 | {{ $match := .Get 1 }} 4 | {{ $page := .Page.Site.GetPage $bundle }} 5 | {{ $page }} 6 | {{ with $page }} 7 | {{ $resource := $page.Resources.GetMatch (printf "**%s*" $match ) }} 8 | {{ with $resource }} 9 |

Resource in shortcode

10 | 15 | {{ end }} 16 | {{ end }} -------------------------------------------------------------------------------- /layouts/shortcodes/bundle-inspect.html: -------------------------------------------------------------------------------- 1 | Bundled Content 2 | {{ range .Page.Resources.ByType "page"}} 3 | {{ .Title }}: {{ .Content}} 4 | {{ end }} -------------------------------------------------------------------------------- /layouts/shortcodes/content-strip-center.html: -------------------------------------------------------------------------------- 1 | 2 | {{ $bundle := .Get 0 }} 3 | {{ $match := .Get 1 }} 4 | {{ $page := .Page.Site.GetPage $bundle }} 5 | {{ with $page }} 6 | {{ $resource := $page.Resources.GetMatch (printf "**%s*" $match ) }} 7 | {{ with $resource }} 8 |
9 |
10 |
11 |
12 | {{ .Content }} 13 | {{ if .Params.button }} 14 | {{ .Params.button }} 15 | {{ end }} 16 |
17 |
18 |
19 |
20 | {{ end }} 21 | {{ end }} 22 | -------------------------------------------------------------------------------- /layouts/shortcodes/content-strip-left.html: -------------------------------------------------------------------------------- 1 | 2 | {{ $bundle := .Get 0 }} 3 | {{ $match := .Get 1 }} 4 | {{ $page := .Page.Site.GetPage $bundle }} 5 | {{ with $page }} 6 | {{ $resource := $page.Resources.GetMatch (printf "**%s*" $match ) }} 7 | {{ with $resource }} 8 |
9 |
10 |
11 |
12 | {{ .Content }} 13 | {{ if .Params.button }} 14 | {{ .Params.button}} 15 | {{ end }} 16 |
17 |
18 |
19 |
20 | {{ end }} 21 | {{ end }} 22 | -------------------------------------------------------------------------------- /layouts/shortcodes/content-strip-right.html: -------------------------------------------------------------------------------- 1 | 2 | {{ $bundle := .Get 0 }} 3 | {{ $match := .Get 1 }} 4 | {{ $page := .Page.Site.GetPage $bundle }} 5 | {{ with $page }} 6 | {{ $resource := $page.Resources.GetMatch (printf "**%s*" $match ) }} 7 | {{ with $resource }} 8 |
9 |
10 |
11 |
12 | {{ .Content }} 13 | {{ if .Params.button }} 14 | {{ .Params.button}} 15 | {{ end }} 16 |
17 |
18 |
19 |
20 | {{ end }} 21 | {{ end }} 22 | -------------------------------------------------------------------------------- /layouts/work/list.html: -------------------------------------------------------------------------------- 1 | {{ define "header_css" }}{{ end }} 2 | {{ define "body_classes" }}page-work-list{{ end }} 3 | {{ define "header_classes" }}{{ end }} 4 | 5 | {{ define "main" }} 6 | 7 | {{ partial "hero-image-setheight.html" (dict "background" .Params.heroBackground "heading" .Params.heroHeading "subheading" .Params.heroSubHeading "content" .)}} 8 | {{ if .Content }} 9 |
10 |
11 |
12 |
13 | {{ .Content }} 14 |
15 |
16 |
17 |
18 | {{ end }} 19 | 20 |
21 |
22 | {{ range .Pages.ByWeight }} 23 |
{{ .Render "summary" }}
24 | {{ end }} 25 |
26 |
27 | {{ end }} -------------------------------------------------------------------------------- /layouts/work/single.html: -------------------------------------------------------------------------------- 1 | {{ define "header_css" }}{{ end }} 2 | {{ define "body_classes" }}page-work-single{{ end }} 3 | {{ define "header_classes" }}{{ end }} 4 | 5 | {{ define "main" }} 6 | {{ partial "hero-image-setheight.html" (dict "background" .Params.heroBackground "heading" .Params.heroHeading "subheading" .Params.heroSubHeading "section" .Section "content" .)}} 7 |
8 |
9 |
10 |
11 |
{{.Content}}
12 |
13 |
14 | {{ if .Params.images }} 15 |
16 |

Gallery

17 |
18 | {{ range .Params.images }} 19 |
20 | 21 |
22 | {{ end }} 23 |
24 |
25 | {{ end }} 26 |
27 |
28 | {{ end }} 29 | 30 | {{ define "footer_js" }} 31 | {{ $library := resources.Get "js/libs/library.js" }} 32 | {{ $services := resources.Get "js/pages/services.js" }} 33 | {{ $servicesJS := slice $library $services |resources.Concat "js/services.js" }} 34 | {{ if hugo.IsServer }} 35 | 36 | {{ else }} 37 | 38 | {{ end }} 39 | {{ end }} -------------------------------------------------------------------------------- /layouts/work/summary.html: -------------------------------------------------------------------------------- 1 |
2 | {{ if .Params.thumbnail }} 3 |
4 | 5 |
6 | {{ end }} 7 |
8 |

9 | {{ .Title }} 10 |

11 | {{ .Content | truncate 120 "..." | plainify }} 12 |
13 |
-------------------------------------------------------------------------------- /netlify.toml: -------------------------------------------------------------------------------- 1 | [build] 2 | publish = "exampleSite/public" 3 | command = "cd exampleSite && hugo --gc --themesDir ../.." 4 | 5 | [build.environment] 6 | HUGO_VERSION = "0.133.0" 7 | HUGO_THEME = "repo" 8 | HUGO_BASEURL = "/" -------------------------------------------------------------------------------- /static/images/jason-blackeye-1191801-unsplash.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zerostaticthemes/hugo-hero-theme/6c3c2da658495375a9b7e4beb88ccd947dde7196/static/images/jason-blackeye-1191801-unsplash.jpg -------------------------------------------------------------------------------- /static/images/kevin-bhagat-461952-unsplash.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zerostaticthemes/hugo-hero-theme/6c3c2da658495375a9b7e4beb88ccd947dde7196/static/images/kevin-bhagat-461952-unsplash.jpg -------------------------------------------------------------------------------- /static/images/logo-mobile.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | logo-mobile 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /static/images/noun_chevron down_730206.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /theme.toml: -------------------------------------------------------------------------------- 1 | name = "Hero" 2 | license = "MIT" 3 | licenselink = "https://github.com/zerostaticthemes/hugo-hero-theme/blob/master/LICENSE" 4 | description = "Hero is a multipurpose theme with fullscreen hero images and fullwidth sections. It contains content types for a business or portfolio site." 5 | 6 | homepage = "https://github.com/zerostaticthemes/hugo-hero-theme" 7 | demosite = "https://hugo-hero.netlify.app/" 8 | 9 | tags = ["responsive","minimal","clean","company","portfolio","bootstrap","zerostatic"] 10 | features = ["services","work","fullwidth","hero images"] 11 | 12 | [author] 13 | name = "Robert Austin" 14 | homepage = "https://www.zerostatic.io" 15 | --------------------------------------------------------------------------------