metro-rails 0.1.0

data/vendor/assets/stylesheets/metro/metro.less

@@ -0,0 +1,43 @@
+/*
+ * Metro UI CSS v 1.0.1
+ * Copyright 2012 Sergey Pimenov
+ * Licensed under the MIT Lilcense
+ */
+
+// CSS Reset
+@import "reset.less";
+
+@import "variables.less";
+@import "typography.less";
+@import "routines.less";
+
+@import "tiles.less";
+@import "notices.less";
+@import "images.less";
+@import "buttons.less";
+@import "form.less";
+@import "themes.less";
+
+.metro {
+    background: transparent;
+
+    * {
+        color: @white;
+    }
+
+    hr {
+        color: #fff;
+        background-color: #fff;
+    }
+
+    .metro-replies {
+        .metro-reply {
+            background: @darken;
+
+            * {
+                color: @white;
+            }
+        }
+    }
+}
+ 

data/vendor/assets/stylesheets/metro/notices.less

@@ -0,0 +1,181 @@
+/*
+ * Metro UI CSS v 1.0.1
+ * Copyright 2012 Sergey Pimenov
+ * Licensed under the MIT Lilcense
+ */
+
+
+.metro {
+
+    .metro-replies {
+        list-style: none;
+        margin: 0;
+        padding: 0;
+
+        .metro-reply {
+            width: 300px;
+            height: auto;
+            padding: 10px;
+            font-family: @baseFontFamily;
+            margin-bottom: 10px;
+            margin-right: 10px;
+            position: relative;
+            //box-shadow: inset 0px 0px 3px #fff !important;
+            display: block;
+
+            .avatar {
+                width: 50px;
+                height: 50px;
+                overflow: hidden;
+                display: table-cell;
+                vertical-align:middle !important;
+                background: #6e6e6e;
+                box-shadow-bottom: inset 0px 0px 3px #fff;
+
+                img {
+                    width: 100%;
+                    height: 100%;
+                    display:inline-block !important;
+                    vertical-align:middle !important;
+                }
+            }
+
+            .reply {
+                margin-left: 60px;
+                margin-top: -50px;
+
+                .date {
+                    float: right;
+                    font-size: 55%;
+                    color: @white;
+                }
+                .author {
+                    color: @white;
+                }
+                .text {
+                    font-size: 12px;
+                    color: @white;
+                }
+            }
+
+            .sticker {
+                width: 0;
+                height: 0;
+                border-top: 10px solid @white;
+                position: absolute;
+                display: block;
+                z-index: 1000;
+            }
+
+            .sticker.sticker-color-black{border-top: 10px solid @black !important;}
+            .sticker.sticker-color-blue{border-top: 10px solid @white !important;}
+            .sticker.sticker-color-blueDark{border-top: 10px solid @blueDark !important;}
+            .sticker.sticker-color-green{border-top: 10px solid @green !important;}
+            .sticker.sticker-color-greenDark{border-top: 10px solid @greenDark !important;}
+            .sticker.sticker-color-red{border-top: 10px solid @red !important;}
+            .sticker.sticker-color-yellow{border-top: 10px solid @yellow !important;}
+            .sticker.sticker-color-orange{border-top: 10px solid @orange !important;}
+            .sticker.sticker-color-pink{border-top: 10px solid @pink !important;}
+            .sticker.sticker-color-purple{border-top: 10px solid @purple !important;}
+            .sticker.sticker-color-darken{border-top: 10px solid @darken !important;}
+
+            .sticker.sticker-left {
+                border-left: 20px solid transparent !important;
+                left: -20px;
+            }
+
+            .sticker.sticker-right {
+                border-right: 20px solid transparent !important;
+                right: -20px;
+            }
+        }
+    }
+
+
+    .metro-notices {
+        list-style: none;
+        margin: 0;
+        padding: 0;
+
+        .metro-notice {
+            width: 385px;
+            height: 90px;
+            display: block;
+            overflow: hidden;
+            position: relative;
+            //padding: 1px;
+            //box-shadow: inset 0px 0px 3px #fff;
+            margin-bottom: 10px;
+
+            .header {
+                margin-top: 15px;
+                margin-right: 25px;
+                margin-left: 10px;
+
+                color: #fff;
+                font-family: @baseFontFamily;
+                font-size: 13px;
+                font-weight: bolder;
+            }
+            .text {
+                margin-right: 45px;
+                margin-left: 10px;
+                color: #fff;
+                font-family: @baseFontFamily;
+                font-size: 12px;
+                font-weight: lighter;
+            }
+
+            .icon {
+                position: absolute;
+                right: 10px;
+                bottom: 5px;
+
+                img {
+                    width: 32px;
+                    height: 32px;
+                }
+            }
+
+            .image {
+                max-height: 48px;
+                width: 48px;
+                height: 48px;
+                margin: 20px 30px 20px 20px;
+                float: left;
+
+                img {
+                    width: 48px;
+                    height: 48px;
+                }
+            }
+
+            .close {
+                position: absolute;
+                top: 5px;
+                right: 10px;
+                cursor: pointer;
+                font-weight: bold;
+                text-decoration: none;
+                color: #fff !important;
+            }
+            .close::before {
+                content: "\00d7";
+                color: #fff !important;
+            }
+
+            .image-large {
+                width: 88px;
+                height: 88px;
+                margin: 1px 10px 1px 1px;
+                overflow: hidden;
+                float: left;
+
+                img {
+                    width: 88px;
+                    height: 88px;
+                }
+            }
+        }
+    }
+}

