Skip to content

Commit 5da6ec4

Browse files
extrabrightextrabright
committed
optimized folder structure
1 parent c4d7fb9 commit 5da6ec4

File tree

129 files changed

+6085
-9
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

129 files changed

+6085
-9
lines changed

‎base/_index.scss‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
//
2+
// Base
3+
//
4+
5+
// Root
6+
@import "bootstrap/scss/root";
7+
@import "reboot";
8+
9+
// Reboot
10+
@import "bootstrap/scss/reboot";
11+
@import "root";

‎base/_reboot.scss‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
//
2+
// Reboot
3+
// additional styles for normalizing CSS
4+
//
5+
6+
iframe {
7+
display: block;
8+
vertical-align: middle;
9+
}
10+
11+
figcaption,
12+
figure,
13+
main {
14+
display: block;
15+
margin: 0;
16+
}
17+
18+
figure {
19+
max-width: 100%;
20+
min-height: 1px;
21+
}
22+
23+
img,
24+
video {
25+
max-width: 100%;
26+
height: auto;
27+
}
28+
29+
svg {
30+
vertical-align: middle;
31+
overflow: hidden;
32+
}
33+
34+
a {
35+
outline: none;
36+
}

‎base/_root.scss‎

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
:root,
2+
[data-bs-theme="light"] {
3+
4+
@each $color, $value in $all-colors {
5+
--#{$prefix}#{$color}: #{$value};
6+
}
7+
8+
@each $color, $value in $all-colors-rgb {
9+
--#{$prefix}#{$color}-rgb: #{$value};
10+
}
11+
12+
// Fonts
13+
--#{$prefix}font-display: #{inspect($font-display-bundle)};
14+
--#{$prefix}font-serif: #{inspect($font-serif-bundle)};
15+
--#{$prefix}font-monospace: #{inspect($font-monospace-bundle)};
16+
17+
// Shadows
18+
--#{$prefix}box-shadow: #{$box-shadow};
19+
--#{$prefix}box-shadow-1: #{$box-shadow-1};
20+
--#{$prefix}box-shadow-2: #{$box-shadow-2};
21+
--#{$prefix}box-shadow-3: #{$box-shadow-3};
22+
--#{$prefix}box-shadow-4: #{$box-shadow-4};
23+
--#{$prefix}box-shadow-5: #{$box-shadow-5};
24+
--#{$prefix}box-shadow-6: #{$box-shadow-6};
25+
26+
--#{$prefix}box-soft-shadow-1: #{$box-soft-shadow-1};
27+
--#{$prefix}box-soft-shadow-2: #{$box-soft-shadow-2};
28+
--#{$prefix}box-soft-shadow-3: #{$box-soft-shadow-3};
29+
--#{$prefix}box-soft-shadow-4: #{$box-soft-shadow-4};
30+
--#{$prefix}box-soft-shadow-5: #{$box-soft-shadow-5};
31+
--#{$prefix}box-soft-shadow-6: #{$box-soft-shadow-6};
32+
33+
// Logo
34+
.logo-light {
35+
display: none;
36+
}
37+
.logo-dark {
38+
display: block;
39+
}
40+
}
41+
42+
.navbar-dark,
43+
[data-bs-theme="dark"] .navbar {
44+
// Logo
45+
.logo-light {
46+
display: block;
47+
}
48+
.logo-dark {
49+
display: none;
50+
}
51+
}
52+
53+
54+
@if $enable-dark-mode {
55+
@include color-mode(dark, true) {
56+
// Buttons
57+
.btn-neutral {
58+
--#{$prefix}btn-bg: #{$btn-neutral-bg-dark};
59+
--#{$prefix}btn-border-color: #{$btn-neutral-border-color-dark};
60+
--#{$prefix}btn-color: #{$btn-neutral-color-dark};
61+
--#{$prefix}btn-hover-bg: #{$btn-neutral-hover-bg-dark};
62+
--#{$prefix}btn-hover-color: #{$btn-neutral-hover-color-dark};
63+
--#{$prefix}btn-hover-border-color: #{$btn-neutral-hover-border-color-dark};
64+
--#{$prefix}btn-active-bg: #{$btn-neutral-active-bg-dark};
65+
--#{$prefix}btn-active-color: #{$btn-neutral-active-color-dark};
66+
--#{$prefix}btn-active-border-color: #{$btn-neutral-active-border-color-dark};
67+
}
68+
}
69+
}

‎components/_avatar.scss‎

