stepus53/writer
1
0
Fork 0
mirror of https://github.com/usatiuk/writer.git synced 2025-10-29 00:17:48 +01:00
Code Issues Packages Projects Releases Wiki Activity

smooth dark/light mode transition for all elements

Browse Source
This commit is contained in:
Stepan Usatiuk
2019-02-10 20:49:24 +03:00
parent 214b736548
commit 59afa081f1
1 changed files with 20 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
frontend/src/Documents/Docs.scss
View File

@@ -7,6 +7,7 @@
margin: 2rem 0;
width: 100%;
border-bottom: 1px $light-gray1 dashed;
transition: 0.3s;
}
.section {
width: 100%;
@@ -17,6 +18,7 @@
flex-grow: 0;
flex-wrap: wrap;
.card {
transition: 0.3s;
user-select: none;
height: 15rem;
width: 10.5rem;
@@ -24,6 +26,7 @@
padding: 0rem;
overflow: hidden;
h4 {
transition: 0.3s;
transition: 0.3s;
padding: 1rem;
padding-bottom: 1.5rem;
@@ -31,6 +34,7 @@
margin-bottom: 0;
}
.textPreview {
transition: 0.3s;
pointer-events: none;
font-size: 0.5rem;
transition: 0.3s;
@@ -64,6 +68,7 @@
flex-shrink: 0;
}
input {
transition: 0.3s;
font-weight: 600;
font-size: 2rem;
height: 3rem;
@@ -82,6 +87,7 @@
}
textarea,
.documentContents {
transition: 0.3s;
padding: 0.5rem 1rem;
overflow: auto;
margin: 0;
@@ -91,11 +97,13 @@
min-width: 100%;
resize: none;
code {
transition: 0.3s;
border-radius: 3px;
border: 1px solid $light-gray2;
background-color: $light-gray5;
}
pre {
transition: 0.3s;
border-radius: 3px;
border: 1px solid $light-gray2;
background-color: $light-gray5;
@@ -105,21 +113,25 @@
}
}
table {
transition: 0.3s;
border-radius: 3px;
border: 1px solid $light-gray2;
border-collapse: collapse;
tr,
td,
th {
transition: 0.3s;
padding: 0.5rem;
border: 1px solid $light-gray2;
}
tr:nth-child(even) {
transition: 0.3s;
background-color: $light-gray5;
}
}
}
.documentContents {
transition: 0.3s;
border: 1px solid $light-gray1;
border-radius: 3px;
}
@@ -133,6 +145,7 @@
}
.list {
.card {
transition: 0.3s;
h4 {
transition: 0.3s;
border-bottom: 1px $dark-gray2 solid;
@@ -150,30 +163,37 @@
}
.documentHeader {
input {
transition: 0.3s;
background: $dark-gray4;
}
}
.document {
textarea,
.documentContents {
transition: 0.3s;
background: $dark-gray4;
border-color: $dark-gray1;
code {
transition: 0.3s;
border-color: $dark-gray2;
background-color: $dark-gray3;
}
pre {
transition: 0.3s;
border-color: $dark-gray2;
background-color: $dark-gray3;
}
table {
transition: 0.3s;
border-color: $dark-gray2;
tr,
td,
th {
transition: 0.3s;
border-color: $dark-gray2;
}
tr:nth-child(even) {
transition: 0.3s;
background-color: $dark-gray3;
}
}