active_administration 0.0.2 → 0.0.3

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

@@ -0,0 +1,469 @@
+#menu {
+    .init {
+        margin: 0;
+        padding: 0;
+        list-style: none;
+    }
+
+    .item-vertical {
+        display: block;
+        margin: 10px 0;
+        padding: 0;
+        vertical-align: baseline;
+        //zoom: 1;
+        position: relative;
+        font-family: @segoeFontFamily;
+    }
+
+    .item-horizontal {
+        display: inline-block;
+        margin: 0 15px;
+        padding: 0;
+        vertical-align: baseline;
+        //zoom: 1;
+        position: relative;
+        font-family: @segoeFontFamily;
+    }
+}
+
+.vertical-menu {
+
+    #menu > .init;
+
+    li {
+        #menu > .item-vertical;
+
+        a {
+            display: block;
+            text-decoration: none;
+            .menu-item;
+            //line-height: 18pt;
+            color: inherit;
+
+            &:hover {
+                //text-decoration: underline;
+            }
+        }
+
+        &.title {
+            .menu-title;
+            margin-bottom: 20px;
+        }
+    }
+
+    &.compact {
+        a {
+            //.menu-item-secondary;
+            font-weight: normal;
+            font-size: 10.5pt;
+            line-height: 12pt;
+            color: inherit;
+        }
+        li.title {
+            margin-bottom: 10px;
+            .item-title;
+        }
+    }
+
+    & ul.secondary {
+        #menu > .init;
+        margin-left: 15px;
+        li {
+            a {
+                .menu-item-secondary;
+                color: inherit;
+            }
+        }
+    }
+}
+
+.horizontal-menu {
+    #menu > .init;
+    padding: 0px;
+
+
+    li {
+        #menu > .item-horizontal;
+
+        a {
+            display: inline-block;
+            text-decoration: none;
+            .menu-item;
+            color: inherit;
+            padding: @subunitSize ;
+
+
+            &:hover {
+                background: inherit;
+            }
+        }
+    }
+
+    &.compact {
+        li {
+            margin-left: 5px;
+        }
+        a {
+            //.menu-item-secondary;
+            font-weight: normal;
+            font-size: 10.5pt;
+            color: inherit;
+        }
+        .dropdown-toggle {
+            &:after {
+                bottom: 2px;
+            }
+        }
+    }
+
+    li:first-child {
+        margin-left: 0px;
+    }
+
+    li:hover > .dropdown-menu[data-show="hover"] {
+        display: block;
+    }
+}
+
+.side-menu {
+    .vertical-menu;
+    position: relative;
+    background: @white;
+    min-width: 200px;
+    width: auto;
+    border: 1px solid rgba(0, 0, 0, 0.2);
+
+    li {
+        margin: 5px 0 0;
+        width: 100%;
+
+        &:last-child {
+            margin-bottom: @subunitSize;
+        }
+    }
+
+    a {
+        padding: 8px 20px !important;
+        color: inherit;
+        font-size: 15px !important;
+        line-height: 14px !important;
+    }
+
+    li:hover {
+        background: @cyan;
+        color: @white;
+    }
+
+    .divider {
+        padding: 0;
+        height: 1px;
+        margin: 9px 1px;
+        overflow: hidden;
+        background-color: #e5e5e5;
+        &:hover {
+            background: #e5e5e5;
+        }
+    }
+
+    .dropdown-menu {
+        left: 100%;
+        top: -10%;
+    }
+
+    &.left {
+        .dropdown-menu {
+            left: -100%;
+        }
+    }
+
+    > li:hover > .dropdown-menu[data-show="hover"] {
+        display: block;
+    }
+
+    & > li > a.dropdown-toggle {
+
+        &:after {
+            font-family: @sysIconFontName;
+            font-size: .8em;
+            content: "\e156";
+            left: 85%;
+            top: .75em;
+            .rotate(0deg);
+        }
+    }
+
+    &.text-right {
+        li {
+            text-align: right;
+        }
+    }
+}
+
+
+.dropdown-menu {
+    .vertical-menu;
+    position: absolute;
+    display: none;
+    z-index: @zindexDropdown;
+    background: @white;
+    min-width: 220px;
+    width: auto;
+    border: 1px solid @menuBorder;
+    //box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
+
+    &.shadow {
+        box-shadow: 3px 3px 0 @menuShadowA;
+    }
+
+    li {
+        margin: 5px 0 0;
+        width: 100%;
+        border: 1px transparent solid;
+
+        &:last-child {
+            margin-bottom: @subunitSize;
+        }
+
+        &.disabled, &.disabled:hover {
+            cursor: default !important;
+            background: transparent !important;
+            color: @grayLighter;
+            a {
+                color: inherit;
+                cursor: inherit;
+                background: inherit;
+            }
+        }
+    }
+
+    a {
+        padding: 8px 32px !important;
+        color: inherit;
+        font-size: 15px !important;
+        line-height: 14px !important;
+        cursor: pointer;
+    }
+
+    li:hover {
+        background: @menuItemHoverBackground;
+        border-color: @menuItemHoverBorder;
+        //color: @white;
+    }
+
+    li.checked a, li.checked-partial a, li.unchecked a {
+        &:before {
+            font-family: @sysIconFontName;
+            position: absolute;
+            left: 10px;
+            content: "\e004";
+        }
+    }
+
+    li.checked-partial a {
+        &:before {
+            content: "\e005";
+        }
+    }
+	
+	li.unchecked a {
+        &:before {
+            content: "\e005";
+        }
+    }
+
+    &.place-right {
+        right: -15px;
+        left: auto;
+    }
+
+    .divider {
+        padding: 0;
+        height: 1px;
+        margin: 9px 1px;
+        overflow: hidden;
+        background-color: #e5e5e5;
+        border-width: 0;
+        &:hover {
+            background: #e5e5e5;
+        }
+    }
+
+    &.open {
+        display: block !important;
+    }
+
+    .dropdown-menu {
+        left: 100%;
+        top: -10%;
+    }
+
+    > li:hover > .dropdown-menu[data-show="hover"] {
+        display: block;
+    }
+
+    & > li > a.dropdown-toggle {
+
+        &:after {
+            font-family: @sysIconFontName;
+            font-size: .7em;
+            content: "\e001";
+            left: 90%;
+            top: 50%;
+            margin-top: -1.4em;
+            .rotate(-90deg);
+        }
+    }
+
+    &.drop-left {
+        left: -100%;
+        //right: auto;
+    }
+    &.drop-up {
+        top: auto;
+        bottom: 0;
+    }
+
+    .menu-title {
+        background-color: @menuItemTitleBackground;
+        font-size: 12px;
+        //font-weight: bold;
+        line-height: 14px;
+        padding: 4px 8px;
+        border: 0;
+        border-bottom: 1px @menuBorder solid;
+        border-top: 1px @menuBorder solid;
+        color: #646464;
+        &:first-child {
+            margin: 0;
+            border-top-width: 0;
+            &:hover {
+                border-top-width: 0;
+            }
+        }
+        &:hover {
+            background-color: @menuItemTitleBackground;
+            cursor: default;
+            border: 0;
+            border-bottom: 1px @menuBorder solid;
+            border-top: 1px @menuBorder solid;
+        }
+    }
+
+    &.inverse {
+        border: 2px #3b3b3b solid;
+
+        li {
+            border: 0;
+            a {
+                padding: 9px 32px !important;
+            }
+        }
+
+        li:hover {
+            border: 0;
+            background-color: #e5e5e5;
+        }
+
+        .menu-title {
+            &:hover {
+                background-color: @menuItemTitleBackground;
+            }
+        }
+
+        .divider {
+            margin-left: 0;
+            margin-right: 0;
+        }
+    }
+
+    &.dark {
+        background-color: @grayDark;
+        border: 2px @grayDark solid;
+        color: @white;
+
+        &.opacity {
+            background-color: rgba(61,61,61,.9);
+        }
+
+        li {
+            border: 0;
+            color: inherit;
+            a {
+                padding: 9px 32px !important;
+                color: inherit;
+            }
+            &.disabled, &.disabled:hover {
+                cursor: default !important;
+                background: transparent !important;
+                color: @gray;
+                a {
+                    color: inherit;
+                    cursor: inherit;
+                    background: inherit;
+                }
+            }
+        }
+
+        li:hover {
+            border: 0;
+            background-color: saturate(@dark, 10%);
+            color: @white;
+        }
+
+        .menu-title {
+            background-color: #3b3b3b;
+            &:hover {
+                background-color: #3b3b3b;
+            }
+        }
+
+        .divider {
+            margin-left: 0;
+            margin-right: 0;
+            background-color: @gray;
+            &:hover {
+                background: @gray;
+            }
+        }
+    }
+}
+
+.dropdown-toggle {
+    &:after {
+        position: absolute;
+        margin-left: .45em;
+        bottom: 0;
+        font-family: @sysIconFontName;
+        font-size: .7em;
+        content: '\e001';
+    }
+
+    &.no-marker {
+        &:after {
+            content: "";
+        }
+    }
+}
+
+.contextmenu {
+    z-index:1000;
+    position: absolute;
+    background-color:#FFFFFF;
+    border: 2.5px solid rgb(42,42,42);
+    padding: 2px;
+    .no-user-select;
+
+    .item:active {
+        background-color:rgb(0,0,0);
+        color:rgb(255,255,255);
+    }
+    .item:hover {
+        background-color:rgb(222,222,222);
+    }
+    .item {
+        background-color:#FFFFFF;
+        width:auto;
+        padding: 12px;
+        margin:-2px;
+    }
+}