source: trip-planner-front/node_modules/bootstrap/scss/_nav.scss@ 6a3a178

Last change on this file since 6a3a178 was 6a3a178, checked in by Ema <ema_spirova@…>, 3 years ago

initial commit

  • Property mode set to 100644
File size: 2.6 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 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 @include font-size($nav-link-font-size);
18 font-weight: $nav-link-font-weight;
19 color: $nav-link-color;
20 text-decoration: if($link-decoration == none, null, none);
21 @include transition($nav-link-transition);
22
23 &:hover,
24 &:focus {
25 color: $nav-link-hover-color;
26 text-decoration: if($link-hover-decoration == underline, none, null);
27 }
28
29 // Disabled state lightens text
30 &.disabled {
31 color: $nav-link-disabled-color;
32 pointer-events: none;
33 cursor: default;
34 }
35}
36
37//
38// Tabs
39//
40
41.nav-tabs {
42 border-bottom: $nav-tabs-border-width solid $nav-tabs-border-color;
43
44 .nav-link {
45 margin-bottom: -$nav-tabs-border-width;
46 background: none;
47 border: $nav-tabs-border-width solid transparent;
48 @include border-top-radius($nav-tabs-border-radius);
49
50 &:hover,
51 &:focus {
52 border-color: $nav-tabs-link-hover-border-color;
53 // Prevents active .nav-link tab overlapping focus outline of previous/next .nav-link
54 isolation: isolate;
55 }
56
57 &.disabled {
58 color: $nav-link-disabled-color;
59 background-color: transparent;
60 border-color: transparent;
61 }
62 }
63
64 .nav-link.active,
65 .nav-item.show .nav-link {
66 color: $nav-tabs-link-active-color;
67 background-color: $nav-tabs-link-active-bg;
68 border-color: $nav-tabs-link-active-border-color;
69 }
70
71 .dropdown-menu {
72 // Make dropdown border overlap tab border
73 margin-top: -$nav-tabs-border-width;
74 // Remove the top rounded corners here since there is a hard edge above the menu
75 @include border-top-radius(0);
76 }
77}
78
79
80//
81// Pills
82//
83
84.nav-pills {
85 .nav-link {
86 background: none;
87 border: 0;
88 @include border-radius($nav-pills-border-radius);
89 }
90
91 .nav-link.active,
92 .show > .nav-link {
93 color: $nav-pills-link-active-color;
94 @include gradient-bg($nav-pills-link-active-bg);
95 }
96}
97
98
99//
100// Justified variants
101//
102
103.nav-fill {
104 > .nav-link,
105 .nav-item {
106 flex: 1 1 auto;
107 text-align: center;
108 }
109}
110
111.nav-justified {
112 > .nav-link,
113 .nav-item {
114 flex-basis: 0;
115 flex-grow: 1;
116 text-align: center;
117 }
118}
119
120.nav-fill,
121.nav-justified {
122 .nav-item .nav-link {
123 width: 100%; // Make sure button will grow
124 }
125}
126
127
128// Tabbable tabs
129//
130// Hide tabbable panes to start, show them when `.active`
131
132.tab-content {
133 > .tab-pane {
134 display: none;
135 }
136 > .active {
137 display: block;
138 }
139}
Note: See TracBrowser for help on using the repository browser.