jekyll-theme-portfolio 1.0.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (114) hide show
  1. checksums.yaml +7 -0
  2. data/LICENSE.md +21 -0
  3. data/README.md +19 -0
  4. data/_includes/footer.html +57 -0
  5. data/_includes/head.html +12 -0
  6. data/_includes/header.html +43 -0
  7. data/_layouts/default.html +20 -0
  8. data/_layouts/home.html +41 -0
  9. data/_layouts/page.html +13 -0
  10. data/_layouts/portfolio.html +66 -0
  11. data/_layouts/post.html +23 -0
  12. data/_sass/_bootstrap_customization.scss +332 -0
  13. data/_sass/_syntax-highlighting.scss +74 -0
  14. data/_sass/_variables.scss +106 -0
  15. data/_sass/bootstrap-4-jekyll/_bootstrap-4-jekyll.scss +8 -0
  16. data/_sass/bootstrap/__DO_NOT_MODIFY +0 -0
  17. data/_sass/bootstrap/_alert.scss +51 -0
  18. data/_sass/bootstrap/_badge.scss +54 -0
  19. data/_sass/bootstrap/_breadcrumb.scss +41 -0
  20. data/_sass/bootstrap/_button-group.scss +163 -0
  21. data/_sass/bootstrap/_buttons.scss +137 -0
  22. data/_sass/bootstrap/_card.scss +289 -0
  23. data/_sass/bootstrap/_carousel.scss +197 -0
  24. data/_sass/bootstrap/_close.scss +41 -0
  25. data/_sass/bootstrap/_code.scss +48 -0
  26. data/_sass/bootstrap/_custom-forms.scss +507 -0
  27. data/_sass/bootstrap/_dropdown.scss +191 -0
  28. data/_sass/bootstrap/_forms.scss +330 -0
  29. data/_sass/bootstrap/_functions.scss +86 -0
  30. data/_sass/bootstrap/_grid.scss +52 -0
  31. data/_sass/bootstrap/_images.scss +42 -0
  32. data/_sass/bootstrap/_input-group.scss +193 -0
  33. data/_sass/bootstrap/_jumbotron.scss +17 -0
  34. data/_sass/bootstrap/_list-group.scss +149 -0
  35. data/_sass/bootstrap/_media.scss +8 -0
  36. data/_sass/bootstrap/_mixins.scss +47 -0
  37. data/_sass/bootstrap/_modal.scss +229 -0
  38. data/_sass/bootstrap/_nav.scss +120 -0
  39. data/_sass/bootstrap/_navbar.scss +294 -0
  40. data/_sass/bootstrap/_pagination.scss +73 -0
  41. data/_sass/bootstrap/_popover.scss +171 -0
  42. data/_sass/bootstrap/_print.scss +141 -0
  43. data/_sass/bootstrap/_progress.scss +43 -0
  44. data/_sass/bootstrap/_reboot.scss +483 -0
  45. data/_sass/bootstrap/_root.scss +19 -0
  46. data/_sass/bootstrap/_spinners.scss +55 -0
  47. data/_sass/bootstrap/_tables.scss +185 -0
  48. data/_sass/bootstrap/_toasts.scss +44 -0
  49. data/_sass/bootstrap/_tooltip.scss +115 -0
  50. data/_sass/bootstrap/_transitions.scss +20 -0
  51. data/_sass/bootstrap/_type.scss +125 -0
  52. data/_sass/bootstrap/_utilities.scss +17 -0
  53. data/_sass/bootstrap/_variables.scss +1123 -0
  54. data/_sass/bootstrap/bootstrap-grid.scss +29 -0
  55. data/_sass/bootstrap/bootstrap-reboot.scss +12 -0
  56. data/_sass/bootstrap/bootstrap.scss +44 -0
  57. data/_sass/bootstrap/mixins/_alert.scss +13 -0
  58. data/_sass/bootstrap/mixins/_background-variant.scss +21 -0
  59. data/_sass/bootstrap/mixins/_badge.scss +17 -0
  60. data/_sass/bootstrap/mixins/_border-radius.scss +63 -0
  61. data/_sass/bootstrap/mixins/_box-shadow.scss +20 -0
  62. data/_sass/bootstrap/mixins/_breakpoints.scss +123 -0
  63. data/_sass/bootstrap/mixins/_buttons.scss +107 -0
  64. data/_sass/bootstrap/mixins/_caret.scss +62 -0
  65. data/_sass/bootstrap/mixins/_clearfix.scss +7 -0
  66. data/_sass/bootstrap/mixins/_deprecate.scss +10 -0
  67. data/_sass/bootstrap/mixins/_float.scss +14 -0
  68. data/_sass/bootstrap/mixins/_forms.scss +192 -0
  69. data/_sass/bootstrap/mixins/_gradients.scss +45 -0
  70. data/_sass/bootstrap/mixins/_grid-framework.scss +66 -0
  71. data/_sass/bootstrap/mixins/_grid.scss +51 -0
  72. data/_sass/bootstrap/mixins/_hover.scss +37 -0
  73. data/_sass/bootstrap/mixins/_image.scss +36 -0
  74. data/_sass/bootstrap/mixins/_list-group.scss +21 -0
  75. data/_sass/bootstrap/mixins/_lists.scss +7 -0
  76. data/_sass/bootstrap/mixins/_nav-divider.scss +10 -0
  77. data/_sass/bootstrap/mixins/_pagination.scss +22 -0
  78. data/_sass/bootstrap/mixins/_reset-text.scss +17 -0
  79. data/_sass/bootstrap/mixins/_resize.scss +6 -0
  80. data/_sass/bootstrap/mixins/_screen-reader.scss +33 -0
  81. data/_sass/bootstrap/mixins/_size.scss +7 -0
  82. data/_sass/bootstrap/mixins/_table-row.scss +39 -0
  83. data/_sass/bootstrap/mixins/_text-emphasis.scss +16 -0
  84. data/_sass/bootstrap/mixins/_text-hide.scss +11 -0
  85. data/_sass/bootstrap/mixins/_text-truncate.scss +8 -0
  86. data/_sass/bootstrap/mixins/_transition.scss +16 -0
  87. data/_sass/bootstrap/mixins/_visibility.scss +8 -0
  88. data/_sass/bootstrap/utilities/_align.scss +8 -0
  89. data/_sass/bootstrap/utilities/_background.scss +19 -0
  90. data/_sass/bootstrap/utilities/_borders.scss +75 -0
  91. data/_sass/bootstrap/utilities/_clearfix.scss +3 -0
  92. data/_sass/bootstrap/utilities/_display.scss +26 -0
  93. data/_sass/bootstrap/utilities/_embed.scss +39 -0
  94. data/_sass/bootstrap/utilities/_flex.scss +51 -0
  95. data/_sass/bootstrap/utilities/_float.scss +11 -0
  96. data/_sass/bootstrap/utilities/_overflow.scss +5 -0
  97. data/_sass/bootstrap/utilities/_position.scss +32 -0
  98. data/_sass/bootstrap/utilities/_screenreaders.scss +11 -0
  99. data/_sass/bootstrap/utilities/_shadows.scss +6 -0
  100. data/_sass/bootstrap/utilities/_sizing.scss +20 -0
  101. data/_sass/bootstrap/utilities/_spacing.scss +73 -0
  102. data/_sass/bootstrap/utilities/_stretched-link.scss +19 -0
  103. data/_sass/bootstrap/utilities/_text.scss +72 -0
  104. data/_sass/bootstrap/utilities/_visibility.scss +13 -0
  105. data/_sass/bootstrap/vendor/_rfs.scss +204 -0
  106. data/assets/images/projects/nativescript.png +0 -0
  107. data/assets/images/projects/puppet.png +0 -0
  108. data/assets/javascript/bootstrap/__DO_NOT_MODIFY +0 -0
  109. data/assets/javascript/bootstrap/bootstrap.bundle.min.js +7 -0
  110. data/assets/javascript/bootstrap/bootstrap.bundle.min.js.map +1 -0
  111. data/assets/javascript/bootstrap/jquery.min.js +2 -0
  112. data/assets/javascript/bootstrap/jquery.min.map +1 -0
  113. data/assets/main.scss +9 -0
  114. metadata +219 -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,47 @@
