rmorawski/standardnotes-app-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Style cleanup

Browse Source
This commit is contained in:
Mo Bitar
2018-12-07 18:59:28 -06:00
parent 285bb76c7a
commit c0e702805c
14 changed files with 209 additions and 246 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
app/assets/stylesheets/app/_editor.scss
View File

@@ -4,7 +4,7 @@ $heading-height: 75px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
overflow-y: hidden; overflow-y: hidden;
background-color: white; background-color: var(--sn-stylekit-background-color);
} }
.locked { .locked {
@@ -19,7 +19,6 @@ $heading-height: 75px;
padding-bottom: 10px; padding-bottom: 10px;
padding-right: 10px; padding-right: 10px;
background-color: white;
border-bottom: none; border-bottom: none;
z-index: $z-index-editor-title-bar; z-index: $z-index-editor-title-bar;
@@ -41,9 +40,10 @@ $heading-height: 75px;
border: none; border: none;
outline: none; outline: none;
background-color: transparent; background-color: transparent;
color: var(--sn-stylekit-foreground-color);
&:disabled { &:disabled {
color: black; color: var(--sn-stylekit-foreground-color);
} }
} }
@@ -60,17 +60,12 @@ $heading-height: 75px;
font-weight: normal; font-weight: normal;
margin-top: 4px; margin-top: 4px;
text-align: right; text-align: right;
color: rgba(black, 0.23); color: var(--sn-stylekit-contrast-background-color);
&.error, .error {
color: #f6a200;
}
} }
.editor-tags { .editor-tags {
clear: left; clear: left;
width: 100%; width: 100%;
// height: 25px;
overflow: visible; overflow: visible;
position: relative; position: relative;
@@ -88,6 +83,7 @@ $heading-height: 75px;
.tags-input { .tags-input {
background-color: transparent; background-color: transparent;
color: var(--sn-stylekit-foreground-color);
width: 100%; width: 100%;
border: none; border: none;
} }
@@ -100,7 +96,7 @@ $heading-height: 75px;
overflow-y: hidden; overflow-y: hidden;
height: 100%; height: 100%;
display: flex; display: flex;
background-color: white; background-color: var(--sn-stylekit-background-color);
position: relative; position: relative;
@@ -113,12 +109,14 @@ $heading-height: 75px;
font-family: monospace; font-family: monospace;
overflow-y: scroll; overflow-y: scroll;
width: 100%; width: 100%;
background-color: var(--sn-stylekit-background-color);
color: var(--sn-stylekit-foreground-color);
border: none; border: none;
outline: none; outline: none;
padding: 15px; padding: 15px;
padding-top: 11px; padding-top: 11px;
font-size: 17px; font-size: var(--sn-stylekit-font-size-editor);
resize: none; resize: none;
} }
} }
@@ -129,7 +127,8 @@ $heading-height: 75px;
.component-stack-item { .component-stack-item {
width: 100%; width: 100%;
position: relative; position: relative;
border-top: 1px solid $bg-color; border-top: 1px solid var(--sn-stylekit-border-color);
iframe { iframe {
width: 100%; width: 100%;
} }

4
app/assets/stylesheets/app/_lock-screen.scss
View File

@@ -12,8 +12,8 @@
bottom: 0; bottom: 0;
z-index: $z-index-lock-screen; z-index: $z-index-lock-screen;
background-color: rgba(white, 0.5); background-color: var(--sn-stylekit-background-color);
color: black; color: var(--sn-stylekit-foreground-color);
font-size: 16px; font-size: 16px;
display: flex; display: flex;
align-items: center; align-items: center;

53
app/assets/stylesheets/app/_main.scss
View File

@@ -1,11 +1,3 @@
$main-text-color: black;
$secondary-text-color: rgba($main-text-color, 0.8);
$bg-color: #e3e3e3;
$light-bg-color: #e9e9e9;
$selection-color: $bg-color;
$selected-text-color: black;
$blue-color: #086dd6;
$z-index-editor-content: 10; $z-index-editor-content: 10;
$z-index-editor-title-bar: 100; $z-index-editor-title-bar: 100;
@@ -27,13 +19,13 @@ body {
"Segoe UI", "Roboto", "Oxygen", "Segoe UI", "Roboto", "Oxygen",
"Ubuntu", "Cantarell", "Fira Sans", "Ubuntu", "Cantarell", "Fira Sans",
"Droid Sans", "Helvetica Neue", sans-serif; "Droid Sans", "Helvetica Neue", sans-serif;
color: $main-text-color;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
min-height: 100%; min-height: 100%;
height: 100%; height: 100%;
font-size: 14px; font-size: 14px;
margin: 0; margin: 0;
background-color: $bg-color; color: var(--sn-stylekit-foreground-color);
background-color: var(--sn-stylekit-background-color);
} }
* { * {
@@ -41,11 +33,11 @@ body {
} }
.tinted { .tinted {
color: $blue-color; color: var(--sn-stylekit-info-color);
} }
.tinted-selected { .tinted-selected {
color: white; color: var(--sn-stylekit-info-contrast-color);
} }
*:focus {outline:0;} *:focus {outline:0;}
@@ -61,7 +53,7 @@ input, button, select, textarea {
} }
a { a {
color: $blue-color; color: var(--sn-stylekit-info-color);
text-decoration: none; text-decoration: none;
&.no-decoration { &.no-decoration {
@@ -77,6 +69,16 @@ a {
} }
} }
::selection {
background: var(--sn-stylekit-info-color) !important; /* WebKit/Blink Browsers */
color: var(--sn-stylekit-info-contrast-color);
}
::-moz-selection {
background: var(--sn-stylekit-text-selection-color) !important; /* WebKit/Blink Browsers */
color: white;
}
p { p {
overflow: auto; overflow: auto;
} }
@@ -85,7 +87,7 @@ p {
min-height: 100vh; min-height: 100vh;
height: 100vh; height: 100vh;
overflow: auto; overflow: auto;
background-color: $bg-color; background-color: var(--sn-stylekit-background-color);
} }
$footer-height: 32px; $footer-height: 32px;
@@ -115,7 +117,8 @@ $footer-height: 32px;
height: 100%; height: 100%;
position: absolute; position: absolute;
cursor: col-resize; cursor: col-resize;
background-color: rgba(black, 0.1); // needs to be a color that works on main bg and contrast bg
background-color: var(--sn-stylekit-on-contrast-background-color);
opacity: 0; opacity: 0;
border-top: none; border-top: none;
border-bottom: none; border-bottom: none;
@@ -181,7 +184,7 @@ $footer-height: 32px;
> .content { > .content {
height: 100%; height: 100%;
max-height: 100%; max-height: 100%;
background-color: white; background-color: var(--sn-stylekit-background-color);
position: relative; position: relative;
} }
@@ -205,24 +208,6 @@ $footer-height: 32px;
width: 80%; width: 80%;
overflow: hidden; overflow: hidden;
} }
> .add-button {
$button-bg: #e9e9e9;
color: lighten($main-text-color, 40%);
font-size: 18px;
width: 45px;
height: 24px;
cursor: pointer;
background-color: $button-bg;
border-radius: 4px;
font-weight: normal;
text-align: center;
&:hover {
background-color: darken($button-bg, 5%);
color: lighten($main-text-color, 40%);
}
}
} }
} }
} }