Lines changed: 100 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
//
2+
// Avatar
3+
//
4+
5+
.avatar {
6+
--#{$prefix}avatar-size: #{$avatar-size};
7+
--#{$prefix}avatar-border-radius: #{$avatar-border-radius};
8+
--#{$prefix}avatar-font-size: #{$avatar-font-size};
9+
--#{$prefix}avatar-font-weight: #{$avatar-font-weight};
10+
11+
position: relative;
12+
display: inline-flex;
13+
align-items: center;
14+
justify-content: center;
15+
vertical-align: middle;
16+
font-weight: var(--#{$prefix}avatar-font-weight);
17+
height: var(--#{$prefix}avatar-size);
18+
width: var(--#{$prefix}avatar-size);
19+
@include font-size(var(--#{$prefix}avatar-font-size));
20+
@include border-radius(var(--#{$prefix}avatar-border-radius));
21+
22+
img {
23+
width: 100%;
24+
@include border-radius(inherit);
25+
}
26+
27+
+ .avatar {
28+
margin-left: .25rem;
29+
}
30+
31+
+ .avatar-content {
32+
display: inline-block;
33+
margin-left: .75rem;
34+
}
35+
}
36+
37+
// Sizes
38+
.avatar-xl {
39+
--#{$prefix}avatar-size: #{$avatar-size-xl};
40+
--#{$prefix}avatar-font-size: #{$avatar-font-size-xl};
41+
}
42+
43+
.avatar-lg {
44+
--#{$prefix}avatar-size: #{$avatar-size-lg};
45+
--#{$prefix}avatar-font-size: #{$avatar-font-size-lg};
46+
}
47+
48+
.avatar-sm {
49+
--#{$prefix}avatar-size: #{$avatar-size-sm};
50+
--#{$prefix}avatar-font-size: #{$avatar-font-size-sm};
51+
--#{$prefix}avatar-border-radius: #{$avatar-border-radius-sm};
52+
}
53+
54+
.avatar-xs {
55+
--#{$prefix}avatar-size: #{$avatar-size-xs};
56+
--#{$prefix}avatar-font-size: #{$avatar-font-size-xs};
57+
--#{$prefix}avatar-border-radius: #{$avatar-border-radius-xs};
58+
}
59+
60+
61+
// Avatar group
62+
.avatar-group {
63+
display: inline-block;
64+
line-height: 1;
65+
66+
.avatar {
67+
z-index: 1;
68+
@include transition(margin .15s ease-in-out);
69+
70+
&:hover {
71+
z-index: 2;
72+
}
73+
}
74+
75+
.avatar + .avatar {
76+
margin-left: -1rem;
77+
@include border-start-radius(0);
78+
}
79+
80+
.avatar-sm + .avatar-sm,
81+
.avatar-xs + .avatar-xs, {
82+
margin-left: -.75rem;
83+
}
84+
85+
&:hover {
86+
.avatar {
87+
@include border-start-radius($avatar-border-radius);
88+
}
89+
90+
.avatar-sm {
91+
@include border-start-radius($avatar-border-radius-sm);
92+
}
93+
}
94+
}
95+
96+
.avatar-ungroup-hover:hover {
97+
.avatar:not(:first-child) {
98+
margin-left: 0;
99+
}
100+
}

‎components/_badge.scss‎

Lines changed: 100 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
//
2+
// Badge
3+
//
4+
5+
.badge {
6+
--#{$prefix}badge-text-transform: #{$badge-text-transform};
7+
--#{$prefix}badge-line-height: #{$badge-line-height};
8+
9+
text-transform: var(--#{$prefix}badge-text-transform);
10+
line-height: var(--#{$prefix}badge-line-height);
11+
12+
}
13+
14+
// Size variations
15+
.badge-xs {
16+
--#{$prefix}badge-padding-x: .5rem;
17+
--#{$prefix}badge-padding-y: .1rem;
18+
font-size: 70%;
19+
}
20+
21+
.badge-md {
22+
--#{$prefix}badge-padding-x: .675rem;
23+
--#{$prefix}badge-padding-y: .375rem;
24+
}
25+
26+
.badge-lg {
27+
--#{$prefix}badge-padding-x: 1rem;
28+
--#{$prefix}badge-padding-y: .875rem;
29+
@include font-size($badge-lg-font-size);
30+
}
31+
32+
// Badge with indicator
33+
.badge-dot {
34+
--#{$prefix}badge-color: #{$badge-dot-color};
35+
--#{$prefix}badge-font-weight: #{$badge-dot-font-weight};
36+
37+
display: inline-flex;
38+
align-items: center;
39+
padding: 0;
40+
background: transparent;
41+
font-weight: var(--#{$prefix}badge-font-weight);
42+
color: var(--#{$prefix}badge-color);
43+
44+
i {
45+
display: inline-block;
46+
vertical-align: middle;
47+
width: .375rem;
48+
height: .375rem;
49+
border-radius: 50%;
50+
margin-right: .5rem;
51+
}
52+
53+
&.badge-md {
54+
i {
55+
width: .5rem;
56+
height: .5rem;
57+
}
58+
}
59+
60+
&.badge-lg {
61+
i {
62+
width: .625rem;
63+
height: .625rem;
64+
}
65+
}
66+
}
67+
68+
// Badge count
69+
.badge-count {
70+
text-align: center;
71+
display: inline-flex;
72+
align-items: center;
73+
justify-content: center;
74+
padding: 0 !important;
75+
width: 1.25rem;
76+
height: 1.25rem;
77+
vertical-align: middle;
78+
@include font-size(.75rem);
79+
font-weight: 600;
80+
81+
&.badge-xs {
82+
width: 1rem;
83+
height: 1rem;
84+
@include font-size(.5rem);
85+
}
86+
87+
&.badge-md {
88+
width: 1.5rem;
89+
height: 1.5rem;
90+
}
91+
92+
&.badge-lg {
93+
width: 2rem;
94+
height: 2rem;
95+
}
96+
97+
svg {
98+
margin: 0;
99+
}
100+
}

0 commit comments

Comments
 (0)