active_administration 0.0.2 → 0.0.3

data/app/assets/stylesheets/active_administration/metro-bootstrap-responsive.less

@@ -0,0 +1,300 @@
+/*
+ * Devices
+ * min 1200
+ * min 1024
+ * max 1024
+ * max 768
+ * max 640
+ * max 480
+ * max 320
+ */
+
+@import "variables";
+@import "funcs";
+
+#responsive-utils {
+    .hide-element {
+        display: none !important;
+        visibility: hidden !important;
+    }
+
+    .show-element {
+        display: block !important;
+        visibility: visible !important;
+    }
+
+    .full-size {
+        float: none !important;
+        display: block !important;
+        width: 100% !important;
+        margin-left: 0 !important;
+        margin-right: 0 !important;
+    }
+
+    .half-size {
+        width: 50% !important;
+    }
+
+    .container-desktop {width: @containerDesktopSize !important;}
+    .container-phone {width: @containerPhoneSize !important;}
+    .container-phone2 {width: @containerPhoneSize2 !important;}
+    .container-phone3 {width: @containerPhoneSize3 !important;}
+    .container-phone4 {width: @containerPhoneSize4 !important;}
+    .container-tablet {width: @containerTabletSize !important;}
+    .container-large {width: @containerLargeSize !important;}
+
+    .container-phone {
+        padding: 0 10px;
+    }
+}
+
+.no-phone, .no-tablet, .no-desktop, .no-large {}
+.on-phone, .on-tablet, .on-desktop, .on-large {}
+
+
+/* Desktop */
+@media screen and (min-width: 800px) {
+    .no-desktop {
+        #responsive-utils > .hide-element;
+    }
+}
+
+@media screen and (min-width: 1024px) {
+    .no-desktop {
+        #responsive-utils > .hide-element;
+    }
+    .on-desktop {
+        #responsive-utils > .show-element;
+    }
+    .container {
+        #responsive-utils > .container-desktop;
+    }
+}
+
+/* Large desktop */
+@media screen and (min-width: 1200px) {
+    html {font-size: 70%;}
+    .no-large {
+        #responsive-utils > .hide-element;
+    }
+    .on-large {
+        #responsive-utils > .show-element;
+    }
+    .container {
+        #responsive-utils > .container-large;
+    }
+}
+
+/* tablet landscape*/
+@media only screen and (max-width: 1024px) {
+    .no-tablet-landscape, .no-tablet {
+        #responsive-utils > .hide-element;
+    }
+    .on-tablet {
+        #responsive-utils > .show-element;
+    }
+    .container {
+        #responsive-utils > .container-desktop;
+    }
+}
+
+/* tablet portrait */
+@media only screen and (max-width: 800px) {
+    html {font-size: 60%;}
+    .no-tablet-portrait, .no-tablet {
+        #responsive-utils > .hide-element;
+    }
+    .on-tablet {
+        #responsive-utils > .show-element;
+    }
+    .container {
+        #responsive-utils > .container-tablet;
+    }
+
+    // Grid
+    @gridSize:              @containerTabletSize;
+    @gridColumnSize:        (@gridSize - 20) / 2;
+    @gridGutterSize:        @unitSize;
+
+    .grid:not(.fluid) > .row {
+        margin: 0;
+        & > [class*="span"] {
+            width: @gridColumnSize !important;
+            margin-left: 0 !important;
+            margin-bottom: @gridGutterSize;
+            &:nth-child(even) {
+                margin-left: @gridGutterSize !important;
+            }
+        }
+        .span12, .span7, .span8, .span9, .span10, .span11 {
+            width: @gridSize !important;
+            &:nth-child(even) {
+                margin-left: 0 !important;
+            }
+        }
+
+        .row {
+            margin: 0;
+            [class*="span"] {
+                width: @gridColumnSize !important;
+                margin-left: 0 !important;
+                margin-bottom: @gridGutterSize;
+                &:nth-child(even) {
+                    margin-left: @gridGutterSize !important;
+                }
+            }
+            .span12, .span7, .span8, .span9, .span10, .span11 {
+                width: @gridSize !important;
+                &:nth-child(even) {
+                    margin-left: 0 !important;
+                }
+            }
+        }
+    }
+
+    .navigation-bar, .navbar {
+        .pull-menu {
+            display: block !important;
+        }
+
+        position: relative !important;
+
+        .element {
+            //display: inline-block !important;
+            float: none !important;
+            //width: 90%;
+        }
+
+        .element-divider {
+            display: none !important;
+        }
+
+        .element-menu {
+            position: relative;
+            float: none;
+            display: none;
+            width: 100% !important;
+            background-color: inherit;
+            z-index: @zindexDropdown;
+
+            li {
+                display: block !important;
+                float: none !important;
+                width: 100%;
+
+                a {
+                    display: block !important;
+                    float: none !important;
+                    width: 100%;
+                }
+
+                .dropdown-menu {
+                    position: relative !important;
+                    left: 0;
+                }
+            }
+            .dropdown-toggle {
+                color: inherit;
+                position: relative;
+                &:after {
+                    position: absolute;
+                    left: 100% !important;
+                    margin-left: -15px;
+                    //content: "";
+                }
+            }
+
+            .dropdown-menu {
+                .dropdown-toggle {
+                    &:after {
+                        //.rotate(90deg);
+                    }
+                }
+            }
+        }
+    }
+}
+
+@media only screen and (max-width: 800px) {
+    .navigation-bar, .navbar {
+        .pull-menu {
+            display: block !important;
+        }
+    }
+}
+
+/* Phones landscape*/
+@media only screen and (max-width: 640px) {
+    html {font-size: 60%;}
+    .no-phone-landscape, .no-phone {
+        #responsive-utils > .hide-element;
+    }
+    .on-phone {
+        #responsive-utils > .show-element;
+    }
+    .container {
+        #responsive-utils > .container-phone;
+    }
+
+    // Grid
+    .grid:not(.fluid) > .row {
+        margin: 0;
+        & > [class*="span"] {
+            width: 100% !important;
+            margin: 0 !important;
+            margin-bottom: 5px !important;
+            &:nth-child(even) {
+                margin-left: 0 !important;
+            }
+        }
+        .span12 {
+            width: 100% !important;
+        }
+        .row {
+            margin: 0;
+            & > [class*="span"] {
+                width: 100% !important;
+                margin: 0 !important;
+                margin-bottom: 5px !important;
+                &:nth-child(even) {
+                    margin-left: 0 !important;
+                }
+            }
+            .span12 {
+                width: 100% !important;
+            }
+        }
+    }
+}
+
+/* Phones portrait*/
+@media only screen and (max-width: 480px) {
+    html {font-size: 45%;}
+    .no-phone-landscape, .no-phone {
+        #responsive-utils > .hide-element;
+    }
+    .container {
+        #responsive-utils > .container-phone2;
+    }
+}
+
+@media only screen and (max-width: 360px) {
+    html {font-size: 40%;}
+    .no-phone-portrait, .no-phone {
+        #responsive-utils > .hide-element;
+    }
+    .container {
+        #responsive-utils > .container-phone3;
+    }
+}
+
+@media only screen and (max-width: 320px) {
+    html {font-size: 40%;}
+    .no-phone-portrait, .no-phone {
+        #responsive-utils > .hide-element;
+    }
+    .container {
+        #responsive-utils > .container-phone4;
+    }
+}
+

