metro-ui-rails 0.1.3

data/vendor/toolkit/metro-ui/grid.less

@@ -0,0 +1,112 @@
+/*
+ * Metro UI CSS v 0.1.1
+ * Copyright 2012 Sergey Pimenov
+ * Licensed under the MIT Lilcense
+ *
+ * Grid.less
+ *
+ */
+
+.oh,.ot,.tt{float:left;margin:0 2% 2% 0;width:48%}.ot{width:31%}.tt{width:65%}.cl{clear:both}
+
+.item-padding{
+    //margin-left: 0;
+    margin-right: @unit;
+    margin-bottom: @subunit;
+}
+.column-padding {
+    margin: 0 @unit/2;
+}
+.group-padding {
+    margin: 0 @unit*2;
+}
+
+@cellSize: 60px;
+@cellMargin: 20px;
+
+.span1  {width: 60px;}
+.span2  {width: 140px;}
+.span3  {width: 220px;}
+.span4  {width: 300px;}
+.span5  {width: 380px;}
+.span6  {width: 460px;}
+.span7  {width: 540px;}
+.span8  {width: 620px;}
+.span9  {width: 700px;}
+.span10 {width: 780px;}
+.span11 {width: 860px;}
+.span12 {width: 940px;}
+
+.offset1 {margin-left: 80px;}
+.offset2 {margin-left: 160px;}
+.offset3 {margin-left: 240px;}
+.offset4 {margin-left: 320px;}
+.offset5 {margin-left: 400px;}
+.offset6 {margin-left: 480px;}
+.offset7 {margin-left: 560px;}
+.offset8 {margin-left: 640px;}
+.offset9 {margin-left: 720px;}
+.offset10{margin-left: 800px;}
+.offset11{margin-left: 880px;}
+.offset12 {margin-left: 960px;}
+
+
+[class*="span"] {
+    float: none;
+    min-height: 1px;
+    .item-padding();
+    .clearfix();
+
+    &:last-child {
+        margin-right: 0;
+        //right: 0;
+    }
+
+    & > img {
+        max-width: 100%;
+        //width: 100%;
+        height: auto;
+        //max-height: 100%;
+    }
+}
+
+
+.grid {
+    margin: 0 0 20px;
+
+    &.no-margin {
+        margin: 0;
+    }
+    &.margin-row {
+        margin-bottom: @subunit;
+    }
+
+    & .grid {
+        margin-top: @subunit/2;
+        margin-bottom: @subunit/2;
+    }
+
+    .group {
+        margin-right: @unit * 4;
+        float: left;
+        width: auto;
+        height: auto;
+        min-height: 1px;
+    }
+
+    .row {
+        width: 100%;
+        .clearfix();
+        [class*="span"] {
+            float: left;
+        }
+    }
+
+    &.element-border {
+        [class*="span"] {
+            border: 1px #ccc dotted;
+        }
+    }
+
+    .clearfix();
+}

data/vendor/toolkit/metro-ui/hero.less

@@ -0,0 +1,18 @@
+/*
+ * Metro UI CSS v 0.1.1
+ * Copyright 2012 Sergey Pimenov
+ * Licensed under the MIT Lilcense
+ *
+ * Hero.less
+ *
+ */
+
+.hero-unit {
+    position: relative;
+    margin: 5px 0 20px;
+    padding: 20px;
+    background-color: #f1f1f1;
+    //border: 1px #ddd solid;
+    width: 100%;
+    .clearfix();
+}

data/vendor/toolkit/metro-ui/images.less

