overleaf/services/web/frontend/stylesheets/components/split-menu.less
Alf Eaton 3de9efb1bb Fix stripe alignment on Recompile button (#16643)
GitOrigin-RevId: 504bc90889e89c62727777eedc81dfa192094e75
2024-01-24 09:04:11 +00:00

90 lines
1.8 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%);
}
&.btn-danger {
border-right: 1px solid fade(@neutral-90, 16%);
}
&.no-left-radius {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
}
.split-menu-button {
// 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 {
border-left: none;
}
&.no-left-border {
border-left: none;
}
}
}
}