data/vendor/assets/stylesheets/metro/reset.less

@@ -0,0 +1,123 @@
+// Reset.less
+// Adapted from Normalize.css http://github.com/necolas/normalize.css
+// ------------------------------------------------------------------------
+
+// Display in IE6-9 and FF3
+// -------------------------
+
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+nav,
+section {
+    display: block;
+}
+
+// Display block in IE6-9 and FF3
+// -------------------------
+
+audio,
+canvas,
+video {
+    display: inline-block;
+    *display: inline;
+    *zoom: 1;
+}
+
+// Prevents modern browsers from displaying 'audio' without controls
+// -------------------------
+
+audio:not([controls]) {
+    display: none;
+}
+
+// Base settings
+// -------------------------
+
+html {
+    font-size: 100%;
+    -webkit-text-size-adjust: 100%;
+    -ms-text-size-adjust: 100%;
+}
+
+// Hover & Active
+a:hover,
+a:active {
+    outline: 0;
+}
+
+// Prevents sub and sup affecting line-height in all browsers
+// -------------------------
+
+sub,
+sup {
+    position: relative;
+    font-size: 75%;
+    line-height: 0;
+    vertical-align: baseline;
+}
+sup {
+    top: -0.5em;
+}
+sub {
+    bottom: -0.25em;
+}
+
+// Img border in a's and image quality
+// -------------------------
+
+img {
+    max-width: 100%;
+    height: auto;
+    border: 0;
+    -ms-interpolation-mode: bicubic;
+}
+
+// Forms
+// -------------------------
+
+// Font size in all browsers, margin changes, misc consistency
+button,
+input,
+select,
+textarea {
+    margin: 0;
+    font-size: 100%;
+    vertical-align: middle;
+}
+button,
+input {
+    *overflow: visible; // Inner spacing ie IE6/7
+    line-height: normal; // FF3/4 have !important on line-height in UA stylesheet
+}
+button::-moz-focus-inner,
+input::-moz-focus-inner { // Inner padding and border oddities in FF3/4
+    padding: 0;
+    border: 0;
+}
+button,
+input[type="button"],
+input[type="reset"],
+input[type="submit"] {
+    cursor: pointer; // Cursors on all buttons applied consistently
+    -webkit-appearance: button; // Style clickable inputs in iOS
+}
+input[type="search"] { // Appearance in Safari/Chrome
+    -webkit-appearance: textfield;
+    -webkit-box-sizing: content-box;
+    -moz-box-sizing: content-box;
+    box-sizing: content-box;
+}
+input[type="search"]::-webkit-search-decoration,
+input[type="search"]::-webkit-search-cancel-button {
+    -webkit-appearance: none; // Inner-padding issues in Chrome OSX, Safari 5
+}
+textarea {
+    overflow: auto; // Remove vertical scrollbar in IE6-9
+    vertical-align: top; // Readability and alignment cross-browser
+}

