active_administration 0.0.2 → 0.0.3

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

@@ -0,0 +1,47 @@
+@font-face {
+    font-family: 'iconFont';
+    src:url('../fonts/iconFont.eot');
+    src:url('../fonts/iconFont.eot?#iefix') format('embedded-opentype'),
+    url('../fonts/iconFont.woff') format('woff'),
+    url('../fonts/iconFont.ttf') format('truetype'),
+    url('../fonts/iconFont.svg#iconFont') format('svg');
+    font-weight: normal;
+    font-style: normal;
+}
+
+[data-icon]:before {
+    font-family: 'iconFont';
+    content: attr(data-icon);
+    speak: none;
+    font-weight: normal;
+    font-variant: normal;
+    text-transform: none;
+    line-height: 1;
+    -webkit-font-smoothing: antialiased;
+}
+
+[class*="icon-"] {
+    font-family: 'iconFont' !important;
+    speak: none;
+    font-style: normal;
+    font-weight: normal !important;
+    font-variant: normal;
+    text-transform: none;
+    text-decoration: inherit;
+    line-height: 1;
+    display: inline-block;
+    vertical-align: -8%;
+    -webkit-font-smoothing: antialiased;
+    font-size: inherit;
+
+    &.smaller {
+        font-size: .7em;
+        vertical-align: 6%;
+    }
+    &.large {
+        font-size: 1.2em;
+        vertical-align: -10%;
+    }
+}
+
+@import "iconFont-content";

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

@@ -0,0 +1,10 @@
+@sysIconFontName: metroSysIcons;
+
+@font-face {
+    font-family: 'metroSysIcons';
+    src: url('../fonts/metroSysIcons.woff') format('woff'),
+         url('../fonts/metroSysIcons.ttf') format('truetype'),
+         url('../fonts/metroSysIcons.svg#metroSysIcons') format('svg');
+    font-weight: normal;
+    font-style: normal;
+}

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

@@ -0,0 +1,75 @@
+img {
+    max-width: 100%;
+
+    &.rounded, &.cycle, &.polaroid {
+        background-color: @white;
+        .border;
+    }
+
+    &.rounded {
+        border-radius: 10px;
+    }
+    &.cycle {
+        border-radius: 50%;
+    }
+    &.polaroid {
+        padding: @subunitSize * 2;
+    }
+}
+
+.image-container {
+    position: relative;
+    padding: 0;
+    background-color: @grayDark;
+    width: 240px;
+    overflow: hidden;
+
+    &.full-size {
+        width: 100%;
+    }
+
+    img {
+        margin: 0;
+        width: 100%;
+        height: auto;
+    }
+
+    & > .overlay, & > .overlay-fluid  {
+        position: absolute;
+        width: 100%;
+        height: 55px;
+        overflow: hidden;
+        background-color: #1e1e1e;
+        padding: 5px 10px;
+        opacity: .8;
+        bottom: 0;
+        font-size: 8pt;
+        color: #fff;
+    }
+
+    & > .overlay-fluid {
+        bottom: -55px;
+        font-size: 8pt;
+        color: #fff;
+    }
+
+    &:hover {
+        .overlay-fluid {
+            -webkit-transform: translate(0, -55px);
+            -ms-transform: translate(0, -55px);
+            -o-transform: translate(0, -55px);
+            -moz-transform: translate(0, -55px);
+            transform: translate(0, -55px);
+
+            -webkit-transition: all @overlay-speed ease;
+            -moz-transition: all @overlay-speed ease;
+            -o-transition: all @overlay-speed ease;
+            -ms-transition: all @overlay-speed ease;
+            transition: all @overlay-speed ease;
+        }
+    }
+
+    &.selected {
+        #element > .selected;
+    }
+}

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

