oauth edit

2026-07-11 00:54:49 -04:00
parent bb79247054
commit 4f432ec448
4 changed files with 533 additions and 6 deletions
@@ -44,3 +44,70 @@ a:hover, button:hover, div.form-group:hover, header nav a{
 	transform: scale(1.05); /* Standard syntax */
 	z-index: 999999;
 }
+
+/* ── Reusable tag / token input (app.ui.tagInput / groupSelect) ────────────── */
+.tag-input{
+	position: relative;
+	display: flex;
+	flex-wrap: wrap;
+	align-items: center;
+	gap: .25rem;
+	min-height: calc(1.5em + .75rem + 2px);
+	height: auto;
+	cursor: text;
+}
+.tag-input .tag-chips{
+	display: contents;
+}
+.tag-input .tag-chip{
+	display: inline-flex;
+	align-items: center;
+	gap: .35rem;
+	background-color: #0d6efd;
+	color: #fff;
+	font-size: .85em;
+	font-weight: 500;
+	padding: .25rem .5rem;
+	border-radius: .5rem;
+}
+.tag-input .tag-chip .tag-remove{
+	color: #fff;
+	opacity: .8;
+	text-decoration: none;
+	font-weight: 700;
+	line-height: 1;
+	cursor: pointer;
+}
+.tag-input .tag-chip .tag-remove:hover{ opacity: 1; transform: none; }
+.tag-input .tag-typeahead{
+	flex: 1 1 8ch;
+	min-width: 8ch;
+	border: none;
+	outline: none;
+	background: transparent;
+	padding: .15rem 0;
+}
+.tag-input .tag-menu{
+	position: absolute;
+	top: 100%;
+	left: 0;
+	right: 0;
+	z-index: 1080;
+	background: #fff;
+	border: 1px solid rgba(0,0,0,.15);
+	border-radius: .375rem;
+	box-shadow: 0 .5rem 1rem rgba(0,0,0,.15);
+	max-height: 12rem;
+	overflow-y: auto;
+	margin-top: .15rem;
+}
+.tag-input .tag-option{
+	padding: .35rem .6rem;
+	cursor: pointer;
+}
+.tag-input .tag-option:hover,
+.tag-input .tag-option.active{
+	background-color: #0d6efd;
+	color: #fff;
+	transform: none;
+}