metro-ui-rails 0.1.3

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

@@ -0,0 +1,320 @@
+/*
+ * Metro UI CSS v 0.1.1
+ * Copyright 2012 Sergey Pimenov
+ * Licensed under the MIT Lilcense
+ *
+ * Menus.less
+ *
+ */
+
+.navigation-bar {
+    width: 100%;
+    min-height: 40px;
+    background: #464646;
+    z-index: 10000;
+
+    .navigation-bar-inner {
+        padding: 5px 20px;
+        color: #fff;
+        font-size: 11pt;
+        margin: auto;
+        position: relative;
+
+        & > .brand {
+            float: left;
+            margin-right: 20px;
+            margin-top: 0px;
+
+            &:hover {
+                background-color: transparent;
+            }
+
+            .icon {
+                width: 24px;
+                height: 24px;
+                float: left;
+                margin-right: 10px;
+                margin-top: 3px;
+            }
+
+            .name {
+                #font > .subheader;
+                font-size: 16pt;
+                color: #fff;
+            }
+        }
+
+        & > ul {
+            .unstyled;
+            padding-top: 5px;
+
+            & > li {
+                display: inline-block;
+                line-height: 32px;
+                position: relative;
+
+                & > a {
+                    color: #fff;
+                    #font > .navigation;
+                    padding: 5px 10px;
+                }
+
+                &.active, &:hover {
+                    background-color: #fff;
+
+                    a {
+                        color: #1e1e1e;
+                    }
+                }
+
+                & > .dropdown-menu {
+                    border: 0;
+                }
+            }
+        }
+    }
+
+    &.fixed-top {
+        position: fixed;
+        left: 0;
+        right: 0;
+        top: 0;
+    }
+
+    &.fixed-bottom {
+        position: fixed;
+        left: 0;
+        right: 0;
+        bottom: 0;
+    }
+
+}
+
+.menu-pull {
+    position: absolute;
+    right: 10px;
+    top: 10px;
+    display: none;
+    cursor: pointer;
+    z-index: 10001;
+    background: url(metro/ui/row24.png) no-repeat;
+    background-size: cover;
+    height: 24px;
+    width: 24px;
+    margin: 0;
+    padding: 0;
+}
+
+.dropdown-menu {
+    position: absolute;
+    background-color: #fff;
+    .unstyled;
+    top: 100%;
+    z-index: 1001;
+    float: left;
+    border: 1px solid rgba(0, 0, 0, 0.2);
+    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
+    min-width: 160px;
+    padding-bottom: 5px;
+    padding-top: 5px;
+    display: none;
+
+    &.place-right {
+        right: 0;
+        left: auto;
+    }
+
+    a {
+        #font > .navigation;
+        #state > .navigation;
+        display: block;
+        width: 100%;
+        padding: 3px 20px;
+        white-space: nowrap;
+        font-size: 14px;
+
+        &:hover {
+            .bg-color-blue;
+            .fg-color-white;
+        }
+    }
+
+    li {
+        display: list-item;
+        line-height: 20px;
+    }
+
+    .divider {
+        height: 1px;
+        margin: 9px 1px;
+        overflow: hidden;
+        background-color: #e5e5e5;
+    }
+
+    &.open {
+        display: block !important;
+    }
+}
+
+
+.popup-menu {
+    .unstyled();
+    position: absolute;
+    top: 100%;
+    left: -1px;
+    z-index: 1;
+    background-color: #fff;
+    display: none;
+    border: 1px #bababa solid;
+
+    li {
+        float: none;
+        display: block;
+        border:1px transparent solid !important;
+        min-width: 150px;
+
+        a {
+            display: block;
+            white-space: nowrap;
+            float: none;
+            height: auto;
+            #font > .tertiary;
+            color: #1e1e1e;
+            padding: 5px  10px;
+
+            &:hover {
+                color: #fff;
+            }
+        }
+
+        &:hover {
+            background-color: #008287;
+        }
+
+        &.divider {
+            height: 1px !important;
+            line-height: 1px !important;
+            background-color: transparent !important;
+            border-top: 1px #bababa solid !important;
+
+            &:hover {
+                background-color: transparent !important;
+            }
+        }
+
+        &.sub-menu {
+            &:after {
+                position: absolute;
+                content: "\3009";
+                display: inline-block;
+                font-size: 10pt;
+                top: 5px;
+                right: 10px;
+                .rotate(0deg);
+            }
+        }
+    }
+}
+
+.horizontal-menu {
+    background-color: #f1f1f1;
+    padding: 0px;
+
+    & > ul {
+        .unstyled();
+
+        li {
+            float: left;
+            position: relative;
+            border: 1px transparent solid;
+            display: block;
+
+            &:hover {
+                border: 1px #bababa solid;
+                background-color: #fff;
+            }
+
+            &.sub-menu {
+                padding-right: 20px;
+                &:after {
+                    position: absolute;
+                    content: "\3009";
+                    display: inline-block;
+                    font-size: 10pt;
+                    font-family: sans;
+                    top: 7px;
+                    right: 10px;
+                    .rotate(90deg);
+                }
+            }
+
+            a {
+                float: left;
+                padding: 5px  10px;
+                display: block;
+                z-index: 999;
+                #font > .navigation;
+                #state > .navigation;
+            }
+
+            ul {
+                .popup-menu;
+            }
+
+            &:hover > ul {
+                display: block;
+            }
+
+            ul li ul {
+                position: absolute;
+                left: 100%;
+                top: -2px;
+            }
+        }
+
+        li.pull {
+            display: none;
+            float: right;
+            margin-right: 5px;
+            margin-top: 5px;
+            a {
+                width: 24px;
+                height: 20px;
+                background: url(metro/ui/pull24-dark.png) no-repeat;
+                display: block;
+                text-decoration: none;
+                border: 0;
+                cursor: pointer;
+            }
+
+            &:hover {
+                border: 1px transparent solid;
+            }
+        }
+    }
+
+    .clearfix();
+}
+
+.page {
+    .page-header {
+        .page-header-content {
+            h1[data-role=dropdown] {
+                cursor: pointer;
+                .dropdown-menu {
+                    margin-top: -10px;
+                }
+                &:after {
+                    position: absolute;
+                    content: "\3009";
+                    display: inline-block;
+                    font-size: 10pt;
+                    left: 100%;
+                    top: 20px;
+                    margin-left: 5px;
+                    .rotate(90deg);
+                }
+            }
+        }
+    }
+}

