active_administration 0.0.2 → 0.0.3

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

@@ -0,0 +1,57 @@
+.countdown, .times{
+    width: auto;
+    margin:0 auto;
+    font: 20px/1.5 'Open Sans Condensed',sans-serif;
+    text-align:center;
+    letter-spacing:-3px;
+
+    .digit-wrapper{
+        display: inline-block;
+        height: 1.6em;
+        overflow: hidden;
+        position: relative;
+        width: 1.05em;
+
+        .digit{
+            position:absolute;
+            display:block;
+            width:1em;
+            text-align:center;
+            vertical-align: middle;
+            letter-spacing:-1px;
+
+            &.stop {
+                background-color: @red;
+            }
+        }
+    }
+
+    .divider{
+        display :inline-block;
+        width: 16px;
+        height: 1.5em;
+        position :relative;
+        font-weight: bold;
+
+        &:before {
+            width: 100%;
+            height:1.5em;
+            position: absolute;
+            content: ":";
+            color: inherit;
+            font-size: inherit;
+            vertical-align: middle;
+            text-align: center;
+            left: -20%;
+            top: -15%;
+        }
+    }
+
+    &.inverse {
+        .digit {
+            color: @grayDark !important;
+            background-color: @grayLighter !important;
+        }
+    }
+}
+

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

@@ -0,0 +1,134 @@
+.dataTable {
+    clear: both;
+
+    thead {
+        .sorting_asc, .sorting_desc, .sorting {
+            cursor: pointer;
+
+            &:after {
+                font-family: @sysIconFontName;
+                position: relative;
+                float: right;
+                right: 0;
+                color: @grayLight;
+            }
+        }
+
+        .sorting {
+            &:after {
+                content: "\e011";
+            }
+        }
+
+        .sorting_asc {
+            &:after {
+                content: "\e010";
+            }
+        }
+
+        .sorting_desc {
+            &:after {
+                content: "\e012";
+            }
+        }
+
+        .sorting_asc, .sorting_desc {
+            &:after {
+                color: @dark;
+            }
+        }
+    }
+}
+
+.dataTables_wrapper {
+    .dataTables_filter, .dataTables_length {
+        label {
+            vertical-align: middle;
+        }
+
+        input, select {
+            border: 1px @inputRestState solid;
+            width: auto;
+            height: 100%;
+            padding: 5px;
+            z-index: 1;
+            position: relative;
+
+            &:focus {
+                outline: 0;
+                border-color: @inputFocusState;
+            }
+        }
+    }
+
+    .dataTables_length {
+        float: left;
+
+        select {
+            margin: 0 5px;
+        }
+
+    }
+
+    .dataTables_filter {
+        float: right;
+
+        input {
+            margin-left: 5px;
+        }
+    }
+
+    .dataTables_paginate {
+        float: right;
+        text-align: right;
+
+        .paginate_button {
+            .button;
+            color: inherit;
+            display: block;
+            float: left;
+            margin-right: 1px;
+
+            &.current {
+                background-color: @lightBlue ;
+                color: @white;
+            }
+        }
+    }
+
+    .dataTables_info {
+        float: left;
+    }
+
+    .dataTables_scrollHeadInner {
+        table {
+            margin: 0 !important;
+        }
+    }
+
+    .dataTables_processing {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        margin-left: -100px;
+        margin-top: -2em;
+        width: 200px;
+        padding: 20px;
+        text-align: center;
+        font-size: 1.2rem;
+        background-color: @white;
+        .shadow;
+    }
+}
+
+.dataTables_wrapper .dataTables_scroll {
+    clear: both;
+}
+
+.dataTables_wrapper:after {
+    visibility: hidden;
+    display: block;
+    content: "";
+    clear: both;
+    height: 0;
+}

data/app/assets/stylesheets/active_administration/fluent-menu.less

