macbury-metro-ui-rails 0.15.9

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

@@ -0,0 +1,249 @@
+/*
+ * Metro UI CSS
+ * Copyright 2012 Sergey Pimenov
+ * Licensed under the MIT Lilcense
+ *
+ * Menus.less
+ * dropdown-menu, nav-bar
+ */
+
+.dropdown-menu {
+    position: absolute;
+    background-color: #fff;
+    .unstyled;
+    top: 100%;
+    z-index: 11010;
+    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;
+        cursor: pointer;
+
+        &: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;
+    }
+}
+
+
+.nav-bar {
+    background-color: @blue;
+    position: relative;
+    top: 0;
+    width: 100%;
+    display: block;
+    margin: 0;
+    padding: 0;
+
+    .nav-bar-inner {
+        .element, a .element {
+            position: relative;
+            margin: 5px;
+            line-height: 20px;
+            height: 20px;
+            float: left;
+            display: inline-block;
+            padding: 0;
+            font-weight: normal;
+            font-size: 10pt;
+            color: #fff;
+
+            &.brand {
+                font-size: 1.15em;
+            }
+
+            img {
+                height: 100%;
+            }
+
+            a {
+                line-height: 20px;
+                height: 20px;
+                font-size: 10pt;
+                //color: #fff;
+            }
+
+            [class^="icon-"]:before, [class*=" icon-"]:before {
+                display: inline-block;
+                margin: 0;
+                padding: 0;
+                display: block;
+                float: left;
+                margin: 0 5px;
+            }
+        }
+
+        & > ul.menu {
+            .unstyled;
+            padding: 0;
+            margin: 0;
+
+            & > li {
+                display: block;
+                float: left;
+                margin-right: 10px;
+                position: relative;
+                padding: 5px;
+
+                a {
+                    display: block;
+                    float: left;
+                    color: @white;
+                    font-size: 10pt;
+                }
+
+                ul.dropdown-menu {
+                //margin-top: 5px;
+                    border: 0;
+                    li {
+
+                        a {
+                            display: block;
+                            float: none;
+                            color: #1e1e1e;
+                            padding: 3px 20px;
+                        }
+                    }
+
+                }
+
+            }
+
+            &.open {
+                display: block !important;
+            }
+        }
+
+        & > .divider, & > ul.menu > li.divider {
+            .element;
+            width: 1px;
+            border-right: 1px darken(@white, 10%) solid;
+            box-shadow: 0 0 10px rgba(0,0,0,0.5);
+        }
+
+        [data-role=dropdown] {
+            margin-right: 20px !important;
+            & > a {
+                cursor: pointer;
+                &:before {
+                    position: absolute;
+                    content: "\203A";
+                    display: block;
+                    font-size: 1.4em;
+                    left: 100%;
+                    margin-left: 3px;
+                    top: 8px;
+                    .rotate(90deg);
+                }
+            }
+        }
+
+        .pull-menu {
+            display: none;
+            float: right;
+            color: #fff;
+            cursor: pointer;
+            font: 1.8em sans-serif;
+            margin-right: 0px;
+            position: relative;
+            height: 20px;
+            width: 20px;
+            line-height: 20px;
+
+            &:before {
+                content: "\2261";
+                position: absolute;
+                font-size: 20pt;
+                top: 5px;
+                left: 0;
+            }
+        }
+
+        .clearfix;
+    }
+
+    &.bg-color-blue .nav-bar-inner .menu li a:hover{background-color: @blue !important;}
+    &.bg-color-blueLight  .nav-bar-inner .menu li a:hover{background-color: @blueLight !important;}
+    &.bg-color-blueDark  .nav-bar-inner .menu li a:hover{background-color: @blueDark !important;}
+    &.bg-color-green  .nav-bar-inner .menu li a:hover{background-color: @green !important;}
+    &.bg-color-greenLight .nav-bar-inner .menu li a:hover {background-color: @greenLight !important;}
+    &.bg-color-greenDark .nav-bar-inner .menu li a:hover {background-color: @greenDark !important;}
+    &.bg-color-red .nav-bar-inner .menu li a:hover {background-color: @red !important;}
+    &.bg-color-yellow .nav-bar-inner .menu li a:hover {background-color: @yellow !important;}
+    &.bg-color-orange .nav-bar-inner .menu li a:hover {background-color: @orange !important;}
+    &.bg-color-orangeDark .nav-bar-inner .menu li a:hover {background-color: @orangeDark !important;}
+    &.bg-color-pink .nav-bar-inner .menu li a:hover {background-color: @pink !important;}
+    &.bg-color-pinkDark .nav-bar-inner .menu li a:hover {background-color: @pinkDark !important;}
+    &.bg-color-purple .nav-bar-inner .menu li a:hover {background-color: @purple !important;}
+    &.bg-color-darken .nav-bar-inner .menu li a:hover {background-color: @darken !important;}
+    &.bg-color-lighten .nav-bar-inner .menu li a:hover {background-color: @lighten !important;}
+    &.bg-color-white .nav-bar-inner .menu li:hover {background-color: darken(@white, 10%) !important;}
+    &.bg-color-white .nav-bar-inner .menu li a:hover {background-color: darken(@white, 10%) !important;}
+    &.bg-color-white .nav-bar-inner .menu li a {color: @darken !important;}
+    &.bg-color-white .nav-bar-inner .element {color: @darken !important;}
+    &.bg-color-white .nav-bar-inner .pull-menu {color: @darken !important;}
+    &.bg-color-grayDark .nav-bar-inner .menu li a:hover {background-color: @grayDark !important;}
+
+    .clearfix;
+}
+
+.nav-bar {
+    &.fixed-top, &.fixed-bottom {
+        position: fixed;
+        z-index: 10000;
+        left: 0;
+    }
+
+    &.fixed-top {
+        top: 0;
+        bottom: auto;
+    }
+    &.fixed-bottom {
+        bottom: 0;
+        top: auto;
+    }
+}
+
+.nav-bar {
+    .nav-bar-inner {
+        &.container {
+            width: 940px;
+            margin: auto;
+        }
+    }
+}
+

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

