This commit is contained in:
Philippe Torrel
Binary file not shown.
+1
-1
@@ -10,5 +10,5 @@ if (document.querySelector('.chuck-norris-joke')) {
|
||||
}
|
||||
|
||||
if (document.querySelector('.product-manager')) {
|
||||
import('./modules/ProductManager.js').then(({ default: ProductManager }) => ProductManager());
|
||||
import('./modules/ProductManager.ts').then(({ default: ProductManager }) => ProductManager());
|
||||
}
|
||||
|
||||
+525
@@ -0,0 +1,525 @@
|
||||
/// <reference path="./bootstrap.d.ts" />
|
||||
import { Dialog } from 'bootstrap';
|
||||
import Toast from './Toast';
|
||||
|
||||
interface ProductManagerOptions {
|
||||
baseUrl?: string;
|
||||
}
|
||||
|
||||
interface Product {
|
||||
_id: string;
|
||||
name: string;
|
||||
price: number;
|
||||
position?: number;
|
||||
}
|
||||
|
||||
interface ProductPayload {
|
||||
name: string;
|
||||
price: number;
|
||||
_id?: string;
|
||||
position?: number;
|
||||
}
|
||||
|
||||
interface ApiResult {
|
||||
success: boolean;
|
||||
msg?: string;
|
||||
}
|
||||
|
||||
interface PositionUpdate {
|
||||
_id?: string;
|
||||
position: number;
|
||||
}
|
||||
|
||||
interface RequestOptions extends RequestInit {
|
||||
data?: unknown;
|
||||
}
|
||||
|
||||
interface ProductManagerDom {
|
||||
module: HTMLElement;
|
||||
table: HTMLTableElement | null;
|
||||
tbody: HTMLTableSectionElement;
|
||||
inputName: HTMLInputElement;
|
||||
inputPrice: HTMLInputElement;
|
||||
btnAdd: HTMLButtonElement;
|
||||
templateRow: HTMLTemplateElement;
|
||||
dialogEdit: HTMLDialogElement;
|
||||
formEdit: HTMLFormElement;
|
||||
inputEditName: HTMLInputElement;
|
||||
inputEditPrice: HTMLInputElement;
|
||||
inputEditId: HTMLInputElement;
|
||||
inputEditPosition: HTMLInputElement;
|
||||
btnUpdate: HTMLButtonElement;
|
||||
dialogDelete: HTMLDialogElement | null;
|
||||
productName: HTMLElement | null;
|
||||
btnConfirmDelete: HTMLButtonElement | null;
|
||||
}
|
||||
|
||||
interface ProductManagerInstance {
|
||||
element: HTMLElement;
|
||||
init: () => Promise<void>;
|
||||
initProducts: () => Promise<void>;
|
||||
loadProducts: () => Promise<void>;
|
||||
resetFields: () => void;
|
||||
}
|
||||
|
||||
type ProductManagerTarget = string | Element | NodeListOf<Element> | Element[];
|
||||
type ProductManagerResult = ProductManagerInstance | Array<ProductManagerInstance | null> | null;
|
||||
|
||||
const ProductManager = (
|
||||
target: ProductManagerTarget = '.product-manager',
|
||||
options: ProductManagerOptions = {},
|
||||
): ProductManagerResult => {
|
||||
// === AUTO MULTI-INSTANCE ===
|
||||
let element: Element;
|
||||
|
||||
if (typeof target === 'string') {
|
||||
const elements = document.querySelectorAll<HTMLElement>(target);
|
||||
|
||||
if (elements.length === 0) {
|
||||
console.error('Product Manager not found', target);
|
||||
return null;
|
||||
}
|
||||
|
||||
if (elements.length > 1) {
|
||||
return [...elements].map((el) => ProductManager(el, options) as ProductManagerInstance | null);
|
||||
}
|
||||
|
||||
element = elements[0];
|
||||
} else if (target instanceof NodeList || Array.isArray(target)) {
|
||||
const list = [...target];
|
||||
if (list.length === 0) return null;
|
||||
if (list.length === 1) {
|
||||
element = list[0];
|
||||
} else {
|
||||
return list.map((el) => ProductManager(el, options) as ProductManagerInstance | null);
|
||||
}
|
||||
} else {
|
||||
element = target;
|
||||
}
|
||||
|
||||
// === DOM & VARS =======
|
||||
const SERVER_BASE_URL = options.baseUrl || 'http://127.0.0.1:8000';
|
||||
const API_PRODUCTS = `${SERVER_BASE_URL}/api/products`;
|
||||
|
||||
if (!(element instanceof HTMLElement)) {
|
||||
console.error('Product Manager: Ungültiges Element übergeben', target);
|
||||
return null;
|
||||
}
|
||||
|
||||
const module = element;
|
||||
|
||||
const DOM: ProductManagerDom = {
|
||||
module,
|
||||
table: module.querySelector<HTMLTableElement>('.table-products'),
|
||||
tbody: module.querySelector<HTMLTableSectionElement>('tbody')!,
|
||||
inputName: module.querySelector<HTMLInputElement>('.input-product-name')!,
|
||||
inputPrice: module.querySelector<HTMLInputElement>('.input-product-price')!,
|
||||
btnAdd: module.querySelector<HTMLButtonElement>('.button-product-add')!,
|
||||
templateRow: module.querySelector<HTMLTemplateElement>('.template-row')!,
|
||||
|
||||
// Dialog Edit (<dialog>)
|
||||
dialogEdit: module.querySelector<HTMLDialogElement>('.dialog-edit')!,
|
||||
formEdit: module.querySelector<HTMLFormElement>('.form-product-edit')!,
|
||||
inputEditName: module.querySelector<HTMLInputElement>('.input-edit-name')!,
|
||||
inputEditPrice: module.querySelector<HTMLInputElement>('.input-edit-price')!,
|
||||
inputEditId: module.querySelector<HTMLInputElement>('.input-edit-id')!,
|
||||
inputEditPosition: module.querySelector<HTMLInputElement>('.input-edit-position')!,
|
||||
btnUpdate: module.querySelector<HTMLButtonElement>('.button-product-update')!,
|
||||
|
||||
// Dialog Delete (<dialog>)
|
||||
dialogDelete: module.querySelector<HTMLDialogElement>('.dialog-delete'),
|
||||
productName: module.querySelector<HTMLElement>('strong.product-name'),
|
||||
btnConfirmDelete: module.querySelector<HTMLButtonElement>('.button-confirm-delete'),
|
||||
};
|
||||
|
||||
// Bootstrap 6 Dialog Plugin Instanzen
|
||||
const bsDialogEdit = new Dialog(DOM.dialogEdit, {
|
||||
backdrop: 'static',
|
||||
keyboard: true,
|
||||
});
|
||||
|
||||
const bsDialogDelete = DOM.dialogDelete
|
||||
? new Dialog(DOM.dialogDelete, {
|
||||
backdrop: 'static',
|
||||
keyboard: true,
|
||||
})
|
||||
: null;
|
||||
|
||||
// State für Drag & Drop
|
||||
let draggedRow: HTMLTableRowElement | null = null;
|
||||
|
||||
// === INIT =============
|
||||
const init = async () => {
|
||||
// Funktionsaufrufe zu Beginn der Anwendung
|
||||
await initProducts();
|
||||
DOM.btnAdd.disabled = true;
|
||||
|
||||
// Event-Lauscher zu Beginn der Anwendung
|
||||
DOM.btnAdd.addEventListener('click', onClickAdd);
|
||||
DOM.formEdit.addEventListener('submit', onSubmitEdit);
|
||||
DOM.btnConfirmDelete?.addEventListener('click', onClickConfirmDelete);
|
||||
|
||||
DOM.inputName.addEventListener('input', onInputValidate);
|
||||
DOM.inputPrice.addEventListener('input', onInputValidate);
|
||||
|
||||
// Delegierte Tabellen- & Drag-Events
|
||||
DOM.tbody.addEventListener('click', onTableClick);
|
||||
setupDragAndDrop();
|
||||
};
|
||||
|
||||
// === EVENTHANDLER =====
|
||||
const onInputValidate = () => {
|
||||
DOM.btnAdd.disabled = DOM.inputName.value.trim() === '' || DOM.inputPrice.value === '';
|
||||
};
|
||||
|
||||
const onSubmitEdit = async (event: SubmitEvent) => {
|
||||
event.preventDefault();
|
||||
|
||||
const product: ProductPayload = {
|
||||
name: DOM.inputEditName.value.trim(),
|
||||
price: Number(DOM.inputEditPrice.value),
|
||||
_id: DOM.inputEditId.value,
|
||||
position: Number(DOM.inputEditPosition.value),
|
||||
};
|
||||
|
||||
DOM.btnUpdate.querySelector('i')?.classList.add('fa-spin');
|
||||
|
||||
try {
|
||||
const data = await api.edit(product);
|
||||
if (data?.success) {
|
||||
Toast(data.msg ?? '', 'success').show();
|
||||
loadProducts();
|
||||
resetFields();
|
||||
bsDialogEdit.hide();
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('Update fehlgeschlagen:', err);
|
||||
} finally {
|
||||
DOM.btnUpdate.querySelector('i')?.classList.remove('fa-spin');
|
||||
}
|
||||
};
|
||||
|
||||
const onClickAdd = async () => {
|
||||
const product: ProductPayload = {
|
||||
name: DOM.inputName.value.trim(),
|
||||
price: Number(DOM.inputPrice.value),
|
||||
};
|
||||
|
||||
try {
|
||||
const data = await api.add(product);
|
||||
if (data?.success) {
|
||||
Toast(data.msg ?? '', 'success').show();
|
||||
loadProducts();
|
||||
resetFields();
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('Erstellen fehlgeschlagen:', err);
|
||||
}
|
||||
};
|
||||
|
||||
const onTableClick = async (event: MouseEvent) => {
|
||||
if (!(event.target instanceof Element)) return;
|
||||
|
||||
const btnEl = event.target.closest('button');
|
||||
if (!btnEl) return;
|
||||
|
||||
const currentRow = parent<HTMLTableRowElement>(btnEl, 'tr');
|
||||
if (!currentRow) return;
|
||||
|
||||
const id = currentRow.dataset.id;
|
||||
|
||||
if (btnEl.matches('.button-product-edit')) {
|
||||
if (!id) return;
|
||||
try {
|
||||
const data = await api.read(id);
|
||||
if (data) showDialogEdit(data);
|
||||
} catch (err) {
|
||||
console.error('Laden für Bearbeitung fehlgeschlagen:', err);
|
||||
}
|
||||
} else if (btnEl.matches('.button-product-remove')) {
|
||||
const productName = currentRow.querySelector('.td-name')?.textContent?.trim() || 'Produkt';
|
||||
|
||||
if (bsDialogDelete && DOM.btnConfirmDelete) {
|
||||
if (id) DOM.btnConfirmDelete.dataset.id = id;
|
||||
if (DOM.productName) DOM.productName.textContent = productName;
|
||||
bsDialogDelete.show();
|
||||
} else {
|
||||
// Fallback falls kein Delete-Dialog im DOM existiert
|
||||
if (!id || !window.confirm(`Möchtest du "${productName}" wirklich löschen?`)) return;
|
||||
try {
|
||||
const data = await api.destroy(id);
|
||||
if (data?.success) {
|
||||
Toast(data.msg ?? '', 'success').show();
|
||||
loadProducts();
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('Löschen fehlgeschlagen:', err);
|
||||
}
|
||||
}
|
||||
} else if (btnEl.matches('.button-product-move-up') && currentRow.previousElementSibling) {
|
||||
currentRow.previousElementSibling.before(currentRow);
|
||||
disableNonFunctionalButtons();
|
||||
await updateRowPositions();
|
||||
} else if (btnEl.matches('.button-product-move-down') && currentRow.nextElementSibling) {
|
||||
currentRow.nextElementSibling.after(currentRow);
|
||||
disableNonFunctionalButtons();
|
||||
await updateRowPositions();
|
||||
}
|
||||
};
|
||||
|
||||
const onClickConfirmDelete = async () => {
|
||||
const id = DOM.btnConfirmDelete?.dataset.id;
|
||||
if (!id) return;
|
||||
|
||||
try {
|
||||
const data = await api.destroy(id);
|
||||
if (data?.success) {
|
||||
Toast(data.msg ?? '', 'success').show();
|
||||
bsDialogDelete?.hide();
|
||||
loadProducts();
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('Löschen fehlgeschlagen:', err);
|
||||
}
|
||||
};
|
||||
|
||||
// Drag 'n Drop Event-Setup via Delegation
|
||||
const setupDragAndDrop = () => {
|
||||
let isHandleMouseDown = false;
|
||||
|
||||
// 1. Nur wenn die Maus auf den Drag-Button drückt, erlauben wir das Ziehen der Zeile
|
||||
DOM.tbody.addEventListener('mousedown', (event) => {
|
||||
if (!(event.target instanceof Element)) {
|
||||
isHandleMouseDown = false;
|
||||
return;
|
||||
}
|
||||
|
||||
const handle = event.target.closest('.button-product-drag, .button-drag');
|
||||
if (!handle) {
|
||||
isHandleMouseDown = false;
|
||||
return;
|
||||
}
|
||||
|
||||
const currentRow = parent<HTMLTableRowElement>(handle, 'tr');
|
||||
if (currentRow) {
|
||||
isHandleMouseDown = true;
|
||||
currentRow.setAttribute('draggable', 'true');
|
||||
}
|
||||
});
|
||||
|
||||
DOM.tbody.addEventListener('mouseup', () => {
|
||||
isHandleMouseDown = false;
|
||||
});
|
||||
|
||||
// 2. Drag Start: Startet den nativen Browser-Drag-Vorgang
|
||||
DOM.tbody.addEventListener('dragstart', (event) => {
|
||||
const eventTarget = event.target instanceof Element ? event.target : null;
|
||||
const currentRow = parent<HTMLTableRowElement>(eventTarget, 'tr');
|
||||
|
||||
if (!currentRow || !isHandleMouseDown || !event.dataTransfer) {
|
||||
event.preventDefault();
|
||||
return;
|
||||
}
|
||||
|
||||
draggedRow = currentRow;
|
||||
event.dataTransfer.effectAllowed = 'move';
|
||||
event.dataTransfer.setData('text/plain', currentRow.dataset.id || 'drag');
|
||||
currentRow.classList.add('is-dragging');
|
||||
});
|
||||
|
||||
// 3. Drag Over: Pflicht, um drop zu gestatten
|
||||
DOM.tbody.addEventListener('dragover', (event) => {
|
||||
event.preventDefault();
|
||||
if (event.dataTransfer) event.dataTransfer.dropEffect = 'move';
|
||||
});
|
||||
|
||||
// 4. Drop: Verschieben im DOM und Server-Aktualisierung
|
||||
DOM.tbody.addEventListener('drop', async (event) => {
|
||||
event.preventDefault();
|
||||
const eventTarget = event.target instanceof Element ? event.target : null;
|
||||
const currentRow = parent<HTMLTableRowElement>(eventTarget, 'tr');
|
||||
|
||||
if (!currentRow || !draggedRow || currentRow === draggedRow) return;
|
||||
|
||||
const rows = [...DOM.tbody.children];
|
||||
const sourceIdx = rows.indexOf(draggedRow);
|
||||
const targetIdx = rows.indexOf(currentRow);
|
||||
|
||||
if (sourceIdx < targetIdx) {
|
||||
currentRow.after(draggedRow);
|
||||
} else {
|
||||
currentRow.before(draggedRow);
|
||||
}
|
||||
|
||||
disableNonFunctionalButtons();
|
||||
await updateRowPositions();
|
||||
});
|
||||
|
||||
// 5. Drag End & Cleanup
|
||||
DOM.tbody.addEventListener('dragend', () => {
|
||||
isHandleMouseDown = false;
|
||||
if (draggedRow) {
|
||||
draggedRow.removeAttribute('draggable');
|
||||
draggedRow.classList.remove('is-dragging');
|
||||
draggedRow = null;
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// === XHR/FETCH (DRY BREAD API) ========
|
||||
const api = {
|
||||
async request<T>(url: string, { data, ...rest }: RequestOptions = {}): Promise<T | null> {
|
||||
const isJsonPayload = data !== undefined;
|
||||
|
||||
try {
|
||||
const response = await fetch(url, {
|
||||
...rest,
|
||||
headers: {
|
||||
...(isJsonPayload && { 'Content-Type': 'application/json' }),
|
||||
...rest.headers,
|
||||
},
|
||||
body: isJsonPayload ? JSON.stringify(data) : rest.body,
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
const errorJson = (await response.json().catch(() => null)) as { msg?: string } | null;
|
||||
const errorMsg = errorJson?.msg || `${rest.method ?? 'GET'} ${url} -> ${response.status}`;
|
||||
throw new Error(errorMsg);
|
||||
}
|
||||
|
||||
if (response.status === 204) return null;
|
||||
return (await response.json()) as T;
|
||||
} catch (error: unknown) {
|
||||
const message = error instanceof Error && error.message ? error.message : 'Verbindungsfehler zum Server';
|
||||
Toast(message, 'error').show();
|
||||
throw error;
|
||||
}
|
||||
},
|
||||
|
||||
browse: () => api.request<Product[]>(API_PRODUCTS),
|
||||
read: (id: string) => api.request<Product>(`${API_PRODUCTS}/${id}`),
|
||||
edit: (product: ProductPayload) => api.request<ApiResult>(API_PRODUCTS, { method: 'PUT', data: product }),
|
||||
add: (product: ProductPayload) => api.request<ApiResult>(API_PRODUCTS, { method: 'POST', data: product }),
|
||||
destroy: (id: string) => api.request<ApiResult>(`${API_PRODUCTS}/${id}`, { method: 'DELETE' }),
|
||||
updatePositions: (positions: PositionUpdate[]) =>
|
||||
api.request<ApiResult>(`${API_PRODUCTS}/positions`, { method: 'PUT', data: positions }),
|
||||
};
|
||||
|
||||
// === FUNCTIONS ========
|
||||
const initProducts = async () => {
|
||||
try {
|
||||
const products = await api.browse();
|
||||
if (!products) return;
|
||||
DOM.tbody.replaceChildren(...products.map(createRowElement));
|
||||
Toast('Init products').show();
|
||||
disableNonFunctionalButtons();
|
||||
} catch (err) {
|
||||
console.error('Initialisierung fehlgeschlagen:', err);
|
||||
}
|
||||
};
|
||||
|
||||
const loadProducts = async () => {
|
||||
try {
|
||||
const products = await api.browse();
|
||||
if (!products) return;
|
||||
DOM.tbody.replaceChildren(...products.map(createRowElement));
|
||||
disableNonFunctionalButtons();
|
||||
} catch (err) {
|
||||
console.error('Neu laden fehlgeschlagen:', err);
|
||||
}
|
||||
};
|
||||
|
||||
const createRowElement = (product: Product) => {
|
||||
const { name, price, _id: id, position = 0 } = product;
|
||||
|
||||
const trEl = DOM.templateRow.content.firstElementChild?.cloneNode(true) as HTMLTableRowElement;
|
||||
trEl.dataset.id = id;
|
||||
trEl.dataset.position = String(position);
|
||||
|
||||
const nameCell = trEl.querySelector('.td-name');
|
||||
const priceCell = trEl.querySelector('.td-price');
|
||||
if (nameCell) nameCell.textContent = name;
|
||||
if (priceCell) priceCell.textContent = Number(price).toFixed(2);
|
||||
|
||||
return trEl;
|
||||
};
|
||||
|
||||
const showDialogEdit = (product: Product) => {
|
||||
const { name = '', price = 0, _id: id, position } = product;
|
||||
|
||||
DOM.inputEditName.value = name;
|
||||
DOM.inputEditPrice.value = String(price);
|
||||
DOM.inputEditId.value = id;
|
||||
DOM.inputEditPosition.value = String(position ?? 0);
|
||||
|
||||
bsDialogEdit.show();
|
||||
};
|
||||
|
||||
const resetFields = () => {
|
||||
DOM.inputName.value = '';
|
||||
DOM.inputPrice.value = '';
|
||||
DOM.btnAdd.disabled = true;
|
||||
DOM.formEdit.reset();
|
||||
};
|
||||
|
||||
const disableNonFunctionalButtons = () => {
|
||||
const rows = [...DOM.tbody.children];
|
||||
rows.forEach((tr, index) => {
|
||||
const btnUp = tr.querySelector<HTMLButtonElement>('.button-product-move-up');
|
||||
const btnDown = tr.querySelector<HTMLButtonElement>('.button-product-move-down');
|
||||
if (btnUp) btnUp.disabled = index === 0;
|
||||
if (btnDown) btnDown.disabled = index === rows.length - 1;
|
||||
});
|
||||
};
|
||||
|
||||
const updateRowPositions = async () => {
|
||||
const rows = [...DOM.tbody.children].filter((row): row is HTMLTableRowElement => row instanceof HTMLTableRowElement);
|
||||
|
||||
const positions: PositionUpdate[] = rows.map((tr, index) => {
|
||||
const newPos = index + 1;
|
||||
tr.dataset.position = String(newPos);
|
||||
return {
|
||||
_id: tr.dataset.id,
|
||||
position: newPos,
|
||||
};
|
||||
});
|
||||
|
||||
try {
|
||||
const data = await api.updatePositions(positions);
|
||||
if (data?.success) {
|
||||
Toast(data.msg ?? '', 'success').show();
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('Fehler beim Aktualisieren der Positionen:', err);
|
||||
}
|
||||
};
|
||||
|
||||
// === HELPERS ==========
|
||||
const parent = <T extends HTMLElement>(
|
||||
el: Element | null,
|
||||
selector: string,
|
||||
boundary: Element | null = DOM.tbody,
|
||||
): T | null => {
|
||||
let current: Element | null = el;
|
||||
while (current) {
|
||||
if (current.matches(selector) && (!boundary || current.parentElement === boundary)) {
|
||||
return current as T;
|
||||
}
|
||||
current = current.parentElement;
|
||||
}
|
||||
return null;
|
||||
};
|
||||
|
||||
// Selbstanstoß & Interface
|
||||
init();
|
||||
|
||||
return {
|
||||
element: DOM.module,
|
||||
init,
|
||||
initProducts,
|
||||
loadProducts,
|
||||
resetFields,
|
||||
};
|
||||
};
|
||||
|
||||
export default ProductManager;
|
||||
+15
@@ -0,0 +1,15 @@
|
||||
// Bootstrap 6 alpha liefert in diesem Projekt keine Declaration-Files.
|
||||
declare module 'bootstrap' {
|
||||
export class Dialog {
|
||||
constructor(
|
||||
element?: string | Element | null,
|
||||
config?: {
|
||||
backdrop?: boolean | string;
|
||||
keyboard?: boolean;
|
||||
modal?: boolean;
|
||||
} | null,
|
||||
);
|
||||
show(relatedTarget?: HTMLElement): Promise<void>;
|
||||
hide(): Promise<void>;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,9 @@
|
||||
# SERVER CONFIGURATION
|
||||
SERVER_PORT=8000
|
||||
SERVER_HOST='127.0.0.1'
|
||||
|
||||
|
||||
# API TOKENS
|
||||
SECRET_KEY='top secret'
|
||||
WEAHTER_API_KEY=''
|
||||
JWT_TOKEN=''
|
||||
+8
@@ -0,0 +1,8 @@
|
||||
{
|
||||
"workbench.colorCustomizations": {
|
||||
"titleBar.activeForeground": "#333",
|
||||
"titleBar.activeBackground": "#c9d06b",
|
||||
"titleBar.inactiveForeground": "#ddd",
|
||||
"titleBar.inactiveBackground": "#9da16f"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,64 @@
|
||||
# BROWSE Products
|
||||
|
||||
GET http://127.0.0.1:8000/api/products
|
||||
|
||||
###
|
||||
|
||||
# READ Product
|
||||
|
||||
GET http://127.0.0.1:8000/api/products/174a2a19-26eb-475e-af47-4f46d2ab62ec
|
||||
|
||||
###
|
||||
|
||||
# ADD Product
|
||||
|
||||
POST http://127.0.0.1:8000/api/products
|
||||
Content-Type: application/json
|
||||
|
||||
{
|
||||
"name": "Testproduct",
|
||||
"price": 9.99
|
||||
}
|
||||
|
||||
###
|
||||
|
||||
# UPDATE Product
|
||||
|
||||
PUT http://127.0.0.1:8000/api/products
|
||||
Content-Type: application/json
|
||||
|
||||
{
|
||||
"_id": "174a2a19-26eb-475e-af47-4f46d2ab62ec",
|
||||
"position": 1,
|
||||
"name": "UPDATED 3Doodler 3D Printing Pen",
|
||||
"price": 39.99
|
||||
}
|
||||
|
||||
###
|
||||
|
||||
# DELETE Product
|
||||
|
||||
DELETE http://127.0.0.1:8000/api/products/174a2a19-26eb-475e-af47-4f46d2ab62ec
|
||||
|
||||
###
|
||||
|
||||
# RESET PRODUCTS
|
||||
|
||||
PATCH http://127.0.0.1:8000/api/products/reset?reset=true
|
||||
Content-Type: application/json
|
||||
|
||||
{
|
||||
"reset": true
|
||||
}
|
||||
###
|
||||
|
||||
# SAVE PRODUCTS
|
||||
|
||||
PATCH http://127.0.0.1:8000/api/products/save
|
||||
Content-Type: application/json
|
||||
|
||||
{
|
||||
"save": true
|
||||
}
|
||||
|
||||
|
||||
+32
@@ -0,0 +1,32 @@
|
||||
[
|
||||
{
|
||||
"_id": "174a2a19-26eb-475e-af47-4f46d2ab62ec",
|
||||
"position": 1,
|
||||
"name": "3Doodler 3D Printing Pen",
|
||||
"price": 29.99
|
||||
},
|
||||
{
|
||||
"_id": "ba337ef0-fead-48c9-a210-16514fce54cd",
|
||||
"position": 2,
|
||||
"name": "Powerstation 5- E. Maximus Chargus",
|
||||
"price": 44.95
|
||||
},
|
||||
{
|
||||
"_id": "61c25758-5d24-4a1d-baf3-bb8e11d8c9a2",
|
||||
"position": 3,
|
||||
"name": "8-Bit Legendary Hero Heat-Change Mug",
|
||||
"price": 6.99
|
||||
},
|
||||
{
|
||||
"_id": "2b8eae22-50ad-43a6-91f5-5ca5d62976fa",
|
||||
"position": 4,
|
||||
"name": "16-Bit Legendary Hero Heat-Change Mug",
|
||||
"price": 12.99
|
||||
},
|
||||
{
|
||||
"_id": "dfee3d18-86b1-424e-a5eb-4a32e50b851c",
|
||||
"position": 5,
|
||||
"name": "32-Bit Legendary Hero Heat-Change Mug",
|
||||
"price": 14.99
|
||||
}
|
||||
]
|
||||
@@ -0,0 +1,32 @@
|
||||
[
|
||||
{
|
||||
"_id": "ba337ef0-fead-48c9-a210-16514fce54cd",
|
||||
"position": 1,
|
||||
"name": "Powerstation 5- E. Maximus Chargus",
|
||||
"price": 44.95
|
||||
},
|
||||
{
|
||||
"_id": "61c25758-5d24-4a1d-baf3-bb8e11d8c9a2",
|
||||
"position": 2,
|
||||
"name": "8-Bit Legendary Hero Heat-Change Mug",
|
||||
"price": 6.99
|
||||
},
|
||||
{
|
||||
"_id": "174a2a19-26eb-475e-af47-4f46d2ab62ec",
|
||||
"position": 3,
|
||||
"name": "3Doodler 3D Printing Pen",
|
||||
"price": 29.99
|
||||
},
|
||||
{
|
||||
"_id": "2b8eae22-50ad-43a6-91f5-5ca5d62976fa",
|
||||
"position": 4,
|
||||
"name": "16-Bit Legendary Hero Heat-Change Mug",
|
||||
"price": 12.99
|
||||
},
|
||||
{
|
||||
"_id": "dfee3d18-86b1-424e-a5eb-4a32e50b851c",
|
||||
"position": 5,
|
||||
"name": "32-Bit Legendary Hero Heat-Change Mug",
|
||||
"price": 14.99
|
||||
}
|
||||
]
|
||||
@@ -0,0 +1,132 @@
|
||||
import fs from 'node:fs';
|
||||
import { v4 as id } from 'uuid';
|
||||
|
||||
// Factoryfunction
|
||||
const ProductModel = () => {
|
||||
let products = [];
|
||||
|
||||
const load = () => {
|
||||
try {
|
||||
products = JSON.parse(fs.readFileSync('./data/products.json', 'utf-8'));
|
||||
} catch (error) {
|
||||
console.log('Something went wrong: ', error);
|
||||
products = [];
|
||||
}
|
||||
};
|
||||
|
||||
const reset = () => {
|
||||
try {
|
||||
products = JSON.parse(fs.readFileSync('./data/products.backup.json', 'utf-8'));
|
||||
} catch (error) {
|
||||
console.log('Something went wrong: ', error);
|
||||
products = [];
|
||||
}
|
||||
};
|
||||
|
||||
const save = () => {
|
||||
try {
|
||||
fs.writeFileSync('./data/products.json', JSON.stringify(products, null, 2), 'utf-8');
|
||||
} catch (error) {
|
||||
console.log('Something went wrong: ', error);
|
||||
}
|
||||
};
|
||||
|
||||
const getAll = () => {
|
||||
return products;
|
||||
};
|
||||
|
||||
const get = (id) => {
|
||||
const product = products.find((product) => {
|
||||
return product._id === id;
|
||||
});
|
||||
|
||||
// Guard
|
||||
if (!product) return null;
|
||||
|
||||
return product;
|
||||
};
|
||||
|
||||
const add = (product) => {
|
||||
const { name, price } = product;
|
||||
|
||||
if (!hasAllProps(product)) return false;
|
||||
|
||||
products.push({
|
||||
_id: id(),
|
||||
position: products.length + 1,
|
||||
name,
|
||||
price: Number(Number(price).toFixed(2)),
|
||||
});
|
||||
|
||||
return true;
|
||||
};
|
||||
|
||||
const update = (product) => {
|
||||
const foundIdx = products.findIndex((obj) => {
|
||||
return obj._id === product._id;
|
||||
});
|
||||
|
||||
// Guard
|
||||
if (foundIdx === -1 || !hasAllProps(product)) return false;
|
||||
|
||||
products[foundIdx] = product;
|
||||
return true;
|
||||
};
|
||||
|
||||
const remove = (id) => {
|
||||
const foundIdx = products.findIndex((obj) => {
|
||||
return obj._id === id;
|
||||
});
|
||||
|
||||
// Guard
|
||||
if (foundIdx === -1) return false;
|
||||
|
||||
products.splice(foundIdx, 1);
|
||||
|
||||
return true;
|
||||
};
|
||||
|
||||
// [{_id, position},{_id, position} ]
|
||||
|
||||
const updatePosition = (positions = []) => {
|
||||
// Guard
|
||||
if (!Array.isArray(positions) || positions.length === 0) return false;
|
||||
|
||||
// Schnellzugriff über Map erstellen: id -> position
|
||||
const posMap = new Map(positions.map((item) => [item._id, Number(item.position)]));
|
||||
|
||||
// Positionen in products aktualisieren
|
||||
products.forEach((product) => {
|
||||
if (posMap.has(product._id)) {
|
||||
product.position = posMap.get(product._id);
|
||||
}
|
||||
});
|
||||
|
||||
// Liste anhand der neuen Positionen sortieren
|
||||
products.sort((a, b) => (a.position || 0) - (b.position || 0));
|
||||
|
||||
return true;
|
||||
};
|
||||
|
||||
// Validate =====
|
||||
const hasAllProps = (product) => {
|
||||
// return Object.hasOwn(product, 'name') && Object.hasOwn(product, 'price');
|
||||
|
||||
const keys = Object.keys(product); // ['name', 'price', ...]
|
||||
return keys.includes('name') && keys.includes('price');
|
||||
};
|
||||
|
||||
return {
|
||||
load,
|
||||
getAll,
|
||||
get,
|
||||
add,
|
||||
update,
|
||||
delete: remove,
|
||||
updatePosition,
|
||||
reset,
|
||||
save,
|
||||
};
|
||||
};
|
||||
|
||||
export default ProductModel;
|
||||
+924
@@ -0,0 +1,924 @@
|
||||
{
|
||||
"name": "backend",
|
||||
"version": "1.0.0",
|
||||
"lockfileVersion": 3,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
"": {
|
||||
"name": "backend",
|
||||
"version": "1.0.0",
|
||||
"dependencies": {
|
||||
"chalk": "^6.0.1",
|
||||
"cors": "^2.8.6",
|
||||
"dotenv": "^18.0.8",
|
||||
"express": "^5.3.0",
|
||||
"uuid": "^14.0.3"
|
||||
}
|
||||
},
|
||||
"node_modules/accepts": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/accepts/-/accepts-2.0.0.tgz",
|
||||
"integrity": "sha512-5cvg6CtKwfgdmVqY1WIiXKc3Q1bkRqGLi+2W/6ao+6Y7gu/RCwRuAhGEzh5B4KlszSuTLgZYuqFqo5bImjNKng==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"mime-types": "^3.0.0",
|
||||
"negotiator": "^1.0.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 0.6"
|
||||
}
|
||||
},
|
||||
"node_modules/body-parser": {
|
||||
"version": "2.3.0",
|
||||
"resolved": "https://registry.npmjs.org/body-parser/-/body-parser-2.3.0.tgz",
|
||||
"integrity": "sha512-2cGmJupaNgg+QUwVLAucDuWuoMZ6EX9iHDRswZ5lsNYEmwPaRknMPCLZz07yTzVq/83p4o/wzbDZbBrTvGGTIw==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"bytes": "^3.1.2",
|
||||
"content-type": "^2.0.0",
|
||||
"debug": "^4.4.3",
|
||||
"http-errors": "^2.0.1",
|
||||
"iconv-lite": "^0.7.2",
|
||||
"on-finished": "^2.4.1",
|
||||
"qs": "^6.15.2",
|
||||
"raw-body": "^3.0.2",
|
||||
"type-is": "^2.1.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=18"
|
||||
},
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/express"
|
||||
}
|
||||
},
|
||||
"node_modules/bytes": {
|
||||
"version": "3.1.2",
|
||||
"resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.2.tgz",
|
||||
"integrity": "sha512-/Nf7TyzTx6S3yRJObOAV7956r8cr2+Oj8AC5dt8wSP3BQAoeX58NoHyCU8P8zGkNXStjTSi6fzO6F0pBdcYbEg==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">= 0.8"
|
||||
}
|
||||
},
|
||||
"node_modules/call-bind-apply-helpers": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmjs.org/call-bind-apply-helpers/-/call-bind-apply-helpers-1.0.2.tgz",
|
||||
"integrity": "sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"es-errors": "^1.3.0",
|
||||
"function-bind": "^1.1.2"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 0.4"
|
||||
}
|
||||
},
|
||||
"node_modules/call-bound": {
|
||||
"version": "1.0.4",
|
||||
"resolved": "https://registry.npmjs.org/call-bound/-/call-bound-1.0.4.tgz",
|
||||
"integrity": "sha512-+ys997U96po4Kx/ABpBCqhA9EuxJaQWDQg7295H4hBphv3IZg0boBKuwYpt4YXp6MZ5AmZQnU/tyMTlRpaSejg==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"call-bind-apply-helpers": "^1.0.2",
|
||||
"get-intrinsic": "^1.3.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 0.4"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/ljharb"
|
||||
}
|
||||
},
|
||||
"node_modules/chalk": {
|
||||
"version": "6.0.1",
|
||||
"resolved": "https://registry.npmjs.org/chalk/-/chalk-6.0.1.tgz",
|
||||
"integrity": "sha512-/Ce6KNm3vIbWdMlNna6RVIZ/ICQxnJxCicet5LBKK9ZffBkqzDw0xh9EiKSljdRtiIQ1S1z4YgcscUUGzNCWrA==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=22"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/chalk/chalk?sponsor=1"
|
||||
}
|
||||
},
|
||||
"node_modules/content-disposition": {
|
||||
"version": "2.0.1",
|
||||
"resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-2.0.1.tgz",
|
||||
"integrity": "sha512-e+H0ZXHSWYrENhQzw1LPuP4oF5MzVKmDU6d3hxlvaPEYLLg62MxtQNPRx4SYSuYJSBUgnQIG4HIN2tEtNv7Dog==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=18"
|
||||
},
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/express"
|
||||
}
|
||||
},
|
||||
"node_modules/content-type": {
|
||||
"version": "2.1.0",
|
||||
"resolved": "https://registry.npmjs.org/content-type/-/content-type-2.1.0.tgz",
|
||||
"integrity": "sha512-mj7UPXE0jaqaOsukNZRUEfEi2AcL7C/vwmwcHV0O97eO1E1pxBZuyjlZrx5seTaNBg1U6+o35wpa35Qfcc+7ag==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=18"
|
||||
},
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/express"
|
||||
}
|
||||
},
|
||||
"node_modules/cookie": {
|
||||
"version": "0.7.2",
|
||||
"resolved": "https://registry.npmjs.org/cookie/-/cookie-0.7.2.tgz",
|
||||
"integrity": "sha512-yki5XnKuf750l50uGTllt6kKILY4nQ1eNIQatoXEByZ5dWgnKqbnqmTrBE5B4N7lrMJKQ2ytWMiTO2o0v6Ew/w==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">= 0.6"
|
||||
}
|
||||
},
|
||||
"node_modules/cookie-signature": {
|
||||
"version": "1.2.2",
|
||||
"resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.2.2.tgz",
|
||||
"integrity": "sha512-D76uU73ulSXrD1UXF4KE2TMxVVwhsnCgfAyTg9k8P6KGZjlXKrOLe4dJQKI3Bxi5wjesZoFXJWElNWBjPZMbhg==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=6.6.0"
|
||||
}
|
||||
},
|
||||
"node_modules/cors": {
|
||||
"version": "2.8.6",
|
||||
"resolved": "https://registry.npmjs.org/cors/-/cors-2.8.6.tgz",
|
||||
"integrity": "sha512-tJtZBBHA6vjIAaF6EnIaq6laBBP9aq/Y3ouVJjEfoHbRBcHBAHYcMh/w8LDrk2PvIMMq8gmopa5D4V8RmbrxGw==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"object-assign": "^4",
|
||||
"vary": "^1"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 0.10"
|
||||
},
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/express"
|
||||
}
|
||||
},
|
||||
"node_modules/debug": {
|
||||
"version": "4.4.3",
|
||||
"resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz",
|
||||
"integrity": "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"ms": "^2.1.3"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=6.0"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"supports-color": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/depd": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/depd/-/depd-2.0.0.tgz",
|
||||
"integrity": "sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">= 0.8"
|
||||
}
|
||||
},
|
||||
"node_modules/dotenv": {
|
||||
"version": "18.0.8",
|
||||
"resolved": "https://registry.npmjs.org/dotenv/-/dotenv-18.0.8.tgz",
|
||||
"integrity": "sha512-2KDeoFoK/zRtcnbunCDlLG5VWVMcyqeQc6iK65o231nfNAcuGrKoqUQfJFUtBI+QlShk5HKIHxwebBtUl3rEfA==",
|
||||
"license": "BSD-2-Clause",
|
||||
"bin": {
|
||||
"dotenv": "dist/index.cjs"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://dotenvx.com"
|
||||
}
|
||||
},
|
||||
"node_modules/dunder-proto": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz",
|
||||
"integrity": "sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"call-bind-apply-helpers": "^1.0.1",
|
||||
"es-errors": "^1.3.0",
|
||||
"gopd": "^1.2.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 0.4"
|
||||
}
|
||||
},
|
||||
"node_modules/ee-first": {
|
||||
"version": "1.1.1",
|
||||
"resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
|
||||
"integrity": "sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/encodeurl": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-2.0.0.tgz",
|
||||
"integrity": "sha512-Q0n9HRi4m6JuGIV1eFlmvJB7ZEVxu93IrMyiMsGC0lrMJMWzRgx6WGquyfQgZVb31vhGgXnfmPNNXmxnOkRBrg==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">= 0.8"
|
||||
}
|
||||
},
|
||||
"node_modules/es-define-property": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.1.tgz",
|
||||
"integrity": "sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">= 0.4"
|
||||
}
|
||||
},
|
||||
"node_modules/es-errors": {
|
||||
"version": "1.3.0",
|
||||
"resolved": "https://registry.npmjs.org/es-errors/-/es-errors-1.3.0.tgz",
|
||||
"integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">= 0.4"
|
||||
}
|
||||
},
|
||||
"node_modules/es-object-atoms": {
|
||||
"version": "1.1.2",
|
||||
"resolved": "https://registry.npmjs.org/es-object-atoms/-/es-object-atoms-1.1.2.tgz",
|
||||
"integrity": "sha512-HWcBoN6NileqtSydK2FqHbS/LoDd2pqrnQHLyJzBj4kOp/ky2MWMN694xOfkK8/SnUsW2DH7EfyVlydKCsm1Zw==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"es-errors": "^1.3.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 0.4"
|
||||
}
|
||||
},
|
||||
"node_modules/escape-html": {
|
||||
"version": "1.0.3",
|
||||
"resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz",
|
||||
"integrity": "sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/etag": {
|
||||
"version": "1.8.1",
|
||||
"resolved": "https://registry.npmjs.org/etag/-/etag-1.8.1.tgz",
|
||||
"integrity": "sha512-aIL5Fx7mawVa300al2BnEE4iNvo1qETxLrPI/o05L7z6go7fCw1J6EQmbK4FmJ2AS7kgVF/KEZWufBfdClMcPg==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">= 0.6"
|
||||
}
|
||||
},
|
||||
"node_modules/express": {
|
||||
"version": "5.3.0",
|
||||
"resolved": "https://registry.npmjs.org/express/-/express-5.3.0.tgz",
|
||||
"integrity": "sha512-qCqy1xSoaugxOD4IVHb1ZWdkvCF2W3aE2okKouWj8VwJ+ztskSiXoBnCSJqfKT+cVPJhuJqe9YLbY425+Zh00g==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"accepts": "^2.0.0",
|
||||
"body-parser": "^2.3.0",
|
||||
"content-disposition": "^2.0.1",
|
||||
"content-type": "^2.0.0",
|
||||
"cookie": "^0.7.1",
|
||||
"cookie-signature": "^1.2.1",
|
||||
"debug": "^4.4.0",
|
||||
"depd": "^2.0.0",
|
||||
"encodeurl": "^2.0.0",
|
||||
"escape-html": "^1.0.3",
|
||||
"etag": "^1.8.1",
|
||||
"finalhandler": "^2.1.0",
|
||||
"fresh": "^2.0.0",
|
||||
"http-errors": "^2.0.0",
|
||||
"merge-descriptors": "^2.0.0",
|
||||
"mime-types": "^3.0.0",
|
||||
"on-finished": "^2.4.1",
|
||||
"once": "^1.4.0",
|
||||
"parseurl": "^1.3.3",
|
||||
"proxy-addr": "^2.0.8",
|
||||
"qs": "^6.16.0",
|
||||
"range-parser": "^1.2.1",
|
||||
"router": "^2.2.0",
|
||||
"send": "^1.1.0",
|
||||
"serve-static": "^2.2.0",
|
||||
"statuses": "^2.0.1",
|
||||
"type-is": "^2.1.0",
|
||||
"vary": "^1.1.2"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 18"
|
||||
},
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/express"
|
||||
}
|
||||
},
|
||||
"node_modules/finalhandler": {
|
||||
"version": "2.1.1",
|
||||
"resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-2.1.1.tgz",
|
||||
"integrity": "sha512-S8KoZgRZN+a5rNwqTxlZZePjT/4cnm0ROV70LedRHZ0p8u9fRID0hJUZQpkKLzro8LfmC8sx23bY6tVNxv8pQA==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"debug": "^4.4.0",
|
||||
"encodeurl": "^2.0.0",
|
||||
"escape-html": "^1.0.3",
|
||||
"on-finished": "^2.4.1",
|
||||
"parseurl": "^1.3.3",
|
||||
"statuses": "^2.0.1"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 18.0.0"
|
||||
},
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/express"
|
||||
}
|
||||
},
|
||||
"node_modules/forwarded": {
|
||||
"version": "0.2.0",
|
||||
"resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz",
|
||||
"integrity": "sha512-buRG0fpBtRHSTCOASe6hD258tEubFoRLb4ZNA6NxMVHNw2gOcwHo9wyablzMzOA5z9xA9L1KNjk/Nt6MT9aYow==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">= 0.6"
|
||||
}
|
||||
},
|
||||
"node_modules/fresh": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/fresh/-/fresh-2.0.0.tgz",
|
||||
"integrity": "sha512-Rx/WycZ60HOaqLKAi6cHRKKI7zxWbJ31MhntmtwMoaTeF7XFH9hhBp8vITaMidfljRQ6eYWCKkaTK+ykVJHP2A==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">= 0.8"
|
||||
}
|
||||
},
|
||||
"node_modules/function-bind": {
|
||||
"version": "1.1.2",
|
||||
"resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
|
||||
"integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
|
||||
"license": "MIT",
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/ljharb"
|
||||
}
|
||||
},
|
||||
"node_modules/get-intrinsic": {
|
||||
"version": "1.3.0",
|
||||
"resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.3.0.tgz",
|
||||
"integrity": "sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"call-bind-apply-helpers": "^1.0.2",
|
||||
"es-define-property": "^1.0.1",
|
||||
"es-errors": "^1.3.0",
|
||||
"es-object-atoms": "^1.1.1",
|
||||
"function-bind": "^1.1.2",
|
||||
"get-proto": "^1.0.1",
|
||||
"gopd": "^1.2.0",
|
||||
"has-symbols": "^1.1.0",
|
||||
"hasown": "^2.0.2",
|
||||
"math-intrinsics": "^1.1.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 0.4"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/ljharb"
|
||||
}
|
||||
},
|
||||
"node_modules/get-proto": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/get-proto/-/get-proto-1.0.1.tgz",
|
||||
"integrity": "sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"dunder-proto": "^1.0.1",
|
||||
"es-object-atoms": "^1.0.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 0.4"
|
||||
}
|
||||
},
|
||||
"node_modules/gopd": {
|
||||
"version": "1.2.0",
|
||||
"resolved": "https://registry.npmjs.org/gopd/-/gopd-1.2.0.tgz",
|
||||
"integrity": "sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">= 0.4"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/ljharb"
|
||||
}
|
||||
},
|
||||
"node_modules/has-symbols": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.1.0.tgz",
|
||||
"integrity": "sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">= 0.4"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/ljharb"
|
||||
}
|
||||
},
|
||||
"node_modules/hasown": {
|
||||
"version": "2.0.4",
|
||||
"resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.4.tgz",
|
||||
"integrity": "sha512-T2UbfbBEF32wiepXIsMlTW9+dDYC6wMh/t/vYA4tuOMKqWz/n3vr1NFSxQiyP+zk2mXsoMA/i/7qV6LKut1t1A==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"function-bind": "^1.1.2"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 0.4"
|
||||
}
|
||||
},
|
||||
"node_modules/http-errors": {
|
||||
"version": "2.0.1",
|
||||
"resolved": "https://registry.npmjs.org/http-errors/-/http-errors-2.0.1.tgz",
|
||||
"integrity": "sha512-4FbRdAX+bSdmo4AUFuS0WNiPz8NgFt+r8ThgNWmlrjQjt1Q7ZR9+zTlce2859x4KSXrwIsaeTqDoKQmtP8pLmQ==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"depd": "~2.0.0",
|
||||
"inherits": "~2.0.4",
|
||||
"setprototypeof": "~1.2.0",
|
||||
"statuses": "~2.0.2",
|
||||
"toidentifier": "~1.0.1"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 0.8"
|
||||
},
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/express"
|
||||
}
|
||||
},
|
||||
"node_modules/iconv-lite": {
|
||||
"version": "0.7.3",
|
||||
"resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.7.3.tgz",
|
||||
"integrity": "sha512-IKXpvIzjnC9XTAUbVBcMfGS0EPaIXtW6v+zr+RRp+hqULEpo0owZax6wyRwPOJbWbzjYspQwusTsfVr0ifh4uQ==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"safer-buffer": ">= 2.1.2 < 3.0.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=0.10.0"
|
||||
},
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/express"
|
||||
}
|
||||
},
|
||||
"node_modules/inherits": {
|
||||
"version": "2.0.4",
|
||||
"resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
|
||||
"integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
|
||||
"license": "ISC"
|
||||
},
|
||||
"node_modules/ipaddr.js": {
|
||||
"version": "1.9.1",
|
||||
"resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-1.9.1.tgz",
|
||||
"integrity": "sha512-0KI/607xoxSToH7GjN1FfSbLoU0+btTicjsQSWQlh/hZykN8KpmMf7uYwPW3R+akZ6R/w18ZlXSHBYXiYUPO3g==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">= 0.10"
|
||||
}
|
||||
},
|
||||
"node_modules/is-promise": {
|
||||
"version": "4.0.0",
|
||||
"resolved": "https://registry.npmjs.org/is-promise/-/is-promise-4.0.0.tgz",
|
||||
"integrity": "sha512-hvpoI6korhJMnej285dSg6nu1+e6uxs7zG3BYAm5byqDsgJNWwxzM6z6iZiAgQR4TJ30JmBTOwqZUw3WlyH3AQ==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/math-intrinsics": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
|
||||
"integrity": "sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">= 0.4"
|
||||
}
|
||||
},
|
||||
"node_modules/media-typer": {
|
||||
"version": "1.1.1",
|
||||
"resolved": "https://registry.npmjs.org/media-typer/-/media-typer-1.1.1.tgz",
|
||||
"integrity": "sha512-yz3xRaG20c6/BOzvYoDaGtPmGscs7YivItZEEqe6GbwNfHuxu9YNmvnEkMzKldAGY4/80pRcQRZSEnhquk9XuQ==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">= 0.8"
|
||||
},
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/express"
|
||||
}
|
||||
},
|
||||
"node_modules/merge-descriptors": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-2.0.0.tgz",
|
||||
"integrity": "sha512-Snk314V5ayFLhp3fkUREub6WtjBfPdCPY1Ln8/8munuLuiYhsABgBVWsozAG+MWMbVEvcdcpbi9R7ww22l9Q3g==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=18"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/sindresorhus"
|
||||
}
|
||||
},
|
||||
"node_modules/mime-db": {
|
||||
"version": "1.54.0",
|
||||
"resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.54.0.tgz",
|
||||
"integrity": "sha512-aU5EJuIN2WDemCcAp2vFBfp/m4EAhWJnUNSSw0ixs7/kXbd6Pg64EmwJkNdFhB8aWt1sH2CTXrLxo/iAGV3oPQ==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">= 0.6"
|
||||
}
|
||||
},
|
||||
"node_modules/mime-types": {
|
||||
"version": "3.0.2",
|
||||
"resolved": "https://registry.npmjs.org/mime-types/-/mime-types-3.0.2.tgz",
|
||||
"integrity": "sha512-Lbgzdk0h4juoQ9fCKXW4by0UJqj+nOOrI9MJ1sSj4nI8aI2eo1qmvQEie4VD1glsS250n15LsWsYtCugiStS5A==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"mime-db": "^1.54.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=18"
|
||||
},
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/express"
|
||||
}
|
||||
},
|
||||
"node_modules/ms": {
|
||||
"version": "2.1.3",
|
||||
"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
|
||||
"integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/negotiator": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/negotiator/-/negotiator-1.1.0.tgz",
|
||||
"integrity": "sha512-NMPBRMJgiQHjbd8phG3Vebdx4kZ1H121rbl5IkMqeOsahptB9BKo/d7oJ3zTXqTgagn2bWlNSXkh0QUGM31RYg==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"content-type": "^2.1.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=18"
|
||||
},
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/express"
|
||||
}
|
||||
},
|
||||
"node_modules/object-assign": {
|
||||
"version": "4.1.1",
|
||||
"resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
|
||||
"integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=0.10.0"
|
||||
}
|
||||
},
|
||||
"node_modules/object-inspect": {
|
||||
"version": "1.13.4",
|
||||
"resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.4.tgz",
|
||||
"integrity": "sha512-W67iLl4J2EXEGTbfeHCffrjDfitvLANg0UlX3wFUUSTx92KXRFegMHUVgSqE+wvhAbi4WqjGg9czysTV2Epbew==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">= 0.4"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/ljharb"
|
||||
}
|
||||
},
|
||||
"node_modules/on-finished": {
|
||||
"version": "2.4.1",
|
||||
"resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.4.1.tgz",
|
||||
"integrity": "sha512-oVlzkg3ENAhCk2zdv7IJwd/QUD4z2RxRwpkcGY8psCVcCYZNq4wYnVWALHM+brtuJjePWiYF/ClmuDr8Ch5+kg==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"ee-first": "1.1.1"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 0.8"
|
||||
}
|
||||
},
|
||||
"node_modules/once": {
|
||||
"version": "1.4.0",
|
||||
"resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
|
||||
"integrity": "sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==",
|
||||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"wrappy": "1"
|
||||
}
|
||||
},
|
||||
"node_modules/parseurl": {
|
||||
"version": "1.3.3",
|
||||
"resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz",
|
||||
"integrity": "sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">= 0.8"
|
||||
}
|
||||
},
|
||||
"node_modules/path-to-regexp": {
|
||||
"version": "8.4.2",
|
||||
"resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-8.4.2.tgz",
|
||||
"integrity": "sha512-qRcuIdP69NPm4qbACK+aDogI5CBDMi1jKe0ry5rSQJz8JVLsC7jV8XpiJjGRLLol3N+R5ihGYcrPLTno6pAdBA==",
|
||||
"license": "MIT",
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/express"
|
||||
}
|
||||
},
|
||||
"node_modules/proxy-addr": {
|
||||
"version": "2.0.8",
|
||||
"resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.8.tgz",
|
||||
"integrity": "sha512-5nnx0yGyVUcY6t9RnWcARWtwT9F1D8O9rt08htPvnd49W1IgZtmLkhu9WfMzQj1cFxjHIO6connUNVW5k7AVyQ==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"forwarded": "0.2.0",
|
||||
"ipaddr.js": "1.9.1"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 0.10"
|
||||
},
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/express"
|
||||
}
|
||||
},
|
||||
"node_modules/qs": {
|
||||
"version": "6.16.0",
|
||||
"resolved": "https://registry.npmjs.org/qs/-/qs-6.16.0.tgz",
|
||||
"integrity": "sha512-h6fhOIaRrID2CbEY2fqs+7t+UXZo+MLAnU5gRIq85uFtdiUPCdsApMlHhXogKVM4HM2DVbIjGNTTYH2OcmP1vA==",
|
||||
"license": "BSD-3-Clause",
|
||||
"dependencies": {
|
||||
"es-define-property": "^1.0.1",
|
||||
"side-channel": "^1.1.1"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=0.6"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/ljharb"
|
||||
}
|
||||
},
|
||||
"node_modules/range-parser": {
|
||||
"version": "1.3.0",
|
||||
"resolved": "https://registry.npmjs.org/range-parser/-/range-parser-1.3.0.tgz",
|
||||
"integrity": "sha512-hek2mFQpPuI4E1BBKrSto+BU3e3x4xuarsbiwr3+lf7p44juvFMV0XFWQAP3xUyqXA4RrXLIoaSUGbSt056ZMw==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">= 0.6"
|
||||
},
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/express"
|
||||
}
|
||||
},
|
||||
"node_modules/raw-body": {
|
||||
"version": "3.0.2",
|
||||
"resolved": "https://registry.npmjs.org/raw-body/-/raw-body-3.0.2.tgz",
|
||||
"integrity": "sha512-K5zQjDllxWkf7Z5xJdV0/B0WTNqx6vxG70zJE4N0kBs4LovmEYWJzQGxC9bS9RAKu3bgM40lrd5zoLJ12MQ5BA==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"bytes": "~3.1.2",
|
||||
"http-errors": "~2.0.1",
|
||||
"iconv-lite": "~0.7.0",
|
||||
"unpipe": "~1.0.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 0.10"
|
||||
}
|
||||
},
|
||||
"node_modules/router": {
|
||||
"version": "2.2.0",
|
||||
"resolved": "https://registry.npmjs.org/router/-/router-2.2.0.tgz",
|
||||
"integrity": "sha512-nLTrUKm2UyiL7rlhapu/Zl45FwNgkZGaCpZbIHajDYgwlJCOzLSk+cIPAnsEqV955GjILJnKbdQC1nVPz+gAYQ==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"debug": "^4.4.0",
|
||||
"depd": "^2.0.0",
|
||||
"is-promise": "^4.0.0",
|
||||
"parseurl": "^1.3.3",
|
||||
"path-to-regexp": "^8.0.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 18"
|
||||
}
|
||||
},
|
||||
"node_modules/safer-buffer": {
|
||||
"version": "2.1.2",
|
||||
"resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
|
||||
"integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/send": {
|
||||
"version": "1.2.1",
|
||||
"resolved": "https://registry.npmjs.org/send/-/send-1.2.1.tgz",
|
||||
"integrity": "sha512-1gnZf7DFcoIcajTjTwjwuDjzuz4PPcY2StKPlsGAQ1+YH20IRVrBaXSWmdjowTJ6u8Rc01PoYOGHXfP1mYcZNQ==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"debug": "^4.4.3",
|
||||
"encodeurl": "^2.0.0",
|
||||
"escape-html": "^1.0.3",
|
||||
"etag": "^1.8.1",
|
||||
"fresh": "^2.0.0",
|
||||
"http-errors": "^2.0.1",
|
||||
"mime-types": "^3.0.2",
|
||||
"ms": "^2.1.3",
|
||||
"on-finished": "^2.4.1",
|
||||
"range-parser": "^1.2.1",
|
||||
"statuses": "^2.0.2"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 18"
|
||||
},
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/express"
|
||||
}
|
||||
},
|
||||
"node_modules/serve-static": {
|
||||
"version": "2.2.1",
|
||||
"resolved": "https://registry.npmjs.org/serve-static/-/serve-static-2.2.1.tgz",
|
||||
"integrity": "sha512-xRXBn0pPqQTVQiC8wyQrKs2MOlX24zQ0POGaj0kultvoOCstBQM5yvOhAVSUwOMjQtTvsPWoNCHfPGwaaQJhTw==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"encodeurl": "^2.0.0",
|
||||
"escape-html": "^1.0.3",
|
||||
"parseurl": "^1.3.3",
|
||||
"send": "^1.2.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 18"
|
||||
},
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/express"
|
||||
}
|
||||
},
|
||||
"node_modules/setprototypeof": {
|
||||
"version": "1.2.0",
|
||||
"resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz",
|
||||
"integrity": "sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==",
|
||||
"license": "ISC"
|
||||
},
|
||||
"node_modules/side-channel": {
|
||||
"version": "1.1.1",
|
||||
"resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.1.1.tgz",
|
||||
"integrity": "sha512-6x6dK6zJdpTzF4sQeNYxwtvBzf6Eg4GtlesS94HOvTudUeyK2WXAaIfmDgsyslYrRBeFIlsi54AYsFGUuhmvrQ==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"es-errors": "^1.3.0",
|
||||
"object-inspect": "^1.13.4",
|
||||
"side-channel-list": "^1.0.1",
|
||||
"side-channel-map": "^1.0.1",
|
||||
"side-channel-weakmap": "^1.0.2"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 0.4"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/ljharb"
|
||||
}
|
||||
},
|
||||
"node_modules/side-channel-list": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/side-channel-list/-/side-channel-list-1.0.1.tgz",
|
||||
"integrity": "sha512-mjn/0bi/oUURjc5Xl7IaWi/OJJJumuoJFQJfDDyO46+hBWsfaVM65TBHq2eoZBhzl9EchxOijpkbRC8SVBQU0w==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"es-errors": "^1.3.0",
|
||||
"object-inspect": "^1.13.4"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 0.4"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/ljharb"
|
||||
}
|
||||
},
|
||||
"node_modules/side-channel-map": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/side-channel-map/-/side-channel-map-1.0.1.tgz",
|
||||
"integrity": "sha512-VCjCNfgMsby3tTdo02nbjtM/ewra6jPHmpThenkTYh8pG9ucZ/1P8So4u4FGBek/BjpOVsDCMoLA/iuBKIFXRA==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"call-bound": "^1.0.2",
|
||||
"es-errors": "^1.3.0",
|
||||
"get-intrinsic": "^1.2.5",
|
||||
"object-inspect": "^1.13.3"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 0.4"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/ljharb"
|
||||
}
|
||||
},
|
||||
"node_modules/side-channel-weakmap": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmjs.org/side-channel-weakmap/-/side-channel-weakmap-1.0.2.tgz",
|
||||
"integrity": "sha512-WPS/HvHQTYnHisLo9McqBHOJk2FkHO/tlpvldyrnem4aeQp4hai3gythswg6p01oSoTl58rcpiFAjF2br2Ak2A==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"call-bound": "^1.0.2",
|
||||
"es-errors": "^1.3.0",
|
||||
"get-intrinsic": "^1.2.5",
|
||||
"object-inspect": "^1.13.3",
|
||||
"side-channel-map": "^1.0.1"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 0.4"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/ljharb"
|
||||
}
|
||||
},
|
||||
"node_modules/statuses": {
|
||||
"version": "2.0.2",
|
||||
"resolved": "https://registry.npmjs.org/statuses/-/statuses-2.0.2.tgz",
|
||||
"integrity": "sha512-DvEy55V3DB7uknRo+4iOGT5fP1slR8wQohVdknigZPMpMstaKJQWhwiYBACJE3Ul2pTnATihhBYnRhZQHGBiRw==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">= 0.8"
|
||||
}
|
||||
},
|
||||
"node_modules/toidentifier": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.1.tgz",
|
||||
"integrity": "sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=0.6"
|
||||
}
|
||||
},
|
||||
"node_modules/type-is": {
|
||||
"version": "2.1.0",
|
||||
"resolved": "https://registry.npmjs.org/type-is/-/type-is-2.1.0.tgz",
|
||||
"integrity": "sha512-faYHw0anBbc/kWF3zFTEnxSFOAGUX9GFbOBthvDdLsIlEoWOFOtS0zgCiQYwIskL9iGXZL3kAXD8OoZ4GmMATA==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"content-type": "^2.0.0",
|
||||
"media-typer": "^1.1.0",
|
||||
"mime-types": "^3.0.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 18"
|
||||
},
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/express"
|
||||
}
|
||||
},
|
||||
"node_modules/unpipe": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz",
|
||||
"integrity": "sha512-pjy2bYhSsufwWlKwPc+l3cN7+wuJlK6uz0YdJEOlQDbl6jo/YlPi4mb8agUkVC8BF7V8NuzeyPNqRksA3hztKQ==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">= 0.8"
|
||||
}
|
||||
},
|
||||
"node_modules/uuid": {
|
||||
"version": "14.0.3",
|
||||
"resolved": "https://registry.npmjs.org/uuid/-/uuid-14.0.3.tgz",
|
||||
"integrity": "sha512-Sc5u1VVln93y1Xnz4R+CunOZc7R9LUcTmhj7Rc7Eg3HVcf7rVn2FOoa812fe0W8p3jD7xeoGSYbfqCGGH2B6xw==",
|
||||
"funding": [
|
||||
"https://github.com/sponsors/broofa",
|
||||
"https://github.com/sponsors/ctavan"
|
||||
],
|
||||
"license": "MIT",
|
||||
"bin": {
|
||||
"uuid": "dist-node/bin/uuid"
|
||||
}
|
||||
},
|
||||
"node_modules/vary": {
|
||||
"version": "1.1.2",
|
||||
"resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
|
||||
"integrity": "sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">= 0.8"
|
||||
}
|
||||
},
|
||||
"node_modules/wrappy": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
|
||||
"integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==",
|
||||
"license": "ISC"
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,18 @@
|
||||
{
|
||||
"name": "backend",
|
||||
"version": "1.0.0",
|
||||
"description": "",
|
||||
"main": "server.js",
|
||||
"scripts": {
|
||||
"dev": "npx nodemon server.js"
|
||||
},
|
||||
"keywords": [],
|
||||
"type": "module",
|
||||
"dependencies": {
|
||||
"chalk": "^6.0.1",
|
||||
"cors": "^2.8.6",
|
||||
"dotenv": "^18.0.8",
|
||||
"express": "^5.3.0",
|
||||
"uuid": "^14.0.3"
|
||||
}
|
||||
}
|
||||
+12
@@ -0,0 +1,12 @@
|
||||
body {
|
||||
background-color: #ccc;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
color: tomato;
|
||||
}
|
||||
@@ -0,0 +1,18 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Home</title>
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" />
|
||||
<link rel="stylesheet" href="assets/css/main.css" />
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<div class="container py-5">
|
||||
<h1>Expres Rest API</h1>
|
||||
<p>Server is running</p>
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,162 @@
|
||||
import express from 'express';
|
||||
import color from 'chalk';
|
||||
import dotenv from 'dotenv';
|
||||
import cors from 'cors';
|
||||
|
||||
dotenv.config(); // Sensible Konfigurationsvariablen werden in einer .env Datei ausgelagert
|
||||
|
||||
// Models
|
||||
import ProductModel from './models/ProductModel.js';
|
||||
|
||||
const PORT = process.env.SERVER_PORT || 8000;
|
||||
const HOST = process.env.SERVER_HOST || '127.0.0.1';
|
||||
const BASE_URL = `http://${HOST}:${PORT}`;
|
||||
|
||||
// CORS Settings
|
||||
const corsOptions = {
|
||||
origin: ['http://localhost:3000', 'http://127.0.0.1:3000'],
|
||||
optionsSuccessStatus: 200, // some legacy browsers (IE11, Browser Extensions, various SmartTVs) choke on 204
|
||||
};
|
||||
|
||||
// lade Produkte
|
||||
const products = ProductModel();
|
||||
products.load();
|
||||
|
||||
const app = express();
|
||||
// Middleware =======
|
||||
app.use(express.static('./public'));
|
||||
app.use(cors(corsOptions)); // CORS Settings für alle HTTP-Requests
|
||||
|
||||
app.use(express.json()); // => HTTP-Request Body wird als JSON Objekt erwartet und geparsed. // app.use(bodyParser.json()) - Module: body-parser war in express 4 notwendig.
|
||||
app.use(express.urlencoded({ extended: true }));
|
||||
// Routes ===========
|
||||
|
||||
// REST API =========
|
||||
// REST (Representational State Transfer)
|
||||
// GET - Daten holen
|
||||
// POST - Daten hinzufügen
|
||||
// PUT/PATCH - Daten aktualisieren /Datensatz aktualisieren
|
||||
// DELETE - Daten löschen
|
||||
|
||||
// HTTP - Methode - POST
|
||||
// (C)RUD - create
|
||||
// BRE(A)D - add
|
||||
app.post('/api/products', (req, res) => {
|
||||
const product = req.body;
|
||||
|
||||
if (!products.add(product)) {
|
||||
return res.status(400).send({ msg: 'Could not add product', status: 400, success: false });
|
||||
}
|
||||
|
||||
return res.send({ msg: 'Product added', status: 200, success: true, data: product });
|
||||
});
|
||||
|
||||
// HTTP - Methode - GET
|
||||
// C(R)UD - read
|
||||
// (B)READ - browse
|
||||
app.get('/api/products', (req, res) => {
|
||||
const data = products.getAll();
|
||||
return res.send(data);
|
||||
});
|
||||
|
||||
// HTTP - Methode - GET
|
||||
// C(R)UD - read
|
||||
// B(R)EAD - read
|
||||
app.get('/api/products/:id', (req, res) => {
|
||||
const { id } = req.params;
|
||||
const product = products.get(id);
|
||||
|
||||
if (!product) {
|
||||
return res.status(400).send({ msg: 'Could not get product', status: 400, success: false });
|
||||
}
|
||||
|
||||
return res.send(product);
|
||||
});
|
||||
|
||||
// HTTP - Methode - PUT/PATCH
|
||||
// CR(U)D - update
|
||||
// BR(E)AD - edit
|
||||
app.put('/api/products', (req, res) => {
|
||||
const product = req.body;
|
||||
|
||||
const updated = products.update(product);
|
||||
|
||||
if (!updated) {
|
||||
return res.status(400).send({ msg: 'Could not update product', status: 400, success: false });
|
||||
}
|
||||
|
||||
return res.send({ msg: 'Product updated', status: 200, success: true, data: product });
|
||||
});
|
||||
|
||||
// HTTP - Methode - DELETE
|
||||
// CRU(D) - delete
|
||||
// BREA(D) - delete
|
||||
app.delete('/api/products/:id', (req, res) => {
|
||||
const { id } = req.params;
|
||||
|
||||
if (!products.delete(id)) {
|
||||
return res.status(400).send({ msg: 'Could not delete product', status: 400, success: false });
|
||||
}
|
||||
|
||||
return res.send({ msg: 'Product deleted', status: 200, success: true, data: id });
|
||||
});
|
||||
|
||||
// HTTP - Methode - PATCH
|
||||
// reseten von Produkten
|
||||
app.patch('/api/products/reset', (req, res) => {
|
||||
console.log(req.query.reset);
|
||||
const reset = req.body.reset;
|
||||
|
||||
if (!reset) {
|
||||
return res.status(400).send({ msg: 'Could not reset products', status: 400, success: false });
|
||||
}
|
||||
|
||||
products.reset();
|
||||
|
||||
return res.send({ msg: 'Products reseted', status: 200, success: true, data: [] });
|
||||
});
|
||||
|
||||
// HTTP - Methode - PUT
|
||||
// Positionsaktualisierung aller Produkte
|
||||
app.put('/api/products/positions', (req, res) => {
|
||||
const positions = req.body;
|
||||
|
||||
if (!products.updatePosition(positions)) {
|
||||
return res.status(400).send({
|
||||
msg: 'Could not update positions',
|
||||
status: 400,
|
||||
success: false,
|
||||
});
|
||||
}
|
||||
|
||||
return res.send({
|
||||
msg: 'Positions updated',
|
||||
status: 200,
|
||||
success: true,
|
||||
data: positions,
|
||||
});
|
||||
});
|
||||
|
||||
// HTTP - Methode - PATCH
|
||||
// speichern von Produkten
|
||||
app.patch('/api/products/save', (req, res) => {
|
||||
const save = req.body.save;
|
||||
|
||||
if (!save) {
|
||||
return res.status(400).send({ msg: 'Could not save products', status: 400, success: false });
|
||||
}
|
||||
|
||||
products.save();
|
||||
|
||||
return res.send({ msg: 'Products saved', status: 200, success: true, data: [] });
|
||||
});
|
||||
|
||||
app.get('/', (req, res) => {
|
||||
console.log(req.query.reset);
|
||||
return res.send('Server is running!');
|
||||
});
|
||||
|
||||
app.listen(PORT, HOST, () => {
|
||||
console.log(color.magenta(`Server is running at: ${BASE_URL}`));
|
||||
console.log(color.yellow('To close: CTRL + C'));
|
||||
});
|
||||
@@ -0,0 +1,18 @@
|
||||
import fs from 'node:fs';
|
||||
import { v4 as id } from 'uuid';
|
||||
|
||||
console.log(id()); // => a5d94286-f2f8-4553-875b-73839739f9ea
|
||||
|
||||
try {
|
||||
const data = JSON.parse(fs.readFileSync('../data/products.json', 'utf-8'));
|
||||
|
||||
const products = data.map((product, idx) => {
|
||||
return { _id: product._id || id(), position: idx + 1, ...product };
|
||||
});
|
||||
|
||||
console.log(products);
|
||||
|
||||
fs.writeFileSync('../data/products.json', JSON.stringify(products, null, 2));
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
+28
@@ -0,0 +1,28 @@
|
||||
{
|
||||
"name": "utils",
|
||||
"version": "1.0.0",
|
||||
"lockfileVersion": 3,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
"": {
|
||||
"name": "utils",
|
||||
"version": "1.0.0",
|
||||
"dependencies": {
|
||||
"uuid": "^14.0.2"
|
||||
}
|
||||
},
|
||||
"node_modules/uuid": {
|
||||
"version": "14.0.2",
|
||||
"resolved": "https://registry.npmjs.org/uuid/-/uuid-14.0.2.tgz",
|
||||
"integrity": "sha512-xZe/16rV4aa+HGSOCiY2YeLT1OybRLrrkL/Rqaq7p7GMVXjFh+6wN4oMYgjFmnSnhY8t6Xpdl2l9qmnHYuMHwQ==",
|
||||
"funding": [
|
||||
"https://github.com/sponsors/broofa",
|
||||
"https://github.com/sponsors/ctavan"
|
||||
],
|
||||
"license": "MIT",
|
||||
"bin": {
|
||||
"uuid": "dist-node/bin/uuid"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,14 @@
|
||||
{
|
||||
"name": "utils",
|
||||
"version": "1.0.0",
|
||||
"description": "",
|
||||
"main": "json-modifier.js",
|
||||
"scripts": {
|
||||
"test": "echo \"Error: no test specified\" && exit 1"
|
||||
},
|
||||
"keywords": [],
|
||||
"type": "module",
|
||||
"dependencies": {
|
||||
"uuid": "^14.0.2"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,3 @@
|
||||
# Browser that we support
|
||||
|
||||
> 0.5%, last 2 versions, Firefox ESR, not dead
|
||||
+8
@@ -0,0 +1,8 @@
|
||||
{
|
||||
"workbench.colorCustomizations": {
|
||||
"titleBar.activeForeground": "#333",
|
||||
"titleBar.activeBackground": "#6bd0ab",
|
||||
"titleBar.inactiveForeground": "#ddd",
|
||||
"titleBar.inactiveBackground": "#6ca38f"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,6 @@
|
||||
## Refactoring ProductManager
|
||||
|
||||
- [x] Aktualisierung der Produktpositionen nach Veränderung durch Drag n' Drop
|
||||
- [x] fetch Anfragen durch `api.request()` Methode zusammenfassen (DRY-Prinzip)
|
||||
- [x] Anzahl an EventListener auf Zeilenebene durch Eventlistener auf Tabellenebene reduzieren.
|
||||
- [ ] HTML Elemente, die derzeit eine einmalige Zuweisung (z.B. `id`, `for`, `aria-labelledby` Attribut) im Produktmanager besitzen sollen über JS eine einmalige ID über `uuid` erhalten.
|
||||
+12980
File diff suppressed because it is too large
Load Diff
BIN
Binary file not shown.
BIN
Binary file not shown.
BIN
Binary file not shown.
BIN
Binary file not shown.
BIN
Binary file not shown.
BIN
Binary file not shown.
BIN
Binary file not shown.
BIN
Binary file not shown.
BIN
Binary file not shown.
BIN
Binary file not shown.
BIN
Binary file not shown.
BIN
Binary file not shown.
BIN
Binary file not shown.
BIN
Binary file not shown.
BIN
Binary file not shown.
BIN
Binary file not shown.
BIN
Binary file not shown.
BIN
Binary file not shown.
BIN
Binary file not shown.
BIN
Binary file not shown.
BIN
Binary file not shown.
BIN
Binary file not shown.
BIN
Binary file not shown.
BIN
Binary file not shown.
BIN
Binary file not shown.
BIN
Binary file not shown.
BIN
Binary file not shown.
BIN
Binary file not shown.
|
After Width: | Height: | Size: 849 KiB |
BIN
Binary file not shown.
|
After Width: | Height: | Size: 114 KiB |
+8
@@ -0,0 +1,8 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2" viewBox="0 0 642 483">
|
||||
<path d="M803.541 858.114h641.02v489.042h-641.02z" fill="none" transform="matrix(1 0 0 .98569 -803.541 -845.831)"/>
|
||||
<path d="m200.993 79.566-1.106 1.106c-4.992 4.992-13.087 4.992-18.08 0L159.18 58.044c-4.992-4.993-4.992-13.087 0-18.08l1.106-1.105c4.993-4.993 13.087-4.993 18.08 0l22.627 22.627c4.992 4.993 4.992 13.088 0 18.08" fill="#75cbcc" fill-rule="nonzero" transform="translate(-222.359 -66.506)scale(3.5623)"/>
|
||||
<path d="m178.918 101.6 21.522-21.522c5.298-5.298 5.298-13.887 0-19.185a13 13 0 0 0-.618-.577l-17.95-17.95c4.525 5.117 4.525 12.829.003 17.947q-.317.278-.621.58l-21.522 21.521c-5.298 5.298-5.298 13.888 0 19.186 5.299 5.298 13.888 5.298 19.186 0" fill="#ace0e0" fill-rule="nonzero" transform="translate(-222.359 -66.506)scale(3.5623)"/>
|
||||
<path d="m99.555 61.446 1.106-1.106c4.992-4.993 13.087-4.993 18.08 0l22.628 22.628c4.992 4.993 4.992 13.087 0 18.08l-1.106 1.105c-4.993 4.993-13.087 4.993-18.08 0L99.555 79.525c-4.992-4.993-4.992-13.087 0-18.079" fill="#75cbcc" fill-rule="nonzero" transform="translate(-222.359 -66.506)scale(3.5623)"/>
|
||||
<path d="m121.63 39.411-21.522 21.522c-5.298 5.298-5.298 13.888 0 19.185q.302.299.617.577l17.95 17.949c-4.524-5.117-4.525-12.829-.003-17.947a13 13 0 0 0 .621-.58l21.522-21.522c5.298-5.298 5.298-13.887 0-19.186-5.297-5.295-13.887-5.295-19.185.002" fill="#ace0e0" fill-rule="nonzero" transform="translate(-222.359 -66.506)scale(3.5623)"/>
|
||||
<path d="M206.166 330.121q0 5-1.229 8.958t-3.625 6.688q-2.395 2.729-5.896 4.187t-8.041 1.458q-4.125 0-8.417-1.166.084-1.208.208-2.396.125-1.187.209-2.354.083-.708.52-1.146.438-.438 1.355-.438.75 0 1.979.375 1.228.375 3.312.375 2.751 0 4.917-.833a8.7 8.7 0 0 0 3.625-2.583q1.458-1.75 2.229-4.479t.771-6.48v-39.25h8.083zM251.333 300.371q-.375.625-.813.937-.436.313-1.062.313-.708 0-1.667-.709a29 29 0 0 0-2.396-1.562q-1.437-.853-3.458-1.563-2.02-.708-4.896-.708-2.708 0-4.771.729-2.062.73-3.458 1.979a8.1 8.1 0 0 0-2.104 2.938q-.708 1.687-.708 3.646 0 2.499 1.229 4.146 1.229 1.645 3.25 2.812t4.583 2.021a790 790 0 0 1 5.25 1.771 61 61 0 0 1 5.25 2.062 18.5 18.5 0 0 1 4.583 2.896q2.022 1.75 3.25 4.292 1.23 2.542 1.23 6.25 0 3.916-1.334 7.354a16.9 16.9 0 0 1-3.896 5.979q-2.562 2.542-6.291 4t-8.479 1.458q-5.834 0-10.584-2.104t-8.125-5.687l2.334-3.834a3.1 3.1 0 0 1 .812-.77q.48-.313 1.063-.313.541 0 1.229.438.687.436 1.562 1.104.876.666 2 1.458t2.563 1.458q1.437.667 3.271 1.105t4.125.437q2.875 0 5.125-.792 2.25-.79 3.812-2.229a9.66 9.66 0 0 0 2.396-3.437q.834-2 .833-4.459 0-2.707-1.229-4.437t-3.229-2.896-4.583-1.979a978 978 0 0 1-5.25-1.667 56 56 0 0 1-5.25-1.979 17 17 0 0 1-4.584-2.917q-2-1.791-3.229-4.479-1.229-2.687-1.229-6.646 0-3.166 1.229-6.125a15.7 15.7 0 0 1 3.583-5.25q2.355-2.291 5.792-3.666 3.438-1.375 7.896-1.375 5 0 9.104 1.583a21.5 21.5 0 0 1 7.229 4.583zM329.25 338.412q.666 0 1.166.542l3.209 3.458q-3.667 4.25-8.896 6.625t-12.646 2.375q-6.417 0-11.667-2.229t-8.958-6.25q-3.708-4.02-5.75-9.646-2.042-5.625-2.042-12.375t2.125-12.375 5.979-9.666q3.855-4.042 9.23-6.271 5.374-2.229 11.875-2.229 6.375 0 11.25 2.041 4.875 2.043 8.583 5.542l-2.667 3.708a2.2 2.2 0 0 1-.646.688q-.395.271-1.062.271-.75 0-1.833-.813-1.084-.812-2.834-1.812t-4.375-1.813-6.458-.812q-4.625 0-8.458 1.604a18.5 18.5 0 0 0-6.605 4.646q-2.77 3.042-4.312 7.416-1.542 4.376-1.542 9.875 0 5.584 1.604 9.959t4.375 7.396a18.5 18.5 0 0 0 6.542 4.604q3.77 1.583 8.146 1.583 2.667 0 4.812-.312a19.7 19.7 0 0 0 3.959-.98 16.6 16.6 0 0 0 3.375-1.687 24 24 0 0 0 3.104-2.438q.708-.625 1.417-.625M397 320.912q0 6.71-2.125 12.313t-6 9.646-9.313 6.271-12.021 2.229-12-2.229-9.291-6.271q-3.876-4.042-6-9.646t-2.125-12.313q0-6.708 2.125-12.312t6-9.667q3.875-4.062 9.291-6.312t12-2.25 12.021 2.25 9.313 6.312 6 9.667Q397 314.204 397 320.912m-8.292 0q0-5.5-1.5-9.875-1.5-4.374-4.25-7.395t-6.667-4.646q-3.916-1.625-8.75-1.625-4.791 0-8.708 1.625t-6.688 4.646q-2.77 3.021-4.27 7.395-1.5 4.376-1.5 9.875 0 5.5 1.5 9.855 1.5 4.353 4.27 7.375 2.772 3.02 6.688 4.625t8.708 1.604q4.834 0 8.75-1.604t6.667-4.625q2.75-3.022 4.25-7.375 1.5-4.355 1.5-9.855M431.583 344.329q3.708 0 6.625-1.25t4.937-3.5q2.021-2.25 3.084-5.375 1.062-3.125 1.062-6.875v-36.292h8.042v36.292q0 5.167-1.646 9.583-1.646 4.418-4.708 7.646-3.063 3.23-7.479 5.063t-9.917 1.833-9.917-1.833-7.5-5.063q-3.083-3.228-4.729-7.646-1.646-4.416-1.646-9.583v-36.292h8.042v36.25q0 3.75 1.062 6.875t3.084 5.375q2.02 2.25 4.958 3.521 2.938 1.272 6.646 1.271M486.375 319.954q3.5 0 6.187-.854t4.5-2.417a10 10 0 0 0 2.729-3.729q.917-2.166.917-4.792 0-5.333-3.5-8.041t-10.5-2.709h-8.833v22.542zm27.583 30.792h-7.167q-2.208 0-3.25-1.709l-15.5-21.333q-.708-1-1.521-1.437t-2.52-.438h-6.125v24.917h-8.042v-59.709h16.875q5.667 0 9.792 1.146t6.812 3.313 3.979 5.229 1.292 6.854q0 3.166-1 5.917a15.6 15.6 0 0 1-2.896 4.937q-1.896 2.188-4.625 3.729-2.729 1.542-6.187 2.334 1.54.875 2.666 2.541zM552.583 300.371q-.375.625-.813.937t-1.062.313q-.708 0-1.667-.709a29 29 0 0 0-2.396-1.562q-1.437-.853-3.458-1.563-2.02-.708-4.896-.708-2.708 0-4.771.729-2.062.73-3.458 1.979a8.1 8.1 0 0 0-2.104 2.938q-.708 1.687-.708 3.646 0 2.499 1.229 4.146 1.229 1.645 3.25 2.812t4.583 2.021a790 790 0 0 1 5.25 1.771 61 61 0 0 1 5.25 2.062 18.5 18.5 0 0 1 4.583 2.896q2.022 1.75 3.25 4.292 1.23 2.542 1.23 6.25 0 3.916-1.334 7.354a16.9 16.9 0 0 1-3.896 5.979q-2.562 2.542-6.291 4t-8.479 1.458q-5.834 0-10.584-2.104t-8.125-5.687l2.334-3.834a3.1 3.1 0 0 1 .812-.77q.48-.313 1.063-.313.541 0 1.229.438.687.436 1.562 1.104.875.666 2 1.458t2.563 1.458q1.437.667 3.271 1.105t4.125.437q2.875 0 5.125-.792 2.25-.79 3.812-2.229a9.66 9.66 0 0 0 2.396-3.437q.833-2 .833-4.459 0-2.707-1.229-4.437t-3.229-2.896-4.583-1.979a978 978 0 0 1-5.25-1.667 56 56 0 0 1-5.25-1.979 17 17 0 0 1-4.584-2.917q-2-1.791-3.229-4.479-1.229-2.687-1.229-6.646 0-3.166 1.229-6.125a15.7 15.7 0 0 1 3.583-5.25q2.355-2.291 5.792-3.666 3.438-1.375 7.896-1.375 5 0 9.104 1.583a21.5 21.5 0 0 1 7.229 4.583zM604.083 344.162l-.042 6.584H567.25v-59.709h36.791v6.584h-28.708v19.833h23.25v6.333h-23.25v20.375z" fill-rule="nonzero" transform="translate(-78.559 53)"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 6.1 KiB |
+931
File diff suppressed because one or more lines are too long
+7
@@ -0,0 +1,7 @@
|
||||
{
|
||||
"version": 3,
|
||||
"sources": ["../../dev/js/main.js"],
|
||||
"sourcesContent": ["'use strict';\n\n(() => {\n // === DOM & VARS =======\n const DOM = {};\n\n // === INIT =============\n const init = () => {\n console.log('init...');\n };\n\n // === EVENTHANDLER =====\n\n // === XHR/FETCH ========\n\n // === FUNCTIONS ========\n\n init();\n})();\n"],
|
||||
"mappings": ";;;AAEA,GAAC,MAAM;AAEL,UAAM,MAAM,CAAC;AAGb,UAAM,OAAO,MAAM;AACjB,cAAQ,IAAI,SAAS;AAAA,IACvB;AAQA,SAAK;AAAA,EACP,GAAG;",
|
||||
"names": []
|
||||
}
|
||||
+1
File diff suppressed because one or more lines are too long
+1
File diff suppressed because one or more lines are too long
@@ -0,0 +1,133 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Contact</title>
|
||||
<!-- <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" /> -->
|
||||
<!-- <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"></script> -->
|
||||
|
||||
<link rel="icon" type="image/png" href="./favicon/favicon-96x96.png" sizes="96x96" />
|
||||
<link rel="icon" type="image/svg+xml" href="./favicon/favicon.svg" />
|
||||
<link rel="shortcut icon" href="./favicon/favicon.ico" />
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="./favicon/apple-touch-icon.png" />
|
||||
<meta name="apple-mobile-web-app-title" content="JS Course" />
|
||||
<link rel="manifest" href="./favicon/site.webmanifest" />
|
||||
|
||||
<link rel="stylesheet" href="./assets/css/main.css" />
|
||||
<script src="./assets/js/build.js" defer></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!-- header.header-main>.content-box>figure.logo-main>img+figc -->
|
||||
<header class="header-main">
|
||||
<div class="content-box">
|
||||
<figure class="logo-main">
|
||||
<img src="/assets/img/logo-js.min.svg" alt="Logo - JS Course" />
|
||||
<figcaption>JS course</figcaption>
|
||||
</figure>
|
||||
</div>
|
||||
<!-- ▼ Slider Splide ▼ -->
|
||||
<section class="splide my-slider" aria-label="Header Slider">
|
||||
<div class="splide__track">
|
||||
<ul class="splide__list">
|
||||
<li class="splide__slide" style="background-image: url('https://dummyimage.com/1920x600/f90/333.jpg')"></li>
|
||||
<li class="splide__slide" style="background-image: url('https://dummyimage.com/1920x600/c40/333.jpg')"></li>
|
||||
<li class="splide__slide" style="background-image: url('https://dummyimage.com/1920x600/fc0/333.jpg')"></li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</header>
|
||||
|
||||
<!-- nav.menu-main>ul.list>li*4>a[href="#"]{Link $} -->
|
||||
<nav class="menu-main">
|
||||
<ul class="list">
|
||||
<li><a href="./">Home</a></li>
|
||||
<li><a href="./about.html">About</a></li>
|
||||
<li>
|
||||
<a href="#dropdown">Projects</a>
|
||||
<!-- ul.sublist>li*3>a[href="#"]{Project $} -->
|
||||
<ul class="sublist">
|
||||
<li><a href="./projects/01_jokes.html">01 Chuck Norris Jokes</a></li>
|
||||
<li><a href="/projects/02_product-manager.html">02 Product Manager</a></li>
|
||||
<li><a href="#">Project 3</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="./contact.html">Contact</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<main>
|
||||
<div class="container py-5">
|
||||
<h1>Kontakt</h1>
|
||||
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet, iste?</p>
|
||||
<form class="form-contact">
|
||||
<div class="row">
|
||||
<!-- .col>.mb-3>label.form-label -->
|
||||
<div class="col-12 col-md-6">
|
||||
<div class="mb-3">
|
||||
<label for="input-firstname" class="form-label">First name:</label>
|
||||
<input
|
||||
type="text"
|
||||
name="firstname"
|
||||
id="input-firstname"
|
||||
class="form-control input-firstname"
|
||||
required />
|
||||
</div>
|
||||
</div>
|
||||
<!-- ▲ /col ▲ -->
|
||||
<!-- .col>.mb-3>label.form-label -->
|
||||
<div class="col-12 col-md-6">
|
||||
<div class="mb-3">
|
||||
<label for="input-lastname" class="form-label">Last name:</label>
|
||||
<input type="text" name="lastname" id="input-lastname" class="form-control input-lastname" required />
|
||||
</div>
|
||||
</div>
|
||||
<!-- ▲ /col ▲ -->
|
||||
</div>
|
||||
<!-- .row>.col>.mb-3>label.form-label+input:email.form-control -->
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<div class="mb-3">
|
||||
<label for="input-email" class="form-label">E-mail</label>
|
||||
<input type="email" name="email" id="input-email" class="form-control input-email" required />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<div class="mb-3">
|
||||
<label for="input-subject" class="form-label">Subject</label>
|
||||
<input type="text" name="subject" id="input-subject" class="form-control input-subject" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- .row>.col>.mb-3>label.form-label+textarea.form-control -->
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<div class="mb-3">
|
||||
<label for="textarea-message" class="form-label">Message</label>
|
||||
|
||||
<textarea
|
||||
name="message"
|
||||
id="textarea-message"
|
||||
cols="12"
|
||||
rows="8"
|
||||
class="form-control textarea-message"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- .row>.col>.mb-3>button:submit.btn.btn-dark.button-submit -->
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<div class="mb-3">
|
||||
<button type="submit" class="btn btn-dark button-submit">Send</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,5 @@
|
||||
const PRODUCTS = [
|
||||
{ name: '3Doodler 3D Printing Pen', price: 29.99 },
|
||||
{ name: 'Powerstation 5- E. Maximus Chargus', price: 44.95 },
|
||||
{ name: '8-Bit Legendary Hero Heat-Change Mug', price: 6.99 },
|
||||
];
|
||||
@@ -0,0 +1,7 @@
|
||||
[
|
||||
{ "name": "3Doodler 3D Printing Pen", "price": 29.99 },
|
||||
{ "name": "Powerstation 5- E. Maximus Chargus", "price": 44.95 },
|
||||
{ "name": "8-Bit Legendary Hero Heat-Change Mug", "price": 6.99 },
|
||||
{ "name": "16-Bit Legendary Hero Heat-Change Mug", "price": 12.99 },
|
||||
{ "name": "32-Bit Legendary Hero Heat-Change Mug", "price": 14.99 }
|
||||
]
|
||||
+17
@@ -0,0 +1,17 @@
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>@@title</title>
|
||||
<!-- <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" /> -->
|
||||
<!-- <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"></script> -->
|
||||
|
||||
<link rel="icon" type="image/png" href="@@webRoot/favicon/favicon-96x96.png" sizes="96x96" />
|
||||
<link rel="icon" type="image/svg+xml" href="@@webRoot/favicon/favicon.svg" />
|
||||
<link rel="shortcut icon" href="@@webRoot/favicon/favicon.ico" />
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="@@webRoot/favicon/apple-touch-icon.png" />
|
||||
<meta name="apple-mobile-web-app-title" content="JS Course" />
|
||||
<link rel="manifest" href="@@webRoot/favicon/site.webmanifest" />
|
||||
|
||||
<link rel="stylesheet" href="@@webRoot/assets/css/main.css" />
|
||||
<script src="@@webRoot/assets/js/build.js" defer></script>
|
||||
</head>
|
||||
+10
@@ -0,0 +1,10 @@
|
||||
<!-- header.header-main>.content-box>figure.logo-main>img+figc -->
|
||||
<header class="header-main">
|
||||
<div class="content-box">
|
||||
<figure class="logo-main">
|
||||
<img src="/assets/img/logo-js.min.svg" alt="Logo - JS Course" />
|
||||
<figcaption>JS course</figcaption>
|
||||
</figure>
|
||||
</div>
|
||||
@@include('slider-splide.html')
|
||||
</header>
|
||||
+16
@@ -0,0 +1,16 @@
|
||||
<nav class="menu-main">
|
||||
<ul class="list">
|
||||
<li><a href="@@webRoot/">Home</a></li>
|
||||
<li><a href="@@webRoot/about.html">About</a></li>
|
||||
<li>
|
||||
<a href="#dropdown">Projects</a>
|
||||
<!-- ul.sublist>li*3>a[href="#"]{Project $} -->
|
||||
<ul class="sublist">
|
||||
<li><a href="@@webRoot/projects/01_jokes.html">01 Chuck Norris Jokes</a></li>
|
||||
<li><a href="/projects/02_product-manager.html">02 Product Manager</a></li>
|
||||
<li><a href="#">Project 3</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="@@webRoot/contact.html">Contact</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
+192
@@ -0,0 +1,192 @@
|
||||
<!-- ▼ Product Manager ▼ -->
|
||||
<div class="product-manager">
|
||||
<div class="container py-5">
|
||||
<h1>Productmanager</h1>
|
||||
|
||||
<nav class="nav-products-actions">
|
||||
<ul class="list">
|
||||
<li>
|
||||
<button class="btn btn-dark button-products-save">
|
||||
<i class="fas fa-floppy-disk"></i>
|
||||
<span>Save Products</span>
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button class="btn btn-danger button-products-reset">
|
||||
<i class="fas fa-box-archive"></i>
|
||||
<span>Reset Products</span>
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<!-- table.table.table-striped.table-products>thead.table-dark>tr>th*2 -->
|
||||
<table class="table table-striped table-products">
|
||||
<thead class="table-dark">
|
||||
<tr>
|
||||
<th class="th-dragger">#</th>
|
||||
<th class="th-name">Name</th>
|
||||
<th class="th-price">Price in €</th>
|
||||
<th class="th-actions">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody></tbody>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<td colspan="4">
|
||||
<div class="row">
|
||||
<div class="col-12 col-md-6 col-lg-7">
|
||||
<input
|
||||
type="text"
|
||||
name="product-name"
|
||||
class="form-control input-product-name"
|
||||
placeholder="Insert product name"
|
||||
aria-label="Product name" />
|
||||
</div>
|
||||
<div class="col-12 col-md-6 col-lg-3">
|
||||
<div class="input-group">
|
||||
<input
|
||||
type="number"
|
||||
name="prodcut-price"
|
||||
class="form-control input-product-price"
|
||||
placeholder="00.00"
|
||||
aria-label="Product price"
|
||||
min="0"
|
||||
step="0.01" />
|
||||
<span class="input-group-text">€</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-md-6 col-lg">
|
||||
<button class="btn btn-dark button-product-add">
|
||||
<i class="fas fa-plus"></i>
|
||||
Add Product
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
</div>
|
||||
<template class="template-row">
|
||||
<tr>
|
||||
<td class="td-dragger">
|
||||
<button class="btn btn-default button-product-drag">
|
||||
<i class="fas fa-grip-vertical"></i>
|
||||
<span class="visually-hidden">Drag Product</span>
|
||||
</button>
|
||||
</td>
|
||||
<td class="td-name">{PRODUCT_NAME}</td>
|
||||
<td class="td-price">{PRODUCT_PRICE}</td>
|
||||
<td class="td-actions">
|
||||
<button
|
||||
class="btn btn-sm btn-primary button-product-edit"
|
||||
data-bs-toggle="modal"
|
||||
data-bs-target="#modal-product-edit">
|
||||
<i class="fas fa-pen"></i>
|
||||
<span class="visually-hidden">Edit Product</span>
|
||||
</button>
|
||||
<button
|
||||
class="btn btn-sm btn-danger button-product-remove"
|
||||
data-bs-toggle="modal"
|
||||
data-bs-target="#modal-product-delete">
|
||||
<i class="fas fa-trash-can"></i>
|
||||
<span class="visually-hidden">Remove Product</span>
|
||||
</button>
|
||||
<button class="btn btn-sm btn-secondary button-product-move-up">
|
||||
<i class="fas fa-chevron-up"></i>
|
||||
<span class="visually-hidden">Move up</span>
|
||||
</button>
|
||||
<button class="btn btn-sm btn-secondary button-product-move-down">
|
||||
<i class="fas fa-chevron-down"></i>
|
||||
<span class="visually-hidden">Move down</span>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
</template>
|
||||
|
||||
<!-- ▼ Modal Edit Product ▼ -->
|
||||
<div
|
||||
class="modal fade modal-edit"
|
||||
id="modal-product-edit"
|
||||
tabindex="-1"
|
||||
aria-labelledby="modal-product-edit-label"
|
||||
aria-hidden="true">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h1 class="modal-title fs-5" id="modal-product-edit-label">Edit Product</h1>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
|
||||
<form class="form-product-edit" method="post">
|
||||
<div class="modal-body">
|
||||
<div class="row">
|
||||
<div class="col-12 col-md-8">
|
||||
<div class="mb-3">
|
||||
<label for="input-edit-name" class="form-label">Product Name</label>
|
||||
<input type="text" id="input-edit-name" class="form-control input-edit-name" name="name" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-md">
|
||||
<div class="mb-3">
|
||||
<label for="input-edit-price" class="form-label">Product price</label>
|
||||
|
||||
<div class="input-group">
|
||||
<input
|
||||
type="number"
|
||||
step="0.01"
|
||||
min="0"
|
||||
id="input-edit-price"
|
||||
class="form-control input-edit-price"
|
||||
name="price" />
|
||||
<span class="input-group-text">€</span>
|
||||
</div>
|
||||
<input type="hidden" name="id" class="input-edit-id" />
|
||||
<input type="hidden" name="position" class="input-edit-position" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
|
||||
<button type="submit" class="btn btn-primary button-product-update">
|
||||
<i class="fas fa-arrow-rotate-right"></i>
|
||||
Update Product
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- ▲ /Modal Edit Product ▲ -->
|
||||
|
||||
<!-- ▼ Delete Modal ▼ -->
|
||||
<div
|
||||
class="modal fade modal-delete"
|
||||
id="modal-product-delete"
|
||||
tabindex="-1"
|
||||
aria-labelledby="modal-product-delete-label"
|
||||
aria-hidden="true">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h1 class="modal-title fs-5" id="modal-product-delete-label">Delete Product</h1>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<p>
|
||||
Do you really want to delete Product:<br />
|
||||
<strong class="product-name">{PRODUCT_NAME}</strong>
|
||||
</p>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
|
||||
<button type="button" class="btn btn-danger button-confirm-delete">Confirm to delete</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- ▲ /Delete Modal ▲ -->
|
||||
</div>
|
||||
<!-- ▲ /Product Manager ▲ -->
|
||||
+10
@@ -0,0 +1,10 @@
|
||||
<!-- ▼ Slider Splide ▼ -->
|
||||
<section class="splide my-slider" aria-label="Header Slider">
|
||||
<div class="splide__track">
|
||||
<ul class="splide__list">
|
||||
<li class="splide__slide" style="background-image: url('https://dummyimage.com/1920x600/f90/333.jpg')"></li>
|
||||
<li class="splide__slide" style="background-image: url('https://dummyimage.com/1920x600/c40/333.jpg')"></li>
|
||||
<li class="splide__slide" style="background-image: url('https://dummyimage.com/1920x600/fc0/333.jpg')"></li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
+80
@@ -0,0 +1,80 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
@@include('head.html', {title: 'Contact'})
|
||||
<body>
|
||||
@@include('header-main.html')
|
||||
<!-- nav.menu-main>ul.list>li*4>a[href="#"]{Link $} -->
|
||||
@@include('menu-main.html')
|
||||
<main>
|
||||
<div class="container py-5">
|
||||
<h1>Kontakt</h1>
|
||||
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet, iste?</p>
|
||||
<form class="form-contact">
|
||||
<div class="row">
|
||||
<!-- .col>.mb-3>label.form-label -->
|
||||
<div class="col-12 col-md-6">
|
||||
<div class="mb-3">
|
||||
<label for="input-firstname" class="form-label">First name:</label>
|
||||
<input
|
||||
type="text"
|
||||
name="firstname"
|
||||
id="input-firstname"
|
||||
class="form-control input-firstname"
|
||||
required />
|
||||
</div>
|
||||
</div>
|
||||
<!-- ▲ /col ▲ -->
|
||||
<!-- .col>.mb-3>label.form-label -->
|
||||
<div class="col-12 col-md-6">
|
||||
<div class="mb-3">
|
||||
<label for="input-lastname" class="form-label">Last name:</label>
|
||||
<input type="text" name="lastname" id="input-lastname" class="form-control input-lastname" required />
|
||||
</div>
|
||||
</div>
|
||||
<!-- ▲ /col ▲ -->
|
||||
</div>
|
||||
<!-- .row>.col>.mb-3>label.form-label+input:email.form-control -->
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<div class="mb-3">
|
||||
<label for="input-email" class="form-label">E-mail</label>
|
||||
<input type="email" name="email" id="input-email" class="form-control input-email" required />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<div class="mb-3">
|
||||
<label for="input-subject" class="form-label">Subject</label>
|
||||
<input type="text" name="subject" id="input-subject" class="form-control input-subject" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- .row>.col>.mb-3>label.form-label+textarea.form-control -->
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<div class="mb-3">
|
||||
<label for="textarea-message" class="form-label">Message</label>
|
||||
|
||||
<textarea
|
||||
name="message"
|
||||
id="textarea-message"
|
||||
cols="12"
|
||||
rows="8"
|
||||
class="form-control textarea-message"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- .row>.col>.mb-3>button:submit.btn.btn-dark.button-submit -->
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<div class="mb-3">
|
||||
<button type="submit" class="btn btn-dark button-submit">Send</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
+28
@@ -0,0 +1,28 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
@@include('head.html', {title: 'Website with gulp, rollup, REST-Api'})
|
||||
<body>
|
||||
@@include('header-main.html')
|
||||
<!-- nav.menu-main>ul.list>li*4>a[href="#"]{Link $} -->
|
||||
@@include('menu-main.html')
|
||||
<main>
|
||||
<div class="container py-5">
|
||||
<h1>Webseite mit HTML & CSS (SCSS)</h1>
|
||||
<p>
|
||||
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolorem, earum? Harum fuga itaque a natus tempora
|
||||
dolor vero officiis eos tempore! Impedit nobis ea eum labore, aut assumenda nostrum dicta.
|
||||
</p>
|
||||
<div class="card" style="width: 18rem">
|
||||
<img src="https://picsum.photos/300/200" class="card-img-top" alt="..." />
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Card title</h5>
|
||||
<p class="card-text">
|
||||
Some quick example text to build on the card title and make up the bulk of the card’s content.
|
||||
</p>
|
||||
<a href="#" class="btn btn-primary">Go somewhere</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
+56
@@ -0,0 +1,56 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Chuck Norris Joke (API)</title>
|
||||
<!-- <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" /> -->
|
||||
|
||||
<link rel="icon" type="image/png" href="/favicon/favicon-96x96.png" sizes="96x96" />
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon/favicon.svg" />
|
||||
<link rel="shortcut icon" href="/favicon/favicon.ico" />
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="/favicon/apple-touch-icon.png" />
|
||||
<meta name="apple-mobile-web-app-title" content="JS Course" />
|
||||
<link rel="manifest" href="/favicon/site.webmanifest" />
|
||||
|
||||
<link rel="stylesheet" href="/assets/css/main.css" />
|
||||
<script src="/assets/js/build.js" defer></script>
|
||||
</head>
|
||||
<body>
|
||||
<!-- header.header-main>.content-box>figure.logo-main>img+figc -->
|
||||
<!-- <header class="header-main">
|
||||
<div class="content-box">
|
||||
<figure class="logo-main">
|
||||
<img src="/assets/img/logo-js.min.svg" alt="Logo - JS Course" />
|
||||
<figcaption>JS course</figcaption>
|
||||
</figure>
|
||||
</div>
|
||||
</header> -->
|
||||
<!-- nav.menu-main>ul.list>li*4>a[href="#"]{Link $} -->
|
||||
<nav class="menu-main">
|
||||
<ul class="list">
|
||||
<li><a href="/">Home</a></li>
|
||||
<li><a href="/about.html">About</a></li>
|
||||
<li>
|
||||
<a href="#dropdown">Projects</a>
|
||||
<!-- ul.sublist>li*3>a[href="#"]{Project $} -->
|
||||
<ul class="sublist">
|
||||
<li><a href="/projects/01_jokes.html">01 Chuck Norris Jokes</a></li>
|
||||
<li><a href="#">Project 2</a></li>
|
||||
<li><a href="#">Project 3</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="/contact.html">Contact</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<main>
|
||||
<section class="section-joke">
|
||||
<!-- .chuck-norris-joke>blockquote.joke-text+button.btn.btn-dark.button-get-joke{Get Joke} -->
|
||||
<div class="chuck-norris-joke">
|
||||
<blockquote class="joke-text"></blockquote>
|
||||
<button class="btn btn-dark button-get-joke">Get Joke</button>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
+11
@@ -0,0 +1,11 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
@@include('head.html', {title: 'Productmanager'})
|
||||
<body>
|
||||
@@include('menu-main.html')
|
||||
<main>
|
||||
<section class="section-product-manager">@@include('product-manager.html')</section>
|
||||
<!-- <section class="section-product-manager">@@include('product-manager.html')</section> -->
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
+44
@@ -0,0 +1,44 @@
|
||||
import ProductManager from './modules/ProductManager'; // Dateiendung nicht notwendig ?
|
||||
import Splide from '@splidejs/splide';
|
||||
(() => {
|
||||
// === DOM & VARS =======
|
||||
const DOM = {};
|
||||
|
||||
// === INIT =============
|
||||
const init = () => {
|
||||
console.log('init!');
|
||||
// ProductManager();
|
||||
router();
|
||||
};
|
||||
|
||||
// === EVENTHANDLER =====
|
||||
|
||||
// === XHR/FETCH ========
|
||||
|
||||
// === FUNCTIONS ========
|
||||
const router = () => {
|
||||
const path = window.location.pathname;
|
||||
console.log(path);
|
||||
|
||||
switch (path) {
|
||||
case '/':
|
||||
case '/index.html':
|
||||
console.log('HOME');
|
||||
new Splide('.splide', {
|
||||
cover: false,
|
||||
autoHeight: true,
|
||||
height: '100%',
|
||||
fixedHeight: '100%',
|
||||
}).mount();
|
||||
break;
|
||||
case '/projects/02_product-manager.html':
|
||||
console.log('PRODUCT_MANAGER');
|
||||
ProductManager();
|
||||
break;
|
||||
default:
|
||||
console.log('no scripts found');
|
||||
}
|
||||
};
|
||||
|
||||
init();
|
||||
})();
|
||||
+27
@@ -0,0 +1,27 @@
|
||||
const CreateBtn = (options = {}) => {
|
||||
const {
|
||||
classNames = ['btn-primary'],
|
||||
iconName = 'circle',
|
||||
label,
|
||||
clickHandler = (e) => {
|
||||
console.log('no click action');
|
||||
},
|
||||
} = options;
|
||||
const btn = document.createElement('button');
|
||||
const icon = document.createElement('i');
|
||||
const span = document.createElement('span');
|
||||
|
||||
btn.classList.add('btn', ...classNames);
|
||||
icon.classList.add('fas', `fa-${iconName}`);
|
||||
span.classList.add('visually-hidden');
|
||||
span.textContent = label;
|
||||
|
||||
btn.addEventListener('click', clickHandler);
|
||||
|
||||
btn.appendChild(icon);
|
||||
btn.appendChild(span);
|
||||
|
||||
return btn;
|
||||
};
|
||||
|
||||
export default CreateBtn;
|
||||
+462
@@ -0,0 +1,462 @@
|
||||
import { Modal } from 'bootstrap';
|
||||
import Toast from './Toast';
|
||||
import { v4 as id } from 'uuid';
|
||||
|
||||
// Factory Function
|
||||
const ProductManager = (target = '.product-manager', options = {}) => {
|
||||
// === AUTO MULTI-INSTANCE ===
|
||||
if (typeof target === 'string') {
|
||||
const elements = document.querySelectorAll(target);
|
||||
|
||||
if (elements.length === 0) {
|
||||
console.error('Product Manager not found', target);
|
||||
return null;
|
||||
}
|
||||
|
||||
if (elements.length > 1) {
|
||||
return [...elements].map((el) => ProductManager(el, options));
|
||||
}
|
||||
|
||||
target = elements[0];
|
||||
} else if (target instanceof NodeList || Array.isArray(target)) {
|
||||
if (target.length === 0) return null;
|
||||
if (target.length === 1) {
|
||||
target = target[0];
|
||||
} else {
|
||||
return [...target].map((el) => ProductManager(el, options));
|
||||
}
|
||||
}
|
||||
|
||||
// === DOM & VARS =======
|
||||
const SERVER_BASE_URL = options.baseUrl || 'http://127.0.0.1:8000';
|
||||
const API_PRODUCTS = `${SERVER_BASE_URL}/api/products`;
|
||||
const module = target;
|
||||
|
||||
const uId = id();
|
||||
|
||||
if (!module || !(module instanceof HTMLElement)) {
|
||||
console.error('Product Manager: Ungültiges Element übergeben', target);
|
||||
return null;
|
||||
}
|
||||
|
||||
const DOM = {
|
||||
module,
|
||||
table: module.querySelector('.table-products'),
|
||||
tbody: module.querySelector('tbody'),
|
||||
inputName: module.querySelector('.input-product-name'),
|
||||
inputPrice: module.querySelector('.input-product-price'),
|
||||
btnAdd: module.querySelector('.button-product-add'),
|
||||
templateRow: module.querySelector('.template-row'),
|
||||
|
||||
// Nav Actions
|
||||
btnSave: module.querySelector('.button-products-save'),
|
||||
btnReset: module.querySelector('.button-products-reset'),
|
||||
|
||||
// Modal Edit
|
||||
modalEdit: module.querySelector('.modal-edit'),
|
||||
formEdit: module.querySelector('.form-product-edit'),
|
||||
inputEditName: module.querySelector('.input-edit-name'),
|
||||
inputEditPrice: module.querySelector('.input-edit-price'),
|
||||
inputEditId: module.querySelector('.input-edit-id'),
|
||||
inputEditPosition: module.querySelector('.input-edit-position'),
|
||||
btnUpdate: module.querySelector('.button-product-update'),
|
||||
|
||||
// Modal Delete
|
||||
modalDelete: module.querySelector('.modal-delete'),
|
||||
productName: module.querySelector('strong.product-name'),
|
||||
btnConfirmDelete: module.querySelector('.button-confirm-delete'),
|
||||
};
|
||||
|
||||
const bsModalEdit = new Modal(DOM.modalEdit, {
|
||||
backdrop: 'static',
|
||||
keyboard: true,
|
||||
});
|
||||
|
||||
const bsModalDelete = new Modal(DOM.modalDelete, {
|
||||
backdrop: 'static',
|
||||
keyboard: true,
|
||||
});
|
||||
|
||||
// State für Drag & Drop
|
||||
let draggedRow = null;
|
||||
|
||||
// === INIT =============
|
||||
const init = async () => {
|
||||
// Funktionsaufrufe zu Beginn der Anwendung
|
||||
await initProducts();
|
||||
DOM.btnAdd.disabled = true;
|
||||
|
||||
// Event-Lauscher zu Beginn der Anwendung
|
||||
DOM.btnReset?.addEventListener('click', onClickReset);
|
||||
DOM.btnSave?.addEventListener('click', onClickSave);
|
||||
|
||||
DOM.btnAdd.addEventListener('click', onClickAdd);
|
||||
DOM.btnConfirmDelete?.addEventListener('click', onClickConfirmDelete);
|
||||
DOM.formEdit.addEventListener('submit', onSubmitEdit);
|
||||
|
||||
DOM.inputName.addEventListener('input', onInputValidate);
|
||||
DOM.inputPrice.addEventListener('input', onInputValidate);
|
||||
|
||||
// Delegierte Tabellen- & Drag-Events
|
||||
DOM.tbody.addEventListener('click', onTableClick);
|
||||
setupDragAndDrop();
|
||||
};
|
||||
|
||||
// === EVENTHANDLER =====
|
||||
const onInputValidate = () => {
|
||||
DOM.btnAdd.disabled = DOM.inputName.value === '' || DOM.inputPrice.value === '';
|
||||
};
|
||||
|
||||
const onClickReset = async () => {
|
||||
try {
|
||||
const data = await api.reset();
|
||||
if (data.success) {
|
||||
Toast(data.msg, 'success').show();
|
||||
loadProducts();
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('Reset fehlgeschlagen:', err);
|
||||
}
|
||||
};
|
||||
|
||||
const onClickSave = async (e) => {
|
||||
const btnEl = e.currentTarget;
|
||||
const icon = btnEl.querySelector('i');
|
||||
|
||||
icon?.classList.add('fa-jello');
|
||||
|
||||
try {
|
||||
const data = await api.save();
|
||||
if (data.success) {
|
||||
Toast(data.msg, 'success').show();
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('Speichern fehlgeschlagen:', err);
|
||||
} finally {
|
||||
setTimeout(() => {
|
||||
icon?.classList.remove('fa-jello');
|
||||
}, 500);
|
||||
}
|
||||
};
|
||||
|
||||
const onSubmitEdit = async (e) => {
|
||||
e.preventDefault();
|
||||
|
||||
const product = {
|
||||
name: DOM.inputEditName.value.trim(),
|
||||
price: Number(DOM.inputEditPrice.value),
|
||||
_id: DOM.inputEditId.value,
|
||||
position: Number(DOM.inputEditPosition.value),
|
||||
};
|
||||
|
||||
DOM.btnUpdate.querySelector('i')?.classList.add('fa-spin');
|
||||
|
||||
try {
|
||||
const data = await api.edit(product);
|
||||
if (data.success) {
|
||||
Toast(data.msg, 'success').show();
|
||||
loadProducts();
|
||||
resetFields();
|
||||
bsModalEdit.hide();
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('Update fehlgeschlagen:', err);
|
||||
} finally {
|
||||
DOM.btnUpdate.querySelector('i')?.classList.remove('fa-spin');
|
||||
}
|
||||
};
|
||||
|
||||
const onClickAdd = async () => {
|
||||
const product = {
|
||||
name: DOM.inputName.value.trim(),
|
||||
price: Number(DOM.inputPrice.value),
|
||||
};
|
||||
|
||||
try {
|
||||
const data = await api.add(product);
|
||||
if (data.success) {
|
||||
Toast(data.msg, 'success').show();
|
||||
loadProducts();
|
||||
resetFields();
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('Erstellen fehlgeschlagen:', err);
|
||||
}
|
||||
};
|
||||
|
||||
const onTableClick = async (e) => {
|
||||
const btnEl = e.target.closest('button');
|
||||
if (!btnEl) return;
|
||||
|
||||
const currentRow = parent(btnEl, 'tr');
|
||||
if (!currentRow) return;
|
||||
|
||||
const id = currentRow.dataset.id;
|
||||
|
||||
if (btnEl.matches('.button-product-edit')) {
|
||||
try {
|
||||
const data = await api.read(id);
|
||||
showModalEdit(data);
|
||||
} catch (err) {
|
||||
console.error('Laden für Bearbeitung fehlgeschlagen:', err);
|
||||
}
|
||||
} else if (btnEl.matches('.button-product-remove')) {
|
||||
const productName = currentRow.querySelector('.td-name')?.textContent.trim() || '';
|
||||
DOM.btnConfirmDelete.dataset.id = id;
|
||||
DOM.productName.textContent = productName;
|
||||
bsModalDelete.show();
|
||||
} else if (btnEl.matches('.button-product-move-up') && currentRow.previousElementSibling) {
|
||||
currentRow.previousElementSibling.before(currentRow);
|
||||
disableNonFunctionalButtons();
|
||||
await updateRowPositions();
|
||||
} else if (btnEl.matches('.button-product-move-down') && currentRow.nextElementSibling) {
|
||||
currentRow.nextElementSibling.after(currentRow);
|
||||
disableNonFunctionalButtons();
|
||||
await updateRowPositions();
|
||||
}
|
||||
};
|
||||
|
||||
const onClickConfirmDelete = async () => {
|
||||
const id = DOM.btnConfirmDelete.dataset.id;
|
||||
if (!id) return;
|
||||
|
||||
try {
|
||||
const data = await api.destroy(id);
|
||||
if (data.success) {
|
||||
Toast(data.msg, 'success').show();
|
||||
bsModalDelete.hide();
|
||||
loadProducts();
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('Löschen fehlgeschlagen:', err);
|
||||
}
|
||||
};
|
||||
|
||||
// Drag 'n Drop Event-Setup via Delegation
|
||||
const setupDragAndDrop = () => {
|
||||
let isHandleMouseDown = false;
|
||||
|
||||
// 1. Nur wenn die Maus auf den Drag-Button drückt, erlauben wir das Ziehen der Zeile
|
||||
DOM.tbody.addEventListener('mousedown', (e) => {
|
||||
const handle = e.target.closest('.button-product-drag, .button-drag');
|
||||
if (!handle) {
|
||||
isHandleMouseDown = false;
|
||||
return;
|
||||
}
|
||||
|
||||
const currentRow = parent(handle, 'tr');
|
||||
if (currentRow) {
|
||||
isHandleMouseDown = true;
|
||||
currentRow.setAttribute('draggable', 'true');
|
||||
}
|
||||
});
|
||||
|
||||
DOM.tbody.addEventListener('mouseup', () => {
|
||||
isHandleMouseDown = false;
|
||||
});
|
||||
|
||||
// 2. Drag Start: Startet den nativen Browser-Drag-Vorgang
|
||||
DOM.tbody.addEventListener('dragstart', (e) => {
|
||||
const currentRow = parent(e.target, 'tr');
|
||||
|
||||
if (!currentRow || !isHandleMouseDown) {
|
||||
e.preventDefault();
|
||||
return;
|
||||
}
|
||||
|
||||
draggedRow = currentRow;
|
||||
e.dataTransfer.effectAllowed = 'move';
|
||||
e.dataTransfer.setData('text/plain', currentRow.dataset.id || 'drag');
|
||||
currentRow.classList.add('is-dragging');
|
||||
});
|
||||
|
||||
// 3. Drag Over: Pflicht, um drop zu gestatten
|
||||
DOM.tbody.addEventListener('dragover', (e) => {
|
||||
e.preventDefault();
|
||||
e.dataTransfer.dropEffect = 'move';
|
||||
});
|
||||
|
||||
// 4. Drop: Verschieben im DOM und Server-Aktualisierung
|
||||
DOM.tbody.addEventListener('drop', async (e) => {
|
||||
e.preventDefault();
|
||||
const currentRow = parent(e.target, 'tr');
|
||||
|
||||
if (!currentRow || !draggedRow || currentRow === draggedRow) return;
|
||||
|
||||
const rows = [...DOM.tbody.children];
|
||||
const sourceIdx = rows.indexOf(draggedRow);
|
||||
const targetIdx = rows.indexOf(currentRow);
|
||||
|
||||
if (sourceIdx < targetIdx) {
|
||||
currentRow.after(draggedRow);
|
||||
} else {
|
||||
currentRow.before(draggedRow);
|
||||
}
|
||||
|
||||
disableNonFunctionalButtons();
|
||||
await updateRowPositions();
|
||||
});
|
||||
|
||||
// 5. Drag End & Cleanup
|
||||
DOM.tbody.addEventListener('dragend', () => {
|
||||
isHandleMouseDown = false;
|
||||
if (draggedRow) {
|
||||
draggedRow.removeAttribute('draggable');
|
||||
draggedRow.classList.remove('is-dragging');
|
||||
draggedRow = null;
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// === XHR/FETCH (DRY BREAD API) ========
|
||||
const api = {
|
||||
async request(url, { data, ...options } = {}) {
|
||||
const isJsonPayload = data !== undefined;
|
||||
|
||||
try {
|
||||
const response = await fetch(url, {
|
||||
...options,
|
||||
headers: {
|
||||
...(isJsonPayload && { 'Content-Type': 'application/json' }),
|
||||
...options.headers,
|
||||
},
|
||||
body: isJsonPayload ? JSON.stringify(data) : options.body,
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
const errorJson = await response.json().catch(() => null);
|
||||
const errorMsg = errorJson?.msg || `${options.method ?? 'GET'} ${url} -> ${response.status}`;
|
||||
throw new Error(errorMsg);
|
||||
}
|
||||
|
||||
if (response.status === 204) return null;
|
||||
return await response.json();
|
||||
} catch (error) {
|
||||
// Zentraler Toast für alle API-/Netzwerkfehler
|
||||
Toast(error.message || 'Verbindungsfehler zum Server', 'error').show();
|
||||
throw error;
|
||||
}
|
||||
},
|
||||
|
||||
// BREAD Endpunkte
|
||||
browse: () => api.request(API_PRODUCTS),
|
||||
read: (id) => api.request(`${API_PRODUCTS}/${id}`),
|
||||
edit: (product) => api.request(API_PRODUCTS, { method: 'PUT', data: product }),
|
||||
add: (product) => api.request(API_PRODUCTS, { method: 'POST', data: product }),
|
||||
destroy: (id) => api.request(`${API_PRODUCTS}/${id}`, { method: 'DELETE' }),
|
||||
|
||||
// Zusätzliche Endpunkte
|
||||
updatePositions: (positions) => api.request(`${API_PRODUCTS}/positions`, { method: 'PUT', data: positions }),
|
||||
save: () => api.request(`${API_PRODUCTS}/save`, { method: 'PATCH', data: { save: true } }),
|
||||
reset: () => api.request(`${API_PRODUCTS}/reset`, { method: 'PATCH', data: { reset: true } }),
|
||||
};
|
||||
|
||||
// === FUNCTIONS ========
|
||||
const initProducts = async () => {
|
||||
try {
|
||||
const products = await api.browse();
|
||||
DOM.tbody.replaceChildren(...products.map(createRowElement));
|
||||
Toast('Init products').show();
|
||||
disableNonFunctionalButtons();
|
||||
} catch (err) {
|
||||
console.error('Initialisierung fehlgeschlagen:', err);
|
||||
}
|
||||
};
|
||||
|
||||
const loadProducts = async () => {
|
||||
try {
|
||||
const products = await api.browse();
|
||||
DOM.tbody.replaceChildren(...products.map(createRowElement));
|
||||
disableNonFunctionalButtons();
|
||||
} catch (err) {
|
||||
console.error('Neu laden fehlgeschlagen:', err);
|
||||
}
|
||||
};
|
||||
|
||||
const createRowElement = (product) => {
|
||||
const { name, price, _id: id, position = 0 } = product;
|
||||
|
||||
const trEl = DOM.templateRow.content.firstElementChild.cloneNode(true);
|
||||
trEl.dataset.id = id;
|
||||
trEl.dataset.position = position;
|
||||
|
||||
trEl.querySelector('.td-name').textContent = name;
|
||||
trEl.querySelector('.td-price').textContent = Number(price).toFixed(2);
|
||||
|
||||
return trEl;
|
||||
};
|
||||
|
||||
const showModalEdit = (product) => {
|
||||
const { name = '', price = 0, _id: id, position } = product;
|
||||
|
||||
DOM.inputEditName.value = name;
|
||||
DOM.inputEditPrice.value = price;
|
||||
DOM.inputEditId.value = id;
|
||||
DOM.inputEditPosition.value = position ?? 0;
|
||||
bsModalEdit.show();
|
||||
};
|
||||
|
||||
const resetFields = () => {
|
||||
DOM.inputName.value = '';
|
||||
DOM.inputPrice.value = '';
|
||||
DOM.btnAdd.disabled = true;
|
||||
DOM.formEdit.reset();
|
||||
};
|
||||
|
||||
const disableNonFunctionalButtons = () => {
|
||||
const rows = [...DOM.tbody.children];
|
||||
rows.forEach((tr, index) => {
|
||||
const btnUp = tr.querySelector('.button-product-move-up');
|
||||
const btnDown = tr.querySelector('.button-product-move-down');
|
||||
if (btnUp) btnUp.disabled = index === 0;
|
||||
if (btnDown) btnDown.disabled = index === rows.length - 1;
|
||||
});
|
||||
};
|
||||
|
||||
const updateRowPositions = async () => {
|
||||
const rows = [...DOM.tbody.children];
|
||||
|
||||
const positions = rows.map((tr, index) => {
|
||||
const newPos = index + 1;
|
||||
tr.dataset.position = newPos;
|
||||
return {
|
||||
_id: tr.dataset.id,
|
||||
position: newPos,
|
||||
};
|
||||
});
|
||||
|
||||
try {
|
||||
const data = await api.updatePositions(positions);
|
||||
if (data.success) {
|
||||
Toast(data.msg, 'success').show();
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('Fehler beim Aktualisieren der Positionen:', err);
|
||||
}
|
||||
};
|
||||
|
||||
// === HELPERS ==========
|
||||
const parent = (el, selector, boundary = DOM.tbody) => {
|
||||
let current = el;
|
||||
while (current && current !== document) {
|
||||
if (current.matches(selector) && (!boundary || current.parentElement === boundary)) {
|
||||
return current;
|
||||
}
|
||||
current = current.parentElement;
|
||||
}
|
||||
return null;
|
||||
};
|
||||
|
||||
// Selbstanstoß & Interface
|
||||
init();
|
||||
|
||||
return {
|
||||
element: DOM.module,
|
||||
init,
|
||||
initProducts,
|
||||
loadProducts,
|
||||
resetFields,
|
||||
};
|
||||
};
|
||||
|
||||
export default ProductManager;
|
||||
+86
@@ -0,0 +1,86 @@
|
||||
import Toastify from 'toastify-js';
|
||||
const Toast = (text = '', options = 'primary') => {
|
||||
let optionsObj = {
|
||||
text,
|
||||
duration: 2000,
|
||||
gravity: 'top',
|
||||
position: 'center',
|
||||
stopOnFocus: true,
|
||||
};
|
||||
|
||||
const getColorByName = (variant = '') => {
|
||||
let color;
|
||||
|
||||
switch (variant.trim().toLowerCase()) {
|
||||
case 'primary':
|
||||
color = '#0d6efd';
|
||||
break;
|
||||
case 'secondary':
|
||||
color = '#6c757d';
|
||||
break;
|
||||
case 'warning':
|
||||
color = '#ffc720';
|
||||
break;
|
||||
case 'success':
|
||||
color = '#13653f';
|
||||
break;
|
||||
case 'info':
|
||||
color = '#25cff2';
|
||||
break;
|
||||
case 'error':
|
||||
case 'danger':
|
||||
color = '#a52834';
|
||||
break;
|
||||
case 'light':
|
||||
color = '#babbbc';
|
||||
break;
|
||||
case 'dark':
|
||||
color = '#373b3e';
|
||||
break;
|
||||
|
||||
default:
|
||||
console.warn('variant not found');
|
||||
color = 'white';
|
||||
}
|
||||
|
||||
return color;
|
||||
};
|
||||
|
||||
const show = () => {
|
||||
Toastify(optionsObj).showToast();
|
||||
};
|
||||
|
||||
if (typeof options === 'string') {
|
||||
optionsObj.className = options;
|
||||
} else {
|
||||
if (Object.hasOwn(options, 'variant')) {
|
||||
optionsObj.className = options.variant;
|
||||
}
|
||||
|
||||
if (Object.hasOwn(options, 'duration')) {
|
||||
optionsObj.duration = options.duration;
|
||||
}
|
||||
|
||||
if (Object.hasOwn(options, 'gravity')) {
|
||||
optionsObj.gravity = options.gravity;
|
||||
}
|
||||
|
||||
if (Object.hasOwn(options, 'position')) {
|
||||
optionsObj.position = options.position;
|
||||
}
|
||||
|
||||
if (Object.hasOwn(options, 'stopOnFocus')) {
|
||||
optionsObj.stopOnFocus = options.stopOnFocus;
|
||||
}
|
||||
}
|
||||
|
||||
optionsObj.style = {
|
||||
background: getColorByName(optionsObj.className),
|
||||
};
|
||||
|
||||
return {
|
||||
show,
|
||||
};
|
||||
};
|
||||
|
||||
export default Toast;
|
||||
+75
@@ -0,0 +1,75 @@
|
||||
import Toastify from 'toastify-js'; // das Modul wird vom node_modules Ordner ausgelesen und gebundlet. Funktioniert nur mit JS-Bundler (rollup/esbuild)
|
||||
|
||||
const Toast = (text = '', variantOrOptions = 'primary') => {
|
||||
// Entweder string oder Objekt
|
||||
const userOptions =
|
||||
typeof variantOrOptions === 'string'
|
||||
? { variant: variantOrOptions } //
|
||||
: { ...variantOrOptions };
|
||||
|
||||
const defaultOptions = {
|
||||
variant: 'primary',
|
||||
duration: 2000,
|
||||
gravity: 'top',
|
||||
position: 'center',
|
||||
stopOnFocus: true,
|
||||
};
|
||||
|
||||
const options = { ...defaultOptions, ...userOptions };
|
||||
|
||||
const getColorByName = (variant = '') => {
|
||||
let color;
|
||||
switch (variant.trim().toLowerCase()) {
|
||||
case 'primary':
|
||||
color = '#0d6efd';
|
||||
break;
|
||||
case 'secondary':
|
||||
color = '#6c757d';
|
||||
break;
|
||||
case 'warning':
|
||||
color = '#ffc720';
|
||||
break;
|
||||
case 'success':
|
||||
color = '#13653f';
|
||||
break;
|
||||
case 'info':
|
||||
color = '#25cff2';
|
||||
break;
|
||||
case 'error':
|
||||
case 'danger':
|
||||
color = '#a52834';
|
||||
break;
|
||||
case 'light':
|
||||
color = '#babbbc';
|
||||
break;
|
||||
case 'dark':
|
||||
color = '#373b3e';
|
||||
break;
|
||||
|
||||
default:
|
||||
console.warn('variant not found');
|
||||
color = 'white';
|
||||
}
|
||||
return color;
|
||||
};
|
||||
|
||||
const show = () => {
|
||||
const { variant, style, ...restProps } = options;
|
||||
|
||||
Toastify({
|
||||
text,
|
||||
className: variant,
|
||||
...restProps,
|
||||
style: {
|
||||
background: getColorByName(variant),
|
||||
...style, // Ermöglicht bei Bedarf auch individuelle CSS-Overrides
|
||||
},
|
||||
}).showToast();
|
||||
};
|
||||
|
||||
return {
|
||||
show,
|
||||
};
|
||||
};
|
||||
|
||||
export default Toast;
|
||||
+43
@@ -0,0 +1,43 @@
|
||||
// Helper
|
||||
export function parents(el, selector) {
|
||||
const parents = [];
|
||||
while ((el = el.parentNode) && el !== document) {
|
||||
if (!selector || el.matches(selector)) parents.push(el);
|
||||
}
|
||||
return parents;
|
||||
}
|
||||
|
||||
export const parent = (el, selector, boundary = document) => {
|
||||
let current = el;
|
||||
while (current && current !== document) {
|
||||
if (current.matches(selector) && (!boundary || current.parentElement === boundary)) {
|
||||
return current;
|
||||
}
|
||||
current = current.parentElement;
|
||||
}
|
||||
return null;
|
||||
};
|
||||
|
||||
export function addClass(el, className) {
|
||||
if (Array.isArray(className)) {
|
||||
el.classList.add(...className);
|
||||
} else {
|
||||
el.classList.add(className);
|
||||
}
|
||||
return el;
|
||||
}
|
||||
|
||||
export function removeClass(el, className) {
|
||||
if (Array.isArray(className)) {
|
||||
el.classList.remove(...className);
|
||||
} else {
|
||||
el.classList.remove(className);
|
||||
}
|
||||
return el;
|
||||
}
|
||||
|
||||
export default {
|
||||
parents,
|
||||
addClass,
|
||||
removeClass,
|
||||
};
|
||||
+4
@@ -0,0 +1,4 @@
|
||||
@import 'bootstrap-5.3.8/bootstrap';
|
||||
// @import 'bootstrap-5.3.8/bootstrap-grid';
|
||||
// @import 'bootstrap-5.3.8/bootstrap-reboot';
|
||||
// @import 'bootstrap-5.3.8/bootstrap-utilities';
|
||||
+153
@@ -0,0 +1,153 @@
|
||||
//
|
||||
// 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)};
|
||||
}
|
||||
}
|
||||
}
|
||||
+68
@@ -0,0 +1,68 @@
|
||||
//
|
||||
// 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
|
||||
+38
@@ -0,0 +1,38 @@
|
||||
// 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;
|
||||
}
|
||||
+40
@@ -0,0 +1,40 @@
|
||||
.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);
|
||||
}
|
||||
}
|
||||
+147
@@ -0,0 +1,147 @@
|
||||
// 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);
|
||||
}
|
||||
}
|
||||
+216
@@ -0,0 +1,216 @@
|
||||
//
|
||||
// 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);
|
||||
}
|
||||
+238
@@ -0,0 +1,238 @@
|
||||
//
|
||||
// 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 <hN>
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
+226
@@ -0,0 +1,226 @@
|
||||
// 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();
|
||||
}
|
||||
}
|
||||
+66
@@ -0,0 +1,66 @@
|
||||
// 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 <a>'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();
|
||||
}
|
||||
}
|
||||
+41
@@ -0,0 +1,41 @@
|
||||
// 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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
+250
@@ -0,0 +1,250 @@
|
||||
// The dropdown wrapper (`<div>`)
|
||||
.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 `<hr>`) 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 <hr> element
|
||||
}
|
||||
|
||||
// Links, buttons, and more within the dropdown menu
|
||||
//
|
||||
// `<button>`-specific styles are denoted with `// For <button>s`
|
||||
.dropdown-item {
|
||||
display: block;
|
||||
width: 100%; // For `<button>`s
|
||||
padding: var(--#{$prefix}dropdown-item-padding-y) var(--#{$prefix}dropdown-item-padding-x);
|
||||
clear: both;
|
||||
font-weight: $font-weight-normal;
|
||||
color: var(--#{$prefix}dropdown-link-color);
|
||||
text-align: inherit; // For `<button>`s
|
||||
text-decoration: if($link-decoration == none, null, none);
|
||||
white-space: nowrap; // prevent links from randomly breaking onto new lines
|
||||
background-color: transparent; // For `<button>`s
|
||||
border: 0; // For `<button>`s
|
||||
@include border-radius(var(--#{$prefix}dropdown-item-border-radius, 0));
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: var(--#{$prefix}dropdown-link-hover-color);
|
||||
text-decoration: if($link-hover-decoration == underline, none, null);
|
||||
@include gradient-bg(var(--#{$prefix}dropdown-link-hover-bg));
|
||||
}
|
||||
|
||||
&.active,
|
||||
&:active {
|
||||
color: var(--#{$prefix}dropdown-link-active-color);
|
||||
text-decoration: none;
|
||||
@include gradient-bg(var(--#{$prefix}dropdown-link-active-bg));
|
||||
}
|
||||
|
||||
&.disabled,
|
||||
&:disabled {
|
||||
color: var(--#{$prefix}dropdown-link-disabled-color);
|
||||
pointer-events: none;
|
||||
background-color: transparent;
|
||||
// Remove CSS gradients if they're enabled
|
||||
background-image: if($enable-gradients, none, null);
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-menu.show {
|
||||
display: block;
|
||||
}
|
||||
|
||||
// Dropdown section headers
|
||||
.dropdown-header {
|
||||
display: block;
|
||||
padding: var(--#{$prefix}dropdown-header-padding-y) var(--#{$prefix}dropdown-header-padding-x);
|
||||
margin-bottom: 0; // for use with heading elements
|
||||
@include font-size($font-size-sm);
|
||||
color: var(--#{$prefix}dropdown-header-color);
|
||||
white-space: nowrap; // as with > li > a
|
||||
}
|
||||
|
||||
// Dropdown text
|
||||
.dropdown-item-text {
|
||||
display: block;
|
||||
padding: var(--#{$prefix}dropdown-item-padding-y) var(--#{$prefix}dropdown-item-padding-x);
|
||||
color: var(--#{$prefix}dropdown-link-color);
|
||||
}
|
||||
|
||||
// Dark dropdowns
|
||||
.dropdown-menu-dark {
|
||||
// scss-docs-start dropdown-dark-css-vars
|
||||
--#{$prefix}dropdown-color: #{$dropdown-dark-color};
|
||||
--#{$prefix}dropdown-bg: #{$dropdown-dark-bg};
|
||||
--#{$prefix}dropdown-border-color: #{$dropdown-dark-border-color};
|
||||
--#{$prefix}dropdown-box-shadow: #{$dropdown-dark-box-shadow};
|
||||
--#{$prefix}dropdown-link-color: #{$dropdown-dark-link-color};
|
||||
--#{$prefix}dropdown-link-hover-color: #{$dropdown-dark-link-hover-color};
|
||||
--#{$prefix}dropdown-divider-bg: #{$dropdown-dark-divider-bg};
|
||||
--#{$prefix}dropdown-link-hover-bg: #{$dropdown-dark-link-hover-bg};
|
||||
--#{$prefix}dropdown-link-active-color: #{$dropdown-dark-link-active-color};
|
||||
--#{$prefix}dropdown-link-active-bg: #{$dropdown-dark-link-active-bg};
|
||||
--#{$prefix}dropdown-link-disabled-color: #{$dropdown-dark-link-disabled-color};
|
||||
--#{$prefix}dropdown-header-color: #{$dropdown-dark-header-color};
|
||||
// scss-docs-end dropdown-dark-css-vars
|
||||
}
|
||||
+9
@@ -0,0 +1,9 @@
|
||||
@import "forms/labels";
|
||||
@import "forms/form-text";
|
||||
@import "forms/form-control";
|
||||
@import "forms/form-select";
|
||||
@import "forms/form-check";
|
||||
@import "forms/form-range";
|
||||
@import "forms/floating-labels";
|
||||
@import "forms/input-group";
|
||||
@import "forms/validation";
|
||||
+302
@@ -0,0 +1,302 @@
|
||||
// Bootstrap functions
|
||||
//
|
||||
// Utility mixins and functions for evaluating source code across our variables, maps, and mixins.
|
||||
|
||||
// Ascending
|
||||
// Used to evaluate Sass maps like our grid breakpoints.
|
||||
@mixin _assert-ascending($map, $map-name) {
|
||||
$prev-key: null;
|
||||
$prev-num: null;
|
||||
@each $key, $num in $map {
|
||||
@if $prev-num == null or unit($num) == "%" or unit($prev-num) == "%" {
|
||||
// Do nothing
|
||||
} @else if not comparable($prev-num, $num) {
|
||||
@warn "Potentially invalid value for #{$map-name}: This map must be in ascending order, but key '#{$key}' has value #{$num} whose unit makes it incomparable to #{$prev-num}, the value of the previous key '#{$prev-key}' !";
|
||||
} @else if $prev-num >= $num {
|
||||
@warn "Invalid value for #{$map-name}: This map must be in ascending order, but key '#{$key}' has value #{$num} which isn't greater than #{$prev-num}, the value of the previous key '#{$prev-key}' !";
|
||||
}
|
||||
$prev-key: $key;
|
||||
$prev-num: $num;
|
||||
}
|
||||
}
|
||||
|
||||
// Starts at zero
|
||||
// Used to ensure the min-width of the lowest breakpoint starts at 0.
|
||||
@mixin _assert-starts-at-zero($map, $map-name: "$grid-breakpoints") {
|
||||
@if length($map) > 0 {
|
||||
$values: map-values($map);
|
||||
$first-value: nth($values, 1);
|
||||
@if $first-value != 0 {
|
||||
@warn "First breakpoint in #{$map-name} must start at 0, but starts at #{$first-value}.";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Colors
|
||||
@function to-rgb($value) {
|
||||
@return red($value), green($value), blue($value);
|
||||
}
|
||||
|
||||
// stylelint-disable scss/dollar-variable-pattern
|
||||
@function rgba-css-var($identifier, $target) {
|
||||
@if $identifier == "body" and $target == "bg" {
|
||||
@return rgba(var(--#{$prefix}#{$identifier}-bg-rgb), var(--#{$prefix}#{$target}-opacity));
|
||||
} @if $identifier == "body" and $target == "text" {
|
||||
@return rgba(var(--#{$prefix}#{$identifier}-color-rgb), var(--#{$prefix}#{$target}-opacity));
|
||||
} @else {
|
||||
@return rgba(var(--#{$prefix}#{$identifier}-rgb), var(--#{$prefix}#{$target}-opacity));
|
||||
}
|
||||
}
|
||||
|
||||
@function map-loop($map, $func, $args...) {
|
||||
$_map: ();
|
||||
|
||||
@each $key, $value in $map {
|
||||
// allow to pass the $key and $value of the map as an function argument
|
||||
$_args: ();
|
||||
@each $arg in $args {
|
||||
$_args: append($_args, if($arg == "$key", $key, if($arg == "$value", $value, $arg)));
|
||||
}
|
||||
|
||||
$_map: map-merge($_map, ($key: call(get-function($func), $_args...)));
|
||||
}
|
||||
|
||||
@return $_map;
|
||||
}
|
||||
// stylelint-enable scss/dollar-variable-pattern
|
||||
|
||||
@function varify($list) {
|
||||
$result: null;
|
||||
@each $entry in $list {
|
||||
$result: append($result, var(--#{$prefix}#{$entry}), space);
|
||||
}
|
||||
@return $result;
|
||||
}
|
||||
|
||||
// Internal Bootstrap function to turn maps into its negative variant.
|
||||
// It prefixes the keys with `n` and makes the value negative.
|
||||
@function negativify-map($map) {
|
||||
$result: ();
|
||||
@each $key, $value in $map {
|
||||
@if $key != 0 {
|
||||
$result: map-merge($result, ("n" + $key: (-$value)));
|
||||
}
|
||||
}
|
||||
@return $result;
|
||||
}
|
||||
|
||||
// Get multiple keys from a sass map
|
||||
@function map-get-multiple($map, $values) {
|
||||
$result: ();
|
||||
@each $key, $value in $map {
|
||||
@if (index($values, $key) != null) {
|
||||
$result: map-merge($result, ($key: $value));
|
||||
}
|
||||
}
|
||||
@return $result;
|
||||
}
|
||||
|
||||
// Merge multiple maps
|
||||
@function map-merge-multiple($maps...) {
|
||||
$merged-maps: ();
|
||||
|
||||
@each $map in $maps {
|
||||
$merged-maps: map-merge($merged-maps, $map);
|
||||
}
|
||||
@return $merged-maps;
|
||||
}
|
||||
|
||||
// Replace `$search` with `$replace` in `$string`
|
||||
// Used on our SVG icon backgrounds for custom forms.
|
||||
//
|
||||
// @author Kitty Giraudel
|
||||
// @param {String} $string - Initial string
|
||||
// @param {String} $search - Substring to replace
|
||||
// @param {String} $replace ('') - New value
|
||||
// @return {String} - Updated string
|
||||
@function str-replace($string, $search, $replace: "") {
|
||||
$index: str-index($string, $search);
|
||||
|
||||
@if $index {
|
||||
@return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
|
||||
}
|
||||
|
||||
@return $string;
|
||||
}
|
||||
|
||||
// See https://codepen.io/kevinweber/pen/dXWoRw
|
||||
//
|
||||
// Requires the use of quotes around data URIs.
|
||||
|
||||
@function escape-svg($string) {
|
||||
@if str-index($string, "data:image/svg+xml") {
|
||||
@each $char, $encoded in $escaped-characters {
|
||||
// Do not escape the url brackets
|
||||
@if str-index($string, "url(") == 1 {
|
||||
$string: url("#{str-replace(str-slice($string, 6, -3), $char, $encoded)}");
|
||||
} @else {
|
||||
$string: str-replace($string, $char, $encoded);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@return $string;
|
||||
}
|
||||
|
||||
// Color contrast
|
||||
// See https://github.com/twbs/bootstrap/pull/30168
|
||||
|
||||
// A list of pre-calculated numbers of pow(divide((divide($value, 255) + .055), 1.055), 2.4). (from 0 to 255)
|
||||
// stylelint-disable-next-line scss/dollar-variable-default, scss/dollar-variable-pattern
|
||||
$_luminance-list: .0008 .001 .0011 .0013 .0015 .0017 .002 .0022 .0025 .0027 .003 .0033 .0037 .004 .0044 .0048 .0052 .0056 .006 .0065 .007 .0075 .008 .0086 .0091 .0097 .0103 .011 .0116 .0123 .013 .0137 .0144 .0152 .016 .0168 .0176 .0185 .0194 .0203 .0212 .0222 .0232 .0242 .0252 .0262 .0273 .0284 .0296 .0307 .0319 .0331 .0343 .0356 .0369 .0382 .0395 .0409 .0423 .0437 .0452 .0467 .0482 .0497 .0513 .0529 .0545 .0561 .0578 .0595 .0612 .063 .0648 .0666 .0685 .0704 .0723 .0742 .0762 .0782 .0802 .0823 .0844 .0865 .0887 .0908 .0931 .0953 .0976 .0999 .1022 .1046 .107 .1095 .1119 .1144 .117 .1195 .1221 .1248 .1274 .1301 .1329 .1356 .1384 .1413 .1441 .147 .15 .1529 .1559 .159 .162 .1651 .1683 .1714 .1746 .1779 .1812 .1845 .1878 .1912 .1946 .1981 .2016 .2051 .2086 .2122 .2159 .2195 .2232 .227 .2307 .2346 .2384 .2423 .2462 .2502 .2542 .2582 .2623 .2664 .2705 .2747 .2789 .2831 .2874 .2918 .2961 .3005 .305 .3095 .314 .3185 .3231 .3278 .3325 .3372 .3419 .3467 .3515 .3564 .3613 .3663 .3712 .3763 .3813 .3864 .3916 .3968 .402 .4072 .4125 .4179 .4233 .4287 .4342 .4397 .4452 .4508 .4564 .4621 .4678 .4735 .4793 .4851 .491 .4969 .5029 .5089 .5149 .521 .5271 .5333 .5395 .5457 .552 .5583 .5647 .5711 .5776 .5841 .5906 .5972 .6038 .6105 .6172 .624 .6308 .6376 .6445 .6514 .6584 .6654 .6724 .6795 .6867 .6939 .7011 .7084 .7157 .7231 .7305 .7379 .7454 .7529 .7605 .7682 .7758 .7835 .7913 .7991 .807 .8148 .8228 .8308 .8388 .8469 .855 .8632 .8714 .8796 .8879 .8963 .9047 .9131 .9216 .9301 .9387 .9473 .956 .9647 .9734 .9823 .9911 1;
|
||||
|
||||
@function color-contrast($background, $color-contrast-dark: $color-contrast-dark, $color-contrast-light: $color-contrast-light, $min-contrast-ratio: $min-contrast-ratio) {
|
||||
$foregrounds: $color-contrast-light, $color-contrast-dark, $white, $black;
|
||||
$max-ratio: 0;
|
||||
$max-ratio-color: null;
|
||||
|
||||
@each $color in $foregrounds {
|
||||
$contrast-ratio: contrast-ratio($background, $color);
|
||||
@if $contrast-ratio >= $min-contrast-ratio {
|
||||
@return $color;
|
||||
} @else if $contrast-ratio > $max-ratio {
|
||||
$max-ratio: $contrast-ratio;
|
||||
$max-ratio-color: $color;
|
||||
}
|
||||
}
|
||||
|
||||
@warn "Found no color leading to #{$min-contrast-ratio}:1 contrast ratio against #{$background}...";
|
||||
|
||||
@return $max-ratio-color;
|
||||
}
|
||||
|
||||
@function contrast-ratio($background, $foreground: $color-contrast-light) {
|
||||
$l1: luminance($background);
|
||||
$l2: luminance(opaque($background, $foreground));
|
||||
|
||||
@return if($l1 > $l2, divide($l1 + .05, $l2 + .05), divide($l2 + .05, $l1 + .05));
|
||||
}
|
||||
|
||||
// Return WCAG2.2 relative luminance
|
||||
// See https://www.w3.org/TR/WCAG/#dfn-relative-luminance
|
||||
// See https://www.w3.org/TR/WCAG/#dfn-contrast-ratio
|
||||
@function luminance($color) {
|
||||
$rgb: (
|
||||
"r": red($color),
|
||||
"g": green($color),
|
||||
"b": blue($color)
|
||||
);
|
||||
|
||||
@each $name, $value in $rgb {
|
||||
$value: if(divide($value, 255) < .04045, divide(divide($value, 255), 12.92), nth($_luminance-list, $value + 1));
|
||||
$rgb: map-merge($rgb, ($name: $value));
|
||||
}
|
||||
|
||||
@return (map-get($rgb, "r") * .2126) + (map-get($rgb, "g") * .7152) + (map-get($rgb, "b") * .0722);
|
||||
}
|
||||
|
||||
// Return opaque color
|
||||
// opaque(#fff, rgba(0, 0, 0, .5)) => #808080
|
||||
@function opaque($background, $foreground) {
|
||||
@return mix(rgba($foreground, 1), $background, opacity($foreground) * 100%);
|
||||
}
|
||||
|
||||
// scss-docs-start color-functions
|
||||
// Tint a color: mix a color with white
|
||||
@function tint-color($color, $weight) {
|
||||
@return mix(white, $color, $weight);
|
||||
}
|
||||
|
||||
// Shade a color: mix a color with black
|
||||
@function shade-color($color, $weight) {
|
||||
@return mix(black, $color, $weight);
|
||||
}
|
||||
|
||||
// Shade the color if the weight is positive, else tint it
|
||||
@function shift-color($color, $weight) {
|
||||
@return if($weight > 0, shade-color($color, $weight), tint-color($color, -$weight));
|
||||
}
|
||||
// scss-docs-end color-functions
|
||||
|
||||
// Return valid calc
|
||||
@function add($value1, $value2, $return-calc: true) {
|
||||
@if $value1 == null {
|
||||
@return $value2;
|
||||
}
|
||||
|
||||
@if $value2 == null {
|
||||
@return $value1;
|
||||
}
|
||||
|
||||
@if type-of($value1) == number and type-of($value2) == number and comparable($value1, $value2) {
|
||||
@return $value1 + $value2;
|
||||
}
|
||||
|
||||
@return if($return-calc == true, calc(#{$value1} + #{$value2}), $value1 + unquote(" + ") + $value2);
|
||||
}
|
||||
|
||||
@function subtract($value1, $value2, $return-calc: true) {
|
||||
@if $value1 == null and $value2 == null {
|
||||
@return null;
|
||||
}
|
||||
|
||||
@if $value1 == null {
|
||||
@return -$value2;
|
||||
}
|
||||
|
||||
@if $value2 == null {
|
||||
@return $value1;
|
||||
}
|
||||
|
||||
@if type-of($value1) == number and type-of($value2) == number and comparable($value1, $value2) {
|
||||
@return $value1 - $value2;
|
||||
}
|
||||
|
||||
@if type-of($value2) != number {
|
||||
$value2: unquote("(") + $value2 + unquote(")");
|
||||
}
|
||||
|
||||
@return if($return-calc == true, calc(#{$value1} - #{$value2}), $value1 + unquote(" - ") + $value2);
|
||||
}
|
||||
|
||||
@function divide($dividend, $divisor, $precision: 10) {
|
||||
$sign: if($dividend > 0 and $divisor > 0 or $dividend < 0 and $divisor < 0, 1, -1);
|
||||
$dividend: abs($dividend);
|
||||
$divisor: abs($divisor);
|
||||
@if $dividend == 0 {
|
||||
@return 0;
|
||||
}
|
||||
@if $divisor == 0 {
|
||||
@error "Cannot divide by 0";
|
||||
}
|
||||
$remainder: $dividend;
|
||||
$result: 0;
|
||||
$factor: 10;
|
||||
@while ($remainder > 0 and $precision >= 0) {
|
||||
$quotient: 0;
|
||||
@while ($remainder >= $divisor) {
|
||||
$remainder: $remainder - $divisor;
|
||||
$quotient: $quotient + 1;
|
||||
}
|
||||
$result: $result * 10 + $quotient;
|
||||
$factor: $factor * .1;
|
||||
$remainder: $remainder * 10;
|
||||
$precision: $precision - 1;
|
||||
@if ($precision < 0 and $remainder >= $divisor * 5) {
|
||||
$result: $result + 1;
|
||||
}
|
||||
}
|
||||
$result: $result * $factor * $sign;
|
||||
$dividend-unit: unit($dividend);
|
||||
$divisor-unit: unit($divisor);
|
||||
$unit-map: (
|
||||
"px": 1px,
|
||||
"rem": 1rem,
|
||||
"em": 1em,
|
||||
"%": 1%
|
||||
);
|
||||
@if ($dividend-unit != $divisor-unit and map-has-key($unit-map, $dividend-unit)) {
|
||||
$result: $result * map-get($unit-map, $dividend-unit);
|
||||
}
|
||||
@return $result;
|
||||
}
|
||||
+39
@@ -0,0 +1,39 @@
|
||||
// Row
|
||||
//
|
||||
// Rows contain your columns.
|
||||
|
||||
:root {
|
||||
@each $name, $value in $grid-breakpoints {
|
||||
--#{$prefix}breakpoint-#{$name}: #{$value};
|
||||
}
|
||||
}
|
||||
|
||||
@if $enable-grid-classes {
|
||||
.row {
|
||||
@include make-row();
|
||||
|
||||
> * {
|
||||
@include make-col-ready();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@if $enable-cssgrid {
|
||||
.grid {
|
||||
display: grid;
|
||||
grid-template-rows: repeat(var(--#{$prefix}rows, 1), 1fr);
|
||||
grid-template-columns: repeat(var(--#{$prefix}columns, #{$grid-columns}), 1fr);
|
||||
gap: var(--#{$prefix}gap, #{$grid-gutter-width});
|
||||
|
||||
@include make-cssgrid();
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Columns
|
||||
//
|
||||
// Common styles for small and large grid columns
|
||||
|
||||
@if $enable-grid-classes {
|
||||
@include make-grid-columns();
|
||||
}
|
||||
+12
@@ -0,0 +1,12 @@
|
||||
@import "helpers/clearfix";
|
||||
@import "helpers/color-bg";
|
||||
@import "helpers/colored-links";
|
||||
@import "helpers/focus-ring";
|
||||
@import "helpers/icon-link";
|
||||
@import "helpers/ratio";
|
||||
@import "helpers/position";
|
||||
@import "helpers/stacks";
|
||||
@import "helpers/visually-hidden";
|
||||
@import "helpers/stretched-link";
|
||||
@import "helpers/text-truncation";
|
||||
@import "helpers/vr";
|
||||
+42
@@ -0,0 +1,42 @@
|
||||
// Responsive images (ensure images don't scale beyond their parents)
|
||||
//
|
||||
// This is purposefully opt-in via an explicit class rather than being the default for all `<img>`s.
|
||||
// We previously tried the "images are responsive by default" approach in Bootstrap v2,
|
||||
// and abandoned it in Bootstrap v3 because it breaks lots of third-party widgets (including Google Maps)
|
||||
// which weren't expecting the images within themselves to be involuntarily resized.
|
||||
// See also https://github.com/twbs/bootstrap/issues/18178
|
||||
.img-fluid {
|
||||
@include img-fluid();
|
||||
}
|
||||
|
||||
|
||||
// Image thumbnails
|
||||
.img-thumbnail {
|
||||
padding: $thumbnail-padding;
|
||||
background-color: $thumbnail-bg;
|
||||
border: $thumbnail-border-width solid $thumbnail-border-color;
|
||||
@include border-radius($thumbnail-border-radius);
|
||||
@include box-shadow($thumbnail-box-shadow);
|
||||
|
||||
// Keep them at most 100% wide
|
||||
@include img-fluid();
|
||||
}
|
||||
|
||||
//
|
||||
// Figures
|
||||
//
|
||||
|
||||
.figure {
|
||||
// Ensures the caption's text aligns with the image.
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.figure-img {
|
||||
margin-bottom: $spacer * .5;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.figure-caption {
|
||||
@include font-size($figure-caption-font-size);
|
||||
color: $figure-caption-color;
|
||||
}
|
||||
+199
@@ -0,0 +1,199 @@
|
||||
// Base class
|
||||
//
|
||||
// Easily usable on <ul>, <ol>, or <div>.
|
||||
|
||||
.list-group {
|
||||
// scss-docs-start list-group-css-vars
|
||||
--#{$prefix}list-group-color: #{$list-group-color};
|
||||
--#{$prefix}list-group-bg: #{$list-group-bg};
|
||||
--#{$prefix}list-group-border-color: #{$list-group-border-color};
|
||||
--#{$prefix}list-group-border-width: #{$list-group-border-width};
|
||||
--#{$prefix}list-group-border-radius: #{$list-group-border-radius};
|
||||
--#{$prefix}list-group-item-padding-x: #{$list-group-item-padding-x};
|
||||
--#{$prefix}list-group-item-padding-y: #{$list-group-item-padding-y};
|
||||
--#{$prefix}list-group-action-color: #{$list-group-action-color};
|
||||
--#{$prefix}list-group-action-hover-color: #{$list-group-action-hover-color};
|
||||
--#{$prefix}list-group-action-hover-bg: #{$list-group-hover-bg};
|
||||
--#{$prefix}list-group-action-active-color: #{$list-group-action-active-color};
|
||||
--#{$prefix}list-group-action-active-bg: #{$list-group-action-active-bg};
|
||||
--#{$prefix}list-group-disabled-color: #{$list-group-disabled-color};
|
||||
--#{$prefix}list-group-disabled-bg: #{$list-group-disabled-bg};
|
||||
--#{$prefix}list-group-active-color: #{$list-group-active-color};
|
||||
--#{$prefix}list-group-active-bg: #{$list-group-active-bg};
|
||||
--#{$prefix}list-group-active-border-color: #{$list-group-active-border-color};
|
||||
// scss-docs-end list-group-css-vars
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
// No need to set list-style: none; since .list-group-item is block level
|
||||
padding-left: 0; // reset padding because ul and ol
|
||||
margin-bottom: 0;
|
||||
@include border-radius(var(--#{$prefix}list-group-border-radius));
|
||||
}
|
||||
|
||||
.list-group-numbered {
|
||||
list-style-type: none;
|
||||
counter-reset: section;
|
||||
|
||||
> .list-group-item::before {
|
||||
// Increments only this instance of the section counter
|
||||
content: counters(section, ".") ". ";
|
||||
counter-increment: section;
|
||||
}
|
||||
}
|
||||
|
||||
// Individual list items
|
||||
//
|
||||
// Use on `li`s or `div`s within the `.list-group` parent.
|
||||
|
||||
.list-group-item {
|
||||
position: relative;
|
||||
display: block;
|
||||
padding: var(--#{$prefix}list-group-item-padding-y) var(--#{$prefix}list-group-item-padding-x);
|
||||
color: var(--#{$prefix}list-group-color);
|
||||
text-decoration: if($link-decoration == none, null, none);
|
||||
background-color: var(--#{$prefix}list-group-bg);
|
||||
border: var(--#{$prefix}list-group-border-width) solid var(--#{$prefix}list-group-border-color);
|
||||
|
||||
&:first-child {
|
||||
@include border-top-radius(inherit);
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
@include border-bottom-radius(inherit);
|
||||
}
|
||||
|
||||
&.disabled,
|
||||
&:disabled {
|
||||
color: var(--#{$prefix}list-group-disabled-color);
|
||||
pointer-events: none;
|
||||
background-color: var(--#{$prefix}list-group-disabled-bg);
|
||||
}
|
||||
|
||||
// Include both here for `<a>`s and `<button>`s
|
||||
&.active {
|
||||
z-index: 2; // Place active items above their siblings for proper border styling
|
||||
color: var(--#{$prefix}list-group-active-color);
|
||||
background-color: var(--#{$prefix}list-group-active-bg);
|
||||
border-color: var(--#{$prefix}list-group-active-border-color);
|
||||
}
|
||||
|
||||
// stylelint-disable-next-line scss/selector-no-redundant-nesting-selector
|
||||
& + .list-group-item {
|
||||
border-top-width: 0;
|
||||
|
||||
&.active {
|
||||
margin-top: calc(-1 * var(--#{$prefix}list-group-border-width)); // stylelint-disable-line function-disallowed-list
|
||||
border-top-width: var(--#{$prefix}list-group-border-width);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Interactive list items
|
||||
//
|
||||
// Use anchor or button elements instead of `li`s or `div`s to create interactive
|
||||
// list items. Includes an extra `.active` modifier class for selected items.
|
||||
|
||||
.list-group-item-action {
|
||||
width: 100%; // For `<button>`s (anchors become 100% by default though)
|
||||
color: var(--#{$prefix}list-group-action-color);
|
||||
text-align: inherit; // For `<button>`s (anchors inherit)
|
||||
|
||||
&:not(.active) {
|
||||
// Hover state
|
||||
&:hover,
|
||||
&:focus {
|
||||
z-index: 1; // Place hover/focus items above their siblings for proper border styling
|
||||
color: var(--#{$prefix}list-group-action-hover-color);
|
||||
text-decoration: none;
|
||||
background-color: var(--#{$prefix}list-group-action-hover-bg);
|
||||
}
|
||||
|
||||
&:active {
|
||||
color: var(--#{$prefix}list-group-action-active-color);
|
||||
background-color: var(--#{$prefix}list-group-action-active-bg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Horizontal
|
||||
//
|
||||
// Change the layout of list group items from vertical (default) to horizontal.
|
||||
|
||||
@each $breakpoint in map-keys($grid-breakpoints) {
|
||||
@include media-breakpoint-up($breakpoint) {
|
||||
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
|
||||
|
||||
.list-group-horizontal#{$infix} {
|
||||
flex-direction: row;
|
||||
|
||||
> .list-group-item {
|
||||
&:first-child:not(:last-child) {
|
||||
@include border-bottom-start-radius(var(--#{$prefix}list-group-border-radius));
|
||||
@include border-top-end-radius(0);
|
||||
}
|
||||
|
||||
&:last-child:not(:first-child) {
|
||||
@include border-top-end-radius(var(--#{$prefix}list-group-border-radius));
|
||||
@include border-bottom-start-radius(0);
|
||||
}
|
||||
|
||||
&.active {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
+ .list-group-item {
|
||||
border-top-width: var(--#{$prefix}list-group-border-width);
|
||||
border-left-width: 0;
|
||||
|
||||
&.active {
|
||||
margin-left: calc(-1 * var(--#{$prefix}list-group-border-width)); // stylelint-disable-line function-disallowed-list
|
||||
border-left-width: var(--#{$prefix}list-group-border-width);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Flush list items
|
||||
//
|
||||
// Remove borders and border-radius to keep list group items edge-to-edge. Most
|
||||
// useful within other components (e.g., cards).
|
||||
|
||||
.list-group-flush {
|
||||
@include border-radius(0);
|
||||
|
||||
> .list-group-item {
|
||||
border-width: 0 0 var(--#{$prefix}list-group-border-width);
|
||||
|
||||
&:last-child {
|
||||
border-bottom-width: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// scss-docs-start list-group-modifiers
|
||||
// List group contextual variants
|
||||
//
|
||||
// Add modifier classes to change text and background color on individual items.
|
||||
// Organizationally, this must come after the `:hover` states.
|
||||
|
||||
@each $state in map-keys($theme-colors) {
|
||||
.list-group-item-#{$state} {
|
||||
--#{$prefix}list-group-color: var(--#{$prefix}#{$state}-text-emphasis);
|
||||
--#{$prefix}list-group-bg: var(--#{$prefix}#{$state}-bg-subtle);
|
||||
--#{$prefix}list-group-border-color: var(--#{$prefix}#{$state}-border-subtle);
|
||||
--#{$prefix}list-group-action-hover-color: var(--#{$prefix}emphasis-color);
|
||||
--#{$prefix}list-group-action-hover-bg: var(--#{$prefix}#{$state}-border-subtle);
|
||||
--#{$prefix}list-group-action-active-color: var(--#{$prefix}emphasis-color);
|
||||
--#{$prefix}list-group-action-active-bg: var(--#{$prefix}#{$state}-border-subtle);
|
||||
--#{$prefix}list-group-active-color: var(--#{$prefix}#{$state}-bg-subtle);
|
||||
--#{$prefix}list-group-active-bg: var(--#{$prefix}#{$state}-text-emphasis);
|
||||
--#{$prefix}list-group-active-border-color: var(--#{$prefix}#{$state}-text-emphasis);
|
||||
}
|
||||
}
|
||||
// scss-docs-end list-group-modifiers
|
||||
+174
@@ -0,0 +1,174 @@
|
||||
// Re-assigned maps
|
||||
//
|
||||
// Placed here so that others can override the default Sass maps and see automatic updates to utilities and more.
|
||||
|
||||
// scss-docs-start theme-colors-rgb
|
||||
$theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value") !default;
|
||||
// scss-docs-end theme-colors-rgb
|
||||
|
||||
// scss-docs-start theme-text-map
|
||||
$theme-colors-text: (
|
||||
"primary": $primary-text-emphasis,
|
||||
"secondary": $secondary-text-emphasis,
|
||||
"success": $success-text-emphasis,
|
||||
"info": $info-text-emphasis,
|
||||
"warning": $warning-text-emphasis,
|
||||
"danger": $danger-text-emphasis,
|
||||
"light": $light-text-emphasis,
|
||||
"dark": $dark-text-emphasis,
|
||||
) !default;
|
||||
// scss-docs-end theme-text-map
|
||||
|
||||
// scss-docs-start theme-bg-subtle-map
|
||||
$theme-colors-bg-subtle: (
|
||||
"primary": $primary-bg-subtle,
|
||||
"secondary": $secondary-bg-subtle,
|
||||
"success": $success-bg-subtle,
|
||||
"info": $info-bg-subtle,
|
||||
"warning": $warning-bg-subtle,
|
||||
"danger": $danger-bg-subtle,
|
||||
"light": $light-bg-subtle,
|
||||
"dark": $dark-bg-subtle,
|
||||
) !default;
|
||||
// scss-docs-end theme-bg-subtle-map
|
||||
|
||||
// scss-docs-start theme-border-subtle-map
|
||||
$theme-colors-border-subtle: (
|
||||
"primary": $primary-border-subtle,
|
||||
"secondary": $secondary-border-subtle,
|
||||
"success": $success-border-subtle,
|
||||
"info": $info-border-subtle,
|
||||
"warning": $warning-border-subtle,
|
||||
"danger": $danger-border-subtle,
|
||||
"light": $light-border-subtle,
|
||||
"dark": $dark-border-subtle,
|
||||
) !default;
|
||||
// scss-docs-end theme-border-subtle-map
|
||||
|
||||
$theme-colors-text-dark: null !default;
|
||||
$theme-colors-bg-subtle-dark: null !default;
|
||||
$theme-colors-border-subtle-dark: null !default;
|
||||
|
||||
@if $enable-dark-mode {
|
||||
// scss-docs-start theme-text-dark-map
|
||||
$theme-colors-text-dark: (
|
||||
"primary": $primary-text-emphasis-dark,
|
||||
"secondary": $secondary-text-emphasis-dark,
|
||||
"success": $success-text-emphasis-dark,
|
||||
"info": $info-text-emphasis-dark,
|
||||
"warning": $warning-text-emphasis-dark,
|
||||
"danger": $danger-text-emphasis-dark,
|
||||
"light": $light-text-emphasis-dark,
|
||||
"dark": $dark-text-emphasis-dark,
|
||||
) !default;
|
||||
// scss-docs-end theme-text-dark-map
|
||||
|
||||
// scss-docs-start theme-bg-subtle-dark-map
|
||||
$theme-colors-bg-subtle-dark: (
|
||||
"primary": $primary-bg-subtle-dark,
|
||||
"secondary": $secondary-bg-subtle-dark,
|
||||
"success": $success-bg-subtle-dark,
|
||||
"info": $info-bg-subtle-dark,
|
||||
"warning": $warning-bg-subtle-dark,
|
||||
"danger": $danger-bg-subtle-dark,
|
||||
"light": $light-bg-subtle-dark,
|
||||
"dark": $dark-bg-subtle-dark,
|
||||
) !default;
|
||||
// scss-docs-end theme-bg-subtle-dark-map
|
||||
|
||||
// scss-docs-start theme-border-subtle-dark-map
|
||||
$theme-colors-border-subtle-dark: (
|
||||
"primary": $primary-border-subtle-dark,
|
||||
"secondary": $secondary-border-subtle-dark,
|
||||
"success": $success-border-subtle-dark,
|
||||
"info": $info-border-subtle-dark,
|
||||
"warning": $warning-border-subtle-dark,
|
||||
"danger": $danger-border-subtle-dark,
|
||||
"light": $light-border-subtle-dark,
|
||||
"dark": $dark-border-subtle-dark,
|
||||
) !default;
|
||||
// scss-docs-end theme-border-subtle-dark-map
|
||||
}
|
||||
|
||||
// Utilities maps
|
||||
//
|
||||
// Extends the default `$theme-colors` maps to help create our utilities.
|
||||
|
||||
// Come v6, we'll de-dupe these variables. Until then, for backward compatibility, we keep them to reassign.
|
||||
// scss-docs-start utilities-colors
|
||||
$utilities-colors: $theme-colors-rgb !default;
|
||||
// scss-docs-end utilities-colors
|
||||
|
||||
// scss-docs-start utilities-text-colors
|
||||
$utilities-text: map-merge(
|
||||
$utilities-colors,
|
||||
(
|
||||
"black": to-rgb($black),
|
||||
"white": to-rgb($white),
|
||||
"body": to-rgb($body-color)
|
||||
)
|
||||
) !default;
|
||||
$utilities-text-colors: map-loop($utilities-text, rgba-css-var, "$key", "text") !default;
|
||||
|
||||
$utilities-text-emphasis-colors: (
|
||||
"primary-emphasis": var(--#{$prefix}primary-text-emphasis),
|
||||
"secondary-emphasis": var(--#{$prefix}secondary-text-emphasis),
|
||||
"success-emphasis": var(--#{$prefix}success-text-emphasis),
|
||||
"info-emphasis": var(--#{$prefix}info-text-emphasis),
|
||||
"warning-emphasis": var(--#{$prefix}warning-text-emphasis),
|
||||
"danger-emphasis": var(--#{$prefix}danger-text-emphasis),
|
||||
"light-emphasis": var(--#{$prefix}light-text-emphasis),
|
||||
"dark-emphasis": var(--#{$prefix}dark-text-emphasis)
|
||||
) !default;
|
||||
// scss-docs-end utilities-text-colors
|
||||
|
||||
// scss-docs-start utilities-bg-colors
|
||||
$utilities-bg: map-merge(
|
||||
$utilities-colors,
|
||||
(
|
||||
"black": to-rgb($black),
|
||||
"white": to-rgb($white),
|
||||
"body": to-rgb($body-bg)
|
||||
)
|
||||
) !default;
|
||||
$utilities-bg-colors: map-loop($utilities-bg, rgba-css-var, "$key", "bg") !default;
|
||||
|
||||
$utilities-bg-subtle: (
|
||||
"primary-subtle": var(--#{$prefix}primary-bg-subtle),
|
||||
"secondary-subtle": var(--#{$prefix}secondary-bg-subtle),
|
||||
"success-subtle": var(--#{$prefix}success-bg-subtle),
|
||||
"info-subtle": var(--#{$prefix}info-bg-subtle),
|
||||
"warning-subtle": var(--#{$prefix}warning-bg-subtle),
|
||||
"danger-subtle": var(--#{$prefix}danger-bg-subtle),
|
||||
"light-subtle": var(--#{$prefix}light-bg-subtle),
|
||||
"dark-subtle": var(--#{$prefix}dark-bg-subtle)
|
||||
) !default;
|
||||
// scss-docs-end utilities-bg-colors
|
||||
|
||||
// scss-docs-start utilities-border-colors
|
||||
$utilities-border: map-merge(
|
||||
$utilities-colors,
|
||||
(
|
||||
"black": to-rgb($black),
|
||||
"white": to-rgb($white)
|
||||
)
|
||||
) !default;
|
||||
$utilities-border-colors: map-loop($utilities-border, rgba-css-var, "$key", "border") !default;
|
||||
|
||||
$utilities-border-subtle: (
|
||||
"primary-subtle": var(--#{$prefix}primary-border-subtle),
|
||||
"secondary-subtle": var(--#{$prefix}secondary-border-subtle),
|
||||
"success-subtle": var(--#{$prefix}success-border-subtle),
|
||||
"info-subtle": var(--#{$prefix}info-border-subtle),
|
||||
"warning-subtle": var(--#{$prefix}warning-border-subtle),
|
||||
"danger-subtle": var(--#{$prefix}danger-border-subtle),
|
||||
"light-subtle": var(--#{$prefix}light-border-subtle),
|
||||
"dark-subtle": var(--#{$prefix}dark-border-subtle)
|
||||
) !default;
|
||||
// scss-docs-end utilities-border-colors
|
||||
|
||||
$utilities-links-underline: map-loop($utilities-colors, rgba-css-var, "$key", "link-underline") !default;
|
||||
|
||||
$negative-spacers: if($enable-negative-margins, negativify-map($spacers), null) !default;
|
||||
|
||||
$gutters: $spacers !default;
|
||||
+42
@@ -0,0 +1,42 @@
|
||||
// Toggles
|
||||
//
|
||||
// Used in conjunction with global variables to enable certain theme features.
|
||||
|
||||
// Vendor
|
||||
@import "vendor/rfs";
|
||||
|
||||
// Deprecate
|
||||
@import "mixins/deprecate";
|
||||
|
||||
// Helpers
|
||||
@import "mixins/breakpoints";
|
||||
@import "mixins/color-mode";
|
||||
@import "mixins/color-scheme";
|
||||
@import "mixins/image";
|
||||
@import "mixins/resize";
|
||||
@import "mixins/visually-hidden";
|
||||
@import "mixins/reset-text";
|
||||
@import "mixins/text-truncate";
|
||||
|
||||
// Utilities
|
||||
@import "mixins/utilities";
|
||||
|
||||
// Components
|
||||
@import "mixins/backdrop";
|
||||
@import "mixins/buttons";
|
||||
@import "mixins/caret";
|
||||
@import "mixins/pagination";
|
||||
@import "mixins/lists";
|
||||
@import "mixins/forms";
|
||||
@import "mixins/table-variants";
|
||||
|
||||
// Skins
|
||||
@import "mixins/border-radius";
|
||||
@import "mixins/box-shadow";
|
||||
@import "mixins/gradients";
|
||||
@import "mixins/transition";
|
||||
|
||||
// Layout
|
||||
@import "mixins/clearfix";
|
||||
@import "mixins/container";
|
||||
@import "mixins/grid";
|
||||
+240
@@ -0,0 +1,240 @@
|
||||
// stylelint-disable function-disallowed-list
|
||||
|
||||
// .modal-open - body class for killing the scroll
|
||||
// .modal - container to scroll within
|
||||
// .modal-dialog - positioning shell for the actual modal
|
||||
// .modal-content - actual modal w/ bg and corners and stuff
|
||||
|
||||
|
||||
// Container that the modal scrolls within
|
||||
.modal {
|
||||
// scss-docs-start modal-css-vars
|
||||
--#{$prefix}modal-zindex: #{$zindex-modal};
|
||||
--#{$prefix}modal-width: #{$modal-md};
|
||||
--#{$prefix}modal-padding: #{$modal-inner-padding};
|
||||
--#{$prefix}modal-margin: #{$modal-dialog-margin};
|
||||
--#{$prefix}modal-color: #{$modal-content-color};
|
||||
--#{$prefix}modal-bg: #{$modal-content-bg};
|
||||
--#{$prefix}modal-border-color: #{$modal-content-border-color};
|
||||
--#{$prefix}modal-border-width: #{$modal-content-border-width};
|
||||
--#{$prefix}modal-border-radius: #{$modal-content-border-radius};
|
||||
--#{$prefix}modal-box-shadow: #{$modal-content-box-shadow-xs};
|
||||
--#{$prefix}modal-inner-border-radius: #{$modal-content-inner-border-radius};
|
||||
--#{$prefix}modal-header-padding-x: #{$modal-header-padding-x};
|
||||
--#{$prefix}modal-header-padding-y: #{$modal-header-padding-y};
|
||||
--#{$prefix}modal-header-padding: #{$modal-header-padding}; // Todo in v6: Split this padding into x and y
|
||||
--#{$prefix}modal-header-border-color: #{$modal-header-border-color};
|
||||
--#{$prefix}modal-header-border-width: #{$modal-header-border-width};
|
||||
--#{$prefix}modal-title-line-height: #{$modal-title-line-height};
|
||||
--#{$prefix}modal-footer-gap: #{$modal-footer-margin-between};
|
||||
--#{$prefix}modal-footer-bg: #{$modal-footer-bg};
|
||||
--#{$prefix}modal-footer-border-color: #{$modal-footer-border-color};
|
||||
--#{$prefix}modal-footer-border-width: #{$modal-footer-border-width};
|
||||
// scss-docs-end modal-css-vars
|
||||
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: var(--#{$prefix}modal-zindex);
|
||||
display: none;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
// Prevent Chrome on Windows from adding a focus outline. For details, see
|
||||
// https://github.com/twbs/bootstrap/pull/10951.
|
||||
outline: 0;
|
||||
// We deliberately don't use `-webkit-overflow-scrolling: touch;` due to a
|
||||
// gnarly iOS Safari bug: https://bugs.webkit.org/show_bug.cgi?id=158342
|
||||
// See also https://github.com/twbs/bootstrap/issues/17695
|
||||
}
|
||||
|
||||
// Shell div to position the modal with bottom padding
|
||||
.modal-dialog {
|
||||
position: relative;
|
||||
width: auto;
|
||||
margin: var(--#{$prefix}modal-margin);
|
||||
// allow clicks to pass through for custom click handling to close modal
|
||||
pointer-events: none;
|
||||
|
||||
// When fading in the modal, animate it to slide down
|
||||
.modal.fade & {
|
||||
transform: $modal-fade-transform;
|
||||
@include transition($modal-transition);
|
||||
}
|
||||
.modal.show & {
|
||||
transform: $modal-show-transform;
|
||||
}
|
||||
|
||||
// When trying to close, animate focus to scale
|
||||
.modal.modal-static & {
|
||||
transform: $modal-scale-transform;
|
||||
}
|
||||
}
|
||||
|
||||
.modal-dialog-scrollable {
|
||||
height: calc(100% - var(--#{$prefix}modal-margin) * 2);
|
||||
|
||||
.modal-content {
|
||||
max-height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
overflow-y: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.modal-dialog-centered {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
min-height: calc(100% - var(--#{$prefix}modal-margin) * 2);
|
||||
}
|
||||
|
||||
// Actual modal
|
||||
.modal-content {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%; // Ensure `.modal-content` extends the full width of the parent `.modal-dialog`
|
||||
// counteract the pointer-events: none; in the .modal-dialog
|
||||
color: var(--#{$prefix}modal-color);
|
||||
pointer-events: auto;
|
||||
background-color: var(--#{$prefix}modal-bg);
|
||||
background-clip: padding-box;
|
||||
border: var(--#{$prefix}modal-border-width) solid var(--#{$prefix}modal-border-color);
|
||||
@include border-radius(var(--#{$prefix}modal-border-radius));
|
||||
@include box-shadow(var(--#{$prefix}modal-box-shadow));
|
||||
// Remove focus outline from opened modal
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
// Modal background
|
||||
.modal-backdrop {
|
||||
// scss-docs-start modal-backdrop-css-vars
|
||||
--#{$prefix}backdrop-zindex: #{$zindex-modal-backdrop};
|
||||
--#{$prefix}backdrop-bg: #{$modal-backdrop-bg};
|
||||
--#{$prefix}backdrop-opacity: #{$modal-backdrop-opacity};
|
||||
// scss-docs-end modal-backdrop-css-vars
|
||||
|
||||
@include overlay-backdrop(var(--#{$prefix}backdrop-zindex), var(--#{$prefix}backdrop-bg), var(--#{$prefix}backdrop-opacity));
|
||||
}
|
||||
|
||||
// Modal header
|
||||
// Top section of the modal w/ title and dismiss
|
||||
.modal-header {
|
||||
display: flex;
|
||||
flex-shrink: 0;
|
||||
align-items: center;
|
||||
padding: var(--#{$prefix}modal-header-padding);
|
||||
border-bottom: var(--#{$prefix}modal-header-border-width) solid var(--#{$prefix}modal-header-border-color);
|
||||
@include border-top-radius(var(--#{$prefix}modal-inner-border-radius));
|
||||
|
||||
.btn-close {
|
||||
padding: calc(var(--#{$prefix}modal-header-padding-y) * .5) calc(var(--#{$prefix}modal-header-padding-x) * .5);
|
||||
// Split properties to avoid invalid calc() function if value is 0
|
||||
margin-top: calc(-.5 * var(--#{$prefix}modal-header-padding-y));
|
||||
margin-right: calc(-.5 * var(--#{$prefix}modal-header-padding-x));
|
||||
margin-bottom: calc(-.5 * var(--#{$prefix}modal-header-padding-y));
|
||||
margin-left: auto;
|
||||
}
|
||||
}
|
||||
|
||||
// Title text within header
|
||||
.modal-title {
|
||||
margin-bottom: 0;
|
||||
line-height: var(--#{$prefix}modal-title-line-height);
|
||||
}
|
||||
|
||||
// Modal body
|
||||
// Where all modal content resides (sibling of .modal-header and .modal-footer)
|
||||
.modal-body {
|
||||
position: relative;
|
||||
// Enable `flex-grow: 1` so that the body take up as much space as possible
|
||||
// when there should be a fixed height on `.modal-dialog`.
|
||||
flex: 1 1 auto;
|
||||
padding: var(--#{$prefix}modal-padding);
|
||||
}
|
||||
|
||||
// Footer (for actions)
|
||||
.modal-footer {
|
||||
display: flex;
|
||||
flex-shrink: 0;
|
||||
flex-wrap: wrap;
|
||||
align-items: center; // vertically center
|
||||
justify-content: flex-end; // Right align buttons with flex property because text-align doesn't work on flex items
|
||||
padding: calc(var(--#{$prefix}modal-padding) - var(--#{$prefix}modal-footer-gap) * .5);
|
||||
background-color: var(--#{$prefix}modal-footer-bg);
|
||||
border-top: var(--#{$prefix}modal-footer-border-width) solid var(--#{$prefix}modal-footer-border-color);
|
||||
@include border-bottom-radius(var(--#{$prefix}modal-inner-border-radius));
|
||||
|
||||
// Place margin between footer elements
|
||||
// This solution is far from ideal because of the universal selector usage,
|
||||
// but is needed to fix https://github.com/twbs/bootstrap/issues/24800
|
||||
> * {
|
||||
margin: calc(var(--#{$prefix}modal-footer-gap) * .5); // Todo in v6: replace with gap on parent class
|
||||
}
|
||||
}
|
||||
|
||||
// Scale up the modal
|
||||
@include media-breakpoint-up(sm) {
|
||||
.modal {
|
||||
--#{$prefix}modal-margin: #{$modal-dialog-margin-y-sm-up};
|
||||
--#{$prefix}modal-box-shadow: #{$modal-content-box-shadow-sm-up};
|
||||
}
|
||||
|
||||
// Automatically set modal's width for larger viewports
|
||||
.modal-dialog {
|
||||
max-width: var(--#{$prefix}modal-width);
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.modal-sm {
|
||||
--#{$prefix}modal-width: #{$modal-sm};
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
.modal-lg,
|
||||
.modal-xl {
|
||||
--#{$prefix}modal-width: #{$modal-lg};
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(xl) {
|
||||
.modal-xl {
|
||||
--#{$prefix}modal-width: #{$modal-xl};
|
||||
}
|
||||
}
|
||||
|
||||
// scss-docs-start modal-fullscreen-loop
|
||||
@each $breakpoint in map-keys($grid-breakpoints) {
|
||||
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
|
||||
$postfix: if($infix != "", $infix + "-down", "");
|
||||
|
||||
@include media-breakpoint-down($breakpoint) {
|
||||
.modal-fullscreen#{$postfix} {
|
||||
width: 100vw;
|
||||
max-width: none;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
|
||||
.modal-content {
|
||||
height: 100%;
|
||||
border: 0;
|
||||
@include border-radius(0);
|
||||
}
|
||||
|
||||
.modal-header,
|
||||
.modal-footer {
|
||||
@include border-radius(0);
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
overflow-y: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// scss-docs-end modal-fullscreen-loop
|
||||
+197
@@ -0,0 +1,197 @@
|
||||
// Base class
|
||||
//
|
||||
// Kickstart any navigation component with a set of style resets. Works with
|
||||
// `<nav>`s, `<ul>`s or `<ol>`s.
|
||||
|
||||
.nav {
|
||||
// scss-docs-start nav-css-vars
|
||||
--#{$prefix}nav-link-padding-x: #{$nav-link-padding-x};
|
||||
--#{$prefix}nav-link-padding-y: #{$nav-link-padding-y};
|
||||
@include rfs($nav-link-font-size, --#{$prefix}nav-link-font-size);
|
||||
--#{$prefix}nav-link-font-weight: #{$nav-link-font-weight};
|
||||
--#{$prefix}nav-link-color: #{$nav-link-color};
|
||||
--#{$prefix}nav-link-hover-color: #{$nav-link-hover-color};
|
||||
--#{$prefix}nav-link-disabled-color: #{$nav-link-disabled-color};
|
||||
// scss-docs-end nav-css-vars
|
||||
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
padding-left: 0;
|
||||
margin-bottom: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
display: block;
|
||||
padding: var(--#{$prefix}nav-link-padding-y) var(--#{$prefix}nav-link-padding-x);
|
||||
@include font-size(var(--#{$prefix}nav-link-font-size));
|
||||
font-weight: var(--#{$prefix}nav-link-font-weight);
|
||||
color: var(--#{$prefix}nav-link-color);
|
||||
text-decoration: if($link-decoration == none, null, none);
|
||||
background: none;
|
||||
border: 0;
|
||||
@include transition($nav-link-transition);
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: var(--#{$prefix}nav-link-hover-color);
|
||||
text-decoration: if($link-hover-decoration == underline, none, null);
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
outline: 0;
|
||||
box-shadow: $nav-link-focus-box-shadow;
|
||||
}
|
||||
|
||||
// Disabled state lightens text
|
||||
&.disabled,
|
||||
&:disabled {
|
||||
color: var(--#{$prefix}nav-link-disabled-color);
|
||||
pointer-events: none;
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Tabs
|
||||
//
|
||||
|
||||
.nav-tabs {
|
||||
// scss-docs-start nav-tabs-css-vars
|
||||
--#{$prefix}nav-tabs-border-width: #{$nav-tabs-border-width};
|
||||
--#{$prefix}nav-tabs-border-color: #{$nav-tabs-border-color};
|
||||
--#{$prefix}nav-tabs-border-radius: #{$nav-tabs-border-radius};
|
||||
--#{$prefix}nav-tabs-link-hover-border-color: #{$nav-tabs-link-hover-border-color};
|
||||
--#{$prefix}nav-tabs-link-active-color: #{$nav-tabs-link-active-color};
|
||||
--#{$prefix}nav-tabs-link-active-bg: #{$nav-tabs-link-active-bg};
|
||||
--#{$prefix}nav-tabs-link-active-border-color: #{$nav-tabs-link-active-border-color};
|
||||
// scss-docs-end nav-tabs-css-vars
|
||||
|
||||
border-bottom: var(--#{$prefix}nav-tabs-border-width) solid var(--#{$prefix}nav-tabs-border-color);
|
||||
|
||||
.nav-link {
|
||||
margin-bottom: calc(-1 * var(--#{$prefix}nav-tabs-border-width)); // stylelint-disable-line function-disallowed-list
|
||||
border: var(--#{$prefix}nav-tabs-border-width) solid transparent;
|
||||
@include border-top-radius(var(--#{$prefix}nav-tabs-border-radius));
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
// Prevents active .nav-link tab overlapping focus outline of previous/next .nav-link
|
||||
isolation: isolate;
|
||||
border-color: var(--#{$prefix}nav-tabs-link-hover-border-color);
|
||||
}
|
||||
}
|
||||
|
||||
.nav-link.active,
|
||||
.nav-item.show .nav-link {
|
||||
color: var(--#{$prefix}nav-tabs-link-active-color);
|
||||
background-color: var(--#{$prefix}nav-tabs-link-active-bg);
|
||||
border-color: var(--#{$prefix}nav-tabs-link-active-border-color);
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
// Make dropdown border overlap tab border
|
||||
margin-top: calc(-1 * var(--#{$prefix}nav-tabs-border-width)); // stylelint-disable-line function-disallowed-list
|
||||
// Remove the top rounded corners here since there is a hard edge above the menu
|
||||
@include border-top-radius(0);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Pills
|
||||
//
|
||||
|
||||
.nav-pills {
|
||||
// scss-docs-start nav-pills-css-vars
|
||||
--#{$prefix}nav-pills-border-radius: #{$nav-pills-border-radius};
|
||||
--#{$prefix}nav-pills-link-active-color: #{$nav-pills-link-active-color};
|
||||
--#{$prefix}nav-pills-link-active-bg: #{$nav-pills-link-active-bg};
|
||||
// scss-docs-end nav-pills-css-vars
|
||||
|
||||
.nav-link {
|
||||
@include border-radius(var(--#{$prefix}nav-pills-border-radius));
|
||||
}
|
||||
|
||||
.nav-link.active,
|
||||
.show > .nav-link {
|
||||
color: var(--#{$prefix}nav-pills-link-active-color);
|
||||
@include gradient-bg(var(--#{$prefix}nav-pills-link-active-bg));
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Underline
|
||||
//
|
||||
|
||||
.nav-underline {
|
||||
// scss-docs-start nav-underline-css-vars
|
||||
--#{$prefix}nav-underline-gap: #{$nav-underline-gap};
|
||||
--#{$prefix}nav-underline-border-width: #{$nav-underline-border-width};
|
||||
--#{$prefix}nav-underline-link-active-color: #{$nav-underline-link-active-color};
|
||||
// scss-docs-end nav-underline-css-vars
|
||||
|
||||
gap: var(--#{$prefix}nav-underline-gap);
|
||||
|
||||
.nav-link {
|
||||
padding-right: 0;
|
||||
padding-left: 0;
|
||||
border-bottom: var(--#{$prefix}nav-underline-border-width) solid transparent;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
border-bottom-color: currentcolor;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-link.active,
|
||||
.show > .nav-link {
|
||||
font-weight: $font-weight-bold;
|
||||
color: var(--#{$prefix}nav-underline-link-active-color);
|
||||
border-bottom-color: currentcolor;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Justified variants
|
||||
//
|
||||
|
||||
.nav-fill {
|
||||
> .nav-link,
|
||||
.nav-item {
|
||||
flex: 1 1 auto;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-justified {
|
||||
> .nav-link,
|
||||
.nav-item {
|
||||
flex-grow: 1;
|
||||
flex-basis: 0;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-fill,
|
||||
.nav-justified {
|
||||
.nav-item .nav-link {
|
||||
width: 100%; // Make sure button will grow
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Tabbable tabs
|
||||
//
|
||||
// Hide tabbable panes to start, show them when `.active`
|
||||
|
||||
.tab-content {
|
||||
> .tab-pane {
|
||||
display: none;
|
||||
}
|
||||
> .active {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
+289
@@ -0,0 +1,289 @@
|
||||
// Navbar
|
||||
//
|
||||
// Provide a static navbar from which we expand to create full-width, fixed, and
|
||||
// other navbar variations.
|
||||
|
||||
.navbar {
|
||||
// scss-docs-start navbar-css-vars
|
||||
--#{$prefix}navbar-padding-x: #{if($navbar-padding-x == null, 0, $navbar-padding-x)};
|
||||
--#{$prefix}navbar-padding-y: #{$navbar-padding-y};
|
||||
--#{$prefix}navbar-color: #{$navbar-light-color};
|
||||
--#{$prefix}navbar-hover-color: #{$navbar-light-hover-color};
|
||||
--#{$prefix}navbar-disabled-color: #{$navbar-light-disabled-color};
|
||||
--#{$prefix}navbar-active-color: #{$navbar-light-active-color};
|
||||
--#{$prefix}navbar-brand-padding-y: #{$navbar-brand-padding-y};
|
||||
--#{$prefix}navbar-brand-margin-end: #{$navbar-brand-margin-end};
|
||||
--#{$prefix}navbar-brand-font-size: #{$navbar-brand-font-size};
|
||||
--#{$prefix}navbar-brand-color: #{$navbar-light-brand-color};
|
||||
--#{$prefix}navbar-brand-hover-color: #{$navbar-light-brand-hover-color};
|
||||
--#{$prefix}navbar-nav-link-padding-x: #{$navbar-nav-link-padding-x};
|
||||
--#{$prefix}navbar-toggler-padding-y: #{$navbar-toggler-padding-y};
|
||||
--#{$prefix}navbar-toggler-padding-x: #{$navbar-toggler-padding-x};
|
||||
--#{$prefix}navbar-toggler-font-size: #{$navbar-toggler-font-size};
|
||||
--#{$prefix}navbar-toggler-icon-bg: #{escape-svg($navbar-light-toggler-icon-bg)};
|
||||
--#{$prefix}navbar-toggler-border-color: #{$navbar-light-toggler-border-color};
|
||||
--#{$prefix}navbar-toggler-border-radius: #{$navbar-toggler-border-radius};
|
||||
--#{$prefix}navbar-toggler-focus-width: #{$navbar-toggler-focus-width};
|
||||
--#{$prefix}navbar-toggler-transition: #{$navbar-toggler-transition};
|
||||
// scss-docs-end navbar-css-vars
|
||||
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-wrap: wrap; // allow us to do the line break for collapsing content
|
||||
align-items: center;
|
||||
justify-content: space-between; // space out brand from logo
|
||||
padding: var(--#{$prefix}navbar-padding-y) var(--#{$prefix}navbar-padding-x);
|
||||
@include gradient-bg();
|
||||
|
||||
// Because flex properties aren't inherited, we need to redeclare these first
|
||||
// few properties so that content nested within behave properly.
|
||||
// The `flex-wrap` property is inherited to simplify the expanded navbars
|
||||
%container-flex-properties {
|
||||
display: flex;
|
||||
flex-wrap: inherit;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
> .container,
|
||||
> .container-fluid {
|
||||
@extend %container-flex-properties;
|
||||
}
|
||||
|
||||
@each $breakpoint, $container-max-width in $container-max-widths {
|
||||
> .container#{breakpoint-infix($breakpoint, $container-max-widths)} {
|
||||
@extend %container-flex-properties;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Navbar brand
|
||||
//
|
||||
// Used for brand, project, or site names.
|
||||
|
||||
.navbar-brand {
|
||||
padding-top: var(--#{$prefix}navbar-brand-padding-y);
|
||||
padding-bottom: var(--#{$prefix}navbar-brand-padding-y);
|
||||
margin-right: var(--#{$prefix}navbar-brand-margin-end);
|
||||
@include font-size(var(--#{$prefix}navbar-brand-font-size));
|
||||
color: var(--#{$prefix}navbar-brand-color);
|
||||
text-decoration: if($link-decoration == none, null, none);
|
||||
white-space: nowrap;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: var(--#{$prefix}navbar-brand-hover-color);
|
||||
text-decoration: if($link-hover-decoration == underline, none, null);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Navbar nav
|
||||
//
|
||||
// Custom navbar navigation (doesn't require `.nav`, but does make use of `.nav-link`).
|
||||
|
||||
.navbar-nav {
|
||||
// scss-docs-start navbar-nav-css-vars
|
||||
--#{$prefix}nav-link-padding-x: 0;
|
||||
--#{$prefix}nav-link-padding-y: #{$nav-link-padding-y};
|
||||
@include rfs($nav-link-font-size, --#{$prefix}nav-link-font-size);
|
||||
--#{$prefix}nav-link-font-weight: #{$nav-link-font-weight};
|
||||
--#{$prefix}nav-link-color: var(--#{$prefix}navbar-color);
|
||||
--#{$prefix}nav-link-hover-color: var(--#{$prefix}navbar-hover-color);
|
||||
--#{$prefix}nav-link-disabled-color: var(--#{$prefix}navbar-disabled-color);
|
||||
// scss-docs-end navbar-nav-css-vars
|
||||
|
||||
display: flex;
|
||||
flex-direction: column; // cannot use `inherit` to get the `.navbar`s value
|
||||
padding-left: 0;
|
||||
margin-bottom: 0;
|
||||
list-style: none;
|
||||
|
||||
.nav-link {
|
||||
&.active,
|
||||
&.show {
|
||||
color: var(--#{$prefix}navbar-active-color);
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
position: static;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Navbar text
|
||||
//
|
||||
//
|
||||
|
||||
.navbar-text {
|
||||
padding-top: $nav-link-padding-y;
|
||||
padding-bottom: $nav-link-padding-y;
|
||||
color: var(--#{$prefix}navbar-color);
|
||||
|
||||
a,
|
||||
a:hover,
|
||||
a:focus {
|
||||
color: var(--#{$prefix}navbar-active-color);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Responsive navbar
|
||||
//
|
||||
// Custom styles for responsive collapsing and toggling of navbar contents.
|
||||
// Powered by the collapse Bootstrap JavaScript plugin.
|
||||
|
||||
// When collapsed, prevent the toggleable navbar contents from appearing in
|
||||
// the default flexbox row orientation. Requires the use of `flex-wrap: wrap`
|
||||
// on the `.navbar` parent.
|
||||
.navbar-collapse {
|
||||
flex-grow: 1;
|
||||
flex-basis: 100%;
|
||||
// For always expanded or extra full navbars, ensure content aligns itself
|
||||
// properly vertically. Can be easily overridden with flex utilities.
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
// Button for toggling the navbar when in its collapsed state
|
||||
.navbar-toggler {
|
||||
padding: var(--#{$prefix}navbar-toggler-padding-y) var(--#{$prefix}navbar-toggler-padding-x);
|
||||
@include font-size(var(--#{$prefix}navbar-toggler-font-size));
|
||||
line-height: 1;
|
||||
color: var(--#{$prefix}navbar-color);
|
||||
background-color: transparent; // remove default button style
|
||||
border: var(--#{$prefix}border-width) solid var(--#{$prefix}navbar-toggler-border-color); // remove default button style
|
||||
@include border-radius(var(--#{$prefix}navbar-toggler-border-radius));
|
||||
@include transition(var(--#{$prefix}navbar-toggler-transition));
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
text-decoration: none;
|
||||
outline: 0;
|
||||
box-shadow: 0 0 0 var(--#{$prefix}navbar-toggler-focus-width);
|
||||
}
|
||||
}
|
||||
|
||||
// Keep as a separate element so folks can easily override it with another icon
|
||||
// or image file as needed.
|
||||
.navbar-toggler-icon {
|
||||
display: inline-block;
|
||||
width: 1.5em;
|
||||
height: 1.5em;
|
||||
vertical-align: middle;
|
||||
background-image: var(--#{$prefix}navbar-toggler-icon-bg);
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-size: 100%;
|
||||
}
|
||||
|
||||
.navbar-nav-scroll {
|
||||
max-height: var(--#{$prefix}scroll-height, 75vh);
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
// scss-docs-start navbar-expand-loop
|
||||
// Generate series of `.navbar-expand-*` responsive classes for configuring
|
||||
// where your navbar collapses.
|
||||
.navbar-expand {
|
||||
@each $breakpoint in map-keys($grid-breakpoints) {
|
||||
$next: breakpoint-next($breakpoint, $grid-breakpoints);
|
||||
$infix: breakpoint-infix($next, $grid-breakpoints);
|
||||
|
||||
// stylelint-disable-next-line scss/selector-no-union-class-name
|
||||
&#{$infix} {
|
||||
@include media-breakpoint-up($next) {
|
||||
flex-wrap: nowrap;
|
||||
justify-content: flex-start;
|
||||
|
||||
.navbar-nav {
|
||||
flex-direction: row;
|
||||
|
||||
.dropdown-menu {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
padding-right: var(--#{$prefix}navbar-nav-link-padding-x);
|
||||
padding-left: var(--#{$prefix}navbar-nav-link-padding-x);
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-nav-scroll {
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.navbar-collapse {
|
||||
display: flex !important; // stylelint-disable-line declaration-no-important
|
||||
flex-basis: auto;
|
||||
}
|
||||
|
||||
.navbar-toggler {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.offcanvas {
|
||||
// stylelint-disable declaration-no-important
|
||||
position: static;
|
||||
z-index: auto;
|
||||
flex-grow: 1;
|
||||
width: auto !important;
|
||||
height: auto !important;
|
||||
visibility: visible !important;
|
||||
background-color: transparent !important;
|
||||
border: 0 !important;
|
||||
transform: none !important;
|
||||
@include box-shadow(none);
|
||||
@include transition(none);
|
||||
// stylelint-enable declaration-no-important
|
||||
|
||||
.offcanvas-header {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.offcanvas-body {
|
||||
display: flex;
|
||||
flex-grow: 0;
|
||||
padding: 0;
|
||||
overflow-y: visible;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// scss-docs-end navbar-expand-loop
|
||||
|
||||
// Navbar themes
|
||||
//
|
||||
// Styles for switching between navbars with light or dark background.
|
||||
|
||||
.navbar-light {
|
||||
@include deprecate("`.navbar-light`", "v5.2.0", "v6.0.0", true);
|
||||
}
|
||||
|
||||
.navbar-dark,
|
||||
.navbar[data-bs-theme="dark"] {
|
||||
// scss-docs-start navbar-dark-css-vars
|
||||
--#{$prefix}navbar-color: #{$navbar-dark-color};
|
||||
--#{$prefix}navbar-hover-color: #{$navbar-dark-hover-color};
|
||||
--#{$prefix}navbar-disabled-color: #{$navbar-dark-disabled-color};
|
||||
--#{$prefix}navbar-active-color: #{$navbar-dark-active-color};
|
||||
--#{$prefix}navbar-brand-color: #{$navbar-dark-brand-color};
|
||||
--#{$prefix}navbar-brand-hover-color: #{$navbar-dark-brand-hover-color};
|
||||
--#{$prefix}navbar-toggler-border-color: #{$navbar-dark-toggler-border-color};
|
||||
--#{$prefix}navbar-toggler-icon-bg: #{escape-svg($navbar-dark-toggler-icon-bg)};
|
||||
// scss-docs-end navbar-dark-css-vars
|
||||
}
|
||||
|
||||
@if $enable-dark-mode {
|
||||
@include color-mode(dark) {
|
||||
.navbar-toggler-icon {
|
||||
--#{$prefix}navbar-toggler-icon-bg: #{escape-svg($navbar-dark-toggler-icon-bg)};
|
||||
}
|
||||
}
|
||||
}
|
||||
+147
@@ -0,0 +1,147 @@
|
||||
// stylelint-disable function-disallowed-list
|
||||
|
||||
%offcanvas-css-vars {
|
||||
// scss-docs-start offcanvas-css-vars
|
||||
--#{$prefix}offcanvas-zindex: #{$zindex-offcanvas};
|
||||
--#{$prefix}offcanvas-width: #{$offcanvas-horizontal-width};
|
||||
--#{$prefix}offcanvas-height: #{$offcanvas-vertical-height};
|
||||
--#{$prefix}offcanvas-padding-x: #{$offcanvas-padding-x};
|
||||
--#{$prefix}offcanvas-padding-y: #{$offcanvas-padding-y};
|
||||
--#{$prefix}offcanvas-color: #{$offcanvas-color};
|
||||
--#{$prefix}offcanvas-bg: #{$offcanvas-bg-color};
|
||||
--#{$prefix}offcanvas-border-width: #{$offcanvas-border-width};
|
||||
--#{$prefix}offcanvas-border-color: #{$offcanvas-border-color};
|
||||
--#{$prefix}offcanvas-box-shadow: #{$offcanvas-box-shadow};
|
||||
--#{$prefix}offcanvas-transition: #{transform $offcanvas-transition-duration ease-in-out};
|
||||
--#{$prefix}offcanvas-title-line-height: #{$offcanvas-title-line-height};
|
||||
// scss-docs-end offcanvas-css-vars
|
||||
}
|
||||
|
||||
@each $breakpoint in map-keys($grid-breakpoints) {
|
||||
$next: breakpoint-next($breakpoint, $grid-breakpoints);
|
||||
$infix: breakpoint-infix($next, $grid-breakpoints);
|
||||
|
||||
.offcanvas#{$infix} {
|
||||
@extend %offcanvas-css-vars;
|
||||
}
|
||||
}
|
||||
|
||||
@each $breakpoint in map-keys($grid-breakpoints) {
|
||||
$next: breakpoint-next($breakpoint, $grid-breakpoints);
|
||||
$infix: breakpoint-infix($next, $grid-breakpoints);
|
||||
|
||||
.offcanvas#{$infix} {
|
||||
@include media-breakpoint-down($next) {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
z-index: var(--#{$prefix}offcanvas-zindex);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
max-width: 100%;
|
||||
color: var(--#{$prefix}offcanvas-color);
|
||||
visibility: hidden;
|
||||
background-color: var(--#{$prefix}offcanvas-bg);
|
||||
background-clip: padding-box;
|
||||
outline: 0;
|
||||
@include box-shadow(var(--#{$prefix}offcanvas-box-shadow));
|
||||
@include transition(var(--#{$prefix}offcanvas-transition));
|
||||
|
||||
&.offcanvas-start {
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: var(--#{$prefix}offcanvas-width);
|
||||
border-right: var(--#{$prefix}offcanvas-border-width) solid var(--#{$prefix}offcanvas-border-color);
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
|
||||
&.offcanvas-end {
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: var(--#{$prefix}offcanvas-width);
|
||||
border-left: var(--#{$prefix}offcanvas-border-width) solid var(--#{$prefix}offcanvas-border-color);
|
||||
transform: translateX(100%);
|
||||
}
|
||||
|
||||
&.offcanvas-top {
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
height: var(--#{$prefix}offcanvas-height);
|
||||
max-height: 100%;
|
||||
border-bottom: var(--#{$prefix}offcanvas-border-width) solid var(--#{$prefix}offcanvas-border-color);
|
||||
transform: translateY(-100%);
|
||||
}
|
||||
|
||||
&.offcanvas-bottom {
|
||||
right: 0;
|
||||
left: 0;
|
||||
height: var(--#{$prefix}offcanvas-height);
|
||||
max-height: 100%;
|
||||
border-top: var(--#{$prefix}offcanvas-border-width) solid var(--#{$prefix}offcanvas-border-color);
|
||||
transform: translateY(100%);
|
||||
}
|
||||
|
||||
&.showing,
|
||||
&.show:not(.hiding) {
|
||||
transform: none;
|
||||
}
|
||||
|
||||
&.showing,
|
||||
&.hiding,
|
||||
&.show {
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
|
||||
@if not ($infix == "") {
|
||||
@include media-breakpoint-up($next) {
|
||||
--#{$prefix}offcanvas-height: auto;
|
||||
--#{$prefix}offcanvas-border-width: 0;
|
||||
background-color: transparent !important; // stylelint-disable-line declaration-no-important
|
||||
|
||||
.offcanvas-header {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.offcanvas-body {
|
||||
display: flex;
|
||||
flex-grow: 0;
|
||||
padding: 0;
|
||||
overflow-y: visible;
|
||||
// Reset `background-color` in case `.bg-*` classes are used in offcanvas
|
||||
background-color: transparent !important; // stylelint-disable-line declaration-no-important
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.offcanvas-backdrop {
|
||||
@include overlay-backdrop($zindex-offcanvas-backdrop, $offcanvas-backdrop-bg, $offcanvas-backdrop-opacity);
|
||||
}
|
||||
|
||||
.offcanvas-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: var(--#{$prefix}offcanvas-padding-y) var(--#{$prefix}offcanvas-padding-x);
|
||||
|
||||
.btn-close {
|
||||
padding: calc(var(--#{$prefix}offcanvas-padding-y) * .5) calc(var(--#{$prefix}offcanvas-padding-x) * .5);
|
||||
// Split properties to avoid invalid calc() function if value is 0
|
||||
margin-top: calc(-.5 * var(--#{$prefix}offcanvas-padding-y));
|
||||
margin-right: calc(-.5 * var(--#{$prefix}offcanvas-padding-x));
|
||||
margin-bottom: calc(-.5 * var(--#{$prefix}offcanvas-padding-y));
|
||||
margin-left: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.offcanvas-title {
|
||||
margin-bottom: 0;
|
||||
line-height: var(--#{$prefix}offcanvas-title-line-height);
|
||||
}
|
||||
|
||||
.offcanvas-body {
|
||||
flex-grow: 1;
|
||||
padding: var(--#{$prefix}offcanvas-padding-y) var(--#{$prefix}offcanvas-padding-x);
|
||||
overflow-y: auto;
|
||||
}
|
||||
+109
@@ -0,0 +1,109 @@
|
||||
.pagination {
|
||||
// scss-docs-start pagination-css-vars
|
||||
--#{$prefix}pagination-padding-x: #{$pagination-padding-x};
|
||||
--#{$prefix}pagination-padding-y: #{$pagination-padding-y};
|
||||
@include rfs($pagination-font-size, --#{$prefix}pagination-font-size);
|
||||
--#{$prefix}pagination-color: #{$pagination-color};
|
||||
--#{$prefix}pagination-bg: #{$pagination-bg};
|
||||
--#{$prefix}pagination-border-width: #{$pagination-border-width};
|
||||
--#{$prefix}pagination-border-color: #{$pagination-border-color};
|
||||
--#{$prefix}pagination-border-radius: #{$pagination-border-radius};
|
||||
--#{$prefix}pagination-hover-color: #{$pagination-hover-color};
|
||||
--#{$prefix}pagination-hover-bg: #{$pagination-hover-bg};
|
||||
--#{$prefix}pagination-hover-border-color: #{$pagination-hover-border-color};
|
||||
--#{$prefix}pagination-focus-color: #{$pagination-focus-color};
|
||||
--#{$prefix}pagination-focus-bg: #{$pagination-focus-bg};
|
||||
--#{$prefix}pagination-focus-box-shadow: #{$pagination-focus-box-shadow};
|
||||
--#{$prefix}pagination-active-color: #{$pagination-active-color};
|
||||
--#{$prefix}pagination-active-bg: #{$pagination-active-bg};
|
||||
--#{$prefix}pagination-active-border-color: #{$pagination-active-border-color};
|
||||
--#{$prefix}pagination-disabled-color: #{$pagination-disabled-color};
|
||||
--#{$prefix}pagination-disabled-bg: #{$pagination-disabled-bg};
|
||||
--#{$prefix}pagination-disabled-border-color: #{$pagination-disabled-border-color};
|
||||
// scss-docs-end pagination-css-vars
|
||||
|
||||
display: flex;
|
||||
@include list-unstyled();
|
||||
}
|
||||
|
||||
.page-link {
|
||||
position: relative;
|
||||
display: block;
|
||||
padding: var(--#{$prefix}pagination-padding-y) var(--#{$prefix}pagination-padding-x);
|
||||
@include font-size(var(--#{$prefix}pagination-font-size));
|
||||
color: var(--#{$prefix}pagination-color);
|
||||
text-decoration: if($link-decoration == none, null, none);
|
||||
background-color: var(--#{$prefix}pagination-bg);
|
||||
border: var(--#{$prefix}pagination-border-width) solid var(--#{$prefix}pagination-border-color);
|
||||
@include transition($pagination-transition);
|
||||
|
||||
&:hover {
|
||||
z-index: 2;
|
||||
color: var(--#{$prefix}pagination-hover-color);
|
||||
text-decoration: if($link-hover-decoration == underline, none, null);
|
||||
background-color: var(--#{$prefix}pagination-hover-bg);
|
||||
border-color: var(--#{$prefix}pagination-hover-border-color);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
z-index: 3;
|
||||
color: var(--#{$prefix}pagination-focus-color);
|
||||
background-color: var(--#{$prefix}pagination-focus-bg);
|
||||
outline: $pagination-focus-outline;
|
||||
box-shadow: var(--#{$prefix}pagination-focus-box-shadow);
|
||||
}
|
||||
|
||||
&.active,
|
||||
.active > & {
|
||||
z-index: 3;
|
||||
color: var(--#{$prefix}pagination-active-color);
|
||||
@include gradient-bg(var(--#{$prefix}pagination-active-bg));
|
||||
border-color: var(--#{$prefix}pagination-active-border-color);
|
||||
}
|
||||
|
||||
&.disabled,
|
||||
.disabled > & {
|
||||
color: var(--#{$prefix}pagination-disabled-color);
|
||||
pointer-events: none;
|
||||
background-color: var(--#{$prefix}pagination-disabled-bg);
|
||||
border-color: var(--#{$prefix}pagination-disabled-border-color);
|
||||
}
|
||||
}
|
||||
|
||||
.page-item {
|
||||
&:not(:first-child) .page-link {
|
||||
margin-left: $pagination-margin-start;
|
||||
}
|
||||
|
||||
@if $pagination-margin-start == calc(-1 * #{$pagination-border-width}) {
|
||||
&:first-child {
|
||||
.page-link {
|
||||
@include border-start-radius(var(--#{$prefix}pagination-border-radius));
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
.page-link {
|
||||
@include border-end-radius(var(--#{$prefix}pagination-border-radius));
|
||||
}
|
||||
}
|
||||
} @else {
|
||||
// Add border-radius to all pageLinks in case they have left margin
|
||||
.page-link {
|
||||
@include border-radius(var(--#{$prefix}pagination-border-radius));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Sizing
|
||||
//
|
||||
|
||||
.pagination-lg {
|
||||
@include pagination-size($pagination-padding-y-lg, $pagination-padding-x-lg, $font-size-lg, $pagination-border-radius-lg);
|
||||
}
|
||||
|
||||
.pagination-sm {
|
||||
@include pagination-size($pagination-padding-y-sm, $pagination-padding-x-sm, $font-size-sm, $pagination-border-radius-sm);
|
||||
}
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user