Permalink
Browse files

Add styles for hotkey hints

  • Loading branch information...
1 parent a52a4fd commit c352f78b7da193fde8cffc7ea167bee7d99520ba @kugaevsky committed Sep 24, 2012
View
37 app/assets/stylesheets/keybindings.css
@@ -0,0 +1,37 @@
+.mt-hotkey-el {
+ position: relative; }
+
+a[data-keybinding] .mt-hotkey-hint {
+ display: block;
+ float: right;
+ position: absolute;
+ top: -4px;
+ right: -4px;
+ z-index: 999;
+ font: bold 13px/1em sans-serif;
+ text-decoration: none;
+ text-indent: 0;
+ text-align: center;
+ vertical-align: center;
+ margin: 0;
+ padding: 0.3ex 0.7ex;
+ background: beige;
+ color: black;
+ text-shadow: 1px 1px 0 white;
+ box-shadow: 1px 1px 0 #333333;
+ border-radius: 5px;
+ border: 1px solid #888888;
+ opacity: 0.75;
+ -webkit-transition: all 0.15s linear;
+ -moz-transition: all 0.15s linear;
+ -o-transition: all 0.15s linear;
+ -ms-transition: all 0.15s linear;
+ transition: all 0.15s linear; }
+ a[data-keybinding] .mt-hotkey-hint:hover {
+ background: white;
+ opacity: 1;
+ -webkit-transform: scale(1.25);
+ -moz-transform: scale(1.25);
+ -o-transform: scale(1.25);
+ -ms-transform: scale(1.25);
+ transform: scale(1.25); }
View
50 app/assets/stylesheets/keybindings.css.sass
@@ -0,0 +1,50 @@
+$mtFont: bold 13px/1em sans-serif
+$mtBackground: beige
+$mtColor: black
+$mtTextShadow: 1px 1px 0 white
+$mtBoxShadow: 1px 1px 0 #333
+$mtOpacity: .75
+
+@mixin transition($styles)
+ -webkit-transition: $styles
+ -moz-transition: $styles
+ -o-transition: $styles
+ -ms-transition: $styles
+ transition: $styles
+
+@mixin transform($styles)
+ -webkit-transform: $styles
+ -moz-transform: $styles
+ -o-transform: $styles
+ -ms-transform: $styles
+ transform: $styles
+
+.mt-hotkey-el
+ position: relative
+a[data-keybinding]
+ .mt-hotkey-hint
+ display: block
+ float: right
+ position: absolute
+ top: -4px
+ right: -4px
+ z-index: 999
+ font: $mtFont
+ text-decoration: none
+ text-indent: 0
+ text-align: center
+ vertical-align: center
+ margin: 0
+ padding: 0.3ex 0.7ex
+ background: $mtBackground
+ color: $mtColor
+ text-shadow: $mtTextShadow
+ box-shadow: $mtBoxShadow
+ border-radius: 5px
+ border: 1px solid #888
+ opacity: $mtOpacity
+ @include transition(all .15s linear)
+ &:hover
+ background: white
+ opacity: $mtOpacity + 0.25
+ @include transform(scale(1.25))
View
14 lib/generators/mousetrap/install/templates/application.css
@@ -0,0 +1,14 @@
+/*
+ * This is a manifest file that'll be compiled into application.css, which will include all the files
+ * listed below.
+ *
+ * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
+ * or vendor/assets/stylesheets of plugins, if any, can be referenced here using a relative path.
+ *
+ * You're free to add application-wide styles to this file and they'll appear at the top of the
+ * compiled file, but it's generally better to create a new file per style scope.
+ *
+ *= require_self
+ *= require keybindings
+ *= require_tree .
+ */

0 comments on commit c352f78

Please sign in to comment.