data/app/assets/stylesheets/active_administration/metro-bootstrap.less

@@ -0,0 +1,68 @@
+// Core variables
+@import "variables.less";
+
+// CSS Reset
+@import "reset.less";
+
+.metro {
+    // Mixins
+    @import "funcs";
+    @import "utils";
+
+    // Effects
+    @import "transform";
+
+    // Typography
+    @import "typography";
+
+    // Grid system and page layouts
+    @import "layout";
+    @import "grid";
+
+    // Base CSS
+    @import "tables";
+    @import "buttons";
+    @import "breadcrumbs";
+    @import "forms";
+    @import "images";
+
+    // Components
+    @import "menus";
+    @import "navigation-bar";
+    @import "tiles";
+    @import "carousel";
+    @import "rating";
+    @import "pagination";
+    @import "countdown";
+    @import "tab-control";
+    @import "progress-bar";
+    @import "sidebar";
+    @import "accordion";
+    @import "calendar";
+    @import "slider";
+    @import "window";
+    @import "lists";
+    @import "treeview";
+    @import "fluent-menu";
+    @import "hint";
+    @import "balloon";
+    @import "stepper";
+    @import "streamer";
+    @import "scroll";
+    @import "notify";
+    @import "notice";
+    @import "dataTables";
+    @import "wizard";
+    @import "panels";
+
+    // Icons
+    //@import "icons";
+    //@import "icons-content";
+    @import "icons";
+
+    // Misc
+    @import "misc";
+
+    @import "colors";
+
+}

