From 7cc7910df63d19e7ebc67bb1156437f0559712d7 Mon Sep 17 00:00:00 2001 From: Lars Henrik Mai Date: Sun, 21 Sep 2014 12:25:47 +0200 Subject: add foundation via bower --- .../scss/foundation/components/_keystrokes.scss | 61 ++++++++++++++++++++++ 1 file changed, 61 insertions(+) create mode 100644 source/bower_components/foundation/scss/foundation/components/_keystrokes.scss (limited to 'source/bower_components/foundation/scss/foundation/components/_keystrokes.scss') diff --git a/source/bower_components/foundation/scss/foundation/components/_keystrokes.scss b/source/bower_components/foundation/scss/foundation/components/_keystrokes.scss new file mode 100644 index 0000000..adebd6b --- /dev/null +++ b/source/bower_components/foundation/scss/foundation/components/_keystrokes.scss @@ -0,0 +1,61 @@ +// Foundation by ZURB +// foundation.zurb.com +// Licensed under MIT Open Source + +@import "global"; + +// +// @variables +// +$include-html-keystroke-classes: $include-html-classes !default; + +// We use these to control text styles. +$keystroke-font: "Consolas", "Menlo", "Courier", monospace !default; +$keystroke-font-size: inherit !default; +$keystroke-font-color: $jet !default; +$keystroke-font-color-alt: $white !default; +$keystroke-function-factor: -7% !default; + +// We use this to control keystroke padding. +$keystroke-padding: rem-calc(2 4 0) !default; + +// We use these to control background and border styles. +$keystroke-bg: scale-color($white, $lightness: $keystroke-function-factor) !default; +$keystroke-border-style: solid !default; +$keystroke-border-width: 1px !default; +$keystroke-border-color: scale-color($keystroke-bg, $lightness: $keystroke-function-factor) !default; +$keystroke-radius: $global-radius !default; + +// +// @mixins +// +// We use this mixin to create keystroke styles. +// $bg - Default: $keystroke-bg || scale-color($white, $lightness: $keystroke-function-factor) !default; +@mixin keystroke($bg:$keystroke-bg) { + // This find the lightness percentage of the background color. + $bg-lightness: lightness($bg); + + background-color: $bg; + border-color: scale-color($bg, $lightness: $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; +} + +@include exports("keystroke") { + @if $include-html-keystroke-classes { + .keystroke, + kbd { + @include keystroke; + @include radius($keystroke-radius); + } + } +} -- cgit v1.2.1