diff options
Diffstat (limited to 'lib/patterns.less')
| -rw-r--r-- | lib/patterns.less | 193 |
1 files changed, 131 insertions, 62 deletions
diff --git a/lib/patterns.less b/lib/patterns.less index 466727cc4..2d946e39d 100644 --- a/lib/patterns.less +++ b/lib/patterns.less @@ -288,21 +288,96 @@ footer { } } +// BUTTON STYLES +// ------------- + + +// Base .btn styles +.btn { + // Button Base + cursor: pointer; + display: inline-block; + #gradient > .vertical-three-colors(#fff, #fff, 0.25, darken(#fff, 10%)); + padding: 5px 14px 6px; + text-shadow: 0 1px 1px rgba(255,255,255,.75); + color: #333; + font-size: 13px; + line-height: normal; + 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); -// ERROR STYLES -// ------------ + &:hover { + background-position: 0 -15px; + color: #333; + text-decoration: none; + } + + // Transitions + .transition(.1s linear all); + + // Active and Disabled states + &.disabled { + cursor: default; + background-image: none; + .opacity(65); + } + + &:disabled { + // disabled pseudo can't be included with .disabled + // def because IE8 and below will drop it ;_; + cursor: default; + background-image: none; + .opacity(65); + } + + &:active { + @shadow: inset 0 3px 7px rgba(0,0,0,.1), 0 1px 2px rgba(0,0,0,.05); + .box-shadow(@shadow); + } -// Setup a mixin to colorize different alerts -.alertTheme(@primaryColor, @secondaryColor) { - #gradient > .vertical(@primaryColor, @secondaryColor); - text-shadow: 0 -1px 0 rgba(0,0,0,.25); - border-color: darken(@secondaryColor, 10%) darken(@secondaryColor, 10%) darken(@secondaryColor, 15%); - border-color: rgba(0,0,0,.05) rgba(0,0,0,.075) rgba(0,0,0,.125); + // Primary Button Type + &.primary, + &.primary:hover { + color:#fff; + .gradientBar(@blue, @blueDark) + } + + + // Button Sizes + &.large { + font-size: 16px; + line-height: normal; + padding: 9px 14px 9px; + .border-radius(6px); + } + + &.small { + padding: 7px 9px 7px; + font-size: 11px; + } + +} + +// Help Firefox not be a jerk about adding extra padding to buttons +button.btn, +input[type=submit].btn { + &::-moz-focus-inner { + padding: 0; + border: 0; + } } + + +// ERROR STYLES +// ------------ + // Base alert styles .alert { - .alertTheme(#fceec1, #eedc94); + .gradientBar(#fceec1, #eedc94); // warning by default margin-bottom: @baseline; padding: 7px 14px; color: @grayDark; @@ -311,6 +386,7 @@ footer { border-style: solid; .border-radius(4px); .box-shadow(inset 0 1px 0 rgba(255,255,255,.25)); + // Remove extra margin from content h5 { line-height: @baseline; @@ -323,66 +399,59 @@ footer { margin-bottom: 2px; line-height: 28px; } - // Provide actions with buttons .btn { + // Provide actions with buttons .box-shadow(0 1px 0 rgba(255,255,255,.25)); } -} -// Alternate alerts -.alert-error, -.alert-success, -.alert-info, -.alert-error h5, -.alert-success h5, -.alert-info h5 { - color: #fff; - text-shadow: 0 -1px 0 rgba(0,0,0,.3); -} -.alert-error { .alertTheme(#f56a66, #d6463e); } -.alert-success { .alertTheme(#62c462, #57a957); } -.alert-info { .alertTheme(#6bd0ee, #36b3d9); } -// Close action -.close { - float: right; - margin-top: -2px; - color: @black; - font-size: 20px; - font-weight: bold; - text-shadow: 0 1px 0 rgba(255,255,255,1); - .opacity(20); - &:hover { + .close { + float: right; + margin-top: -2px; color: @black; - text-decoration: none; - .opacity(40); - } -} -// Block-level alerts -.alert-block { - background-image: none; - background-color: lighten(#fceec1, 5%); - padding: 14px; - border-color: #fceec1; - .box-shadow(none); - p { - margin-right: 30px; + font-size: 20px; + font-weight: bold; + text-shadow: 0 1px 0 rgba(255,255,255,1); + .opacity(20); + &:hover { + color: @black; + text-decoration: none; + .opacity(40); + } } - .alert-actions { - margin-top: 5px; + + &.alert-block, + &.alert-block:hover { + background-image: none; + background-color: lighten(#fceec1, 5%); + padding: 14px; + border-color: #fceec1; + .box-shadow(none); + + p { + margin-right: 30px; + } + .alert-actions { + margin-top: 5px; + } + &.error, + &.success, + &.info { + color: @grayDark; + text-shadow: 0 1px 0 rgba(255,255,255,.5); + } + &.error { + background-color: lighten(#f56a66, 25%); + border-color: lighten(#f56a66, 20%); + } + &.success { + background-color: lighten(#62c462, 30%); + border-color: lighten(#62c462, 25%); + } + &.info { + background-color: lighten(#6bd0ee, 25%); + border-color: lighten(#6bd0ee, 20%); + } } } -.alert-block.error { - background-color: lighten(#f56a66, 25%); - border-color: lighten(#f56a66, 20%); -} -.alert-block.success { - background-color: lighten(#62c462, 30%); - border-color: lighten(#62c462, 25%); -} -.alert-block.info { - background-color: lighten(#6bd0ee, 25%); - border-color: lighten(#6bd0ee, 20%); -} - // NAVIGATION // ---------- |