overleaf/services/web/frontend/stylesheets/components/split-menu.less
Thomas 24023dd267 Merge pull request #15901 from overleaf/tm-design-system-updates-teardown
Design system updates test tear down and clean up

GitOrigin-RevId: 743423f7c31c0ba89093bba0107d7e6799e1c309
2023-11-28 09:04:06 +00:00

86 lines
1.7 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;
}
}
}
}