mirror of
https://github.com/Foundry376/Mailspring.git
synced 2025-01-30 11:59:02 +08:00
refactor(ui-variables): Clean UI variables for consistency/usage
Summary: Shortens and simplifies UI variables so that unused variables are no longer present. Test Plan: Tested locally. Reviewers: evan, bengotow Reviewed By: bengotow Differential Revision: https://phab.nylas.com/D2738
This commit is contained in:
Jackie Luo
parent
5c8b8c721f
commit
76d478b677
22 changed files with 197 additions and 413 deletions
|
|
@ -61,7 +61,7 @@
|
|||
width: 0; // Changed by React
|
||||
z-index: 3;
|
||||
display: block;
|
||||
background: @progress-bar-fill;
|
||||
background: @blue-light;
|
||||
border-bottom-left-radius:4px;
|
||||
transition: width .3s linear;
|
||||
|
||||
|
|
@ -74,7 +74,7 @@
|
|||
width: 100%;
|
||||
z-index: 2;
|
||||
display: block;
|
||||
background: @progress-bar-background;
|
||||
background: @background-color-pending;
|
||||
border-bottom-left-radius:4px;
|
||||
border-bottom-right-radius:4px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@
|
|||
overflow-y:scroll;
|
||||
}
|
||||
.footer-container {
|
||||
border-top: 1px solid @border-secondary-bg;
|
||||
border-top: 1px solid @border-color-secondary;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -14,37 +14,37 @@
|
|||
border-radius: @border-radius-base;
|
||||
border: 1px solid @border-color-divider;
|
||||
|
||||
.event-header{
|
||||
.event-header {
|
||||
border-bottom: 1px solid @border-color-divider;
|
||||
padding: 10px;
|
||||
|
||||
img{
|
||||
img {
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
.event-title-text{
|
||||
.event-title-text {
|
||||
color: @text-color-very-subtle;
|
||||
}
|
||||
|
||||
.event-title{
|
||||
.event-title {
|
||||
color: @text-color;
|
||||
}
|
||||
}
|
||||
|
||||
.event-body{
|
||||
.event-body {
|
||||
padding: @padding-small-horizontal;
|
||||
|
||||
.event-date{
|
||||
.event-date {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
|
||||
.event-day{
|
||||
.event-day {
|
||||
display: block;
|
||||
font-size: @font-size-large;
|
||||
color: @text-color-alert;
|
||||
color: #e64d65;
|
||||
}
|
||||
|
||||
.event-time{
|
||||
.event-time {
|
||||
display: inline-block;
|
||||
font-size: @font-size-h3;
|
||||
font-weight: @font-weight-blond;
|
||||
|
|
@ -60,7 +60,7 @@
|
|||
|
||||
.btn-rsvp {
|
||||
float: left;
|
||||
padding: @spacing-three-quarters @spacing-sub-double @spacing-three-quarters @spacing-sub-double;
|
||||
padding: @spacing-three-quarters @spacing-standard * 1.75 @spacing-three-quarters @spacing-standard * 1.75;
|
||||
line-height: 10px;
|
||||
color: @text-color;
|
||||
border-radius: 3px;
|
||||
|
|
@ -69,17 +69,17 @@
|
|||
margin: 0 7.5px 0 7.5px;
|
||||
&:active {background: transparent;}
|
||||
|
||||
&.no{
|
||||
background: @error-color;
|
||||
&.no {
|
||||
background: @color-error;
|
||||
color: @white;
|
||||
}
|
||||
|
||||
&.yes{
|
||||
background: @success-color;
|
||||
&.yes {
|
||||
background: @color-success;
|
||||
color: @white;
|
||||
}
|
||||
|
||||
&.maybe{
|
||||
&.maybe {
|
||||
background: @gray-light;
|
||||
color: @white;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@ body.platform-win32 {
|
|||
&.enabled {
|
||||
padding: 4px 8px;
|
||||
height: 35px;
|
||||
border-bottom: 1px solid @border-secondary-bg;
|
||||
border-bottom: 1px solid @border-color-secondary;
|
||||
}
|
||||
|
||||
.controls-wrap {
|
||||
|
|
|
|||
|
|
@ -311,10 +311,10 @@ body.platform-win32 {
|
|||
|
||||
.message-item-divider {
|
||||
border:0; // remove default hr border left, right
|
||||
border-top: 2px solid @border-secondary-bg;
|
||||
border-top: 2px solid @border-color-secondary;
|
||||
height: 3px;
|
||||
background: @background-secondary;
|
||||
border-bottom: 1px solid @border-primary-bg;
|
||||
border-bottom: 1px solid @border-color-primary;
|
||||
margin: 0;
|
||||
|
||||
&.collapsed {
|
||||
|
|
@ -652,7 +652,7 @@ body.platform-win32 {
|
|||
opacity: 0;
|
||||
margin: 5px;
|
||||
cursor: default;
|
||||
border: 1px solid @border-primary-bg;
|
||||
border: 1px solid @border-color-primary;
|
||||
border-radius: @border-radius-large;
|
||||
background: @background-primary;
|
||||
padding: 15px;
|
||||
|
|
|
|||
|
|
@ -1,25 +1,25 @@
|
|||
@import "ui-variables";
|
||||
|
||||
.release-bar {
|
||||
order: -1;
|
||||
order: -1;
|
||||
}
|
||||
.release-bar-inner {
|
||||
height: 25px;
|
||||
display:block;
|
||||
padding-left:10px;
|
||||
padding-top:2px;
|
||||
color:@text-color-inverse;
|
||||
background-color: @action-color;
|
||||
border-bottom:1px solid darken(@action-color, 10%);
|
||||
height: 25px;
|
||||
display: block;
|
||||
padding-left: 10px;
|
||||
padding-top: 2px;
|
||||
color: @text-color-inverse;
|
||||
background-color: @background-color-success;
|
||||
border-bottom: 1px solid darken(@background-color-success, 10%);
|
||||
|
||||
&:hover {
|
||||
background-color: darken(@action-color, 10%);
|
||||
border-bottom:1px solid darken(@action-color, 15%);
|
||||
text-decoration:none;
|
||||
color:white;
|
||||
}
|
||||
&:hover {
|
||||
background-color: darken(@background-color-success, 10%);
|
||||
border-bottom: 1px solid darken(@background-color-success, 15%);
|
||||
text-decoration: none;
|
||||
color: white;
|
||||
}
|
||||
|
||||
i {
|
||||
margin-right:8px;
|
||||
}
|
||||
i {
|
||||
margin-right:8px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -93,7 +93,7 @@
|
|||
}
|
||||
|
||||
.complete .progress-track .progress {
|
||||
background-color: @nylas-green;
|
||||
background-color: @color-success;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -101,7 +101,7 @@
|
|||
transition-delay: 2s;
|
||||
&.sidebar-activity-error {
|
||||
.progress {
|
||||
background-color: @error-color;
|
||||
background-color: @color-error;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -139,7 +139,7 @@
|
|||
.notification-error {
|
||||
background-color: @background-color-error;
|
||||
border-color: @background-color-error;
|
||||
color: @error-color;
|
||||
color: @color-error;
|
||||
}
|
||||
.notification-success {
|
||||
border-color: @background-color-success;
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@
|
|||
}
|
||||
|
||||
.list-item:not(.selected) .sync-error {
|
||||
color: @text-color-error;
|
||||
color: @color-error;
|
||||
}
|
||||
|
||||
.account-name {
|
||||
|
|
@ -46,8 +46,8 @@
|
|||
.account-details {
|
||||
width: 400px;
|
||||
padding-top: 20px;
|
||||
padding-left: @spacing-super-double;
|
||||
padding-right: @spacing-super-double;
|
||||
padding-left: @spacing-standard * 2.25;
|
||||
padding-right: @spacing-standard * 2.25;
|
||||
background-color: @gray-lighter;
|
||||
border-top: 1px solid @border-color-divider;
|
||||
border-right: 1px solid @border-color-divider;
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@
|
|||
height: 350px;
|
||||
}
|
||||
.item-rule-disabled {
|
||||
color: @error-color;
|
||||
color: @color-error;
|
||||
padding: 4px 10px;
|
||||
border-bottom: 1px solid @border-color-divider;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -159,7 +159,7 @@
|
|||
font-weight: 600;
|
||||
color: @text-color;
|
||||
.then {
|
||||
font-family: @font-family-base;
|
||||
font-family: @font-family;
|
||||
color: @text-color-very-subtle;
|
||||
font-weight: 400;
|
||||
font-size: 0.9em;
|
||||
|
|
@ -179,11 +179,11 @@
|
|||
.platform-note {
|
||||
padding: @padding-base-vertical @padding-base-horizontal;
|
||||
background: fade(@black, 4%);
|
||||
border-left:3px solid @info-color;
|
||||
border-left:3px solid @color-info;
|
||||
margin:@padding-base-vertical 0;
|
||||
font-size:0.95em;
|
||||
&:before {
|
||||
color: @info-color;
|
||||
color: @color-info;
|
||||
font-weight:600;
|
||||
content: "NOTE: ";
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,14 +6,14 @@
|
|||
order: -100;
|
||||
overflow: visible;
|
||||
z-index: 100;
|
||||
width:450px;
|
||||
width: 450px;
|
||||
margin-top: (38px - 23px) / 2;
|
||||
|
||||
.menu .header-container {
|
||||
padding:0;
|
||||
height:23px;
|
||||
padding: 0;
|
||||
height: 23px;
|
||||
background-color: transparent;
|
||||
border:none;
|
||||
border: none;
|
||||
|
||||
input {
|
||||
padding-left: 26px;
|
||||
|
|
@ -21,7 +21,7 @@
|
|||
width: 100%;
|
||||
height: 23px;
|
||||
border: 1px solid transparent;
|
||||
box-shadow: 0 0.5px 0 rgba(0,0,0,0.15), 0 -0.5px 0 rgba(0,0,0,0.15), 0.5px 0 0 rgba(0,0,0,0.15), -0.5px 0 0 rgba(0,0,0,0.15);
|
||||
box-shadow: @shadow-border;
|
||||
}
|
||||
input.empty {
|
||||
text-align: left;
|
||||
|
|
@ -54,7 +54,7 @@
|
|||
&.showing-suggestions {
|
||||
.suggestions { display: inherit; }
|
||||
.clear {
|
||||
color: @input-accessory-color;
|
||||
color: @text-color-subtle;
|
||||
display: inherit;
|
||||
}
|
||||
}
|
||||
|
|
@ -75,7 +75,7 @@
|
|||
position: absolute;
|
||||
top: 3px;
|
||||
right: 4px;
|
||||
color: @input-accessory-color;
|
||||
color: @text-color-subtle;
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
|
@ -84,6 +84,6 @@
|
|||
body.is-blurred {
|
||||
.search-bar .menu .header-container input {
|
||||
background: none;
|
||||
box-shadow: 0 0.5px 0 rgba(0,0,0,0.15), 0 -0.5px 0 rgba(0,0,0,0.15), 0.5px 0 0 rgba(0,0,0,0.15), -0.5px 0 0 rgba(0,0,0,0.15);
|
||||
box-shadow: @shadow-border;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,20 +1,23 @@
|
|||
@gray-base: #ffffff;
|
||||
@gray-darker: darken(@gray-base, 13.5%); // #222
|
||||
@gray-dark: darken(@gray-base, 20%); // #333
|
||||
@gray: darken(@gray-base, 33.5%); // #555
|
||||
@gray-light: darken(@gray-base, 46.7%); // #777
|
||||
@gray-lighter: darken(@gray-base, 92.5%); // #eee
|
||||
@gray-darker: darken(@gray-base, 13.5%);
|
||||
@gray-dark: darken(@gray-base, 20%);
|
||||
@gray: darken(@gray-base, 33.5%);
|
||||
@gray-light: darken(@gray-base, 46.7%);
|
||||
@gray-lighter: darken(@gray-base, 92.5%);
|
||||
@white: #0a0b0c;
|
||||
|
||||
@accent-primary: #5AA8FA;
|
||||
@accent-primary-dark: lighten(#3087E1, 10%);
|
||||
|
||||
@background-primary: #313131;
|
||||
@background-off-primary: #282828;
|
||||
@background-secondary: #222;
|
||||
@background-tertiary: #6d7987;
|
||||
|
||||
@btn-default-bg-color: #404040;
|
||||
@dropdown-default-bg-color: #404040;
|
||||
@accent-primary: #5AA8FA;
|
||||
@accent-primary-dark: lighten(#3087E1, 10%);
|
||||
@border-color-primary: lighten(@background-primary, 10%);
|
||||
@border-color-secondary: lighten(@background-secondary, 10%);
|
||||
@border-color-tertiary: lighten(@background-tertiary, 10%);
|
||||
@border-color-divider: @border-color-secondary;
|
||||
|
||||
@text-color: #C2C2C2;
|
||||
@text-color-subtle: fadeout(@text-color, 20%);
|
||||
|
|
@ -24,17 +27,14 @@
|
|||
@text-color-inverse-very-subtle: fadeout(@text-color-inverse, 50%);
|
||||
@text-color-heading: #FFF;
|
||||
|
||||
@border-primary-bg: lighten(@background-primary, 10%);
|
||||
@border-secondary-bg: lighten(@background-secondary, 10%);
|
||||
@border-tertiary-bg: lighten(@background-tertiary, 10%);
|
||||
@border-color-divider: @border-secondary-bg;
|
||||
@btn-default-bg-color: #404040;
|
||||
@dropdown-default-bg-color: #404040;
|
||||
|
||||
@input-bg: #242424;
|
||||
@input-border: @border-color-divider;
|
||||
|
||||
@list-bg: #333;
|
||||
@list-border: #383838;
|
||||
|
||||
@list-selected-color: @text-color-inverse;
|
||||
|
||||
@toolbar-background-color: @background-secondary;
|
||||
|
|
@ -50,7 +50,7 @@ img.content-light {
|
|||
}
|
||||
|
||||
.popover {
|
||||
border: 1px solid @border-primary-bg;
|
||||
border: 1px solid @border-color-primary;
|
||||
}
|
||||
|
||||
.mail-label {
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
@accent-primary: #f07746;
|
||||
@accent-primary-dark: darken(#f07746, 1%);
|
||||
|
||||
@border-secondary-bg: lighten(@background-secondary, 10%);
|
||||
@border-color-secondary: lighten(@background-secondary, 10%);
|
||||
|
||||
@toolbar-background-color: #41403b;
|
||||
@light: rgb(246, 246, 246);
|
||||
|
|
|
|||
|
|
@ -5,6 +5,6 @@ nylas-theme-wrap {
|
|||
padding-right: @component-padding;
|
||||
padding-bottom: @component-padding;
|
||||
|
||||
color: @input-background-color;
|
||||
color: @input-bg;
|
||||
background-color: @spec-test-variable; // From the fallback variables, not overridden
|
||||
}
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@
|
|||
&.open.open-up {
|
||||
.secondary-items {
|
||||
border-radius: @border-radius-base @border-radius-base 0 @border-radius-base;
|
||||
box-shadow: 0 0.5px 0 rgba(0,0,0,0.15), 0 -0.5px 0 rgba(0,0,0,0.15), 0.5px 0 0 rgba(0,0,0,0.15), -0.5px 0 0 rgba(0,0,0,0.15), 0 -3px 12px rgba(0, 0, 0, 0.2);
|
||||
box-shadow: 0 0.5px 0 @standard-shadow-color, 0 -0.5px 0 @standard-shadow-color, 0.5px 0 0 @standard-shadow-color, -0.5px 0 0 @standard-shadow-color, 0 -3px 12px @standard-shadow-color;
|
||||
top: -100%;
|
||||
transform:translate(0, -6px);
|
||||
}
|
||||
|
|
@ -24,7 +24,7 @@
|
|||
&.open.open-down {
|
||||
.secondary-items {
|
||||
border-radius: @border-radius-base 0 @border-radius-base @border-radius-base;
|
||||
box-shadow: 0 0.5px 0 rgba(0,0,0,0.15), 0 -0.5px 0 rgba(0,0,0,0.15), 0.5px 0 0 rgba(0,0,0,0.15), -0.5px 0 0 rgba(0,0,0,0.15), 0 5px 12px rgba(0, 0, 0, 0.2);
|
||||
box-shadow: 0 0.5px 0 @standard-shadow-color, 0 -0.5px 0 @standard-shadow-color, 0.5px 0 0 @standard-shadow-color, -0.5px 0 0 @standard-shadow-color, 0 5px 12px @standard-shadow-color;
|
||||
transform:translate(0, 1.5px);
|
||||
}
|
||||
.secondary-picker {
|
||||
|
|
@ -56,7 +56,7 @@
|
|||
|
||||
.secondary-picker {
|
||||
.btn();
|
||||
box-shadow: rgba(0, 0, 0, 0.15) 0 0.5px 0, rgba(0, 0, 0, 0.15) 0 -0.5px 0, rgba(0, 0, 0, 0.15) 0.5px 0 0, rgba(0, 0, 0, 0.15) 0 0.5px 1px;
|
||||
box-shadow: @standard-shadow-color 0 0.5px 0, @standard-shadow-color 0 -0.5px 0, @standard-shadow-color 0.5px 0 0, @standard-shadow-color 0 0.5px 1px;
|
||||
border-radius: 0 @border-radius-base @border-radius-base 0;
|
||||
border-left: 0;
|
||||
padding: 0 6px;
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@
|
|||
.items-wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border: 1px solid @border-secondary-bg;
|
||||
border: 1px solid @border-color-secondary;
|
||||
background-color: @background-primary;
|
||||
height: 90px;
|
||||
font-size: 0.9em;
|
||||
|
|
@ -97,7 +97,7 @@
|
|||
|
||||
.buttons-wrapper {
|
||||
display: flex;
|
||||
border: 1px solid @border-secondary-bg;
|
||||
border: 1px solid @border-color-secondary;
|
||||
border-top: none;
|
||||
background-color: @background-secondary;
|
||||
|
||||
|
|
@ -107,7 +107,7 @@
|
|||
height: 25px;
|
||||
width: 25px;
|
||||
line-height: 25px;
|
||||
border-right: 1px solid @border-secondary-bg;
|
||||
border-right: 1px solid @border-color-secondary;
|
||||
font-size: 1em;
|
||||
cursor: default;
|
||||
color: @text-color-subtle;
|
||||
|
|
|
|||
|
|
@ -35,7 +35,7 @@
|
|||
|
||||
.form-error {
|
||||
position: absolute;
|
||||
color: @error-color;
|
||||
color: @color-error;
|
||||
font-size: @font-size-smaller;
|
||||
margin-top: 0.3em;
|
||||
}
|
||||
|
|
@ -48,7 +48,7 @@
|
|||
|
||||
textarea {
|
||||
width: 100%;
|
||||
border: 1px solid @input-border;
|
||||
border: 1px solid @input-border-color;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -82,7 +82,7 @@
|
|||
font-size: @font-size-larger;
|
||||
background: #fff;
|
||||
border: 0;
|
||||
border-bottom: 3px solid @input-border;
|
||||
border-bottom: 3px solid @input-border-color;
|
||||
border-radius: 4px;
|
||||
padding: 7px 35px 2px 35px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
.header-container {
|
||||
flex-shrink: 0; // Don't squish the header! There may be a search box here
|
||||
background-color: @background-secondary;
|
||||
border-bottom: 1px solid @base-border-color;
|
||||
border-bottom: 1px solid @border-color-secondary;
|
||||
padding: 3px;
|
||||
position: relative;
|
||||
}
|
||||
|
|
@ -52,7 +52,7 @@
|
|||
|
||||
.item.divider {
|
||||
font-weight:@headings-font-weight;
|
||||
color: @menu-divider-color;
|
||||
color: @border-color-divider;
|
||||
font-size: @font-size-small;
|
||||
text-transform: uppercase;
|
||||
margin-top: 10px;
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@
|
|||
position: relative;
|
||||
|
||||
.content-container {
|
||||
border: 1px solid @border-secondary-bg;
|
||||
border: 1px solid @border-color-secondary;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.2);
|
||||
border-radius: @border-radius-small;
|
||||
background-color: @background-primary;
|
||||
|
|
|
|||
|
|
@ -23,7 +23,7 @@ input[type="url"] {
|
|||
color: @text-color;
|
||||
|
||||
border-radius: @border-radius-base;
|
||||
border: 1px solid @input-border;
|
||||
border: 1px solid @input-border-color;
|
||||
|
||||
&:disabled {
|
||||
background: fadeout(@input-bg, 40%);
|
||||
|
|
@ -56,12 +56,12 @@ body.platform-win32 {
|
|||
input[type="url"] {
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
box-shadow: 0 0 0 2px @input-border;
|
||||
box-shadow: 0 0 0 2px @input-border-color;
|
||||
|
||||
&:focus {
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
box-shadow: 0 0 0 2px darken(@input-border, 20%);
|
||||
box-shadow: 0 0 0 2px darken(@input-border-color, 20%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -87,7 +87,7 @@ small,
|
|||
|
||||
mark,
|
||||
.mark {
|
||||
background-color: @state-warning-bg;
|
||||
background-color: #fcf8e3;
|
||||
padding: .2em;
|
||||
}
|
||||
|
||||
|
|
@ -111,16 +111,16 @@ mark,
|
|||
.text-emphasis-variant(@accent-primary);
|
||||
}
|
||||
.text-success {
|
||||
.text-emphasis-variant(@state-success-text);
|
||||
.text-emphasis-variant(#3c763d);
|
||||
}
|
||||
.text-info {
|
||||
.text-emphasis-variant(@state-info-text);
|
||||
.text-emphasis-variant(#31708f);
|
||||
}
|
||||
.text-warning {
|
||||
.text-emphasis-variant(@state-warning-text);
|
||||
.text-emphasis-variant(#8a6d3b);
|
||||
}
|
||||
.text-danger {
|
||||
.text-emphasis-variant(@state-danger-text);
|
||||
.text-emphasis-variant(#a94442);
|
||||
}
|
||||
|
||||
// Contextual backgrounds
|
||||
|
|
@ -133,16 +133,16 @@ mark,
|
|||
.bg-variant(@accent-primary);
|
||||
}
|
||||
.bg-success {
|
||||
.bg-variant(@state-success-bg);
|
||||
.bg-variant(#dff0d8);
|
||||
}
|
||||
.bg-info {
|
||||
.bg-variant(@state-info-bg);
|
||||
.bg-variant(#d9edf7);
|
||||
}
|
||||
.bg-warning {
|
||||
.bg-variant(@state-warning-bg);
|
||||
.bg-variant(#fcf8e3);
|
||||
}
|
||||
.bg-danger {
|
||||
.bg-variant(@state-danger-bg);
|
||||
.bg-variant(#f2dede);
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -204,7 +204,7 @@ abbr[title],
|
|||
// Add data-* attribute to help out our tooltip plugin, per https://github.com/twbs/bootstrap/issues/5257
|
||||
abbr[data-original-title] {
|
||||
cursor: help;
|
||||
border-bottom: 1px dotted @abbr-border-color;
|
||||
border-bottom: 1px dotted @gray-light;
|
||||
}
|
||||
.initialism {
|
||||
font-size: 90%;
|
||||
|
|
@ -215,7 +215,7 @@ abbr[data-original-title] {
|
|||
blockquote {
|
||||
padding: (@line-height-computed / 2) @line-height-computed;
|
||||
margin: 0 0 @line-height-computed;
|
||||
border-left: 5px solid @blockquote-border-color;
|
||||
border-left: 5px solid @gray-lighter;
|
||||
|
||||
p,
|
||||
ul,
|
||||
|
|
@ -233,7 +233,7 @@ blockquote {
|
|||
display: block;
|
||||
font-size: 80%; // back to default font-size
|
||||
line-height: @line-height-base;
|
||||
color: @blockquote-small-color;
|
||||
color: @gray-light;
|
||||
|
||||
&:before {
|
||||
content: '\2014 \00A0'; // em dash, nbsp
|
||||
|
|
@ -248,7 +248,7 @@ blockquote {
|
|||
blockquote.pull-right {
|
||||
padding-right: 15px;
|
||||
padding-left: 0;
|
||||
border-right: 5px solid @blockquote-border-color;
|
||||
border-right: 5px solid @gray-lighter;
|
||||
border-left: 0;
|
||||
text-align: right;
|
||||
|
||||
|
|
|
|||
|
|
@ -14,19 +14,10 @@
|
|||
// 4. Generic usage descriptor (.btn-text, .p-body)
|
||||
// 5. Application-specific usage (.message-list-h1)
|
||||
|
||||
//=============================== Colors ===============================//
|
||||
//== Brand colors
|
||||
@nylas-yellow: #D5DC28;
|
||||
@nylas-yellow-dark: #A0C23A;
|
||||
@nylas-green: #5CB346;
|
||||
@nylas-green-dark: #078E46;
|
||||
@nylas-blue: #11A1A2;
|
||||
@nylas-blue-dark: #0F7982;
|
||||
@nylas-black: #313435;
|
||||
@nylas-gray: #434648;
|
||||
|
||||
//== Generic colors
|
||||
@black: @nylas-black;
|
||||
//=============================== Colors ===============================//
|
||||
//== Color Definitions
|
||||
@black: #231f20;
|
||||
@gray-base: #0a0b0c;
|
||||
@gray-darker: lighten(@gray-base, 13.5%); // #222
|
||||
@gray-dark: lighten(@gray-base, 20%); // #333
|
||||
|
|
@ -35,57 +26,54 @@
|
|||
@gray-lighter: lighten(@gray-base, 92.5%); // #eee
|
||||
@white: #ffffff;
|
||||
|
||||
@blue: #419bf9;
|
||||
@blue-dark: #3187e1;
|
||||
@blue: #419bf9;
|
||||
@blue-light: #009ec4;
|
||||
|
||||
//== Color descriptors
|
||||
//== Color Descriptors
|
||||
@accent-primary: @blue;
|
||||
@accent-primary-dark: @blue-dark;
|
||||
@accent-secondary: @nylas-yellow;
|
||||
|
||||
@background-primary: #ffffff;
|
||||
@background-primary: @white;
|
||||
@background-off-primary: #fdfdfd;
|
||||
@background-secondary: #f6f6f6;
|
||||
@background-tertiary: #6d7987;
|
||||
@background-selected: @light-blue;
|
||||
|
||||
@border-primary-bg: darken(@background-primary, 10%);
|
||||
@border-secondary-bg: darken(@background-secondary, 10%);
|
||||
@border-tertiary-bg: darken(@background-tertiary, 10%);
|
||||
@border-color-divider: @border-secondary-bg;
|
||||
@color-info: @blue-dark;
|
||||
@color-success: #5CB346;
|
||||
@color-warning: #f0ad4e;
|
||||
@color-error: #d9534f;
|
||||
@color-danger: #d9534f;
|
||||
|
||||
@info-color: @blue-dark;
|
||||
@success-color: @nylas-green;
|
||||
@warning-color: #f0ad4e;
|
||||
@error-color: #d9534f;
|
||||
@danger-color: #d9534f;
|
||||
@component-active-color: @accent-primary-dark;
|
||||
@component-active-bg: @background-primary;
|
||||
|
||||
@background-gradient: linear-gradient(to top, rgba(241,241,241,0.75) 0%,
|
||||
rgba(253,253,253,0.75) 100%);
|
||||
|
||||
@border-color-primary: darken(@background-primary, 10%);
|
||||
@border-color-secondary: darken(@background-secondary, 10%);
|
||||
@border-color-tertiary: darken(@background-tertiary, 10%);
|
||||
@border-color-divider: @border-color-secondary;
|
||||
|
||||
|
||||
//============================= Typography =============================//
|
||||
|
||||
// ----- 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-inverse-subtle: fadeout(@text-color-inverse, 20%);
|
||||
@text-color-inverse-very-subtle: fadeout(@text-color-inverse, 50%);
|
||||
@text-color-alert: #e64d65;
|
||||
@text-color: @black;
|
||||
@text-color-subtle: fadeout(@text-color, 20%);
|
||||
@text-color-very-subtle: fadeout(@text-color, 50%);
|
||||
@text-color-inverse: @white;
|
||||
@text-color-inverse-subtle: fadeout(@text-color-inverse, 20%);
|
||||
@text-color-inverse-very-subtle: fadeout(@text-color-inverse, 50%);
|
||||
|
||||
@text-color-heading: @nylas-gray;
|
||||
@text-color-heading: #434648;
|
||||
|
||||
@text-color-link: @blue;
|
||||
@text-color-link-hover: @blue-dark;
|
||||
@text-color-link-active: @blue-dark;
|
||||
|
||||
@text-color-selected: @text-color-inverse;
|
||||
@text-color-highlight: @text-color;
|
||||
|
||||
@text-color-info: @info-color;
|
||||
@text-color-success: @success-color;
|
||||
@text-color-warning: @warning-color;
|
||||
@text-color-error: @error-color;
|
||||
@text-color-destructive: @danger-color;
|
||||
|
||||
@text-color-search-match: #fff000;
|
||||
@text-color-search-current-match: #ff8b1a;
|
||||
|
|
@ -94,8 +82,7 @@
|
|||
@font-family-serif: Georgia, "Times New Roman", Times, serif;
|
||||
@font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace;
|
||||
|
||||
@font-family-base: @font-family-sans-serif;
|
||||
@font-family: @font-family-base;
|
||||
@font-family: @font-family-sans-serif;
|
||||
@font-family-heading: @font-family-sans-serif;
|
||||
|
||||
// ----- Font Weights -----
|
||||
|
|
@ -109,19 +96,19 @@
|
|||
// ----- Font Sizes -----
|
||||
@font-size-base: 14px;
|
||||
|
||||
@font-size-tiny: @font-size-base * 0.70; // 10.5px
|
||||
@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-tiny: @font-size-base * 0.75; // 10.5px
|
||||
@font-size-smaller: @font-size-base * 0.86; // 12px
|
||||
@font-size-small: @font-size-base * 0.93; // 13px
|
||||
@font-size: @font-size-base; // 14px
|
||||
@font-size-large: @font-size-base * 1.14; // 16px
|
||||
@font-size-larger: @font-size-base * 1.29; // 18px
|
||||
|
||||
@font-size-h1: @font-size-base * 1.6; // 24px
|
||||
@font-size-h2: @font-size-base * 1.6; // 24px
|
||||
@font-size-h3: @font-size-base * 1.4; // 24px
|
||||
@font-size-h4: @font-size-base * 1.25; // 18px
|
||||
@font-size-h1: @font-size-base * 1.71; // 24px
|
||||
@font-size-h2: @font-size-base * 1.71; // 24px
|
||||
@font-size-h3: @font-size-base * 1.43; // 20px
|
||||
@font-size-h4: @font-size-base * 1.29; // 18px
|
||||
@font-size-h5: @font-size-base;
|
||||
@font-size-h6: @font-size-base * 0.85; // 12px
|
||||
@font-size-h6: @font-size-base * 0.86; // 12px
|
||||
|
||||
// ----- Line Height -----
|
||||
@line-height-base: 1.5; // 22.5/15
|
||||
|
|
@ -129,18 +116,6 @@
|
|||
@line-height-heading: 1.1;
|
||||
|
||||
|
||||
//============================ Iconography =============================//
|
||||
// Specify custom location and filename of the included Glyphicons icon
|
||||
// font. Useful for those including Bootstrap via Bower.
|
||||
|
||||
//** Load fonts from this directory.
|
||||
@icon-font-path: "../fonts/";
|
||||
//** File name for all font files.
|
||||
@icon-font-name: "glyphicons-halflings-regular";
|
||||
//** Element ID within SVG icon file.
|
||||
@icon-font-svg-id: "glyphicons_halflingsregular";
|
||||
|
||||
|
||||
//============================== Spacing ===============================//
|
||||
// Define common padding and border radius sizes and more. Values based on
|
||||
// 14px text and 1.428 line-height (~20px to start).
|
||||
|
|
@ -150,11 +125,7 @@
|
|||
@spacing-quarter: @spacing-standard * 0.25;
|
||||
@spacing-half: @spacing-standard * 0.5;
|
||||
@spacing-three-quarters: @spacing-standard * 0.75;
|
||||
|
||||
@spacing-sub-double: @spacing-standard * 1.75;
|
||||
@spacing-double: @spacing-standard * 2;
|
||||
@spacing-super-double: @spacing-standard * 2.25;
|
||||
|
||||
|
||||
@padding-base-vertical: 5px;
|
||||
@padding-base-horizontal: 12px;
|
||||
|
|
@ -177,9 +148,13 @@
|
|||
|
||||
|
||||
//============================== Shadows ===============================//
|
||||
@standard-shadow-color: rgba(0, 0, 0, 0.21);
|
||||
|
||||
@standard-shadow-color: rgba(0, 0, 0, 0.15);
|
||||
@standard-shadow: 0 1px 4px 0 @standard-shadow-color;
|
||||
@standard-shadow-up: 0 -1px 4px 0 @standard-shadow-color;
|
||||
@shadow-border: 0 0.5px 0 @standard-shadow-color, 0 -0.5px 0 @standard-shadow-color,
|
||||
0.5px 0 0 @standard-shadow-color, -0.5px 0 0 @standard-shadow-color;
|
||||
|
||||
|
||||
//=============================== Buttons ==============================//
|
||||
|
||||
|
|
@ -188,268 +163,77 @@
|
|||
@btn-default-bg-color: darken(@background-primary, 0.5%);
|
||||
@btn-default-text-color: @text-color;
|
||||
|
||||
@btn-action-bg-color: @success-color;
|
||||
@btn-action-bg-color: @color-success;
|
||||
@btn-action-text-color: @text-color;
|
||||
|
||||
@btn-emphasis-bg-color: #5b90fb;
|
||||
@btn-emphasis-text-color: @text-color-inverse;
|
||||
|
||||
@btn-danger-bg-color: @danger-color;
|
||||
@btn-danger-bg-color: @color-danger;
|
||||
@btn-danger-text-color: @text-color-inverse;
|
||||
|
||||
|
||||
//=============================== Dropdowns ============================//
|
||||
|
||||
@dropdown-default-bg-color: @background-primary;
|
||||
@dropdown-default-text-color: @text-color;
|
||||
@dropdown-default-border-color: fadeout(@border-color, 10%);
|
||||
@dropdown-default-border-color: fadeout(@border-color-primary, 10%);
|
||||
|
||||
|
||||
//=============================== Inputs ===============================//
|
||||
|
||||
//** `<input>` background color
|
||||
@input-bg: #fff;
|
||||
//** `<input disabled>` background color
|
||||
@input-bg: @white;
|
||||
@input-bg-disabled: @gray-lighter;
|
||||
|
||||
@input-background-color: white;
|
||||
|
||||
@input-border-color: fadeout(@border-color, 10%);
|
||||
@input-border-color: fadeout(@border-color-primary, 10%);
|
||||
@input-border-color-blurred: desaturate(@input-border-color, 100%);
|
||||
|
||||
@input-tint-color: fade(@background-selected, 10%);
|
||||
@input-tint-color-hover: fade(@input-tint-color, 30%);
|
||||
@input-tint-color-blurred: desaturate(@input-tint-color, 100%);
|
||||
|
||||
|
||||
@input-accessory-color-hover: @light-blue;
|
||||
@input-accessory-color: @gray-light;
|
||||
@input-cancel-color: @red;
|
||||
|
||||
//** Text color for `<input>`s
|
||||
@input-color: @gray;
|
||||
//** `<input>` border color
|
||||
@input-border: #ccc;
|
||||
|
||||
// TODO: Rename `@input-border-radius` to `@input-border-radius-base` in v4
|
||||
//** Default `.form-control` border radius
|
||||
@input-border-radius: @border-radius-base;
|
||||
//** Large `.form-control` border radius
|
||||
@input-border-radius-large: @border-radius-large;
|
||||
//** Small `.form-control` border radius
|
||||
@input-border-radius-small: @border-radius-small;
|
||||
|
||||
//** Border color for inputs on focus
|
||||
@input-border-focus: #66afe9;
|
||||
|
||||
//** Placeholder text color
|
||||
@input-color-placeholder: #999;
|
||||
|
||||
//** Default `.form-control` height
|
||||
@input-height-base: (@line-height-computed + (@padding-base-vertical * 2) + 2);
|
||||
//** Large `.form-control` height
|
||||
@input-height-large: (ceil(@font-size-large * @line-height-large) + (@padding-large-vertical * 2) + 2);
|
||||
//** Small `.form-control` height
|
||||
@input-height-small: (floor(@font-size-small * @line-height-small) + (@padding-small-vertical * 2) + 2);
|
||||
|
||||
//** Background color for textual input addons
|
||||
@input-group-addon-bg: @gray-lighter;
|
||||
//** Border color for textual input addons
|
||||
@input-group-addon-border-color: @input-border;
|
||||
|
||||
|
||||
//=============================== Z-Index ==============================//
|
||||
//-- Z-index master list
|
||||
//
|
||||
// Warning: Avoid customizing these values. They're used for a bird's eye
|
||||
// view of components dependent on the z-axis and are designed to all work
|
||||
// together.
|
||||
//
|
||||
// Note: These variables are not generated into the Customizer.
|
||||
|
||||
@zindex-navbar: 1000;
|
||||
@zindex-dropdown: 1000;
|
||||
@zindex-popover: 1060;
|
||||
@zindex-tooltip: 1070;
|
||||
@zindex-navbar-fixed: 1030;
|
||||
@zindex-modal: 1040;
|
||||
|
||||
|
||||
|
||||
//** Global color for active items (e.g., navs or dropdowns).
|
||||
@component-active-color: @accent-primary-dark;
|
||||
//** Global background color for active items (e.g., navs or dropdowns).
|
||||
@component-active-bg: @background-primary;
|
||||
|
||||
@component-secondary-active-bg: @background-primary;
|
||||
|
||||
//== Source List (used in Sidebar, iTunes-style)
|
||||
//
|
||||
// ##
|
||||
|
||||
//** Background color on `.list-group-item`
|
||||
@source-list-bg: @panel-background-color;
|
||||
//** Background color of active list items
|
||||
@source-list-active-bg: @panel-background-color;
|
||||
//** Text color of active list items
|
||||
@source-list-active-color: @component-active-color;
|
||||
|
||||
//== List
|
||||
//
|
||||
//##
|
||||
|
||||
//** Background color on `.list-group-item`
|
||||
@list-bg: #fff;
|
||||
//** `.list-item` border color
|
||||
@list-border: #ddd;
|
||||
//** List group border radius
|
||||
@list-border-radius: @border-radius-base;
|
||||
|
||||
//** Background color of single list items on hover
|
||||
@list-hover-bg: darken(@list-bg, 4%);
|
||||
|
||||
//** Text color of active list items
|
||||
@list-focused-color: @list-bg;
|
||||
//** Background color of active list items
|
||||
@list-focused-bg: @component-active-color;
|
||||
//** Border color of active list elements
|
||||
@list-focused-border: @list-focused-bg;
|
||||
//** Text color for content within active list items
|
||||
@list-focused-color-muted: lighten(@list-focused-bg, 40%);
|
||||
|
||||
//** Text color of active list items
|
||||
@list-selected-color: inherit;
|
||||
//** Background color of active list items
|
||||
@list-selected-bg: mix(@component-active-color, @list-bg, 17%);
|
||||
//** Border color of active list elements
|
||||
@list-selected-border: mix(@component-active-color, @list-bg, 50%);
|
||||
//** Text color for content within active list items
|
||||
@list-selected-color-muted: lighten(@list-selected-bg, 40%);
|
||||
|
||||
//** Text color of disabled list items
|
||||
@list-disabled-color: @gray-light;
|
||||
//** Background color of disabled list items
|
||||
@list-disabled-bg: @gray-lighter;
|
||||
//** Text color for content within disabled list items
|
||||
@list-disabled-text-color: @list-disabled-color;
|
||||
|
||||
|
||||
//** Abbreviations and acronyms border color
|
||||
@abbr-border-color: @gray-light;
|
||||
//** Blockquote small color
|
||||
@blockquote-small-color: @gray-light;
|
||||
//** Blockquote font size
|
||||
@blockquote-font-size: (@font-size-base * 1.25);
|
||||
//** Blockquote border color
|
||||
@blockquote-border-color: @gray-lighter;
|
||||
|
||||
|
||||
|
||||
//== Form states and alerts
|
||||
//
|
||||
//## Define colors for form feedback states and, by default, alerts.
|
||||
|
||||
@state-success-text: #3c763d;
|
||||
@state-success-bg: #dff0d8;
|
||||
@state-success-border: darken(spin(@state-success-bg, -10), 5%);
|
||||
|
||||
@state-info-text: #31708f;
|
||||
@state-info-bg: #d9edf7;
|
||||
@state-info-border: darken(spin(@state-info-bg, -10), 7%);
|
||||
|
||||
@state-warning-text: #8a6d3b;
|
||||
@state-warning-bg: #fcf8e3;
|
||||
@state-warning-border: darken(spin(@state-warning-bg, -10), 5%);
|
||||
|
||||
@state-danger-text: #a94442;
|
||||
@state-danger-bg: #f2dede;
|
||||
@state-danger-border: darken(spin(@state-danger-bg, -10), 5%);
|
||||
|
||||
/////
|
||||
|
||||
// -------------
|
||||
// EVERYTHING BELOW THIS NEEDS TO BE DEPRECATED OR MOVED ABOVE THIS
|
||||
// old stuff
|
||||
// -------------
|
||||
|
||||
// Private
|
||||
//
|
||||
// Do not use these colors outside of this file.
|
||||
// You should choose variables based on the role of your
|
||||
// interface elements. In other themes, @light-blue may
|
||||
// not be light or blue.
|
||||
|
||||
@PANTONE-340-UP: #00ac6f;
|
||||
@PANTONE-7704-UP: #009ec4;
|
||||
@PANTONE-7547-UP: #3c505f;
|
||||
@PANTONE-296-UP: #003c56;
|
||||
@PANTONE-421-UP: #b4babd;
|
||||
@PANTONE-Red-032-UP: #f15f4b;
|
||||
@PANTONE-326-UP: #3bbeb4;
|
||||
@PANTONE-Process-Black-UP: #231f20;
|
||||
@PANTONE-Cool-Gray-1-UP: #e1e0dc;
|
||||
|
||||
@green: @PANTONE-340-UP;
|
||||
@light-blue: @PANTONE-7704-UP;
|
||||
@blue-gray: @PANTONE-7547-UP;
|
||||
@dark-blue: @PANTONE-296-UP;
|
||||
@light-gray: @PANTONE-421-UP;
|
||||
@red: @PANTONE-Red-032-UP;
|
||||
@teal: @PANTONE-326-UP;
|
||||
@black: @PANTONE-Process-Black-UP;
|
||||
@cool-gray: @PANTONE-Cool-Gray-1-UP;
|
||||
|
||||
@blue-grey: @blue-gray;
|
||||
@light-grey: @light-gray;
|
||||
|
||||
// Public
|
||||
//
|
||||
// Use these variables in your packages. Choose the variable
|
||||
// that best matches the role of the element you are styling.
|
||||
|
||||
// TEXT
|
||||
|
||||
@unread-color: @blue; //!
|
||||
@action-color: @green;
|
||||
|
||||
@progress-bar-fill: @light-blue;
|
||||
@progress-bar-background: @light-gray;
|
||||
|
||||
@background-color-info: @light-blue;
|
||||
@background-color-success: @green;
|
||||
@background-color-warning: #ff4800;
|
||||
@background-color-error: @red;
|
||||
@background-color-pending: @light-gray;
|
||||
|
||||
@background-gradient: linear-gradient(to top, rgba(241,241,241,0.75) 0%,
|
||||
rgba(253,253,253,0.75) 100%);
|
||||
|
||||
@base-border-color: darken(@background-primary, 15%);
|
||||
@border-color: darken(@background-primary, 15%);
|
||||
@border-color-subtle: darken(@background-primary, 8%);
|
||||
|
||||
// Inputs
|
||||
|
||||
// Menus
|
||||
|
||||
@menu-divider-color: @light-gray;
|
||||
@menu-item-color-hover: fade(@background-selected, 10%);
|
||||
@menu-item-color-selected: @background-selected;
|
||||
@menu-text-color-selected: @text-color-inverse;
|
||||
|
||||
// Sizes
|
||||
|
||||
@disclosure-arrow-size: 12px;
|
||||
@input-font-size: 14px;
|
||||
|
||||
@component-padding: 10px;
|
||||
@component-icon-padding: 5px;
|
||||
@component-icon-size: 16px;
|
||||
@component-line-height: 25px;
|
||||
|
||||
//=============================== Components ===========================//
|
||||
|
||||
//== Toolbar
|
||||
@toolbar-background-color: darken(@white, 17.5%);
|
||||
|
||||
//== Account Sidebar
|
||||
@panel-background-color: @gray-lighter;
|
||||
@source-list-bg: @panel-background-color;
|
||||
@source-list-active-bg: @panel-background-color;
|
||||
@source-list-active-color: @component-active-color;
|
||||
|
||||
//== Thread List (e.g, `.list-group-item`, `.list-item`)
|
||||
@list-bg: @white;
|
||||
@list-border: #ddd;
|
||||
@list-hover-bg: darken(@list-bg, 4%);
|
||||
@list-focused-color: @list-bg;
|
||||
@list-focused-bg: @component-active-color;
|
||||
@list-focused-border: @list-focused-bg;
|
||||
@list-selected-color: inherit;
|
||||
@list-selected-bg: mix(@component-active-color, @list-bg, 17%);
|
||||
@list-selected-border: mix(@component-active-color, @list-bg, 50%);
|
||||
|
||||
//== Notifications
|
||||
@background-color-info: @blue-light;
|
||||
@background-color-success: #009ec4;
|
||||
@background-color-warning: #ff4800;
|
||||
@background-color-error: #f15f4b;
|
||||
@background-color-pending: #b4babd;
|
||||
|
||||
//== Menus
|
||||
@menu-item-color-hover: fade(@blue-light, 10%);
|
||||
@menu-item-color-selected: @blue-light;
|
||||
@menu-text-color-selected: @text-color-inverse;
|
||||
|
||||
//== Sizes
|
||||
@disclosure-arrow-size: 12px;
|
||||
|
||||
@component-padding: 10px;
|
||||
@component-icon-padding: 5px;
|
||||
@component-icon-size: 16px;
|
||||
@component-line-height: 25px;
|
||||
@component-border-radius: 2px;
|
||||
|
||||
|
||||
//== Panels and Sidebars
|
||||
@panel-background-color: @gray-lighter;
|
||||
@toolbar-background-color: darken(@white, 17.5%);
|
||||
|
||||
// Helpers for Specs - Do Not Remove
|
||||
@spec-test-variable: rgb(152,123,0);
|
||||
|
|
|
|||
Loading…
Reference in a new issue