mirror of
https://github.com/Foundry376/Mailspring.git
synced 2025-02-27 01:23:30 +08:00
button and less changes
This commit is contained in:
Evan Morikawa
parent
b63aad83f1
commit
b61e62c6a3
17 changed files with 262 additions and 362 deletions
|
|
@ -14,8 +14,7 @@
|
|||
color: @text-color-subtle;
|
||||
font-size: @font-size-small;
|
||||
font-weight: 400;
|
||||
padding-left: @padding-base-horizontal;
|
||||
padding-right: @padding-base-horizontal;
|
||||
padding: 0 @spacing-standard;
|
||||
line-height: @line-height-large * 1.1;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -5,8 +5,10 @@ React = require 'react'
|
|||
module.exports =
|
||||
NewComposeButton = React.createClass
|
||||
render: ->
|
||||
<button className="btn btn-compose" onClick={@_onNewCompose}>
|
||||
<RetinaImg name="toolbar-compose.png" style={position:'relative', top:-3, left: 3}/>
|
||||
</button>
|
||||
<div id="new-compose-button">
|
||||
<button className="btn btn-compose" onClick={@_onNewCompose}>
|
||||
<RetinaImg name="toolbar-compose.png" style={position:'relative', top:-3, left: 3}/>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
_onNewCompose: -> Actions.composeNewBlankDraft()
|
||||
|
|
|
|||
|
|
@ -33,7 +33,34 @@
|
|||
}
|
||||
}
|
||||
|
||||
.toolbar {
|
||||
.floating-toolbar {
|
||||
z-index: 10;
|
||||
position: absolute;
|
||||
background: @background-color-accent;
|
||||
border-radius: 2px;
|
||||
color: @text-color-inverse;
|
||||
|
||||
.toolbar-pointer {
|
||||
content: " ";
|
||||
position: absolute;
|
||||
width: 0;
|
||||
height: 0;
|
||||
top: -13px;
|
||||
left: 50%;
|
||||
margin-left: -6px;
|
||||
border: 7px solid transparent;
|
||||
border-bottom-color: @background-color-accent;
|
||||
border-bottom-width: 6px;
|
||||
}
|
||||
|
||||
.floating-toolbar-input {
|
||||
display: inline;
|
||||
width: auto;
|
||||
color: @text-color-inverse;
|
||||
position: relative;
|
||||
top: 1px;
|
||||
}
|
||||
|
||||
@padding: 0.5em;
|
||||
.btn {
|
||||
background: transparent;
|
||||
|
|
@ -61,7 +88,6 @@
|
|||
top: 1px;
|
||||
padding: 0 @padding;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.composer-inner-wrap {
|
||||
|
|
@ -75,35 +101,6 @@
|
|||
cursor: pointer;
|
||||
}
|
||||
|
||||
.floating-toolbar {
|
||||
z-index: 10;
|
||||
position: absolute;
|
||||
background: @background-color-accent;
|
||||
border-radius: 2px;
|
||||
color: @text-color-inverse;
|
||||
|
||||
.toolbar-pointer {
|
||||
content: " ";
|
||||
position: absolute;
|
||||
width: 0;
|
||||
height: 0;
|
||||
top: -13px;
|
||||
left: 50%;
|
||||
margin-left: -6px;
|
||||
border: 7px solid transparent;
|
||||
border-bottom-color: @background-color-accent;
|
||||
border-bottom-width: 6px;
|
||||
}
|
||||
|
||||
.floating-toolbar-input {
|
||||
display: inline;
|
||||
width: auto;
|
||||
color: @text-color-inverse;
|
||||
position: relative;
|
||||
top: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
.composer-header {
|
||||
padding: 11px 15px 5px 15px;
|
||||
|
||||
|
|
@ -160,7 +157,7 @@
|
|||
}
|
||||
|
||||
.btn-send {
|
||||
.btn-variant(@action-color);
|
||||
// .btn-variant(@action-color);
|
||||
margin-right: 15px;
|
||||
}
|
||||
|
||||
|
|
@ -260,13 +257,8 @@
|
|||
}
|
||||
|
||||
#new-compose-button {
|
||||
order: 1;
|
||||
|
||||
background: @background-color-accent;
|
||||
padding: 10px 15px 13px 15px;
|
||||
text-align: center;
|
||||
|
||||
.btn-compose {
|
||||
.btn-variant(@action-color);
|
||||
margin-top: @spacing-half;
|
||||
margin-left: @spacing-standard;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -52,7 +52,7 @@
|
|||
.btn:hover {
|
||||
background-color: #AAA;
|
||||
}
|
||||
|
||||
|
||||
.fa-caret-square-o-down,
|
||||
.fa-caret-square-o-up {
|
||||
display:inline-block;
|
||||
|
|
|
|||
|
|
@ -42,13 +42,7 @@ MessageList = React.createClass
|
|||
|
||||
<div class="message-list" id="message-list">
|
||||
<div tabIndex=1 className="messages-wrap">
|
||||
<div className="message-list-primary-actions">
|
||||
{@_messageListPrimaryActions()}
|
||||
</div>
|
||||
|
||||
<div className="message-list-notification-bars">
|
||||
{@_messageListNotificationBars()}
|
||||
</div>
|
||||
{@_oldMessageListHeaders()}
|
||||
|
||||
<div className="title-and-messages">
|
||||
{@_messageListHeaders()}
|
||||
|
|
@ -60,6 +54,17 @@ MessageList = React.createClass
|
|||
</div>
|
||||
</div>
|
||||
|
||||
# TODO Add actions and notifications back in.
|
||||
_oldMessageListHeaders: ->
|
||||
return <div></div>
|
||||
<div className="message-list-primary-actions">
|
||||
{@_messageListPrimaryActions()}
|
||||
</div>
|
||||
|
||||
<div className="message-list-notification-bars">
|
||||
{@_messageListNotificationBars()}
|
||||
</div>
|
||||
|
||||
_messageListPrimaryActions: ->
|
||||
MLActions = ComponentRegistry.findAllViewsByRole('MessageListPrimaryAction')
|
||||
<div className="primary-actions-bar">
|
||||
|
|
|
|||
|
|
@ -55,8 +55,10 @@ ThreadListTabular = React.createClass
|
|||
flex: 2
|
||||
resolver: (thread, parentComponent) =>
|
||||
Participants = @state.Participants
|
||||
<Participants participants={thread.participants}
|
||||
context={'list'} clickable={false} />
|
||||
<div className="participants">
|
||||
<Participants participants={thread.participants}
|
||||
context={'list'} clickable={false} />
|
||||
</div>
|
||||
|
||||
subject = (thread) ->
|
||||
if (thread.subject ? "").trim().length is 0
|
||||
|
|
@ -68,9 +70,12 @@ ThreadListTabular = React.createClass
|
|||
LabelComponent = label.view
|
||||
<LabelComponent thread={thread} />
|
||||
|
||||
numMessages = (thread) ->
|
||||
numMsg = thread.numMessages()
|
||||
if numMsg < 1 then "" else numMsg
|
||||
numUnread = (thread) ->
|
||||
numMsg = thread.numUnread()
|
||||
if numMsg < 2
|
||||
<span></span>
|
||||
else
|
||||
<span className="message-count item-count-box">{numMsg}</span>
|
||||
|
||||
c2 = new ThreadListColumn
|
||||
name: "Subject"
|
||||
|
|
@ -78,7 +83,7 @@ ThreadListTabular = React.createClass
|
|||
resolver: (thread) ->
|
||||
<span>
|
||||
<span className="subject">{subject(thread)}</span>
|
||||
<span className="message-count item-count-box">{numMessages(thread)}</span>
|
||||
{numUnread(thread)}
|
||||
</span>
|
||||
|
||||
c3 = new ThreadListColumn
|
||||
|
|
@ -95,7 +100,7 @@ ThreadListTabular = React.createClass
|
|||
{parentComponent.threadTime()}
|
||||
</span>
|
||||
|
||||
return [c0, c1, c2, c3, c4]
|
||||
return [c1, c2, c3, c4]
|
||||
|
||||
_threadHeaders: ->
|
||||
return <div></div>
|
||||
|
|
|
|||
|
|
@ -16,6 +16,33 @@
|
|||
.message-count {
|
||||
color: @text-color-inverse;
|
||||
background: @background-tertiary;
|
||||
padding: 4px 6px 2px 6px;
|
||||
margin-left: 1em;
|
||||
}
|
||||
|
||||
.participants {
|
||||
font-size: @font-size-large;
|
||||
font-weight: @font-weight-semi-bold;
|
||||
}
|
||||
.subject {
|
||||
font-size: @font-size-small;
|
||||
font-weight: @font-weight-normal;
|
||||
}
|
||||
.snippet, .timestamp {
|
||||
font-size: @font-size-small;
|
||||
font-weight: @font-weight-normal;
|
||||
color: @text-color-subtle;
|
||||
}
|
||||
.selected {
|
||||
.participants {
|
||||
color: @text-color-inverse;
|
||||
}
|
||||
.subject {
|
||||
color: @text-color-inverse;
|
||||
}
|
||||
.snippet, .timestamp {
|
||||
color: @text-color-inverse-subtle;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -28,15 +55,6 @@
|
|||
color: @text-color;
|
||||
background: @list-bg;
|
||||
|
||||
.snippet, .timestamp {
|
||||
font-size: @font-size-small;
|
||||
color: @text-color-subtle;
|
||||
}
|
||||
|
||||
.no-subject {
|
||||
color: @text-color-subtle;
|
||||
}
|
||||
|
||||
.participants {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
|
@ -58,7 +76,6 @@
|
|||
|
||||
.subject {
|
||||
color: @unread-color;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -66,15 +83,6 @@
|
|||
&.selected {
|
||||
background: @list-active-bg;
|
||||
color: @list-active-color;
|
||||
.snippet {
|
||||
color: @list-active-color-muted;
|
||||
}
|
||||
.no-subject {
|
||||
color: @list-active-color-muted;
|
||||
}
|
||||
.message-time {
|
||||
color: @list-active-color-muted;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,75 +0,0 @@
|
|||
// Variables different from the original are marked 'Changed'
|
||||
|
||||
@text-color: #333;
|
||||
@text-color-subtle: #777;
|
||||
@text-color-highlight: #111;
|
||||
@text-color-selected: @text-color-highlight;
|
||||
|
||||
@text-color-info: #5293d8;
|
||||
@text-color-success: #1fe977;
|
||||
@text-color-warning: #f78a46;
|
||||
@text-color-error: #c00;
|
||||
|
||||
@background-color-info: #0098ff;
|
||||
@background-color-success: #17ca65;
|
||||
@background-color-warning: #ff4800;
|
||||
@background-color-error: #c00;
|
||||
@background-color-highlight: rgba(255, 255, 255, 0.10);
|
||||
@background-color-selected: @background-color-highlight;
|
||||
|
||||
@app-background-color: #00f; // Changed
|
||||
|
||||
@base-background-color: #fff;
|
||||
@base-border-color: #eee;
|
||||
|
||||
@pane-item-background-color: @base-background-color;
|
||||
@pane-item-border-color: @base-border-color;
|
||||
|
||||
@input-background-color: #f00; // Changed
|
||||
@input-border-color: @base-border-color;
|
||||
|
||||
@tool-panel-background-color: #f4f4f4;
|
||||
@tool-panel-border-color: @base-border-color;
|
||||
|
||||
@inset-panel-background-color: #eee;
|
||||
@inset-panel-border-color: @base-border-color;
|
||||
|
||||
@panel-heading-background-color: #ddd;
|
||||
@panel-heading-border-color: transparent;
|
||||
|
||||
@overlay-background-color: #f4f4f4;
|
||||
@overlay-border-color: @base-border-color;
|
||||
|
||||
@button-background-color: #ccc;
|
||||
@button-background-color-hover: lighten(@button-background-color, 5%);
|
||||
@button-background-color-selected: @button-background-color-hover;
|
||||
@button-border-color: #aaa;
|
||||
|
||||
@tab-bar-background-color: #fff;
|
||||
@tab-bar-border-color: darken(@tab-background-color-active, 10%);
|
||||
@tab-background-color: #f4f4f4;
|
||||
@tab-background-color-active: #fff;
|
||||
@tab-border-color: @base-border-color;
|
||||
|
||||
@tree-view-background-color: @tool-panel-background-color;
|
||||
@tree-view-border-color: @tool-panel-border-color;
|
||||
|
||||
@ui-site-color-1: @background-color-success; // green
|
||||
@ui-site-color-2: @background-color-info; // blue
|
||||
@ui-site-color-3: @background-color-warning; // orange
|
||||
@ui-site-color-4: #db2ff4; // purple
|
||||
@ui-site-color-5: #f5e11d; // yellow
|
||||
|
||||
@font-size: 12px;
|
||||
|
||||
@disclosure-arrow-size: 12px;
|
||||
|
||||
@component-padding: 150px;
|
||||
@component-icon-padding: 5px;
|
||||
@component-icon-size: 16px;
|
||||
@component-line-height: 25px;
|
||||
@component-border-radius: 2px;
|
||||
|
||||
@tab-height: 30px;
|
||||
|
||||
@font-family: Arial;
|
||||
|
|
@ -42,7 +42,10 @@ class Thread extends Model
|
|||
Thread.attributes.lastMessageTimestamp.descending()
|
||||
|
||||
# TODO Implement me
|
||||
numMessages: -> Math.round(Math.random() * 5)
|
||||
numUnread: ->
|
||||
if @unread
|
||||
Math.round(Math.random() * 5)
|
||||
else 0
|
||||
|
||||
fromJSON: (json) =>
|
||||
super(json)
|
||||
|
|
|
|||
|
|
@ -1,126 +1,135 @@
|
|||
@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-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;
|
||||
}
|
||||
border: 0;
|
||||
padding: 0.33em 1em;
|
||||
border-radius: @border-radius-base;
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
height: auto;
|
||||
line-height: 1;
|
||||
|
||||
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.21);
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
color: @text-color-link;
|
||||
box-shadow: 0 1px 6px rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
&:active {
|
||||
color: darken(@text-color-link, 5%);
|
||||
cursor: pointer;
|
||||
box-shadow: 0 0 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;
|
||||
}
|
||||
&.btn-larger {
|
||||
font-size: @font-size-larger;
|
||||
}
|
||||
|
||||
color: @btn-default-text-color;
|
||||
background: @btn-default-bg-color;
|
||||
&.btn-action {
|
||||
color: @btn-action-text-color;
|
||||
background: @btn-action-bg-color;
|
||||
}
|
||||
&.btn-emphasis {
|
||||
color: @btn-emphasis-text-color;
|
||||
background: @btn-emphasis-bg-color;
|
||||
}
|
||||
&.btn-danger, .btn-destructive {
|
||||
color: @btn-danger-text-color;
|
||||
background: @btn-danger-bg-color;
|
||||
}
|
||||
}
|
||||
|
||||
// .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%);
|
||||
// }
|
||||
// }
|
||||
|
|
|
|||
|
|
@ -1,8 +1,5 @@
|
|||
// Import from the ui theme's variables with a fallback to ./variables/ui-variables.less
|
||||
@import "./variables/ui-variables";
|
||||
@import "ui-variables";
|
||||
@import "./variables/ui-mixins";
|
||||
@import "ui-mixins";
|
||||
@import "variables/ui-variables";
|
||||
@import "variables/ui-mixins";
|
||||
|
||||
@import (css) "font-awesome.min.css";
|
||||
|
||||
|
|
@ -15,7 +12,7 @@
|
|||
@import "resizable";
|
||||
@import "utilities";
|
||||
|
||||
@import "./components/popover";
|
||||
@import "./components/menu";
|
||||
@import "./components/tokenizing-text-field";
|
||||
@import "./components/extra";
|
||||
@import "components/popover";
|
||||
@import "components/menu";
|
||||
@import "components/tokenizing-text-field";
|
||||
@import "components/extra";
|
||||
|
|
|
|||
|
|
@ -1,7 +1,3 @@
|
|||
@import "ui-variables";
|
||||
@import "ui-mixins";
|
||||
|
||||
|
||||
input[type="text"] {
|
||||
width: 100%;
|
||||
padding-left: @padding-xs-horizontal;
|
||||
|
|
@ -11,4 +7,4 @@ input[type="text"] {
|
|||
border-radius: @border-radius-base;
|
||||
border: 1px solid @input-border;
|
||||
font-weight:400;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@
|
|||
// number of messages in a thread)
|
||||
.item-count-box {
|
||||
display: inline;
|
||||
font-size: @font-size-smaller;
|
||||
padding: @padding-xs-vertical @padding-xs-horizontal @padding-xs-vertical @padding-xs-horizontal;
|
||||
margin-top: floor(@line-height-large - @line-height-small)/2;
|
||||
line-height: @line-height-small;
|
||||
|
|
|
|||
|
|
@ -1,6 +1,3 @@
|
|||
@import "ui-variables";
|
||||
@import "ui-mixins";
|
||||
|
||||
@resizableBorder: 1px solid #bbb;
|
||||
|
||||
.resizable {
|
||||
|
|
|
|||
|
|
@ -1,5 +1,3 @@
|
|||
@import "ui-variables";
|
||||
|
||||
:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -53,8 +53,11 @@
|
|||
|
||||
// ----- Colors -----
|
||||
@text-color: @black;
|
||||
@text-color-subtle: fadeout(@text-color, 20%);
|
||||
@text-color-very-subtle: fadeout(@text-color, 50%);
|
||||
@text-color-inverse: @white;
|
||||
@text-color-subtle: fadeout(@text-color, 50%);
|
||||
@text-color-inverse-subtle: fadeout(@text-color-inverse, 20%);
|
||||
@text-color-inverse-very-subtle: fadeout(@text-color-inverse, 50%);
|
||||
|
||||
@text-color-link: @nilas-blue;
|
||||
@text-color-link-hover: @nilas-blue-dark;
|
||||
|
|
@ -100,11 +103,19 @@
|
|||
@font-family: @font-family-base;
|
||||
@font-family-heading: @font-family-sans-serif;
|
||||
|
||||
// ----- Font Weights -----
|
||||
@font-weight-normal: 400;
|
||||
@font-weight-medium: 500;
|
||||
@font-weight-semi-bold: 600;
|
||||
|
||||
// ----- Font Sizes -----
|
||||
@font-size-base: 15px;
|
||||
@font-size: @font-size-base;
|
||||
@font-size-large: ceil((@font-size-base * 1.25)); // ~18px
|
||||
@font-size-small: ceil((@font-size-base * 0.85)); // ~12px
|
||||
|
||||
@font-size-smaller: @font-size-base * 0.80; // 12px
|
||||
@font-size-small: @font-size-base * 0.93; // 14px
|
||||
@font-size: @font-size-base; // 15px
|
||||
@font-size-large: @font-size-base * 1.06; // 16px
|
||||
@font-size-larger: @font-size-base * 1.20; // 18px
|
||||
|
||||
@font-size-h1: floor((@font-size-base * 2.6)); // ~36px
|
||||
@font-size-h2: floor((@font-size-base * 2.15)); // ~30px
|
||||
|
|
@ -114,7 +125,7 @@
|
|||
@font-size-h6: ceil((@font-size-base * 0.85)); // ~12px
|
||||
|
||||
// ----- Line Height -----
|
||||
@line-height-base: 1.428571429; // 20/14
|
||||
@line-height-base: 1.5; // 22.5/15
|
||||
@line-height-computed: floor((@font-size-base * @line-height-base)); // ~20px
|
||||
@line-height-heading: 1.1;
|
||||
|
||||
|
|
@ -137,6 +148,10 @@
|
|||
// Define common padding and border radius sizes and more. Values based on
|
||||
// 14px text and 1.428 line-height (~20px to start).
|
||||
|
||||
@spacing-standard: @font-size-base;
|
||||
@spacing-double: @spacing-standard * 2;
|
||||
@spacing-half: @spacing-standard * 0.5;
|
||||
|
||||
@padding-base-vertical: 6px;
|
||||
@padding-base-horizontal: 12px;
|
||||
|
||||
|
|
@ -185,38 +200,19 @@
|
|||
|
||||
//=============================== Buttons ==============================//
|
||||
|
||||
@btn-font-weight: normal;
|
||||
@btn-shadow: 0 1px 4px rgba(0, 0, 0, 0.21);
|
||||
|
||||
@btn-toolbar-color: #333;
|
||||
@btn-toolbar-bg: #fff;
|
||||
@btn-toolbar-border: transparent;
|
||||
@btn-default-bg-color: @background-primary;
|
||||
@btn-default-text-color: @text-color;
|
||||
|
||||
@btn-default-color: #333;
|
||||
@btn-default-bg: #fff;
|
||||
@btn-default-border: #ccc;
|
||||
@btn-action-bg-color: @success-color;
|
||||
@btn-action-text-color: @text-color;
|
||||
|
||||
@btn-primary-color: #fff;
|
||||
@btn-primary-bg: @accent-primary;
|
||||
@btn-primary-border: darken(@btn-primary-bg, 5%);
|
||||
|
||||
@btn-success-color: #fff;
|
||||
@btn-success-bg: @success-color;
|
||||
@btn-success-border: darken(@btn-success-bg, 5%);
|
||||
|
||||
@btn-info-color: #fff;
|
||||
@btn-info-bg: @info-color;
|
||||
@btn-info-border: darken(@btn-info-bg, 5%);
|
||||
|
||||
@btn-warning-color: #fff;
|
||||
@btn-warning-bg: @warning-color;
|
||||
@btn-warning-border: darken(@btn-warning-bg, 5%);
|
||||
|
||||
@btn-danger-color: #fff;
|
||||
@btn-danger-bg: @danger-color;
|
||||
@btn-danger-border: darken(@btn-danger-bg, 5%);
|
||||
|
||||
@btn-link-disabled-color: @gray-light;
|
||||
@btn-emphasis-bg-color: @accent-primary;
|
||||
@btn-emphasis-text-color: @text-color-inverse;
|
||||
|
||||
@btn-danger-bg-color: @danger-color;
|
||||
@btn-danger-text-color: @text-color-inverse;
|
||||
|
||||
//================================ Forms ===============================//
|
||||
|
||||
|
|
@ -442,13 +438,6 @@
|
|||
@input-accessory-color-hover: @light-blue;
|
||||
@input-accessory-color: @cool-gray;
|
||||
|
||||
// Buttons
|
||||
|
||||
@button-background-color: @white;
|
||||
@button-background-color-hover: white;
|
||||
@button-background-color-selected: white;
|
||||
@button-border-color: @border-color;
|
||||
|
||||
// Menus
|
||||
|
||||
@menu-color: white;
|
||||
|
|
@ -474,8 +463,6 @@
|
|||
@standard-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.22);
|
||||
@standard-shadow-up: 0 -1px 2px 0 rgba(0, 0, 0, 0.22);
|
||||
|
||||
@btn-shadow: 0 1px 0.5px 0 rgba(0, 0, 0, 0.20);
|
||||
|
||||
@body-bg: @white;
|
||||
//== Panels and Sidebars
|
||||
@panel-background-color: @gray-lighter;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,3 @@
|
|||
@import "ui-variables";
|
||||
|
||||
html,
|
||||
body {
|
||||
width: 100%;
|
||||
|
|
@ -55,39 +53,17 @@ atom-workspace {
|
|||
border-bottom: 1px solid @border-color-divider;
|
||||
|
||||
.toolbar {
|
||||
width:100%;
|
||||
height:50px;
|
||||
|
||||
.btn {
|
||||
height:30px;
|
||||
margin-top: (50px - 30px) / 2;
|
||||
|
||||
background: @btn-toolbar-bg;
|
||||
color: @btn-toolbar-color;
|
||||
border: 1px solid @btn-toolbar-border;
|
||||
border-radius: @border-radius-base;
|
||||
|
||||
box-shadow: @btn-shadow;
|
||||
line-height: @line-height-computed;
|
||||
padding-left: @padding-base-horizontal;
|
||||
padding-right: @padding-base-horizontal;
|
||||
margin-right: @padding-base-horizontal;
|
||||
margin-left: @padding-base-horizontal;
|
||||
}
|
||||
|
||||
.btn:active {
|
||||
background: darken(@btn-toolbar-bg, 10%);
|
||||
box-shadow: none;
|
||||
}
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
}
|
||||
}
|
||||
|
||||
.flexbox-handle-horizontal {
|
||||
width:6px;
|
||||
top:0;
|
||||
bottom:0;
|
||||
z-index:2;
|
||||
position:absolute;
|
||||
width: 6px;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
z-index: 2;
|
||||
position: absolute;
|
||||
cursor: col-resize;
|
||||
div {
|
||||
height:100%;
|
||||
|
|
|
|||
Loading…
Reference in a new issue