tabler_ui_rails 0.3.0 → 0.3.1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (143) hide show
  1. checksums.yaml +4 -4
  2. data/README.md +15 -3
  3. data/assets/javascripts/tabler_ui.js +0 -1
  4. data/assets/javascripts/vendors/bootstrap.bundle.min.js +7 -0
  5. data/assets/javascripts/vendors/chart.bundle.min.js +10 -0
  6. data/assets/javascripts/vendors/circle-progress.min.js +10 -0
  7. data/assets/javascripts/vendors/jquery-3.2.1.min.js +4 -0
  8. data/assets/javascripts/vendors/jquery-3.2.1.slim.min.js +4 -0
  9. data/assets/javascripts/vendors/jquery-jvectormap-2.0.3.min.js +2 -0
  10. data/assets/javascripts/vendors/jquery-jvectormap-de-merc.js +1 -0
  11. data/assets/javascripts/vendors/jquery-jvectormap-world-mill.js +1 -0
  12. data/assets/javascripts/vendors/jquery.sparkline.min.js +2 -0
  13. data/assets/javascripts/vendors/jquery.tablesorter.min.js +4 -0
  14. data/assets/javascripts/vendors/selectize.min.js +3829 -0
  15. data/assets/plugins/charts-c3/js/c3.min.js +1 -0
  16. data/assets/plugins/charts-c3/js/d3.v3.min.js +5 -0
  17. data/assets/plugins/charts-c3/plugin.js +10 -0
  18. data/assets/plugins/charts-c3/plugin.scss +2 -0
  19. data/assets/plugins/charts-c3/scss/_c3.scss +244 -0
  20. data/assets/plugins/fullcalendar/js/fullcalendar.min.js +7 -0
  21. data/assets/plugins/fullcalendar/js/moment.min.js +1 -0
  22. data/assets/plugins/fullcalendar/plugin.js +9 -0
  23. data/assets/plugins/fullcalendar/plugin.scss +2 -0
  24. data/assets/plugins/fullcalendar/scss/_fullcalendar.scss +1118 -0
  25. data/assets/plugins/iconfonts/fonts/materialdesignicons/materialdesignicons-webfont.eot +0 -0
  26. data/assets/plugins/iconfonts/fonts/materialdesignicons/materialdesignicons-webfont.svg +6150 -0
  27. data/assets/plugins/iconfonts/fonts/materialdesignicons/materialdesignicons-webfont.ttf +0 -0
  28. data/assets/plugins/iconfonts/fonts/materialdesignicons/materialdesignicons-webfont.woff +0 -0
  29. data/assets/plugins/iconfonts/fonts/materialdesignicons/materialdesignicons-webfont.woff2 +0 -0
  30. data/assets/plugins/iconfonts/fonts/simple-line-icons/Simple-Line-Icons.eot +0 -0
  31. data/assets/plugins/iconfonts/fonts/simple-line-icons/Simple-Line-Icons.svg +1 -0
  32. data/assets/plugins/iconfonts/fonts/simple-line-icons/Simple-Line-Icons.ttf +0 -0
  33. data/assets/plugins/iconfonts/fonts/simple-line-icons/Simple-Line-Icons.woff +0 -0
  34. data/assets/plugins/iconfonts/fonts/simple-line-icons/Simple-Line-Icons.woff2 +0 -0
  35. data/assets/plugins/iconfonts/fonts/themify/themify.eot +0 -0
  36. data/assets/plugins/iconfonts/fonts/themify/themify.svg +362 -0
  37. data/assets/plugins/iconfonts/fonts/themify/themify.ttf +0 -0
  38. data/assets/plugins/iconfonts/fonts/themify/themify.woff +0 -0
  39. data/assets/plugins/iconfonts/fonts/weathericons/weathericons-regular-webfont.eot +0 -0
  40. data/assets/plugins/iconfonts/fonts/weathericons/weathericons-regular-webfont.svg +1 -0
  41. data/assets/plugins/iconfonts/fonts/weathericons/weathericons-regular-webfont.ttf +0 -0
  42. data/assets/plugins/iconfonts/fonts/weathericons/weathericons-regular-webfont.woff +0 -0
  43. data/assets/plugins/iconfonts/fonts/weathericons/weathericons-regular-webfont.woff2 +0 -0
  44. data/assets/plugins/iconfonts/plugin.scss +4 -0
  45. data/assets/plugins/iconfonts/scss/_materialdesignicons.scss +8445 -0
  46. data/assets/plugins/iconfonts/scss/_simple-line-icons.scss +779 -0
  47. data/assets/plugins/iconfonts/scss/_themify.scss +1081 -0
  48. data/assets/plugins/iconfonts/scss/_weathericons.scss +1823 -0
  49. data/assets/plugins/input-mask/js/jquery.mask.min.js +19 -0
  50. data/assets/plugins/input-mask/plugin.js +8 -0
  51. data/assets/plugins/maps-google/plugin.js +0 -0
  52. data/assets/plugins/maps-google/plugin.scss +0 -0
  53. data/assets/plugins/prismjs/js/prism.pack.js +30 -0
  54. data/assets/plugins/prismjs/plugin.js +18 -0
  55. data/assets/plugins/prismjs/plugin.scss +227 -0
  56. data/assets/stylesheets/dashboard/_progress.scss +2 -2
  57. data/assets/stylesheets/dashboard/forms/_custom-selectgroup.scss +2 -3
  58. data/lib/tabler_ui_rails/engine.rb +1 -1
  59. data/lib/tabler_ui_rails/version.rb +2 -2
  60. metadata +72 -89
  61. data/assets/stylesheets/dashboard/bootstrap/_alert.scss +0 -51
  62. data/assets/stylesheets/dashboard/bootstrap/_badge.scss +0 -47
  63. data/assets/stylesheets/dashboard/bootstrap/_breadcrumb.scss +0 -38
  64. data/assets/stylesheets/dashboard/bootstrap/_button-group.scss +0 -166
  65. data/assets/stylesheets/dashboard/bootstrap/_buttons.scss +0 -143
  66. data/assets/stylesheets/dashboard/bootstrap/_card.scss +0 -299
  67. data/assets/stylesheets/dashboard/bootstrap/_carousel.scss +0 -235
  68. data/assets/stylesheets/dashboard/bootstrap/_close.scss +0 -34
  69. data/assets/stylesheets/dashboard/bootstrap/_code.scss +0 -56
  70. data/assets/stylesheets/dashboard/bootstrap/_custom-forms.scss +0 -420
  71. data/assets/stylesheets/dashboard/bootstrap/_dropdown.scss +0 -138
  72. data/assets/stylesheets/dashboard/bootstrap/_forms.scss +0 -335
  73. data/assets/stylesheets/dashboard/bootstrap/_functions.scss +0 -86
  74. data/assets/stylesheets/dashboard/bootstrap/_grid.scss +0 -52
  75. data/assets/stylesheets/dashboard/bootstrap/_images.scss +0 -42
  76. data/assets/stylesheets/dashboard/bootstrap/_input-group.scss +0 -159
  77. data/assets/stylesheets/dashboard/bootstrap/_jumbotron.scss +0 -16
  78. data/assets/stylesheets/dashboard/bootstrap/_list-group.scss +0 -115
  79. data/assets/stylesheets/dashboard/bootstrap/_media.scss +0 -8
  80. data/assets/stylesheets/dashboard/bootstrap/_mixins.scss +0 -42
  81. data/assets/stylesheets/dashboard/bootstrap/_modal.scss +0 -168
  82. data/assets/stylesheets/dashboard/bootstrap/_nav.scss +0 -118
  83. data/assets/stylesheets/dashboard/bootstrap/_navbar.scss +0 -311
  84. data/assets/stylesheets/dashboard/bootstrap/_pagination.scss +0 -78
  85. data/assets/stylesheets/dashboard/bootstrap/_popover.scss +0 -183
  86. data/assets/stylesheets/dashboard/bootstrap/_print.scss +0 -124
  87. data/assets/stylesheets/dashboard/bootstrap/_progress.scss +0 -34
  88. data/assets/stylesheets/dashboard/bootstrap/_reboot.scss +0 -482
  89. data/assets/stylesheets/dashboard/bootstrap/_root.scss +0 -19
  90. data/assets/stylesheets/dashboard/bootstrap/_tables.scss +0 -188
  91. data/assets/stylesheets/dashboard/bootstrap/_tooltip.scss +0 -115
  92. data/assets/stylesheets/dashboard/bootstrap/_transitions.scss +0 -36
  93. data/assets/stylesheets/dashboard/bootstrap/_type.scss +0 -125
  94. data/assets/stylesheets/dashboard/bootstrap/_utilities.scss +0 -14
  95. data/assets/stylesheets/dashboard/bootstrap/_variables.scss +0 -919
  96. data/assets/stylesheets/dashboard/bootstrap/bootstrap-grid.scss +0 -32
  97. data/assets/stylesheets/dashboard/bootstrap/bootstrap-reboot.scss +0 -12
  98. data/assets/stylesheets/dashboard/bootstrap/bootstrap.scss +0 -42
  99. data/assets/stylesheets/dashboard/bootstrap/mixins/_alert.scss +0 -13
  100. data/assets/stylesheets/dashboard/bootstrap/mixins/_background-variant.scss +0 -21
  101. data/assets/stylesheets/dashboard/bootstrap/mixins/_badge.scss +0 -12
  102. data/assets/stylesheets/dashboard/bootstrap/mixins/_border-radius.scss +0 -35
  103. data/assets/stylesheets/dashboard/bootstrap/mixins/_box-shadow.scss +0 -5
  104. data/assets/stylesheets/dashboard/bootstrap/mixins/_breakpoints.scss +0 -123
  105. data/assets/stylesheets/dashboard/bootstrap/mixins/_buttons.scss +0 -109
  106. data/assets/stylesheets/dashboard/bootstrap/mixins/_caret.scss +0 -65
  107. data/assets/stylesheets/dashboard/bootstrap/mixins/_clearfix.scss +0 -7
  108. data/assets/stylesheets/dashboard/bootstrap/mixins/_float.scss +0 -11
  109. data/assets/stylesheets/dashboard/bootstrap/mixins/_forms.scss +0 -137
  110. data/assets/stylesheets/dashboard/bootstrap/mixins/_gradients.scss +0 -45
  111. data/assets/stylesheets/dashboard/bootstrap/mixins/_grid-framework.scss +0 -67
  112. data/assets/stylesheets/dashboard/bootstrap/mixins/_grid.scss +0 -52
  113. data/assets/stylesheets/dashboard/bootstrap/mixins/_hover.scss +0 -37
  114. data/assets/stylesheets/dashboard/bootstrap/mixins/_image.scss +0 -36
  115. data/assets/stylesheets/dashboard/bootstrap/mixins/_list-group.scss +0 -21
  116. data/assets/stylesheets/dashboard/bootstrap/mixins/_lists.scss +0 -7
  117. data/assets/stylesheets/dashboard/bootstrap/mixins/_nav-divider.scss +0 -10
  118. data/assets/stylesheets/dashboard/bootstrap/mixins/_navbar-align.scss +0 -10
  119. data/assets/stylesheets/dashboard/bootstrap/mixins/_pagination.scss +0 -22
  120. data/assets/stylesheets/dashboard/bootstrap/mixins/_reset-text.scss +0 -17
  121. data/assets/stylesheets/dashboard/bootstrap/mixins/_resize.scss +0 -6
  122. data/assets/stylesheets/dashboard/bootstrap/mixins/_screen-reader.scss +0 -33
  123. data/assets/stylesheets/dashboard/bootstrap/mixins/_size.scss +0 -6
  124. data/assets/stylesheets/dashboard/bootstrap/mixins/_table-row.scss +0 -30
  125. data/assets/stylesheets/dashboard/bootstrap/mixins/_text-emphasis.scss +0 -14
  126. data/assets/stylesheets/dashboard/bootstrap/mixins/_text-hide.scss +0 -9
  127. data/assets/stylesheets/dashboard/bootstrap/mixins/_text-truncate.scss +0 -8
  128. data/assets/stylesheets/dashboard/bootstrap/mixins/_transition.scss +0 -9
  129. data/assets/stylesheets/dashboard/bootstrap/mixins/_visibility.scss +0 -7
  130. data/assets/stylesheets/dashboard/bootstrap/utilities/_align.scss +0 -8
  131. data/assets/stylesheets/dashboard/bootstrap/utilities/_background.scss +0 -19
  132. data/assets/stylesheets/dashboard/bootstrap/utilities/_borders.scss +0 -59
  133. data/assets/stylesheets/dashboard/bootstrap/utilities/_clearfix.scss +0 -3
  134. data/assets/stylesheets/dashboard/bootstrap/utilities/_display.scss +0 -38
  135. data/assets/stylesheets/dashboard/bootstrap/utilities/_embed.scss +0 -52
  136. data/assets/stylesheets/dashboard/bootstrap/utilities/_flex.scss +0 -47
  137. data/assets/stylesheets/dashboard/bootstrap/utilities/_float.scss +0 -9
  138. data/assets/stylesheets/dashboard/bootstrap/utilities/_position.scss +0 -37
  139. data/assets/stylesheets/dashboard/bootstrap/utilities/_screenreaders.scss +0 -11
  140. data/assets/stylesheets/dashboard/bootstrap/utilities/_sizing.scss +0 -12
  141. data/assets/stylesheets/dashboard/bootstrap/utilities/_spacing.scss +0 -51
  142. data/assets/stylesheets/dashboard/bootstrap/utilities/_text.scss +0 -52
  143. data/assets/stylesheets/dashboard/bootstrap/utilities/_visibility.scss +0 -11
