File tree Expand file tree Collapse file tree
Expand file tree Collapse file tree Original file line number Diff line number Diff line change @@ -48,42 +48,6 @@ Generic content navigation.
4848
4949## Variants
5050
51- ### Rails
52-
53- By adding ` .nav--rails ` modifier class on ` .nav ` element to create rails styled nav
54-
55- <ul class =" nav nav--rails mb-6 " >
56- <li class =" nav__item is-active " >
57- <a href="#" class="nav__link">Home</a>
58- </li >
59- <li class =" nav__item " >
60- <a href="#" class="nav__link">Link</a>
61- </li >
62- <li class =" nav__item " >
63- <a href="#" class="nav__link">Another Link</a>
64- </li >
65- <li class =" nav__item " >
66- <a href="#" class="nav__link is-disabled">Disabled</a>
67- </li >
68- </ul >
69-
70- ``` html
71- <ul class =" nav nav--rails" >
72- <li class =" nav__item is-active" >
73- <a href =" #" class =" nav__link" >Home</a >
74- </li >
75- <li class =" nav__item" >
76- <a href =" #" class =" nav__link" >Link</a >
77- </li >
78- <li class =" nav__item" >
79- <a href =" #" class =" nav__link" >Another Link</a >
80- </li >
81- <li class =" nav__item" >
82- <a href =" #" class =" nav__link is-disabled" >Disabled</a >
83- </li >
84- </ul >
85- ```
86-
8751### Pills
8852
8953By adding ` .nav--pills ` modifier class on ` .nav ` element to create pills styled nav
Original file line number Diff line number Diff line change @@ -115,7 +115,7 @@ $nav-tabs-active-bg: $component-bg !default;
115115 }
116116}
117117
118- .nav.nav--rails {
118+ .nav.nav--tabs {
119119 border-bottom : $nav-border-width solid $nav-border-color ;
120120
121121 > .nav__item {
@@ -136,30 +136,3 @@ $nav-tabs-active-bg: $component-bg !default;
136136 }
137137}
138138
139- .nav.nav--tabs {
140- border-bottom : $nav-border-width solid $nav-border-color ;
141-
142- > .nav__item {
143- & :not (:last-child ) {
144- margin-right : $spacing-stack-xxs ;
145- }
146-
147- > .nav__link {
148- margin : 0 0 (0 - $nav-border-width ) 0 ;
149- padding : 0.375em 0.75em ;
150- border-style : solid ;
151- border-width : $nav-border-width $nav-border-width 0 $nav-border-width ;
152- border-color : transparent ;
153- border-radius : $component-border-radius-md $component-border-radius-md 0 0 ;
154- }
155-
156- & .is-active {
157- > .nav__link {
158- color : $grey-dark ;
159- border-color : $nav-border-color ;
160- background-color : $nav-tabs-active-bg ;
161- }
162- }
163- }
164- }
165-
You can’t perform that action at this time.
0 commit comments