quattle 1.5.5 → 1.6.0

Sign up to get free protection for your applications and to get access to all the features.
data/_sass/_message.scss CHANGED
@@ -1,121 +1,121 @@
1
- // Messages
2
-
3
- // Example message box
4
- // <p class="message-yellow"><small><b>Warning!</b> This is a sentence inside of a message box.</small></p>
5
-
6
- // Example with close button
7
- // <p class="message-yellow"><span class="closebtn" onclick="this.parentElement.style.display='none';">&times;</span>
8
- // <small><b>Warning!</b> This is a sentence inside of a message box.</small></p>
9
-
10
- .notice {
11
- margin-bottom: 15px;
12
- padding: 12px;
13
- color: $text;
14
- border: .1rem solid $notice;
15
- background-color: $notice-bg;
16
- border: .1rem solid $notice;
17
- border-radius: .5em;
18
- text-align: center;
19
-
20
- @media (prefers-color-scheme: light) {
21
- color: $light-scheme-text;
22
- border: .1rem solid $notice-light;
23
- background-color: $notice-bg-light;
24
- }
25
- }
26
-
27
- .message {
28
- margin-bottom: 15px;
29
- padding: 12px;
30
- color: $text;
31
- background-color: $message-default;
32
- border: .1rem solid #00c2bb;
33
- border-radius: .5em;
34
- text-align: center;
35
-
36
- @media (prefers-color-scheme: light) {
37
- color: $light-scheme-text;
38
- background-color: $message-light;
39
- border: .1rem solid #d2d2d2;
40
- }
41
- }
42
-
43
- .black {
44
- margin-bottom: 15px;
45
- padding: 12px;
46
- color: #fff;
47
- background-color: $message-black;
48
- border-left: .3rem solid #595959;
49
- border-radius: .5em;
50
- }
51
-
52
- .green {
53
- margin-bottom: 15px;
54
- padding: 12px;
55
- color: #fff;
56
- background-color: $message-green;
57
- border-left: .3rem solid #93d080;
58
- border-radius: .5em;
59
- }
60
-
61
- .yellow {
62
- margin-bottom: 15px;
63
- padding: 12px;
64
- color: #fff;
65
- background-color: $message-yellow;
66
- border-left: .3rem solid #fdcb61;
67
- border-radius: .5em;
68
- }
69
-
70
- .orange {
71
- margin-bottom: 15px;
72
- padding: 12px;
73
- color: #fff;
74
- background-color: $message-orange;
75
- border-left: .3rem solid #f9ac6b;
76
- border-radius: .5em;
77
- }
78
-
79
- .red {
80
- margin-bottom: 15px;
81
- padding: 12px;
82
- color: #fff;
83
- background-color: $message-red;
84
- border-left: .3rem solid #e86c71;
85
- border-radius: .5em;
86
- }
87
-
88
- .purple {
89
- margin-bottom: 15px;
90
- padding: 12px;
91
- color: #fff;
92
- background-color: $message-purple;
93
- border-left: .3rem solid #bf61c0;
94
- border-radius: .5em;
95
- }
96
-
97
- .blue {
98
- margin-bottom: 15px;
99
- padding: 12px;
100
- color: #fff;
101
- background-color: $message-blue;
102
- border-left: .3rem solid #2bc2ff;
103
- border-radius: .5em;
104
- }
105
-
106
- /* The close button */
107
- .closebtn {
108
- margin-left: 15px;
109
- color: white;
110
- font-weight: bold;
111
- float: right;
112
- font-size: 22px;
113
- line-height: 27px;
114
- cursor: pointer;
115
- transition: 0.3s;
116
- }
117
-
118
- /* When moving the mouse over the close button */
119
- .closebtn:hover {
120
- color: black;
121
- }
1
+ // Messages
2
+
3
+ // Example message box
4
+ // <p class="message-yellow"><small><b>Warning!</b> This is a sentence inside of a message box.</small></p>
5
+
6
+ // Example with close button
7
+ // <p class="message-yellow"><span class="closebtn" onclick="this.parentElement.style.display='none';">&times;</span>
8
+ // <small><b>Warning!</b> This is a sentence inside of a message box.</small></p>
9
+
10
+ .notice {
11
+ margin-bottom: 15px;
12
+ padding: 12px;
13
+ color: $text;
14
+ border: .1rem solid $notice;
15
+ background-color: $notice-bg;
16
+ border: .1rem solid $notice;
17
+ border-radius: .5em;
18
+ text-align: center;
19
+
20
+ @media (prefers-color-scheme: light) {
21
+ color: $light-scheme-text;
22
+ border: .1rem solid $notice-light;
23
+ background-color: $notice-bg-light;
24
+ }
25
+ }
26
+
27
+ .message {
28
+ margin-bottom: 15px;
29
+ padding: 12px;
30
+ color: $text;
31
+ background-color: $message-default;
32
+ border: .1rem solid #00c2bb;
33
+ border-radius: .5em;
34
+ text-align: center;
35
+
36
+ @media (prefers-color-scheme: light) {
37
+ color: $light-scheme-text;
38
+ background-color: $message-light;
39
+ border: .1rem solid #d2d2d2;
40
+ }
41
+ }
42
+
43
+ .black {
44
+ margin-bottom: 15px;
45
+ padding: 12px;
46
+ color: #fff;
47
+ background-color: $message-black;
48
+ border-left: .3rem solid #595959;
49
+ border-radius: .5em;
50
+ }
51
+
52
+ .green {
53
+ margin-bottom: 15px;
54
+ padding: 12px;
55
+ color: #fff;
56
+ background-color: $message-green;
57
+ border-left: .3rem solid #93d080;
58
+ border-radius: .5em;
59
+ }
60
+
61
+ .yellow {
62
+ margin-bottom: 15px;
63
+ padding: 12px;
64
+ color: #fff;
65
+ background-color: $message-yellow;
66
+ border-left: .3rem solid #fdcb61;
67
+ border-radius: .5em;
68
+ }
69
+
70
+ .orange {
71
+ margin-bottom: 15px;
72
+ padding: 12px;
73
+ color: #fff;
74
+ background-color: $message-orange;
75
+ border-left: .3rem solid #f9ac6b;
76
+ border-radius: .5em;
77
+ }
78
+
79
+ .red {
80
+ margin-bottom: 15px;
81
+ padding: 12px;
82
+ color: #fff;
83
+ background-color: $message-red;
84
+ border-left: .3rem solid #e86c71;
85
+ border-radius: .5em;
86
+ }
87
+
88
+ .purple {
89
+ margin-bottom: 15px;
90
+ padding: 12px;
91
+ color: #fff;
92
+ background-color: $message-purple;
93
+ border-left: .3rem solid #bf61c0;
94
+ border-radius: .5em;
95
+ }
96
+
97
+ .blue {
98
+ margin-bottom: 15px;
99
+ padding: 12px;
100
+ color: #fff;
101
+ background-color: $message-blue;
102
+ border-left: .3rem solid #2bc2ff;
103
+ border-radius: .5em;
104
+ }
105
+
106
+ /* The close button */
107
+ .closebtn {
108
+ margin-left: 15px;
109
+ color: white;
110
+ font-weight: bold;
111
+ float: right;
112
+ font-size: 22px;
113
+ line-height: 27px;
114
+ cursor: pointer;
115
+ transition: 0.3s;
116
+ }
117
+
118
+ /* When moving the mouse over the close button */
119
+ .closebtn:hover {
120
+ color: black;
121
+ }
@@ -1,48 +1,48 @@
1
- // Pagination
2
-
3
- .pagination {
4
- overflow: hidden; // clearfix
5
- margin: 0 -1.5rem 1rem;
6
- color: #ccc;
7
- text-align: center;
8
- }
9
-
10
- // Pagination items can be `span`s or `a`s
11
- .pagination-item {
12
- display: block;
13
- padding: 1rem;
14
- border: solid #111111;
15
- border-width: 1px 0;
16
-
17
- &:first-child {
18
- margin-bottom: -1px;
19
- }
20
- }
21
-
22
- // Only provide a hover state for linked pagination items
23
- a.pagination-item:hover {
24
- background-color: #1e1e1e;
25
- }
26
-
27
- @media (min-width: 30em) {
28
- .pagination {
29
- margin: 3rem 0;
30
- }
31
-
32
- .pagination-item {
33
- float: left;
34
- width: 50%;
35
- border-width: 1px;
36
-
37
- &:first-child {
38
- margin-bottom: 0;
39
- border-top-left-radius: 4px;
40
- border-bottom-left-radius: 4px;
41
- }
42
- &:last-child {
43
- margin-left: -1px;
44
- border-top-right-radius: 4px;
45
- border-bottom-right-radius: 4px;
46
- }
47
- }
48
- }
1
+ // Pagination
2
+
3
+ .pagination {
4
+ overflow: hidden; // clearfix
5
+ margin: 0 -1.5rem 1rem;
6
+ color: #ccc;
7
+ text-align: center;
8
+ }
9
+
10
+ // Pagination items can be `span`s or `a`s
11
+ .pagination-item {
12
+ display: block;
13
+ padding: 1rem;
14
+ border: solid #111111;
15
+ border-width: 1px 0;
16
+
17
+ &:first-child {
18
+ margin-bottom: -1px;
19
+ }
20
+ }
21
+
22
+ // Only provide a hover state for linked pagination items
23
+ a.pagination-item:hover {
24
+ background-color: #1e1e1e;
25
+ }
26
+
27
+ @media (min-width: 30em) {
28
+ .pagination {
29
+ margin: 3rem 0;
30
+ }
31
+
32
+ .pagination-item {
33
+ float: left;
34
+ width: 50%;
35
+ border-width: 1px;
36
+
37
+ &:first-child {
38
+ margin-bottom: 0;
39
+ border-top-left-radius: 4px;
40
+ border-bottom-left-radius: 4px;
41
+ }
42
+ &:last-child {
43
+ margin-left: -1px;
44
+ border-top-right-radius: 4px;
45
+ border-bottom-right-radius: 4px;
46
+ }
47
+ }
48
+ }