@@ -0,0 +1,231 @@
+.fluent-menu {
+    font-size: 14px;
+    //overflow: hidden;
+
+    .tabs-holder {
+        list-style: none;
+        position: relative;
+        margin: 0;
+        padding: 0;
+        display: block;
+        z-index: 2;
+        .clearfix;
+
+        li {
+            display: block;
+            float: left;
+            margin-right: 5px;
+            background-color: #ffffff;
+
+            a {
+                display: block;
+                float: left;
+                padding: 4px 15px;
+                text-transform: uppercase;
+                font-size: .8em;
+                color: @fmTabRestColor;
+
+                &:hover {
+                    color: @fmTabActiveColor;
+                }
+            }
+
+            &:first-child {
+                margin-left: 0px;
+            }
+
+            &.active {
+                border: 1px @fmBorderColor solid;
+                border-bottom-color: @white;
+                a {
+                    color: @fmTabActiveColor;
+                }
+            }
+            &.special {
+                border: 1px @fmTabActiveColor solid;
+                background-color: @fmTabActiveColor;
+                a {
+                    color: @white;
+                    &:hover {
+                        color: @white;
+                    }
+                }
+            }
+        }
+    }
+
+    .tabs-content {
+        z-index: 1;
+        position: relative;
+        margin-top: -1px;
+        border: 1px @fmBorderColor solid;
+        background-color: #ffffff;
+        height: 120px;
+        //overflow: hidden;
+
+        .tab-panel {
+            display: block;
+            height: 100%;
+            padding: 5px 0 2px;
+
+
+            .tab-panel-group {
+                height: 100%;
+                position: relative;
+                display: block;
+                float: left;
+                padding: 0 5px;
+                //margin-right: 5px;
+                //background-color: #ccc;
+                border-right: 1px @fmBorderColor solid;
+
+                &:last-child {
+                    margin-right: 0;
+                    //border-right: 0;
+                }
+            }
+
+            .tab-group-caption {
+                font-size: 10px;
+                margin: 2px 0;
+                text-align: center;
+                display: block;
+                position: absolute;
+                bottom: 0px;
+                right: 0;
+                left: 0;
+                white-space: nowrap;
+            }
+
+            .tab-group-content {
+
+            }
+
+            .tab-content-segment {
+                display: block;
+                float: left;
+                position: relative;
+            }
+
+            .tab-content-composit {
+
+            }
+        }
+    }
+}
+
+// Buttons
+
+.fluent-menu {
+    .fluent-button {
+        background-color: @white;
+        padding: 5px 5px;
+        font-size: 14px;
+        line-height: 14px;
+        display: block;
+        cursor: default;
+        &:hover {
+            background-color: @fmElementHoverBackground;
+        }
+        img {
+            display: block;
+            float: left;
+            margin-right: 5px;
+            width: 16px;
+            height: 16px;
+        }
+        [class*="icon-"] {
+            color: @fmTabRestColor;
+        }
+
+        .button-label {
+            //padding: 0 5px;
+            display: inline-block;
+            color: inherit;
+            font: inherit;
+        }
+
+        &:active {
+            top: 0;
+            left: 0;
+            background-color: darken(@fmElementHoverBackground, 20%) !important;
+        }
+    }
+
+    .fluent-big-button {
+        .fluent-button;
+
+        padding: 7px 5px;
+        text-align: center;
+        white-space: normal;
+        line-height: 12px;
+        float: left;
+        position: relative;
+
+        img, [class*="icon-"] {
+            display: block;
+            width: 40px;
+            height: 40px;
+            font-size: 40px;
+            float: none;
+            text-align: center;
+            margin: 5px auto 5px;
+        }
+
+        br {
+            line-height: 4px;
+            height: 4px;
+            font-size: 4px;
+        }
+
+    }
+
+    .fluent-tool-button {
+        .fluent-button;
+        padding: 4px;
+        img, [class*="icon-"] {
+            display: block;
+            width: 16px;
+            height: 16px;
+            font-size: 16px;
+            float: none;
+            text-align: center;
+        }
+        img {
+            margin-right: 0;
+        }
+    }
+
+    .dropdown-toggle {
+        &:before, &:after {
+            content: "";
+        }
+        .button-label {
+            padding-right: 5px;
+            &:before, &:after {
+                content: "";
+            }
+            &:after {
+                content: "\e012";
+                font-family: @sysIconFontName;
+                position: absolute;
+                right: 0px;
+                bottom: 3px;
+                font-size: .8em;
+            }
+        }
+    }
+
+    .dropdown-menu {
+        position: absolute;
+        top: 100%;
+        z-index: 100;
+        a {
+            font-size: 10pt !important;
+            &:hover {
+                background-color: @fmElementHoverBackground;
+                color: @fmTabRestColor;
+            }
+        }
+    }
+}

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

