active_administration 0.0.2 → 0.0.3

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

@@ -0,0 +1,141 @@
+.scrollbar-button {
+    background-color: #ffffff;
+    border: 1px #ababab solid;
+}
+
+.scrollbar {
+    position: relative;
+    overflow: hidden;
+}
+.scrollbar-container {
+    position: relative;
+    overflow: hidden;
+}
+
+.scrollbar-v, .scrollbar-h {
+    position: absolute;
+    background: #f3f3f3;
+}
+
+.scrollbar-v {
+    width: 15px;
+    height: 100%;
+    right: 0;
+    top: 0;
+}
+
+.scrollbar-h {
+    height: 15px;
+    width: 100%;
+    left: 0;
+    bottom: 0;
+}
+
+.scrollbar-v-up, .scrollbar-v-down, .scrollbar-h-up, .scrollbar-h-down, .scrollbar-line-v-btn, .scrollbar-line-h-btn {
+    cursor: pointer;
+    position: absolute;
+    .scrollbar-button;
+}
+
+.scrollbar-line-v-btn, .scrollbar-line-h-btn {
+    &:hover {
+        background-color: #f0f0f0;
+    }
+}
+
+.scrollbar-v-up, .scrollbar-h-up  {
+    width: 15px;
+    height: 15px;
+    left: 0;
+    top: 0;
+}
+
+.scrollbar-v-down, .scrollbar-h-down {
+    width: 15px;
+    height: 15px;
+    left: 0;
+    bottom: 0;
+}
+
+.scrollbar-h-down {
+    left: auto;
+    right: 0;
+}
+
+.scrollbar-line-v, .scrollbar-line-h {
+    position: absolute;
+    z-index: 3;
+}
+
+.scrollbar-line-v {
+    width: 100%;
+    left: 0;
+    top: 15px;
+}
+
+.scrollbar-line-h {
+    height: 15px;
+    left: 15px;
+    top: 0;
+}
+
+.scrollbar-line-v-btn {
+    width: 100%;
+    left: 0 !important;
+    top: 0;
+}
+
+.scrollbar-line-h-btn {
+    height: 100%;
+    left: 0;
+    top: 0 !important;
+}
+
+.scrollbar-both {
+    position: absolute;
+    width: 15px;
+    height: 15px;
+    right: 0;
+    bottom: 0;
+}
+
+.scrollbar-line-h, .scrollbar-line-v, .scrollbar-both {
+    background-color: #f3f3f3;
+}
+
+.scrollbar-v-up, .scrollbar-v-down, .scrollbar-h-up, .scrollbar-h-down {
+    &:before {
+        position: absolute;
+        content: "";
+        font-family: @sysIconFontName;
+        font-size: 14px;
+    }
+}
+
+.scrollbar-v-up {
+    &:before {
+        content: "\e010";
+    }
+}
+
+.scrollbar-v-down {
+    &:before {
+        content: "\e012";
+    }
+}
+
+.scrollbar-h-up {
+    &:before {
+        content: "\e010";
+        margin-top: -1px;
+        .rotate(-90deg);
+    }
+}
+
+.scrollbar-h-down {
+    &:before {
+        content: "\e010";
+        margin-top: -1px;
+        .rotate(90deg);
+    }
+}

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