30
app/assets/stylesheets/app/_modals.scss
View File

@@ -2,7 +2,6 @@
width: 350px; width: 350px;
.sk-panel { .sk-panel {
border-radius: 0; border-radius: 0;
background-color: white;
} }
.sk-panel-content { .sk-panel-content {
padding-top: 1.1rem; padding-top: 1.1rem;
@@ -17,7 +16,7 @@
} }
#item-preview-modal { #item-preview-modal {
> .content { > .sk-modal-content {
width: 800px; width: 800px;
height: 500px; height: 500px;
} }
@@ -37,21 +36,17 @@
.border { .border {
height: 100%; height: 100%;
background-color: rgba(black, 0.1); background-color: var(--sn-stylekit-border-color);
width: 1px; width: 1px;
margin: 0 15px; margin: 0 15px;
} }
} }
// .sk-panel {
// background-color: white;
// }
.header .subtitle { .header .subtitle {
font-size: 1.1rem; font-size: 1.1rem;
} }
.modal { .sk-modal {
position: fixed; position: fixed;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
@@ -62,8 +57,9 @@
z-index: $z-index-modal; z-index: $z-index-modal;
width: 100vw; width: 100vw;
height: 100vh; height: 100vh;
background-color: rgba(gray, 0.3);
color: black; background-color: transparent;
color: var(--sn-stylekit-contrast-foreground-color);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@@ -76,40 +72,42 @@
} }
&.auto-height { &.auto-height {
> .content { > .sk-modal-content {
height: auto !important; height: auto !important;
} }
} }
&.large { &.large {
> .content { > .sk-modal-content {
width: 900px; width: 900px;
height: 600px; height: 600px;
} }
} }
&.medium { &.medium {
> .content { > .sk-modal-content {
width: 700px; width: 700px;
height: 500px; height: 500px;
} }
} }
&.small { &.small {
> .content { > .sk-modal-content {
width: 700px; width: 700px;
height: 344px; height: 344px;
} }
} }
.background { .sk-modal-background {
position: absolute; position: absolute;
z-index: -1; z-index: -1;
width: 100%; width: 100%;
height: 100%; height: 100%;
background-color: var(--sn-stylekit-contrast-background-color);
opacity: 0.7;
} }
> .content { > .sk-modal-content {
overflow-y: auto; overflow-y: auto;
width: auto; width: auto;
padding: 0; padding: 0;

29
app/assets/stylesheets/app/_notes.scss
View File

@@ -1,6 +1,6 @@
#notes-column, .notes { #notes-column, .notes {
border-left: 1px solid #dddddd; border-left: 1px solid var(--sn-stylekit-border-color);
border-right: 1px solid #dddddd; border-right: 1px solid var(--sn-stylekit-border-color);
width: 350px; width: 350px;
flex-grow: 0; flex-grow: 0;
@@ -21,15 +21,11 @@
font-size: 18px; font-size: 18px;
.section-title-bar-header .title { .section-title-bar-header .title {
color: rgba(black, 0.40); color: var(--sn-stylekit-neutral-color);
width: calc(90% - 45px); width: calc(90% - 45px);
} }
} }
#notes-add-button {
}
#notes-menu-bar { #notes-menu-bar {
position: relative; position: relative;
margin-top: 14px; margin-top: 14px;
@@ -42,7 +38,7 @@
position: relative; position: relative;
.filter-bar { .filter-bar {
background-color: $light-bg-color; background-color: var(--sn-stylekit-contrast-background-color);
border-radius: 4px; border-radius: 4px;
height: 100%; height: 100%;
color: #909090; color: #909090;
@@ -60,9 +56,9 @@
border-radius: 50%; border-radius: 50%;
width: 17px; width: 17px;
height: 17px; height: 17px;
color: white;
cursor: default; cursor: default;
background-color: gray; background-color: var(--sn-stylekit-neutral-color);
color: var(--sn-stylekit-neutral-contrast-color);
font-size: 10px; font-size: 10px;
line-height: 17px; line-height: 17px;
text-align: center; text-align: center;
@@ -73,7 +69,7 @@
transition: background-color 0.15s linear; transition: background-color 0.15s linear;
&:hover { &:hover {
background-color: $blue-color; background-color: var(--sn-stylekit-info-color);
} }
} }
} }
@@ -102,9 +98,8 @@
.note { .note {
width: 100%; width: 100%;
padding: 15px; padding: 15px;
border-bottom: 1px solid $bg-color; border-bottom: 1px solid var(--sn-stylekit-border-color);
cursor: pointer; cursor: pointer;
background-color: white;
> .name { > .name {
font-weight: 600; font-weight: 600;
@@ -137,11 +132,11 @@
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
$line-height: 18px;
.default-preview, .plain-preview { .default-preview, .plain-preview {
display: -webkit-box; display: -webkit-box;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
-webkit-line-clamp: 1; /* number of lines to show */ -webkit-line-clamp: 1; /* number of lines to show */
$line-height: 18px;
line-height: $line-height; /* fallback */ line-height: $line-height; /* fallback */
max-height: calc(#{$line-height} * 1); /* fallback */ max-height: calc(#{$line-height} * 1); /* fallback */
} }
@@ -159,11 +154,11 @@
} }
&.selected { &.selected {
background-color: $blue-color; background-color: var(--sn-stylekit-info-color);
color: white; color: var(--sn-stylekit-info-contrast-color);
.pinned { .pinned {
color: white; color: var(--sn-stylekit-info-contrast-color);
} }
} }

4
app/assets/stylesheets/app/_stylekit-sub.scss
View File

@@ -12,8 +12,8 @@
} }
.bordered-row { .bordered-row {
border-bottom: 1px solid rgba(black, 0.1); border-bottom: 1px solid var(--sn-stylekit-border-color);
border-top: 1px solid rgba(black, 0.1); border-top: 1px solid var(--sn-stylekit-border-color);
} }
} }

