mirror of
https://github.com/tabler/tabler.git
synced 2026-10-12 05:06:55 +04:00
Restyle kbd as a compact key cap and add .kbd-group
This commit is contained in:
codecalm committed
1 parent
744f9fecf5
commit
e2cff972c0
9 files changed
+126
-22
No files matched your search
@@ -0,0 +1,7 @@
|
||||
---
|
||||
'@tabler/core': minor
|
||||
'@tabler/preview': minor
|
||||
'@tabler/docs': minor
|
||||
---
|
||||
|
||||
Restyled `<kbd>` as a compact key cap and added `.kbd-group` to group the keys of one shortcut. The key now adapts its colours inside buttons, badges and tooltips, and can be themed with the `--tblr-kbd-*` custom properties.
|
||||
@@ -32,6 +32,7 @@ export const DefaultAllowlist: AllowList = {
|
||||
'h6': [],
|
||||
'i': [],
|
||||
'img': ['src', 'srcset', 'alt', 'title', 'width', 'height'],
|
||||
'kbd': [],
|
||||
'li': [],
|
||||
'ol': [],
|
||||
'p': [],
|
||||
|
||||
@@ -98,6 +98,7 @@
|
||||
@forward 'ui/tracking';
|
||||
@forward 'ui/timeline';
|
||||
@forward 'ui/type';
|
||||
@forward 'ui/kbd';
|
||||
@forward 'ui/charts';
|
||||
@forward 'ui/sparkline';
|
||||
@forward 'ui/offcanvas';
|
||||
|
||||
@@ -753,14 +753,18 @@ $pre-bg: var(--bg-surface-dark) !default;
|
||||
$pre-color: var(--light) !default;
|
||||
$pre-selection-bg: color-transparent(var(--primary), 0.4) !default;
|
||||
|
||||
$kbd-padding-x: 0.5rem !default;
|
||||
$kbd-padding-y: 0.25rem !default;
|
||||
// scss-docs-start kbd-variables
|
||||
$kbd-height: 1.25rem !default;
|
||||
$kbd-padding-x: 0.25rem !default;
|
||||
$kbd-padding-y: 0 !default;
|
||||
$kbd-gap: 0.25rem !default;
|
||||
$kbd-font-weight: var(--font-weight-medium) !default;
|
||||
$kbd-font-size: var(--font-size-h5) !default;
|
||||
$kbd-border: var(--border-width) var(--border-style) var(--border-color) !default;
|
||||
$kbd-border: 0 !default;
|
||||
$kbd-color: var(--secondary-color) !default;
|
||||
$kbd-bg: var(--code-bg) !default;
|
||||
$kbd-border-radius: var(--border-radius) !default;
|
||||
$kbd-bg: color-transparent(currentColor, 0.12) !default;
|
||||
$kbd-border-radius: var(--border-radius-sm) !default;
|
||||
// scss-docs-end kbd-variables
|
||||
$nested-kbd-font-weight: null !default; // Deprecated in v5.2.0, removing in v6
|
||||
|
||||
// Avatars
|
||||
|
||||
@@ -0,0 +1,83 @@
|
||||
//
|
||||
// Keyboard key
|
||||
//
|
||||
@use '../config' as *;
|
||||
|
||||
kbd,
|
||||
.kbd {
|
||||
// scss-docs-start kbd-css-vars
|
||||
--kbd-height: #{$kbd-height};
|
||||
--kbd-padding-x: #{$kbd-padding-x};
|
||||
--kbd-padding-y: #{$kbd-padding-y};
|
||||
--kbd-gap: #{$kbd-gap};
|
||||
--kbd-font-size: #{$kbd-font-size};
|
||||
--kbd-font-weight: #{$kbd-font-weight};
|
||||
--kbd-color: #{$kbd-color};
|
||||
--kbd-bg: #{$kbd-bg};
|
||||
--kbd-border: #{$kbd-border};
|
||||
--kbd-border-radius: #{$kbd-border-radius};
|
||||
// scss-docs-end kbd-css-vars
|
||||
box-sizing: border-box;
|
||||
display: inline-flex;
|
||||
gap: var(--kbd-gap);
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-width: var(--kbd-height);
|
||||
max-width: 100%;
|
||||
height: var(--kbd-height);
|
||||
padding: var(--kbd-padding-y) var(--kbd-padding-x);
|
||||
font-family: var(--font-sans-serif);
|
||||
font-size: var(--kbd-font-size);
|
||||
font-weight: var(--kbd-font-weight);
|
||||
line-height: 1;
|
||||
color: var(--kbd-color);
|
||||
white-space: nowrap;
|
||||
vertical-align: baseline;
|
||||
background-color: var(--kbd-bg);
|
||||
border: var(--kbd-border);
|
||||
@include border-radius(var(--kbd-border-radius));
|
||||
|
||||
.icon {
|
||||
--icon-size: 0.75rem;
|
||||
}
|
||||
}
|
||||
|
||||
// On a coloured surface the key takes the colour of the text around it
|
||||
.btn,
|
||||
.tooltip,
|
||||
.badge {
|
||||
kbd,
|
||||
.kbd {
|
||||
--kbd-color: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
.btn,
|
||||
.badge {
|
||||
> kbd,
|
||||
> .kbd {
|
||||
margin-inline-start: 0.5em;
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Group of keys
|
||||
//
|
||||
.kbd-group {
|
||||
display: inline-flex;
|
||||
gap: var(--kbd-gap, #{$kbd-gap});
|
||||
align-items: center;
|
||||
min-width: 0;
|
||||
height: auto;
|
||||
padding: 0;
|
||||
font-weight: inherit;
|
||||
color: inherit;
|
||||
background: transparent;
|
||||
border: 0;
|
||||
|
||||
// Reboot removes the padding of a nested `kbd`
|
||||
> kbd {
|
||||
padding: var(--kbd-padding-y) var(--kbd-padding-x);
|
||||
font-size: var(--kbd-font-size);
|
||||
}
|
||||
}
|
||||
@@ -162,19 +162,6 @@ abbr {
|
||||
text-decoration-skip-ink: none;
|
||||
}
|
||||
|
||||
kbd,
|
||||
.kbd {
|
||||
box-sizing: border-box;
|
||||
display: inline-block;
|
||||
max-width: 100%;
|
||||
font-size: $kbd-font-size;
|
||||
font-weight: $kbd-font-weight;
|
||||
line-height: 1;
|
||||
vertical-align: baseline;
|
||||
border: $kbd-border;
|
||||
@include border-radius($kbd-border-radius);
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
|
||||
@@ -167,10 +167,31 @@ Use the `.antialiased` utility to render text using subpixel antialiasing or use
|
||||
|
||||
## Keyboard input
|
||||
|
||||
Use the `<kbd>` to indicate input that is typically entered via keyboard.
|
||||
Use the `<kbd>` element to show a key the user presses. The `.kbd` class gives the same look to any other element.
|
||||
|
||||
<Example>
|
||||
To edit settings, press <kbd>ctrl</kbd> + <kbd>,</kbd> or <kbd>ctrl</kbd> + <kbd>C</kbd> .
|
||||
To edit settings, press <kbd>Ctrl</kbd> + <kbd>,</kbd> or <kbd>Ctrl</kbd> + <kbd>C</kbd>.
|
||||
</Example>
|
||||
|
||||
### Key group
|
||||
|
||||
Wrap the keys of one shortcut in `.kbd-group` to keep them together on one line with an even gap.
|
||||
|
||||
<Example>
|
||||
<kbd class="kbd-group"><kbd>⌘</kbd><kbd>⇧</kbd><kbd>⌥</kbd><kbd>⌃</kbd></kbd>
|
||||
<kbd class="kbd-group ms-3"><kbd>Ctrl</kbd><span>+</span><kbd>B</kbd></kbd>
|
||||
</Example>
|
||||
|
||||
### Key in a button
|
||||
|
||||
Inside a button, a badge or a tooltip the key takes the colour of the text around it.
|
||||
|
||||
<Example>
|
||||
<div class="btn-list">
|
||||
<button type="button" class="btn">Accept <kbd>⏎</kbd></button>
|
||||
<button type="button" class="btn btn-primary">Save <kbd class="kbd-group"><kbd>⌘</kbd><kbd>S</kbd></kbd></button>
|
||||
<button type="button" class="btn" data-bs-toggle="tooltip" data-bs-html="true" title="Print <kbd class='kbd-group'><kbd>Ctrl</kbd><kbd>P</kbd></kbd>">Print</button>
|
||||
</div>
|
||||
</Example>
|
||||
|
||||
## Prose
|
||||
|
||||
@@ -425,7 +425,7 @@ Include a `<kbd>` in your input control to add a shortcut hint to the control.
|
||||
<label class="form-label">Input with appended kbd</label>
|
||||
<div class="input-group input-group-flat">
|
||||
<input type="password" class="form-control" value="ultrastrongpassword" autocomplete="off" />
|
||||
<span class="input-group-text"><kbd>ctrl + K</kbd></span>
|
||||
<span class="input-group-text"><kbd class="kbd-group"><kbd>⌘</kbd><kbd>K</kbd></kbd></span>
|
||||
</div>
|
||||
</div>
|
||||
</Example>
|
||||
|
||||
@@ -75,7 +75,7 @@ import InputGroup from '@ui/InputGroup.astro'
|
||||
<div class="input-group input-group-flat">
|
||||
<input type="text" class="form-control" id="fe2-appended-kbd" autocomplete="off" />
|
||||
<span class="input-group-text">
|
||||
<kbd>ctrl + K</kbd>
|
||||
<kbd class="kbd-group"><kbd>⌘</kbd><kbd>K</kbd></kbd>
|
||||
</span>
|
||||
</div>
|
||||
</FormGroup>
|
||||
|
||||
Reference in new issue
Block a user