1
+ // Toggles
2
+ //
3
+ // Used in conjunction with global variables to enable certain theme features.
4
+
5
+ // Vendor
6
+ @import "vendor/rfs";
7
+
8
+ // Deprecate
9
+ @import "mixins/deprecate";
10
+
11
+ // Utilities
12
+ @import "mixins/breakpoints";
13
+ @import "mixins/hover";
14
+ @import "mixins/image";
15
+ @import "mixins/badge";
16
+ @import "mixins/resize";
17
+ @import "mixins/screen-reader";
18
+ @import "mixins/size";
19
+ @import "mixins/reset-text";
20
+ @import "mixins/text-emphasis";
21
+ @import "mixins/text-hide";
22
+ @import "mixins/text-truncate";
23
+ @import "mixins/visibility";
24
+
25
+ // // Components
26
+ @import "mixins/alert";
27
+ @import "mixins/buttons";
28
+ @import "mixins/caret";
29
+ @import "mixins/pagination";
30
+ @import "mixins/lists";
31
+ @import "mixins/list-group";
32
+ @import "mixins/nav-divider";
33
+ @import "mixins/forms";
34
+ @import "mixins/table-row";
35
+
36
+ // // Skins
37
+ @import "mixins/background-variant";
38
+ @import "mixins/border-radius";
39
+ @import "mixins/box-shadow";
40
+ @import "mixins/gradients";
41
+ @import "mixins/transition";
42
+
43
+ // // Layout
44
+ @import "mixins/clearfix";
45
+ @import "mixins/grid-framework";
46
+ @import "mixins/grid";
47
+ @import "mixins/float";
@@ -0,0 +1,229 @@
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
+ left: 0;
22
+ z-index: $zindex-modal;
23
+ display: none;
24
+ width: 100%;
25
+ height: 100%;
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: $modal-fade-transform;
47
+ }
48
+ .modal.show & {
49
+ transform: $modal-show-transform;
50
+ }
51
+ }
52
+
53
+ .modal-dialog-scrollable {
54
+ display: flex; // IE10/11
55
+ max-height: calc(100% - #{$modal-dialog-margin * 2});
56
+
57
+ .modal-content {
58
+ max-height: calc(100vh - #{$modal-dialog-margin * 2}); // IE10/11
59
+ overflow: hidden;
60
+ }
61
+
62
+ .modal-header,
63
+ .modal-footer {
64
+ flex-shrink: 0;
65
+ }
66
+
67
+ .modal-body {
68
+ overflow-y: auto;
69
+ }
70
+ }
71
+
72
+ .modal-dialog-centered {
73
+ display: flex;
74
+ align-items: center;
75
+ min-height: calc(100% - #{$modal-dialog-margin * 2});
76
+
77
+ // Ensure `modal-dialog-centered` extends the full height of the view (IE10/11)
78
+ &::before {
79
+ display: block; // IE10
80
+ height: calc(100vh - #{$modal-dialog-margin * 2});
81
+ content: "";
82
+ }
83
+
84
+ // Ensure `.modal-body` shows scrollbar (IE10/11)
85
+ &.modal-dialog-scrollable {
86
+ flex-direction: column;
87
+ justify-content: center;
88
+ height: 100%;
89
+
90
+ .modal-content {
91
+ max-height: none;
92
+ }
93
+
94
+ &::before {
95
+ content: none;
96
+ }
97
+ }
98
+ }
99
+
100
+ // Actual modal
101
+ .modal-content {
102
+ position: relative;
103
+ display: flex;
104
+ flex-direction: column;
105
+ width: 100%; // Ensure `.modal-content` extends the full width of the parent `.modal-dialog`
106
+ // counteract the pointer-events: none; in the .modal-dialog
107
+ color: $modal-content-color;
108
+ pointer-events: auto;
109
+ background-color: $modal-content-bg;
110
+ background-clip: padding-box;
111
+ border: $modal-content-border-width solid $modal-content-border-color;
112
+ @include border-radius($modal-content-border-radius);
113
+ @include box-shadow($modal-content-box-shadow-xs);
114
+ // Remove focus outline from opened modal
115
+ outline: 0;
116
+ }
117
+
118
+ // Modal background
119
+ .modal-backdrop {
120
+ position: fixed;
121
+ top: 0;
122
+ left: 0;
123
+ z-index: $zindex-modal-backdrop;
124
+ width: 100vw;
125
+ height: 100vh;
126
+ background-color: $modal-backdrop-bg;
127
+
128
+ // Fade for backdrop
129
+ &.fade { opacity: 0; }
130
+ &.show { opacity: $modal-backdrop-opacity; }
131
+ }
132
+
133
+ // Modal header
134
+ // Top section of the modal w/ title and dismiss
135
+ .modal-header {
136
+ display: flex;
137
+ align-items: flex-start; // so the close btn always stays on the upper right corner
138
+ justify-content: space-between; // Put modal header elements (title and dismiss) on opposite ends
139
+ padding: $modal-header-padding;
140
+ border-bottom: $modal-header-border-width solid $modal-header-border-color;
141
+ @include border-top-radius($modal-content-border-radius);
142
+
143
+ .close {
144
+ padding: $modal-header-padding;
145
+ // auto on the left force icon to the right even when there is no .modal-title
146
+ margin: (-$modal-header-padding-y) (-$modal-header-padding-x) (-$modal-header-padding-y) auto;
147
+ }
148
+ }
149
+
150
+ // Title text within header
151
+ .modal-title {
152
+ margin-bottom: 0;
153
+ line-height: $modal-title-line-height;
154
+ }
155
+
156
+ // Modal body
157
+ // Where all modal content resides (sibling of .modal-header and .modal-footer)
158
+ .modal-body {
159
+ position: relative;
160
+ // Enable `flex-grow: 1` so that the body take up as much space as possible
161
+ // when should there be a fixed height on `.modal-dialog`.
162
+ flex: 1 1 auto;
163
+ padding: $modal-inner-padding;
164
+ }
165
+
166
+ // Footer (for actions)
167
+ .modal-footer {
168
+ display: flex;
169
+ align-items: center; // vertically center
170
+ justify-content: flex-end; // Right align buttons with flex property because text-align doesn't work on flex items
171
+ padding: $modal-inner-padding;
172
+ border-top: $modal-footer-border-width solid $modal-footer-border-color;
173
+ @include border-bottom-radius($modal-content-border-radius);
174
+
175
+ // Easily place margin between footer elements
176
+ > :not(:first-child) { margin-left: .25rem; }
177
+ > :not(:last-child) { margin-right: .25rem; }
178
+ }
179
+
180
+ // Measure scrollbar width for padding body during modal show/hide
181
+ .modal-scrollbar-measure {
182
+ position: absolute;
183
+ top: -9999px;
184
+ width: 50px;
185
+ height: 50px;
186
+ overflow: scroll;
187
+ }
188
+
189
+ // Scale up the modal
190
+ @include media-breakpoint-up(sm) {
191
+ // Automatically set modal's width for larger viewports
192
+ .modal-dialog {
193
+ max-width: $modal-md;
194
+ margin: $modal-dialog-margin-y-sm-up auto;
195
+ }
196
+
197
+ .modal-dialog-scrollable {
198
+ max-height: calc(100% - #{$modal-dialog-margin-y-sm-up * 2});
199
+
200
+ .modal-content {
201
+ max-height: calc(100vh - #{$modal-dialog-margin-y-sm-up * 2});
202
+ }
203
+ }
204
+
205
+ .modal-dialog-centered {
206
+ min-height: calc(100% - #{$modal-dialog-margin-y-sm-up * 2});
207
+
208
+ &::before {
209
+ height: calc(100vh - #{$modal-dialog-margin-y-sm-up * 2});
210
+ }
211
+ }
212
+
213
+ .modal-content {
214
+ @include box-shadow($modal-content-box-shadow-sm-up);
215
+ }
216
+
217
+ .modal-sm { max-width: $modal-sm; }
218
+ }
219
+
220
+ @include media-breakpoint-up(lg) {
221
+ .modal-lg,
222
+ .modal-xl {
223
+ max-width: $modal-lg;
224
+ }
225
+ }
226
+
227
+ @include media-breakpoint-up(xl) {
228
+ .modal-xl { max-width: $modal-xl; }
229
+ }
@@ -0,0 +1,120 @@
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
+ pointer-events: none;
26
+ cursor: default;
27
+ }
28
+ }
29
+
30
+ //
31
+ // Tabs
32
+ //
33
+
34
+ .nav-tabs {
35
+ border-bottom: $nav-tabs-border-width solid $nav-tabs-border-color;
36
+
37
+ .nav-item {
38
+ margin-bottom: -$nav-tabs-border-width;
39
+ }
40
+
41
+ .nav-link {
42
+ border: $nav-tabs-border-width solid transparent;
43
+ @include border-top-radius($nav-tabs-border-radius);
44
+
45
+ @include hover-focus {
46
+ border-color: $nav-tabs-link-hover-border-color;
47
+ }
48
+
49
+ &.disabled {
50
+ color: $nav-link-disabled-color;
51
+ background-color: transparent;
52
+ border-color: transparent;
53
+ }
54
+ }
55
+
56
+ .nav-link.active,
57
+ .nav-item.show .nav-link {
58
+ color: $nav-tabs-link-active-color;
59
+ background-color: $nav-tabs-link-active-bg;
60
+ border-color: $nav-tabs-link-active-border-color;
61
+ }
62
+
63
+ .dropdown-menu {
64
+ // Make dropdown border overlap tab border
65
+ margin-top: -$nav-tabs-border-width;
66
+ // Remove the top rounded corners here since there is a hard edge above the menu
67
+ @include border-top-radius(0);
68
+ }
69
+ }
70
+
71
+
72
+ //
73
+ // Pills
74
+ //
75
+
76
+ .nav-pills {
77
+ .nav-link {
78
+ @include border-radius($nav-pills-border-radius);
79
+ }
80
+
81
+ .nav-link.active,
82
+ .show > .nav-link {
83
+ color: $nav-pills-link-active-color;
84
+ background-color: $nav-pills-link-active-bg;
85
+ }
86
+ }
87
+
88
+
89
+ //
90
+ // Justified variants
91
+ //
92
+
93
+ .nav-fill {
94
+ .nav-item {
95
+ flex: 1 1 auto;
96
+ text-align: center;
97
+ }
98
+ }
99
+
100
+ .nav-justified {
101
+ .nav-item {
102
+ flex-basis: 0;
103
+ flex-grow: 1;
104
+ text-align: center;
105
+ }
106
+ }
107
+
108
+
109
+ // Tabbable tabs
110
+ //
111
+ // Hide tabbable panes to start, show them when `.active`
112
+
113
+ .tab-content {
114
+ > .tab-pane {
115
+ display: none;
116
+ }
117
+ > .active {
118
+ display: block;
119
+ }
120
+ }
@@ -0,0 +1,294 @@
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
+ @include 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
+ @include 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
+
121
+ // Keep as a separate element so folks can easily override it with another icon
122
+ // or image file as needed.
123
+ .navbar-toggler-icon {
124
+ display: inline-block;
125
+ width: 1.5em;
126
+ height: 1.5em;
127
+ vertical-align: middle;
128
+ content: "";
129
+ background: no-repeat center center;
130
+ background-size: 100% 100%;
131
+ }
132
+
133
+ // Generate series of `.navbar-expand-*` responsive classes for configuring
134
+ // where your navbar collapses.
135
+ .navbar-expand {
136
+ @each $breakpoint in map-keys($grid-breakpoints) {
137
+ $next: breakpoint-next($breakpoint, $grid-breakpoints);
138
+ $infix: breakpoint-infix($next, $grid-breakpoints);
139
+
140
+ &#{$infix} {
141
+ @include media-breakpoint-down($breakpoint) {
142
+ > .container,
143
+ > .container-fluid {
144
+ padding-right: 0;
145
+ padding-left: 0;
146
+ }
147
+ }
148
+
149
+ @include media-breakpoint-up($next) {
150
+ flex-flow: row nowrap;
151
+ justify-content: flex-start;
152
+
153
+ .navbar-nav {
154
+ flex-direction: row;
155
+
156
+ .dropdown-menu {
157
+ position: absolute;
158
+ }
159
+
160
+ .nav-link {
161
+ padding-right: $navbar-nav-link-padding-x;
162
+ padding-left: $navbar-nav-link-padding-x;
163
+ }
164
+ }
165
+
166
+ // For nesting containers, have to redeclare for alignment purposes
167
+ > .container,
168
+ > .container-fluid {
169
+ flex-wrap: nowrap;
170
+ }
171
+
172
+ .navbar-collapse {
173
+ display: flex !important; // stylelint-disable-line declaration-no-important
174
+
175
+ // Changes flex-bases to auto because of an IE10 bug
176
+ flex-basis: auto;
177
+ }
178
+
179
+ .navbar-toggler {
180
+ display: none;
181
+ }
182
+ }
183
+ }
184
+ }
185
+ }
186
+
187
+
188
+ // Navbar themes
189
+ //
190
+ // Styles for switching between navbars with light or dark background.
191
+
192
+ // Dark links against a light background
193
+ .navbar-light {
194
+ .navbar-brand {
195
+ color: $navbar-light-brand-color;
196
+
197
+ @include hover-focus {
198
+ color: $navbar-light-brand-hover-color;
199
+ }
200
+ }
201
+
202
+ .navbar-nav {
203
+ .nav-link {
204
+ color: $navbar-light-color;
205
+
206
+ @include hover-focus {
207
+ color: $navbar-light-hover-color;
208
+ }
209
+
210
+ &.disabled {
211
+ color: $navbar-light-disabled-color;
212
+ }
213
+ }
214
+
215
+ .show > .nav-link,
216
+ .active > .nav-link,
217
+ .nav-link.show,
218
+ .nav-link.active {
219
+ color: $navbar-light-active-color;
220
+ }
221
+ }
222
+
223
+ .navbar-toggler {
224
+ color: $navbar-light-color;
225
+ border-color: $navbar-light-toggler-border-color;
226
+ }
227
+
228
+ .navbar-toggler-icon {
229
+ background-image: $navbar-light-toggler-icon-bg;
230
+ }
231
+
232
+ .navbar-text {
233
+ color: $navbar-light-color;
234
+ a {
235
+ color: $navbar-light-active-color;
236
+
237
+ @include hover-focus {
238
+ color: $navbar-light-active-color;
239
+ }
240
+ }
241
+ }
242
+ }
243
+
244
+ // White links against a dark background
245
+ .navbar-dark {
246
+ .navbar-brand {
247
+ color: $navbar-dark-brand-color;
248
+
249
+ @include hover-focus {
250
+ color: $navbar-dark-brand-hover-color;
251
+ }
252
+ }
253
+
254
+ .navbar-nav {
255
+ .nav-link {
256
+ color: $navbar-dark-color;
257
+
258
+ @include hover-focus {
259
+ color: $navbar-dark-hover-color;
260
+ }
261
+
262
+ &.disabled {
263
+ color: $navbar-dark-disabled-color;
264
+ }
265
+ }
266
+
267
+ .show > .nav-link,
268
+ .active > .nav-link,
269
+ .nav-link.show,
270
+ .nav-link.active {
271
+ color: $navbar-dark-active-color;
272
+ }
273
+ }
274
+
275
+ .navbar-toggler {
276
+ color: $navbar-dark-color;
277
+ border-color: $navbar-dark-toggler-border-color;
278
+ }
279
+
280
+ .navbar-toggler-icon {
281
+ background-image: $navbar-dark-toggler-icon-bg;
282
+ }
283
+
284
+ .navbar-text {
285
+ color: $navbar-dark-color;
286
+ a {
287
+ color: $navbar-dark-active-color;
288
+
289
+ @include hover-focus {
290
+ color: $navbar-dark-active-color;
291
+ }
292
+ }
293
+ }
294
+ }