@@ -0,0 +1,158 @@
+.sidebar {
+    margin: 0;
+    padding: 0;
+    background-color: #3D3D3D;
+    width: 100%;
+    height: 100%;
+
+    & > ul {
+        margin: 0;
+        padding: 0;
+        list-style: none;
+
+        li {
+            display: block;
+            border: 0;
+            border-bottom: 1px #5c5c5c solid;
+            position: relative;
+
+            &.title {
+                padding: 20px 20px 10px 20px;
+                .subheader-secondary;
+                color: @white;
+            }
+
+            a {
+                display: block;
+                position: relative;
+                padding: 10px 20px;
+                text-decoration: none;
+                color: @grayLighter;
+                background-color: #3D3D3D;
+
+                &:hover {
+                    background-color: #262626;
+                    color: @white;
+                }
+
+                &.dropdown-toggle {
+                    &:after {
+                        right: 10px;
+                        bottom: 5px;
+                    }
+                }
+
+                [class*="icon-"] {
+                    margin-right: 15px;
+                }
+            }
+
+            &.stick {
+                position: relative;
+                &:before {
+                    content: "";
+                    position: absolute;
+                    width: 7px;
+                    height: 40px;
+                    left: -7px;
+                    text-indent: -9999px;
+                    border-top-left-radius: 5px;
+                    border-bottom-left-radius: 5px;
+                    background-color: inherit;
+                }
+            }
+            &.disabled {
+                a {
+                    background-color: lighten(#3D3D3D, 30%);
+                    cursor: default;
+                    color: @gray;
+                }
+            }
+            &.active {
+                a {
+                    background-color: @darkRed;
+                    color: @white;
+                }
+            }
+        }
+
+        ul {
+            .dropdown-menu;
+            box-shadow: none;
+            position: relative !important;
+            background-color: lighten(#262626, 75%);
+            min-width: 100%;
+            li {
+                border: 0;
+                a {
+                    background-color: lighten(#262626, 75%);
+                }
+                &.divider {
+                    background-color: lighten(#5c5c5c, 40%);
+                    &:hover {
+                        background-color: lighten(#5c5c5c, 40%);
+                    }
+                }
+                &.disabled {
+                    a {
+                        color: @grayLight;
+                        &:hover {
+                            color: @grayLight;
+                        }
+                    }
+                }
+            }
+
+            &.open {
+                display: block;
+            }
+        }
+    }
+}
+
+.sidebar.light {
+    background-color: @white;
+    .border;
+    li {
+        border-bottom-color: @grayLighter;
+
+        &.title {
+            color: @dark;
+        }
+
+        a {
+            color: @dark;
+            background-color: @white;
+
+            &:hover {
+                background-color: @blue;
+            }
+        }
+
+        ul {
+            background-color: @white;
+            border: 1px transparent solid;
+        }
+
+        .divider {
+            background-color: @grayLighter;
+            &:hover {
+                background-color: @grayLighter;
+            }
+        }
+
+        &.disabled {
+            a {
+                background-color: @white;
+                cursor: default;
+                color: @grayLight;
+            }
+        }
+        &.active {
+            a {
+                background-color: @cyan;
+                color: @white;
+            }
+        }
+    }
+}

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

@@ -0,0 +1,106 @@
+.slider {
+    height: 12px;
+    width: auto;
+    position: relative;
+    background-color: @sliderBackgroundColor;
+    margin-bottom: 10px;
+
+    .marker {
+        height: 12px;
+        width: 12px;
+        cursor: pointer;
+        position: absolute;
+        top: 0;
+        left: 0;
+        background-color: @sliderMarkerColor;
+        z-index: 2;
+
+        &:focus, &:active, &hover {
+            outline: 2px @red solid;
+        }
+    }
+
+    .complete {
+        height: 100%;
+        width: auto;
+        background-color: @sliderCompleteColor;
+        z-index: 1;
+        transition: background .3s ease;
+    }
+
+    &>.hint {
+        background-color: @white;
+        position: absolute;
+        z-index: 3;
+        border: 1px #ccc solid;
+        padding: 2px 4px;
+        top: -40px;
+        min-width: 30px;
+        text-align: center;
+        #font > .segoe-light;
+        font-size: 14px;
+        .shadow;
+        display: none;
+    }
+
+    &.permanent-hint {
+        & > .hint {
+            display: block;
+        }
+    }
+
+    &.hint-bottom {
+        .hint {
+            top: 100%;
+            margin-top: 5px;
+        }
+    }
+
+    &.vertical {
+        height: 100px;
+        width: 12px;
+
+        .marker {
+            left: 0 !important;
+        }
+
+        .complete {
+            position: absolute;
+            height: auto;
+            width: 100% !important;
+            bottom: 0;
+            left: 0;
+        }
+
+        .hint {
+            left: 100%;
+            margin-left: 5px;
+            margin-top: 0;
+        }
+
+        &.hint-left {
+            .hint {
+                left: -40px;
+            }
+        }
+    }
+
+    &:hover {
+        .complete {
+            background-color: @sliderCompleteHoverColor;
+        }
+    }
+
+    &:active, &:active + .marker:active {
+        .complete {
+            background-color: @sliderCompleteHoverColor;
+        }
+    }
+
+    &.place-left {
+        margin-right: 20px;
+    }
+    &.place-right {
+        margin-left: 20px;
+    }
+}

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

@@ -0,0 +1,80 @@
+.stepper {
+    margin: 10px 0;
+    .clearfix;
+
+    & > ul {
+        counter-reset:li;
+        border-top: 1px @dark dotted;
+        position: relative;
+        padding: 0;
+        margin: 30px 0;
+        width: 100%;
+
+        li {
+            list-style: none;
+            float: left;
+            width: 2em;
+            height: 2em;
+            margin-top: -1em;
+            position: absolute;
+            //border: 1px red dotted;
+            left: 0;
+            background:#666;
+            cursor: pointer;
+
+            &:before {
+                content:counter(li);
+                counter-increment:li;
+                position:absolute;
+                box-sizing:border-box;
+                padding:.3em 10px;
+                color:#fff;
+                font-weight:bold;
+                font-family:"Helvetica Neue", Arial, sans-serif;
+                font-size: 1.5rem;
+                text-align:center;
+            }
+
+            &:hover {
+                background-color: @grayLight;
+            }
+
+            &.current, &.complete {
+                transition: all 0.2s ease;
+            }
+
+            &.current {
+                background-color: @cyan;
+                //.scale(1.5);
+
+                &:hover {
+                    background-color: @lighterBlue;
+                }
+            }
+            &.complete {
+                background-color: @green;
+
+                &:before {
+                }
+
+                &:hover {
+                    background-color: @lightGreen;
+                }
+            }
+        }
+    }
+    &.rounded {
+        li {
+            border-radius: 100%;
+        }
+    }
+    &.diamond {
+        li {
+            .rotate(45deg);
+            &:before {
+                .rotate(-45deg);
+            }
+        }
+
+    }
+}