You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
518 lines
12 KiB
518 lines
12 KiB
/* ------------------------------------------------------------------------------ |
|
* |
|
* # Buttons component |
|
* |
|
* Overrides for buttons bootstrap component |
|
* |
|
* Version: 1.1 |
|
* Latest update: Mar 10, 2016 |
|
* |
|
* ---------------------------------------------------------------------------- */ |
|
|
|
|
|
// Base styles |
|
// ------------------------- |
|
|
|
.btn { |
|
position: relative; |
|
|
|
// Remove outline |
|
&, |
|
&:active, |
|
&.active { |
|
&:focus, |
|
&.focus { |
|
outline: 0; |
|
} |
|
} |
|
|
|
// Firefox fix |
|
&::-moz-focus-inner { |
|
border: 0; |
|
} |
|
|
|
// Hover state |
|
&:hover, |
|
&:focus, |
|
&.focus { |
|
.box-shadow(0 0 0 100px fade(#000, 5%) inset); // Use box shadow instead of color for all buttons - contextual and custom |
|
} |
|
|
|
// Active state |
|
&:active, |
|
&.active { |
|
.box-shadow(0 0 0 100px fade(#000, 10%) inset); // The same as above - no color changes, only box shadow |
|
} |
|
|
|
// Custom color buttons |
|
&[class*=bg-] { |
|
&:hover, |
|
&:focus, |
|
&.focus { |
|
color: #fff; |
|
} |
|
} |
|
|
|
// Correct line heights in smaller text sizes |
|
&.text-size-small { |
|
line-height: @line-height-small; |
|
} |
|
&.text-size-mini { |
|
line-height: @line-height-mini; |
|
} |
|
} |
|
|
|
|
|
// Button styling |
|
// ------------------------- |
|
|
|
// Default button |
|
.btn-default { |
|
|
|
// Hover/focus states |
|
&:hover, |
|
&:focus, |
|
&.focus { |
|
.box-shadow(0 0 0 100px fade(#000, 1%) inset); // Use box shadow instead of color for all buttons - contextual and custom |
|
} |
|
|
|
// Active state |
|
&:active, |
|
&.active { |
|
.box-shadow(0 0 0 100px fade(#000, 3%) inset); // The same as above - no color changes, only box shadow |
|
} |
|
} |
|
|
|
// Labeled button |
|
.btn-labeled { |
|
padding-left: (((@line-height-computed - @icon-font-size + @padding-base-vertical - 1) * 2) + @icon-font-size) + @padding-base-horizontal; |
|
|
|
// Default button |
|
&.btn-default { |
|
> b { |
|
background-color: @brand-primary; |
|
color: #fff; |
|
} |
|
} |
|
|
|
// Icon |
|
> b { |
|
position: absolute; |
|
top: -1px; |
|
left: -1px; |
|
background-color: fade(#000, 15%); |
|
display: block; |
|
line-height: 1; |
|
padding: ((@line-height-computed - @icon-font-size + @padding-base-vertical - 1)); |
|
.border-left-radius(@border-radius-base); |
|
|
|
// Center icon vertically |
|
> i { |
|
top: 0; |
|
} |
|
} |
|
|
|
// Right icon |
|
&.btn-labeled-right { |
|
padding-left: @padding-base-horizontal; |
|
padding-right: (((@line-height-computed - @icon-font-size + @padding-base-vertical - 1) * 2) + @icon-font-size) + @padding-base-horizontal; |
|
|
|
> b { |
|
left: auto; |
|
right: -1px; |
|
.border-left-radius(0); |
|
.border-right-radius(@border-radius-base); |
|
} |
|
} |
|
|
|
// Extra large |
|
&.btn-xlg { |
|
padding-left: (((@line-height-computed - @icon-font-size + @padding-xlarge-vertical - 1) * 2) + @icon-font-size) + @padding-xlarge-horizontal; |
|
|
|
> b { |
|
padding: ((@line-height-computed - @icon-font-size + @padding-xlarge-vertical - 1)); |
|
} |
|
|
|
&.btn-labeled-right { |
|
padding-left: @padding-xlarge-horizontal; |
|
padding-right: (((@line-height-computed - @icon-font-size + @padding-xlarge-vertical - 1) * 2) + @icon-font-size) + @padding-xlarge-horizontal; |
|
} |
|
} |
|
|
|
// Large |
|
&.btn-lg { |
|
padding-left: (((@line-height-computed - @icon-font-size + @padding-large-vertical - 1) * 2) + @icon-font-size) + @padding-large-horizontal; |
|
|
|
> b { |
|
padding: ((@line-height-computed - @icon-font-size + @padding-large-vertical - 1)); |
|
} |
|
|
|
&.btn-labeled-right { |
|
padding-left: @padding-large-horizontal; |
|
padding-right: (((@line-height-computed - @icon-font-size + @padding-large-vertical - 1) * 2) + @icon-font-size) + @padding-large-horizontal; |
|
} |
|
} |
|
|
|
// Small |
|
&.btn-sm { |
|
padding-left: (((@line-height-computed - @icon-font-size + @padding-small-vertical - 1) * 2) + @icon-font-size) + @padding-small-horizontal; |
|
|
|
> b { |
|
padding: ((@line-height-computed - @icon-font-size + @padding-small-vertical - 1)); |
|
} |
|
|
|
&.btn-labeled-right { |
|
padding-left: @padding-small-horizontal; |
|
padding-right: (((@line-height-computed - @icon-font-size + @padding-small-vertical - 1) * 2) + @icon-font-size) + @padding-small-horizontal; |
|
} |
|
} |
|
|
|
// Mini |
|
&.btn-xs { |
|
padding-left: (((@line-height-computed - @icon-font-size + @padding-xs-vertical - 1) * 2) + @icon-font-size) + @padding-xs-horizontal; |
|
|
|
> b { |
|
padding: ((@line-height-computed - @icon-font-size + @padding-xs-vertical - 1)); |
|
} |
|
|
|
&.btn-labeled-right { |
|
padding-left: @padding-xs-horizontal; |
|
padding-left: (((@line-height-computed - @icon-font-size + @padding-xs-vertical - 1) * 2) + @icon-font-size) + @padding-xs-horizontal; |
|
} |
|
} |
|
} |
|
|
|
// Flat button |
|
.btn-flat { |
|
border-width: 2px; |
|
background-color: transparent; |
|
|
|
// Hover/focus states |
|
&:hover, |
|
&:focus { |
|
.opacity(0.8); |
|
.box-shadow(none); |
|
} |
|
|
|
// Active state |
|
&:active { |
|
.opacity(0.95); |
|
} |
|
|
|
// Remove shadow in open dropdown button |
|
.btn-group.open .dropdown-toggle& { |
|
.box-shadow(none); |
|
} |
|
} |
|
|
|
// Icon button |
|
.btn-icon { |
|
padding-left: ((@line-height-computed - @icon-font-size + @padding-base-vertical - 1) - 1); |
|
padding-right: ((@line-height-computed - @icon-font-size + @padding-base-vertical - 1) - 1); |
|
|
|
&.icon-2x { |
|
padding-left: @padding-base-vertical; |
|
padding-right: @padding-base-vertical; |
|
|
|
> i { |
|
font-size: (@icon-font-size * 2); |
|
top: 0; |
|
} |
|
|
|
// Sizing |
|
&.btn-xlg { |
|
padding-left: @padding-xlarge-vertical; |
|
padding-right: @padding-xlarge-vertical; |
|
} |
|
&.btn-lg { |
|
padding-left: @padding-large-vertical; |
|
padding-right: @padding-large-vertical; |
|
} |
|
&.btn-sm { |
|
padding-left: @padding-small-vertical; |
|
padding-right: @padding-small-vertical; |
|
} |
|
&.btn-xs { |
|
padding-left: @padding-xs-vertical; |
|
padding-right: @padding-xs-vertical; |
|
} |
|
} |
|
|
|
// Sizing |
|
&.btn-xlg, |
|
.input-group-xlg > .input-group-btn > & { |
|
padding-left: ((@line-height-computed - @icon-font-size + @padding-xlarge-vertical - 1) - 1); |
|
padding-right: ((@line-height-computed - @icon-font-size + @padding-xlarge-vertical - 1) - 1); |
|
} |
|
&.btn-lg, |
|
.input-group-lg > .input-group-btn > & { |
|
padding-left: ((@line-height-computed - @icon-font-size + @padding-large-vertical - 1) - 1); |
|
padding-right: ((@line-height-computed - @icon-font-size + @padding-large-vertical - 1) - 1); |
|
} |
|
&.btn-sm, |
|
.input-group-sm > .input-group-btn > & { |
|
padding-left: ((@line-height-computed - @icon-font-size + @padding-small-vertical - 1) - 1); |
|
padding-right: ((@line-height-computed - @icon-font-size + @padding-small-vertical - 1) - 1); |
|
} |
|
&.btn-xs, |
|
.input-group-xs > .input-group-btn > .btn& { |
|
padding-left: ((@line-height-computed - @icon-font-size + @padding-xs-vertical - 1) - 1); |
|
padding-right: ((@line-height-computed - @icon-font-size + @padding-xs-vertical - 1) - 1); |
|
} |
|
} |
|
|
|
// Float button |
|
.btn-float { |
|
padding: @btn-float-padding; |
|
white-space: normal; |
|
border-radius: @border-radius-base; |
|
|
|
// Transparent button |
|
&.btn-link { |
|
padding: (@btn-float-padding - 5); |
|
} |
|
|
|
// Icon |
|
i { |
|
display: block; |
|
margin: 0; |
|
top: 0; |
|
} |
|
|
|
// Image |
|
img { |
|
border-radius: @border-radius-base; |
|
} |
|
|
|
// Text |
|
> span { |
|
display: block; |
|
padding-top: (@line-height-computed / 2); |
|
margin-bottom: -((@line-height-computed / 2) - 4); |
|
} |
|
|
|
// Double icon size in large button |
|
&.btn-float-lg i { |
|
font-size: (@icon-font-size * 2); |
|
} |
|
} |
|
|
|
// Link button |
|
.btn-link { |
|
color: @text-color; |
|
|
|
// Remove shadows |
|
&, |
|
&:hover, |
|
&:focus, |
|
&:active { |
|
.box-shadow(none); |
|
} |
|
} |
|
|
|
// Rounded button |
|
.btn-rounded { |
|
&, |
|
&.btn-labeled > b, |
|
img { |
|
border-radius: 100px; |
|
} |
|
} |
|
|
|
// Block button |
|
.btn-block + .btn-block { |
|
margin-top: (@line-height-computed / 2); |
|
} |
|
|
|
|
|
// Contextual classes. |
|
// Override all styles |
|
// to avoid BS mixin changes |
|
// ------------------------- |
|
|
|
// Default appears as lighter grey |
|
.btn-default { |
|
&:focus, |
|
&.focus, |
|
&:hover { |
|
background-color: @btn-default-bg; |
|
border-color: @btn-default-border; |
|
} |
|
&:active, |
|
&.active, |
|
.open > .dropdown-toggle& { |
|
background-color: @btn-default-bg; |
|
border-color: @btn-default-border; |
|
|
|
&:hover, |
|
&:focus, |
|
&.focus { |
|
background-color: @btn-default-bg; |
|
border-color: @btn-default-border; |
|
} |
|
} |
|
&.disabled { |
|
.box-shadow(none); |
|
} |
|
} |
|
|
|
// Primary appears as blue |
|
.btn-primary { |
|
&:focus, |
|
&.focus, |
|
&:hover { |
|
background-color: @btn-primary-bg; |
|
border-color: @btn-primary-border; |
|
} |
|
&:active, |
|
&.active, |
|
.open > .dropdown-toggle& { |
|
background-color: @btn-primary-bg; |
|
border-color: @btn-primary-border; |
|
|
|
&:hover, |
|
&:focus, |
|
&.focus { |
|
background-color: @btn-primary-bg; |
|
border-color: @btn-primary-border; |
|
} |
|
} |
|
&.disabled { |
|
.box-shadow(none); |
|
} |
|
} |
|
|
|
// Success appears as green |
|
.btn-success { |
|
&:focus, |
|
&.focus, |
|
&:hover { |
|
background-color: @btn-success-bg; |
|
border-color: @btn-success-border; |
|
} |
|
&:active, |
|
&.active, |
|
.open > .dropdown-toggle& { |
|
background-color: @btn-success-bg; |
|
border-color: @btn-success-border; |
|
|
|
&:hover, |
|
&:focus, |
|
&.focus { |
|
background-color: @btn-success-bg; |
|
border-color: @btn-success-border; |
|
} |
|
} |
|
&.disabled { |
|
.box-shadow(none); |
|
} |
|
} |
|
|
|
// Info appears as light blue |
|
.btn-info { |
|
&:focus, |
|
&.focus, |
|
&:hover { |
|
background-color: @btn-info-bg; |
|
border-color: @btn-info-border; |
|
} |
|
&:active, |
|
&.active, |
|
.open > .dropdown-toggle& { |
|
background-color: @btn-info-bg; |
|
border-color: @btn-info-border; |
|
|
|
&:hover, |
|
&:focus, |
|
&.focus { |
|
background-color: @btn-info-bg; |
|
border-color: @btn-info-border; |
|
} |
|
} |
|
&.disabled { |
|
.box-shadow(none); |
|
} |
|
} |
|
|
|
// Warning appears as orange |
|
.btn-warning { |
|
&:focus, |
|
&.focus, |
|
&:hover { |
|
background-color: @btn-warning-bg; |
|
border-color: @btn-warning-border; |
|
} |
|
&:active, |
|
&.active, |
|
.open > .dropdown-toggle& { |
|
background-color: @btn-warning-bg; |
|
border-color: @btn-warning-border; |
|
|
|
&:hover, |
|
&:focus, |
|
&.focus { |
|
background-color: @btn-warning-bg; |
|
border-color: @btn-warning-border; |
|
} |
|
} |
|
&.disabled { |
|
.box-shadow(none); |
|
} |
|
} |
|
|
|
// Danger and error appear as red |
|
.btn-danger { |
|
&:focus, |
|
&.focus, |
|
&:hover { |
|
background-color: @btn-danger-bg; |
|
border-color: @btn-danger-border; |
|
} |
|
&:active, |
|
&.active, |
|
.open > .dropdown-toggle& { |
|
background-color: @btn-danger-bg; |
|
border-color: @btn-danger-border; |
|
|
|
&:hover, |
|
&:focus, |
|
&.focus { |
|
background-color: @btn-danger-bg; |
|
border-color: @btn-danger-border; |
|
} |
|
} |
|
&.disabled { |
|
.box-shadow(none); |
|
} |
|
} |
|
|
|
|
|
// Button size overrides |
|
// ------------------------- |
|
|
|
// XLarge button |
|
.btn-xlg { |
|
.button-size(@padding-xlarge-vertical; @padding-xlarge-horizontal; @font-size-large; @line-height-large; @border-radius-base); |
|
|
|
&.btn-rounded { |
|
border-radius: 100px; |
|
} |
|
} |
|
|
|
// Large button |
|
.btn-lg { |
|
border-radius: @border-radius-base; |
|
|
|
&.btn-rounded { |
|
border-radius: 100px; |
|
} |
|
} |
|
|
|
// Border radius override |
|
.btn-sm:not(.btn-rounded), |
|
.btn-group-sm > .btn:not(.btn-rounded), |
|
.btn-xs:not(.btn-rounded), |
|
.btn-group-xs > .btn:not(.btn-rounded) { |
|
border-radius: @border-radius-base; |
|
} |
|
|
|
|