@@ -0,0 +1,147 @@
+/*
+ * Metro UI CSS
+ * Copyright 2012 Sergey Pimenov
+ * Licensed under the MIT Lilcense
+ *
+ * responsive.less
+ */
+
+/* Landscape phones and down */
+
+@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;
+
+            .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;
+            }
+
+        }
+    }
+
+    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;}
+
+    .tile-group {
+        max-width: 400px;
+        float: none;
+    }
+
+}

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

@@ -0,0 +1,241 @@
+/*
+ * Metro UI CSS
+ * Copyright 2012 Sergey Pimenov
+ * Licensed under the MIT Lilcense
+ *
+ * responsive.less
+ */
+
+/* Landscape phone to portrait tablet */
+@import "routines.less";
+
+@tileSmall:             120px;
+@tileLarge:             250px;
+@tileMargin:            5px;
+@tileDouble:            @tileSmall * 2 + @tileMargin * 2;
+@tileTriple:            @tileSmall * 3 + @tileMargin * 4;
+@tileQuadro:            @tileSmall * 4 + @tileMargin * 6;
+
+
+@media (max-width: 767px) {
+    body {
+        padding-right: 10px;
+        padding-left: 10px !important; //TODO найти и уничтожить
+    }
+
+    [class*="span"], .hero-unit {
+        float: none;
+        display: block;
+        width: 100%;
+        margin-left: 0;
+        margin-right: 0;
+    }
+
+    [class*="offset"], .hero-unit {
+        margin-left: 0;
+    }
+
+    table {
+        thead {
+            tr {
+                th {
+                    font-size: 9pt;
+                }
+            }
+        }
+
+        tbody {
+            tr {
+                td {
+                    font-size: 10pt;
+                }
+            }
+        }
+    }
+
+    h1 {font-size: 30pt;}
+    h2 {font-size: 16pt;}
+
+    .nav-bar {
+        .nav-bar-inner {
+            .pull-menu {
+                display: inline-block;
+            }
+
+            & > .divider {
+                display: none;
+            }
+
+            .element {
+                float: none;
+            }
+
+            & > ul.menu {
+                display: none;
+                float: none;
+                margin: 5px;
+
+                & > li {
+                    display: block;
+                    float: none;
+                    width: 100%;
+                    margin-left: 0;
+                    padding-left: 5px;
+                    //border-bottom: 1px #ccc solid;
+
+                    a {
+                        display: block;
+                        float: none;
+                    }
+
+                    .dropdown-menu {
+                        position: relative;
+                        width: 100%;
+                        border: 0;
+                    }
+                }
+            }
+
+            [data-role=dropdown] {
+                margin-right: 20px !important;
+                & > a {
+                    cursor: pointer;
+                    &:before {
+                        position: absolute;
+                        content: "\203A";
+                        display: block;
+                        font-size: 1.4em;
+                        left: 100%;
+                        margin-left: -10px;
+                        top: 8px;
+                        .rotate(90deg);
+                    }
+                }
+            }
+
+        }
+    }
+
+    .page-control .menu-pull {
+        background-image: url("data:image/png;base64,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");
+        display: block;
+    }
+    .page-control .menu-pull-bar {
+        display: block;
+        width: 100%;
+        height: 44px;
+        border: 1px solid #CCC;
+        border-bottom: 0px;
+        background-color: rgba(217, 217, 217, 0.16);
+        padding: 10px 0px 10px 20px;
+        color: #2D89EF;
+    }
+    .page-control ul {
+        width: 100%;
+        height: auto;
+        margin: 0px;
+        position: relative;
+        padding: 0px 20px 10px 20px;
+        border: 1px solid #CCC;
+        border-bottom: 0px;
+        border-top: 0px;
+        display: none;
+    }
+    .page-control ul li {
+        display: block;
+        float: left;
+        width: 100%;
+        padding-left: 0;
+        line-height: 32px;
+        position: relative;
+        height: auto;
+    }
+    .page-control ul li:first-child {
+        margin-left: 0px;
+    }
+    .page-control ul li.active {
+        border: 0px;
+        background-color: rgba(0, 0, 0, 0);
+    }
+    .page-control ul li.active a {
+        color: #1e1e1e;
+    }
+    .page-control ul li a {
+        width: 100%;
+        text-align: left;
+    }
+    .page-control ul li a:hover {
+        background: #464646;
+        color: #fff;
+    }
+    .page-control .frames {
+        margin-top: 0px;
+    }
+
+    .tile {
+        width: @tileSmall;
+        height: @tileSmall;
+
+        &.double {
+            width: @tileDouble;
+        }
+        &.triple {
+            width: @tileTriple;
+        }
+        &.quadro {
+            width: @tileQuadro;
+        }
+        &.double-vertical {
+            height: @tileDouble;
+        }
+        &.triple-vertical {
+            height: @tileTriple;
+        }
+        &.quadro-vertical {
+            height: @tileQuadro;
+        }
+
+    }
+
+    .tile {
+        .tile-content {
+            padding: 5px 10px;
+        }
+
+        &.icon {
+            & > .tile-content {
+                img {
+                    width: 48px;
+                    height: 48px;
+                    margin-left: -24px;
+                    margin-top: -24px;
+                }
+            }
+        }
+
+        .brand, .tile-status {
+            & > .badge {
+                width: 26px;
+                height: 28px;
+                right: 0;
+                font-size: 9pt;
+            }
+
+            & > .name {
+                margin-left: 10px;
+            }
+
+            & > .icon {
+                width: 24px;
+                height: 24px;
+                margin: 5px 10px;
+            }
+
+            & > .text {
+                left: 40px;
+                right: 40px;
+                font-size: 8pt;
+            }
+        }
+    }
+}