Mercurial > nebulaweb3

comparison default/assets/scss/base/_base.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 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 }