Skip to content

Commit 95bc4ed

Browse files
keuneskeunes
committed
Improve modal & lists styling
1 parent b5b1d2f commit 95bc4ed

File tree

8 files changed

+837
-32
lines changed

8 files changed

+837
-32
lines changed

‎_sass/_custom.scss

Lines changed: 56 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -496,10 +496,6 @@ button {
496496
border-radius: 50%;
497497
}
498498

499-
.modal-content {
500-
border-radius: 5px;
501-
}
502-
503499
// Texts
504500

505501
textarea {
@@ -531,20 +527,26 @@ blockquote {
531527
// Posts
532528

533529
.post-content {
534-
& p {
530+
& p, li {
535531
font-size: 14px;
536532
color: $gray-900;
537-
margin-bottom: 25px;
533+
margin-bottom: 0px;
538534
line-height: 24px;
539535
}
540536

541-
& a {
542-
color: $gray-900;
543-
font-weight: 600;
544-
text-decoration: underline;
537+
& p + p {
538+
margin-top: 20px;
539+
}
545540

546-
&:hover {
547-
text-decoration: none;
541+
& p, li, h1, h2, h3, h4, h5, h6, #breadcrumbs {
542+
& a {
543+
color: $gray-900;
544+
font-weight: 600;
545+
text-decoration: underline;
546+
547+
&:hover {
548+
text-decoration: none;
549+
}
548550
}
549551
}
550552

@@ -582,16 +584,6 @@ blockquote {
582584
font-weight: 700;
583585
}
584586

585-
& li {
586-
list-style-position: outside;
587-
margin: 0 0 20px 20px;
588-
font-size: 14px;
589-
}
590-
591-
& ul li {
592-
list-style-type: disc;
593-
}
594-
595587
& img[alt$=" > "] {
596588
float: right;
597589
margin: 0 0 20px 20px;
@@ -620,6 +612,10 @@ blockquote {
620612

621613
}
622614

615+
.post-content + .row, p + .row {
616+
margin-top: 20px;
617+
}
618+
623619
.post .cover {
624620
max-height: 350px;
625621
object-fit: cover;
@@ -896,6 +892,44 @@ i.member-img {
896892
}
897893
}
898894

895+
// Lists
896+
897+
.post-content, .modal-body {
898+
& ul {
899+
padding: 0;
900+
margin-bottom: 0;
901+
}
902+
903+
& li {
904+
list-style-position: outside;
905+
margin: 0 0 5px 20px;
906+
}
907+
908+
& ul li {
909+
list-style-type: disc;
910+
}
911+
912+
& ul + p {
913+
margin-bottom: 5px;
914+
}
915+
916+
& p + ul {
917+
margin-top: 5px;
918+
}
919+
}
920+
921+
// Modals
922+
923+
.modal-body p, .modal-body li {
924+
padding: 0;
925+
font-size: 1rem;
926+
}
927+
928+
.modal-footer {
929+
border-top: 0;
930+
padding-top: 0;
931+
}
932+
899933
// Backgrounds
900934

901935
.background {

‎_sass/_dark.scss

Lines changed: 32 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,37 @@
11
@media (prefers-color-scheme: dark) {
2+
3+
/*!
4+
* Bootstrap v4.6.0 (https://getbootstrap.com/)
5+
* Copyright 2011-2021 The Bootstrap Authors
6+
* Copyright 2011-2021 Twitter, Inc.
7+
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
8+
*
9+
* Bootstrap-Dark (https://vinorodrigues.github.io/bootstrap-dark/)
10+
* Copyright 2020 Vino Rodrigues
11+
* This version is a dual color theme, with the default light mode and the dark
12+
* elements optioned in by a `prefers-color-scheme: dark` media query
13+
*/
14+
15+
@import "./bootstrap-dark/functions";
16+
@import "./bootstrap-dark/variables-alt";
17+
@import "./bootstrap-dark/buttons";
18+
@import "./bootstrap-dark/modal";
19+
220
:root {
321
scrollbar-color: #333 #000;
422
}
523

624
body {
7-
color: #bbb;
25+
color: #ddd;
826
background-color: #111;
927
}
1028

1129
.content h1,
1230
.content h2,
1331
.content h3,
14-
.content h4 {
32+
.content h4,
33+
.content h5,
34+
.content h6 {
1535
color: #ddd;
1636
}
1737

@@ -44,10 +64,13 @@
4464
border-color: #333;
4565
}
4666

47-
.post-content {
67+
.post-content, .modal-body {
68+
& p, li {
69+
color: #ddd;
4870

49-
& p {
50-
color: #ddd;
71+
& a {
72+
color: #bbf;
73+
}
5174
}
5275

5376
& #donate {
@@ -82,11 +105,6 @@
82105
color: #fff;
83106
}
84107

85-
.post-header a,
86-
.post-content a {
87-
color: #bbf;
88-
}
89-
90108
.overlay {
91109
background-color: #333;
92110
}
@@ -108,4 +126,8 @@
108126
color: #ddd !important;
109127
}
110128

129+
.modal-footer {
130+
border-top: 0;
131+
}
132+
111133
}

‎_sass/bootstrap-dark/_buttons.scss

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
2+
// Base styles
3+
4+
.btn {
5+
color: $body-color-alt;
6+
7+
@include hover() {
8+
color: $body-color-alt;
9+
}
10+
11+
&:focus,
12+
&.focus {
13+
box-shadow: $btn-focus-box-shadow-alt;
14+
}
15+
16+
// Disabled comes first so active can properly restyle
17+
&.disabled,
18+
&:disabled {
19+
opacity: $btn-disabled-opacity-alt;
20+
@include box-shadow(none);
21+
}
22+
23+
&:not(:disabled):not(.disabled) {
24+
25+
&:active,
26+
&.active {
27+
@include box-shadow($btn-active-box-shadow-alt);
28+
29+
&:focus {
30+
@include box-shadow($btn-focus-box-shadow-alt, $btn-active-box-shadow-alt);
31+
}
32+
}
33+
}
34+
}
35+
36+
// Alternate buttons
37+
38+
@each $color, $value in $theme-colors-alt {
39+
.btn-#{$color} {
40+
@include button-variant($value, $value);
41+
}
42+
}
43+
44+
@each $color, $value in $theme-colors-alt {
45+
.btn-outline-#{$color} {
46+
@include button-outline-variant($value);
47+
}
48+
}
49+
50+
51+
// Link buttons
52+
53+
// Make a button look and behave like a link
54+
.btn-link {
55+
color: $link-color-alt;
56+
57+
@include hover() {
58+
color: $link-hover-color-alt;
59+
}
60+
61+
&:disabled,
62+
&.disabled {
63+
color: $btn-link-disabled-color-alt;
64+
pointer-events: none;
65+
}
66+
}

‎_sass/bootstrap-dark/_functions.scss

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
// Bootstrap functions
2+
//
3+
// Utility mixins and functions for evaluating source code across our variables, maps, and mixins.
4+
5+
6+
// Color contrast
7+
@function color-yiq-alt($color, $dark: $yiq-text-dark-alt, $light: $yiq-text-light-alt) {
8+
$r: red($color);
9+
$g: green($color);
10+
$b: blue($color);
11+
12+
$yiq: (($r * 299) + ($g * 587) + ($b * 114)) * .001;
13+
14+
@if ($yiq >= $yiq-contrasted-threshold) {
15+
@return $dark;
16+
} @else {
17+
@return $light;
18+
}
19+
}
20+
21+
// Retrieve color Sass maps
22+
@function color-alt($key: "blue-alt") {
23+
@return map-get($colors-alt, $key);
24+
}
25+
26+
@function theme-color-alt($key: "primary-alt") {
27+
@return map-get($theme-colors-alt, $key);
28+
}
29+
30+
@function gray-alt($key: "100-alt") {
31+
@return map-get($grays-alt, $key);
32+
}
33+
34+
// Request a theme color level
35+
@function theme-color-level-alt($color-name: "primary-alt", $level: 0) {
36+
$color: theme-color-alt($color-name);
37+
$color-base: if($level > 0, $black-alt, $white-alt);
38+
$level: abs($level);
39+
40+
@return mix($color-base, $color, $level * $theme-color-interval-alt);
41+
}

‎_sass/bootstrap-dark/_modal.scss

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
2+
// Actual modal
3+
.modal-content {
4+
color: $modal-content-color-alt;
5+
background-color: $modal-content-bg-alt;
6+
border: $modal-content-border-width solid $modal-content-border-color-alt;
7+
@include box-shadow($modal-content-box-shadow-xs-alt);
8+
}
9+
10+
// Modal background
11+
.modal-backdrop {
12+
background-color: $modal-backdrop-bg-alt;
13+
&.show { opacity: $modal-backdrop-opacity-alt; }
14+
}
15+
16+
// Modal header
17+
.modal-header {
18+
border-bottom: $modal-header-border-width solid $modal-header-border-color-alt;
19+
}
20+
21+
// Footer (for actions)
22+
.modal-footer {
23+
border-top: $modal-footer-border-width solid $modal-footer-border-color-alt;
24+
}
25+
26+
// Scale up the modal
27+
@include media-breakpoint-up(sm) {
28+
.modal-content {
29+
@include box-shadow($modal-content-box-shadow-sm-up-alt);
30+
}
31+
}

‎_sass/bootstrap-dark/_shadows.scss

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
2+
.shadow-sm { box-shadow: $box-shadow-sm-alt !important; }
3+
.shadow { box-shadow: $box-shadow-alt !important; }
4+
.shadow-lg { box-shadow: $box-shadow-lg-alt !important; }

‎_sass/bootstrap-dark/_utilities.scss

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
2+
// _align not used
3+
@import "utilities/background";
4+
@import "utilities/borders";
5+
// _clearfix not used
6+
// _display not used
7+
// _embed not used
8+
// _flex not used
9+
// _float not used
10+
// _interactions not used
11+
// _overflow not used
12+
// _position not used
13+
// _screenreaders not used
14+
@import "utilities/shadows";
15+
// _sizing not used
16+
// _spacing not used
17+
// _stretched-link not used
18+
@import "utilities/text";
19+
// _visibility not used

0 commit comments

Comments
 (0)