add input with appended <kbd> (#1391)

tabler · Nov 30, 2022 · 4113096 · 4113096
1 parent 969fe0d
commit 4113096
Show file tree

Hide file tree

Showing 6 changed files with 41 additions and 8 deletions.
diff --git a/src/pages/_docs/form-elements.md b/src/pages/_docs/form-elements.md
@@ -186,7 +186,7 @@ Add text to your input control, either before or after the text which is to be e
 
 ## Input with appended link
 
-Include a link in your input control to add a clickable element within the control. 
+Include a link in your input control to add a clickable element within the control.
 
 {% capture code %}
 <div class="mb-3">
@@ -196,6 +196,21 @@ Include a link in your input control to add a clickable element within the contr
 {% endcapture %}
 {% include example.html code=code %}
 
+## Input with appended `<kbd>`
+
+Include a `<kbd>` in your input control to add shortcut to the control.
+
+{% capture html %}
+<kbd>ctrl + K</kbd>
+{% endcapture %}
+{% capture code %}
+<div class="mb-3">
+	<label class="form-label">Input with appended link</label>
+	{% include ui/form/input-group.html append-html=html flat=true type="password" value="ultrastrongpassword" %}
+</div>
+{% endcapture %}
+{% include example.html code=code %}
+
 
 ## Input with appended icon links
 

diff --git a/src/pages/_includes/forms/form-elements-2.html b/src/pages/_includes/forms/form-elements-2.html
@@ -37,6 +37,15 @@
 	{% include ui/form/input-group.html append-link="Show password" flat=true type="password" value="ultrastrongpassword" %}
 </div>
 
+{% capture html %}
+<kbd>ctrl + K</kbd>
+{% endcapture %}
+
+<div class="mb-3">
+	<label class="form-label">Input with appended kbd</label>
+	{% include ui/form/input-group.html append-html=html flat=true %}
+</div>
+
 <div class="mb-3">
 	<label class="form-label">Input with appended icon links</label>
 	{% include ui/form/input-group.html append-button="x:Clear search,adjustments:Search settings,bell:Add notification" flat=true %}

diff --git a/src/pages/_includes/ui/form/input-group.html b/src/pages/_includes/ui/form/input-group.html
@@ -23,6 +23,11 @@
 		<a href="#" class="input-group-link">{{ include.append-link }}</a>
 	</span>
 	{% endif %}
+	{% if include.append-html %}
+	<span class="input-group-text">
+		{{ include.append-html }}
+	</span>
+	{% endif %}
 	{% if include.append-button %}
 	{% assign buttons = include.append-button | split: ',' %}
 	<span class="input-group-text">

diff --git a/src/scss/_variables.scss b/src/scss/_variables.scss
@@ -296,10 +296,12 @@ $pre-padding: 1rem !default;
 $pre-bg: var(--#{$prefix}bg-surface-dark) !default;
 $pre-color: var(--#{$prefix}light) !default;
 
-$kbd-padding-x: 4px !default;
-$kbd-padding-y: 2px !default;
+$kbd-padding-x: .5rem !default;
+$kbd-padding-y: .25rem !default;
 $kbd-font-weight: var(--#{$prefix}font-weight-medium) !default;
-$kbd-color: var(--#{$prefix}muted) !default;
+$kbd-font-size: var(--#{$prefix}font-size-h5) !default;
+$kbd-border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color) !default;
+$kbd-color: var(--#{$prefix}muted-dark) !default;
 $kbd-bg: var(--#{$prefix}code-bg) !default;
 $kbd-border-radius: var(--#{$prefix}border-radius) !default;
 

diff --git a/src/scss/ui/_status.scss b/src/scss/ui/_status.scss
@@ -71,7 +71,7 @@
 .status-lite {
   border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color) !important;
   background: transparent !important;
-  color: var(--#{$prefix}body-text) !important;
+  color: var(--#{$prefix}body-color) !important;
 }
 
 @each $name, $color in $theme-colors {

diff --git a/src/scss/ui/_type.scss b/src/scss/ui/_type.scss
@@ -122,15 +122,17 @@ code {
   border-radius: var(--#{$prefix}border-radius);
 }
 
-kbd {
-  border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color);
+kbd,
+.kbd {
+  border: $kbd-border;
   display: inline-block;
   box-sizing: border-box;
   max-width: 100%;
-  font-size: var(--#{$prefix}font-size-h5);
+  font-size: $kbd-font-size;
   font-weight: $kbd-font-weight;
   line-height: 1;
   vertical-align: baseline;
+  border-radius: $kbd-border-radius;
 }
 
 img {