Skip to content

Commit 4c1e727

Browse files
extrabrightextrabright
committed
made compatible with bootstrap v5.3.2
1 parent 06d02fa commit 4c1e727

File tree

15 files changed

+134
-215
lines changed

15 files changed

+134
-215
lines changed

‎dist/main.css‎

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/main.css.map‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/utility.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/utility.css.map‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "@webpixels/css",
33
"description": "Utility and component-centric design system based on Bootstrap for fast, responsive UI development.",
4-
"version": "2.0.0-beta.10",
4+
"version": "2.0.0",
55
"version_short": "2.0",
66
"license": "MIT",
77
"style": "dist/index.css",

‎scss/components/_navbar-vertical.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -84,7 +84,7 @@
8484
.nav-link {
8585
&[data-bs-toggle="collapse"] {
8686
&:after {
87-
background-image: $navbar-caret-bg;
87+
background-image: $navbar-light-caret-bg;
8888
}
8989
}
9090
}

‎scss/components/_navbar.scss‎

Lines changed: 62 additions & 122 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,14 @@
11
// Navbar
22

33
.navbar {
4-
--#{$prefix}navbar-bg: #{$navbar-nav-link-bg};
5-
--#{$prefix}navbar-color: #{$navbar-nav-link-color};
6-
--#{$prefix}navbar-icon-color: #{$navbar-icon-color};
7-
--#{$prefix}navbar-hover-bg: #{$navbar-nav-link-hover-bg};
8-
--#{$prefix}navbar-hover-color: #{$navbar-nav-link-hover-color};
9-
--#{$prefix}navbar-active-bg: #{$navbar-nav-link-active-bg};
10-
--#{$prefix}navbar-active-color: #{$navbar-nav-link-active-color};
11-
12-
--#{$prefix}nav-link-padding-x: #{$navbar-nav-link-padding-x};
13-
--#{$prefix}nav-link-padding-y: #{$navbar-nav-link-padding-y};
14-
--#{$prefix}nav-link-border-radius: #{$navbar-nav-link-border-radius};
15-
16-
position: relative;
17-
z-index: 100;
18-
19-
// Container
20-
[class^="container"] {
21-
position: relative;
22-
}
4+
--#{$prefix}navbar-nav-link-bg: #{$navbar-light-nav-link-bg};
5+
--#{$prefix}navbar-nav-link-hover-bg: #{$navbar-light-nav-link-hover-bg};
6+
--#{$prefix}navbar-nav-link-active-bg: #{$navbar-light-nav-link-active-bg};
7+
--#{$prefix}navbar-nav-link-padding-x: #{$navbar-nav-link-padding-x};
8+
--#{$prefix}navbar-nav-link-padding-y: #{$navbar-nav-link-padding-y};
9+
--#{$prefix}navbar-nav-link-border-radius: #{$navbar-nav-link-border-radius};
10+
--#{$prefix}navbar-icon-color: #{$navbar-light-icon-color};
11+
--#{$prefix}navbar-collapse-border-color: #{$navbar-light-collapse-border-color};
2312
}
2413

2514
.navbar-user {
@@ -33,35 +22,18 @@
3322
font-size: initial;
3423
}
3524

36-
// Top navbar
37-
38-
.navbar-top {
39-
position: relative;
40-
display: flex;
41-
align-items: center;
42-
43-
.navbar-nav {
44-
flex-direction: row;
45-
.nav-item:last-child {
46-
margin-right: 0;
47-
}
48-
.nav-link {
49-
padding: .5rem .5rem;
50-
}
51-
}
52-
}
53-
5425
// Collapse
5526

5627
.navbar-collapse {
5728
&:before {
5829
content: '';
5930
display: block;
60-
border-top-width: 1px;
61-
border-top-style: solid;
6231
margin: .75rem -1rem;
6332
opacity: 0;
64-
@include transition($transition-base);
33+
border-top-width: 1px;
34+
border-top-style: solid;
35+
border-top-color: var(--#{$prefix}navbar-collapse-border-color);
36+
// @include transition($transition-base);
6537
}
6638

6739
&.show,
@@ -72,38 +44,6 @@
7244
}
7345
}
7446

