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

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

@@ -12,8 +12,8 @@
bottom: 0;
z-index: $z-index-lock-screen;
background-color: rgba(white, 0.5);
color: black;
background-color: var(--sn-stylekit-background-color);
color: var(--sn-stylekit-foreground-color);
font-size: 16px;
display: flex;
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-title-bar: 100;
@@ -27,13 +19,13 @@ body {
"Segoe UI", "Roboto", "Oxygen",
"Ubuntu", "Cantarell", "Fira Sans",
"Droid Sans", "Helvetica Neue", sans-serif;
color: $main-text-color;
-webkit-font-smoothing: antialiased;
min-height: 100%;
height: 100%;
font-size: 14px;
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 {
color: $blue-color;
color: var(--sn-stylekit-info-color);
}
.tinted-selected {
color: white;
color: var(--sn-stylekit-info-contrast-color);
}
*:focus {outline:0;}
@@ -61,7 +53,7 @@ input, button, select, textarea {
}
a {
color: $blue-color;
color: var(--sn-stylekit-info-color);
text-decoration: none;
&.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 {
overflow: auto;
}
@@ -85,7 +87,7 @@ p {
min-height: 100vh;
height: 100vh;
overflow: auto;
background-color: $bg-color;
background-color: var(--sn-stylekit-background-color);
}
$footer-height: 32px;
@@ -115,7 +117,8 @@ $footer-height: 32px;
height: 100%;
position: absolute;
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;
border-top: none;
border-bottom: none;
@@ -181,7 +184,7 @@ $footer-height: 32px;
> .content {
height: 100%;
max-height: 100%;
background-color: white;
background-color: var(--sn-stylekit-background-color);
position: relative;
}
@@ -205,24 +208,6 @@ $footer-height: 32px;
width: 80%;
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;
.sk-panel {
border-radius: 0;
background-color: white;
}
.sk-panel-content {
padding-top: 1.1rem;
@@ -17,7 +16,7 @@
}
#item-preview-modal {
> .content {
> .sk-modal-content {
width: 800px;
height: 500px;
}
@@ -37,21 +36,17 @@
.border {
height: 100%;
background-color: rgba(black, 0.1);
background-color: var(--sn-stylekit-border-color);
width: 1px;
margin: 0 15px;
}
}
// .sk-panel {
// background-color: white;
// }
.header .subtitle {
font-size: 1.1rem;
}
.modal {
.sk-modal {
position: fixed;
margin-left: auto;
margin-right: auto;
@@ -62,8 +57,9 @@
z-index: $z-index-modal;
width: 100vw;
height: 100vh;
background-color: rgba(gray, 0.3);
color: black;
background-color: transparent;
color: var(--sn-stylekit-contrast-foreground-color);
display: flex;
align-items: center;
justify-content: center;
@@ -76,40 +72,42 @@
}
&.auto-height {
> .content {
> .sk-modal-content {
height: auto !important;
}
}
&.large {
> .content {
> .sk-modal-content {
width: 900px;
height: 600px;
}
}
&.medium {
> .content {
> .sk-modal-content {
width: 700px;
height: 500px;
}
}
&.small {
> .content {
> .sk-modal-content {
width: 700px;
height: 344px;
}
}
.background {
.sk-modal-background {
position: absolute;
z-index: -1;
width: 100%;
height: 100%;
background-color: var(--sn-stylekit-contrast-background-color);
opacity: 0.7;
}
> .content {
> .sk-modal-content {
overflow-y: auto;
width: auto;
padding: 0;

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

@@ -1,6 +1,6 @@
#notes-column, .notes {
border-left: 1px solid #dddddd;
border-right: 1px solid #dddddd;
border-left: 1px solid var(--sn-stylekit-border-color);
border-right: 1px solid var(--sn-stylekit-border-color);
width: 350px;
flex-grow: 0;
@@ -21,15 +21,11 @@
font-size: 18px;
.section-title-bar-header .title {
color: rgba(black, 0.40);
color: var(--sn-stylekit-neutral-color);
width: calc(90% - 45px);
}
}
#notes-add-button {
}
#notes-menu-bar {
position: relative;
margin-top: 14px;
@@ -42,7 +38,7 @@
position: relative;
.filter-bar {
background-color: $light-bg-color;
background-color: var(--sn-stylekit-contrast-background-color);
border-radius: 4px;
height: 100%;
color: #909090;
@@ -60,9 +56,9 @@
border-radius: 50%;
width: 17px;
height: 17px;
color: white;
cursor: default;
background-color: gray;
background-color: var(--sn-stylekit-neutral-color);
color: var(--sn-stylekit-neutral-contrast-color);
font-size: 10px;
line-height: 17px;
text-align: center;
@@ -73,7 +69,7 @@
transition: background-color 0.15s linear;
&:hover {
background-color: $blue-color;
background-color: var(--sn-stylekit-info-color);
}
}
}
@@ -102,9 +98,8 @@
.note {
width: 100%;
padding: 15px;
border-bottom: 1px solid $bg-color;
border-bottom: 1px solid var(--sn-stylekit-border-color);
cursor: pointer;
background-color: white;
> .name {
font-weight: 600;
@@ -137,11 +132,11 @@
overflow: hidden;
text-overflow: ellipsis;
$line-height: 18px;
.default-preview, .plain-preview {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1; /* number of lines to show */
$line-height: 18px;
line-height: $line-height; /* fallback */
max-height: calc(#{$line-height} * 1); /* fallback */
}
@@ -159,11 +154,11 @@
}
&.selected {
background-color: $blue-color;
color: white;
background-color: var(--sn-stylekit-info-color);
color: var(--sn-stylekit-info-contrast-color);
.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 {
border-bottom: 1px solid rgba(black, 0.1);
border-top: 1px solid rgba(black, 0.1);
border-bottom: 1px solid var(--sn-stylekit-border-color);
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;
&, #tags-content {
background-color: #f6f6f6;
background-color: var(--sn-stylekit-secondary-background-color);
display: flex;
flex-direction: column;
}
#tags-title-bar {
color: black;
color: var(--sn-stylekit-secondary-foreground-color);
padding-top: 14px;
padding-bottom: 16px;
padding-left: 12px;
padding-right: 12px;
font-size: 12px;
color: rgba(black, 0.8);
}
#tag-add-button {
background-color: #d7d7d7;
&:hover {
background-color: rgba(#d7d7d7, 0.8);
}
}
.scrollable {
@@ -62,7 +53,7 @@
background-color: transparent;
font-weight: 600;
float: left;
color: $main-text-color;
color: var(--sn-stylekit-secondary-foreground-color);
border: none;
cursor: pointer;
text-overflow: ellipsis;
@@ -76,6 +67,7 @@
right: 17px;
padding-top: 1px;
font-weight: bold;
color: var(--sn-stylekit-neutral-color);
}
}
@@ -97,32 +89,17 @@
}
}
$tags-selected-color: #dbdbdb;
&.selected {
background-color: $tags-selected-color;
color: $selected-text-color;
> .title {
color: $selected-text-color;
cursor: text;
}
}
/* When a note is dragged over tag */
&.over {
background-color: $tags-selected-color;
color: $selected-text-color;
border: 2px dashed white;
&:hover:not(.selected), &.selected {
background-color: var(--sn-stylekit-secondary-contrast-background-color);
color: var(--sn-stylekit-secondary-contrast-foreground-color);
> .title {
color: $selected-text-color;
}
}
&:hover:not(.selected) {
background-color: $tags-selected-color;
color: $selected-text-color;
> .title {
color: $selected-text-color;
color: var(--sn-stylekit-secondary-contrast-foreground-color);
}
}
}