Mercurial > nebulaweb3

comparison default/assets/scss/components/_tabs.scss @ 0:1d038bc9b3d2 default tip

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Up:default
author Liny <dev@neowd.com>
date Sat, 31 May 2025 09:21:51 +0800
parents
children
comparison
equal deleted inserted replaced
-1:000000000000 0:1d038bc9b3d2
1 // main: ../style.scss
2 /********************************
3 *********************************
4 Tabs
5 *********************************
6 *********************************/
7 .nav-tabs,
8 .nav-pills {
9 a {
10 color: $headings-color;
11 }
12 }
13
14 .nav-tabs {
15 position: relative;
16
17
18 li a {
19 font-weight: 600;
20 color: #313a46;
21 &:hover {
22 background: rgba(0,0,0,0.03);
23 }
24 }
25
26 li.active a,
27 li.active a:focus,
28 li.active a:hover {
29 color: $color-scheme;
30 border-color: #ddd #ddd #fff;
31 }
32
33 .nav-link.active,
34 .nav-item.show .nav-link {
35 border-color: #ddd #ddd #fff;
36 background: none;
37 }
38
39 .list-icon {
40 font-size: rem(18);
41 vertical-align: middle;
42 position: relative;
43 top: rem(-1);
44 }
45 }
46
47 .tab-content {
48 padding-top: em(20);
49 padding: 20px;
50 background: #fff;
51 }
52
53
54 /* Vertical Tabs
55 ========================*/
56 .tabs-vertical {
57 display: flex;
58 .nav-tabs {
59 flex-basis: em(150);
60 border: 0;
61
62 li a {
63 border: 0;
64 border-radius: 2px;
65 }
66
67 li.active a,
68 li.active a:focus,
69 li.active a:hover,
70 .nav-link.active,
71 .nav-item.show .nav-link {
72 color: #fff !important;
73 background: $color-scheme;
74 border: 0;
75 }
76 }
77
78 .tab-content {
79 flex: 1;
80 padding: 0 0 0 em(20);
81 }
82
83 body.rtl & {
84 .tab-content {
85 padding: 0 em(20) 0 0;
86 }
87 }
88 }
89
90 .tabs-vertical-right {
91 .nav-tabs { order: 2 }
92 .tab-content { order: 1; padding: 0 0 em(20) 0 }
93 }
94
95 .tabs-vertical-icons {
96 .nav-tabs {
97 flex-basis: auto;
98 text-align: center;
99 }
100 }
101
102
103 /* Tabs Bordered
104 ========================*/
105 .tabs-bordered {
106 .nav-tabs {
107 border: 0;
108
109 li {
110 z-index: 1;
111
112 + li { margin-left: em(10) }
113 }
114
115 a {
116 font-weight: 500;
117 transition: all 0.3s ease;
118 border-radius: 0;
119 border: 0;
120 transition: all 0.3s;
121 position: relative;
122 display: block;
123 overflow: hidden;
124 text-overflow: ellipsis;
125 white-space: nowrap;
126 }
127
128 a:hover,
129 a:focus {
130 color: $color-scheme;
131 background: transparent;
132 }
133
134 li.active a,
135 li.active a:focus,
136 li.active a:hover,
137 .nav-link.active,
138 .nav-item.show .nav-link {
139 color: #fff !important;
140 border: 0;
141 background: $color-scheme;
142 }
143
144 a::before {
145 @include position(absolute, 0 null null 0);
146 width: 100%;
147 height: 100%;
148 z-index: -1;
149 background: #d2d8d6;
150 content: '';
151 transition: all 0.3s, transform 0.3s;
152 transition-timing-function: ease, cubic-bezier(0.7, 0, 0.3, 1);
153 transform: translate3d(0, 100%, 0) translate3d(0, -3px, 0);
154 }
155
156 .nav-link.active::before {
157 transform: translate3d(0, 0, 0);
158 }
159
160 .nav-link.active::before,
161 li a:hover::before,
162 li a:focus::before {
163 background: $color-scheme;
164 }
165 }
166
167 body.rtl & {
168 li:first-child {
169 margin-left: em(10);
170 }
171 }
172 }
173
174 /* Page Tabs
175 ========================*/
176 .tabs-page {
177 .nav-tabs {
178 border-bottom: 0;
179 .nav-link {
180 border: 1px solid rgba(#fff, .2);
181 background: rgba(#fff, .1);
182 border-radius: 0;
183 font-family: $headings-font-family;
184 color: rgba(#fff,.5);
185 font-weight: $font-weight-semibold;
186 padding: 1rem 3rem;
187 &.active {
188 background: $body-bg;
189 color: $color-scheme;
190 box-shadow: 0px -4px 0 0 $primary;
191 }
192 }
193 li {
194 margin-left: em(5);
195 margin-right: em(5);
196 }
197 }
198
199 body.rtl & {
200 }
201 }