Impaczus/2048
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

adjust font sizes, add transition and cursor states

Browse Source
This commit is contained in:
Gabriele Cirulli
2014-03-05 17:02:54 +01:00
parent 5e41f41a69
commit 61f20acec6
3 changed files with 30 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
style/helpers.scss
+11
View File
@@ -19,3 +19,14 @@
@function pow($base, $exponent) { @function pow($base, $exponent) {
@return exponent($base, $exponent); @return exponent($base, $exponent);
} }
// Transition mixins
@mixin transition($args...) {
-webkit-transition: $args;
-moz-transition: $args;
}
@mixin transition-property($args...) {
-webkit-transition-property: $args;
-moz-transition-property: $args;
}
style/main.css
+10 -2
View File
@@ -22,6 +22,10 @@ h1 {
margin-top: 50px; margin-top: 50px;
position: relative; position: relative;
padding: 15px; padding: 15px;
cursor: default;
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
background: #bbada0; background: #bbada0;
border-radius: 6px; border-radius: 6px;
width: 500px; width: 500px;
@@ -63,8 +67,12 @@ h1 {
background: #eee4da; background: #eee4da;
text-align: center; text-align: center;
line-height: 116.25px; line-height: 116.25px;
font-size: 60px; font-size: 55px;
font-weight: bold; } font-weight: bold;
-webkit-transition: 200ms ease;
-moz-transition: 200ms ease;
-webkit-transition-property: top, left;
-moz-transition-property: top, left; }
.tile.tile-position-1-1 { .tile.tile-position-1-1 {
position: absolute; position: absolute;
left: 0px; left: 0px;
style/main.scss
+9 -1
View File
@@ -39,6 +39,11 @@ h1 {
position: relative; position: relative;
padding: $grid-spacing; padding: $grid-spacing;
cursor: default;
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
background: #bbada0; background: #bbada0;
border-radius: $tile-border-radius * 2; border-radius: $tile-border-radius * 2;
width: $field-width; width: $field-width;
@@ -94,9 +99,12 @@ h1 {
background: $tile-color; background: $tile-color;
text-align: center; text-align: center;
line-height: $tile-size + 10px; line-height: $tile-size + 10px;
font-size: 60px; font-size: 55px;
font-weight: bold; font-weight: bold;
@include transition(200ms ease);
@include transition-property(top, left);
@for $x from 1 through $grid-row-cells { @for $x from 1 through $grid-row-cells {
@for $y from 1 through $grid-row-cells { @for $y from 1 through $grid-row-cells {
&.tile-position-#{$x}-#{$y} { &.tile-position-#{$x}-#{$y} {