0
|
1 // main: ../style.scss
|
|
2 /********************************
|
|
3 *********************************
|
|
4 BASE
|
|
5 *********************************
|
|
6 *********************************/
|
|
7 html {
|
|
8 height: 100%;
|
|
9 }
|
|
10
|
|
11 .label {
|
|
12 @extend .badge;
|
|
13 }
|
|
14
|
|
15 body.rtl {
|
|
16 direction: rtl;
|
|
17 ol, ul { padding-right: rem(35) }
|
|
18 .text-right-rtl { text-align: left !important }
|
|
19 .text-left-rtl { text-align: left !important }
|
|
20 .btn-group { direction: ltr }
|
|
21 .pagination,
|
|
22 .pager { padding-right: 0 }
|
|
23 }
|
|
24
|
|
25 .ltr {
|
|
26 direction: ltr !important;
|
|
27 body.rtl & {
|
|
28 text-align: right;
|
|
29 }
|
|
30 }
|
|
31
|
|
32 .badge {
|
|
33 letter-spacing: $headings-letter-spacing;
|
|
34 font-family: $headings-font-family;
|
|
35 }
|
|
36
|
|
37 a.badge:hover {
|
|
38 color: #fff;
|
|
39 }
|
|
40
|
|
41 hr {
|
|
42 &.border-0 {
|
|
43 border: 0;
|
|
44 }
|
|
45 &.tiny-hr {
|
|
46 border: 0;
|
|
47 position: relative;
|
|
48 &:after {
|
|
49 content: "";
|
|
50 position: absolute;
|
|
51 top: 50%;
|
|
52 left: 50%;
|
|
53 transform: translateX(-50%);
|
|
54 width: 40px;
|
|
55 height: 1px;
|
|
56 background: $theme-border-color;
|
|
57 }
|
|
58 }
|
|
59 }
|
|
60
|
|
61 canvas {
|
|
62 max-width: 100%;
|
|
63 }
|
|
64
|
|
65 .material-icons {
|
|
66 font-size: rem(24);
|
|
67 }
|
|
68
|
|
69 .small, small { color: $text-muted; font-size: 85%; }
|
|
70
|
|
71 .small.list-icon {
|
|
72 font-size: 18px;
|
|
73 }
|
|
74
|
|
75 .icon-muted {
|
|
76 color: $nav-icon-color;
|
|
77 }
|
|
78
|
|
79 a {
|
|
80 &:focus,
|
|
81 &:hover {
|
|
82 outline: none;
|
|
83 }
|
|
84 }
|
|
85
|
|
86 iframe { border: 0 }
|
|
87
|
|
88 input:focus,
|
|
89 select:focus,
|
|
90 textarea:focus,
|
|
91 button:focus,
|
|
92 .btn.active.focus,
|
|
93 .btn.active:focus,
|
|
94 .btn.focus,
|
|
95 .btn:active.focus,
|
|
96 .btn:active:focus,
|
|
97 .btn:focus {
|
|
98 outline: none;
|
|
99 }
|
|
100
|
|
101 input, textarea {
|
|
102 letter-spacing: 0;
|
|
103 }
|
|
104
|
|
105 img {
|
|
106 max-width: 100%;
|
|
107 }
|
|
108
|
|
109 h1, h2, h3, h4, h5, h6,
|
|
110 .h1, .h2, .h3, .h4, .h5, .h6 {
|
|
111 margin: rem(20) 0 rem(10);
|
|
112 font-weight: 400;
|
|
113 letter-spacing: $headings-letter-spacing;
|
|
114
|
|
115 .material-icons {
|
|
116 position: relative;
|
|
117 top: -2px;
|
|
118 }
|
|
119
|
|
120 small {
|
|
121 font-size: 0.75em;
|
|
122 }
|
|
123 }
|
|
124
|
|
125 h6 { font-weight: 500 }
|
|
126 p { margin-bottom: em(20, $font-size-base-px) }
|
|
127 a { transition: $transition-base }
|
|
128
|
|
129 .blockquote,
|
|
130 blockquote {
|
|
131 padding: 10px 20px;
|
|
132 border: 1px solid #eee;
|
|
133 border-left: 5px solid $primary;
|
|
134 color: $headings-color;
|
|
135 letter-spacing: $headings-letter-spacing;
|
|
136 font-family: $headings-font-family;
|
|
137 font-size: $blockquote-font-size;
|
|
138 small {
|
|
139 font-size: 75%;
|
|
140 font-weight: 500;
|
|
141 }
|
|
142 small:before, footer:before, small:before {
|
|
143 content: '\2014 \00A0';
|
|
144 }
|
|
145
|
|
146 &.blockquote-reverse {
|
|
147 border: 1px solid #eee;
|
|
148 border-right: 5px solid $primary;
|
|
149 }
|
|
150
|
|
151 body.rtl & {
|
|
152 border-right: 5px solid $primary;
|
|
153 border-left: 0;
|
|
154
|
|
155 &.blockquote-reverse {
|
|
156 text-align: left;
|
|
157 border-left: 5px solid $primary;
|
|
158 border-right: 0;
|
|
159 }
|
|
160 }
|
|
161 }
|
|
162
|
|
163 dd {
|
|
164 margin-bottom: 5px;
|
|
165 }
|
|
166
|
|
167 .show-grid {
|
|
168 margin: 15px 0;
|
|
169
|
|
170 [class^="col-"] {
|
|
171 padding-top: 10px;
|
|
172 padding-bottom: 10px;
|
|
173 border: 1px solid rgba(120, 130, 140, 0.13);
|
|
174 background-color: #f7fafc;
|
|
175 }
|
|
176 }
|
|
177
|
|
178 .fancy-list {
|
|
179 li {
|
|
180 @include padding( 0 null 1em );
|
|
181 }
|
|
182
|
|
183 .list-icon {
|
|
184 font-size: em(18);
|
|
185 vertical-align: middle;
|
|
186 }
|
|
187 }
|
|
188
|
|
189 .list-icon {
|
|
190 font-size: rem(18);
|
|
191 }
|
|
192
|
|
193 .row {
|
|
194 &.columns-border-bw {
|
|
195 [class*="col-"] {
|
|
196 border-right: 1px solid $theme-border-color;
|
|
197 }
|
|
198 }
|
|
199 }
|
|
200
|
|
201 .headings-font-family,
|
|
202 .heading-font-family { font-family: $headings-font-family }
|
|
203 .content-font-family { font-family: $font-family-base }
|
|
204 .sub-heading-font-family { font-family: $tertiary-font-family }
|
|
205 .content-font-size { font-size: $font-size-base }
|
|
206 .headings-color { color: $headings-color !important }
|
|
207
|
|
208 .headings-letter-spacing { letter-spacing: $headings-letter-spacing !important }
|
|
209
|
|
210 .wrapper {
|
|
211 position: relative;
|
|
212 }
|
|
213
|
|
214 .content-wrapper {
|
|
215 position: relative;
|
|
216
|
|
217 @media (min-width: #{$theme-breakpoint + 1px}) {
|
|
218 .sidebar-expand &,
|
|
219 .sidebar-collapse & {
|
|
220 padding-top: $nav-height;
|
|
221 }
|
|
222 }
|
|
223 }
|
|
224
|
|
225 .text-inverse {
|
|
226 &,
|
|
227 h1,h2,h3,h4,h5,h6,,
|
|
228 .h1,.h2,.h3,.h4,.h5,.h6, .list-icon, small,
|
|
229 a:not(.btn), a:not(.btn):hover {
|
|
230 color: white !important;
|
|
231 }
|
|
232 .text-muted {
|
|
233 color: rgba(255, 255, 255, .5) !important;
|
|
234 }
|
|
235 }
|
|
236
|
|
237
|
|
238 /* Material Icons
|
|
239 ========================*/
|
|
240 .material-icons { position: relative; }
|
|
241 .material-icons.md-18 { font-size: rem(18); }
|
|
242 .material-icons.md-24 { font-size: rem(24); }
|
|
243 .material-icons.md-36 { font-size: rem(36); }
|
|
244 .material-icons.md-48 { font-size: rem(48); }
|
|
245
|
|
246 .user-char-image {
|
|
247 border-radius: 100px;
|
|
248 display: inline-block;
|
|
249 text-align: center;
|
|
250 position: relative;
|
|
251 i {
|
|
252 @include position(absolute, 50% 50% null null);
|
|
253 transform: translateY(-50%) translateX(50%);
|
|
254 font-style: normal;
|
|
255 color: #fff;
|
|
256 }
|
|
257 }
|
|
258
|
|
259 /* Main Content Area
|
|
260 ========================*/
|
|
261 .main-wrapper {
|
|
262 overflow: hidden;
|
|
263 padding: 0 $wrapper-pd-x rem(120);
|
|
264 background: $body-bg;
|
|
265
|
|
266 .sidebar-expand & {
|
|
267 margin-left: $sidebar-width;
|
|
268 }
|
|
269
|
|
270 body.rtl.sidebar-expand & {
|
|
271 margin-left: auto;
|
|
272 margin-right: $sidebar-width;
|
|
273 }
|
|
274
|
|
275 .sidebar-collapse & {
|
|
276 margin-left: $collapse-sidebar-width;
|
|
277 }
|
|
278
|
|
279 body.rtl.sidebar-collapse & {
|
|
280 margin-left: auto;
|
|
281 margin-right: $collapse-sidebar-width;
|
|
282 }
|
|
283 }
|
|
284
|
|
285 .neg-wrapper-padding {
|
|
286 margin-left: #{ -$wrapper-pd-x };
|
|
287 margin-right: #{ -$wrapper-pd-x };
|
|
288 }
|
|
289
|
|
290
|
|
291 /* Site Footer
|
|
292 ========================*/
|
|
293 .footer {
|
|
294 bottom: 0;
|
|
295 left: 0;
|
|
296 color: $footer-color;
|
|
297 padding: $footer-padding-y $footer-padding-x;
|
|
298 position: absolute;
|
|
299 right: 0;
|
|
300 background: $footer-bg;
|
|
301 border-top: 1px solid $theme-border-color;
|
|
302
|
|
303 .sidebar-expand & {
|
|
304 margin-left: $sidebar-width;
|
|
305 }
|
|
306
|
|
307 .sidebar-collapse & {
|
|
308 margin-left: $collapse-sidebar-width;
|
|
309 }
|
|
310
|
|
311 body.rtl.sidebar-expand & {
|
|
312 margin-left: 0;
|
|
313 margin-right: $sidebar-width;
|
|
314 }
|
|
315
|
|
316 body.rtl.sidebar-collapse & {
|
|
317 margin-left: 0;
|
|
318 margin-right: $collapse-sidebar-width;
|
|
319 }
|
|
320 }
|
|
321
|
|
322 @media (max-width: $theme-breakpoint) {
|
|
323 .content-wrapper .main-wrapper,
|
|
324 body .wrapper .footer {
|
|
325 margin-left: 0;
|
|
326 margin-right: 0;
|
|
327 }
|
|
328 body.rtl.sidebar-expand .main-wrapper {
|
|
329 width: 100%;
|
|
330 margin-right: 0;
|
|
331 }
|
|
332 body.rtl.sidebar-collapse .main-wrapper {
|
|
333 width: 100%;
|
|
334 margin-right: 0;
|
|
335 }
|
|
336 body.rtl.sidebar-collapse .footer,
|
|
337 body.rtl.sidebar-expand .footer {
|
|
338 margin-right: 0;
|
|
339 }
|
|
340 }
|
|
341
|
|
342 @media (min-width: #{$theme-breakpoint + 1px}) {
|
|
343 .sidebar-horizontal .fix-top .main-wrapper {
|
|
344 padding-top: 70px;
|
|
345 }
|
|
346 }
|
|
347
|
|
348
|
|
349
|
|
350 /* Thumbnail Image Sizes
|
|
351 =======================*/
|
|
352 [class*="thumb"] {
|
|
353 display: inline-block;
|
|
354 }
|
|
355 img, .user-char-image {
|
|
356 .thumb-xxs & { @include size(35px) }
|
|
357 .thumb-xs & { @include size(40px) }
|
|
358 .thumb-xs2 & { @include size(50px) }
|
|
359 .thumb-sm & { @include size(60px) }
|
|
360 .thumb-sm2 & { @include size(70px) }
|
|
361 .thumb-md & { @include size(110px) }
|
|
362 .thumb-md2 & { @include size(120px) }
|
|
363 .thumb-lg & { @include size(180px) }
|
|
364 }
|
|
365
|
|
366 img {
|
|
367 .thumb-xs &,
|
|
368 .thumb-sm &,
|
|
369 .thumb-md &,
|
|
370 .thumb-lg & { height: auto; max-width: 999px }
|
|
371 }
|
|
372
|
|
373
|
|
374 /* User Status
|
|
375 ========================*/
|
|
376 [class*="user--"] {
|
|
377 position: relative;
|
|
378
|
|
379 &::after {
|
|
380 @include size(em(9));
|
|
381 display: block;
|
|
382 @include position(absolute, 0 10% null null);
|
|
383 border-radius: 100px;
|
|
384 content: "";
|
|
385 box-shadow: 0 0 0 2px $widget-bg;
|
|
386 }
|
|
387
|
|
388 &[class*="thumb-xs"]::after { right: rem(4); }
|
|
389 &[class*="thumb-xs2"]::after { right: rem(6); }
|
|
390 &[class*="thumb-sm"]::after { right: rem(8); }
|
|
391 &[class*="thumb-md"]::after { right: rem(12); top: rem(12) }
|
|
392 &[class*="thumb-lg"]::after { right: rem(20); }
|
|
393 }
|
|
394
|
|
395 .user--offline:after { background: $gray-300 }
|
|
396 .user--online:after { background: $success }
|
|
397 .user--away:after { background: $warning }
|
|
398 .user--busy:after { background: $danger }
|
|
399
|
|
400
|
|
401 /* Waves Effect on Click
|
|
402 ========================*/
|
|
403 .ripple {
|
|
404 position: relative;
|
|
405 overflow: hidden;
|
|
406 transform: translate3d(0,0,0);
|
|
407
|
|
408 &::after {
|
|
409 content: "";
|
|
410 display: block !important;
|
|
411 @include position(absolute, 0);
|
|
412 width: auto;
|
|
413 height: auto;
|
|
414 margin: 0;
|
|
415 padding: 0;
|
|
416 border: 0;
|
|
417 pointer-events: none;
|
|
418 background-image: radial-gradient(circle, #000 10%,transparent 10.01%);
|
|
419 background-repeat: no-repeat;
|
|
420 background-position: 50%;
|
|
421 transform: scale(10,10);
|
|
422 opacity: 0;
|
|
423 transition: transform .5s, opacity 1s;
|
|
424 }
|
|
425
|
|
426 &:active::after {
|
|
427 transform: scale(0,0);
|
|
428 opacity: .1;
|
|
429 transition: 0s;
|
|
430 }
|
|
431 }
|
|
432
|
|
433
|
|
434 /* Pulse Effect
|
|
435 ========================*/
|
|
436 .pulse-status {
|
|
437 display: block;
|
|
438 width: rem(8);
|
|
439 height: rem(8);
|
|
440 border-radius: 50%;
|
|
441 background: $primary;
|
|
442 cursor: pointer;
|
|
443 box-shadow: 0 0 0 rgba(204,169,44, 0.6);
|
|
444 animation: pulse-status 1s infinite;
|
|
445 position: absolute;
|
|
446 top: 50%;
|
|
447 right: 0;
|
|
448 margin-top: -rem(10);
|
|
449 margin-right: rem(10);
|
|
450 transform: translateY(-50%);
|
|
451
|
|
452 &:hover {
|
|
453 animation: none
|
|
454 }
|
|
455 }
|
|
456
|
|
457 @-webkit-keyframes pulse-status {
|
|
458 0% { box-shadow: 0 0 0 0 rgba(204,169,44, 0.6) }
|
|
459 70% { box-shadow: 0 0 0 10px rgba(204,169,44, 0) }
|
|
460 100% { box-shadow: 0 0 0 0 rgba(204,169,44, 0) }
|
|
461 }
|
|
462
|
|
463 @keyframes pulse-status {
|
|
464 0% { box-shadow: 0 0 0 0 rgba(204,169,44, 0.6) }
|
|
465 70% { box-shadow: 0 0 0 10px rgba(204,169,44, 0) }
|
|
466 100% { box-shadow: 0 0 0 0 rgba(204,169,44, 0) }
|
|
467 }
|
|
468
|
|
469 /* Dropdown
|
|
470 ========================*/
|
|
471 .dropdown-toggle {
|
|
472 li a {
|
|
473 line-height: $line-height-base;
|
|
474 }
|
|
475 .caret {
|
|
476 &:before {
|
|
477 content: '\e928';
|
|
478 font-family: 'feather';
|
|
479 font-feature-settings: 'liga';
|
|
480 vertical-align: middle;
|
|
481 font-size: 16px;
|
|
482 width: 1em;
|
|
483 }
|
|
484 }
|
|
485 }
|
|
486
|
|
487 .dropdown-menu {
|
|
488 .open > &,
|
|
489 .show > & {
|
|
490 display: block;
|
|
491 }
|
|
492 &.dropdown-left {
|
|
493 left: auto;
|
|
494 right: 0;
|
|
495 }
|
|
496
|
|
497 body.rtl & {
|
|
498 text-align: right;
|
|
499 }
|
|
500 }
|
|
501
|
|
502 .dropdown-menu > .selected > a,
|
|
503 .dropdown-menu > .active > a {
|
|
504 &, &:hover, &:focus {
|
|
505 background: $primary;
|
|
506 color: #fff;
|
|
507 outline: none;
|
|
508 }
|
|
509 }
|
|
510
|
|
511 .dropdown-item {
|
|
512 @include padding( em(5,$font-size-base-px) null );
|
|
513 }
|
|
514
|
|
515 body.rtl {
|
|
516 .dropdown-menu-left-rtl {
|
|
517 }
|
|
518 }
|
|
519
|
|
520 /* User Avatar List
|
|
521 ========================*/
|
|
522 .user-avatar-list {
|
|
523 flex-direction: row-reverse;
|
|
524 display: flex;
|
|
525 text-align: right;
|
|
526 a {
|
|
527 position: relative;
|
|
528 display: inline-block;
|
|
529 margin-left: -5%;
|
|
530 img {
|
|
531 border: 1px solid $widget-bg;
|
|
532 }
|
|
533 }
|
|
534
|
|
535 a.more-link {
|
|
536 order: 1;
|
|
537 margin-left: auto;
|
|
538 display: inline-flex;
|
|
539 justify-content: center;;
|
|
540 align-items: center;
|
|
541 background: #fff;
|
|
542 border-radius: 100px;
|
|
543 color: $headings-color;
|
|
544 font-family: $headings-font-family;
|
|
545 font-size: em(12);
|
|
546 }
|
|
547 }
|
|
548
|
|
549 /* Main Content Area
|
|
550 ========================*/
|
|
551 .img-thumbnail {
|
|
552 padding: .125em;
|
|
553 background: #fff;
|
|
554 box-shadow: 0 1px 2px rgba(0,0,0,0.075);
|
|
555 }
|
|
556
|
|
557 /* Hover Helper
|
|
558 ========================*/
|
|
559 .hover-item {
|
|
560 display: none;
|
|
561 @include mobile { display: block }
|
|
562 @include tablet { display: block }
|
|
563 }
|
|
564
|
|
565 .hover-parent:hover .hover-item {
|
|
566 display: block;
|
|
567 }
|
|
568
|
|
569 /* Title Seperator
|
|
570 ========================*/
|
|
571 .title-seperator {
|
|
572 display: flex;
|
|
573 align-items: center;
|
|
574 margin-top: em(30);
|
|
575 margin-bottom: em(30);
|
|
576 span {
|
|
577 margin-top: 0;
|
|
578 margin-bottom: 0;
|
|
579 }
|
|
580 &:before,
|
|
581 &:after {
|
|
582 content: '';
|
|
583 flex: 1;
|
|
584 height: 1px;
|
|
585 border-top: 1px solid $theme-border-color;
|
|
586 display: block;
|
|
587 }
|
|
588 }
|
|
589
|
|
590 /* Icons
|
|
591 ========================*/
|
|
592 [class*='size-icon'] {
|
|
593 display: flex;
|
|
594 align-items: center;
|
|
595 justify-content: center;
|
|
596 }
|
|
597 .size-icon-20 { @include size( rem(20) ); }
|
|
598 .size-icon-30 { @include size( rem(30) ); }
|
|
599 .size-icon-40 { @include size( rem(40) ); }
|
|
600 .size-icon-50 { @include size( rem(50) ); }
|
|
601 .size-icon-60 { @include size( rem(60) ); }
|
|
602 .size-icon-70 { @include size( rem(70) ); }
|
|
603 .size-icon-80 { @include size( rem(80) ); }
|
|
604 .size-icon-90 { @include size( rem(90) ); }
|
|
605
|
|
606 /* Star Ratings
|
|
607 ========================*/
|
|
608 .star-ratings {
|
|
609 position: relative;
|
|
610 height: 1em;
|
|
611 line-height: 1;
|
|
612 vertical-align: middle;
|
|
613 span::before,
|
|
614 &:before {
|
|
615 content: '\e9bf\e9bf\e9bf\e9bf\e9bf';
|
|
616 font-family: 'feather';
|
|
617 color: $color-scheme;
|
|
618 }
|
|
619 &:before {
|
|
620 opacity: 0.5;
|
|
621 }
|
|
622 span {
|
|
623 overflow: hidden;
|
|
624 height: 1em;
|
|
625 @include position(absolute, 0 null null 0);
|
|
626 }
|
|
627
|
|
628 &.style-2 {
|
|
629 letter-spacing: em(-2);
|
|
630 display: inline-block;
|
|
631 &:before,
|
|
632 span::before {
|
|
633 letter-spacing: inherit;
|
|
634 font-family: 'Material Icons';
|
|
635 font-weight: normal;
|
|
636 content: 'star star star star star';
|
|
637 vertical-align: baseline;
|
|
638 text-rendering: optimizeLegibility;
|
|
639 font-feature-settings: 'liga';
|
|
640 }
|
|
641 &:before { color: $text-muted }
|
|
642 span::before { color: $warning }
|
|
643 }
|
|
644 }
|
|
645
|
|
646 /* Featured Figure Tag
|
|
647 ========================*/
|
|
648 figure {
|
|
649 position: relative;
|
|
650 .featured {
|
|
651 @include position(absolute, 1em null null -.5em);
|
|
652 }
|
|
653 }
|
|
654
|
|
655 /* Scrollbar Styling for RTL
|
|
656 ========================*/
|
|
657 body.rtl .scrollbar-enabled {
|
|
658 direction: ltr;
|
|
659
|
|
660 > * {
|
|
661 direction: rtl;
|
|
662 }
|
|
663 }
|