/* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- -------------------------------------------------------------------------------- components/buttons.less -------------------------------------------------------------------------------- -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ & when (@button-enabled) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Button -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .button { /* ----------------------------------------------------------------------------- Button Styles ----------------------------------------------------------------------------- */ position: relative; vertical-align: middle; cursor: pointer; text-align: center; .ie7-inline-block(); .ie7-restore-left-whitespace(); display: inline-block; border-style: solid; box-sizing: @button-box-sizing; background-clip: @button-background-clip !important; .button-size-variant('', ''); transition: background 0.1s ease, border-color 0.1s ease, box-shadow 0.1s ease, color 0.1s ease; /* ----------------------------------------------------------------------------- Wide Button ----------------------------------------------------------------------------- */ &.button-wide { display: block; width: 100%; margin-left: 0px; margin-right: 0px; } /* ----------------------------------------------------------------------------- Rounded Button ----------------------------------------------------------------------------- */ &.button-rounded { border-radius: 1000px !important; } & when (@button-dropdown-enabled) { /* ----------------------------------------------------------------------------- Button Dropdown ----------------------------------------------------------------------------- */ &.dropdown-toggle { & when (@button-dropdown-caret-enabled) { /* ----------------------------------------------------------------------------- Button Dropdown Caret ----------------------------------------------------------------------------- */ &:after { content: ''; display: inline-block; vertical-align: middle; .triangle-base(); } } } } /* ----------------------------------------------------------------------------- Button Label ----------------------------------------------------------------------------- */ .button-label { display: inline-block; } /* ----------------------------------------------------------------------------- Icon ----------------------------------------------------------------------------- */ .icon { vertical-align: top; &:first-child { margin-right: @button-padding-horizontal * 0.25; } &:last-child { margin-left: @button-padding-horizontal * 0.25; } &:first-child:last-child { margin-left: 0px !important; margin-right: 0px !important; } } } & when (@button-mini-enabled) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Button (Mini) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .button.button-mini { /* ----------------------------------------------------------------------------- Button (Mini) Styles ----------------------------------------------------------------------------- */ .button-size-variant('mini', ''); & when (@button-dropdown-enabled) { /* ----------------------------------------------------------------------------- Button Dropdown ----------------------------------------------------------------------------- */ &.dropdown-toggle { & when not (@button-mini-dropdown-caret-enabled) { /* ----------------------------------------------------------------------------- Button Dropdown Caret ----------------------------------------------------------------------------- */ &:after { display: none; } } } } /* ----------------------------------------------------------------------------- Icon ----------------------------------------------------------------------------- */ .icon { &:first-child { margin-right: @button-mini-padding-horizontal * 0.25; } &:last-child { margin-left: @button-mini-padding-horizontal * 0.25; } } } } & when (@button-small-enabled) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Button (Small) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .button.button-small { /* ----------------------------------------------------------------------------- Button (Small) Styles ----------------------------------------------------------------------------- */ .button-size-variant('small', ''); & when (@button-dropdown-enabled) { /* ----------------------------------------------------------------------------- Button Dropdown ----------------------------------------------------------------------------- */ &.dropdown-toggle { & when not (@button-small-dropdown-caret-enabled) { /* ----------------------------------------------------------------------------- Button Dropdown Caret ----------------------------------------------------------------------------- */ &:after { display: none; } } } } /* ----------------------------------------------------------------------------- Icon ----------------------------------------------------------------------------- */ .icon { &:first-child { margin-right: @button-small-padding-horizontal * 0.25; } &:last-child { margin-left: @button-small-padding-horizontal * 0.25; } } } } & when (@button-large-enabled) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Button (Large) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .button.button-large { /* ----------------------------------------------------------------------------- Button (Large) Styles ----------------------------------------------------------------------------- */ .button-size-variant('large', ''); & when (@button-dropdown-enabled) { /* ----------------------------------------------------------------------------- Button Dropdown ----------------------------------------------------------------------------- */ &.dropdown-toggle { & when not (@button-large-dropdown-caret-enabled) { /* ----------------------------------------------------------------------------- Button Dropdown Caret ----------------------------------------------------------------------------- */ &:after { display: none; } } } } /* ----------------------------------------------------------------------------- Icon ----------------------------------------------------------------------------- */ .icon { &:first-child { margin-right: @button-large-padding-horizontal * 0.25; } &:last-child { margin-left: @button-large-padding-horizontal * 0.25; } } } } & when (@button-jumbo-enabled) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Button (Jumbo) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .button.button-jumbo { /* ----------------------------------------------------------------------------- Button (Jumbo) Styles ----------------------------------------------------------------------------- */ .button-size-variant('jumbo', ''); & when (@button-dropdown-enabled) { /* ----------------------------------------------------------------------------- Button Dropdown ----------------------------------------------------------------------------- */ &.dropdown-toggle { & when not (@button-jumbo-dropdown-caret-enabled) { /* ----------------------------------------------------------------------------- Button Dropdown Caret ----------------------------------------------------------------------------- */ &:after { display: none; } } } } /* ----------------------------------------------------------------------------- Icon ----------------------------------------------------------------------------- */ .icon { &:first-child { margin-right: @button-jumbo-padding-horizontal * 0.25; } &:last-child { margin-left: @button-jumbo-padding-horizontal * 0.25; } } } } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Button (Default) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .button { /* ----------------------------------------------------------------------------- Button (Default) State: Normal ----------------------------------------------------------------------------- */ .button-variant('default'); & when (@button-dropdown-enabled) { /* ----------------------------------------------------------------------------- Button Dropdown ----------------------------------------------------------------------------- */ &.dropdown-toggle { & when (@button-dropdown-caret-enabled) { /* ----------------------------------------------------------------------------- Button Dropdown Caret ----------------------------------------------------------------------------- */ &:after { //.triangle-color('down', @button-default-caret-color) !import; } } } } /* ----------------------------------------------------------------------------- Button (Default) State: Focus ----------------------------------------------------------------------------- */ &:focus { outline: none; } /* ----------------------------------------------------------------------------- Button (Default) State: Hover ----------------------------------------------------------------------------- */ &:hover { .button-variant('default-hover'); } /* ----------------------------------------------------------------------------- Button (Default) State: Active ----------------------------------------------------------------------------- */ &:active { outline: 0; .button-variant('default-active'); } /* ----------------------------------------------------------------------------- Button (Default) State: Selected ----------------------------------------------------------------------------- */ &.active { outline: 0; .button-variant('default-selected'); } /* ----------------------------------------------------------------------------- Button (Default) State: Disabled ----------------------------------------------------------------------------- */ &.disabled, &[disabled] { outline: 0; cursor: default !important; pointer-events: none; opacity: @button-default-disabled-opacity; .button-variant('default-disabled'); } & when (@button-default-link-enabled) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Button (Default, link) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ &.button-link { /* ----------------------------------------------------------------------------- Button (Default, Link) State: Normal ----------------------------------------------------------------------------- */ .button-variant('default-link'); /* ----------------------------------------------------------------------------- Button (Default, Link) State: Hover ----------------------------------------------------------------------------- */ &:hover { .button-variant('default-link-hover'); } /* ----------------------------------------------------------------------------- Button (Default, Link) State: Active ----------------------------------------------------------------------------- */ &:active { .button-variant('default-link-active'); } /* ----------------------------------------------------------------------------- Button (Default, Link) State: Selected ----------------------------------------------------------------------------- */ &.active { .button-variant('default-link-selected'); } /* ----------------------------------------------------------------------------- Button (Default, Link) State: Disabled ----------------------------------------------------------------------------- */ &.disabled, &[disabled] { opacity: @button-default-link-disabled-opacity; .button-variant('default-link-disabled'); } } } & when (@button-default-stroke-enabled) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Button (Default, Stroke) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ &.button-stroke { /* ----------------------------------------------------------------------------- Button (Default, Stroke) State: Normal ----------------------------------------------------------------------------- */ .button-variant('default-stroke'); /* ----------------------------------------------------------------------------- Button (Default, Stroke) State: Hover ----------------------------------------------------------------------------- */ &:hover { .button-variant('default-stroke-hover'); } /* ----------------------------------------------------------------------------- Button (Default, Stroke) State: Active ----------------------------------------------------------------------------- */ &:active { .button-variant('default-stroke-active'); } /* ----------------------------------------------------------------------------- Button (Default, Stroke) State: Selected ----------------------------------------------------------------------------- */ &.active { .button-variant('default-stroke-selected'); } /* ----------------------------------------------------------------------------- Button (Default, Stroke) State: Disabled ----------------------------------------------------------------------------- */ &.disabled, &[disabled] { opacity: @button-default-stroke-disabled-opacity; .button-variant('default-stroke-disabled'); } } } & when (@button-default-inverse-enabled) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Button (Default, Inverse) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ &.button-inverse { /* ----------------------------------------------------------------------------- Button (Default, Inverse) State: Normal ----------------------------------------------------------------------------- */ .button-variant('default-inverse'); /* ----------------------------------------------------------------------------- Button (Default, Inverse) State: Hover ----------------------------------------------------------------------------- */ &:hover { .button-variant('default-inverse-hover'); } /* ----------------------------------------------------------------------------- Button (Default, Inverse) State: Active ----------------------------------------------------------------------------- */ &:active { .button-variant('default-inverse-active'); } /* ----------------------------------------------------------------------------- Button (Default, Inverse) State: Selected ----------------------------------------------------------------------------- */ &.active { .button-variant('default-inverse-selected'); } /* ----------------------------------------------------------------------------- Button (Default, Inverse) State: Disabled ----------------------------------------------------------------------------- */ &.disabled, &[disabled] { opacity: @button-default-inverse-disabled-opacity; .button-variant('default-inverse-disabled'); } & when (@button-default-inverse-link-enabled) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Button (Default, Inverse, Link) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ &.button-link { /* ----------------------------------------------------------------------------- Button (Default, Inverse, Link) State: Normal ----------------------------------------------------------------------------- */ .button-variant('default-inverse-link'); /* ----------------------------------------------------------------------------- Button (Default, Inverse, Link) State: Hover ----------------------------------------------------------------------------- */ &:hover { .button-variant('default-inverse-link-hover'); } /* ----------------------------------------------------------------------------- Button (Default, Inverse, Link) State: Active ----------------------------------------------------------------------------- */ &:active { .button-variant('default-inverse-link-active'); } /* ----------------------------------------------------------------------------- Button (Default, Inverse, Link) State: Selected ----------------------------------------------------------------------------- */ &.active { .button-variant('default-inverse-link-selected'); } /* ----------------------------------------------------------------------------- Button (Default, Inverse, Link) State: Disabled ----------------------------------------------------------------------------- */ &.disabled, &[disabled] { opacity: @button-default-inverse-link-disabled-opacity; .button-variant('default-inverse-link-disabled'); } } } & when (@button-default-inverse-stroke-enabled) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Button (Default, Inverse, Stroke) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ &.button-stroke { /* ----------------------------------------------------------------------------- Button (Default, Inverse, Stroke) State: Normal ----------------------------------------------------------------------------- */ .button-variant('default-inverse-stroke'); /* ----------------------------------------------------------------------------- Button (Default, Inverse, Stroke) State: Hover ----------------------------------------------------------------------------- */ &:hover { .button-variant('default-inverse-stroke-hover'); } /* ----------------------------------------------------------------------------- Button (Default, Inverse, Stroke) State: Active ----------------------------------------------------------------------------- */ &:active { .button-variant('default-inverse-stroke-active'); } /* ----------------------------------------------------------------------------- Button (Default, Inverse, Stroke) State: Selected ----------------------------------------------------------------------------- */ &.active { .button-variant('default-inverse-stroke-selected'); } /* ----------------------------------------------------------------------------- Button (Default, Inverse, Stroke) State: Disabled ----------------------------------------------------------------------------- */ &.disabled, &[disabled] { opacity: @button-default-inverse-stroke-disabled-opacity; .button-variant('default-inverse-stroke-disabled'); } } } } } } } & when (@button-primary-enabled) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Button (Primary) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .button.button-primary { /* ----------------------------------------------------------------------------- Button (Primary) State: Normal ----------------------------------------------------------------------------- */ .button-variant('primary'); /* ----------------------------------------------------------------------------- Button (Primary) State: Hover ----------------------------------------------------------------------------- */ &:hover { .button-variant('primary-hover'); } /* ----------------------------------------------------------------------------- Button (Primary) State: Active ----------------------------------------------------------------------------- */ &:active { .button-variant('primary-active'); } /* ----------------------------------------------------------------------------- Button (Primary) State: Selected ----------------------------------------------------------------------------- */ &.active { .button-variant('primary-selected'); } /* ----------------------------------------------------------------------------- Button (Primary) State: Disabled ----------------------------------------------------------------------------- */ &.disabled, &[disabled] { opacity: @button-primary-disabled-opacity; .button-variant('primary-disabled'); } & when (@button-primary-link-enabled) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Button (Primary, link) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ &.button-link { /* ----------------------------------------------------------------------------- Button (Primary, Link) State: Normal ----------------------------------------------------------------------------- */ .button-variant('primary-link'); /* ----------------------------------------------------------------------------- Button (Primary, Link) State: Hover ----------------------------------------------------------------------------- */ &:hover { .button-variant('primary-link-hover'); } /* ----------------------------------------------------------------------------- Button (Primary, Link) State: Active ----------------------------------------------------------------------------- */ &:active { .button-variant('primary-link-active'); } /* ----------------------------------------------------------------------------- Button (Primary, Link) State: Selected ----------------------------------------------------------------------------- */ &.active { .button-variant('primary-link-selected'); } /* ----------------------------------------------------------------------------- Button (Primary, Link) State: Disabled ----------------------------------------------------------------------------- */ &.disabled, &[disabled] { opacity: @button-primary-link-disabled-opacity; .button-variant('primary-link-disabled'); } } } & when (@button-primary-stroke-enabled) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Button (Primary, Stroke) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ &.button-stroke { /* ----------------------------------------------------------------------------- Button (Primary, Stroke) State: Normal ----------------------------------------------------------------------------- */ .button-variant('primary-stroke'); /* ----------------------------------------------------------------------------- Button (Primary, Stroke) State: Hover ----------------------------------------------------------------------------- */ &:hover { .button-variant('primary-stroke-hover'); } /* ----------------------------------------------------------------------------- Button (Primary, Stroke) State: Active ----------------------------------------------------------------------------- */ &:active { .button-variant('primary-stroke-active'); } /* ----------------------------------------------------------------------------- Button (Primary, Stroke) State: Selected ----------------------------------------------------------------------------- */ &.active { .button-variant('primary-stroke-selected'); } /* ----------------------------------------------------------------------------- Button (Primary, Stroke) State: Disabled ----------------------------------------------------------------------------- */ &.disabled, &[disabled] { opacity: @button-primary-stroke-disabled-opacity; .button-variant('primary-stroke-disabled'); } } } & when (@button-primary-inverse-enabled) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Button (Primary, Inverse) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ &.button-inverse { /* ----------------------------------------------------------------------------- Button (Primary, Inverse) State: Normal ----------------------------------------------------------------------------- */ .button-variant('primary-inverse'); /* ----------------------------------------------------------------------------- Button (Primary, Inverse) State: Hover ----------------------------------------------------------------------------- */ &:hover { .button-variant('primary-inverse-hover'); } /* ----------------------------------------------------------------------------- Button (Primary, Inverse) State: Active ----------------------------------------------------------------------------- */ &:active { .button-variant('primary-inverse-active'); } /* ----------------------------------------------------------------------------- Button (Primary, Inverse) State: Selected ----------------------------------------------------------------------------- */ &.active { .button-variant('primary-inverse-selected'); } /* ----------------------------------------------------------------------------- Button (Primary, Inverse) State: Disabled ----------------------------------------------------------------------------- */ &.disabled, &[disabled] { opacity: @button-primary-inverse-disabled-opacity; .button-variant('primary-inverse-disabled'); } & when (@button-primary-inverse-link-enabled) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Button (Primary, Inverse, Link) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ &.button-link { /* ----------------------------------------------------------------------------- Button (Primary, Inverse, Link) State: Normal ----------------------------------------------------------------------------- */ .button-variant('primary-inverse-link'); /* ----------------------------------------------------------------------------- Button (Primary, Inverse, Link) State: Hover ----------------------------------------------------------------------------- */ &:hover { .button-variant('primary-inverse-link-hover'); } /* ----------------------------------------------------------------------------- Button (Primary, Inverse, Link) State: Active ----------------------------------------------------------------------------- */ &:active { .button-variant('primary-inverse-link-active'); } /* ----------------------------------------------------------------------------- Button (Primary, Inverse, Link) State: Selected ----------------------------------------------------------------------------- */ &.active { .button-variant('primary-inverse-link-selected'); } /* ----------------------------------------------------------------------------- Button (Primary, Inverse, Link) State: Disabled ----------------------------------------------------------------------------- */ &.disabled, &[disabled] { opacity: @button-primary-inverse-link-disabled-opacity; .button-variant('primary-inverse-link-disabled'); } } } & when (@button-primary-inverse-stroke-enabled) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Button (Primary, Inverse, Stroke) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ &.button-stroke { /* ----------------------------------------------------------------------------- Button (Primary, Inverse, Stroke) State: Normal ----------------------------------------------------------------------------- */ .button-variant('primary-inverse-stroke'); /* ----------------------------------------------------------------------------- Button (Primary, Inverse, Stroke) State: Hover ----------------------------------------------------------------------------- */ &:hover { .button-variant('primary-inverse-stroke-hover'); } /* ----------------------------------------------------------------------------- Button (Primary, Inverse, Stroke) State: Active ----------------------------------------------------------------------------- */ &:active { .button-variant('primary-inverse-stroke-active'); } /* ----------------------------------------------------------------------------- Button (Primary, Inverse, Stroke) State: Selected ----------------------------------------------------------------------------- */ &.active { .button-variant('primary-inverse-stroke-selected'); } /* ----------------------------------------------------------------------------- Button (Primary, Inverse, Stroke) State: Disabled ----------------------------------------------------------------------------- */ &.disabled, &[disabled] { opacity: @button-primary-inverse-stroke-disabled-opacity; .button-variant('primary-inverse-stroke-disabled'); } } } } } } } & when (@button-success-enabled) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Button (Success) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .button.button-success { /* ----------------------------------------------------------------------------- Button (Success) State: Normal ----------------------------------------------------------------------------- */ .button-variant('success'); /* ----------------------------------------------------------------------------- Button (Success) State: Hover ----------------------------------------------------------------------------- */ &:hover { .button-variant('success-hover'); } /* ----------------------------------------------------------------------------- Button (Success) State: Active ----------------------------------------------------------------------------- */ &:active { .button-variant('success-active'); } /* ----------------------------------------------------------------------------- Button (Success) State: Selected ----------------------------------------------------------------------------- */ &.active { .button-variant('success-selected'); } /* ----------------------------------------------------------------------------- Button (Success) State: Disabled ----------------------------------------------------------------------------- */ &.disabled, &[disabled] { opacity: @button-success-disabled-opacity; .button-variant('success-disabled'); } & when (@button-success-link-enabled) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Button (Success, link) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ &.button-link { /* ----------------------------------------------------------------------------- Button (Success, Link) State: Normal ----------------------------------------------------------------------------- */ .button-variant('success-link'); /* ----------------------------------------------------------------------------- Button (Success, Link) State: Hover ----------------------------------------------------------------------------- */ &:hover { .button-variant('success-link-hover'); } /* ----------------------------------------------------------------------------- Button (Success, Link) State: Active ----------------------------------------------------------------------------- */ &:active { .button-variant('success-link-active'); } /* ----------------------------------------------------------------------------- Button (Success, Link) State: Success ----------------------------------------------------------------------------- */ &.active { .button-variant('success-link-selected'); } /* ----------------------------------------------------------------------------- Button (Success, Link) State: Disabled ----------------------------------------------------------------------------- */ &.disabled, &[disabled] { opacity: @button-success-link-disabled-opacity; .button-variant('success-link-disabled'); } } } & when (@button-success-stroke-enabled) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Button (Success, Stroke) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ &.button-stroke { /* ----------------------------------------------------------------------------- Button (Success, Stroke) State: Normal ----------------------------------------------------------------------------- */ .button-variant('success-stroke'); /* ----------------------------------------------------------------------------- Button (Success, Stroke) State: Hover ----------------------------------------------------------------------------- */ &:hover { .button-variant('success-stroke-hover'); } /* ----------------------------------------------------------------------------- Button (Success, Stroke) State: Active ----------------------------------------------------------------------------- */ &:active { .button-variant('success-stroke-active'); } /* ----------------------------------------------------------------------------- Button (Success, Stroke) State: Selected ----------------------------------------------------------------------------- */ &.active { .button-variant('success-stroke-selected'); } /* ----------------------------------------------------------------------------- Button (Success, Stroke) State: Disabled ----------------------------------------------------------------------------- */ &.disabled, &[disabled] { opacity: @button-success-stroke-disabled-opacity; .button-variant('success-stroke-disabled'); } } } & when (@button-success-inverse-enabled) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Button (Success, Inverse) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ &.button-inverse { /* ----------------------------------------------------------------------------- Button (Success, Inverse) State: Normal ----------------------------------------------------------------------------- */ .button-variant('success-inverse'); /* ----------------------------------------------------------------------------- Button (Success, Inverse) State: Hover ----------------------------------------------------------------------------- */ &:hover { .button-variant('success-inverse-hover'); } /* ----------------------------------------------------------------------------- Button (Success, Inverse) State: Active ----------------------------------------------------------------------------- */ &:active { .button-variant('success-inverse-active'); } /* ----------------------------------------------------------------------------- Button (Success, Inverse) State: Selected ----------------------------------------------------------------------------- */ &.active { .button-variant('success-inverse-selected'); } /* ----------------------------------------------------------------------------- Button (Success, Inverse) State: Disabled ----------------------------------------------------------------------------- */ &.disabled, &[disabled] { opacity: @button-success-inverse-disabled-opacity; .button-variant('success-inverse-disabled'); } & when (@button-success-inverse-link-enabled) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Button (Success, Inverse, Link) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ &.button-link { /* ----------------------------------------------------------------------------- Button (Success, Inverse, Link) State: Normal ----------------------------------------------------------------------------- */ .button-variant('success-inverse-link'); /* ----------------------------------------------------------------------------- Button (Success, Inverse, Link) State: Hover ----------------------------------------------------------------------------- */ &:hover { .button-variant('success-inverse-link-hover'); } /* ----------------------------------------------------------------------------- Button (Success, Inverse, Link) State: Active ----------------------------------------------------------------------------- */ &:active { .button-variant('success-inverse-link-active'); } /* ----------------------------------------------------------------------------- Button (Success, Inverse, Link) State: Selected ----------------------------------------------------------------------------- */ &.active { .button-variant('success-inverse-link-selected'); } /* ----------------------------------------------------------------------------- Button (Success, Inverse, Link) State: Disabled ----------------------------------------------------------------------------- */ &.disabled, &[disabled] { opacity: @button-success-inverse-link-disabled-opacity; .button-variant('success-inverse-link-disabled'); } } } & when (@button-success-inverse-stroke-enabled) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Button (Success, Inverse, Stroke) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ &.button-stroke { /* ----------------------------------------------------------------------------- Button (Success, Inverse, Stroke) State: Normal ----------------------------------------------------------------------------- */ .button-variant('success-inverse-stroke'); /* ----------------------------------------------------------------------------- Button (Success, Inverse, Stroke) State: Hover ----------------------------------------------------------------------------- */ &:hover { .button-variant('success-inverse-stroke-hover'); } /* ----------------------------------------------------------------------------- Button (Success, Inverse, Stroke) State: Active ----------------------------------------------------------------------------- */ &:active { .button-variant('success-inverse-stroke-active'); } /* ----------------------------------------------------------------------------- Button (Success, Inverse, Stroke) State: Selected ----------------------------------------------------------------------------- */ &.active { .button-variant('success-inverse-stroke-selected'); } /* ----------------------------------------------------------------------------- Button (Success, Inverse, Stroke) State: Disabled ----------------------------------------------------------------------------- */ &.disabled, &[disabled] { opacity: @button-success-inverse-stroke-disabled-opacity; .button-variant('success-inverse-stroke-disabled'); } } } } } } } & when (@button-warning-enabled) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Button (Warning) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .button.button-warning { /* ----------------------------------------------------------------------------- Button (Warning) State: Normal ----------------------------------------------------------------------------- */ .button-variant('warning'); /* ----------------------------------------------------------------------------- Button (Warning) State: Hover ----------------------------------------------------------------------------- */ &:hover { .button-variant('warning-hover'); } /* ----------------------------------------------------------------------------- Button (Warning) State: Active ----------------------------------------------------------------------------- */ &:active { .button-variant('warning-active'); } /* ----------------------------------------------------------------------------- Button (Warning) State: Selected ----------------------------------------------------------------------------- */ &.active { .button-variant('warning-selected'); } /* ----------------------------------------------------------------------------- Button (Warning) State: Disabled ----------------------------------------------------------------------------- */ &.disabled, &[disabled] { opacity: @button-warning-disabled-opacity; .button-variant('warning-disabled'); } & when (@button-warning-link-enabled) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Button (Warning, link) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ &.button-link { /* ----------------------------------------------------------------------------- Button (Warning, Link) State: Normal ----------------------------------------------------------------------------- */ .button-variant('warning-link'); /* ----------------------------------------------------------------------------- Button (Warning, Link) State: Hover ----------------------------------------------------------------------------- */ &:hover { .button-variant('warning-link-hover'); } /* ----------------------------------------------------------------------------- Button (Warning, Link) State: Active ----------------------------------------------------------------------------- */ &:active { .button-variant('warning-link-active'); } /* ----------------------------------------------------------------------------- Button (Warning, Link) State: Selected ----------------------------------------------------------------------------- */ &.active { .button-variant('warning-link-selected'); } /* ----------------------------------------------------------------------------- Button (Warning, Link) State: Disabled ----------------------------------------------------------------------------- */ &.disabled, &[disabled] { opacity: @button-warning-link-disabled-opacity; .button-variant('warning-link-disabled'); } } } & when (@button-warning-stroke-enabled) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Button (Warning, Stroke) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ &.button-stroke { /* ----------------------------------------------------------------------------- Button (Warning, Stroke) State: Normal ----------------------------------------------------------------------------- */ .button-variant('warning-stroke'); /* ----------------------------------------------------------------------------- Button (Warning, Stroke) State: Hover ----------------------------------------------------------------------------- */ &:hover { .button-variant('warning-stroke-hover'); } /* ----------------------------------------------------------------------------- Button (Warning, Stroke) State: Active ----------------------------------------------------------------------------- */ &:active { .button-variant('warning-stroke-active'); } /* ----------------------------------------------------------------------------- Button (Warning, Stroke) State: Selected ----------------------------------------------------------------------------- */ &.active { .button-variant('warning-stroke-selected'); } /* ----------------------------------------------------------------------------- Button (Warning, Stroke) State: Disabled ----------------------------------------------------------------------------- */ &.disabled, &[disabled] { opacity: @button-warning-stroke-disabled-opacity; .button-variant('warning-stroke-disabled'); } } } & when (@button-warning-inverse-enabled) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Button (Warning, Inverse) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ &.button-inverse { /* ----------------------------------------------------------------------------- Button (Warning, Inverse) State: Normal ----------------------------------------------------------------------------- */ .button-variant('warning-inverse'); /* ----------------------------------------------------------------------------- Button (Warning, Inverse) State: Hover ----------------------------------------------------------------------------- */ &:hover { .button-variant('warning-inverse-hover'); } /* ----------------------------------------------------------------------------- Button (Warning, Inverse) State: Active ----------------------------------------------------------------------------- */ &:active { .button-variant('warning-inverse-active'); } /* ----------------------------------------------------------------------------- Button (Warning, Inverse) State: Selected ----------------------------------------------------------------------------- */ &.active { .button-variant('warning-inverse-selected'); } /* ----------------------------------------------------------------------------- Button (Warning, Inverse) State: Disabled ----------------------------------------------------------------------------- */ &.disabled, &[disabled] { opacity: @button-warning-inverse-disabled-opacity; .button-variant('warning-inverse-disabled'); } & when (@button-warning-inverse-link-enabled) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Button (Warning, Inverse, Link) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ &.button-link { /* ----------------------------------------------------------------------------- Button (Warning, Inverse, Link) State: Normal ----------------------------------------------------------------------------- */ .button-variant('warning-inverse-link'); /* ----------------------------------------------------------------------------- Button (Warning, Inverse, Link) State: Hover ----------------------------------------------------------------------------- */ &:hover { .button-variant('warning-inverse-link-hover'); } /* ----------------------------------------------------------------------------- Button (Warning, Inverse, Link) State: Active ----------------------------------------------------------------------------- */ &:active { .button-variant('warning-inverse-link-active'); } /* ----------------------------------------------------------------------------- Button (Warning, Inverse, Link) State: Selected ----------------------------------------------------------------------------- */ &.active { .button-variant('warning-inverse-link-selected'); } /* ----------------------------------------------------------------------------- Button (Warning, Inverse, Link) State: Disabled ----------------------------------------------------------------------------- */ &.disabled, &[disabled] { opacity: @button-warning-inverse-link-disabled-opacity; .button-variant('warning-inverse-link-disabled'); } } } & when (@button-warning-inverse-stroke-enabled) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Button (Warning, Inverse, Stroke) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ &.button-stroke { /* ----------------------------------------------------------------------------- Button (Warning, Inverse, Stroke) State: Normal ----------------------------------------------------------------------------- */ .button-variant('warning-inverse-stroke'); /* ----------------------------------------------------------------------------- Button (Warning, Inverse, Stroke) State: Hover ----------------------------------------------------------------------------- */ &:hover { .button-variant('warning-inverse-stroke-hover'); } /* ----------------------------------------------------------------------------- Button (Warning, Inverse, Stroke) State: Active ----------------------------------------------------------------------------- */ &:active { .button-variant('warning-inverse-stroke-active'); } /* ----------------------------------------------------------------------------- Button (Warning, Inverse, Stroke) State: Selected ----------------------------------------------------------------------------- */ &.active { .button-variant('warning-inverse-stroke-selected'); } /* ----------------------------------------------------------------------------- Button (Warning, Inverse, Stroke) State: Disabled ----------------------------------------------------------------------------- */ &.disabled, &[disabled] { opacity: @button-warning-inverse-stroke-disabled-opacity; .button-variant('warning-inverse-stroke-disabled'); } } } } } } } & when (@button-danger-enabled) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Button (Danger) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .button.button-danger { /* ----------------------------------------------------------------------------- Button (Danger) State: Normal ----------------------------------------------------------------------------- */ .button-variant('danger'); /* ----------------------------------------------------------------------------- Button (Danger) State: Hover ----------------------------------------------------------------------------- */ &:hover { .button-variant('danger-hover'); } /* ----------------------------------------------------------------------------- Button (Danger) State: Active ----------------------------------------------------------------------------- */ &:active { .button-variant('danger-active'); } /* ----------------------------------------------------------------------------- Button (Danger) State: Selected ----------------------------------------------------------------------------- */ &.active { .button-variant('danger-selected'); } /* ----------------------------------------------------------------------------- Button (Danger) State: Disabled ----------------------------------------------------------------------------- */ &.disabled, &[disabled] { opacity: @button-danger-disabled-opacity; .button-variant('danger-disabled'); } & when (@button-danger-link-enabled) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Button (Danger, link) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ &.button-link { /* ----------------------------------------------------------------------------- Button (Danger, Link) State: Normal ----------------------------------------------------------------------------- */ .button-variant('danger-link'); /* ----------------------------------------------------------------------------- Button (Danger, Link) State: Hover ----------------------------------------------------------------------------- */ &:hover { .button-variant('danger-link-hover'); } /* ----------------------------------------------------------------------------- Button (Danger, Link) State: Active ----------------------------------------------------------------------------- */ &:active { .button-variant('danger-link-active'); } /* ----------------------------------------------------------------------------- Button (Danger, Link) State: Selected ----------------------------------------------------------------------------- */ &.active { .button-variant('danger-link-selected'); } /* ----------------------------------------------------------------------------- Button (Danger, Link) State: Disabled ----------------------------------------------------------------------------- */ &.disabled, &[disabled] { opacity: @button-danger-link-disabled-opacity; .button-variant('danger-link-disabled'); } } } & when (@button-danger-stroke-enabled) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Button (Danger, Stroke) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ &.button-stroke { /* ----------------------------------------------------------------------------- Button (Danger, Stroke) State: Normal ----------------------------------------------------------------------------- */ .button-variant('danger-stroke'); /* ----------------------------------------------------------------------------- Button (Danger, Stroke) State: Hover ----------------------------------------------------------------------------- */ &:hover { .button-variant('danger-stroke-hover'); } /* ----------------------------------------------------------------------------- Button (Danger, Stroke) State: Active ----------------------------------------------------------------------------- */ &:active { .button-variant('danger-stroke-active'); } /* ----------------------------------------------------------------------------- Button (Danger, Stroke) State: Selected ----------------------------------------------------------------------------- */ &.active { .button-variant('danger-stroke-selected'); } /* ----------------------------------------------------------------------------- Button (Danger, Stroke) State: Disabled ----------------------------------------------------------------------------- */ &.disabled, &[disabled] { opacity: @button-danger-stroke-disabled-opacity; .button-variant('danger-stroke-disabled'); } } } & when (@button-danger-inverse-enabled) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Button (Danger, Inverse) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ &.button-inverse { /* ----------------------------------------------------------------------------- Button (Danger, Inverse) State: Normal ----------------------------------------------------------------------------- */ .button-variant('danger-inverse'); /* ----------------------------------------------------------------------------- Button (Danger, Inverse) State: Hover ----------------------------------------------------------------------------- */ &:hover { .button-variant('danger-inverse-hover'); } /* ----------------------------------------------------------------------------- Button (Danger, Inverse) State: Active ----------------------------------------------------------------------------- */ &:active { .button-variant('danger-inverse-active'); } /* ----------------------------------------------------------------------------- Button (Danger, Inverse) State: Selected ----------------------------------------------------------------------------- */ &.active { .button-variant('danger-inverse-selected'); } /* ----------------------------------------------------------------------------- Button (Danger, Inverse) State: Disabled ----------------------------------------------------------------------------- */ &.disabled, &[disabled] { opacity: @button-danger-inverse-disabled-opacity; .button-variant('danger-inverse-disabled'); } & when (@button-danger-inverse-link-enabled) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Button (Danger, Inverse, Link) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ &.button-link { /* ----------------------------------------------------------------------------- Button (Danger, Inverse, Link) State: Normal ----------------------------------------------------------------------------- */ .button-variant('danger-inverse-link'); /* ----------------------------------------------------------------------------- Button (Danger, Inverse, Link) State: Hover ----------------------------------------------------------------------------- */ &:hover { .button-variant('danger-inverse-link-hover'); } /* ----------------------------------------------------------------------------- Button (Danger, Inverse, Link) State: Active ----------------------------------------------------------------------------- */ &:active { .button-variant('danger-inverse-link-active'); } /* ----------------------------------------------------------------------------- Button (Danger, Inverse, Link) State: Selected ----------------------------------------------------------------------------- */ &.active { .button-variant('danger-inverse-link-selected'); } /* ----------------------------------------------------------------------------- Button (Danger, Inverse, Link) State: Disabled ----------------------------------------------------------------------------- */ &.disabled, &[disabled] { opacity: @button-danger-inverse-link-disabled-opacity; .button-variant('danger-inverse-link-disabled'); } } } & when (@button-danger-inverse-stroke-enabled) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Button (Danger, Inverse, Stroke) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ &.button-stroke { /* ----------------------------------------------------------------------------- Button (Danger, Inverse, Stroke) State: Normal ----------------------------------------------------------------------------- */ .button-variant('danger-inverse-stroke'); /* ----------------------------------------------------------------------------- Button (Danger, Inverse, Stroke) State: Hover ----------------------------------------------------------------------------- */ &:hover { .button-variant('danger-inverse-stroke-hover'); } /* ----------------------------------------------------------------------------- Button (Danger, Inverse, Stroke) State: Active ----------------------------------------------------------------------------- */ &:active { .button-variant('danger-inverse-stroke-active'); } /* ----------------------------------------------------------------------------- Button (Danger, Inverse, Stroke) State: Selected ----------------------------------------------------------------------------- */ &.active { .button-variant('danger-inverse-stroke-selected'); } /* ----------------------------------------------------------------------------- Button (Danger, Inverse, Stroke) State: Disabled ----------------------------------------------------------------------------- */ &.disabled, &[disabled] { opacity: @button-danger-inverse-stroke-disabled-opacity; .button-variant('danger-inverse-stroke-disabled'); } } } } } } } & when (@button-collection-enabled) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Button Collection -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .button-collection { margin-top: @button-collection-margin-top; margin-bottom: @button-collection-margin-bottom - @button-collection-spacing; display: block; font-size: 0px; .clearfix(); /* ----------------------------------------------------------------------------- Flush Bottom ----------------------------------------------------------------------------- */ &.flush-bottom { margin-bottom: -@button-collection-spacing !important; } /* ----------------------------------------------------------------------------- Button Styles ----------------------------------------------------------------------------- */ > .button, > .button-group { display: inline-block; margin-right: @button-collection-spacing; margin-bottom: @button-collection-spacing; &:last-child { margin-right: 0px; } } /* ----------------------------------------------------------------------------- Button Collection Align (Center) ----------------------------------------------------------------------------- */ &.button-collection-align-horizontal-center { text-align: center; } /* ----------------------------------------------------------------------------- Button Collection Align (Left) ----------------------------------------------------------------------------- */ &.button-collection-align-horizontal-left { text-align: left; } /* ----------------------------------------------------------------------------- Button Collection Align (Right) ----------------------------------------------------------------------------- */ &.button-collection-align-horizontal-right { text-align: right; } /* ----------------------------------------------------------------------------- Button Collection Align (Top) ----------------------------------------------------------------------------- */ &.button-collection-align-vertical-top { > .button, > .button-group { vertical-align: top; } } /* ----------------------------------------------------------------------------- Button Collection Align (Center) ----------------------------------------------------------------------------- */ &.button-collection-align-vertical-center { > .button, > .button-group { vertical-align: middle } } /* ----------------------------------------------------------------------------- Button Collection Align (Bottom) ----------------------------------------------------------------------------- */ &.button-collection-align-vertical-bottom { > .button, > .button-group { vertical-align: bottom; } } } } & when (@button-group-enabled) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Button Group -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .button-group { display: block; position: relative; .clearfix(); /* ----------------------------------------------------------------------------- Button ----------------------------------------------------------------------------- */ > .button { position: relative; float: left; &:not(:first-child) { &:not(:last-child) { &:not(.dropdown-toggle) { border-radius: 0px !important; } } } &:first-child { margin-left: 0px; &:not(:last-child) { &:not(.dropdown-toggle) { .border-right-radius(0px) !important; } } } &:last-child { &:not(:first-child) { .border-left-radius(0px) !important; } } } /* ----------------------------------------------------------------------------- Button ----------------------------------------------------------------------------- */ .button { + .button { margin-left: @button-group-button-default-offset-horizontal; &.button-stroke { margin-left: @button-group-button-stroke-offset-horizontal; } } + .button-group { margin-left: @button-group-button-default-offset-horizontal; } } /* ----------------------------------------------------------------------------- Button Group ----------------------------------------------------------------------------- */ .button-group { + .button { margin-left: @button-group-button-default-offset-horizontal; &.button-stroke { margin-left: @button-group-button-stroke-offset-horizontal; } } + .button-group { margin-left: @button-group-button-default-offset-horizontal; } } } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Button Controls -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ [data-toggle=buttons] { > .button { input[type=checkbox], input[type=radio] { .invisible(); } } > .button-group { > .button { input[type=checkbox], input[type=radio] { .invisible(); } } } } } & when (@button-enabled) and (@screen-mini-enabled) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Size: Mini (@screen-mini) and above -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ @media (min-width: @screen-mini) { & when (@button-scale-screen-mini-enabled) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Button -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .button { /* ----------------------------------------------------------------------------- Button Styles ----------------------------------------------------------------------------- */ .button-size-variant('', 'screen-mini'); /* ----------------------------------------------------------------------------- Icon ----------------------------------------------------------------------------- */ .icon { &:first-child { margin-right: @button-padding-horizontal * @button-padding-horizontal-scale-screen-mini * 0.25; } &:last-child { margin-left: @button-padding-horizontal * @button-padding-horizontal-scale-screen-mini * 0.25; } } } /* ----------------------------------------------------------------------------- Block Button ----------------------------------------------------------------------------- */ .button-wide { &.button-wide-below-screen-mini { width: auto; display: inline-block; } } } & when (@button-mini-enabled) and (@button-mini-scale-screen-mini-enabled) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Button (Mini) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .button.button-mini { /* ----------------------------------------------------------------------------- Button (Mini) Styles ----------------------------------------------------------------------------- */ .button-size-variant('mini', 'screen-mini'); /* ----------------------------------------------------------------------------- Icon ----------------------------------------------------------------------------- */ .icon { &:first-child { margin-right: @button-mini-padding-horizontal * @button-mini-padding-horizontal-scale-screen-mini * 0.25; } &:last-child { margin-left: @button-mini-padding-horizontal * @button-mini-padding-horizontal-scale-screen-mini * 0.25; } } } } & when (@button-small-enabled) and (@button-small-scale-screen-mini-enabled) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Button (Small) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .button.button-small { /* ----------------------------------------------------------------------------- Button (Small) Styles ----------------------------------------------------------------------------- */ .button-size-variant('small', 'screen-mini'); /* ----------------------------------------------------------------------------- Icon ----------------------------------------------------------------------------- */ .icon { &:first-child { margin-right: @button-small-padding-horizontal * @button-small-padding-horizontal-scale-screen-mini * 0.25; } &:last-child { margin-left: @button-small-padding-horizontal * @button-small-padding-horizontal-scale-screen-mini * 0.25; } } } } & when (@button-large-enabled) and (@button-large-scale-screen-mini-enabled) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Button (Large) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .button.button-large { /* ----------------------------------------------------------------------------- Button (Large) Styles ----------------------------------------------------------------------------- */ .button-size-variant('large', 'screen-mini'); /* ----------------------------------------------------------------------------- Icon ----------------------------------------------------------------------------- */ .icon { &:first-child { margin-right: @button-large-padding-horizontal * @button-small-padding-horizontal-scale-screen-mini * 0.25; } &:last-child { margin-left: @button-large-padding-horizontal * @button-small-padding-horizontal-scale-screen-mini * 0.25; } } } } & when (@button-jumbo-enabled) and (@button-jumbo-scale-screen-mini-enabled) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Button (Jumbo) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .button.button-jumbo { /* ----------------------------------------------------------------------------- Button (Jumbo) Styles ----------------------------------------------------------------------------- */ .button-size-variant('jumbo', 'screen-mini'); /* ----------------------------------------------------------------------------- Icon ----------------------------------------------------------------------------- */ .icon { &:first-child { margin-right: @button-jumbo-padding-horizontal * @button-jumbo-padding-horizontal-scale-screen-mini * 0.25; } &:last-child { margin-left: @button-jumbo-padding-horizontal * @button-jumbo-padding-horizontal-scale-screen-mini * 0.25; } } } } & when (@button-collection-enabled) and (@button-collection-scale-screen-mini-enabled) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Button Collection -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .button-collection { margin-top: @button-collection-margin-top * @button-collection-margin-bottom-scale-screen-mini; margin-bottom: (@button-collection-margin-bottom * @button-collection-margin-bottom-scale-screen-mini) - @button-collection-spacing-screen-mini; /* ----------------------------------------------------------------------------- Flush Bottom ----------------------------------------------------------------------------- */ &.flush-bottom { margin-bottom: -@button-collection-spacing-screen-mini !important; } /* ----------------------------------------------------------------------------- Button Styles ----------------------------------------------------------------------------- */ > .button, > .button-group { margin-right: @button-collection-spacing-screen-mini; margin-bottom: @button-collection-spacing-screen-mini; } } } } } & when (@button-enabled) and (@screen-small-enabled) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Size: Small (@screen-small) and above -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ @media (min-width: @screen-small) { & when (@button-scale-screen-small-enabled) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Button -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .button { /* ----------------------------------------------------------------------------- Button Styles ----------------------------------------------------------------------------- */ .button-size-variant('', 'screen-small'); /* ----------------------------------------------------------------------------- Icon ----------------------------------------------------------------------------- */ .icon { &:first-child { margin-right: @button-padding-horizontal * @button-padding-horizontal-scale-screen-small * 0.25; } &:last-child { margin-left: @button-padding-horizontal * @button-padding-horizontal-scale-screen-small * 0.25; } } } /* ----------------------------------------------------------------------------- Block Button ----------------------------------------------------------------------------- */ .button-wide { &.button-wide-below-screen-small { width: auto; display: inline-block; } } } & when (@button-mini-enabled) and (@button-mini-scale-screen-small-enabled) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Button (Mini) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .button.button-mini { /* ----------------------------------------------------------------------------- Button (Mini) Styles ----------------------------------------------------------------------------- */ .button-size-variant('mini', 'screen-small'); /* ----------------------------------------------------------------------------- Icon ----------------------------------------------------------------------------- */ .icon { &:first-child { margin-right: @button-mini-padding-horizontal * @button-mini-padding-horizontal-scale-screen-small * 0.25; } &:last-child { margin-left: @button-mini-padding-horizontal * @button-mini-padding-horizontal-scale-screen-small * 0.25; } } } } & when (@button-small-enabled) and (@button-small-scale-screen-small-enabled) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Button (Small) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .button.button-small { /* ----------------------------------------------------------------------------- Button (Small) Styles ----------------------------------------------------------------------------- */ .button-size-variant('small', 'screen-small'); /* ----------------------------------------------------------------------------- Icon ----------------------------------------------------------------------------- */ .icon { &:first-child { margin-right: @button-small-padding-horizontal * @button-small-padding-horizontal-scale-screen-small * 0.25; } &:last-child { margin-left: @button-small-padding-horizontal * @button-small-padding-horizontal-scale-screen-small * 0.25; } } } } & when (@button-large-enabled) and (@button-large-scale-screen-small-enabled) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Button (Large) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .button.button-large { /* ----------------------------------------------------------------------------- Button (Large) Styles ----------------------------------------------------------------------------- */ .button-size-variant('large', 'screen-small'); /* ----------------------------------------------------------------------------- Icon ----------------------------------------------------------------------------- */ .icon { &:first-child { margin-right: @button-large-padding-horizontal * @button-small-padding-horizontal-scale-screen-small * 0.25; } &:last-child { margin-left: @button-large-padding-horizontal * @button-small-padding-horizontal-scale-screen-small * 0.25; } } } } & when (@button-jumbo-enabled) and (@button-jumbo-scale-screen-small-enabled) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Button (Jumbo) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .button.button-jumbo { /* ----------------------------------------------------------------------------- Button (Jumbo) Styles ----------------------------------------------------------------------------- */ .button-size-variant('jumbo', 'screen-small'); /* ----------------------------------------------------------------------------- Icon ----------------------------------------------------------------------------- */ .icon { &:first-child { margin-right: @button-jumbo-padding-horizontal * @button-jumbo-padding-horizontal-scale-screen-small * 0.25; } &:last-child { margin-left: @button-jumbo-padding-horizontal * @button-jumbo-padding-horizontal-scale-screen-small * 0.25; } } } } & when (@button-collection-enabled) and (@button-collection-scale-screen-small-enabled) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Button Collection -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .button-collection { margin-top: @button-collection-margin-top * @button-collection-margin-bottom-scale-screen-small; margin-bottom: (@button-collection-margin-bottom * @button-collection-margin-bottom-scale-screen-small) - @button-collection-spacing-screen-small; /* ----------------------------------------------------------------------------- Flush Bottom ----------------------------------------------------------------------------- */ &.flush-bottom { margin-bottom: -@button-collection-spacing-screen-small !important; } /* ----------------------------------------------------------------------------- Button Styles ----------------------------------------------------------------------------- */ > .button, > .button-group { margin-right: @button-collection-spacing-screen-small; margin-bottom: @button-collection-spacing-screen-small; } } } } } & when (@button-enabled) and (@screen-medium-enabled) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Size: Medium (@screen-medium) and above -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ @media (min-width: @screen-medium) { & when (@button-scale-screen-medium-enabled) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Button -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .button { /* ----------------------------------------------------------------------------- Button Styles ----------------------------------------------------------------------------- */ .button-size-variant('', 'screen-medium'); /* ----------------------------------------------------------------------------- Icon ----------------------------------------------------------------------------- */ .icon { &:first-child { margin-right: @button-padding-horizontal * @button-padding-horizontal-scale-screen-medium * 0.25; } &:last-child { margin-left: @button-padding-horizontal * @button-padding-horizontal-scale-screen-medium * 0.25; } } } /* ----------------------------------------------------------------------------- Block Button ----------------------------------------------------------------------------- */ .button-wide { &.button-wide-below-screen-medium { width: auto; display: inline-block; } } } & when (@button-mini-enabled) and (@button-mini-scale-screen-medium-enabled) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Button (Mini) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .button.button-mini { /* ----------------------------------------------------------------------------- Button (Mini) Styles ----------------------------------------------------------------------------- */ .button-size-variant('mini', 'screen-medium'); /* ----------------------------------------------------------------------------- Icon ----------------------------------------------------------------------------- */ .icon { &:first-child { margin-right: @button-mini-padding-horizontal * @button-mini-padding-horizontal-scale-screen-medium * 0.25; } &:last-child { margin-left: @button-mini-padding-horizontal * @button-mini-padding-horizontal-scale-screen-medium * 0.25; } } } } & when (@button-small-enabled) and (@button-small-scale-screen-medium-enabled) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Button (Small) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .button.button-small { /* ----------------------------------------------------------------------------- Button (Small) Styles ----------------------------------------------------------------------------- */ .button-size-variant('small', 'screen-medium'); /* ----------------------------------------------------------------------------- Icon ----------------------------------------------------------------------------- */ .icon { &:first-child { margin-right: @button-small-padding-horizontal * @button-small-padding-horizontal-scale-screen-medium * 0.25; } &:last-child { margin-left: @button-small-padding-horizontal * @button-small-padding-horizontal-scale-screen-medium * 0.25; } } } } & when (@button-large-enabled) and (@button-large-scale-screen-medium-enabled) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Button (Large) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .button.button-large { /* ----------------------------------------------------------------------------- Button (Large) Styles ----------------------------------------------------------------------------- */ .button-size-variant('large', 'screen-medium'); /* ----------------------------------------------------------------------------- Icon ----------------------------------------------------------------------------- */ .icon { &:first-child { margin-right: @button-large-padding-horizontal * @button-small-padding-horizontal-scale-screen-medium * 0.25; } &:last-child { margin-left: @button-large-padding-horizontal * @button-small-padding-horizontal-scale-screen-medium * 0.25; } } } } & when (@button-jumbo-enabled) and (@button-jumbo-scale-screen-medium-enabled) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Button (Jumbo) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .button.button-jumbo { /* ----------------------------------------------------------------------------- Button (Jumbo) Styles ----------------------------------------------------------------------------- */ .button-size-variant('jumbo', 'screen-medium'); /* ----------------------------------------------------------------------------- Icon ----------------------------------------------------------------------------- */ .icon { &:first-child { margin-right: @button-jumbo-padding-horizontal * @button-jumbo-padding-horizontal-scale-screen-medium * 0.25; } &:last-child { margin-left: @button-jumbo-padding-horizontal * @button-jumbo-padding-horizontal-scale-screen-medium * 0.25; } } } } & when (@button-collection-enabled) and (@button-collection-scale-screen-medium-enabled) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Button Collection -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .button-collection { margin-top: @button-collection-margin-top * @button-collection-margin-bottom-scale-screen-medium; margin-bottom: (@button-collection-margin-bottom * @button-collection-margin-bottom-scale-screen-medium) - @button-collection-spacing-screen-medium; /* ----------------------------------------------------------------------------- Flush Bottom ----------------------------------------------------------------------------- */ &.flush-bottom { margin-bottom: -@button-collection-spacing-screen-medium !important; } /* ----------------------------------------------------------------------------- Button Styles ----------------------------------------------------------------------------- */ > .button, > .button-group { margin-right: @button-collection-spacing-screen-medium; margin-bottom: @button-collection-spacing-screen-medium; } } } } } & when (@button-enabled) and (@screen-large-enabled) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Size: Large (@screen-large) and above -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ @media (min-width: @screen-large) { & when (@button-scale-screen-large-enabled) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Button -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .button { /* ----------------------------------------------------------------------------- Button Styles ----------------------------------------------------------------------------- */ .button-size-variant('', 'screen-large'); /* ----------------------------------------------------------------------------- Icon ----------------------------------------------------------------------------- */ .icon { &:first-child { margin-right: @button-padding-horizontal * @button-padding-horizontal-scale-screen-large * 0.25; } &:last-child { margin-left: @button-padding-horizontal * @button-padding-horizontal-scale-screen-large * 0.25; } } } /* ----------------------------------------------------------------------------- Block Button ----------------------------------------------------------------------------- */ .button-wide { &.button-wide-below-screen-large { width: auto; display: inline-block; } } } & when (@button-mini-enabled) and (@button-mini-scale-screen-large-enabled) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Button (Mini) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .button.button-mini { /* ----------------------------------------------------------------------------- Button (Mini) Styles ----------------------------------------------------------------------------- */ .button-size-variant('mini', 'screen-large'); /* ----------------------------------------------------------------------------- Icon ----------------------------------------------------------------------------- */ .icon { &:first-child { margin-right: @button-mini-padding-horizontal * @button-mini-padding-horizontal-scale-screen-large * 0.25; } &:last-child { margin-left: @button-mini-padding-horizontal * @button-mini-padding-horizontal-scale-screen-large * 0.25; } } } } & when (@button-small-enabled) and (@button-small-scale-screen-large-enabled) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Button (Small) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .button.button-small { /* ----------------------------------------------------------------------------- Button (Small) Styles ----------------------------------------------------------------------------- */ .button-size-variant('small', 'screen-large'); /* ----------------------------------------------------------------------------- Icon ----------------------------------------------------------------------------- */ .icon { &:first-child { margin-right: @button-small-padding-horizontal * @button-small-padding-horizontal-scale-screen-large * 0.25; } &:last-child { margin-left: @button-small-padding-horizontal * @button-small-padding-horizontal-scale-screen-large * 0.25; } } } } & when (@button-large-enabled) and (@button-large-scale-screen-large-enabled) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Button (Large) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .button.button-large { /* ----------------------------------------------------------------------------- Button (Large) Styles ----------------------------------------------------------------------------- */ .button-size-variant('large', 'screen-large'); /* ----------------------------------------------------------------------------- Icon ----------------------------------------------------------------------------- */ .icon { &:first-child { margin-right: @button-large-padding-horizontal * @button-small-padding-horizontal-scale-screen-large * 0.25; } &:last-child { margin-left: @button-large-padding-horizontal * @button-small-padding-horizontal-scale-screen-large * 0.25; } } } } & when (@button-jumbo-enabled) and (@button-jumbo-scale-screen-large-enabled) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Button (Jumbo) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .button.button-jumbo { /* ----------------------------------------------------------------------------- Button (Jumbo) Styles ----------------------------------------------------------------------------- */ .button-size-variant('jumbo', 'screen-large'); /* ----------------------------------------------------------------------------- Icon ----------------------------------------------------------------------------- */ .icon { &:first-child { margin-right: @button-jumbo-padding-horizontal * @button-jumbo-padding-horizontal-scale-screen-large * 0.25; } &:last-child { margin-left: @button-jumbo-padding-horizontal * @button-jumbo-padding-horizontal-scale-screen-large * 0.25; } } } } & when (@button-collection-enabled) and (@button-collection-scale-screen-large-enabled) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Button Collection -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .button-collection { margin-top: @button-collection-margin-top * @button-collection-margin-bottom-scale-screen-large; margin-bottom: (@button-collection-margin-bottom * @button-collection-margin-bottom-scale-screen-large) - @button-collection-spacing-screen-large; /* ----------------------------------------------------------------------------- Flush Bottom ----------------------------------------------------------------------------- */ &.flush-bottom { margin-bottom: -@button-collection-spacing-screen-large !important; } /* ----------------------------------------------------------------------------- Button Styles ----------------------------------------------------------------------------- */ > .button, > .button-group { margin-right: @button-collection-spacing-screen-large; margin-bottom: @button-collection-spacing-screen-large; } } } } } & when (@button-enabled) and (@screen-resolution-2x-enabled) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Resolution: 2x -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ @media only screen and (-webkit-min-device-pixel-ratio: 2) { } } & when (@button-enabled) and (@screen-resolution-3x-enabled) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Resolution: 3x -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ @media only screen and (-webkit-min-device-pixel-ratio: 3) { } }