diff options
author | John Postlethwait <john.postlethwait@nebula.com> | 2012-05-11 23:37:35 -0700 |
---|---|---|
committer | John Postlethwait <john.postlethwait@nebula.com> | 2012-06-07 14:32:43 -0700 |
commit | 0074328fbbac6967d5dda2f3b0f3f98a91d17a01 (patch) | |
tree | 5eea54c65561786fbd88641dc65d85ac521a51b2 /openstack_dashboard/static/bootstrap/less/buttons.less | |
parent | 187785b28d7cfeb3fb4f87b67d71bc3dcf1f1354 (diff) | |
download | tuskar-ui-0074328fbbac6967d5dda2f3b0f3f98a91d17a01.tar.gz |
Updating Horizon to use LESS.
This changes all of the Bootstrap CSS and Horizon
CSS to use LESS. Horizon's specific CSS will be
organized into separate files in another commit,
as it is outside the scope of this BP.
We are also now packing LESS 1.3.0 directly within
Horizon.
Implementation of Blueprint transition-to-lesscss
Change-Id: Ie4be8b28ab3ce04ea21d7d5cd49c2ccb66bd8ade
Diffstat (limited to 'openstack_dashboard/static/bootstrap/less/buttons.less')
-rw-r--r-- | openstack_dashboard/static/bootstrap/less/buttons.less | 183 |
1 files changed, 183 insertions, 0 deletions
diff --git a/openstack_dashboard/static/bootstrap/less/buttons.less b/openstack_dashboard/static/bootstrap/less/buttons.less new file mode 100644 index 00000000..55e9fbf1 --- /dev/null +++ b/openstack_dashboard/static/bootstrap/less/buttons.less @@ -0,0 +1,183 @@ +// BUTTON STYLES +// ------------- + + +// Base styles +// -------------------------------------------------- + +// Core +.btn { + display: inline-block; + padding: 4px 10px 4px; + margin-bottom: 0; // For input.btn + font-size: @baseFontSize; + line-height: @baseLineHeight; + color: @grayDark; + text-align: center; + text-shadow: 0 1px 1px rgba(255,255,255,.75); + vertical-align: middle; + .buttonBackground(@white, darken(@white, 10%)); + border: 1px solid #ccc; + border-bottom-color: #bbb; + .border-radius(4px); + @shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05); + .box-shadow(@shadow); + cursor: pointer; + + // Give IE7 some love + .reset-filter(); + .ie7-restore-left-whitespace(); +} + +// Hover state +.btn:hover { + color: @grayDark; + text-decoration: none; + background-color: darken(@white, 10%); + background-position: 0 -15px; + + // transition is only when going to hover, otherwise the background + // behind the gradient (there for IE<=9 fallback) gets mismatched + .transition(background-position .1s linear); +} + +// Focus state for keyboard and accessibility +.btn:focus { + .tab-focus(); +} + +// Active state +.btn.active, +.btn:active { + background-image: none; + @shadow: inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05); + .box-shadow(@shadow); + background-color: darken(@white, 10%); + background-color: darken(@white, 15%) e("\9"); + outline: 0; +} + +// Disabled state +.btn.disabled, +.btn[disabled] { + cursor: default; + background-image: none; + background-color: darken(@white, 10%); + .opacity(65); + .box-shadow(none); +} + + +// Button Sizes +// -------------------------------------------------- + +// Large +.btn-large { + padding: 9px 14px; + font-size: @baseFontSize + 2px; + line-height: normal; + .border-radius(5px); +} +.btn-large [class^="icon-"] { + margin-top: 1px; +} + +// Small +.btn-small { + padding: 5px 9px; + font-size: @baseFontSize - 2px; + line-height: @baseLineHeight - 2px; +} +.btn-small [class^="icon-"] { + margin-top: -1px; +} + +// Mini +.btn-mini { + padding: 2px 6px; + font-size: @baseFontSize - 2px; + line-height: @baseLineHeight - 4px; +} + + +// Alternate buttons +// -------------------------------------------------- + +// Set text color +// ------------------------- +.btn-primary, +.btn-primary:hover, +.btn-warning, +.btn-warning:hover, +.btn-danger, +.btn-danger:hover, +.btn-success, +.btn-success:hover, +.btn-info, +.btn-info:hover, +.btn-inverse, +.btn-inverse:hover { + text-shadow: 0 -1px 0 rgba(0,0,0,.25); + color: @white; +} +// Provide *some* extra contrast for those who can get it +.btn-primary.active, +.btn-warning.active, +.btn-danger.active, +.btn-success.active, +.btn-info.active, +.btn-dark.active { + color: rgba(255,255,255,.75); +} + +// Set the backgrounds +// ------------------------- +.btn-primary { + .buttonBackground(@primaryButtonBackground, spin(@primaryButtonBackground, 20)); +} +// Warning appears are orange +.btn-warning { + .buttonBackground(lighten(@orange, 15%), @orange); +} +// Danger and error appear as red +.btn-danger { + .buttonBackground(#ee5f5b, #bd362f); +} +// Success appears as green +.btn-success { + .buttonBackground(#62c462, #51a351); +} +// Info appears as a neutral blue +.btn-info { + .buttonBackground(#5bc0de, #2f96b4); +} +// Inverse appears as dark gray +.btn-inverse { + .buttonBackground(#454545, #262626); +} + + +// Cross-browser Jank +// -------------------------------------------------- + +button.btn, +input[type="submit"].btn { + + // Firefox 3.6 only I believe + &::-moz-focus-inner { + padding: 0; + border: 0; + } + + // IE7 has some default padding on button controls + *padding-top: 2px; + *padding-bottom: 2px; + &.large { + *padding-top: 7px; + *padding-bottom: 7px; + } + &.small { + *padding-top: 3px; + *padding-bottom: 3px; + } +} |