|
0
|
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 }
|
