diff --git a/.gitignore b/.gitignore index dd969b7806..e80262bb24 100644 --- a/.gitignore +++ b/.gitignore @@ -130,9 +130,6 @@ nCrunchTemp_* *.mm.* AutoTest.Net/ -# Web workbench (sass) -.sass-cache/ - # Installshield output folder [Ee]xpress/ diff --git a/docs-website/docs/getting-started/from-source.md b/docs-website/docs/getting-started/from-source.md index 0c35a17bc3..408dea1381 100644 --- a/docs-website/docs/getting-started/from-source.md +++ b/docs-website/docs/getting-started/from-source.md @@ -15,9 +15,6 @@ Windows; it runs under Linux and macOS as well. * [PostgreSQL](https://www.postgresql.org/download/) installed * Visual Studio 2026, with the workloads for *ASP.NET Web development* and *.NET Desktop development*. Please keep it up-to-date to prevent issues. -* The Visual Studio extension - [Web Compiler 2022+](https://marketplace.visualstudio.com/items?itemName=Failwyn.WebCompiler64), - if you plan to edit SCSS files of the admin panel * [.NET SDK 10](https://dotnet.microsoft.com/download/dotnet/10.0) — it should already be included in Visual Studio 2026 ```powershell diff --git a/src/Directory.Packages.props b/src/Directory.Packages.props index 98073cb6ff..94383d0c9b 100644 --- a/src/Directory.Packages.props +++ b/src/Directory.Packages.props @@ -7,7 +7,6 @@ - diff --git a/src/Web/AdminPanel/Components/ConnectServer/ConnectServerConfiguration.razor b/src/Web/AdminPanel/Components/ConnectServer/ConnectServerConfiguration.razor index 27b99025d7..7d244918a3 100644 --- a/src/Web/AdminPanel/Components/ConnectServer/ConnectServerConfiguration.razor +++ b/src/Web/AdminPanel/Components/ConnectServer/ConnectServerConfiguration.razor @@ -19,21 +19,21 @@ else
@Resources.MajorVersion
- +
@Resources.MinorVersion
- +
@Resources.Patch
- +
@@ -43,7 +43,7 @@ else
ftp://
- + @@ -56,7 +56,7 @@ else - + diff --git a/src/Web/AdminPanel/MUnique.OpenMU.Web.AdminPanel.csproj b/src/Web/AdminPanel/MUnique.OpenMU.Web.AdminPanel.csproj index a763e9b04c..d1da1f7e10 100644 --- a/src/Web/AdminPanel/MUnique.OpenMU.Web.AdminPanel.csproj +++ b/src/Web/AdminPanel/MUnique.OpenMU.Web.AdminPanel.csproj @@ -77,4 +77,9 @@ + + + diff --git a/src/Web/AdminPanel/Pages/LogFiles.razor b/src/Web/AdminPanel/Pages/LogFiles.razor index 6dd5dc8015..ff464218f3 100644 --- a/src/Web/AdminPanel/Pages/LogFiles.razor +++ b/src/Web/AdminPanel/Pages/LogFiles.razor @@ -15,7 +15,7 @@
-
+
@Resources.LogFiles
- + @if (this._selectedFile == null) @@ -143,6 +143,7 @@ private const long LogReadBufferSizeBytes = 102400; // 100 KB private const int LiveUpdateIntervalMs = 2000; private const string TerminalElementId = "log-terminal"; + private const string JsModulePath = "./_content/MUnique.OpenMU.Web.AdminPanel/Pages/LogFiles.razor.js"; private readonly List _files = new(); private FileInfo? _selectedFile; @@ -188,7 +189,7 @@ { try { - this._jsModule = await this.JSRuntime.InvokeAsync("import", "./Pages/LogFiles.razor.js"); + this._jsModule = await this.JSRuntime.InvokeAsync("import", JsModulePath); } catch (JSException ex) { diff --git a/src/Web/ItemEditor/MUnique.OpenMU.Web.ItemEditor.csproj b/src/Web/ItemEditor/MUnique.OpenMU.Web.ItemEditor.csproj index 0fb2068a0f..5f997a2dc4 100644 --- a/src/Web/ItemEditor/MUnique.OpenMU.Web.ItemEditor.csproj +++ b/src/Web/ItemEditor/MUnique.OpenMU.Web.ItemEditor.csproj @@ -9,10 +9,6 @@ True - - - - diff --git a/src/Web/Map/MUnique.OpenMU.Web.Map.csproj b/src/Web/Map/MUnique.OpenMU.Web.Map.csproj index 3a03c5a550..f4d7639349 100644 --- a/src/Web/Map/MUnique.OpenMU.Web.Map.csproj +++ b/src/Web/Map/MUnique.OpenMU.Web.Map.csproj @@ -38,4 +38,9 @@ + + + diff --git a/src/Web/ScopedCssBundleImports.targets b/src/Web/ScopedCssBundleImports.targets new file mode 100644 index 0000000000..412bdac626 --- /dev/null +++ b/src/Web/ScopedCssBundleImports.targets @@ -0,0 +1,43 @@ + + + + + + + + + + + + + + + + + diff --git a/src/Web/Shared/Exports.cs b/src/Web/Shared/Exports.cs index 0b90ceabf5..037bb39c7f 100644 --- a/src/Web/Shared/Exports.cs +++ b/src/Web/Shared/Exports.cs @@ -42,7 +42,17 @@ private static IEnumerable SharedStylesheets { get { - yield return $"{GetPrefix()}/css/shared.css"; + var prefix = GetPrefix(); + yield return $"{prefix}/css/bootstrap.min.css"; + yield return $"{prefix}/css/open-iconic/font/css/open-iconic-bootstrap.min.css"; + yield return $"{prefix}/css/theme.css"; + yield return $"{prefix}/css/navigation.css"; + yield return $"{prefix}/css/main.css"; + yield return $"{prefix}/css/forms.css"; + yield return $"{prefix}/css/tables.css"; + yield return $"{prefix}/css/common.css"; + yield return $"{prefix}/css/log.css"; + yield return $"{prefix}/css/map-editor.css"; } } diff --git a/src/Web/Shared/MUnique.OpenMU.Web.Shared.csproj b/src/Web/Shared/MUnique.OpenMU.Web.Shared.csproj index ee5fe235ec..e5450a3718 100644 --- a/src/Web/Shared/MUnique.OpenMU.Web.Shared.csproj +++ b/src/Web/Shared/MUnique.OpenMU.Web.Shared.csproj @@ -21,10 +21,6 @@ - - - - ..\..\..\bin\Debug\ ..\..\..\bin\Debug\MUnique.OpenMU.Web.Shared.xml @@ -38,7 +34,6 @@ - @@ -76,23 +71,10 @@ - - - - - - - - - - - - - diff --git a/src/Web/Shared/Styles/Common.scss b/src/Web/Shared/Styles/Common.scss deleted file mode 100644 index 383ef91ea6..0000000000 --- a/src/Web/Shared/Styles/Common.scss +++ /dev/null @@ -1,28 +0,0 @@ -$widthThreshold: 768px; - -.page { - position: relative; - display: flex; - flex-direction: column; -} - -@media (min-width: $widthThreshold) { - .page { - flex-direction: row; - min-height: 100vh; - } -} - -html, body { - font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; -} - -a, .btn-link { - color: var(--omu-link); -} - -mark { - font-weight: bold; - background: var(--omu-mark-bg); - padding: 0; -} diff --git a/src/Web/Shared/Styles/Forms.scss b/src/Web/Shared/Styles/Forms.scss deleted file mode 100644 index cd5bf04d4b..0000000000 --- a/src/Web/Shared/Styles/Forms.scss +++ /dev/null @@ -1,88 +0,0 @@ -.invalid.modified { - @extend .is-invalid; -} - -.valid.modified { - @extend .is-valid; - @extend .was-validated; - @extend .form-control, :valid; -} - -.form-check-input { - padding: 0; - width: 1em; - height: 1em; - min-width: 1em; - min-height: 1em; -} - -details > summary { - list-style: none; -} - -details > summary::-webkit-details-marker { - display: none; -} - -details > summary::before { - font-family: Icons; - content: '\e07c'; - margin-right: 0.25em; -} - -details[open] > summary::before { - content: '\e039'; -} - -label > details.info-popup { - position: relative; - display: inline-block; -} - -label > details[open] { - z-index: 5; -} - -label > details.info-popup > div { - position: absolute; - top: 100%; - left: 0; - margin-top: 0.25rem; - width: max-content; - max-width: min(600px, 90vw); - white-space: normal; -} - -.form-actions { - position: sticky; - bottom: 0; - z-index: 3; - background-color: var(--omu-surface-2); - padding: 1rem 1.5rem; - border-top: var(--bs-border-width) solid var(--omu-border); - display: flex; - gap: 0.5rem; - justify-content: flex-start; - box-sizing: border-box; -} - -.form-actions .btn-secondary { - margin-left: 1rem; -} - -.auto-form-search-group { - position: relative; -} - -.auto-form-search-group .form-control { - padding-left: 2.25rem; -} - -.auto-form-search-group .search-icon { - position: absolute; - left: 0.75rem; - top: 50%; - transform: translateY(-50%); - color: var(--omu-text-muted); - pointer-events: none; -} \ No newline at end of file diff --git a/src/Web/Shared/Styles/Log.scss b/src/Web/Shared/Styles/Log.scss deleted file mode 100644 index 5bd23212a7..0000000000 --- a/src/Web/Shared/Styles/Log.scss +++ /dev/null @@ -1,54 +0,0 @@ -.log { - color: #0f0; - background-color: #333; -} - -.log table { - font-family: "Lucida Console"; - font-size: 12px; - color: #0f0; - border-color: var(--omu-text); - border-width: 1px 0 0 0; - background-color: #333; -} - -.log tr.INFO { - color: #0f0; -} - -.log tr.DEBUG { - color: var(--omu-text); -} - -.log tr.WARN { - color: #F88017; -} - -.log tr.ERROR { - color: #FF0000; -} - -.log tr.FATAL { - background-color: #FF0000; -} - -#logger { - max-width: 500px -} - -.verticalLine { - border-left: thick solid #ff0000; -} - -div.log-notifications { - position: relative; - left: 20px; -} - -.log-notifications .oi-fire { - color: orangered; -} - -.log-notifications .oi-warning { - color: orange; -} \ No newline at end of file diff --git a/src/Web/Shared/Styles/Main.scss b/src/Web/Shared/Styles/Main.scss deleted file mode 100644 index 12b31f0514..0000000000 --- a/src/Web/Shared/Styles/Main.scss +++ /dev/null @@ -1,44 +0,0 @@ -.main { - flex: 1; -} - - .main .top-row { - background-color: var(--omu-surface-muted); - border-bottom: 1px solid var(--omu-border); - justify-content: flex-end; - } - - .main .top-row > a, .main .top-row .btn-link { - white-space: nowrap; - margin-left: 1.5rem; - } - - .main .top-row a:first-child { - overflow: hidden; - text-overflow: ellipsis; - } - - @media (max-width: 767.98px) { - .main .top-row:not(.auth) { - display: none; - } - - .main .top-row.auth { - justify-content: space-between; - } - - .main .top-row a, .main .top-row .btn-link { - margin-left: 0; - } - } - - @media (min-width: 768px) { - .main .top-row { - top: 0; - } - - .main > div { - padding-left: 2rem; - padding-right: 1.5rem; - } - } diff --git a/src/Web/Shared/Styles/MapEditor.scss b/src/Web/Shared/Styles/MapEditor.scss deleted file mode 100644 index cccf4078cb..0000000000 --- a/src/Web/Shared/Styles/MapEditor.scss +++ /dev/null @@ -1,266 +0,0 @@ -@import "Common"; - -$map-host-size: 768px; - -.map-editor-row { - display: flex; - flex-wrap: nowrap; - gap: 15px; -} - -.map-column { - flex-shrink: 0; -} - -.map-object-column { - width: 440px; - min-width: 440px; - max-width: 440px; - flex-shrink: 0; -} - -.map-form-column { - flex: 1; - min-width: 300px; -} - -.map-host-container { - position: relative; - display: inline-block; -} - -.map-host { - position: relative; - width: $map-host-size; - height: $map-host-size; - overflow: auto; - user-select: none; - cursor: grab; - background-color: #1a1a2e; - border: 2px solid #333; - border-radius: 4px; - - &::-webkit-scrollbar { - width: 12px; - height: 12px; - } - - &::-webkit-scrollbar-track { - background: #1a1a2e; - } - - &::-webkit-scrollbar-thumb { - background: #555; - border-radius: 4px; - - &:hover { - background: #666; - } - } - - &:active { - cursor: grabbing; - } -} - -.map-content { - position: relative; - - img { - display: block; - image-rendering: pixelated; - image-rendering: -moz-crisp-edges; - image-rendering: crisp-edges; - pointer-events: none; - } -} - -.coordinate-grid { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - pointer-events: none; - background-image: - linear-gradient(to right, rgba(0, 0, 0, 0.5) 1px, transparent 1px), - linear-gradient(to bottom, rgba(0, 0, 0, 0.5) 1px, transparent 1px); -} - -.map-coordinates-overlay { - position: absolute; - bottom: 20px; - left: 8px; - z-index: 100; - pointer-events: none; - - .coord-label { - padding: 6px 12px; - background: rgba(0, 0, 0, 0.9); - color: #00ff00; - font-family: 'Consolas', monospace; - font-size: 14px; - font-weight: bold; - border-radius: 4px; - border: 1px solid #00aa00; - } -} - -.map-zoom-display { - position: absolute; - bottom: 20px; - right: 20px; - z-index: 100; - pointer-events: none; - - .zoom-label { - padding: 6px 12px; - background: rgba(0, 0, 0, 0.9); - color: #ffaa00; - font-family: 'Consolas', monospace; - font-size: 14px; - font-weight: bold; - border-radius: 4px; - border: 1px solid #aa7700; - } -} - -.map-object-select { - select { - width: 100%; - } -} - -.map-object { - position: absolute; - box-sizing: border-box; -} - -.gate-enter { - @extend .map-object; - --obj-color: rgb(200, 160, 240); - background: rgba(200, 160, 240, 0.7); - border: 2px solid rgb(230, 190, 255); -} - -.gate-exit { - @extend .map-object; - --obj-color: rgb(140, 80, 200); - background: rgba(140, 80, 200, 0.7); - border: 2px solid rgb(170, 110, 230); -} - -.spawn-monster-area { - @extend .map-object; - --obj-color: rgb(200, 80, 80); - background: rgba(200, 80, 80, 0.7); - border: 2px dashed rgb(230, 110, 110); -} - -.spawn-monster-single { - @extend .map-object; - --obj-color: rgb(200, 80, 80); - background: rgba(200, 80, 80, 0.7); - border-radius: 50%; - border: 2px solid rgb(230, 110, 110); -} - -.spawn-npc-area { - @extend .map-object; - --obj-color: rgb(80, 80, 200); - background: rgba(80, 80, 200, 0.7); - border: 2px dashed rgb(110, 110, 230); -} - -.spawn-npc-single { - @extend .map-object; - --obj-color: rgb(80, 80, 200); - background: rgba(80, 80, 200, 0.7); - border-radius: 50%; - border: 2px solid rgb(110, 110, 230); -} - -.spawn-other-area { - @extend .map-object; - --obj-color: rgb(200, 200, 80); - background: rgba(200, 200, 80, 0.7); - border: 2px dashed rgb(230, 230, 110); -} - -.spawn-other-single { - @extend .map-object; - --obj-color: rgb(200, 200, 80); - background: rgba(200, 200, 80, 0.7); - border-radius: 50%; - border: 2px solid rgb(230, 230, 110); -} - -.focused-object { - opacity: 1 !important; - border-color: #fff !important; - border-style: solid !important; - border-width: 2px !important; - box-shadow: 0 0 10px rgba(255, 255, 255, 0.6); - z-index: 20 !important; -} - -.resizers .resizer { - width: 14px; - height: 14px; - border-radius: 50%; - background: var(--obj-color); - border: 2px solid rgba(255, 255, 255, 0.85); - position: absolute; - z-index: 30; - - &.top-left { left: -8px; top: -8px; cursor: nwse-resize; } - &.top-right { right: -8px; top: -8px; cursor: nesw-resize; } - &.bottom-left { left: -8px; bottom: -8px; cursor: nesw-resize; } - &.bottom-right { right: -8px; bottom: -8px; cursor: nwse-resize; } -} - -.arrow { - border: solid white; - border-width: 0 3px 3px 0; - position: absolute; - width: 10px; - height: 10px; - left: 50%; - top: 50%; - margin-left: -5px; - margin-top: -5px; - - &.undefined { opacity: 0.3; } - &.east { transform: rotate(-45deg); } - &.southeast { transform: rotate(0deg); } - &.south { transform: rotate(45deg); } - &.southwest { transform: rotate(90deg); } - &.west { transform: rotate(135deg); } - &.northwest { transform: rotate(180deg); } - &.north { transform: rotate(225deg); } - &.northeast { transform: rotate(270deg); } -} - -.map-zoom-toolbar { - .zoom-display { - min-width: 70px; - font-family: monospace; - } -} - -.object-size-label { - position: absolute; - left: calc(100% + 4px); - top: 50%; - transform: translateY(-50%); - background: rgba(0, 0, 0, 0.65); - color: #fff; - font-size: 10px; - font-family: monospace; - white-space: nowrap; - padding: 2px 4px; - border-radius: 3px; - pointer-events: none; - user-select: none; - z-index: 10; -} \ No newline at end of file diff --git a/src/Web/Shared/Styles/Navigation.scss b/src/Web/Shared/Styles/Navigation.scss deleted file mode 100644 index 722e16fa30..0000000000 --- a/src/Web/Shared/Styles/Navigation.scss +++ /dev/null @@ -1,86 +0,0 @@ -.sidebar { - display: flex; - flex-direction: column; -} - -.sidebar > nav { - background-image: var(--omu-sidebar-gradient); -} - -@media (min-width: 768px) { - .sidebar > nav { - width: 250px; - min-height: 100%; - } - - .sidebar > nav > div:first-child > button { - display: none; - } - - .sidebar > nav > .collapse { - display: block !important; - } -} - -.sidebar .nav-link { - color: var(--omu-nav-link); - font-size: 0.9rem; - background: none; - border: none; - border-radius: 4px; - height: 3rem; - display: flex; - align-items: center; - line-height: 3rem; - width: 100%; -} - -.sidebar > nav .oi { - width: 2rem; - font-size: 1.1rem; - vertical-align: text-top; - top: -2px; -} - -.sidebar > nav > div > ul > li.dropdown > div { - display: none; -} - -.sidebar > nav > div > ul > li.dropdown > div.show { - display: block; - position: relative; - width: 100%; - border-radius: 0; -} - -.sidebar > nav > div > ul > li.dropdown > a::after { - transition: transform 0.3s ease; -} - -.sidebar > nav > div > ul > li.dropdown.expanded > a::after { - transform: rotate(180deg); -} - -.culture-selector-icon { - color: var(--omu-nav-link); -} - -.culture-selector { - display: flex; - line-height: 3rem; - align-items: center; - padding-left: 1rem; - padding-top: 1rem; - position: relative; -} - - .culture-selector::before { - content: ""; - position: absolute; - left: 0; - right: 0; - top: 0; - height: 1px; - background: linear-gradient( 90deg, rgba(215, 215, 215, 0.1) 0%, rgba(215, 215, 215, 1) 50%, rgba(215, 215, 215, 0.1) 100% ); - pointer-events: none; - } \ No newline at end of file diff --git a/src/Web/Shared/Styles/Site.scss b/src/Web/Shared/Styles/Site.scss deleted file mode 100644 index 3718c2ddc4..0000000000 --- a/src/Web/Shared/Styles/Site.scss +++ /dev/null @@ -1,26 +0,0 @@ -// Disable form validation icons and extra padding -$form-feedback-icon-valid: none; -$form-feedback-icon-invalid: none; -$enable-validation-icons: false; - -$primary: #1b6ec2; - -@import "bootstrap-5.3.8/scss/bootstrap"; - -@import "Theme"; - -@import "open-iconic/font/css/open-iconic-bootstrap.min.css"; - -@import "Navigation"; - -@import "Main"; - -@import "Forms"; - -@import "Tables"; - -@import "Common"; - -@import "Log"; - -@import "MapEditor"; \ No newline at end of file diff --git a/src/Web/Shared/Styles/Tables.scss b/src/Web/Shared/Styles/Tables.scss deleted file mode 100644 index b21bc67aea..0000000000 --- a/src/Web/Shared/Styles/Tables.scss +++ /dev/null @@ -1,51 +0,0 @@ -@keyframes FadeIn { - 0% { - opacity: 0; - transform: scale(0.999); - } - - 85% { - opacity: 1; - transform: scale(1.005); - } - - 100% { - opacity: 1; - transform: scale(1); - } -} - -@for $i from 1 through 50 { - tr:nth-child(#{$i}) { - $time: $i * 0.01 + unquote(''); - $delay: unquote( $time + 's'); - animation-delay: $delay; - animation-name: FadeIn; - animation-duration: .3s; - opacity: 0; - animation-fill-mode: forwards; - } -} - -.quickgrid { - width: 100%; - border-color: var(--bs-table-border-color); - --bs-table-striped-bg: rgba(0, 0, 0, 0.05); - --bs-table-hover-bg: rgba(0, 0, 0, 0.075); -} - -.quickgrid td, .quickgrid th { - padding: 0.5rem; -} - -.quickgrid tbody tr:nth-child(odd) { - background-color: var(--bs-table-striped-bg); -} - -.quickgrid tbody tr:hover { - background-color: var(--bs-table-hover-bg); -} - -.quickgrid tbody tr:has(td:empty) { - display: none; -} \ No newline at end of file diff --git a/src/Web/Shared/Styles/Theme.scss b/src/Web/Shared/Styles/Theme.scss deleted file mode 100644 index 066a2c93c0..0000000000 --- a/src/Web/Shared/Styles/Theme.scss +++ /dev/null @@ -1,196 +0,0 @@ -// ============================================================================= -// Theme — light + dark design tokens for custom components. -// -// BS5's built-in [data-bs-theme="dark"] (in _root.scss) handles all Bootstrap -// component dark mode automatically. This file only provides: -// a) Custom --omu-* tokens for non-Boostrap components (sidebar, -// multi-lookup-field, sticky footers, etc.) -// b) Overrides for those custom components in dark mode -// ============================================================================= - -// ----------------------------------------------------------------------------- -// SCSS token maps -// ----------------------------------------------------------------------------- - -$omu-light: ( - bg: #ffffff, - surface: #f8f9fa, - surface-2: #ffffff, - surface-muted: #f7f7f7, - surface-hover: #e9e9e9, - text: #212529, - text-muted: #5f6368, - text-secondary: #6c757d, - border: #d6d5d5, - link: #0366d6, - link-primary: #1b6ec2, - link-primary-border: #1861ac, - mark-bg: #ffff00, - error-bg: lightyellow, - error-text: #212529, - sidebar-gradient: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%), - nav-link: #d7d7d7, - spinner-dot: rgb(5, 39, 103), - overlay-bg: rgba(0, 0, 0, 0.5), - overlay-spinner: #ffffff, -); - -$omu-dark: ( - bg: #121417, - surface: #1c1f24, - surface-2: #1a1d22, - surface-muted: #23272d, - surface-hover: #2a2f36, - text: #e6e6e6, - text-muted: #a0a4ab, - text-secondary: #b0b4bb, - border: #2a2f36, - link: #66b2ff, - link-primary: #2e86d6, - link-primary-border: #1f6fb8, - mark-bg: #6b5e00, - error-bg: #3a2f00, - error-text: #f5e9b3, - sidebar-gradient: linear-gradient(180deg, #0a1330 0%, #1a0322 70%), - nav-link: #d7d7d7, - spinner-dot: #66b2ff, - overlay-bg: rgba(0, 0, 0, 0.5), - overlay-spinner: #ffffff, -); - -@mixin omu-theme-vars($map) { - @each $key, $value in $map { - --omu-#{$key}: #{$value}; - } -} - -// ----------------------------------------------------------------------------- -// Token emission -// ----------------------------------------------------------------------------- - -:root, -[data-bs-theme="light"] { - @include omu-theme-vars($omu-light); -} - -[data-bs-theme="dark"] { - @include omu-theme-vars($omu-dark); -} - -// ----------------------------------------------------------------------------- -// Base background/color — defer to BS5 CSS variables -// ----------------------------------------------------------------------------- - -html, -body { - background-color: var(--bs-body-bg); - color: var(--bs-body-color); -} - -// ----------------------------------------------------------------------------- -// Custom-component dark overrides -// ----------------------------------------------------------------------------- - -[data-bs-theme="dark"] { - - .oi { - color: inherit; - } - - .sidebar { - .nav-link { - color: var(--omu-nav-link); - } - - > nav > div > ul > li.dropdown { - > div { - background-color: var(--omu-surface); - color: var(--omu-text); - border-color: var(--omu-border); - - > a { - color: var(--omu-text); - - &:hover, - &:focus { - background-color: var(--omu-surface-hover); - color: var(--omu-text); - } - - &.active { - background-color: var(--omu-surface-hover); - color: var(--omu-text); - } - } - - hr { - border-color: var(--omu-border); - } - } - } - } - - #blazor-error-ui { - background: var(--omu-error-bg); - color: var(--omu-error-text); - } - - .creation-panel-body .form-actions { - background-color: var(--omu-surface) !important; - border-top: 1px solid var(--omu-border) !important; - } - - .add-new-bar { - background-color: var(--omu-surface) !important; - border-top: var(--bs-border-width) solid var(--omu-border) !important; - } - - .multi-lookup-field { - &__selected-items { - background: var(--omu-surface-2); - border-color: var(--omu-border); - color: var(--omu-text); - } - - &__tag { - background-color: var(--omu-surface-hover); - border-color: var(--omu-border); - color: var(--omu-text); - } - - &__tag-remove { - color: var(--omu-text-muted); - } - - &__dropdown { - background: var(--omu-surface-2); - border-color: var(--omu-border); - } - - &__dropdown-item { - color: var(--omu-text); - - &:hover, - &--selected { - background-color: var(--omu-surface-hover); - } - - &--selected:hover { - background-color: var(--omu-surface-muted); - } - - &--loading, - &--empty { - color: var(--omu-text-muted); - } - } - } - - .sort-indicator, - .go-first, - .go-previous, - .go-next, - .go-last { - filter: invert(1); - } -} diff --git a/src/Web/Shared/Styles/bootstrap-5.3.8/scss/_accordion.scss b/src/Web/Shared/Styles/bootstrap-5.3.8/scss/_accordion.scss deleted file mode 100644 index e9f267fba3..0000000000 --- a/src/Web/Shared/Styles/bootstrap-5.3.8/scss/_accordion.scss +++ /dev/null @@ -1,153 +0,0 @@ -// -// Base styles -// - -.accordion { - // scss-docs-start accordion-css-vars - --#{$prefix}accordion-color: #{$accordion-color}; - --#{$prefix}accordion-bg: #{$accordion-bg}; - --#{$prefix}accordion-transition: #{$accordion-transition}; - --#{$prefix}accordion-border-color: #{$accordion-border-color}; - --#{$prefix}accordion-border-width: #{$accordion-border-width}; - --#{$prefix}accordion-border-radius: #{$accordion-border-radius}; - --#{$prefix}accordion-inner-border-radius: #{$accordion-inner-border-radius}; - --#{$prefix}accordion-btn-padding-x: #{$accordion-button-padding-x}; - --#{$prefix}accordion-btn-padding-y: #{$accordion-button-padding-y}; - --#{$prefix}accordion-btn-color: #{$accordion-button-color}; - --#{$prefix}accordion-btn-bg: #{$accordion-button-bg}; - --#{$prefix}accordion-btn-icon: #{escape-svg($accordion-button-icon)}; - --#{$prefix}accordion-btn-icon-width: #{$accordion-icon-width}; - --#{$prefix}accordion-btn-icon-transform: #{$accordion-icon-transform}; - --#{$prefix}accordion-btn-icon-transition: #{$accordion-icon-transition}; - --#{$prefix}accordion-btn-active-icon: #{escape-svg($accordion-button-active-icon)}; - --#{$prefix}accordion-btn-focus-box-shadow: #{$accordion-button-focus-box-shadow}; - --#{$prefix}accordion-body-padding-x: #{$accordion-body-padding-x}; - --#{$prefix}accordion-body-padding-y: #{$accordion-body-padding-y}; - --#{$prefix}accordion-active-color: #{$accordion-button-active-color}; - --#{$prefix}accordion-active-bg: #{$accordion-button-active-bg}; - // scss-docs-end accordion-css-vars -} - -.accordion-button { - position: relative; - display: flex; - align-items: center; - width: 100%; - padding: var(--#{$prefix}accordion-btn-padding-y) var(--#{$prefix}accordion-btn-padding-x); - @include font-size($font-size-base); - color: var(--#{$prefix}accordion-btn-color); - text-align: left; // Reset button style - background-color: var(--#{$prefix}accordion-btn-bg); - border: 0; - @include border-radius(0); - overflow-anchor: none; - @include transition(var(--#{$prefix}accordion-transition)); - - &:not(.collapsed) { - color: var(--#{$prefix}accordion-active-color); - background-color: var(--#{$prefix}accordion-active-bg); - box-shadow: inset 0 calc(-1 * var(--#{$prefix}accordion-border-width)) 0 var(--#{$prefix}accordion-border-color); // stylelint-disable-line function-disallowed-list - - &::after { - background-image: var(--#{$prefix}accordion-btn-active-icon); - transform: var(--#{$prefix}accordion-btn-icon-transform); - } - } - - // Accordion icon - &::after { - flex-shrink: 0; - width: var(--#{$prefix}accordion-btn-icon-width); - height: var(--#{$prefix}accordion-btn-icon-width); - margin-left: auto; - content: ""; - background-image: var(--#{$prefix}accordion-btn-icon); - background-repeat: no-repeat; - background-size: var(--#{$prefix}accordion-btn-icon-width); - @include transition(var(--#{$prefix}accordion-btn-icon-transition)); - } - - &:hover { - z-index: 2; - } - - &:focus { - z-index: 3; - outline: 0; - box-shadow: var(--#{$prefix}accordion-btn-focus-box-shadow); - } -} - -.accordion-header { - margin-bottom: 0; -} - -.accordion-item { - color: var(--#{$prefix}accordion-color); - background-color: var(--#{$prefix}accordion-bg); - border: var(--#{$prefix}accordion-border-width) solid var(--#{$prefix}accordion-border-color); - - &:first-of-type { - @include border-top-radius(var(--#{$prefix}accordion-border-radius)); - - > .accordion-header .accordion-button { - @include border-top-radius(var(--#{$prefix}accordion-inner-border-radius)); - } - } - - &:not(:first-of-type) { - border-top: 0; - } - - // Only set a border-radius on the last item if the accordion is collapsed - &:last-of-type { - @include border-bottom-radius(var(--#{$prefix}accordion-border-radius)); - - > .accordion-header .accordion-button { - &.collapsed { - @include border-bottom-radius(var(--#{$prefix}accordion-inner-border-radius)); - } - } - - > .accordion-collapse { - @include border-bottom-radius(var(--#{$prefix}accordion-border-radius)); - } - } -} - -.accordion-body { - padding: var(--#{$prefix}accordion-body-padding-y) var(--#{$prefix}accordion-body-padding-x); -} - - -// Flush accordion items -// -// Remove borders and border-radius to keep accordion items edge-to-edge. - -.accordion-flush { - > .accordion-item { - border-right: 0; - border-left: 0; - @include border-radius(0); - - &:first-child { border-top: 0; } - &:last-child { border-bottom: 0; } - - // stylelint-disable selector-max-class - > .accordion-collapse, - > .accordion-header .accordion-button, - > .accordion-header .accordion-button.collapsed { - @include border-radius(0); - } - // stylelint-enable selector-max-class - } -} - -@if $enable-dark-mode { - @include color-mode(dark) { - .accordion-button::after { - --#{$prefix}accordion-btn-icon: #{escape-svg($accordion-button-icon-dark)}; - --#{$prefix}accordion-btn-active-icon: #{escape-svg($accordion-button-active-icon-dark)}; - } - } -} diff --git a/src/Web/Shared/Styles/bootstrap-5.3.8/scss/_alert.scss b/src/Web/Shared/Styles/bootstrap-5.3.8/scss/_alert.scss deleted file mode 100644 index b8cff9b71e..0000000000 --- a/src/Web/Shared/Styles/bootstrap-5.3.8/scss/_alert.scss +++ /dev/null @@ -1,68 +0,0 @@ -// -// Base styles -// - -.alert { - // scss-docs-start alert-css-vars - --#{$prefix}alert-bg: transparent; - --#{$prefix}alert-padding-x: #{$alert-padding-x}; - --#{$prefix}alert-padding-y: #{$alert-padding-y}; - --#{$prefix}alert-margin-bottom: #{$alert-margin-bottom}; - --#{$prefix}alert-color: inherit; - --#{$prefix}alert-border-color: transparent; - --#{$prefix}alert-border: #{$alert-border-width} solid var(--#{$prefix}alert-border-color); - --#{$prefix}alert-border-radius: #{$alert-border-radius}; - --#{$prefix}alert-link-color: inherit; - // scss-docs-end alert-css-vars - - position: relative; - padding: var(--#{$prefix}alert-padding-y) var(--#{$prefix}alert-padding-x); - margin-bottom: var(--#{$prefix}alert-margin-bottom); - color: var(--#{$prefix}alert-color); - background-color: var(--#{$prefix}alert-bg); - border: var(--#{$prefix}alert-border); - @include border-radius(var(--#{$prefix}alert-border-radius)); -} - -// Headings for larger alerts -.alert-heading { - // Specified to prevent conflicts of changing $headings-color - color: inherit; -} - -// Provide class for links that match alerts -.alert-link { - font-weight: $alert-link-font-weight; - color: var(--#{$prefix}alert-link-color); -} - - -// Dismissible alerts -// -// Expand the right padding and account for the close button's positioning. - -.alert-dismissible { - padding-right: $alert-dismissible-padding-r; - - // Adjust close link position - .btn-close { - position: absolute; - top: 0; - right: 0; - z-index: $stretched-link-z-index + 1; - padding: $alert-padding-y * 1.25 $alert-padding-x; - } -} - - -// scss-docs-start alert-modifiers -// Generate contextual modifier classes for colorizing the alert -@each $state in map-keys($theme-colors) { - .alert-#{$state} { - --#{$prefix}alert-color: var(--#{$prefix}#{$state}-text-emphasis); - --#{$prefix}alert-bg: var(--#{$prefix}#{$state}-bg-subtle); - --#{$prefix}alert-border-color: var(--#{$prefix}#{$state}-border-subtle); - --#{$prefix}alert-link-color: var(--#{$prefix}#{$state}-text-emphasis); - } -} -// scss-docs-end alert-modifiers diff --git a/src/Web/Shared/Styles/bootstrap-5.3.8/scss/_badge.scss b/src/Web/Shared/Styles/bootstrap-5.3.8/scss/_badge.scss deleted file mode 100644 index cc3d269556..0000000000 --- a/src/Web/Shared/Styles/bootstrap-5.3.8/scss/_badge.scss +++ /dev/null @@ -1,38 +0,0 @@ -// Base class -// -// Requires one of the contextual, color modifier classes for `color` and -// `background-color`. - -.badge { - // scss-docs-start badge-css-vars - --#{$prefix}badge-padding-x: #{$badge-padding-x}; - --#{$prefix}badge-padding-y: #{$badge-padding-y}; - @include rfs($badge-font-size, --#{$prefix}badge-font-size); - --#{$prefix}badge-font-weight: #{$badge-font-weight}; - --#{$prefix}badge-color: #{$badge-color}; - --#{$prefix}badge-border-radius: #{$badge-border-radius}; - // scss-docs-end badge-css-vars - - display: inline-block; - padding: var(--#{$prefix}badge-padding-y) var(--#{$prefix}badge-padding-x); - @include font-size(var(--#{$prefix}badge-font-size)); - font-weight: var(--#{$prefix}badge-font-weight); - line-height: 1; - color: var(--#{$prefix}badge-color); - text-align: center; - white-space: nowrap; - vertical-align: baseline; - @include border-radius(var(--#{$prefix}badge-border-radius)); - @include gradient-bg(); - - // Empty badges collapse automatically - &:empty { - display: none; - } -} - -// Quick fix for badges in buttons -.btn .badge { - position: relative; - top: -1px; -} diff --git a/src/Web/Shared/Styles/bootstrap-5.3.8/scss/_breadcrumb.scss b/src/Web/Shared/Styles/bootstrap-5.3.8/scss/_breadcrumb.scss deleted file mode 100644 index b8252ff215..0000000000 --- a/src/Web/Shared/Styles/bootstrap-5.3.8/scss/_breadcrumb.scss +++ /dev/null @@ -1,40 +0,0 @@ -.breadcrumb { - // scss-docs-start breadcrumb-css-vars - --#{$prefix}breadcrumb-padding-x: #{$breadcrumb-padding-x}; - --#{$prefix}breadcrumb-padding-y: #{$breadcrumb-padding-y}; - --#{$prefix}breadcrumb-margin-bottom: #{$breadcrumb-margin-bottom}; - @include rfs($breadcrumb-font-size, --#{$prefix}breadcrumb-font-size); - --#{$prefix}breadcrumb-bg: #{$breadcrumb-bg}; - --#{$prefix}breadcrumb-border-radius: #{$breadcrumb-border-radius}; - --#{$prefix}breadcrumb-divider-color: #{$breadcrumb-divider-color}; - --#{$prefix}breadcrumb-item-padding-x: #{$breadcrumb-item-padding-x}; - --#{$prefix}breadcrumb-item-active-color: #{$breadcrumb-active-color}; - // scss-docs-end breadcrumb-css-vars - - display: flex; - flex-wrap: wrap; - padding: var(--#{$prefix}breadcrumb-padding-y) var(--#{$prefix}breadcrumb-padding-x); - margin-bottom: var(--#{$prefix}breadcrumb-margin-bottom); - @include font-size(var(--#{$prefix}breadcrumb-font-size)); - list-style: none; - background-color: var(--#{$prefix}breadcrumb-bg); - @include border-radius(var(--#{$prefix}breadcrumb-border-radius)); -} - -.breadcrumb-item { - // The separator between breadcrumbs (by default, a forward-slash: "/") - + .breadcrumb-item { - padding-left: var(--#{$prefix}breadcrumb-item-padding-x); - - &::before { - float: left; // Suppress inline spacings and underlining of the separator - padding-right: var(--#{$prefix}breadcrumb-item-padding-x); - color: var(--#{$prefix}breadcrumb-divider-color); - content: var(--#{$prefix}breadcrumb-divider, escape-svg($breadcrumb-divider)) #{"/* rtl:"} var(--#{$prefix}breadcrumb-divider, escape-svg($breadcrumb-divider-flipped)) #{"*/"}; - } - } - - &.active { - color: var(--#{$prefix}breadcrumb-item-active-color); - } -} diff --git a/src/Web/Shared/Styles/bootstrap-5.3.8/scss/_button-group.scss b/src/Web/Shared/Styles/bootstrap-5.3.8/scss/_button-group.scss deleted file mode 100644 index 78e125224f..0000000000 --- a/src/Web/Shared/Styles/bootstrap-5.3.8/scss/_button-group.scss +++ /dev/null @@ -1,147 +0,0 @@ -// Make the div behave like a button -.btn-group, -.btn-group-vertical { - position: relative; - display: inline-flex; - vertical-align: middle; // match .btn alignment given font-size hack above - - > .btn { - position: relative; - flex: 1 1 auto; - } - - // Bring the hover, focused, and "active" buttons to the front to overlay - // the borders properly - > .btn-check:checked + .btn, - > .btn-check:focus + .btn, - > .btn:hover, - > .btn:focus, - > .btn:active, - > .btn.active { - z-index: 1; - } -} - -// Optional: Group multiple button groups together for a toolbar -.btn-toolbar { - display: flex; - flex-wrap: wrap; - justify-content: flex-start; - - .input-group { - width: auto; - } -} - -.btn-group { - @include border-radius($btn-border-radius); - - // Prevent double borders when buttons are next to each other - > :not(.btn-check:first-child) + .btn, - > .btn-group:not(:first-child) { - margin-left: calc(-1 * #{$btn-border-width}); // stylelint-disable-line function-disallowed-list - } - - // Reset rounded corners - > .btn:not(:last-child):not(.dropdown-toggle), - > .btn.dropdown-toggle-split:first-child, - > .btn-group:not(:last-child) > .btn { - @include border-end-radius(0); - } - - // The left radius should be 0 if the button is: - // - the "third or more" child - // - the second child and the previous element isn't `.btn-check` (making it the first child visually) - // - part of a btn-group which isn't the first child - > .btn:nth-child(n + 3), - > :not(.btn-check) + .btn, - > .btn-group:not(:first-child) > .btn { - @include border-start-radius(0); - } -} - -// Sizing -// -// Remix the default button sizing classes into new ones for easier manipulation. - -.btn-group-sm > .btn { @extend .btn-sm; } -.btn-group-lg > .btn { @extend .btn-lg; } - - -// -// Split button dropdowns -// - -.dropdown-toggle-split { - padding-right: $btn-padding-x * .75; - padding-left: $btn-padding-x * .75; - - &::after, - .dropup &::after, - .dropend &::after { - margin-left: 0; - } - - .dropstart &::before { - margin-right: 0; - } -} - -.btn-sm + .dropdown-toggle-split { - padding-right: $btn-padding-x-sm * .75; - padding-left: $btn-padding-x-sm * .75; -} - -.btn-lg + .dropdown-toggle-split { - padding-right: $btn-padding-x-lg * .75; - padding-left: $btn-padding-x-lg * .75; -} - - -// The clickable button for toggling the menu -// Set the same inset shadow as the :active state -.btn-group.show .dropdown-toggle { - @include box-shadow($btn-active-box-shadow); - - // Show no shadow for `.btn-link` since it has no other button styles. - &.btn-link { - @include box-shadow(none); - } -} - - -// -// Vertical button groups -// - -.btn-group-vertical { - flex-direction: column; - align-items: flex-start; - justify-content: center; - - > .btn, - > .btn-group { - width: 100%; - } - - > .btn:not(:first-child), - > .btn-group:not(:first-child) { - margin-top: calc(-1 * #{$btn-border-width}); // stylelint-disable-line function-disallowed-list - } - - // Reset rounded corners - > .btn:not(:last-child):not(.dropdown-toggle), - > .btn-group:not(:last-child) > .btn { - @include border-bottom-radius(0); - } - - // The top radius should be 0 if the button is: - // - the "third or more" child - // - the second child and the previous element isn't `.btn-check` (making it the first child visually) - // - part of a btn-group which isn't the first child - > .btn:nth-child(n + 3), - > :not(.btn-check) + .btn, - > .btn-group:not(:first-child) > .btn { - @include border-top-radius(0); - } -} diff --git a/src/Web/Shared/Styles/bootstrap-5.3.8/scss/_buttons.scss b/src/Web/Shared/Styles/bootstrap-5.3.8/scss/_buttons.scss deleted file mode 100644 index caa4518ac8..0000000000 --- a/src/Web/Shared/Styles/bootstrap-5.3.8/scss/_buttons.scss +++ /dev/null @@ -1,216 +0,0 @@ -// -// Base styles -// - -.btn { - // scss-docs-start btn-css-vars - --#{$prefix}btn-padding-x: #{$btn-padding-x}; - --#{$prefix}btn-padding-y: #{$btn-padding-y}; - --#{$prefix}btn-font-family: #{$btn-font-family}; - @include rfs($btn-font-size, --#{$prefix}btn-font-size); - --#{$prefix}btn-font-weight: #{$btn-font-weight}; - --#{$prefix}btn-line-height: #{$btn-line-height}; - --#{$prefix}btn-color: #{$btn-color}; - --#{$prefix}btn-bg: transparent; - --#{$prefix}btn-border-width: #{$btn-border-width}; - --#{$prefix}btn-border-color: transparent; - --#{$prefix}btn-border-radius: #{$btn-border-radius}; - --#{$prefix}btn-hover-border-color: transparent; - --#{$prefix}btn-box-shadow: #{$btn-box-shadow}; - --#{$prefix}btn-disabled-opacity: #{$btn-disabled-opacity}; - --#{$prefix}btn-focus-box-shadow: 0 0 0 #{$btn-focus-width} rgba(var(--#{$prefix}btn-focus-shadow-rgb), .5); - // scss-docs-end btn-css-vars - - display: inline-block; - padding: var(--#{$prefix}btn-padding-y) var(--#{$prefix}btn-padding-x); - font-family: var(--#{$prefix}btn-font-family); - @include font-size(var(--#{$prefix}btn-font-size)); - font-weight: var(--#{$prefix}btn-font-weight); - line-height: var(--#{$prefix}btn-line-height); - color: var(--#{$prefix}btn-color); - text-align: center; - text-decoration: if($link-decoration == none, null, none); - white-space: $btn-white-space; - vertical-align: middle; - cursor: if($enable-button-pointers, pointer, null); - user-select: none; - border: var(--#{$prefix}btn-border-width) solid var(--#{$prefix}btn-border-color); - @include border-radius(var(--#{$prefix}btn-border-radius)); - @include gradient-bg(var(--#{$prefix}btn-bg)); - @include box-shadow(var(--#{$prefix}btn-box-shadow)); - @include transition($btn-transition); - - &:hover { - color: var(--#{$prefix}btn-hover-color); - text-decoration: if($link-hover-decoration == underline, none, null); - background-color: var(--#{$prefix}btn-hover-bg); - border-color: var(--#{$prefix}btn-hover-border-color); - } - - .btn-check + &:hover { - // override for the checkbox/radio buttons - color: var(--#{$prefix}btn-color); - background-color: var(--#{$prefix}btn-bg); - border-color: var(--#{$prefix}btn-border-color); - } - - &:focus-visible { - color: var(--#{$prefix}btn-hover-color); - @include gradient-bg(var(--#{$prefix}btn-hover-bg)); - border-color: var(--#{$prefix}btn-hover-border-color); - outline: 0; - // Avoid using mixin so we can pass custom focus shadow properly - @if $enable-shadows { - box-shadow: var(--#{$prefix}btn-box-shadow), var(--#{$prefix}btn-focus-box-shadow); - } @else { - box-shadow: var(--#{$prefix}btn-focus-box-shadow); - } - } - - .btn-check:focus-visible + & { - border-color: var(--#{$prefix}btn-hover-border-color); - outline: 0; - // Avoid using mixin so we can pass custom focus shadow properly - @if $enable-shadows { - box-shadow: var(--#{$prefix}btn-box-shadow), var(--#{$prefix}btn-focus-box-shadow); - } @else { - box-shadow: var(--#{$prefix}btn-focus-box-shadow); - } - } - - .btn-check:checked + &, - :not(.btn-check) + &:active, - &:first-child:active, - &.active, - &.show { - color: var(--#{$prefix}btn-active-color); - background-color: var(--#{$prefix}btn-active-bg); - // Remove CSS gradients if they're enabled - background-image: if($enable-gradients, none, null); - border-color: var(--#{$prefix}btn-active-border-color); - @include box-shadow(var(--#{$prefix}btn-active-shadow)); - - &:focus-visible { - // Avoid using mixin so we can pass custom focus shadow properly - @if $enable-shadows { - box-shadow: var(--#{$prefix}btn-active-shadow), var(--#{$prefix}btn-focus-box-shadow); - } @else { - box-shadow: var(--#{$prefix}btn-focus-box-shadow); - } - } - } - - .btn-check:checked:focus-visible + & { - // Avoid using mixin so we can pass custom focus shadow properly - @if $enable-shadows { - box-shadow: var(--#{$prefix}btn-active-shadow), var(--#{$prefix}btn-focus-box-shadow); - } @else { - box-shadow: var(--#{$prefix}btn-focus-box-shadow); - } - } - - &:disabled, - &.disabled, - fieldset:disabled & { - color: var(--#{$prefix}btn-disabled-color); - pointer-events: none; - background-color: var(--#{$prefix}btn-disabled-bg); - background-image: if($enable-gradients, none, null); - border-color: var(--#{$prefix}btn-disabled-border-color); - opacity: var(--#{$prefix}btn-disabled-opacity); - @include box-shadow(none); - } -} - - -// -// Alternate buttons -// - -// scss-docs-start btn-variant-loops -@each $color, $value in $theme-colors { - .btn-#{$color} { - @if $color == "light" { - @include button-variant( - $value, - $value, - $hover-background: shade-color($value, $btn-hover-bg-shade-amount), - $hover-border: shade-color($value, $btn-hover-border-shade-amount), - $active-background: shade-color($value, $btn-active-bg-shade-amount), - $active-border: shade-color($value, $btn-active-border-shade-amount) - ); - } @else if $color == "dark" { - @include button-variant( - $value, - $value, - $hover-background: tint-color($value, $btn-hover-bg-tint-amount), - $hover-border: tint-color($value, $btn-hover-border-tint-amount), - $active-background: tint-color($value, $btn-active-bg-tint-amount), - $active-border: tint-color($value, $btn-active-border-tint-amount) - ); - } @else { - @include button-variant($value, $value); - } - } -} - -@each $color, $value in $theme-colors { - .btn-outline-#{$color} { - @include button-outline-variant($value); - } -} -// scss-docs-end btn-variant-loops - - -// -// Link buttons -// - -// Make a button look and behave like a link -.btn-link { - --#{$prefix}btn-font-weight: #{$font-weight-normal}; - --#{$prefix}btn-color: #{$btn-link-color}; - --#{$prefix}btn-bg: transparent; - --#{$prefix}btn-border-color: transparent; - --#{$prefix}btn-hover-color: #{$btn-link-hover-color}; - --#{$prefix}btn-hover-border-color: transparent; - --#{$prefix}btn-active-color: #{$btn-link-hover-color}; - --#{$prefix}btn-active-border-color: transparent; - --#{$prefix}btn-disabled-color: #{$btn-link-disabled-color}; - --#{$prefix}btn-disabled-border-color: transparent; - --#{$prefix}btn-box-shadow: 0 0 0 #000; // Can't use `none` as keyword negates all values when used with multiple shadows - --#{$prefix}btn-focus-shadow-rgb: #{$btn-link-focus-shadow-rgb}; - - text-decoration: $link-decoration; - @if $enable-gradients { - background-image: none; - } - - &:hover, - &:focus-visible { - text-decoration: $link-hover-decoration; - } - - &:focus-visible { - color: var(--#{$prefix}btn-color); - } - - &:hover { - color: var(--#{$prefix}btn-hover-color); - } - - // No need for an active state here -} - - -// -// Button Sizes -// - -.btn-lg { - @include button-size($btn-padding-y-lg, $btn-padding-x-lg, $btn-font-size-lg, $btn-border-radius-lg); -} - -.btn-sm { - @include button-size($btn-padding-y-sm, $btn-padding-x-sm, $btn-font-size-sm, $btn-border-radius-sm); -} diff --git a/src/Web/Shared/Styles/bootstrap-5.3.8/scss/_card.scss b/src/Web/Shared/Styles/bootstrap-5.3.8/scss/_card.scss deleted file mode 100644 index dcebe6ac28..0000000000 --- a/src/Web/Shared/Styles/bootstrap-5.3.8/scss/_card.scss +++ /dev/null @@ -1,238 +0,0 @@ -// -// Base styles -// - -.card { - // scss-docs-start card-css-vars - --#{$prefix}card-spacer-y: #{$card-spacer-y}; - --#{$prefix}card-spacer-x: #{$card-spacer-x}; - --#{$prefix}card-title-spacer-y: #{$card-title-spacer-y}; - --#{$prefix}card-title-color: #{$card-title-color}; - --#{$prefix}card-subtitle-color: #{$card-subtitle-color}; - --#{$prefix}card-border-width: #{$card-border-width}; - --#{$prefix}card-border-color: #{$card-border-color}; - --#{$prefix}card-border-radius: #{$card-border-radius}; - --#{$prefix}card-box-shadow: #{$card-box-shadow}; - --#{$prefix}card-inner-border-radius: #{$card-inner-border-radius}; - --#{$prefix}card-cap-padding-y: #{$card-cap-padding-y}; - --#{$prefix}card-cap-padding-x: #{$card-cap-padding-x}; - --#{$prefix}card-cap-bg: #{$card-cap-bg}; - --#{$prefix}card-cap-color: #{$card-cap-color}; - --#{$prefix}card-height: #{$card-height}; - --#{$prefix}card-color: #{$card-color}; - --#{$prefix}card-bg: #{$card-bg}; - --#{$prefix}card-img-overlay-padding: #{$card-img-overlay-padding}; - --#{$prefix}card-group-margin: #{$card-group-margin}; - // scss-docs-end card-css-vars - - position: relative; - display: flex; - flex-direction: column; - min-width: 0; // See https://github.com/twbs/bootstrap/pull/22740#issuecomment-305868106 - height: var(--#{$prefix}card-height); - color: var(--#{$prefix}body-color); - word-wrap: break-word; - background-color: var(--#{$prefix}card-bg); - background-clip: border-box; - border: var(--#{$prefix}card-border-width) solid var(--#{$prefix}card-border-color); - @include border-radius(var(--#{$prefix}card-border-radius)); - @include box-shadow(var(--#{$prefix}card-box-shadow)); - - > hr { - margin-right: 0; - margin-left: 0; - } - - > .list-group { - border-top: inherit; - border-bottom: inherit; - - &:first-child { - border-top-width: 0; - @include border-top-radius(var(--#{$prefix}card-inner-border-radius)); - } - - &:last-child { - border-bottom-width: 0; - @include border-bottom-radius(var(--#{$prefix}card-inner-border-radius)); - } - } - - // Due to specificity of the above selector (`.card > .list-group`), we must - // use a child selector here to prevent double borders. - > .card-header + .list-group, - > .list-group + .card-footer { - border-top: 0; - } -} - -.card-body { - // Enable `flex-grow: 1` for decks and groups so that card blocks take up - // as much space as possible, ensuring footers are aligned to the bottom. - flex: 1 1 auto; - padding: var(--#{$prefix}card-spacer-y) var(--#{$prefix}card-spacer-x); - color: var(--#{$prefix}card-color); -} - -.card-title { - margin-bottom: var(--#{$prefix}card-title-spacer-y); - color: var(--#{$prefix}card-title-color); -} - -.card-subtitle { - margin-top: calc(-.5 * var(--#{$prefix}card-title-spacer-y)); // stylelint-disable-line function-disallowed-list - margin-bottom: 0; - color: var(--#{$prefix}card-subtitle-color); -} - -.card-text:last-child { - margin-bottom: 0; -} - -.card-link { - &:hover { - text-decoration: if($link-hover-decoration == underline, none, null); - } - - + .card-link { - margin-left: var(--#{$prefix}card-spacer-x); - } -} - -// -// Optional textual caps -// - -.card-header { - padding: var(--#{$prefix}card-cap-padding-y) var(--#{$prefix}card-cap-padding-x); - margin-bottom: 0; // Removes the default margin-bottom of - color: var(--#{$prefix}card-cap-color); - background-color: var(--#{$prefix}card-cap-bg); - border-bottom: var(--#{$prefix}card-border-width) solid var(--#{$prefix}card-border-color); - - &:first-child { - @include border-radius(var(--#{$prefix}card-inner-border-radius) var(--#{$prefix}card-inner-border-radius) 0 0); - } -} - -.card-footer { - padding: var(--#{$prefix}card-cap-padding-y) var(--#{$prefix}card-cap-padding-x); - color: var(--#{$prefix}card-cap-color); - background-color: var(--#{$prefix}card-cap-bg); - border-top: var(--#{$prefix}card-border-width) solid var(--#{$prefix}card-border-color); - - &:last-child { - @include border-radius(0 0 var(--#{$prefix}card-inner-border-radius) var(--#{$prefix}card-inner-border-radius)); - } -} - - -// -// Header navs -// - -.card-header-tabs { - margin-right: calc(-.5 * var(--#{$prefix}card-cap-padding-x)); // stylelint-disable-line function-disallowed-list - margin-bottom: calc(-1 * var(--#{$prefix}card-cap-padding-y)); // stylelint-disable-line function-disallowed-list - margin-left: calc(-.5 * var(--#{$prefix}card-cap-padding-x)); // stylelint-disable-line function-disallowed-list - border-bottom: 0; - - .nav-link.active { - background-color: var(--#{$prefix}card-bg); - border-bottom-color: var(--#{$prefix}card-bg); - } -} - -.card-header-pills { - margin-right: calc(-.5 * var(--#{$prefix}card-cap-padding-x)); // stylelint-disable-line function-disallowed-list - margin-left: calc(-.5 * var(--#{$prefix}card-cap-padding-x)); // stylelint-disable-line function-disallowed-list -} - -// Card image -.card-img-overlay { - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - padding: var(--#{$prefix}card-img-overlay-padding); - @include border-radius(var(--#{$prefix}card-inner-border-radius)); -} - -.card-img, -.card-img-top, -.card-img-bottom { - width: 100%; // Required because we use flexbox and this inherently applies align-self: stretch -} - -.card-img, -.card-img-top { - @include border-top-radius(var(--#{$prefix}card-inner-border-radius)); -} - -.card-img, -.card-img-bottom { - @include border-bottom-radius(var(--#{$prefix}card-inner-border-radius)); -} - - -// -// Card groups -// - -.card-group { - // The child selector allows nested `.card` within `.card-group` - // to display properly. - > .card { - margin-bottom: var(--#{$prefix}card-group-margin); - } - - @include media-breakpoint-up(sm) { - display: flex; - flex-flow: row wrap; - // The child selector allows nested `.card` within `.card-group` - // to display properly. - > .card { - flex: 1 0 0; - margin-bottom: 0; - - + .card { - margin-left: 0; - border-left: 0; - } - - // Handle rounded corners - @if $enable-rounded { - &:not(:last-child) { - @include border-end-radius(0); - - > .card-img-top, - > .card-header { - // stylelint-disable-next-line property-disallowed-list - border-top-right-radius: 0; - } - > .card-img-bottom, - > .card-footer { - // stylelint-disable-next-line property-disallowed-list - border-bottom-right-radius: 0; - } - } - - &:not(:first-child) { - @include border-start-radius(0); - - > .card-img-top, - > .card-header { - // stylelint-disable-next-line property-disallowed-list - border-top-left-radius: 0; - } - > .card-img-bottom, - > .card-footer { - // stylelint-disable-next-line property-disallowed-list - border-bottom-left-radius: 0; - } - } - } - } - } -} diff --git a/src/Web/Shared/Styles/bootstrap-5.3.8/scss/_carousel.scss b/src/Web/Shared/Styles/bootstrap-5.3.8/scss/_carousel.scss deleted file mode 100644 index 5ebf6b15dc..0000000000 --- a/src/Web/Shared/Styles/bootstrap-5.3.8/scss/_carousel.scss +++ /dev/null @@ -1,226 +0,0 @@ -// Notes on the classes: -// -// 1. .carousel.pointer-event should ideally be pan-y (to allow for users to scroll vertically) -// even when their scroll action started on a carousel, but for compatibility (with Firefox) -// we're preventing all actions instead -// 2. The .carousel-item-start and .carousel-item-end is used to indicate where -// the active slide is heading. -// 3. .active.carousel-item is the current slide. -// 4. .active.carousel-item-start and .active.carousel-item-end is the current -// slide in its in-transition state. Only one of these occurs at a time. -// 5. .carousel-item-next.carousel-item-start and .carousel-item-prev.carousel-item-end -// is the upcoming slide in transition. - -.carousel { - position: relative; -} - -.carousel.pointer-event { - touch-action: pan-y; -} - -.carousel-inner { - position: relative; - width: 100%; - overflow: hidden; - @include clearfix(); -} - -.carousel-item { - position: relative; - display: none; - float: left; - width: 100%; - margin-right: -100%; - backface-visibility: hidden; - @include transition($carousel-transition); -} - -.carousel-item.active, -.carousel-item-next, -.carousel-item-prev { - display: block; -} - -.carousel-item-next:not(.carousel-item-start), -.active.carousel-item-end { - transform: translateX(100%); -} - -.carousel-item-prev:not(.carousel-item-end), -.active.carousel-item-start { - transform: translateX(-100%); -} - - -// -// Alternate transitions -// - -.carousel-fade { - .carousel-item { - opacity: 0; - transition-property: opacity; - transform: none; - } - - .carousel-item.active, - .carousel-item-next.carousel-item-start, - .carousel-item-prev.carousel-item-end { - z-index: 1; - opacity: 1; - } - - .active.carousel-item-start, - .active.carousel-item-end { - z-index: 0; - opacity: 0; - @include transition(opacity 0s $carousel-transition-duration); - } -} - - -// -// Left/right controls for nav -// - -.carousel-control-prev, -.carousel-control-next { - position: absolute; - top: 0; - bottom: 0; - z-index: 1; - // Use flex for alignment (1-3) - display: flex; // 1. allow flex styles - align-items: center; // 2. vertically center contents - justify-content: center; // 3. horizontally center contents - width: $carousel-control-width; - padding: 0; - color: $carousel-control-color; - text-align: center; - background: none; - filter: var(--#{$prefix}carousel-control-icon-filter); - border: 0; - opacity: $carousel-control-opacity; - @include transition($carousel-control-transition); - - // Hover/focus state - &:hover, - &:focus { - color: $carousel-control-color; - text-decoration: none; - outline: 0; - opacity: $carousel-control-hover-opacity; - } -} -.carousel-control-prev { - left: 0; - background-image: if($enable-gradients, linear-gradient(90deg, rgba($black, .25), rgba($black, .001)), null); -} -.carousel-control-next { - right: 0; - background-image: if($enable-gradients, linear-gradient(270deg, rgba($black, .25), rgba($black, .001)), null); -} - -// Icons for within -.carousel-control-prev-icon, -.carousel-control-next-icon { - display: inline-block; - width: $carousel-control-icon-width; - height: $carousel-control-icon-width; - background-repeat: no-repeat; - background-position: 50%; - background-size: 100% 100%; -} - -.carousel-control-prev-icon { - background-image: escape-svg($carousel-control-prev-icon-bg) #{"/*rtl:" + escape-svg($carousel-control-next-icon-bg) + "*/"}; -} -.carousel-control-next-icon { - background-image: escape-svg($carousel-control-next-icon-bg) #{"/*rtl:" + escape-svg($carousel-control-prev-icon-bg) + "*/"}; -} - -// Optional indicator pips/controls -// -// Add a container (such as a list) with the following class and add an item (ideally a focusable control, -// like a button) with data-bs-target for each slide your carousel holds. - -.carousel-indicators { - position: absolute; - right: 0; - bottom: 0; - left: 0; - z-index: 2; - display: flex; - justify-content: center; - padding: 0; - // Use the .carousel-control's width as margin so we don't overlay those - margin-right: $carousel-control-width; - margin-bottom: 1rem; - margin-left: $carousel-control-width; - - [data-bs-target] { - box-sizing: content-box; - flex: 0 1 auto; - width: $carousel-indicator-width; - height: $carousel-indicator-height; - padding: 0; - margin-right: $carousel-indicator-spacer; - margin-left: $carousel-indicator-spacer; - text-indent: -999px; - cursor: pointer; - background-color: var(--#{$prefix}carousel-indicator-active-bg); - background-clip: padding-box; - border: 0; - // Use transparent borders to increase the hit area by 10px on top and bottom. - border-top: $carousel-indicator-hit-area-height solid transparent; - border-bottom: $carousel-indicator-hit-area-height solid transparent; - opacity: $carousel-indicator-opacity; - @include transition($carousel-indicator-transition); - } - - .active { - opacity: $carousel-indicator-active-opacity; - } -} - - -// Optional captions -// -// - -.carousel-caption { - position: absolute; - right: (100% - $carousel-caption-width) * .5; - bottom: $carousel-caption-spacer; - left: (100% - $carousel-caption-width) * .5; - padding-top: $carousel-caption-padding-y; - padding-bottom: $carousel-caption-padding-y; - color: var(--#{$prefix}carousel-caption-color); - text-align: center; -} - -// Dark mode carousel - -@mixin carousel-dark() { - --#{$prefix}carousel-indicator-active-bg: #{$carousel-indicator-active-bg-dark}; - --#{$prefix}carousel-caption-color: #{$carousel-caption-color-dark}; - --#{$prefix}carousel-control-icon-filter: #{$carousel-control-icon-filter-dark}; -} - -.carousel-dark { - @include carousel-dark(); -} - -:root, -[data-bs-theme="light"] { - --#{$prefix}carousel-indicator-active-bg: #{$carousel-indicator-active-bg}; - --#{$prefix}carousel-caption-color: #{$carousel-caption-color}; - --#{$prefix}carousel-control-icon-filter: #{$carousel-control-icon-filter}; -} - -@if $enable-dark-mode { - @include color-mode(dark, true) { - @include carousel-dark(); - } -} diff --git a/src/Web/Shared/Styles/bootstrap-5.3.8/scss/_close.scss b/src/Web/Shared/Styles/bootstrap-5.3.8/scss/_close.scss deleted file mode 100644 index d53c96fbff..0000000000 --- a/src/Web/Shared/Styles/bootstrap-5.3.8/scss/_close.scss +++ /dev/null @@ -1,66 +0,0 @@ -// Transparent background and border properties included for button version. -// iOS requires the button element instead of an anchor tag. -// If you want the anchor version, it requires `href="#"`. -// See https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile - -.btn-close { - // scss-docs-start close-css-vars - --#{$prefix}btn-close-color: #{$btn-close-color}; - --#{$prefix}btn-close-bg: #{ escape-svg($btn-close-bg) }; - --#{$prefix}btn-close-opacity: #{$btn-close-opacity}; - --#{$prefix}btn-close-hover-opacity: #{$btn-close-hover-opacity}; - --#{$prefix}btn-close-focus-shadow: #{$btn-close-focus-shadow}; - --#{$prefix}btn-close-focus-opacity: #{$btn-close-focus-opacity}; - --#{$prefix}btn-close-disabled-opacity: #{$btn-close-disabled-opacity}; - // scss-docs-end close-css-vars - - box-sizing: content-box; - width: $btn-close-width; - height: $btn-close-height; - padding: $btn-close-padding-y $btn-close-padding-x; - color: var(--#{$prefix}btn-close-color); - background: transparent var(--#{$prefix}btn-close-bg) center / $btn-close-width auto no-repeat; // include transparent for button elements - filter: var(--#{$prefix}btn-close-filter); - border: 0; // for button elements - @include border-radius(); - opacity: var(--#{$prefix}btn-close-opacity); - - // Override 's hover style - &:hover { - color: var(--#{$prefix}btn-close-color); - text-decoration: none; - opacity: var(--#{$prefix}btn-close-hover-opacity); - } - - &:focus { - outline: 0; - box-shadow: var(--#{$prefix}btn-close-focus-shadow); - opacity: var(--#{$prefix}btn-close-focus-opacity); - } - - &:disabled, - &.disabled { - pointer-events: none; - user-select: none; - opacity: var(--#{$prefix}btn-close-disabled-opacity); - } -} - -@mixin btn-close-white() { - --#{$prefix}btn-close-filter: #{$btn-close-filter-dark}; -} - -.btn-close-white { - @include btn-close-white(); -} - -:root, -[data-bs-theme="light"] { - --#{$prefix}btn-close-filter: #{$btn-close-filter}; -} - -@if $enable-dark-mode { - @include color-mode(dark, true) { - @include btn-close-white(); - } -} diff --git a/src/Web/Shared/Styles/bootstrap-5.3.8/scss/_containers.scss b/src/Web/Shared/Styles/bootstrap-5.3.8/scss/_containers.scss deleted file mode 100644 index 83b31381bf..0000000000 --- a/src/Web/Shared/Styles/bootstrap-5.3.8/scss/_containers.scss +++ /dev/null @@ -1,41 +0,0 @@ -// Container widths -// -// Set the container width, and override it for fixed navbars in media queries. - -@if $enable-container-classes { - // Single container class with breakpoint max-widths - .container, - // 100% wide container at all breakpoints - .container-fluid { - @include make-container(); - } - - // Responsive containers that are 100% wide until a breakpoint - @each $breakpoint, $container-max-width in $container-max-widths { - .container-#{$breakpoint} { - @extend .container-fluid; - } - - @include media-breakpoint-up($breakpoint, $grid-breakpoints) { - %responsive-container-#{$breakpoint} { - max-width: $container-max-width; - } - - // Extend each breakpoint which is smaller or equal to the current breakpoint - $extend-breakpoint: true; - - @each $name, $width in $grid-breakpoints { - @if ($extend-breakpoint) { - .container#{breakpoint-infix($name, $grid-breakpoints)} { - @extend %responsive-container-#{$breakpoint}; - } - - // Once the current breakpoint is reached, stop extending - @if ($breakpoint == $name) { - $extend-breakpoint: false; - } - } - } - } - } -} diff --git a/src/Web/Shared/Styles/bootstrap-5.3.8/scss/_dropdown.scss b/src/Web/Shared/Styles/bootstrap-5.3.8/scss/_dropdown.scss deleted file mode 100644 index 587ebb487c..0000000000 --- a/src/Web/Shared/Styles/bootstrap-5.3.8/scss/_dropdown.scss +++ /dev/null @@ -1,250 +0,0 @@ -// The dropdown wrapper (`
`) -.dropup, -.dropend, -.dropdown, -.dropstart, -.dropup-center, -.dropdown-center { - position: relative; -} - -.dropdown-toggle { - white-space: nowrap; - - // Generate the caret automatically - @include caret(); -} - -// The dropdown menu -.dropdown-menu { - // scss-docs-start dropdown-css-vars - --#{$prefix}dropdown-zindex: #{$zindex-dropdown}; - --#{$prefix}dropdown-min-width: #{$dropdown-min-width}; - --#{$prefix}dropdown-padding-x: #{$dropdown-padding-x}; - --#{$prefix}dropdown-padding-y: #{$dropdown-padding-y}; - --#{$prefix}dropdown-spacer: #{$dropdown-spacer}; - @include rfs($dropdown-font-size, --#{$prefix}dropdown-font-size); - --#{$prefix}dropdown-color: #{$dropdown-color}; - --#{$prefix}dropdown-bg: #{$dropdown-bg}; - --#{$prefix}dropdown-border-color: #{$dropdown-border-color}; - --#{$prefix}dropdown-border-radius: #{$dropdown-border-radius}; - --#{$prefix}dropdown-border-width: #{$dropdown-border-width}; - --#{$prefix}dropdown-inner-border-radius: #{$dropdown-inner-border-radius}; - --#{$prefix}dropdown-divider-bg: #{$dropdown-divider-bg}; - --#{$prefix}dropdown-divider-margin-y: #{$dropdown-divider-margin-y}; - --#{$prefix}dropdown-box-shadow: #{$dropdown-box-shadow}; - --#{$prefix}dropdown-link-color: #{$dropdown-link-color}; - --#{$prefix}dropdown-link-hover-color: #{$dropdown-link-hover-color}; - --#{$prefix}dropdown-link-hover-bg: #{$dropdown-link-hover-bg}; - --#{$prefix}dropdown-link-active-color: #{$dropdown-link-active-color}; - --#{$prefix}dropdown-link-active-bg: #{$dropdown-link-active-bg}; - --#{$prefix}dropdown-link-disabled-color: #{$dropdown-link-disabled-color}; - --#{$prefix}dropdown-item-padding-x: #{$dropdown-item-padding-x}; - --#{$prefix}dropdown-item-padding-y: #{$dropdown-item-padding-y}; - --#{$prefix}dropdown-header-color: #{$dropdown-header-color}; - --#{$prefix}dropdown-header-padding-x: #{$dropdown-header-padding-x}; - --#{$prefix}dropdown-header-padding-y: #{$dropdown-header-padding-y}; - // scss-docs-end dropdown-css-vars - - position: absolute; - z-index: var(--#{$prefix}dropdown-zindex); - display: none; // none by default, but block on "open" of the menu - min-width: var(--#{$prefix}dropdown-min-width); - padding: var(--#{$prefix}dropdown-padding-y) var(--#{$prefix}dropdown-padding-x); - margin: 0; // Override default margin of ul - @include font-size(var(--#{$prefix}dropdown-font-size)); - color: var(--#{$prefix}dropdown-color); - text-align: left; // Ensures proper alignment if parent has it changed (e.g., modal footer) - list-style: none; - background-color: var(--#{$prefix}dropdown-bg); - background-clip: padding-box; - border: var(--#{$prefix}dropdown-border-width) solid var(--#{$prefix}dropdown-border-color); - @include border-radius(var(--#{$prefix}dropdown-border-radius)); - @include box-shadow(var(--#{$prefix}dropdown-box-shadow)); - - &[data-bs-popper] { - top: 100%; - left: 0; - margin-top: var(--#{$prefix}dropdown-spacer); - } - - @if $dropdown-padding-y == 0 { - > .dropdown-item:first-child, - > li:first-child .dropdown-item { - @include border-top-radius(var(--#{$prefix}dropdown-inner-border-radius)); - } - > .dropdown-item:last-child, - > li:last-child .dropdown-item { - @include border-bottom-radius(var(--#{$prefix}dropdown-inner-border-radius)); - } - - } -} - -// scss-docs-start responsive-breakpoints -// We deliberately hardcode the `bs-` prefix because we check -// this custom property in JS to determine Popper's positioning - -@each $breakpoint in map-keys($grid-breakpoints) { - @include media-breakpoint-up($breakpoint) { - $infix: breakpoint-infix($breakpoint, $grid-breakpoints); - - .dropdown-menu#{$infix}-start { - --bs-position: start; - - &[data-bs-popper] { - right: auto; - left: 0; - } - } - - .dropdown-menu#{$infix}-end { - --bs-position: end; - - &[data-bs-popper] { - right: 0; - left: auto; - } - } - } -} -// scss-docs-end responsive-breakpoints - -// Allow for dropdowns to go bottom up (aka, dropup-menu) -// Just add .dropup after the standard .dropdown class and you're set. -.dropup { - .dropdown-menu[data-bs-popper] { - top: auto; - bottom: 100%; - margin-top: 0; - margin-bottom: var(--#{$prefix}dropdown-spacer); - } - - .dropdown-toggle { - @include caret(up); - } -} - -.dropend { - .dropdown-menu[data-bs-popper] { - top: 0; - right: auto; - left: 100%; - margin-top: 0; - margin-left: var(--#{$prefix}dropdown-spacer); - } - - .dropdown-toggle { - @include caret(end); - &::after { - vertical-align: 0; - } - } -} - -.dropstart { - .dropdown-menu[data-bs-popper] { - top: 0; - right: 100%; - left: auto; - margin-top: 0; - margin-right: var(--#{$prefix}dropdown-spacer); - } - - .dropdown-toggle { - @include caret(start); - &::before { - vertical-align: 0; - } - } -} - - -// Dividers (basically an `
`) within the dropdown -.dropdown-divider { - height: 0; - margin: var(--#{$prefix}dropdown-divider-margin-y) 0; - overflow: hidden; - border-top: 1px solid var(--#{$prefix}dropdown-divider-bg); - opacity: 1; // Revisit in v6 to de-dupe styles that conflict with
element -} - -// Links, buttons, and more within the dropdown menu -// -// `
@Resources.FileName` alignment by inheriting `text-align`. -// 3. Fix alignment for Safari - -th { - font-weight: $table-th-font-weight; // 1 - text-align: inherit; // 2 - text-align: -webkit-match-parent; // 3 -} - -thead, -tbody, -tfoot, -tr, -td, -th { - border-color: inherit; - border-style: solid; - border-width: 0; -} - - -// Forms -// -// 1. Allow labels to use `margin` for spacing. - -label { - display: inline-block; // 1 -} - -// Remove the default `border-radius` that macOS Chrome adds. -// See https://github.com/twbs/bootstrap/issues/24093 - -button { - // stylelint-disable-next-line property-disallowed-list - border-radius: 0; -} - -// Explicitly remove focus outline in Chromium when it shouldn't be -// visible (e.g. as result of mouse click or touch tap). It already -// should be doing this automatically, but seems to currently be -// confused and applies its very visible two-tone outline anyway. - -button:focus:not(:focus-visible) { - outline: 0; -} - -// 1. Remove the margin in Firefox and Safari - -input, -button, -select, -optgroup, -textarea { - margin: 0; // 1 - font-family: inherit; - @include font-size(inherit); - line-height: inherit; -} - -// Remove the inheritance of text transform in Firefox -button, -select { - text-transform: none; -} -// Set the cursor for non-`