superdesk-ui-framework 7.0.0-dev-hg0 → 7.0.0-dev-hg2

package/app/styles/dropdowns/_basic-dropdown.scss

@@ -0,0 +1,760 @@
+@use "sass:color";
+@use "../mixins";
+@use "../variables/colors";
+@use "../variables/dimensions";
+@use "../variables/typography";
+
+// DROPDOWN MENUS : Basic : dropdowns/basic-dropdowns.scss
+
+$dropdownBackground:            var(--color-dropdown-menu-Bg);
+$dropdownLinkColor:             var(--color-dropdown-menu-text);
+$dropdownLinkColorHover:        colors.$sd-text;
+$dropdownLinkBackgroundHover:   colors.$sd-hover;
+
+$dropdownMenuBorderRadius:      dimensions.$border-radius__base--small;
+$focus-box-shadow:              0 0 0 3px colors.$sd-colour--focus-shadow;
+
+// Use the .menu class on any <li> element within the topbar or ul.tabs and you'll get some superfancy dropdowns
+.dropdown {
+    position: relative;
+    display: inline-block;
+
+    // align to top in order to prevent a space at the bottom
+    // which is caused by display: inline-block
+    vertical-align: top;
+
+    a {
+        color: $dropdownLinkColor;
+    }
+
+    a:hover {
+        text-decoration: none;
+    }
+    
+    button {
+        -webkit-appearance: none;
+    }
+}
+
+.dropdown__toggle {
+    cursor: pointer;
+
+    i {
+        vertical-align: sub;
+    }
+
+    &:focus-visible {
+        box-shadow: $focus-box-shadow;
+    }
+}
+
+// Triggers dropdown on a hover
+.dropdown.dropdown--hover:hover {
+    .dropdown__menu { display: block; }
+}
+
+.dropdown__toggle:active,
+.dropdown.open .dropdown__toggle {
+    outline: 0;
+    color: colors.$sd-colour-interactive;
+}
+
+.dropdown.open .dropdown .dropdown__toggle {
+    color: colors.$grayDark;
+}
+
+.dropdown__more-actions .dropdown__toggle > i {
+    opacity: 0.3;
+}
+
+.dropdown__more-actions .dropdown__toggle:hover > i,
+.dropdown__more-actions.open .dropdown__toggle > i {
+    opacity: 1;
+}
+
+
+// Dropdown arrow/caret
+
+.dropdown__caret {
+    display: inline-block;
+    width: 0;
+    height: 0;
+    vertical-align: middle;
+    margin-block-start: -2px;
+    margin-inline-start: 6px;
+    border-inline-start:  4px solid transparent;
+    border-inline-end: 4px solid transparent;
+    border-block-start:   4px solid colors.$sd-text;
+    opacity: .3;
+    content: "";
+    transition: all 0.1s ease-in;
+
+    &.dropdown__caret--white, 
+    &.white {
+        border-top-color: colors.$white;
+    }
+}
+
+.dropdown:hover .dropdown__caret,
+.dropdown.open .dropdown__caret {
+    opacity: 1;
+}
+
+.dropdown.open .dropdown__caret {
+    border-top-color: colors.$sd-colour-interactive;
+}
+
+// The dropdown menu
+
+.dropdown__menu {
+    position: absolute;
+    inset-block-start: 100%;
+    inset-inline-start: 0;
+    z-index: dimensions.$zindexDropdown;
+    display: none; // none by default, but block on "open" of the menu
+    min-width: 200px;
+    padding: 1rem 0;
+    margin: 0; // override default ul
+    list-style: none;
+    background-color: $dropdownBackground;
+    box-shadow: dimensions.$shadow__dropdown--default;
+    border-radius: $dropdownMenuBorderRadius;
+    text-align: start;
+
+    .dropdown {
+        width: 100%;
+    }
+
+    // Links within the dropdown menu
+    li, .dropdown__menu-item {
+        a:not(.btn), button:not(.btn):not(.dropdown__menu-close):not(.toggle-button) {
+            display: block;
+            font-weight: normal;
+            line-height: typography.$baseLineHeight;
+            white-space: nowrap;
+            width: 100%;
+            min-width: 200px;
+            position: relative;
+            color: $dropdownLinkColor;
+            background-color: colors.$sd-colour-background__menu-item;
+            padding: .6rem 1.6rem;
+            margin-block-end: .2rem;
+            font-size: 1.3rem;
+            text-decoration: none;
+            text-align: start;
+            transition: dimensions.$sd-transition__menu-item;
+
+            > i[class^="icon-"], i[class*=" icon-"], i[class^="filetype-icon-"] {
+                margin-inline-end: 1rem;
+                margin-block-start: -0.3rem;
+                min-width: 1.9rem;
+                vertical-align: middle;
+                color: var(--color-text-muted);
+            }
+
+            > i[class^="icon-"] {
+                margin-inline-end: 1rem;
+                margin-block-start: -0.3rem;
+                min-width: 1.9rem;
+                vertical-align: middle;
+                color: var(--color-icon-default);
+            }
+
+            &.disabled, &[disabled] {
+                opacity: .5;
+            }
+        }
+
+        a:not(.btn), button:not(.btn):not(.dropdown__menu-close):not(.toggle-button) {
+            &:hover {
+                background-color: colors.$sd-colour-background__menu-item--hover;
+                text-decoration: none;
+                cursor: pointer;
+            }
+
+            &:focus {
+                background-color: colors.$sd-colour-background__menu-item;
+                box-shadow: var(--sd-shadow__menu-item--focus-inner);
+                text-decoration: none;
+                outline: none;
+            }
+
+            &:active {
+                background-color: colors.$sd-colour-background__menu-item--active;
+            }
+
+            &.disabled:hover, &[disabled]:hover {
+                background-color: none;
+                cursor: default;
+            }
+        }
+
+        .preferred-desk {
+            background-color: var(--sd-colour-interactive--lighten-30) !important;
+        }
+    }
+
+    &.dropdown__menu--plain {
+        li, .dropdown__menu-item {
+            padding: .5rem .7rem;
+
+            &:hover {
+                background: $dropdownLinkBackgroundHover;
+                cursor: pointer;
+            }
+        }
+    }
+
+    .dropdown-filter, .dropdown__filter {
+        height: dimensions.$sd-base-increment * 4;
+        border: 1px solid var(--sd-colour-line--light);
+        border-radius: var(--b-radius--small);
+        padding-inline-end: 5px;
+        padding-inline-start: 5px;
+        transition: all 0.2s ease;
+        color: var(--color-text);
+        background-color: var(--sd-colour-bg__searchbar);
+
+        &:hover {
+            border: 1px solid var(--sd-colour-line--strong);
+        }
+
+        &:focus {
+            border: 1px solid var(--sd-colour-interactive--alpha-70);
+            box-shadow: inset 0 0 0 3px var(--sd-colour-interactive--alpha-20);
+        }
+
+        &[disabled] {
+            border-color: var(--sd-colour-line--x-light);
+            background-color: var(--sd-colour-bg__searchbar);
+        }
+    }
+}
+
+.dropdown__menu--has-head-foot {
+    padding: 0;
+
+    .dropdown__menu-label {
+        margin: 0.4rem 0;
+    }
+
+    .dropdown__menu-header {
+        flex: 0 0;
+        padding: 0.6rem 0;
+        margin: 0;
+
+        .dropdown__menu-label {
+            margin: 0.6rem 0 0.4rem;
+        }
+    }
+
+    .dropdown__menu-body {
+        overflow-y: auto;
+        overflow-x: hidden;
+        flex: 0 1;
+        padding: 0.6rem 0;
+        max-height: 320px;
+    }
+
+    .dropdown__menu-body:first-child {
+        .dropdown__menu-label {
+            margin: 0.6rem 0 0.4rem;
+        }
+    }
+
+    .dropdown__menu-footer {
+        flex: 0 0;
+        padding: 0.6rem 0;
+        margin: 0;
+        
+    }
+
+    &.open {
+        display: flex;
+    }
+}
+
+// Dividers (basically an hr) within the dropdown
+.dropdown__menu-divider {
+    height: 1px;
+    margin: 0.8rem 0;
+    overflow: hidden;
+    background-color: var(--color-border-line--light);
+}
+
+// Button variation for menu items with active state (.dropdown__menu-item--active); 
+// List item variation (.dropdown__menu-item--highlighted) adds background color to the .li item
+.dropdown__menu {
+    .dropdown__menu-item--active {
+        button, button:hover {
+            background-color: var(--sd-colour-interactive--lighten-10) !important;
+            color: white !important;
+
+            [class^="icon-"], [class*=" icon-"],
+            [class^="filetype-icon-"], [class*=" filetype-icon-"] {
+                color: white !important;
+            }
+        }
+
+        button:hover {
+            background-color: colors.$sd-colour-interactive !important;
+        }
+    }
+
+    .dropdown__menu-item--highlighted {
+        background-color: color.adjust(colors.$darkViolet, $lightness: 30%);
+    }
+
+    .dropdown__menu-item--no-link {
+        font-weight: 400;
+        line-height: 1.8rem;
+        position: relative;
+        color: #747474;
+        padding: .6rem 1.6rem;
+        margin-block-end: .2rem;
+        font-size: 1.3rem;
+        text-align: start;
+    }
+
+    label {
+        display: inline-block;
+        margin: 0;
+
+        + .dropdown__menu-info {
+            margin-inline-start: 4px;
+        }
+    }
+}
+
+.dropdown__menu-label {
+    text-transform: uppercase;
+    font-size: 1.1rem;
+    color: var(--color-text-subdued);
+    font-weight: 500;
+    padding-inline-start: 1.6rem;
+    margin-block-end: .6rem;
+
+    .dropdown__menu-close {
+        position: absolute;
+        inset-block-start: 1rem;
+        inset-inline-end: 1rem;
+        padding: 0;
+        margin: 0;
+        border: 0;
+        width: auto;
+        opacity: .3;
+        background-color: transparent;
+        cursor: pointer;
+
+        i {
+            margin-inline-end: 0 !important;
+        }
+
+        &:hover, &:focus {
+            background-color: transparent;
+            opacity: 1;
+        }
+    }
+}
+.dropdown__menu-header {
+    border-block-end: 1px solid var(--color-border-line--light);
+    margin-block-end: 0.6rem;
+}
+
+.dropdown__menu-footer {
+    padding: 1rem;
+    margin-block-start: 0.6rem;
+    border-block-start: 1px solid var(--color-border-line--light);
+}
+
+.dropdown__menu-footer--align-right {
+    text-align: end;
+}
+
+.dropdown__menu-footer--has-list {
+    padding: 0;
+    padding-block-start: 0.6rem;
+    margin-block-end: -0.4rem;
+}
+
+.dropdown__menu-info {
+    color: colors.$grayLight;
+    font-style: italic;
+    vertical-align: middle;
+}
+
+.dropdown__menu-item {
+    padding: 0;
+}
+
+.dropdown__menu-item--left-10 {
+    padding-inline-start: 1rem;
+}
+
+.dropdown__menu--padded-l10 {
+    > li {
+        padding-inline-start: 1rem;
+    }
+
+    .dropdown__menu-item {
+        padding: 0;
+    }
+}
+
+// Aligns the dropdown menu to right
+.dropdown__menu--right {
+    inset-inline-end: 0;
+    inset-inline-start: auto;
+}
+
+.dropdown__menu {
+    .menu-item--active {
+        button, button:hover {
+            background-color: var(--sd-colour-interactive--lighten-10);
+            color: white;
+
+            [class^="icon-"], [class*=" icon-"],
+            [class^="filetype-icon-"], [class*=" filetype-icon-"] {
+                color: white;
+            }
+        }
+
+        button:hover {
+            background-color: colors.$sd-colour-interactive;
+        }
+    }
+}
+
+// Open state for the dropdown
+.dropdown.open {
+    > .dropdown__menu {
+        display: block;
+
+        &.dropdown__menu--scrollable {
+            max-height: 36rem;
+            overflow: auto;
+            overflow-x: hidden;
+        }
+
+        &.dropdown__menu--has-head-foot {
+            display: flex;
+            flex-direction: column;
+            max-height: 36rem;
+        }
+    }
+}
+
+//Right aligned dropdowns
+.dropdown--align-right .dropdown__menu, .dropdown--align-right.dropdown__menu {
+    inset-inline-start: auto;
+    inset-inline-end: 0;
+
+    &:before {
+        inset-inline-start: auto;
+        inset-inline-end:10px;
+    }
+}
+
+
+.dropdown--dropup {
+    // Reverse the caret
+    .dropdown__caret {
+        @include mixins.transition(all, 0.2s, eas-in);
+        border-block-start: 0;
+        border-block-end: 4px solid colors.$black;
+        content: "\2191";
+    }
+
+    // Different positioning for bottom up menu
+    .dropdown__menu {
+        inset-block-start: auto;
+        inset-block-end: 100%;
+        margin-block-end: 4px;
+    }
+
+    &.open {
+        .dropdown__caret {
+            border-bottom-color: colors.$sd-colour-interactive !important;
+        }
+    }
+}
+
+.dropdown--dropleft {
+    display: inline-block;
+    vertical-align: middle;
+
+    .dropdown__menu {
+        inset-block-start: -2.3rem;
+        inset-inline-start: auto;
+        inset-inline-end: calc(100% + 0.3rem);
+    }
+}
+
+.dropdown--dropright {
+    display: inline-block;
+    vertical-align: middle;
+
+    .dropdown__menu {
+        inset-block-start: -2.3rem;
+        inset-inline-start: 100%;
+    }
+}
+
+.dropdown--dropright.open {
+    .dropdown__caret {
+        transform: rotate(-90deg);
+
+    }
+}
+
+.dropdown--dropleft.open {
+    .dropdown__caret {
+        transform: rotate(90deg);
+
+    }
+}
+
+.dropdown--dropright, .dropdown--dropleft {
+    &.dropdown--dropup {
+        .dropdown__menu {
+            inset-block-end: -2.3rem;
+            inset-block-start: auto;
+        }
+    }
+}
+
+// CLassic dropdown with no arrow
+
+.dropdown--noarrow {
+    display: inline-block;
+
+    .dropdown__menu {
+        margin: 0;
+        max-height: 250px;
+        overflow: auto;
+    }
+
+    .dropdown__menu:before {
+        display: none;
+    }
+
+    .dropdown {
+        .dropdown__toggle {
+            display: block;
+            padding: 3px 15px;
+            clear: both;
+            font-weight: normal;
+            line-height: 18px;
+            white-space: nowrap;
+        }
+    }
+
+    &.open li > .dropdown .dropdown__toggle {
+        display: block;
+        padding: 5px 7px;
+        margin: 0;
+        clear: both;
+        font-weight: normal;
+        line-height: 18px;
+        white-space: nowrap;
+    }
+}
+
+.dropdown--noarrow.dropdown--no-scroll {
+    .dropdown__menu {
+        max-height: none;
+        overflow: visible;
+    }
+} 
+
+// CLassic scrollable dropdown
+// -------------------------------------------------
+
+// .dropdown.dropdown--scrollable {
+//     .dropdown__menu {
+//         max-height: 250px;
+//         overflow: auto;
+//     }
+// }
+
+// Classic dropdown with bigger width
+// -------------------------------------------------
+.dropdown--bigger {
+    .dropdown__menu {
+        min-width: 238px;
+    }
+}
+
+.dropdown--bigger-500 {
+    .dropdown__menu {
+        min-width: 300px;
+    }
+}
+
+// Activity dropdown
+// -------------------------------------------------
+.dropdown--more-activity {
+    .dropdown__menu {
+        min-width: 0;
+        padding: 5px;
+        border-radius: $dropdownMenuBorderRadius;
+        border:0;
+        z-index: 1;
+        margin-block-start: -1px;
+
+        &:before {
+            display: none;
+        }
+
+        li {
+            display: inline-block;
+            vertical-align: middle;
+
+            a {
+                padding: 0;
+
+                i {
+                    margin-inline-end: 0;
+                }
+
+                span {
+                    display: none;
+                }
+            }
+        }
+    }
+}
+
+.dropdown__button-label {
+    display: inline-block;
+    color: inherit;
+    font-weight: 300;
+    opacity: 0.65;
+    padding-inline-end: 0.5rem; 
+    letter-spacing: 0.02rem;
+}
+
+// Dark dropdowns
+// -------------------------------------------------
+.dropdown.dropdown--boxed {
+    .dropdown__toggle {
+        text-align: start;
+        background: transparent;
+        height: var(--form-element-height-default);
+        padding: 0.7rem 1.5rem;
+        border-radius: dimensions.$border-radius__base--small;
+        color: var(--color-text);
+        transition: all 0.3s cubic-bezier(0.55, 0, 0.55, 0.2);
+
+        .dropdown__caret {
+            border-top-color: var(--color-text);
+            margin-inline-start: 1rem;
+        }
+    }
+
+    .dropdown__toggle--small {
+        padding: 0.5rem 1.5rem;
+    }
+
+    .dropdown__toggle--hollow {
+        border: 1px solid var(--sd-colour-line--medium);
+        background: none;
+
+        &:hover {
+            border: 1px solid var(--sd-colour-line--strong);
+        }
+    }
+
+    .dropdown__toggle--line {
+        border-radius: dimensions.$border-radius__base--x-small dimensions.$border-radius__base--x-small 0 0;
+        background-color: var(--color-input-bg);
+        border-block-end: 1px solid var(--color-input-border);
+
+        &:hover {
+            border-color: var(--color-input-border-hover);
+            background-color: var(--color-input-bg--hover);
+        }
+
+        &:focus {
+            box-shadow: 0 1px 0 0 var(--sd-colour-interactive);
+            border-color: var(--sd-colour-interactive);
+            background-color: var(--sd-colour-interactive--alpha-20);
+        }
+    }
+
+    &.open {
+        .dropdown__toggle--hollow {
+            border: 1px solid var(--sd-colour-interactive);
+            background-color: var(--sd-colour-interactive--alpha-20);
+        }
+
+        .dropdown__toggle--line {
+            box-shadow: 0 1px 0 0 var(--sd-colour-interactive);
+            border-color: var(--sd-colour-interactive);
+            background-color: var(--sd-colour-interactive--alpha-20);
+        }
+    }
+}
+
+// Full width dropdown 
+// -------------------------------------------------
+.dropdown.dropdown--full-width {
+    width: 100%;
+
+    .dropdown__toggle {
+        .dropdown__caret {
+            float: inline-end;
+            margin-block-start: 6px;
+        }
+    }
+}
+
+// Multiedit dropdown
+// -------------------------------------------------
+.dropdown__menu--multiedit {
+    max-height: 400px;
+    overflow-y: auto;
+    overflow-x: hidden;
+
+    li {
+        margin-block-end: 4px;
+    }
+
+    li button {
+        width: 300px !important;
+        padding-inline-end: 30px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        position: relative;
+        border-radius: 0;
+
+        i {
+            position: absolute;
+            inset-inline-end: -5px;
+            inset-block-start: 9px;
+        }
+
+        &.disabled, &.disabled:hover {
+            background: #f0f0f0;
+
+            i {
+                opacity: .2;
+            }
+        }
+    }
+
+    li .msg {
+        padding: 0 20px;
+    }
+}
+
+.dark-ui {
+    .dropdown__caret {
+        border-top-color: colors.$white;
+    }
+    
+    .dropdown.open .dropdown__caret {
+        border-top-color: colors.$sd-colour-interactive;
+    }
+}
+