/* ========================================================= RiverSync DS v2 — FORMS EXTENDED layer Companion to app-ui.css §6 (form controls). Input groups, add-on segments, in-border affixes (text / link / kbd / loader), validation states, counters, password strength, selection-control extras, form layout. ========================================================= */ /* --------------------------------------------------------- 1 · Validation states on bare controls --------------------------------------------------------- */ .rs-input.is-success,.rs-textarea.is-success{border-color:var(--success);} .rs-input.is-warning,.rs-textarea.is-warning{border-color:var(--warning);} .rs-input.is-error:focus,.rs-textarea.is-error:focus{ border-color:var(--danger); box-shadow:0 0 0 3px color-mix(in srgb, var(--danger) 24%, transparent);} .rs-input.is-success:focus,.rs-textarea.is-success:focus{ border-color:var(--success); box-shadow:0 0 0 3px color-mix(in srgb, var(--success) 22%, transparent);} .rs-input.is-warning:focus,.rs-textarea.is-warning:focus{ border-color:var(--warning); box-shadow:0 0 0 3px color-mix(in srgb, var(--warning) 24%, transparent);} .rs-input[readonly]:not([disabled]){background:var(--surface-2); color:var(--fg2);} /* field messages — success / warning rows + optional-label + counter */ .rs-field__ok{font-size:12px; color:var(--success); display:flex; align-items:center; gap:5px;} .rs-field__warn{font-size:12px; color:var(--warning); display:flex; align-items:center; gap:5px;} .rs-field__err{display:flex; align-items:center; gap:5px;} .rs-field__ok .rs-ic,.rs-field__warn .rs-ic,.rs-field__err .rs-ic{width:13px; height:13px; flex:none;} .rs-field__label .opt{font-weight:400; color:var(--fg3); font-size:11.5px;} .rs-field__meta{display:flex; align-items:baseline; justify-content:space-between; gap:10px;} .rs-field__count{font-size:11px; color:var(--fg3); font-variant-numeric:tabular-nums; margin-left:auto; flex:none;} .rs-field__count.is-over{color:var(--danger); font-weight:600;} /* trailing glyph on the absolute-positioned wrap (mirror of .rs-ic-lead) */ .rs-input-wrap .rs-ic-trail{position:absolute; right:10px; width:15px; height:15px; color:var(--fg3); pointer-events:none;} .rs-input-wrap.has-trail .rs-input{padding-right:32px;} /* --------------------------------------------------------- 2 · Affix input (.rs-affix) — one bordered control whose border wraps arbitrary prefixes/suffixes: icons, text, kbd, link actions, loaders, status glyphs. --------------------------------------------------------- */ .rs-affix{display:flex; align-items:center; gap:8px; width:100%; height:var(--control-h); padding:0 11px; border:1px solid var(--border-strong); border-radius:var(--r-md); background:var(--surface); transition:border-color .13s, box-shadow .13s, background .13s;} .rs-affix:hover{border-color:var(--fg3);} .rs-affix:focus-within{border-color:var(--accent); box-shadow:0 0 0 3px var(--ring);} .rs-affix > input{flex:1 1 auto; min-width:0; height:100%; border:none; background:none; outline:none; font:inherit; font-size:13px; color:var(--fg); padding:0;} .rs-affix > input::placeholder{color:var(--fg3);} .rs-affix .rs-ic{width:15px; height:15px; color:var(--fg3); flex:none;} .rs-affix .rs-ic.ok{color:var(--success);} .rs-affix .rs-ic.err{color:var(--danger);} .rs-affix__txt{font-size:13px; color:var(--fg3); white-space:nowrap; flex:none;} .rs-affix__link{font-size:12px; font-weight:400; color:var(--accent); text-decoration:none; white-space:nowrap; flex:none; cursor:pointer; background:none; border:none; font-family:inherit; padding:0;} .rs-affix__link:hover{text-decoration:underline;} .rs-affix .rs-kbd{flex:none; margin-right:-3px;} .rs-affix.is-error{border-color:var(--danger);} .rs-affix.is-error:focus-within{box-shadow:0 0 0 3px color-mix(in srgb, var(--danger) 24%, transparent);} .rs-affix.is-success{border-color:var(--success);} .rs-affix.is-success:focus-within{box-shadow:0 0 0 3px color-mix(in srgb, var(--success) 22%, transparent);} .rs-affix.is-disabled{background:var(--surface-2); pointer-events:none;} .rs-affix.is-disabled > input{color:var(--fg3);} .rs-affix--sm{height:var(--control-h-sm); padding:0 9px; gap:6px;} .rs-affix--sm > input{font-size:var(--fs-sm,12px);} /* --------------------------------------------------------- 2b · Tag input (.rs-taginput) — multiple removable tags inside one control; type-ahead against existing tags, create-new row when nothing matches. --------------------------------------------------------- */ .rs-taginput{position:relative; width:100%;} .rs-taginput__box{display:flex; flex-wrap:wrap; align-items:center; gap:5px; width:100%; min-height:var(--control-h); padding:4px 8px; box-sizing:border-box; border:1px solid var(--border-strong); border-radius:var(--r-md); background:var(--surface); cursor:text; transition:border-color .13s var(--ease), box-shadow .13s var(--ease);} .rs-taginput__box:hover{border-color:var(--fg3);} .rs-taginput__box:focus-within, .rs-taginput.is-open .rs-taginput__box{border-color:var(--accent); box-shadow:0 0 0 3px var(--ring);} .rs-taginput.is-error .rs-taginput__box{border-color:var(--danger);} .rs-taginput.is-disabled .rs-taginput__box{background:var(--surface-2); cursor:not-allowed;} .rs-taginput__field{flex:1 1 90px; min-width:90px; height:22px; padding:0 2px; border:none; background:none; outline:none; font:inherit; font-size:13px; color:var(--fg);} .rs-taginput__field::placeholder{color:var(--fg3);} .rs-taginput__menu{position:absolute; top:calc(100% + 4px); left:0; right:0; z-index:60; padding:4px; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); box-shadow:var(--shadow-lg); max-height:248px; overflow:auto;} .rs-taginput__menu .rs-selectbox__opt.is-create{color:var(--accent);} .rs-taginput__menu .rs-selectbox__opt.is-create .rs-ic{color:var(--accent);} .rs-taginput__none{padding:7px 9px; font-size:12.5px; color:var(--fg3);} /* --------------------------------------------------------- 3 · Input group (.rs-group) — joined segments sharing hairlines: add-ons, inputs, native selects, buttons. --------------------------------------------------------- */ .rs-group{display:flex; align-items:stretch; width:100%;} .rs-group > *{border-radius:0;} .rs-group > :not(:first-child){margin-left:-1px;} .rs-group > :first-child{border-top-left-radius:var(--r-md); border-bottom-left-radius:var(--r-md);} .rs-group > :last-child{border-top-right-radius:var(--r-md); border-bottom-right-radius:var(--r-md);} .rs-group > .rs-input,.rs-group > .rs-affix{flex:1 1 auto; min-width:0;} .rs-group > .rs-select{flex:0 0 auto; width:auto; background-color:var(--surface-2);} .rs-group > .rs-btn{flex:none;} .rs-group > .rs-input:focus,.rs-group > .rs-select:focus,.rs-group > .rs-btn:focus-visible, .rs-group > .rs-affix:focus-within{position:relative; z-index:2;} /* static add-on segment */ .rs-addon{display:inline-flex; align-items:center; gap:7px; padding:0 11px; height:var(--control-h); flex:none; border:1px solid var(--border-strong); background:var(--surface-2); color:var(--fg2); font-size:12.5px; white-space:nowrap; box-sizing:border-box;} .rs-addon .rs-ic{width:14px; height:14px; color:var(--fg3);} .rs-addon .rs-kbd{margin:0 -2px;} .rs-addon--mono{font-family:var(--rs-font-mono); font-size:12px;} .rs-addon--link{background:var(--surface); color:var(--accent); font-weight:400; cursor:pointer; text-decoration:none; font-family:inherit;} .rs-addon--link:hover{background:var(--accent-soft);} /* --------------------------------------------------------- 4 · Loader ring (.rs-spin) --------------------------------------------------------- */ .rs-spin{width:14px; height:14px; flex:none; border-radius:50%; box-sizing:border-box; border:2px solid var(--border-strong); border-top-color:var(--accent); animation:rs-spin .7s linear infinite;} .rs-spin--sm{width:12px; height:12px; border-width:1.5px;} @keyframes rs-spin{to{transform:rotate(360deg);}} @media (prefers-reduced-motion: reduce){.rs-spin{animation-duration:1.6s;}} /* --------------------------------------------------------- 5 · Password strength (.rs-strength) — data-level 0–4 --------------------------------------------------------- */ .rs-strength{display:flex; gap:4px; align-items:center;} .rs-strength i{height:3px; flex:1 1 auto; border-radius:99px; background:var(--surface-3); transition:background .2s;} .rs-strength[data-level="1"] i:nth-child(-n+1){background:var(--danger);} .rs-strength[data-level="2"] i:nth-child(-n+2){background:var(--warning);} .rs-strength[data-level="3"] i:nth-child(-n+3){background:var(--success);} .rs-strength[data-level="4"] i:nth-child(-n+4){background:var(--success);} .rs-strength__txt{font-size:11px; color:var(--fg3); flex:none; min-width:52px; text-align:right;} /* --------------------------------------------------------- 6 · Selection-control extras --------------------------------------------------------- */ .rs-check.is-disabled,.rs-switch.is-disabled,.rs-seg button:disabled{opacity:.5; cursor:not-allowed; pointer-events:none;} .rs-check.is-error .rs-check__box{border-color:var(--danger);} .rs-check--top{align-items:flex-start;} .rs-check--top .rs-check__box{margin-top:1.5px;} .rs-check__meta{display:flex; flex-direction:column; gap:2px;} .rs-check__meta small{font-size:11.5px; color:var(--fg3); font-weight:400;} /* choice card — radio/checkbox promoted to a bordered card */ .rs-choice{display:flex; gap:10px; align-items:flex-start; padding:12px 14px; border:1px solid var(--border-strong); border-radius:var(--r-lg); background:var(--surface); cursor:pointer; transition:border-color .13s, box-shadow .13s, background .13s;} .rs-choice:hover{border-color:var(--fg3);} .rs-choice.is-selected{border-color:var(--accent); box-shadow:0 0 0 1px var(--accent) inset; background:var(--accent-soft);} .rs-choice .rs-check__box{margin-top:1.5px;} /* --------------------------------------------------------- 7 · Date & time pickers (.rs-datebox) — branded popover calendar / time columns that open UNDER the trigger. Never the native OS picker. --------------------------------------------------------- */ .rs-datebox{position:relative; display:inline-flex; flex-direction:column; min-width:0; width:100%;} .rs-datebox__btn{display:flex; align-items:center; gap:8px; width:100%; height:var(--control-h); padding:0 10px; font:inherit; font-size:var(--fs,13px); text-align:left; color:var(--fg); background:var(--surface); border:1px solid var(--border-strong); border-radius:var(--r-md); cursor:pointer; transition:border-color .12s var(--ease), box-shadow .12s var(--ease), background .12s var(--ease);} .rs-datebox__btn:hover{background:var(--surface-2);} .rs-datebox__btn:focus-visible{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--ring);} .rs-datebox.is-open .rs-datebox__btn{border-color:var(--accent); box-shadow:0 0 0 3px var(--ring);} .rs-datebox__btn:disabled{background:var(--surface-3); color:var(--fg3); cursor:default;} .rs-datebox__btn > .rs-ic{flex:none; width:15px; height:15px; color:var(--fg3);} .rs-datebox__val{flex:1 1 auto; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-variant-numeric:tabular-nums;} .rs-datebox__val.is-placeholder{color:var(--fg3);} .rs-datebox__pop{position:absolute; top:calc(100% + 4px); left:0; z-index:60; padding:10px; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); box-shadow:var(--shadow-lg); opacity:0; transform:translateY(-4px); pointer-events:none; transition:opacity .14s var(--ease), transform .14s var(--ease);} .rs-datebox.is-open .rs-datebox__pop{opacity:1; transform:none; pointer-events:auto;} /* calendar */ .rs-cal__head{display:flex; align-items:center; gap:4px; padding-bottom:8px;} .rs-cal__title{flex:1 1 auto; text-align:center; font-size:12.5px; font-weight:600; color:var(--fg);} .rs-cal__nav{width:26px; height:26px; flex:none; display:inline-flex; align-items:center; justify-content:center; background:none; border:none; border-radius:var(--r-sm); color:var(--fg3); cursor:pointer; transition:background .12s var(--ease), color .12s var(--ease);} .rs-cal__nav:hover{background:var(--surface-2); color:var(--fg);} .rs-cal__nav .rs-ic{width:14px; height:14px;} .rs-cal__grid{display:grid; grid-template-columns:repeat(7, 30px); gap:2px; justify-items:stretch;} .rs-cal__dow{height:22px; display:flex; align-items:center; justify-content:center; font-size:10px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--fg3);} .rs-cal__day{height:28px; display:flex; align-items:center; justify-content:center; background:none; border:none; border-radius:var(--r-sm); font:inherit; font-size:12px; font-variant-numeric:tabular-nums; color:var(--fg); cursor:pointer; transition:background .12s var(--ease), color .12s var(--ease), box-shadow .12s var(--ease);} .rs-cal__day:hover{background:var(--accent-soft); color:var(--accent);} .rs-cal__day.is-out{color:var(--fg3); opacity:.55;} .rs-cal__day.is-today{box-shadow:inset 0 0 0 1px var(--accent-border); color:var(--accent); font-weight:600;} .rs-cal__day.is-selected, .rs-cal__day.is-selected:hover{background:var(--accent); color:var(--accent-fg); font-weight:600; box-shadow:none;} .rs-cal__foot{display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:8px; padding-top:8px; border-top:1px solid var(--border);} .rs-cal__action{background:none; border:none; padding:3px 6px; border-radius:var(--r-sm); font:inherit; font-size:12px; font-weight:600; color:var(--accent); cursor:pointer;} .rs-cal__action:hover{background:var(--accent-soft);} .rs-cal__action--muted{color:var(--fg3);} .rs-cal__action--muted:hover{background:var(--surface-2); color:var(--fg2);} /* time columns */ .rs-timegrid{display:flex; min-width:150px;} .rs-timegrid__col{flex:1 1 0; display:flex; flex-direction:column; min-width:64px;} .rs-timegrid__col + .rs-timegrid__col{border-left:1px solid var(--border); padding-left:6px; margin-left:6px;} .rs-timegrid__lab{font-size:10px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--fg3); text-align:center; padding-bottom:6px;} .rs-timegrid__list{max-height:172px; overflow:auto; display:flex; flex-direction:column; gap:2px; scrollbar-width:thin; padding-right:2px;} .rs-timegrid__cell{height:26px; flex:none; display:flex; align-items:center; justify-content:center; background:none; border:none; border-radius:var(--r-sm); font:inherit; font-size:12px; font-variant-numeric:tabular-nums; color:var(--fg); cursor:pointer; transition:background .12s var(--ease), color .12s var(--ease);} .rs-timegrid__cell:hover{background:var(--accent-soft); color:var(--accent);} .rs-timegrid__cell.is-selected, .rs-timegrid__cell.is-selected:hover{background:var(--accent); color:var(--accent-fg); font-weight:600;} /* --------------------------------------------------------- 8 · Form layout --------------------------------------------------------- */ .rs-form-section{display:flex; flex-direction:column; gap:3px; padding-bottom:4px;} .rs-form-section h4{font-size:13.5px; font-weight:600; color:var(--fg);} .rs-form-section p{font-size:12px; color:var(--fg3);} .rs-field--row{display:grid; grid-template-columns:190px 1fr; align-items:start; gap:4px 20px;} .rs-field--row > .rs-field__label{padding-top:9px;} .rs-field--row > .rs-field__hint,.rs-field--row > .rs-field__err,.rs-field--row > .rs-field__ok, .rs-field--row > .rs-field__warn,.rs-field--row > .rs-field__meta{grid-column:2;} .rs-form-actions{display:flex; align-items:center; justify-content:flex-end; gap:8px; padding-top:14px; border-top:1px solid var(--border);} .rs-form-actions .spacer{flex:1 1 auto;}