/* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- -------------------------------------------------------------------------------- base/forms.less -------------------------------------------------------------------------------- -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ & when (@form-enabled) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Form -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ form { display: block; .clearfix(); margin-top: @form-margin-top; margin-bottom: @form-margin-bottom; /* ----------------------------------------------------------------------------- Short ----------------------------------------------------------------------------- */ &.short { margin-top: @form-short-margin-top; margin-bottom: @form-short-margin-bottom; } &.short-top { margin-top: @form-short-margin-top; } &.short-bottom { margin-bottom: @form-short-margin-bottom; } /* ----------------------------------------------------------------------------- Tall ----------------------------------------------------------------------------- */ &.tall { margin-top: @form-tall-margin-top; margin-bottom: @form-tall-margin-bottom; } &.tall-top { margin-top: @form-tall-margin-top; } &.tall-bottom { margin-bottom: @form-tall-margin-bottom; } } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Fieldset -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ fieldset { padding: 0px; margin: 0px; border: 0px; min-width: 0px; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Select -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ select { .appearance(menulist); &:focus { outline: 0; } } & when (@form-label-enabled) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Label -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ label { display: block; margin-top: @form-label-margin-top; margin-bottom: @form-label-margin-bottom; font-family: @form-label-font-family; font-size: @form-label-font-size; line-height: @form-label-line-height; color: @form-label-default-color; font-style: @form-label-default-font-style; font-weight: @form-label-default-font-weight; text-transform: @form-label-default-transform; text-shadow: @form-label-default-shadow; /* ----------------------------------------------------------------------------- Short ----------------------------------------------------------------------------- */ &.short { margin-top: @form-label-short-margin-top; margin-bottom: @form-label-short-margin-bottom; } &.short-top { margin-top: @form-label-short-margin-top; } &.short-bottom { margin-bottom: @form-label-short-margin-bottom; } /* ----------------------------------------------------------------------------- Tall ----------------------------------------------------------------------------- */ &.tall { margin-top: @form-label-tall-margin-top; margin-bottom: @form-label-tall-margin-bottom; } &.tall-top { margin-top: @form-label-tall-margin-top; } &.tall-bottom { margin-bottom: @form-label-tall-margin-bottom; } & when (@form-label-default-link-enabled) { /* ----------------------------------------------------------------------------- Links ----------------------------------------------------------------------------- */ a { color: @form-label-default-link-text-color; text-decoration: @form-label-default-link-text-decoration; &:hover { color: @form-label-default-link-hover-text-color; text-decoration: @form-label-default-link-hover-text-decoration; } &:active { color: @form-label-default-link-active-text-color; text-decoration: @form-label-default-link-active-text-decoration; } &:disabled { color: @form-label-default-link-active-text-color; text-decoration: @form-label-default-link-active-text-decoration; } } } & when (@form-label-emphasize-enabled) and (@form-label-default-emphasize-enabled) { /* ----------------------------------------------------------------------------- Emphasize ----------------------------------------------------------------------------- */ strong, .emphasize { font-family: @form-label-emphasize-font-family; font-size: @form-label-emphasize-font-size; line-height: @form-label-emphasize-line-height; color: @form-label-default-emphasize-color; font-style: @form-label-default-emphasize-font-style; font-weight: @form-label-default-emphasize-font-weight; text-transform: @form-label-default-emphasize-transform; text-shadow: @form-label-default-emphasize-shadow; & when (@form-label-default-emphasize-link-enabled) { /* ----------------------------------------------------------------------------- Links ----------------------------------------------------------------------------- */ a { color: @form-label-default-emphasize-link-text-color; text-decoration: @form-label-default-emphasize-link-text-decoration; &:hover { color: @form-label-default-emphasize-link-hover-text-color; text-decoration: @form-label-default-emphasize-link-hover-text-decoration; } &:active { color: @form-label-default-emphasize-link-active-text-color; text-decoration: @form-label-default-emphasize-link-active-text-decoration; } &:disabled { color: @form-label-default-emphasize-link-active-text-color; text-decoration: @form-label-default-emphasize-link-active-text-decoration; } } } } } & when (@form-label-mute-enabled) and (@form-label-default-mute-enabled) { /* ----------------------------------------------------------------------------- Mute ----------------------------------------------------------------------------- */ .mute { font-family: @form-label-mute-font-family; font-size: @form-label-mute-font-size; line-height: @form-label-mute-line-height; color: @form-label-default-mute-color; font-style: @form-label-default-mute-font-style; font-weight: @form-label-default-mute-font-weight; text-transform: @form-label-default-mute-transform; text-shadow: @form-label-default-mute-shadow; & when (@form-label-default-mute-link-enabled) { /* ----------------------------------------------------------------------------- Links ----------------------------------------------------------------------------- */ a { color: @form-label-default-mute-link-text-color; text-decoration: @form-label-default-mute-link-text-decoration; &:hover { color: @form-label-default-mute-link-hover-text-color; text-decoration: @form-label-default-mute-link-hover-text-decoration; } &:active { color: @form-label-default-mute-link-active-text-color; text-decoration: @form-label-default-mute-link-active-text-decoration; } &:disabled { color: @form-label-default-mute-link-active-text-color; text-decoration: @form-label-default-mute-link-active-text-decoration; } } } } } & when (@form-label-default-inverse-enabled) { /* ----------------------------------------------------------------------------- Inverse ----------------------------------------------------------------------------- */ &.inverse { color: @form-label-default-inverse-color; text-shadow: @form-label-default-inverse-shadow; & when (@form-label-default-inverse-link-enabled) { /* ----------------------------------------------------------------------------- Links ----------------------------------------------------------------------------- */ a { color: @form-label-default-inverse-link-text-color; text-decoration: @form-label-default-inverse-link-text-decoration; &:hover { color: @form-label-default-inverse-link-hover-text-color; text-decoration: @form-label-default-inverse-link-hover-text-decoration; } &:active { color: @form-label-default-inverse-link-active-text-color; text-decoration: @form-label-default-inverse-link-active-text-decoration; } &:disabled { color: @form-label-default-inverse-link-active-text-color; text-decoration: @form-label-default-inverse-link-active-text-decoration; } } } & when (@form-label-emphasize-enabled) and (@form-label-default-inverse-emphasize-enabled) { /* ----------------------------------------------------------------------------- Emphasize Inverse ----------------------------------------------------------------------------- */ .emphasize { color: @form-label-default-inverse-emphasize-color; text-shadow: @form-label-default-inverse-emphasize-shadow; & when (@form-label-default-inverse-emphasize-link-enabled) { /* ----------------------------------------------------------------------------- Links ----------------------------------------------------------------------------- */ a { color: @form-label-default-inverse-emphasize-link-text-color; text-decoration: @form-label-default-inverse-emphasize-link-text-decoration; &:hover { color: @form-label-default-inverse-emphasize-link-hover-text-color; text-decoration: @form-label-default-inverse-emphasize-link-hover-text-decoration; } &:active { color: @form-label-default-inverse-emphasize-link-active-text-color; text-decoration: @form-label-default-inverse-emphasize-link-active-text-decoration; } &:disabled { color: @form-label-default-inverse-emphasize-link-active-text-color; text-decoration: @form-label-default-inverse-emphasize-link-active-text-decoration; } } } } } & when (@form-label-mute-enabled) and (@form-label-default-inverse-mute-enabled) { /* ----------------------------------------------------------------------------- Mute Inverse ----------------------------------------------------------------------------- */ .mute { color: @form-label-default-inverse-mute-color; text-shadow: @form-label-default-inverse-mute-shadow; & when (@form-label-default-inverse-mute-link-enabled) { /* ----------------------------------------------------------------------------- Links ----------------------------------------------------------------------------- */ a { color: @form-label-default-inverse-mute-link-text-color; text-decoration: @form-label-default-inverse-mute-link-text-decoration; &:hover { color: @form-label-default-inverse-mute-link-hover-text-color; text-decoration: @form-label-default-inverse-mute-link-hover-text-decoration; } &:active { color: @form-label-default-inverse-mute-link-active-text-color; text-decoration: @form-label-default-inverse-mute-link-active-text-decoration; } &:disabled { color: @form-label-default-inverse-mute-link-active-text-color; text-decoration: @form-label-default-inverse-mute-link-active-text-decoration; } } } } } } } } } & when (@form-help-block-enabled) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Help Block -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .form-help-block { display: block; margin-top: @form-help-block-margin-top; margin-bottom: @form-help-block-margin-bottom; font-family: @form-help-block-font-family; font-size: @form-help-block-font-size; line-height: @form-help-block-line-height; color: @form-help-block-default-color; font-style: @form-help-block-default-font-style; font-weight: @form-help-block-default-font-weight; text-transform: @form-help-block-default-transform; text-shadow: @form-help-block-default-shadow; /* ----------------------------------------------------------------------------- Short ----------------------------------------------------------------------------- */ &.short { margin-top: @form-help-block-short-margin-top; margin-bottom: @form-help-block-short-margin-bottom; } &.short-top { margin-top: @form-help-block-short-margin-top; } &.short-bottom { margin-bottom: @form-help-block-short-margin-bottom; } /* ----------------------------------------------------------------------------- Tall ----------------------------------------------------------------------------- */ &.tall { margin-top: @form-help-block-tall-margin-top; margin-bottom: @form-help-block-tall-margin-bottom; } &.tall-top { margin-top: @form-help-block-tall-margin-top; } &.tall-bottom { margin-bottom: @form-help-block-tall-margin-bottom; } & when (@form-help-block-default-link-enabled) { /* ----------------------------------------------------------------------------- Links ----------------------------------------------------------------------------- */ a { color: @form-help-block-default-link-text-color; text-decoration: @form-help-block-default-link-text-decoration; &:hover { color: @form-help-block-default-link-hover-text-color; text-decoration: @form-help-block-default-link-hover-text-decoration; } &:active { color: @form-help-block-default-link-active-text-color; text-decoration: @form-help-block-default-link-active-text-decoration; } &:disabled, &.disabled { color: @form-help-block-default-link-active-text-color; text-decoration: @form-help-block-default-link-active-text-decoration; } } } & when (@form-help-block-emphasize-enabled) and (@form-help-block-default-emphasize-enabled) { /* ----------------------------------------------------------------------------- Emphasize ----------------------------------------------------------------------------- */ strong, .emphasize { font-family: @form-help-block-emphasize-font-family; font-size: @form-help-block-emphasize-font-size; line-height: @form-help-block-emphasize-line-height; color: @form-help-block-default-emphasize-color; font-style: @form-help-block-default-emphasize-font-style; font-weight: @form-help-block-default-emphasize-font-weight; text-transform: @form-help-block-default-emphasize-transform; text-shadow: @form-help-block-default-emphasize-shadow; & when (@form-help-block-default-emphasize-link-enabled) { /* ----------------------------------------------------------------------------- Links ----------------------------------------------------------------------------- */ a { color: @form-help-block-default-emphasize-link-text-color; text-decoration: @form-help-block-default-emphasize-link-text-decoration; &:hover { color: @form-help-block-default-emphasize-link-hover-text-color; text-decoration: @form-help-block-default-emphasize-link-hover-text-decoration; } &:active { color: @form-help-block-default-emphasize-link-active-text-color; text-decoration: @form-help-block-default-emphasize-link-active-text-decoration; } &:disabled { color: @form-help-block-default-emphasize-link-active-text-color; text-decoration: @form-help-block-default-emphasize-link-active-text-decoration; } } } } } & when (@form-help-block-mute-enabled) and (@form-help-block-default-mute-enabled) { /* ----------------------------------------------------------------------------- Mute ----------------------------------------------------------------------------- */ .mute { font-family: @form-help-block-mute-font-family; font-size: @form-help-block-mute-font-size; line-height: @form-help-block-mute-line-height; color: @form-help-block-default-mute-color; font-style: @form-help-block-default-mute-font-style; font-weight: @form-help-block-default-mute-font-weight; text-transform: @form-help-block-default-mute-transform; text-shadow: @form-help-block-default-mute-shadow; & when (@form-help-block-default-mute-link-enabled) { /* ----------------------------------------------------------------------------- Links ----------------------------------------------------------------------------- */ a { color: @form-help-block-default-mute-link-text-color; text-decoration: @form-help-block-default-mute-link-text-decoration; &:hover { color: @form-help-block-default-mute-link-hover-text-color; text-decoration: @form-help-block-default-mute-link-hover-text-decoration; } &:active { color: @form-help-block-default-mute-link-active-text-color; text-decoration: @form-help-block-default-mute-link-active-text-decoration; } &:disabled { color: @form-help-block-default-mute-link-active-text-color; text-decoration: @form-help-block-default-mute-link-active-text-decoration; } } } } } & when (@form-help-block-default-inverse-enabled) { /* ----------------------------------------------------------------------------- Inverse ----------------------------------------------------------------------------- */ &.inverse { color: @form-help-block-default-inverse-color; text-shadow: @form-help-block-default-inverse-shadow; & when (@form-help-block-default-inverse-link-enabled) { /* ----------------------------------------------------------------------------- Links ----------------------------------------------------------------------------- */ a { color: @form-help-block-default-inverse-link-text-color; text-decoration: @form-help-block-default-inverse-link-text-decoration; &:hover { color: @form-help-block-default-inverse-link-hover-text-color; text-decoration: @form-help-block-default-inverse-link-hover-text-decoration; } &:active { color: @form-help-block-default-inverse-link-active-text-color; text-decoration: @form-help-block-default-inverse-link-active-text-decoration; } &:disabled { color: @form-help-block-default-inverse-link-active-text-color; text-decoration: @form-help-block-default-inverse-link-active-text-decoration; } } } & when (@form-help-block-emphasize-enabled) and (@form-help-block-default-inverse-emphasize-enabled) { /* ----------------------------------------------------------------------------- Emphasize Inverse ----------------------------------------------------------------------------- */ .emphasize { color: @form-help-block-default-inverse-emphasize-color; text-shadow: @form-help-block-default-inverse-emphasize-shadow; & when (@form-help-block-default-inverse-emphasize-link-enabled) { /* ----------------------------------------------------------------------------- Links ----------------------------------------------------------------------------- */ a { color: @form-help-block-default-inverse-emphasize-link-text-color; text-decoration: @form-help-block-default-inverse-emphasize-link-text-decoration; &:hover { color: @form-help-block-default-inverse-emphasize-link-hover-text-color; text-decoration: @form-help-block-default-inverse-emphasize-link-hover-text-decoration; } &:active { color: @form-help-block-default-inverse-emphasize-link-active-text-color; text-decoration: @form-help-block-default-inverse-emphasize-link-active-text-decoration; } &:disabled { color: @form-help-block-default-inverse-emphasize-link-active-text-color; text-decoration: @form-help-block-default-inverse-emphasize-link-active-text-decoration; } } } } } & when (@form-help-block-mute-enabled) and (@form-help-block-default-inverse-mute-enabled) { /* ----------------------------------------------------------------------------- Mute Inverse ----------------------------------------------------------------------------- */ .mute { color: @form-help-block-default-inverse-mute-color; text-shadow: @form-help-block-default-inverse-mute-shadow; & when (@form-help-block-default-inverse-mute-link-enabled) { /* ----------------------------------------------------------------------------- Links ----------------------------------------------------------------------------- */ a { color: @form-help-block-default-inverse-mute-link-text-color; text-decoration: @form-help-block-default-inverse-mute-link-text-decoration; &:hover { color: @form-help-block-default-inverse-mute-link-hover-text-color; text-decoration: @form-help-block-default-inverse-mute-link-hover-text-decoration; } &:active { color: @form-help-block-default-inverse-mute-link-active-text-color; text-decoration: @form-help-block-default-inverse-mute-link-active-text-decoration; } &:disabled { color: @form-help-block-default-inverse-mute-link-active-text-color; text-decoration: @form-help-block-default-inverse-mute-link-active-text-decoration; } } } } } } } } } & when (@form-control-enabled) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Text Area -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ textarea.form-control { height: auto; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Form Control -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .form-control { /* ----------------------------------------------------------------------------- Form Control Styles ----------------------------------------------------------------------------- */ display: block; width: 100%; box-sizing: border-box; box-sizing: @form-control-box-sizing; .background-clip(@form-control-background-clip) !important; .appearance(none); position: relative; border-style: solid; .form-control-size-variant('', ''); /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Form Control (Select) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ &.form-control-select { position: relative; padding: 0px !important; /* ----------------------------------------------------------------------------- Select ----------------------------------------------------------------------------- */ select { display: block; width: 100%; background: none; border: none; *border: 0; margin: 0px; .box-shadow(none); .appearance(none); .form-control-size-variant('', ''); } /* ----------------------------------------------------------------------------- Select Arrows ----------------------------------------------------------------------------- */ &:after { content: ''; display: block; position: absolute; top: floor((@form-control-height * 0.5) - (@form-control-select-arrow-height * 0.5)); right: @form-control-padding-horizontal; width: 0; height: 0; border-color: transparent; border-style: solid; border-width: @form-control-select-arrow-height (@form-control-select-arrow-width * 0.5) 0; } /* ----------------------------------------------------------------------------- Select Arrows ----------------------------------------------------------------------------- */ &.form-control-select-multiple { &:after { display: none; } } } } & when (@form-control-mini-enabled) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Form Control (Mini) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .form-control.form-control-mini { /* ----------------------------------------------------------------------------- Form Control (Mini) Styles ----------------------------------------------------------------------------- */ .form-control-size-variant('mini', ''); /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Form Control (Select) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ &.form-control-select { /* ----------------------------------------------------------------------------- Select ----------------------------------------------------------------------------- */ select { .form-control-size-variant('mini', ''); } /* ----------------------------------------------------------------------------- Select Arrows ----------------------------------------------------------------------------- */ &:after { top: floor((@form-control-mini-height * 0.5) - (@form-control-mini-select-arrow-height * 0.5)); right: @form-control-mini-padding-horizontal; border-width: @form-control-mini-select-arrow-height (@form-control-mini-select-arrow-width * 0.5) 0; } } } } & when (@form-control-small-enabled) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Form Control (Small) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .form-control.form-control-small { /* ----------------------------------------------------------------------------- Form Control (small) Styles ----------------------------------------------------------------------------- */ .form-control-size-variant('small', ''); /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Form Control (Select) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ &.form-control-select { /* ----------------------------------------------------------------------------- Select ----------------------------------------------------------------------------- */ select { .form-control-size-variant('small', ''); } /* ----------------------------------------------------------------------------- Select Arrows ----------------------------------------------------------------------------- */ &:after { top: floor((@form-control-small-height * 0.5) - (@form-control-small-select-arrow-height * 0.5)); right: @form-control-small-padding-horizontal; border-width: @form-control-small-select-arrow-height (@form-control-small-select-arrow-width * 0.5) 0; } } } } & when (@form-control-large-enabled) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Form Control (Large) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .form-control.form-control-large { /* ----------------------------------------------------------------------------- Form Control (Large) Styles ----------------------------------------------------------------------------- */ .form-control-size-variant('large', ''); /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Form Control (Select) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ &.form-control-select { /* ----------------------------------------------------------------------------- Select ----------------------------------------------------------------------------- */ select { .form-control-size-variant('large', ''); } /* ----------------------------------------------------------------------------- Select Arrows ----------------------------------------------------------------------------- */ &:after { top: floor((@form-control-large-height * 0.5) - (@form-control-large-select-arrow-height * 0.5)); right: @form-control-large-padding-horizontal; border-width: @form-control-large-select-arrow-height (@form-control-large-select-arrow-width * 0.5) 0; } } } } & when (@form-control-jumbo-enabled) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Form Control (Jumbo) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .form-control.form-control-jumbo { /* ----------------------------------------------------------------------------- Form Control (Jumbo) Styles ----------------------------------------------------------------------------- */ .form-control-size-variant('jumbo', ''); /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Form Control (Select) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ &.form-control-select { /* ----------------------------------------------------------------------------- Select ----------------------------------------------------------------------------- */ select { .form-control-size-variant('jumbo', ''); } /* ----------------------------------------------------------------------------- Select Arrows ----------------------------------------------------------------------------- */ &:after { top: floor((@form-control-jumbo-height * 0.5) - (@form-control-jumbo-select-arrow-height * 0.5)); right: @form-control-jumbo-padding-horizontal; border-width: @form-control-jumbo-select-arrow-height (@form-control-jumbo-select-arrow-width * 0.5) 0; } } } } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Form Control Group -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .form-control-group { position: relative; display: table !important; border-collapse: separate !important; /* ----------------------------------------------------------------------------- Form Control ----------------------------------------------------------------------------- */ .form-control { display: table-cell !important; margin-bottom: 0; z-index: 2; } /* ----------------------------------------------------------------------------- Form Control Add-On ----------------------------------------------------------------------------- */ .form-control-group-add-on { display: table-cell; width: 1%; white-space: nowrap; vertical-align: middle; } /* ----------------------------------------------------------------------------- Form Control (Nested) ----------------------------------------------------------------------------- */ &.form-control { padding-top: 0px !important; padding-bottom: 0px !important; .form-control { background: none !important; border: 0px !important; .box-shadow(none) !important; padding-left: 0px !important; padding-right: 0px !important; margin: 0px !important; .form-control-group-variant(@variant-class: 'default'); } &:hover { .form-control { .form-control-group-variant(@variant-class: 'default-hover'); } } &.focus { .form-control { .form-control-group-variant(@variant-class: 'default-focus'); } } & when (@form-control-error-inverse-enabled) { &.form-control-inverse { .form-control.form-control-inverse { .form-control-group-variant(@variant-class: 'default-inverse'); } &:hover { .form-control.form-control-inverse { .form-control-group-variant(@variant-class: 'default-inverse-hover'); } } &.focus { .form-control.form-control-inverse { .form-control-group-variant(@variant-class: 'default-inverse-focus'); } } &.disabled { .form-control.form-control-inverse { .form-control-group-variant(@variant-class: 'default-inverse-disabled'); } } } } /* ----------------------------------------------------------------------------- Form Control Add-On ----------------------------------------------------------------------------- */ .form-control-group-add-on { width: 1%; &.form-control-group-add-on-prepend { padding-right: @form-control-padding-horizontal; } &.form-control-group-add-on-append { padding-left: @form-control-padding-horizontal; } } & when (@form-control-mini-enabled) { /* ----------------------------------------------------------------------------- Form Control (Mini) ----------------------------------------------------------------------------- */ &.form-control-mini { /* ----------------------------------------------------------------------------- Form Control Add-On ----------------------------------------------------------------------------- */ .form-control-group-add-on { &.form-control-group-add-on-prepend { padding-right: @form-control-mini-padding-horizontal; } &.form-control-group-add-on-append { padding-left: @form-control-mini-padding-horizontal; } } } } & when (@form-control-small-enabled) { /* ----------------------------------------------------------------------------- Form Control (small) ----------------------------------------------------------------------------- */ &.form-control-small { /* ----------------------------------------------------------------------------- Form Control Add-On ----------------------------------------------------------------------------- */ .form-control-group-add-on { &.form-control-group-add-on-prepend { padding-right: @form-control-small-padding-horizontal; } &.form-control-group-add-on-append { padding-left: @form-control-small-padding-horizontal; } } } } & when (@form-control-large-enabled) { /* ----------------------------------------------------------------------------- Form Control (large) ----------------------------------------------------------------------------- */ &.form-control-large { /* ----------------------------------------------------------------------------- Form Control Add-On ----------------------------------------------------------------------------- */ .form-control-group-add-on { &.form-control-group-add-on-prepend { padding-right: @form-control-large-padding-horizontal; } &.form-control-group-add-on-append { padding-left: @form-control-large-padding-horizontal; } } } } & when (@form-control-jumbo-enabled) { /* ----------------------------------------------------------------------------- Form Control (jumbo) ----------------------------------------------------------------------------- */ &.form-control-jumbo { /* ----------------------------------------------------------------------------- Form Control Add-On ----------------------------------------------------------------------------- */ .form-control-group-add-on { &.form-control-group-add-on-prepend { padding-right: @form-control-jumbo-padding-horizontal; } &.form-control-group-add-on-append { padding-left: @form-control-jumbo-padding-horizontal; } } } } } } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Form Control (Default) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .form-control { /* ----------------------------------------------------------------------------- Form Control (Default) State: Normal ----------------------------------------------------------------------------- */ .form-control-variant('default'); /* ----------------------------------------------------------------------------- Form Control Select ----------------------------------------------------------------------------- */ &.form-control-select { /* ----------------------------------------------------------------------------- Select ----------------------------------------------------------------------------- */ select { color: @form-control-default-text-color; } /* ----------------------------------------------------------------------------- Form Control Select Arrow ----------------------------------------------------------------------------- */ &:after { border-top-color: @form-control-default-text-color; } } /* ----------------------------------------------------------------------------- Form Control (Default) State: Hover ----------------------------------------------------------------------------- */ &:hover { .form-control-variant('default-hover'); /* ----------------------------------------------------------------------------- Form Control Select ----------------------------------------------------------------------------- */ &.form-control-select { /* ----------------------------------------------------------------------------- Select ----------------------------------------------------------------------------- */ select { color: @form-control-default-hover-text-color; } /* ----------------------------------------------------------------------------- Form Control Select Arrow ----------------------------------------------------------------------------- */ &:after { border-top-color: @form-control-default-hover-text-color; } } } /* ----------------------------------------------------------------------------- Form Control (Default) State: Focus ----------------------------------------------------------------------------- */ &:focus, &.focus { outline: none; outline: 0; .form-control-variant('default-focus'); /* ----------------------------------------------------------------------------- Form Control Select ----------------------------------------------------------------------------- */ &.form-control-select { /* ----------------------------------------------------------------------------- Select ----------------------------------------------------------------------------- */ select { color: @form-control-default-focus-text-color; } /* ----------------------------------------------------------------------------- Form Control Select Arrow ----------------------------------------------------------------------------- */ &:after { border-top-color: @form-control-default-focus-text-color; } } } /* ----------------------------------------------------------------------------- Form Control (Default) State: Disabled ----------------------------------------------------------------------------- */ &.disabled, &[disabled] { outline: 0; cursor: default !important; pointer-events: none; opacity: @form-control-default-disabled-opacity; .form-control-variant('default-disabled'); /* ----------------------------------------------------------------------------- Form Control Select ----------------------------------------------------------------------------- */ &.form-control-select { /* ----------------------------------------------------------------------------- Select ----------------------------------------------------------------------------- */ select { color: @form-control-default-disabled-text-color; } /* ----------------------------------------------------------------------------- Form Control Select Arrow ----------------------------------------------------------------------------- */ &:after { border-top-color: @form-control-default-disabled-text-color; } } } & when (@form-control-default-inverse-enabled) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Form Control (Default, Inverse) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ &.form-control-inverse { /* ----------------------------------------------------------------------------- Form Control (Default, Inverse) State: Normal ----------------------------------------------------------------------------- */ .form-control-variant('default-inverse'); /* ----------------------------------------------------------------------------- Form Control Select ----------------------------------------------------------------------------- */ &.form-control-select { /* ----------------------------------------------------------------------------- Select ----------------------------------------------------------------------------- */ select { color: @form-control-default-inverse-text-color; } /* ----------------------------------------------------------------------------- Form Control Select Arrow ----------------------------------------------------------------------------- */ &:after { border-top-color: @form-control-default-inverse-text-color; } } /* ----------------------------------------------------------------------------- Form Control (Default, Inverse) State: Hover ----------------------------------------------------------------------------- */ &:hover { .form-control-variant('default-inverse-hover'); /* ----------------------------------------------------------------------------- Form Control Select ----------------------------------------------------------------------------- */ &.form-control-select { /* ----------------------------------------------------------------------------- Select ----------------------------------------------------------------------------- */ select { color: @form-control-default-inverse-hover-text-color; } /* ----------------------------------------------------------------------------- Form Control Select Arrow ----------------------------------------------------------------------------- */ &:after { border-top-color: @form-control-default-inverse-hover-text-color; } } } /* ----------------------------------------------------------------------------- Form Control (Default, Inverse) State: Focus ----------------------------------------------------------------------------- */ &:focus, &.focus { .form-control-variant('default-inverse-focus'); /* ----------------------------------------------------------------------------- Form Control Select ----------------------------------------------------------------------------- */ &.form-control-select { /* ----------------------------------------------------------------------------- Select ----------------------------------------------------------------------------- */ select { color: @form-control-default-inverse-focus-text-color; } /* ----------------------------------------------------------------------------- Form Control Select Arrow ----------------------------------------------------------------------------- */ &:after { border-top-color: @form-control-default-inverse-focus-text-color; } } } /* ----------------------------------------------------------------------------- Form Control (Default, Inverse) State: Disabled ----------------------------------------------------------------------------- */ &.disabled, &[disabled] { opacity: @form-control-default-inverse-disabled-opacity; .form-control-variant('default-inverse-disabled'); /* ----------------------------------------------------------------------------- Form Control Select ----------------------------------------------------------------------------- */ &.form-control-select { /* ----------------------------------------------------------------------------- Select ----------------------------------------------------------------------------- */ select { color: @form-control-default-inverse-disabled-text-color; } /* ----------------------------------------------------------------------------- Form Control Select Arrow ----------------------------------------------------------------------------- */ &:after { border-top-color: @form-control-default-inverse-disabled-text-color; } } } } } } } & when (@form-option-enabled) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Option -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .checkbox, .radio { display: block; margin-top: @form-option-margin-top; margin-bottom: @form-option-margin-bottom; /* ----------------------------------------------------------------------------- Short ----------------------------------------------------------------------------- */ &.short { margin-top: @form-option-short-margin-top; margin-bottom: @form-option-short-margin-bottom; } &.short-top { margin-top: @form-option-short-margin-top; } &.short-bottom { margin-bottom: @form-option-short-margin-bottom; } /* ----------------------------------------------------------------------------- Tall ----------------------------------------------------------------------------- */ &.tall { margin-top: @form-option-tall-margin-top; margin-bottom: @form-option-tall-margin-bottom; } &.tall-top { margin-top: @form-option-tall-margin-top; } &.tall-bottom { margin-bottom: @form-option-tall-margin-bottom; } /* ----------------------------------------------------------------------------- Label ----------------------------------------------------------------------------- */ label { font-family: @form-option-font-family; font-size: @form-option-font-size; line-height: @form-option-line-height; color: @form-option-default-color; font-style: @form-option-default-font-style; font-weight: @form-option-default-font-weight; text-transform: @form-option-default-transform; text-shadow: @form-option-default-shadow; margin: 0px; padding-left: @form-option-padding-horizontal + @form-option-checkbox-height; position: relative; input[type="checkbox"] { position: absolute; vertical-align: top; top: floor(((@form-option-line-height) - @form-option-checkbox-height) / 2); left: 0px; } input[type="radio"] { position: absolute; vertical-align: top; top: floor(((@form-option-line-height) - @form-option-radio-height) / 2); left: 0px; } & when (@form-option-default-link-enabled) { /* ----------------------------------------------------------------------------- Links ----------------------------------------------------------------------------- */ a { color: @form-option-default-link-text-color; text-decoration: @form-option-default-link-text-decoration; &:hover { color: @form-option-default-link-hover-text-color; text-decoration: @form-option-default-link-hover-text-decoration; } &:active { color: @form-option-default-link-active-text-color; text-decoration: @form-option-default-link-active-text-decoration; } &:disabled, &.disabled { color: @form-option-default-link-active-text-color; text-decoration: @form-option-default-link-active-text-decoration; } } } & when (@form-option-emphasize-enabled) and (@form-option-default-emphasize-enabled) { /* ----------------------------------------------------------------------------- Emphasize ----------------------------------------------------------------------------- */ strong, .emphasize { font-family: @form-option-emphasize-font-family; font-size: @form-option-emphasize-font-size; line-height: @form-option-emphasize-line-height; color: @form-option-default-emphasize-color; font-style: @form-option-default-emphasize-font-style; font-weight: @form-option-default-emphasize-font-weight; text-transform: @form-option-default-emphasize-transform; text-shadow: @form-option-default-emphasize-shadow; & when (@form-option-default-emphasize-link-enabled) { /* ----------------------------------------------------------------------------- Links ----------------------------------------------------------------------------- */ a { color: @form-option-default-emphasize-link-text-color; text-decoration: @form-option-default-emphasize-link-text-decoration; &:hover { color: @form-option-default-emphasize-link-hover-text-color; text-decoration: @form-option-default-emphasize-link-hover-text-decoration; } &:active { color: @form-option-default-emphasize-link-active-text-color; text-decoration: @form-option-default-emphasize-link-active-text-decoration; } &:disabled { color: @form-option-default-emphasize-link-active-text-color; text-decoration: @form-option-default-emphasize-link-active-text-decoration; } } } } } & when (@form-option-mute-enabled) and (@form-option-default-mute-enabled) { /* ----------------------------------------------------------------------------- Mute ----------------------------------------------------------------------------- */ .mute { font-family: @form-option-mute-font-family; font-size: @form-option-mute-font-size; line-height: @form-option-mute-line-height; color: @form-option-default-mute-color; font-style: @form-option-default-mute-font-style; font-weight: @form-option-default-mute-font-weight; text-transform: @form-option-default-mute-transform; text-shadow: @form-option-default-mute-shadow; & when (@form-option-default-mute-link-enabled) { /* ----------------------------------------------------------------------------- Links ----------------------------------------------------------------------------- */ a { color: @form-option-default-mute-link-text-color; text-decoration: @form-option-default-mute-link-text-decoration; &:hover { color: @form-option-default-mute-link-hover-text-color; text-decoration: @form-option-default-mute-link-hover-text-decoration; } &:active { color: @form-option-default-mute-link-active-text-color; text-decoration: @form-option-default-mute-link-active-text-decoration; } &:disabled { color: @form-option-default-mute-link-active-text-color; text-decoration: @form-option-default-mute-link-active-text-decoration; } } } } } & when (@form-option-default-inverse-enabled) { /* ----------------------------------------------------------------------------- Inverse ----------------------------------------------------------------------------- */ &.inverse { color: @form-option-default-inverse-color; text-shadow: @form-option-default-inverse-shadow; & when (@form-option-default-inverse-link-enabled) { /* ----------------------------------------------------------------------------- Links ----------------------------------------------------------------------------- */ a { color: @form-option-default-inverse-link-text-color; text-decoration: @form-option-default-inverse-link-text-decoration; &:hover { color: @form-option-default-inverse-link-hover-text-color; text-decoration: @form-option-default-inverse-link-hover-text-decoration; } &:active { color: @form-option-default-inverse-link-active-text-color; text-decoration: @form-option-default-inverse-link-active-text-decoration; } &:disabled { color: @form-option-default-inverse-link-active-text-color; text-decoration: @form-option-default-inverse-link-active-text-decoration; } } } & when (@form-option-emphasize-enabled) and (@form-option-default-inverse-emphasize-enabled) { /* ----------------------------------------------------------------------------- Emphasize Inverse ----------------------------------------------------------------------------- */ .emphasize { color: @form-option-default-inverse-emphasize-color; text-shadow: @form-option-default-inverse-emphasize-shadow; & when (@form-option-default-inverse-emphasize-link-enabled) { /* ----------------------------------------------------------------------------- Links ----------------------------------------------------------------------------- */ a { color: @form-option-default-inverse-emphasize-link-text-color; text-decoration: @form-option-default-inverse-emphasize-link-text-decoration; &:hover { color: @form-option-default-inverse-emphasize-link-hover-text-color; text-decoration: @form-option-default-inverse-emphasize-link-hover-text-decoration; } &:active { color: @form-option-default-inverse-emphasize-link-active-text-color; text-decoration: @form-option-default-inverse-emphasize-link-active-text-decoration; } &:disabled, &.disabled { color: @form-option-default-inverse-emphasize-link-active-text-color; text-decoration: @form-option-default-inverse-emphasize-link-active-text-decoration; } } } } } & when (@form-option-mute-enabled) and (@form-option-default-inverse-mute-enabled) { /* ----------------------------------------------------------------------------- Mute Inverse ----------------------------------------------------------------------------- */ .mute { color: @form-option-default-inverse-mute-color; text-shadow: @form-option-default-inverse-mute-shadow; & when (@form-option-default-inverse-mute-link-enabled) { /* ----------------------------------------------------------------------------- Links ----------------------------------------------------------------------------- */ a { color: @form-option-default-inverse-mute-link-text-color; text-decoration: @form-option-default-inverse-mute-link-text-decoration; &:hover { color: @form-option-default-inverse-mute-link-hover-text-color; text-decoration: @form-option-default-inverse-mute-link-hover-text-decoration; } &:active { color: @form-option-default-inverse-mute-link-active-text-color; text-decoration: @form-option-default-inverse-mute-link-active-text-decoration; } &:disabled, &.disabled { color: @form-option-default-inverse-mute-link-active-text-color; text-decoration: @form-option-default-inverse-mute-link-active-text-decoration; } } } } } } } } } } & when (@form-group-enabled) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Form Group -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .form-group { margin-top: @form-group-margin-top; margin-bottom: @form-group-margin-bottom; /* ----------------------------------------------------------------------------- Short ----------------------------------------------------------------------------- */ &.short { margin-top: @form-group-short-margin-top; margin-bottom: @form-group-short-margin-bottom; } &.short-top { margin-top: @form-group-short-margin-top; } &.short-bottom { margin-bottom: @form-group-short-margin-bottom; } /* ----------------------------------------------------------------------------- Tall ----------------------------------------------------------------------------- */ &.tall { margin-top: @form-group-tall-margin-top; margin-bottom: @form-group-tall-margin-bottom; } &.tall-top { margin-top: @form-group-tall-margin-top; } &.tall-bottom { margin-bottom: @form-group-tall-margin-bottom; } } & when (@form-group-success-enabled) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Form Group (Success) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .form-group.form-group-success { & when (@form-control-enabled) and (@form-control-success-enabled) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Form Control (Success) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .form-control { /* ----------------------------------------------------------------------------- Form Control (Success) State: Normal ----------------------------------------------------------------------------- */ .form-control-variant('success'); /* ----------------------------------------------------------------------------- Form Control Select ----------------------------------------------------------------------------- */ &.form-control-select { /* ----------------------------------------------------------------------------- Select ----------------------------------------------------------------------------- */ select { color: @form-control-success-text-color; } /* ----------------------------------------------------------------------------- Form Control Select Arrow ----------------------------------------------------------------------------- */ &:after { border-top-color: @form-control-success-text-color; } } /* ----------------------------------------------------------------------------- Form Control (Success) State: Hover ----------------------------------------------------------------------------- */ &:hover { .form-control-variant('success-hover'); /* ----------------------------------------------------------------------------- Form Control Select ----------------------------------------------------------------------------- */ &.form-control-select { /* ----------------------------------------------------------------------------- Select ----------------------------------------------------------------------------- */ select { color: @form-control-success-hover-text-color; } /* ----------------------------------------------------------------------------- Form Control Select Arrow ----------------------------------------------------------------------------- */ &:after { border-top-color: @form-control-success-hover-text-color; } } } /* ----------------------------------------------------------------------------- Form Control (Success) State: Focus ----------------------------------------------------------------------------- */ &:focus, &.focus { .form-control-variant('success-focus'); /* ----------------------------------------------------------------------------- Form Control Select ----------------------------------------------------------------------------- */ &.form-control-select { /* ----------------------------------------------------------------------------- Select ----------------------------------------------------------------------------- */ select { color: @form-control-success-focus-text-color; } /* ----------------------------------------------------------------------------- Form Control Select Arrow ----------------------------------------------------------------------------- */ &:after { border-top-color: @form-control-success-focus-text-color; } } } /* ----------------------------------------------------------------------------- Form Control (Success) State: Disabled ----------------------------------------------------------------------------- */ &.disabled, &[disabled] { opacity: @form-control-success-disabled-opacity; .form-control-variant('success-disabled'); /* ----------------------------------------------------------------------------- Form Control Select ----------------------------------------------------------------------------- */ &.form-control-select { /* ----------------------------------------------------------------------------- Select ----------------------------------------------------------------------------- */ select { color: @form-control-success-disabled-text-color; } /* ----------------------------------------------------------------------------- Form Control Select Arrow ----------------------------------------------------------------------------- */ &:after { border-top-color: @form-control-success-disabled-text-color; } } } & when (@form-control-success-inverse-enabled) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Form Control (Success, Inverse) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ &.form-control-inverse { /* ----------------------------------------------------------------------------- Form Control (Success, Inverse) State: Normal ----------------------------------------------------------------------------- */ .form-control-variant('success-inverse'); /* ----------------------------------------------------------------------------- Form Control Select ----------------------------------------------------------------------------- */ &.form-control-select { /* ----------------------------------------------------------------------------- Select ----------------------------------------------------------------------------- */ select { color: @form-control-success-inverse-text-color; } /* ----------------------------------------------------------------------------- Form Control Select Arrow ----------------------------------------------------------------------------- */ &:after { border-top-color: @form-control-success-inverse-text-color; } } /* ----------------------------------------------------------------------------- Form Control (Success, Inverse) State: Hover ----------------------------------------------------------------------------- */ &:hover { .form-control-variant('success-inverse-hover'); /* ----------------------------------------------------------------------------- Form Control Select ----------------------------------------------------------------------------- */ &.form-control-select { /* ----------------------------------------------------------------------------- Select ----------------------------------------------------------------------------- */ select { color: @form-control-success-inverse-hover-text-color; } /* ----------------------------------------------------------------------------- Form Control Select Arrow ----------------------------------------------------------------------------- */ &:after { border-top-color: @form-control-success-inverse-hover-text-color; } } } /* ----------------------------------------------------------------------------- Form Control (Success, Inverse) State: Focus ----------------------------------------------------------------------------- */ &:focus, &.focus { .form-control-variant('success-inverse-focus'); /* ----------------------------------------------------------------------------- Form Control Select ----------------------------------------------------------------------------- */ &.form-control-select { /* ----------------------------------------------------------------------------- Select ----------------------------------------------------------------------------- */ select { color: @form-control-success-inverse-focus-text-color; } /* ----------------------------------------------------------------------------- Form Control Select Arrow ----------------------------------------------------------------------------- */ &:after { border-top-color: @form-control-success-inverse-focus-text-color; } } } /* ----------------------------------------------------------------------------- Form Control (Success, Inverse) State: Disabled ----------------------------------------------------------------------------- */ &.disabled, &[disabled] { opacity: @form-control-success-inverse-disabled-opacity; .form-control-variant('success-inverse-disabled'); /* ----------------------------------------------------------------------------- Form Control Select ----------------------------------------------------------------------------- */ &.form-control-select { /* ----------------------------------------------------------------------------- Select ----------------------------------------------------------------------------- */ select { color: @form-control-success-inverse-disabled-text-color; } /* ----------------------------------------------------------------------------- Form Control Select Arrow ----------------------------------------------------------------------------- */ &:after { border-top-color: @form-control-success-inverse-disabled-text-color; } } } } } } /* ----------------------------------------------------------------------------- Form Control Group ----------------------------------------------------------------------------- */ .form-control-group.form-control { .form-control { .form-control-group-variant(@variant-class: 'success'); } &:hover { .form-control { .form-control-group-variant(@variant-class: 'success-hover'); } } &.focus { .form-control { .form-control-group-variant(@variant-class: 'success-focus'); } } &.disabled { .form-control { .form-control-group-variant(@variant-class: 'success-disabled'); } } & when (@form-control-success-inverse-enabled) { .form-control-group.form-control.form-control-inverse { .form-control.form-control-inverse { .form-control-group-variant(@variant-class: 'success-inverse'); } &:hover { .form-control.form-control-inverse { .form-control-group-variant(@variant-class: 'success-inverse-hover'); } } &.focus { .form-control.form-control-inverse { .form-control-group-variant(@variant-class: 'success-inverse-focus'); } } &.disabled { .form-control.form-control-inverse { .form-control-group-variant(@variant-class: 'success-inverse-disabled'); } } } } } } & when (@form-label-enabled) and (@form-label-success-enabled) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Label -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ label { color: @form-label-success-color; font-style: @form-label-success-font-style; font-weight: @form-label-success-font-weight; text-transform: @form-label-success-transform; text-shadow: @form-label-success-shadow; & when (@form-label-success-link-enabled) { /* ----------------------------------------------------------------------------- Links ----------------------------------------------------------------------------- */ a { color: @form-label-success-link-text-color; text-decoration: @form-label-success-link-text-decoration; &:hover { color: @form-label-success-link-hover-text-color; text-decoration: @form-label-success-link-hover-text-decoration; } &:active { color: @form-label-success-link-active-text-color; text-decoration: @form-label-success-link-active-text-decoration; } &:disabled { color: @form-label-success-link-active-text-color; text-decoration: @form-label-success-link-active-text-decoration; } } } & when (@form-label-emphasize-enabled) and (@form-label-success-emphasize-enabled) { /* ----------------------------------------------------------------------------- Emphasize ----------------------------------------------------------------------------- */ strong, .emphasize { color: @form-label-success-emphasize-color; font-style: @form-label-success-emphasize-font-style; font-weight: @form-label-success-emphasize-font-weight; text-transform: @form-label-success-emphasize-transform; text-shadow: @form-label-success-emphasize-shadow; & when (@form-label-success-emphasize-link-enabled) { /* ----------------------------------------------------------------------------- Links ----------------------------------------------------------------------------- */ a { color: @form-label-success-emphasize-link-text-color; text-decoration: @form-label-success-emphasize-link-text-decoration; &:hover { color: @form-label-success-emphasize-link-hover-text-color; text-decoration: @form-label-success-emphasize-link-hover-text-decoration; } &:active { color: @form-label-success-emphasize-link-active-text-color; text-decoration: @form-label-success-emphasize-link-active-text-decoration; } &:disabled, &.disabled { color: @form-label-success-emphasize-link-active-text-color; text-decoration: @form-label-success-emphasize-link-active-text-decoration; } } } } } & when (@form-label-mute-enabled) and (@form-label-success-mute-enabled) { /* ----------------------------------------------------------------------------- Mute ----------------------------------------------------------------------------- */ .mute { color: @form-label-success-mute-color; font-style: @form-label-success-mute-font-style; font-weight: @form-label-success-mute-font-weight; text-transform: @form-label-success-mute-transform; text-shadow: @form-label-success-mute-shadow; & when (@form-label-success-mute-link-enabled) { /* ----------------------------------------------------------------------------- Links ----------------------------------------------------------------------------- */ a { color: @form-label-success-mute-link-text-color; text-decoration: @form-label-success-mute-link-text-decoration; &:hover { color: @form-label-success-mute-link-hover-text-color; text-decoration: @form-label-success-mute-link-hover-text-decoration; } &:active { color: @form-label-success-mute-link-active-text-color; text-decoration: @form-label-success-mute-link-active-text-decoration; } &:disabled, &.disabled { color: @form-label-success-mute-link-active-text-color; text-decoration: @form-label-success-mute-link-active-text-decoration; } } } } } & when (@form-label-success-inverse-enabled) { /* ----------------------------------------------------------------------------- Inverse ----------------------------------------------------------------------------- */ &.inverse { color: @form-label-success-inverse-color; text-shadow: @form-label-success-inverse-shadow; & when (@form-label-success-inverse-link-enabled) { /* ----------------------------------------------------------------------------- Links ----------------------------------------------------------------------------- */ a { color: @form-label-success-inverse-link-text-color; text-decoration: @form-label-success-inverse-link-text-decoration; &:hover { color: @form-label-success-inverse-link-hover-text-color; text-decoration: @form-label-success-inverse-link-hover-text-decoration; } &:active { color: @form-label-success-inverse-link-active-text-color; text-decoration: @form-label-success-inverse-link-active-text-decoration; } &:disabled, &.disabled { color: @form-label-success-inverse-link-active-text-color; text-decoration: @form-label-success-inverse-link-active-text-decoration; } } } & when (@form-label-emphasize-enabled) and (@form-label-success-inverse-emphasize-enabled) { /* ----------------------------------------------------------------------------- Emphasize Inverse ----------------------------------------------------------------------------- */ .emphasize { color: @form-label-success-inverse-emphasize-color; text-shadow: @form-label-success-inverse-emphasize-shadow; & when (@form-label-success-inverse-emphasize-link-enabled) { /* ----------------------------------------------------------------------------- Links ----------------------------------------------------------------------------- */ a { color: @form-label-success-inverse-emphasize-link-text-color; text-decoration: @form-label-success-inverse-emphasize-link-text-decoration; &:hover { color: @form-label-success-inverse-emphasize-link-hover-text-color; text-decoration: @form-label-success-inverse-emphasize-link-hover-text-decoration; } &:active { color: @form-label-success-inverse-emphasize-link-active-text-color; text-decoration: @form-label-success-inverse-emphasize-link-active-text-decoration; } &:disabled { color: @form-label-success-inverse-emphasize-link-active-text-color; text-decoration: @form-label-success-inverse-emphasize-link-active-text-decoration; } } } } } & when (@form-label-mute-enabled) and (@form-label-success-inverse-mute-enabled) { /* ----------------------------------------------------------------------------- Mute Inverse ----------------------------------------------------------------------------- */ .mute { color: @form-label-success-inverse-mute-color; text-shadow: @form-label-success-inverse-mute-shadow; & when (@form-label-success-inverse-mute-link-enabled) { /* ----------------------------------------------------------------------------- Links ----------------------------------------------------------------------------- */ a { color: @form-label-success-inverse-mute-link-text-color; text-decoration: @form-label-success-inverse-mute-link-text-decoration; &:hover { color: @form-label-success-inverse-mute-link-hover-text-color; text-decoration: @form-label-success-inverse-mute-link-hover-text-decoration; } &:active { color: @form-label-success-inverse-mute-link-active-text-color; text-decoration: @form-label-success-inverse-mute-link-active-text-decoration; } &:disabled { color: @form-label-success-inverse-mute-link-active-text-color; text-decoration: @form-label-success-inverse-mute-link-active-text-decoration; } } } } } } } } } & when (@form-help-block-enabled) and (@form-help-block-success-enabled) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Help Block -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .form-help-block { color: @form-help-block-success-color; font-style: @form-help-block-success-font-style; font-weight: @form-help-block-success-font-weight; text-transform: @form-help-block-success-transform; text-shadow: @form-help-block-success-shadow; & when (@form-help-block-success-link-enabled) { /* ----------------------------------------------------------------------------- Links ----------------------------------------------------------------------------- */ a { color: @form-help-block-success-link-text-color; text-decoration: @form-help-block-success-link-text-decoration; &:hover { color: @form-help-block-success-link-hover-text-color; text-decoration: @form-help-block-success-link-hover-text-decoration; } &:active { color: @form-help-block-success-link-active-text-color; text-decoration: @form-help-block-success-link-active-text-decoration; } &:disabled { color: @form-help-block-success-link-active-text-color; text-decoration: @form-help-block-success-link-active-text-decoration; } } } & when (@form-help-block-emphasize-enabled) and (@form-help-block-success-emphasize-enabled) { /* ----------------------------------------------------------------------------- Emphasize ----------------------------------------------------------------------------- */ strong, .emphasize { color: @form-help-block-success-emphasize-color; font-style: @form-help-block-success-emphasize-font-style; font-weight: @form-help-block-success-emphasize-font-weight; text-transform: @form-help-block-success-emphasize-transform; text-shadow: @form-help-block-success-emphasize-shadow; & when (@form-help-block-success-emphasize-link-enabled) { /* ----------------------------------------------------------------------------- Links ----------------------------------------------------------------------------- */ a { color: @form-help-block-success-emphasize-link-text-color; text-decoration: @form-help-block-success-emphasize-link-text-decoration; &:hover { color: @form-help-block-success-emphasize-link-hover-text-color; text-decoration: @form-help-block-success-emphasize-link-hover-text-decoration; } &:active { color: @form-help-block-success-emphasize-link-active-text-color; text-decoration: @form-help-block-success-emphasize-link-active-text-decoration; } &:disabled, &.disabled { color: @form-help-block-success-emphasize-link-active-text-color; text-decoration: @form-help-block-success-emphasize-link-active-text-decoration; } } } } } & when (@form-help-block-mute-enabled) and (@form-help-block-success-mute-enabled) { /* ----------------------------------------------------------------------------- Mute ----------------------------------------------------------------------------- */ .mute { color: @form-help-block-success-mute-color; font-style: @form-help-block-success-mute-font-style; font-weight: @form-help-block-success-mute-font-weight; text-transform: @form-help-block-success-mute-transform; text-shadow: @form-help-block-success-mute-shadow; & when (@form-help-block-success-mute-link-enabled) { /* ----------------------------------------------------------------------------- Links ----------------------------------------------------------------------------- */ a { color: @form-help-block-success-mute-link-text-color; text-decoration: @form-help-block-success-mute-link-text-decoration; &:hover { color: @form-help-block-success-mute-link-hover-text-color; text-decoration: @form-help-block-success-mute-link-hover-text-decoration; } &:active { color: @form-help-block-success-mute-link-active-text-color; text-decoration: @form-help-block-success-mute-link-active-text-decoration; } &:disabled, &.disabled { color: @form-help-block-success-mute-link-active-text-color; text-decoration: @form-help-block-success-mute-link-active-text-decoration; } } } } } & when (@form-help-block-success-inverse-enabled) { /* ----------------------------------------------------------------------------- Inverse ----------------------------------------------------------------------------- */ &.inverse { color: @form-help-block-success-inverse-color; text-shadow: @form-help-block-success-inverse-shadow; & when (@form-help-block-success-inverse-link-enabled) { /* ----------------------------------------------------------------------------- Links ----------------------------------------------------------------------------- */ a { color: @form-help-block-success-inverse-link-text-color; text-decoration: @form-help-block-success-inverse-link-text-decoration; &:hover { color: @form-help-block-success-inverse-link-hover-text-color; text-decoration: @form-help-block-success-inverse-link-hover-text-decoration; } &:active { color: @form-help-block-success-inverse-link-active-text-color; text-decoration: @form-help-block-success-inverse-link-active-text-decoration; } &:disabled, &.disabled { color: @form-help-block-success-inverse-link-active-text-color; text-decoration: @form-help-block-success-inverse-link-active-text-decoration; } } } & when (@form-help-block-emphasize-enabled) and (@form-help-block-success-inverse-emphasize-enabled) { /* ----------------------------------------------------------------------------- Emphasize Inverse ----------------------------------------------------------------------------- */ .emphasize { color: @form-help-block-success-inverse-emphasize-color; text-shadow: @form-help-block-success-inverse-emphasize-shadow; & when (@form-help-block-success-inverse-emphasize-link-enabled) { /* ----------------------------------------------------------------------------- Links ----------------------------------------------------------------------------- */ a { color: @form-help-block-success-inverse-emphasize-link-text-color; text-decoration: @form-help-block-success-inverse-emphasize-link-text-decoration; &:hover { color: @form-help-block-success-inverse-emphasize-link-hover-text-color; text-decoration: @form-help-block-success-inverse-emphasize-link-hover-text-decoration; } &:active { color: @form-help-block-success-inverse-emphasize-link-active-text-color; text-decoration: @form-help-block-success-inverse-emphasize-link-active-text-decoration; } &:disabled { color: @form-help-block-success-inverse-emphasize-link-active-text-color; text-decoration: @form-help-block-success-inverse-emphasize-link-active-text-decoration; } } } } } & when (@form-help-block-mute-enabled) and (@form-help-block-success-inverse-mute-enabled) { /* ----------------------------------------------------------------------------- Mute Inverse ----------------------------------------------------------------------------- */ .mute { color: @form-help-block-success-inverse-mute-color; text-shadow: @form-help-block-success-inverse-mute-shadow; & when (@form-help-block-success-inverse-mute-link-enabled) { /* ----------------------------------------------------------------------------- Links ----------------------------------------------------------------------------- */ a { color: @form-help-block-success-inverse-mute-link-text-color; text-decoration: @form-help-block-success-inverse-mute-link-text-decoration; &:hover { color: @form-help-block-success-inverse-mute-link-hover-text-color; text-decoration: @form-help-block-success-inverse-mute-link-hover-text-decoration; } &:active { color: @form-help-block-success-inverse-mute-link-active-text-color; text-decoration: @form-help-block-success-inverse-mute-link-active-text-decoration; } &:disabled { color: @form-help-block-success-inverse-mute-link-active-text-color; text-decoration: @form-help-block-success-inverse-mute-link-active-text-decoration; } } } } } } } } } } } & when (@form-group-error-enabled) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Form Group (Error) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .form-group.form-group-error { & when (@form-control-enabled) and (@form-control-error-enabled) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Form Control (Error) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .form-control { /* ----------------------------------------------------------------------------- Form Control (Error) State: Normal ----------------------------------------------------------------------------- */ .form-control-variant('error'); /* ----------------------------------------------------------------------------- Form Control Select ----------------------------------------------------------------------------- */ &.form-control-select { /* ----------------------------------------------------------------------------- Select ----------------------------------------------------------------------------- */ select { color: @form-control-error-text-color; } /* ----------------------------------------------------------------------------- Form Control Select Arrow ----------------------------------------------------------------------------- */ &:after { border-top-color: @form-control-error-text-color; } } /* ----------------------------------------------------------------------------- Form Control (Error) State: Hover ----------------------------------------------------------------------------- */ &:hover { .form-control-variant('error-hover'); /* ----------------------------------------------------------------------------- Form Control Select ----------------------------------------------------------------------------- */ &.form-control-select { /* ----------------------------------------------------------------------------- Select ----------------------------------------------------------------------------- */ select { color: @form-control-error-hover-text-color; } /* ----------------------------------------------------------------------------- Form Control Select Arrow ----------------------------------------------------------------------------- */ &:after { border-top-color: @form-control-error-hover-text-color; } } } /* ----------------------------------------------------------------------------- Form Control (Error) State: Focus ----------------------------------------------------------------------------- */ &:focus, &.focus { .form-control-variant('error-focus'); /* ----------------------------------------------------------------------------- Form Control Select ----------------------------------------------------------------------------- */ &.form-control-select { /* ----------------------------------------------------------------------------- Select ----------------------------------------------------------------------------- */ select { color: @form-control-error-focus-text-color; } /* ----------------------------------------------------------------------------- Form Control Select Arrow ----------------------------------------------------------------------------- */ &:after { border-top-color: @form-control-error-focus-text-color; } } } /* ----------------------------------------------------------------------------- Form Control (Error) State: Disabled ----------------------------------------------------------------------------- */ &.disabled, &[disabled] { opacity: @form-control-error-disabled-opacity; .form-control-variant('error-disabled'); /* ----------------------------------------------------------------------------- Form Control Select ----------------------------------------------------------------------------- */ &.form-control-select { /* ----------------------------------------------------------------------------- Select ----------------------------------------------------------------------------- */ select { color: @form-control-error-disabled-text-color; } /* ----------------------------------------------------------------------------- Form Control Select Arrow ----------------------------------------------------------------------------- */ &:after { border-top-color: @form-control-error-disabled-text-color; } } } & when (@form-control-error-inverse-enabled) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Form Control (Error, Inverse) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ &.form-control-inverse { /* ----------------------------------------------------------------------------- Form Control (Error, Inverse) State: Normal ----------------------------------------------------------------------------- */ .form-control-variant('error-inverse'); /* ----------------------------------------------------------------------------- Form Control Select ----------------------------------------------------------------------------- */ &.form-control-select { /* ----------------------------------------------------------------------------- Select ----------------------------------------------------------------------------- */ select { color: @form-control-error-inverse-text-color; } /* ----------------------------------------------------------------------------- Form Control Select Arrow ----------------------------------------------------------------------------- */ &:after { border-top-color: @form-control-error-inverse-text-color; } } /* ----------------------------------------------------------------------------- Form Control (Error, Inverse) State: Hover ----------------------------------------------------------------------------- */ &:hover { .form-control-variant('error-inverse-hover'); /* ----------------------------------------------------------------------------- Form Control Select ----------------------------------------------------------------------------- */ &.form-control-select { /* ----------------------------------------------------------------------------- Select ----------------------------------------------------------------------------- */ select { color: @form-control-error-inverse-hover-text-color; } /* ----------------------------------------------------------------------------- Form Control Select Arrow ----------------------------------------------------------------------------- */ &:after { border-top-color: @form-control-error-inverse-hover-text-color; } } } /* ----------------------------------------------------------------------------- Form Control (Error, Inverse) State: Focus ----------------------------------------------------------------------------- */ &:focus, &.focus { .form-control-variant('error-inverse-focus'); /* ----------------------------------------------------------------------------- Form Control Select ----------------------------------------------------------------------------- */ &.form-control-select { /* ----------------------------------------------------------------------------- Select ----------------------------------------------------------------------------- */ select { color: @form-control-error-inverse-focus-text-color; } /* ----------------------------------------------------------------------------- Form Control Select Arrow ----------------------------------------------------------------------------- */ &:after { border-top-color: @form-control-error-inverse-focus-text-color; } } } /* ----------------------------------------------------------------------------- Form Control (Error, Inverse) State: Disabled ----------------------------------------------------------------------------- */ &.disabled, &[disabled] { opacity: @form-control-error-inverse-disabled-opacity; .form-control-variant('error-inverse-disabled'); /* ----------------------------------------------------------------------------- Form Control Select ----------------------------------------------------------------------------- */ &.form-control-select { /* ----------------------------------------------------------------------------- Select ----------------------------------------------------------------------------- */ select { color: @form-control-error-inverse-disabled-text-color; } /* ----------------------------------------------------------------------------- Form Control Select Arrow ----------------------------------------------------------------------------- */ &:after { border-top-color: @form-control-error-inverse-disabled-text-color; } } } } } } /* ----------------------------------------------------------------------------- Form Control Group ----------------------------------------------------------------------------- */ .form-control-group.form-control { .form-control { .form-control-group-variant(@variant-class: 'error'); } &:hover { .form-control { .form-control-group-variant(@variant-class: 'error-hover'); } } &.focus { .form-control { .form-control-group-variant(@variant-class: 'error-focus'); } } &.disabled { .form-control { .form-control-group-variant(@variant-class: 'error-disabled'); } } & when (@form-control-error-inverse-enabled) { .form-control-group.form-control.form-control-inverse { .form-control.form-control-inverse { .form-control-group-variant(@variant-class: 'error-inverse'); } &:hover { .form-control.form-control-inverse { .form-control-group-variant(@variant-class: 'error-inverse-hover'); } } &.focus { .form-control.form-control-inverse { .form-control-group-variant(@variant-class: 'error-inverse-focus'); } } &.disabled { .form-control.form-control-inverse { .form-control-group-variant(@variant-class: 'error-inverse-disabled'); } } } } } } & when (@form-label-enabled) and (@form-label-error-enabled) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Label -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ label { color: @form-label-error-color; font-style: @form-label-error-font-style; font-weight: @form-label-error-font-weight; text-transform: @form-label-error-transform; text-shadow: @form-label-error-shadow; & when (@form-label-error-link-enabled) { /* ----------------------------------------------------------------------------- Links ----------------------------------------------------------------------------- */ a { color: @form-label-error-link-text-color; text-decoration: @form-label-error-link-text-decoration; &:hover { color: @form-label-error-link-hover-text-color; text-decoration: @form-label-error-link-hover-text-decoration; } &:active { color: @form-label-error-link-active-text-color; text-decoration: @form-label-error-link-active-text-decoration; } &:disabled { color: @form-label-error-link-active-text-color; text-decoration: @form-label-error-link-active-text-decoration; } } } & when (@form-label-emphasize-enabled) and (@form-label-error-emphasize-enabled) { /* ----------------------------------------------------------------------------- Emphasize ----------------------------------------------------------------------------- */ strong, .emphasize { color: @form-label-error-emphasize-color; font-style: @form-label-error-emphasize-font-style; font-weight: @form-label-error-emphasize-font-weight; text-transform: @form-label-error-emphasize-transform; text-shadow: @form-label-error-emphasize-shadow; & when (@form-label-error-emphasize-link-enabled) { /* ----------------------------------------------------------------------------- Links ----------------------------------------------------------------------------- */ a { color: @form-label-error-emphasize-link-text-color; text-decoration: @form-label-error-emphasize-link-text-decoration; &:hover { color: @form-label-error-emphasize-link-hover-text-color; text-decoration: @form-label-error-emphasize-link-hover-text-decoration; } &:active { color: @form-label-error-emphasize-link-active-text-color; text-decoration: @form-label-error-emphasize-link-active-text-decoration; } &:disabled, &.disabled { color: @form-label-error-emphasize-link-active-text-color; text-decoration: @form-label-error-emphasize-link-active-text-decoration; } } } } } & when (@form-label-mute-enabled) and (@form-label-error-mute-enabled) { /* ----------------------------------------------------------------------------- Mute ----------------------------------------------------------------------------- */ .mute { color: @form-label-error-mute-color; font-style: @form-label-error-mute-font-style; font-weight: @form-label-error-mute-font-weight; text-transform: @form-label-error-mute-transform; text-shadow: @form-label-error-mute-shadow; & when (@form-label-error-mute-link-enabled) { /* ----------------------------------------------------------------------------- Links ----------------------------------------------------------------------------- */ a { color: @form-label-error-mute-link-text-color; text-decoration: @form-label-error-mute-link-text-decoration; &:hover { color: @form-label-error-mute-link-hover-text-color; text-decoration: @form-label-error-mute-link-hover-text-decoration; } &:active { color: @form-label-error-mute-link-active-text-color; text-decoration: @form-label-error-mute-link-active-text-decoration; } &:disabled, &.disabled { color: @form-label-error-mute-link-active-text-color; text-decoration: @form-label-error-mute-link-active-text-decoration; } } } } } & when (@form-label-error-inverse-enabled) { /* ----------------------------------------------------------------------------- Inverse ----------------------------------------------------------------------------- */ &.inverse { color: @form-label-error-inverse-color; text-shadow: @form-label-error-inverse-shadow; & when (@form-label-error-inverse-link-enabled) { /* ----------------------------------------------------------------------------- Links ----------------------------------------------------------------------------- */ a { color: @form-label-error-inverse-link-text-color; text-decoration: @form-label-error-inverse-link-text-decoration; &:hover { color: @form-label-error-inverse-link-hover-text-color; text-decoration: @form-label-error-inverse-link-hover-text-decoration; } &:active { color: @form-label-error-inverse-link-active-text-color; text-decoration: @form-label-error-inverse-link-active-text-decoration; } &:disabled, &.disabled { color: @form-label-error-inverse-link-active-text-color; text-decoration: @form-label-error-inverse-link-active-text-decoration; } } } & when (@form-label-emphasize-enabled) and (@form-label-error-inverse-emphasize-enabled) { /* ----------------------------------------------------------------------------- Emphasize Inverse ----------------------------------------------------------------------------- */ .emphasize { color: @form-label-error-inverse-emphasize-color; text-shadow: @form-label-error-inverse-emphasize-shadow; & when (@form-label-error-inverse-emphasize-link-enabled) { /* ----------------------------------------------------------------------------- Links ----------------------------------------------------------------------------- */ a { color: @form-label-error-inverse-emphasize-link-text-color; text-decoration: @form-label-error-inverse-emphasize-link-text-decoration; &:hover { color: @form-label-error-inverse-emphasize-link-hover-text-color; text-decoration: @form-label-error-inverse-emphasize-link-hover-text-decoration; } &:active { color: @form-label-error-inverse-emphasize-link-active-text-color; text-decoration: @form-label-error-inverse-emphasize-link-active-text-decoration; } &:disabled { color: @form-label-error-inverse-emphasize-link-active-text-color; text-decoration: @form-label-error-inverse-emphasize-link-active-text-decoration; } } } } } & when (@form-label-mute-enabled) and (@form-label-error-inverse-mute-enabled) { /* ----------------------------------------------------------------------------- Mute Inverse ----------------------------------------------------------------------------- */ .mute { color: @form-label-error-inverse-mute-color; text-shadow: @form-label-error-inverse-mute-shadow; & when (@form-label-error-inverse-mute-link-enabled) { /* ----------------------------------------------------------------------------- Links ----------------------------------------------------------------------------- */ a { color: @form-label-error-inverse-mute-link-text-color; text-decoration: @form-label-error-inverse-mute-link-text-decoration; &:hover { color: @form-label-error-inverse-mute-link-hover-text-color; text-decoration: @form-label-error-inverse-mute-link-hover-text-decoration; } &:active { color: @form-label-error-inverse-mute-link-active-text-color; text-decoration: @form-label-error-inverse-mute-link-active-text-decoration; } &:disabled { color: @form-label-error-inverse-mute-link-active-text-color; text-decoration: @form-label-error-inverse-mute-link-active-text-decoration; } } } } } } } } } & when (@form-help-block-enabled) and (@form-help-block-error-enabled) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Help Block -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .form-help-block { color: @form-help-block-error-color; font-style: @form-help-block-error-font-style; font-weight: @form-help-block-error-font-weight; text-transform: @form-help-block-error-transform; text-shadow: @form-help-block-error-shadow; & when (@form-help-block-error-link-enabled) { /* ----------------------------------------------------------------------------- Links ----------------------------------------------------------------------------- */ a { color: @form-help-block-error-link-text-color; text-decoration: @form-help-block-error-link-text-decoration; &:hover { color: @form-help-block-error-link-hover-text-color; text-decoration: @form-help-block-error-link-hover-text-decoration; } &:active { color: @form-help-block-error-link-active-text-color; text-decoration: @form-help-block-error-link-active-text-decoration; } &:disabled { color: @form-help-block-error-link-active-text-color; text-decoration: @form-help-block-error-link-active-text-decoration; } } } & when (@form-help-block-emphasize-enabled) and (@form-help-block-error-emphasize-enabled) { /* ----------------------------------------------------------------------------- Emphasize ----------------------------------------------------------------------------- */ strong, .emphasize { color: @form-help-block-error-emphasize-color; font-style: @form-help-block-error-emphasize-font-style; font-weight: @form-help-block-error-emphasize-font-weight; text-transform: @form-help-block-error-emphasize-transform; text-shadow: @form-help-block-error-emphasize-shadow; & when (@form-help-block-error-emphasize-link-enabled) { /* ----------------------------------------------------------------------------- Links ----------------------------------------------------------------------------- */ a { color: @form-help-block-error-emphasize-link-text-color; text-decoration: @form-help-block-error-emphasize-link-text-decoration; &:hover { color: @form-help-block-error-emphasize-link-hover-text-color; text-decoration: @form-help-block-error-emphasize-link-hover-text-decoration; } &:active { color: @form-help-block-error-emphasize-link-active-text-color; text-decoration: @form-help-block-error-emphasize-link-active-text-decoration; } &:disabled, &.disabled { color: @form-help-block-error-emphasize-link-active-text-color; text-decoration: @form-help-block-error-emphasize-link-active-text-decoration; } } } } } & when (@form-help-block-mute-enabled) and (@form-help-block-error-mute-enabled) { /* ----------------------------------------------------------------------------- Mute ----------------------------------------------------------------------------- */ .mute { color: @form-help-block-error-mute-color; font-style: @form-help-block-error-mute-font-style; font-weight: @form-help-block-error-mute-font-weight; text-transform: @form-help-block-error-mute-transform; text-shadow: @form-help-block-error-mute-shadow; & when (@form-help-block-error-mute-link-enabled) { /* ----------------------------------------------------------------------------- Links ----------------------------------------------------------------------------- */ a { color: @form-help-block-error-mute-link-text-color; text-decoration: @form-help-block-error-mute-link-text-decoration; &:hover { color: @form-help-block-error-mute-link-hover-text-color; text-decoration: @form-help-block-error-mute-link-hover-text-decoration; } &:active { color: @form-help-block-error-mute-link-active-text-color; text-decoration: @form-help-block-error-mute-link-active-text-decoration; } &:disabled, &.disabled { color: @form-help-block-error-mute-link-active-text-color; text-decoration: @form-help-block-error-mute-link-active-text-decoration; } } } } } & when (@form-help-block-error-inverse-enabled) { /* ----------------------------------------------------------------------------- Inverse ----------------------------------------------------------------------------- */ &.inverse { color: @form-help-block-error-inverse-color; text-shadow: @form-help-block-error-inverse-shadow; & when (@form-help-block-error-inverse-link-enabled) { /* ----------------------------------------------------------------------------- Links ----------------------------------------------------------------------------- */ a { color: @form-help-block-error-inverse-link-text-color; text-decoration: @form-help-block-error-inverse-link-text-decoration; &:hover { color: @form-help-block-error-inverse-link-hover-text-color; text-decoration: @form-help-block-error-inverse-link-hover-text-decoration; } &:active { color: @form-help-block-error-inverse-link-active-text-color; text-decoration: @form-help-block-error-inverse-link-active-text-decoration; } &:disabled, &.disabled { color: @form-help-block-error-inverse-link-active-text-color; text-decoration: @form-help-block-error-inverse-link-active-text-decoration; } } } & when (@form-help-block-emphasize-enabled) and (@form-help-block-error-inverse-emphasize-enabled) { /* ----------------------------------------------------------------------------- Emphasize Inverse ----------------------------------------------------------------------------- */ .emphasize { color: @form-help-block-error-inverse-emphasize-color; text-shadow: @form-help-block-error-inverse-emphasize-shadow; & when (@form-help-block-error-inverse-emphasize-link-enabled) { /* ----------------------------------------------------------------------------- Links ----------------------------------------------------------------------------- */ a { color: @form-help-block-error-inverse-emphasize-link-text-color; text-decoration: @form-help-block-error-inverse-emphasize-link-text-decoration; &:hover { color: @form-help-block-error-inverse-emphasize-link-hover-text-color; text-decoration: @form-help-block-error-inverse-emphasize-link-hover-text-decoration; } &:active { color: @form-help-block-error-inverse-emphasize-link-active-text-color; text-decoration: @form-help-block-error-inverse-emphasize-link-active-text-decoration; } &:disabled { color: @form-help-block-error-inverse-emphasize-link-active-text-color; text-decoration: @form-help-block-error-inverse-emphasize-link-active-text-decoration; } } } } } & when (@form-help-block-mute-enabled) and (@form-help-block-error-inverse-mute-enabled) { /* ----------------------------------------------------------------------------- Mute Inverse ----------------------------------------------------------------------------- */ .mute { color: @form-help-block-error-inverse-mute-color; text-shadow: @form-help-block-error-inverse-mute-shadow; & when (@form-help-block-error-inverse-mute-link-enabled) { /* ----------------------------------------------------------------------------- Links ----------------------------------------------------------------------------- */ a { color: @form-help-block-error-inverse-mute-link-text-color; text-decoration: @form-help-block-error-inverse-mute-link-text-decoration; &:hover { color: @form-help-block-error-inverse-mute-link-hover-text-color; text-decoration: @form-help-block-error-inverse-mute-link-hover-text-decoration; } &:active { color: @form-help-block-error-inverse-mute-link-active-text-color; text-decoration: @form-help-block-error-inverse-mute-link-active-text-decoration; } &:disabled { color: @form-help-block-error-inverse-mute-link-active-text-color; text-decoration: @form-help-block-error-inverse-mute-link-active-text-decoration; } } } } } } } } } } } } } & when (@form-enabled) and (@screen-mini-enabled) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Size: Mini (@screen-mini) and above -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ @media (min-width: @screen-mini) { & when (@form-scale-screen-mini-enabled) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Form -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ form { margin-top: @form-margin-top * @form-margin-top-scale-screen-mini; margin-bottom: @form-margin-bottom * @form-margin-bottom-scale-screen-mini; /* ----------------------------------------------------------------------------- Short ----------------------------------------------------------------------------- */ &.short { margin-top: @form-short-margin-top * @form-margin-top-scale-screen-mini; margin-bottom: @form-short-margin-bottom * @form-margin-bottom-scale-screen-mini; } &.short-top { margin-top: @form-short-margin-top * @form-margin-top-scale-screen-mini; } &.short-bottom { margin-bottom: @form-short-margin-bottom * @form-margin-bottom-scale-screen-mini; } /* ----------------------------------------------------------------------------- Tall ----------------------------------------------------------------------------- */ &.tall { margin-top: @form-tall-margin-top * @form-margin-top-scale-screen-mini; margin-bottom: @form-tall-margin-bottom * @form-margin-bottom-scale-screen-mini; } &.tall-top { margin-top: @form-tall-margin-top * @form-margin-top-scale-screen-mini; } &.tall-bottom { margin-bottom: @form-tall-margin-bottom * @form-margin-bottom-scale-screen-mini; } } } & when (@form-label-enabled) and (@form-label-scale-screen-mini-enabled) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Label -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ label { margin-top: @form-label-margin-top * @form-label-margin-top-scale-screen-mini; margin-bottom: @form-label-margin-bottom * @form-label-margin-bottom-scale-screen-mini; font-size: @form-label-font-size * @form-label-font-size-scale-screen-mini; line-height: @form-label-line-height * @form-label-line-height-scale-screen-mini; /* ----------------------------------------------------------------------------- Short ----------------------------------------------------------------------------- */ &.short { margin-top: @form-label-short-margin-top * @form-label-margin-top-scale-screen-mini; margin-bottom: @form-label-short-margin-bottom * @form-label-margin-bottom-scale-screen-mini; } &.short-top { margin-top: @form-label-short-margin-top * @form-label-margin-top-scale-screen-mini; } &.short-bottom { margin-bottom: @form-label-short-margin-bottom * @form-label-margin-bottom-scale-screen-mini; } /* ----------------------------------------------------------------------------- Tall ----------------------------------------------------------------------------- */ &.tall { margin-top: @form-label-tall-margin-top * @form-label-margin-top-scale-screen-mini; margin-bottom: @form-label-tall-margin-bottom * @form-label-margin-bottom-scale-screen-mini; } &.tall-top { margin-top: @form-label-tall-margin-top * @form-label-margin-top-scale-screen-mini; } &.tall-bottom { margin-bottom: @form-label-tall-margin-bottom * @form-label-margin-bottom-scale-screen-mini; } & when (@form-label-emphasize-enabled) { /* ----------------------------------------------------------------------------- Emphasize ----------------------------------------------------------------------------- */ strong, .emphasize { font-size: @form-label-emphasize-font-size * @form-label-font-size-scale-screen-mini; line-height: @form-label-emphasize-line-height * @form-label-line-height-scale-screen-mini; } } & when (@form-label-mute-enabled) { /* ----------------------------------------------------------------------------- Mute ----------------------------------------------------------------------------- */ .mute { font-size: @form-label-mute-font-size * @form-label-font-size-scale-screen-mini; line-height: @form-label-mute-line-height * @form-label-line-height-scale-screen-mini; } } } } & when (@form-help-block-enabled) and (@form-help-block-scale-screen-mini-enabled) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Help Block -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .form-help-block { margin-top: @form-help-block-margin-top * @form-help-block-margin-top-scale-screen-mini; margin-bottom: @form-help-block-margin-bottom * @form-help-block-margin-bottom-scale-screen-mini; font-size: @form-help-block-font-size * @form-help-block-font-size-scale-screen-mini; line-height: @form-help-block-line-height * @form-help-block-line-height-scale-screen-mini; /* ----------------------------------------------------------------------------- Short ----------------------------------------------------------------------------- */ &.short { margin-top: @form-help-block-short-margin-top * @form-help-block-margin-top-scale-screen-mini; margin-bottom: @form-help-block-short-margin-bottom * @form-help-block-margin-bottom-scale-screen-mini; } &.short-top { margin-top: @form-help-block-short-margin-top * @form-help-block-margin-top-scale-screen-mini; } &.short-bottom { margin-bottom: @form-help-block-short-margin-bottom * @form-help-block-margin-bottom-scale-screen-mini; } /* ----------------------------------------------------------------------------- Tall ----------------------------------------------------------------------------- */ &.tall { margin-top: @form-help-block-tall-margin-top * @form-help-block-margin-top-scale-screen-mini; margin-bottom: @form-help-block-tall-margin-bottom * @form-help-block-margin-bottom-scale-screen-mini; } &.tall-top { margin-top: @form-help-block-tall-margin-top * @form-help-block-margin-top-scale-screen-mini; } &.tall-bottom { margin-bottom: @form-help-block-tall-margin-bottom * @form-help-block-margin-bottom-scale-screen-mini; } & when (@form-help-block-emphasize-enabled) { /* ----------------------------------------------------------------------------- Emphasize ----------------------------------------------------------------------------- */ strong, .emphasize { font-size: @form-help-block-emphasize-font-size * @form-help-block-font-size-scale-screen-mini; line-height: @form-help-block-emphasize-line-height * @form-help-block-line-height-scale-screen-mini; } } & when (@form-help-block-mute-enabled) { /* ----------------------------------------------------------------------------- Mute ----------------------------------------------------------------------------- */ .mute { font-size: @form-help-block-mute-font-size * @form-help-block-font-size-scale-screen-mini; line-height: @form-help-block-mute-line-height * @form-help-block-line-height-scale-screen-mini; } } } } & when (@form-control-enabled) and (@form-control-scale-screen-mini-enabled) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Form Control -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .form-control { /* ----------------------------------------------------------------------------- Form Control Styles ----------------------------------------------------------------------------- */ .form-control-size-variant('', 'screen-small'); /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Form Control (Select) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ &.form-control-select { /* ----------------------------------------------------------------------------- Select ----------------------------------------------------------------------------- */ select { .form-control-size-variant('', 'screen-small'); } /* ----------------------------------------------------------------------------- Select Arrows ----------------------------------------------------------------------------- */ &:after { top: floor(((@form-control-height * @form-control-height-scale-screen-mini) * 0.5) - ((@form-control-select-arrow-height * @form-control-height-scale-screen-mini) * 0.5)); right: floor((@form-control-padding-horizontal * @form-control-padding-horizontal-scale-screen-mini)); border-width: floor(@form-control-select-arrow-height * @form-control-height-scale-screen-mini) floor(@form-control-select-arrow-width * @form-control-height-scale-screen-mini * 0.5) 0; } } } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Form Control Group -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .form-control-group { /* ----------------------------------------------------------------------------- Form Control (Nested) ----------------------------------------------------------------------------- */ &.form-control { /* ----------------------------------------------------------------------------- Form Control Add-On ----------------------------------------------------------------------------- */ .form-control-group-add-on { &.form-control-group-add-on-prepend { padding-right: @form-control-padding-horizontal * @form-control-padding-horizontal-scale-screen-mini; } &.form-control-group-add-on-append { padding-left: @form-control-padding-horizontal * @form-control-padding-horizontal-scale-screen-mini; } } & when (@form-control-mini-enabled) { /* ----------------------------------------------------------------------------- Form Control (Mini) ----------------------------------------------------------------------------- */ &.form-control-mini { /* ----------------------------------------------------------------------------- Form Control Add-On ----------------------------------------------------------------------------- */ .form-control-group-add-on { &.form-control-group-add-on-prepend { padding-right: @form-control-mini-padding-horizontal * @form-control-mini-padding-horizontal-scale-screen-mini; } &.form-control-group-add-on-append { padding-left: @form-control-mini-padding-horizontal * @form-control-mini-padding-horizontal-scale-screen-mini; } } } } & when (@form-control-small-enabled) { /* ----------------------------------------------------------------------------- Form Control (Small) ----------------------------------------------------------------------------- */ &.form-control-small { /* ----------------------------------------------------------------------------- Form Control Add-On ----------------------------------------------------------------------------- */ .form-control-group-add-on { &.form-control-group-add-on-prepend { padding-right: @form-control-small-padding-horizontal * @form-control-small-padding-horizontal-scale-screen-mini; } &.form-control-group-add-on-append { padding-left: @form-control-small-padding-horizontal * @form-control-small-padding-horizontal-scale-screen-mini; } } } } & when (@form-control-large-enabled) { /* ----------------------------------------------------------------------------- Form Control (Large) ----------------------------------------------------------------------------- */ &.form-control-large { /* ----------------------------------------------------------------------------- Form Control Add-On ----------------------------------------------------------------------------- */ .form-control-group-add-on { &.form-control-group-add-on-prepend { padding-right: @form-control-large-padding-horizontal * @form-control-large-padding-horizontal-scale-screen-mini; } &.form-control-group-add-on-append { padding-left: @form-control-large-padding-horizontal * @form-control-large-padding-horizontal-scale-screen-mini; } } } } & when (@form-control-jumbo-enabled) { /* ----------------------------------------------------------------------------- Form Control (Jumbo) ----------------------------------------------------------------------------- */ &.form-control-jumbo { /* ----------------------------------------------------------------------------- Form Control Add-On ----------------------------------------------------------------------------- */ .form-control-group-add-on { &.form-control-group-add-on-prepend { padding-right: @form-control-jumbo-padding-horizontal * @form-control-jumbo-padding-horizontal-scale-screen-mini; } &.form-control-group-add-on-append { padding-left: @form-control-jumbo-padding-horizontal * @form-control-jumbo-padding-horizontal-scale-screen-mini; } } } } } } & when (@form-control-mini-enabled) and (@form-control-mini-scale-screen-mini-enabled) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Form Control (Mini) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .form-control.form-control-mini { /* ----------------------------------------------------------------------------- Form Control (Mini) Styles ----------------------------------------------------------------------------- */ .form-control-size-variant('mini', 'screen-small'); /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Form Control (Select) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ &.form-control-select { /* ----------------------------------------------------------------------------- Select ----------------------------------------------------------------------------- */ select { .form-control-size-variant('mini', 'screen-small'); } /* ----------------------------------------------------------------------------- Select Arrows ----------------------------------------------------------------------------- */ &:after { top: floor(((@form-control-mini-height * @form-control-mini-height-scale-screen-mini) * 0.5) - ((@form-control-mini-select-arrow-height * @form-control-mini-height-scale-screen-mini) * 0.5)); right: floor((@form-control-mini-padding-horizontal * @form-control-mini-padding-horizontal-scale-screen-mini)); border-width: floor(@form-control-mini-select-arrow-height * @form-control-mini-height-scale-screen-mini) floor(@form-control-mini-select-arrow-width * @form-control-mini-height-scale-screen-mini * 0.5) 0; } } } } & when (@form-control-small-enabled) and (@form-control-small-scale-screen-mini-enabled) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Form Control (Small) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .form-control.form-control-small { /* ----------------------------------------------------------------------------- Form Control (Small) Styles ----------------------------------------------------------------------------- */ .form-control-size-variant('small', 'screen-small'); /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Form Control (Select) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ &.form-control-select { /* ----------------------------------------------------------------------------- Select ----------------------------------------------------------------------------- */ select { .form-control-size-variant('small', 'screen-small'); } /* ----------------------------------------------------------------------------- Select Arrows ----------------------------------------------------------------------------- */ &:after { top: floor(((@form-control-small-height * @form-control-small-height-scale-screen-mini) * 0.5) - ((@form-control-small-select-arrow-height * @form-control-small-height-scale-screen-mini) * 0.5)); right: floor((@form-control-small-padding-horizontal * @form-control-small-padding-horizontal-scale-screen-mini)); border-width: floor(@form-control-small-select-arrow-height * @form-control-small-height-scale-screen-mini) floor(@form-control-small-select-arrow-width * @form-control-small-height-scale-screen-mini * 0.5) 0; } } } } & when (@form-control-large-enabled) and (@form-control-large-scale-screen-mini-enabled) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Form Control (Large) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .form-control.form-control-large { /* ----------------------------------------------------------------------------- Form Control (Large) Styles ----------------------------------------------------------------------------- */ .form-control-size-variant('large', 'screen-small'); /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Form Control (Select) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ &.form-control-select { /* ----------------------------------------------------------------------------- Select ----------------------------------------------------------------------------- */ select { .form-control-size-variant('large', 'screen-small'); } /* ----------------------------------------------------------------------------- Select Arrows ----------------------------------------------------------------------------- */ &:after { top: floor(((@form-control-large-height * @form-control-large-height-scale-screen-mini) * 0.5) - ((@form-control-large-select-arrow-height * @form-control-large-height-scale-screen-mini) * 0.5)); right: floor((@form-control-large-padding-horizontal * @form-control-large-padding-horizontal-scale-screen-mini)); border-width: floor(@form-control-large-select-arrow-height * @form-control-large-height-scale-screen-mini) floor(@form-control-large-select-arrow-width * @form-control-large-height-scale-screen-mini * 0.5) 0; } } } } & when (@form-control-jumbo-enabled) and (@form-control-jumbo-scale-screen-mini-enabled) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Form Control (Jumbo) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .form-control.form-control-jumbo { /* ----------------------------------------------------------------------------- Form Control (Jumbo) Styles ----------------------------------------------------------------------------- */ .form-control-size-variant('jumbo', 'screen-small'); /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Form Control (Select) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ &.form-control-select { /* ----------------------------------------------------------------------------- Select ----------------------------------------------------------------------------- */ select { .form-control-size-variant('jumbo', 'screen-small'); } /* ----------------------------------------------------------------------------- Select Arrows ----------------------------------------------------------------------------- */ &:after { top: floor(((@form-control-jumbo-height * @form-control-jumbo-height-scale-screen-mini) * 0.5) - ((@form-control-jumbo-select-arrow-height * @form-control-jumbo-height-scale-screen-mini) * 0.5)); right: floor((@form-control-jumbo-padding-horizontal * @form-control-jumbo-padding-horizontal-scale-screen-mini)); border-width: floor(@form-control-jumbo-select-arrow-height * @form-control-jumbo-height-scale-screen-mini) floor(@form-control-jumbo-select-arrow-width * @form-control-jumbo-height-scale-screen-mini * 0.5) 0; } } } } } & when (@form-option-enabled) and (@form-option-scale-screen-mini-enabled) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Option -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .checkbox, .radio { margin-top: @form-option-margin-top * @form-option-margin-top-scale-screen-mini; margin-bottom: @form-option-margin-bottom * @form-option-margin-bottom-scale-screen-mini; /* ----------------------------------------------------------------------------- Short ----------------------------------------------------------------------------- */ &.short { margin-top: @form-option-short-margin-top * @form-option-margin-top-scale-screen-mini; margin-bottom: @form-option-short-margin-bottom * @form-option-margin-bottom-scale-screen-mini; } &.short-top { margin-top: @form-option-short-margin-top * @form-option-margin-top-scale-screen-mini; } &.short-bottom { margin-bottom: @form-option-short-margin-bottom * @form-option-margin-bottom-scale-screen-mini; } /* ----------------------------------------------------------------------------- Tall ----------------------------------------------------------------------------- */ &.tall { margin-top: @form-option-tall-margin-top * @form-option-margin-top-scale-screen-mini; margin-bottom: @form-option-tall-margin-bottom * @form-option-margin-bottom-scale-screen-mini; } &.tall-top { margin-top: @form-option-tall-margin-top * @form-option-margin-top-scale-screen-mini; } &.tall-bottom { margin-bottom: @form-option-tall-margin-bottom * @form-option-margin-bottom-scale-screen-mini; } /* ----------------------------------------------------------------------------- Label ----------------------------------------------------------------------------- */ label { font-size: @form-option-font-size * @form-option-font-size-scale-screen-mini; line-height: @form-option-line-height * @form-option-line-height-scale-screen-mini; padding-left: @form-option-padding-horizontal-screen-mini + @form-option-checkbox-height; input[type="checkbox"] { top: floor(((@form-option-line-height * @form-option-line-height-scale-screen-mini) - @form-option-checkbox-height) / 2); } input[type="radio"] { top: floor(((@form-option-line-height * @form-option-line-height-scale-screen-mini) - @form-option-radio-height) / 2); } & when (@form-option-emphasize-enabled) { /* ----------------------------------------------------------------------------- Emphasize ----------------------------------------------------------------------------- */ strong, .emphasize { font-size: @form-option-emphasize-font-size * @form-option-font-size-scale-screen-mini; line-height: @form-option-emphasize-line-height * @form-option-line-height-scale-screen-mini; } } & when (@form-option-mute-enabled) { /* ----------------------------------------------------------------------------- Mute ----------------------------------------------------------------------------- */ .mute { font-size: @form-option-mute-font-size * @form-option-font-size-scale-screen-mini; line-height: @form-option-mute-line-height * @form-option-line-height-scale-screen-mini; } } } } } & when (@form-group-enabled) and (@form-group-scale-screen-mini-enabled) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Form Group -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .form-group { margin-top: @form-group-margin-top * @form-group-margin-top-scale-screen-mini; margin-bottom: @form-group-margin-bottom * @form-group-margin-bottom-scale-screen-mini; /* ----------------------------------------------------------------------------- Short ----------------------------------------------------------------------------- */ &.short { margin-top: @form-group-short-margin-top * @form-group-margin-top-scale-screen-mini; margin-bottom: @form-group-short-margin-bottom * @form-group-margin-bottom-scale-screen-mini; } &.short-top { margin-top: @form-group-short-margin-top * @form-group-margin-top-scale-screen-mini; } &.short-bottom { margin-bottom: @form-group-short-margin-bottom * @form-group-margin-bottom-scale-screen-mini; } /* ----------------------------------------------------------------------------- Tall ----------------------------------------------------------------------------- */ &.tall { margin-top: @form-group-tall-margin-top * @form-group-margin-top-scale-screen-mini; margin-bottom: @form-group-tall-margin-bottom * @form-group-margin-bottom-scale-screen-mini; } &.tall-top { margin-top: @form-group-tall-margin-top * @form-group-margin-top-scale-screen-mini; } &.tall-bottom { margin-bottom: @form-group-tall-margin-bottom * @form-group-margin-bottom-scale-screen-mini; } } } } } & when (@form-enabled) and (@screen-small-enabled) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Size: Small (@screen-small) and above -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ @media (min-width: @screen-small) { & when (@form-scale-screen-small-enabled) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Form -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ form { margin-top: @form-margin-top * @form-margin-top-scale-screen-small; margin-bottom: @form-margin-bottom * @form-margin-bottom-scale-screen-small; /* ----------------------------------------------------------------------------- Short ----------------------------------------------------------------------------- */ &.short { margin-top: @form-short-margin-top * @form-margin-top-scale-screen-small; margin-bottom: @form-short-margin-bottom * @form-margin-bottom-scale-screen-small; } &.short-top { margin-top: @form-short-margin-top * @form-margin-top-scale-screen-small; } &.short-bottom { margin-bottom: @form-short-margin-bottom * @form-margin-bottom-scale-screen-small; } /* ----------------------------------------------------------------------------- Tall ----------------------------------------------------------------------------- */ &.tall { margin-top: @form-tall-margin-top * @form-margin-top-scale-screen-small; margin-bottom: @form-tall-margin-bottom * @form-margin-bottom-scale-screen-small; } &.tall-top { margin-top: @form-tall-margin-top * @form-margin-top-scale-screen-small; } &.tall-bottom { margin-bottom: @form-tall-margin-bottom * @form-margin-bottom-scale-screen-small; } } } & when (@form-label-enabled) and (@form-label-scale-screen-small-enabled) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Label -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ label { margin-top: @form-label-margin-top * @form-label-margin-top-scale-screen-small; margin-bottom: @form-label-margin-bottom * @form-label-margin-bottom-scale-screen-small; font-size: @form-label-font-size * @form-label-font-size-scale-screen-small; line-height: @form-label-line-height * @form-label-line-height-scale-screen-small; /* ----------------------------------------------------------------------------- Short ----------------------------------------------------------------------------- */ &.short { margin-top: @form-label-short-margin-top * @form-label-margin-top-scale-screen-small; margin-bottom: @form-label-short-margin-bottom * @form-label-margin-bottom-scale-screen-small; } &.short-top { margin-top: @form-label-short-margin-top * @form-label-margin-top-scale-screen-small; } &.short-bottom { margin-bottom: @form-label-short-margin-bottom * @form-label-margin-bottom-scale-screen-small; } /* ----------------------------------------------------------------------------- Tall ----------------------------------------------------------------------------- */ &.tall { margin-top: @form-label-tall-margin-top * @form-label-margin-top-scale-screen-small; margin-bottom: @form-label-tall-margin-bottom * @form-label-margin-bottom-scale-screen-small; } &.tall-top { margin-top: @form-label-tall-margin-top * @form-label-margin-top-scale-screen-small; } &.tall-bottom { margin-bottom: @form-label-tall-margin-bottom * @form-label-margin-bottom-scale-screen-small; } & when (@form-label-emphasize-enabled) { /* ----------------------------------------------------------------------------- Emphasize ----------------------------------------------------------------------------- */ strong, .emphasize { font-size: @form-label-emphasize-font-size * @form-label-font-size-scale-screen-small; line-height: @form-label-emphasize-line-height * @form-label-line-height-scale-screen-small; } } & when (@form-label-mute-enabled) { /* ----------------------------------------------------------------------------- Mute ----------------------------------------------------------------------------- */ .mute { font-size: @form-label-mute-font-size * @form-label-font-size-scale-screen-small; line-height: @form-label-mute-line-height * @form-label-line-height-scale-screen-small; } } } } & when (@form-help-block-enabled) and (@form-help-block-scale-screen-small-enabled) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Help Block -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .form-help-block { margin-top: @form-help-block-margin-top * @form-help-block-margin-top-scale-screen-small; margin-bottom: @form-help-block-margin-bottom * @form-help-block-margin-bottom-scale-screen-small; font-size: @form-help-block-font-size * @form-help-block-font-size-scale-screen-small; line-height: @form-help-block-line-height * @form-help-block-line-height-scale-screen-small; /* ----------------------------------------------------------------------------- Short ----------------------------------------------------------------------------- */ &.short { margin-top: @form-help-block-short-margin-top * @form-help-block-margin-top-scale-screen-small; margin-bottom: @form-help-block-short-margin-bottom * @form-help-block-margin-bottom-scale-screen-small; } &.short-top { margin-top: @form-help-block-short-margin-top * @form-help-block-margin-top-scale-screen-small; } &.short-bottom { margin-bottom: @form-help-block-short-margin-bottom * @form-help-block-margin-bottom-scale-screen-small; } /* ----------------------------------------------------------------------------- Tall ----------------------------------------------------------------------------- */ &.tall { margin-top: @form-help-block-tall-margin-top * @form-help-block-margin-top-scale-screen-small; margin-bottom: @form-help-block-tall-margin-bottom * @form-help-block-margin-bottom-scale-screen-small; } &.tall-top { margin-top: @form-help-block-tall-margin-top * @form-help-block-margin-top-scale-screen-small; } &.tall-bottom { margin-bottom: @form-help-block-tall-margin-bottom * @form-help-block-margin-bottom-scale-screen-small; } & when (@form-help-block-emphasize-enabled) { /* ----------------------------------------------------------------------------- Emphasize ----------------------------------------------------------------------------- */ strong, .emphasize { font-size: @form-help-block-emphasize-font-size * @form-help-block-font-size-scale-screen-small; line-height: @form-help-block-emphasize-line-height * @form-help-block-line-height-scale-screen-small; } } & when (@form-help-block-mute-enabled) { /* ----------------------------------------------------------------------------- Mute ----------------------------------------------------------------------------- */ .mute { font-size: @form-help-block-mute-font-size * @form-help-block-font-size-scale-screen-small; line-height: @form-help-block-mute-line-height * @form-help-block-line-height-scale-screen-small; } } } } & when (@form-control-enabled) and (@form-control-scale-screen-small-enabled) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Form Control -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .form-control { /* ----------------------------------------------------------------------------- Form Control Styles ----------------------------------------------------------------------------- */ .form-control-size-variant('', 'screen-small'); /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Form Control (Select) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ &.form-control-select { /* ----------------------------------------------------------------------------- Select ----------------------------------------------------------------------------- */ select { .form-control-size-variant('', 'screen-small'); } /* ----------------------------------------------------------------------------- Select Arrows ----------------------------------------------------------------------------- */ &:after { top: floor(((@form-control-height * @form-control-height-scale-screen-small) * 0.5) - ((@form-control-select-arrow-height * @form-control-height-scale-screen-small) * 0.5)); right: floor((@form-control-padding-horizontal * @form-control-padding-horizontal-scale-screen-small)); border-width: floor(@form-control-select-arrow-height * @form-control-height-scale-screen-small) floor(@form-control-select-arrow-width * @form-control-height-scale-screen-small * 0.5) 0; } } } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Form Control Group -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .form-control-group { /* ----------------------------------------------------------------------------- Form Control (Nested) ----------------------------------------------------------------------------- */ &.form-control { /* ----------------------------------------------------------------------------- Form Control Add-On ----------------------------------------------------------------------------- */ .form-control-group-add-on { &.form-control-group-add-on-prepend { padding-right: @form-control-padding-horizontal * @form-control-padding-horizontal-scale-screen-small; } &.form-control-group-add-on-append { padding-left: @form-control-padding-horizontal * @form-control-padding-horizontal-scale-screen-small; } } & when (@form-control-mini-enabled) { /* ----------------------------------------------------------------------------- Form Control (Mini) ----------------------------------------------------------------------------- */ &.form-control-mini { /* ----------------------------------------------------------------------------- Form Control Add-On ----------------------------------------------------------------------------- */ .form-control-group-add-on { &.form-control-group-add-on-prepend { padding-right: @form-control-mini-padding-horizontal * @form-control-mini-padding-horizontal-scale-screen-small; } &.form-control-group-add-on-append { padding-left: @form-control-mini-padding-horizontal * @form-control-mini-padding-horizontal-scale-screen-small; } } } } & when (@form-control-small-enabled) { /* ----------------------------------------------------------------------------- Form Control (Small) ----------------------------------------------------------------------------- */ &.form-control-small { /* ----------------------------------------------------------------------------- Form Control Add-On ----------------------------------------------------------------------------- */ .form-control-group-add-on { &.form-control-group-add-on-prepend { padding-right: @form-control-small-padding-horizontal * @form-control-small-padding-horizontal-scale-screen-small; } &.form-control-group-add-on-append { padding-left: @form-control-small-padding-horizontal * @form-control-small-padding-horizontal-scale-screen-small; } } } } & when (@form-control-large-enabled) { /* ----------------------------------------------------------------------------- Form Control (Large) ----------------------------------------------------------------------------- */ &.form-control-large { /* ----------------------------------------------------------------------------- Form Control Add-On ----------------------------------------------------------------------------- */ .form-control-group-add-on { &.form-control-group-add-on-prepend { padding-right: @form-control-large-padding-horizontal * @form-control-large-padding-horizontal-scale-screen-small; } &.form-control-group-add-on-append { padding-left: @form-control-large-padding-horizontal * @form-control-large-padding-horizontal-scale-screen-small; } } } } & when (@form-control-jumbo-enabled) { /* ----------------------------------------------------------------------------- Form Control (Jumbo) ----------------------------------------------------------------------------- */ &.form-control-jumbo { /* ----------------------------------------------------------------------------- Form Control Add-On ----------------------------------------------------------------------------- */ .form-control-group-add-on { &.form-control-group-add-on-prepend { padding-right: @form-control-jumbo-padding-horizontal * @form-control-jumbo-padding-horizontal-scale-screen-small; } &.form-control-group-add-on-append { padding-left: @form-control-jumbo-padding-horizontal * @form-control-jumbo-padding-horizontal-scale-screen-small; } } } } } } & when (@form-control-mini-enabled) and (@form-control-mini-scale-screen-small-enabled) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Form Control (Mini) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .form-control.form-control-mini { /* ----------------------------------------------------------------------------- Form Control (Mini) Styles ----------------------------------------------------------------------------- */ .form-control-size-variant('mini', 'screen-small'); /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Form Control (Select) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ &.form-control-select { /* ----------------------------------------------------------------------------- Select ----------------------------------------------------------------------------- */ select { .form-control-size-variant('mini', 'screen-small'); } /* ----------------------------------------------------------------------------- Select Arrows ----------------------------------------------------------------------------- */ &:after { top: floor(((@form-control-mini-height * @form-control-mini-height-scale-screen-small) * 0.5) - ((@form-control-mini-select-arrow-height * @form-control-mini-height-scale-screen-small) * 0.5)); right: floor((@form-control-mini-padding-horizontal * @form-control-mini-padding-horizontal-scale-screen-small)); border-width: floor(@form-control-mini-select-arrow-height * @form-control-mini-height-scale-screen-small) floor(@form-control-mini-select-arrow-width * @form-control-mini-height-scale-screen-small * 0.5) 0; } } } } & when (@form-control-small-enabled) and (@form-control-small-scale-screen-small-enabled) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Form Control (Small) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .form-control.form-control-small { /* ----------------------------------------------------------------------------- Form Control (Small) Styles ----------------------------------------------------------------------------- */ .form-control-size-variant('small', 'screen-small'); /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Form Control (Select) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ &.form-control-select { /* ----------------------------------------------------------------------------- Select ----------------------------------------------------------------------------- */ select { .form-control-size-variant('small', 'screen-small'); } /* ----------------------------------------------------------------------------- Select Arrows ----------------------------------------------------------------------------- */ &:after { top: floor(((@form-control-small-height * @form-control-small-height-scale-screen-small) * 0.5) - ((@form-control-small-select-arrow-height * @form-control-small-height-scale-screen-small) * 0.5)); right: floor((@form-control-small-padding-horizontal * @form-control-small-padding-horizontal-scale-screen-small)); border-width: floor(@form-control-small-select-arrow-height * @form-control-small-height-scale-screen-small) floor(@form-control-small-select-arrow-width * @form-control-small-height-scale-screen-small * 0.5) 0; } } } } & when (@form-control-large-enabled) and (@form-control-large-scale-screen-small-enabled) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Form Control (Large) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .form-control.form-control-large { /* ----------------------------------------------------------------------------- Form Control (Large) Styles ----------------------------------------------------------------------------- */ .form-control-size-variant('large', 'screen-small'); /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Form Control (Select) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ &.form-control-select { /* ----------------------------------------------------------------------------- Select ----------------------------------------------------------------------------- */ select { .form-control-size-variant('large', 'screen-small'); } /* ----------------------------------------------------------------------------- Select Arrows ----------------------------------------------------------------------------- */ &:after { top: floor(((@form-control-large-height * @form-control-large-height-scale-screen-small) * 0.5) - ((@form-control-large-select-arrow-height * @form-control-large-height-scale-screen-small) * 0.5)); right: floor((@form-control-large-padding-horizontal * @form-control-large-padding-horizontal-scale-screen-small)); border-width: floor(@form-control-large-select-arrow-height * @form-control-large-height-scale-screen-small) floor(@form-control-large-select-arrow-width * @form-control-large-height-scale-screen-small * 0.5) 0; } } } } & when (@form-control-jumbo-enabled) and (@form-control-jumbo-scale-screen-small-enabled) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Form Control (Jumbo) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .form-control.form-control-jumbo { /* ----------------------------------------------------------------------------- Form Control (Jumbo) Styles ----------------------------------------------------------------------------- */ .form-control-size-variant('jumbo', 'screen-small'); /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Form Control (Select) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ &.form-control-select { /* ----------------------------------------------------------------------------- Select ----------------------------------------------------------------------------- */ select { .form-control-size-variant('jumbo', 'screen-small'); } /* ----------------------------------------------------------------------------- Select Arrows ----------------------------------------------------------------------------- */ &:after { top: floor(((@form-control-jumbo-height * @form-control-jumbo-height-scale-screen-small) * 0.5) - ((@form-control-jumbo-select-arrow-height * @form-control-jumbo-height-scale-screen-small) * 0.5)); right: floor((@form-control-jumbo-padding-horizontal * @form-control-jumbo-padding-horizontal-scale-screen-small)); border-width: floor(@form-control-jumbo-select-arrow-height * @form-control-jumbo-height-scale-screen-small) floor(@form-control-jumbo-select-arrow-width * @form-control-jumbo-height-scale-screen-small * 0.5) 0; } } } } } & when (@form-option-enabled) and (@form-option-scale-screen-small-enabled) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Option -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .checkbox, .radio { margin-top: @form-option-margin-top * @form-option-margin-top-scale-screen-small; margin-bottom: @form-option-margin-bottom * @form-option-margin-bottom-scale-screen-small; /* ----------------------------------------------------------------------------- Short ----------------------------------------------------------------------------- */ &.short { margin-top: @form-option-short-margin-top * @form-option-margin-top-scale-screen-small; margin-bottom: @form-option-short-margin-bottom * @form-option-margin-bottom-scale-screen-small; } &.short-top { margin-top: @form-option-short-margin-top * @form-option-margin-top-scale-screen-small; } &.short-bottom { margin-bottom: @form-option-short-margin-bottom * @form-option-margin-bottom-scale-screen-small; } /* ----------------------------------------------------------------------------- Tall ----------------------------------------------------------------------------- */ &.tall { margin-top: @form-option-tall-margin-top * @form-option-margin-top-scale-screen-small; margin-bottom: @form-option-tall-margin-bottom * @form-option-margin-bottom-scale-screen-small; } &.tall-top { margin-top: @form-option-tall-margin-top * @form-option-margin-top-scale-screen-small; } &.tall-bottom { margin-bottom: @form-option-tall-margin-bottom * @form-option-margin-bottom-scale-screen-small; } /* ----------------------------------------------------------------------------- Label ----------------------------------------------------------------------------- */ label { font-size: @form-option-font-size * @form-option-font-size-scale-screen-small; line-height: @form-option-line-height * @form-option-line-height-scale-screen-small; padding-left: @form-option-padding-horizontal-screen-small + @form-option-checkbox-height; input[type="checkbox"] { top: floor(((@form-option-line-height * @form-option-line-height-scale-screen-small) - @form-option-checkbox-height) / 2); } input[type="radio"] { top: floor(((@form-option-line-height * @form-option-line-height-scale-screen-small) - @form-option-radio-height) / 2); } & when (@form-option-emphasize-enabled) { /* ----------------------------------------------------------------------------- Emphasize ----------------------------------------------------------------------------- */ strong, .emphasize { font-size: @form-option-emphasize-font-size * @form-option-font-size-scale-screen-small; line-height: @form-option-emphasize-line-height * @form-option-line-height-scale-screen-small; } } & when (@form-option-mute-enabled) { /* ----------------------------------------------------------------------------- Mute ----------------------------------------------------------------------------- */ .mute { font-size: @form-option-mute-font-size * @form-option-font-size-scale-screen-small; line-height: @form-option-mute-line-height * @form-option-line-height-scale-screen-small; } } } } } & when (@form-group-enabled) and (@form-group-scale-screen-small-enabled) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Form Group -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .form-group { margin-top: @form-group-margin-top * @form-group-margin-top-scale-screen-small; margin-bottom: @form-group-margin-bottom * @form-group-margin-bottom-scale-screen-small; /* ----------------------------------------------------------------------------- Short ----------------------------------------------------------------------------- */ &.short { margin-top: @form-group-short-margin-top * @form-group-margin-top-scale-screen-small; margin-bottom: @form-group-short-margin-bottom * @form-group-margin-bottom-scale-screen-small; } &.short-top { margin-top: @form-group-short-margin-top * @form-group-margin-top-scale-screen-small; } &.short-bottom { margin-bottom: @form-group-short-margin-bottom * @form-group-margin-bottom-scale-screen-small; } /* ----------------------------------------------------------------------------- Tall ----------------------------------------------------------------------------- */ &.tall { margin-top: @form-group-tall-margin-top * @form-group-margin-top-scale-screen-small; margin-bottom: @form-group-tall-margin-bottom * @form-group-margin-bottom-scale-screen-small; } &.tall-top { margin-top: @form-group-tall-margin-top * @form-group-margin-top-scale-screen-small; } &.tall-bottom { margin-bottom: @form-group-tall-margin-bottom * @form-group-margin-bottom-scale-screen-small; } } } } } & when (@form-enabled) and (@screen-medium-enabled) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Size: Medium (@screen-medium) and above -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ @media (min-width: @screen-medium) { & when (@form-scale-screen-medium-enabled) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Form -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ form { margin-top: @form-margin-top * @form-margin-top-scale-screen-medium; margin-bottom: @form-margin-bottom * @form-margin-bottom-scale-screen-medium; /* ----------------------------------------------------------------------------- Short ----------------------------------------------------------------------------- */ &.short { margin-top: @form-short-margin-top * @form-margin-top-scale-screen-medium; margin-bottom: @form-short-margin-bottom * @form-margin-bottom-scale-screen-medium; } &.short-top { margin-top: @form-short-margin-top * @form-margin-top-scale-screen-medium; } &.short-bottom { margin-bottom: @form-short-margin-bottom * @form-margin-bottom-scale-screen-medium; } /* ----------------------------------------------------------------------------- Tall ----------------------------------------------------------------------------- */ &.tall { margin-top: @form-tall-margin-top * @form-margin-top-scale-screen-medium; margin-bottom: @form-tall-margin-bottom * @form-margin-bottom-scale-screen-medium; } &.tall-top { margin-top: @form-tall-margin-top * @form-margin-top-scale-screen-medium; } &.tall-bottom { margin-bottom: @form-tall-margin-bottom * @form-margin-bottom-scale-screen-medium; } } } & when (@form-label-enabled) and (@form-label-scale-screen-medium-enabled) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Label -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ label { margin-top: @form-label-margin-top * @form-label-margin-top-scale-screen-medium; margin-bottom: @form-label-margin-bottom * @form-label-margin-bottom-scale-screen-medium; font-size: @form-label-font-size * @form-label-font-size-scale-screen-medium; line-height: @form-label-line-height * @form-label-line-height-scale-screen-medium; /* ----------------------------------------------------------------------------- Short ----------------------------------------------------------------------------- */ &.short { margin-top: @form-label-short-margin-top * @form-label-margin-top-scale-screen-medium; margin-bottom: @form-label-short-margin-bottom * @form-label-margin-bottom-scale-screen-medium; } &.short-top { margin-top: @form-label-short-margin-top * @form-label-margin-top-scale-screen-medium; } &.short-bottom { margin-bottom: @form-label-short-margin-bottom * @form-label-margin-bottom-scale-screen-medium; } /* ----------------------------------------------------------------------------- Tall ----------------------------------------------------------------------------- */ &.tall { margin-top: @form-label-tall-margin-top * @form-label-margin-top-scale-screen-medium; margin-bottom: @form-label-tall-margin-bottom * @form-label-margin-bottom-scale-screen-medium; } &.tall-top { margin-top: @form-label-tall-margin-top * @form-label-margin-top-scale-screen-medium; } &.tall-bottom { margin-bottom: @form-label-tall-margin-bottom * @form-label-margin-bottom-scale-screen-medium; } & when (@form-label-emphasize-enabled) { /* ----------------------------------------------------------------------------- Emphasize ----------------------------------------------------------------------------- */ strong, .emphasize { font-size: @form-label-emphasize-font-size * @form-label-font-size-scale-screen-medium; line-height: @form-label-emphasize-line-height * @form-label-line-height-scale-screen-medium; } } & when (@form-label-mute-enabled) { /* ----------------------------------------------------------------------------- Mute ----------------------------------------------------------------------------- */ .mute { font-size: @form-label-mute-font-size * @form-label-font-size-scale-screen-medium; line-height: @form-label-mute-line-height * @form-label-line-height-scale-screen-medium; } } } } & when (@form-help-block-enabled) and (@form-help-block-scale-screen-medium-enabled) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Help Block -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .form-help-block { margin-top: @form-help-block-margin-top * @form-help-block-margin-top-scale-screen-medium; margin-bottom: @form-help-block-margin-bottom * @form-help-block-margin-bottom-scale-screen-medium; font-size: @form-help-block-font-size * @form-help-block-font-size-scale-screen-medium; line-height: @form-help-block-line-height * @form-help-block-line-height-scale-screen-medium; /* ----------------------------------------------------------------------------- Short ----------------------------------------------------------------------------- */ &.short { margin-top: @form-help-block-short-margin-top * @form-help-block-margin-top-scale-screen-medium; margin-bottom: @form-help-block-short-margin-bottom * @form-help-block-margin-bottom-scale-screen-medium; } &.short-top { margin-top: @form-help-block-short-margin-top * @form-help-block-margin-top-scale-screen-medium; } &.short-bottom { margin-bottom: @form-help-block-short-margin-bottom * @form-help-block-margin-bottom-scale-screen-medium; } /* ----------------------------------------------------------------------------- Tall ----------------------------------------------------------------------------- */ &.tall { margin-top: @form-help-block-tall-margin-top * @form-help-block-margin-top-scale-screen-medium; margin-bottom: @form-help-block-tall-margin-bottom * @form-help-block-margin-bottom-scale-screen-medium; } &.tall-top { margin-top: @form-help-block-tall-margin-top * @form-help-block-margin-top-scale-screen-medium; } &.tall-bottom { margin-bottom: @form-help-block-tall-margin-bottom * @form-help-block-margin-bottom-scale-screen-medium; } & when (@form-help-block-emphasize-enabled) { /* ----------------------------------------------------------------------------- Emphasize ----------------------------------------------------------------------------- */ strong, .emphasize { font-size: @form-help-block-emphasize-font-size * @form-help-block-font-size-scale-screen-medium; line-height: @form-help-block-emphasize-line-height * @form-help-block-line-height-scale-screen-medium; } } & when (@form-help-block-mute-enabled) { /* ----------------------------------------------------------------------------- Mute ----------------------------------------------------------------------------- */ .mute { font-size: @form-help-block-mute-font-size * @form-help-block-font-size-scale-screen-medium; line-height: @form-help-block-mute-line-height * @form-help-block-line-height-scale-screen-medium; } } } } & when (@form-control-enabled) and (@form-control-scale-screen-medium-enabled) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Form Control -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .form-control { /* ----------------------------------------------------------------------------- Form Control Styles ----------------------------------------------------------------------------- */ .form-control-size-variant('', 'screen-medium'); /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Form Control (Select) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ &.form-control-select { /* ----------------------------------------------------------------------------- Select ----------------------------------------------------------------------------- */ select { .form-control-size-variant('', 'screen-medium'); } /* ----------------------------------------------------------------------------- Select Arrows ----------------------------------------------------------------------------- */ &:after { top: floor(((@form-control-height * @form-control-height-scale-screen-medium) * 0.5) - ((@form-control-select-arrow-height * @form-control-height-scale-screen-medium) * 0.5)); right: floor((@form-control-padding-horizontal * @form-control-padding-horizontal-scale-screen-medium)); border-width: floor(@form-control-select-arrow-height * @form-control-height-scale-screen-medium) floor(@form-control-select-arrow-width * @form-control-height-scale-screen-medium * 0.5) 0; } } } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Form Control Group -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .form-control-group { /* ----------------------------------------------------------------------------- Form Control (Nested) ----------------------------------------------------------------------------- */ &.form-control { /* ----------------------------------------------------------------------------- Form Control Add-On ----------------------------------------------------------------------------- */ .form-control-group-add-on { &.form-control-group-add-on-prepend { padding-right: @form-control-padding-horizontal * @form-control-padding-horizontal-scale-screen-medium; } &.form-control-group-add-on-append { padding-left: @form-control-padding-horizontal * @form-control-padding-horizontal-scale-screen-medium; } } & when (@form-control-mini-enabled) { /* ----------------------------------------------------------------------------- Form Control (Mini) ----------------------------------------------------------------------------- */ &.form-control-mini { /* ----------------------------------------------------------------------------- Form Control Add-On ----------------------------------------------------------------------------- */ .form-control-group-add-on { &.form-control-group-add-on-prepend { padding-right: @form-control-mini-padding-horizontal * @form-control-mini-padding-horizontal-scale-screen-medium; } &.form-control-group-add-on-append { padding-left: @form-control-mini-padding-horizontal * @form-control-mini-padding-horizontal-scale-screen-medium; } } } } & when (@form-control-small-enabled) { /* ----------------------------------------------------------------------------- Form Control (Small) ----------------------------------------------------------------------------- */ &.form-control-small { /* ----------------------------------------------------------------------------- Form Control Add-On ----------------------------------------------------------------------------- */ .form-control-group-add-on { &.form-control-group-add-on-prepend { padding-right: @form-control-small-padding-horizontal * @form-control-small-padding-horizontal-scale-screen-medium; } &.form-control-group-add-on-append { padding-left: @form-control-small-padding-horizontal * @form-control-small-padding-horizontal-scale-screen-medium; } } } } & when (@form-control-large-enabled) { /* ----------------------------------------------------------------------------- Form Control (Large) ----------------------------------------------------------------------------- */ &.form-control-large { /* ----------------------------------------------------------------------------- Form Control Add-On ----------------------------------------------------------------------------- */ .form-control-group-add-on { &.form-control-group-add-on-prepend { padding-right: @form-control-large-padding-horizontal * @form-control-large-padding-horizontal-scale-screen-medium; } &.form-control-group-add-on-append { padding-left: @form-control-large-padding-horizontal * @form-control-large-padding-horizontal-scale-screen-medium; } } } } & when (@form-control-jumbo-enabled) { /* ----------------------------------------------------------------------------- Form Control (Jumbo) ----------------------------------------------------------------------------- */ &.form-control-jumbo { /* ----------------------------------------------------------------------------- Form Control Add-On ----------------------------------------------------------------------------- */ .form-control-group-add-on { &.form-control-group-add-on-prepend { padding-right: @form-control-jumbo-padding-horizontal * @form-control-jumbo-padding-horizontal-scale-screen-medium; } &.form-control-group-add-on-append { padding-left: @form-control-jumbo-padding-horizontal * @form-control-jumbo-padding-horizontal-scale-screen-medium; } } } } } } & when (@form-control-mini-enabled) and (@form-control-mini-scale-screen-medium-enabled) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Form Control (Mini) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .form-control.form-control-mini { /* ----------------------------------------------------------------------------- Form Control (Mini) Styles ----------------------------------------------------------------------------- */ .form-control-size-variant('mini', 'screen-medium'); /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Form Control (Select) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ &.form-control-select { /* ----------------------------------------------------------------------------- Select ----------------------------------------------------------------------------- */ select { .form-control-size-variant('mini', 'screen-medium'); } /* ----------------------------------------------------------------------------- Select Arrows ----------------------------------------------------------------------------- */ &:after { top: floor(((@form-control-mini-height * @form-control-mini-height-scale-screen-medium) * 0.5) - ((@form-control-mini-select-arrow-height * @form-control-mini-height-scale-screen-medium) * 0.5)); right: floor((@form-control-mini-padding-horizontal * @form-control-mini-padding-horizontal-scale-screen-medium)); border-width: floor(@form-control-mini-select-arrow-height * @form-control-mini-height-scale-screen-medium) floor(@form-control-mini-select-arrow-width * @form-control-mini-height-scale-screen-medium * 0.5) 0; } } } } & when (@form-control-small-enabled) and (@form-control-small-scale-screen-medium-enabled) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Form Control (Small) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .form-control.form-control-small { /* ----------------------------------------------------------------------------- Form Control (Small) Styles ----------------------------------------------------------------------------- */ .form-control-size-variant('small', 'screen-medium'); /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Form Control (Select) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ &.form-control-select { /* ----------------------------------------------------------------------------- Select ----------------------------------------------------------------------------- */ select { .form-control-size-variant('small', 'screen-medium'); } /* ----------------------------------------------------------------------------- Select Arrows ----------------------------------------------------------------------------- */ &:after { top: floor(((@form-control-small-height * @form-control-small-height-scale-screen-medium) * 0.5) - ((@form-control-small-select-arrow-height * @form-control-small-height-scale-screen-medium) * 0.5)); right: floor((@form-control-small-padding-horizontal * @form-control-small-padding-horizontal-scale-screen-medium)); border-width: floor(@form-control-small-select-arrow-height * @form-control-small-height-scale-screen-medium) floor(@form-control-small-select-arrow-width * @form-control-small-height-scale-screen-medium * 0.5) 0; } } } } & when (@form-control-large-enabled) and (@form-control-large-scale-screen-medium-enabled) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Form Control (Large) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .form-control.form-control-large { /* ----------------------------------------------------------------------------- Form Control (Large) Styles ----------------------------------------------------------------------------- */ .form-control-size-variant('large', 'screen-medium'); /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Form Control (Select) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ &.form-control-select { /* ----------------------------------------------------------------------------- Select ----------------------------------------------------------------------------- */ select { .form-control-size-variant('large', 'screen-medium'); } /* ----------------------------------------------------------------------------- Select Arrows ----------------------------------------------------------------------------- */ &:after { top: floor(((@form-control-large-height * @form-control-large-height-scale-screen-medium) * 0.5) - ((@form-control-large-select-arrow-height * @form-control-large-height-scale-screen-medium) * 0.5)); right: floor((@form-control-large-padding-horizontal * @form-control-large-padding-horizontal-scale-screen-medium)); border-width: floor(@form-control-large-select-arrow-height * @form-control-large-height-scale-screen-medium) floor(@form-control-large-select-arrow-width * @form-control-large-height-scale-screen-medium * 0.5) 0; } } } } & when (@form-control-jumbo-enabled) and (@form-control-jumbo-scale-screen-medium-enabled) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Form Control (Jumbo) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .form-control.form-control-jumbo { /* ----------------------------------------------------------------------------- Form Control (Jumbo) Styles ----------------------------------------------------------------------------- */ .form-control-size-variant('jumbo', 'screen-medium'); /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Form Control (Select) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ &.form-control-select { /* ----------------------------------------------------------------------------- Select ----------------------------------------------------------------------------- */ select { .form-control-size-variant('jumbo', 'screen-medium'); } /* ----------------------------------------------------------------------------- Select Arrows ----------------------------------------------------------------------------- */ &:after { top: floor(((@form-control-jumbo-height * @form-control-jumbo-height-scale-screen-medium) * 0.5) - ((@form-control-jumbo-select-arrow-height * @form-control-jumbo-height-scale-screen-medium) * 0.5)); right: floor((@form-control-jumbo-padding-horizontal * @form-control-jumbo-padding-horizontal-scale-screen-medium)); border-width: floor(@form-control-jumbo-select-arrow-height * @form-control-jumbo-height-scale-screen-medium) floor(@form-control-jumbo-select-arrow-width * @form-control-jumbo-height-scale-screen-medium * 0.5) 0; } } } } } & when (@form-option-enabled) and (@form-option-scale-screen-medium-enabled) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Option -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .checkbox, .radio { margin-top: @form-option-margin-top * @form-option-margin-top-scale-screen-medium; margin-bottom: @form-option-margin-bottom * @form-option-margin-bottom-scale-screen-medium; /* ----------------------------------------------------------------------------- Short ----------------------------------------------------------------------------- */ &.short { margin-top: @form-option-short-margin-top * @form-option-margin-top-scale-screen-medium; margin-bottom: @form-option-short-margin-bottom * @form-option-margin-bottom-scale-screen-medium; } &.short-top { margin-top: @form-option-short-margin-top * @form-option-margin-top-scale-screen-medium; } &.short-bottom { margin-bottom: @form-option-short-margin-bottom * @form-option-margin-bottom-scale-screen-medium; } /* ----------------------------------------------------------------------------- Tall ----------------------------------------------------------------------------- */ &.tall { margin-top: @form-option-tall-margin-top * @form-option-margin-top-scale-screen-medium; margin-bottom: @form-option-tall-margin-bottom * @form-option-margin-bottom-scale-screen-medium; } &.tall-top { margin-top: @form-option-tall-margin-top * @form-option-margin-top-scale-screen-medium; } &.tall-bottom { margin-bottom: @form-option-tall-margin-bottom * @form-option-margin-bottom-scale-screen-medium; } /* ----------------------------------------------------------------------------- Label ----------------------------------------------------------------------------- */ label { font-size: @form-option-font-size * @form-option-font-size-scale-screen-medium; line-height: @form-option-line-height * @form-option-line-height-scale-screen-medium; padding-left: @form-option-padding-horizontal-screen-medium + @form-option-checkbox-height; input[type="checkbox"] { top: floor(((@form-option-line-height * @form-option-line-height-scale-screen-medium) - @form-option-checkbox-height) / 2); } input[type="radio"] { top: floor(((@form-option-line-height * @form-option-line-height-scale-screen-medium) - @form-option-radio-height) / 2); } & when (@form-option-emphasize-enabled) { /* ----------------------------------------------------------------------------- Emphasize ----------------------------------------------------------------------------- */ strong, .emphasize { font-size: @form-option-emphasize-font-size * @form-option-font-size-scale-screen-medium; line-height: @form-option-emphasize-line-height * @form-option-line-height-scale-screen-medium; } } & when (@form-option-mute-enabled) { /* ----------------------------------------------------------------------------- Mute ----------------------------------------------------------------------------- */ .mute { font-size: @form-option-mute-font-size * @form-option-font-size-scale-screen-medium; line-height: @form-option-mute-line-height * @form-option-line-height-scale-screen-medium; } } } } } & when (@form-group-enabled) and (@form-group-scale-screen-medium-enabled) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Form Group -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .form-group { margin-top: @form-group-margin-top * @form-group-margin-top-scale-screen-medium; margin-bottom: @form-group-margin-bottom * @form-group-margin-bottom-scale-screen-medium; /* ----------------------------------------------------------------------------- Short ----------------------------------------------------------------------------- */ &.short { margin-top: @form-group-short-margin-top * @form-group-margin-top-scale-screen-medium; margin-bottom: @form-group-short-margin-bottom * @form-group-margin-bottom-scale-screen-medium; } &.short-top { margin-top: @form-group-short-margin-top * @form-group-margin-top-scale-screen-medium; } &.short-bottom { margin-bottom: @form-group-short-margin-bottom * @form-group-margin-bottom-scale-screen-medium; } /* ----------------------------------------------------------------------------- Tall ----------------------------------------------------------------------------- */ &.tall { margin-top: @form-group-tall-margin-top * @form-group-margin-top-scale-screen-medium; margin-bottom: @form-group-tall-margin-bottom * @form-group-margin-bottom-scale-screen-medium; } &.tall-top { margin-top: @form-group-tall-margin-top * @form-group-margin-top-scale-screen-medium; } &.tall-bottom { margin-bottom: @form-group-tall-margin-bottom * @form-group-margin-bottom-scale-screen-medium; } } } } } & when (@form-enabled) and (@screen-large-enabled) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Size: Large (@screen-large) and above -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ @media (min-width: @screen-large) { & when (@form-scale-screen-large-enabled) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Form -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ form { margin-top: @form-margin-top * @form-margin-top-scale-screen-large; margin-bottom: @form-margin-bottom * @form-margin-bottom-scale-screen-large; /* ----------------------------------------------------------------------------- Short ----------------------------------------------------------------------------- */ &.short { margin-top: @form-short-margin-top * @form-margin-top-scale-screen-large; margin-bottom: @form-short-margin-bottom * @form-margin-bottom-scale-screen-large; } &.short-top { margin-top: @form-short-margin-top * @form-margin-top-scale-screen-large; } &.short-bottom { margin-bottom: @form-short-margin-bottom * @form-margin-bottom-scale-screen-large; } /* ----------------------------------------------------------------------------- Tall ----------------------------------------------------------------------------- */ &.tall { margin-top: @form-tall-margin-top * @form-margin-top-scale-screen-large; margin-bottom: @form-tall-margin-bottom * @form-margin-bottom-scale-screen-large; } &.tall-top { margin-top: @form-tall-margin-top * @form-margin-top-scale-screen-large; } &.tall-bottom { margin-bottom: @form-tall-margin-bottom * @form-margin-bottom-scale-screen-large; } } } & when (@form-label-enabled) and (@form-label-scale-screen-large-enabled) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Label -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ label { margin-top: @form-label-margin-top * @form-label-margin-top-scale-screen-large; margin-bottom: @form-label-margin-bottom * @form-label-margin-bottom-scale-screen-large; font-size: @form-label-font-size * @form-label-font-size-scale-screen-large; line-height: @form-label-line-height * @form-label-line-height-scale-screen-large; /* ----------------------------------------------------------------------------- Short ----------------------------------------------------------------------------- */ &.short { margin-top: @form-label-short-margin-top * @form-label-margin-top-scale-screen-large; margin-bottom: @form-label-short-margin-bottom * @form-label-margin-bottom-scale-screen-large; } &.short-top { margin-top: @form-label-short-margin-top * @form-label-margin-top-scale-screen-large; } &.short-bottom { margin-bottom: @form-label-short-margin-bottom * @form-label-margin-bottom-scale-screen-large; } /* ----------------------------------------------------------------------------- Tall ----------------------------------------------------------------------------- */ &.tall { margin-top: @form-label-tall-margin-top * @form-label-margin-top-scale-screen-large; margin-bottom: @form-label-tall-margin-bottom * @form-label-margin-bottom-scale-screen-large; } &.tall-top { margin-top: @form-label-tall-margin-top * @form-label-margin-top-scale-screen-large; } &.tall-bottom { margin-bottom: @form-label-tall-margin-bottom * @form-label-margin-bottom-scale-screen-large; } & when (@form-label-emphasize-enabled) { /* ----------------------------------------------------------------------------- Emphasize ----------------------------------------------------------------------------- */ strong, .emphasize { font-size: @form-label-emphasize-font-size * @form-label-font-size-scale-screen-large; line-height: @form-label-emphasize-line-height * @form-label-line-height-scale-screen-large; } } & when (@form-label-mute-enabled) { /* ----------------------------------------------------------------------------- Mute ----------------------------------------------------------------------------- */ .mute { font-size: @form-label-mute-font-size * @form-label-font-size-scale-screen-large; line-height: @form-label-mute-line-height * @form-label-line-height-scale-screen-large; } } } } & when (@form-help-block-enabled) and (@form-help-block-scale-screen-large-enabled) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Help Block -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .form-help-block { margin-top: @form-help-block-margin-top * @form-help-block-margin-top-scale-screen-large; margin-bottom: @form-help-block-margin-bottom * @form-help-block-margin-bottom-scale-screen-large; font-size: @form-help-block-font-size * @form-help-block-font-size-scale-screen-large; line-height: @form-help-block-line-height * @form-help-block-line-height-scale-screen-large; /* ----------------------------------------------------------------------------- Short ----------------------------------------------------------------------------- */ &.short { margin-top: @form-help-block-short-margin-top * @form-help-block-margin-top-scale-screen-large; margin-bottom: @form-help-block-short-margin-bottom * @form-help-block-margin-bottom-scale-screen-large; } &.short-top { margin-top: @form-help-block-short-margin-top * @form-help-block-margin-top-scale-screen-large; } &.short-bottom { margin-bottom: @form-help-block-short-margin-bottom * @form-help-block-margin-bottom-scale-screen-large; } /* ----------------------------------------------------------------------------- Tall ----------------------------------------------------------------------------- */ &.tall { margin-top: @form-help-block-tall-margin-top * @form-help-block-margin-top-scale-screen-large; margin-bottom: @form-help-block-tall-margin-bottom * @form-help-block-margin-bottom-scale-screen-large; } &.tall-top { margin-top: @form-help-block-tall-margin-top * @form-help-block-margin-top-scale-screen-large; } &.tall-bottom { margin-bottom: @form-help-block-tall-margin-bottom * @form-help-block-margin-bottom-scale-screen-large; } & when (@form-help-block-emphasize-enabled) { /* ----------------------------------------------------------------------------- Emphasize ----------------------------------------------------------------------------- */ strong, .emphasize { font-size: @form-help-block-emphasize-font-size * @form-help-block-font-size-scale-screen-large; line-height: @form-help-block-emphasize-line-height * @form-help-block-line-height-scale-screen-large; } } & when (@form-help-block-mute-enabled) { /* ----------------------------------------------------------------------------- Mute ----------------------------------------------------------------------------- */ .mute { font-size: @form-help-block-mute-font-size * @form-help-block-font-size-scale-screen-large; line-height: @form-help-block-mute-line-height * @form-help-block-line-height-scale-screen-large; } } } } & when (@form-control-enabled) and (@form-control-scale-screen-large-enabled) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Form Control -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .form-control { /* ----------------------------------------------------------------------------- Form Control Styles ----------------------------------------------------------------------------- */ .form-control-size-variant('', 'screen-large'); /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Form Control (Select) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ &.form-control-select { /* ----------------------------------------------------------------------------- Select ----------------------------------------------------------------------------- */ select { .form-control-size-variant('', 'screen-large'); } /* ----------------------------------------------------------------------------- Select Arrows ----------------------------------------------------------------------------- */ &:after { top: floor(((@form-control-height * @form-control-height-scale-screen-large) * 0.5) - ((@form-control-select-arrow-height * @form-control-height-scale-screen-large) * 0.5)); right: floor((@form-control-padding-horizontal * @form-control-padding-horizontal-scale-screen-large)); border-width: floor(@form-control-select-arrow-height * @form-control-height-scale-screen-large) floor(@form-control-select-arrow-width * @form-control-height-scale-screen-large * 0.5) 0; } } } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Form Control Group -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .form-control-group { /* ----------------------------------------------------------------------------- Form Control (Nested) ----------------------------------------------------------------------------- */ &.form-control { /* ----------------------------------------------------------------------------- Form Control Add-On ----------------------------------------------------------------------------- */ .form-control-group-add-on { &.form-control-group-add-on-prepend { padding-right: @form-control-padding-horizontal * @form-control-padding-horizontal-scale-screen-large; } &.form-control-group-add-on-append { padding-left: @form-control-padding-horizontal * @form-control-padding-horizontal-scale-screen-large; } } & when (@form-control-mini-enabled) { /* ----------------------------------------------------------------------------- Form Control (Mini) ----------------------------------------------------------------------------- */ &.form-control-mini { /* ----------------------------------------------------------------------------- Form Control Add-On ----------------------------------------------------------------------------- */ .form-control-group-add-on { &.form-control-group-add-on-prepend { padding-right: @form-control-mini-padding-horizontal * @form-control-mini-padding-horizontal-scale-screen-large; } &.form-control-group-add-on-append { padding-left: @form-control-mini-padding-horizontal * @form-control-mini-padding-horizontal-scale-screen-large; } } } } & when (@form-control-small-enabled) { /* ----------------------------------------------------------------------------- Form Control (small) ----------------------------------------------------------------------------- */ &.form-control-small { /* ----------------------------------------------------------------------------- Form Control Add-On ----------------------------------------------------------------------------- */ .form-control-group-add-on { &.form-control-group-add-on-prepend { padding-right: @form-control-small-padding-horizontal * @form-control-small-padding-horizontal-scale-screen-large; } &.form-control-group-add-on-append { padding-left: @form-control-small-padding-horizontal * @form-control-small-padding-horizontal-scale-screen-large; } } } } & when (@form-control-large-enabled) { /* ----------------------------------------------------------------------------- Form Control (large) ----------------------------------------------------------------------------- */ &.form-control-large { /* ----------------------------------------------------------------------------- Form Control Add-On ----------------------------------------------------------------------------- */ .form-control-group-add-on { &.form-control-group-add-on-prepend { padding-right: @form-control-large-padding-horizontal * @form-control-large-padding-horizontal-scale-screen-large; } &.form-control-group-add-on-append { padding-left: @form-control-large-padding-horizontal * @form-control-large-padding-horizontal-scale-screen-large; } } } } & when (@form-control-jumbo-enabled) { /* ----------------------------------------------------------------------------- Form Control (jumbo) ----------------------------------------------------------------------------- */ &.form-control-jumbo { /* ----------------------------------------------------------------------------- Form Control Add-On ----------------------------------------------------------------------------- */ .form-control-group-add-on { &.form-control-group-add-on-prepend { padding-right: @form-control-jumbo-padding-horizontal * @form-control-jumbo-padding-horizontal-scale-screen-large; } &.form-control-group-add-on-append { padding-left: @form-control-jumbo-padding-horizontal * @form-control-jumbo-padding-horizontal-scale-screen-large; } } } } } } & when (@form-control-mini-enabled) and (@form-control-mini-scale-screen-large-enabled) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Form Control (Mini) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .form-control.form-control-mini { /* ----------------------------------------------------------------------------- Form Control (Mini) Styles ----------------------------------------------------------------------------- */ .form-control-size-variant('mini', 'screen-large'); /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Form Control (Select) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ &.form-control-select { /* ----------------------------------------------------------------------------- Select ----------------------------------------------------------------------------- */ select { .form-control-size-variant('mini', 'screen-large'); } /* ----------------------------------------------------------------------------- Select Arrows ----------------------------------------------------------------------------- */ &:after { top: floor(((@form-control-mini-height * @form-control-mini-height-scale-screen-large) * 0.5) - ((@form-control-mini-select-arrow-height * @form-control-mini-height-scale-screen-large) * 0.5)); right: floor((@form-control-mini-padding-horizontal * @form-control-mini-padding-horizontal-scale-screen-large)); border-width: floor(@form-control-mini-select-arrow-height * @form-control-mini-height-scale-screen-large) floor(@form-control-mini-select-arrow-width * @form-control-mini-height-scale-screen-large * 0.5) 0; } } } } & when (@form-control-small-enabled) and (@form-control-small-scale-screen-large-enabled) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Form Control (Small) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .form-control.form-control-small { /* ----------------------------------------------------------------------------- Form Control (Small) Styles ----------------------------------------------------------------------------- */ .form-control-size-variant('small', 'screen-large'); /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Form Control (Select) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ &.form-control-select { /* ----------------------------------------------------------------------------- Select ----------------------------------------------------------------------------- */ select { .form-control-size-variant('small', 'screen-large'); } /* ----------------------------------------------------------------------------- Select Arrows ----------------------------------------------------------------------------- */ &:after { top: floor(((@form-control-small-height * @form-control-small-height-scale-screen-large) * 0.5) - ((@form-control-small-select-arrow-height * @form-control-small-height-scale-screen-large) * 0.5)); right: floor((@form-control-small-padding-horizontal * @form-control-small-padding-horizontal-scale-screen-large)); border-width: floor(@form-control-small-select-arrow-height * @form-control-small-height-scale-screen-large) floor(@form-control-small-select-arrow-width * @form-control-small-height-scale-screen-large * 0.5) 0; } } } } & when (@form-control-large-enabled) and (@form-control-large-scale-screen-large-enabled) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Form Control (Large) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .form-control.form-control-large { /* ----------------------------------------------------------------------------- Form Control (Large) Styles ----------------------------------------------------------------------------- */ .form-control-size-variant('large', 'screen-large'); /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Form Control (Select) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ &.form-control-select { /* ----------------------------------------------------------------------------- Select ----------------------------------------------------------------------------- */ select { .form-control-size-variant('large', 'screen-large'); } /* ----------------------------------------------------------------------------- Select Arrows ----------------------------------------------------------------------------- */ &:after { top: floor(((@form-control-large-height * @form-control-large-height-scale-screen-large) * 0.5) - ((@form-control-large-select-arrow-height * @form-control-large-height-scale-screen-large) * 0.5)); right: floor((@form-control-large-padding-horizontal * @form-control-large-padding-horizontal-scale-screen-large)); border-width: floor(@form-control-large-select-arrow-height * @form-control-large-height-scale-screen-large) floor(@form-control-large-select-arrow-width * @form-control-large-height-scale-screen-large * 0.5) 0; } } } } & when (@form-control-jumbo-enabled) and (@form-control-jumbo-scale-screen-large-enabled) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Form Control (Jumbo) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .form-control.form-control-jumbo { /* ----------------------------------------------------------------------------- Form Control (Jumbo) Styles ----------------------------------------------------------------------------- */ .form-control-size-variant('jumbo', 'screen-large'); /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Form Control (Select) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ &.form-control-select { /* ----------------------------------------------------------------------------- Select ----------------------------------------------------------------------------- */ select { .form-control-size-variant('jumbo', 'screen-large'); } /* ----------------------------------------------------------------------------- Select Arrows ----------------------------------------------------------------------------- */ &:after { top: floor(((@form-control-jumbo-height * @form-control-jumbo-height-scale-screen-large) * 0.5) - ((@form-control-jumbo-select-arrow-height * @form-control-jumbo-height-scale-screen-large) * 0.5)); right: floor((@form-control-jumbo-padding-horizontal * @form-control-jumbo-padding-horizontal-scale-screen-large)); border-width: floor(@form-control-jumbo-select-arrow-height * @form-control-jumbo-height-scale-screen-large) floor(@form-control-jumbo-select-arrow-width * @form-control-jumbo-height-scale-screen-large * 0.5) 0; } } } } } & when (@form-option-enabled) and (@form-option-scale-screen-large-enabled) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Option -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .checkbox, .radio { margin-top: @form-option-margin-top * @form-option-margin-top-scale-screen-large; margin-bottom: @form-option-margin-bottom * @form-option-margin-bottom-scale-screen-large; /* ----------------------------------------------------------------------------- Short ----------------------------------------------------------------------------- */ &.short { margin-top: @form-option-short-margin-top * @form-option-margin-top-scale-screen-large; margin-bottom: @form-option-short-margin-bottom * @form-option-margin-bottom-scale-screen-large; } &.short-top { margin-top: @form-option-short-margin-top * @form-option-margin-top-scale-screen-large; } &.short-bottom { margin-bottom: @form-option-short-margin-bottom * @form-option-margin-bottom-scale-screen-large; } /* ----------------------------------------------------------------------------- Tall ----------------------------------------------------------------------------- */ &.tall { margin-top: @form-option-tall-margin-top * @form-option-margin-top-scale-screen-large; margin-bottom: @form-option-tall-margin-bottom * @form-option-margin-bottom-scale-screen-large; } &.tall-top { margin-top: @form-option-tall-margin-top * @form-option-margin-top-scale-screen-large; } &.tall-bottom { margin-bottom: @form-option-tall-margin-bottom * @form-option-margin-bottom-scale-screen-large; } /* ----------------------------------------------------------------------------- Label ----------------------------------------------------------------------------- */ label { font-size: @form-option-font-size * @form-option-font-size-scale-screen-large; line-height: @form-option-line-height * @form-option-line-height-scale-screen-large; padding-left: @form-option-padding-horizontal-screen-large + @form-option-checkbox-height; input[type="checkbox"] { top: floor(((@form-option-line-height * @form-option-line-height-scale-screen-large) - @form-option-checkbox-height) / 2); } input[type="radio"] { top: floor(((@form-option-line-height * @form-option-line-height-scale-screen-large) - @form-option-radio-height) / 2); } & when (@form-option-emphasize-enabled) { /* ----------------------------------------------------------------------------- Emphasize ----------------------------------------------------------------------------- */ strong, .emphasize { font-size: @form-option-emphasize-font-size * @form-option-font-size-scale-screen-large; line-height: @form-option-emphasize-line-height * @form-option-line-height-scale-screen-large; } } & when (@form-option-mute-enabled) { /* ----------------------------------------------------------------------------- Mute ----------------------------------------------------------------------------- */ .mute { font-size: @form-option-mute-font-size * @form-option-font-size-scale-screen-large; line-height: @form-option-mute-line-height * @form-option-line-height-scale-screen-large; } } } } } & when (@form-group-enabled) and (@form-group-scale-screen-large-enabled) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Form Group -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .form-group { margin-top: @form-group-margin-top * @form-group-margin-top-scale-screen-large; margin-bottom: @form-group-margin-bottom * @form-group-margin-bottom-scale-screen-large; /* ----------------------------------------------------------------------------- Short ----------------------------------------------------------------------------- */ &.short { margin-top: @form-group-short-margin-top * @form-group-margin-top-scale-screen-large; margin-bottom: @form-group-short-margin-bottom * @form-group-margin-bottom-scale-screen-large; } &.short-top { margin-top: @form-group-short-margin-top * @form-group-margin-top-scale-screen-large; } &.short-bottom { margin-bottom: @form-group-short-margin-bottom * @form-group-margin-bottom-scale-screen-large; } /* ----------------------------------------------------------------------------- Tall ----------------------------------------------------------------------------- */ &.tall { margin-top: @form-group-tall-margin-top * @form-group-margin-top-scale-screen-large; margin-bottom: @form-group-tall-margin-bottom * @form-group-margin-bottom-scale-screen-large; } &.tall-top { margin-top: @form-group-tall-margin-top * @form-group-margin-top-scale-screen-large; } &.tall-bottom { margin-bottom: @form-group-tall-margin-bottom * @form-group-margin-bottom-scale-screen-large; } } } } } & when (@form-enabled) and (@screen-resolution-2x-enabled) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Resolution: 2x -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ @media only screen and (-webkit-min-device-pixel-ratio: 2) { } } & when (@form-enabled) and (@screen-resolution-3x-enabled) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Resolution: 3x -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ @media only screen and (-webkit-min-device-pixel-ratio: 3) { } }