@@ -0,0 +1,121 @@
+/*
+ * Metro UI CSS v 0.1.1
+ * Copyright 2012 Sergey Pimenov
+ * Licensed under the MIT Lilcense
+ *
+ * images.less
+ *
+ */
+
+@back-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAP5SURBVGhD7ZdBSBRRGIB319VW8OBhAwMhgwIPQgpGHYoMDeoYeAkSDBKSEIw8BCUd7FahgZDQxZtBFw9BRkIGezA0FAo0EBIyCCrwILjq6vb9M/8uM7szu+7qaAvzweP9/3tv3vz//978703Ax8fHx2cvBLW2sbW11R4MBp+o6sjOzs7zioqKIVUPjZDWNjC+iqouV2FMNfWh4+hAKRFMJpNhtkxvKBS6iC6RF2oo9aboyrKWw2CNLfypvLx8KLi9vT2IE73aUWqMB4n+b/ZzVBtKCgKfCCYSiaTqJcmBO0DUVlnxacoK+/gn395x2uoo52iL6LBdc5AOvMHIZ+FwOIahCW1LQ18EW67Q9wC12WzNj+cOYNgKVQcZY8psyc/GxsYtVmYQZ1JZ0RWvHYiVlZVdw5A/qhtgYAPtjWwhSR6zODfPmDWz10THvEbMmc69dGAJA5pShskWweABym2XyE5hS3ckEllUPbC+vn6SLTfDeNdT35OTGGMTnC8SecP4zc3NZvQ52vtcjBdacHiOsX2qByorK5eoOkzNGU9WACNHMKZbZCJei/FfckUxE57p4aI4rGoAGz9QtZiaHU8cwPhjGPxL5Fwvd4OViuN0U2o7cdhKdnprdGbgxRaSNJkyvpOqIOMFno+w91+oGkCexCnbR57C1QEmGWIpLxDNE9bCRJfoG9FhWdAXU1Ei2apiwfDseYpxsDFngjJpdGTg9j8wjLF32YcSzWVrkXxOXzeTv9LhNmj/pqLM06hiwfCs3JIbVBVdzpMsHB0g8u9UdIUJHcfggPEi6jBV2oBi4DBLP49Nf1W04egAL5e/rpy4jcEx42ZLnWCM7QArFOvzOHNERRtuW+iR5G5Vs2Bp26jumZodSZsqyjzTKhYFH2/6eeu8VtwciOLxDIb+IJN8txZpo/89xfFA4rmzKso88yoWDNFf4fn0CiCfU9HGvp8DvHiNyB3lhXHkKPMvIBfzw3STeUZFiMfj9cgLRmsGjiuwFzC2ilWS/C+yRLBL5AIZTxkvkPnuqJiFJyexfHwYcAoHVkXnVB2g7aHRmZ950vRldT51oZNVlKyWxb6vgMDLohj9UlW5WvTjwFWKYy4X6JPD6iljz6SMpy1C9MfcjBe8vE5L5ujnMHysqhhUzfa6gZGnkSXLSSL4yrjP1BOMnZVxAv1hgjCG2G62OOOpAwLRGyUzdVFn/Ua6gfE1anzee5QnW8gKxnRizAKBMj7sXDA2wvlzXzIX6q4ugZ6vgBUMlL09wZb5yKrI9xCnVNNei95K3cZK5f0PtnKgDnhBCK8d79mlQoglS9/fS5DFEGmtByHGSuw6S/wnzJIcrqvs4+Pj41MMgcA/8Fr5zKgSl7AAAAAASUVORK5CYII%3D);
+@overlay-speed: .3s;
+
+.image-collection {
+    .pos-rel;
+    .unstyled;
+    .clearfix;
+
+    & > div, & > li {
+        width: 220px;
+        height: 121px;
+        overflow: hidden;
+        margin-right: 20px;
+        margin-bottom: 20px;
+        position: relative;
+        box-shadow: inset 0px 0px 1px #FFFFCC;
+        float: left;
+        background: #ccc @back-image 50% no-repeat;
+        display: table-cell;
+        vertical-align: middle !important;
+        text-align: center;
+
+        & > img {
+            width: 100%;
+            height : auto;
+            min-height: 100%;
+            max-width: 100%;
+        }
+
+        & > .overlay {
+            position: absolute;
+            width: 100%;
+            height: 55px;
+            overflow: hidden;
+            background-color: #1e1e1e;
+            color: #fff;
+            font-size: 8pt;
+            text-align: left;
+            line-height: 12px;
+            padding: 5px 10px;
+            opacity: .8;
+            bottom: -55px;
+        }
+
+        &:hover {
+            .overlay {
+                -webkit-transform: translate(0, -55px);
+                -ms-transform: translate(0, -55px);
+                -o-transform: translate(0, -55px);
+                -moz-transform: translate(0, -55px);
+                transform: translate(0, -55px);
+
+                -webkit-transition: all @overlay-speed ease;
+                -moz-transition: all @overlay-speed ease;
+                -o-transition: all @overlay-speed ease;
+                -ms-transition: all @overlay-speed ease;
+                transition: all @overlay-speed easet;
+            }
+        }
+    }
+
+    &.p16x9 {
+        & > div {
+            width: 220px;
+            height: 121px;
+        }
+    }
+    &.p4x3 {
+        & > div {
+            width: 220px;
+            height: 165px;
+        }
+    }
+}
+
+.image-container {
+    position: relative;
+    padding: 5px 5px 50px;
+    background-color: #1e1e1e;
+    .span3;
+    margin-right: 20px;
+    margin-bottom: 20px;
+
+    img {
+        width: 100%;
+        height: auto;
+    }
+
+    & > .overlay {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        height: 50px;
+        font-size: 8pt;
+        color: #fff;
+        line-height: 14px;
+        //text-align: center;
+        padding: 0 5px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+
+    &.light {
+        background-color: #ccc;
+
+        & > .overlay {
+            color: #1e1e1e;
+        }
+    }
+
+}

data/vendor/toolkit/metro-ui/layout.less

@@ -0,0 +1,273 @@
+/*
+ * Metro UI CSS v 0.1.1
+ * Copyright 2012 Sergey Pimenov
+ * Licensed under the MIT Lilcense
+ *
+ * Layout.less
+ */
+
+
+*, *:after, *:before {
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+}
+
+.column-gap (@gap) {
+    -moz-column-gap: @gap;
+    -webkit-column-gap: @gap;
+    column-gap: @gap;
+}
+
+.columns (@columns) {
+    -moz-columns: @columns;
+    -webkit-columns: @columns;
+    columns: @columns;
+
+    .column-gap(20px);
+}
+
+.one-column {
+    .columns(1);
+}
+.two-columns {
+    .columns(2);
+}
+.three-columns {
+    .columns(3);
+}
+.four-columns {
+    .columns(4);
+}
+.five-columns {
+    .columns(5);
+}
+
+.page {
+    position: relative;
+    height: 100%;
+    min-height: 100%;
+    width: 100%;
+    .clearfix();
+
+    .page-header {
+        width: 100%;
+        position: relative;
+        display: block;
+
+        .page-header-content {
+            height: @subunit * 20;
+            min-height: @unit * 5;
+            width: 100%;
+            position: relative;
+            display: block;
+
+            h1,h2,h3,h4,h5 {
+                position: absolute;
+                margin: 0;
+                padding: 0;
+                left: @unit;
+                bottom: 0;
+            }
+            h1 small {
+                font-size: 12pt;
+                margin-left: @subunit * 1;
+            }
+
+            h1.sub-menu {
+                cursor: pointer;
+                &:after {
+                    position: absolute;
+                    content: "\3009";
+                    display: inline-block;
+                    font-size: 10pt;
+                    bottom: -5px;
+                    right: -15px;
+                    .rotate(90deg);
+                }
+            }
+
+            & > .page-back {
+                position: absolute;
+                top: 34px;
+                left: 30px;
+            }
+
+            .user-login {
+                float: right;
+                margin: 55px 44px 0 0;
+                cursor: pointer;
+
+                .avatar {
+                    float: right;
+                    border: 1px #ccc solid;
+                    width: 40px;
+                    height: 40px;
+                    img {
+                        width: 100%;
+                        height: 100%;
+                    }
+                }
+                .name {
+                    float: left;
+                    margin: 0px 10px;
+                    text-align: right;
+
+                    .first-name {
+                        font-family: "Open Sans", sans-serif, sans;
+                        font-size: 18pt;
+                        display: block;
+                        margin: 0;
+                    }
+                    .last-name {
+                        font-family: "Open Sans", sans-serif, sans;
+                        font-size: 10pt;
+                        display: block;
+                        margin: 0;
+                    }
+                }
+            }
+        }
+
+    }
+
+    .page-region {
+        display: block;
+
+        .page-region-content {
+            padding-top: @subunit * 2;
+            padding-left: 0;
+            padding-right: 0;
+            padding-bottom: @unit;
+            display: block;
+            height: 100%;
+            position: relative;
+        }
+    }
+
+    &.secondary {
+        .page-header {
+            .page-header-content {
+                h1,h2,h3,h4,h5 {
+                    position: absolute;
+                    margin: 0;
+                    padding: 0;
+                    left: @unit * 6;
+                    bottom: 0;
+                }
+            }
+        }
+
+        .page-region {
+            .page-region-content {
+                padding-left: @unit * 6;
+            }
+        }
+    }
+
+    &.snapped {
+        width: 33.33%;
+        height: 100%;
+        float: left;
+        border-right: 1px #ccc solid;
+    }
+    &.fill{
+        width: 66.66%;
+        height: 100%;
+        float: right;
+        border-left: 1px #ccc solid;
+    }
+
+
+    &.snapped {
+        .page {
+            .page-header {
+                .page-header-content {
+                    h1,h2,h3,h4,h5 {
+                        margin-left: @unit;
+                    }
+                }
+            }
+
+            .page-region {
+                .page-region-content {
+                    padding-left: @unit;
+                }
+            }
+        }
+    }
+}
+
+.page.fixed-header {
+    .page-header {
+        position: fixed;
+        top: 0;
+        left: 0;
+        right: 0;
+    }
+
+    .page-region {
+        padding-top: 140px;
+    }
+}
+
+.app-bar {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    min-height: 100px;
+
+    .bg-color-darken();
+}
+
+.charms {
+    position: absolute;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    height: 100%;
+    min-width: 200px;
+    width: auto;
+
+    &.place-left {
+        left: 0;
+        right: auto;
+    }
+
+    &.search {}
+    &.sharing{}
+    &.appsets{}
+    &.apphelp{}
+}
+
+.message-dialog {
+    position: absolute;
+    left: 0;
+    right: 0;
+    height: auto;
+    min-height: 100px;
+    top: 30%;
+    padding: 10px 10px 0;
+}
+.flyouts{}
+
+.error-bar, .warning-bar, .info-bar {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    padding: 10px 20px;
+    color: #fff;
+    min-height: 100px;
+}
+.error-bar {
+    .bg-color-red();
+}
+.warning-bar {
+    .bg-color-yellow();
+}
+.info-bar {
+    .bg-color-blue();
+}
+