diff options
Diffstat (limited to 'debian/missing-sources/wyrm/sass/wyrm_core/_button.sass')
-rw-r--r-- | debian/missing-sources/wyrm/sass/wyrm_core/_button.sass | 172 |
1 files changed, 172 insertions, 0 deletions
diff --git a/debian/missing-sources/wyrm/sass/wyrm_core/_button.sass b/debian/missing-sources/wyrm/sass/wyrm_core/_button.sass new file mode 100644 index 0000000..2e85353 --- /dev/null +++ b/debian/missing-sources/wyrm/sass/wyrm_core/_button.sass @@ -0,0 +1,172 @@ +// Buttons +// +// Located in `wyrm_core/_button.sass`. You can also add font icons to any +// button as shown in the third example. Wyrm by default uses the FontAwesome +// library, but any icon set can be substituted. +// +// Markup: +// <a href="#" class="btn {$modifiers}"> Link</a> +// <button class="btn {$modifiers}"> Button</button> +// <input type="submit" class="btn {$modifiers}"> +// <button class="btn fa fa-check-circle {$modifiers}"> With icon</button> +// +// :hover - Highlight the button when hovered. +// :visited - Visited link +// :disabled - For disabled buttons. +// .btn-disabled - Class version of disabled. +// :active - Press the button down. +// :focus - Focus +// .btn-neutral - Neutral looking button. +// .btn-info - For imformative, or alternate actions. +// .btn-success - For positive actions. +// .btn-danger - Usually used for delete actions. +// .btn-warning - Beware, you might not want to click me. +// .btn-invert - Dark button to contrast the background. +// .btn-link - Unstyled, link looking button. Useful for secondary actions next to another button. +// .btn-small - Smaller button. +// +// Styleguide 1 + +button + font-size: 100% + margin: 0 + vertical-align: baseline + *vertical-align: middle + cursor: pointer + line-height: normal + -webkit-appearance: button + *overflow: visible +button::-moz-focus-inner, input::-moz-focus-inner + border: 0 + padding: 0 +button[disabled] + cursor: default + +.btn + /* Structure + display: inline-block + border-radius: 2px + line-height: normal + white-space: nowrap + text-align: center + cursor: pointer + font-size: 100% + padding: $base-line-height / 4 $base-line-height / 2 ($base-line-height / 4 + 2) $base-line-height / 2 + color: $white + border: 1px solid rgba(0,0,0,0.1) + background-color: $button-background-color + text-decoration: none + font-weight: normal + font-family: $base-font-family + box-shadow: 0px 1px 2px -1px rgba(255, 255, 255, .5) inset, 0px -2px 0px 0px rgba(0,0,0,.1) inset + outline-none: false + vertical-align: middle + *display: inline + zoom: 1 + -webkit-user-drag: none + +user-select(none) + +font-smooth + +transition(all 0.1s linear) + +.btn-hover + background: lighten($link-color, 5%) + color: $white + +.btn + &:hover + background: lighten($button-background-color, 5%) + color: $white + &:focus + background: lighten($button-background-color, 5%) + outline: 0 + &:active + box-shadow: 0px -1px 0px 0px rgba(0, 0, 0, .05) inset, 0px 2px 0px 0px rgba(0,0,0,.1) inset + padding: ($base-line-height / 4 + 2) $base-line-height / 2 $base-line-height / 4 $base-line-height / 2 + &:visited + color: $white + &:disabled + background-image: none + filter: progid:DXImageTransform.Microsoft.gradient(enabled = false) + filter: alpha(opacity = 40) + opacity: 0.4 + cursor: not-allowed + box-shadow: none + +.btn-disabled + background-image: none + filter: progid:DXImageTransform.Microsoft.gradient(enabled = false) + filter: alpha(opacity = 40) + opacity: 0.4 + cursor: not-allowed + box-shadow: none + &:hover, &:focus, &:active + background-image: none + filter: progid:DXImageTransform.Microsoft.gradient(enabled = false) + filter: alpha(opacity = 40) + opacity: 0.40 + cursor: not-allowed + box-shadow: none + +// Firefox: Get rid of the inner focus border +.btn::-moz-focus-inner + padding: 0 + border: 0 + +.btn-small + font-size: 80% + +.btn-info + background-color: $blue !important + &:hover + background-color: lighten($blue, 5%) !important + +.btn-neutral + background-color: $button-neutral-background-color !important + color: $text-color !important + &:hover + background-color: darken($button-neutral-background-color, 5%) !important + color: $text-color + &:visited + color: $text-color !important + +.btn-success + background-color: $green !important + &:hover + background-color: darken($green, 5%) !important + +.btn-danger + background-color: $red !important + &:hover + background-color: lighten($red, 5%) !important + +.btn-warning + background-color: $orange !important + &:hover + background-color: lighten($orange, 5%) !important +.btn-invert + background-color: $gray-darker + &:hover + background-color: lighten($gray-darker, 5%) !important + +.btn-link + background-color: transparent !important + color: $link-color + box-shadow: none + border-color: transparent !important + &:hover + background-color: transparent !important + color: lighten($link-color, 10%) !important + box-shadow: none + &:active + background-color: transparent !important + color: lighten($link-color, 10%) !important + box-shadow: none + &:visited + color: $link-color-visited + +.wy-btn-group .btn, .wy-control .btn + vertical-align: middle + +.wy-btn-group + margin-bottom: $base-line-height + +clearfix |