56 lines
1.6 KiB
SCSS
56 lines
1.6 KiB
SCSS
//
|
|
// Keystroke Variables
|
|
//
|
|
|
|
// We use these to control text styles.
|
|
$keystroke-font: "Consolas", "Menlo", "Courier", monospace !default;
|
|
$keystroke-font-size: emCalc(15px) !default;
|
|
$keystroke-font-color: #222 !default;
|
|
$keystroke-font-color-alt: #fff !default;
|
|
$keystroke-function-factor: 7% !default;
|
|
|
|
// We use this to control keystroke padding.
|
|
$keystroke-padding: emCalc(2px) emCalc(4px) emCalc(0px) !default;
|
|
|
|
// We use these to control background and border styles.
|
|
$keystroke-bg: darken(#fff, $keystroke-function-factor) !default;
|
|
$keystroke-border-style: solid !default;
|
|
$keystroke-border-width: 1px !default;
|
|
$keystroke-border-color: darken($keystroke-bg, $keystroke-function-factor) !default;
|
|
$keystroke-radius: $global-radius !default;
|
|
|
|
//
|
|
// Keystroke Mixins
|
|
//
|
|
|
|
// We use this mixin to create keystroke styles.
|
|
@mixin keystroke($bg:$keystroke-bg) {
|
|
// This find the lightness percentage of the background color.
|
|
$bg-lightness: lightness($bg);
|
|
|
|
background-color: $bg;
|
|
border-color: darken($bg, $keystroke-function-factor);
|
|
|
|
// We adjust the font color based on the brightness of the background.
|
|
@if $bg-lightness > 70% { color: $keystroke-font-color; }
|
|
@else { color: $keystroke-font-color-alt; }
|
|
|
|
border-style: $keystroke-border-style;
|
|
border-width: $keystroke-border-width;
|
|
margin: 0;
|
|
font-family: $keystroke-font;
|
|
font-size: $keystroke-font-size;
|
|
padding: $keystroke-padding;
|
|
}
|
|
|
|
|
|
@if $include-html-media-classes {
|
|
|
|
/* Keystroke Characters */
|
|
.keystroke,
|
|
kbd {
|
|
@include keystroke;
|
|
@include radius($keystroke-radius);
|
|
}
|
|
|
|
} |