/* SXY theme — company colours + minor overrides.
* Company is set via data-company="..." on .
* Dark/light via data-bs-theme="dark|light" on (Bootstrap 5). */
/* ==========================================================
* SXY kleur-tokens per bedrijf
*
* Voeg een nieuw bedrijf toe door onderstaand blok te kopiëren
* en de variabelen aan te passen. Alle componenten (buttons,
* tables, links, forms, badges, ...) gebruiken deze variabelen
* automatisch via de component-overrides verderop in dit bestand.
*
* Beschikbare tokens:
* --sxy-primary hoofd-accentkleur (buttons, links, aktieve nav)
* --sxy-primary-rgb RGB-waarden van primary (voor rgba())
* --sxy-accent secundaire accentkleur (hover-states, dot-indicator)
* --sxy-sidebar-bg achtergrondkleur sidebar (transparent = AdminLTE default)
* --sxy-btn-color tekstkleur op primary-buttons (default: #fff)
* --sxy-table-head-bg achtergrond tabelkoppen
* --sxy-table-head-color tekstkleur tabelkoppen
* --sxy-link-color kleur van anchor-links
* --sxy-badge-bg achtergrond van .badge.bg-primary
* --sxy-focus-shadow box-shadow bij form-focus
* ========================================================== */
:root {
--sxy-primary: #2d6a9f;
--sxy-primary-rgb: 45, 106, 159;
--sxy-accent: #4f9fcc;
--sxy-sidebar-bg: transparent;
--sxy-btn-color: #fff;
--sxy-table-head-bg: rgba(45, 106, 159, .10);
--sxy-table-head-color: inherit;
--sxy-link-color: #2d6a9f;
--sxy-badge-bg: #2d6a9f;
--sxy-focus-shadow: 0 0 0 .25rem rgba(45, 106, 159, .25);
}
[data-company="delectat"] {
--sxy-primary: #1a5276;
--sxy-primary-rgb: 26, 82, 118;
--sxy-accent: #2980b9;
--sxy-table-head-bg: rgba(26, 82, 118, .10);
--sxy-link-color: #1a5276;
--sxy-badge-bg: #1a5276;
--sxy-focus-shadow: 0 0 0 .25rem rgba(26, 82, 118, .25);
}
[data-company="omve"] {
--sxy-primary: #00489a;
--sxy-primary-rgb: 0, 72, 154;
--sxy-accent: #1a75cc;
--sxy-sidebar-bg: #2e2a29;
--sxy-table-head-bg: rgba(0, 72, 154, .10);
--sxy-link-color: #00489a;
--sxy-badge-bg: #00489a;
--sxy-focus-shadow: 0 0 0 .25rem rgba(0, 72, 154, .25);
}
[data-company="danone"] {
--sxy-primary: #26b99a;
--sxy-primary-rgb: 38, 185, 154;
--sxy-accent: #1abb9c;
--sxy-sidebar-bg: #2a3f54;
--sxy-btn-color: #fff;
--sxy-table-head-bg: rgba(38, 185, 154, .12);
--sxy-link-color: #1a9b80;
--sxy-badge-bg: #26b99a;
--sxy-focus-shadow: 0 0 0 .25rem rgba(38, 185, 154, .25);
}
[data-company="ulenco"] {
--sxy-primary: #27ae60;
--sxy-primary-rgb: 39, 174, 96;
--sxy-accent: #66bc66;
--sxy-sidebar-bg: #2a3f54;
--sxy-btn-color: #fff;
--sxy-table-head-bg: rgba(39, 174, 96, .10);
--sxy-link-color: #1e8449;
--sxy-badge-bg: #27ae60;
--sxy-focus-shadow: 0 0 0 .25rem rgba(39, 174, 96, .25);
}
/* ==========================================================
* Component-overrides — gebruiken bovenstaande tokens.
* Pas hier de stijl aan van buttons, tabellen, links etc.
* De juiste kleuren komen automatisch via de tokens hierboven.
* ========================================================== */
/* ---- Buttons: primary ---- */
.btn-primary {
--bs-btn-bg: var(--sxy-primary);
--bs-btn-border-color: var(--sxy-primary);
--bs-btn-color: var(--sxy-btn-color);
--bs-btn-hover-bg: color-mix(in srgb, var(--sxy-primary) 82%, #000);
--bs-btn-hover-border-color:color-mix(in srgb, var(--sxy-primary) 82%, #000);
--bs-btn-hover-color: var(--sxy-btn-color);
--bs-btn-active-bg: color-mix(in srgb, var(--sxy-primary) 70%, #000);
--bs-btn-active-border-color:color-mix(in srgb, var(--sxy-primary) 70%, #000);
--bs-btn-focus-shadow-rgb: var(--sxy-primary-rgb);
}
/* ---- Buttons: outline-primary ---- */
.btn-outline-primary {
--bs-btn-color: var(--sxy-primary);
--bs-btn-border-color: var(--sxy-primary);
--bs-btn-hover-bg: var(--sxy-primary);
--bs-btn-hover-border-color:var(--sxy-primary);
--bs-btn-hover-color: var(--sxy-btn-color);
--bs-btn-active-bg: color-mix(in srgb, var(--sxy-primary) 82%, #000);
--bs-btn-focus-shadow-rgb: var(--sxy-primary-rgb);
}
/* ---- Links ---- */
a:not(.btn):not(.nav-link):not(.dropdown-item):not(.page-link):not(.breadcrumb-item a) {
color: var(--sxy-link-color);
}
a:not(.btn):not(.nav-link):not(.dropdown-item):not(.page-link):hover {
color: color-mix(in srgb, var(--sxy-link-color) 75%, #000);
}
/* ---- Tabel koppen ---- */
.table > thead > tr > th,
.table > thead > tr > td {
background-color: var(--sxy-table-head-bg);
color: var(--sxy-table-head-color);
}
/* ---- Form focus ring ---- */
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
border-color: rgba(var(--sxy-primary-rgb), .6);
box-shadow: var(--sxy-focus-shadow);
outline: none;
}
/* ---- Badges ---- */
.badge.bg-primary,
.badge.text-bg-primary {
background-color: var(--sxy-badge-bg) !important;
}
/* ---- Paginering ---- */
.page-item.active .page-link {
background-color: var(--sxy-primary);
border-color: var(--sxy-primary);
}
.page-link {
color: var(--sxy-link-color);
}
.page-link:hover {
color: color-mix(in srgb, var(--sxy-link-color) 75%, #000);
}
/* ---- Progress bar ---- */
.progress-bar {
background-color: var(--sxy-primary);
}
/* ---- Nav-tabs actieve tab ---- */
.nav-tabs .nav-link.active {
border-bottom-color: var(--sxy-primary);
color: var(--sxy-primary);
}
/* ---- Card: dunne accent-lijn bovenaan ---- */
.card {
border-top: 2px solid rgba(var(--sxy-primary-rgb), .30);
}
/* ---- Checkboxes & radio (Bootstrap 5) ---- */
.form-check-input:checked {
background-color: var(--sxy-primary);
border-color: var(--sxy-primary);
}
/* ---- Yii2 ActiveForm: field-xxx wrapper niet verstoren ---- */
[class*="field-"].sxy-field { margin-bottom: 0; }
/* ---- Tabel zebra-striping ---- */
.table > tbody > tr:nth-child(odd) > td,
.table > tbody > tr:nth-child(odd) > th {
background-color: rgba(var(--sxy-primary-rgb), .04);
}
/* ==========================================================
* Floating-label invulveld (.sxy-field)
*
* Gebruik:
*
*
*
*
*
* Let op: placeholder=" " (spatie) is verplicht voor het
* :not(:placeholder-shown) trucje dat de gevulde staat detecteert.
*
* Modifiers:
* .sxy-field--error rode lijn + rood label
* .sxy-field--success groene lijn + groen label
* input[disabled] automatisch grijs
* ========================================================== */
.sxy-field {
position: relative;
padding-top: 1.1rem;
margin-bottom: 1.5rem;
}
.sxy-input {
display: block;
width: 100%;
border: none;
border-bottom: 1px solid #adb5bd;
border-radius: 0;
background: transparent;
padding: .25rem 0 .35rem;
font-size: .9rem;
color: inherit;
outline: none;
transition: border-color .2s;
box-shadow: none !important;
}
/* de kleurende balk onderaan — groeit bij hover (150px) en bij focus (100%) */
.sxy-field::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 2px;
background: var(--sxy-primary);
transition: width .2s ease;
}
/* hover: 150px hint-balk, alleen als het veld niet al focused is */
.sxy-field:has(.sxy-input:not([disabled]):hover):not(:focus-within)::after,
.sxy-field:has(.sxy-select:not([disabled]):hover):not(:focus-within)::after {
width: 150px;
}
.sxy-field:focus-within::after {
width: 100%;
}
.sxy-label {
position: absolute;
top: 1.35rem;
left: 0;
font-size: .9rem;
color: #6c757d;
pointer-events: none;
transition: top .2s ease, font-size .2s ease, color .2s ease;
white-space: nowrap;
}
/* label zweeft omhoog wanneer veld focus heeft of gevuld is */
.sxy-input:focus ~ .sxy-label,
.sxy-input:not(:placeholder-shown) ~ .sxy-label {
top: 0;
font-size: .72rem;
color: var(--sxy-primary);
}
/* disabled */
.sxy-input:disabled {
border-bottom-style: dashed;
color: #6c757d;
cursor: not-allowed;
}
.sxy-input:disabled ~ .sxy-label {
color: #adb5bd;
}
.sxy-field:has(.sxy-input:disabled)::after {
display: none;
}
@keyframes sxy-saving-pulse { from { opacity: .25 } to { opacity: 1 } }
/* auto-save status — absoluut gepositioneerd ÍN het label-element
* .sxy-label is position:absolute → is zelf containing block voor kinderen
* Andere labels krijgen via :has() position:relative zodat left:100% klopt */
.sxy-autosave-status {
position: absolute;
left: 100%;
top: 50%;
transform: translateY(-50%);
margin-left: .3rem;
font-size: .62rem;
font-weight: 400;
white-space: nowrap;
pointer-events: none;
transition: opacity .4s;
}
.sxy-autosave-status.is-fading { opacity: 0; }
.sxy-autosave-status--saving {
color: #fd7e14;
animation: sxy-saving-pulse .7s ease-in-out infinite alternate;
}
.sxy-autosave-status--success { color: var(--bs-success, #198754); }
.sxy-autosave-status--error {
color: var(--bs-danger, #dc3545);
background: rgba(220, 53, 69, .08);
padding: .05rem .3rem;
border-radius: .25rem;
border: 1px solid rgba(220, 53, 69, .25);
}
/* Niet-.sxy-label labels (radio/switch) krijgen position:relative als containing block */
label:not(.sxy-label):has(.sxy-autosave-status) {
position: relative;
display: inline-block;
}
/* Kleur/border via :has() — geen JS-class-mutaties nodig */
.sxy-field:has(.sxy-autosave-status--error) .sxy-input { border-bottom-color: var(--bs-danger, #dc3545); }
.sxy-field:has(.sxy-autosave-status--error) .sxy-label { color: var(--bs-danger, #dc3545); }
.sxy-field:has(.sxy-autosave-status--success) .sxy-input { border-bottom-color: var(--bs-success, #198754); }
.sxy-field:has(.sxy-autosave-status--success) .sxy-label { color: var(--bs-success, #198754); }
/* error-variant */
.sxy-field--error .sxy-input { border-bottom-color: var(--bs-danger, #dc3545); }
.sxy-field--error::after { background: var(--bs-danger, #dc3545); }
.sxy-field--error .sxy-input:focus ~ .sxy-label,
.sxy-field--error .sxy-input:not(:placeholder-shown) ~ .sxy-label,
.sxy-field--error .sxy-label { color: var(--bs-danger, #dc3545); }
/* success-variant */
.sxy-field--success .sxy-input { border-bottom-color: var(--bs-success, #198754); }
.sxy-field--success::after { background: var(--bs-success, #198754); }
.sxy-field--success .sxy-input:focus ~ .sxy-label,
.sxy-field--success .sxy-input:not(:placeholder-shown) ~ .sxy-label,
.sxy-field--success .sxy-label { color: var(--bs-success, #198754); }
/* hint-tekst onder het veld */
.sxy-hint {
font-size: .72rem;
color: #6c757d;
margin-top: .15rem;
}
.sxy-field--error .sxy-hint { color: var(--bs-danger, #dc3545); }
.sxy-field--success .sxy-hint { color: var(--bs-success, #198754); }
/* ==========================================================
* Floating-label dropdown (.sxy-select)
*
* Gebruik:
*
*
*
*
*
* Label zweeft omhoog zodra een echte optie geselecteerd is.
* Dezelfde modifiers als .sxy-input: --error, --success, disabled.
* ========================================================== */
.sxy-select {
display: block;
width: 100%;
border: none;
border-bottom: 1px solid #adb5bd;
border-radius: 0;
background-color: transparent;
/* chevron — neutraal grijs */
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%236c757d' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right .25rem center;
background-size: .9em;
padding: .25rem 1.5rem .35rem 0;
font-size: .9rem;
color: inherit;
appearance: none;
-webkit-appearance: none;
cursor: pointer;
outline: none;
transition: border-color .2s;
}
/* De groeiende balk bij focus werkt via .sxy-field::after — al gedefinieerd */
/* chevron wordt primaire kleur bij focus */
.sxy-field:focus-within .sxy-select {
border-bottom-color: var(--sxy-primary);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%232d6a9f' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3E%3C/svg%3E");
}
/* Label staat voor een select ALTIJD bovenaan — select toont altijd tekst */
.sxy-field:has(.sxy-select) .sxy-label {
top: 0;
font-size: .72rem;
color: #6c757d; /* grijs bij placeholder */
}
/* Accent-kleur zodra echte optie geselecteerd of bij focus */
.sxy-field:has(.sxy-select:not(:disabled)):not(:has(.sxy-select option[value=""]:checked)) .sxy-label,
.sxy-field:focus-within:has(.sxy-select) .sxy-label {
color: var(--sxy-primary);
}
/* disabled */
.sxy-select:disabled {
border-bottom-style: dashed;
color: #6c757d;
cursor: not-allowed;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23adb5bd' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3E%3C/svg%3E");
}
.sxy-field:has(.sxy-select:disabled)::after { display: none; }
.sxy-field:has(.sxy-select:disabled) .sxy-label { color: #adb5bd; }
/* error/success varianten voor select */
.sxy-field--error .sxy-select { border-bottom-color: var(--bs-danger, #dc3545); }
.sxy-field--success .sxy-select { border-bottom-color: var(--bs-success, #198754); }
/* ==========================================================
* Bestand upload dropzone (.sxy-dropzone)
*
* Gebruik:
*
*
*
*
*
* Sleep een bestand hierheen of klik om te bladeren
*
* Geen bestand geselecteerd
* PDF of afbeelding, max 10 MB
*
*