-
-
Notifications
You must be signed in to change notification settings - Fork 195
/
_notes_styles.scss
88 lines (75 loc) · 2.14 KB
/
_notes_styles.scss
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
$note-text: $oil;
$note-bg: lighten($primary-color, 60%);
$note-border: $primary-color;
$note-red-text: darken($alert-color, 10%);
$note-red-bg: lighten($alert-color, 40%);
$note-red-border: $alert-color;
$note-green-text: darken($success-color, 10%);
$note-green-bg: lighten($success-color, 40%);
$note-green-border: $success-color;
$note-blue-text: darken($primary-color, 10%);
$note-blue-bg: lighten($primary-color, 60%);
$note-blue-border: $primary-color;
$note-yellow-text: darken($warning-color, 10%);
$note-yellow-bg: lighten($warning-color, 40%);
$note-yellow-border: $warning-color;
$border-top-size: 8px;
#notes {
.note {
color: $note-text;
background-color: $note-bg;
border-color: rgba(0, 0, 0, 0.1);
&:first-child { box-shadow: 0 -#{$border-top-size} 0 0 $note-border; }
&.note--style-red {
color: $note-red-text;
background-color: $note-red-bg;
&:first-child { box-shadow: 0 -#{$border-top-size} 0 0 $note-red-border; }
h1 { color: $note-red-text; }
}
&.note--style-green {
color: $note-green-text;
background-color: $note-green-bg;
&:first-child { box-shadow: 0 -#{$border-top-size} 0 0 $note-green-border; }
h1 { color: $note-green-text; }
}
&.note--style-blue {
color: $note-blue-text;
background-color: $note-blue-bg;
&:first-child { box-shadow: 0 -#{$border-top-size} 0 0 $note-blue-border; }
h1 { color: $note-blue-text; }
}
&.note--style-yellow {
color: $note-yellow-text;
background-color: $note-yellow-bg;
&:first-child { box-shadow: 0 -#{$border-top-size} 0 0 $note-yellow-border; }
h1 { color: $note-yellow-text; }
}
h1 {
font-size: 1.5em;
}
h2 {
font-size: 1.4em;
}
h3 {
font-size: 1.3em;
}
h4 {
font-size: 1.2em;
}
h5 {
font-size: 1.1em;
}
h6 {
font-size: 0.9em;
text-transform: uppercase;
}
&.note--style-red,
&.note--style-green,
&.note--style-blue,
&.note--style-yellow {
h1 {
font-size: 1.3em;
}
}
}
}