@@ -1,8 +0,0 @@
1
- .media {
2
- display: flex;
3
- align-items: flex-start;
4
- }
5
-
6
- .media-body {
7
- flex: 1 1 auto;
8
- }
@@ -1,42 +0,0 @@
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/navbar-align";
40
- @import "mixins/grid-framework";
41
- @import "mixins/grid";
42
- @import "mixins/float";
@@ -1,168 +0,0 @@
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
- // Kill the scroll on the body
8
- .modal-open {
9
- overflow: hidden;
10
- }
11
-
12
- // Container that the modal scrolls within
13
- .modal {
14
- position: fixed;
15
- top: 0;
16
- right: 0;
17
- bottom: 0;
18
- left: 0;
19
- z-index: $zindex-modal;
20
- display: none;
21
- overflow: hidden;
22
- // Prevent Chrome on Windows from adding a focus outline. For details, see
23
- // https://github.com/twbs/bootstrap/pull/10951.
24
- outline: 0;
25
- // We deliberately don't use `-webkit-overflow-scrolling: touch;` due to a
26
- // gnarly iOS Safari bug: https://bugs.webkit.org/show_bug.cgi?id=158342
27
- // See also https://github.com/twbs/bootstrap/issues/17695
28
-
29
- .modal-open & {
30
- overflow-x: hidden;
31
- overflow-y: auto;
32
- }
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
-
59
- // Actual modal
60
- .modal-content {
61
- position: relative;
62
- display: flex;
63
- flex-direction: column;
64
- width: 100%; // Ensure `.modal-content` extends the full width of the parent `.modal-dialog`
65
- // counteract the pointer-events: none; in the .modal-dialog
66
- pointer-events: auto;
67
- background-color: $modal-content-bg;
68
- background-clip: padding-box;
69
- border: $modal-content-border-width solid $modal-content-border-color;
70
- @include border-radius($border-radius-lg);
71
- @include box-shadow($modal-content-box-shadow-xs);
72
- // Remove focus outline from opened modal
73
- outline: 0;
74
- }
75
-
76
- // Modal background
77
- .modal-backdrop {
78
- position: fixed;
79
- top: 0;
80
- right: 0;
81
- bottom: 0;
82
- left: 0;
83
- z-index: $zindex-modal-backdrop;
84
- background-color: $modal-backdrop-bg;
85
-
86
- // Fade for backdrop
87
- &.fade { opacity: 0; }
88
- &.show { opacity: $modal-backdrop-opacity; }
89
- }
90
-
91
- // Modal header
92
- // Top section of the modal w/ title and dismiss
93
- .modal-header {
94
- display: flex;
95
- align-items: flex-start; // so the close btn always stays on the upper right corner
96
- justify-content: space-between; // Put modal header elements (title and dismiss) on opposite ends
97
- padding: $modal-header-padding;
98
- border-bottom: $modal-header-border-width solid $modal-header-border-color;
99
- @include border-top-radius($border-radius-lg);
100
-
101
- .close {
102
- padding: $modal-header-padding;
103
- // auto on the left force icon to the right even when there is no .modal-title
104
- margin: (-$modal-header-padding) (-$modal-header-padding) (-$modal-header-padding) auto;
105
- }
106
- }
107
-
108
- // Title text within header
109
- .modal-title {
110
- margin-bottom: 0;
111
- line-height: $modal-title-line-height;
112
- }
113
-
114
- // Modal body
115
- // Where all modal content resides (sibling of .modal-header and .modal-footer)
116
- .modal-body {
117
- position: relative;
118
- // Enable `flex-grow: 1` so that the body take up as much space as possible
119
- // when should there be a fixed height on `.modal-dialog`.
120
- flex: 1 1 auto;
121
- padding: $modal-inner-padding;
122
- }
123
-
124
- // Footer (for actions)
125
- .modal-footer {
126
- display: flex;
127
- align-items: center; // vertically center
128
- justify-content: flex-end; // Right align buttons with flex property because text-align doesn't work on flex items
129
- padding: $modal-inner-padding;
130
- border-top: $modal-footer-border-width solid $modal-footer-border-color;
131
-
132
- // Easily place margin between footer elements
133
- > :not(:first-child) { margin-left: .25rem; }
134
- > :not(:last-child) { margin-right: .25rem; }
135
- }
136
-
137
- // Measure scrollbar width for padding body during modal show/hide
138
- .modal-scrollbar-measure {
139
- position: absolute;
140
- top: -9999px;
141
- width: 50px;
142
- height: 50px;
143
- overflow: scroll;
144
- }
145
-
146
- // Scale up the modal
147
- @include media-breakpoint-up(sm) {
148
- // Automatically set modal's width for larger viewports
149
- .modal-dialog {
150
- max-width: $modal-md;
151
- margin: $modal-dialog-margin-y-sm-up auto;
152
- }
153
-
154
- .modal-dialog-centered {
155
- min-height: calc(100% - (#{$modal-dialog-margin-y-sm-up} * 2));
156
- }
157
-
158
- .modal-content {
159
- @include box-shadow($modal-content-box-shadow-sm-up);
160
- }
161
-
162
- .modal-sm { max-width: $modal-sm; }
163
-
164
- }
165
-
166
- @include media-breakpoint-up(lg) {
167
- .modal-lg { max-width: $modal-lg; }
168
- }
@@ -1,118 +0,0 @@
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
- }
@@ -1,311 +0,0 @@
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 properities 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 orienation. 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
- .dropdown-menu-right {
166
- right: 0;
167
- left: auto; // Reset the default from `.dropdown-menu`
168
- }
169
-
170
- .nav-link {
171
- padding-right: $navbar-nav-link-padding-x;
172
- padding-left: $navbar-nav-link-padding-x;
173
- }
174
- }
175
-
176
- // For nesting containers, have to redeclare for alignment purposes
177
- > .container,
178
- > .container-fluid {
179
- flex-wrap: nowrap;
180
- }
181
-
182
- .navbar-collapse {
183
- display: flex !important; // stylelint-disable-line declaration-no-important
184
-
185
- // Changes flex-bases to auto because of an IE10 bug
186
- flex-basis: auto;
187
- }
188
-
189
- .navbar-toggler {
190
- display: none;
191
- }
192
-
193
- .dropup {
194
- .dropdown-menu {
195
- top: auto;
196
- bottom: 100%;
197
- }
198
- }
199
- }
200
- }
201
- }
202
- }
203
-
204
-
205
- // Navbar themes
206
- //
207
- // Styles for switching between navbars with light or dark background.
208
-
209
- // Dark links against a light background
210
- .navbar-light {
211
- .navbar-brand {
212
- color: $navbar-light-active-color;
213
-
214
- @include hover-focus {
215
- color: $navbar-light-active-color;
216
- }
217
- }
218
-
219
- .navbar-nav {
220
- .nav-link {
221
- color: $navbar-light-color;
222
-
223
- @include hover-focus {
224
- color: $navbar-light-hover-color;
225
- }
226
-
227
- &.disabled {
228
- color: $navbar-light-disabled-color;
229
- }
230
- }
231
-
232
- .show > .nav-link,
233
- .active > .nav-link,
234
- .nav-link.show,
235
- .nav-link.active {
236
- color: $navbar-light-active-color;
237
- }
238
- }
239
-
240
- .navbar-toggler {
241
- color: $navbar-light-color;
242
- border-color: $navbar-light-toggler-border-color;
243
- }
244
-
245
- .navbar-toggler-icon {
246
- background-image: $navbar-light-toggler-icon-bg;
247
- }
248
-
249
- .navbar-text {
250
- color: $navbar-light-color;
251
- a {
252
- color: $navbar-light-active-color;
253
-
254
- @include hover-focus {
255
- color: $navbar-light-active-color;
256
- }
257
- }
258
- }
259
- }
260
-
261
- // White links against a dark background
262
- .navbar-dark {
263
- .navbar-brand {
264
- color: $navbar-dark-active-color;
265
-
266
- @include hover-focus {
267
- color: $navbar-dark-active-color;
268
- }
269
- }
270
-
271
- .navbar-nav {
272
- .nav-link {
273
- color: $navbar-dark-color;
274
-
275
- @include hover-focus {
276
- color: $navbar-dark-hover-color;
277
- }
278
-
279
- &.disabled {
280
- color: $navbar-dark-disabled-color;
281
- }
282
- }
283
-
284
- .show > .nav-link,
285
- .active > .nav-link,
286
- .nav-link.show,
287
- .nav-link.active {
288
- color: $navbar-dark-active-color;
289
- }
290
- }
291
-
292
- .navbar-toggler {
293
- color: $navbar-dark-color;
294
- border-color: $navbar-dark-toggler-border-color;
295
- }
296
-
297
- .navbar-toggler-icon {
298
- background-image: $navbar-dark-toggler-icon-bg;
299
- }
300
-
301
- .navbar-text {
302
- color: $navbar-dark-color;
303
- a {
304
- color: $navbar-dark-active-color;
305
-
306
- @include hover-focus {
307
- color: $navbar-dark-active-color;
308
- }
309
- }
310
- }
311
- }