@import "../buttons"; .button-dropdown { position: relative; display: inline-block; &.open { .secondary-picker { border-bottom-right-radius: 0; } .secondary-items { display:block; } } &.bordered, &:hover { .primary-item, .only-item { .btn(); height: 32px; padding-top: 7px; line-height: 18px; border-radius: 4px 0 0 4px; } } &.dropdown-btn-emphasis { .primary-item, .secondary-picker, .only-item { .btn.btn-emphasis; } } &.dropdown-btn-text { .primary-item, .secondary-picker, .only-item { .btn.btn-text; height: 28px; line-height: 1; } .primary-item, .only-item { padding-top: 5px; } .secondary-picker { padding: 4px 8px 2px 8px; } .secondary-items { .menu { .item { font-size: 13px; padding: 6px 11px; &:first-child { padding-top: 6px; } &:last-child { padding-bottom: 6px; } } } } } .primary-item, .only-item { padding: 0.33em 1em; cursor: default; color: @btn-default-text-color; height: 32px; padding-top: 7px; line-height: 18px; vertical-align:top; } .primary-item { border-radius: 4px 0 0 4px; } .secondary-picker { .btn(); height: 32px; border-radius: 0 4px 4px 0; border-left: 0; padding: 7px 8px 3px 8px; vertical-align:top; img { vertical-align: baseline; } } .secondary-items { &:hover { cursor: default; } &.left { width:auto; left:-1px; right:auto; white-space:nowrap; } border: 1px solid rgba(0, 0, 0, 0.15); border-radius: 4px 0 4px 4px; box-shadow: 0 3px 10px rgba(0, 0, 0, 0.20); z-index: 2; background-color: @background-primary; line-height: 14px; position: absolute; right: -1px; // -1, because of the border above white-space:nowrap; display:none; .menu { .footer-container, .header-container { display:none; } .content-container { background: transparent; margin-top:0; } .item { padding: 6px 15px; img { margin-right:4px; vertical-align: text-bottom; } &.selected { background-color: inherit; color:@text-color; } } .item:first-child { padding-top: 9px; border-top-left-radius: 4px; } .item:last-child { padding-bottom: 9px; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; } .item:hover { background-color: darken(@background-primary, 3%); color:inherit; } } } img { background-color: @text-color; } } body.platform-win32 { .button-dropdown { .primary-item { .windows-btn-bg; .windows-btn-border; border-radius: 0; height: 34px; padding-top: 5px; } .secondary-picker { .windows-btn-bg; .windows-btn-border; border-left: 0; height: 34px; padding-top: 5px; box-shadow: 0 0 0; } .secondary-picker, .secondary-items { border-radius: 0; } &.dropdown-btn-emphasis { .primary-item, .secondary-picker, .only-item { border: 0; background: @btn-emphasis-bg-color; &:hover { border-radius: 0; background: darken(@btn-emphasis-bg-color, 10%); } &:active { background: @btn-emphasis-bg-color; box-shadow: 0 0 0; } } } &.dropdown-btn-text { .primary-item, .secondary-picker, .only-item { .btn.btn-text; padding-top: 5px; height: 28px; } .secondary-picker { padding: 4px 8px 2px 8px; } } } }