/* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- -------------------------------------------------------------------------------- components/dropdown-menus.less -------------------------------------------------------------------------------- -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ & when (@dropdown-menu-enabled) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Dropdown Menu -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .dropdown, .dropup { position: relative; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Dropdown Menu -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .dropdown-menu { .clearfix(); position: absolute; top: 100%; left: 0; z-index: @z-index-dropdown-menu; display: none; float: left; min-width: @dropdown-menu-width-minimum; padding: @dropdown-menu-padding-vertical @dropdown-menu-padding-horizontal; margin: @dropdown-menu-offset-vertical 0 0 @dropdown-menu-offset-horizontal; border-radius: @dropdown-menu-border-radius; .background-clip(border-box); background: @dropdown-menu-default-background-color; #gradient > .vertical(@dropdown-menu-default-background-gradient-color-top, @dropdown-menu-default-background-gradient-color-bottom); border-top-width: @dropdown-menu-default-border-top-width; border-top-color: @dropdown-menu-default-border-top-color; border-right-width: @dropdown-menu-default-border-right-width; border-right-color: @dropdown-menu-default-border-right-color; border-bottom-width: @dropdown-menu-default-border-bottom-width; border-bottom-color: @dropdown-menu-default-border-bottom-color; border-left-width: @dropdown-menu-default-border-left-width; border-left-color: @dropdown-menu-default-border-left-color; .box-shadow(@dropdown-menu-default-shadow); /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Dropdown Menu Header -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .dropdown-menu-header { display: block; padding: floor((@dropdown-menu-header-height-minimum - @dropdown-menu-header-text-line-height) / 2) @dropdown-menu-header-padding-horizontal; margin: @dropdown-menu-header-margin-vertical-top @dropdown-menu-header-margin-horizontal @dropdown-menu-header-margin-vertical-bottom; font-size: @dropdown-menu-header-text-font-size; line-height: @dropdown-menu-header-text-line-height; border-radius: @dropdown-menu-header-border-radius; color: @dropdown-menu-header-default-text-color; font-family: @dropdown-menu-header-default-text-font-family; font-style: @dropdown-menu-header-default-text-font-style; font-weight: @dropdown-menu-header-default-text-font-weight; text-transform: @dropdown-menu-header-default-text-transform; text-shadow: @dropdown-menu-header-default-text-shadow; text-decoration: @dropdown-menu-header-default-text-decoration; text-rendering: @dropdown-menu-header-default-text-rendering; background: @dropdown-menu-header-default-background-color; #gradient > .vertical(@dropdown-menu-header-default-background-gradient-color-top, @dropdown-menu-header-default-background-gradient-color-bottom); border-top-width: @dropdown-menu-header-default-border-top-width; border-top-color: @dropdown-menu-header-default-border-top-color; border-right-width: @dropdown-menu-header-default-border-right-width; border-right-color: @dropdown-menu-header-default-border-right-color; border-bottom-width: @dropdown-menu-header-default-border-bottom-width; border-bottom-color: @dropdown-menu-header-default-border-bottom-color; border-left-width: @dropdown-menu-header-default-border-left-width; border-left-color: @dropdown-menu-header-default-border-left-color; .box-shadow(@dropdown-menu-header-default-shadow); &:first-child { margin-top: 0px; } &:last-child { margin-bottom: 0px; } } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Dropdown Menu Divider -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .dropdown-menu-divider { display: block; padding: 0px @dropdown-menu-divider-padding-horizontal; margin: @dropdown-menu-divider-margin-vertical-top @dropdown-menu-divider-margin-horizontal @dropdown-menu-divider-margin-vertical-bottom; height: @dropdown-menu-divider-height; border-radius: @dropdown-menu-divider-border-radius; background: @dropdown-menu-divider-default-background-color; #gradient > .vertical(@dropdown-menu-divider-default-background-gradient-color-top, @dropdown-menu-divider-default-background-gradient-color-bottom); border-top-width: @dropdown-menu-divider-default-border-top-width; border-top-color: @dropdown-menu-divider-default-border-top-color; border-right-width: @dropdown-menu-divider-default-border-right-width; border-right-color: @dropdown-menu-divider-default-border-right-color; border-bottom-width: @dropdown-menu-divider-default-border-bottom-width; border-bottom-color: @dropdown-menu-divider-default-border-bottom-color; border-left-width: @dropdown-menu-divider-default-border-left-width; border-left-color: @dropdown-menu-divider-default-border-left-color; .box-shadow(@dropdown-menu-divider-default-shadow); &:first-child { margin-top: 0px; } &:last-child { margin-bottom: 0px; } } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Dropdown Menu List -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .dropdown-menu-list { margin-left: @dropdown-menu-list-margin-horizontal; margin-right: @dropdown-menu-list-margin-horizontal; margin-bottom: @dropdown-menu-list-margin-vertical; &:last-child { margin-bottom: 0px; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Dropdown Menu List Item -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ li { list-style: none; padding: floor((@dropdown-menu-list-item-height - @dropdown-menu-list-item-text-line-height) / 2) @dropdown-menu-list-item-padding-horizontal; margin: @dropdown-menu-list-item-margin-vertical @dropdown-menu-list-item-margin-horizontal; font-size: @dropdown-menu-list-item-text-font-size; line-height: @dropdown-menu-list-item-text-line-height; color: @dropdown-menu-list-item-text-color; font-family: @dropdown-menu-list-item-text-font-family; font-style: @dropdown-menu-list-item-text-font-style; font-weight: @dropdown-menu-list-item-text-font-weight; text-transform: @dropdown-menu-list-item-text-transform; text-shadow: @dropdown-menu-list-item-text-shadow; text-decoration: @dropdown-menu-list-item-text-decoration; text-rendering: @dropdown-menu-list-item-text-rendering; background: @dropdown-menu-list-item-background-color; #gradient > .vertical(@dropdown-menu-list-item-background-gradient-color-top, @dropdown-menu-list-item-background-gradient-color-bottom); border-top-width: @dropdown-menu-list-item-border-top-width; border-top-color: @dropdown-menu-list-item-border-top-color; border-right-width: @dropdown-menu-list-item-border-right-width; border-right-color: @dropdown-menu-list-item-border-right-color; border-bottom-width: @dropdown-menu-list-item-border-bottom-width; border-bottom-color: @dropdown-menu-list-item-border-bottom-color; border-left-width: @dropdown-menu-list-item-border-left-width; border-left-color: @dropdown-menu-list-item-border-left-color; .box-shadow(@dropdown-menu-list-item-shadow); &:before { display: none; } /* ----------------------------------------------------------------------------- Dropdown Menu List Item Link ----------------------------------------------------------------------------- */ a { display: block; margin: floor(-(@dropdown-menu-list-item-height - @dropdown-menu-list-item-text-line-height) / 2) -@dropdown-menu-list-item-padding-horizontal; padding: floor((@dropdown-menu-list-item-height - @dropdown-menu-list-item-text-line-height) / 2) @dropdown-menu-list-item-padding-horizontal; /* ----------------------------------------------------------------------------- Dropdown Menu List Item (Default) State: Normal ----------------------------------------------------------------------------- */ color: @dropdown-menu-list-item-default-text-color; font-family: @dropdown-menu-list-item-default-text-font-family; font-style: @dropdown-menu-list-item-default-text-font-style; font-weight: @dropdown-menu-list-item-default-text-font-weight; text-transform: @dropdown-menu-list-item-default-text-transform; text-shadow: @dropdown-menu-list-item-default-text-shadow; text-decoration: @dropdown-menu-list-item-default-text-decoration; text-rendering: @dropdown-menu-list-item-default-text-rendering; background: @dropdown-menu-list-item-default-background-color; #gradient > .vertical(@dropdown-menu-list-item-default-background-gradient-color-top, @dropdown-menu-list-item-default-background-gradient-color-bottom); border-top-width: @dropdown-menu-list-item-default-border-top-width; border-top-color: @dropdown-menu-list-item-default-border-top-color; border-right-width: @dropdown-menu-list-item-default-border-right-width; border-right-color: @dropdown-menu-list-item-default-border-right-color; border-bottom-width: @dropdown-menu-list-item-default-border-bottom-width; border-bottom-color: @dropdown-menu-list-item-default-border-bottom-color; border-left-width: @dropdown-menu-list-item-default-border-left-width; border-left-color: @dropdown-menu-list-item-default-border-left-color; .box-shadow(@dropdown-menu-list-item-default-shadow); } /* ----------------------------------------------------------------------------- Dropdown Menu List Item (Default) State: Hover ----------------------------------------------------------------------------- */ &:hover { a { color: @dropdown-menu-list-item-default-hover-text-color; font-family: @dropdown-menu-list-item-default-hover-text-font-family; font-style: @dropdown-menu-list-item-default-hover-text-font-style; font-weight: @dropdown-menu-list-item-default-hover-text-font-weight; text-transform: @dropdown-menu-list-item-default-hover-text-transform; text-shadow: @dropdown-menu-list-item-default-hover-text-shadow; text-decoration: @dropdown-menu-list-item-default-hover-text-decoration; text-rendering: @dropdown-menu-list-item-default-hover-text-rendering; background: @dropdown-menu-list-item-default-hover-background-color; #gradient > .vertical(@dropdown-menu-list-item-default-hover-background-gradient-color-top, @dropdown-menu-list-item-default-hover-background-gradient-color-bottom); border-top-width: @dropdown-menu-list-item-default-hover-border-top-width; border-top-color: @dropdown-menu-list-item-default-hover-border-top-color; border-right-width: @dropdown-menu-list-item-default-hover-border-right-width; border-right-color: @dropdown-menu-list-item-default-hover-border-right-color; border-bottom-width: @dropdown-menu-list-item-default-hover-border-bottom-width; border-bottom-color: @dropdown-menu-list-item-default-hover-border-bottom-color; border-left-width: @dropdown-menu-list-item-default-hover-border-left-width; border-left-color: @dropdown-menu-list-item-default-hover-border-left-color; .box-shadow(@dropdown-menu-list-item-default-hover-shadow); } } /* ----------------------------------------------------------------------------- Dropdown Menu List Item (Default) State: Active ----------------------------------------------------------------------------- */ &:active { a { color: @dropdown-menu-list-item-default-active-text-color; font-family: @dropdown-menu-list-item-default-active-text-font-family; font-style: @dropdown-menu-list-item-default-active-text-font-style; font-weight: @dropdown-menu-list-item-default-active-text-font-weight; text-transform: @dropdown-menu-list-item-default-active-text-transform; text-shadow: @dropdown-menu-list-item-default-active-text-shadow; text-decoration: @dropdown-menu-list-item-default-active-text-decoration; text-rendering: @dropdown-menu-list-item-default-active-text-rendering; background: @dropdown-menu-list-item-default-active-background-color; #gradient > .vertical(@dropdown-menu-list-item-default-active-background-gradient-color-top, @dropdown-menu-list-item-default-active-background-gradient-color-bottom); border-top-width: @dropdown-menu-list-item-default-active-border-top-width; border-top-color: @dropdown-menu-list-item-default-active-border-top-color; border-right-width: @dropdown-menu-list-item-default-active-border-right-width; border-right-color: @dropdown-menu-list-item-default-active-border-right-color; border-bottom-width: @dropdown-menu-list-item-default-active-border-bottom-width; border-bottom-color: @dropdown-menu-list-item-default-active-border-bottom-color; border-left-width: @dropdown-menu-list-item-default-active-border-left-width; border-left-color: @dropdown-menu-list-item-default-active-border-left-color; .box-shadow(@dropdown-menu-list-item-default-active-shadow); } } /* ----------------------------------------------------------------------------- Dropdown Menu List Item (Default) State: Selected ----------------------------------------------------------------------------- */ &.selected { a { color: @dropdown-menu-list-item-default-selected-text-color; font-family: @dropdown-menu-list-item-default-selected-text-font-family; font-style: @dropdown-menu-list-item-default-selected-text-font-style; font-weight: @dropdown-menu-list-item-default-selected-text-font-weight; text-transform: @dropdown-menu-list-item-default-selected-text-transform; text-shadow: @dropdown-menu-list-item-default-selected-text-shadow; text-decoration: @dropdown-menu-list-item-default-selected-text-decoration; text-rendering: @dropdown-menu-list-item-default-selected-text-rendering; background: @dropdown-menu-list-item-default-selected-background-color; #gradient > .vertical(@dropdown-menu-list-item-default-selected-background-gradient-color-top, @dropdown-menu-list-item-default-selected-background-gradient-color-bottom); border-top-width: @dropdown-menu-list-item-default-selected-border-top-width; border-top-color: @dropdown-menu-list-item-default-selected-border-top-color; border-right-width: @dropdown-menu-list-item-default-selected-border-right-width; border-right-color: @dropdown-menu-list-item-default-selected-border-right-color; border-bottom-width: @dropdown-menu-list-item-default-selected-border-bottom-width; border-bottom-color: @dropdown-menu-list-item-default-selected-border-bottom-color; border-left-width: @dropdown-menu-list-item-default-selected-border-left-width; border-left-color: @dropdown-menu-list-item-default-selected-border-left-color; .box-shadow(@dropdown-menu-list-item-default-selected-shadow); } } /* ----------------------------------------------------------------------------- Dropdown Menu List Item (Default) State: Disabled ----------------------------------------------------------------------------- */ &.disabled { a { cursor: default; opacity: @dropdown-menu-list-item-default-disabled-opacity; color: @dropdown-menu-list-item-default-disabled-text-color; font-family: @dropdown-menu-list-item-default-disabled-text-font-family; font-style: @dropdown-menu-list-item-default-disabled-text-font-style; font-weight: @dropdown-menu-list-item-default-disabled-text-font-weight; text-transform: @dropdown-menu-list-item-default-disabled-text-transform; text-shadow: @dropdown-menu-list-item-default-disabled-text-shadow; text-decoration: @dropdown-menu-list-item-default-disabled-text-decoration; text-rendering: @dropdown-menu-list-item-default-disabled-text-rendering; background: @dropdown-menu-list-item-default-disabled-background-color; #gradient > .vertical(@dropdown-menu-list-item-default-disabled-background-gradient-color-top, @dropdown-menu-list-item-default-disabled-background-gradient-color-bottom); border-top-width: @dropdown-menu-list-item-default-disabled-border-top-width; border-top-color: @dropdown-menu-list-item-default-disabled-border-top-color; border-right-width: @dropdown-menu-list-item-default-disabled-border-right-width; border-right-color: @dropdown-menu-list-item-default-disabled-border-right-color; border-bottom-width: @dropdown-menu-list-item-default-disabled-border-bottom-width; border-bottom-color: @dropdown-menu-list-item-default-disabled-border-bottom-color; border-left-width: @dropdown-menu-list-item-default-disabled-border-left-width; border-left-color: @dropdown-menu-list-item-default-disabled-border-left-color; .box-shadow(@dropdown-menu-list-item-default-disabled-shadow); } } & when (@dropdown-menu-list-item-danger-enabled) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Dropdown Menu List Item (Danger) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ &.danger { /* ----------------------------------------------------------------------------- Dropdown Menu List Item Link ----------------------------------------------------------------------------- */ a { /* ----------------------------------------------------------------------------- Dropdown Menu List Item (Danger) State: Normal ----------------------------------------------------------------------------- */ color: @dropdown-menu-list-item-danger-text-color; font-family: @dropdown-menu-list-item-danger-text-font-family; font-style: @dropdown-menu-list-item-danger-text-font-style; font-weight: @dropdown-menu-list-item-danger-text-font-weight; text-transform: @dropdown-menu-list-item-danger-text-transform; text-shadow: @dropdown-menu-list-item-danger-text-shadow; text-decoration: @dropdown-menu-list-item-danger-text-decoration; text-rendering: @dropdown-menu-list-item-danger-text-rendering; background: @dropdown-menu-list-item-danger-background-color; #gradient > .vertical(@dropdown-menu-list-item-danger-background-gradient-color-top, @dropdown-menu-list-item-danger-background-gradient-color-bottom); border-top-width: @dropdown-menu-list-item-danger-border-top-width; border-top-color: @dropdown-menu-list-item-danger-border-top-color; border-right-width: @dropdown-menu-list-item-danger-border-right-width; border-right-color: @dropdown-menu-list-item-danger-border-right-color; border-bottom-width: @dropdown-menu-list-item-danger-border-bottom-width; border-bottom-color: @dropdown-menu-list-item-danger-border-bottom-color; border-left-width: @dropdown-menu-list-item-danger-border-left-width; border-left-color: @dropdown-menu-list-item-danger-border-left-color; .box-shadow(@dropdown-menu-list-item-danger-shadow); } /* ----------------------------------------------------------------------------- Dropdown Menu List Item (Danger) State: Hover ----------------------------------------------------------------------------- */ &:hover { a { color: @dropdown-menu-list-item-danger-hover-text-color; font-family: @dropdown-menu-list-item-danger-hover-text-font-family; font-style: @dropdown-menu-list-item-danger-hover-text-font-style; font-weight: @dropdown-menu-list-item-danger-hover-text-font-weight; text-transform: @dropdown-menu-list-item-danger-hover-text-transform; text-shadow: @dropdown-menu-list-item-danger-hover-text-shadow; text-decoration: @dropdown-menu-list-item-danger-hover-text-decoration; text-rendering: @dropdown-menu-list-item-danger-hover-text-rendering; background: @dropdown-menu-list-item-danger-hover-background-color; #gradient > .vertical(@dropdown-menu-list-item-danger-hover-background-gradient-color-top, @dropdown-menu-list-item-danger-hover-background-gradient-color-bottom); border-top-width: @dropdown-menu-list-item-danger-hover-border-top-width; border-top-color: @dropdown-menu-list-item-danger-hover-border-top-color; border-right-width: @dropdown-menu-list-item-danger-hover-border-right-width; border-right-color: @dropdown-menu-list-item-danger-hover-border-right-color; border-bottom-width: @dropdown-menu-list-item-danger-hover-border-bottom-width; border-bottom-color: @dropdown-menu-list-item-danger-hover-border-bottom-color; border-left-width: @dropdown-menu-list-item-danger-hover-border-left-width; border-left-color: @dropdown-menu-list-item-danger-hover-border-left-color; .box-shadow(@dropdown-menu-list-item-danger-hover-shadow); } } /* ----------------------------------------------------------------------------- Dropdown Menu List Item (Danger) State: Active ----------------------------------------------------------------------------- */ &:active { a { color: @dropdown-menu-list-item-danger-active-text-color; font-family: @dropdown-menu-list-item-danger-active-text-font-family; font-style: @dropdown-menu-list-item-danger-active-text-font-style; font-weight: @dropdown-menu-list-item-danger-active-text-font-weight; text-transform: @dropdown-menu-list-item-danger-active-text-transform; text-shadow: @dropdown-menu-list-item-danger-active-text-shadow; text-decoration: @dropdown-menu-list-item-danger-active-text-decoration; text-rendering: @dropdown-menu-list-item-danger-active-text-rendering; background: @dropdown-menu-list-item-danger-active-background-color; #gradient > .vertical(@dropdown-menu-list-item-danger-active-background-gradient-color-top, @dropdown-menu-list-item-danger-active-background-gradient-color-bottom); border-top-width: @dropdown-menu-list-item-danger-active-border-top-width; border-top-color: @dropdown-menu-list-item-danger-active-border-top-color; border-right-width: @dropdown-menu-list-item-danger-active-border-right-width; border-right-color: @dropdown-menu-list-item-danger-active-border-right-color; border-bottom-width: @dropdown-menu-list-item-danger-active-border-bottom-width; border-bottom-color: @dropdown-menu-list-item-danger-active-border-bottom-color; border-left-width: @dropdown-menu-list-item-danger-active-border-left-width; border-left-color: @dropdown-menu-list-item-danger-active-border-left-color; .box-shadow(@dropdown-menu-list-item-danger-active-shadow); } } /* ----------------------------------------------------------------------------- Dropdown Menu List Item (Danger) State: Selected ----------------------------------------------------------------------------- */ &.selected { a { color: @dropdown-menu-list-item-danger-selected-text-color; font-family: @dropdown-menu-list-item-danger-selected-text-font-family; font-style: @dropdown-menu-list-item-danger-selected-text-font-style; font-weight: @dropdown-menu-list-item-danger-selected-text-font-weight; text-transform: @dropdown-menu-list-item-danger-selected-text-transform; text-shadow: @dropdown-menu-list-item-danger-selected-text-shadow; text-decoration: @dropdown-menu-list-item-danger-selected-text-decoration; text-rendering: @dropdown-menu-list-item-danger-selected-text-rendering; background: @dropdown-menu-list-item-danger-selected-background-color; #gradient > .vertical(@dropdown-menu-list-item-danger-selected-background-gradient-color-top, @dropdown-menu-list-item-danger-selected-background-gradient-color-bottom); border-top-width: @dropdown-menu-list-item-danger-selected-border-top-width; border-top-color: @dropdown-menu-list-item-danger-selected-border-top-color; border-right-width: @dropdown-menu-list-item-danger-selected-border-right-width; border-right-color: @dropdown-menu-list-item-danger-selected-border-right-color; border-bottom-width: @dropdown-menu-list-item-danger-selected-border-bottom-width; border-bottom-color: @dropdown-menu-list-item-danger-selected-border-bottom-color; border-left-width: @dropdown-menu-list-item-danger-selected-border-left-width; border-left-color: @dropdown-menu-list-item-danger-selected-border-left-color; .box-shadow(@dropdown-menu-list-item-danger-selected-shadow); } } /* ----------------------------------------------------------------------------- Dropdown Menu List Item (Danger) State: Disabled ----------------------------------------------------------------------------- */ &.disabled { a { cursor: pointer; opacity: @dropdown-menu-list-item-danger-disabled-opacity; color: @dropdown-menu-list-item-danger-disabled-text-color; font-family: @dropdown-menu-list-item-danger-disabled-text-font-family; font-style: @dropdown-menu-list-item-danger-disabled-text-font-style; font-weight: @dropdown-menu-list-item-danger-disabled-text-font-weight; text-transform: @dropdown-menu-list-item-danger-disabled-text-transform; text-shadow: @dropdown-menu-list-item-danger-disabled-text-shadow; text-decoration: @dropdown-menu-list-item-danger-disabled-text-decoration; text-rendering: @dropdown-menu-list-item-danger-disabled-text-rendering; background: @dropdown-menu-list-item-danger-disabled-background-color; #gradient > .vertical(@dropdown-menu-list-item-danger-disabled-background-gradient-color-top, @dropdown-menu-list-item-danger-disabled-background-gradient-color-bottom); border-top-width: @dropdown-menu-list-item-danger-disabled-border-top-width; border-top-color: @dropdown-menu-list-item-danger-disabled-border-top-color; border-right-width: @dropdown-menu-list-item-danger-disabled-border-right-width; border-right-color: @dropdown-menu-list-item-danger-disabled-border-right-color; border-bottom-width: @dropdown-menu-list-item-danger-disabled-border-bottom-width; border-bottom-color: @dropdown-menu-list-item-danger-disabled-border-bottom-color; border-left-width: @dropdown-menu-list-item-danger-disabled-border-left-width; border-left-color: @dropdown-menu-list-item-danger-disabled-border-left-color; .box-shadow(@dropdown-menu-list-item-danger-disabled-shadow); } } } } } } & when (@dropdown-menu-inverse-enabled) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Dropdown Menu (Inverse) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ &.inverse { background: @dropdown-menu-inverse-background-color; #gradient > .vertical(@dropdown-menu-inverse-background-gradient-color-top, @dropdown-menu-inverse-background-gradient-color-bottom); border-top-width: @dropdown-menu-inverse-border-top-width; border-top-color: @dropdown-menu-inverse-border-top-color; border-right-width: @dropdown-menu-inverse-border-right-width; border-right-color: @dropdown-menu-inverse-border-right-color; border-bottom-width: @dropdown-menu-inverse-border-bottom-width; border-bottom-color: @dropdown-menu-inverse-border-bottom-color; border-left-width: @dropdown-menu-inverse-border-left-width; border-left-color: @dropdown-menu-inverse-border-left-color; .box-shadow(@dropdown-menu-inverse-shadow); & when (@dropdown-menu-header-inverse-enabled) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Dropdown Menu Header -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .dropdown-menu-header { color: @dropdown-menu-header-inverse-text-color; font-family: @dropdown-menu-header-inverse-text-font-family; font-style: @dropdown-menu-header-inverse-text-font-style; font-weight: @dropdown-menu-header-inverse-text-font-weight; text-transform: @dropdown-menu-header-inverse-text-transform; text-shadow: @dropdown-menu-header-inverse-text-shadow; text-decoration: @dropdown-menu-header-inverse-text-decoration; text-rendering: @dropdown-menu-header-inverse-text-rendering; background: @dropdown-menu-header-inverse-background-color; #gradient > .vertical(@dropdown-menu-header-inverse-background-gradient-color-top, @dropdown-menu-header-inverse-background-gradient-color-bottom); border-top-width: @dropdown-menu-header-inverse-border-top-width; border-top-color: @dropdown-menu-header-inverse-border-top-color; border-right-width: @dropdown-menu-header-inverse-border-right-width; border-right-color: @dropdown-menu-header-inverse-border-right-color; border-bottom-width: @dropdown-menu-header-inverse-border-bottom-width; border-bottom-color: @dropdown-menu-header-inverse-border-bottom-color; border-left-width: @dropdown-menu-header-inverse-border-left-width; border-left-color: @dropdown-menu-header-inverse-border-left-color; .box-shadow(@dropdown-menu-header-inverse-shadow); } } & when (@dropdown-menu-divider-inverse-enabled) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Dropdown Menu Divider -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .dropdown-menu-divider { background: @dropdown-menu-divider-inverse-background-color; #gradient > .vertical(@dropdown-menu-divider-inverse-background-gradient-color-top, @dropdown-menu-divider-inverse-background-gradient-color-bottom); border-top-width: @dropdown-menu-divider-inverse-border-top-width; border-top-color: @dropdown-menu-divider-inverse-border-top-color; border-right-width: @dropdown-menu-divider-inverse-border-right-width; border-right-color: @dropdown-menu-divider-inverse-border-right-color; border-bottom-width: @dropdown-menu-divider-inverse-border-bottom-width; border-bottom-color: @dropdown-menu-divider-inverse-border-bottom-color; border-left-width: @dropdown-menu-divider-inverse-border-left-width; border-left-color: @dropdown-menu-divider-inverse-border-left-color; .box-shadow(@dropdown-menu-divider-inverse-shadow); } } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Dropdown Menu List -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .dropdown-menu-list { & when (@dropdown-menu-list-item-inverse-enabled) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Dropdown Menu List Item -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ li { color: @dropdown-menu-list-item-inverse-text-color; font-family: @dropdown-menu-list-item-inverse-text-font-family; font-style: @dropdown-menu-list-item-inverse-text-font-style; font-weight: @dropdown-menu-list-item-inverse-text-font-weight; text-transform: @dropdown-menu-list-item-inverse-text-transform; text-shadow: @dropdown-menu-list-item-inverse-text-shadow; text-decoration: @dropdown-menu-list-item-inverse-text-decoration; text-rendering: @dropdown-menu-list-item-inverse-text-rendering; background: @dropdown-menu-list-item-inverse-background-color; #gradient > .vertical(@dropdown-menu-list-item-inverse-background-gradient-color-top, @dropdown-menu-list-item-inverse-background-gradient-color-bottom); border-top-width: @dropdown-menu-list-item-inverse-border-top-width; border-top-color: @dropdown-menu-list-item-inverse-border-top-color; border-right-width: @dropdown-menu-list-item-inverse-border-right-width; border-right-color: @dropdown-menu-list-item-inverse-border-right-color; border-bottom-width: @dropdown-menu-list-item-inverse-border-bottom-width; border-bottom-color: @dropdown-menu-list-item-inverse-border-bottom-color; border-left-width: @dropdown-menu-list-item-inverse-border-left-width; border-left-color: @dropdown-menu-list-item-inverse-border-left-color; .box-shadow(@dropdown-menu-list-item-inverse-shadow); /* ----------------------------------------------------------------------------- Dropdown Menu List Item Link ----------------------------------------------------------------------------- */ a { /* ----------------------------------------------------------------------------- Dropdown Menu List Item (Default, Inverse) State: Normal ----------------------------------------------------------------------------- */ color: @dropdown-menu-list-item-default-inverse-text-color; font-family: @dropdown-menu-list-item-default-inverse-text-font-family; font-style: @dropdown-menu-list-item-default-inverse-text-font-style; font-weight: @dropdown-menu-list-item-default-inverse-text-font-weight; text-transform: @dropdown-menu-list-item-default-inverse-text-transform; text-shadow: @dropdown-menu-list-item-default-inverse-text-shadow; text-decoration: @dropdown-menu-list-item-default-inverse-text-decoration; text-rendering: @dropdown-menu-list-item-default-inverse-text-rendering; background: @dropdown-menu-list-item-default-inverse-background-color; #gradient > .vertical(@dropdown-menu-list-item-default-inverse-background-gradient-color-top, @dropdown-menu-list-item-default-inverse-background-gradient-color-bottom); border-top-width: @dropdown-menu-list-item-default-inverse-border-top-width; border-top-color: @dropdown-menu-list-item-default-inverse-border-top-color; border-right-width: @dropdown-menu-list-item-default-inverse-border-right-width; border-right-color: @dropdown-menu-list-item-default-inverse-border-right-color; border-bottom-width: @dropdown-menu-list-item-default-inverse-border-bottom-width; border-bottom-color: @dropdown-menu-list-item-default-inverse-border-bottom-color; border-left-width: @dropdown-menu-list-item-default-inverse-border-left-width; border-left-color: @dropdown-menu-list-item-default-inverse-border-left-color; .box-shadow(@dropdown-menu-list-item-default-inverse-shadow); } /* ----------------------------------------------------------------------------- Dropdown Menu List Item (Default, Inverse) State: Hover ----------------------------------------------------------------------------- */ &:hover { a { color: @dropdown-menu-list-item-default-inverse-hover-text-color; font-family: @dropdown-menu-list-item-default-inverse-hover-text-font-family; font-style: @dropdown-menu-list-item-default-inverse-hover-text-font-style; font-weight: @dropdown-menu-list-item-default-inverse-hover-text-font-weight; text-transform: @dropdown-menu-list-item-default-inverse-hover-text-transform; text-shadow: @dropdown-menu-list-item-default-inverse-hover-text-shadow; text-decoration: @dropdown-menu-list-item-default-inverse-hover-text-decoration; text-rendering: @dropdown-menu-list-item-default-inverse-hover-text-rendering; background: @dropdown-menu-list-item-default-inverse-hover-background-color; #gradient > .vertical(@dropdown-menu-list-item-default-inverse-hover-background-gradient-color-top, @dropdown-menu-list-item-default-inverse-hover-background-gradient-color-bottom); border-top-width: @dropdown-menu-list-item-default-inverse-hover-border-top-width; border-top-color: @dropdown-menu-list-item-default-inverse-hover-border-top-color; border-right-width: @dropdown-menu-list-item-default-inverse-hover-border-right-width; border-right-color: @dropdown-menu-list-item-default-inverse-hover-border-right-color; border-bottom-width: @dropdown-menu-list-item-default-inverse-hover-border-bottom-width; border-bottom-color: @dropdown-menu-list-item-default-inverse-hover-border-bottom-color; border-left-width: @dropdown-menu-list-item-default-inverse-hover-border-left-width; border-left-color: @dropdown-menu-list-item-default-inverse-hover-border-left-color; .box-shadow(@dropdown-menu-list-item-default-inverse-hover-shadow); } } /* ----------------------------------------------------------------------------- Dropdown Menu List Item (Default, Inverse) State: Active ----------------------------------------------------------------------------- */ &:active { a { color: @dropdown-menu-list-item-default-inverse-active-text-color; font-family: @dropdown-menu-list-item-default-inverse-active-text-font-family; font-style: @dropdown-menu-list-item-default-inverse-active-text-font-style; font-weight: @dropdown-menu-list-item-default-inverse-active-text-font-weight; text-transform: @dropdown-menu-list-item-default-inverse-active-text-transform; text-shadow: @dropdown-menu-list-item-default-inverse-active-text-shadow; text-decoration: @dropdown-menu-list-item-default-inverse-active-text-decoration; text-rendering: @dropdown-menu-list-item-default-inverse-active-text-rendering; background: @dropdown-menu-list-item-default-inverse-active-background-color; #gradient > .vertical(@dropdown-menu-list-item-default-inverse-active-background-gradient-color-top, @dropdown-menu-list-item-default-inverse-active-background-gradient-color-bottom); border-top-width: @dropdown-menu-list-item-default-inverse-active-border-top-width; border-top-color: @dropdown-menu-list-item-default-inverse-active-border-top-color; border-right-width: @dropdown-menu-list-item-default-inverse-active-border-right-width; border-right-color: @dropdown-menu-list-item-default-inverse-active-border-right-color; border-bottom-width: @dropdown-menu-list-item-default-inverse-active-border-bottom-width; border-bottom-color: @dropdown-menu-list-item-default-inverse-active-border-bottom-color; border-left-width: @dropdown-menu-list-item-default-inverse-active-border-left-width; border-left-color: @dropdown-menu-list-item-default-inverse-active-border-left-color; .box-shadow(@dropdown-menu-list-item-default-inverse-active-shadow); } } /* ----------------------------------------------------------------------------- Dropdown Menu List Item (Default, Inverse) State: Selected ----------------------------------------------------------------------------- */ &.selected { a { color: @dropdown-menu-list-item-default-inverse-selected-text-color; font-family: @dropdown-menu-list-item-default-inverse-selected-text-font-family; font-style: @dropdown-menu-list-item-default-inverse-selected-text-font-style; font-weight: @dropdown-menu-list-item-default-inverse-selected-text-font-weight; text-transform: @dropdown-menu-list-item-default-inverse-selected-text-transform; text-shadow: @dropdown-menu-list-item-default-inverse-selected-text-shadow; text-decoration: @dropdown-menu-list-item-default-inverse-selected-text-decoration; text-rendering: @dropdown-menu-list-item-default-inverse-selected-text-rendering; background: @dropdown-menu-list-item-default-inverse-selected-background-color; #gradient > .vertical(@dropdown-menu-list-item-default-inverse-selected-background-gradient-color-top, @dropdown-menu-list-item-default-inverse-selected-background-gradient-color-bottom); border-top-width: @dropdown-menu-list-item-default-inverse-selected-border-top-width; border-top-color: @dropdown-menu-list-item-default-inverse-selected-border-top-color; border-right-width: @dropdown-menu-list-item-default-inverse-selected-border-right-width; border-right-color: @dropdown-menu-list-item-default-inverse-selected-border-right-color; border-bottom-width: @dropdown-menu-list-item-default-inverse-selected-border-bottom-width; border-bottom-color: @dropdown-menu-list-item-default-inverse-selected-border-bottom-color; border-left-width: @dropdown-menu-list-item-default-inverse-selected-border-left-width; border-left-color: @dropdown-menu-list-item-default-inverse-selected-border-left-color; .box-shadow(@dropdown-menu-list-item-default-inverse-selected-shadow); } } /* ----------------------------------------------------------------------------- Dropdown Menu List Item (Default, Inverse) State: Disabled ----------------------------------------------------------------------------- */ &.disabled { a { opacity: @dropdown-menu-list-item-default-inverse-disabled-opacity; color: @dropdown-menu-list-item-default-inverse-disabled-text-color; font-family: @dropdown-menu-list-item-default-inverse-disabled-text-font-family; font-style: @dropdown-menu-list-item-default-inverse-disabled-text-font-style; font-weight: @dropdown-menu-list-item-default-inverse-disabled-text-font-weight; text-transform: @dropdown-menu-list-item-default-inverse-disabled-text-transform; text-shadow: @dropdown-menu-list-item-default-inverse-disabled-text-shadow; text-decoration: @dropdown-menu-list-item-default-inverse-disabled-text-decoration; text-rendering: @dropdown-menu-list-item-default-inverse-disabled-text-rendering; background: @dropdown-menu-list-item-default-inverse-disabled-background-color; #gradient > .vertical(@dropdown-menu-list-item-default-inverse-disabled-background-gradient-color-top, @dropdown-menu-list-item-default-inverse-disabled-background-gradient-color-bottom); border-top-width: @dropdown-menu-list-item-default-inverse-disabled-border-top-width; border-top-color: @dropdown-menu-list-item-default-inverse-disabled-border-top-color; border-right-width: @dropdown-menu-list-item-default-inverse-disabled-border-right-width; border-right-color: @dropdown-menu-list-item-default-inverse-disabled-border-right-color; border-bottom-width: @dropdown-menu-list-item-default-inverse-disabled-border-bottom-width; border-bottom-color: @dropdown-menu-list-item-default-inverse-disabled-border-bottom-color; border-left-width: @dropdown-menu-list-item-default-inverse-disabled-border-left-width; border-left-color: @dropdown-menu-list-item-default-inverse-disabled-border-left-color; .box-shadow(@dropdown-menu-list-item-default-inverse-disabled-shadow); } } & when (@dropdown-menu-list-item-danger-enabled) and (@dropdown-menu-list-item-danger-inverse-enabled) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Dropdown Menu List Item (Danger, Inverse) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ &.danger { /* ----------------------------------------------------------------------------- Dropdown Menu List Item Link ----------------------------------------------------------------------------- */ a { /* ----------------------------------------------------------------------------- Dropdown Menu List Item (Danger, Inverse) State: Normal ----------------------------------------------------------------------------- */ color: @dropdown-menu-list-item-danger-inverse-text-color; font-family: @dropdown-menu-list-item-danger-inverse-text-font-family; font-style: @dropdown-menu-list-item-danger-inverse-text-font-style; font-weight: @dropdown-menu-list-item-danger-inverse-text-font-weight; text-transform: @dropdown-menu-list-item-danger-inverse-text-transform; text-shadow: @dropdown-menu-list-item-danger-inverse-text-shadow; text-decoration: @dropdown-menu-list-item-danger-inverse-text-decoration; text-rendering: @dropdown-menu-list-item-danger-inverse-text-rendering; background: @dropdown-menu-list-item-danger-inverse-background-color; #gradient > .vertical(@dropdown-menu-list-item-danger-inverse-background-gradient-color-top, @dropdown-menu-list-item-danger-inverse-background-gradient-color-bottom); border-top-width: @dropdown-menu-list-item-danger-inverse-border-top-width; border-top-color: @dropdown-menu-list-item-danger-inverse-border-top-color; border-right-width: @dropdown-menu-list-item-danger-inverse-border-right-width; border-right-color: @dropdown-menu-list-item-danger-inverse-border-right-color; border-bottom-width: @dropdown-menu-list-item-danger-inverse-border-bottom-width; border-bottom-color: @dropdown-menu-list-item-danger-inverse-border-bottom-color; border-left-width: @dropdown-menu-list-item-danger-inverse-border-left-width; border-left-color: @dropdown-menu-list-item-danger-inverse-border-left-color; .box-shadow(@dropdown-menu-list-item-danger-inverse-shadow); } /* ----------------------------------------------------------------------------- Dropdown Menu List Item (Danger, Inverse) State: Hover ----------------------------------------------------------------------------- */ &:hover { a { color: @dropdown-menu-list-item-danger-inverse-hover-text-color; font-family: @dropdown-menu-list-item-danger-inverse-hover-text-font-family; font-style: @dropdown-menu-list-item-danger-inverse-hover-text-font-style; font-weight: @dropdown-menu-list-item-danger-inverse-hover-text-font-weight; text-transform: @dropdown-menu-list-item-danger-inverse-hover-text-transform; text-shadow: @dropdown-menu-list-item-danger-inverse-hover-text-shadow; text-decoration: @dropdown-menu-list-item-danger-inverse-hover-text-decoration; text-rendering: @dropdown-menu-list-item-danger-inverse-hover-text-rendering; background: @dropdown-menu-list-item-danger-inverse-hover-background-color; #gradient > .vertical(@dropdown-menu-list-item-danger-inverse-hover-background-gradient-color-top, @dropdown-menu-list-item-danger-inverse-hover-background-gradient-color-bottom); border-top-width: @dropdown-menu-list-item-danger-inverse-hover-border-top-width; border-top-color: @dropdown-menu-list-item-danger-inverse-hover-border-top-color; border-right-width: @dropdown-menu-list-item-danger-inverse-hover-border-right-width; border-right-color: @dropdown-menu-list-item-danger-inverse-hover-border-right-color; border-bottom-width: @dropdown-menu-list-item-danger-inverse-hover-border-bottom-width; border-bottom-color: @dropdown-menu-list-item-danger-inverse-hover-border-bottom-color; border-left-width: @dropdown-menu-list-item-danger-inverse-hover-border-left-width; border-left-color: @dropdown-menu-list-item-danger-inverse-hover-border-left-color; .box-shadow(@dropdown-menu-list-item-danger-inverse-hover-shadow); } } /* ----------------------------------------------------------------------------- Dropdown Menu List Item (Danger, Inverse) State: Active ----------------------------------------------------------------------------- */ &:active { a { color: @dropdown-menu-list-item-danger-inverse-active-text-color; font-family: @dropdown-menu-list-item-danger-inverse-active-text-font-family; font-style: @dropdown-menu-list-item-danger-inverse-active-text-font-style; font-weight: @dropdown-menu-list-item-danger-inverse-active-text-font-weight; text-transform: @dropdown-menu-list-item-danger-inverse-active-text-transform; text-shadow: @dropdown-menu-list-item-danger-inverse-active-text-shadow; text-decoration: @dropdown-menu-list-item-danger-inverse-active-text-decoration; text-rendering: @dropdown-menu-list-item-danger-inverse-active-text-rendering; background: @dropdown-menu-list-item-danger-inverse-active-background-color; #gradient > .vertical(@dropdown-menu-list-item-danger-inverse-active-background-gradient-color-top, @dropdown-menu-list-item-danger-inverse-active-background-gradient-color-bottom); border-top-width: @dropdown-menu-list-item-danger-inverse-active-border-top-width; border-top-color: @dropdown-menu-list-item-danger-inverse-active-border-top-color; border-right-width: @dropdown-menu-list-item-danger-inverse-active-border-right-width; border-right-color: @dropdown-menu-list-item-danger-inverse-active-border-right-color; border-bottom-width: @dropdown-menu-list-item-danger-inverse-active-border-bottom-width; border-bottom-color: @dropdown-menu-list-item-danger-inverse-active-border-bottom-color; border-left-width: @dropdown-menu-list-item-danger-inverse-active-border-left-width; border-left-color: @dropdown-menu-list-item-danger-inverse-active-border-left-color; .box-shadow(@dropdown-menu-list-item-danger-inverse-active-shadow); } } /* ----------------------------------------------------------------------------- Dropdown Menu List Item (Danger, Inverse) State: Selected ----------------------------------------------------------------------------- */ &.selected { a { color: @dropdown-menu-list-item-danger-inverse-selected-text-color; font-family: @dropdown-menu-list-item-danger-inverse-selected-text-font-family; font-style: @dropdown-menu-list-item-danger-inverse-selected-text-font-style; font-weight: @dropdown-menu-list-item-danger-inverse-selected-text-font-weight; text-transform: @dropdown-menu-list-item-danger-inverse-selected-text-transform; text-shadow: @dropdown-menu-list-item-danger-inverse-selected-text-shadow; text-decoration: @dropdown-menu-list-item-danger-inverse-selected-text-decoration; text-rendering: @dropdown-menu-list-item-danger-inverse-selected-text-rendering; background: @dropdown-menu-list-item-danger-inverse-selected-background-color; #gradient > .vertical(@dropdown-menu-list-item-danger-inverse-selected-background-gradient-color-top, @dropdown-menu-list-item-danger-inverse-selected-background-gradient-color-bottom); border-top-width: @dropdown-menu-list-item-danger-inverse-selected-border-top-width; border-top-color: @dropdown-menu-list-item-danger-inverse-selected-border-top-color; border-right-width: @dropdown-menu-list-item-danger-inverse-selected-border-right-width; border-right-color: @dropdown-menu-list-item-danger-inverse-selected-border-right-color; border-bottom-width: @dropdown-menu-list-item-danger-inverse-selected-border-bottom-width; border-bottom-color: @dropdown-menu-list-item-danger-inverse-selected-border-bottom-color; border-left-width: @dropdown-menu-list-item-danger-inverse-selected-border-left-width; border-left-color: @dropdown-menu-list-item-danger-inverse-selected-border-left-color; .box-shadow(@dropdown-menu-list-item-danger-inverse-selected-shadow); } } /* ----------------------------------------------------------------------------- Dropdown Menu List Item (Danger, Inverse) State: Disabled ----------------------------------------------------------------------------- */ &.disabled { a { opacity: @dropdown-menu-list-item-danger-inverse-disabled-opacity; color: @dropdown-menu-list-item-danger-inverse-disabled-text-color; font-family: @dropdown-menu-list-item-danger-inverse-disabled-text-font-family; font-style: @dropdown-menu-list-item-danger-inverse-disabled-text-font-style; font-weight: @dropdown-menu-list-item-danger-inverse-disabled-text-font-weight; text-transform: @dropdown-menu-list-item-danger-inverse-disabled-text-transform; text-shadow: @dropdown-menu-list-item-danger-inverse-disabled-text-shadow; text-decoration: @dropdown-menu-list-item-danger-inverse-disabled-text-decoration; text-rendering: @dropdown-menu-list-item-danger-inverse-disabled-text-rendering; background: @dropdown-menu-list-item-danger-inverse-disabled-background-color; #gradient > .vertical(@dropdown-menu-list-item-danger-inverse-disabled-background-gradient-color-top, @dropdown-menu-list-item-danger-inverse-disabled-background-gradient-color-bottom); border-top-width: @dropdown-menu-list-item-danger-inverse-disabled-border-top-width; border-top-color: @dropdown-menu-list-item-danger-inverse-disabled-border-top-color; border-right-width: @dropdown-menu-list-item-danger-inverse-disabled-border-right-width; border-right-color: @dropdown-menu-list-item-danger-inverse-disabled-border-right-color; border-bottom-width: @dropdown-menu-list-item-danger-inverse-disabled-border-bottom-width; border-bottom-color: @dropdown-menu-list-item-danger-inverse-disabled-border-bottom-color; border-left-width: @dropdown-menu-list-item-danger-inverse-disabled-border-left-width; border-left-color: @dropdown-menu-list-item-danger-inverse-disabled-border-left-color; .box-shadow(@dropdown-menu-list-item-danger-inverse-disabled-shadow); } } } } } } } } } } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Dropdown Menu (Open) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .open > .dropdown-menu { display: block; } } & when (@screen-mini-enabled) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Size: Mini (@screen-mini) and above -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ @media (min-width: @screen-mini) { & when (@dropdown-menu-scale-screen-mini-enabled) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Dropdown Menu -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .dropdown-menu { min-width: floor(@dropdown-menu-width-minimum * @dropdown-menu-scale-screen-mini); padding: floor(@dropdown-menu-padding-vertical * @dropdown-menu-padding-vertical-scale-screen-mini) floor(@dropdown-menu-padding-horizontal * @dropdown-menu-padding-horizontal-scale-screen-mini); border-radius: floor(@dropdown-menu-border-radius * @dropdown-menu-border-radius-scale-screen-mini); & when (@dropdown-menu-header-scale-screen-mini-enabled) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Dropdown Menu Header -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .dropdown-menu-header { padding: floor((floor(@dropdown-menu-header-height-minimum * @dropdown-menu-header-height-scale-screen-mini) - floor(@dropdown-menu-header-text-line-height * @dropdown-menu-header-text-line-height-scale-screen-mini)) / 2) floor(@dropdown-menu-header-padding-horizontal * @dropdown-menu-header-padding-horizontal-scale-screen-mini); margin: floor(@dropdown-menu-header-margin-vertical-top * @dropdown-menu-header-margin-vertical-scale-screen-mini) floor(@dropdown-menu-header-margin-horizontal * @dropdown-menu-header-margin-horizontal-scale-screen-mini) floor(@dropdown-menu-header-margin-vertical-bottom * @dropdown-menu-header-margin-vertical-scale-screen-mini); font-size: floor(@dropdown-menu-header-text-font-size * @dropdown-menu-header-text-font-size-scale-screen-mini); line-height: floor(@dropdown-menu-header-text-line-height * @dropdown-menu-header-text-line-height-scale-screen-mini); border-radius: floor(@dropdown-menu-header-border-radius * @dropdown-menu-header-border-radius-scale-screen-mini); } } & when (@dropdown-menu-divider-scale-screen-mini-enabled) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Dropdown Menu Divider -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .dropdown-menu-divider { padding: 0px floor(@dropdown-menu-divider-padding-horizontal * @dropdown-menu-divider-padding-horizontal-scale-screen-mini); margin: floor(@dropdown-menu-divider-margin-vertical-top * @dropdown-menu-divider-margin-vertical-scale-screen-mini) ceil(@dropdown-menu-divider-margin-horizontal * @dropdown-menu-divider-margin-horizontal-scale-screen-mini) floor(@dropdown-menu-divider-margin-vertical-bottom * @dropdown-menu-divider-margin-vertical-scale-screen-mini); height: floor(@dropdown-menu-divider-height * @dropdown-menu-divider-height-scale-screen-mini); border-radius: floor(@dropdown-menu-divider-border-radius * @dropdown-menu-divider-border-radius-scale-screen-mini); } } & when (@dropdown-menu-list-scale-screen-mini-enabled) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Dropdown Menu List -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .dropdown-menu-list { margin-left: (-1 * floor(-@dropdown-menu-list-margin-horizontal * @dropdown-menu-list-margin-horizontal-scale-screen-mini)); margin-right: (-1 * floor(-@dropdown-menu-list-margin-horizontal * @dropdown-menu-list-margin-horizontal-scale-screen-mini)); margin-bottom: (-1 * floor(-@dropdown-menu-list-margin-vertical * @dropdown-menu-list-margin-vertical-scale-screen-mini)); & when (@dropdown-menu-list-item-scale-screen-mini-enabled) { li { padding: floor((floor(@dropdown-menu-list-item-height * @dropdown-menu-list-item-height-scale-screen-mini) - floor(@dropdown-menu-list-item-text-line-height * @dropdown-menu-list-item-text-line-height-scale-screen-mini)) / 2) floor(@dropdown-menu-list-item-padding-horizontal * @dropdown-menu-list-item-padding-horizontal-scale-screen-mini); margin: floor(@dropdown-menu-list-item-margin-vertical * @dropdown-menu-list-item-margin-vertical-scale-screen-mini) floor(@dropdown-menu-list-item-margin-horizontal * @dropdown-menu-list-item-margin-horizontal-scale-screen-mini); font-size: @dropdown-menu-list-item-text-font-size * @dropdown-menu-list-item-text-font-size-scale-screen-mini; line-height: @dropdown-menu-list-item-text-line-height * @dropdown-menu-list-item-text-line-height-scale-screen-mini; a { margin: floor(-(floor(@dropdown-menu-list-item-height * @dropdown-menu-list-item-height-scale-screen-mini) - floor(@dropdown-menu-list-item-text-line-height * @dropdown-menu-list-item-text-line-height-scale-screen-mini)) / 2) (-1 * floor(@dropdown-menu-list-item-padding-horizontal * @dropdown-menu-list-item-padding-horizontal-scale-screen-mini)); padding: floor((floor(@dropdown-menu-list-item-height * @dropdown-menu-list-item-height-scale-screen-mini) - floor(@dropdown-menu-list-item-text-line-height * @dropdown-menu-list-item-text-line-height-scale-screen-mini)) / 2) floor(@dropdown-menu-list-item-padding-horizontal * @dropdown-menu-list-item-padding-horizontal-scale-screen-mini); } } } } } } } } } & when (@screen-small-enabled) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Size: Small (@screen-small) and above -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ @media (min-width: @screen-small) { & when (@dropdown-menu-scale-screen-small-enabled) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Dropdown Menu -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .dropdown-menu { min-width: floor(@dropdown-menu-width-minimum * @dropdown-menu-scale-screen-small); padding: floor(@dropdown-menu-padding-vertical * @dropdown-menu-padding-vertical-scale-screen-small) floor(@dropdown-menu-padding-horizontal * @dropdown-menu-padding-horizontal-scale-screen-small); border-radius: floor(@dropdown-menu-border-radius * @dropdown-menu-border-radius-scale-screen-small); & when (@dropdown-menu-header-scale-screen-small-enabled) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Dropdown Menu Header -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .dropdown-menu-header { padding: floor((floor(@dropdown-menu-header-height-minimum * @dropdown-menu-header-height-scale-screen-small) - floor(@dropdown-menu-header-text-line-height * @dropdown-menu-header-text-line-height-scale-screen-small)) / 2) floor(@dropdown-menu-header-padding-horizontal * @dropdown-menu-header-padding-horizontal-scale-screen-small); margin: floor(@dropdown-menu-header-margin-vertical-top * @dropdown-menu-header-margin-vertical-scale-screen-small) floor(@dropdown-menu-header-margin-horizontal * @dropdown-menu-header-margin-horizontal-scale-screen-small) floor(@dropdown-menu-header-margin-vertical-bottom * @dropdown-menu-header-margin-vertical-scale-screen-small); font-size: floor(@dropdown-menu-header-text-font-size * @dropdown-menu-header-text-font-size-scale-screen-small); line-height: floor(@dropdown-menu-header-text-line-height * @dropdown-menu-header-text-line-height-scale-screen-small); border-radius: floor(@dropdown-menu-header-border-radius * @dropdown-menu-header-border-radius-scale-screen-small); } } & when (@dropdown-menu-divider-scale-screen-small-enabled) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Dropdown Menu Divider -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .dropdown-menu-divider { padding: 0px floor(@dropdown-menu-divider-padding-horizontal * @dropdown-menu-divider-padding-horizontal-scale-screen-small); margin: floor(@dropdown-menu-divider-margin-vertical-top * @dropdown-menu-divider-margin-vertical-scale-screen-small) ceil(@dropdown-menu-divider-margin-horizontal * @dropdown-menu-divider-margin-horizontal-scale-screen-small) floor(@dropdown-menu-divider-margin-vertical-bottom * @dropdown-menu-divider-margin-vertical-scale-screen-small); height: floor(@dropdown-menu-divider-height * @dropdown-menu-divider-height-scale-screen-small); border-radius: floor(@dropdown-menu-divider-border-radius * @dropdown-menu-divider-border-radius-scale-screen-small); } } & when (@dropdown-menu-list-scale-screen-small-enabled) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Dropdown Menu List -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .dropdown-menu-list { margin-left: (-1 * floor(-@dropdown-menu-list-margin-horizontal * @dropdown-menu-list-margin-horizontal-scale-screen-small)); margin-right: (-1 * floor(-@dropdown-menu-list-margin-horizontal * @dropdown-menu-list-margin-horizontal-scale-screen-small)); margin-bottom: (-1 * floor(-@dropdown-menu-list-margin-vertical * @dropdown-menu-list-margin-vertical-scale-screen-small)); & when (@dropdown-menu-list-item-scale-screen-small-enabled) { li { padding: floor((floor(@dropdown-menu-list-item-height * @dropdown-menu-list-item-height-scale-screen-small) - floor(@dropdown-menu-list-item-text-line-height * @dropdown-menu-list-item-text-line-height-scale-screen-small)) / 2) floor(@dropdown-menu-list-item-padding-horizontal * @dropdown-menu-list-item-padding-horizontal-scale-screen-small); margin: floor(@dropdown-menu-list-item-margin-vertical * @dropdown-menu-list-item-margin-vertical-scale-screen-small) floor(@dropdown-menu-list-item-margin-horizontal * @dropdown-menu-list-item-margin-horizontal-scale-screen-small); font-size: @dropdown-menu-list-item-text-font-size * @dropdown-menu-list-item-text-font-size-scale-screen-small; line-height: @dropdown-menu-list-item-text-line-height * @dropdown-menu-list-item-text-line-height-scale-screen-small; a { margin: floor(-((floor(@dropdown-menu-list-item-height * @dropdown-menu-list-item-height-scale-screen-small) - floor(@dropdown-menu-list-item-text-line-height * @dropdown-menu-list-item-text-line-height-scale-screen-small)) / 2)) (-1 * floor(@dropdown-menu-list-item-padding-horizontal * @dropdown-menu-list-item-padding-horizontal-scale-screen-small)); padding: floor((floor(@dropdown-menu-list-item-height * @dropdown-menu-list-item-height-scale-screen-small) - floor(@dropdown-menu-list-item-text-line-height * @dropdown-menu-list-item-text-line-height-scale-screen-small)) / 2) floor(@dropdown-menu-list-item-padding-horizontal * @dropdown-menu-list-item-padding-horizontal-scale-screen-small); } } } } } } } } } & when (@screen-medium-enabled) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Size: Medium (@screen-medium) and above -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ @media (min-width: @screen-medium) { & when (@dropdown-menu-scale-screen-medium-enabled) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Dropdown Menu -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .dropdown-menu { min-width: floor(@dropdown-menu-width-minimum * @dropdown-menu-scale-screen-medium); padding: floor(@dropdown-menu-padding-vertical * @dropdown-menu-padding-vertical-scale-screen-medium) floor(@dropdown-menu-padding-horizontal * @dropdown-menu-padding-horizontal-scale-screen-medium); border-radius: floor(@dropdown-menu-border-radius * @dropdown-menu-border-radius-scale-screen-medium); & when (@dropdown-menu-header-scale-screen-medium-enabled) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Dropdown Menu Header -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .dropdown-menu-header { padding: floor((floor(@dropdown-menu-header-height-minimum * @dropdown-menu-header-height-scale-screen-medium) - floor(@dropdown-menu-header-text-line-height * @dropdown-menu-header-text-line-height-scale-screen-medium)) / 2) floor(@dropdown-menu-header-padding-horizontal * @dropdown-menu-header-padding-horizontal-scale-screen-medium); margin: floor(@dropdown-menu-header-margin-vertical-top * @dropdown-menu-header-margin-vertical-scale-screen-medium) floor(@dropdown-menu-header-margin-horizontal * @dropdown-menu-header-margin-horizontal-scale-screen-medium) floor(@dropdown-menu-header-margin-vertical-bottom * @dropdown-menu-header-margin-vertical-scale-screen-medium); font-size: floor(@dropdown-menu-header-text-font-size * @dropdown-menu-header-text-font-size-scale-screen-medium); line-height: floor(@dropdown-menu-header-text-line-height * @dropdown-menu-header-text-line-height-scale-screen-medium); border-radius: floor(@dropdown-menu-header-border-radius * @dropdown-menu-header-border-radius-scale-screen-medium); } } & when (@dropdown-menu-divider-scale-screen-medium-enabled) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Dropdown Menu Divider -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .dropdown-menu-divider { padding: 0px floor(@dropdown-menu-divider-padding-horizontal * @dropdown-menu-divider-padding-horizontal-scale-screen-medium); margin: floor(@dropdown-menu-divider-margin-vertical-top * @dropdown-menu-divider-margin-vertical-scale-screen-medium) ceil(@dropdown-menu-divider-margin-horizontal * @dropdown-menu-divider-margin-horizontal-scale-screen-medium) floor(@dropdown-menu-divider-margin-vertical-bottom * @dropdown-menu-divider-margin-vertical-scale-screen-medium); height: floor(@dropdown-menu-divider-height * @dropdown-menu-divider-height-scale-screen-medium); border-radius: floor(@dropdown-menu-divider-border-radius * @dropdown-menu-divider-border-radius-scale-screen-medium); } } & when (@dropdown-menu-list-scale-screen-medium-enabled) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Dropdown Menu List -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .dropdown-menu-list { margin-left: (-1 * floor(-@dropdown-menu-list-margin-horizontal * @dropdown-menu-list-margin-horizontal-scale-screen-medium)); margin-right: (-1 * floor(-@dropdown-menu-list-margin-horizontal * @dropdown-menu-list-margin-horizontal-scale-screen-medium)); margin-bottom: (-1 * floor(-@dropdown-menu-list-margin-vertical * @dropdown-menu-list-margin-vertical-scale-screen-medium)); & when (@dropdown-menu-list-item-scale-screen-medium-enabled) { li { padding: floor((floor(@dropdown-menu-list-item-height * @dropdown-menu-list-item-height-scale-screen-medium) - floor(@dropdown-menu-list-item-text-line-height * @dropdown-menu-list-item-text-line-height-scale-screen-medium)) / 2) floor(@dropdown-menu-list-item-padding-horizontal * @dropdown-menu-list-item-padding-horizontal-scale-screen-medium); margin: floor(@dropdown-menu-list-item-margin-vertical * @dropdown-menu-list-item-margin-vertical-scale-screen-medium) floor(@dropdown-menu-list-item-margin-horizontal * @dropdown-menu-list-item-margin-horizontal-scale-screen-medium); font-size: @dropdown-menu-list-item-text-font-size * @dropdown-menu-list-item-text-font-size-scale-screen-medium; line-height: @dropdown-menu-list-item-text-line-height * @dropdown-menu-list-item-text-line-height-scale-screen-medium; a { margin: floor(-(floor(@dropdown-menu-list-item-height * @dropdown-menu-list-item-height-scale-screen-medium) - floor(@dropdown-menu-list-item-text-line-height * @dropdown-menu-list-item-text-line-height-scale-screen-medium)) / 2) (-1 * floor(@dropdown-menu-list-item-padding-horizontal * @dropdown-menu-list-item-padding-horizontal-scale-screen-medium)); padding: floor((floor(@dropdown-menu-list-item-height * @dropdown-menu-list-item-height-scale-screen-medium) - floor(@dropdown-menu-list-item-text-line-height * @dropdown-menu-list-item-text-line-height-scale-screen-medium)) / 2) floor(@dropdown-menu-list-item-padding-horizontal * @dropdown-menu-list-item-padding-horizontal-scale-screen-medium); } } } } } } } } } & when (@dropdown-menu-enabled) and (@screen-large-enabled) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Size: Large (@screen-large) and above -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ @media (min-width: @screen-large) { & when (@dropdown-menu-scale-screen-large-enabled) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Dropdown Menu -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .dropdown-menu { min-width: floor(@dropdown-menu-width-minimum * @dropdown-menu-scale-screen-large); padding: floor(@dropdown-menu-padding-vertical * @dropdown-menu-padding-vertical-scale-screen-large) floor(@dropdown-menu-padding-horizontal * @dropdown-menu-padding-horizontal-scale-screen-large); border-radius: floor(@dropdown-menu-border-radius * @dropdown-menu-border-radius-scale-screen-large); & when (@dropdown-menu-header-scale-screen-large-enabled) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Dropdown Menu Header -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .dropdown-menu-header { padding: floor((floor(@dropdown-menu-header-height-minimum * @dropdown-menu-header-height-scale-screen-large) - floor(@dropdown-menu-header-text-line-height * @dropdown-menu-header-text-line-height-scale-screen-large)) / 2) floor(@dropdown-menu-header-padding-horizontal * @dropdown-menu-header-padding-horizontal-scale-screen-large); margin: floor(@dropdown-menu-header-margin-vertical-top * @dropdown-menu-header-margin-vertical-scale-screen-large) floor(@dropdown-menu-header-margin-horizontal * @dropdown-menu-header-margin-horizontal-scale-screen-large) floor(@dropdown-menu-header-margin-vertical-bottom * @dropdown-menu-header-margin-vertical-scale-screen-large); font-size: floor(@dropdown-menu-header-text-font-size * @dropdown-menu-header-text-font-size-scale-screen-large); line-height: floor(@dropdown-menu-header-text-line-height * @dropdown-menu-header-text-line-height-scale-screen-large); border-radius: floor(@dropdown-menu-header-border-radius * @dropdown-menu-header-border-radius-scale-screen-large); } } & when (@dropdown-menu-divider-scale-screen-large-enabled) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Dropdown Menu Divider -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .dropdown-menu-divider { padding: 0px floor(@dropdown-menu-divider-padding-horizontal * @dropdown-menu-divider-padding-horizontal-scale-screen-large); margin: floor(@dropdown-menu-divider-margin-vertical-top * @dropdown-menu-divider-margin-vertical-scale-screen-large) ceil(@dropdown-menu-divider-margin-horizontal * @dropdown-menu-divider-margin-horizontal-scale-screen-large) floor(@dropdown-menu-divider-margin-vertical-bottom * @dropdown-menu-divider-margin-vertical-scale-screen-large); height: floor(@dropdown-menu-divider-height * @dropdown-menu-divider-height-scale-screen-large); border-radius: floor(@dropdown-menu-divider-border-radius * @dropdown-menu-divider-border-radius-scale-screen-large); } } & when (@dropdown-menu-list-scale-screen-large-enabled) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Dropdown Menu List -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .dropdown-menu-list { margin-left: (-1 * floor(-@dropdown-menu-list-margin-horizontal * @dropdown-menu-list-margin-horizontal-scale-screen-large)); margin-right: (-1 * floor(-@dropdown-menu-list-margin-horizontal * @dropdown-menu-list-margin-horizontal-scale-screen-large)); margin-bottom: (-1 * floor(-@dropdown-menu-list-margin-vertical * @dropdown-menu-list-margin-vertical-scale-screen-large)); & when (@dropdown-menu-list-item-scale-screen-large-enabled) { li { padding: floor((floor(@dropdown-menu-list-item-height * @dropdown-menu-list-item-height-scale-screen-large) - floor(@dropdown-menu-list-item-text-line-height * @dropdown-menu-list-item-text-line-height-scale-screen-large)) / 2) floor(@dropdown-menu-list-item-padding-horizontal * @dropdown-menu-list-item-padding-horizontal-scale-screen-large); margin: floor(@dropdown-menu-list-item-margin-vertical * @dropdown-menu-list-item-margin-vertical-scale-screen-large) floor(@dropdown-menu-list-item-margin-horizontal * @dropdown-menu-list-item-margin-horizontal-scale-screen-large); font-size: @dropdown-menu-list-item-text-font-size * @dropdown-menu-list-item-text-font-size-scale-screen-large; line-height: @dropdown-menu-list-item-text-line-height * @dropdown-menu-list-item-text-line-height-scale-screen-large; a { margin: floor(-((floor(@dropdown-menu-list-item-height * @dropdown-menu-list-item-height-scale-screen-large) - floor(@dropdown-menu-list-item-text-line-height * @dropdown-menu-list-item-text-line-height-scale-screen-large)) / 2)) (-1 * floor(@dropdown-menu-list-item-padding-horizontal * @dropdown-menu-list-item-padding-horizontal-scale-screen-large)); padding: floor((floor(@dropdown-menu-list-item-height * @dropdown-menu-list-item-height-scale-screen-large) - floor(@dropdown-menu-list-item-text-line-height * @dropdown-menu-list-item-text-line-height-scale-screen-large)) / 2) floor(@dropdown-menu-list-item-padding-horizontal * @dropdown-menu-list-item-padding-horizontal-scale-screen-large); } } } } } } } } } & when (@screen-resolution-2x-enabled) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Resolution: 2x -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ @media only screen and (-webkit-min-device-pixel-ratio: 2) { } } & when (@screen-resolution-3x-enabled) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Resolution: 3x -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ @media only screen and (-webkit-min-device-pixel-ratio: 3) { } }