data/app/assets/stylesheets/active_administration/misc.less

@@ -0,0 +1,72 @@
+.example {
+    .clearfix;
+    padding: 20px 40px 20px 60px;
+    border: 1px #ccc solid;
+    position: relative;
+    margin: 0 0 10px 0;
+    background-color: lighten(@gray, 66%) !important;
+    min-height: 100px;
+
+    &:before {
+        position: absolute;
+        content: "example";
+        left: -21px;
+        top: 30px;
+        //background: @grayLighter;
+        color: @grayLight !important;
+        //padding: 5px 10px;
+        margin: 5px 10px;
+        .item-title-secondary;
+        .rotate(-90deg);
+    }
+
+}
+
+code, .code {
+    .code-text;
+    display: inline-block;
+    padding: 3px 5px;
+    margin: 0;
+    background-color: @grayLighter;
+    color: @red;
+    border: 1px lighten(@gray, 50%) solid;
+    font-size: 90%;
+    line-height: 90%;
+}
+
+.label {
+    display: inline-block;
+    padding: 3px 5px;
+    margin: 0;
+    font-size: 90%;
+    font-weight: normal !important;
+    line-height: 90%;
+    background: @grayLighter;
+    color: @gray;
+    .text-bold;
+
+    &.alert, &.error {
+        background-color: @red;
+        color: @white
+    }
+    &.important, &.warning {
+        background-color: @orange;
+        color: @white
+    }
+    &.success {
+        background-color: @darkGreen;
+        color: @white
+    }
+    &.info {
+        background-color: @cyan;
+        color: @white;
+    }
+}
+
+hr {
+    height: 1px;
+    margin: 20px 0;
+    border: 0;
+    color: @grayLighter;
+    background-color: @grayLighter;
+}

data/app/assets/stylesheets/active_administration/navigation-bar.less