data/vendor/toolkit/metro-ui/modern-responsive-max480.less

@@ -0,0 +1,195 @@
+/* Landscape phones and down */
+@tileSmall:             120px;
+@tileLarge:             250px;
+@tileMargin:            5px;
+@tileDouble:            @tileSmall * 2 + @tileMargin * 2;
+@tileTriple:            @tileSmall * 3 + @tileMargin * 4;
+@tileQuadro:            @tileSmall * 4 + @tileMargin * 6;
+
+@media (max-width: 480px) {
+    .page.secondary {
+        .page-back {
+            width: 24px;
+            height: 24px;
+            left: 0px !important;
+        }
+
+        .page-header .page-header-content {
+            height: 60px;
+            min-height: 50px;
+
+            h1 {
+                left: 40px;
+
+            }
+        }
+        .page-region .page-region-content {
+            padding-left: 0 ;
+        }
+    }
+
+    .page.fixed-header {
+        .page-header {
+            position: relative !important;
+        //display: none !important;
+            .page-header-content {
+                .user-login {
+                    float: right;
+                    margin: 35px 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: "Segoe UI Light", "Open Sans", sans-serif, sans;
+                            font-size: 14pt;
+                            display: block;
+                            margin: 0;
+                        }
+                        .last-name {
+                            font-family: "Open Sans", sans-serif, sans;
+                            font-size: 8pt;
+                            display: block;
+                            margin: 0;
+                        }
+                    }
+                }
+
+                h1 {
+                    left: 0;
+                }
+            }
+        }
+        .page-region {
+            padding-top: 20px;
+        }
+    }
+    .horizontal-menu {
+        height: auto;
+
+        & > ul {
+            width: 100%;
+            display: block;
+            height: auto;
+
+            & > li {
+                width: 100%;
+                float: none;
+                display: block;
+                position: relative;
+                border-bottom: 1px #1e1e1e solid;
+
+                &:last-child {
+                    border-bottom: 1px transparent solid;
+                }
+
+                a {
+                    width: 100%;
+                    float: none;
+                }
+            }
+
+
+            li ul {
+                position: relative;
+                width: 100%;
+                border: 0;
+                left: 10px;
+            //top: -2px;
+            }
+
+        }
+    }
+
+
+    .tile {
+        width: @tileSmall;
+        height: @tileSmall;
+
+        &.double {
+            width: @tileDouble;
+
+            & .tile-content {
+                width: @tileDouble;
+            }
+        }
+        &.triple {
+            width: @tileTriple;
+
+            & .tile-content {
+                width: @tileTriple;
+            }
+        }
+        &.quadro {
+            width: @tileQuadro;
+
+            & .tile-content {
+                width: @tileQuadro;
+            }
+        }
+        &.double-vertical {
+            height: @tileDouble;
+
+            & .tile-content {
+                height: @tileDouble - 40;
+            }
+        }
+        &.triple-vertical {
+            height: @tileTriple;
+
+            & .tile-content {
+                height: @tileTriple - 40;
+            }
+        }
+        &.quadro-vertical {
+            height: @tileQuadro;
+
+            & .tile-content {
+                height: @tileQuadro - 40;
+            }
+        }
+
+    }
+
+    .tile-group {
+        max-width: 400px;
+        float: none;
+    }
+
+    table {
+        thead {
+            tr {
+                th {
+                    font-size: 8pt;
+                }
+            }
+        }
+
+        tbody {
+            tr {
+                td {
+                    font-size: 9pt;
+                    padding: 2px 5px;
+                }
+            }
+        }
+    }
+
+    h1 {font-size: 26pt; line-height: 18px;}
+    h2 {font-size: 16pt; line-height: 16px;}
+    h3 {font-size: 13pt; line-height: 16px;}
+    h3 {font-size: 13pt; line-height: 14px;}
+}