├── .bowerrc ├── .gitignore ├── app ├── fonts │ ├── RobotoBold │ │ ├── RobotoBold.eot │ │ ├── RobotoBold.ttf │ │ └── RobotoBold.woff │ └── RobotoRegular │ │ ├── RobotoRegular.eot │ │ ├── RobotoRegular.ttf │ │ └── RobotoRegular.woff ├── ht.access ├── img │ ├── @1x │ │ └── preview.jpg │ ├── @2x │ │ └── preview.jpg │ ├── _src │ │ └── preview.jpg │ └── favicon │ │ ├── apple-touch-icon-180x180.png │ │ └── favicon.ico ├── index.html ├── js │ ├── common.js │ └── scripts.min.js ├── libs │ ├── bootstrap │ │ └── scss │ │ │ ├── _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 │ │ │ ├── _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.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 │ │ │ ├── _colored-links.scss │ │ │ ├── _position.scss │ │ │ ├── _ratio.scss │ │ │ ├── _stacks.scss │ │ │ ├── _stretched-link.scss │ │ │ ├── _text-truncation.scss │ │ │ ├── _visually-hidden.scss │ │ │ └── _vr.scss │ │ │ ├── mixins │ │ │ ├── _alert.scss │ │ │ ├── _backdrop.scss │ │ │ ├── _border-radius.scss │ │ │ ├── _box-shadow.scss │ │ │ ├── _breakpoints.scss │ │ │ ├── _buttons.scss │ │ │ ├── _caret.scss │ │ │ ├── _clearfix.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 │ │ │ ├── utilities │ │ │ └── _api.scss │ │ │ └── vendor │ │ │ └── _rfs.scss │ └── jquery │ │ └── dist │ │ ├── jquery.min.js │ │ └── jquery.slim.min.js ├── sass │ ├── _fonts.sass │ ├── _libs.sass │ ├── _media.sass │ ├── _mixins │ │ └── _font-face.sass │ ├── _vars.sass │ └── main.sass └── scss │ ├── _fonts.scss │ ├── _libs.scss │ ├── _media.scss │ ├── _mixins │ └── _font-face.scss │ ├── _vars.scss │ └── main.scss ├── gulpfile.js ├── package.json └── readme.md /.bowerrc: -------------------------------------------------------------------------------- 1 | { 2 | "directory" : "app/libs/" 3 | } 4 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | /**/node_modules/ 2 | /dist/ 3 | /.git/ 4 | /app/css/ 5 | /**/_backstage 6 | /**/package-lock.json 7 | /**/Thumbs.db 8 | /**/*.DS_Store 9 | /**/debug.log 10 | -------------------------------------------------------------------------------- /app/fonts/RobotoBold/RobotoBold.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/agragregra/OptimizedHTML-4/e6d73a6c14b98b9cd834796c15dc85def1df9a0b/app/fonts/RobotoBold/RobotoBold.eot -------------------------------------------------------------------------------- /app/fonts/RobotoBold/RobotoBold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/agragregra/OptimizedHTML-4/e6d73a6c14b98b9cd834796c15dc85def1df9a0b/app/fonts/RobotoBold/RobotoBold.ttf -------------------------------------------------------------------------------- /app/fonts/RobotoBold/RobotoBold.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/agragregra/OptimizedHTML-4/e6d73a6c14b98b9cd834796c15dc85def1df9a0b/app/fonts/RobotoBold/RobotoBold.woff -------------------------------------------------------------------------------- /app/fonts/RobotoRegular/RobotoRegular.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/agragregra/OptimizedHTML-4/e6d73a6c14b98b9cd834796c15dc85def1df9a0b/app/fonts/RobotoRegular/RobotoRegular.eot -------------------------------------------------------------------------------- /app/fonts/RobotoRegular/RobotoRegular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/agragregra/OptimizedHTML-4/e6d73a6c14b98b9cd834796c15dc85def1df9a0b/app/fonts/RobotoRegular/RobotoRegular.ttf -------------------------------------------------------------------------------- /app/fonts/RobotoRegular/RobotoRegular.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/agragregra/OptimizedHTML-4/e6d73a6c14b98b9cd834796c15dc85def1df9a0b/app/fonts/RobotoRegular/RobotoRegular.woff -------------------------------------------------------------------------------- /app/ht.access: -------------------------------------------------------------------------------- 1 | 2 | 3 | # Add correct content-type for fonts 4 | AddType application/vnd.ms-fontobject .eot 5 | AddType application/x-font-ttf .ttf 6 | AddType application/x-font-opentype .otf 7 | AddType application/font-woff .woff 8 | AddType application/font-woff2 .woff2 9 | AddType image/svg+xml .svg 10 | 11 | # Compress compressible fonts 12 | AddOutputFilterByType DEFLATE application/x-font-ttf application/x-font-opentype image/svg+xml 13 | 14 | ExpiresActive On 15 | ExpiresDefault "access plus 5 seconds" 16 | 17 | # Cache Images 18 | ExpiresByType image/x-icon "access plus 2592000 seconds" 19 | ExpiresByType image/jpeg "access plus 2592000 seconds" 20 | ExpiresByType image/png "access plus 2592000 seconds" 21 | ExpiresByType image/gif "access plus 2592000 seconds" 22 | ExpiresByType image/svg+xml "access plus 2592000 seconds" 23 | 24 | # Cache Fonts 25 | ExpiresByType application/vnd.ms-fontobject "access plus 2592000 seconds" 26 | ExpiresByType application/x-font-ttf "access plus 2592000 seconds" 27 | ExpiresByType application/x-font-opentype "access plus 2592000 seconds" 28 | ExpiresByType application/font-woff "access plus 2592000 seconds" 29 | ExpiresByType application/font-woff2 "access plus 2592000 seconds" 30 | ExpiresByType image/svg+xml "access plus 2592000 seconds" 31 | 32 | # Cache other content types (Flash, CSS, JS, HTML, XML) 33 | ExpiresByType application/x-shockwave-flash "access plus 2592000 seconds" 34 | ExpiresByType text/css "access plus 604800 seconds" 35 | ExpiresByType text/javascript "access plus 2592000 seconds" 36 | ExpiresByType application/javascript "access plus 2592000 seconds" 37 | ExpiresByType application/x-javascript "access plus 2592000 seconds" 38 | ExpiresByType text/html "access plus 600 seconds" 39 | ExpiresByType application/xhtml+xml "access plus 600 seconds" 40 | 41 | 42 | 43 | 44 | 45 | AddOutputFilterByType DEFLATE text/html text/plain text/xml application/xml application/xhtml+xml text/css text/javascript application/javascript application/x-javascript 46 | 47 | 48 | -------------------------------------------------------------------------------- /app/img/@1x/preview.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/agragregra/OptimizedHTML-4/e6d73a6c14b98b9cd834796c15dc85def1df9a0b/app/img/@1x/preview.jpg -------------------------------------------------------------------------------- /app/img/@2x/preview.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/agragregra/OptimizedHTML-4/e6d73a6c14b98b9cd834796c15dc85def1df9a0b/app/img/@2x/preview.jpg -------------------------------------------------------------------------------- /app/img/_src/preview.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/agragregra/OptimizedHTML-4/e6d73a6c14b98b9cd834796c15dc85def1df9a0b/app/img/_src/preview.jpg -------------------------------------------------------------------------------- /app/img/favicon/apple-touch-icon-180x180.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/agragregra/OptimizedHTML-4/e6d73a6c14b98b9cd834796c15dc85def1df9a0b/app/img/favicon/apple-touch-icon-180x180.png -------------------------------------------------------------------------------- /app/img/favicon/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/agragregra/OptimizedHTML-4/e6d73a6c14b98b9cd834796c15dc85def1df9a0b/app/img/favicon/favicon.ico -------------------------------------------------------------------------------- /app/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | OptimizedHTML 4 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 |
34 | 35 |
36 | 37 |
38 | 39 | Start HTML5 Template 43 | 44 |
45 | 46 |

