overleaf/services/web/frontend/stylesheets/components/split-menu.less
June Kelly 17109393c5 Merge pull request #12387 from overleaf/jk-split-button-tweaks
[web] Split-menu style tweaks

GitOrigin-RevId: a04121981c4fe240c247cf03da5be7052c26f541
2023-04-12 08:04:28 +00:00

95 lines
2 KiB
Text

.split-menu {
display: flex;
&.btn-md,
&.btn-sm,
&.btn-xs {
padding: 0;
}
&.btn-md {
& > .split-menu-button,
& > .split-menu-dropdown-toggle {
height: 36px;
}
}
&.btn-sm {
& > .split-menu-button,
& > .split-menu-dropdown-toggle {
height: 32px;
}
}
&.btn-xs {
& > .split-menu-button,
& > .split-menu-dropdown-toggle {
height: 28px;
}
}
&.btn-primary {
background-color: @ol-green;
}
.split-menu-icon {
margin-right: @line-height-computed / 4;
}
.split-menu-button {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
height: 100%;
padding-top: 0;
padding-bottom: 0;
&.btn-primary {
border-right: 1px solid fade(@neutral-90, 16%);
}
// on new css, btn-secondary already has a border
&.btn-secondary when (@is-new-css = false) {
border-right: 1px solid fade(@ol-blue-gray-6, 16%);
}
&.btn-danger {
border-right: 1px solid fade(@neutral-90, 16%);
}
&[disabled] when (@is-new-css = false) {
opacity: 1;
}
&.no-left-radius {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
}
.split-menu-button when (@is-new-css = true) {
// workaround for for the blue 2x border on the new css
// if z-index rule is not added, the border will overlap under the `split-menu-dropdown-toggle` since margin between both component is only 1px
z-index: 1;
}
.split-menu-dropdown {
float: none;
display: flex;
flex-wrap: nowrap;
align-self: stretch;
margin-right: 6px;
.split-menu-dropdown-toggle {
border-bottom-left-radius: 0;
border-top-left-radius: 0;
padding: 0 8px;
// on new css, btn-secondary has a border
// since the border between both buttons already been defined in the `split-menu-button`
// we will remove the rule from the dropdown toggle
&.btn-secondary when (@is-new-css = true) {
border-left: none;
}
}
}
}