39
app/assets/stylesheets/app/_tags.scss
View File

@@ -6,27 +6,18 @@
-webkit-user-select: none; -webkit-user-select: none;
&, #tags-content { &, #tags-content {
background-color: #f6f6f6; background-color: var(--sn-stylekit-secondary-background-color);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
#tags-title-bar { #tags-title-bar {
color: black; color: var(--sn-stylekit-secondary-foreground-color);
padding-top: 14px; padding-top: 14px;
padding-bottom: 16px; padding-bottom: 16px;
padding-left: 12px; padding-left: 12px;
padding-right: 12px; padding-right: 12px;
font-size: 12px; font-size: 12px;
color: rgba(black, 0.8);
}
#tag-add-button {
background-color: #d7d7d7;
&:hover {
background-color: rgba(#d7d7d7, 0.8);
}
} }
.scrollable { .scrollable {
@@ -62,7 +53,7 @@
background-color: transparent; background-color: transparent;
font-weight: 600; font-weight: 600;
float: left; float: left;
color: $main-text-color; color: var(--sn-stylekit-secondary-foreground-color);
border: none; border: none;
cursor: pointer; cursor: pointer;
text-overflow: ellipsis; text-overflow: ellipsis;
@@ -76,6 +67,7 @@
right: 17px; right: 17px;
padding-top: 1px; padding-top: 1px;
font-weight: bold; font-weight: bold;
color: var(--sn-stylekit-neutral-color);
} }
} }
@@ -97,32 +89,17 @@
} }
} }
$tags-selected-color: #dbdbdb;
&.selected { &.selected {
background-color: $tags-selected-color;
color: $selected-text-color;
> .title { > .title {
color: $selected-text-color;
cursor: text; cursor: text;
} }
} }
/* When a note is dragged over tag */ &:hover:not(.selected), &.selected {
&.over { background-color: var(--sn-stylekit-secondary-contrast-background-color);
background-color: $tags-selected-color; color: var(--sn-stylekit-secondary-contrast-foreground-color);
color: $selected-text-color;
border: 2px dashed white;
> .title { > .title {
color: $selected-text-color; color: var(--sn-stylekit-secondary-contrast-foreground-color);
}
}
&:hover:not(.selected) {
background-color: $tags-selected-color;
color: $selected-text-color;
> .title {
color: $selected-text-color;
} }
} }
} }

