Skip to content

Commit 2ef7e32

Browse files
anitaparmar26anitaparmar26
committed
updated page
1 parent 14d313e commit 2ef7e32

3 files changed

Lines changed: 103 additions & 142 deletions

File tree

‎src/assets/scss/_custom.scss‎

Lines changed: 66 additions & 106 deletions
Original file line numberDiff line numberDiff line change
@@ -1,119 +1,79 @@
11

2-
.overlay {
3-
position: fixed;
4-
inset: 0;
5-
background: rgba(0,0,0,.45);
6-
backdrop-filter: blur(1px);
7-
display: none;
8-
z-index: 1030;
2+
3+
.text-xs{
4+
font-size: $font-xs !important;
95
}
10-
.overlay.show {
11-
display: block;
6+
7+
.circle-bg {
8+
position: absolute;
9+
top: 50%;
10+
left: 50%;
11+
transform: translate(-50%, -50%);
12+
width: 800px;
13+
height: 800px;
14+
background-color: rgba($primary, 0.05);
15+
border-radius: 9999px;
16+
filter: blur(48px);
1217
}
13-
.sidebar {
14-
width: 240px;
15-
background: $white;
16-
transition: width .3s, left .3s;
17-
border-right: 1px solid $gray-200;
18-
height: 100vh;
19-
position: fixed;
20-
top: 0;
21-
left: 0;
22-
padding-top: 60px;
23-
z-index: 1030;
24-
.nav-link {
25-
color: $gray-800;
26-
padding: 8px 10px;
27-
display: flex;
28-
align-items: center;
29-
font-size: 14px;
30-
font-weight: 400;
31-
gap: 12px;
32-
white-space: nowrap;
33-
margin: 1px 12px;
34-
border-radius: 8px;
3518

36-
&:hover {
37-
color: $primary;
38-
background-color: rgba($primary, 0.095);
39-
}
40-
&.active {
41-
color: $primary;
42-
background-color: rgba($primary, 0.095);
43-
}
44-
.ti {
45-
font-size: 18px;
19+
// pulse wave
20+
21+
.play-btn {
22+
font-size: 24px;
23+
line-height: 32px;
24+
position: relative;
25+
background-color: rgba($primary, 0.85);
26+
&:before {
27+
content: "";
28+
position: absolute;
29+
width: 150%;
30+
height: 150%;
31+
-webkit-animation-delay: 0s;
32+
animation-delay: 0s;
33+
-webkit-animation: pulsate1 2s;
34+
animation: pulsate1 2s;
35+
-webkit-animation-direction: forwards;
36+
animation-direction: forwards;
37+
-webkit-animation-iteration-count: infinite;
38+
animation-iteration-count: infinite;
39+
-webkit-animation-timing-function: steps;
40+
animation-timing-function: steps;
41+
opacity: 1;
42+
border-radius: 50%;
43+
border: 5px solid var(--#{$prefix}border-color);
44+
box-shadow: rgba(0, 0, 0, 0.3) 0px 2px 4px 0px;
4645
}
47-
}
48-
.nav-text {
49-
transition: opacity .2s;
50-
}
51-
.logo-area {
52-
position: absolute;
53-
top: 0;
54-
left: 0;
55-
height: 60px;
56-
width: 100%;
57-
background: $white;
58-
display: flex;
59-
align-items: center;
60-
gap: 10px;
61-
padding-left: 17px;
62-
color: $gray-800;
63-
border-bottom: 1px solid $gray-200;
64-
}
65-
}
66-
.sidebar.collapsed {
67-
width: 60px;
68-
.nav-link{
69-
margin: 0 0px;
70-
background-color: transparent;
71-
padding: 8px 18px;
72-
}
73-
.nav-text {
74-
display: none;
75-
}
76-
.logo-text {
77-
display: none;
78-
}
79-
}
80-
.topbar {
81-
height: 60px;
82-
margin-left: 240px;
83-
// transition: margin-left .3s;
84-
}
85-
.topbar.full {
86-
margin-left: 60px;
87-
}
88-
.content {
89-
margin-left: 240px;
90-
// transition: margin-left .3s;
91-
// padding: 20px;
92-
}
93-
.content.full {
94-
margin-left: 60px;
95-
}
96-
@media (max-width: 992px) {
97-
.sidebar {
98-
left: -240px;
99-
}
100-
.sidebar.mobile-show {
101-
left: 0;
102-
}
103-
.topbar {
104-
margin-left: 0 !important;
105-
width: 100% !important;
106-
}
107-
.content {
108-
margin-left: 0 !important;
109-
}
11046
}
11147

48+
@-webkit-keyframes pulsate1 {
49+
0% {
50+
-webkit-transform: scale(0.8);
51+
transform: scale(0.8);
52+
opacity: 1;
53+
}
54+
100% {
55+
-webkit-transform: scale(1);
56+
transform: scale(1);
57+
opacity: 0;
58+
box-shadow: none;
59+
}
60+
}
11261

113-
.text-xs{
114-
font-size: $font-xs !important;
62+
@keyframes pulsate1 {
63+
0% {
64+
-webkit-transform: scale(0.8);
65+
transform: scale(0.8);
66+
opacity: 1;
67+
}
68+
100% {
69+
-webkit-transform: scale(1, 1);
70+
transform: scale(1);
71+
opacity: 0;
72+
box-shadow: none;
73+
}
11574
}
11675

76+
11777
@import "./avatar";
11878
@import "./button";
11979
@import "./icon-shape";

‎src/assets/scss/_variables.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -100,7 +100,7 @@ $font-size-sm: $font-size-base * .85 !default;
100100
$font-size-lg: $font-size-base * 1.25 !default;
101101

102102
$font-xs: 13px !default;
103-
103+
$navbar-nav-link-padding-x: 1rem !default;
104104
$h1-font-size: $font-size-base * 2.5 !default;
105105
$h2-font-size: $font-size-base * 2 !default;
106106
$h3-font-size: $font-size-base * 1.75 !default;

0 commit comments

Comments
 (0)