data/vendor/assets/stylesheets/metro/routines.less

@@ -0,0 +1,54 @@
+/*
+ * Metro UI CSS v 1.0.1
+ * Copyright 2012 Sergey Pimenov
+ * Licensed under the MIT Lilcense
+ */
+
+.place-left {float: left;}
+.place-right {float: right;}
+.pos-rel {position: relative;}
+.pos-abs {position: absolute;}
+.pos-fix {position: fixed;}
+.text-left {text-align: left;}
+.text-right {text-align: right;}
+.text-center {text-align: center;}
+.text-justify {text-align: justify;}
+.top-left {
+    position: absolute;
+    top: 0;
+    left: 0;
+}
+.top-right {
+    position: absolute;
+    top: 0;
+    right: 0;
+}
+.bottom-right {
+    position: absolute;
+    bottom: 0;
+    right: 0;
+}
+.bottom-left {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+}
+
+.clearfix:after {
+    content: ".";
+    display: block;
+    clear: both;
+    visibility: hidden;
+    line-height: 0;
+    height: 0;
+}
+.clearfix {
+    display: inline-block;
+    zoom: 1;
+}
+html[xmlns] .clearfix {
+    display: block;
+}
+* html .clearfix {
+    height: 1%;
+}

data/vendor/assets/stylesheets/metro/themes.less

