init

2026-11-13 19:06:11 +03:00 · 2021-08-14 14:35:10 +03:00
parent 6da6da6ad0
commit a66ccba187
63 changed files with 24744 additions and 0 deletions
@@ -0,0 +1,171 @@
+
+/* kit-menu */
+
+:root {
+    /*--kit-color-primary-w2: #67b2e4;*/
+    /*--kit-color-primary-w1: #52a7e0;*/
+    /*--kit-color-primary: #3c9cdd;*/
+    /*--kit-color-primary-b1: #2691d9;*/
+    /*--kit-color-primary-b2: #2283c3;*/
+
+    --kit-menu-border-width: 4px;
+    --kit-menu-hover-label-size: calc(3 * 0.1em);
+    --kit-color-menu-content: #212121fa;
+    --kit-color-menu-item-content-hover: #ffffff1a;
+    --kit-color-menu-content-text: #FFFFFF;
+    --kit-color-menu-content-text-hover: var(--kit-color-primary-w2, #67b2e4);
+}
+
+.kit-menu {
+    /*border-radius: 5px;*/
+    background: var(--kit-color-menu-content);
+    display: none;
+}
+.kit-menu[data-kit-align-horizontal="right"] {
+    border-left: var(--kit-menu-border-width) solid var(--kit-color-primary, #3c9cdd);
+    box-shadow: 0 0 10px 0 #00000033, inset 5px 0 5px -5px var(--kit-color-primary-b2, #2283c3);
+}
+.kit-menu[data-kit-align-horizontal="left"] {
+    border-right: var(--kit-menu-border-width) solid var(--kit-color-primary, #3c9cdd);
+    box-shadow: 0 0 10px 0 #00000033, inset -5px 0 5px -5px var(--kit-color-primary-b2, #2283c3);
+}
+.kit-menu.active {
+    display: block;
+    z-index: 1000;
+}
+
+
+
+
+
+.kit-menu-item {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    cursor: pointer;
+    padding-left: 0.5em;
+    padding-right: 0.5em;;
+    min-width: calc(15 * 1em);
+}
+.kit-menu-item > *:not(.kit-menu) {
+    margin-left: 0.5em;
+    margin-right: 0.5em;
+}
+.kit-menu-item:hover {
+    background-color: var(--kit-color-menu-item-content-hover);
+}
+.kit-menu-item:first-child {
+    border-top: 0;
+}
+
+.kit-menu > * > .kit-menu {
+    z-index: 20;
+}
+.kit-menu > .kit-menu-item:hover > .kit-menu {
+    z-index: 21;
+}
+
+.kit-menu-item__label {
+    flex: 1 1 100%;
+    order: 500;
+    display: block;
+    padding-top: .715em;
+    padding-bottom: .715em;
+    color: var(--kit-color-menu-content-text);
+    position: relative;
+    user-select: none
+}
+.kit-menu-item__icon {
+    flex: 0 0 1.5em;
+    height: 1.5em;
+    width: 1.5em;
+    order: 100;
+    color: var(--kit-color-menu-icon, var(--kit-color-icon, #8c8c8c));
+}
+.kit-menu-item__icon:empty {
+    display: none;
+}
+.kit-menu-item__icon picture,
+.kit-menu-item__icon img,
+.kit-menu-item__icon svg {
+    width: 100%;
+    height: 100%;
+    max-width: 100%;
+    max-height: 100%;
+    display: block;
+    fill: currentColor;
+    transition: inherit;
+    object-fit: contain;
+    object-position: center;
+}
+.kit-menu-item__label > a {
+    color: var(--kit-color-menu-content-text);
+}
+.kit-menu-item__label:hover > a {
+    color: var(--kit-color-menu-content-text-hover);
+}
+.kit-menu[data-kit-align-horizontal="left"] .kit-menu-item:before,
+.kit-menu[data-kit-align-horizontal="right"] .kit-menu-item:before
+{
+    content: "";
+    position: absolute;
+    width: var(--kit-menu-hover-label-size);
+    height: calc(100% - 0.6em);
+    background: var(--kit-color-primary, #3c9cdd);
+    top: 0.3em;
+    transition: 0.3s;
+    opacity: 0;
+    pointer-events: none;
+    left: 0;
+    right: unset;
+}
+.kit-menu[data-kit-align-horizontal="left"] > .kit-menu-item:before {
+    right: 0;
+    left: unset;
+}
+.kit-menu .kit-menu-item:hover:before {
+    opacity: 1;
+}
+.kit-menu-item__arrow {
+    display: none;
+}
+.kit-menu-item__arrow:empty {
+    display: none !important;
+}
+.kit-menu-item > .kit-menu ~ .kit-menu-item__arrow
+{
+    width: 1.5em;
+    height: 1.5em;
+    background: transparent;
+    padding: calc(3 * .1em);
+    display: block;
+    flex: 0 0 1.5em;
+    order: 1000;
+}
+.kit-menu[data-kit-align-horizontal="left"] > .kit-menu-item > .kit-menu ~ .kit-menu-item__arrow {
+    /*order: 10;*/
+    /*transform: rotate(180deg);*/
+}
+.kit-menu[data-kit-align-horizontal="left"] > .kit-menu-item > .kit-menu ~ .kit-menu-item__icon {
+    /*order: 990;*/
+}
+.kit-menu[data-kit-align-horizontal="right"] > .kit-menu-item > .kit-menu ~ .kit-menu-item__arrow {
+
+}
+.kit-menu-item__arrow {
+    color: var(--kit-color-menu-icon, var(--kit-color-icon, #8c8c8c));
+}
+.kit-menu ~ .kit-menu-item__arrow picture,
+.kit-menu ~ .kit-menu-item__arrow img,
+.kit-menu ~ .kit-menu-item__arrow svg {
+    width: 100%;
+    height: 100%;
+    max-width: 100%;
+    max-height: 100%;
+    display: block;
+    fill: currentColor;
+    transition: inherit;
+    object-fit: contain;
+    object-position: center;
+}
+/* kit-menu end*/