Mercurial > nebulaweb3

comparison default/assets/scss/vendors/bootstrap/_nav.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 // Base class
2 //
3 // Kickstart any navigation component with a set of style resets. Works with
4 // `<nav>`s or `<ul>`s.
5
6 .nav {
7 display: flex;
8 flex-wrap: wrap;
9 padding-left: 0;
10 margin-bottom: 0;
11 list-style: none;
12 }
13
14 .nav-link {
15 display: block;
16 padding: $nav-link-padding-y $nav-link-padding-x;
17
18 @include hover-focus {
19 text-decoration: none;
20 }
21
22 // Disabled state lightens text
23 &.disabled {
24 color: $nav-link-disabled-color;
25 }
26 }
27
28 //
29 // Tabs
30 //
31
32 .nav-tabs {
33 border-bottom: $nav-tabs-border-width solid $nav-tabs-border-color;
34
35 .nav-item {
36 margin-bottom: -$nav-tabs-border-width;
37 }
38
39 .nav-link {
40 border: $nav-tabs-border-width solid transparent;
41 @include border-top-radius($nav-tabs-border-radius);
42
43 @include hover-focus {
44 border-color: $nav-tabs-link-hover-border-color $nav-tabs-link-hover-border-color $nav-tabs-border-color;
45 }
46
47 &.disabled {
48 color: $nav-link-disabled-color;
49 background-color: transparent;
50 border-color: transparent;
51 }
52 }
53
54 .nav-link.active,
55 .nav-item.show .nav-link {
56 color: $nav-tabs-link-active-color;
57 background-color: $nav-tabs-link-active-bg;
58 border-color: $nav-tabs-link-active-border-color $nav-tabs-link-active-border-color $nav-tabs-link-active-bg;
59 }
60
61 .dropdown-menu {
62 // Make dropdown border overlap tab border
63 margin-top: -$nav-tabs-border-width;
64 // Remove the top rounded corners here since there is a hard edge above the menu
65 @include border-top-radius(0);
66 }
67 }
68
69
70 //
71 // Pills
72 //
73
74 .nav-pills {
75 .nav-link {
76 @include border-radius($nav-pills-border-radius);
77
78 &.active,
79 .show > & {
80 color: $nav-pills-link-active-color;
81 background-color: $nav-pills-link-active-bg;
82 }
83 }
84 }
85
86
87 //
88 // Justified variants
89 //
90
91 .nav-fill {
92 .nav-item {
93 flex: 1 1 auto;
94 text-align: center;
95 }
96 }
97
98 .nav-justified {
99 .nav-item {
100 flex-basis: 0;
101 flex-grow: 1;
102 text-align: center;
103 }
104 }
105
106
107 // Tabbable tabs
108 //
109 // Hide tabbable panes to start, show them when `.active`
110
111 .tab-content {
112 > .tab-pane {
113 display: none;
114 }
115 > .active {
116 display: block;
117 }
118 }