v0.4.1: UI opgeschoond — tabbladen, iconen, uniforme labels, T-cyclus
- core/ui-kit.js: gedeelde velden/schakelaars/tabs/specificatiekaarten - Bootstrap Icons lokaal (css/vendor, font ingebed) - Woning- en unit-instellingen in tabbladen, labels gestandaardiseerd - Specificaties onder 3D als kaarten - T: standaard -> 3D groot -> alleen render -> standaard Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
Machiel
co-authored by
Claude Opus 5.5
Claude Opus 5.5
parent
c690e72d13
commit
3591fad220
+92
@@ -544,3 +544,95 @@ html, body { height: 100%; }
|
||||
.vf-menu.open { display: block; }
|
||||
.vf-item { display: flex; align-items: center; gap: 8px; color: #eee; font-size: 13px; padding: 4px 0; cursor: pointer; user-select: none; }
|
||||
.vf-item input { accent-color: var(--primary-on-dark); width: 15px; height: 15px; cursor: pointer; }
|
||||
|
||||
/* ============================================================
|
||||
UI-KIT (core/ui-kit.js): velden, schakelaars, secties, tabbladen,
|
||||
specificatie-kaarten. Iconen: Bootstrap Icons (css/vendor).
|
||||
============================================================ */
|
||||
.bi { line-height: 1; vertical-align: -0.125em; }
|
||||
.ui-section { margin-bottom: 14px; }
|
||||
.ui-section h2, .ui-spec-card h2 {
|
||||
display: flex; align-items: center; gap: 7px; margin: 0 0 8px; font-size: 12px; font-weight: 600;
|
||||
color: var(--primary); text-transform: uppercase; letter-spacing: .6px;
|
||||
}
|
||||
.ui-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 28px; }
|
||||
.ui-field { display: flex; justify-content: space-between; align-items: center; gap: 10px; min-height: 28px; }
|
||||
.ui-field label { font-size: 12.5px; color: var(--text); display: flex; align-items: center; gap: 5px; }
|
||||
.ui-field.is-disabled label { color: var(--text-faint); }
|
||||
.ui-control { display: flex; align-items: center; flex: none; }
|
||||
.ui-control input[type=number], .ui-control select {
|
||||
width: 118px; background: var(--surface); border: 1px solid var(--border); color: var(--text);
|
||||
padding: 4px 6px; border-radius: 4px; font-size: 12.5px; font-family: inherit;
|
||||
}
|
||||
.ui-control input[type=number] { text-align: right; }
|
||||
.ui-control input:focus, .ui-control select:focus { border-color: var(--primary); outline: none; box-shadow: 0 0 0 2px var(--primary-soft); }
|
||||
.ui-control input:disabled { opacity: .55; background: var(--border-soft); cursor: not-allowed; }
|
||||
.ui-unit { width: 26px; margin-left: 5px; font-size: 11px; color: var(--text-faint); }
|
||||
.ui-hint { color: var(--text-faint); font-size: 11px; cursor: help; }
|
||||
.ui-hint:hover { color: var(--primary); }
|
||||
.ui-switch { position: relative; display: inline-block; width: 36px; height: 20px; margin-right: 82px; }
|
||||
.ui-switch input { opacity: 0; width: 0; height: 0; }
|
||||
.ui-switch span { position: absolute; inset: 0; background: #c9d1db; border-radius: 20px; cursor: pointer; transition: background .15s; }
|
||||
.ui-switch span::before { content: ''; position: absolute; width: 14px; height: 14px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: transform .15s; }
|
||||
.ui-switch input:checked + span { background: var(--primary); }
|
||||
.ui-switch input:checked + span::before { transform: translateX(16px); }
|
||||
.ui-switch input:focus-visible + span { box-shadow: 0 0 0 2px var(--primary-soft); }
|
||||
.ui-info, .ui-warn { display: flex; gap: 8px; align-items: flex-start; font-size: 12px; line-height: 1.5; border-radius: 4px; padding: 7px 10px; margin: 6px 0 10px; }
|
||||
.ui-info { color: var(--text-muted); background: var(--surface); border: 1px solid var(--border-soft); }
|
||||
.ui-warn { color: var(--danger); background: var(--danger-soft); border: 1px solid var(--danger); }
|
||||
.ui-info .bi, .ui-warn .bi { margin-top: 2px; }
|
||||
.ui-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
|
||||
.ui-btn {
|
||||
display: inline-flex; align-items: center; gap: 6px; background: var(--surface); border: 1px solid var(--border);
|
||||
color: var(--text); padding: 5px 11px; border-radius: 4px; font-size: 12px; cursor: pointer; font-family: inherit;
|
||||
}
|
||||
.ui-btn:hover { border-color: var(--primary); color: var(--primary); }
|
||||
.ui-btn.ui-btn-danger { color: var(--danger); border-color: #e3b4b0; }
|
||||
.ui-btn.ui-btn-danger:hover { background: var(--danger-soft); border-color: var(--danger); }
|
||||
.ui-btn.ui-btn-primary { background: var(--primary); border-color: var(--primary); color: #fff; }
|
||||
.ui-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
|
||||
.ui-panel-head h1 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 14px; }
|
||||
.ui-panel-head .ui-sub { font-size: 12px; color: var(--text-muted); }
|
||||
|
||||
.ui-tab-bar { display: flex; gap: 2px; border-bottom: 1px solid var(--border); margin: 0 0 12px; }
|
||||
.ui-tab {
|
||||
display: inline-flex; align-items: center; gap: 6px; background: none; border: none; border-bottom: 2px solid transparent;
|
||||
margin-bottom: -1px; padding: 7px 12px; font-size: 12.5px; color: var(--text-muted); cursor: pointer; font-family: inherit;
|
||||
}
|
||||
.ui-tab:hover { color: var(--text); }
|
||||
.ui-tab.active { color: var(--primary); border-bottom-color: var(--primary); font-weight: 600; }
|
||||
.ui-tab-page { display: none; }
|
||||
.ui-tab-page.active { display: block; }
|
||||
|
||||
.ui-spec-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
|
||||
.ui-spec-card { background: var(--surface); border: 1px solid var(--border-soft); border-radius: 6px; padding: 10px 12px; }
|
||||
.ui-spec-row { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; padding: 3px 0; border-bottom: 1px dashed var(--border-soft); }
|
||||
.ui-spec-row:last-child { border-bottom: none; }
|
||||
.ui-spec-val { font-weight: 600; color: var(--text); text-align: right; font-variant-numeric: tabular-nums; }
|
||||
.ui-spec-val small { font-weight: normal; color: var(--text-faint); margin-left: 3px; }
|
||||
.ui-spec-total { border-top: 1px solid var(--border); margin-top: 4px; padding-top: 2px; }
|
||||
.ui-spec-total .ui-spec-val { color: var(--primary); }
|
||||
|
||||
.btn-3d-toggle { display: inline-flex; align-items: center; gap: 6px; }
|
||||
.hn-item .bi { margin-right: 6px; color: var(--text-muted); }
|
||||
.hn-item.active .bi, .hn-item:hover .bi { color: var(--primary); }
|
||||
.hn-label { display: inline-flex; align-items: center; }
|
||||
|
||||
/* Weergave-cyclus (T): render-only = ook het info-deel onder de 3D weg. */
|
||||
.render-only #ho-specs, .render-only #specs-panel-3d, .render-only #floor-specs-panel-3d { display: none; }
|
||||
|
||||
/* Bestaande editor-panelen (wand/vloer) in dezelfde stijl als de UI-kit. */
|
||||
.control-group { min-height: 28px; margin-bottom: 3px; gap: 10px; }
|
||||
.control-group label { font-size: 12.5px; color: var(--text); }
|
||||
.control-group input, .control-group select { width: 118px; font-size: 12.5px; padding: 4px 6px; font-family: inherit; }
|
||||
h1 { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; letter-spacing: .6px; }
|
||||
.tab-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; text-transform: none; font-size: 12.5px; letter-spacing: 0; }
|
||||
.result-row { padding: 3px 0; border-bottom: 1px dashed var(--border-soft); }
|
||||
.result-row:last-child { border-bottom: none; }
|
||||
.result-row .highlight { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
|
||||
#specs-panel-3d .spec-section, #floor-specs-panel-3d .spec-section {
|
||||
background: var(--surface); border: 1px solid var(--border-soft); border-radius: 6px; padding: 10px 12px; margin-bottom: 12px;
|
||||
}
|
||||
.add-opening-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; text-transform: none; font-size: 12.5px; }
|
||||
.hn-actions .ui-btn { flex: 1; justify-content: center; }
|
||||
.hn-title { display: flex; align-items: center; gap: 6px; }
|
||||
|
||||
Vendored
+21
@@ -0,0 +1,21 @@
|
||||
The MIT License (MIT)
|
||||
|
||||
Copyright (c) 2019-2024 The Bootstrap Authors
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in
|
||||
all copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
|
||||
THE SOFTWARE.
|
||||
Vendored
+5
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user