75-
.navbar-light {
76-
.navbar-collapse::before {
77-
border-top-color: rgba($dark, .1);
78-
}
79-
80-
.collapse .nav {
81-
&:before {
82-
border-color: rgba($dark, .1);
83-
}
84-
}
85-
}
86-
87-
.navbar-dark {
88-
--#{$prefix}navbar-bg: #{$navbar-dark-nav-link-bg};
89-
--#{$prefix}navbar-color: #{$navbar-dark-nav-link-color};
90-
--#{$prefix}navbar-hover-bg: #{$navbar-dark-nav-link-hover-bg};
91-
--#{$prefix}navbar-hover-color: #{$navbar-dark-nav-link-hover-color};
92-
--#{$prefix}navbar-active-bg: #{$navbar-dark-nav-link-active-bg};
93-
--#{$prefix}navbar-active-color: #{$navbar-dark-nav-link-active-color};
94-
95-
.navbar-collapse::before {
96-
border-top-color: rgba($white, .2);
97-
}
98-
99-
.collapse .nav {
100-
&:before {
101-
border-color: rgba($white, .2);
102-
}
103-
}
104-
}
105-
106-
10747
// Generate series of `.navbar-expand-*` responsive classes for configuring
10848
// where your navbar collapses.
10949

@@ -115,37 +55,29 @@
11555
&#{$infix} {
11656
@include media-breakpoint-up($next) {
11757
.navbar-nav {
118-
--#{$prefix}nav-link-padding-x: #{$navbar-nav-link-padding-x};
119-
--#{$prefix}nav-link-padding-y: #{$nav-link-padding-y};
58+
--#{$prefix}navbar-nav-link-padding-x: #{$navbar-nav-link-padding-x};
59+
--#{$prefix}navbar-nav-link-padding-y: #{$nav-link-padding-y};
12060

12161
> .nav-item > .nav-link,
12262
> .nav-link {
123-
background-color: var(--#{$prefix}navbar-bg);
124-
color: var(--#{$prefix}navbar-color);
125-
padding-top: var(--#{$prefix}nav-link-padding-y);
126-
padding-bottom: var(--#{$prefix}nav-link-padding-y);
127-
@include transition($navbar-transition);
128-
@include border-radius(var(--#{$prefix}nav-link-border-radius));
63+
background-color: var(--#{$prefix}navbar-nav-link-bg);
64+
padding-top: var(--#{$prefix}navbar-nav-link-padding-y);
65+
padding-bottom: var(--#{$prefix}navbar-nav-link-padding-y);
66+
@include border-radius(var(--#{$prefix}navbar-nav-link-border-radius));
12967

13068
&:hover,
13169
&:focus {
132-
background-color: var(--#{$prefix}navbar-hover-bg);
133-
color: var(--#{$prefix}navbar-hover-color);
70+
background-color: var(--#{$prefix}navbar-nav-link-hover-bg);
13471
}
13572

13673
&.active {
137-
background-color: var(--#{$prefix}navbar-active-bg);
138-
color: var(--#{$prefix}navbar-active-color);
74+
background-color: var(--#{$prefix}navbar-nav-link-active-bg);
13975
}
14076
}
14177
}
14278

14379
// Brand
14480
.navbar-brand {
145-
img {
146-
height: $navbar-brand-size;
147-
}
148-
14981
&.dropdown-toggle {
15082
&:after {
15183
display: none;
@@ -172,52 +104,60 @@
172104
// Navbar toggler
173105
// Button for toggling the navbar when in its collapsed state
174106
.navbar-toggler {
175-
padding: $navbar-toggler-padding-y $navbar-toggler-padding-x;
176-
@include font-size($navbar-toggler-font-size);
177-
line-height: 1;
178-
background-color: transparent; // remove default button style
179-
border: $navbar-toggler-border-width solid transparent; // remove default button style
180-
@include border-radius($navbar-toggler-border-radius);
181-
@include transition($navbar-toggler-transition);
182-
183-
&:hover {
184-
text-decoration: none;
185-
}
107+
padding: $navbar-toggler-padding-y $navbar-toggler-padding-x;
108+
@include font-size($navbar-toggler-font-size);
109+
line-height: 1;
110+
background-color: transparent; // remove default button style
111+
border: $navbar-toggler-border-width solid transparent; // remove default button style
112+
@include border-radius($navbar-toggler-border-radius);
113+
114+
&:hover {
115+
text-decoration: none;
116+
}
186117

187-
&:focus {
188-
text-decoration: none;
189-
outline: 0;
190-
box-shadow: 0 0 0 $navbar-toggler-focus-width;
191-
}
118+
&:focus {
119+
text-decoration: none;
120+
outline: 0;
121+
box-shadow: 0 0 0 $navbar-toggler-focus-width;
122+
}
192123
}
193124

194125
.navbar-light {
195-
.navbar-toggler {
196-
color: $navbar-light-toggler-color;
197-
background-color: $navbar-light-toggler-bg;
198-
border-color: $navbar-light-toggler-border-color;
199-
200-
&:focus {
201-
color: $navbar-light-toggler-focus-color;
202-
background-color: $navbar-light-toggler-focus-bg;
203-
}
126+
.navbar-toggler {
127+
color: $navbar-light-toggler-color;
128+
background-color: $navbar-light-toggler-bg;
129+
border-color: $navbar-light-toggler-border-color;
130+
131+
&:focus {
132+
color: $navbar-light-toggler-focus-color;
133+
background-color: $navbar-light-toggler-focus-bg;
204134
}
135+
}
205136
}
206137

207138
.navbar-dark {
208-
.navbar-toggler {
209-
color: $navbar-dark-toggler-color;
210-
background-color: $navbar-dark-toggler-bg;
211-
border-color: $navbar-dark-toggler-border-color;
212-
213-
&:focus {
214-
color: $navbar-dark-toggler-focus-color;
215-
background-color: $navbar-dark-toggler-focus-bg;
216-
}
139+
.navbar-toggler {
140+
color: $navbar-dark-toggler-color;
141+
background-color: $navbar-dark-toggler-bg;
142+
border-color: $navbar-dark-toggler-border-color;
143+
144+
&:focus {
145+
color: $navbar-dark-toggler-focus-color;
146+
background-color: $navbar-dark-toggler-focus-bg;
217147
}
148+
}
218149
}
219150

220151
.navbar-toggler-icon {
221152
width: $navbar-toggler-icon-width;
222153
height: $navbar-toggler-icon-height;
223154
}
155+
156+
157+
.navbar-dark,
158+
.navbar[data-bs-theme="dark"] {
159+
--#{$prefix}navbar-nav-link-bg: #{$navbar-dark-nav-link-bg};
160+
--#{$prefix}navbar-nav-link-hover-bg: #{$navbar-dark-nav-link-hover-bg};
161+
--#{$prefix}navbar-nav-link-active-bg: #{$navbar-dark-nav-link-active-bg};
162+
--#{$prefix}navbar-collapse-border-color: #{$navbar-dark-collapse-border-color};
163+
}

‎scss/core/_root.scss‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,8 @@
1111
// Fonts
1212
--#{$prefix}font-display: #{inspect($font-display-bundle)};
1313
--#{$prefix}font-serif: #{inspect($font-serif-bundle)};
14+
--#{$prefix}font-monospace: #{inspect($font-monospace-bundle)};
15+
1416
}
1517

1618
@if $enable-dark-mode {

‎scss/extra.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
/*!
2-
* Webpixels CSS v2.0.0-beta.10 (https://webpixels.io/)
2+
* Webpixels CSS v2.0.0 (https://webpixels.io/)
33
* Copyright 2023 Webpixels
44
* Licensed under MIT (https://github.com/webpixels/css/blob/main/LICENSE)
55
*/

‎scss/index.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
/*!
2-
* Webpixels CSS v2.0.0-beta.10 (https://webpixels.io/)
2+
* Webpixels CSS v2.0.0 (https://webpixels.io/)
33
* Copyright 2023 Webpixels
44
* Licensed under MIT (https://github.com/webpixels/css/blob/main/LICENSE)
55
*/

0 commit comments

Comments
 (0)