/* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- -------------------------------------------------------------------------------- utilities/mixins-buttons.less -------------------------------------------------------------------------------- -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Button Variant Styling -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .button-variant(@variant-class: 'default') { @button-variant-text-color: "button-@{variant-class}-text-color"; @button-variant-text-font-family: "button-@{variant-class}-text-font-family"; @button-variant-text-font-style: "button-@{variant-class}-text-font-style"; @button-variant-text-font-weight: "button-@{variant-class}-text-font-weight"; @button-variant-text-transform: "button-@{variant-class}-text-transform"; @button-variant-text-shadow: "button-@{variant-class}-text-shadow"; @button-variant-text-decoration: "button-@{variant-class}-text-decoration"; @button-variant-text-rendering: "button-@{variant-class}-text-rendering"; @button-variant-background-color: "button-@{variant-class}-background-color"; @button-variant-background-gradient-color-top: "button-@{variant-class}-background-gradient-color-top"; @button-variant-background-gradient-color-bottom: "button-@{variant-class}-background-gradient-color-bottom"; @button-variant-border-width: "button-@{variant-class}-border-width"; @button-variant-border-color: "button-@{variant-class}-border-color"; @button-variant-border-style: "button-@{variant-class}-border-style"; @button-variant-border-top-width: "button-@{variant-class}-border-top-width"; @button-variant-border-top-color: "button-@{variant-class}-border-top-color"; @button-variant-border-top-style: "button-@{variant-class}-border-top-style"; @button-variant-border-right-width: "button-@{variant-class}-border-right-width"; @button-variant-border-right-color: "button-@{variant-class}-border-right-color"; @button-variant-border-right-style: "button-@{variant-class}-border-right-style"; @button-variant-border-bottom-width: "button-@{variant-class}-border-bottom-width"; @button-variant-border-bottom-color: "button-@{variant-class}-border-bottom-color"; @button-variant-border-bottom-style: "button-@{variant-class}-border-bottom-style"; @button-variant-border-left-width: "button-@{variant-class}-border-left-width"; @button-variant-border-left-color: "button-@{variant-class}-border-left-color"; @button-variant-border-left-style: "button-@{variant-class}-border-left-style"; @button-variant-shadow: "button-@{variant-class}-shadow"; @button-variant-caret-color: "button-@{variant-class}-caret-color"; & when not (@@button-variant-text-color = null) { color: @@button-variant-text-color; } & when not (@@button-variant-text-font-family = null) { font-family: @@button-variant-text-font-family; } & when not (@@button-variant-text-font-style = null) { font-style: @@button-variant-text-font-style; } & when not (@@button-variant-text-font-weight = null) { font-weight: @@button-variant-text-font-weight; } & when not (@@button-variant-text-transform = null) { text-transform: @@button-variant-text-transform; } & when not (@@button-variant-text-shadow = null) { text-shadow: @@button-variant-text-shadow; } & when not (@@button-variant-text-decoration = null) { text-decoration: @@button-variant-text-decoration; } & when not (@@button-variant-text-rendering = null) { text-rendering: @@button-variant-text-rendering; } & when not (@@button-variant-background-color = null) { background: @@button-variant-background-color; } & when not (@@button-variant-background-gradient-color-top = null) and not (@@button-variant-background-gradient-color-bottom = null) { #gradient > .vertical(@@button-variant-background-gradient-color-top, @@button-variant-background-gradient-color-bottom); } & when not (@@button-variant-border-width = null) { border-width: @@button-variant-border-width; } & when not (@@button-variant-border-color = null) { border-color: @@button-variant-border-color; } & when not (@@button-variant-border-style = null) { border-style: @@button-variant-border-style; } & when not (@@button-variant-border-top-width = null) { border-top-width: @@button-variant-border-top-width; } & when not (@@button-variant-border-top-color = null) { border-top-color: @@button-variant-border-top-color; } & when not (@@button-variant-border-top-style = null) { border-top-style: @@button-variant-border-top-style; } & when not (@@button-variant-border-right-width = null) { border-right-width: @@button-variant-border-right-width; } & when not (@@button-variant-border-right-color = null) { border-right-color: @@button-variant-border-right-color; } & when not (@@button-variant-border-right-style = null) { border-right-style: @@button-variant-border-right-style; } & when not (@@button-variant-border-bottom-width = null) { border-bottom-width: @@button-variant-border-bottom-width; } & when not (@@button-variant-border-bottom-color = null) { border-bottom-color: @@button-variant-border-bottom-color; } & when not (@@button-variant-border-bottom-style = null) { border-bottom-style: @@button-variant-border-bottom-style; } & when not (@@button-variant-border-left-width = null) { border-left-width: @@button-variant-border-left-width; } & when not (@@button-variant-border-left-color = null) { border-left-color: @@button-variant-border-left-color; } & when not (@@button-variant-border-left-style = null) { border-left-style: @@button-variant-border-left-style; } & when not (@@button-variant-shadow = null) { .box-shadow(@@button-variant-shadow); } & when (@button-dropdown-enabled) { & when not (@@button-variant-caret-color = null) { /* ----------------------------------------------------------------------------- Button Dropdown ----------------------------------------------------------------------------- */ &.dropdown-toggle { /* ----------------------------------------------------------------------------- Button Dropdown Caret ----------------------------------------------------------------------------- */ &:after { //.triangle-color('down', @@button-variant-caret-color) !import; border-color: @@button-variant-caret-color transparent transparent transparent !important; _border-color: @@button-variant-caret-color #000000 #000000 #000000 !important; } } } } } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Button Size Styling -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .button-size-variant(@variant-size, @variant-screen-size) { @button-variant-val-text-font-size: null; @button-variant-val-text-font-size-scale: 1.0; @button-variant-val-text-line-height: null; @button-variant-val-text-line-height-scale: 1.0; @button-variant-val-height: null; @button-variant-val-height-scale: 1.0; @button-variant-val-padding-horizontal: null; @button-variant-val-padding-horizontal-scale: 1.0; @button-variant-val-border-radius: null; @button-variant-val-border-radius-scale: 1.0; @button-variant-val-dropdown-caret-enabled: false; @button-variant-val-dropdown-caret-scale: 1.0; @button-variant-val-dropdown-caret-width: null; @button-variant-val-dropdown-caret-height: null; @button-variant-val-dropdown-caret-margin-horizontal: null; @button-variant-val-dropdown-caret-offset-vertical: null; @button-variant-val-dropdown-caret-offset-horizontal: null; & when (@variant-size = '') { & when (@variant-screen-size = '') { @button-variant-text-font-size: "button-text-font-size"; @button-variant-val-text-font-size: @@button-variant-text-font-size; @button-variant-text-line-height: "button-text-line-height"; @button-variant-val-text-line-height: @@button-variant-text-line-height; @button-variant-height: "button-height"; @button-variant-val-height: @@button-variant-height; @button-variant-padding-horizontal: "button-padding-horizontal"; @button-variant-val-padding-horizontal: @@button-variant-padding-horizontal; @button-variant-border-radius: "button-border-radius"; @button-variant-val-border-radius: @@button-variant-border-radius; @button-variant-dropdown-caret-enabled: "button-dropdown-caret-enabled"; @button-variant-val-dropdown-caret-enabled: @@button-variant-dropdown-caret-enabled; @button-variant-dropdown-caret-width: "button-dropdown-caret-width"; @button-variant-val-dropdown-caret-width: @@button-variant-dropdown-caret-width; @button-variant-dropdown-caret-height: "button-dropdown-caret-height"; @button-variant-val-dropdown-caret-height: @@button-variant-dropdown-caret-height; @button-variant-dropdown-caret-margin-horizontal: "button-dropdown-caret-margin-horizontal"; @button-variant-val-dropdown-caret-margin-horizontal: @@button-variant-dropdown-caret-margin-horizontal; @button-variant-dropdown-caret-offset-vertical: "button-dropdown-caret-offset-vertical"; @button-variant-val-dropdown-caret-offset-vertical: @@button-variant-dropdown-caret-offset-vertical; @button-variant-dropdown-caret-offset-horizontal: "button-dropdown-caret-offset-horizontal"; @button-variant-val-dropdown-caret-offset-horizontal: @@button-variant-dropdown-caret-offset-horizontal; .button-size-variant-definitions(@button-variant-val-text-font-size, @button-variant-val-text-font-size-scale, @button-variant-val-text-line-height, @button-variant-val-text-line-height-scale, @button-variant-val-height, @button-variant-val-height-scale, @button-variant-val-padding-horizontal, @button-variant-val-padding-horizontal-scale, @button-variant-val-border-radius, @button-variant-val-border-radius-scale, @button-variant-val-dropdown-caret-enabled, @button-variant-val-dropdown-caret-scale, @button-variant-val-dropdown-caret-width, @button-variant-val-dropdown-caret-height, @button-variant-val-dropdown-caret-margin-horizontal, @button-variant-val-dropdown-caret-offset-vertical, @button-variant-val-dropdown-caret-offset-horizontal); } & when not (@variant-screen-size = '') { @button-variant-text-font-size: "button-text-font-size"; @button-variant-val-text-font-size: @@button-variant-text-font-size; @button-variant-text-font-size-scale: "button-text-font-size-scale-@{variant-screen-size}"; @button-variant-val-text-font-size-scale: @@button-variant-text-font-size-scale; @button-variant-text-line-height: "button-text-line-height"; @button-variant-val-text-line-height: @@button-variant-text-line-height; @button-variant-text-line-height-scale: "button-text-line-height-scale-@{variant-screen-size}"; @button-variant-val-text-line-height-scale: @@button-variant-text-line-height-scale; @button-variant-height: "button-height"; @button-variant-val-height: @@button-variant-height; @button-variant-height-scale: "button-height-scale-@{variant-screen-size}"; @button-variant-val-height-scale: @@button-variant-height-scale; @button-variant-padding-horizontal: "button-padding-horizontal"; @button-variant-val-padding-horizontal: @@button-variant-padding-horizontal; @button-variant-padding-horizontal-scale: "button-padding-horizontal-scale-@{variant-screen-size}"; @button-variant-val-padding-horizontal-scale: @@button-variant-padding-horizontal-scale; @button-variant-border-radius: "button-border-radius"; @button-variant-val-border-radius: @@button-variant-border-radius; @button-variant-border-radius-scale: "button-border-radius-scale-@{variant-screen-size}"; @button-variant-val-border-radius-scale: @@button-variant-border-radius-scale; @button-variant-dropdown-caret-enabled: "button-dropdown-caret-enabled"; @button-variant-val-dropdown-caret-enabled: @@button-variant-dropdown-caret-enabled; @button-variant-dropdown-caret-scale: "button-dropdown-caret-scale-@{variant-screen-size}"; @button-variant-val-dropdown-caret-scale: @@button-variant-dropdown-caret-scale; @button-variant-dropdown-caret-width: "button-dropdown-caret-width"; @button-variant-val-dropdown-caret-width: @@button-variant-dropdown-caret-width; @button-variant-dropdown-caret-height: "button-dropdown-caret-height"; @button-variant-val-dropdown-caret-height: @@button-variant-dropdown-caret-height; @button-variant-dropdown-caret-margin-horizontal: "button-dropdown-caret-margin-horizontal"; @button-variant-val-dropdown-caret-margin-horizontal: @@button-variant-dropdown-caret-margin-horizontal; @button-variant-dropdown-caret-offset-vertical: "button-dropdown-caret-offset-vertical"; @button-variant-val-dropdown-caret-offset-vertical: @@button-variant-dropdown-caret-offset-vertical; @button-variant-dropdown-caret-offset-horizontal: "button-dropdown-caret-offset-horizontal"; @button-variant-val-dropdown-caret-offset-horizontal: @@button-variant-dropdown-caret-offset-horizontal; .button-size-variant-definitions(@button-variant-val-text-font-size, @button-variant-val-text-font-size-scale, @button-variant-val-text-line-height, @button-variant-val-text-line-height-scale, @button-variant-val-height, @button-variant-val-height-scale, @button-variant-val-padding-horizontal, @button-variant-val-padding-horizontal-scale, @button-variant-val-border-radius, @button-variant-val-border-radius-scale, @button-variant-val-dropdown-caret-enabled, @button-variant-val-dropdown-caret-scale, @button-variant-val-dropdown-caret-width, @button-variant-val-dropdown-caret-height, @button-variant-val-dropdown-caret-margin-horizontal, @button-variant-val-dropdown-caret-offset-vertical, @button-variant-val-dropdown-caret-offset-horizontal); } } & when not (@variant-size = '') { & when (@variant-screen-size = '') { @button-variant-text-font-size: "button-@{variant-size}-text-font-size"; @button-variant-val-text-font-size: @@button-variant-text-font-size; @button-variant-text-line-height: "button-@{variant-size}-text-line-height"; @button-variant-val-text-line-height: @@button-variant-text-line-height; @button-variant-height: "button-@{variant-size}-height"; @button-variant-val-height: @@button-variant-height; @button-variant-padding-horizontal: "button-@{variant-size}-padding-horizontal"; @button-variant-val-padding-horizontal: @@button-variant-padding-horizontal; @button-variant-border-radius: "button-@{variant-size}-border-radius"; @button-variant-val-border-radius: @@button-variant-border-radius; @button-variant-dropdown-caret-enabled: "button-dropdown-caret-enabled"; @button-variant-val-dropdown-caret-enabled: @@button-variant-dropdown-caret-enabled; @button-variant-dropdown-caret-width: "button-@{variant-size}-dropdown-caret-width"; @button-variant-val-dropdown-caret-width: @@button-variant-dropdown-caret-width; @button-variant-dropdown-caret-height: "button-@{variant-size}-dropdown-caret-height"; @button-variant-val-dropdown-caret-height: @@button-variant-dropdown-caret-height; @button-variant-dropdown-caret-margin-horizontal: "button-@{variant-size}-dropdown-caret-margin-horizontal"; @button-variant-val-dropdown-caret-margin-horizontal: @@button-variant-dropdown-caret-margin-horizontal; @button-variant-dropdown-caret-offset-vertical: "button-@{variant-size}-dropdown-caret-offset-vertical"; @button-variant-val-dropdown-caret-offset-vertical: @@button-variant-dropdown-caret-offset-vertical; @button-variant-dropdown-caret-offset-horizontal: "button-@{variant-size}-dropdown-caret-offset-horizontal"; @button-variant-val-dropdown-caret-offset-horizontal: @@button-variant-dropdown-caret-offset-horizontal; .button-size-variant-definitions(@button-variant-val-text-font-size, @button-variant-val-text-font-size-scale, @button-variant-val-text-line-height, @button-variant-val-text-line-height-scale, @button-variant-val-height, @button-variant-val-height-scale, @button-variant-val-padding-horizontal, @button-variant-val-padding-horizontal-scale, @button-variant-val-border-radius, @button-variant-val-border-radius-scale, @button-variant-val-dropdown-caret-enabled, @button-variant-val-dropdown-caret-scale, @button-variant-val-dropdown-caret-width, @button-variant-val-dropdown-caret-height, @button-variant-val-dropdown-caret-margin-horizontal, @button-variant-val-dropdown-caret-offset-vertical, @button-variant-val-dropdown-caret-offset-horizontal); } & when not (@variant-screen-size = '') { @button-variant-text-font-size: "button-@{variant-size}-text-font-size"; @button-variant-val-text-font-size: @@button-variant-text-font-size; @button-variant-text-font-size-scale: "button-@{variant-size}-text-font-size-scale-@{variant-screen-size}"; @button-variant-val-text-font-size-scale: @@button-variant-text-font-size-scale; @button-variant-text-line-height: "button-@{variant-size}-text-line-height"; @button-variant-val-text-line-height: @@button-variant-text-line-height; @button-variant-text-line-height-scale: "button-@{variant-size}-text-line-height-scale-@{variant-screen-size}"; @button-variant-val-text-line-height-scale: @@button-variant-text-line-height-scale; @button-variant-height: "button-@{variant-size}-height"; @button-variant-val-height: @@button-variant-height; @button-variant-height-scale: "button-@{variant-size}-height-scale-@{variant-screen-size}"; @button-variant-val-height-scale: @@button-variant-height-scale; @button-variant-padding-horizontal: "button-@{variant-size}-padding-horizontal"; @button-variant-val-padding-horizontal: @@button-variant-padding-horizontal; @button-variant-padding-horizontal-scale: "button-@{variant-size}-padding-horizontal-scale-@{variant-screen-size}"; @button-variant-val-padding-horizontal-scale: @@button-variant-padding-horizontal-scale; @button-variant-border-radius: "button-@{variant-size}-border-radius"; @button-variant-val-border-radius: @@button-variant-border-radius; @button-variant-border-radius-scale: "button-@{variant-size}-border-radius-scale-@{variant-screen-size}"; @button-variant-val-border-radius-scale: @@button-variant-border-radius-scale; @button-variant-dropdown-caret-enabled: "button-dropdown-caret-enabled"; @button-variant-val-dropdown-caret-enabled: @@button-variant-dropdown-caret-enabled; @button-variant-dropdown-caret-scale: "button-dropdown-caret-scale-@{variant-screen-size}"; @button-variant-val-dropdown-caret-scale: @@button-variant-dropdown-caret-scale; @button-variant-dropdown-caret-width: "button-@{variant-size}-dropdown-caret-width"; @button-variant-val-dropdown-caret-width: @@button-variant-dropdown-caret-width; @button-variant-dropdown-caret-height: "button-@{variant-size}-dropdown-caret-height"; @button-variant-val-dropdown-caret-height: @@button-variant-dropdown-caret-height; @button-variant-dropdown-caret-margin-horizontal: "button-@{variant-size}-dropdown-caret-margin-horizontal"; @button-variant-val-dropdown-caret-margin-horizontal: @@button-variant-dropdown-caret-margin-horizontal; @button-variant-dropdown-caret-offset-vertical: "button-@{variant-size}-dropdown-caret-offset-vertical"; @button-variant-val-dropdown-caret-offset-vertical: @@button-variant-dropdown-caret-offset-vertical; @button-variant-dropdown-caret-offset-horizontal: "button-@{variant-size}-dropdown-caret-offset-horizontal"; @button-variant-val-dropdown-caret-offset-horizontal: @@button-variant-dropdown-caret-offset-horizontal; .button-size-variant-definitions(@button-variant-val-text-font-size, @button-variant-val-text-font-size-scale, @button-variant-val-text-line-height, @button-variant-val-text-line-height-scale, @button-variant-val-height, @button-variant-val-height-scale, @button-variant-val-padding-horizontal, @button-variant-val-padding-horizontal-scale, @button-variant-val-border-radius, @button-variant-val-border-radius-scale, @button-variant-val-dropdown-caret-enabled, @button-variant-val-dropdown-caret-scale, @button-variant-val-dropdown-caret-width, @button-variant-val-dropdown-caret-height, @button-variant-val-dropdown-caret-margin-horizontal, @button-variant-val-dropdown-caret-offset-vertical, @button-variant-val-dropdown-caret-offset-horizontal); } } } .button-size-variant-definitions(@text-font-size, @text-font-size-scale, @text-line-height, @text-line-height-scale, @height, @height-scale, @padding-horizontal, @padding-horizontal-scale, @border-radius, @border-radius-scale, @dropdown-caret-enabled, @dropdown-caret-scale, @dropdown-caret-width, @dropdown-caret-height, @dropdown-caret-margin-horizontal, @dropdown-caret-offset-vertical, @dropdown-caret-offset-horizontal) { & when not (@text-font-size = null) { font-size: floor(@text-font-size * @text-font-size-scale); } & when not (@text-line-height = null) { line-height: floor(@text-line-height * @text-line-height-scale); } & when not (@height = null) { height: floor(@height * @height-scale); padding-top: floor((floor(@height * @height-scale) - floor(@text-line-height * @text-line-height-scale)) / 2); padding-bottom: floor((floor(@height * @height-scale) - floor(@text-line-height * @text-line-height-scale)) / 2); } & when not (@padding-horizontal = null) { padding-left: floor(@padding-horizontal * @padding-horizontal-scale); padding-right: floor(@padding-horizontal * @padding-horizontal-scale); } & when not (@border-radius = null) { border-radius: @border-radius * @border-radius-scale; } & when (@dropdown-caret-enabled) { /* ----------------------------------------------------------------------------- Button Dropdown ----------------------------------------------------------------------------- */ &.dropdown-toggle { /* ----------------------------------------------------------------------------- Button Dropdown Caret ----------------------------------------------------------------------------- */ &:after { & when not (@dropdown-caret-width = null ) and not (@dropdown-caret-height = null) { .triangle-size('down', floor(@dropdown-caret-width * @dropdown-caret-scale), floor(@dropdown-caret-height * @dropdown-caret-scale)); } & when not (@dropdown-caret-margin-horizontal = null ) { margin-left: floor(@dropdown-caret-margin-horizontal * @dropdown-caret-scale); } & when not (@dropdown-caret-offset-vertical = null ) { margin-top: floor(@dropdown-caret-offset-vertical * @dropdown-caret-scale); } & when not (@dropdown-caret-offset-horizontal = null ) { margin-right: floor(@dropdown-caret-offset-horizontal * @dropdown-caret-scale); } } } } }