@@ -0,0 +1,414 @@
+form {
+    margin: 0 0 14pt;
+}
+
+fieldset {
+    margin: 0;
+    padding: 0;
+    border: 0;
+}
+
+legend {
+    display: block;
+    width: 100%;
+    padding: 0;
+    margin-bottom: @baseLineHeight;
+    font-size: @baseFontSize * 1.5;
+    line-height: @baseLineHeight * 2;
+    color: @grayDark;
+    border: 0;
+    border-bottom: 1px solid #e5e5e5;
+
+    // Small
+    small {
+        font-size: @baseLineHeight * .75;
+        color: @grayLight;
+    }
+}
+
+label {
+    display: block;
+    margin: 5px 0;
+}
+
+.input-control {
+    //display: block;
+    //margin-bottom: @baseLineHeight / 2;
+}
+
+.input-control {
+    &.checkbox, &.radio, &.switch, &.text, &.password, &.select, &.textarea {
+        display: inline-block;
+        cursor: pointer;
+        position: relative;
+        margin-bottom: 7pt;
+    }
+}
+
+.input-control {
+    &.checkbox, &.radio {
+        input[type="checkbox"], input[type="radio"] {
+            position: absolute;
+            opacity: 0;
+            width: 1px;
+            height: 1px;
+        }
+
+
+        input[type="checkbox"]:focus ~ .check, input[type="radio"]:focus ~ .check {
+            outline: 1px @grayLight dotted !important;
+        }
+
+        .caption {
+            margin: 0 5px;
+        }
+
+        .check {
+            .square(20px);
+            background-color: @white;
+            border: 2px @inputRestState solid;
+            padding: 0;
+            margin: 0 5px 0 0;
+            position: relative;
+            display: inline-block;
+            vertical-align: middle;
+        }
+
+        &.text-left {
+            .check {
+                margin: 0 0 0 5px;
+            }
+        }
+
+        &:hover {
+            .check {
+                border-color: @inputHoverState;
+            }
+        }
+
+        .check:active {
+            border-color: @inputActiveState;
+        }
+        .check:focus {
+            border-color: @inputFocusState;
+        }
+
+        .check:after {
+            position: absolute;
+            font-family: @sysIconFontName;
+            font-size: 9pt;
+            line-height: 9pt;
+        }
+
+        input[type="checkbox"]:checked ~ .check:after, input[type="radio"]:checked ~ .check:after {
+            content: "\e003";
+            margin: 2px;
+            top: 0;
+            color: @dark;
+        }
+
+        input[type="checkbox"]:disabled ~ .check, input[type="radio"]:disabled ~ .check  {
+            border-color: @inputRestState;
+            background-color: @inputDisabledBgState;
+
+            &:after {
+                color: @inputDisabledState;
+            }
+        }
+
+        input[data-show="intermediate"] ~ .check, input[data-show="intermediate"]:checked ~ .check  {
+            &:after {
+                display: block;
+                content: "" !important;
+                .square(10px);
+                background-color: @dark;
+                margin: 3px;
+            }
+        }
+
+        input[data-show="intermediate"]:disabled ~ .check {
+            &:after {
+                background-color: @inputDisabledState;
+            }
+        }
+    }
+
+    &.radio {
+        .check {
+            border-radius: 50%;
+        }
+        &.default-style {
+            input[type="radio"]:checked ~ .check:after {
+                display: block;
+                content: "" !important;
+                .square(10px);
+                border-radius: 50%;
+                background-color: @dark;
+                margin: 3px;
+            }
+
+            input[type="radio"]:checked:disabled ~ .check:after {
+                background-color: @inputDisabledState;
+            }
+        }
+    }
+}
+
+.input-control {
+    &.switch {
+        input[type="checkbox"] {
+            position: absolute;
+            opacity: 0;
+            width: 1px;
+            height: 1px;
+        }
+
+        .caption {
+            margin: 0 5px;
+        }
+
+        .check {
+            //background-color: transparent;
+            position: relative;
+            .size(18px, 45px);
+            outline: 2px #a6a6a6 solid;
+            border: 1px #fff solid;
+            cursor: pointer;
+            background: #A6A6A6;
+            z-index: 1;
+            display: inline-block;
+            vertical-align: middle;
+        }
+
+        .check:after {
+            position: absolute;
+            left: -1px;
+            top: -1px;
+            display: block;
+            content: "";
+            .size(16px, 9px);
+            outline: 2px #333 solid;
+            border: 1px #333 solid;
+            cursor: pointer;
+            background: #333;
+            z-index: 2;
+            //transition: left 0.3s ease, right 0.3s ease;
+        }
+
+        input[type="checkbox"]:focus ~ .check, input[type="radio"]:focus ~ .check {
+            outline: 1px @grayLight dotted !important;
+        }
+
+        input[type="checkbox"]:checked ~ .check {
+            background: #008287;
+            &:after {
+                left: auto;
+                right: -1px;
+            }
+        }
+
+        input[type="checkbox"]:disabled ~ .check {
+            background-color: @inputDisabledBgState;
+            border-color: @white;
+            &:after {
+                background-color: @inputDisabledState;
+                outline-color: @inputDisabledState;
+                border-color: @inputDisabledState;
+            }
+        }
+    }
+}
+
+.input-control {
+    &.text, &.password, &.file, &.email, &.tel, &.number {
+        display: inline-block;
+        cursor: pointer;
+        position: relative;
+        background-color: #fff;
+        outline: 0;
+        height: 34px;
+        width: 100%;
+
+        .btn-clear, .btn-reveal, .btn-date, .btn-file, .btn-search {
+            background-color: #F0F0F0;
+            position: absolute;
+            top: 5px;
+            z-index: 2;
+            border: 0;
+            right: 4px;
+            .square(24px);
+            min-height: 1px;
+            min-width: 1px;
+            padding: 0;
+            margin: 0;
+            display: none;
+            &:after {
+                font-family: @sysIconFontName;
+                font-size: 1em;
+            }
+            &:not(:disabled):active {
+                background-color: @dark;
+                color: @white;
+            }
+            &:active {
+                left: auto;
+            }
+
+            &:focus {
+                outline: 1px #ccc dotted ;
+            }
+        }
+
+        input:focus ~ .btn-clear, input:focus ~ .btn-reveal {
+            display: block;
+        }
+
+        input:not(:focus) ~ .btn-clear:active, input:not(:focus) ~ .btn-reveal:active {
+            display: block;
+        }
+
+        .btn-clear:after {content: "\e00d";}
+        .btn-reveal:after {content: "\e007";}
+        .btn-search:after {content: "\e00e";}
+        .btn-date:after {content: "\e013";}
+        .btn-file:after {content: "\e008";}
+        .btn-search {display: block;}
+        .btn-date {display: block;}
+        .btn-file {display: block;}
+
+        [class*="btn-"] {
+            background-color: transparent;
+        }
+
+        input::-ms-reveal, input::-ms-clear {
+            display: none;
+        }
+
+        input {
+            border: 1px @inputRestState solid;
+            width: 100%;
+            height: 100%;
+            padding: 5px;
+            z-index: 1;
+            -webkit-appearance: none;
+            //padding-right: 30px;
+            &:focus {
+                outline: 0;
+                border-color: @inputFocusState;
+            }
+            &:disabled {
+                padding-right: 5px;
+            }
+        }
+
+        input:disabled ~ .btn-clear, input:disabled ~ .btn-reveal {
+            display: none;
+        }
+
+        input::-moz-placeholder {color: @placeHolderText;}
+        input::-webkit-input-placeholder {color: @placeHolderText;}
+    }
+}
+
+.input-control {
+    &.select, &.textarea {
+        display: inline-block;
+        cursor: pointer;
+        position: relative;
+        width: 100%;
+        select, textarea {
+            border: 1px @inputRestState solid;
+            width: 100%;
+            padding: 5px;
+            &:focus {
+                outline: 0;
+                border-color: @inputFocusState;
+            }
+            &:disabled {
+                padding-right: 5px;
+            }
+        }
+
+        textarea {
+            min-height: 100px;
+        }
+    }
+}
+
+.input-control {
+    &.text, &.password, &.select, &.textarea, &.file, &.email, &.tel, &.number {
+        &.warning-state {
+            input, select, textarea {
+                border-color: @orange;
+            }
+        }
+        &.error-state {
+            input, select, textarea {
+                border-color: @red;
+            }
+        }
+        &.info-state {
+            input, select, textarea {
+                border-color: @lightBlue;
+            }
+        }
+        &.success-state {
+            input, select, textarea {
+                border-color: @green;
+            }
+        }
+
+        input[data-state="warning"] {
+            border-color: @orange;
+        }
+        input[data-state="error"] {
+            border-color: @red;
+        }
+        input[data-state="info"] {
+            border-color: @lightBlue;
+        }
+        input[data-state="success"] {
+            border-color: @green;
+        }
+    }
+}
+
+.input-control {
+    &.text, &.password {
+        //input:invalid  {border-color: @red;}
+    }
+}
+
+.input-control {
+    &.text, &.password, &.select, &.textarea, &.file, &.email, &.tel, &.number {
+        &[class*="span"] {
+            margin-left: 0;
+        }
+        &.block {
+        }
+    }
+}
+
+.input-control {
+    &.file {
+        overflow: hidden;
+        input[type="file"] {
+            position: absolute;
+            opacity: 0;
+            width: 1px;
+            height: 1px;
+            bottom: 0;
+            right: 0;
+        }
+    }
+}
+
+input[type="button"], input[type="submit"], input[type="reset"] {
+    .button;
+}
+
+input[type=number]::-webkit-inner-spin-button, 
+input[type=number]::-webkit-outer-spin-button { 
+  -webkit-appearance: none; 
+  margin: 0; 
+}