@@ -0,0 +1,137 @@
+.container {
+    margin: 0 auto;
+//    width: @containerDesktopSize;
+}
+
+.page {
+    .clearfix;
+    width: 100%;
+    min-height: 100%;
+    margin: 0;
+    padding: 0;
+
+    .page-header {
+
+        .page-header-content {
+            .clearfix;
+            //min-height: @unitSize * 5;
+            min-height: auto;
+
+            .branding {
+                display: inline-block;
+                width: auto;
+                padding: 10px 0;
+                margin-right: 20px;
+
+                .brand-title {
+                    .subheader;
+                    display: block;
+                }
+
+                .brand-slogan {
+                    .item-title-secondary;
+                    #font > .normal;
+                    font-family: @segoeLightFontFamily;
+                    display: block;
+                }
+
+                .brand-title, .brand-slogan {
+                    margin: 0;
+                }
+
+                a + .brand-title, a + .brand-slogan {
+                    text-decoration: none !important;
+                }
+            }
+
+        }
+    }
+
+    .page-region {
+
+        .page-region-content {
+            .clearfix;
+            min-height: 500px;
+        }
+    }
+
+    .page-footer {
+        .page-footer-content {
+            .clearfix;
+            height: @unitSize * 5;
+        }
+    }
+}
+
+.page {
+    &.secondary {
+        .page-region-content, .page-header-content {
+            padding-left: @unitSize * 4;
+        }
+    }
+}
+
+.app-bar {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    min-height: 100px;
+    background-color: @dark;
+    z-index: @zindexCharms;
+}
+
+.charms {
+    position: fixed;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    height: 100%;
+    min-width: 200px;
+    width: auto;
+    z-index: @zindexCharms;
+
+    &.place-left {
+        left: 0;
+        right: auto;
+    }
+
+    &.search {}
+    &.sharing{}
+    &.appsets{}
+    &.apphelp{}
+}
+
+.message-dialog {
+    position: fixed;
+    left: 0;
+    right: 0;
+    height: auto;
+    min-height: 100px;
+    top: 30%;
+    padding: 10px 10px 0;
+    z-index: @zindexModal;
+}
+
+.flyouts{}
+
+.error-bar, .warning-bar, .info-bar {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    padding: 10px 20px;
+    color: #fff;
+    min-height: 100px;
+    z-index: @zindexModal;
+}
+.error-bar {
+    .bg-darkRed;
+}
+.warning-bar {
+    .bg-darkOrange;
+}
+.info-bar {
+    .bg-lightBlue;
+}
+

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