7
app/assets/templates/directives/conflict-resolution-modal.html.haml
View File

@@ -1,6 +1,7 @@
.modal.large#conflict-resolution-modal
.content
.sn-component .sn-component
.sk-modal.large#conflict-resolution-modal
.sk-modal-background
.sk-modal-content
.sk-panel .sk-panel
.sk-panel-header .sk-panel-header
%h1.sk-panel-header-title Conflicted items — choose which version to keep %h1.sk-panel-header-title Conflicted items — choose which version to keep
@@ -17,7 +18,7 @@
{{contentType}} {{contentType}}
%p You may wish to look at the "created_at" and "updated_at" fields of the items to gain better context in deciding which to keep. %p You may wish to look at the "created_at" and "updated_at" fields of the items to gain better context in deciding which to keep.
#items #items
.sk-panel.static#item1.item.border-color .sk-panel.static#item1.item
%p.normal{"style" => "white-space: pre-wrap; font-size: 16px;"} {{item1Content}} %p.normal{"style" => "white-space: pre-wrap; font-size: 16px;"} {{item1Content}}
.border .border

6
app/assets/templates/directives/input-modal.html.haml
View File

@@ -1,5 +1,7 @@
.modal.small.auto-height .sn-component
.content .sk-modal.small.auto-height
.sk-modal-background
.sk-modal-content
.sn-component .sn-component
.sk-panel .sk-panel
.sk-panel-header .sk-panel-header

6
app/assets/templates/directives/password-wizard.html.haml
View File

@@ -1,5 +1,7 @@
#password-wizard.modal.small.auto-height .sn-component
.content #password-wizard.sk-modal.small.auto-height
.sk-modal-background
.sk-modal-content
.sn-component .sn-component
.sk-panel .sk-panel
.sk-panel-header .sk-panel-header

6
app/assets/templates/directives/revision-preview-modal.html.haml
View File

