diff options
author | 2018-07-05 02:37:43 -0300 | |
---|---|---|
committer | 2018-07-05 02:37:43 -0300 | |
commit | 25c6cbd29aff90f694d72afe28ab56b0113fb16a (patch) | |
tree | 9907623b3a7b835e58b895d08b62c5339b8e0376 /src/styles/type.scss | |
parent | 5.0.0 beta.18 (diff) | |
download | ferdium-app-25c6cbd29aff90f694d72afe28ab56b0113fb16a.tar.gz ferdium-app-25c6cbd29aff90f694d72afe28ab56b0113fb16a.tar.zst ferdium-app-25c6cbd29aff90f694d72afe28ab56b0113fb16a.zip |
Update stylesheets and added darkMode variable and toggle.
Diffstat (limited to 'src/styles/type.scss')
-rw-r--r-- | src/styles/type.scss | 48 |
1 files changed, 21 insertions, 27 deletions
diff --git a/src/styles/type.scss b/src/styles/type.scss index cacbec482..135d32da0 100644 --- a/src/styles/type.scss +++ b/src/styles/type.scss | |||
@@ -1,6 +1,12 @@ | |||
1 | @import './config.scss'; | 1 | @import './config.scss'; |
2 | @import './mixins.scss'; | 2 | @import './mixins.scss'; |
3 | 3 | ||
4 | .theme__dark { | ||
5 | a { color: $dark-theme-gray-smoke; } | ||
6 | .label { color: $dark-theme-gray-lightest; } | ||
7 | .footnote { color: $dark-theme-gray-lightest; } | ||
8 | } | ||
9 | |||
4 | h1 { | 10 | h1 { |
5 | font-size: 30px; | 11 | font-size: 30px; |
6 | font-weight: 300; | 12 | font-weight: 300; |
@@ -15,38 +21,32 @@ h2 { | |||
15 | margin-bottom: 25px; | 21 | margin-bottom: 25px; |
16 | margin-top: 55px; | 22 | margin-top: 55px; |
17 | 23 | ||
18 | &:first-of-type { | 24 | &:first-of-type { margin-top: 0; } |
19 | margin-top: 0; | ||
20 | } | ||
21 | } | 25 | } |
22 | 26 | ||
23 | p { | 27 | p { |
24 | margin-bottom: 10px; | 28 | margin-bottom: 10px; |
25 | line-height: 1.7rem; | 29 | line-height: 1.7rem; |
26 | 30 | ||
27 | &:last-of-type { | 31 | &:last-of-type { margin-bottom: 0; } |
28 | margin-bottom: 0; | ||
29 | } | ||
30 | } | 32 | } |
31 | 33 | ||
32 | strong { | 34 | strong { font-weight: bold; } |
33 | font-weight: bold; | ||
34 | } | ||
35 | 35 | ||
36 | a { | 36 | a { |
37 | text-decoration: none; | ||
38 | color: $theme-text-color; | 37 | color: $theme-text-color; |
38 | text-decoration: none; | ||
39 | 39 | ||
40 | &.button { | 40 | &.button { |
41 | position: relative; | ||
42 | background: none; | 41 | background: none; |
43 | display: inline-block; | ||
44 | padding: 10px 20px; | ||
45 | border: 2px solid $theme-brand-primary; | 42 | border: 2px solid $theme-brand-primary; |
46 | color: $theme-brand-primary; | ||
47 | border-radius: 3px; | 43 | border-radius: 3px; |
48 | transition: background 0.5s, color 0.5s; | 44 | color: $theme-brand-primary; |
45 | display: inline-block; | ||
46 | padding: 10px 20px; | ||
47 | position: relative; | ||
49 | text-align: center; | 48 | text-align: center; |
49 | transition: background .5s, color .5s; | ||
50 | 50 | ||
51 | &:hover { | 51 | &:hover { |
52 | background: darken($theme-brand-primary, 5%); | 52 | background: darken($theme-brand-primary, 5%); |
@@ -54,25 +54,19 @@ a { | |||
54 | } | 54 | } |
55 | } | 55 | } |
56 | 56 | ||
57 | &.link { | 57 | &.link { color: $theme-brand-primary; } |
58 | color: $theme-brand-primary; | ||
59 | } | ||
60 | } | 58 | } |
61 | 59 | ||
62 | .error-message, .error-message:last-of-type { | 60 | .error-message, .error-message:last-of-type { |
63 | margin: 10px 0; | ||
64 | color: $theme-brand-danger; | 61 | color: $theme-brand-danger; |
62 | margin: 10px 0; | ||
65 | } | 63 | } |
66 | 64 | ||
67 | .center { | 65 | .center { text-align: center; } |
68 | text-align: center; | ||
69 | } | ||
70 | 66 | ||
71 | .label { | 67 | .label { @include formLabel(); } |
72 | @include formLabel(); | ||
73 | } | ||
74 | 68 | ||
75 | .footnote { | 69 | .footnote { |
76 | font-size: 12px; | ||
77 | color: $theme-gray-light; | 70 | color: $theme-gray-light; |
78 | } \ No newline at end of file | 71 | font-size: 12px; |
72 | } | ||