m/kbdfun
1
0
Fork 0
mirror of https://github.com/kremalicious/kbdfun.git synced 2024-12-27 07:07:42 +01:00
Code Releases Activity

some less mixins, iOS keys

Browse Source
This commit is contained in:
Matthias Kretschmann 2012-07-16 12:26:28 +02:00
parent ebc7cda13f
commit ead82fe6f6
2 changed files with 90 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

91
assets/less/kbdftw.less
View File

@ -14,47 +14,112 @@ Apple Keyboard font: VAG Rounded
@textColor: #444;
@textColorDark: #eee;
@fontFamily: "Lucida Grande", Lucida, Verdana, sans-serif;
/* Le kbd
---------------------- */
kbd {
color: @textColor;
font-family: @fontFamily;
font-weight: normal;
font-style: normal;
text-align: center;
line-height: 1em;
text-shadow: 0 1px 0 #fff;
display: inline;
padding: .3em .55em;
border-radius: 6px;
.border-radius(6px);
border: 1px solid #bbb;
background-color: #f7f7f7;
background-image: -webkit-linear-gradient(top, rgba(0,0,0,0.1) 0%,rgba(0,0,0,0) 60%,rgba(0,0,0,0) 100%);
#gradient > .vertical(rgba(0,0,0,0.1), rgba(0,0,0,0));
box-shadow: 0px 2px 0 #ccc,
box-shadow: 0px 2px 0 #bbb,
0 3px 1px #999,
0 4px 0 #fff,
inset 0 1px 0 #fff;
0 3px 0 #bbb,
inset 0 1px 1px #fff,
inset 0 -1px 3px #ccc;
&.dark {
color: @textColorDark;
text-shadow: 0 -1px 0 #000;
border-color: #444;
border-bottom-color: #000;
border-color: #000;
background-color: #4d4c4c;
background-image: -webkit-linear-gradient(top, rgba(0,0,0,.5) 0%,rgba(0,0,0,0) 80%,rgba(0,0,0,0) 100%);
#gradient > .vertical-three-colors(rgba(0,0,0,0.5), rgba(0,0,0,0), 80%, rgba(0,0,0,0));
box-shadow: 0px 2px 0 #222,
box-shadow: 0px 2px 0 #000,
0 3px 1px #999,
0 4px 0 #ccc,
inset 0 1px 0 #aaa;
inset 0 1px 1px #aaa,
inset 0 -1px 3px #272727;
}
&.ios {
font-family: Helvetica, "Helvetica Neue", Arial, sans-serif;
color: #000;
border-color: rgba(0,0,0,.4);
border-top-color: #7c7b84;
background-color: ##b7b7bc;
#gradient > .vertical(#efeff0, #b7b7bc);
box-shadow: 0 1px 2px rgba(0,0,0,.6),
0 2px 3px rgba(0,0,0,.1),
inset 0 1px 0 #fff;
}
&.android {
font-family: Roboto, "Helvetica Neue", Arial, sans-serif;
}
}
/* Mixins
---------------------- */
// Border Radius
.border-radius(@radius) {
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
border-radius: @radius;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
}
// Drop shadows
.box-shadow(@shadow) {
-webkit-box-shadow: @shadow;
-moz-box-shadow: @shadow;
box-shadow: @shadow;
}
// Gradient
#gradient {
.vertical(@startColor, @endColor) {
background-image: -moz-linear-gradient(top, @startColor, @endColor);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@startColor), to(@endColor));
background-image: -webkit-linear-gradient(top, @startColor, @endColor);
background-image: -o-linear-gradient(top, @startColor, @endColor);
background-image: linear-gradient(top, @startColor, @endColor);
background-repeat: repeat-x;
filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(@startColor),argb(@endColor)));
}
.vertical-three-colors(@startColor, @midColor, @colorStop, @endColor) {
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@startColor), color-stop(@colorStop, @midColor), to(@endColor));
background-image: -webkit-linear-gradient(@startColor, @midColor @colorStop, @endColor);
background-image: -moz-linear-gradient(top, @startColor, @midColor @colorStop, @endColor);
background-image: -o-linear-gradient(@startColor, @midColor @colorStop, @endColor);
background-image: linear-gradient(@startColor, @midColor @colorStop, @endColor);
background-repeat: no-repeat;
filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(@startColor),argb(@endColor)));
}
}

12
index.html
View File

@ -28,5 +28,17 @@
<p><kbd class="dark">⌘</kbd></p>
<hr />
<p>Please press the <kbd class="ios">Q</kbd> key</p>
<p><kbd class="ios">⌘</kbd></p>
<hr />
<p>Please press the <kbd class="android">Q</kbd> key</p>
<p><kbd class="android">⌘</kbd></p>
</body>
</html>