@@ -0,0 +1,317 @@
+.navigation-bar, .navbar {
+    width: 100%;
+    display: block;
+    background-color: @cyan;
+    color: @white;
+    //height: 45px;
+
+    .navigation-bar-content, .navbar-content {
+        background-color: inherit;
+        color: inherit;
+        display: block;
+        //height: 100%;
+
+        .element, .element-divider {
+            display: block;
+            float: left;
+            background-color: inherit;
+            position: relative;
+            height: 45px;
+
+            &.place-right {
+                float: right;
+            }
+        }
+
+        .element {
+            padding: @subunitSize*3;
+            line-height: @subunitSize * 3;
+            color: inherit;
+            font-family: @segoeLightFontFamily;
+            font-size: 14px;
+            //transition: background .3s ease;
+
+            &:hover {
+                background-color: saturate(@cyan, 30%);
+            }
+
+        }
+
+        .element > a.dropdown-toggle {
+            color: inherit;
+            position: relative;
+            &:after {
+                position: absolute;
+                left: 100%;
+                //content: "";
+            }
+        }
+
+        .element > .dropdown-menu {
+            top: 100%;
+            left: 0;
+
+
+            &.place-right {
+                right: 0;
+                left: auto;
+            }
+        }
+
+        .element-divider {
+            padding: @subunitSize*3 0;
+            line-height: @subunitSize * 3;
+            width: 1px !important;
+            border-left: 1px #ccc solid;
+            opacity: .3;
+            position: relative;
+            &:before {
+                content: "|";
+                visibility: hidden;
+            }
+        }
+    }
+}
+
+.navigation-bar-content, .navbar-content {
+    .brand {
+        font-size: 18px;
+    }
+
+    form {
+        margin: 0;
+        padding-bottom: 0 !important;
+        position: relative;
+    }
+
+    .element  .input-control.text, .element  .input-control.password {
+        width: auto;
+        height: auto;
+        position: relative;
+        margin: 0;
+        top: -6px;
+
+        [class*='btn-'] {
+            top: 2px;
+            right: 2px;
+        }
+
+        input[type='text'] {
+            font-size: 12px;
+        }
+    }
+
+    .input-control.checkbox,  .input-control.radio{
+        position: relative;
+        margin: 0;
+        top: -6px;
+    }
+
+    .button, .image-button {
+        background-color: transparent;
+    }
+
+    .button {
+        margin-top: -14px;
+        background-color: inherit;
+        &.small {
+
+        }
+    }
+
+    .image-button {
+        padding-right: @subunitSize * 8 ;
+        padding-left: @subunitSize;
+        background-color: inherit;
+
+        &:active {
+            left: auto;
+            right: auto;
+            top: auto;
+        }
+
+        img {
+            width: @unitSize * 2;
+            height: @unitSize * 2;
+            margin-top: @subunitSize/2;
+        }
+
+        &.image-left {
+            padding-right: @subunitSize;
+            padding-left: @subunitSize * 8;
+        }
+    }
+
+    [class*="icon-"] {
+        font-size: 16px !important;
+    }
+}
+
+.input-element, .element-input {
+    padding-bottom: 0 !important;
+    &:hover {
+        background-color: inherit !important;
+    }
+}
+
+.navigation-bar, .navbar {
+    .element-menu {
+        margin: 0;
+        padding: 0;
+        list-style: none;
+        color: inherit;
+
+        & > li {
+            display: block;
+            float: left;
+            position: relative;
+            color: inherit;
+
+            & > a {
+                display: block;
+                float: left;
+                width: 100%;
+                padding: @subunitSize*3;
+                line-height: @subunitSize * 3;
+                color: inherit;
+                font-family: @segoeLightFontFamily;
+                font-size: 14px;
+
+                &.dropdown-toggle {
+                    //padding-right: 10px;
+                    color: inherit;
+                    position: relative;
+                    &:after {
+                        position: absolute;
+                        left: 95%;
+                        top: 50%;
+                        margin-left: -7px;
+                        margin-top: -5px;
+                    }
+                }
+            }
+
+            & > .dropdown-menu {
+                top: 100%;
+                left: 0;
+                //background-color: inherit;
+                //border: 0 !important;
+
+                &.place-right {
+                    right: 0;
+                    left: auto;
+                }
+
+                .dropdown-menu {
+                    //background-color: inherit !important;
+                    //border: 0 !important;
+                }
+            }
+        }
+
+        &.responsive {}
+    }
+
+    .element-menu {
+        &.drop-up {
+            & li > .dropdown-menu {
+                top: auto;
+                bottom: 45px;
+
+                .dropdown-menu {
+                    bottom: 0;
+                }
+            }
+        }
+    }
+
+    .pull-menu {
+
+        display: none;
+        float: right !important;
+        color: #fff;
+        cursor: pointer;
+        font: 1.8em sans-serif;
+        position: absolute;
+        top: 0;
+        right: 0;
+        height: 45px;
+        width: 40px;
+        line-height: 20px;
+        margin: 0;
+
+        &:before {
+            content: "\2261";
+            position: absolute;
+            font-size: 20pt;
+            top: 10px;
+            left: 10px;
+        }
+
+        input[type="checkbox"] {
+            width: 0;
+            height: 0;
+            opacity: 0;
+        }
+    }
+}
+
+.navigation-bar-content, .navbar-content {
+    .clearfix;
+}
+
+.navigation-bar, .navbar {
+    &.fixed-top, &.fixed-bottom {
+        position: fixed;
+        z-index: @zindexFixedNavbar;
+        left: 0;
+    }
+
+    &.fixed-top {
+        top: 0;
+        bottom: auto;
+    }
+    &.fixed-bottom {
+        bottom: 0;
+        top: auto;
+    }
+}
+
+
+.navigation-bar {
+    &.dark {
+        background-color: @grayDark;
+        .element-menu > li > a {
+            color: @white;
+        }
+
+        .element:hover, .element-menu > li:hover {
+            background-color: saturate(@dark, 10%);
+        }
+    }
+    &.light {
+        background-color: @grayLighter;
+        color: @gray;
+
+        .element:hover, .element-menu > li:hover {
+            background-color: @grayLight;
+            color: @white;
+        }
+        .pull-menu {
+            color: @dark;
+        }
+    }
+    &.white {
+        background-color: @white;
+        color: @gray;
+
+        .element:hover, .element-menu > li:hover {
+            background-color: @blue;
+            color: @white;
+        }
+
+        .pull-menu {
+            color: @dark;
+        }
+    }
+}