metro-ui-rails 0.1.3 → 0.1.6

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

@@ -0,0 +1,143 @@
+/*
+ * Metro UI CSS
+ * Copyright 2012 Sergey Pimenov
+ * Licensed under the MIT Lilcense
+ *
+ * ListView.less
+ * Version 1.0
+ */
+.listview {
+    .unstyled;
+
+    li {
+        margin-bottom: 10px;
+        border: 4px transparent solid;
+        padding: 10px;
+        width: 300px;
+        position: relative;
+        display: block;
+        cursor: pointer;
+
+        .icon {
+            width: 48px;
+            height: 48px;
+            float: left;
+
+            img {
+                width: 100%;
+                height: 100%;
+            }
+        }
+
+        .data {
+            margin-left: 55px;
+            h4 {
+                margin: 0;
+                padding: 0 0 2px 0;
+            }
+            p {
+                margin: 0;
+                font-size: 9pt;
+            }
+
+            .static-rating.small, .progress-bar {
+                margin-bottom: 3px;
+            }
+        }
+
+        &:hover {
+            outline: 3px #ccc solid;
+        }
+        &:active {
+            outline: 3px #3e3e3e solid;
+        }
+
+        .clearfix;
+    }
+
+    &.image {
+
+        li {
+            width: 380px;
+
+            .icon {
+                width: 100px;
+                height: 100px;
+                border: 1px #ccc solid;
+            }
+
+            .data {
+                margin-left: 110px;
+
+                h4 {
+                    margin-bottom: 4px;
+                }
+
+                p {
+                    line-height: 16px;
+                    font-size: 10pt;
+                    margin-bottom: 5px;
+                }
+
+                .static-rating.small, .progress-bar {
+                    margin-bottom: 10px;
+                }
+            }
+        }
+    }
+
+    &.iconic {
+        li {
+            .icon {
+                width: 32px;
+                height: 32px;
+                border: 1px #ccc solid;
+            }
+            .data {
+                margin-left: 40px;
+            }
+        }
+    }
+
+    &.fluid {
+        li {
+            float: left;
+            margin-right: 10px;
+        }
+    }
+
+
+    & > li.selected {
+        border: 4px @blue solid;
+
+        &:after {
+            width: 0;
+            height: 0;
+            border-top: 40px solid @blue;
+            border-left: 40px solid transparent;
+            position: absolute;
+            display: block;
+            right: 0;
+            content:".";
+            text-indent: -9999px;
+            top: 0;
+            z-index: 1000;
+        }
+
+        &:before {
+            position: absolute;
+            content: "\2714";
+            color: #fff;
+            right: 5px;
+            top: 0;
+            font-family: Tahoma;
+            z-index: 2000;
+        }
+    }
+
+    &.image > li.selected {
+        //padding-bottom: 20px;
+    }
+
+    .clearfix;
+}

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

@@ -1,5 +1,5 @@
 /*
- * Metro UI CSS v 0.1.1
+ * Metro UI CSS
  * Copyright 2012 Sergey Pimenov
  * Licensed under the MIT Lilcense
  *
@@ -14,16 +14,17 @@
     z-index: 10000;
 
     .navigation-bar-inner {
-        padding: 5px 20px;
+        padding: 5px 20px 5px 20px;
         color: #fff;
         font-size: 11pt;
         margin: auto;
         position: relative;
 
         & > .brand {
+            position: relative;
             float: left;
             margin-right: 20px;
-            margin-top: 0px;
+            margin-top: 3px;
 
             &:hover {
                 background-color: transparent;
@@ -35,6 +36,11 @@
                 float: left;
                 margin-right: 10px;
                 margin-top: 3px;
+
+                img {
+                    width: 100%;
+                    height: 100%;
+                }
             }
 
             .name {
@@ -42,21 +48,62 @@
                 font-size: 16pt;
                 color: #fff;
             }
+
+            &.sub-menu {
+                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);
+                }
+            }
         }
 
         & > ul {
             .unstyled;
             padding-top: 5px;
+            margin-top: 2px;
 
             & > li {
                 display: inline-block;
                 line-height: 32px;
                 position: relative;
 
+                &.sub-menu {
+                    padding-right: 20px;
+                    &:after {
+                        position: absolute;
+                        content: "\3009";
+                        display: inline-block;
+                        font-size: 10pt;
+                        font-family: Helvetica, sans-serif, sans;
+                        letter-spacing: 0px;
+                        top: 3px;
+                        right: 10px;
+                        .rotate(90deg);
+                        cursor: pointer;
+                    }
+
+                    &:hover {
+                        &:after {
+                            color: #1e1e1e;
+                        }
+                    }
+                }
+
                 & > a {
                     color: #fff;
                     #font > .navigation;
                     padding: 5px 10px;
+                    cursor: pointer;
                 }
 
                 &.active, &:hover {
@@ -70,8 +117,16 @@
                 & > .dropdown-menu {
                     border: 0;
                 }
+
+                &.no-hover {
+                    &:hover {
+                        background-color: transparent;
+                    }
+                }
             }
         }
+
+        .clearfix;
     }
 
     &.fixed-top {
@@ -97,7 +152,7 @@
     display: none;
     cursor: pointer;
     z-index: 10001;
-    background: url(metro/ui/row24.png) no-repeat;
+    background: image-url('metro-ui/row24.png') no-repeat;
     background-size: cover;
     height: 24px;
     width: 24px;
@@ -110,7 +165,7 @@
     background-color: #fff;
     .unstyled;
     top: 100%;
-    z-index: 1001;
+    z-index: 1101;
     float: left;
     border: 1px solid rgba(0, 0, 0, 0.2);
     box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
@@ -132,6 +187,7 @@
         padding: 3px 20px;
         white-space: nowrap;
         font-size: 14px;
+        cursor: pointer;
 
         &:hover {
             .bg-color-blue;
@@ -280,7 +336,7 @@
             a {
                 width: 24px;
                 height: 20px;
-                background: url(metro/ui/pull24-dark.png) no-repeat;
+                background: image-url('metro-ui/pull24-dark.png') no-repeat;
                 display: block;
                 text-decoration: none;
                 border: 0;

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

@@ -1,10 +1,12 @@
+/*
+ * Metro UI CSS
+ * Copyright 2012 Sergey Pimenov
+ * Licensed under the MIT Lilcense
+ *
+ * responsive.less
+ */
+
 /* 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 {
@@ -31,7 +33,7 @@
     .page.fixed-header {
         .page-header {
             position: relative !important;
-        //display: none !important;
+
             .page-header-content {
                 .user-login {
                     float: right;
@@ -108,65 +110,9 @@
                 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 {
@@ -192,4 +138,10 @@
     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

@@ -1,4 +1,20 @@
+/*
+ * Metro UI CSS
+ * Copyright 2012 Sergey Pimenov
+ * Licensed under the MIT Lilcense
+ *
+ * responsive.less
+ */
+
 /* Landscape phone to portrait tablet */
+@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;
@@ -71,4 +87,127 @@
             }
         }
     }
+
+    .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;
+            }
+        }
+    }
 }