Skip to content

Commit adfd0ef

Browse files
thomasparkthomaspark
committed
brut: new theme
1 parent 99f483c commit adfd0ef

Some content is hidden

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

47 files changed

+52905
-0
lines changed

‎Gruntfile.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ const autoprefixer = require('autoprefixer');
66
const pkg = require('./package.json');
77

88
const SWATCHES = [
9+
'brut',
910
'cerulean',
1011
'cosmo',
1112
'cyborg',

‎dist/brut/_bootswatch.scss

Lines changed: 334 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,334 @@
1+
// Brut 5.3.3
2+
// Bootswatch
3+
4+
5+
// Variables
6+
7+
:root {
8+
--#{$prefix}border-width: 2px;
9+
--#{$prefix}border-color: #000;
10+
}
11+
12+
[data-bs-theme=light],
13+
[data-bs-theme=dark] {
14+
--#{$prefix}border-color: #000;
15+
}
16+
17+
// $text-shadow: 0 1px 0 rgba(0, 0, 0, .05) !default;
18+
19+
// Mixins
20+
21+
@mixin btn-shadow(){
22+
box-shadow: 3px 3px 0 0 var(--#{$prefix}border-color);
23+
}
24+
25+
.table {
26+
border: 2px solid $black;
27+
}
28+
29+
// Typography
30+
31+
a {
32+
font-weight: $headings-font-weight;
33+
}
34+
35+
// Navbar
36+
37+
.navbar {
38+
$navbar-border-width: 2px;
39+
font-size: $font-size-lg;
40+
font-weight: $headings-font-weight;
41+
42+
border: $navbar-border-width solid $black;
43+
44+
&.fixed-top {
45+
border-width: 0 0 $navbar-border-width 0;
46+
}
47+
48+
&.fixed-bottom {
49+
border-width: $navbar-border-width 0 0 0;
50+
}
51+
52+
.dropdown-toggle::after {
53+
margin-left: 0.15em;
54+
vertical-align: 0.15em;
55+
}
56+
57+
&-toggler {
58+
--bs-border-width: 2px;
59+
}
60+
}
61+
62+
// .navbar {
63+
// @each $color, $value in $theme-colors {
64+
// &.bg-#{$color} {
65+
// @include btn-shadow($value);
66+
// }
67+
// }
68+
// }
69+
70+
// .navbar-brand,
71+
// .nav-link {
72+
// text-shadow: $text-shadow;
73+
// }
74+
75+
// Buttons
76+
77+
.btn {
78+
border-color: $black;
79+
margin: 3px 0 0 3px;
80+
@include btn-shadow();
81+
transform: translate(-3px, -3px);
82+
transition: all 0.3s;
83+
84+
&:hover {
85+
border-color: $black;
86+
box-shadow: none;
87+
transform: translate(0, 0);
88+
}
89+
90+
&.disabled {
91+
border-color: $black;
92+
}
93+
94+
&-link,
95+
&-link:hover {
96+
color: $black;
97+
}
98+
}
99+
100+
@each $color, $value in $theme-colors {
101+
.btn-outline-#{$color} {
102+
background-color: #{$value};
103+
box-shadow: none;
104+
transform: translate(0, 0);
105+
color: $black;
106+
107+
&:hover {
108+
@include btn-shadow();
109+
transform: translate(-3px, -3px);
110+
}
111+
}
112+
113+
.btn-check + .btn-#{$color},
114+
.btn-check + .btn-outline-#{$color} {
115+
&:hover {
116+
background-color: #{$value};
117+
}
118+
}
119+
}
120+
121+
.btn-outline-dark {
122+
color: $white;
123+
}
124+
125+
.btn-group,
126+
.btn-group-vertical {
127+
.btn {
128+
&:hover,
129+
&:focus {
130+
z-index: 0;
131+
}
132+
}
133+
134+
> .btn-check:checked + .btn {
135+
z-index: 0;
136+
}
137+
}
138+
139+
.btn-check + .btn {
140+
border-color: $black;
141+
@include btn-shadow();
142+
transform: translate(-3px, -3px);
143+
}
144+
145+
.btn-check + .btn:hover {
146+
border-color: $black;
147+
color: $black;
148+
}
149+
150+
.btn-check:checked + .btn,
151+
:not(.btn-check) + .btn:active,
152+
.btn:first-child:active, .btn.active, .btn.show {
153+
border-color: $black;
154+
box-shadow: none;
155+
transform: translate(0, 0);
156+
}
157+
158+
// Typography
159+
160+
// .text-secondary {
161+
// color: $gray-500 !important;
162+
// }
163+
164+
// .bg-primary,
165+
// .bg-success,
166+
// .bg-info,
167+
// .bg-warning,
168+
// .bg-danger,
169+
// .bg-dark {
170+
// h1,
171+
// h2,
172+
// h3,
173+
// h4,
174+
// h5,
175+
// h6 {
176+
// color: $white;
177+
// }
178+
// }
179+
180+
// Forms
181+
182+
.form-range {
183+
184+
&:not([disabled])::-moz-range-progress {
185+
height: 0.6rem;
186+
background-color: $primary;
187+
border-radius: 6px 0 0 6px;
188+
}
189+
190+
&:not([disabled])::-ms-fill-lower {
191+
height: 0.6rem;
192+
background-color: $primary;
193+
border-radius: 6px 0 0 6px;
194+
}
195+
196+
&::-webkit-slider-runnable-track {
197+
border: 2px solid $black;
198+
}
199+
200+
&::-moz-range-track {
201+
border: 2px solid $black;
202+
}
203+
204+
&::-webkit-slider-thumb {
205+
margin-top: -0.4rem;
206+
}
207+
208+
&::-moz-range-thumb {
209+
margin-top: -0.4rem;
210+
}
211+
212+
&:focus::-webkit-slider-thumb {
213+
box-shadow: none;
214+
}
215+
216+
&:focus::-moz-range-thumb {
217+
box-shadow: none;
218+
}
219+
}
220+
221+
// Navs
222+
223+
.nav-tabs {
224+
gap: 4px;
225+
padding: 0.4rem 0.4rem calc(0.4rem + 2px);
226+
border: 2px solid $black;
227+
border-radius: $border-radius-lg;
228+
229+
font-weight: $headings-font-weight;
230+
231+
.nav-link {
232+
border-width: 2px;
233+
border-radius: $border-radius;
234+
235+
&.active,
236+
&:hover {
237+
border: 2px solid $black;
238+
}
239+
240+
}
241+
}
242+
243+
.tab-content {
244+
margin-top: 1rem;
245+
padding: 1rem;
246+
border: 2px solid $black;
247+
border-radius: $border-radius-lg;
248+
}
249+
250+
.nav-pills {
251+
gap: 4px;
252+
font-weight: $headings-font-weight;
253+
254+
.nav-link {
255+
border: 2px solid $black;
256+
}
257+
}
258+
259+
.breadcrumb {
260+
border: 2px solid $black;
261+
font-weight: $headings-font-weight;
262+
263+
a {
264+
color: $black;
265+
}
266+
}
267+
268+
.dropdown-menu {
269+
@include btn-shadow();
270+
border-radius: $border-radius;
271+
}
272+
273+
.dropdown-header {
274+
font-weight: 700;
275+
}
276+
277+
278+
279+
@each $color, $value in $theme-colors {
280+
.list-group-item-#{$color} {
281+
background-color: #{$value};
282+
border-color: $black;
283+
color: $black;
284+
}
285+
}
286+
287+
.list-group-item-dark {
288+
color: $white;
289+
}
290+
291+
292+
// Indicators
293+
294+
.alert {
295+
border: 2px solid $black;
296+
@include btn-shadow();
297+
color: $black;
298+
}
299+
300+
.alert-link {
301+
color: $black;
302+
}
303+
304+
.alert-dark {
305+
color: $white;
306+
}
307+
308+
@each $color, $value in $theme-colors {
309+
.alert-#{$color} {
310+
background-color: #{$value};
311+
}
312+
}
313+
314+
.badge {
315+
border: 2px solid $black;
316+
317+
&.bg-dark {
318+
color: $white;
319+
}
320+
}
321+
322+
.progress {
323+
border: 2px solid $black;
324+
325+
&-bar {
326+
border-right: 2px solid $black;
327+
}
328+
}
329+
330+
.modal {
331+
&-content {
332+
@include btn-shadow();
333+
}
334+
}

0 commit comments

Comments
 (0)