Add <kbd> element styles to indicate user input via keyboard.

twbs/bootstrap#11193
designmodo · Feb 5, 2014 · 65c8f3e · 65c8f3e
1 parent 5eaa50d
commit 65c8f3e
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 4 deletions.
diff --git a/css/flat-ui.css b/css/flat-ui.css
@@ -431,17 +431,26 @@ address {
   line-height: 1.72222;
 }
 code,
-kdb,
+kbd,
 pre,
 samp {
   font-family: Monaco, Menlo, Consolas, "Courier New", monospace;
 }
 code {
-  font-size: 75%;
+  padding: 2px 6px;
+  font-size: 85%;
   color: #c7254e;
   background-color: #f9f2f4;
   border-radius: 4px;
 }
+kbd {
+  padding: 2px 6px;
+  font-size: 85%;
+  color: #ffffff;
+  background-color: #34495e;
+  border-radius: 4px;
+  box-shadow: none;
+}
 pre {
   padding: 8px;
   margin: 0 0 15px;

diff --git a/less/modules/code.less b/less/modules/code.less
@@ -5,20 +5,31 @@
 
 // Inline and block code styles
 code,
-kdb,
+kbd,
 pre,
 samp {
   font-family: @font-family-monospace;
 }
 
 // Inline code
 code {
-  font-size: 75%;
+  padding: 2px 6px;
+  font-size: 85%;
   color: @code-color;
   background-color: @code-bg;
   border-radius: @border-radius-base;
 }
 
+// User input typically entered via keyboard
+kbd {
+  padding: 2px 6px;
+  font-size: 85%;
+  color: @kbd-color;
+  background-color: @kbd-bg;
+  border-radius: @border-radius-base;
+  box-shadow: none;
+}
+
 // Blocks of code
 pre {
   padding: ((@line-height-computed - 6) / 3);

diff --git a/less/variables.less b/less/variables.less
@@ -466,6 +466,9 @@
 @code-color:                  #c7254e;
 @code-bg:                     #f9f2f4;
 
+@kbd-color:                   @inverse;
+@kbd-bg:                      @brand-primary;
+
 @pre-bg:                      @inverse;
 @pre-color:                   inherit;
 @pre-border-color:            mix(@brand-primary, @inverse, 12%);