Skip to content

Commit e9ad89a

Browse files
StigmatozStigmatoz
committed
Tabs on popup
1 parent 4b607e6 commit e9ad89a

File tree

5 files changed

+311
-24
lines changed

5 files changed

+311
-24
lines changed

‎src/assets/css/main.css‎

Lines changed: 197 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,217 @@
11
:root {
2-
--main-color: #6ebf5d;
3-
--popup-header: #d7d7d7;
2+
--main-color: #6ebf5d;
3+
--popup-header: #f3f3f3;
4+
--progress-bar: #a6afa3;
45
}
56
::-webkit-scrollbar-track {
6-
border-radius: 10px;
7-
background-color: #F5F5F5;
7+
border-radius: 10px;
8+
background-color: #f5f5f5;
89
}
910

1011
::-webkit-scrollbar {
11-
width: 7px;
12-
background-color: #F5F5F5;
12+
width: 7px;
13+
background-color: #f5f5f5;
1314
}
1415

1516
::-webkit-scrollbar-thumb {
16-
border-radius: 10px;
17-
background-color: #7c7c7c;
17+
border-radius: 10px;
18+
background-color: #7c7c7c;
1819
}
1920
html,
2021
body {
21-
width: 500px;
22+
width: 600px;
2223
height: 590px;
2324
padding: 0;
2425
margin: 0;
2526
}
26-
.float-right{
27-
float: right;
27+
.float-right {
28+
float: right;
2829
}
29-
.display-inline-block{
30-
display: inline-block;
30+
.display-inline-block {
31+
display: inline-block;
3132
}
32-
.ml-10{
33-
margin-left: 10px;
33+
.ml-10 {
34+
margin-left: 10px;
3435
}
35-
.mr-10{
36-
margin-right: 10px;
36+
.mr-10 {
37+
margin-right: 10px;
38+
}
39+
.text-right {
40+
text-align: right;
41+
}
42+
.text-center {
43+
text-align: center;
44+
}
45+
.tabs {
46+
}
47+
.tabs input[name='tab-control'] {
48+
display: none;
49+
}
50+
.tabs .content section h2,
51+
.tabs ul li label {
52+
font-size: 15px;
53+
color: #428bff;
54+
}
55+
.tabs ul {
56+
list-style-type: none;
57+
padding-left: 0;
58+
display: flex;
59+
flex-direction: row;
60+
margin-bottom: 10px;
61+
justify-content: space-between;
62+
align-items: flex-end;
63+
flex-wrap: wrap;
64+
}
65+
.tabs ul li {
66+
box-sizing: border-box;
67+
flex: 1;
68+
width: 25%;
69+
padding: 0 10px;
70+
text-align: center;
71+
}
72+
.tabs ul li label {
73+
transition: all 0.3s ease-in-out;
74+
color: #929daf;
75+
padding: 5px auto;
76+
overflow: hidden;
77+
display: block;
78+
cursor: pointer;
79+
transition: all 0.2s ease-in-out;
80+
white-space: nowrap;
81+
-webkit-touch-callout: none;
82+
-webkit-user-select: none;
83+
-moz-user-select: none;
84+
-ms-user-select: none;
85+
user-select: none;
86+
}
87+
.tabs ul li label br {
88+
display: none;
89+
}
90+
.tabs ul li label img {
91+
filter: brightness(0) saturate(100%) invert(67%) sepia(15%) saturate(342%) hue-rotate(178deg)
92+
brightness(91%) contrast(89%);
93+
vertical-align: bottom;
94+
margin-right: 0.2em;
95+
transition: all 0.2s ease-in-out;
96+
}
97+
.tabs ul li label:hover,
98+
.tabs ul li label:focus,
99+
.tabs ul li label:active {
100+
outline: 0;
101+
color: #bec5cf;
102+
}
103+
.tabs ul li label:hover img,
104+
.tabs ul li label:focus img,
105+
.tabs ul li label:active img {
106+
filter: #bec5cf;
107+
}
108+
.tabs .slider {
109+
position: relative;
110+
width: 25%;
111+
transition: all 0.33s cubic-bezier(0.38, 0.8, 0.32, 1.07);
112+
}
113+
.tabs .slider .indicator {
114+
position: relative;
115+
width: 50px;
116+
max-width: 100%;
117+
margin: 0 auto;
118+
height: 4px;
119+
background: #428bff;
120+
border-radius: 1px;
121+
}
122+
.tabs .content {
123+
margin-top: 30px;
124+
}
125+
.tabs .content section {
126+
display: none;
127+
-webkit-animation-name: content;
128+
animation-name: content;
129+
-webkit-animation-direction: normal;
130+
animation-direction: normal;
131+
-webkit-animation-duration: 0.3s;
132+
animation-duration: 0.3s;
133+
-webkit-animation-timing-function: ease-in-out;
134+
animation-timing-function: ease-in-out;
135+
-webkit-animation-iteration-count: 1;
136+
animation-iteration-count: 1;
137+
line-height: 1.4;
138+
}
139+
.tabs .content section h2 {
140+
color: #428bff;
141+
display: none;
142+
}
143+
.tabs .content section h2::after {
144+
content: '';
145+
position: relative;
146+
display: block;
147+
width: 30px;
148+
height: 3px;
149+
background: #428bff;
150+
margin-top: 5px;
151+
left: 1px;
152+
}
153+
.tabs input[name='tab-control']:nth-of-type(1):checked ~ ul > li:nth-child(1) > label {
154+
cursor: default;
155+
color: #428bff;
156+
}
157+
.tabs input[name='tab-control']:nth-of-type(1):checked ~ ul > li:nth-child(1) > label img {
158+
filter: brightness(0) saturate(100%) invert(59%) sepia(82%) saturate(4677%) hue-rotate(202deg) brightness(103%) contrast(101%);
159+
}
160+
.tabs input[name='tab-control']:nth-of-type(1):checked ~ .slider {
161+
transform: translateX(17%);
162+
}
163+
.tabs input[name='tab-control']:nth-of-type(1):checked ~ .content > section:nth-child(1) {
164+
display: block;
165+
}
166+
.tabs input[name='tab-control']:nth-of-type(2):checked ~ ul > li:nth-child(2) > label {
167+
cursor: default;
168+
color: #428bff;
169+
}
170+
.tabs input[name='tab-control']:nth-of-type(2):checked ~ ul > li:nth-child(2) > label img {
171+
filter: brightness(0) saturate(100%) invert(59%) sepia(82%) saturate(4677%) hue-rotate(202deg) brightness(103%) contrast(101%);
172+
}
173+
.tabs input[name='tab-control']:nth-of-type(2):checked ~ .slider {
174+
transform: translateX(150%);
175+
}
176+
.tabs input[name='tab-control']:nth-of-type(2):checked ~ .content > section:nth-child(2) {
177+
display: block;
178+
}
179+
.tabs input[name='tab-control']:nth-of-type(3):checked ~ ul > li:nth-child(3) > label {
180+
cursor: default;
181+
color: #428bff;
182+
}
183+
.tabs input[name='tab-control']:nth-of-type(3):checked ~ ul > li:nth-child(3) > label img {
184+
filter: brightness(0) saturate(100%) invert(59%) sepia(82%) saturate(4677%) hue-rotate(202deg) brightness(103%) contrast(101%);
185+
}
186+
.tabs input[name='tab-control']:nth-of-type(3):checked ~ .slider {
187+
transform: translateX(290%);
188+
}
189+
.tabs input[name='tab-control']:nth-of-type(3):checked ~ .content > section:nth-child(3) {
190+
display: block;
191+
}
192+
@-webkit-keyframes content {
193+
from {
194+
opacity: 0;
195+
transform: translateY(5%);
196+
}
197+
to {
198+
opacity: 1;
199+
transform: translateY(0%);
200+
}
201+
}
202+
@keyframes content {
203+
from {
204+
opacity: 0;
205+
transform: translateY(5%);
206+
}
207+
to {
208+
opacity: 1;
209+
transform: translateY(0%);
210+
}
211+
}
212+
.tabs ul li label {
213+
white-space: initial;
214+
}
215+
.tabs ul li label img {
216+
height: 1.2em;
37217
}
38-
.text-right{
39-
text-align: right;
40-
}

‎src/assets/icons/24-hours.svg‎

Lines changed: 34 additions & 0 deletions
Loading

‎src/assets/icons/pie-chart.svg‎

Lines changed: 16 additions & 0 deletions
Loading

‎src/assets/icons/stats.svg‎

Lines changed: 21 additions & 0 deletions
Loading

‎src/pages/Popup.vue‎

Lines changed: 43 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,12 +6,50 @@
66
<img height="17" src="../assets/icons/settings.svg" @click="openSettings()" />
77
</div>
88
</div>
9-
<TabList />
9+
<div class="tabs">
10+
<input type="radio" id="todayTab" name="tab-control" checked />
11+
<input type="radio" id="allTimeTab" name="tab-control" />
12+
<input type="radio" id="byDaysTab" name="tab-control" />
13+
<ul>
14+
<li title="Today">
15+
<label for="todayTab" role="button"
16+
><img height="15" src="../assets/icons/24-hours.svg" /><span>Today</span></label
17+
>
18+
</li>
19+
<li title="All The Time">
20+
<label for="allTimeTab" role="button"
21+
><img height="15" src="../assets/icons/pie-chart.svg" /><span>All The Time</span></label
22+
>
23+
</li>
24+
<li title="By Days">
25+
<label for="byDaysTab" role="button"
26+
><img height="15" src="../assets/icons/stats.svg" /><span>By Days</span></label
27+
>
28+
</li>
29+
</ul>
30+
31+
<div class="slider"><div class="indicator"></div></div>
32+
<div class="content">
33+
<section>
34+
<TabList :type="TypeOfList.Today" />
35+
</section>
36+
<section>
37+
<h2>Delivery Contents</h2>
38+
</section>
39+
<section>
40+
<h2>Shipping</h2>
41+
</section>
42+
<section>
43+
<h2>Returns</h2>
44+
</section>
45+
</div>
46+
</div>
1047
</template>
1148

1249
<script lang="ts" setup>
1350
import Browser from 'webextension-polyfill';
1451
import TabList from '../components/TabList.vue';
52+
import { TypeOfList } from '../utils/enums';
1553
1654
async function openSettings() {
1755
await Browser.tabs.create({
@@ -23,20 +61,21 @@ async function openSettings() {
2361

2462
<style scoped>
2563
.headerBlock {
26-
height: 50px;
27-
background-color: var(--main-color);
64+
height: 40px;
65+
background-color: var(--popup-header);
2866
}
2967
3068
.headerBlock .header {
3169
font-size: 16px;
3270
padding: 0 20px;
71+
margin-top: 10px;
3372
display: inline-block;
3473
font-weight: 600;
3574
color: rgb(0, 0, 0);
3675
}
3776
3877
.headerBlock img {
3978
cursor: pointer;
40-
padding: 15px 10px;
79+
padding: 10px;
4180
}
4281
</style>

0 commit comments

Comments
 (0)