Skip to content

Commit edf6e67

Browse files
mlmoravekmlmoravek
committed
Merge branch 'main' into add-z-index-classes
2 parents 9f471e8 + ff56b12 commit edf6e67

38 files changed

+695
-681
lines changed

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@oruga-ui/theme-bootstrap",
3-
"version": "0.3.4",
3+
"version": "0.3.5",
44
"description": "Bootstrap theme for Oruga",
55
"license": "MIT",
66
"main": "dist/bootstrap.js",

‎src/App.vue‎

Lines changed: 41 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,55 +1,62 @@
1+
<script setup lang="ts">
2+
const paths = import.meta.glob("./components/*.vue") as any;
3+
const components = Object.keys(paths)
4+
.map((c: string) => c.replace(".vue", ""))
5+
.map((c: string) => c.replace("./components/", ""))
6+
.map((c: string) => `/${c}`)
7+
.map((c: string) => {
8+
const name = c.split("/")[1];
9+
return {
10+
name,
11+
link: c,
12+
};
13+
});
14+
</script>
15+
116
<template>
2-
<div id="main">
3-
<div id="nav">
17+
<div id="app">
18+
<nav id="nav">
419
<router-link to="/" class="py-4 ps-0 text-center">
520
<img
621
class="image__oruga"
722
src="https://raw.githubusercontent.com/oruga-ui/theme-bootstrap/master/public/logo.svg"
823
alt="Logo Oruga Theme Bootstrap" />
924
<b class="fs-5 text-white">Oruga Bootstrap Theme</b>
1025
</router-link>
11-
<router-link to="/autocomplete">Autocomplete</router-link>
12-
<router-link to="/button">Button</router-link>
13-
<router-link to="/carousel">Carousel</router-link>
14-
<router-link to="/checkbox">Checkbox</router-link>
15-
<router-link to="/collapse">Collapse</router-link>
16-
<router-link to="/datepicker">Datepicker</router-link>
17-
<router-link to="/dropdown">Dropdown</router-link>
18-
<router-link to="/field">Field</router-link>
19-
<router-link to="/icon">Icon</router-link>
20-
<router-link to="/input">Input</router-link>
21-
<router-link to="/loading">Loading</router-link>
22-
<router-link to="/modal">Modal</router-link>
23-
<router-link to="/notification">Notification</router-link>
24-
<router-link to="/pagination">Pagination</router-link>
25-
<router-link to="/radio">Radio</router-link>
26-
<router-link to="/select">Select</router-link>
27-
<router-link to="/sidebar">Sidebar</router-link>
28-
<router-link to="/skeleton">Skeleton</router-link>
29-
<router-link to="/slider">Slider</router-link>
30-
<router-link to="/steps">Steps</router-link>
31-
<router-link to="/switch">Switch</router-link>
32-
<router-link to="/table">Table</router-link>
33-
<router-link to="/tabs">Tabs</router-link>
34-
<router-link to="/taginput">Taginput</router-link>
35-
<router-link to="/timepicker">Timepicker</router-link>
36-
<router-link to="/tooltip">Tooltip</router-link>
37-
<router-link to="/upload">Upload</router-link>
38-
</div>
26+
<hr />
27+
<router-link v-for="item in components" :key="item.name" :to="item.link">
28+
{{ item.name }}
29+
</router-link>
30+
</nav>
3931

40-
<section class="section">
32+
<main>
4133
<router-view />
42-
</section>
34+
</main>
4335
</div>
4436
</template>
4537