@@ -0,0 +1,267 @@
+/*
+ * Metro UI CSS v 1.0.1
+ * Copyright 2012 Sergey Pimenov
+ * Licensed under the MIT Lilcense
+ */
+
+.metro.metro-theme-dark {
+    //this is default theme
+}
+
+.metro.metro-theme-light {
+    background: #fff;
+
+    * {
+        color: @darken;
+    }
+
+    a {
+        color: @blue;
+    }
+
+    h1, h2, h3, h4, h5, h6 {
+        color: #1e1e1e !important;
+    }
+
+    .tile:hover {
+        outline: 3px #cfcfcf solid !important;
+    }
+
+    .tile {
+        .tile-caption {
+        }
+
+        * {
+            color: @white;
+        }
+    }
+
+    .metro-section {
+        .next-section {
+            position: absolute;
+            top: 0px;
+            right: -40px;
+            background: url(/img/next-black.png);
+            height: 24px;
+            width: 24px;
+        }
+        .next-section.back {
+            background: url(/img/back-black.png);
+        }
+    }
+
+    .metro-replies {
+        .metro-reply {
+            background: @blue;
+
+            * {
+                color: @darken;
+            }
+        }
+    }
+
+    .metro-icon-text {
+        .text {
+            .title {
+                color: #000;
+            }
+            .subtitle {
+                color: @darken;
+            }
+        }
+        &:hover {
+            .text {
+                * {
+                    color: #fff;
+                }
+            }
+        }
+    }
+    .metro-icon-text.selected {
+        .text {
+            * {
+                color: #fff;
+            }
+        }
+    }
+    .metro-icon-text-header {
+        color: @darken;
+    }
+
+    .metro-icon-text-header a {
+        color: @darken;
+    }
+
+    .metro-image-text {
+        .text {
+            .title {
+                color: #000;
+            }
+            .subtitle {
+                color: @darken;
+            }
+            .description {
+                color: @darken;
+            }
+        }
+    }
+    .metro-icon-text.selected {
+        .text {
+            .title {
+                color: #fff;
+            }
+            .subtitle {
+                color: #fff;
+            }
+        }
+    }
+    .metro-icon-text-header {
+        color: @darken;
+    }
+
+    .metro-button, .metro-command-button {
+        background: #cccccc;
+        border-color: #cccccc;
+        color: #1d1d1d !important;
+        .title, .subtitle {
+            color: #1d1d1d !important;
+        }
+
+        &:hover {
+            background: #d8d8d8;
+            border-color: #d8d8d8;
+        }
+
+        &.default {
+            background: #008287;
+            border-color: #008287;
+            color: #fff !important;
+            .title, .subtitle {
+                color: #fff !important;
+            }
+        }
+
+        &.default:hover {
+            background: #219297;
+            border-color: #219297;
+            color: #fff !important;
+        }
+
+        &:active {
+            background: #000;
+            border-color: #000;
+            color: #fff !important;
+        }
+
+        &.disabled {
+            background: #eaeaea !important;
+            border-color: #eaeaea !important;
+            color: #9b9b9b !important;
+            .title, .subtitle {
+                color: #9d9d9d !important;
+            }
+        }
+        &:disabled {
+            background: #eaeaea !important;
+            border-color: #eaeaea !important;
+            color: #9b9b9b !important;
+            .title, .subtitle {
+                color: #9d9d9d !important;
+            }
+        }
+    }
+
+    .metro-command-button {
+        &:active {
+            background: #ccc;
+            border-color: #ccc;
+        }
+    }
+
+    .metro-radio {
+        input[type=radio] + span::before {
+            border: 2px #cfcfcf solid;
+            background: #fff;
+            height: 20px;
+            width: 20px;
+        }
+
+        input[type=radio]:disabled + span::before {
+            background: #e6e6e6;
+        }
+
+        input[type=radio]:disabled:checked + span::after {
+            background: #8a8a8a;
+        }
+
+        &:hover input[type=radio]:checked + span::before {
+            background: #ffffff;
+        }
+        &:hover input[type=radio]:disabled + span::before {
+            background: #e6e6e6;
+        }
+        &:hover input[type=radio]:disabled:checked + span::after {
+            background: #8a8a8a;
+        }
+        &:hover input[type=radio]:checked + span::after {
+            background: #212121;
+        }
+    }
+
+    .metro-check {
+        input[type=checkbox] + span::before {
+            border: 2px #cfcfcf solid;
+            background: #fff;
+            height: 20px;
+            width: 20px;
+        }
+
+        input[type=checkbox]:disabled + span::before {
+            background: #e6e6e6;
+        }
+
+        input[type=checkbox]:disabled:checked + span::after {
+            color: #8a8a8a;
+        }
+
+        &:hover input[type=checkbox] + span::before {
+            background: #fff;
+        }
+
+        &:hover input[type=checkbox]:disabled + span::before {
+            background: #e6e6e6;
+        }
+    }
+
+    .metro-switch {
+        input[type=checkbox] + span::before {
+            border-color: #fff;
+            outline-color: #a6a6a6;
+        }
+        input[type=checkbox]:not(:checked) + span::before {
+            background: #b5b5b5;
+        }
+        input[type=checkbox] + span::after {
+            background: #333;
+        }
+
+        &:hover input[type=checkbox]:checked + span::before {
+            background: #25bbc4;
+        }
+        &:hover input[type=checkbox]:not(:checked) + span::before {
+            background: #b5b5b5;
+        }
+
+        input[type=checkbox]:disabled + span::before,
+        &:hover input[type=checkbox]:disabled + span::before {
+            background: #e0e0e0;
+            outline-color: #cccccc;
+        }
+
+        input[type=checkbox]:disabled + span::after,
+        &:hover input[type=checkbox]:disabled + span::after {
+            background: #a6a6a6;
+        }
+    }
+
+}