summaryrefslogtreecommitdiff
path: root/openstack_dashboard/static/bootstrap/less/buttons.less
diff options
context:
space:
mode:
authorJohn Postlethwait <john.postlethwait@nebula.com>2012-05-11 23:37:35 -0700
committerJohn Postlethwait <john.postlethwait@nebula.com>2012-06-07 14:32:43 -0700
commit0074328fbbac6967d5dda2f3b0f3f98a91d17a01 (patch)
tree5eea54c65561786fbd88641dc65d85ac521a51b2 /openstack_dashboard/static/bootstrap/less/buttons.less
parent187785b28d7cfeb3fb4f87b67d71bc3dcf1f1354 (diff)
downloadtuskar-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.less183
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;
+ }
+}