anchor_ui-sprockets 5.2.0.1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (182) hide show
  1. checksums.yaml +7 -0
  2. data/README.md +67 -0
  3. data/Rakefile +20 -0
  4. data/app/assets/fonts/coreui-icons/CoreUI-Icons-Linear-Free.eot +0 -0
  5. data/app/assets/fonts/coreui-icons/CoreUI-Icons-Linear-Free.svg +110 -0
  6. data/app/assets/fonts/coreui-icons/CoreUI-Icons-Linear-Free.ttf +0 -0
  7. data/app/assets/fonts/coreui-icons/CoreUI-Icons-Linear-Free.woff +0 -0
  8. data/app/assets/javascripts/core.min.js +10 -0
  9. data/app/assets/javascripts/core.min.js.map +1 -0
  10. data/app/assets/javascripts/coreui/coreui-utilities.js +1072 -0
  11. data/app/assets/javascripts/coreui/coreui-utilities.js.map +1 -0
  12. data/app/assets/javascripts/coreui/coreui-utilities.min.js +7 -0
  13. data/app/assets/javascripts/coreui/coreui-utilities.min.js.map +1 -0
  14. data/app/assets/javascripts/coreui/coreui.js +1962 -0
  15. data/app/assets/javascripts/coreui/coreui.js.map +1 -0
  16. data/app/assets/javascripts/coreui/coreui.min.js +7 -0
  17. data/app/assets/javascripts/coreui/coreui.min.js.map +1 -0
  18. data/app/assets/javascripts/custom-tooltips.min.js +2 -0
  19. data/app/assets/javascripts/custom-tooltips.min.js.map +1 -0
  20. data/app/assets/javascripts/pace.min.js +2 -0
  21. data/app/assets/javascripts/perfect-scrollbar.min.js +6 -0
  22. data/app/assets/stylesheets/coreui-icons/_core.scss +33 -0
  23. data/app/assets/stylesheets/coreui-icons/_functions.scss +3 -0
  24. data/app/assets/stylesheets/coreui-icons/_variables.scss +106 -0
  25. data/app/assets/stylesheets/coreui-icons/coreui-icons.scss +11 -0
  26. data/app/assets/stylesheets/coreui/_animate.scss +27 -0
  27. data/app/assets/stylesheets/coreui/_aside.scss +65 -0
  28. data/app/assets/stylesheets/coreui/_avatars.scss +44 -0
  29. data/app/assets/stylesheets/coreui/_badge.scss +3 -0
  30. data/app/assets/stylesheets/coreui/_brand-buttons.scss +60 -0
  31. data/app/assets/stylesheets/coreui/_brand-card.scss +65 -0
  32. data/app/assets/stylesheets/coreui/_breadcrumb-menu.scss +44 -0
  33. data/app/assets/stylesheets/coreui/_breadcrumb.scss +16 -0
  34. data/app/assets/stylesheets/coreui/_buttons.scss +32 -0
  35. data/app/assets/stylesheets/coreui/_callout.scss +73 -0
  36. data/app/assets/stylesheets/coreui/_card.scss +117 -0
  37. data/app/assets/stylesheets/coreui/_charts.scss +55 -0
  38. data/app/assets/stylesheets/coreui/_dropdown-menu-right.scss +8 -0
  39. data/app/assets/stylesheets/coreui/_dropdown.scss +69 -0
  40. data/app/assets/stylesheets/coreui/_footer.scss +9 -0
  41. data/app/assets/stylesheets/coreui/_grid.scss +15 -0
  42. data/app/assets/stylesheets/coreui/_header.scss +135 -0
  43. data/app/assets/stylesheets/coreui/_ie-custom-properties.scss +14 -0
  44. data/app/assets/stylesheets/coreui/_images.scss +6 -0
  45. data/app/assets/stylesheets/coreui/_input-group.scss +5 -0
  46. data/app/assets/stylesheets/coreui/_layout.scss +483 -0
  47. data/app/assets/stylesheets/coreui/_list-group.scss +35 -0
  48. data/app/assets/stylesheets/coreui/_mixins.scss +7 -0
  49. data/app/assets/stylesheets/coreui/_modal.scss +13 -0
  50. data/app/assets/stylesheets/coreui/_nav.scss +57 -0
  51. data/app/assets/stylesheets/coreui/_navbar.scss +135 -0
  52. data/app/assets/stylesheets/coreui/_others.scss +4 -0
  53. data/app/assets/stylesheets/coreui/_progress-group.scss +40 -0
  54. data/app/assets/stylesheets/coreui/_progress.scss +15 -0
  55. data/app/assets/stylesheets/coreui/_rtl.scss +27 -0
  56. data/app/assets/stylesheets/coreui/_sidebar.scss +606 -0
  57. data/app/assets/stylesheets/coreui/_switches.scss +173 -0
  58. data/app/assets/stylesheets/coreui/_tables.scss +20 -0
  59. data/app/assets/stylesheets/coreui/_utilities.scss +4 -0
  60. data/app/assets/stylesheets/coreui/_variables.scss +204 -0
  61. data/app/assets/stylesheets/coreui/_vendors.scss +1 -0
  62. data/app/assets/stylesheets/coreui/_widgets.scss +1 -0
  63. data/app/assets/stylesheets/coreui/bootstrap.scss +4 -0
  64. data/app/assets/stylesheets/coreui/bootstrap/_alert.scss +51 -0
  65. data/app/assets/stylesheets/coreui/bootstrap/_badge.scss +47 -0
  66. data/app/assets/stylesheets/coreui/bootstrap/_breadcrumb.scss +41 -0
  67. data/app/assets/stylesheets/coreui/bootstrap/_button-group.scss +172 -0
  68. data/app/assets/stylesheets/coreui/bootstrap/_buttons.scss +143 -0
  69. data/app/assets/stylesheets/coreui/bootstrap/_card.scss +301 -0
  70. data/app/assets/stylesheets/coreui/bootstrap/_carousel.scss +236 -0
  71. data/app/assets/stylesheets/coreui/bootstrap/_close.scss +35 -0
  72. data/app/assets/stylesheets/coreui/bootstrap/_code.scss +48 -0
  73. data/app/assets/stylesheets/coreui/bootstrap/_custom-forms.scss +433 -0
  74. data/app/assets/stylesheets/coreui/bootstrap/_dropdown.scss +166 -0
  75. data/app/assets/stylesheets/coreui/bootstrap/_forms.scss +333 -0
  76. data/app/assets/stylesheets/coreui/bootstrap/_functions.scss +86 -0
  77. data/app/assets/stylesheets/coreui/bootstrap/_grid.scss +52 -0
  78. data/app/assets/stylesheets/coreui/bootstrap/_images.scss +42 -0
  79. data/app/assets/stylesheets/coreui/bootstrap/_input-group.scss +173 -0
  80. data/app/assets/stylesheets/coreui/bootstrap/_jumbotron.scss +16 -0
  81. data/app/assets/stylesheets/coreui/bootstrap/_list-group.scss +115 -0
  82. data/app/assets/stylesheets/coreui/bootstrap/_media.scss +8 -0
  83. data/app/assets/stylesheets/coreui/bootstrap/_mixins.scss +41 -0
  84. data/app/assets/stylesheets/coreui/bootstrap/_modal.scss +180 -0
  85. data/app/assets/stylesheets/coreui/bootstrap/_nav.scss +118 -0
  86. data/app/assets/stylesheets/coreui/bootstrap/_navbar.scss +299 -0
  87. data/app/assets/stylesheets/coreui/bootstrap/_pagination.scss +78 -0
  88. data/app/assets/stylesheets/coreui/bootstrap/_popover.scss +183 -0
  89. data/app/assets/stylesheets/coreui/bootstrap/_print.scss +141 -0
  90. data/app/assets/stylesheets/coreui/bootstrap/_progress.scss +34 -0
  91. data/app/assets/stylesheets/coreui/bootstrap/_reboot.scss +483 -0
  92. data/app/assets/stylesheets/coreui/bootstrap/_root.scss +19 -0
  93. data/app/assets/stylesheets/coreui/bootstrap/_tables.scss +187 -0
  94. data/app/assets/stylesheets/coreui/bootstrap/_tooltip.scss +115 -0
  95. data/app/assets/stylesheets/coreui/bootstrap/_transitions.scss +22 -0
  96. data/app/assets/stylesheets/coreui/bootstrap/_type.scss +125 -0
  97. data/app/assets/stylesheets/coreui/bootstrap/_utilities.scss +15 -0
  98. data/app/assets/stylesheets/coreui/bootstrap/_variables.scss +952 -0
  99. data/app/assets/stylesheets/coreui/bootstrap/bootstrap-grid.scss +32 -0
  100. data/app/assets/stylesheets/coreui/bootstrap/bootstrap-reboot.scss +12 -0
  101. data/app/assets/stylesheets/coreui/bootstrap/bootstrap.scss +42 -0
  102. data/app/assets/stylesheets/coreui/bootstrap/mixins/_alert.scss +13 -0
  103. data/app/assets/stylesheets/coreui/bootstrap/mixins/_background-variant.scss +21 -0
  104. data/app/assets/stylesheets/coreui/bootstrap/mixins/_badge.scss +12 -0
  105. data/app/assets/stylesheets/coreui/bootstrap/mixins/_border-radius.scss +35 -0
  106. data/app/assets/stylesheets/coreui/bootstrap/mixins/_box-shadow.scss +5 -0
  107. data/app/assets/stylesheets/coreui/bootstrap/mixins/_breakpoints.scss +123 -0
  108. data/app/assets/stylesheets/coreui/bootstrap/mixins/_buttons.scss +109 -0
  109. data/app/assets/stylesheets/coreui/bootstrap/mixins/_caret.scss +66 -0
  110. data/app/assets/stylesheets/coreui/bootstrap/mixins/_clearfix.scss +7 -0
  111. data/app/assets/stylesheets/coreui/bootstrap/mixins/_float.scss +11 -0
  112. data/app/assets/stylesheets/coreui/bootstrap/mixins/_forms.scss +147 -0
  113. data/app/assets/stylesheets/coreui/bootstrap/mixins/_gradients.scss +45 -0
  114. data/app/assets/stylesheets/coreui/bootstrap/mixins/_grid-framework.scss +67 -0
  115. data/app/assets/stylesheets/coreui/bootstrap/mixins/_grid.scss +52 -0
  116. data/app/assets/stylesheets/coreui/bootstrap/mixins/_hover.scss +37 -0
  117. data/app/assets/stylesheets/coreui/bootstrap/mixins/_image.scss +36 -0
  118. data/app/assets/stylesheets/coreui/bootstrap/mixins/_list-group.scss +21 -0
  119. data/app/assets/stylesheets/coreui/bootstrap/mixins/_lists.scss +7 -0
  120. data/app/assets/stylesheets/coreui/bootstrap/mixins/_nav-divider.scss +10 -0
  121. data/app/assets/stylesheets/coreui/bootstrap/mixins/_pagination.scss +22 -0
  122. data/app/assets/stylesheets/coreui/bootstrap/mixins/_reset-text.scss +17 -0
  123. data/app/assets/stylesheets/coreui/bootstrap/mixins/_resize.scss +6 -0
  124. data/app/assets/stylesheets/coreui/bootstrap/mixins/_screen-reader.scss +33 -0
  125. data/app/assets/stylesheets/coreui/bootstrap/mixins/_size.scss +6 -0
  126. data/app/assets/stylesheets/coreui/bootstrap/mixins/_table-row.scss +30 -0
  127. data/app/assets/stylesheets/coreui/bootstrap/mixins/_text-emphasis.scss +14 -0
  128. data/app/assets/stylesheets/coreui/bootstrap/mixins/_text-hide.scss +13 -0
  129. data/app/assets/stylesheets/coreui/bootstrap/mixins/_text-truncate.scss +8 -0
  130. data/app/assets/stylesheets/coreui/bootstrap/mixins/_transition.scss +13 -0
  131. data/app/assets/stylesheets/coreui/bootstrap/mixins/_visibility.scss +7 -0
  132. data/app/assets/stylesheets/coreui/bootstrap/utilities/_align.scss +8 -0
  133. data/app/assets/stylesheets/coreui/bootstrap/utilities/_background.scss +19 -0
  134. data/app/assets/stylesheets/coreui/bootstrap/utilities/_borders.scss +59 -0
  135. data/app/assets/stylesheets/coreui/bootstrap/utilities/_clearfix.scss +3 -0
  136. data/app/assets/stylesheets/coreui/bootstrap/utilities/_display.scss +38 -0
  137. data/app/assets/stylesheets/coreui/bootstrap/utilities/_embed.scss +52 -0
  138. data/app/assets/stylesheets/coreui/bootstrap/utilities/_flex.scss +51 -0
  139. data/app/assets/stylesheets/coreui/bootstrap/utilities/_float.scss +9 -0
  140. data/app/assets/stylesheets/coreui/bootstrap/utilities/_position.scss +37 -0
  141. data/app/assets/stylesheets/coreui/bootstrap/utilities/_screenreaders.scss +11 -0
  142. data/app/assets/stylesheets/coreui/bootstrap/utilities/_shadows.scss +6 -0
  143. data/app/assets/stylesheets/coreui/bootstrap/utilities/_sizing.scss +12 -0
  144. data/app/assets/stylesheets/coreui/bootstrap/utilities/_spacing.scss +51 -0
  145. data/app/assets/stylesheets/coreui/bootstrap/utilities/_text.scss +58 -0
  146. data/app/assets/stylesheets/coreui/bootstrap/utilities/_visibility.scss +11 -0
  147. data/app/assets/stylesheets/coreui/coreui-standalone.scss +65 -0
  148. data/app/assets/stylesheets/coreui/coreui.scss +64 -0
  149. data/app/assets/stylesheets/coreui/mixins/_avatars.scss +17 -0
  150. data/app/assets/stylesheets/coreui/mixins/_borders.scss +31 -0
  151. data/app/assets/stylesheets/coreui/mixins/_buttons.scss +41 -0
  152. data/app/assets/stylesheets/coreui/mixins/_card-accent.scss +4 -0
  153. data/app/assets/stylesheets/coreui/mixins/_list-group.scss +7 -0
  154. data/app/assets/stylesheets/coreui/mixins/_sidebar-width.scss +18 -0
  155. data/app/assets/stylesheets/coreui/mixins/_switches.scss +78 -0
  156. data/app/assets/stylesheets/coreui/utilities/_background.scss +28 -0
  157. data/app/assets/stylesheets/coreui/utilities/_borders.scss +19 -0
  158. data/app/assets/stylesheets/coreui/utilities/_display.scss +18 -0
  159. data/app/assets/stylesheets/coreui/utilities/_typography.scss +55 -0
  160. data/app/assets/stylesheets/coreui/variables/_colors.scss +146 -0
  161. data/app/assets/stylesheets/coreui/variables/bootstrap/_variables.scss +62 -0
  162. data/app/assets/stylesheets/coreui/vendors/_perfect-scrollbar.scss +94 -0
  163. data/lib/anchor_ui/sprockets.rb +21 -0
  164. data/lib/anchor_ui/sprockets/assets.rb +21 -0
  165. data/lib/anchor_ui/sprockets/assets/base.rb +24 -0
  166. data/lib/anchor_ui/sprockets/assets/core.rb +24 -0
  167. data/lib/anchor_ui/sprockets/assets/core_ui.rb +93 -0
  168. data/lib/anchor_ui/sprockets/assets/core_ui_icons.rb +73 -0
  169. data/lib/anchor_ui/sprockets/assets/custom_tooltips.rb +24 -0
  170. data/lib/anchor_ui/sprockets/assets/javascript.rb +39 -0
  171. data/lib/anchor_ui/sprockets/assets/pace.rb +19 -0
  172. data/lib/anchor_ui/sprockets/assets/perfect_scrollbar.rb +19 -0
  173. data/lib/anchor_ui/sprockets/engine.rb +6 -0
  174. data/lib/anchor_ui/sprockets/paths.rb +21 -0
  175. data/lib/anchor_ui/sprockets/updater.rb +23 -0
  176. data/lib/anchor_ui/sprockets/version.rb +7 -0
  177. data/lib/generators/anchor_ui/sprockets/install_generator.rb +37 -0
  178. data/lib/generators/anchor_ui/sprockets/templates/_coreui.scss +35 -0
  179. data/lib/generators/anchor_ui/sprockets/templates/_variables.scss +411 -0
  180. data/lib/generators/anchor_ui/sprockets/templates/application.js +11 -0
  181. data/lib/generators/anchor_ui/sprockets/templates/application.scss +7 -0
  182. metadata +420 -0
