Skip to content

Commit cb9e0be

Browse files
mrholekmrholek
committed
refactor: improve the layout
1 parent b17a28a commit cb9e0be

File tree

4 files changed

+187
-2
lines changed

4 files changed

+187
-2
lines changed

‎src/components/header/AppHeaderDropdown.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ const AppHeaderDropdown = () => {
3131
<CAvatar src={avatar8} size="md" />
3232
</CDropdownToggle>
3333
<CDropdownMenu className="pt-0" placement="bottom-end">
34-
<CDropdownHeader className="bg-body-secondary fw-semibold py-2">Account</CDropdownHeader>
34+
<CDropdownHeader className="bg-body-secondary fw-semibold mb-2">Account</CDropdownHeader>
3535
<CDropdownItem href="#">
3636
<CIcon icon={cilBell} className="me-2" />
3737
Updates
@@ -60,7 +60,7 @@ const AppHeaderDropdown = () => {
6060
42
6161
</CBadge>
6262
</CDropdownItem>
63-
<CDropdownHeader className="bg-body-secondary fw-semibold py-2">Settings</CDropdownHeader>
63+
<CDropdownHeader className="bg-body-secondary fw-semibold my-2">Settings</CDropdownHeader>
6464
<CDropdownItem href="#">
6565
<CIcon icon={cilUser} className="me-2" />
6666
Profile

‎src/scss/_theme.scss

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
body {
2+
background-color: var(--cui-tertiary-bg);
3+
}
4+
5+
.wrapper {
6+
width: 100%;
7+
@include ltr-rtl("padding-left", var(--cui-sidebar-occupy-start, 0));
8+
@include ltr-rtl("padding-right", var(--cui-sidebar-occupy-end, 0));
9+
will-change: auto;
10+
@include transition(padding .15s);
11+
}
12+
13+
.header > .container-fluid,
14+
.sidebar-header {
15+
min-height: calc(4rem + 1px); // stylelint-disable-line function-disallowed-list
16+
}
17+
18+
.sidebar-brand-full {
19+
margin-left: 3px;
20+
}
21+
22+
.sidebar-header {
23+
.nav-underline-border {
24+
--cui-nav-underline-border-link-padding-x: 1rem;
25+
--cui-nav-underline-border-gap: 0;
26+
}
27+
28+
.nav-link {
29+
display: flex;
30+
align-items: center;
31+
min-height: calc(4rem + 1px); // stylelint-disable-line function-disallowed-list
32+
}
33+
}
34+
35+
.sidebar-toggler {
36+
@include ltr-rtl("margin-left", auto);
37+
}
38+
39+
.sidebar-narrow,
40+
.sidebar-narrow-unfoldable:not(:hover) {
41+
.sidebar-toggler {
42+
@include ltr-rtl("margin-right", auto);
43+
}
44+
}
45+
46+
.header > .container-fluid + .container-fluid {
47+
min-height: 3rem;
48+
}
49+
50+
.footer {
51+
min-height: calc(3rem + 1px); // stylelint-disable-line function-disallowed-list
52+
}
53+
54+
@if $enable-dark-mode {
55+
@include color-mode(dark) {
56+
body {
57+
background-color: var(--cui-dark-bg-subtle);
58+
}
59+
60+
.footer {
61+
--cui-footer-bg: var(--cui-body-bg);
62+
}
63+
}
64+
}

‎src/scss/examples.scss

Lines changed: 116 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,116 @@
1+
/* stylelint-disable declaration-no-important, scss/selector-no-redundant-nesting-selector */
2+
$enable-deprecation-messages: false; /* stylelint-disable-line scss/dollar-variable-default */
3+
4+
@import "@coreui/coreui/scss/functions";
5+
@import "@coreui/coreui/scss/variables";
6+
@import "@coreui/coreui/scss/mixins";
7+
8+
.example {
9+
&:not(:first-child) {
10+
margin-top: 1.5rem;
11+
}
12+
13+
.tab-content {
14+
background-color: var(--#{$prefix}tertiary-bg);
15+
}
16+
17+
& + p {
18+
margin-top: 1.5rem;
19+
}
20+
21+
// Components examples
22+
.preview {
23+
+ p {
24+
margin-top: 2rem;
25+
}
26+
27+
> .form-control {
28+
+ .form-control {
29+
margin-top: .5rem;
30+
}
31+
}
32+
33+
> .nav + .nav,
34+
> .alert + .alert,
35+
> .navbar + .navbar,
36+
> .progress + .progress {
37+
margin-top: 1rem;
38+
}
39+
40+
> .dropdown-menu {
41+
position: static;
42+
display: block;
43+
}
44+
45+
> :last-child {
46+
margin-bottom: 0;
47+
}
48+
49+
// Images
50+
> svg + svg,
51+
> img + img {
52+
margin-left: .5rem;
53+
}
54+
55+
// Buttons
56+
> .btn,
57+
> .btn-group {
58+
margin: .25rem .125rem;
59+
}
60+
> .btn-toolbar + .btn-toolbar {
61+
margin-top: .5rem;
62+
}
63+
64+
// List groups
65+
> .list-group {
66+
max-width: 400px;
67+
}
68+
69+
> [class*="list-group-horizontal"] {
70+
max-width: 100%;
71+
}
72+
73+
// Navbars
74+
.fixed-top,
75+
.sticky-top {
76+
position: static;
77+
margin: -1rem -1rem 1rem;
78+
}
79+
80+
.fixed-bottom {
81+
position: static;
82+
margin: 1rem -1rem -1rem;
83+
}
84+
85+
@include media-breakpoint-up(sm) {
86+
.fixed-top,
87+
.sticky-top {
88+
margin: -1.5rem -1.5rem 1rem;
89+
}
90+
.fixed-bottom {
91+
margin: 1rem -1.5rem -1.5rem;
92+
}
93+
}
94+
95+
// Pagination
96+
.pagination {
97+
margin-top: .5rem;
98+
margin-bottom: .5rem;
99+
}
100+
101+
.docs-example-modal {
102+
.modal {
103+
position: static;
104+
display: block;
105+
}
106+
}
107+
}
108+
}
109+
110+
@if $enable-dark-mode {
111+
@include color-mode(dark) {
112+
.example .tab-content {
113+
background-color: var(--#{$prefix}secondary-bg) !important;
114+
}
115+
}
116+
}

‎src/scss/vendors/simplebar.scss

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
.simplebar-content {
2+
display: flex;
3+
flex-direction: column;
4+
min-height: 100%;
5+
}

0 commit comments

Comments
 (0)