Skip to content

Commit

Permalink
New demo, new layout.less, bug fixed and mmm
Browse files Browse the repository at this point in the history
  • Loading branch information
@olton
olton committed Jul 29, 2012
1 parent 345ebab commit 319f668
Show file tree
Hide file tree
Showing 11 changed files with 646 additions and 132 deletions.
68 changes: 34 additions & 34 deletions demo/css/cards.css
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
.card {
.metro .card {
width: 76px;
height: 106px;
border: 1px #f4f4f4 solid;
Expand All @@ -10,118 +10,118 @@
cursor: pointer;
background: #fff;
}
.card:hover {
.metro .card:hover {
box-shadow: 1px 1px 1px #ccc;
}
.card .small-suit {
.metro .card .small-suit {
font-size: 22pt;
}
.card .suit {
.metro .card .suit {
font-size: 84px;
position: absolute;
right: 5px;
bottom: 30px;
}
.card .small-suit:after {
.metro .card .small-suit:after {
top: 5px;
left: 10px;
position: absolute;
}
.card .small-suit:before {
.metro .card .small-suit:before {
top: 28px;
left: 10px;
position: absolute;
}
.card .suit:after {
.metro .card .suit:after {
position: relative;
}
.red {
.metro .red {
color: red;
}
.black {
.metro .black {
color: black;
}
.card.two .small-suit:after {
.metro .card.two .small-suit:after {
content: "2";
}
.card.three .small-suit:after {
.metro .card.three .small-suit:after {
content: "3";
}
.card.four .small-suit:after {
.metro .card.four .small-suit:after {
content: "4";
}
.card.five .small-suit:after {
.metro .card.five .small-suit:after {
content: "5";
}
.card.six .small-suit:after {
.metro .card.six .small-suit:after {
content: "6";
}
.card.seven .small-suit:after {
.metro .card.seven .small-suit:after {
content: "7";
}
.card.eight .small-suit:after {
.metro .card.eight .small-suit:after {
content: "8";
}
.card.nine .small-suit:after {
.metro .card.nine .small-suit:after {
content: "9";
}
.card.ten .small-suit:after {
.metro .card.ten .small-suit:after {
content: "10";
margin-left: -7px;
}
.card.jack .small-suit:after {
.metro .card.jack .small-suit:after {
content: "J";
}
.card.dame .small-suit:after {
.metro .card.dame .small-suit:after {
content: "Q";
}
.card.king .small-suit:after {
.metro .card.king .small-suit:after {
content: "K";
}
.card.ace .small-suit:after {
.metro .card.ace .small-suit:after {
content: "A";
}
.card.spades .small-suit:after {
.metro .card.spades .small-suit:after {
color: black;
}
.card.spades .small-suit:before {
.metro .card.spades .small-suit:before {
content: "\2660";
color: black;
}
.card.spades .suit:after {
.metro .card.spades .suit:after {
content: "\2660";
color: black;
}
.card.clubs .small-suit:after {
.metro .card.clubs .small-suit:after {
color: black;
}
.card.clubs .small-suit:before {
.metro .card.clubs .small-suit:before {
content: "\2663";
color: black;
}
.card.clubs .suit:after {
.metro .card.clubs .suit:after {
content: "\2663";
color: black;
}
.card.diamonds .small-suit:after {
.metro .card.diamonds .small-suit:after {
color: red;
}
.card.diamonds .small-suit:before {
.metro .card.diamonds .small-suit:before {
content: "\2666";
color: red;
}
.card.diamonds .suit:after {
.metro .card.diamonds .suit:after {
content: "\2666";
color: red;
}
.card.hearts .small-suit:after {
.metro .card.hearts .small-suit:after {
color: red;
}
.card.hearts .small-suit:before {
.metro .card.hearts .small-suit:before {
content: "\2665";
color: red;
}
.card.hearts .suit:after {
.metro .card.hearts .suit:after {
content: "\2665";
color: red;
}
9 changes: 5 additions & 4 deletions demo/css/metro.css
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

4 changes: 2 additions & 2 deletions less/buttons.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -168,7 +168,7 @@
height: 12px;
border-radius: 50%;
left: 6px;
top: 6px;
top: 4px;
}
input[type=radio]:checked + span::before {
background: #d1d1d1;
Expand Down Expand Up @@ -254,7 +254,7 @@
font-weight: bold;
font-family: Tahoma;
left: 4px;
top: 4px;
top: 2px;
}
input[type=checkbox]:checked + span::before {
background: #d1d1d1;
Expand Down
178 changes: 96 additions & 82 deletions less/cards.less
View file
Original file line number Diff line number Diff line change
@@ -1,93 +1,107 @@
@baseFontRegular: 'Open Sans', sans-serif;

.metro {
.card {
width: 76px;
height: 106px;
border: 1px #f4f4f4 solid;
border-radius: 0px;
//box-shadow: 1px 1px 1px #ccc;
position: relative;
float: left;
display: block;
margin: 5px;
cursor: pointer;
background: #fff;
font-family: Arial;

.card {
width: 76px;
height: 106px;
border: 1px #f4f4f4 solid;
border-radius: 0px;
//box-shadow: 1px 1px 1px #ccc;
position: relative;
float: left;
display: block;
margin: 5px;
cursor: pointer;
background: #fff;
//font-family: Tahoma !important;
&:hover {
//border-color: #ccc;
box-shadow: 1px 1px 1px #ccc;
}

&:hover {
//border-color: #ccc;
box-shadow: 1px 1px 1px #ccc;
}
.small-suit {
font-size: 22pt;
}
.suit {
padding: 0;
font-size: 84px;
position: absolute;
right: 5px;
bottom: -10px;
}
.small-suit:after {
top: 5px;
left: 10px;
position: absolute;
}
.small-suit:before {
top: 28px;
left: 10px;
position: absolute;
}

.small-suit {
font-size: 22pt;
//font-family: Tahoma !important;
}
.suit {
font-size: 84px;
position: absolute;
right: 5px;
bottom: 30px;
//font-family: Tahoma !important;
}
.small-suit:after {
top: 5px;
left: 10px;
position: absolute;
}
.small-suit:before {
top: 28px;
left: 10px;
position: absolute;
.suit:after {
position: relative;
}
}

.suit:after {
position: relative;
}
}
.red { color: red;}
.black { color: black; }

.red { color: red;}
.black { color: black; }

// Значения
.card.two { .small-suit:after { content: "2"; }}
.card.three { .small-suit:after { content: "3"; }}
.card.four { .small-suit:after { content: "4"; }}
.card.five { .small-suit:after { content: "5"; }}
.card.six { .small-suit:after { content: "6"; }}
.card.seven { .small-suit:after { content: "7"; }}
.card.eight { .small-suit:after { content: "8"; }}
.card.nine { .small-suit:after { content: "9"; }}
.card.ten { .small-suit:after { content: "10"; margin-left: -7px; }}
.card.jack { .small-suit:after { content: "J"; }}
.card.dame { .small-suit:after { content: "Q"; }}
.card.king { .small-suit:after { content: "K"; }}
.card.ace { .small-suit:after { content: "A"; }}
.card.joker { background: #fff url(/img/joker.jpg) no-repeat 10px}

// Значения
.card.two { .small-suit:after { content: "2"; }}
.card.three { .small-suit:after { content: "3"; }}
.card.four { .small-suit:after { content: "4"; }}
.card.five { .small-suit:after { content: "5"; }}
.card.six { .small-suit:after { content: "6"; }}
.card.seven { .small-suit:after { content: "7"; }}
.card.eight { .small-suit:after { content: "8"; }}
.card.nine { .small-suit:after { content: "9"; }}
.card.ten { .small-suit:after { content: "10"; margin-left: -7px; }}
.card.jack { .small-suit:after { content: "J"; }}
.card.dame { .small-suit:after { content: "Q"; }}
.card.king { .small-suit:after { content: "K"; }}
.card.ace { .small-suit:after { content: "A"; }}
@color: @red;
@angle: 45deg;
.card.back {
background-color: @color;
background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, rgba(255,255,255,.15)), color-stop(.25, transparent), color-stop(.5, transparent), color-stop(.5, rgba(255,255,255,.15)), color-stop(.75, rgba(255,255,255,.15)), color-stop(.75, transparent), to(transparent));
background-image: -webkit-linear-gradient(@angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
background-image: -moz-linear-gradient(@angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
background-image: -ms-linear-gradient(@angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
background-image: -o-linear-gradient(@angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
background-image: linear-gradient(@angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
}
// Масти

// Масти
// Пики
.card.spades {
.small-suit:after { .black(); }
.small-suit:before { content: "\2660"; .black(); }
.suit:after { content: "\2660"; .black(); }
}
// Трефы
.card.clubs {
.small-suit:after { .black(); }
.small-suit:before { content: "\2663"; .black(); }
.suit:after { content: "\2663"; .black(); }
}
// Бубны
.card.diamonds {
.small-suit:after { .red(); }
.small-suit:before { content: "\2666"; .red(); }
.suit:after { content: "\2666"; .red();}
}
// Червы
.card.hearts {
.small-suit:after { .red(); }
.small-suit:before { content: "\2665"; .red(); }
.suit:after { content: "\2665"; .red(); }
}

// Пики
.card.spades {
.small-suit:after { .black(); }
.small-suit:before { content: "\2660"; .black(); }
.suit:after { content: "\2660"; .black(); }
}
// Трефы
.card.clubs {
.small-suit:after { .black(); }
.small-suit:before { content: "\2663"; .black(); }
.suit:after { content: "\2663"; .black(); }
}
// Бубны
.card.diamonds {
.small-suit:after { .red(); }
.small-suit:before { content: "\2666"; .red(); }
.suit:after { content: "\2666"; .red();}
}
// Червы
.card.hearts {
.small-suit:after { .red(); }
.small-suit:before { content: "\2665"; .red(); }
.suit:after { content: "\2665"; .red(); }
}
}
Loading

0 comments on commit 319f668

Please sign in to comment.