Mailspring/static/buttons.less
Ben Gotow df38008c56 fix(*): Small fixes from Lake Tahoe. See Summary.
Summary:
This diff includes a few small things:

- Menu: Don't select the first item until the user taps down arrow, and allow the user to use the arrow keys to move up and down through Menu items.

- Menu: Make scroll code from MultiselectList re-usable, use in Menu. Now if you use the keys to move to an item that is offscreen it will follow.

- Popover: Tapping the button that opened popover should close it

- Make sure buttons in toolbars are at least standard height

- Re-enable Markdown processing via `grunt docs`

- A bit of initial inline documentation for crosjdoc. Need to evaluate whether this is worth doing everywhere.

- New `search-playground` package for experimenting with search and search weights.

- Swap itemClassProvider for more generic itemPropProvider

- Add crojsdoc config file

- Export React, because third party packages can't require things from our app

- [FEATURE] Bring back static file support in third party packages via `nylas://translate/IMG_20150417_124142.jpg`

- Fix invariant error with search bar

- [FEATURE] "Show Original" under Message actions

- Fix DatabaseView so that many archives at once don't cause problems

Test Plan: Run specs

Reviewers: evan

Reviewed By: evan

Differential Revision: https://review.inboxapp.com/D1426
2015-04-22 16:41:29 -07:00

120 lines
2.5 KiB
Text

@import "ui-variables";
@import "ui-mixins";
button, html input[type="button"] {
cursor: default;
&:hover, &:active {
cursor: default;
}
}
.btn {
border: 0;
padding: 0.33em 1em;
border-radius: @border-radius-base;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.21);
cursor: default;
display:inline-block;
height: auto;
line-height: 1;
&:active {
cursor: default;
background-color: darken(@btn-default-bg-color, 9%);
box-shadow: 0 -1px 1px rgba(0, 0, 0, 0.21);
}
&:focus {
outline: none
}
font-size: @font-size-base;
&.btn-smaller {
font-size: @font-size-smaller;
}
&.btn-small {
font-size: @font-size-small;
}
&.btn-large {
font-size: @font-size-large;
padding: 0.5em 1.3em;
}
&.btn-larger {
font-size: @font-size-larger;
padding: 0.66em 1.6em;
}
color: @btn-default-text-color;
background: @btn-default-bg-color;
&.btn-action {
color: @btn-action-text-color;
background: @btn-action-bg-color;
}
&.btn-emphasis {
background-image: -webkit-gradient(linear, left top, left bottom, from(lighten(@btn-emphasis-bg-color,10%)), to(@btn-emphasis-bg-color));
border:1px solid darken(@btn-emphasis-bg-color, 5%);
color: @btn-emphasis-text-color;
font-weight: @font-weight-medium;
img {-webkit-filter: brightness(100);}
}
&.btn-emphasis:active {
background-image: -webkit-gradient(linear, left top, left bottom, from(darken(@btn-emphasis-bg-color,10%)), to(darken(@btn-emphasis-bg-color, 4%)));
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.21);
}
&.btn-danger, .btn-destructive {
color: @btn-danger-text-color;
background: @btn-danger-bg-color;
}
}
.btn-toolbar {
min-height:34px;
}
.btn-gradient {
background: -webkit-gradient(linear, left top, left bottom, from(@btn-default-bg-color), to(darken(@btn-default-bg-color, 4.5%)));
}
.btn-gradient:active {
background: -webkit-gradient(linear, left top, left bottom, from(darken(@btn-default-bg-color, 9%)), to(darken(@btn-default-bg-color, 13.5%)));
}
.btn-icon {
background: transparent;
border: 0;
box-shadow: none;
color: @text-color-subtle;
margin-right: 10px;
outline: none !important;
font-size: 20px;
&:last-child {
margin-right: 0;
}
&.inverse {
color: @text-color-inverse;
&:hover {
color: white;
}
&:active {
color: @text-color-inverse;
}
}
&:hover {
cursor: default;
color: @text-color-link;
box-shadow: none;
}
&:active {
color: @text-color-link-active;
box-shadow: none;
}
}