@@ -0,0 +1,8 @@
1
+ .media {
2
+ display: flex;
3
+ align-items: flex-start;
4
+ }
5
+
6
+ .media-body {
7
+ flex: 1;
8
+ }
@@ -0,0 +1,41 @@
1
+ // Toggles
2
+ //
3
+ // Used in conjunction with global variables to enable certain theme features.
4
+
5
+ // Utilities
6
+ @import "mixins/breakpoints";
7
+ @import "mixins/hover";
8
+ @import "mixins/image";
9
+ @import "mixins/badge";
10
+ @import "mixins/resize";
11
+ @import "mixins/screen-reader";
12
+ @import "mixins/size";
13
+ @import "mixins/reset-text";
14
+ @import "mixins/text-emphasis";
15
+ @import "mixins/text-hide";
16
+ @import "mixins/text-truncate";
17
+ @import "mixins/visibility";
18
+
19
+ // // Components
20
+ @import "mixins/alert";
21
+ @import "mixins/buttons";
22
+ @import "mixins/caret";
23
+ @import "mixins/pagination";
24
+ @import "mixins/lists";
25
+ @import "mixins/list-group";
26
+ @import "mixins/nav-divider";
27
+ @import "mixins/forms";
28
+ @import "mixins/table-row";
29
+
30
+ // // Skins
31
+ @import "mixins/background-variant";
32
+ @import "mixins/border-radius";
33
+ @import "mixins/box-shadow";
34
+ @import "mixins/gradients";
35
+ @import "mixins/transition";
36
+
37
+ // // Layout
38
+ @import "mixins/clearfix";
39
+ @import "mixins/grid-framework";
40
+ @import "mixins/grid";
41
+ @import "mixins/float";
@@ -0,0 +1,180 @@
1
+ // .modal-open - body class for killing the scroll
2
+ // .modal - container to scroll within
3
+ // .modal-dialog - positioning shell for the actual modal
4
+ // .modal-content - actual modal w/ bg and corners and stuff
5
+
6
+
7
+ .modal-open {
8
+ // Kill the scroll on the body
9
+ overflow: hidden;
10
+
11
+ .modal {
12
+ overflow-x: hidden;
13
+ overflow-y: auto;
14
+ }
15
+ }
16
+
17
+ // Container that the modal scrolls within
18
+ .modal {
19
+ position: fixed;
20
+ top: 0;
21
+ right: 0;
22
+ bottom: 0;
23
+ left: 0;
24
+ z-index: $zindex-modal;
25
+ display: none;
26
+ overflow: hidden;
27
+ // Prevent Chrome on Windows from adding a focus outline. For details, see
28
+ // https://github.com/twbs/bootstrap/pull/10951.
29
+ outline: 0;
30
+ // We deliberately don't use `-webkit-overflow-scrolling: touch;` due to a
31
+ // gnarly iOS Safari bug: https://bugs.webkit.org/show_bug.cgi?id=158342
32
+ // See also https://github.com/twbs/bootstrap/issues/17695
33
+ }
34
+
35
+ // Shell div to position the modal with bottom padding
36
+ .modal-dialog {
37
+ position: relative;
38
+ width: auto;
39
+ margin: $modal-dialog-margin;
40
+ // allow clicks to pass through for custom click handling to close modal
41
+ pointer-events: none;
42
+
43
+ // When fading in the modal, animate it to slide down
44
+ .modal.fade & {
45
+ @include transition($modal-transition);
46
+ transform: translate(0, -25%);
47
+ }
48
+ .modal.show & {
49
+ transform: translate(0, 0);
50
+ }
51
+ }
52
+
53
+ .modal-dialog-centered {
54
+ display: flex;
55
+ align-items: center;
56
+ min-height: calc(100% - (#{$modal-dialog-margin} * 2));
57
+
58
+ // Ensure `modal-dialog-centered` extends the full height of the view (IE10/11)
59
+ &::before {
60
+ display: block; // IE10
61
+ height: calc(100vh - (#{$modal-dialog-margin} * 2));
62
+ content: "";
63
+ }
64
+ }
65
+
66
+ // Actual modal
67
+ .modal-content {
68
+ position: relative;
69
+ display: flex;
70
+ flex-direction: column;
71
+ width: 100%; // Ensure `.modal-content` extends the full width of the parent `.modal-dialog`
72
+ // counteract the pointer-events: none; in the .modal-dialog
73
+ pointer-events: auto;
74
+ background-color: $modal-content-bg;
75
+ background-clip: padding-box;
76
+ border: $modal-content-border-width solid $modal-content-border-color;
77
+ @include border-radius($modal-content-border-radius);
78
+ @include box-shadow($modal-content-box-shadow-xs);
79
+ // Remove focus outline from opened modal
80
+ outline: 0;
81
+ }
82
+
83
+ // Modal background
84
+ .modal-backdrop {
85
+ position: fixed;
86
+ top: 0;
87
+ right: 0;
88
+ bottom: 0;
89
+ left: 0;
90
+ z-index: $zindex-modal-backdrop;
91
+ background-color: $modal-backdrop-bg;
92
+
93
+ // Fade for backdrop
94
+ &.fade { opacity: 0; }
95
+ &.show { opacity: $modal-backdrop-opacity; }
96
+ }
97
+
98
+ // Modal header
99
+ // Top section of the modal w/ title and dismiss
100
+ .modal-header {
101
+ display: flex;
102
+ align-items: flex-start; // so the close btn always stays on the upper right corner
103
+ justify-content: space-between; // Put modal header elements (title and dismiss) on opposite ends
104
+ padding: $modal-header-padding;
105
+ border-bottom: $modal-header-border-width solid $modal-header-border-color;
106
+ @include border-top-radius($modal-content-border-radius);
107
+
108
+ .close {
109
+ padding: $modal-header-padding;
110
+ // auto on the left force icon to the right even when there is no .modal-title
111
+ margin: (-$modal-header-padding) (-$modal-header-padding) (-$modal-header-padding) auto;
112
+ }
113
+ }
114
+
115
+ // Title text within header
116
+ .modal-title {
117
+ margin-bottom: 0;
118
+ line-height: $modal-title-line-height;
119
+ }
120
+
121
+ // Modal body
122
+ // Where all modal content resides (sibling of .modal-header and .modal-footer)
123
+ .modal-body {
124
+ position: relative;
125
+ // Enable `flex-grow: 1` so that the body take up as much space as possible
126
+ // when should there be a fixed height on `.modal-dialog`.
127
+ flex: 1 1 auto;
128
+ padding: $modal-inner-padding;
129
+ }
130
+
131
+ // Footer (for actions)
132
+ .modal-footer {
133
+ display: flex;
134
+ align-items: center; // vertically center
135
+ justify-content: flex-end; // Right align buttons with flex property because text-align doesn't work on flex items
136
+ padding: $modal-inner-padding;
137
+ border-top: $modal-footer-border-width solid $modal-footer-border-color;
138
+
139
+ // Easily place margin between footer elements
140
+ > :not(:first-child) { margin-left: .25rem; }
141
+ > :not(:last-child) { margin-right: .25rem; }
142
+ }
143
+
144
+ // Measure scrollbar width for padding body during modal show/hide
145
+ .modal-scrollbar-measure {
146
+ position: absolute;
147
+ top: -9999px;
148
+ width: 50px;
149
+ height: 50px;
150
+ overflow: scroll;
151
+ }
152
+
153
+ // Scale up the modal
154
+ @include media-breakpoint-up(sm) {
155
+ // Automatically set modal's width for larger viewports
156
+ .modal-dialog {
157
+ max-width: $modal-md;
158
+ margin: $modal-dialog-margin-y-sm-up auto;
159
+ }
160
+
161
+ .modal-dialog-centered {
162
+ min-height: calc(100% - (#{$modal-dialog-margin-y-sm-up} * 2));
163
+
164
+ &::before {
165
+ height: calc(100vh - (#{$modal-dialog-margin-y-sm-up} * 2));
166
+ }
167
+
168
+ }
169
+
170
+ .modal-content {
171
+ @include box-shadow($modal-content-box-shadow-sm-up);
172
+ }
173
+
174
+ .modal-sm { max-width: $modal-sm; }
175
+
176
+ }
177
+
178
+ @include media-breakpoint-up(lg) {
179
+ .modal-lg { max-width: $modal-lg; }
180
+ }
@@ -0,0 +1,118 @@
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;
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;
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
+
79
+ .nav-link.active,
80
+ .show > .nav-link {
81
+ color: $nav-pills-link-active-color;
82
+ background-color: $nav-pills-link-active-bg;
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
+ }
@@ -0,0 +1,299 @@
1
+ // Contents
2
+ //
3
+ // Navbar
4
+ // Navbar brand
5
+ // Navbar nav
6
+ // Navbar text
7
+ // Navbar divider
8
+ // Responsive navbar
9
+ // Navbar position
10
+ // Navbar themes
11
+
12
+
13
+ // Navbar
14
+ //
15
+ // Provide a static navbar from which we expand to create full-width, fixed, and
16
+ // other navbar variations.
17
+
18
+ .navbar {
19
+ position: relative;
20
+ display: flex;
21
+ flex-wrap: wrap; // allow us to do the line break for collapsing content
22
+ align-items: center;
23
+ justify-content: space-between; // space out brand from logo
24
+ padding: $navbar-padding-y $navbar-padding-x;
25
+
26
+ // Because flex properties aren't inherited, we need to redeclare these first
27
+ // few properties so that content nested within behave properly.
28
+ > .container,
29
+ > .container-fluid {
30
+ display: flex;
31
+ flex-wrap: wrap;
32
+ align-items: center;
33
+ justify-content: space-between;
34
+ }
35
+ }
36
+
37
+
38
+ // Navbar brand
39
+ //
40
+ // Used for brand, project, or site names.
41
+
42
+ .navbar-brand {
43
+ display: inline-block;
44
+ padding-top: $navbar-brand-padding-y;
45
+ padding-bottom: $navbar-brand-padding-y;
46
+ margin-right: $navbar-padding-x;
47
+ font-size: $navbar-brand-font-size;
48
+ line-height: inherit;
49
+ white-space: nowrap;
50
+
51
+ @include hover-focus {
52
+ text-decoration: none;
53
+ }
54
+ }
55
+
56
+
57
+ // Navbar nav
58
+ //
59
+ // Custom navbar navigation (doesn't require `.nav`, but does make use of `.nav-link`).
60
+
61
+ .navbar-nav {
62
+ display: flex;
63
+ flex-direction: column; // cannot use `inherit` to get the `.navbar`s value
64
+ padding-left: 0;
65
+ margin-bottom: 0;
66
+ list-style: none;
67
+
68
+ .nav-link {
69
+ padding-right: 0;
70
+ padding-left: 0;
71
+ }
72
+
73
+ .dropdown-menu {
74
+ position: static;
75
+ float: none;
76
+ }
77
+ }
78
+
79
+
80
+ // Navbar text
81
+ //
82
+ //
83
+
84
+ .navbar-text {
85
+ display: inline-block;
86
+ padding-top: $nav-link-padding-y;
87
+ padding-bottom: $nav-link-padding-y;
88
+ }
89
+
90
+
91
+ // Responsive navbar
92
+ //
93
+ // Custom styles for responsive collapsing and toggling of navbar contents.
94
+ // Powered by the collapse Bootstrap JavaScript plugin.
95
+
96
+ // When collapsed, prevent the toggleable navbar contents from appearing in
97
+ // the default flexbox row orientation. Requires the use of `flex-wrap: wrap`
98
+ // on the `.navbar` parent.
99
+ .navbar-collapse {
100
+ flex-basis: 100%;
101
+ flex-grow: 1;
102
+ // For always expanded or extra full navbars, ensure content aligns itself
103
+ // properly vertically. Can be easily overridden with flex utilities.
104
+ align-items: center;
105
+ }
106
+
107
+ // Button for toggling the navbar when in its collapsed state
108
+ .navbar-toggler {
109
+ padding: $navbar-toggler-padding-y $navbar-toggler-padding-x;
110
+ font-size: $navbar-toggler-font-size;
111
+ line-height: 1;
112
+ background-color: transparent; // remove default button style
113
+ border: $border-width solid transparent; // remove default button style
114
+ @include border-radius($navbar-toggler-border-radius);
115
+
116
+ @include hover-focus {
117
+ text-decoration: none;
118
+ }
119
+
120
+ // Opinionated: add "hand" cursor to non-disabled .navbar-toggler elements
121
+ &:not(:disabled):not(.disabled) {
122
+ cursor: pointer;
123
+ }
124
+ }
125
+
126
+ // Keep as a separate element so folks can easily override it with another icon
127
+ // or image file as needed.
128
+ .navbar-toggler-icon {
129
+ display: inline-block;
130
+ width: 1.5em;
131
+ height: 1.5em;
132
+ vertical-align: middle;
133
+ content: "";
134
+ background: no-repeat center center;
135
+ background-size: 100% 100%;
136
+ }
137
+
138
+ // Generate series of `.navbar-expand-*` responsive classes for configuring
139
+ // where your navbar collapses.
140
+ .navbar-expand {
141
+ @each $breakpoint in map-keys($grid-breakpoints) {
142
+ $next: breakpoint-next($breakpoint, $grid-breakpoints);
143
+ $infix: breakpoint-infix($next, $grid-breakpoints);
144
+
145
+ &#{$infix} {
146
+ @include media-breakpoint-down($breakpoint) {
147
+ > .container,
148
+ > .container-fluid {
149
+ padding-right: 0;
150
+ padding-left: 0;
151
+ }
152
+ }
153
+
154
+ @include media-breakpoint-up($next) {
155
+ flex-flow: row nowrap;
156
+ justify-content: flex-start;
157
+
158
+ .navbar-nav {
159
+ flex-direction: row;
160
+
161
+ .dropdown-menu {
162
+ position: absolute;
163
+ }
164
+
165
+ .nav-link {
166
+ padding-right: $navbar-nav-link-padding-x;
167
+ padding-left: $navbar-nav-link-padding-x;
168
+ }
169
+ }
170
+
171
+ // For nesting containers, have to redeclare for alignment purposes
172
+ > .container,
173
+ > .container-fluid {
174
+ flex-wrap: nowrap;
175
+ }
176
+
177
+ .navbar-collapse {
178
+ display: flex !important; // stylelint-disable-line declaration-no-important
179
+
180
+ // Changes flex-bases to auto because of an IE10 bug
181
+ flex-basis: auto;
182
+ }
183
+
184
+ .navbar-toggler {
185
+ display: none;
186
+ }
187
+ }
188
+ }
189
+ }
190
+ }
191
+
192
+
193
+ // Navbar themes
194
+ //
195
+ // Styles for switching between navbars with light or dark background.
196
+
197
+ // Dark links against a light background
198
+ .navbar-light {
199
+ .navbar-brand {
200
+ color: $navbar-light-active-color;
201
+
202
+ @include hover-focus {
203
+ color: $navbar-light-active-color;
204
+ }
205
+ }
206
+
207
+ .navbar-nav {
208
+ .nav-link {
209
+ color: $navbar-light-color;
210
+
211
+ @include hover-focus {
212
+ color: $navbar-light-hover-color;
213
+ }
214
+
215
+ &.disabled {
216
+ color: $navbar-light-disabled-color;
217
+ }
218
+ }
219
+
220
+ .show > .nav-link,
221
+ .active > .nav-link,
222
+ .nav-link.show,
223
+ .nav-link.active {
224
+ color: $navbar-light-active-color;
225
+ }
226
+ }
227
+
228
+ .navbar-toggler {
229
+ color: $navbar-light-color;
230
+ border-color: $navbar-light-toggler-border-color;
231
+ }
232
+
233
+ .navbar-toggler-icon {
234
+ background-image: $navbar-light-toggler-icon-bg;
235
+ }
236
+
237
+ .navbar-text {
238
+ color: $navbar-light-color;
239
+ a {
240
+ color: $navbar-light-active-color;
241
+
242
+ @include hover-focus {
243
+ color: $navbar-light-active-color;
244
+ }
245
+ }
246
+ }
247
+ }
248
+
249
+ // White links against a dark background
250
+ .navbar-dark {
251
+ .navbar-brand {
252
+ color: $navbar-dark-active-color;
253
+
254
+ @include hover-focus {
255
+ color: $navbar-dark-active-color;
256
+ }
257
+ }
258
+
259
+ .navbar-nav {
260
+ .nav-link {
261
+ color: $navbar-dark-color;
262
+
263
+ @include hover-focus {
264
+ color: $navbar-dark-hover-color;
265
+ }
266
+
267
+ &.disabled {
268
+ color: $navbar-dark-disabled-color;
269
+ }
270
+ }
271
+
272
+ .show > .nav-link,
273
+ .active > .nav-link,
274
+ .nav-link.show,
275
+ .nav-link.active {
276
+ color: $navbar-dark-active-color;
277
+ }
278
+ }
279
+
280
+ .navbar-toggler {
281
+ color: $navbar-dark-color;
282
+ border-color: $navbar-dark-toggler-border-color;
283
+ }
284
+
285
+ .navbar-toggler-icon {
286
+ background-image: $navbar-dark-toggler-icon-bg;
287
+ }
288
+
289
+ .navbar-text {
290
+ color: $navbar-dark-color;
291
+ a {
292
+ color: $navbar-dark-active-color;
293
+
294
+ @include hover-focus {
295
+ color: $navbar-dark-active-color;
296
+ }
297
+ }
298
+ }
299
+ }