@@ -0,0 +1,258 @@
+.listview {
+    .list {
+        border: 4px transparent solid;
+        width: 300px;
+        height: auto;
+        position: relative;
+        display: block;
+        cursor: pointer;
+        color: inherit;
+        margin: 0 0 10px 0;
+
+        .list-content {
+            padding: 10px;
+            position: relative;
+            display: block;
+            color: inherit;
+            .clearfix;
+        }
+
+        &:hover {
+            outline: 3px #ccc solid;
+        }
+        &:active {
+            outline: 3px #3e3e3e solid;
+        }
+    }
+}
+
+.listview {
+    .list {
+        .border;
+        .list-content {
+            .icon {
+                display: block;
+                width: 56px;
+                height: 56px;
+                font-size: 40px;
+                float: left;
+                margin-right: 10px;
+            }
+            [class*="icon-"] {
+                &.icon {
+                    padding: 8px;
+                }
+            }
+
+            .data {
+                //float: left;
+                display: block;
+                padding: 0;
+                margin: 0;
+                margin-left: 66px;
+                min-width: 200px;
+                position: relative;
+            }
+
+            .list-title, .list-remark {
+                margin: 0;
+                padding: 0;
+                display: block;
+                .text-ellipsis;
+            }
+
+            .list-title {
+                font-size: 14px;
+                line-height: 16px;
+            }
+            .list-remark {
+                font-size: 11px;
+                line-height: 12px;
+            }
+            [class*="span"] {
+                float: none;
+            }
+            .rating {
+                color: inherit;
+            }
+            .progress-bar {
+                margin: 5px 0;
+            }
+        }
+    }
+}
+
+.listview {
+    &.small {
+        .list-content {
+            .icon {
+                display: block;
+                width: 32px;
+                height: 32px;
+                line-height: 14px;
+                font-size: 28px;
+                float: left;
+                margin-right: 10px;
+            }
+            [class*="icon-"] {
+                &.icon {
+                    padding: 8px 0;
+                }
+                &.border {
+                    font-size: 22px;
+                    padding: 8px 4px;
+                }
+            }
+            .data {
+                margin-left: 40px;
+            }
+        }
+    }
+}
+
+.listview {
+    .list.selected {#element > .selected;}
+}
+
+.listview-outlook {
+    position: relative;
+    display: block;
+    .listview;
+
+    .list {
+        display: block;
+        width: 100%;
+        //min-height: 50px;
+        border: 0;
+        border-bottom: 1px @lwListBorderColor solid;
+        padding: 2px 0;
+        color: @gray;
+        margin-bottom: 0;
+
+        .list-content {
+            //padding: @lwListContentPadding !important;
+            margin: 2px 0;
+            padding: 2px 20px;
+            #font > .segoe;
+            font-size: @lwFontSize;
+            color: inherit;
+            border-left: 3px transparent solid;
+
+            .list-title, .list-subtitle, .list-remark {
+                width: 100%;
+                display: block;
+                color: inherit;
+                .text-ellipsis;
+            }
+
+            .list-title {
+                font-size: @lwFontSize;
+                line-height: @lwFontSize+4;
+            }
+            .list-subtitle, .list-remark {
+                font-size: @lwSubtitleSize;
+                font-weight: normal;
+                line-height: @lwSubtitleSize+4;
+                color: @dark;
+            }
+            .list-subtitle {
+                font-weight: bold;
+                color: #0067cb;
+            }
+        }
+    }
+}
+
+.listview-outlook {
+    .list {
+        &.marked {
+            .list-content {
+                border-left: 3px @lwMarkerColor solid !important;
+            }
+        }
+
+        &:active, &:focus, &.active {
+            background-color: @lwListBackgroundActiveColor !important;
+            outline: 1px @grayLight dotted;
+            color: @gray !important;
+        }
+
+        &:hover {
+            background-color: @lwListBackgroundHoverColor;
+            outline: none;
+            .list-content {
+                border-left: 3px @lwMarkerInactiveColor solid;
+            }
+        }
+    }
+}
+
+.listview-outlook {
+    .list-group {
+        display: block;
+        position: relative;
+
+        .group-title {
+            display: block;
+            margin-bottom: 2px;
+            background-color: #f0f0f0;
+            padding: 4px 20px;
+            #font > .segoe;
+            font-size: @lwSubtitleSize;
+            font-weight: bold;
+            color: @grayDark;
+            padding-left: 24px;
+
+            &:before {
+                position: absolute;
+                display: block;
+                left: 10px;
+                top: 1px;
+                content: '';
+
+                width: 0;
+                height: 0;
+                border-left: 7px solid transparent;
+                border-top: 7px solid transparent;
+                border-bottom: 7px solid black;
+            }
+        }
+
+        .group-content {
+            display: block;
+        }
+
+        &.collapsed {
+            .group-title {
+                &:before {
+                    .rotate(-45deg);
+                    margin-left: -4px;
+                }
+            }
+
+            .group-content {
+            }
+        }
+
+        .group-title {
+            &:hover {
+                &:before {
+                    border-bottom-color: #0067cb;
+                }
+            }
+        }
+
+    }
+}
+
+.listview-outlook {
+    .list-content {
+        .list-icon {
+            float: left;
+            width: 48px;
+            max-height: 48px;
+            margin-right: 10px;
+            margin-top: 5px;
+        }
+    }
+}