@tiddh/brave-vue 1.93.49 → 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 +57 -17
- package/dist/src/Sidebar.stories.js +4 -1
- package/dist/src/Sidebar.vue +57 -17
- package/dist/src/components/Modal/Sidebar.stories.js +4 -1
- package/dist/src/components/Modal/Sidebar.vue +57 -17
- 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
|
|
|
@@ -5,9 +5,9 @@
|
|
|
5
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>
|
|
@@ -510,9 +510,9 @@
|
|
|
510
510
|
height: 100%;
|
|
511
511
|
}
|
|
512
512
|
|
|
513
|
-
&.close-sidebar {
|
|
514
|
-
|
|
515
|
-
}
|
|
513
|
+
// &.close-sidebar {
|
|
514
|
+
// display: none;
|
|
515
|
+
// }
|
|
516
516
|
|
|
517
517
|
.overlay {
|
|
518
518
|
// background: #68596e;
|
|
@@ -530,17 +530,8 @@
|
|
|
530
530
|
bottom: 0;
|
|
531
531
|
}
|
|
532
532
|
|
|
533
|
-
|
|
534
|
-
|
|
535
|
-
position: absolute;
|
|
536
|
-
right: -(columns("lg", 12));
|
|
537
|
-
top: 0;
|
|
538
|
-
background-color: #fff;
|
|
539
|
-
z-index: 1000;
|
|
540
|
-
opacity: 0;
|
|
541
|
-
transition: all 0.5s;
|
|
542
|
-
|
|
543
|
-
&.open-sidebar {
|
|
533
|
+
&.open-sidebar {
|
|
534
|
+
.sidebar {
|
|
544
535
|
right: 0px;
|
|
545
536
|
opacity: 1;
|
|
546
537
|
-webkit-animation: linear;
|
|
@@ -553,8 +544,10 @@
|
|
|
553
544
|
-webkit-animation-name: runTop;
|
|
554
545
|
}
|
|
555
546
|
}
|
|
547
|
+
}
|
|
556
548
|
|
|
557
|
-
|
|
549
|
+
&.close-sidebar {
|
|
550
|
+
.sidebar {
|
|
558
551
|
right: -(columns("lg", 12));
|
|
559
552
|
opacity: 0;
|
|
560
553
|
-webkit-animation: linear;
|
|
@@ -572,6 +565,53 @@
|
|
|
572
565
|
}
|
|
573
566
|
}
|
|
574
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
|
+
|
|
575
615
|
@include media-breakpoint-down("sm") {
|
|
576
616
|
width: 100%;
|
|
577
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
|
@@ -5,9 +5,9 @@
|
|
|
5
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>
|
|
@@ -510,9 +510,9 @@
|
|
|
510
510
|
height: 100%;
|
|
511
511
|
}
|
|
512
512
|
|
|
513
|
-
&.close-sidebar {
|
|
514
|
-
|
|
515
|
-
}
|
|
513
|
+
// &.close-sidebar {
|
|
514
|
+
// display: none;
|
|
515
|
+
// }
|
|
516
516
|
|
|
517
517
|
.overlay {
|
|
518
518
|
// background: #68596e;
|
|
@@ -530,17 +530,8 @@
|
|
|
530
530
|
bottom: 0;
|
|
531
531
|
}
|
|
532
532
|
|
|
533
|
-
|
|
534
|
-
|
|
535
|
-
position: absolute;
|
|
536
|
-
right: -(columns("lg", 12));
|
|
537
|
-
top: 0;
|
|
538
|
-
background-color: #fff;
|
|
539
|
-
z-index: 1000;
|
|
540
|
-
opacity: 0;
|
|
541
|
-
transition: all 0.5s;
|
|
542
|
-
|
|
543
|
-
&.open-sidebar {
|
|
533
|
+
&.open-sidebar {
|
|
534
|
+
.sidebar {
|
|
544
535
|
right: 0px;
|
|
545
536
|
opacity: 1;
|
|
546
537
|
-webkit-animation: linear;
|
|
@@ -553,8 +544,10 @@
|
|
|
553
544
|
-webkit-animation-name: runTop;
|
|
554
545
|
}
|
|
555
546
|
}
|
|
547
|
+
}
|
|
556
548
|
|
|
557
|
-
|
|
549
|
+
&.close-sidebar {
|
|
550
|
+
.sidebar {
|
|
558
551
|
right: -(columns("lg", 12));
|
|
559
552
|
opacity: 0;
|
|
560
553
|
-webkit-animation: linear;
|
|
@@ -572,6 +565,53 @@
|
|
|
572
565
|
}
|
|
573
566
|
}
|
|
574
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
|
+
|
|
575
615
|
@include media-breakpoint-down("sm") {
|
|
576
616
|
width: 100%;
|
|
577
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
|
|
|
@@ -5,9 +5,9 @@
|
|
|
5
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>
|
|
@@ -510,9 +510,9 @@
|
|
|
510
510
|
height: 100%;
|
|
511
511
|
}
|
|
512
512
|
|
|
513
|
-
&.close-sidebar {
|
|
514
|
-
|
|
515
|
-
}
|
|
513
|
+
// &.close-sidebar {
|
|
514
|
+
// display: none;
|
|
515
|
+
// }
|
|
516
516
|
|
|
517
517
|
.overlay {
|
|
518
518
|
// background: #68596e;
|
|
@@ -530,17 +530,8 @@
|
|
|
530
530
|
bottom: 0;
|
|
531
531
|
}
|
|
532
532
|
|
|
533
|
-
|
|
534
|
-
|
|
535
|
-
position: absolute;
|
|
536
|
-
right: -(columns("lg", 12));
|
|
537
|
-
top: 0;
|
|
538
|
-
background-color: #fff;
|
|
539
|
-
z-index: 1000;
|
|
540
|
-
opacity: 0;
|
|
541
|
-
transition: all 0.5s;
|
|
542
|
-
|
|
543
|
-
&.open-sidebar {
|
|
533
|
+
&.open-sidebar {
|
|
534
|
+
.sidebar {
|
|
544
535
|
right: 0px;
|
|
545
536
|
opacity: 1;
|
|
546
537
|
-webkit-animation: linear;
|
|
@@ -553,8 +544,10 @@
|
|
|
553
544
|
-webkit-animation-name: runTop;
|
|
554
545
|
}
|
|
555
546
|
}
|
|
547
|
+
}
|
|
556
548
|
|
|
557
|
-
|
|
549
|
+
&.close-sidebar {
|
|
550
|
+
.sidebar {
|
|
558
551
|
right: -(columns("lg", 12));
|
|
559
552
|
opacity: 0;
|
|
560
553
|
-webkit-animation: linear;
|
|
@@ -572,6 +565,53 @@
|
|
|
572
565
|
}
|
|
573
566
|
}
|
|
574
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
|
+
|
|
575
615
|
@include media-breakpoint-down("sm") {
|
|
576
616
|
width: 100%;
|
|
577
617
|
// border-radius: 30px;
|