4638
<style lang="scss">
47-
#main {
39+
#app {
4840
display: flex;
49-
.section {
41+
width: 100%;
42+
main {
5043
flex-grow: 1;
5144
margin: 25px;
5245
}
46+
47+
section {
48+
padding: 1rem 0;
49+
50+
h3 {
51+
font-size: 1.75rem;
52+
}
53+
54+
.buttons > * {
55+
margin-right: 0.5rem;
56+
margin-bottom: 0.5rem;
57+
}
58+
}
59+
5360
#nav {
5461
display: flex;
5562
flex-direction: column;

‎src/assets/scss/components/_button.scss‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -60,6 +60,11 @@ $btn-hover-box-shadow: $box-shadow-sm !default;
6060
--#{$prefix}btn-hover-border-color: #{$btn-hover-border-color};
6161
--#{$prefix}btn-hover-box-shadow: #{$btn-hover-box-shadow};
6262

63+
.button-wrapper {
64+
display: inline-flex;
65+
align-items: center;
66+
}
67+
6368
.icon {
6469
margin: 0 4px;
6570

‎src/assets/scss/components/_checkbox.scss‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -70,8 +70,8 @@
7070
&.variant-#{$name} {
7171
input[type="radio"],
7272
input[type="checkbox"] {
73-
background-color: ar(--#{$prefix}#{$name});
74-
border-color: ar(--#{$prefix}#{$name});
73+
background-color: var(--#{$prefix}#{$name});
74+
border-color: var(--#{$prefix}#{$name});
7575
}
7676
}
7777
}

‎src/assets/scss/components/_field.scss‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -62,6 +62,10 @@ $input-field-btn-border-color: $input-border-color !default;
6262

6363
&.grouped-multiline {
6464
flex-wrap: wrap;
65+
66+
&:last-child {
67+
margin-bottom: calc(-1 * var(--#{$prefix}input-field-margin-bottom));
68+
}
6569
}
6670

6771
&.field-horizontal {
@@ -90,6 +94,10 @@ $input-field-btn-border-color: $input-border-color !default;
9094
flex-grow: 1;
9195
flex-shrink: 1;
9296
width: auto;
97+
98+
&.btn {
99+
width: 100%;
100+
}
93101
}
94102
}
95103

‎src/assets/scss/components/_modal.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -47,6 +47,7 @@ html.modal-open {
4747
}
4848

4949
.modal {
50+
@extend .show;
5051
display: flex;
5152

5253
.modal-backdrop {

‎src/assets/scss/components/_notification.scss‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,7 @@ $notification-icon-margin-right: 0.5rem !default;
5353
}
5454

5555
.alert {
56-
button {
56+
& > button {
5757
background-color: transparent;
5858
border: 0;
5959
position: absolute;
@@ -71,6 +71,11 @@ $notification-icon-margin-right: 0.5rem !default;
7171
}
7272
}
7373
}
74+
75+
// default color variant light
76+
&:not([class*="variant-"]) {
77+
@extend .alert-light;
78+
}
7479
}
7580

7681
.toast {

‎src/assets/scss/utils/_utility.scss‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,8 @@
55
// btn-close overrides
66

77
.btn-close > .icon,
8-
.btn-close.icon i {
8+
.btn-close.icon > i,
9+
.btn-close.icon > svg {
910
visibility: hidden;
1011
}
1112

‎src/components/Autocomplete.vue‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -487,7 +487,7 @@ function getMoreAsyncData() {
487487
<hr />
488488
</section>
489489

490-
<section class="py-3">
490+
<section>
491491
<h2>Base</h2>
492492

493493
<o-field label="Find a JS framework">
@@ -506,10 +506,10 @@ function getMoreAsyncData() {
506506
<p><b>Selected:</b> {{ selectedBase }}</p>
507507
</section>
508508

509-
<section class="py-3">
509+
<section>
510510
<h2>Objects array</h2>
511511

512-
<o-field grouped group-multiline>
512+
<o-field grouped>
513513
<o-switch v-model="openOnFocus">Open dropdown on focus</o-switch>
514514
<o-switch v-model="keepFirst">Keep-first</o-switch>
515515
</o-field>
@@ -527,7 +527,7 @@ function getMoreAsyncData() {
527527
<p><b>Selected:</b> {{ selectedObjects }}</p>
528528
</section>
529529

530-
<section class="py-3">
530+
<section>
531531
<h2>Groups</h2>
532532

533533
<o-field label="Find a food">
@@ -543,7 +543,7 @@ function getMoreAsyncData() {
543543
<p><b>Selected:</b> {{ selectedGroups }}</p>
544544
</section>
545545

546-
<section class="py-3">
546+
<section>
547547
<h2>Infinite Scroll</h2>
548548

549549
<o-field label="Find a movie">

‎src/components/Button.vue‎

Lines changed: 19 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -4,32 +4,32 @@
44
<hr />
55
</section>
66

7-
<section class="py-3">
7+
<section>
88
<h3>Base</h3>
99

1010
<div class="buttons">
11-
<o-button variant="primary">Primary</o-button>
12-
<o-button variant="secondary">Secondary</o-button>
13-
<o-button variant="success">Success</o-button>
14-
<o-button variant="danger">Danger</o-button>
15-
<o-button variant="warning">Warning</o-button>
16-
<o-button variant="info">Info</o-button>
17-
<o-button variant="dark">Dark</o-button>
18-
<o-button variant="light">Light</o-button>
11+
<o-button label="Primary" variant="primary" />
12+
<o-button label="Secondary" variant="secondary" />
13+
<o-button label="Success" variant="success" />
14+
<o-button label="Info" variant="info" />
15+
<o-button label="Warning" variant="warning" />
16+
<o-button label="Danger" variant="danger" />
17+
<o-button label="Dark" variant="dark" />
18+
<o-button label="Light" variant="light" />
1919
</div>
2020
</section>
2121

22-
<section class="py-3">
22+
<section>
2323
<h3>States</h3>
2424

2525
<div class="buttons">
26-
<o-button>Normal</o-button>
27-
<o-button disabled>Disabled</o-button>
28-
<o-button rounded variant="light">Rounded</o-button>
26+
<o-button label="Normal" />
27+
<o-button label="Disabled" disabled />
28+
<o-button label="Rounded" rounded />
2929
</div>
3030
</section>
3131

32-
<section class="py-3">
32+
<section>
3333
<h3>Outlined</h3>
3434

3535
<div class="buttons">
@@ -44,7 +44,7 @@
4444
</div>
4545
</section>
4646

47-
<section class="py-3">
47+
<section>
4848
<h3>Inverted</h3>
4949

5050
<div class="buttons">
@@ -59,7 +59,7 @@
5959
</div>
6060
</section>
6161

62-
<section class="py-3">
62+
<section>
6363
<h3>Variant Subtle</h3>
6464

6565
<div class="buttons">
@@ -74,7 +74,7 @@
7474
</div>
7575
</section>
7676

77-
<section class="py-3">
77+
<section>
7878
<h3>Icons</h3>
7979

8080
<div class="buttons">
@@ -91,11 +91,11 @@
9191
</div>
9292
</section>
9393

94-
<section class="py-3">
94+
<section>
9595
<h3>Expanded</h3>
9696

9797
<div class="buttons">
98-
<o-button variant="primary" expanded>Expanded</o-button>
98+
<o-button label="Expanded" variant="primary" expanded />
9999
</div>
100100
</section>
101101
</template>

0 commit comments

Comments
 (0)