source: imaps-frontend/node_modules/bootstrap/scss/_nav.scss

main
Last change on this file was d565449, checked in by stefan toskovski <stefantoska84@…>, 4 weeks ago

Update repo after prototype presentation

  • Property mode set to 100644
File size: 5.1 KB
Line 
1// Base class
2//
3// Kickstart any navigation component with a set of style resets. Works with
4// `<nav>`s, `<ul>`s or `<ol>`s.
5
6.nav {
7 // scss-docs-start nav-css-vars
8 --#{$prefix}nav-link-padding-x: #{$nav-link-padding-x};
9 --#{$prefix}nav-link-padding-y: #{$nav-link-padding-y};
10 @include rfs($nav-link-font-size, --#{$prefix}nav-link-font-size);
11 --#{$prefix}nav-link-font-weight: #{$nav-link-font-weight};
12 --#{$prefix}nav-link-color: #{$nav-link-color};
13 --#{$prefix}nav-link-hover-color: #{$nav-link-hover-color};
14 --#{$prefix}nav-link-disabled-color: #{$nav-link-disabled-color};
15 // scss-docs-end nav-css-vars
16
17 display: flex;
18 flex-wrap: wrap;
19 padding-left: 0;
20 margin-bottom: 0;
21 list-style: none;
22}
23
24.nav-link {
25 display: block;
26 padding: var(--#{$prefix}nav-link-padding-y) var(--#{$prefix}nav-link-padding-x);
27 @include font-size(var(--#{$prefix}nav-link-font-size));
28 font-weight: var(--#{$prefix}nav-link-font-weight);
29 color: var(--#{$prefix}nav-link-color);
30 text-decoration: if($link-decoration == none, null, none);
31 background: none;
32 border: 0;
33 @include transition($nav-link-transition);
34
35 &:hover,
36 &:focus {
37 color: var(--#{$prefix}nav-link-hover-color);
38 text-decoration: if($link-hover-decoration == underline, none, null);
39 }
40
41 &:focus-visible {
42 outline: 0;
43 box-shadow: $nav-link-focus-box-shadow;
44 }
45
46 // Disabled state lightens text
47 &.disabled,
48 &:disabled {
49 color: var(--#{$prefix}nav-link-disabled-color);
50 pointer-events: none;
51 cursor: default;
52 }
53}
54
55//
56// Tabs
57//
58
59.nav-tabs {
60 // scss-docs-start nav-tabs-css-vars
61 --#{$prefix}nav-tabs-border-width: #{$nav-tabs-border-width};
62 --#{$prefix}nav-tabs-border-color: #{$nav-tabs-border-color};
63 --#{$prefix}nav-tabs-border-radius: #{$nav-tabs-border-radius};
64 --#{$prefix}nav-tabs-link-hover-border-color: #{$nav-tabs-link-hover-border-color};
65 --#{$prefix}nav-tabs-link-active-color: #{$nav-tabs-link-active-color};
66 --#{$prefix}nav-tabs-link-active-bg: #{$nav-tabs-link-active-bg};
67 --#{$prefix}nav-tabs-link-active-border-color: #{$nav-tabs-link-active-border-color};
68 // scss-docs-end nav-tabs-css-vars
69
70 border-bottom: var(--#{$prefix}nav-tabs-border-width) solid var(--#{$prefix}nav-tabs-border-color);
71
72 .nav-link {
73 margin-bottom: calc(-1 * var(--#{$prefix}nav-tabs-border-width)); // stylelint-disable-line function-disallowed-list
74 border: var(--#{$prefix}nav-tabs-border-width) solid transparent;
75 @include border-top-radius(var(--#{$prefix}nav-tabs-border-radius));
76
77 &:hover,
78 &:focus {
79 // Prevents active .nav-link tab overlapping focus outline of previous/next .nav-link
80 isolation: isolate;
81 border-color: var(--#{$prefix}nav-tabs-link-hover-border-color);
82 }
83 }
84
85 .nav-link.active,
86 .nav-item.show .nav-link {
87 color: var(--#{$prefix}nav-tabs-link-active-color);
88 background-color: var(--#{$prefix}nav-tabs-link-active-bg);
89 border-color: var(--#{$prefix}nav-tabs-link-active-border-color);
90 }
91
92 .dropdown-menu {
93 // Make dropdown border overlap tab border
94 margin-top: calc(-1 * var(--#{$prefix}nav-tabs-border-width)); // stylelint-disable-line function-disallowed-list
95 // Remove the top rounded corners here since there is a hard edge above the menu
96 @include border-top-radius(0);
97 }
98}
99
100
101//
102// Pills
103//
104
105.nav-pills {
106 // scss-docs-start nav-pills-css-vars
107 --#{$prefix}nav-pills-border-radius: #{$nav-pills-border-radius};
108 --#{$prefix}nav-pills-link-active-color: #{$nav-pills-link-active-color};
109 --#{$prefix}nav-pills-link-active-bg: #{$nav-pills-link-active-bg};
110 // scss-docs-end nav-pills-css-vars
111
112 .nav-link {
113 @include border-radius(var(--#{$prefix}nav-pills-border-radius));
114 }
115
116 .nav-link.active,
117 .show > .nav-link {
118 color: var(--#{$prefix}nav-pills-link-active-color);
119 @include gradient-bg(var(--#{$prefix}nav-pills-link-active-bg));
120 }
121}
122
123
124//
125// Underline
126//
127
128.nav-underline {
129 // scss-docs-start nav-underline-css-vars
130 --#{$prefix}nav-underline-gap: #{$nav-underline-gap};
131 --#{$prefix}nav-underline-border-width: #{$nav-underline-border-width};
132 --#{$prefix}nav-underline-link-active-color: #{$nav-underline-link-active-color};
133 // scss-docs-end nav-underline-css-vars
134
135 gap: var(--#{$prefix}nav-underline-gap);
136
137 .nav-link {
138 padding-right: 0;
139 padding-left: 0;
140 border-bottom: var(--#{$prefix}nav-underline-border-width) solid transparent;
141
142 &:hover,
143 &:focus {
144 border-bottom-color: currentcolor;
145 }
146 }
147
148 .nav-link.active,
149 .show > .nav-link {
150 font-weight: $font-weight-bold;
151 color: var(--#{$prefix}nav-underline-link-active-color);
152 border-bottom-color: currentcolor;
153 }
154}
155
156
157//
158// Justified variants
159//
160
161.nav-fill {
162 > .nav-link,
163 .nav-item {
164 flex: 1 1 auto;
165 text-align: center;
166 }
167}
168
169.nav-justified {
170 > .nav-link,
171 .nav-item {
172 flex-basis: 0;
173 flex-grow: 1;
174 text-align: center;
175 }
176}
177
178.nav-fill,
179.nav-justified {
180 .nav-item .nav-link {
181 width: 100%; // Make sure button will grow
182 }
183}
184
185
186// Tabbable tabs
187//
188// Hide tabbable panes to start, show them when `.active`
189
190.tab-content {
191 > .tab-pane {
192 display: none;
193 }
194 > .active {
195 display: block;
196 }
197}
Note: See TracBrowser for help on using the repository browser.