@tiddh/brave-vue 1.93.48 → 1.93.50
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/src/Modal/Sidebar.stories.js +4 -1
- package/dist/src/Modal/Sidebar.vue +60 -16
- package/dist/src/Sidebar.stories.js +4 -1
- package/dist/src/Sidebar.vue +60 -16
- package/dist/src/components/Modal/Sidebar.stories.js +4 -1
- package/dist/src/components/Modal/Sidebar.vue +60 -16
- package/package.json +1 -1
|
@@ -27,9 +27,12 @@ export const Primary = () => ({
|
|
|
27
27
|
divider: {
|
|
28
28
|
default: boolean("Divider", true),
|
|
29
29
|
},
|
|
30
|
+
sidebarOpen: {
|
|
31
|
+
default: boolean("Open", false),
|
|
32
|
+
},
|
|
30
33
|
},
|
|
31
34
|
template: `<div>
|
|
32
|
-
<Sidebar ctaText="Voltar para a home" color="#223A7E">
|
|
35
|
+
<Sidebar :sidebarOpen="sidebarOpen" ctaText="Voltar para a home" color="#223A7E">
|
|
33
36
|
<h1>Teste</h1>
|
|
34
37
|
</Sidebar>
|
|
35
38
|
|
|
@@ -2,12 +2,12 @@
|
|
|
2
2
|
<transition name="fade">
|
|
3
3
|
<div>
|
|
4
4
|
<div
|
|
5
|
-
class="sidebar-
|
|
5
|
+
class="sidebar-brave"
|
|
6
6
|
:class="sidebarOpen ? 'open-sidebar' : 'close-sidebar'"
|
|
7
7
|
>
|
|
8
|
-
<div class="overlay" v-if="
|
|
8
|
+
<div class="overlay" v-if="sidebarOpen"></div>
|
|
9
9
|
|
|
10
|
-
<div class="sidebar"
|
|
10
|
+
<div class="sidebar">
|
|
11
11
|
<div class="sidebar-close" @click="closeSidebar()">
|
|
12
12
|
<Icon name="close" size="lg" fill="#DFDAE4" stroke="transparent" />
|
|
13
13
|
</div>
|
|
@@ -496,7 +496,7 @@
|
|
|
496
496
|
}
|
|
497
497
|
}
|
|
498
498
|
|
|
499
|
-
.sidebar-
|
|
499
|
+
.sidebar-brave {
|
|
500
500
|
width: 100%;
|
|
501
501
|
position: fixed;
|
|
502
502
|
right: 0px;
|
|
@@ -510,6 +510,10 @@
|
|
|
510
510
|
height: 100%;
|
|
511
511
|
}
|
|
512
512
|
|
|
513
|
+
// &.close-sidebar {
|
|
514
|
+
// display: none;
|
|
515
|
+
// }
|
|
516
|
+
|
|
513
517
|
.overlay {
|
|
514
518
|
// background: #68596e;
|
|
515
519
|
opacity: 0.8;
|
|
@@ -526,17 +530,8 @@
|
|
|
526
530
|
bottom: 0;
|
|
527
531
|
}
|
|
528
532
|
|
|
529
|
-
|
|
530
|
-
|
|
531
|
-
position: absolute;
|
|
532
|
-
right: -(columns("lg", 12));
|
|
533
|
-
top: 0;
|
|
534
|
-
background-color: #fff;
|
|
535
|
-
z-index: 1000;
|
|
536
|
-
opacity: 0;
|
|
537
|
-
transition: all 0.5s;
|
|
538
|
-
|
|
539
|
-
&.open-sidebar {
|
|
533
|
+
&.open-sidebar {
|
|
534
|
+
.sidebar {
|
|
540
535
|
right: 0px;
|
|
541
536
|
opacity: 1;
|
|
542
537
|
-webkit-animation: linear;
|
|
@@ -549,8 +544,10 @@
|
|
|
549
544
|
-webkit-animation-name: runTop;
|
|
550
545
|
}
|
|
551
546
|
}
|
|
547
|
+
}
|
|
552
548
|
|
|
553
|
-
|
|
549
|
+
&.close-sidebar {
|
|
550
|
+
.sidebar {
|
|
554
551
|
right: -(columns("lg", 12));
|
|
555
552
|
opacity: 0;
|
|
556
553
|
-webkit-animation: linear;
|
|
@@ -568,6 +565,53 @@
|
|
|
568
565
|
}
|
|
569
566
|
}
|
|
570
567
|
|
|
568
|
+
.overlay {
|
|
569
|
+
display: none;
|
|
570
|
+
}
|
|
571
|
+
}
|
|
572
|
+
|
|
573
|
+
.sidebar {
|
|
574
|
+
width: columns("lg", 12);
|
|
575
|
+
position: absolute;
|
|
576
|
+
right: -(columns("lg", 12));
|
|
577
|
+
top: 0;
|
|
578
|
+
background-color: #fff;
|
|
579
|
+
z-index: 1000;
|
|
580
|
+
opacity: 0;
|
|
581
|
+
transition: all 0.5s;
|
|
582
|
+
|
|
583
|
+
// &.open-sidebar {
|
|
584
|
+
// right: 0px;
|
|
585
|
+
// opacity: 1;
|
|
586
|
+
// -webkit-animation: linear;
|
|
587
|
+
// -webkit-animation-name: run;
|
|
588
|
+
// -webkit-animation-duration: 0.5s;
|
|
589
|
+
|
|
590
|
+
// @include media-breakpoint-down("sm") {
|
|
591
|
+
// top: 0%;
|
|
592
|
+
// right: 0px;
|
|
593
|
+
// -webkit-animation-name: runTop;
|
|
594
|
+
// }
|
|
595
|
+
// }
|
|
596
|
+
|
|
597
|
+
// &.close-sidebar {
|
|
598
|
+
// right: -(columns("lg", 12));
|
|
599
|
+
// opacity: 0;
|
|
600
|
+
// -webkit-animation: linear;
|
|
601
|
+
// -webkit-animation-name: runReverse;
|
|
602
|
+
// -webkit-animation-duration: 0.5s;
|
|
603
|
+
|
|
604
|
+
// @include media-breakpoint-down("sm") {
|
|
605
|
+
// top: 100%;
|
|
606
|
+
// right: 0px;
|
|
607
|
+
// -webkit-animation-name: runReverseTop;
|
|
608
|
+
// }
|
|
609
|
+
|
|
610
|
+
// &.hide-overlay {
|
|
611
|
+
// display: none;
|
|
612
|
+
// }
|
|
613
|
+
// }
|
|
614
|
+
|
|
571
615
|
@include media-breakpoint-down("sm") {
|
|
572
616
|
width: 100%;
|
|
573
617
|
// border-radius: 30px;
|
|
@@ -27,9 +27,12 @@ export const Primary = () => ({
|
|
|
27
27
|
divider: {
|
|
28
28
|
default: boolean("Divider", true),
|
|
29
29
|
},
|
|
30
|
+
sidebarOpen: {
|
|
31
|
+
default: boolean("Open", false),
|
|
32
|
+
},
|
|
30
33
|
},
|
|
31
34
|
template: `<div>
|
|
32
|
-
<Sidebar ctaText="Voltar para a home" color="#223A7E">
|
|
35
|
+
<Sidebar :sidebarOpen="sidebarOpen" ctaText="Voltar para a home" color="#223A7E">
|
|
33
36
|
<h1>Teste</h1>
|
|
34
37
|
</Sidebar>
|
|
35
38
|
|
package/dist/src/Sidebar.vue
CHANGED
|
@@ -2,12 +2,12 @@
|
|
|
2
2
|
<transition name="fade">
|
|
3
3
|
<div>
|
|
4
4
|
<div
|
|
5
|
-
class="sidebar-
|
|
5
|
+
class="sidebar-brave"
|
|
6
6
|
:class="sidebarOpen ? 'open-sidebar' : 'close-sidebar'"
|
|
7
7
|
>
|
|
8
|
-
<div class="overlay" v-if="
|
|
8
|
+
<div class="overlay" v-if="sidebarOpen"></div>
|
|
9
9
|
|
|
10
|
-
<div class="sidebar"
|
|
10
|
+
<div class="sidebar">
|
|
11
11
|
<div class="sidebar-close" @click="closeSidebar()">
|
|
12
12
|
<Icon name="close" size="lg" fill="#DFDAE4" stroke="transparent" />
|
|
13
13
|
</div>
|
|
@@ -496,7 +496,7 @@
|
|
|
496
496
|
}
|
|
497
497
|
}
|
|
498
498
|
|
|
499
|
-
.sidebar-
|
|
499
|
+
.sidebar-brave {
|
|
500
500
|
width: 100%;
|
|
501
501
|
position: fixed;
|
|
502
502
|
right: 0px;
|
|
@@ -510,6 +510,10 @@
|
|
|
510
510
|
height: 100%;
|
|
511
511
|
}
|
|
512
512
|
|
|
513
|
+
// &.close-sidebar {
|
|
514
|
+
// display: none;
|
|
515
|
+
// }
|
|
516
|
+
|
|
513
517
|
.overlay {
|
|
514
518
|
// background: #68596e;
|
|
515
519
|
opacity: 0.8;
|
|
@@ -526,17 +530,8 @@
|
|
|
526
530
|
bottom: 0;
|
|
527
531
|
}
|
|
528
532
|
|
|
529
|
-
|
|
530
|
-
|
|
531
|
-
position: absolute;
|
|
532
|
-
right: -(columns("lg", 12));
|
|
533
|
-
top: 0;
|
|
534
|
-
background-color: #fff;
|
|
535
|
-
z-index: 1000;
|
|
536
|
-
opacity: 0;
|
|
537
|
-
transition: all 0.5s;
|
|
538
|
-
|
|
539
|
-
&.open-sidebar {
|
|
533
|
+
&.open-sidebar {
|
|
534
|
+
.sidebar {
|
|
540
535
|
right: 0px;
|
|
541
536
|
opacity: 1;
|
|
542
537
|
-webkit-animation: linear;
|
|
@@ -549,8 +544,10 @@
|
|
|
549
544
|
-webkit-animation-name: runTop;
|
|
550
545
|
}
|
|
551
546
|
}
|
|
547
|
+
}
|
|
552
548
|
|
|
553
|
-
|
|
549
|
+
&.close-sidebar {
|
|
550
|
+
.sidebar {
|
|
554
551
|
right: -(columns("lg", 12));
|
|
555
552
|
opacity: 0;
|
|
556
553
|
-webkit-animation: linear;
|
|
@@ -568,6 +565,53 @@
|
|
|
568
565
|
}
|
|
569
566
|
}
|
|
570
567
|
|
|
568
|
+
.overlay {
|
|
569
|
+
display: none;
|
|
570
|
+
}
|
|
571
|
+
}
|
|
572
|
+
|
|
573
|
+
.sidebar {
|
|
574
|
+
width: columns("lg", 12);
|
|
575
|
+
position: absolute;
|
|
576
|
+
right: -(columns("lg", 12));
|
|
577
|
+
top: 0;
|
|
578
|
+
background-color: #fff;
|
|
579
|
+
z-index: 1000;
|
|
580
|
+
opacity: 0;
|
|
581
|
+
transition: all 0.5s;
|
|
582
|
+
|
|
583
|
+
// &.open-sidebar {
|
|
584
|
+
// right: 0px;
|
|
585
|
+
// opacity: 1;
|
|
586
|
+
// -webkit-animation: linear;
|
|
587
|
+
// -webkit-animation-name: run;
|
|
588
|
+
// -webkit-animation-duration: 0.5s;
|
|
589
|
+
|
|
590
|
+
// @include media-breakpoint-down("sm") {
|
|
591
|
+
// top: 0%;
|
|
592
|
+
// right: 0px;
|
|
593
|
+
// -webkit-animation-name: runTop;
|
|
594
|
+
// }
|
|
595
|
+
// }
|
|
596
|
+
|
|
597
|
+
// &.close-sidebar {
|
|
598
|
+
// right: -(columns("lg", 12));
|
|
599
|
+
// opacity: 0;
|
|
600
|
+
// -webkit-animation: linear;
|
|
601
|
+
// -webkit-animation-name: runReverse;
|
|
602
|
+
// -webkit-animation-duration: 0.5s;
|
|
603
|
+
|
|
604
|
+
// @include media-breakpoint-down("sm") {
|
|
605
|
+
// top: 100%;
|
|
606
|
+
// right: 0px;
|
|
607
|
+
// -webkit-animation-name: runReverseTop;
|
|
608
|
+
// }
|
|
609
|
+
|
|
610
|
+
// &.hide-overlay {
|
|
611
|
+
// display: none;
|
|
612
|
+
// }
|
|
613
|
+
// }
|
|
614
|
+
|
|
571
615
|
@include media-breakpoint-down("sm") {
|
|
572
616
|
width: 100%;
|
|
573
617
|
// border-radius: 30px;
|
|
@@ -27,9 +27,12 @@ export const Primary = () => ({
|
|
|
27
27
|
divider: {
|
|
28
28
|
default: boolean("Divider", true),
|
|
29
29
|
},
|
|
30
|
+
sidebarOpen: {
|
|
31
|
+
default: boolean("Open", false),
|
|
32
|
+
},
|
|
30
33
|
},
|
|
31
34
|
template: `<div>
|
|
32
|
-
<Sidebar ctaText="Voltar para a home" color="#223A7E">
|
|
35
|
+
<Sidebar :sidebarOpen="sidebarOpen" ctaText="Voltar para a home" color="#223A7E">
|
|
33
36
|
<h1>Teste</h1>
|
|
34
37
|
</Sidebar>
|
|
35
38
|
|
|
@@ -2,12 +2,12 @@
|
|
|
2
2
|
<transition name="fade">
|
|
3
3
|
<div>
|
|
4
4
|
<div
|
|
5
|
-
class="sidebar-
|
|
5
|
+
class="sidebar-brave"
|
|
6
6
|
:class="sidebarOpen ? 'open-sidebar' : 'close-sidebar'"
|
|
7
7
|
>
|
|
8
|
-
<div class="overlay" v-if="
|
|
8
|
+
<div class="overlay" v-if="sidebarOpen"></div>
|
|
9
9
|
|
|
10
|
-
<div class="sidebar"
|
|
10
|
+
<div class="sidebar">
|
|
11
11
|
<div class="sidebar-close" @click="closeSidebar()">
|
|
12
12
|
<Icon name="close" size="lg" fill="#DFDAE4" stroke="transparent" />
|
|
13
13
|
</div>
|
|
@@ -496,7 +496,7 @@
|
|
|
496
496
|
}
|
|
497
497
|
}
|
|
498
498
|
|
|
499
|
-
.sidebar-
|
|
499
|
+
.sidebar-brave {
|
|
500
500
|
width: 100%;
|
|
501
501
|
position: fixed;
|
|
502
502
|
right: 0px;
|
|
@@ -510,6 +510,10 @@
|
|
|
510
510
|
height: 100%;
|
|
511
511
|
}
|
|
512
512
|
|
|
513
|
+
// &.close-sidebar {
|
|
514
|
+
// display: none;
|
|
515
|
+
// }
|
|
516
|
+
|
|
513
517
|
.overlay {
|
|
514
518
|
// background: #68596e;
|
|
515
519
|
opacity: 0.8;
|
|
@@ -526,17 +530,8 @@
|
|
|
526
530
|
bottom: 0;
|
|
527
531
|
}
|
|
528
532
|
|
|
529
|
-
|
|
530
|
-
|
|
531
|
-
position: absolute;
|
|
532
|
-
right: -(columns("lg", 12));
|
|
533
|
-
top: 0;
|
|
534
|
-
background-color: #fff;
|
|
535
|
-
z-index: 1000;
|
|
536
|
-
opacity: 0;
|
|
537
|
-
transition: all 0.5s;
|
|
538
|
-
|
|
539
|
-
&.open-sidebar {
|
|
533
|
+
&.open-sidebar {
|
|
534
|
+
.sidebar {
|
|
540
535
|
right: 0px;
|
|
541
536
|
opacity: 1;
|
|
542
537
|
-webkit-animation: linear;
|
|
@@ -549,8 +544,10 @@
|
|
|
549
544
|
-webkit-animation-name: runTop;
|
|
550
545
|
}
|
|
551
546
|
}
|
|
547
|
+
}
|
|
552
548
|
|
|
553
|
-
|
|
549
|
+
&.close-sidebar {
|
|
550
|
+
.sidebar {
|
|
554
551
|
right: -(columns("lg", 12));
|
|
555
552
|
opacity: 0;
|
|
556
553
|
-webkit-animation: linear;
|
|
@@ -568,6 +565,53 @@
|
|
|
568
565
|
}
|
|
569
566
|
}
|
|
570
567
|
|
|
568
|
+
.overlay {
|
|
569
|
+
display: none;
|
|
570
|
+
}
|
|
571
|
+
}
|
|
572
|
+
|
|
573
|
+
.sidebar {
|
|
574
|
+
width: columns("lg", 12);
|
|
575
|
+
position: absolute;
|
|
576
|
+
right: -(columns("lg", 12));
|
|
577
|
+
top: 0;
|
|
578
|
+
background-color: #fff;
|
|
579
|
+
z-index: 1000;
|
|
580
|
+
opacity: 0;
|
|
581
|
+
transition: all 0.5s;
|
|
582
|
+
|
|
583
|
+
// &.open-sidebar {
|
|
584
|
+
// right: 0px;
|
|
585
|
+
// opacity: 1;
|
|
586
|
+
// -webkit-animation: linear;
|
|
587
|
+
// -webkit-animation-name: run;
|
|
588
|
+
// -webkit-animation-duration: 0.5s;
|
|
589
|
+
|
|
590
|
+
// @include media-breakpoint-down("sm") {
|
|
591
|
+
// top: 0%;
|
|
592
|
+
// right: 0px;
|
|
593
|
+
// -webkit-animation-name: runTop;
|
|
594
|
+
// }
|
|
595
|
+
// }
|
|
596
|
+
|
|
597
|
+
// &.close-sidebar {
|
|
598
|
+
// right: -(columns("lg", 12));
|
|
599
|
+
// opacity: 0;
|
|
600
|
+
// -webkit-animation: linear;
|
|
601
|
+
// -webkit-animation-name: runReverse;
|
|
602
|
+
// -webkit-animation-duration: 0.5s;
|
|
603
|
+
|
|
604
|
+
// @include media-breakpoint-down("sm") {
|
|
605
|
+
// top: 100%;
|
|
606
|
+
// right: 0px;
|
|
607
|
+
// -webkit-animation-name: runReverseTop;
|
|
608
|
+
// }
|
|
609
|
+
|
|
610
|
+
// &.hide-overlay {
|
|
611
|
+
// display: none;
|
|
612
|
+
// }
|
|
613
|
+
// }
|
|
614
|
+
|
|
571
615
|
@include media-breakpoint-down("sm") {
|
|
572
616
|
width: 100%;
|
|
573
617
|
// border-radius: 30px;
|