mirror of
https://github.com/Foundry376/Mailspring.git
synced 2024-09-21 07:46:06 +08:00
d6336dae08
commit d1c455515e04424d429c87a07aff248a4a767f23
Merge: 72e5536 512f8db
Author: Ben Gotow <bengotow@gmail.com>
Date: Thu Feb 19 18:42:29 2015 -0800
Merge sheet and flexbox components, fonts, and more
Conflicts:
static/workspace-view.less
commit 72e553652f5b26a96155c51e04db46baafb916be
Author: Ben Gotow <bengotow@gmail.com>
Date: Wed Feb 18 12:33:08 2015 -0800
Start transitioning to a better set of ui-variables (from bootstrap)
commit ed22fb7fe1c6544af44fae69b83e7e63965ddf4d
Author: Ben Gotow <bengotow@gmail.com>
Date: Wed Feb 18 11:55:58 2015 -0800
I hate CSS
commit 512f8db414ceef74712c9d63ba5a67b44cf778c4
Author: Ben Gotow <bengotow@gmail.com>
Date: Mon Feb 16 10:10:44 2015 -0800
Initial work on top toolbar
commit c2d7a0e0a2f6f6ebe254cca24ad0735336d57b70
Author: Ben Gotow <bengotow@gmail.com>
Date: Thu Feb 12 18:47:26 2015 -0800
New UI Prototype interaction / stores for sheets
127 lines
2.8 KiB
Plaintext
127 lines
2.8 KiB
Plaintext
@import "ui-variables";
|
|
@import "ui-mixins";
|
|
|
|
.btn-background (@color, @hover-color, @selected-color, @border-color, @text-color, @text-color-hover) {
|
|
@border-shadow: inset 0 0 0 1px @border-color;
|
|
@active-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
|
|
color: @text-color;
|
|
box-shadow: 0 0 0;
|
|
background-color: @color;
|
|
// background-image: -webkit-linear-gradient(@color, darken(@color, 8%));
|
|
// box-shadow: @border-shadow;
|
|
|
|
&:focus {
|
|
box-shadow: 0 0 10px rgba(255,255,255,0.7);
|
|
// color: @text-color-hover;
|
|
// background: lighten(@color, 4%);
|
|
}
|
|
|
|
&:hover {
|
|
color: @text-color-hover;
|
|
background: lighten(@color, 4%);
|
|
// background-image: -webkit-linear-gradient(@hover-color, darken(@hover-color, 8%));
|
|
}
|
|
&:active,
|
|
&.selected:hover:active,
|
|
&.selected:focus:active {
|
|
// box-shadow: @active-shadow, @border-shadow;
|
|
box-shadow: 0 0 0;
|
|
background: @color;
|
|
}
|
|
&.selected,
|
|
&.selected:hover {
|
|
color: @text-color-selected;
|
|
// box-shadow: inset 0 2px 5px rgba(0, 0, 0,.3), @border-shadow;
|
|
// text-shadow: 0 0 2px rgba(0, 0, 0, 0.3);
|
|
// background-image: -webkit-linear-gradient(darken(@selected-color, 8%), @selected-color);
|
|
}
|
|
&.selected:hover {
|
|
// box-shadow: @border-shadow;
|
|
// background-image: -webkit-linear-gradient(@selected-color, darken(@selected-color, 8%));
|
|
}
|
|
}
|
|
|
|
.btn-variant (@color) {
|
|
@bg: @color;
|
|
@hover: @color;
|
|
@selected: @color;
|
|
// fadeout(darken(@color, 20%), 50%);
|
|
@border: @color;
|
|
.btn-background(@bg, @hover, @selected, @border, @text-color-selected, @text-color-selected);
|
|
outline: none;
|
|
}
|
|
|
|
|
|
.btn {
|
|
.btn-background(@button-background-color, @button-background-color-hover, @button-background-color-selected, @button-border-color, @text-color, @text-color-highlight);
|
|
outline: none;
|
|
height: @component-line-height * 1.5;
|
|
|
|
border: none;
|
|
font-family: "Proxima Nova Regular Small Cap";
|
|
text-transform: lowercase;
|
|
letter-spacing: 1px;
|
|
padding: 0 15px;
|
|
}
|
|
|
|
.btn:focus {
|
|
outline:none;
|
|
}
|
|
|
|
.btn-default {
|
|
border:1px solid #ccc;
|
|
}
|
|
|
|
.btn.btn-primary {
|
|
.btn-variant(@background-color-info);
|
|
}
|
|
.btn.btn-info {
|
|
.btn-variant(@background-color-info);
|
|
}
|
|
.btn.btn-success {
|
|
.btn-variant(@background-color-success);
|
|
}
|
|
.btn.btn-warning {
|
|
.btn-variant(@background-color-warning);
|
|
}
|
|
.btn.btn-error {
|
|
.btn-variant(@background-color-error);
|
|
}
|
|
|
|
.btn-group > .btn {
|
|
border: none;
|
|
}
|
|
|
|
.btn-icon {
|
|
background: transparent;
|
|
border: 0;
|
|
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: pointer;
|
|
color: @text-color-link;
|
|
}
|
|
&:active {
|
|
color: darken(@text-color-link, 5%);
|
|
}
|
|
}
|