@@ -1,5 +1,7 @@
.modal.medium#item-preview-modal .sn-component
.content .sk-modal.medium#item-preview-modal
.sk-modal-background
.sk-modal-content
.sn-component .sn-component
.sk-panel .sk-panel
.sk-panel-header .sk-panel-header

4
app/assets/templates/editor.html.haml
View File

@@ -13,7 +13,7 @@
"ng-change" => "ctrl.nameChanged()", "ng-focus" => "ctrl.onNameFocus()", "ng-blur" => "ctrl.onNameBlur()", "ng-change" => "ctrl.nameChanged()", "ng-focus" => "ctrl.onNameFocus()", "ng-blur" => "ctrl.onNameBlur()",
"select-on-click" => "true", "ng-disabled" => "ctrl.note.locked"} "select-on-click" => "true", "ng-disabled" => "ctrl.note.locked"}
#save-status{"ng-class" => "{'error bold': ctrl.syncTakingTooLong}", "ng-bind-html" => "ctrl.noteStatus"} #save-status{"ng-class" => "{'warning bold': ctrl.syncTakingTooLong}", "ng-bind-html" => "ctrl.noteStatus"}
.editor-tags .editor-tags
#note-tags-component-container{"ng-if" => "ctrl.tagsComponent"} #note-tags-component-container{"ng-if" => "ctrl.tagsComponent"}
@@ -80,5 +80,5 @@
#editor-pane-component-stack #editor-pane-component-stack
.sn-component .sn-component
%component-view.component-view.component-stack-item.border-color{"ng-repeat" => "component in ctrl.componentStack", %component-view.component-view.component-stack-item{"ng-repeat" => "component in ctrl.componentStack",
"ng-if" => "component.active", "ng-show" => "!component.hidden", "manual-dealloc" => "true", "component" => "component"} "ng-if" => "component.active", "ng-show" => "!component.hidden", "manual-dealloc" => "true", "component" => "component"}

5
app/assets/templates/notes.html.haml
View File

@@ -1,10 +1,11 @@
.section.notes#notes-column{"aria-label" => "Notes"} .sn-component.section.notes#notes-column{"aria-label" => "Notes"}
.content .content
.section-title-bar#notes-title-bar .section-title-bar#notes-title-bar
.padded .padded
.section-title-bar-header .section-title-bar-header
.title {{ctrl.panelTitle()}} .title {{ctrl.panelTitle()}}
.add-button#notes-add-button{"ng-click" => "ctrl.createNewNote()", "title" => "Create a new note in the selected tag"} + .sk-button.contrast.wide{"ng-click" => "ctrl.createNewNote()", "title" => "Create a new note in the selected tag"}
.sk-label +
.filter-section{"role" => "search"} .filter-section{"role" => "search"}
%input.filter-bar#search-bar.mousetrap{"select-on-click" => "true", "ng-model" => "ctrl.noteFilter.text", "placeholder" => "Search", %input.filter-bar#search-bar.mousetrap{"select-on-click" => "true", "ng-model" => "ctrl.noteFilter.text", "placeholder" => "Search",
"ng-change" => "ctrl.filterTextChanged()", "lowercase" => "true", "ng-blur" => "ctrl.onFilterEnter()", "ng-keyup" => "$event.keyCode == 13 && ctrl.onFilterEnter();", "ng-change" => "ctrl.filterTextChanged()", "lowercase" => "true", "ng-blur" => "ctrl.onFilterEnter()", "ng-keyup" => "$event.keyCode == 13 && ctrl.onFilterEnter();",

5
app/assets/templates/tags.html.haml
View File

@@ -1,4 +1,4 @@
.section.tags#tags-column{"aria-label" => "Tags"} .sn-component.section.tags#tags-column{"aria-label" => "Tags"}
.component-view-container{"ng-if" => "ctrl.component.active"} .component-view-container{"ng-if" => "ctrl.component.active"}
%component-view.component-view{"component" => "ctrl.component"} %component-view.component-view{"component" => "ctrl.component"}
@@ -7,7 +7,8 @@
#tags-title-bar.section-title-bar #tags-title-bar.section-title-bar
.section-title-bar-header .section-title-bar-header
.title Tags .title Tags
.add-button#tag-add-button{"ng-click" => "ctrl.clickedAddNewTag()", "title" => "Create a new tag"} + .sk-button.sk-secondary-contrast.wide{"ng-click" => "ctrl.clickedAddNewTag()", "title" => "Create a new tag"}
.sk-label +
.scrollable .scrollable
.infinite-scroll .infinite-scroll