Welcome to startup HTML template OptimizedHTML 4!

47 | 48 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad distinctio animi, dolorum eaque praesentium unde aliquid, mollitia itaque voluptate quos modi et incidunt tempora fugiat voluptatum quia esse dolor repellat.

49 |

Nemo velit incidunt assumenda, eaque, sequi vitae facilis doloribus qui totam, fuga iure dignissimos ab non praesentium. Vitae similique, corrupti aliquam nam modi explicabo distinctio qui cum officia ullam quam!

50 |

Aperiam veritatis debitis quibusdam animi totam quos mollitia aspernatur porro consectetur id quod tempore numquam, ullam ex quae quasi voluptatem incidunt placeat asperiores quas autem! Labore modi quae nulla illo!

51 | 52 |
53 | 54 |
55 | 56 |
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis quo vero molestias, esse doloribus corrupti, nemo minus ullam tempore tenetur magni aut quos soluta sit adipisci eius expedita amet non.
57 |
Odit enim harum minus nam excepturi quae vitae consectetur repudiandae natus neque ab asperiores repellat quo dicta vel accusamus voluptatum rerum autem eaque rem laudantium, sint veritatis. Minus, unde rem.
58 | 59 |
60 | 61 |
62 | 63 |
64 | 65 |
66 | 67 |
68 | 69 | 70 | 71 | 72 | 73 | -------------------------------------------------------------------------------- /app/js/common.js: -------------------------------------------------------------------------------- 1 | $(function() { 2 | 3 | // Custom JS 4 | // document.body.hidden = true // test 5 | 6 | }); 7 | -------------------------------------------------------------------------------- /app/libs/bootstrap/scss/_accordion.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Base styles 3 | // 4 | 5 | .accordion-button { 6 | position: relative; 7 | display: flex; 8 | align-items: center; 9 | width: 100%; 10 | padding: $accordion-button-padding-y $accordion-button-padding-x; 11 | @include font-size($font-size-base); 12 | color: $accordion-button-color; 13 | text-align: left; // Reset button style 14 | background-color: $accordion-button-bg; 15 | border: 0; 16 | @include border-radius(0); 17 | overflow-anchor: none; 18 | @include transition($accordion-transition); 19 | 20 | &:not(.collapsed) { 21 | color: $accordion-button-active-color; 22 | background-color: $accordion-button-active-bg; 23 | box-shadow: inset 0 ($accordion-border-width * -1) 0 $accordion-border-color; 24 | 25 | &::after { 26 | background-image: escape-svg($accordion-button-active-icon); 27 | transform: $accordion-icon-transform; 28 | } 29 | } 30 | 31 | // Accordion icon 32 | &::after { 33 | flex-shrink: 0; 34 | width: $accordion-icon-width; 35 | height: $accordion-icon-width; 36 | margin-left: auto; 37 | content: ""; 38 | background-image: escape-svg($accordion-button-icon); 39 | background-repeat: no-repeat; 40 | background-size: $accordion-icon-width; 41 | @include transition($accordion-icon-transition); 42 | } 43 | 44 | &:hover { 45 | z-index: 2; 46 | } 47 | 48 | &:focus { 49 | z-index: 3; 50 | border-color: $accordion-button-focus-border-color; 51 | outline: 0; 52 | box-shadow: $accordion-button-focus-box-shadow; 53 | } 54 | } 55 | 56 | .accordion-header { 57 | margin-bottom: 0; 58 | } 59 | 60 | .accordion-item { 61 | background-color: $accordion-bg; 62 | border: $accordion-border-width solid $accordion-border-color; 63 | 64 | &:first-of-type { 65 | @include border-top-radius($accordion-border-radius); 66 | 67 | .accordion-button { 68 | @include border-top-radius($accordion-inner-border-radius); 69 | } 70 | } 71 | 72 | &:not(:first-of-type) { 73 | border-top: 0; 74 | } 75 | 76 | // Only set a border-radius on the last item if the accordion is collapsed 77 | &:last-of-type { 78 | @include border-bottom-radius($accordion-border-radius); 79 | 80 | .accordion-button { 81 | &.collapsed { 82 | @include border-bottom-radius($accordion-inner-border-radius); 83 | } 84 | } 85 | 86 | .accordion-collapse { 87 | @include border-bottom-radius($accordion-border-radius); 88 | } 89 | } 90 | } 91 | 92 | .accordion-body { 93 | padding: $accordion-body-padding-y $accordion-body-padding-x; 94 | } 95 | 96 | 97 | // Flush accordion items 98 | // 99 | // Remove borders and border-radius to keep accordion items edge-to-edge. 100 | 101 | .accordion-flush { 102 | .accordion-collapse { 103 | border-width: 0; 104 | } 105 | 106 | .accordion-item { 107 | border-right: 0; 108 | border-left: 0; 109 | @include border-radius(0); 110 | 111 | &:first-child { border-top: 0; } 112 | &:last-child { border-bottom: 0; } 113 | 114 | .accordion-button { 115 | @include border-radius(0); 116 | } 117 | } 118 | } 119 | -------------------------------------------------------------------------------- /app/libs/bootstrap/scss/_alert.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Base styles 3 | // 4 | 5 | .alert { 6 | position: relative; 7 | padding: $alert-padding-y $alert-padding-x; 8 | margin-bottom: $alert-margin-bottom; 9 | border: $alert-border-width solid transparent; 10 | @include border-radius($alert-border-radius); 11 | } 12 | 13 | // Headings for larger alerts 14 | .alert-heading { 15 | // Specified to prevent conflicts of changing $headings-color 16 | color: inherit; 17 | } 18 | 19 | // Provide class for links that match alerts 20 | .alert-link { 21 | font-weight: $alert-link-font-weight; 22 | } 23 | 24 | 25 | // Dismissible alerts 26 | // 27 | // Expand the right padding and account for the close button's positioning. 28 | 29 | .alert-dismissible { 30 | padding-right: $alert-dismissible-padding-r; 31 | 32 | // Adjust close link position 33 | .btn-close { 34 | position: absolute; 35 | top: 0; 36 | right: 0; 37 | z-index: $stretched-link-z-index + 1; 38 | padding: $alert-padding-y * 1.25 $alert-padding-x; 39 | } 40 | } 41 | 42 | 43 | // scss-docs-start alert-modifiers 44 | // Generate contextual modifier classes for colorizing the alert. 45 | 46 | @each $state, $value in $theme-colors { 47 | $alert-background: shift-color($value, $alert-bg-scale); 48 | $alert-border: shift-color($value, $alert-border-scale); 49 | $alert-color: shift-color($value, $alert-color-scale); 50 | @if (contrast-ratio($alert-background, $alert-color) < $min-contrast-ratio) { 51 | $alert-color: mix($value, color-contrast($alert-background), abs($alert-color-scale)); 52 | } 53 | .alert-#{$state} { 54 | @include alert-variant($alert-background, $alert-border, $alert-color); 55 | } 56 | } 57 | // scss-docs-end alert-modifiers 58 | -------------------------------------------------------------------------------- /app/libs/bootstrap/scss/_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 | display: inline-block; 8 | padding: $badge-padding-y $badge-padding-x; 9 | @include font-size($badge-font-size); 10 | font-weight: $badge-font-weight; 11 | line-height: 1; 12 | color: $badge-color; 13 | text-align: center; 14 | white-space: nowrap; 15 | vertical-align: baseline; 16 | @include border-radius($badge-border-radius); 17 | @include gradient-bg(); 18 | 19 | // Empty badges collapse automatically 20 | &:empty { 21 | display: none; 22 | } 23 | } 24 | 25 | // Quick fix for badges in buttons 26 | .btn .badge { 27 | position: relative; 28 | top: -1px; 29 | } 30 | -------------------------------------------------------------------------------- /app/libs/bootstrap/scss/_breadcrumb.scss: -------------------------------------------------------------------------------- 1 | .breadcrumb { 2 | display: flex; 3 | flex-wrap: wrap; 4 | padding: $breadcrumb-padding-y $breadcrumb-padding-x; 5 | margin-bottom: $breadcrumb-margin-bottom; 6 | @include font-size($breadcrumb-font-size); 7 | list-style: none; 8 | background-color: $breadcrumb-bg; 9 | @include border-radius($breadcrumb-border-radius); 10 | } 11 | 12 | .breadcrumb-item { 13 | // The separator between breadcrumbs (by default, a forward-slash: "/") 14 | + .breadcrumb-item { 15 | padding-left: $breadcrumb-item-padding-x; 16 | 17 | &::before { 18 | float: left; // Suppress inline spacings and underlining of the separator 19 | padding-right: $breadcrumb-item-padding-x; 20 | color: $breadcrumb-divider-color; 21 | content: var(--#{$variable-prefix}breadcrumb-divider, escape-svg($breadcrumb-divider)) #{"/* rtl:"} var(--#{$variable-prefix}breadcrumb-divider, escape-svg($breadcrumb-divider-flipped)) #{"*/"}; 22 | } 23 | } 24 | 25 | &.active { 26 | color: $breadcrumb-active-color; 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /app/libs/bootstrap/scss/_button-group.scss: -------------------------------------------------------------------------------- 1 | // Make the div behave like a button 2 | .btn-group, 3 | .btn-group-vertical { 4 | position: relative; 5 | display: inline-flex; 6 | vertical-align: middle; // match .btn alignment given font-size hack above 7 | 8 | > .btn { 9 | position: relative; 10 | flex: 1 1 auto; 11 | } 12 | 13 | // Bring the hover, focused, and "active" buttons to the front to overlay 14 | // the borders properly 15 | > .btn-check:checked + .btn, 16 | > .btn-check:focus + .btn, 17 | > .btn:hover, 18 | > .btn:focus, 19 | > .btn:active, 20 | > .btn.active { 21 | z-index: 1; 22 | } 23 | } 24 | 25 | // Optional: Group multiple button groups together for a toolbar 26 | .btn-toolbar { 27 | display: flex; 28 | flex-wrap: wrap; 29 | justify-content: flex-start; 30 | 31 | .input-group { 32 | width: auto; 33 | } 34 | } 35 | 36 | .btn-group { 37 | // Prevent double borders when buttons are next to each other 38 | > .btn:not(:first-child), 39 | > .btn-group:not(:first-child) { 40 | margin-left: -$btn-border-width; 41 | } 42 | 43 | // Reset rounded corners 44 | > .btn:not(:last-child):not(.dropdown-toggle), 45 | > .btn-group:not(:last-child) > .btn { 46 | @include border-end-radius(0); 47 | } 48 | 49 | // The left radius should be 0 if the button is: 50 | // - the "third or more" child 51 | // - the second child and the previous element isn't `.btn-check` (making it the first child visually) 52 | // - part of a btn-group which isn't the first child 53 | > .btn:nth-child(n + 3), 54 | > :not(.btn-check) + .btn, 55 | > .btn-group:not(:first-child) > .btn { 56 | @include border-start-radius(0); 57 | } 58 | } 59 | 60 | // Sizing 61 | // 62 | // Remix the default button sizing classes into new ones for easier manipulation. 63 | 64 | .btn-group-sm > .btn { @extend .btn-sm; } 65 | .btn-group-lg > .btn { @extend .btn-lg; } 66 | 67 | 68 | // 69 | // Split button dropdowns 70 | // 71 | 72 | .dropdown-toggle-split { 73 | padding-right: $btn-padding-x * .75; 74 | padding-left: $btn-padding-x * .75; 75 | 76 | &::after, 77 | .dropup &::after, 78 | .dropend &::after { 79 | margin-left: 0; 80 | } 81 | 82 | .dropstart &::before { 83 | margin-right: 0; 84 | } 85 | } 86 | 87 | .btn-sm + .dropdown-toggle-split { 88 | padding-right: $btn-padding-x-sm * .75; 89 | padding-left: $btn-padding-x-sm * .75; 90 | } 91 | 92 | .btn-lg + .dropdown-toggle-split { 93 | padding-right: $btn-padding-x-lg * .75; 94 | padding-left: $btn-padding-x-lg * .75; 95 | } 96 | 97 | 98 | // The clickable button for toggling the menu 99 | // Set the same inset shadow as the :active state 100 | .btn-group.show .dropdown-toggle { 101 | @include box-shadow($btn-active-box-shadow); 102 | 103 | // Show no shadow for `.btn-link` since it has no other button styles. 104 | &.btn-link { 105 | @include box-shadow(none); 106 | } 107 | } 108 | 109 | 110 | // 111 | // Vertical button groups 112 | // 113 | 114 | .btn-group-vertical { 115 | flex-direction: column; 116 | align-items: flex-start; 117 | justify-content: center; 118 | 119 | > .btn, 120 | > .btn-group { 121 | width: 100%; 122 | } 123 | 124 | > .btn:not(:first-child), 125 | > .btn-group:not(:first-child) { 126 | margin-top: -$btn-border-width; 127 | } 128 | 129 | // Reset rounded corners 130 | > .btn:not(:last-child):not(.dropdown-toggle), 131 | > .btn-group:not(:last-child) > .btn { 132 | @include border-bottom-radius(0); 133 | } 134 | 135 | > .btn ~ .btn, 136 | > .btn-group:not(:first-child) > .btn { 137 | @include border-top-radius(0); 138 | } 139 | } 140 | -------------------------------------------------------------------------------- /app/libs/bootstrap/scss/_buttons.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Base styles 3 | // 4 | 5 | .btn { 6 | display: inline-block; 7 | font-family: $btn-font-family; 8 | font-weight: $btn-font-weight; 9 | line-height: $btn-line-height; 10 | color: $body-color; 11 | text-align: center; 12 | text-decoration: if($link-decoration == none, null, none); 13 | white-space: $btn-white-space; 14 | vertical-align: middle; 15 | cursor: if($enable-button-pointers, pointer, null); 16 | user-select: none; 17 | background-color: transparent; 18 | border: $btn-border-width solid transparent; 19 | @include button-size($btn-padding-y, $btn-padding-x, $btn-font-size, $btn-border-radius); 20 | @include transition($btn-transition); 21 | 22 | &:hover { 23 | color: $body-color; 24 | text-decoration: if($link-hover-decoration == underline, none, null); 25 | } 26 | 27 | .btn-check:focus + &, 28 | &:focus { 29 | outline: 0; 30 | box-shadow: $btn-focus-box-shadow; 31 | } 32 | 33 | .btn-check:checked + &, 34 | .btn-check:active + &, 35 | &:active, 36 | &.active { 37 | @include box-shadow($btn-active-box-shadow); 38 | 39 | &:focus { 40 | @include box-shadow($btn-focus-box-shadow, $btn-active-box-shadow); 41 | } 42 | } 43 | 44 | &:disabled, 45 | &.disabled, 46 | fieldset:disabled & { 47 | pointer-events: none; 48 | opacity: $btn-disabled-opacity; 49 | @include box-shadow(none); 50 | } 51 | } 52 | 53 | 54 | // 55 | // Alternate buttons 56 | // 57 | 58 | // scss-docs-start btn-variant-loops 59 | @each $color, $value in $theme-colors { 60 | .btn-#{$color} { 61 | @include button-variant($value, $value); 62 | } 63 | } 64 | 65 | @each $color, $value in $theme-colors { 66 | .btn-outline-#{$color} { 67 | @include button-outline-variant($value); 68 | } 69 | } 70 | // scss-docs-end btn-variant-loops 71 | 72 | 73 | // 74 | // Link buttons 75 | // 76 | 77 | // Make a button look and behave like a link 78 | .btn-link { 79 | font-weight: $font-weight-normal; 80 | color: $btn-link-color; 81 | text-decoration: $link-decoration; 82 | 83 | &:hover { 84 | color: $btn-link-hover-color; 85 | text-decoration: $link-hover-decoration; 86 | } 87 | 88 | &:focus { 89 | text-decoration: $link-hover-decoration; 90 | } 91 | 92 | &:disabled, 93 | &.disabled { 94 | color: $btn-link-disabled-color; 95 | } 96 | 97 | // No need for an active state here 98 | } 99 | 100 | 101 | // 102 | // Button Sizes 103 | // 104 | 105 | .btn-lg { 106 | @include button-size($btn-padding-y-lg, $btn-padding-x-lg, $btn-font-size-lg, $btn-border-radius-lg); 107 | } 108 | 109 | .btn-sm { 110 | @include button-size($btn-padding-y-sm, $btn-padding-x-sm, $btn-font-size-sm, $btn-border-radius-sm); 111 | } 112 | -------------------------------------------------------------------------------- /app/libs/bootstrap/scss/_card.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Base styles 3 | // 4 | 5 | .card { 6 | position: relative; 7 | display: flex; 8 | flex-direction: column; 9 | min-width: 0; // See https://github.com/twbs/bootstrap/pull/22740#issuecomment-305868106 10 | height: $card-height; 11 | word-wrap: break-word; 12 | background-color: $card-bg; 13 | background-clip: border-box; 14 | border: $card-border-width solid $card-border-color; 15 | @include border-radius($card-border-radius); 16 | @include box-shadow($card-box-shadow); 17 | 18 | > hr { 19 | margin-right: 0; 20 | margin-left: 0; 21 | } 22 | 23 | > .list-group { 24 | border-top: inherit; 25 | border-bottom: inherit; 26 | 27 | &:first-child { 28 | border-top-width: 0; 29 | @include border-top-radius($card-inner-border-radius); 30 | } 31 | 32 | &:last-child { 33 | border-bottom-width: 0; 34 | @include border-bottom-radius($card-inner-border-radius); 35 | } 36 | } 37 | 38 | // Due to specificity of the above selector (`.card > .list-group`), we must 39 | // use a child selector here to prevent double borders. 40 | > .card-header + .list-group, 41 | > .list-group + .card-footer { 42 | border-top: 0; 43 | } 44 | } 45 | 46 | .card-body { 47 | // Enable `flex-grow: 1` for decks and groups so that card blocks take up 48 | // as much space as possible, ensuring footers are aligned to the bottom. 49 | flex: 1 1 auto; 50 | padding: $card-spacer-y $card-spacer-x; 51 | color: $card-color; 52 | } 53 | 54 | .card-title { 55 | margin-bottom: $card-title-spacer-y; 56 | } 57 | 58 | .card-subtitle { 59 | margin-top: -$card-title-spacer-y * .5; 60 | margin-bottom: 0; 61 | } 62 | 63 | .card-text:last-child { 64 | margin-bottom: 0; 65 | } 66 | 67 | .card-link { 68 | &:hover { 69 | text-decoration: if($link-hover-decoration == underline, none, null); 70 | } 71 | 72 | + .card-link { 73 | margin-left: $card-spacer-x; 74 | } 75 | } 76 | 77 | // 78 | // Optional textual caps 79 | // 80 | 81 | .card-header { 82 | padding: $card-cap-padding-y $card-cap-padding-x; 83 | margin-bottom: 0; // Removes the default margin-bottom of 84 | color: $card-cap-color; 85 | background-color: $card-cap-bg; 86 | border-bottom: $card-border-width solid $card-border-color; 87 | 88 | &:first-child { 89 | @include border-radius($card-inner-border-radius $card-inner-border-radius 0 0); 90 | } 91 | } 92 | 93 | .card-footer { 94 | padding: $card-cap-padding-y $card-cap-padding-x; 95 | color: $card-cap-color; 96 | background-color: $card-cap-bg; 97 | border-top: $card-border-width solid $card-border-color; 98 | 99 | &:last-child { 100 | @include border-radius(0 0 $card-inner-border-radius $card-inner-border-radius); 101 | } 102 | } 103 | 104 | 105 | // 106 | // Header navs 107 | // 108 | 109 | .card-header-tabs { 110 | margin-right: -$card-cap-padding-x * .5; 111 | margin-bottom: -$card-cap-padding-y; 112 | margin-left: -$card-cap-padding-x * .5; 113 | border-bottom: 0; 114 | 115 | @if $nav-tabs-link-active-bg != $card-bg { 116 | .nav-link.active { 117 | background-color: $card-bg; 118 | border-bottom-color: $card-bg; 119 | } 120 | } 121 | } 122 | 123 | .card-header-pills { 124 | margin-right: -$card-cap-padding-x * .5; 125 | margin-left: -$card-cap-padding-x * .5; 126 | } 127 | 128 | // Card image 129 | .card-img-overlay { 130 | position: absolute; 131 | top: 0; 132 | right: 0; 133 | bottom: 0; 134 | left: 0; 135 | padding: $card-img-overlay-padding; 136 | @include border-radius($card-inner-border-radius); 137 | } 138 | 139 | .card-img, 140 | .card-img-top, 141 | .card-img-bottom { 142 | width: 100%; // Required because we use flexbox and this inherently applies align-self: stretch 143 | } 144 | 145 | .card-img, 146 | .card-img-top { 147 | @include border-top-radius($card-inner-border-radius); 148 | } 149 | 150 | .card-img, 151 | .card-img-bottom { 152 | @include border-bottom-radius($card-inner-border-radius); 153 | } 154 | 155 | 156 | // 157 | // Card groups 158 | // 159 | 160 | .card-group { 161 | // The child selector allows nested `.card` within `.card-group` 162 | // to display properly. 163 | > .card { 164 | margin-bottom: $card-group-margin; 165 | } 166 | 167 | @include media-breakpoint-up(sm) { 168 | display: flex; 169 | flex-flow: row wrap; 170 | // The child selector allows nested `.card` within `.card-group` 171 | // to display properly. 172 | > .card { 173 | // Flexbugs #4: https://github.com/philipwalton/flexbugs#flexbug-4 174 | flex: 1 0 0%; 175 | margin-bottom: 0; 176 | 177 | + .card { 178 | margin-left: 0; 179 | border-left: 0; 180 | } 181 | 182 | // Handle rounded corners 183 | @if $enable-rounded { 184 | &:not(:last-child) { 185 | @include border-end-radius(0); 186 | 187 | .card-img-top, 188 | .card-header { 189 | // stylelint-disable-next-line property-disallowed-list 190 | border-top-right-radius: 0; 191 | } 192 | .card-img-bottom, 193 | .card-footer { 194 | // stylelint-disable-next-line property-disallowed-list 195 | border-bottom-right-radius: 0; 196 | } 197 | } 198 | 199 | &:not(:first-child) { 200 | @include border-start-radius(0); 201 | 202 | .card-img-top, 203 | .card-header { 204 | // stylelint-disable-next-line property-disallowed-list 205 | border-top-left-radius: 0; 206 | } 207 | .card-img-bottom, 208 | .card-footer { 209 | // stylelint-disable-next-line property-disallowed-list 210 | border-bottom-left-radius: 0; 211 | } 212 | } 213 | } 214 | } 215 | } 216 | } 217 | -------------------------------------------------------------------------------- /app/libs/bootstrap/scss/_carousel.scss: -------------------------------------------------------------------------------- 1 | // Notes on the classes: 2 | // 3 | // 1. .carousel.pointer-event should ideally be pan-y (to allow for users to scroll vertically) 4 | // even when their scroll action started on a carousel, but for compatibility (with Firefox) 5 | // we're preventing all actions instead 6 | // 2. The .carousel-item-start and .carousel-item-end is used to indicate where 7 | // the active slide is heading. 8 | // 3. .active.carousel-item is the current slide. 9 | // 4. .active.carousel-item-start and .active.carousel-item-end is the current 10 | // slide in its in-transition state. Only one of these occurs at a time. 11 | // 5. .carousel-item-next.carousel-item-start and .carousel-item-prev.carousel-item-end 12 | // is the upcoming slide in transition. 13 | 14 | .carousel { 15 | position: relative; 16 | } 17 | 18 | .carousel.pointer-event { 19 | touch-action: pan-y; 20 | } 21 | 22 | .carousel-inner { 23 | position: relative; 24 | width: 100%; 25 | overflow: hidden; 26 | @include clearfix(); 27 | } 28 | 29 | .carousel-item { 30 | position: relative; 31 | display: none; 32 | float: left; 33 | width: 100%; 34 | margin-right: -100%; 35 | backface-visibility: hidden; 36 | @include transition($carousel-transition); 37 | } 38 | 39 | .carousel-item.active, 40 | .carousel-item-next, 41 | .carousel-item-prev { 42 | display: block; 43 | } 44 | 45 | /* rtl:begin:ignore */ 46 | .carousel-item-next:not(.carousel-item-start), 47 | .active.carousel-item-end { 48 | transform: translateX(100%); 49 | } 50 | 51 | .carousel-item-prev:not(.carousel-item-end), 52 | .active.carousel-item-start { 53 | transform: translateX(-100%); 54 | } 55 | 56 | /* rtl:end:ignore */ 57 | 58 | 59 | // 60 | // Alternate transitions 61 | // 62 | 63 | .carousel-fade { 64 | .carousel-item { 65 | opacity: 0; 66 | transition-property: opacity; 67 | transform: none; 68 | } 69 | 70 | .carousel-item.active, 71 | .carousel-item-next.carousel-item-start, 72 | .carousel-item-prev.carousel-item-end { 73 | z-index: 1; 74 | opacity: 1; 75 | } 76 | 77 | .active.carousel-item-start, 78 | .active.carousel-item-end { 79 | z-index: 0; 80 | opacity: 0; 81 | @include transition(opacity 0s $carousel-transition-duration); 82 | } 83 | } 84 | 85 | 86 | // 87 | // Left/right controls for nav 88 | // 89 | 90 | .carousel-control-prev, 91 | .carousel-control-next { 92 | position: absolute; 93 | top: 0; 94 | bottom: 0; 95 | z-index: 1; 96 | // Use flex for alignment (1-3) 97 | display: flex; // 1. allow flex styles 98 | align-items: center; // 2. vertically center contents 99 | justify-content: center; // 3. horizontally center contents 100 | width: $carousel-control-width; 101 | padding: 0; 102 | color: $carousel-control-color; 103 | text-align: center; 104 | background: none; 105 | border: 0; 106 | opacity: $carousel-control-opacity; 107 | @include transition($carousel-control-transition); 108 | 109 | // Hover/focus state 110 | &:hover, 111 | &:focus { 112 | color: $carousel-control-color; 113 | text-decoration: none; 114 | outline: 0; 115 | opacity: $carousel-control-hover-opacity; 116 | } 117 | } 118 | .carousel-control-prev { 119 | left: 0; 120 | background-image: if($enable-gradients, linear-gradient(90deg, rgba($black, .25), rgba($black, .001)), null); 121 | } 122 | .carousel-control-next { 123 | right: 0; 124 | background-image: if($enable-gradients, linear-gradient(270deg, rgba($black, .25), rgba($black, .001)), null); 125 | } 126 | 127 | // Icons for within 128 | .carousel-control-prev-icon, 129 | .carousel-control-next-icon { 130 | display: inline-block; 131 | width: $carousel-control-icon-width; 132 | height: $carousel-control-icon-width; 133 | background-repeat: no-repeat; 134 | background-position: 50%; 135 | background-size: 100% 100%; 136 | } 137 | 138 | /* rtl:options: { 139 | "autoRename": true, 140 | "stringMap":[ { 141 | "name" : "prev-next", 142 | "search" : "prev", 143 | "replace" : "next" 144 | } ] 145 | } */ 146 | .carousel-control-prev-icon { 147 | background-image: escape-svg($carousel-control-prev-icon-bg); 148 | } 149 | .carousel-control-next-icon { 150 | background-image: escape-svg($carousel-control-next-icon-bg); 151 | } 152 | 153 | // Optional indicator pips/controls 154 | // 155 | // Add a container (such as a list) with the following class and add an item (ideally a focusable control, 156 | // like a button) with data-bs-target for each slide your carousel holds. 157 | 158 | .carousel-indicators { 159 | position: absolute; 160 | right: 0; 161 | bottom: 0; 162 | left: 0; 163 | z-index: 2; 164 | display: flex; 165 | justify-content: center; 166 | padding: 0; 167 | // Use the .carousel-control's width as margin so we don't overlay those 168 | margin-right: $carousel-control-width; 169 | margin-bottom: 1rem; 170 | margin-left: $carousel-control-width; 171 | list-style: none; 172 | 173 | [data-bs-target] { 174 | box-sizing: content-box; 175 | flex: 0 1 auto; 176 | width: $carousel-indicator-width; 177 | height: $carousel-indicator-height; 178 | padding: 0; 179 | margin-right: $carousel-indicator-spacer; 180 | margin-left: $carousel-indicator-spacer; 181 | text-indent: -999px; 182 | cursor: pointer; 183 | background-color: $carousel-indicator-active-bg; 184 | background-clip: padding-box; 185 | border: 0; 186 | // Use transparent borders to increase the hit area by 10px on top and bottom. 187 | border-top: $carousel-indicator-hit-area-height solid transparent; 188 | border-bottom: $carousel-indicator-hit-area-height solid transparent; 189 | opacity: $carousel-indicator-opacity; 190 | @include transition($carousel-indicator-transition); 191 | } 192 | 193 | .active { 194 | opacity: $carousel-indicator-active-opacity; 195 | } 196 | } 197 | 198 | 199 | // Optional captions 200 | // 201 | // 202 | 203 | .carousel-caption { 204 | position: absolute; 205 | right: (100% - $carousel-caption-width) * .5; 206 | bottom: $carousel-caption-spacer; 207 | left: (100% - $carousel-caption-width) * .5; 208 | padding-top: $carousel-caption-padding-y; 209 | padding-bottom: $carousel-caption-padding-y; 210 | color: $carousel-caption-color; 211 | text-align: center; 212 | } 213 | 214 | // Dark mode carousel 215 | 216 | .carousel-dark { 217 | .carousel-control-prev-icon, 218 | .carousel-control-next-icon { 219 | filter: $carousel-dark-control-icon-filter; 220 | } 221 | 222 | .carousel-indicators [data-bs-target] { 223 | background-color: $carousel-dark-indicator-active-bg; 224 | } 225 | 226 | .carousel-caption { 227 | color: $carousel-dark-caption-color; 228 | } 229 | } 230 | -------------------------------------------------------------------------------- /app/libs/bootstrap/scss/_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 | box-sizing: content-box; 8 | width: $btn-close-width; 9 | height: $btn-close-height; 10 | padding: $btn-close-padding-y $btn-close-padding-x; 11 | color: $btn-close-color; 12 | background: transparent escape-svg($btn-close-bg) center / $btn-close-width auto no-repeat; // include transparent for button elements 13 | border: 0; // for button elements 14 | @include border-radius(); 15 | opacity: $btn-close-opacity; 16 | 17 | // Override 's hover style 18 | &:hover { 19 | color: $btn-close-color; 20 | text-decoration: none; 21 | opacity: $btn-close-hover-opacity; 22 | } 23 | 24 | &:focus { 25 | outline: 0; 26 | box-shadow: $btn-close-focus-shadow; 27 | opacity: $btn-close-focus-opacity; 28 | } 29 | 30 | &:disabled, 31 | &.disabled { 32 | pointer-events: none; 33 | user-select: none; 34 | opacity: $btn-close-disabled-opacity; 35 | } 36 | } 37 | 38 | .btn-close-white { 39 | filter: $btn-close-white-filter; 40 | } 41 | -------------------------------------------------------------------------------- /app/libs/bootstrap/scss/_containers.scss: -------------------------------------------------------------------------------- 1 | // Container widths 2 | // 3 | // Set the container width, and override it for fixed navbars in media queries. 4 | 5 | @if $enable-grid-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 | -------------------------------------------------------------------------------- /app/libs/bootstrap/scss/_dropdown.scss: -------------------------------------------------------------------------------- 1 | // The dropdown wrapper (`
`) 2 | .dropup, 3 | .dropend, 4 | .dropdown, 5 | .dropstart { 6 | position: relative; 7 | } 8 | 9 | .dropdown-toggle { 10 | white-space: nowrap; 11 | 12 | // Generate the caret automatically 13 | @include caret(); 14 | } 15 | 16 | // The dropdown menu 17 | .dropdown-menu { 18 | position: absolute; 19 | z-index: $zindex-dropdown; 20 | display: none; // none by default, but block on "open" of the menu 21 | min-width: $dropdown-min-width; 22 | padding: $dropdown-padding-y $dropdown-padding-x; 23 | margin: 0; // Override default margin of ul 24 | @include font-size($dropdown-font-size); 25 | color: $dropdown-color; 26 | text-align: left; // Ensures proper alignment if parent has it changed (e.g., modal footer) 27 | list-style: none; 28 | background-color: $dropdown-bg; 29 | background-clip: padding-box; 30 | border: $dropdown-border-width solid $dropdown-border-color; 31 | @include border-radius($dropdown-border-radius); 32 | @include box-shadow($dropdown-box-shadow); 33 | 34 | &[data-bs-popper] { 35 | top: 100%; 36 | left: 0; 37 | margin-top: $dropdown-spacer; 38 | } 39 | } 40 | 41 | // scss-docs-start responsive-breakpoints 42 | // We deliberately hardcode the `bs-` prefix because we check 43 | // this custom property in JS to determine Popper's positioning 44 | 45 | @each $breakpoint in map-keys($grid-breakpoints) { 46 | @include media-breakpoint-up($breakpoint) { 47 | $infix: breakpoint-infix($breakpoint, $grid-breakpoints); 48 | 49 | .dropdown-menu#{$infix}-start { 50 | --bs-position: start; 51 | 52 | &[data-bs-popper] { 53 | right: auto; 54 | left: 0; 55 | } 56 | } 57 | 58 | .dropdown-menu#{$infix}-end { 59 | --bs-position: end; 60 | 61 | &[data-bs-popper] { 62 | right: 0; 63 | left: auto; 64 | } 65 | } 66 | } 67 | } 68 | // scss-docs-end responsive-breakpoints 69 | 70 | // Allow for dropdowns to go bottom up (aka, dropup-menu) 71 | // Just add .dropup after the standard .dropdown class and you're set. 72 | .dropup { 73 | .dropdown-menu[data-bs-popper] { 74 | top: auto; 75 | bottom: 100%; 76 | margin-top: 0; 77 | margin-bottom: $dropdown-spacer; 78 | } 79 | 80 | .dropdown-toggle { 81 | @include caret(up); 82 | } 83 | } 84 | 85 | .dropend { 86 | .dropdown-menu[data-bs-popper] { 87 | top: 0; 88 | right: auto; 89 | left: 100%; 90 | margin-top: 0; 91 | margin-left: $dropdown-spacer; 92 | } 93 | 94 | .dropdown-toggle { 95 | @include caret(end); 96 | &::after { 97 | vertical-align: 0; 98 | } 99 | } 100 | } 101 | 102 | .dropstart { 103 | .dropdown-menu[data-bs-popper] { 104 | top: 0; 105 | right: 100%; 106 | left: auto; 107 | margin-top: 0; 108 | margin-right: $dropdown-spacer; 109 | } 110 | 111 | .dropdown-toggle { 112 | @include caret(start); 113 | &::before { 114 | vertical-align: 0; 115 | } 116 | } 117 | } 118 | 119 | 120 | // Dividers (basically an `
`) within the dropdown 121 | .dropdown-divider { 122 | height: 0; 123 | margin: $dropdown-divider-margin-y 0; 124 | overflow: hidden; 125 | border-top: 1px solid $dropdown-divider-bg; 126 | } 127 | 128 | // Links, buttons, and more within the dropdown menu 129 | // 130 | // `