Skip to content

Commit

Permalink
-
Browse files Browse the repository at this point in the history
  • Loading branch information
@olton
olton committed Apr 10, 2012
1 parent 80ebc70 commit b69802f
Show file tree
Hide file tree
Showing 4 changed files with 369 additions and 0 deletions.
Binary file added demo/img/Microsoft_Security_Essentials.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added demo/img/background.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added demo/img/webtech-code.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
369 changes: 369 additions & 0 deletions less/images.less
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,369 @@
/*
* Metro UI CSS v 1.0.1
* Copyright 2012 Sergey Pimenov
* Licensed under the MIT Lilcense
*/

.metro {

.metro-images {
list-style: none;
margin: 0;
padding: 0;

.metro-image {
display: block;
float: left;
width: @block-width;
height: @block-height;
overflow: hidden;
border: 4px transparent solid;
margin: @block-margin;
position: relative;
cursor: pointer;

.image {
width: @block-image-width;
height: @block-image-height;
display: table-cell;
text-align: center;
vertical-align: middle;
background: #6e6e6e;
z-index: 1;
overflow: hidden;
// border: 1px #fff dotted;

img {
max-width: @block-image-width;
max-height: @block-image-height;
display:inline-block !important;
vertical-align:middle !important;
}
}

&:hover {
border: 4px #57d3d9 solid;

.overlay.floatable {
-webkit-transform: translate(0, -30px);
-ms-transform: translate(0, -30px);
-o-transform: translate(0, -30px);
-moz-transform: translate(0, -30px);
transform: translate(0, -30px);

-webkit-transition: all @overlay-speed ease;
-moz-transition: all @overlay-speed ease;
-o-transition: all @overlay-speed ease;
transition: all @overlay-speed easet;
}

.overlay.double.floatable {
-webkit-transform: translate(0, -60px);
-ms-transform: translate(0, -60px);
-o-transform: translate(0, -60px);
-moz-transform: translate(0, -60px);
transform: translate(0, -60px);
}
}

.overlay {
z-index: 2;
position: absolute;
bottom: 0;
height: @overlay-height;
width: 100%;
background: #262626;
overflow: hidden;
text-align: center;
display: block;
float: none;

* {
margin: 0;
padding: 0;
}

.text {
color: @white;
font-size: 14px;
padding-top: 5px;
//text-align: center;
}
}

.overlay.double {
height: @overlay-height * 2;
}

.overlay.floatable {
bottom: -30px;
}

.overlay.double.floatable {
bottom: -60px;
}
}

.metro-image-overlay {
display: block;
float: left;
width: @large-block-width;
height: @large-block-height;
overflow: hidden;
border: 4px transparent solid;
margin: @block-margin;
position: relative;
cursor: pointer;

.image {
width: @large-block-image-width;
height: @large-block-image-height;
display: table-cell;
text-align: center;
vertical-align: middle;
background: #6e6e6e;
z-index: 1;
overflow: hidden;
// border: 1px #fff dotted;

img {
max-width: @large-block-image-width;
max-height: @large-block-image-height;
display:inline-block !important;
vertical-align:middle !important;
}
}

.overlay {
z-index: 2;
position: absolute;
bottom: 0;
height: @large-overlay-height;
width: 100%;
background: #262626;
overflow: hidden;
text-align: center;
display: block;
float: none;

* {
margin: 0;
padding: 0;
}

.text {
color: @white;
font-size: 14px;
text-align: left;
padding: 5px 20px;

small {
font-size: 10px;
color: #909090;
display: block;
margin: 5px 0;
}
}
}
&:hover {
border: 4px #57d3d9 solid;
}
}

.metro-image, .metro-image-overlay {
.image.stretch {
img {
width: 100% !important;
height: 100% !important;
}
}

.image.stretchH {
img {
height: 100% !important;
max-width: auto !important;
}
}

.image.stretchW {
img {
width: 100% !important;
max-height: auto !important;
}
}
}

.metro-image.no-hovered, .metro-image-overlay.no-hovered {
border: 4px transparent solid;
}

.metro-image.selected, .metro-image-overlay.selected, .metro-icon-text.selected, .metro-image-text.selected {
border: 4px #219297 solid;
b.check {
width: 0;
height: 0;
border-top: 30px solid #219297;
border-left: 30px solid transparent;
position: absolute;
display: block;
right: 0;

&:after {
position: absolute;
content: "\2713";
color: #fff;
top: -35px;
right: 0px;
}
}
}

.metro-icon-text.selected {
border: 0;
background: #219297;
b.check {
&:after {
right: 5px;
top: -30px;
}
}
}

.metro-icon-text-header {
text-decoration: none;
color: #fff;
margin: 20px 0;
text-decoration: none;

* {
color: #fff;
text-decoration: none;
}
}

.metro-icon-text.disabled {
* {
color: #696969 !important;
}
&:hover {
background: transparent;
}
}

.metro-icon-text {
display: block;
width: 250px;
height: 60px;
overflow: hidden;
margin: @block-margin;
position: relative;
cursor: pointer;
background: transparent;
padding-bottom: 10px;

.image {
margin: 10px 0 10px 10px;
background: #6e6e6e;
border: 4px #464646 solid;
width: 40px;
height: 40px;
float: left;

img {
width: 100%;
height: 100%;
}
}

.text {
margin: 15px 20px 10px 65px;
.title {
color: #fff;
font-size: 95%;
font-weight: bold;
}
.subtitle {
font-size: 75%;
color: #ccc;
}

}

&:hover {
background: #219297;
}
}

.metro-image-text {
display: block;
width: 480px;
height: 110px;
margin: @block-margin;
position: relative;
cursor: pointer;
background: transparent;
padding: 10px;
overflow: hidden;

&:hover {
background: #219297;

* {
color: #fff !important;
}
}

.image {
margin: 10px;
width: 110px;
height: 110px;
display: table-cell;
text-align: center;
vertical-align: middle;
background: #6e6e6e;
z-index: 1;
overflow: hidden;

img {
max-width: 110px;
//height: 100%;
display:inline-block !important;
vertical-align:middle !important;
}
}
.text {
margin-left: 120px;
margin-top: -115px;

.title {
font-size: 100%;
//font-weight: bolder;
color: @white;
}
.subtitle {
font-size: 75%;
color: #7b7b7b;
}
.description {
font-size: 90%;
color: @white;
}
}
}
.metro-image-text.selected {
border: 0;
background: #219297;
* {
color: #fff !important;
}
b.check {
&:after {
right: 5px;
top: -40px;
}
}
}
}

.metro-images.selectable {}
}

0 comments on commit b69802f

Please sign in to comment.